@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

*{
  font-family: "Oswald", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}


html {
  scroll-behavior: smooth;
}

/* Optional: Adjust scroll position when clicking links */
section[id],
.naureen-about,
.naureen-location-footer {
  scroll-margin-top: 100px; /* Change 100px to your header height */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* =========================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   LIGHT BLUSH + DARK BANNER THEME
   ========================================= */


/* =========================================
   COLOR PALETTE
   ========================================= */

:root {
  --naureen-blush: #F7D6D0;
  --naureen-rose: #E2B4BD;

  /* Darker supporting shade */
  --naureen-dark: #632F3D;

  /* Very dark rose for strong contrast */
  --naureen-deep: #45212C;

  --naureen-white: #FFFFFF;

  --naureen-gold: #D4AF37;
}

/* =========================================
   NAUREEN'S HERO SECTION
   LIGHT BLUSH + DARK PHOTOGRAPHIC TINT
   EYE-CATCHING VERSION
   ========================================= */

#home.naureen-hero {

  position: relative !important;

  /* Slightly taller hero */
  min-height: 900px !important;
  height: 900px !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  background-image:
    url('imgs/banner.png?v=20251022') !important;

  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;

  overflow: hidden !important;
}


/* =========================================
   LIGHT BLUSH TINT
   SAME COLOR AS HEADER
   ========================================= */

#home.naureen-hero::before {

  content: "" !important;

  position: absolute !important;
  inset: 0 !important;

  /* Header color */
  background:
    rgba(247, 214, 208, 0.58) !important;

  z-index: 1 !important;

  pointer-events: none !important;
}




/* =========================================
   HERO CONTENT
   MORE PADDING / BREATHING ROOM
   ========================================= */

#home.naureen-hero > .naureen-hero-content {

  position: relative !important;

  z-index: 10 !important;

  width: 100% !important;

  padding-top: 9rem !important;
  padding-bottom: 9rem !important;

  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
}


/* =========================================
   TAGLINE BADGE
   ========================================= */

#home.naureen-hero .naureen-hero-badge {

  color: #632F3D !important;

  background:
    #F7D6D0 !important;

  border:
    2px solid #E2B4BD !important;

  padding:
    0.65rem 1.25rem !important;

  box-shadow:
    0 8px 25px rgba(0, 0, 0, 0.30) !important;

  font-weight:
    800 !important;

  letter-spacing:
    0.02em !important;
}


/* Sparkle */

#home.naureen-hero .naureen-hero-badge i {

  color:
    #D4AF37 !important;

  font-size:
    1.1rem !important;
}


/* =========================================
   MAIN TITLE
   ========================================= */

#home.naureen-hero .naureen-hero-title {

  color:
    #F7D6D0 !important;

  -webkit-text-fill-color:
    #F7D6D0 !important;

  margin-bottom:
    1.5rem !important;

  text-shadow:
    0 4px 15px rgba(0, 0, 0, 0.85) !important;
}


/* =========================================
   DESCRIPTION
   ========================================= */

#home.naureen-hero .naureen-hero-description {

  color:
    #FFFFFF !important;

  -webkit-text-fill-color:
    #FFFFFF !important;

  margin-bottom:
    2.5rem !important;

  line-height:
    1.7 !important;

  text-shadow:
    0 3px 10px rgba(0, 0, 0, 0.85) !important;
}


/* =========================================
   BUTTON CONTAINER
   ========================================= */

#home.naureen-hero .naureen-hero-content > div:last-child {

  margin-top:
    1rem !important;
}


/* =========================================
   CALL BUTTON
   ========================================= */

#home.naureen-hero a[href^="tel:"] {

  background:
    #E2B4BD !important;

  color:
    #45212C !important;

  border:
    2px solid #F7D6D0 !important;

  padding:
    1rem 2rem !important;

  min-height:
    56px !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.38) !important;

  font-weight:
    800 !important;

  transition:
    all 0.3s ease !important;
}


#home.naureen-hero a[href^="tel:"]:hover {

  background:
    #F7D6D0 !important;

  color:
    #45212C !important;

  transform:
    translateY(-3px) !important;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.45) !important;
}


/* Phone icon */

#home.naureen-hero a[href^="tel:"] i {

  color:
    #45212C !important;
}


/* =========================================
   SERVICES BUTTON
   ========================================= */

#home.naureen-hero a[href="#services"] {

  color:
    #45212C !important;

  background:
    #F7D6D0 !important;

  border:
    2px solid #E2B4BD !important;

  padding:
    1rem 2rem !important;

  min-height:
    56px !important;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.32) !important;

  font-weight:
    800 !important;

  transition:
    all 0.3s ease !important;
}


#home.naureen-hero a[href="#services"]:hover {

  background:
    #E2B4BD !important;

  color:
    #45212C !important;

  transform:
    translateY(-3px) !important;

  box-shadow:
    0 14px 32px rgba(0, 0, 0, 0.42) !important;
}


/* Arrow */

#home.naureen-hero a[href="#services"] i {

  color:
    #632F3D !important;
}


/* =========================================
   TABLET
   ========================================= */

@media (min-width: 768px) {

  #home.naureen-hero {

    min-height:
      850px !important;

    height:
      850px !important;
  }


  #home.naureen-hero > .naureen-hero-content {

    padding-top:
      8rem !important;

    padding-bottom:
      8rem !important;
  }

}


/* =========================================
   LARGE DESKTOP
   ========================================= */

@media (min-width: 1024px) {

  #home.naureen-hero {

    min-height:
      900px !important;

    height:
      900px !important;
  }


  #home.naureen-hero > .naureen-hero-content {

    padding-top:
      10rem !important;

    padding-bottom:
      10rem !important;

    padding-left:
      2rem !important;

    padding-right:
      2rem !important;
  }

}


/* =========================================
   EXTRA LARGE DESKTOP
   ========================================= */

@media (min-width: 1280px) {

  #home.naureen-hero {

    min-height:
      920px !important;

    height:
      920px !important;
  }

}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  #home.naureen-hero {

    min-height:
      720px !important;

    height:
      720px !important;
  }


  #home.naureen-hero > .naureen-hero-content {

    padding-top:
      7rem !important;

    padding-bottom:
      7rem !important;

    padding-left:
      1.25rem !important;

    padding-right:
      1.25rem !important;
  }


  #home.naureen-hero .naureen-hero-title {

    text-shadow:
      0 3px 12px rgba(0, 0, 0, 0.85) !important;
  }


  #home.naureen-hero .naureen-hero-description {

    line-height:
      1.6 !important;
  }

}

 :root {
      /* Brand Color Palette */
      --color-rose-gold: #E2B4BD;
      --color-rose-gold-light: #f7e6e9;
      --color-rose-gold-glow: rgba(226, 180, 189, 0.6);
      --color-burgundy: #45212C;
      --color-burgundy-light: #623241;
      
      /* Light Glass Header Theme */
      --header-bg-light: rgba(253, 248, 249, 0.82);
      --header-border-light: rgba(226, 180, 189, 0.45);
      --header-shadow-light: 0 10px 30px -10px rgba(69, 33, 44, 0.12), 0 0 20px 0 rgba(226, 180, 189, 0.15);
      
      /* Typography */
      --font-primary: 'Plus Jakarta Sans', sans-serif;
      --font-display: 'Playfair Display', serif;
    }

    * {
      box-sizing: border-box;
      margin: 0;
      padding: 0;
    }

    body {
      font-family: var(--font-primary);
      background-color: #fcf6f7;
      color: var(--color-burgundy);
      min-height: 200vh; /* Scrollable canvas for glassmorphism preview */
      background-image: 
        radial-gradient(circle at 10% 20%, rgba(226, 180, 189, 0.25) 0%, transparent 40%),
        radial-gradient(circle at 90% 60%, rgba(69, 33, 44, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 50% 90%, rgba(226, 180, 189, 0.2) 0%, transparent 40%);
    }

    /* Keyframe Animations */
    @keyframes shimmerSweep {
      0% { transform: translateX(-150%) skewX(-20deg); }
      100% { transform: translateX(200%) skewX(-20deg); }
    }

    @keyframes pulseGlow {
      0%, 100% {
        box-shadow: 0 0 15px var(--color-rose-gold-glow), 0 0 30px rgba(226, 180, 189, 0.3);
      }
      50% {
        box-shadow: 0 0 25px var(--color-rose-gold-glow), 0 0 45px rgba(226, 180, 189, 0.6);
      }
    }

    @keyframes floatSparkle {
      0% { transform: scale(0) rotate(0deg); opacity: 0; }
      50% { transform: scale(1.2) rotate(180deg); opacity: 1; }
      100% { transform: scale(0) rotate(360deg); opacity: 0; }
    }

    @keyframes arrowBounce {
      0%, 100% { transform: translateX(0); }
      50% { transform: translateX(5px); }
    }

    /* Header Base - Lighter Glassmorphism 2026 Style */
    #naureen-header {
      position: sticky;
      top: 12px;
      z-index: 1000;
      width: 95%;
      max-width: 1280px;
      margin: 0 auto;
      background: var(--header-bg-light);
      backdrop-filter: blur(20px);
      -webkit-backdrop-filter: blur(20px);
      border: 1px solid var(--header-border-light);
      border-radius: 99px;
      box-shadow: var(--header-shadow-light);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    }

    #naureen-header.scrolled {
      top: 6px;
      background: rgba(255, 255, 255, 0.92);
      border-color: rgba(226, 180, 189, 0.6);
      box-shadow: 0 12px 35px -8px rgba(69, 33, 44, 0.16), 0 0 15px rgba(226, 180, 189, 0.25);
    }

    .nav-wrapper {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.6rem 1.5rem;
      position: relative;
    }

    /* Brand Logo Area */
    .brand-logo-link {
      display: flex;
      align-items: center;
      gap: 12px;
      text-decoration: none;
      position: relative;
      z-index: 10;
    }

    .logo-container {
      position: relative;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: linear-gradient(135deg, var(--color-burgundy), #2a131b);
      display: flex;
      align-items: center;
      justify-content: center;
      border: 2px solid var(--color-rose-gold);
      box-shadow: 0 4px 12px rgba(69, 33, 44, 0.2);
      transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    .logo-monogram {
      font-family: var(--font-display);
      font-size: 1.5rem;
      font-weight: 600;
      color: var(--color-rose-gold);
      font-style: italic;
    }

    .brand-title {
      font-family: var(--font-display);
      font-size: 1.15rem;
      font-weight: 600;
      color: var(--color-burgundy);
      letter-spacing: -0.01em;
      line-height: 1.1;
    }

    .brand-subtitle {
      font-family: var(--font-primary);
      font-size: 0.68rem;
      font-weight: 700;
      color: var(--color-burgundy-light);
      text-transform: uppercase;
      letter-spacing: 0.15em;
      opacity: 0.8;
    }

    .brand-logo-link:hover .logo-container {
      transform: scale(1.08) rotate(-4deg);
      box-shadow: 0 6px 18px var(--color-rose-gold-glow);
    }

    /* Desktop Navigation */
    .desktop-nav {
      display: none;
    }

    @media (min-width: 868px) {
      .desktop-nav {
        display: block;
      }
    }

    .nav-list {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      list-style: none;
      background: rgba(226, 180, 189, 0.15);
      padding: 0.25rem 0.4rem;
      border-radius: 99px;
      border: 1px solid rgba(226, 180, 189, 0.3);
    }

    .nav-item-link {
      position: relative;
      display: block;
      padding: 0.55rem 1.25rem;
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--color-burgundy);
      text-decoration: none;
      border-radius: 99px;
      transition: color 0.3s ease;
    }

    .nav-item-link::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 99px;
      background: var(--color-burgundy);
      opacity: 0;
      transform: scale(0.85);
      transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
      z-index: 1;
    }

    .nav-item-text {
      position: relative;
      z-index: 2;
    }

    .nav-item-link:hover::before,
    .nav-item-link.active::before {
      opacity: 1;
      transform: scale(1);
    }

    .nav-item-link:hover,
    .nav-item-link.active {
      color: var(--color-rose-gold-light);
    }

    /* FANCY ANIMATED "BOOK NOW" BUTTON */
    .book-btn-container {
      position: relative;
      display: inline-block;
      z-index: 10;
    }

    .book-now-btn {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 0.7rem 1.6rem;
      font-family: var(--font-primary);
      font-weight: 800;
      font-size: 0.9rem;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #ffffff;
      background: linear-gradient(135deg, var(--color-burgundy) 0%, #2c121b 100%);
      border: 1px solid var(--color-rose-gold);
      border-radius: 99px;
      text-decoration: none;
      cursor: pointer;
      overflow: hidden;
      box-shadow: 0 4px 15px rgba(69, 33, 44, 0.25);
      transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    /* Glowing Dual Layer Aura Ring on Hover */
    .book-btn-aura {
      position: absolute;
      inset: -3px;
      border-radius: 99px;
      background: linear-gradient(135deg, var(--color-rose-gold), var(--color-burgundy));
      opacity: 0;
      filter: blur(8px);
      transition: opacity 0.4s ease;
      z-index: -1;
    }

    /* Shimmer Effect */
    .book-now-btn::after {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      width: 60%;
      height: 100%;
      background: linear-gradient(
        90deg, 
        transparent, 
        rgba(255, 255, 255, 0.4), 
        transparent
      );
      transform: translateX(-150%) skewX(-20deg);
      pointer-events: none;
    }

    /* Button Hover States */
    .book-btn-container:hover .book-now-btn {
      transform: translateY(-2px) scale(1.04);
      border-color: #ffffff;
      box-shadow: 0 8px 25px rgba(69, 33, 44, 0.35);
    }

    .book-btn-container:hover .book-btn-aura {
      opacity: 1;
      animation: pulseGlow 2s infinite ease-in-out;
    }

    .book-btn-container:hover .book-now-btn::after {
      animation: shimmerSweep 1.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    }

    /* Arrow Bounce Animation */
    .book-btn-arrow {
      width: 16px;
      height: 16px;
      fill: none;
      stroke: var(--color-rose-gold);
      stroke-width: 2.5;
      stroke-linecap: round;
      stroke-linejoin: round;
      transition: stroke 0.3s ease;
    }

    .book-btn-container:hover .book-btn-arrow {
      stroke: #ffffff;
      animation: arrowBounce 0.8s infinite ease-in-out;
    }

    /* Sparkle Particle Accents */
    .sparkle {
      position: absolute;
      width: 8px;
      height: 8px;
      pointer-events: none;
      opacity: 0;
    }

    .sparkle-1 { top: -4px; right: 15px; }
    .sparkle-2 { bottom: -4px; left: 20px; }

    .sparkle svg {
      width: 100%;
      height: 100%;
      fill: var(--color-rose-gold);
    }

    .book-btn-container:hover .sparkle-1 {
      animation: floatSparkle 1s 0.1s ease-in-out infinite;
    }

    .book-btn-container:hover .sparkle-2 {
      animation: floatSparkle 1.2s 0.4s ease-in-out infinite;
    }

    /* HIGH-VISIBILITY MOBILE HAMBURGER BUTTON */
    .mobile-hamburger-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      background: var(--color-burgundy);
      border: 2px solid var(--color-rose-gold);
      border-radius: 50%;
      cursor: pointer;
      position: relative;
      z-index: 1001; /* Extremely high z-index to stay visible above mobile menus */
      box-shadow: 0 4px 12px rgba(69, 33, 44, 0.25);
      transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @media (min-width: 868px) {
      .mobile-hamburger-btn {
        display: none;
      }
    }

    .mobile-hamburger-btn:hover {
      transform: scale(1.08);
      background: #2c121b;
      box-shadow: 0 6px 18px var(--color-rose-gold-glow);
    }

    .hamburger-icon-box {
      width: 22px;
      height: 16px;
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }

    /* Bold, high-contrast burger lines */
    .burger-line {
      display: block;
      width: 100%;
      height: 3px;
      background-color: var(--color-rose-gold);
      border-radius: 4px;
      transition: all 0.35s cubic-bezier(0.68, -0.6, 0.32, 1.6);
    }

    /* Animated Morphing to "X" Cross */
    .mobile-hamburger-btn.active .burger-line-1 {
      transform: translateY(6.5px) rotate(45deg);
      background-color: #ffffff;
    }

    .mobile-hamburger-btn.active .burger-line-2 {
      opacity: 0;
      transform: translateX(-10px);
    }

    .mobile-hamburger-btn.active .burger-line-3 {
      transform: translateY(-6.5px) rotate(-45deg);
      background-color: #ffffff;
    }

    /* MOBILE EXPANDABLE MENU DRAWER */
    .mobile-drawer {
      position: absolute;
      top: 100%;
      left: 0;
      right: 0;
      margin-top: 10px;
      background: rgba(253, 248, 249, 0.96);
      backdrop-filter: blur(25px);
      -webkit-backdrop-filter: blur(25px);
      border: 1px solid var(--header-border-light);
      border-radius: 24px;
      padding: 0;
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      box-shadow: 0 20px 40px rgba(69, 33, 44, 0.2);
      transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
      visibility: hidden;
    }

    .mobile-drawer.open {
      max-height: 420px;
      padding: 1.25rem;
      opacity: 1;
      visibility: visible;
    }

    .mobile-menu-list {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 0.6rem;
    }

    .mobile-menu-link {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0.85rem 1.25rem;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--color-burgundy);
      text-decoration: none;
      background: rgba(226, 180, 189, 0.12);
      border: 1px solid rgba(226, 180, 189, 0.25);
      border-radius: 16px;
      transition: all 0.3s ease;
    }

    .mobile-menu-link:hover,
    .mobile-menu-link.active {
      background: var(--color-burgundy);
      color: var(--color-rose-gold-light);
      border-color: var(--color-burgundy);
      transform: translateX(4px);
    }

    .mobile-menu-link .link-arrow {
      opacity: 0.5;
      transition: transform 0.3s ease;
    }

    .mobile-menu-link:hover .link-arrow {
      opacity: 1;
      transform: translateX(4px);
    }

    .mobile-cta-box {
      margin-top: 1rem;
      padding-top: 1rem;
      border-top: 1px dashed rgba(226, 180, 189, 0.4);
    }

    /* Page Layout Mockup Content */
    .demo-content {
      max-width: 900px;
      margin: 80px auto 0 auto;
      padding: 0 20px;
      text-align: center;
    }

    .demo-heading {
      font-family: var(--font-display);
      font-size: clamp(2.2rem, 5vw, 3.8rem);
      color: var(--color-burgundy);
      line-height: 1.15;
      margin-bottom: 1rem;
    }

    .demo-subtext {
      font-size: 1.1rem;
      color: var(--color-burgundy-light);
      max-width: 600px;
      margin: 0 auto 2.5rem auto;
      line-height: 1.6;
    }

    /* ==========================================================================
   Naureen's Beauty & Hair Studio - Hero / Banner Styles (2026 Theme)
   Palette: #45212C (Deep Rose Burgundy) | #E2B4BD (Soft Rose Gold)
   ========================================================================== */

/* Color Variables */
:root {
  --color-burgundy: #45212C;
  --color-burgundy-hover: #6d3648;
  --color-rose-gold: #E2B4BD;
  --color-white: #ffffff;
}

/* Full Viewport Hero Section */
.naureen-hero {
  position: relative;
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-image: url('imgs/banner.png?v=20251022');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
  padding-top: 5rem; /* Offset for sticky header */
  
  /* Make image pop with vivid color, contrast, and subtle sharpness */
  filter: saturate(1.15) contrast(1.08) brightness(1.02);
}

/* Minimal Gradient Protection - Soft vignette at top and bottom only (No middle tint) */
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.25) 0%,
    rgba(0, 0, 0, 0) 30%,
    rgba(0, 0, 0, 0) 70%,
    rgba(0, 0, 0, 0.35) 100%
  );
  z-index: 1;
}

/* Ambient Subtle Ambient Glows Outside Content Card */
.glow-orb {
  position: absolute;
  border-radius: 9999px;
  pointer-events: none;
  filter: blur(80px);
  z-index: 2;
}

.glow-orb-1 {
  top: 15%;
  left: 5%;
  width: 18rem;
  height: 18rem;
  background-color: rgba(226, 180, 189, 0.25);
  animation: pulse-glow 4s ease-in-out infinite alternate;
}

.glow-orb-2 {
  bottom: 15%;
  right: 5%;
  width: 24rem;
  height: 24rem;
  background-color: rgba(226, 180, 189, 0.15);
}

@keyframes pulse-glow {
  0% { transform: scale(1); opacity: 0.5; }
  100% { transform: scale(1.15); opacity: 0.8; }
}

/* Main Hero Content Layout */
.hero-content-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
  text-align: center;
}

/* High-Contrast Glassmorphic Card (Ensures readability while banner pops) */
.hero-glass-card {
  background-color: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255, 255, 255, 0.9);
  padding: 2.5rem 1.5rem;
  border-radius: 1.75rem;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25),
              0 0 0 1px rgba(255, 255, 255, 0.5);
}

@media (min-width: 640px) {
  .hero-glass-card {
    padding: 3.5rem 2.5rem;
  }
}

@media (min-width: 1024px) {
  .hero-glass-card {
    padding: 4rem 4rem;
  }
}

/* Status Badge */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.25rem;
  border-radius: 9999px;
  background-color: rgba(226, 180, 189, 0.35);
  border: 1px solid rgba(226, 180, 189, 0.6);
  color: var(--color-burgundy);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 1.5rem;
}

.badge-ping-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background-color: var(--color-burgundy);
  animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
}

@keyframes ping {
  75%, 100% {
    transform: scale(2);
    opacity: 0;
  }
}

/* Typography */
.hero-headline {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-burgundy);
  line-height: 1.15;
  margin-bottom: 1.25rem;
  letter-spacing: -0.02em;
}

@media (min-width: 640px) {
  .hero-headline { font-size: 3rem; }
}

@media (min-width: 1024px) {
  .hero-headline { font-size: 3.75rem; }
}

.gradient-text {
  background: linear-gradient(135deg, #45212C 0%, #6d3648 50%, #45212C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.hero-description {
  font-size: 1rem;
  font-weight: 500;
  color: rgba(69, 33, 44, 0.9);
  max-width: 48rem;
  margin: 0 auto 2.25rem auto;
  line-height: 1.6;
}

@media (min-width: 640px) {
  .hero-description { font-size: 1.25rem; }
}

@media (min-width: 1024px) {
  .hero-description { font-size: 1.375rem; }
}

.highlight-location {
  color: var(--color-burgundy);
  font-weight: 800;
  border-bottom: 2px solid var(--color-rose-gold);
}

/* Call to Action Buttons Container */
.hero-cta-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
}

@media (min-width: 640px) {
  .hero-cta-group {
    flex-direction: row;
    gap: 1.5rem;
  }
}

/* Primary Call Button */
.btn-primary-call {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-burgundy);
  background-color: var(--color-rose-gold);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(69, 33, 44, 0.15);
  overflow: hidden;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  .btn-primary-call { width: auto; }
}

.btn-primary-call:hover {
  background-color: var(--color-white);
  box-shadow: 0 15px 30px rgba(226, 180, 189, 0.5);
  transform: translateY(-2px);
}

.btn-primary-call:active {
  transform: scale(0.97);
}

.btn-shimmer-line {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.6) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 1s ease-out;
}

.btn-primary-call:hover .btn-shimmer-line {
  transform: translateX(100%);
}

.btn-content {
  position: relative;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}

.phone-icon {
  transition: transform 0.3s ease;
}

.btn-primary-call:hover .phone-icon {
  transform: rotate(12deg);
}

/* Secondary Services Button */
.btn-secondary-services {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-burgundy);
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(69, 33, 44, 0.2);
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.3s ease;
}

@media (min-width: 640px) {
  .btn-secondary-services { width: auto; }
}

.btn-secondary-services:hover {
  background-color: var(--color-burgundy);
  color: var(--color-white);
  border-color: var(--color-burgundy);
  transform: translateY(-2px);
}

.btn-secondary-services:active {
  transform: scale(0.97);
}

.arrow-icon {
  font-size: 0.75rem;
  transition: transform 0.3s ease;
}

.btn-secondary-services:hover .arrow-icon {
  transform: translateX(4px);
}

/* Feature Highlights */
.hero-features-list {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid rgba(69, 33, 44, 0.1);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: rgba(69, 33, 44, 0.85);
}

.feature-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-item i {
  color: var(--color-burgundy);
}

/* High-Visibility Scroll Indicator */
.hero-scroll-cue {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: #ffffff;
  text-decoration: none;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
  transition: transform 0.3s ease;
}

.hero-scroll-cue:hover {
  transform: translateX(-50%) translateY(3px);
}

.scroll-text {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.scroll-mouse-pill {
  width: 2rem;
  height: 3rem;
  border-radius: 9999px;
  border: 2px solid #ffffff;
  background-color: rgba(69, 33, 44, 0.2);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 0.375rem;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}

.scroll-wheel-dot {
  width: 0.375rem;
  height: 0.75rem;
  background-color: #ffffff;
  border-radius: 9999px;
  animation: scroll-bounce 1.5s infinite;
}

@keyframes scroll-bounce {
  0% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(8px); opacity: 0.5; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ==========================================================================
   Luxury Transition Divider CSS
   Palette: #45212C (Burgundy) | #E2B4BD (Rose Gold)
   ========================================================================== */

.studio-transition-divider {
  position: relative;
  width: 100%;
  height: 100px;
  background: transparent;
  margin-top: -50px; /* Seamless overlap between header area and hero background */
  z-index: 15;
  overflow: visible;
}

/* Light Beam Effect */
.ambient-light-streak {
  position: absolute;
  top: 50%;
  left: 10%;
  right: 10%;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(226, 180, 189, 0.2) 20%,
    rgba(226, 180, 189, 0.9) 50%,
    rgba(226, 180, 189, 0.2) 80%,
    transparent 100%
  );
  filter: drop-shadow(0 0 8px #E2B4BD);
  transform: translateY(-50%);
  animation: streak-glow 3s ease-in-out infinite alternate;
}

@keyframes streak-glow {
  0% { opacity: 0.4; transform: translateY(-50%) scaleX(0.95); }
  100% { opacity: 1; transform: translateY(-50%) scaleX(1.05); }
}

/* Multi-layered Wave Curve */
.transition-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wave-path-back {
  fill: rgba(226, 180, 189, 0.25);
  animation: wave-float-back 8s ease-in-out infinite alternate;
}

.wave-path-front {
  fill: rgba(69, 33, 44, 0.15);
  animation: wave-float-front 6s ease-in-out infinite alternate;
}

@keyframes wave-float-back {
  0% { transform: translateY(0); }
  100% { transform: translateY(-8px); }
}

@keyframes wave-float-front {
  0% { transform: translateY(0); }
  100% { transform: translateY(-5px); }
}

/* Sparkle Floating Animation */
.divider-sparkles-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sparkle-particle {
  position: absolute;
  width: 18px;
  height: 18px;
  fill: #E2B4BD;
  filter: drop-shadow(0 0 6px rgba(226, 180, 189, 0.8));
}

.sparkle-particle.float-1 {
  top: 20%;
  left: 20%;
  animation: float-sparkle-1 4s ease-in-out infinite;
}

.sparkle-particle.float-2 {
  top: 60%;
  left: 35%;
  width: 12px;
  height: 12px;
  animation: float-sparkle-2 5s ease-in-out infinite 1s;
}

.sparkle-particle.float-3 {
  top: 25%;
  right: 30%;
  width: 14px;
  height: 14px;
  animation: float-sparkle-1 4.5s ease-in-out infinite 0.5s;
}

.sparkle-particle.float-4 {
  top: 65%;
  right: 18%;
  animation: float-sparkle-2 3.8s ease-in-out infinite 1.5s;
}

@keyframes float-sparkle-1 {
  0% { transform: translateY(0) rotate(0deg) scale(0.8); opacity: 0.3; }
  50% { transform: translateY(-12px) rotate(90deg) scale(1.2); opacity: 1; }
  100% { transform: translateY(0) rotate(180deg) scale(0.8); opacity: 0.3; }
}

@keyframes float-sparkle-2 {
  0% { transform: translateY(0) rotate(0deg) scale(1); opacity: 0.4; }
  50% { transform: translateY(10px) rotate(-90deg) scale(0.7); opacity: 0.9; }
  100% { transform: translateY(0) rotate(-180deg) scale(1); opacity: 0.4; }
}

/* Central Emblem Crest */
.divider-center-badge {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  background: #45212C;
  border: 2px solid #E2B4BD;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 20px rgba(69, 33, 44, 0.4);
  z-index: 20;
}

.badge-icon {
  color: #E2B4BD;
  font-size: 1.1rem;
  animation: rotate-crest 10s linear infinite;
}

.badge-ring-pulse {
  position: absolute;
  inset: -6px;
  border: 1px solid rgba(226, 180, 189, 0.6);
  border-radius: 50%;
  animation: pulse-ring 2s cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
}

@keyframes rotate-crest {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes pulse-ring {
  0% { transform: scale(0.9); opacity: 0.8; }
  100% { transform: scale(1.4); opacity: 0; }
}

/* =========================================================
   NAUREEN SERVICES ANIMATIONS
   ========================================================= */

@keyframes naureen-fade-up {
  from {
    opacity: 0;
    transform: translateY(24px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.naureen-fade-up {
  animation: naureen-fade-up 0.8s ease-out both;
}


/* Respect users who prefer reduced motion */

@media (prefers-reduced-motion: reduce) {

  .naureen-fade-up,
  .animate-pulse {
    animation: none !important;
  }

  * {
    scroll-behavior: auto !important;
  }
}

/* =========================================================
   NAUREEN SERVICES
   ========================================================= */

.service-panel {
  opacity: 0;
  transform: translateY(35px);
  transition:
    opacity 0.8s cubic-bezier(.2,.8,.2,1),
    transform 0.8s cubic-bezier(.2,.8,.2,1);
}

.service-panel.is-visible {
  opacity: 1;
  transform: translateY(0);
}


/* =========================================================
   SERVICE ITEM
   ========================================================= */

.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;

  min-height: 70px;

  padding: 0.85rem 0;

  border-bottom: 1px solid rgba(226, 180, 189, 0.25);

  transition:
    padding-left 0.3s ease,
    background-color 0.3s ease;
}

.service-item:hover {
  padding-left: 0.75rem;
}

.service-item h4 {
  color: #45212C;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.35;
}

.service-item p {
  margin-top: 3px;
  color: rgba(69, 33, 44, 0.4);
  font-size: 0.7rem;
}

.service-item > span {
  flex-shrink: 0;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 68px;

  padding: 0.55rem 0.8rem;

  border-radius: 999px;

  background: rgba(226, 180, 189, 0.18);

  color: #45212C;

  font-size: 0.85rem;
  font-weight: 700;

  transition:
    background-color 0.3s ease,
    transform 0.3s ease;
}

.service-item:hover > span {
  background: #45212C;
  color: white;
  transform: scale(1.04);
}


/* =========================================================
   LAST ITEM
   ========================================================= */

.service-item:last-child {
  border-bottom: 0;
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 640px) {

  .service-item {
    min-height: 62px;
  }

  .service-item h4 {
    font-size: 0.88rem;
  }

  .service-item > span {
    min-width: 62px;
    padding: 0.45rem 0.65rem;
    font-size: 0.8rem;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .service-panel {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .service-item,
  .service-item > span {
    transition: none;
  }

}

/* =========================================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   SERVICES & PRICING — 2026 LUXURY STYLE
   ========================================================= */

.naureen-services {

  --svc-bg: #fff9fa;
  --svc-card: rgba(255, 255, 255, 0.78);

  --svc-burgundy: #45212C;
  --svc-burgundy-2: #632F3D;

  --svc-rose: #E2B4BD;
  --svc-blush: #F7D6D0;
  --svc-gold: #D4AF37;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding:
    clamp(5.5rem, 9vw, 9rem)
    1rem;

  background:
    radial-gradient(
      circle at 7% 14%,
      rgba(226, 180, 189, 0.22),
      transparent 28%
    ),
    radial-gradient(
      circle at 94% 80%,
      rgba(69, 33, 44, 0.07),
      transparent 28%
    ),
    linear-gradient(
      180deg,
      #fffafb 0%,
      #fcf3f5 48%,
      #fffafb 100%
    );
}


/* Subtle luxury texture */

.naureen-services::before {

  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  opacity: 0.35;

  background-image:
    radial-gradient(
      rgba(69, 33, 44, 0.09) 0.7px,
      transparent 0.7px
    );

  background-size: 18px 18px;

  mask-image:
    linear-gradient(
      to bottom,
      transparent,
      black 15%,
      black 85%,
      transparent
    );
}


/* Main container */

.services-shell {

  position: relative;

  z-index: 2;

  width: min(1180px, 100%);

  margin-inline: auto;
}


/* =========================================================
   AMBIENT ORBS
   ========================================================= */

.services-orb {

  position: absolute;

  z-index: 0;

  width: 280px;

  aspect-ratio: 1;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(70px);

  opacity: 0.42;
}


.services-orb-left {

  top: 12%;

  left: -160px;

  background:
    rgba(226, 180, 189, 0.52);

  animation:
    services-orb-float
    8s
    ease-in-out
    infinite
    alternate;
}


.services-orb-right {

  right: -170px;

  bottom: 8%;

  background:
    rgba(212, 175, 55, 0.16);

  animation:
    services-orb-float
    10s
    1s
    ease-in-out
    infinite
    alternate-reverse;
}


@keyframes services-orb-float {

  from {
    transform:
      translate3d(0, 0, 0)
      scale(0.96);
  }

  to {
    transform:
      translate3d(20px, -22px, 0)
      scale(1.06);
  }

}


/* =========================================================
   SECTION HEADING
   ========================================================= */

.services-heading {

  max-width: 760px;

  margin:
    0 auto
    clamp(2.75rem, 6vw, 4.5rem);

  text-align: center;
}


.services-eyebrow {

  display: inline-flex;

  align-items: center;

  gap: 0.7rem;

  margin-bottom: 0.9rem;

  color: var(--svc-burgundy-2);

  font-size: 0.72rem;

  font-weight: 800;

  letter-spacing: 0.2em;

  text-transform: uppercase;
}


.services-eyebrow span {

  width: 30px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--svc-gold)
    );
}


.services-eyebrow span:last-child {

  background:
    linear-gradient(
      90deg,
      var(--svc-gold),
      transparent
    );
}


.services-heading h2 {

  margin: 0;

  color: var(--svc-burgundy);

  font-family:
    var(--font-display),
    "Playfair Display",
    serif;

  font-size:
    clamp(
      2.7rem,
      6vw,
      5.2rem
    );

  font-weight: 600;

  line-height: 0.98;

  letter-spacing: -0.045em;

  text-wrap: balance;
}


.services-heading h2::after {

  content: "✦";

  display: block;

  margin:
    1rem
    auto
    0;

  color: var(--svc-gold);

  font-family: Georgia, serif;

  font-size: 0.8rem;
}


.services-heading p {

  max-width: 570px;

  margin:
    1rem
    auto
    0;

  color:
    rgba(69, 33, 44, 0.67);

  font-size:
    clamp(
      0.95rem,
      1.5vw,
      1.08rem
    );

  line-height: 1.7;
}


/* =========================================================
   SERVICE GRID
   ========================================================= */

.services-grid {

  display: grid;

  grid-template-columns:
    minmax(0, 1.18fr)
    minmax(0, 0.82fr);

  align-items: stretch;

  gap: 1.35rem;
}


.services-side-column {

  display: grid;

  gap: 1.35rem;
}


/* =========================================================
   SERVICE CARD
   ========================================================= */

.service-category {

  position: relative;

  overflow: hidden;

  padding:
    clamp(1.25rem, 3vw, 2rem);

  border:
    1px solid
    rgba(226, 180, 189, 0.52);

  border-radius: 30px;

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.88),
      rgba(255, 248, 250, 0.7)
    );

  box-shadow:
    0 22px 60px
      rgba(69, 33, 44, 0.07),

    inset 0 1px 0
      rgba(255, 255, 255, 0.95);

  backdrop-filter: blur(18px);

  -webkit-backdrop-filter: blur(18px);

  transition:
    transform 0.45s cubic-bezier(.16,1,.3,1),
    box-shadow 0.45s ease,
    border-color 0.45s ease;
}


.service-category::before {

  content: "";

  position: absolute;

  top: -90px;

  right: -90px;

  width: 190px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(226, 180, 189, 0.28),
      transparent 67%
    );

  pointer-events: none;
}


/* Shimmer */

.service-category::after {

  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      115deg,
      transparent 20%,
      rgba(255,255,255,0.58) 48%,
      transparent 62%
    );

  transform:
    translateX(-120%);

  pointer-events: none;
}


.service-category:hover {

  transform:
    translateY(-6px);

  border-color:
    rgba(226, 180, 189, 0.85);

  box-shadow:

    0 30px 75px
      rgba(69, 33, 44, 0.11),

    0 0 0 1px
      rgba(212, 175, 55, 0.08);
}


.service-category:hover::after {

  animation:
    service-card-shimmer
    1.1s
    ease
    forwards;
}


@keyframes service-card-shimmer {

  to {
    transform:
      translateX(120%);
  }

}


.service-category-featured {

  padding:
    clamp(1.5rem, 3vw, 2.25rem);
}


/* =========================================================
   CATEGORY HEADER
   ========================================================= */

.service-category-top {

  position: relative;

  z-index: 1;

  display: flex;

  align-items: center;

  gap: 0.9rem;

  padding-bottom: 1.15rem;

  margin-bottom: 0.35rem;

  border-bottom:
    1px solid
    rgba(226, 180, 189, 0.3);
}


.service-icon {

  display: grid;

  flex:
    0 0 48px;

  width: 48px;

  height: 48px;

  place-items: center;

  border-radius: 16px;

  color:
    var(--svc-burgundy);

  background:
    linear-gradient(
      145deg,
      #fff,
      var(--svc-blush)
    );

  border:
    1px solid
    rgba(226, 180, 189, 0.6);

  box-shadow:
    0 8px 22px
      rgba(69, 33, 44, 0.09);

  font-size: 1rem;

  transition:
    transform 0.4s
    cubic-bezier(.34,1.56,.64,1);
}


.service-category:hover .service-icon {

  transform:
    rotate(-5deg)
    scale(1.08);
}


.service-category-kicker {

  display: block;

  margin-bottom: 0.12rem;

  color:
    var(--svc-gold);

  font-size: 0.62rem;

  font-weight: 900;

  letter-spacing: 0.18em;
}


.service-category h3 {

  margin: 0;

  color:
    var(--svc-burgundy);

  font-family:
    var(--font-display),
    "Playfair Display",
    serif;

  font-size:
    clamp(
      1.55rem,
      3vw,
      2.05rem
    );

  font-weight: 600;

  line-height: 1.1;

  letter-spacing: -0.025em;
}


/* =========================================================
   SERVICE ROWS
   ========================================================= */

.service-list {

  position: relative;

  z-index: 1;
}


.service-row {

  display: grid;

  grid-template-columns:
    auto
    minmax(18px, 1fr)
    auto;

  align-items: baseline;

  gap: 0.65rem;

  min-height: 58px;

  padding:
    0.8rem
    0.15rem;

  border-bottom:
    1px dashed
    rgba(69, 33, 44, 0.13);

  transition:
    padding 0.3s ease,
    background 0.3s ease,
    transform 0.3s ease;
}


.service-row:last-child {

  border-bottom: 0;
}


.service-row:hover {

  padding-inline:
    0.65rem;

  border-radius: 12px;

  background:
    rgba(247, 214, 208, 0.2);

  transform:
    translateX(2px);
}


.service-name {

  min-width: 0;

  color:
    var(--svc-burgundy);

  font-size:
    clamp(
      0.86rem,
      1.35vw,
      1rem
    );

  font-weight: 650;

  line-height: 1.35;
}


.service-name small {

  color:
    rgba(69, 33, 44, 0.54);

  font-size: 0.72em;

  font-weight: 650;
}


.service-line {

  min-width: 10px;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      rgba(226, 180, 189, 0.15),
      rgba(226, 180, 189, 0.7),
      rgba(226, 180, 189, 0.15)
    );
}


.service-price {

  color:
    var(--svc-burgundy);

  font-size:
    clamp(
      0.9rem,
      1.45vw,
      1.03rem
    );

  font-weight: 850;

  white-space: nowrap;

  font-variant-numeric:
    tabular-nums;
}


/* =========================================================
   BOOKING CTA
   ========================================================= */

.services-cta {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 1.25rem;

  margin-top: 1.35rem;

  padding:
    1.15rem
    1.25rem
    1.15rem
    1.4rem;

  overflow: hidden;

  border:
    1px solid
    rgba(226, 180, 189, 0.45);

  border-radius: 24px;

  background:
    linear-gradient(
      110deg,
      var(--svc-burgundy),
      #5b2939 58%,
      #6c3949
    );

  box-shadow:
    0 20px 50px
      rgba(69, 33, 44, 0.18);
}


.services-cta::before {

  content: "✦";

  position: absolute;

  right: 27%;

  top: -42px;

  color:
    rgba(247, 214, 208, 0.12);

  font-size: 7rem;

  transform:
    rotate(15deg);
}


.services-cta-copy {

  position: relative;

  z-index: 1;

  display: grid;

  gap: 0.15rem;
}


.services-cta-kicker {

  color:
    var(--svc-rose);

  font-size: 0.68rem;

  font-weight: 800;

  letter-spacing: 0.15em;

  text-transform: uppercase;
}


.services-cta-copy strong {

  color: #fff;

  font-family:
    var(--font-display),
    "Playfair Display",
    serif;

  font-size:
    clamp(
      1.25rem,
      2.4vw,
      1.7rem
    );

  font-weight: 500;
}


.services-book-button {

  position: relative;

  z-index: 1;

  display: inline-flex;

  align-items: center;

  gap: 0.65rem;

  min-height: 50px;

  padding:
    0.55rem
    0.85rem
    0.55rem
    0.55rem;

  border:
    1px solid
    rgba(247, 214, 208, 0.65);

  border-radius: 999px;

  color:
    var(--svc-burgundy);

  background: #fff;

  text-decoration: none;

  font-size: 0.92rem;

  font-weight: 850;

  white-space: nowrap;

  box-shadow:
    0 8px 25px
      rgba(0,0,0,0.16);

  transition:
    transform 0.35s
      cubic-bezier(.34,1.56,.64,1),
    box-shadow 0.35s ease,
    background 0.35s ease;
}


.services-book-button:hover {

  transform:
    translateY(-3px)
    scale(1.025);

  background:
    var(--svc-blush);

  box-shadow:
    0 13px 32px
      rgba(0,0,0,0.22);
}


.services-book-icon {

  display: grid;

  width: 38px;

  height: 38px;

  place-items: center;

  border-radius: 50%;

  color: #fff;

  background:
    var(--svc-burgundy);
}


.services-book-arrow {

  margin-left: 0.1rem;

  color:
    var(--svc-burgundy-2);

  transition:
    transform 0.3s ease;
}


.services-book-button:hover
.services-book-arrow {

  transform:
    translateX(4px);
}


/* =========================================================
   SCROLL REVEAL
   ========================================================= */

[data-service-reveal] {

  opacity: 0;

  transform:
    translateY(28px)
    scale(0.985);

  transition:
    opacity 0.75s
      cubic-bezier(.2,.8,.2,1),

    transform 0.75s
      cubic-bezier(.2,.8,.2,1);

  transition-delay:
    var(--delay, 0ms);
}


[data-service-reveal].is-visible {

  opacity: 1;

  transform:
    translateY(0)
    scale(1);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .services-grid {

    grid-template-columns: 1fr;
  }


  .services-side-column {

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

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 680px) {

  .naureen-services {

    padding-inline:
      0.8rem;
  }


  .services-grid,
  .services-side-column {

    gap: 0.85rem;
  }


  .service-category,
  .service-category-featured {

    padding: 1.15rem;

    border-radius: 23px;
  }


  .service-category-top {

    gap: 0.7rem;
  }


  .service-icon {

    flex-basis: 43px;

    width: 43px;

    height: 43px;

    border-radius: 14px;
  }


  .service-row {

    grid-template-columns:
      minmax(0, 1fr)
      auto;

    gap:
      0.4rem
      0.75rem;

    min-height: 54px;

    padding-block:
      0.7rem;
  }


  .service-line {

    display: none;
  }


  .service-name {

    font-size: 0.9rem;
  }


  .service-price {

    font-size: 0.92rem;
  }


  .services-side-column {

    grid-template-columns: 1fr;
  }


  .services-cta {

    align-items: stretch;

    flex-direction: column;

    padding: 1.15rem;

    border-radius: 21px;
  }


  .services-book-button {

    justify-content: center;

    width: 100%;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .services-heading h2 {

    font-size: 2.45rem;
  }


  .service-category h3 {

    font-size: 1.4rem;
  }


  .service-name {

    font-size: 0.84rem;
  }

}


/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .services-orb-left,
  .services-orb-right,
  [data-service-reveal],
  .service-category,
  .service-row,
  .service-icon,
  .services-book-button,
  .services-book-arrow {

    animation: none !important;

    transition: none !important;
  }


  [data-service-reveal] {

    opacity: 1;

    transform: none;
  }

}

/* =========================================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   LOCATION + FOOTER — 2026 MODERN EDITION
   ========================================================= */

.naureen-location-footer {
  background: #45212C;
  color: #fff;
  overflow: hidden;
  position: relative;
}

/* =========================================================
   MAP
   ========================================================= */

.footer-map-wrap {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  background: #eadcdf;
}

.footer-map {
  position: absolute;
  inset: -1px;
  width: calc(100% + 2px);
  height: calc(100% + 2px);
  border: 0;
  filter: saturate(0.75) contrast(1.03) brightness(0.97);
  transform: scale(1.02);
  transition: transform 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.9s ease;
}

.footer-map-wrap:hover .footer-map {
  transform: scale(1.045);
  filter: saturate(0.92) contrast(1.05) brightness(1);
}

.footer-map-vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg,
      rgba(69, 33, 44, 0.05) 0%,
      rgba(69, 33, 44, 0.35) 45%,
      rgba(69, 33, 44, 0.72) 100%);
}

/* =========================================================
   FLOATING MAP CARD — elevated 2026 version
   ========================================================= */

.footer-map-pin {
  position: absolute;
  left: clamp(1rem, 5vw, 5rem);
  bottom: clamp(1.1rem, 4vw, 2.6rem);
  display: flex;
  align-items: center;
  gap: 0.9rem;
  min-height: 68px;
  padding: 0.7rem 1.1rem 0.7rem 0.75rem;
  color: #fff;
  text-decoration: none;
  background: rgba(69, 33, 44, 0.78);
  border: 1px solid rgba(247, 214, 208, 0.55);
  border-radius: 20px;
  backdrop-filter: blur(22px) saturate(1.3);
  -webkit-backdrop-filter: blur(22px) saturate(1.3);
  box-shadow:
    0 20px 50px rgba(33, 10, 18, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.05) inset,
    0 0 40px rgba(226, 180, 189, 0.12);
  animation: footerFloat 5s ease-in-out infinite,
             footerPinGlow 4s ease-in-out infinite;
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
              border-color 0.35s ease,
              box-shadow 0.45s ease;
  z-index: 5;
}

.footer-map-pin:hover {
  transform: translateY(-8px) scale(1.03);
  border-color: #F7D6D0;
  box-shadow:
    0 28px 70px rgba(33, 10, 18, 0.48),
    0 0 50px rgba(226, 180, 189, 0.25),
    0 0 0 1px rgba(255, 255, 255, 0.08) inset;
}

.footer-pin-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 15px;
  color: #45212C;
  background: linear-gradient(145deg, #F7D6D0, #E2B4BD);
  box-shadow: 0 6px 18px rgba(226, 180, 189, 0.35);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-map-pin:hover .footer-pin-icon {
  transform: scale(1.08) rotate(-6deg);
}

.footer-pin-copy {
  display: grid;
  gap: 0.18rem;
}

.footer-pin-copy strong {
  font-size: 0.95rem;
  letter-spacing: 0.01em;
}

.footer-pin-copy small {
  color: rgba(255, 255, 255, 0.72);
  font-size: 0.74rem;
  white-space: nowrap;
}

.footer-pin-arrow {
  color: #E2B4BD;
  transition: transform 0.35s ease;
}

.footer-map-pin:hover .footer-pin-arrow {
  transform: translate(3px, -3px);
}

/* =========================================================
   FOOTER MAIN
   ========================================================= */

.naureen-footer {
  position: relative;
  background:
    radial-gradient(circle at 10% 12%, rgba(226, 180, 189, 0.16), transparent 28%),
    radial-gradient(circle at 90% 8%, rgba(212, 175, 55, 0.09), transparent 24%),
    radial-gradient(circle at 50% 100%, rgba(226, 180, 189, 0.07), transparent 40%),
    linear-gradient(155deg, #45212C 0%, #351821 50%, #1f0d13 100%);
  overflow: hidden;
}

/* Ambient orbs */
.footer-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(2px);
}

.footer-ambient-one {
  width: 280px;
  height: 280px;
  left: -140px;
  top: 40px;
  background: radial-gradient(circle, rgba(226, 180, 189, 0.2), transparent 70%);
  animation: footerAmbient 9s ease-in-out infinite;
}

.footer-ambient-two {
  width: 340px;
  height: 340px;
  right: -180px;
  bottom: -140px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.1), transparent 70%);
  animation: footerAmbient 11s 1.2s ease-in-out infinite reverse;
}

/* Soft light streak */
.naureen-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: -30%;
  width: 60%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(247, 214, 208, 0.35),
    rgba(226, 180, 189, 0.5),
    transparent);
  animation: footerStreak 8s ease-in-out infinite;
  pointer-events: none;
}

.footer-inner {
  position: relative;
  z-index: 2;
  width: min(1240px, calc(100% - 2rem));
  margin: auto;
  padding: 5.2rem 0 3.8rem;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.05fr;
  gap: 3rem;
}

/* =========================================================
   BRAND
   ========================================================= */

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.95rem;
  color: #fff;
  text-decoration: none;
}

.footer-brand-mark {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border: 1px solid rgba(226, 180, 189, 0.7);
  border-radius: 18px;
  color: #E2B4BD;
  background: rgba(247, 214, 208, 0.08);
  font-family: "Playfair Display", serif;
  font-size: 1.85rem;
  font-style: italic;
  position: relative;
  overflow: hidden;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.45s ease;
}

.footer-brand-mark::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 255, 255, 0.25) 50%,
    transparent 70%);
  transform: translateX(-120%);
  transition: transform 0.7s ease;
}

.footer-brand:hover .footer-brand-mark {
  transform: rotate(-6deg) scale(1.1);
  box-shadow: 0 0 32px rgba(226, 180, 189, 0.35);
}

.footer-brand:hover .footer-brand-mark::after {
  transform: translateX(120%);
}

.footer-brand strong,
.footer-brand small {
  display: block;
}

.footer-brand strong {
  font-family: "Playfair Display", serif;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
}

.footer-brand small {
  margin-top: 0.28rem;
  color: #E2B4BD;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.footer-tagline {
  margin: 1.4rem 0 1.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-family: "Playfair Display", serif;
  font-style: italic;
  font-size: 1.05rem;
}

/* =========================================================
   PHONE CTA — elevated
   ========================================================= */

.footer-call-cta {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: max-content;
  max-width: 100%;
  padding: 0.7rem 1rem;
  color: #fff;
  text-decoration: none;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(226, 180, 189, 0.28);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.35s ease,
              border-color 0.35s ease,
              box-shadow 0.4s ease;
}

.footer-call-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 20%,
    rgba(247, 214, 208, 0.15) 50%,
    transparent 80%);
  transform: translateX(-130%);
  transition: transform 0.7s ease;
}

.footer-call-cta:hover {
  transform: translateY(-4px);
  background: rgba(226, 180, 189, 0.12);
  border-color: rgba(226, 180, 189, 0.6);
  box-shadow: 0 14px 35px rgba(226, 180, 189, 0.18);
}

.footer-call-cta:hover::before {
  transform: translateX(130%);
}

.footer-call-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  color: #45212C;
  background: linear-gradient(145deg, #E2B4BD, #F7D6D0);
  box-shadow: 0 4px 14px rgba(226, 180, 189, 0.3);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-call-cta:hover .footer-call-icon {
  transform: scale(1.08) rotate(-8deg);
}

.footer-call-cta small,
.footer-call-cta strong {
  display: block;
}

.footer-call-cta small {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.63rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.footer-call-cta strong {
  font-size: 0.95rem;
}

.footer-cta-arrow {
  margin-left: 0.4rem;
  color: #E2B4BD;
  transition: transform 0.35s ease;
}

.footer-call-cta:hover .footer-cta-arrow {
  transform: translateX(4px);
}

/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  color: #E2B4BD;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.footer-kicker::before {
  content: "";
  width: 20px;
  height: 1px;
  background: linear-gradient(90deg, #D4AF37, transparent);
}

.footer-column h3 {
  margin: 0.75rem 0 1.25rem;
  color: #fff;
  font-family: "Playfair Display", serif;
  font-size: 1.4rem;
  letter-spacing: 0.01em;
}

/* =========================================================
   CONTACT LINKS
   ========================================================= */

.footer-info-link {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: #fff;
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-info-link:hover {
  transform: translateX(6px);
}

.footer-info-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  color: #E2B4BD;
  border: 1px solid rgba(226, 180, 189, 0.32);
  border-radius: 13px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-info-link:hover .footer-info-icon {
  color: #45212C;
  background: linear-gradient(145deg, #E2B4BD, #F7D6D0);
  border-color: transparent;
  box-shadow: 0 6px 18px rgba(226, 180, 189, 0.3);
  transform: scale(1.08);
}

.footer-info-link strong,
.footer-info-link small {
  display: block;
}

.footer-info-link strong {
  font-size: 0.88rem;
}

.footer-info-link small {
  margin-top: 0.18rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.73rem;
}

/* =========================================================
   SOCIAL
   ========================================================= */

.footer-socials {
  display: flex;
  gap: 0.7rem;
  margin-top: 1.25rem;
}

.footer-social {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  color: #E2B4BD;
  text-decoration: none;
  border: 1px solid rgba(226, 180, 189, 0.3);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.05);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.footer-social:hover {
  color: #45212C;
  background: linear-gradient(145deg, #E2B4BD, #F7D6D0);
  border-color: transparent;
  transform: translateY(-7px) rotate(-4deg) scale(1.08);
  box-shadow: 0 14px 28px rgba(226, 180, 189, 0.28);
}

/* =========================================================
   HOURS CARD — living status
   ========================================================= */

.footer-hours-card {
  padding: 1.15rem;
  border: 1px solid rgba(226, 180, 189, 0.22);
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(8px);
  position: relative;
  overflow: hidden;
  transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.footer-hours-card:hover {
  border-color: rgba(226, 180, 189, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.footer-open-indicator {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 0.9rem;
  color: #F7D6D0;
  font-size: 0.8rem;
  font-weight: 600;
}

.footer-open-indicator span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #9bd8a5;
  box-shadow: 0 0 0 0 rgba(155, 216, 165, 0.5);
  animation: footerStatus 2.2s ease-out infinite;
}

.footer-hours-row {
  display: grid;
  gap: 0.3rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}

.footer-hours-row span {
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
}

.footer-hours-row strong {
  font-size: 0.9rem;
  letter-spacing: 0.02em;
}

.footer-hours-card p {
  margin-top: 0.85rem;
  color: rgba(255, 255, 255, 0.52);
  font-size: 0.7rem;
  line-height: 1.45;
}

/* =========================================================
   COPYRIGHT
   ========================================================= */

.footer-bottom {
  border-top: 1px solid rgba(226, 180, 189, 0.15);
  background: rgba(17, 6, 10, 0.28);
  backdrop-filter: blur(6px);
}

.footer-bottom-inner {
  width: min(1240px, calc(100% - 2rem));
  min-height: 74px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}

.footer-bottom p,
.footer-bottom a {
  color: rgba(255, 255, 255, 0.5);
  font-size: 0.7rem;
  text-decoration: none;
}

.footer-bottom a {
  color: #E2B4BD;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.3s ease, transform 0.3s ease;
}

.footer-bottom a:hover {
  color: #F7D6D0;
  transform: translateY(-2px);
}

.footer-bottom-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(226, 180, 189, 0.25),
    transparent);
}

/* =========================================================
   SCROLL REVEAL
   ========================================================= */

.footer-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.footer-visible {
  opacity: 1;
  transform: none;
}

.footer-reveal:nth-child(2) { transition-delay: 0.1s; }
.footer-reveal:nth-child(3) { transition-delay: 0.2s; }
.footer-reveal:nth-child(4) { transition-delay: 0.3s; }

/* =========================================================
   KEYFRAMES — 2026 polished
   ========================================================= */

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

@keyframes footerPinGlow {
  0%, 100% {
    box-shadow:
      0 20px 50px rgba(33, 10, 18, 0.38),
      0 0 0 1px rgba(255, 255, 255, 0.05) inset,
      0 0 30px rgba(226, 180, 189, 0.1);
  }
  50% {
    box-shadow:
      0 22px 55px rgba(33, 10, 18, 0.42),
      0 0 0 1px rgba(255, 255, 255, 0.07) inset,
      0 0 45px rgba(226, 180, 189, 0.22);
  }
}

@keyframes footerAmbient {
  0%, 100% {
    transform: scale(1) translate(0, 0);
    opacity: 0.9;
  }
  50% {
    transform: scale(1.12) translate(22px, -16px);
    opacity: 1;
  }
}

@keyframes footerStatus {
  0% {
    box-shadow: 0 0 0 0 rgba(155, 216, 165, 0.55);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(155, 216, 165, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(155, 216, 165, 0);
  }
}

@keyframes footerStreak {
  0%   { left: -40%; opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { left: 120%; opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {
  .footer-inner {
    grid-template-columns: 1.2fr 1fr 1fr;
  }
  .footer-brand-block {
    grid-column: 1 / -1;
  }
}

@media (max-width: 700px) {
  .footer-map-wrap {
    height: 320px;
  }

  .footer-map-pin {
    left: 1rem;
    right: 1rem;
    bottom: 1.1rem;
  }

  .footer-inner {
    width: min(calc(100% - 1.4rem), 520px);
    grid-template-columns: 1fr;
    gap: 2.4rem;
    padding: 3.8rem 0 2.6rem;
  }

  .footer-brand-block {
    grid-column: auto;
  }

  .footer-bottom-inner {
    min-height: 88px;
    flex-wrap: wrap;
    justify-content: center;
    padding: 1.1rem 0;
    text-align: center;
  }

  .footer-bottom-line {
    display: none;
  }
}

/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .footer-map-pin,
  .footer-ambient,
  .footer-open-indicator span,
  .naureen-footer::before {
    animation: none !important;
  }

  .footer-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .footer-brand-mark::after,
  .footer-call-cta::before {
    display: none;
  }
}

.footer-ambient-three {
  width: 180px;
  height: 180px;
  left: 40%;
  top: -60px;
  background: radial-gradient(circle, rgba(247, 214, 208, 0.12), transparent 70%);
  animation: footerAmbient 7s 0.8s ease-in-out infinite;
}

/* =========================================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   ABOUT US — 2026 PREMIUM
   ========================================================= */

.naureen-about {
  position: relative;
  padding: 7.5rem 0 6rem;
  background: linear-gradient(180deg, #faf6f4 0%, #f3e9e6 55%, #eadcdf 100%);
  overflow: hidden;
  color: #2a1219;
}

/* Ambient floating lights */
.about-ambient {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(40px);
  z-index: 0;
}

.about-ambient-1 {
  width: 420px;
  height: 420px;
  top: -120px;
  left: -100px;
  background: radial-gradient(circle, rgba(226, 180, 189, 0.35), transparent 70%);
  animation: aboutFloat 14s ease-in-out infinite;
}

.about-ambient-2 {
  width: 320px;
  height: 320px;
  bottom: 80px;
  right: -80px;
  background: radial-gradient(circle, rgba(212, 175, 55, 0.18), transparent 70%);
  animation: aboutFloat 18s 2s ease-in-out infinite reverse;
}

.about-ambient-3 {
  width: 240px;
  height: 240px;
  top: 40%;
  left: 55%;
  background: radial-gradient(circle, rgba(247, 214, 208, 0.4), transparent 70%);
  animation: aboutFloat 12s 1s ease-in-out infinite;
}

/* Container */
.about-container {
  position: relative;
  z-index: 2;
  width: min(1180px, calc(100% - 2.5rem));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 5rem;
  align-items: center;
}

/* ========== LEFT SIDE ========== */

.about-kicker {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #8c4a5c;
  margin-bottom: 1.4rem;
}

.about-kicker span {
  width: 28px;
  height: 1.5px;
  background: linear-gradient(90deg, #D4AF37, #E2B4BD);
}

.about-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.6rem, 5vw, 3.6rem);
  line-height: 1.15;
  color: #2a1219;
  margin-bottom: 1.6rem;
  font-weight: 500;
}

.about-title span {
  color: #8c4a5c;
  font-style: italic;
  position: relative;
}

.about-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 4px;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, rgba(226, 180, 189, 0.45), transparent);
  z-index: -1;
  border-radius: 4px;
}

.about-lead {
  font-size: 1.15rem;
  line-height: 1.7;
  color: #4a2c35;
  margin-bottom: 1.3rem;
  max-width: 520px;
}

.about-text {
  font-size: 1rem;
  line-height: 1.75;
  color: #5c3a44;
  margin-bottom: 2.4rem;
  max-width: 520px;
}

/* Signature */
.about-signature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.3rem;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(226, 180, 189, 0.35);
  border-radius: 18px;
  width: fit-content;
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(69, 33, 44, 0.06);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease;
}

.about-signature:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(69, 33, 44, 0.1);
}

.signature-mark {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #45212C, #5c2e3c);
  color: #F7D6D0;
  font-family: "Playfair Display", serif;
  font-size: 1.6rem;
  font-style: italic;
  border-radius: 15px;
  box-shadow: 0 6px 18px rgba(69, 33, 44, 0.25);
}

.about-signature strong {
  display: block;
  font-size: 1.05rem;
  color: #2a1219;
}

.about-signature small {
  display: block;
  font-size: 0.75rem;
  color: #8c4a5c;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
}

/* ========== RIGHT SIDE ========== */

.about-image-card {
  position: relative;
}

.about-image-frame {
  position: relative;
  border-radius: 28px;
  overflow: hidden;
  box-shadow: 
    0 30px 60px rgba(69, 33, 44, 0.15),
    0 0 0 1px rgba(255, 255, 255, 0.4);
  transform: rotate(1.5deg);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-image-card:hover .about-image-frame {
  transform: rotate(0deg) scale(1.02);
}

.about-image-frame img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
  transition: transform 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-image-card:hover img {
  transform: scale(1.06);
}

.image-glow {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    transparent 40%,
    rgba(69, 33, 44, 0.25) 100%
  );
  pointer-events: none;
}

/* Floating badge */
.about-float-badge {
  position: absolute;
  bottom: 28px;
  left: -18px;
  background: rgba(69, 33, 44, 0.92);
  color: #fff;
  padding: 0.9rem 1.3rem;
  border-radius: 16px;
  border: 1px solid rgba(247, 214, 208, 0.4);
  backdrop-filter: blur(12px);
  box-shadow: 0 15px 40px rgba(33, 10, 18, 0.3);
  animation: aboutBadgeFloat 5s ease-in-out infinite;
  z-index: 3;
}

.about-float-badge span {
  display: block;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E2B4BD;
  margin-bottom: 0.2rem;
}

.about-float-badge strong {
  font-size: 1rem;
  font-weight: 600;
}

/* Feature cards */
.about-features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin-top: 1.8rem;
}

.about-feature {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.2rem;
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(226, 180, 189, 0.3);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-feature:hover {
  transform: translateX(8px);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 12px 30px rgba(69, 33, 44, 0.08);
  border-color: rgba(226, 180, 189, 0.55);
}

.feature-icon {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #45212C, #5c2e3c);
  color: #F7D6D0;
  border-radius: 13px;
  font-size: 1rem;
  flex-shrink: 0;
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.about-feature:hover .feature-icon {
  transform: scale(1.1) rotate(-6deg);
}

.about-feature strong {
  display: block;
  font-size: 0.95rem;
  color: #2a1219;
}

.about-feature small {
  display: block;
  font-size: 0.78rem;
  color: #8c4a5c;
  margin-top: 0.15rem;
}

/* Soft bridge into footer */
.about-footer-bridge {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 120px;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(69, 33, 44, 0.08) 40%,
    rgba(69, 33, 44, 0.35) 100%
  );
  pointer-events: none;
  z-index: 1;
}

/* ========== SCROLL REVEALS ========== */

.about-reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
}

.about-reveal.about-visible {
  opacity: 1;
  transform: none;
}

/* Stagger delays */
.about-left .about-reveal:nth-child(1) { transition-delay: 0.05s; }
.about-left .about-reveal:nth-child(2) { transition-delay: 0.15s; }
.about-left .about-reveal:nth-child(3) { transition-delay: 0.25s; }
.about-left .about-reveal:nth-child(4) { transition-delay: 0.35s; }
.about-left .about-reveal:nth-child(5) { transition-delay: 0.45s; }

.about-right .about-reveal:nth-child(1) { transition-delay: 0.2s; }
.about-features .about-reveal:nth-child(1) { transition-delay: 0.35s; }
.about-features .about-reveal:nth-child(2) { transition-delay: 0.45s; }
.about-features .about-reveal:nth-child(3) { transition-delay: 0.55s; }

/* ========== KEYFRAMES ========== */

@keyframes aboutFloat {
  0%, 100% {
    transform: translate(0, 0) scale(1);
  }
  50% {
    transform: translate(20px, -25px) scale(1.08);
  }
}

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

/* ========== RESPONSIVE ========== */

@media (max-width: 980px) {
  .about-container {
    grid-template-columns: 1fr;
    gap: 3.5rem;
  }

  .about-image-frame {
    transform: none;
  }

  .about-image-frame img {
    height: 360px;
  }

  .about-float-badge {
    left: 16px;
    bottom: 20px;
  }
}

@media (max-width: 600px) {
  .naureen-about {
    padding: 5rem 0 4.5rem;
  }

  .about-title {
    font-size: 2.3rem;
  }

  .about-image-frame img {
    height: 300px;
  }

  .about-features {
    gap: 0.85rem;
  }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .about-ambient,
  .about-float-badge {
    animation: none !important;
  }

  .about-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.about-title {
  font-family: "Playfair Display", serif;
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  line-height: 1.1;
  color: #2a1219;
  margin-bottom: 1.7rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.about-title span {
  display: inline-block;
  color: transparent;
  background: linear-gradient(120deg, #8c4a5c 0%, #c47a8c 50%, #8c4a5c 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  font-style: italic;
  position: relative;
  animation: titleShine 6s linear infinite;
}

/* Elegant underline accent */
.about-title span::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 2px;
  width: 100%;
  height: 6px;
  background: linear-gradient(90deg, 
    rgba(226, 180, 189, 0.7), 
    rgba(212, 175, 55, 0.5), 
    transparent
  );
  border-radius: 4px;
  z-index: -1;
  transform-origin: left;
  animation: underlineReveal 1.2s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both;
}

/* Soft glow on the accent word */
.about-title span {
  text-shadow: 0 0 30px rgba(140, 74, 92, 0.15);
}

/* Shine animation */
@keyframes titleShine {
  0% {
    background-position: 0% center;
  }
  100% {
    background-position: 200% center;
  }
}

/* Underline reveal */
@keyframes underlineReveal {
  from {
    transform: scaleX(0);
    opacity: 0;
  }
  to {
    transform: scaleX(1);
    opacity: 1;
  }
}

/* ========== GENTLE + MORE NOTICEABLE SHIMMER RING ========== */

.hero-glass-card {
  position: relative;
  background: rgba(255, 255, 255, 0.06) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid transparent !important;
  border-radius: 28px !important;
  
  box-shadow:
    0 25px 50px rgba(0, 0, 0, 0.25),
    0 10px 20px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.3) !important;
  
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.4s ease !important;
}

/* Softer but clearer shimmer ring */
.hero-glass-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: 30px;
  padding: 2px;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0.15),
    rgba(247, 214, 208, 0.85),
    rgba(226, 180, 189, 0.9),
    rgba(247, 214, 208, 0.85),
    rgba(255, 255, 255, 0.15)
  );
  background-size: 250% 250%;
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: shimmerRing 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

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

.hero-glass-card:hover {
  transform: translateY(-8px) scale(1.01) !important;
  box-shadow:
    0 35px 70px rgba(0, 0, 0, 0.3),
    0 15px 30px rgba(0, 0, 0, 0.18),
    inset 0 1px 0 rgba(255, 255, 255, 0.4) !important;
}

/* =========================================================
   PROMO BAR – Smaller width
   ========================================================= */

.promo-under-header {
  position: sticky;
  top: 78px;
  z-index: 990;
  width: 70%;                 /* smaller */
  max-width: 900px;           /* smaller max */
  margin: 6px auto 0;
  
  background: rgba(253, 248, 249, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  
  border: 1px solid rgba(226, 180, 189, 0.4);
  border-top: 1px solid rgba(226, 180, 189, 0.15);
  
  border-radius: 99px;
  box-shadow: 
    0 8px 25px -8px rgba(69, 33, 44, 0.1),
    0 -2px 12px rgba(226, 180, 189, 0.08);
  
  overflow: hidden;
}

.promo-marquee-track {
  display: flex;
  width: max-content;
  animation: promoScroll 22s linear infinite;
}

.promo-marquee-content {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 0.55rem 1.5rem;
  white-space: nowrap;
}

.promo-item {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: #45212C;
  font-size: 0.88rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.promo-item i {
  color: #D4AF37;
  font-size: 0.9rem;
}

.promo-sep {
  color: #E2B4BD;
  font-size: 0.7rem;
}

@keyframes promoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.promo-under-header:hover .promo-marquee-track {
  animation-play-state: paused;
}

/* Mobile */
@media (max-width: 768px) {
  .promo-under-header {
    top: 72px;
    width: 88%;
    max-width: none;
    margin-top: 5px;
  }

  .promo-item {
    font-size: 0.8rem;
  }

  .promo-marquee-content {
    gap: 1.4rem;
    padding: 0.5rem 1.2rem;
  }
}

/* =========================================================
   MOBILE FIX – Header size + Promo bar position
   ========================================================= */

@media (max-width: 767px) {

  /* Make header smaller on mobile */
  #naureen-header {
    top: 8px;
    width: 94%;
    border-radius: 70px;
  }

  .nav-wrapper {
    padding: 0.45rem 0.9rem;
  }

  .logo-container {
    width: 40px;
    height: 40px;
  }

  .logo-monogram {
    font-size: 1.25rem;
  }

  .brand-title {
    font-size: 1rem;
  }

  .brand-subtitle {
    font-size: 0.6rem;
  }

  /* Hide Book Now button on very small screens to reduce width */
  .book-btn-container {
    display: none;
  }

  .mobile-hamburger-btn {
    width: 42px;
    height: 42px;
  }

  /* Promo bar – sit correctly under the smaller header */
  .promo-under-header {
    top: 64px;          /* matches the smaller header height */
    width: 90%;
    max-width: none;
    margin: 5px auto 0;
    border-radius: 60px;
  }

  .promo-marquee-content {
    padding: 0.45rem 1rem;
    gap: 1.3rem;
  }

  .promo-item {
    font-size: 0.78rem;
  }
}

/* =========================================
   SERVICES TABS — 3 DESKTOP / 1 MOBILE
   ========================================= */

.services-tabs-wrapper {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
}

/* Navigation */
.services-tab-nav-container {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-bottom: 2.5rem;
}

/* Visible viewport */
.services-tab-nav {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* Moving track */
.services-tab-track {
  display: flex;
  gap: 12px;
  width: max-content;
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
  user-select: none;
}

/* =========================================
   TABS
   ========================================= */

.service-tab {
  position: relative;
  flex: 0 0 calc((100% - 24px) / 3);

  height: 52px;
  padding: 0 18px;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;

  border: 1px solid rgba(196, 149, 168, 0.25);
  border-radius: 999px;

  background: rgba(255, 255, 255, 0.55);

  color: #4a3f3f;
  font-size: 0.95rem;
  font-weight: 500;

  white-space: nowrap;
  cursor: pointer;

  transition:
    background 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;

  box-sizing: border-box;
}

/* Hover */
.service-tab:hover {
  background: rgba(255, 255, 255, 0.9);
  color: #2c2424;
  border-color: rgba(196, 149, 168, 0.45);
  transform: translateY(-2px);
}

/* Active */
.service-tab.active {
  background: linear-gradient(
    135deg,
    rgba(232, 180, 184, 0.35),
    rgba(196, 149, 168, 0.3)
  );

  border-color: rgba(196, 149, 168, 0.6);

  color: #2c2424;

  box-shadow:
    0 8px 25px rgba(196, 149, 168, 0.2);
}

/* Icon */
.service-tab .tab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-size: 1rem;
  color: #6b5b5b;

  transition:
    transform 0.3s ease,
    color 0.3s ease;
}

.service-tab.active .tab-icon {
  transform: scale(1.1);
  color: #c495a8;
}

/* Indicator */
.service-tab .tab-indicator {
  position: absolute;

  left: 50%;
  bottom: 0;

  width: 0;
  height: 2px;

  transform: translateX(-50%);

  background: linear-gradient(
    90deg,
    transparent,
    #c495a8,
    transparent
  );

  border-radius: 2px;

  transition: width 0.35s ease;
}

.service-tab.active .tab-indicator {
  width: 55%;
}

/* =========================================
   ARROWS
   ========================================= */

.tab-arrow {
  flex: 0 0 42px;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(196, 149, 168, 0.25);
  border-radius: 50%;

  background: rgba(255, 255, 255, 0.55);

  color: #4a3f3f;

  cursor: pointer;

  transition:
    background 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}

.tab-arrow:hover:not(:disabled) {
  background: rgba(232, 180, 184, 0.25);
  border-color: rgba(196, 149, 168, 0.5);
  transform: scale(1.06);
}

.tab-arrow:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

/* =========================================
   MOBILE — EXACTLY 1 TAB
   ========================================= */

@media (max-width: 767px) {

  .services-tab-nav-container {
    gap: 8px;
  }

  .services-tab-track {
    gap: 0;
  }

  .service-tab {
    flex: 0 0 100%;
    width: 100%;
    min-width: 100%;

    height: 50px;

    padding: 0 15px;

    font-size: 0.9rem;
  }

  .service-tab .tab-icon {
    display: none;
  }

  .tab-arrow {
    flex: 0 0 36px;

    width: 36px;
    height: 36px;

    font-size: 0.8rem;
  }
}

/* =========================================
   DESKTOP
   ========================================= */

@media (min-width: 768px) {

  .services-tab-track {
    width: 100%;
  }

  .service-tab {
    flex: 0 0 calc((100% - 24px) / 3);
  }
}

/* =========================================================
   SERVICES TAB PANELS
   ========================================================= */

.services-tab-panels {
  position: relative;
  width: 100%;
  min-height: 320px;
}

/* Every panel starts hidden */
.services-tab-panels .service-panel {
  display: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  pointer-events: none;
}

/* Only selected tab is shown */
.services-tab-panels .service-panel.active {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;

  animation: servicePanelIn 0.45s ease both;
}

@keyframes servicePanelIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Service card */
.service-panel-inner {
  width: 100%;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(226, 180, 189, 0.35);
  border-radius: 24px;
  padding: 2rem 2.25rem;

  box-shadow:
    0 20px 50px rgba(69, 33, 44, 0.08),
    0 5px 20px rgba(226, 180, 189, 0.08);

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

/* Service rows */
.service-panel .service-row {
  display: flex;
  align-items: center;
  gap: 1rem;

  min-height: 55px;
  padding: 0.8rem 0;

  border-bottom: 1px solid rgba(226, 180, 189, 0.25);
}

.service-panel .service-row:last-child {
  border-bottom: none;
}

.service-panel .service-name {
  color: #45212C;
  font-weight: 600;
  line-height: 1.35;
}

.service-panel .service-name small {
  display: block;
  margin-top: 3px;

  color: rgba(69, 33, 44, 0.55);
  font-size: 0.72rem;
  font-weight: 400;
}

.service-panel .service-line {
  flex: 1;
  border-bottom: 1px dotted rgba(69, 33, 44, 0.2);
}

.service-panel .service-price {
  flex-shrink: 0;

  color: #632F3D;
  font-weight: 700;
  white-space: nowrap;
}

/* Mobile */
@media (max-width: 767px) {

  .services-tab-panels {
    min-height: 0;
  }

  .service-panel-inner {
    padding: 1.35rem 1rem;
    border-radius: 20px;
  }

  .service-panel .service-row {
    min-height: 52px;
    gap: 0.6rem;
  }

  .service-panel .service-name {
    font-size: 0.85rem;
  }

  .service-panel .service-price {
    font-size: 0.85rem;
  }
}

/* =========================================
   MOBILE TAB ALIGNMENT
   ========================================= */

@media (max-width: 700px) {

  .services-tab-nav-container {
    width: 100%;
    display: flex;
    align-items: center;
  }

  .services-tab-nav {
    flex: 1;
    overflow: hidden;
  }

  .services-tab-track {
    display: flex;
    align-items: stretch;
  }

  .service-tab {
    display: flex !important;
    flex-direction: column;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;

    flex: 0 0 auto;
  }

  .service-tab .tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    text-align: center;
  }

  .service-tab .tab-label {
    display: block;
    width: 100%;

    text-align: center !important;
    white-space: nowrap;
  }

  .service-tab .tab-indicator {
    left: 50%;
    transform: translateX(-50%);
  }

  /* Keep arrows properly centered */
  .tab-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
  }
}

@media (max-width: 700px) {

  .service-tab {
    width: 125px;
    min-width: 125px;
    padding-left: 8px !important;
    padding-right: 8px !important;
  }

  .service-tab .tab-label {
    font-size: 0.75rem;
    line-height: 1.2;
  }

  .service-tab .tab-icon {
    margin-bottom: 5px;
  }
}

/* =========================================
   MOBILE SERVICE ROW — CENTERED
   ========================================= */

@media (max-width: 600px) {

  .service-list {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
  }

  .service-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;

    width: 100%;
    min-height: 60px;

    padding: 0.85rem 1rem;
    box-sizing: border-box;

    gap: 1rem;
  }

  /* Service name centered in its area */
  .service-name {
    grid-column: 1;
    justify-self: center;

    width: 100%;
    min-width: 0;

    text-align: center;

    font-size: 0.92rem;
    line-height: 1.35;
  }

  .service-name small {
    display: block;

    margin-top: 0.2rem;

    text-align: center;

    font-size: 0.7rem;
    line-height: 1.25;
  }

  /* Keep the divider as spacing */
  .service-line {
    grid-column: 2;

    display: block !important;

    width: 25px;
    height: 1px;

    opacity: 0.2;
  }

  /* Price separated on the right */
  .service-price {
    grid-column: 3;

    justify-self: end;

    min-width: 62px;

    text-align: right;
    white-space: nowrap;

    font-size: 0.95rem;
    font-weight: 700;
  }
}

/* =========================================
   MOBILE — BALANCED SERVICE PRICING
   ========================================= */

@media (max-width: 650px) {

  .service-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 75px;

    align-items: center;

    width: 100%;
    min-height: 62px;

    padding: 0.8rem 1rem;

    gap: 1.5rem;

    box-sizing: border-box;
  }

  .service-name {
    width: 100%;

    text-align: center;

    font-size: 0.92rem;
    line-height: 1.3;
  }

  .service-name small {
    display: block;

    margin-top: 0.2rem;

    text-align: center;

    font-size: 0.7rem;
  }

  .service-line {
    display: none !important;
  }

  .service-price {
    width: 75px;

    text-align: right;
    white-space: nowrap;

    font-size: 0.95rem;
    font-weight: 700;
  }
}

/* =========================================
   MOBILE — STICKY PROMO + HEADER
   ========================================= */

@media (max-width: 768px) {

  /* PROMO BAR — ALWAYS AT TOP */
  .promo-under-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    margin: 0 !important;

    z-index: 10001 !important;

    border: none !important;
    border-radius: 0 !important;
    outline: none !important;

    overflow: hidden;
  }

  /* HEADER — DIRECTLY UNDER PROMO */
  #naureen-header {
    position: fixed !important;

    top: var(--promo-height, 42px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    margin: 8px 0 0 0 !important;

    z-index: 10000 !important;
  }

  /* Prevent page content from going underneath */
  body {
    padding-top: calc(var(--promo-height, 42px) + 8px) !important;
  }

}

/* =========================================================
   S22 / SMALL MOBILE HERO RESPONSIVE FIX
   Samsung Galaxy S22 / 360px–390px
   ========================================================= */

@media (max-width: 430px) {

  /* HERO SECTION */
  .naureen-hero {
    width: 100%;
    min-height: auto !important;

    padding: 90px 16px 80px !important;

    overflow: hidden;
    box-sizing: border-box;
  }

  /* HERO CONTENT */
  .hero-content-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    box-sizing: border-box;
  }

  /* GLASS CARD */
  .hero-glass-card {
    width: 100% !important;
    max-width: 100% !important;

    padding: 28px 18px 26px !important;

    margin: 0 auto !important;

    box-sizing: border-box;

    border-radius: 22px !important;
  }

  /* BADGE */
  .hero-badge {
    width: fit-content;
    max-width: 100%;

    margin: 0 auto 18px !important;

    padding: 8px 12px !important;

    font-size: 11px !important;
    line-height: 1.3;

    text-align: center;

    box-sizing: border-box;
  }

  /* HEADLINE */
  .hero-headline {
    width: 100%;

    margin: 0 auto 16px !important;

    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.05 !important;

    letter-spacing: -1.2px !important;

    text-align: center;

    overflow-wrap: break-word;
  }

  /* Prevent forced <br> from creating awkward spacing */
  .hero-headline br {
    display: none;
  }

  /* DESCRIPTION */
  .hero-description {
    width: 100%;

    margin: 0 auto 24px !important;

    padding: 0 2px !important;

    font-size: 14px !important;
    line-height: 1.65 !important;

    text-align: center;

    box-sizing: border-box;
  }

  /* CTA CONTAINER */
  .hero-cta-group {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;

    gap: 11px !important;

    margin: 0 auto 24px !important;
  }

  /* BOTH BUTTONS */
  .btn-primary-call,
  .btn-secondary-services {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    box-sizing: border-box;

    padding: 14px 16px !important;

    min-height: 50px;

    justify-content: center;

    text-align: center;

    font-size: 14px !important;
  }

  /* BUTTON CONTENT */
  .btn-primary-call .btn-content,
  .btn-secondary-services .btn-content {
    width: 100%;

    justify-content: center;

    gap: 8px;

    white-space: nowrap;
  }

  /* FEATURES */
  .hero-features-list {
    width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;

    gap: 9px !important;

    margin: 0 !important;

    padding: 0 !important;
  }

  .feature-item {
    width: 100%;

    justify-content: center;

    font-size: 12px !important;

    text-align: center;
  }

  /* SCROLL CUE */
  .hero-scroll-cue {
    bottom: 18px !important;

    transform: translateX(-50%) scale(.85);

    white-space: nowrap;
  }

  /* GLOW ORBS — KEEP THEM INSIDE SCREEN */
  .glow-orb-1 {
    width: 180px !important;
    height: 180px !important;

    left: -90px !important;
  }

  .glow-orb-2 {
    width: 160px !important;
    height: 160px !important;

    right: -80px !important;
  }

}


/* =========================================================
   EXTRA SMALL PHONES — 360px AND BELOW
   ========================================================= */

@media (max-width: 370px) {

  .naureen-hero {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .hero-glass-card {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }

  .hero-headline {
    font-size: 30px !important;
    letter-spacing: -1px !important;
  }

  .hero-description {
    font-size: 13px !important;
  }

  .btn-primary-call,
  .btn-secondary-services {
    font-size: 13px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

}

/* =========================================================
   ELEGANCE INTRO — PREMIUM BEAUTY SECTION
   ========================================================= */

.demo-content {
  position: relative;

  width: min(900px, calc(100% - 40px));
  margin: 0 auto;

  padding: 110px 30px 100px;

  text-align: center;

  isolation: isolate;
}


/* =========================================
   SOFT AMBIENT GLOW
   ========================================= */

.demo-content::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      circle,
      rgba(226, 180, 189, 0.16) 0%,
      rgba(226, 180, 189, 0.07) 35%,
      transparent 70%
    );

  filter: blur(25px);

  z-index: -1;

  pointer-events: none;
}


/* =========================================
   EYEBROW
   ========================================= */

.demo-eyebrow {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 14px;

  margin-bottom: 22px;

  color: #b7838d;

  font-size: 10px;
  font-weight: 700;

  letter-spacing: 4px;

  text-transform: uppercase;
}

.demo-eyebrow-line {
  width: 34px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    #d9aab3
  );
}

.demo-eyebrow-line:last-child {
  background: linear-gradient(
    90deg,
    #d9aab3,
    transparent
  );
}


/* =========================================
   MAIN HEADING
   ========================================= */

.demo-heading {
  margin: 0;

  font-family: Georgia, "Times New Roman", serif;

  font-size: clamp(42px, 6vw, 76px);

  line-height: 0.98;

  letter-spacing: -2px;

  font-weight: 500;

  color: #252022;

  text-wrap: balance;

  text-shadow:
    0 8px 30px rgba(0, 0, 0, 0.06);
}

.demo-heading span {
  display: block;

  background: linear-gradient(
    110deg,
    #8f626d,
    #d29ba6,
    #a87580,
    #e0b5bd
  );

  background-size: 250% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation: demoGradientFlow 7s ease-in-out infinite;
}

@keyframes demoGradientFlow {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}


/* =========================================
   DESCRIPTION
   ========================================= */

.demo-subtext {
  max-width: 650px;

  margin: 28px auto 0;

  color: #71686b;

  font-size: 16px;

  line-height: 1.8;

  letter-spacing: 0.15px;

  text-wrap: balance;
}


/* =========================================
   DECORATIVE ACCENT
   ========================================= */

.demo-accent {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  margin-top: 34px;
}

.demo-accent span {
  width: 55px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(183, 131, 141, 0.65)
  );
}

.demo-accent span:last-child {
  background: linear-gradient(
    90deg,
    rgba(183, 131, 141, 0.65),
    transparent
  );
}

.demo-accent i {
  color: #c58e99;

  font-size: 12px;

  animation: demoSparkle 2.5s ease-in-out infinite;
}

@keyframes demoSparkle {

  0%,
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.3) rotate(12deg);
    opacity: 1;
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 600px) {

  .demo-content {
    width: calc(100% - 32px);

    padding: 75px 16px 70px;
  }

  .demo-eyebrow {
    gap: 9px;

    font-size: 8px;

    letter-spacing: 2.5px;
  }

  .demo-eyebrow-line {
    width: 22px;
  }

  .demo-heading {
    font-size: clamp(38px, 11vw, 52px);

    letter-spacing: -1.5px;

    line-height: 1;
  }

  .demo-subtext {
    margin-top: 22px;

    font-size: 14px;

    line-height: 1.7;
  }

  .demo-accent {
    margin-top: 27px;
  }

  .demo-accent span {
    width: 38px;
  }
}


/* =========================================
   S22 / SMALL PHONES
   ========================================= */

@media (max-width: 380px) {

  .demo-content {
    width: calc(100% - 24px);

    padding: 65px 12px 60px;
  }

  .demo-heading {
    font-size: 36px;

    letter-spacing: -1px;
  }

  .demo-subtext {
    font-size: 13px;
  }
}

/* =========================================================
   LUXURY TRANSITION DIVIDER — ENHANCED LAYER
   Keeps all original divider styles
   ========================================================= */

/* Main divider enhancement */
.studio-transition-divider {
  position: relative;
  isolation: isolate;
  overflow: hidden;

  /* Keeps your existing height unless overridden */
  min-height: 190px;
}


/* =========================================================
   PREMIUM AMBIENT GLOW
   ========================================================= */

.studio-transition-divider::before {
  content: "";

  position: absolute;

  width: 65%;
  height: 180px;

  left: 50%;
  top: 5px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      ellipse,
      rgba(226, 180, 189, 0.30) 0%,
      rgba(226, 180, 189, 0.12) 35%,
      transparent 72%
    );

  filter: blur(28px);

  z-index: -2;

  pointer-events: none;

  animation: dividerAmbientGlow 5s ease-in-out infinite;
}

@keyframes dividerAmbientGlow {
  0%,
  100% {
    opacity: .65;
    transform: translateX(-50%) scale(.9);
  }

  50% {
    opacity: 1;
    transform: translateX(-50%) scale(1.08);
  }
}


/* =========================================================
   ENHANCED LIGHT SWEEP
   ========================================================= */

.ambient-light-streak {
  width: 70%;
  height: 2px;

  left: -80%;
  top: 47%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.05),
      rgba(255,255,255,0.95),
      rgba(226,180,189,0.75),
      transparent
    );

  filter: blur(1px);

  transform: rotate(-2deg);

  z-index: 5;

  animation: luxuryLightSweep 7s ease-in-out infinite;
}

@keyframes luxuryLightSweep {

  0% {
    left: -80%;
    opacity: 0;
  }

  12% {
    opacity: .9;
  }

  42% {
    opacity: 1;
  }

  65% {
    left: 110%;
    opacity: 0;
  }

  100% {
    left: 110%;
    opacity: 0;
  }
}


/* =========================================================
   SVG WAVE ENHANCEMENT
   ========================================================= */

.transition-wave {
  height: 150px;

  filter:
    drop-shadow(
      0 -8px 22px rgba(226,180,189,.10)
    );
}


/* Back wave — keep original fill but add depth */
.wave-path-back {
  filter:
    drop-shadow(
      0 -5px 16px rgba(226,180,189,.14)
    );
}


/* Front wave — stronger luxury separation */
.wave-path-front {
  filter:
    drop-shadow(
      0 -10px 26px rgba(183,131,141,.18)
    );
}
































/* =========================================================
   CENTER CREST BADGE
   ========================================================= */

.divider-center-badge {

  position: absolute;

  width: 66px;
  height: 66px;

  left: 50%;
  top: 50%;

  display: flex;

  align-items: center;
  justify-content: center;

  margin: 0;
  padding: 0;

  border-radius: 50%;

  background:
    radial-gradient(
      circle at 35% 30%,
      #ffffff 0%,
      #f9e9eb 28%,
      #e2b4bd 68%,
      #bd8792 100%
    );

  box-shadow:
    0 0 0 1px rgba(255,255,255,.9),
    0 0 0 7px rgba(226,180,189,.12),
    0 0 30px rgba(226,180,189,.55),
    0 12px 30px rgba(104,70,78,.18);

  z-index: 10;

  box-sizing: border-box;

  transform:
    translate(-50%, -50%);
}


@keyframes badgeFloat {

  0%,
  100% {
    transform:
      translate(-50%, -50%)
      translateY(0);
  }

  50% {
    transform:
      translate(-50%, -50%)
      translateY(-7px);
  }

}


/* =========================================================
   BADGE PULSE RING
   ========================================================= */

.badge-ring-pulse {

  position: absolute;

  inset: -9px;

  border: 1px solid rgba(226,180,189,.45);

  border-radius: 50%;

  box-shadow:
    0 0 20px rgba(226,180,189,.30);

  animation:
    ringPulse 2.8s ease-out infinite;
}


@keyframes ringPulse {

  0% {
    transform: scale(.82);
    opacity: .9;
  }

  70%,
  100% {
    transform: scale(1.2);
    opacity: 0;
  }

}


/* =========================================================
   CENTRAL SPARKLE
   ========================================================= */

.badge-icon {

  position: relative;

  display: block;

  color: #ffffff;

  font-size: 27px;

  line-height: 1;

  text-shadow:
    0 0 8px rgba(255,255,255,.9),
    0 0 20px rgba(255,255,255,.7);

  animation:
    centralSparkle 2s ease-in-out infinite;
}


@keyframes centralSparkle {

  0%,
  100% {
    transform:
      scale(.9)
      rotate(0deg);

    opacity: .8;
  }

  50% {
    transform:
      scale(1.2)
      rotate(45deg);

    opacity: 1;
  }

}







/* =========================================================
   SPARKLE PARTICLES
   ========================================================= */

.divider-sparkles-container {
  z-index: 8;

  pointer-events: none;
}

.sparkle-particle {
  width: 13px;
  height: 13px;

  opacity: .8;

  filter:
    drop-shadow(
      0 0 8px rgba(226,180,189,.75)
    );

  animation:
    sparkleFloat 4s ease-in-out infinite;
}

.sparkle-particle svg {
  width: 100%;
  height: 100%;

  fill: #d7a3ad;
}


/* Individual sparkle placement */

.float-1 {
  left: 28%;
  top: 35%;

  transform: scale(.7);

  animation-delay: -.8s;
}

.float-2 {
  left: 37%;
  top: 20%;

  transform: scale(.45);

  animation-delay: -2s;
}

.float-3 {
  right: 28%;
  top: 32%;

  transform: scale(.65);

  animation-delay: -1.4s;
}

.float-4 {
  right: 37%;
  top: 18%;

  transform: scale(.4);

  animation-delay: -2.8s;
}


@keyframes sparkleFloat {

  0%,
  100% {
    opacity: .25;
    transform: translateY(8px) scale(.65) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-12px) scale(1) rotate(45deg);
  }
}


/* =========================================================
   MICRO SPARKLES
   ========================================================= */

.studio-transition-divider::after {
  content: "✦  ·  ✧  ·  ✦";

  position: absolute;

  left: 50%;
  top: 76px;

  transform: translateX(-50%);

  white-space: nowrap;

  color: rgba(183,131,141,.38);

  font-size: 9px;

  letter-spacing: 12px;

  z-index: 7;

  pointer-events: none;

  animation: microSparkleFade 3s ease-in-out infinite;
}

@keyframes microSparkleFade {

  0%,
  100% {
    opacity: .3;
  }

  50% {
    opacity: .8;
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .studio-transition-divider {
    min-height: 155px;
  }

  .transition-wave {
    height: 125px;
  }

  .divider-center-badge {
    width: 54px;
    height: 54px;

    top: 40%;
  }

  .badge-icon {
    font-size: 22px;
  }

  .float-1 {
    left: 19%;
  }

  .float-2 {
    left: 30%;
  }

  .float-3 {
    right: 19%;
  }

  .float-4 {
    right: 30%;
  }

  .studio-transition-divider::after {
    top: 63px;

    font-size: 7px;

    letter-spacing: 7px;
  }
}


/* =========================================================
   S22 / SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .studio-transition-divider {
    min-height: 140px;
  }

  .transition-wave {
    height: 112px;
  }

  .divider-center-badge {
    width: 50px;
    height: 50px;
  }

  .badge-icon {
    font-size: 20px;
  }

  .ambient-light-streak {
    width: 90%;
  }
}


/* =========================================================
   REDUCED MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .studio-transition-divider *,
  .studio-transition-divider::before,
  .studio-transition-divider::after {
    animation: none !important;
    transition: none !important;
  }
}































/* =========================================================
   SERVICES HEADING — PREMIUM / HIGH IMPACT
   Keeps existing HTML + reveal system
   ========================================================= */

.services-heading {
  position: relative;

  width: min(900px, calc(100% - 40px));

  margin: 0 auto;

  padding: 85px 20px 55px;

  text-align: center;

  isolation: isolate;
}


/* =========================================================
   AMBIENT CENTER GLOW
   ========================================================= */

.services-heading::before {
  content: "";

  position: absolute;

  width: 500px;
  height: 260px;

  left: 50%;
  top: 45%;

  transform: translate(-50%, -50%);

  background:
    radial-gradient(
      ellipse,
      rgba(226, 180, 189, 0.20) 0%,
      rgba(226, 180, 189, 0.08) 38%,
      transparent 72%
    );

  filter: blur(25px);

  z-index: -1;

  pointer-events: none;

  animation: servicesHeadingGlow 5s ease-in-out infinite;
}

@keyframes servicesHeadingGlow {

  0%,
  100% {
    opacity: .55;
    transform: translate(-50%, -50%) scale(.9);
  }

  50% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1.08);
  }
}


/* =========================================================
   EYEBROW
   ========================================================= */

.services-eyebrow {
  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 13px;

  margin-bottom: 20px;

  color: #a87580;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 4px;

  text-transform: uppercase;
}


/* Eyebrow lines */

.services-eyebrow span {
  display: block;

  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(183, 131, 141, .75)
    );
}




























.services-eyebrow span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(183, 131, 141, .75),
      transparent
    );
}


/* =========================================================
   MAIN TITLE
   ========================================================= */

#services-title {
  position: relative;

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(44px, 6vw, 76px);

  line-height: .98;

  font-weight: 500;

  letter-spacing: -2.5px;

  color: #292326;

  text-wrap: balance;

  text-shadow:
    0 8px 25px rgba(0, 0, 0, .06);
}


/* Elegant gradient highlight */

#services-title::after {
  content: "";

  position: absolute;

  width: 90px;
  height: 3px;

  left: 50%;
  bottom: -18px;

  transform: translateX(-50%);

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d29ba6,
      #e2b4bd,
      #d29ba6,
      transparent
    );

  box-shadow:
    0 0 12px rgba(226,180,189,.5);

  animation: titleAccent 3s ease-in-out infinite;
}

@keyframes titleAccent {

  0%,
  100% {
    width: 55px;
    opacity: .55;
  }

  50% {
    width: 105px;
    opacity: 1;
  }
}


/* =========================================================
   DESCRIPTION
   ========================================================= */

.services-heading > p {
  max-width: 620px;

  margin: 42px auto 0;

  color: #766c70;

  font-size: 16px;

  line-height: 1.75;

  letter-spacing: .15px;

  text-wrap: balance;
}


/* =========================================================
   LITTLE FLOATING SPARKLES
   ========================================================= */

.services-heading::after {
  content: "✦";

  position: absolute;

  left: calc(50% - 150px);
  top: 75px;

  color: rgba(197, 142, 153, .55);

  font-size: 12px;

  text-shadow:
    0 0 12px rgba(226,180,189,.8);

  animation:
    servicesSparkle 3s ease-in-out infinite;
}

@keyframes servicesSparkle {

  0%,
  100% {
    opacity: .25;
    transform: translateY(5px) scale(.7) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-7px) scale(1.15) rotate(45deg);
  }
}


/* =========================================================
   SECOND SPARKLE
   ========================================================= */

.services-heading[data-service-reveal] {
  overflow: visible;
}

.services-heading .services-eyebrow::after {
  content: "✧";

  position: absolute;

  margin-left: 285px;

  color: rgba(197,142,153,.5);

  font-size: 10px;

  animation:
    servicesSparkleTwo 3.5s ease-in-out infinite;
}

@keyframes servicesSparkleTwo {

  0%,
  100% {
    opacity: .2;
    transform: translateY(4px) scale(.7);
  }

  50% {
    opacity: .9;
    transform: translateY(-5px) scale(1.2);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .services-heading {
    width: calc(100% - 32px);

    padding: 65px 16px 45px;
  }

  .services-heading::before {
    width: 340px;
    height: 220px;
  }

  .services-eyebrow {
    gap: 9px;

    font-size: 9px;

    letter-spacing: 2.8px;
  }

  .services-eyebrow span {
    width: 25px;
  }

  #services-title {
    font-size: clamp(38px, 11vw, 54px);

    letter-spacing: -1.5px;
  }

  .services-heading > p {
    margin-top: 36px;

    font-size: 14px;

    line-height: 1.7;
  }

  .services-heading::after {
    left: 13%;

    top: 58px;
  }

  .services-heading .services-eyebrow::after {
    margin-left: 0;

    right: 13%;
  }
}


/* =========================================================
   S22 / SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .services-heading {
    width: calc(100% - 24px);

    padding-left: 12px;
    padding-right: 12px;
  }

  .services-eyebrow {
    font-size: 8px;

    letter-spacing: 2.2px;
  }

  .services-eyebrow span {
    width: 20px;
  }

  #services-title {
    font-size: 36px;

    letter-spacing: -1px;
  }

  .services-heading > p {
    font-size: 13px;
  }
}

/* =========================================================
   SERVICES TITLE — LUXURY EDITORIAL STYLE
   ========================================================= */

#services-title {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;

  gap: 10px;

  margin: 0;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(44px, 6vw, 76px);

  line-height: .95;

  font-weight: 500;

  letter-spacing: -2.5px;

  color: #272225;

  text-align: center;

  z-index: 5;
}


/* SERVICES */

#services-title .title-main {
  color: #272225;

  position: relative;

  text-shadow:
    0 8px 24px rgba(0,0,0,.07);
}


/* AMPERSAND */

#services-title .title-amp {
  position: relative;

  margin: 0 2px;

  font-family:
    "Times New Roman",
    Georgia,
    serif;

  font-size: .62em;

  font-style: italic;

  font-weight: 400;

  color: #c58e99;

  transform: translateY(-4px);

  text-shadow:
    0 0 15px rgba(197,142,153,.35);
}


/* PRICING */

#services-title .title-accent {
  position: relative;

  background:
    linear-gradient(
      110deg,
      #9b6974 0%,
      #d29ba6 28%,
      #e2b4bd 48%,
      #b97885 72%,
      #d8a6af 100%
    );

  background-size: 250% auto;

  -webkit-background-clip: text;
  background-clip: text;

  -webkit-text-fill-color: transparent;

  animation:
    pricingGradient 6s ease-in-out infinite;

  text-shadow: none;
}

@keyframes pricingGradient {

  0%,
  100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}


/* =========================================================
   ELEGANT UNDERLINE
   ========================================================= */

#services-title .title-accent::after {
  content: "";

  position: absolute;

  left: 8%;
  right: 4%;

  bottom: -12px;

  height: 2px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #d29ba6 20%,
      #e2b4bd 50%,
      #c58e99 80%,
      transparent
    );

  box-shadow:
    0 0 10px rgba(226,180,189,.55);

  transform-origin: center;

  animation:
    titleUnderline 3.5s ease-in-out infinite;
}

@keyframes titleUnderline {

  0%,
  100% {
    transform: scaleX(.72);
    opacity: .55;
  }

  50% {
    transform: scaleX(1);
    opacity: 1;
  }
}


/* =========================================================
   LITTLE DIAMOND DETAIL
   ========================================================= */

#services-title .title-accent::before {
  content: "✦";

  position: absolute;

  right: -24px;
  top: 50%;

  transform:
    translateY(-50%)
    scale(.7);

  color: #d29ba6;

  font-family: Arial, sans-serif;

  font-size: 11px;

  -webkit-text-fill-color: #d29ba6;

  text-shadow:
    0 0 10px rgba(226,180,189,.8);

  animation:
    titleDiamond 2.5s ease-in-out infinite;
}

@keyframes titleDiamond {

  0%,
  100% {
    opacity: .25;
    transform:
      translateY(-50%)
      scale(.6)
      rotate(0);
  }

  50% {
    opacity: 1;
    transform:
      translateY(-50%)
      scale(1.1)
      rotate(45deg);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  #services-title {
    gap: 7px;

    font-size: clamp(38px, 11vw, 54px);

    letter-spacing: -1.7px;
  }

  #services-title .title-amp {
    font-size: .58em;

    transform: translateY(-3px);
  }

  #services-title .title-accent::before {
    right: -17px;

    font-size: 8px;
  }

  #services-title .title-accent::after {
    bottom: -9px;
  }
}


/* =========================================================
   S22
   ========================================================= */

@media (max-width: 380px) {

  #services-title {
    gap: 5px;

    font-size: 35px;

    letter-spacing: -1px;
  }

  #services-title .title-accent::before {
    right: -14px;

    font-size: 7px;
  }
}

/* =========================================================
   SERVICES BOOKING CTA — DARK LUXURY VERSION
   ========================================================= */

.services-cta {
  position: relative;

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

  width: min(900px, calc(100% - 32px));

  margin: 45px auto 20px;

  padding: 24px 26px 24px 30px;

  border-radius: 24px;

  overflow: hidden;

  isolation: isolate;

  /* KEEP DARK BACKGROUND */
  background:
    linear-gradient(
      135deg,
      #171416 0%,
      #211a1d 45%,
      #171416 100%
    );

  border: 1px solid rgba(226, 180, 189, .28);

  box-shadow:
    0 20px 50px rgba(0, 0, 0, .30),
    0 0 35px rgba(183, 131, 141, .08),
    inset 0 1px 0 rgba(255,255,255,.06);

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .45s ease;
}


/* =========================================================
   DARK AMBIENT GLOW
   ========================================================= */

.services-cta::before {
  content: "";

  position: absolute;

  width: 420px;
  height: 260px;

  right: 5%;
  top: -100px;

  background:
    radial-gradient(
      circle,
      rgba(197, 142, 153, .22) 0%,
      rgba(197, 142, 153, .08) 35%,
      transparent 72%
    );

  filter: blur(25px);

  pointer-events: none;

  z-index: -1;

  animation: darkCtaGlow 5s ease-in-out infinite;
}

@keyframes darkCtaGlow {

  0%,
  100% {
    opacity: .45;
    transform: scale(.9);
  }

  50% {
    opacity: 1;
    transform: scale(1.12);
  }
}


/* =========================================================
   ANIMATED BORDER
   ========================================================= */

.services-cta::after {
  content: "";

  position: absolute;

  inset: 0;

  border-radius: inherit;

  padding: 1px;

  background:
    linear-gradient(
      110deg,
      transparent 10%,
      rgba(226,180,189,.15),
      rgba(226,180,189,.7),
      rgba(255,255,255,.35),
      rgba(197,142,153,.65),
      transparent 90%
    );

  background-size: 250% 100%;

  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);

  -webkit-mask-composite: xor;

  mask-composite: exclude;

  animation:
    darkBorderFlow 7s linear infinite;

  pointer-events: none;

  z-index: 10;
}

@keyframes darkBorderFlow {

  0% {
    background-position: 0% 50%;
  }

  100% {
    background-position: 250% 50%;
  }
}


/* =========================================================
   HOVER
   ========================================================= */

.services-cta:hover {
  transform: translateY(-5px);

  border-color: rgba(226,180,189,.5);

  box-shadow:
    0 28px 65px rgba(0,0,0,.38),
    0 0 45px rgba(197,142,153,.12),
    inset 0 1px 0 rgba(255,255,255,.08);
}


/* =========================================================
   CTA COPY
   ========================================================= */

.services-cta-copy {
  position: relative;

  display: flex;

  flex-direction: column;

  gap: 6px;

  z-index: 3;
}


/* KICKER */

.services-cta-kicker {
  display: inline-flex;

  align-items: center;

  gap: 8px;

  color: #d6a4ae;

  font-size: 10px;

  font-weight: 800;

  letter-spacing: 3px;

  text-transform: uppercase;

  text-shadow:
    0 0 12px rgba(226,180,189,.2);
}


/* Sparkle */

.services-cta-kicker::before {
  content: "✦";

  color: #e2b4bd;

  font-size: 9px;

  text-shadow:
    0 0 10px rgba(226,180,189,.9);

  animation:
    darkKickerSparkle 2.5s ease-in-out infinite;
}

@keyframes darkKickerSparkle {

  0%,
  100% {
    opacity: .3;
    transform: scale(.7) rotate(0);
  }

  50% {
    opacity: 1;
    transform: scale(1.25) rotate(45deg);
  }
}


/* MAIN TEXT */

.services-cta-copy strong {
  display: block;

  color: #ffffff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(21px, 3vw, 29px);

  line-height: 1.15;

  font-weight: 500;

  letter-spacing: -.4px;

  text-shadow:
    0 4px 18px rgba(0,0,0,.35);
}


/* =========================================================
   BOOK BUTTON
   ========================================================= */

.services-book-button {
  position: relative;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  gap: 11px;

  min-height: 57px;

  padding: 7px 19px 7px 8px;

  border-radius: 999px;

  color: #ffffff;

  text-decoration: none;

  background:
    linear-gradient(
      110deg,
      #8f626d,
      #b97986,
      #d29ba6,
      #a87580
    );

  background-size: 220% auto;

  box-shadow:
    0 12px 28px rgba(0,0,0,.30),
    0 0 22px rgba(197,142,153,.18),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition:
    transform .35s ease,
    box-shadow .35s ease,
    background-position .6s ease;

  overflow: hidden;

  z-index: 4;
}


/* Button shine */

.services-book-button::before {
  content: "";

  position: absolute;

  top: 0;
  left: -110%;

  width: 55%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.4),
      transparent
    );

  transform: skewX(-20deg);

  animation:
    darkButtonShine 4.5s ease-in-out infinite;

  pointer-events: none;
}

@keyframes darkButtonShine {

  0%,
  45% {
    left: -110%;
  }

  70%,
  100% {
    left: 150%;
  }
}


/* Button hover */

.services-book-button:hover {
  transform: translateY(-3px) scale(1.025);

  background-position: 100% center;

  box-shadow:
    0 16px 38px rgba(0,0,0,.4),
    0 0 30px rgba(226,180,189,.25),
    inset 0 1px 0 rgba(255,255,255,.45);
}


/* =========================================================
   PHONE ICON
   ========================================================= */

.services-book-icon {
  position: relative;

  width: 42px;
  height: 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex-shrink: 0;

  border-radius: 50%;

  background:
    rgba(255,255,255,.14);

  border:
    1px solid rgba(255,255,255,.32);

  box-shadow:
    inset 0 1px 3px rgba(255,255,255,.15),
    0 4px 12px rgba(0,0,0,.18);
}

.services-book-icon i {
  color: #ffffff;

  font-size: 15px;

  animation:
    phonePulseDark 2.5s ease-in-out infinite;
}

@keyframes phonePulseDark {

  0%,
  100% {
    transform: rotate(0) scale(1);
  }

  8% {
    transform: rotate(-10deg) scale(1.08);
  }

  16% {
    transform: rotate(10deg) scale(1.08);
  }

  24% {
    transform: rotate(0) scale(1);
  }
}


/* =========================================================
   PHONE NUMBER
   ========================================================= */

.services-book-button > span:not(.services-book-icon) {
  font-size: 14px;

  font-weight: 700;

  letter-spacing: .3px;

  white-space: nowrap;
}


/* =========================================================
   ARROW
   ========================================================= */

.services-book-arrow {
  font-size: 12px;

  margin-left: 3px;

  transition:
    transform .35s ease;
}

.services-book-button:hover .services-book-arrow {
  transform: translateX(5px);
}


/* =========================================================
   FLOATING SPARKLE
   ========================================================= */

.services-cta-copy::after {
  content: "✦";

  position: absolute;

  left: -20px;
  top: -14px;

  color: rgba(226,180,189,.55);

  font-size: 8px;

  text-shadow:
    0 0 10px rgba(226,180,189,.9);

  animation:
    darkFloatingSparkle 3s ease-in-out infinite;
}

@keyframes darkFloatingSparkle {

  0%,
  100% {
    opacity: .25;
    transform: translateY(5px) rotate(0) scale(.7);
  }

  50% {
    opacity: 1;
    transform: translateY(-7px) rotate(45deg) scale(1.2);
  }
}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .services-cta {
    width: calc(100% - 32px);

    margin-top: 35px;

    padding: 21px 19px;

    flex-direction: column;

    align-items: stretch;

    gap: 18px;

    border-radius: 22px;
  }

  .services-cta-copy {
    align-items: center;

    text-align: center;
  }

  .services-cta-kicker {
    font-size: 9px;

    letter-spacing: 2.5px;
  }

  .services-cta-copy strong {
    font-size: 23px;

    text-align: center;
  }

  .services-book-button {
    width: 100%;

    box-sizing: border-box;

    min-height: 58px;

    justify-content: center;
  }
}


/* =========================================================
   S22
   ========================================================= */

@media (max-width: 380px) {

  .services-cta {
    width: calc(100% - 24px);

    padding: 17px;
  }

  .services-cta-copy strong {
    font-size: 21px;
  }

  .services-book-button {
    min-height: 55px;
  }

  .services-book-icon {
    width: 39px;
    height: 39px;
  }

  .services-book-button > span:not(.services-book-icon) {
    font-size: 13px;
  }
}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .services-cta *,
  .services-cta::before,
  .services-cta::after {
    animation: none !important;
    transition: none !important;
  }
}

/* =========================================================
   CTA — FASTER / MORE ACTIVE ANIMATIONS
   ========================================================= */

/* Faster ambient glow */
.services-cta::before {
  animation: darkCtaGlow 2.8s ease-in-out infinite !important;
}


/* Faster moving border */
.services-cta::after {
  animation: darkBorderFlow 3.5s linear infinite !important;
}


/* Faster button shine */
.services-book-button::before {
  animation: darkButtonShine 2.4s ease-in-out infinite !important;
}


/* Faster phone pulse */
.services-book-icon i {
  animation: phonePulseDark 1.6s ease-in-out infinite !important;
}


/* Faster kicker sparkle */
.services-cta-kicker::before {
  animation: darkKickerSparkle 1.7s ease-in-out infinite !important;
}


/* Faster floating sparkle */
.services-cta-copy::after {
  animation: darkFloatingSparkle 2s ease-in-out infinite !important;
}

.divider-center-badge .badge-icon {
  color: #7f505c !important;
  text-shadow:
    0 0 5px rgba(127, 80, 92, 0.75),
    0 0 12px rgba(127, 80, 92, 0.4);
}

/* =========================================================
   NAUREEN'S — COMPACT LUXURY FOOTER
   ========================================================= */

.naureen-footer {
  position: relative;
  overflow: hidden;
  padding: 58px 20px 0;
  background:
    radial-gradient(circle at 15% 20%, rgba(226,180,189,.13), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(197,142,153,.10), transparent 28%),
    linear-gradient(145deg, #151214 0%, #1d181a 48%, #121012 100%);
  color: #fff;
  isolation: isolate;
}

/* subtle top glow */
.naureen-footer::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 70%;
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(
    90deg,
    transparent,
    #8f626d,
    #e2b4bd,
    #8f626d,
    transparent
  );
  box-shadow: 0 0 18px rgba(226,180,189,.45);
}

/* ambient lights */
.footer-ambient {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  pointer-events: none;
  z-index: -1;
}

.footer-ambient-one {
  width: 260px;
  height: 260px;
  left: -130px;
  top: 20px;
  background: rgba(197,142,153,.13);
  animation: footerAmbientOne 5s ease-in-out infinite;
}

.footer-ambient-two {
  width: 240px;
  height: 240px;
  right: -120px;
  bottom: 80px;
  background: rgba(226,180,189,.09);
  animation: footerAmbientTwo 6s ease-in-out infinite;
}

@keyframes footerAmbientOne {
  0%,100% { transform: translate(0,0) scale(.9); opacity:.5; }
  50% { transform: translate(30px,15px) scale(1.15); opacity:1; }
}

@keyframes footerAmbientTwo {
  0%,100% { transform: translate(0,0) scale(1); opacity:.45; }
  50% { transform: translate(-25px,-20px) scale(1.15); opacity:.9; }
}


/* =========================================================
   MAIN FOOTER GRID
   ========================================================= */

.footer-inner {
  position: relative;
  width: min(1080px, 100%);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.15fr 1fr;
  gap: 26px;
  align-items: start;
}


/* =========================================================
   BRAND
   ========================================================= */

.footer-brand-block {
  min-width: 0;
}

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}

.footer-brand-mark {
  width: 43px;
  height: 43px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 13px;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 21px;
  color: #fff;

  background:
    linear-gradient(145deg, #8f626d, #c58e99 55%, #9b6974);

  border: 1px solid rgba(255,255,255,.25);

  box-shadow:
    0 8px 20px rgba(0,0,0,.3),
    0 0 20px rgba(197,142,153,.18),
    inset 0 1px 0 rgba(255,255,255,.35);

  transition: .35s ease;
}

.footer-brand:hover .footer-brand-mark {
  transform: translateY(-3px) rotate(-4deg);
  box-shadow:
    0 12px 26px rgba(0,0,0,.35),
    0 0 30px rgba(226,180,189,.3);
}

.footer-brand strong {
  display: block;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.3px;
}

.footer-brand small {
  display: block;
  margin-top: 5px;
  color: #c9afb5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
}

.footer-tagline {
  margin: 14px 0 17px;
  color: #a99ca0;
  font-size: 12px;
  line-height: 1.5;
}


/* =========================================================
   CALL CTA
   ========================================================= */

.footer-call-cta {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;

  width: fit-content;
  max-width: 100%;

  padding: 9px 13px 9px 9px;
  border-radius: 13px;

  color: #fff;
  text-decoration: none;

  background: rgba(255,255,255,.055);
  border: 1px solid rgba(226,180,189,.22);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.06),
    0 8px 20px rgba(0,0,0,.18);

  transition: .35s ease;
  overflow: hidden;
}

.footer-call-cta::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.12),
    transparent
  );
  transform: skewX(-20deg);
  animation: footerCtaShine 3s ease-in-out infinite;
}

@keyframes footerCtaShine {
  0%,45% { left:-100%; }
  70%,100% { left:150%; }
}

.footer-call-cta:hover {
  transform: translateY(-3px);
  border-color: rgba(226,180,189,.5);
  background: rgba(226,180,189,.08);
}

.footer-call-icon {
  width: 31px;
  height: 31px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: linear-gradient(135deg,#9b6974,#d29ba6);
  box-shadow: 0 5px 15px rgba(197,142,153,.25);
}

.footer-call-icon i {
  font-size: 12px;
  animation: footerPhone 1.8s ease-in-out infinite;
}

@keyframes footerPhone {
  0%,100% { transform: rotate(0); }
  8% { transform: rotate(-10deg); }
  16% { transform: rotate(10deg); }
  24% { transform: rotate(0); }
}

.footer-call-cta small {
  display: block;
  margin-bottom: 2px;
  color: #a99ca0;
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
}

.footer-call-cta strong {
  display: block;
  font-size: 13px;
  font-weight: 700;
}

.footer-cta-arrow {
  margin-left: 5px;
  color: #d9aeb7;
  font-size: 10px;
  transition: transform .3s ease;
}

.footer-call-cta:hover .footer-cta-arrow {
  transform: translateX(4px);
}


/* =========================================================
   FOOTER COLUMNS
   ========================================================= */

.footer-column {
  min-width: 0;
}

.footer-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-bottom: 7px;

  color: #d19ba6;
  font-size: 8px;
  font-weight: 800;
  letter-spacing: 2.5px;
  text-transform: uppercase;
}

.footer-kicker::before {
  content: "✦";
  font-size: 7px;
  text-shadow: 0 0 8px rgba(226,180,189,.9);
  animation: footerKickerSparkle 1.7s ease-in-out infinite;
}

@keyframes footerKickerSparkle {
  0%,100% {
    opacity:.35;
    transform:scale(.7) rotate(0);
  }

  50% {
    opacity:1;
    transform:scale(1.2) rotate(45deg);
  }
}

.footer-column h3 {
  margin: 0 0 15px;

  color: #fff;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -.2px;
}


/* =========================================================
   INFO LINKS
   ========================================================= */

.footer-info-link {
  display: flex;
  align-items: center;
  gap: 10px;

  color: #fff;
  text-decoration: none;

  padding: 8px 0;

  transition: .3s ease;
}

.footer-info-link:hover {
  transform: translateX(4px);
}

.footer-info-icon {
  width: 30px;
  height: 30px;
  flex-shrink: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  color: #d8a6af;
  background: rgba(226,180,189,.08);
  border: 1px solid rgba(226,180,189,.16);

  transition: .3s ease;
}

.footer-info-link:hover .footer-info-icon {
  background: rgba(226,180,189,.16);
  border-color: rgba(226,180,189,.35);
  box-shadow: 0 0 15px rgba(226,180,189,.15);
}

.footer-info-icon i {
  font-size: 11px;
}

.footer-info-link strong {
  display: block;
  margin-bottom: 2px;

  font-size: 12px;
  font-weight: 700;
}

.footer-info-link small {
  display: block;

  color: #999094;
  font-size: 10px;
  line-height: 1.35;
}


/* =========================================================
   SOCIALS
   ========================================================= */

.footer-socials {
  display: flex;
  gap: 7px;
  margin-top: 11px;
}

.footer-social {
  width: 32px;
  height: 32px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 10px;

  color: #d9b1b8;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(226,180,189,.18);

  text-decoration: none;

  transition: .35s cubic-bezier(.2,.8,.2,1);
}

.footer-social i {
  font-size: 12px;
}

.footer-social:hover {
  transform: translateY(-4px) scale(1.06);
  color: #fff;
  background: linear-gradient(135deg,#8f626d,#c58e99);
  border-color: transparent;
  box-shadow: 0 9px 20px rgba(197,142,153,.25);
}


/* =========================================================
   HOURS CARD
   ========================================================= */

.footer-hours-card {
  position: relative;

  padding: 12px 13px;

  border-radius: 14px;

  background: rgba(255,255,255,.045);
  border: 1px solid rgba(226,180,189,.15);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.04),
    0 8px 20px rgba(0,0,0,.14);
}

.footer-open-indicator {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 9px;
}

.footer-open-indicator span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a9d6b0;
  box-shadow:
    0 0 0 4px rgba(169,214,176,.08),
    0 0 12px rgba(169,214,176,.55);

  animation: footerOpenPulse 1.8s ease-in-out infinite;
}

@keyframes footerOpenPulse {
  0%,100% { transform:scale(.8); opacity:.65; }
  50% { transform:scale(1.15); opacity:1; }
}

.footer-open-indicator strong {
  color: #d8b5bc;
  font-size: 9px;
  letter-spacing: 1.5px;
  text-transform: uppercase;
}

.footer-hours-row {
  display: flex;
  flex-direction: column;
  gap: 3px;

  padding-bottom: 9px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.footer-hours-row span {
  color: #aaa0a3;
  font-size: 10px;
}

.footer-hours-row strong {
  color: #fff;
  font-size: 12px;
  font-weight: 700;
}

.footer-hours-card p {
  margin: 8px 0 0;

  color: #898083;
  font-size: 9px;
  line-height: 1.45;
}


/* =========================================================
   BOTTOM BAR
   ========================================================= */

.footer-bottom {
  width: min(1080px,100%);
  margin: 42px auto 0;
  padding: 15px 0;

  border-top: 1px solid rgba(226,180,189,.12);
}

.footer-bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 15px;
}

.footer-bottom p {
  margin: 0;

  color: #797276;
  font-size: 9px;
  line-height: 1.5;
}

.footer-bottom-line {
  flex: 1;
  max-width: 100px;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(226,180,189,.25),
    transparent
  );
}

.footer-bottom a {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  color: #c99aa4;
  font-size: 9px;
  font-weight: 700;
  text-decoration: none;

  transition: .3s ease;
}

.footer-bottom a:hover {
  color: #fff;
  transform: translateY(-2px);
}

.footer-bottom a i {
  font-size: 8px;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 850px) {

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 30px 24px;
  }

  .footer-brand-block {
    grid-column: span 2;
  }

}


/* =========================================================
   MOBILE — VERY COMPACT
   ========================================================= */

@media (max-width: 600px) {

  .naureen-footer {
    padding: 42px 15px 0;
  }

  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: 26px 15px;
  }

  .footer-brand-block {
    grid-column: span 2;
  }

  .footer-brand strong {
    font-size: 19px;
  }

  .footer-brand-mark {
    width: 40px;
    height: 40px;
    font-size: 19px;
  }

  .footer-tagline {
    margin: 11px 0 13px;
    font-size: 11px;
  }

  .footer-call-cta {
    padding: 8px 11px 8px 8px;
  }

  .footer-call-icon {
    width: 29px;
    height: 29px;
  }

  .footer-column h3 {
    font-size: 17px;
    margin-bottom: 11px;
  }

  .footer-info-link {
    gap: 7px;
    padding: 6px 0;
  }

  .footer-info-icon {
    width: 28px;
    height: 28px;
  }

  .footer-info-link strong {
    font-size: 11px;
  }

  .footer-info-link small {
    font-size: 9px;
  }

  .footer-hours-card {
    padding: 10px;
  }

  .footer-bottom {
    margin-top: 32px;
  }

  .footer-bottom-inner {
    flex-wrap: wrap;
  }

  .footer-bottom-line {
    display: none;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 380px) {

  .naureen-footer {
    padding-left: 12px;
    padding-right: 12px;
  }

  .footer-inner {
    gap: 22px 11px;
  }

  .footer-kicker {
    font-size: 7px;
    letter-spacing: 2px;
  }

  .footer-column h3 {
    font-size: 16px;
  }

  .footer-info-link small {
    font-size: 8px;
  }

  .footer-hours-row strong {
    font-size: 10px;
  }

  .footer-hours-card p {
    font-size: 8px;
  }

  .footer-bottom p,
  .footer-bottom a {
    font-size: 8px;
  }

}
/* =========================================================
   FULL-WIDTH COPYRIGHT BAR
   ========================================================= */

.footer-bottom {
  width: 100% !important;
  max-width: none !important;
  margin: 42px 0 0 !important;
  padding: 15px max(20px, calc((100% - 1080px) / 2)) !important;

  background: rgba(0, 0, 0, 0.14);
  border-top: 1px solid rgba(226, 180, 189, 0.12);
  box-sizing: border-box;
}

.footer-bottom-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;

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

.naureen-footer {
  background:
    radial-gradient(circle at 15% 20%, rgba(226,180,189,.13), transparent 30%),
    radial-gradient(circle at 85% 15%, rgba(197,142,153,.10), transparent 28%),
    linear-gradient(145deg, #151214 0%, #1d181a 48%, #121012 100%);
}

/* =========================================================
   RESTORE ORIGINAL FOOTER BACKGROUND
   ========================================================= */

.naureen-footer {
  position: relative;

  background:
    radial-gradient(
      circle at 10% 12%,
      rgba(226, 180, 189, 0.16),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 8%,
      rgba(212, 175, 55, 0.09),
      transparent 24%
    ),
    radial-gradient(
      circle at 50% 100%,
      rgba(226, 180, 189, 0.07),
      transparent 40%
    ),
    linear-gradient(
      155deg,
      #45212C 0%,
      #351821 50%,
      #1f0d13 100%
    );

  overflow: hidden;
}

.footer-bottom {
  width: 100% !important;
  max-width: none !important;
  margin: 42px 0 0 !important;
  padding: 15px max(20px, calc((100% - 1080px) / 2)) !important;

  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(226, 180, 189, 0.16);

  box-sizing: border-box;
}

.footer-bottom-inner {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;

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

/* =========================================================
   FOOTER — LUXURY STYLISH TITLES
   ========================================================= */

.footer-column {
  position: relative;
}

/* Small titles: FIND US / CONTACT / STUDIO HOURS */
.footer-kicker {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;

  margin-bottom: 8px;

  color: #d9a8b2;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 3px;
  line-height: 1;

  text-transform: uppercase;
}

/* left decorative line */
.footer-kicker::after {
  content: "";
  width: 24px;
  height: 1px;

  background: linear-gradient(
    90deg,
    rgba(226,180,189,.75),
    transparent
  );

  box-shadow: 0 0 7px rgba(226,180,189,.35);
}

/* sparkle */
.footer-kicker::before {
  content: "✦";

  position: absolute;
  left: -15px;
  top: -7px;

  color: #e2b4bd;
  font-size: 8px;

  text-shadow:
    0 0 5px rgba(226,180,189,.9),
    0 0 12px rgba(226,180,189,.45);

  animation: footerTitleSparkle 1.8s ease-in-out infinite;
}

@keyframes footerTitleSparkle {
  0%,100% {
    opacity: .3;
    transform: scale(.7) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.2) rotate(45deg);
  }
}


/* Main footer titles */
.footer-column h3 {
  position: relative;

  display: block;

  margin: 0 0 17px;

  color: #fff;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: clamp(20px, 2vw, 24px);
  font-weight: 500;
  line-height: 1.1;

  letter-spacing: -.5px;

  text-shadow:
    0 3px 15px rgba(0,0,0,.25);
}

/* elegant underline */
.footer-column h3::after {
  content: "";

  display: block;

  width: 38px;
  height: 2px;

  margin-top: 9px;

  border-radius: 999px;

  background:
    linear-gradient(
      90deg,
      #9b6974,
      #e2b4bd,
      transparent
    );

  box-shadow:
    0 0 8px rgba(226,180,189,.35);

  transform-origin: left center;

  animation: footerTitleLine 3s ease-in-out infinite;
}

@keyframes footerTitleLine {
  0%,100% {
    width: 30px;
    opacity: .55;
  }

  50% {
    width: 55px;
    opacity: 1;
  }
}


/* =========================================================
   MOBILE — CENTER THE TITLES
   ========================================================= */

@media (max-width: 600px) {

  .footer-column {
    text-align: center;
  }

  .footer-kicker {
    justify-content: center;
    margin-left: auto;
    margin-right: auto;

    gap: 8px;
  }

  /* decorative line on both sides */
  .footer-kicker::after {
    width: 25px;

    background:
      linear-gradient(
        90deg,
        transparent,
        rgba(226,180,189,.8)
      );
  }

  .footer-kicker::before {
    left: -13px;
  }

  .footer-column h3 {
    text-align: center;
    font-size: 20px;
  }

  .footer-column h3::after {
    margin-left: auto;
    margin-right: auto;

    transform-origin: center;
  }

  /* Center location/contact content */
  .footer-info-link {
    justify-content: center;
    text-align: left;
  }

  /* Center social buttons */
  .footer-socials {
    justify-content: center;
  }

  /* Center hours card */
  .footer-hours-card {
    text-align: center;
  }

  .footer-open-indicator {
    justify-content: center;
  }

  .footer-hours-row {
    align-items: center;
  }

}

/* =========================================================
   MOBILE — CENTER BRAND + COPYRIGHT
   ========================================================= */

@media (max-width: 600px) {

  /* =========================
     BRAND BLOCK
     ========================= */

  .footer-brand-block {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-brand {
    justify-content: center;
    text-align: left;
  }

  .footer-tagline {
    text-align: center;
  }

  .footer-call-cta {
    margin-left: auto;
    margin-right: auto;
  }


  /* =========================
     COPYRIGHT
     ========================= */

  .footer-bottom {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    box-sizing: border-box;
  }

  .footer-bottom-inner {
    width: 100% !important;
    margin: 0 auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
    gap: 9px !important;
  }

  .footer-bottom-inner p {
    width: 100% !important;
    max-width: 320px;
    margin: 0 auto !important;

    text-align: center !important;
  }

  .footer-bottom-line {
    display: block !important;
    width: 55px !important;
    height: 1px !important;
    flex: none !important;
    margin: 0 auto !important;
  }

  .footer-bottom-inner a {
    margin: 0 auto !important;
    justify-content: center !important;
    text-align: center !important;
  }
}

/* =========================================================
   FULL-WIDTH COPYRIGHT BAR
   ========================================================= */

.footer-bottom {
  width: 100vw !important;
  max-width: none !important;

  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;

  box-sizing: border-box;

  padding: 16px 20px !important;

  background: rgba(0, 0, 0, 0.12);
  border-top: 1px solid rgba(226, 180, 189, 0.16);
}

.footer-bottom-inner {
  width: 100% !important;
  max-width: 1080px;
  margin: 0 auto !important;

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

  box-sizing: border-box;
}


/* =========================================================
   MOBILE — FULL WIDTH + CENTERED
   ========================================================= */

@media (max-width: 600px) {

  .footer-bottom {
    width: 100vw !important;
    max-width: none !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    padding: 15px 14px !important;

    text-align: center;
  }

  .footer-bottom-inner {
    width: 100% !important;
    max-width: 100% !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    gap: 9px !important;
    text-align: center !important;
  }

  .footer-bottom-inner p {
    width: 100% !important;
    max-width: 320px !important;

    margin: 0 auto !important;

    text-align: center !important;
    line-height: 1.6;
  }

  .footer-bottom-line {
    display: block !important;

    width: 55px !important;
    height: 1px !important;

    margin: 0 auto !important;
    flex: none !important;
  }

  .footer-bottom-inner a {
    margin: 0 auto !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    text-align: center !important;
  }
}

/* =========================================================
   S22 / SMALL MOBILE — FORCE STUDIO HOURS CENTER
   ========================================================= */

@media (max-width: 600px) {

  /* Make the hours column itself span the full footer width */
  .footer-inner > .footer-column:has(.footer-hours-card) {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  /* Kicker */
  .footer-inner > .footer-column:has(.footer-hours-card) .footer-kicker {
    display: flex !important;

    width: auto !important;
    margin-left: auto !important;
    margin-right: auto !important;

    justify-content: center !important;
    text-align: center !important;
  }

  /* Title */
  .footer-inner > .footer-column:has(.footer-hours-card) h3 {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card) h3::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* Hours card */
  .footer-inner > .footer-column:has(.footer-hours-card) .footer-hours-card {
    display: block !important;

    width: 100% !important;
    max-width: 290px !important;

    margin: 0 auto !important;

    box-sizing: border-box;

    text-align: center !important;
  }

  /* Daily indicator */
  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-open-indicator {
    display: flex !important;

    width: 100% !important;

    justify-content: center !important;
    align-items: center !important;

    text-align: center !important;
  }

  /* Hours row */
  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-row {
    display: flex !important;

    width: 100% !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-row span,
  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-row strong {
    width: 100% !important;
    text-align: center !important;
  }

  /* Description */
  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-card p {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }
}


/* =========================================================
   S22 / VERY SMALL
   ========================================================= */

@media (max-width: 380px) {

  .footer-inner > .footer-column:has(.footer-hours-card) {
    grid-column: 1 / -1 !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-card {
    max-width: 275px !important;
  }
}

/* =========================================================
   FOOTER BRAND — CENTER BELOW 995px
   ========================================================= */

@media (max-width: 995px) {

  .footer-inner > .footer-brand-block {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    text-align: center !important;
  }

  /* Brand logo + name */
  .footer-inner > .footer-brand-block .footer-brand {
    display: inline-flex !important;

    align-items: center !important;
    justify-content: center !important;

    margin: 0 auto !important;
  }

  /* Tagline */
  .footer-inner > .footer-brand-block .footer-tagline {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  /* Call button */
  .footer-inner > .footer-brand-block .footer-call-cta {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =========================================================
   BELOW 995px — CENTER THE ACTUAL FOOTER BLOCKS
   Text inside blocks stays naturally aligned
   ========================================================= */

@media (max-width: 995px) {

  /* =======================================================
     BRAND BLOCK
     ======================================================= */

  .footer-inner > .footer-brand-block {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .footer-brand {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-tagline {
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-call-cta {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* =======================================================
     LOCATION / CONTACT / HOURS COLUMNS
     ======================================================= */

  .footer-inner > .footer-column {
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }


  /* =======================================================
     LOCATION + CONTACT INFO BLOCKS
     ======================================================= */

  .footer-inner > .footer-column .footer-info-link {
    width: fit-content !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;

    text-align: left !important;
  }


  /* =======================================================
     SOCIAL BUTTON GROUP
     ======================================================= */

  .footer-socials {
    width: fit-content !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;
  }


  /* =======================================================
     STUDIO HOURS CARD
     ======================================================= */

  .footer-inner > .footer-column:has(.footer-hours-card) {
    width: 100% !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-items: center !important;
  }

  .footer-hours-card {
    width: min(100%, 320px) !important;
    max-width: 320px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;

    box-sizing: border-box;
  }


  /* Keep the contents of the hours card normal */
  .footer-open-indicator {
    justify-content: flex-start;
  }

  .footer-hours-row {
    align-items: flex-start;
    text-align: left;
  }

  .footer-hours-card p {
    text-align: left;
  }
}

/* =========================================================
   FORCE STUDIO HOURS BLOCK TO CENTER
   995px AND BELOW
   ========================================================= */

@media (max-width: 995px) {

  /* Force the hours column to occupy the full row */
  .footer-inner > .footer-column:has(.footer-hours-card) {
    grid-column: 1 / -1 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 auto !important;
    padding: 0 !important;

    display: flex !important;
    flex-direction: column !important;

    align-items: center !important;
    justify-content: flex-start !important;

    justify-self: center !important;

    box-sizing: border-box;
  }


  /* Center the heading area */
  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-kicker {
    align-self: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card)
  h3 {
    width: 100% !important;

    align-self: center !important;

    margin-left: auto !important;
    margin-right: auto !important;

    text-align: center !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card)
  h3::after {
    margin-left: auto !important;
    margin-right: auto !important;
  }


  /* =======================================================
     FORCE THE ACTUAL HOURS CARD TO CENTER
     ======================================================= */

  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-card {

    display: block !important;

    width: 320px !important;
    max-width: calc(100vw - 40px) !important;

    margin: 0 auto !important;

    position: relative !important;
    left: auto !important;
    right: auto !important;

    transform: none !important;

    justify-self: center !important;
    align-self: center !important;

    box-sizing: border-box;
  }
}


/* =========================================================
   SMALL PHONES / S22
   ========================================================= */

@media (max-width: 430px) {

  .footer-inner > .footer-column:has(.footer-hours-card) {
    width: 100vw !important;
    max-width: 100vw !important;

    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;

    align-items: center !important;
  }

  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-card {
    width: 290px !important;
    max-width: calc(100vw - 32px) !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;
  }
}


/* =========================================================
   VERY SMALL S22 WIDTHS
   ========================================================= */

@media (max-width: 380px) {

  .footer-inner > .footer-column:has(.footer-hours-card)
  .footer-hours-card {
    width: 275px !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* =========================================================
   MOBILE HEADER + HORIZONTAL OVERFLOW FIX — INDEX ONLY
   ========================================================= */

@media (max-width: 767px) {

  /* Keep promo bar locked to viewport */
  .promo-under-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
    box-sizing: border-box !important;

    z-index: 10001 !important;

    overflow: hidden !important;
  }

  /* Keep main header locked directly below promo */
  #naureen-header {
    position: fixed !important;

    top: var(--promo-height, 42px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100vw !important;

    margin: 8px 0 0 0 !important;

    box-sizing: border-box !important;

    z-index: 10000 !important;

    transform: none !important;
  }

  /* Prevent nav wrapper from creating extra width */
  #naureen-header .nav-wrapper,
  .nav-wrapper {
    width: 100% !important;
    max-width: 100% !important;

    box-sizing: border-box !important;

    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Keep header contents inside viewport */
  #naureen-header *,
  .nav-wrapper * {
    box-sizing: border-box;
  }

  /* Account for fixed promo + header */
  body {
    padding-top: calc(var(--promo-height, 42px) + 72px) !important;
  }
}

/* Smaller phones */
@media (max-width: 430px) {

  #naureen-header {
    top: var(--promo-height, 42px) !important;
    width: 100% !important;
    max-width: 100vw !important;

    margin-top: 6px !important;

    border-radius: 0 0 24px 24px !important;
  }

  .nav-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body {
    padding-top: calc(var(--promo-height, 42px) + 68px) !important;
  }
}

/* =========================================================
   MOBILE — STICKY TOP BAR + NAV
   ========================================================= */

@media (max-width: 767px) {

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
  }

  /* TOP PROMO BAR */
  .promo-under-header {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100vw !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10001 !important;
    box-sizing: border-box !important;

    border-radius: 0 !important;
  }

  /* MAIN NAV — DIRECTLY UNDER PROMO BAR */
  #naureen-header {
    position: fixed !important;

    top: var(--promo-height, 42px) !important;
    left: 0 !important;
    right: 0 !important;

    width: 100% !important;
    max-width: 100vw !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 10000 !important;

    box-sizing: border-box !important;

    transform: none !important;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

  #naureen-header {
    top: var(--promo-height, 42px) !important;
    width: 100% !important;
    max-width: 100vw !important;

    margin: 0 !important;
    border-radius: 0 0 22px 22px !important;
  }

  .nav-wrapper {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  body {
    padding-top: calc(var(--promo-height, 42px) + 64px) !important;
  }
}

@media (max-width: 767px) {

  #naureen-header,
  .promo-under-header {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }

  #naureen-header {
    margin: 0 !important;
    top: var(--promo-height, 42px) !important;
  }

  .promo-under-header {
    margin: 0 !important;
    top: 0 !important;
  }
}

.naureen-services {
  padding-top: 45px !important;
}

.services-heading {
  margin-top: 0 !important;
}

@media (max-width: 767px) {
  .naureen-services {
    padding-top: 30px !important;
  }

  .services-heading {
    margin-top: 0 !important;
  }
}

/* =========================================================
   LIVE INSTAGRAM + GOOGLE REVIEWS
   NAUREEN'S BEAUTY & HAIR STUDIO
   2026 PREMIUM SYSTEM
   ========================================================= */

.social-proof-section {
  position: relative;
  width: 100%;
  padding: 90px 24px 105px;

  overflow: hidden;
  isolation: isolate;

  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(226,180,189,.22),
      transparent 32%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(111,30,53,.12),
      transparent 32%
    ),
    linear-gradient(
      180deg,
      #fffafa,
      #fdf3f5,
      #fffafa
    );
}

.social-proof-shell {
  width: min(1280px,100%);
  margin: 0 auto;
}


/* =========================================================
   BACKGROUND
   ========================================================= */

.social-bg-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.social-bg-orb-1 {
  width: 430px;
  height: 430px;

  top: -180px;
  left: -180px;

  background:
    radial-gradient(
      circle,
      rgba(222,166,180,.40),
      transparent 70%
    );

  animation:
    socialOrb1 12s ease-in-out infinite;
}

.social-bg-orb-2 {
  width: 380px;
  height: 380px;

  right: -150px;
  bottom: -140px;

  background:
    radial-gradient(
      circle,
      rgba(104,31,56,.16),
      transparent 70%
    );

  animation:
    socialOrb2 14s ease-in-out infinite;
}

.social-bg-glow {
  position: absolute;

  width: 600px;
  height: 600px;

  top: 45%;
  left: 50%;

  transform: translate(-50%,-50%);

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.85),
      transparent 68%
    );

  pointer-events: none;

  animation:
    socialGlow 8s ease-in-out infinite;
}


/* =========================================================
   HEADING
   ========================================================= */

.social-proof-heading {
  max-width: 760px;

  margin: 0 auto 48px;

  text-align: center;

  opacity: 0;
  transform: translateY(35px);
}

.social-proof-heading.social-visible {
  animation:
    socialHeadingIn
    .9s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.social-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;

  color: #8d4057;

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .25em;
  text-transform: uppercase;
}

.social-eyebrow span {
  width: 30px;
  height: 1px;

  background: #c77b8f;

  animation:
    eyebrowPulse
    2.5s
    ease-in-out
    infinite;
}

.social-proof-heading h2 {
  margin: 15px 0 13px;

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size:
    clamp(2.6rem,5vw,4.5rem);

  line-height: .95;

  letter-spacing: -.045em;
}

.social-title-main {
  color: #541a2c;
}

.social-title-accent {
  display: block;

  background:
    linear-gradient(
      90deg,
      #81374f,
      #d08295,
      #81374f
    );

  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  animation:
    titleShimmer
    5s
    linear
    infinite;
}

.social-proof-heading p {
  max-width: 620px;

  margin: auto;

  color: #795b64;

  font-size: .96rem;
  line-height: 1.7;
}


/* =========================================================
   TWO PANELS
   ========================================================= */

.social-proof-grid {
  display: grid;

  grid-template-columns:
    minmax(0,1.2fr)
    minmax(0,1fr);

  gap: 26px;
}


/* =========================================================
   PANEL
   ========================================================= */

.social-panel {
  position: relative;

  min-width: 0;

  padding: 25px;

  border:
    1px solid
    rgba(120,43,66,.12);

  border-radius: 28px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(255,246,248,.91)
    );

  box-shadow:
    0 25px 70px
    rgba(83,30,46,.10),
    0 5px 20px
    rgba(83,30,46,.05);

  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);

  overflow: hidden;

  opacity: 0;
  transform: translateY(45px);
}

.social-panel.social-visible {
  animation:
    socialPanelIn
    1s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.social-panel::before {
  content: "";

  position: absolute;
  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 30%,
      rgba(255,255,255,.65) 48%,
      transparent 65%
    );

  transform: translateX(-120%);

  pointer-events: none;

  animation:
    panelShine
    8s
    ease-in-out
    infinite;
}






/* =========================================================
   HEADER
   ========================================================= */

.social-panel-top {
  position: relative;
  z-index: 3;

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

  gap: 15px;

  margin-bottom: 20px;
}

.social-brand {
  display: flex;
  align-items: center;

  gap: 13px;

  min-width: 0;
}

.social-icon,
.google-icon {
  width: 48px;
  height: 48px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 15px;

  box-shadow:
    0 10px 25px
    rgba(86,28,47,.15);

  animation:
    brandFloat
    4s
    ease-in-out
    infinite;
}

.instagram-icon {
  color: white;

  font-size: 1.35rem;

  background:
    linear-gradient(
      135deg,
      #63253e,
      #c56f88,
      #edb29e
    );
}

.google-icon {
  background: white;

  border:
    1px solid
    rgba(70,70,70,.08);
}

.google-icon span {
  font-family: Arial,sans-serif;

  font-weight: 900;

  font-size: 1.45rem;

  background:
    linear-gradient(
      135deg,
      #4285f4,
      #34a853,
      #fbbc05,
      #ea4335
    );

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;
}

.social-small-label {
  display: block;

  color: #9a737c;

  font-size: .62rem;
  font-weight: 800;

  letter-spacing: .14em;

  text-transform: uppercase;
}

.social-brand h3 {
  margin: 3px 0 0;

  color: #531b2d;

  font-size: 1.05rem;
  font-weight: 850;
}


/* =========================================================
   FOLLOW
   ========================================================= */

.social-follow-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 10px 15px;

  border-radius: 999px;

  color: white;
  background: #681f38;

  text-decoration: none;

  font-size: .73rem;
  font-weight: 800;

  box-shadow:
    0 10px 24px
    rgba(104,31,56,.20);

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

.social-follow-btn:hover {
  transform: translateY(-3px);

  box-shadow:
    0 16px 35px
    rgba(104,31,56,.30);
}


/* =========================================================
   LIVE GRIDS
   ========================================================= */

.live-social-grid {
  position: relative;
  z-index: 2;

  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  grid-template-rows:
    repeat(2,minmax(0,1fr));

  gap: 9px;

  min-height: 420px;
}


/* =========================================================
   INSTAGRAM CARD
   ========================================================= */

.live-instagram-card {
  position: relative;

  display: block;

  min-width: 0;

  aspect-ratio: 1 / 1;

  overflow: hidden;

  border-radius: 14px;

  background: #ead9dd;

  text-decoration: none;

  opacity: 0;

  transform:
    translateY(20px)
    scale(.95);

  animation:
    liveCardIn
    .65s
    cubic-bezier(.16,1,.3,1)
    forwards;
}

.live-instagram-card img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transition:
    transform .8s cubic-bezier(.16,1,.3,1),
    filter .6s ease;
}

.live-instagram-card:hover img {
  transform:
    scale(1.12)
    rotate(1.5deg);

  filter:
    saturate(1.12)
    contrast(1.03);
}

.instagram-card-overlay {
  position: absolute;
  inset: 0;

  display: grid;
  place-items: center;

  color: white;

  background:
    rgba(70,18,38,.28);

  opacity: 0;

  transition: opacity .35s ease;

  backdrop-filter: blur(2px);
}

.live-instagram-card:hover
.instagram-card-overlay {
  opacity: 1;
}

.instagram-card-overlay i {
  font-size: 1.5rem;

  transform: scale(.7);

  transition:
    transform .35s
    cubic-bezier(.16,1,.3,1);
}

.live-instagram-card:hover
.instagram-card-overlay i {
  transform: scale(1);
}


/* =========================================================
   VIDEO BADGE
   ========================================================= */

.instagram-video-badge {
  position: absolute;

  top: 9px;
  right: 9px;

  width: 29px;
  height: 29px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: white;

  background:
    rgba(30,10,18,.65);

  backdrop-filter: blur(8px);

  font-size: .65rem;

  z-index: 5;
}


/* =========================================================
   GOOGLE RATING
   ========================================================= */

.google-live-rating {
  text-align: right;
}

.google-live-rating strong {
  display: block;

  color: #541a2c;

  font-family: Georgia,serif;

  font-size: 1.9rem;

  line-height: 1;
}

.google-live-rating > div {
  color: #e3a42b;

  font-size: .72rem;

  letter-spacing: 1px;
}

.google-live-rating small {
  display: block;

  color: #9a737c;

  font-size: .58rem;
}


/* =========================================================
   GOOGLE REVIEW CARD
   ========================================================= */

.live-google-card {
  position: relative;

  min-width: 0;

  min-height: 0;

  padding: 15px;

  border-radius: 16px;

  border:
    1px solid
    rgba(106,37,58,.08);

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(250,240,243,.86)
    );

  box-shadow:
    0 12px 30px
    rgba(84,27,45,.06);

  opacity: 0;

  transform:
    translateY(20px)
    scale(.96);

  animation:
    liveCardIn
    .65s
    cubic-bezier(.16,1,.3,1)
    forwards;

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

.live-google-card:hover {
  transform:
    translateY(-5px)
    scale(1.015);

  box-shadow:
    0 20px 40px
    rgba(84,27,45,.12);
}

.google-review-top {
  display: flex;
  align-items: center;

  gap: 8px;

  min-width: 0;
}

.google-avatar {
  width: 34px;
  height: 34px;

  flex: 0 0 auto;

  display: grid;
  place-items: center;

  border-radius: 50%;

  overflow: hidden;

  color: white;

  background:
    linear-gradient(
      135deg,
      #68233e,
      #c77a8d
    );

  font-size: .72rem;
  font-weight: 900;
}

.google-avatar img {
  width: 100%;
  height: 100%;

  object-fit: cover;
}

.google-review-author {
  min-width: 0;
  flex: 1;
}

.google-review-author strong {
  display: block;

  overflow: hidden;

  color: #542031;

  font-size: .72rem;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.google-review-author span {
  display: block;

  margin-top: 2px;

  color: #a07881;

  font-size: .53rem;
}

.google-review-stars {
  color: #e3a42b;

  font-size: .57rem;

  letter-spacing: .5px;
}

.google-review-text {
  display: -webkit-box;

  margin: 13px 0 8px;

  overflow: hidden;

  color: #654850;

  font-size: .68rem;
  line-height: 1.55;

  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.google-review-date {
  color: #a3838b;

  font-size: .5rem;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.social-pagination {
  position: relative;
  z-index: 3;

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

  margin-top: 18px;
}

.social-page-status {
  color: #97747d;

  font-size: .65rem;
  font-weight: 800;

  letter-spacing: .08em;
}

.social-arrows {
  display: flex;
  gap: 7px;
}

.social-arrow {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border:
    1px solid
    rgba(104,31,56,.12);

  border-radius: 50%;

  color: #6b233d;

  background: white;

  cursor: pointer;

  transition:
    transform .3s ease,
    color .3s ease,
    background .3s ease,
    box-shadow .3s ease;
}

.social-arrow:hover:not(:disabled) {
  transform: translateY(-3px);

  color: white;
  background: #6b233d;

  box-shadow:
    0 12px 25px
    rgba(107,35,61,.22);
}

.social-arrow:disabled {
  opacity: .35;
  cursor: not-allowed;
}


/* =========================================================
   FOOTERS
   ========================================================= */

.social-panel-footer {
  position: relative;
  z-index: 3;

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

  gap: 15px;

  margin-top: 15px;

  color: #86656e;

  font-size: .67rem;
  font-weight: 700;
}

.social-panel-footer span {
  display: flex;
  align-items: center;
  gap: 7px;
}

.social-panel-footer span i {
  color: #a6536e;
}

.social-panel-footer a {
  display: inline-flex;
  align-items: center;
  gap: 7px;

  color: #6b233d;

  text-decoration: none;

  font-weight: 800;

  transition: gap .3s ease;
}

.social-panel-footer a:hover {
  gap: 12px;
}


/* =========================================================
   GOOGLE BUTTON
   ========================================================= */

.google-view-all {
  position: relative;
  z-index: 3;

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

  gap: 15px;

  margin-top: 15px;
  padding: 12px 14px;

  border:
    1px solid
    rgba(90,33,52,.09);

  border-radius: 13px;

  color: #5a2134;

  background:
    rgba(255,255,255,.75);

  text-decoration: none;

  font-size: .68rem;
  font-weight: 800;

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

.google-view-all:hover {
  transform: translateY(-3px);

  box-shadow:
    0 12px 30px
    rgba(80,25,43,.10);
}

.google-view-all span {
  display: flex;
  align-items: center;
  gap: 8px;
}

.google-view-all .fa-google {
  color: #4285f4;
}


/* =========================================================
   LOADING
   ========================================================= */

.social-loading {
  grid-column: 1 / -1;
  grid-row: 1 / -1;

  min-height: 300px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  gap: 5px;

  color: #97747d;

  font-size: .7rem;
}

.social-loading span {
  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #8b3a53;

  animation:
    loadingBounce
    1s
    ease-in-out
    infinite;
}

.social-loading span:nth-child(2) {
  animation-delay: .15s;
}

.social-loading span:nth-child(3) {
  animation-delay: .3s;
}

.social-loading p {
  margin-top: 7px;
}


/* =========================================================
   ERROR
   ========================================================= */

.social-error {
  grid-column: 1 / -1;

  min-height: 300px;

  display: grid;
  place-items: center;

  padding: 25px;

  text-align: center;

  color: #8b626d;

  font-size: .78rem;
}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes socialHeadingIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes socialPanelIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes liveCardIn {

  0% {
    opacity: 0;

    transform:
      translateY(22px)
      scale(.94);
  }

  70% {
    transform:
      translateY(-3px)
      scale(1.01);
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes panelShine {

  0%,
  55% {
    transform: translateX(-120%);
  }

  75%,
  100% {
    transform: translateX(120%);
  }
}

@keyframes socialOrb1 {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(55px,35px)
      scale(1.08);
  }
}

@keyframes socialOrb2 {

  0%,
  100% {
    transform:
      translate(0,0)
      scale(1);
  }

  50% {
    transform:
      translate(-45px,-35px)
      scale(1.08);
  }
}

@keyframes socialGlow {

  0%,
  100% {
    opacity: .4;
    transform:
      translate(-50%,-50%)
      scale(.9);
  }

  50% {
    opacity: .8;
    transform:
      translate(-50%,-50%)
      scale(1.1);
  }
}

@keyframes eyebrowPulse {

  0%,
  100% {
    transform: scaleX(.65);
  }

  50% {
    transform: scaleX(1.2);
  }
}

@keyframes titleShimmer {
  to {
    background-position: 200% center;
  }
}

@keyframes brandFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes loadingBounce {

  0%,
  100% {
    transform: translateY(0);
    opacity: .4;
  }

  50% {
    transform: translateY(-6px);
    opacity: 1;
  }
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .social-proof-grid {
    grid-template-columns: 1fr;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .social-proof-section {
    padding:
      60px
      12px
      70px;

    overflow-x: hidden;
  }

  .social-proof-heading {
    margin-bottom: 32px;
  }

  .social-proof-heading h2 {
    font-size:
      clamp(
        2.3rem,
        11vw,
        3.4rem
      );
  }

  .social-proof-heading p {
    padding: 0 8px;
    font-size: .84rem;
  }

  .social-proof-grid {
    display: flex;
    flex-direction: column;

    gap: 18px;
  }

  .social-panel {
    padding: 16px;

    border-radius: 21px;
  }

  .social-panel-top {
    gap: 8px;
  }

  .social-icon,
  .google-icon {
    width: 42px;
    height: 42px;
  }

  .social-brand h3 {
    font-size: .9rem;
  }

  .social-small-label {
    font-size: .55rem;
  }

  .social-follow-btn {
    padding: 8px 11px;
    font-size: .62rem;
  }

  .live-social-grid {
    gap: 6px;

    min-height: 270px;
  }

  .live-instagram-card {
    border-radius: 9px;
  }

  .live-google-card {
    padding: 10px;

    border-radius: 12px;
  }

  .google-avatar {
    width: 28px;
    height: 28px;
  }

  .google-review-author strong {
    font-size: .62rem;
  }

  .google-review-author span {
    font-size: .47rem;
  }

  .google-review-stars {
    font-size: .48rem;
  }

  .google-review-text {
    margin-top: 9px;

    font-size: .57rem;
    line-height: 1.45;

    -webkit-line-clamp: 3;
  }

  .social-panel-footer span {
    display: none;
  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 390px) {

  .social-proof-section {
    padding-left: 9px;
    padding-right: 9px;
  }

  .social-panel {
    padding: 13px;
  }

  .live-social-grid {
    gap: 5px;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .social-proof-section *,
  .social-proof-section *::before,
  .social-proof-section *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

}

/* =========================================================
   PREMIUM LIVE INSTAGRAM FEED
   NAUREEN'S BEAUTY & HAIR STUDIO
   ========================================================= */

.instagram-panel {
  min-height: 0 !important;
  height: auto !important;
  overflow: hidden !important;
}


/* =========================================================
   INSTAGRAM GRID
   ========================================================= */

.instagram-panel .instagram-grid {
  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  grid-template-rows:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  width: 100% !important;

  height: auto !important;
  min-height: 0 !important;

  margin: 18px 0 18px !important;

  padding: 0 !important;

  overflow: visible !important;
}


/* =========================================================
   INSTAGRAM CARDS
   ========================================================= */

.instagram-panel .live-instagram-card {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  aspect-ratio: 1 / 1 !important;

  min-width: 0 !important;
  min-height: 0 !important;

  overflow: hidden !important;

  border-radius: 14px !important;

  background:
    linear-gradient(
      135deg,
      #f9e7e5,
      #ffffff 45%,
      #f2d6d8
    ) !important;

  border: 1px solid
    rgba(255,255,255,.9) !important;

  box-shadow:
    0 8px 20px
    rgba(77, 22, 40, .08),
    inset 0 0 0 1px
    rgba(255,255,255,.35) !important;

  transform:
    translateY(0)
    scale(1) !important;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .45s ease !important;

  isolation: isolate;

  animation:
    instagramCardReveal
    .65s cubic-bezier(.2,.8,.2,1)
    both !important;
}


/* =========================================================
   IMAGE
   ========================================================= */

.instagram-panel
.live-instagram-card img {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;
  height: 100% !important;

  display: block !important;

  object-fit: cover !important;

  object-position: center !important;

  border-radius: inherit !important;

  margin: 0 !important;
  padding: 0 !important;

  filter:
    saturate(1.04)
    contrast(1.02) !important;

  transform: scale(1.001) !important;

  transition:
    transform .7s cubic-bezier(.2,.8,.2,1),
    filter .5s ease !important;
}


/* =========================================================
   LUXURY IMAGE SHINE
   ========================================================= */

.instagram-panel
.live-instagram-card::before {

  content: "";

  position: absolute;

  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  z-index: 3;

  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      transparent 0%,
      rgba(255,255,255,.05) 35%,
      rgba(255,255,255,.48) 50%,
      rgba(255,255,255,.05) 65%,
      transparent 100%
    );

  transform: skewX(-18deg);

  transition:
    left .8s cubic-bezier(.2,.8,.2,1);
}


/* =========================================================
   BOTTOM GRADIENT
   ========================================================= */

.instagram-panel
.live-instagram-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 1;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(49, 13, 28, .42),
      transparent 42%
    );

  opacity: .45;

  transition:
    opacity .4s ease;
}


/* =========================================================
   HOVER
   ========================================================= */

.instagram-panel
.live-instagram-card:hover {

  z-index: 5;

  transform:
    translateY(-7px)
    scale(1.025) !important;

  border-color:
    rgba(255,255,255,.95) !important;

  box-shadow:
    0 18px 38px
    rgba(73, 18, 39, .18),
    0 0 0 1px
    rgba(211, 145, 159, .15) !important;
}


.instagram-panel
.live-instagram-card:hover img {

  transform:
    scale(1.09) !important;

  filter:
    saturate(1.12)
    contrast(1.04)
    brightness(1.03) !important;
}


.instagram-panel
.live-instagram-card:hover::before {

  left: 150%;

}


.instagram-panel
.live-instagram-card:hover::after {

  opacity: .8;

}


/* =========================================================
   INSTAGRAM ICON OVERLAY
   ========================================================= */

.instagram-panel
.instagram-card-overlay {

  position: absolute !important;

  top: 50%;
  left: 50%;

  width: 48px;
  height: 48px;

  z-index: 4;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background:
    rgba(63, 20, 38, .78);

  border:
    1px solid
    rgba(255,255,255,.45);

  backdrop-filter:
    blur(10px);

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

  transform:
    translate(-50%,-50%)
    scale(.65);

  opacity: 0;

  box-shadow:
    0 8px 25px
    rgba(45, 8, 25, .3);

  transition:
    opacity .35s ease,
    transform .45s cubic-bezier(.2,.8,.2,1);
}


.instagram-panel
.live-instagram-card:hover
.instagram-card-overlay {

  opacity: 1;

  transform:
    translate(-50%,-50%)
    scale(1);

}


/* =========================================================
   VIDEO / REEL BADGE
   ========================================================= */

.instagram-panel
.instagram-video-badge {

  position: absolute;

  top: 10px;
  right: 10px;

  z-index: 5;

  width: 30px;
  height: 30px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background:
    rgba(53, 15, 33, .78);

  border:
    1px solid
    rgba(255,255,255,.45);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  box-shadow:
    0 5px 15px
    rgba(40, 10, 25, .22);

  font-size: 11px;

}


/* =========================================================
   INSTAGRAM PAGINATION
   ========================================================= */

.instagram-panel
.social-pagination {

  margin-top: 4px !important;

  padding-top: 4px !important;

}


/* =========================================================
   FOOTER
   ========================================================= */

.instagram-panel
.social-panel-footer {

  margin-top: 10px !important;

}


/* =========================================================
   CARD REVEAL
   ========================================================= */

@keyframes instagramCardReveal {

  0% {

    opacity: 0;

    transform:
      translateY(18px)
      scale(.96);

    filter:
      blur(5px);

  }

  100% {

    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .instagram-panel .instagram-grid {

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(3, minmax(0, 1fr)) !important;

    gap: 8px !important;

    margin-top: 15px !important;

  }


  .instagram-panel
  .live-instagram-card {

    aspect-ratio:
      1 / 1 !important;

    border-radius:
      11px !important;

  }


  .instagram-panel
  .instagram-card-overlay {

    width: 40px;
    height: 40px;

  }

}


@media (max-width: 430px) {

  .instagram-panel .instagram-grid {

    gap: 6px !important;

  }

}

/* =========================================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   PREMIUM 2026 SOCIAL PROOF
   INSTAGRAM + GOOGLE REVIEWS
   ========================================================= */


/* =========================================================
   ROOT EFFECT VARIABLES
   ========================================================= */

:root {
  --social-burgundy: #5a1832;
  --social-burgundy-dark: #3b1023;
  --social-rose: #b85c78;
  --social-blush: #f7dfe1;
  --social-pink: #e9a9b7;
  --social-gold: #d9a441;
  --social-white: #ffffff;
  --social-soft: rgba(255,255,255,.72);
  --social-shadow:
    0 24px 60px rgba(76, 20, 43, .10);
}


/* =========================================================
   MAIN SOCIAL SECTION
   ========================================================= */

.social-proof-section {
  position: relative !important;

  overflow: hidden !important;

  isolation: isolate;

  background:
    radial-gradient(
      circle at 8% 20%,
      rgba(236, 177, 191, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 92% 80%,
      rgba(180, 91, 119, .12),
      transparent 32%
    ) !important;
}


/* =========================================================
   ANIMATED BACKGROUND ORBS
   ========================================================= */

.social-bg-orb {
  position: absolute;

  border-radius: 50%;

  pointer-events: none;

  filter: blur(2px);

  z-index: -1;

  opacity: .55;

  animation:
    socialOrbFloat
    9s ease-in-out infinite;
}


.social-bg-orb-1 {
  width: 260px;
  height: 260px;

  top: 8%;
  left: -100px;

  background:
    radial-gradient(
      circle,
      rgba(225, 137, 161, .25),
      transparent 70%
    );
}


.social-bg-orb-2 {
  width: 320px;
  height: 320px;

  right: -130px;
  bottom: 0;

  background:
    radial-gradient(
      circle,
      rgba(111, 39, 66, .13),
      transparent 70%
    );

  animation-delay: -4s;
}


.social-bg-glow {
  position: absolute;

  width: 500px;
  height: 500px;

  left: 50%;
  top: 45%;

  transform:
    translate(-50%, -50%);

  border-radius: 50%;

  pointer-events: none;

  background:
    radial-gradient(
      circle,
      rgba(255,255,255,.75),
      transparent 68%
    );

  filter: blur(35px);

  opacity: .5;

  z-index: -1;

  animation:
    socialAmbientGlow
    7s ease-in-out infinite;
}


/* =========================================================
   TWO PANEL LAYOUT
   ========================================================= */

.social-proof-grid {
  position: relative;

  display: grid !important;

  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;

  gap: 24px !important;

  align-items: start !important;
}


/* =========================================================
   SOCIAL PANELS
   ========================================================= */

.social-proof-grid > .social-panel {
  position: relative !important;

  height: auto !important;

  min-height: 0 !important;

  align-self: start !important;

  overflow: hidden !important;

  border:
    1px solid
    rgba(255,255,255,.86) !important;

  border-radius: 26px !important;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.93),
      rgba(255,249,250,.88)
    ) !important;

  box-shadow:
    0 25px 70px
      rgba(74, 20, 42, .09),
    inset 0 1px 0
      rgba(255,255,255,.95) !important;

  backdrop-filter:
    blur(18px);

  -webkit-backdrop-filter:
    blur(18px);

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease,
    border-color .45s ease !important;
}


.social-proof-grid > .social-panel:hover {
  transform:
    translateY(-5px) !important;

  border-color:
    rgba(205, 126, 149, .35) !important;

  box-shadow:
    0 35px 85px
      rgba(74, 20, 42, .14),
    0 0 0 1px
      rgba(221,157,174,.10),
    inset 0 1px 0
      rgba(255,255,255,1) !important;
}


/* =========================================================
   PANEL LIGHT SWEEP
   ========================================================= */

.social-proof-grid > .social-panel::before {
  content: "";

  position: absolute;

  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  z-index: 0;

  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.12),
      rgba(255,255,255,.48),
      rgba(255,255,255,.10),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left 1.2s cubic-bezier(.2,.8,.2,1);
}


.social-proof-grid > .social-panel:hover::before {
  left: 150%;
}


/* =========================================================
   PANEL CONTENT ABOVE EFFECT
   ========================================================= */

.social-proof-grid > .social-panel > * {
  position: relative;

  z-index: 2;
}


/* =========================================================
   PANEL HEADER
   ========================================================= */

.social-panel-top {
  position: relative !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 16px !important;

  padding:
    22px 24px
    8px !important;
}


/* =========================================================
   SOCIAL BRAND
   ========================================================= */

.social-brand {
  display: flex !important;

  align-items: center !important;

  gap: 13px !important;

  min-width: 0;
}


.social-brand > div:last-child {
  min-width: 0;
}


.social-small-label {
  display: block;

  margin-bottom: 3px;

  font-size: 10px !important;

  font-weight: 800 !important;

  letter-spacing: .18em !important;

  text-transform: uppercase;

  color:
    rgba(90,24,50,.58) !important;
}


.social-brand h3 {
  margin: 0 !important;

  color:
    var(--social-burgundy) !important;

  font-weight: 800 !important;

  letter-spacing: -.025em !important;

  transition:
    letter-spacing .4s ease,
    transform .4s ease;
}


.social-panel:hover
.social-brand h3 {
  letter-spacing: -.01em !important;

  transform:
    translateX(2px);
}


/* =========================================================
   INSTAGRAM ICON
   ========================================================= */

.instagram-icon {
  position: relative;

  width: 50px !important;
  height: 50px !important;

  flex: 0 0 50px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border-radius: 15px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #5a1832 0%,
      #b85c78 48%,
      #efb0a4 100%
    ) !important;

  box-shadow:
    0 10px 25px
      rgba(108, 31, 58, .20);

  overflow: hidden;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;
}


.instagram-icon::before {
  content: "";

  position: absolute;

  inset: -50%;

  background:
    linear-gradient(
      120deg,
      transparent 35%,
      rgba(255,255,255,.65) 50%,
      transparent 65%
    );

  transform:
    translateX(-100%)
    rotate(12deg);

  transition:
    transform .7s ease;
}


.social-panel:hover
.instagram-icon {
  transform:
    rotate(-4deg)
    scale(1.08);

  box-shadow:
    0 15px 32px
      rgba(108, 31, 58, .28);
}


.social-panel:hover
.instagram-icon::before {
  transform:
    translateX(100%)
    rotate(12deg);
}


/* =========================================================
   FOLLOW BUTTON
   ========================================================= */

.social-follow-btn {
  position: relative;

  display: inline-flex !important;

  align-items: center;
  justify-content: center;

  gap: 8px;

  min-height: 42px;

  padding:
    0 17px !important;

  border-radius: 999px !important;

  color: #fff !important;

  background:
    linear-gradient(
      135deg,
      #4b122c,
      #731e42
    ) !important;

  box-shadow:
    0 10px 24px
      rgba(83, 19, 47, .18);

  overflow: hidden;

  text-decoration: none !important;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease;
}


.social-follow-btn::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    linear-gradient(
      110deg,
      transparent 20%,
      rgba(255,255,255,.38) 50%,
      transparent 80%
    );

  transform:
    translateX(-130%);

  transition:
    transform .65s ease;
}


.social-follow-btn:hover {
  transform:
    translateY(-3px)
    scale(1.04);

  box-shadow:
    0 15px 32px
      rgba(83, 19, 47, .28);
}


.social-follow-btn:hover::before {
  transform:
    translateX(130%);
}


/* =========================================================
   INSTAGRAM GRID
   ========================================================= */

.instagram-panel .instagram-grid {
  position: relative;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0, 1fr)) !important;

  grid-template-rows:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 10px !important;

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  margin:
    16px 0 13px !important;

  padding:
    0 24px !important;

  box-sizing: border-box !important;
}


/* =========================================================
   INSTAGRAM CARD
   ========================================================= */

.instagram-panel
.live-instagram-card {
  position: relative !important;

  display: block !important;

  width: 100% !important;

  aspect-ratio: 1 / 1 !important;

  min-width: 0 !important;
  min-height: 0 !important;

  overflow: hidden !important;

  border-radius: 15px !important;

  background:
    #f5e4e5 !important;

  border:
    1px solid
    rgba(255,255,255,.9) !important;

  box-shadow:
    0 8px 20px
      rgba(73,18,39,.08) !important;

  transform:
    translateY(18px)
    scale(.96);

  opacity: 0;

  animation:
    instagramPremiumIn
    .7s cubic-bezier(.2,.8,.2,1)
    forwards;
}


.instagram-panel
.live-instagram-card:nth-child(1) {
  animation-delay: .05s;
}

.instagram-panel
.live-instagram-card:nth-child(2) {
  animation-delay: .10s;
}

.instagram-panel
.live-instagram-card:nth-child(3) {
  animation-delay: .15s;
}

.instagram-panel
.live-instagram-card:nth-child(4) {
  animation-delay: .20s;
}

.instagram-panel
.live-instagram-card:nth-child(5) {
  animation-delay: .25s;
}

.instagram-panel
.live-instagram-card:nth-child(6) {
  animation-delay: .30s;
}


/* =========================================================
   INSTAGRAM IMAGE
   ========================================================= */

.instagram-panel
.live-instagram-card img {
  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center !important;

  margin: 0 !important;

  padding: 0 !important;

  border-radius: inherit !important;

  display: block !important;

  filter:
    saturate(1.04)
    contrast(1.02) !important;

  transform:
    scale(1.001);

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .6s ease;
}


/* =========================================================
   IMAGE LUXURY GRADIENT
   ========================================================= */

.instagram-panel
.live-instagram-card::after {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  z-index: 2;

  background:
    linear-gradient(
      to top,
      rgba(47,10,27,.40),
      transparent 45%
    );

  opacity: .25;

  transition:
    opacity .45s ease;
}


.instagram-panel
.live-instagram-card:hover::after {
  opacity: .7;
}


/* =========================================================
   IMAGE SHINE
   ========================================================= */

.instagram-panel
.live-instagram-card::before {
  content: "";

  position: absolute;

  top: 0;
  left: -140%;

  width: 65%;
  height: 100%;

  z-index: 4;

  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.06),
      rgba(255,255,255,.55),
      rgba(255,255,255,.08),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .9s cubic-bezier(.2,.8,.2,1);
}


.instagram-panel
.live-instagram-card:hover::before {
  left: 150%;
}


/* =========================================================
   IMAGE HOVER
   ========================================================= */

.instagram-panel
.live-instagram-card:hover {
  z-index: 5;

  transform:
    translateY(-6px)
    scale(1.025) !important;

  border-color:
    rgba(255,255,255,1) !important;

  box-shadow:
    0 20px 42px
      rgba(73,18,39,.18),
    0 0 0 1px
      rgba(212,139,158,.16) !important;
}


.instagram-panel
.live-instagram-card:hover img {
  transform:
    scale(1.09);

  filter:
    saturate(1.13)
    contrast(1.05)
    brightness(1.04);
}


/* =========================================================
   INSTAGRAM CENTER ICON
   ========================================================= */

.instagram-card-overlay {
  position: absolute !important;

  top: 50%;
  left: 50%;

  z-index: 5;

  width: 48px;
  height: 48px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background:
    rgba(65,16,38,.72);

  border:
    1px solid
    rgba(255,255,255,.5);

  backdrop-filter:
    blur(12px);

  -webkit-backdrop-filter:
    blur(12px);

  opacity: 0;

  transform:
    translate(-50%,-50%)
    scale(.55);

  box-shadow:
    0 12px 30px
      rgba(50,8,27,.28);

  transition:
    opacity .35s ease,
    transform .5s cubic-bezier(.2,.8,.2,1);
}


.live-instagram-card:hover
.instagram-card-overlay {
  opacity: 1;

  transform:
    translate(-50%,-50%)
    scale(1);
}


/* =========================================================
   REEL BADGE
   ========================================================= */

.instagram-video-badge {
  position: absolute !important;

  top: 9px;
  right: 9px;

  z-index: 6;

  width: 29px;
  height: 29px;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border-radius: 50%;

  color: #fff;

  background:
    rgba(55,14,34,.75);

  border:
    1px solid
    rgba(255,255,255,.5);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

  box-shadow:
    0 7px 18px
      rgba(40,8,25,.22);

  font-size: 10px;
}


/* =========================================================
   PAGINATION
   ========================================================= */

.social-pagination {
  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  padding:
    3px 24px 0 !important;

  margin: 0 !important;
}


/* =========================================================
   PAGE STATUS
   ========================================================= */

.social-page-status {
  font-weight: 800 !important;

  color:
    rgba(90,24,50,.65) !important;

  letter-spacing: .08em;

  transition:
    transform .3s ease,
    color .3s ease;
}


.social-panel:hover
.social-page-status {
  color:
    var(--social-burgundy) !important;

  transform:
    translateX(2px);
}


/* =========================================================
   ARROWS
   ========================================================= */

.social-arrows {
  display: flex;

  align-items: center;

  gap: 8px;
}


.social-arrow {
  position: relative;

  width: 40px !important;
  height: 40px !important;

  display: flex !important;

  align-items: center;
  justify-content: center;

  border-radius: 50% !important;

  border:
    1px solid
    rgba(112,44,68,.13) !important;

  color:
    var(--social-burgundy) !important;

  background:
    rgba(255,255,255,.8) !important;

  box-shadow:
    0 6px 18px
      rgba(71,19,41,.07);

  cursor: pointer;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;
}


.social-arrow:not(:disabled):hover {
  transform:
    translateY(-3px)
    scale(1.08);

  color: #fff !important;

  background:
    var(--social-burgundy) !important;

  box-shadow:
    0 12px 25px
      rgba(85,19,47,.22);
}


.social-arrow:not(:disabled):active {
  transform:
    scale(.92);
}


.social-arrow:disabled {
  opacity: .32;

  cursor: default;
}


/* =========================================================
   PANEL FOOTER
   ========================================================= */

.social-panel-footer {
  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 12px;

  padding:
    13px 24px 21px !important;

  margin: 0 !important;
}


.social-panel-footer span {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    rgba(90,24,50,.66);

  font-size: 11px;

  font-weight: 700;
}


.social-panel-footer span i {
  color:
    var(--social-rose);

  animation:
    cameraPulse
    2.4s ease-in-out infinite;
}


.social-panel-footer a {
  display: inline-flex;

  align-items: center;

  gap: 7px;

  color:
    var(--social-burgundy) !important;

  font-weight: 800;

  text-decoration: none !important;

  transition:
    gap .35s ease,
    transform .35s ease;
}


.social-panel-footer a:hover {
  gap: 11px;

  transform:
    translateX(2px);
}


/* =========================================================
   GOOGLE PANEL
   ========================================================= */

.google-reviews-panel {
  overflow: hidden !important;
}


.google-live-rating {
  transition:
    transform .4s ease;
}


.google-reviews-panel:hover
.google-live-rating {
  transform:
    translateY(-2px);
}


.google-reviews-grid {
  padding:
    8px 24px 12px !important;

  min-height: 0 !important;

  height: auto !important;
}


/* =========================================================
   GOOGLE VIEW BUTTON
   ========================================================= */

.google-view-all {
  margin:
    0 24px 21px !important;

  border-radius: 14px !important;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    box-shadow .35s ease !important;
}


.google-view-all:hover {
  transform:
    translateY(-3px);

  box-shadow:
    0 12px 25px
      rgba(70,20,42,.10);
}


/* =========================================================
   SOCIAL REVEAL
   ========================================================= */

[data-social-reveal] {
  opacity: 0;

  transform:
    translateY(28px)
    scale(.985);

  filter:
    blur(4px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;
}


[data-social-reveal].social-visible {
  opacity: 1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);
}


/* =========================================================
   KEYFRAMES
   ========================================================= */

@keyframes instagramPremiumIn {

  0% {
    opacity: 0;

    transform:
      translateY(22px)
      scale(.94);

    filter:
      blur(6px);
  }

  60% {
    opacity: 1;
  }

  100% {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);

    filter:
      blur(0);
  }

}


@keyframes socialOrbFloat {

  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(1);
  }

  50% {
    transform:
      translate3d(25px,-18px,0)
      scale(1.08);
  }

}


@keyframes socialAmbientGlow {

  0%,
  100% {
    opacity: .32;

    transform:
      translate(-50%,-50%)
      scale(.92);
  }

  50% {
    opacity: .58;

    transform:
      translate(-50%,-50%)
      scale(1.08);
  }

}


@keyframes cameraPulse {

  0%,
  100% {
    transform:
      scale(1);
  }

  50% {
    transform:
      scale(1.16);
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 900px) {

  .social-proof-grid {
    grid-template-columns:
      1fr !important;

    gap: 18px !important;
  }

}


@media (max-width: 767px) {

  .social-proof-grid {
    gap: 16px !important;
  }


  .social-proof-grid > .social-panel {
    border-radius: 22px !important;
  }


  .social-panel-top {
    padding:
      18px 17px 6px !important;
  }


  .instagram-icon {
    width: 44px !important;
    height: 44px !important;

    flex-basis: 44px;
  }


  .social-follow-btn {
    min-height: 38px;

    padding:
      0 13px !important;
  }


  .instagram-panel .instagram-grid {

    grid-template-columns:
      repeat(2, minmax(0,1fr)) !important;

    grid-template-rows:
      repeat(3, minmax(0,1fr)) !important;

    gap: 8px !important;

    padding:
      0 17px !important;

    margin:
      14px 0 12px !important;
  }


  .social-pagination {
    padding:
      2px 17px 0 !important;
  }


  .social-panel-footer {
    padding:
      12px 17px 18px !important;
  }


  .google-reviews-grid {
    padding:
      7px 17px 10px !important;
  }


  .google-view-all {
    margin:
      0 17px 17px !important;
  }

}


@media (max-width: 430px) {

  .social-panel-top {
    gap: 8px !important;
  }


  .social-brand {
    gap: 9px !important;
  }


  .social-small-label {
    font-size: 8px !important;
  }


  .social-brand h3 {
    font-size: 16px !important;
  }


  .instagram-panel .instagram-grid {

    gap: 6px !important;

    padding:
      0 13px !important;
  }


  .social-pagination {
    padding:
      2px 13px 0 !important;
  }


  .social-panel-footer {
    padding:
      11px 13px 16px !important;
  }


  .social-arrow {
    width: 36px !important;
    height: 36px !important;
  }

}


/* =========================================================
   REDUCE MOTION ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .social-proof-section *,
  .social-proof-section *::before,
  .social-proof-section *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

}

/* =========================================================
   NAUREEN'S BEAUTY & HAIR STUDIO
   PREMIUM 2026 INSTAGRAM SHOWCASE
   PASTEL / GLASS / LUXURY
   ========================================================= */


/* =========================================================
   VARIABLES
   ========================================================= */

:root {

  --ig-burgundy:
    #6b1739;

  --ig-burgundy-dark:
    #421026;

  --ig-rose:
    #c95d82;

  --ig-pink:
    #edb5c5;

  --ig-soft-pink:
    #f9e5e9;

  --ig-pale:
    #fff8f9;

  --ig-white:
    #ffffff;

  --ig-text:
    #58152f;

  --ig-muted:
    #95677a;

  --ig-gold:
    #d9a444;

}


/* =========================================================
   MAIN PANEL
   ========================================================= */

.instagram-panel {

  position: relative !important;

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  overflow: hidden !important;

  isolation: isolate;

  padding: 0 !important;

  border-radius: 30px !important;

  border:
    1px solid
    rgba(255,255,255,.95) !important;

  background:

    radial-gradient(
      circle at 15% 8%,
      rgba(255,255,255,.95),
      transparent 32%
    ),

    radial-gradient(
      circle at 90% 90%,
      rgba(235,171,191,.20),
      transparent 35%
    ),

    linear-gradient(
      145deg,
      #fffafb 0%,
      #fff5f7 50%,
      #fbe8eb 100%
    ) !important;

  box-shadow:

    0 30px 80px
    rgba(85,20,45,.11),

    inset 0 1px 0
    rgba(255,255,255,1) !important;

  transition:
    transform .55s cubic-bezier(.2,.8,.2,1),
    box-shadow .55s ease;

}


/* =========================================================
   PANEL AMBIENT GLOW
   ========================================================= */

.instagram-panel::before {

  content: "";

  position: absolute;

  width: 420px;
  height: 420px;

  top: -220px;
  right: -180px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(225,128,158,.18),
      transparent 68%
    );

  filter:
    blur(20px);

  pointer-events: none;

  z-index: -1;

  animation:
    igAmbientFloat
    8s ease-in-out infinite;

}


.instagram-panel::after {

  content: "";

  position: absolute;

  width: 320px;
  height: 320px;

  bottom: -180px;
  left: -150px;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(213,153,174,.13),
      transparent 70%
    );

  filter:
    blur(15px);

  pointer-events: none;

  z-index: -1;

  animation:
    igAmbientFloat
    10s ease-in-out infinite reverse;

}


/* =========================================================
   HEADER
   ========================================================= */

.instagram-showcase-header {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 20px;

  padding:
    24px 25px
    14px;

}


/* =========================================================
   PROFILE
   ========================================================= */

.instagram-profile {

  display: flex;

  align-items: center;

  gap: 15px;

  min-width: 0;

}


/* =========================================================
   INSTAGRAM LOGO
   ========================================================= */

.instagram-logo-premium {

  position: relative;

  width: 62px;
  height: 62px;

  flex:
    0 0 62px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius: 19px;

  color: #fff;

  background:

    radial-gradient(
      circle at 30% 105%,
      #ffd36d 0%,
      #f77737 28%,
      #e1306c 55%,
      #c13584 72%,
      #833ab4 100%
    );

  box-shadow:

    0 13px 30px
    rgba(179,55,102,.22);

  overflow: hidden;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease;

}


.instagram-logo-premium::before {

  content: "";

  position: absolute;

  inset: -70%;

  background:
    linear-gradient(
      120deg,
      transparent 40%,
      rgba(255,255,255,.55) 50%,
      transparent 60%
    );

  transform:
    translateX(-100%)
    rotate(15deg);

  transition:
    transform .8s ease;

}


.instagram-logo-premium i {

  position: relative;

  z-index: 2;

  font-size: 29px;

}


.instagram-profile:hover
.instagram-logo-premium {

  transform:
    rotate(-4deg)
    scale(1.06);

  box-shadow:

    0 18px 38px
    rgba(179,55,102,.30);

}


.instagram-profile:hover
.instagram-logo-premium::before {

  transform:
    translateX(100%)
    rotate(15deg);

}


/* =========================================================
   PROFILE TEXT
   ========================================================= */

.instagram-profile-info {

  min-width: 0;

}


.instagram-eyebrow {

  display: block;

  margin-bottom: 3px;

  color:
    var(--ig-muted);

  font-size: 9px;

  font-weight: 900;

  letter-spacing:
    .18em;

  text-transform:
    uppercase;

}


.instagram-profile-info h3 {

  margin: 0;

  color:
    var(--ig-text);

  font-size:
    clamp(17px, 1.8vw, 23px);

  line-height: 1.1;

  font-weight: 900;

  letter-spacing:
    -.035em;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

}


.instagram-tagline {

  display: block;

  margin-top: 5px;

  color:
    var(--ig-rose);

  font-size: 11px;

  font-weight: 700;

}


/* =========================================================
   FOLLOW BUTTON
   ========================================================= */

.instagram-follow-premium {

  position: relative;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  min-width: 112px;

  height: 48px;

  padding:
    0 19px;

  border-radius:
    999px;

  color:
    #fff !important;

  background:
    linear-gradient(
      135deg,
      #5b102f,
      #8a234c
    );

  text-decoration:
    none !important;

  font-size:
    12px;

  font-weight:
    900;

  box-shadow:

    0 12px 28px
    rgba(84,16,43,.22),

    inset 0 1px 0
    rgba(255,255,255,.2);

  overflow:
    hidden;

  transition:
    transform .4s cubic-bezier(.2,.8,.2,1),
    box-shadow .4s ease;

}


.instagram-follow-premium::before {

  content: "";

  position: absolute;

  top: 0;
  left: -120%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.45),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .7s ease;

}


.instagram-follow-premium:hover {

  transform:
    translateY(-4px)
    scale(1.035);

  box-shadow:

    0 17px 34px
    rgba(84,16,43,.30);

}


.instagram-follow-premium:hover::before {

  left: 150%;

}


.instagram-follow-premium i {

  font-size: 10px;

}


/* =========================================================
   POST GRID
   ========================================================= */

.instagram-premium-grid {

  position: relative;

  display: grid !important;

  grid-template-columns:
    repeat(3, minmax(0,1fr)) !important;

  grid-template-rows:
    repeat(3, minmax(0,1fr)) !important;

  gap: 10px !important;

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  padding:
    0 25px !important;

  margin:
    4px 0 16px !important;

  box-sizing:
    border-box !important;

}


/* =========================================================
   POST CARD
   ========================================================= */

.instagram-post-card {

  position: relative;

  display: block;

  width: 100%;

  aspect-ratio:
    1 / 1;

  overflow: hidden;

  border-radius:
    15px;

  background:
    #f1dfe3;

  border:
    1px solid
    rgba(255,255,255,.95);

  box-shadow:

    0 8px 20px
    rgba(75,16,39,.07);

  text-decoration:
    none !important;

  opacity: 0;

  transform:
    translateY(20px)
    scale(.95);

  animation:
    igPostEnter
    .65s
    cubic-bezier(.2,.8,.2,1)
    forwards;

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;

}


.instagram-post-card:nth-child(1) {
  animation-delay: .03s;
}

.instagram-post-card:nth-child(2) {
  animation-delay: .08s;
}

.instagram-post-card:nth-child(3) {
  animation-delay: .13s;
}

.instagram-post-card:nth-child(4) {
  animation-delay: .18s;
}

.instagram-post-card:nth-child(5) {
  animation-delay: .23s;
}

.instagram-post-card:nth-child(6) {
  animation-delay: .28s;
}

.instagram-post-card:nth-child(7) {
  animation-delay: .33s;
}

.instagram-post-card:nth-child(8) {
  animation-delay: .38s;
}

.instagram-post-card:nth-child(9) {
  animation-delay: .43s;
}


/* =========================================================
   IMAGE
   ========================================================= */

.instagram-post-card img {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  object-fit:
    cover;

  object-position:
    center;

  display: block;

  margin: 0;

  padding: 0;

  transition:
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .6s ease;

}


/* =========================================================
   DARK BOTTOM GRADIENT
   ========================================================= */

.instagram-post-card::after {

  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  pointer-events: none;

  background:
    linear-gradient(
      to top,
      rgba(35,7,21,.68) 0%,
      rgba(35,7,21,.18) 34%,
      transparent 65%
    );

}


/* =========================================================
   SHINE
   ========================================================= */

.instagram-post-card::before {

  content: "";

  position: absolute;

  top: 0;

  left: -150%;

  width: 65%;

  height: 100%;

  z-index: 8;

  pointer-events: none;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(255,255,255,.08),
      rgba(255,255,255,.55),
      rgba(255,255,255,.08),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .85s cubic-bezier(.2,.8,.2,1);

}


.instagram-post-card:hover {

  z-index: 10;

  transform:
    translateY(-6px)
    scale(1.025);

  box-shadow:

    0 22px 40px
    rgba(73,14,39,.22),

    0 0 0 1px
    rgba(225,148,171,.22);

}


.instagram-post-card:hover img {

  transform:
    scale(1.10);

  filter:
    saturate(1.12)
    contrast(1.04)
    brightness(1.04);

}


.instagram-post-card:hover::before {

  left: 150%;

}


/* =========================================================
   REEL BADGE
   ========================================================= */

.instagram-post-type {

  position: absolute;

  top: 9px;

  right: 9px;

  z-index: 7;

  width: 34px;

  height: 34px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    50%;

  color:
    #fff;

  background:
    rgba(105,23,57,.88);

  border:
    1px solid
    rgba(255,255,255,.55);

  box-shadow:

    0 8px 20px
    rgba(43,7,24,.25);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


.instagram-post-type i {

  font-size:
    13px;

}


/* =========================================================
   POST CAPTION PILL
   ========================================================= */

.instagram-post-caption {

  position: absolute;

  left: 10px;

  bottom: 38px;

  z-index: 6;

  max-width:
    calc(100% - 20px);

  padding:
    7px 11px;

  border-radius:
    999px;

  color:
    var(--ig-burgundy-dark);

  background:
    rgba(255,255,255,.91);

  border:
    1px solid
    rgba(255,255,255,.95);

  box-shadow:
    0 7px 20px
    rgba(45,7,24,.15);

  backdrop-filter:
    blur(10px);

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

  font-size:
    9px;

  font-weight:
    800;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  opacity: 0;

  transform:
    translateY(8px);

  transition:
    opacity .35s ease,
    transform .4s ease;

}


.instagram-post-card:hover
.instagram-post-caption {

  opacity: 1;

  transform:
    translateY(0);

}


/* =========================================================
   POST META
   ========================================================= */

.instagram-post-meta {

  position: absolute;

  left: 11px;

  right: 11px;

  bottom: 10px;

  z-index: 7;

  display: flex;

  align-items: center;

  justify-content: space-between;

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    800;

}


/* =========================================================
   VIEW ICON
   ========================================================= */

.instagram-post-view {

  display: flex;

  align-items: center;

  justify-content: center;

  width: 28px;

  height: 28px;

  border-radius:
    50%;

  background:
    rgba(255,255,255,.18);

  border:
    1px solid
    rgba(255,255,255,.35);

  backdrop-filter:
    blur(8px);

  -webkit-backdrop-filter:
    blur(8px);

}


/* =========================================================
   NAVIGATION
   ========================================================= */

.instagram-navigation {

  display: grid;

  grid-template-columns:
    110px 1fr 110px;

  align-items: center;

  gap: 10px;

  padding:
    2px 25px 14px;

}


/* =========================================================
   PAGE NUMBER
   ========================================================= */

.instagram-page-number {

  display: flex;

  align-items: center;

  gap: 6px;

  color:
    rgba(89,20,48,.55);

  font-size:
    12px;

  font-weight:
    800;

}


.instagram-page-number strong {

  color:
    var(--ig-burgundy);

  font-size:
    14px;

}


/* =========================================================
   DOTS
   ========================================================= */

.instagram-page-dots {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

}


.instagram-page-dot {

  width: 8px;

  height: 8px;

  padding: 0;

  border: 0;

  border-radius:
    50%;

  background:
    #efcbd4;

  transition:
    width .35s ease,
    background .35s ease,
    transform .35s ease;

}


.instagram-page-dot.active {

  width: 22px;

  border-radius:
    999px;

  background:
    var(--ig-burgundy);

  box-shadow:
    0 3px 10px
    rgba(91,16,47,.20);

}


.instagram-page-dot:hover {

  transform:
    scale(1.25);

}


/* =========================================================
   NAV BUTTONS
   ========================================================= */

.instagram-navigation-arrows {

  display: flex;

  justify-content: flex-end;

  gap: 8px;

}


.instagram-nav-button {

  width: 43px;

  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  border:
    1px solid
    rgba(111,32,60,.10);

  border-radius:
    50%;

  color:
    var(--ig-burgundy);

  background:
    rgba(255,255,255,.85);

  box-shadow:
    0 8px 20px
    rgba(74,15,39,.07);

  cursor:
    pointer;

  transition:
    transform .35s cubic-bezier(.2,.8,.2,1),
    background .35s ease,
    color .35s ease,
    box-shadow .35s ease;

}


.instagram-nav-button:hover:not(:disabled) {

  color:
    #fff;

  background:
    var(--ig-burgundy);

  transform:
    translateY(-4px)
    scale(1.06);

  box-shadow:
    0 13px 28px
    rgba(78,13,42,.20);

}


.instagram-nav-button:active:not(:disabled) {

  transform:
    scale(.92);

}


.instagram-nav-button:disabled {

  opacity:
    .3;

  cursor:
    default;

}


/* =========================================================
   FOOTER
   ========================================================= */

.instagram-showcase-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 15px;

  padding:
    8px 25px 23px;

}


/* =========================================================
   FOOTER BRAND
   ========================================================= */

.instagram-footer-brand {

  display: flex;

  align-items: center;

  gap: 12px;

}


.instagram-footer-icon {

  width: 43px;

  height: 43px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    12px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      #641536,
      #b64e72
    );

  box-shadow:
    0 9px 20px
    rgba(86,17,46,.16);

}


.instagram-footer-brand strong {

  display: block;

  color:
    var(--ig-burgundy);

  font-size:
    12px;

  font-weight:
    900;

}


.instagram-footer-brand span {

  display: block;

  margin-top:
    3px;

  color:
    var(--ig-rose);

  font-size:
    9px;

  font-weight:
    700;

}


/* =========================================================
   VIEW INSTAGRAM
   ========================================================= */

.instagram-view-link {

  display: inline-flex;

  align-items: center;

  gap: 9px;

  color:
    var(--ig-burgundy) !important;

  text-decoration:
    none !important;

  font-size:
    12px;

  font-weight:
    900;

  transition:
    gap .35s ease,
    transform .35s ease;

}


.instagram-view-link:hover {

  gap:
    14px;

  transform:
    translateX(2px);

}


.instagram-view-link i {

  font-size:
    14px;

}


/* =========================================================
   LOADING
   ========================================================= */

.instagram-premium-loading {

  grid-column:
    1 / -1;

  min-height:
    260px;

  display: flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    12px;

}


.instagram-loading-icon {

  width:
    52px;

  height:
    52px;

  display: flex;

  align-items: center;
  justify-content: center;

  border-radius:
    16px;

  color:
    #fff;

  background:
    linear-gradient(
      135deg,
      #833ab4,
      #e1306c,
      #f77737
    );

  box-shadow:
    0 13px 30px
    rgba(179,55,102,.20);

  animation:
    igLoadingFloat
    1.8s ease-in-out infinite;

}


.instagram-loading-icon i {

  font-size:
    24px;

}


.instagram-loading-lines {

  display:
    flex;

  gap:
    5px;

}


.instagram-loading-lines span {

  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--ig-rose);

  animation:
    igLoadingDot
    1.2s ease-in-out infinite;

}


.instagram-loading-lines span:nth-child(2) {

  animation-delay:
    .15s;

}


.instagram-loading-lines span:nth-child(3) {

  animation-delay:
    .30s;

}


.instagram-premium-loading p {

  margin:
    0;

  color:
    var(--ig-muted);

  font-size:
    10px;

  font-weight:
    800;

  letter-spacing:
    .08em;

  text-transform:
    uppercase;

}


/* =========================================================
   REVEAL
   ========================================================= */

[data-social-reveal] {

  opacity:
    0;

  transform:
    translateY(28px)
    scale(.985);

  filter:
    blur(4px);

  transition:
    opacity .8s ease,
    transform .8s cubic-bezier(.2,.8,.2,1),
    filter .8s ease;

}


[data-social-reveal].social-visible {

  opacity:
    1;

  transform:
    translateY(0)
    scale(1);

  filter:
    blur(0);

}


/* =========================================================
   ANIMATIONS
   ========================================================= */

@keyframes igPostEnter {

  0% {

    opacity:
      0;

    transform:
      translateY(22px)
      scale(.94);

  }

  100% {

    opacity:
      1;

    transform:
      translateY(0)
      scale(1);

  }

}


@keyframes igAmbientFloat {

  0%,
  100% {

    transform:
      translate3d(0,0,0)
      scale(1);

  }

  50% {

    transform:
      translate3d(25px,-20px,0)
      scale(1.08);

  }

}


@keyframes igLoadingFloat {

  0%,
  100% {

    transform:
      translateY(0)
      rotate(0);

  }

  50% {

    transform:
      translateY(-8px)
      rotate(-5deg);

  }

}


@keyframes igLoadingDot {

  0%,
  100% {

    transform:
      translateY(0);

    opacity:
      .35;

  }

  50% {

    transform:
      translateY(-5px);

    opacity:
      1;

  }

}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .instagram-showcase-header {

    padding:
      20px 20px 12px;

  }


  .instagram-premium-grid {

    padding:
      0 20px !important;

  }


  .instagram-navigation {

    padding:
      2px 20px 13px;

  }


  .instagram-showcase-footer {

    padding:
      8px 20px 20px;

  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 767px) {

  .instagram-panel {

    border-radius:
      22px !important;

  }


  .instagram-showcase-header {

    padding:
      18px 16px 10px;

  }


  .instagram-logo-premium {

    width:
      48px;

    height:
      48px;

    flex-basis:
      48px;

    border-radius:
      15px;

  }


  .instagram-logo-premium i {

    font-size:
      23px;

  }


  .instagram-profile {

    gap:
      10px;

  }


  .instagram-profile-info h3 {

    font-size:
      15px;

  }


  .instagram-tagline {

    font-size:
      9px;

  }


  .instagram-follow-premium {

    min-width:
      43px;

    width:
      43px;

    height:
      43px;

    padding:
      0;

  }


  .instagram-follow-premium span {

    display:
      none;

  }


  .instagram-follow-premium i {

    font-size:
      13px;

  }


  .instagram-premium-grid {

    grid-template-columns:
      repeat(2,minmax(0,1fr)) !important;

    grid-template-rows:
      repeat(3,minmax(0,1fr)) !important;

    gap:
      7px !important;

    padding:
      0 16px !important;

    margin:
      3px 0 12px !important;

  }


  .instagram-post-card {

    border-radius:
      11px;

  }


  .instagram-post-caption {

    display:
      none;

  }


  .instagram-post-type {

    width:
      28px;

    height:
      28px;

    top:
      6px;

    right:
      6px;

  }


  .instagram-post-meta {

    left:
      8px;

    right:
      8px;

    bottom:
      8px;

  }


  .instagram-navigation {

    grid-template-columns:
      55px 1fr 90px;

    padding:
      2px 16px 10px;

  }


  .instagram-page-dots {

    gap:
      4px;

  }


  .instagram-page-dot {

    width:
      6px;

    height:
      6px;

  }


  .instagram-page-dot.active {

    width:
      16px;

  }


  .instagram-nav-button {

    width:
      37px;

    height:
      37px;

  }


  .instagram-showcase-footer {

    padding:
      7px 16px 17px;

  }


  .instagram-footer-icon {

    width:
      36px;

    height:
      36px;

  }


  .instagram-footer-brand strong {

    font-size:
      10px;

  }


  .instagram-footer-brand span {

    font-size:
      8px;

  }


  .instagram-view-link {

    font-size:
      10px;

  }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

  .instagram-profile-info h3 {

    max-width:
      175px;

  }


  .instagram-tagline {

    display:
      none;

  }


  .instagram-premium-grid {

    gap:
      5px !important;

    padding:
      0 12px !important;

  }


  .instagram-navigation {

    padding-left:
      12px;

    padding-right:
      12px;

  }


  .instagram-showcase-footer {

    padding-left:
      12px;

    padding-right:
      12px;

  }


  .instagram-footer-brand span {

    display:
      none;

  }


  .instagram-view-link span {

    display:
      none;

  }


  .instagram-view-link i {

    font-size:
      18px;

  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .instagram-panel *,
  .instagram-panel *::before,
  .instagram-panel *::after {

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;

  }

}

/* =========================================================
   MOBILE INSTAGRAM — COMPACT 2 × 2
   ========================================================= */

@media (max-width: 767px) {

  /* Smaller overall Instagram panel */
  .instagram-panel {
    border-radius: 20px !important;
    padding: 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }


  /* Compact header */
  .instagram-showcase-header {
    padding: 15px 14px 9px !important;
    gap: 10px !important;
  }


  .instagram-profile {
    gap: 9px !important;
  }


  .instagram-logo-premium {
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    border-radius: 13px !important;
  }


  .instagram-logo-premium i {
    font-size: 21px !important;
  }


  .instagram-eyebrow {
    font-size: 7px !important;
    letter-spacing: .14em !important;
    margin-bottom: 2px !important;
  }


  .instagram-profile-info h3 {
    font-size: 14px !important;
    line-height: 1.1 !important;
    max-width: 190px !important;
  }


  .instagram-tagline {
    display: none !important;
  }


  /* Smaller follow button */
  .instagram-follow-premium {
    min-width: 42px !important;
    width: 42px !important;
    height: 38px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }


  .instagram-follow-premium span {
    display: none !important;
  }


  .instagram-follow-premium i {
    font-size: 12px !important;
  }


  /* =======================================================
     2 × 2 POSTS
     ======================================================= */

  .instagram-premium-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    grid-template-rows:
      repeat(2, minmax(0, 1fr)) !important;

    gap: 7px !important;

    padding:
      0 14px !important;

    margin:
      2px 0 9px !important;

    height: auto !important;

    min-height: 0 !important;
  }


  /*
   * Only show four posts on mobile.
   * The JS still has all posts and desktop pagination.
   */

  .instagram-post-card:nth-child(n + 5) {
    display: none !important;
  }


  /* Compact square images */
  .instagram-post-card {
    aspect-ratio: 1 / 1 !important;
    border-radius: 10px !important;
  }


  .instagram-post-card img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }


  /* Don't make captions take space */
  .instagram-post-caption {
    display: none !important;
  }


  /* Smaller reel badge */
  .instagram-post-type {
    width: 25px !important;
    height: 25px !important;
    top: 5px !important;
    right: 5px !important;
  }


  .instagram-post-type i {
    font-size: 9px !important;
  }


  /* Small bottom metadata */
  .instagram-post-meta {
    left: 7px !important;
    right: 7px !important;
    bottom: 6px !important;
    font-size: 7px !important;
  }


  .instagram-post-view {
    width: 23px !important;
    height: 23px !important;
  }


  .instagram-post-view i {
    font-size: 9px !important;
  }


  /* =======================================================
     NAVIGATION
     ======================================================= */

  .instagram-navigation {
    grid-template-columns:
      55px 1fr 86px !important;

    gap: 5px !important;

    padding:
      0 14px 9px !important;
  }


  .instagram-page-number {
    gap: 4px !important;
    font-size: 9px !important;
  }


  .instagram-page-number strong {
    font-size: 11px !important;
  }


  .instagram-page-dots {
    gap: 4px !important;
  }


  .instagram-page-dot {
    width: 5px !important;
    height: 5px !important;
  }


  .instagram-page-dot.active {
    width: 14px !important;
  }


  .instagram-navigation-arrows {
    gap: 5px !important;
  }


  .instagram-nav-button {
    width: 34px !important;
    height: 34px !important;
    font-size: 10px !important;
  }


  /* =======================================================
     FOOTER — SMALL
     ======================================================= */

  .instagram-showcase-footer {
    padding:
      5px 14px 12px !important;

    gap: 8px !important;
  }


  .instagram-footer-brand {
    gap: 7px !important;
  }


  .instagram-footer-icon {
    width: 29px !important;
    height: 29px !important;
    border-radius: 9px !important;
    font-size: 9px !important;
  }


  .instagram-footer-brand strong {
    font-size: 8px !important;
  }


  .instagram-footer-brand span {
    display: none !important;
  }


  .instagram-view-link {
    font-size: 8px !important;
    gap: 5px !important;
  }


  .instagram-view-link i {
    font-size: 9px !important;
  }

}


/* =========================================================
   EXTRA SMALL PHONES
   ========================================================= */

@media (max-width: 430px) {

  .instagram-showcase-header {
    padding:
      13px 12px 8px !important;
  }


  .instagram-profile {
    gap: 8px !important;
  }


  .instagram-logo-premium {
    width: 40px !important;
    height: 40px !important;
    flex-basis: 40px !important;
    border-radius: 12px !important;
  }


  .instagram-logo-premium i {
    font-size: 19px !important;
  }


  .instagram-profile-info h3 {
    font-size: 12px !important;
    max-width: 170px !important;
  }


  .instagram-premium-grid {
    gap: 5px !important;
    padding:
      0 12px !important;
    margin-bottom: 7px !important;
  }


  .instagram-post-card {
    border-radius: 8px !important;
  }


  .instagram-navigation {
    padding:
      0 12px 7px !important;
  }


  .instagram-showcase-footer {
    padding:
      4px 12px 10px !important;
  }

}

/* =========================================================
   INSTAGRAM DRAG / SWIPE
   MOUSE + TOUCH
   ========================================================= */

.instagram-premium-grid {
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}

.instagram-premium-grid.is-dragging {
  cursor: grabbing;
}

.instagram-premium-grid.is-dragging
.instagram-post-card {
  pointer-events: none;
}


/* Prevent image dragging */

.instagram-premium-grid img {
  -webkit-user-drag: none;
  user-drag: none;
  pointer-events: none;
}


/* Mobile */

@media (max-width: 767px) {

  .instagram-premium-grid {
    cursor: grab;
    touch-action: pan-y;
  }

}

/* =========================================
   CLEAN SERVICE MENU
   NO ADD / CALL BUTTONS
   ========================================= */

.service-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  padding: 17px 20px;
  min-height: 78px;
  box-sizing: border-box;
  transition: background .25s ease;
}

.service-row:nth-child(even) {
  background: rgba(245, 245, 245, .72);
}

.service-row:hover {
  background: rgba(247, 214, 208, .28);
}


/* HIDE BUTTONS COMPLETELY */

.service-action {
  display: none !important;
}


/* SERVICE NAME + DESCRIPTION */

.service-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.service-name {
  display: block;
  color: #252225;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 800;
}

.service-description {
  display: block;
  color: #696469;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 400;
}


/* RIGHT SIDE PRICE + TIME */

.service-meta {
  min-width: 95px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  text-align: right;
}

.service-price {
  color: #555055;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 500;
  white-space: nowrap;
}

.service-duration {
  color: #555055;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

  .service-row {
    grid-template-columns: minmax(0, 1fr) 82px;
    gap: 12px;
    padding: 15px 12px;
    min-height: 74px;
  }

  .service-name {
    font-size: 15px;
  }

  .service-description {
    font-size: 13px;
    line-height: 1.35;
  }

  .service-meta {
    min-width: 82px;
    gap: 5px;
  }

  .service-price {
    font-size: 14px;
  }

  .service-duration {
    font-size: 13px;
  }
}


/* =========================================
   SMALL PHONES
   ========================================= */

@media (max-width: 430px) {

  .service-row {
    grid-template-columns: minmax(0, 1fr) 75px;
    gap: 8px;
    padding: 14px 9px;
  }

  .service-name {
    font-size: 14px;
  }

  .service-description {
    font-size: 12px;
  }

  .service-meta {
    min-width: 75px;
  }

  .service-price {
    font-size: 13px;
  }

  .service-duration {
    font-size: 12px;
  }
}

.service-row {
  padding-left: 20px;
  padding-right: 0 !important;
}

.service-meta {
  padding-right: 0 !important;
  margin-left: auto;
  justify-self: end;
}

/* =========================================
   MOBILE SERVICE TEXT — ALWAYS LEFT
   ========================================= */

@media (max-width: 767px) {

  .service-row {
    text-align: left !important;
  }

  .service-info {
    width: 100% !important;
    min-width: 0 !important;
    text-align: left !important;
    align-items: flex-start !important;
    justify-content: center !important;
  }

  .service-name,
  .service-description {
    width: 100% !important;
    display: block !important;
    text-align: left !important;
  }

  .service-meta {
    text-align: right !important;
    align-items: flex-end !important;
    justify-self: end !important;
  }
}

/* =========================================
   SPECIAL OFFERS
   ========================================= */

.special-offers {
  --offer-blush: #f7d6d0;
  --offer-rose: #e2b4bd;
  --offer-deep: #351f28;

  position: relative;
  isolation: isolate;

  width: 100%;
  margin: 0 auto 28px;

  padding: 32px;

  border-radius: 28px;

  overflow: hidden;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(247, 214, 208, .28),
      transparent 35%
    ),
    radial-gradient(
      circle at 90% 100%,
      rgba(226, 180, 189, .25),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      #fffafa,
      #fff5f5 50%,
      #fffafa
    );

  border: 1px solid rgba(226, 180, 189, .42);

  box-shadow:
    0 20px 55px rgba(71, 34, 48, .10),
    inset 0 1px 0 rgba(255,255,255,.9);

  transform: translateY(20px);
  opacity: 0;

  animation:
    specialOfferReveal .9s cubic-bezier(.16,1,.3,1) forwards;

  animation-delay: 180ms;
}


/* animated background glow */

.special-offers-glow {
  position: absolute;
  z-index: -1;

  width: 260px;
  height: 260px;

  top: -150px;
  right: -80px;

  border-radius: 50%;

  background: rgba(247, 214, 208, .45);

  filter: blur(35px);

  animation: offerGlow 5s ease-in-out infinite alternate;
}


/* =========================================
   HEADER
   ========================================= */

.special-offers-header {
  position: relative;

  text-align: center;

  margin-bottom: 25px;
}

.special-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 14px;

  border-radius: 999px;

  background: rgba(255,255,255,.78);

  border: 1px solid rgba(226,180,189,.55);

  color: #9c596b;

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;

  box-shadow:
    0 7px 20px rgba(84, 39, 54, .08);

  animation: badgeFloat 3s ease-in-out infinite;
}

.special-offer-badge i {
  animation: sparkleRotate 2s linear infinite;
}


.special-offers-header h3 {
  margin: 13px 0 5px;

  color: #35222a;

  font-size: clamp(1.55rem, 3vw, 2.15rem);

  font-weight: 800;

  letter-spacing: -.04em;
}

.special-offers-header h3 span {
  background: linear-gradient(
    110deg,
    #9d5368,
    #d38b9c,
    #9d5368
  );

  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  animation: gradientMove 4s linear infinite;
}

.special-offers-header p {
  max-width: 500px;

  margin: 0 auto;

  color: #806b72;

  font-size: .9rem;

  line-height: 1.6;
}


/* =========================================
   OFFER GRID
   ========================================= */

.special-offers-grid {
  position: relative;

  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================
   OFFER CARD
   ========================================= */

.special-offer-card {
  position: relative;
  isolation: isolate;

  min-height: 225px;

  padding: 23px;

  display: flex;
  flex-direction: column;

  border-radius: 22px;

  overflow: hidden;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.96),
      rgba(255,246,247,.88)
    );

  border: 1px solid rgba(226,180,189,.35);

  box-shadow:
    0 12px 30px rgba(65, 31, 45, .07);

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease,
    border-color .5s ease;

  animation:
    offerCardIn .8s cubic-bezier(.16,1,.3,1) both;

  animation-delay: 420ms;
}

.special-offer-card:nth-child(2) {
  animation-delay: 560ms;
}


.special-offer-card:hover {
  transform:
    translateY(-8px)
    rotateX(1deg);

  border-color: rgba(211,139,156,.55);

  box-shadow:
    0 22px 45px rgba(65,31,45,.13);
}


/* =========================================
   SHINE SWEEP
   ========================================= */

.special-offer-shine {
  position: absolute;

  top: -100%;
  left: -60%;

  width: 45%;
  height: 300%;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255,255,255,.75),
    transparent
  );

  transform: rotate(18deg);

  transition: left .8s ease;

  pointer-events: none;
}

.special-offer-card:hover .special-offer-shine {
  left: 125%;
}


/* =========================================
   ICON
   ========================================= */

.special-offer-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border-radius: 14px;

  color: #8e4d61;

  background:
    linear-gradient(
      135deg,
      #f9dfdc,
      #efd0d7
    );

  box-shadow:
    0 8px 18px rgba(150,79,99,.13);

  transition:
    transform .5s cubic-bezier(.16,1,.3,1);
}

.special-offer-card:hover .special-offer-icon {
  transform:
    rotate(-8deg)
    scale(1.12);
}

.special-offer-icon i {
  font-size: 1.05rem;
}


/* =========================================
   CONTENT
   ========================================= */

.special-offer-label {
  display: block;

  margin-bottom: 4px;

  color: #a06b78;

  font-size: .67rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.special-offer-content h4 {
  margin: 0;

  color: #34222a;

  font-size: 1.25rem;
  line-height: 1.15;

  letter-spacing: -.025em;
}

.special-offer-content h4 span {
  color: #a65d70;
}

.special-offer-content p {
  max-width: 390px;

  margin: 9px 0 0;

  color: #806d73;

  font-size: .79rem;

  line-height: 1.55;
}


/* =========================================
   PRICE
   ========================================= */

.special-offer-price {
  margin-top: auto;

  padding-top: 18px;

  display: flex;
  align-items: baseline;
  gap: 8px;
}

.special-offer-price small {
  color: #9b727c;

  font-size: .62rem;
  font-weight: 800;

  letter-spacing: .1em;
}

.special-offer-price strong {
  color: #8d465d;

  font-size: 1.65rem;
  font-weight: 900;

  letter-spacing: -.045em;

  text-shadow:
    0 3px 15px rgba(141,70,93,.14);

  animation: pricePulse 3s ease-in-out infinite;
}


/* =========================================
   FLOATING SPARKLES
   ========================================= */

.special-offer-sparkle {
  position: absolute;

  color: rgba(183,105,126,.55);

  pointer-events: none;

  animation:
    sparkleFloat 3s ease-in-out infinite;
}

.sparkle-1 {
  top: 18px;
  right: 22px;

  font-size: 13px;
}

.sparkle-2 {
  top: 65px;
  right: 48px;

  font-size: 9px;

  animation-delay: .8s;
}

.sparkle-3 {
  bottom: 20px;
  right: 22px;

  font-size: 11px;

  animation-delay: 1.4s;
}


/* =========================================
   BOTTOM NOTE
   ========================================= */

.special-offers-note {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 20px;

  color: #9b6675;

  font-size: .67rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;

  animation:
    notePulse 3s ease-in-out infinite;
}

.special-offers-note i {
  font-size: .6rem;

  animation:
    boltFlash 1.5s ease-in-out infinite;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes specialOfferReveal {
  from {
    opacity: 0;
    transform:
      translateY(30px)
      scale(.97);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes offerCardIn {
  from {
    opacity: 0;
    transform:
      translateY(25px)
      scale(.96);
  }

  to {
    opacity: 1;
    transform:
      translateY(0)
      scale(1);
  }
}


@keyframes offerGlow {
  from {
    transform:
      translate3d(-20px, 10px, 0)
      scale(.9);
  }

  to {
    transform:
      translate3d(30px, 35px, 0)
      scale(1.15);
  }
}


@keyframes badgeFloat {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}


@keyframes sparkleRotate {
  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.15);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}


@keyframes gradientMove {
  to {
    background-position: 200% center;
  }
}


@keyframes sparkleFloat {
  0%, 100% {
    opacity: .35;
    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  50% {
    opacity: 1;
    transform:
      translateY(-9px)
      rotate(15deg)
      scale(1.25);
  }
}


@keyframes pricePulse {
  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}


@keyframes notePulse {
  0%, 100% {
    opacity: .7;
  }

  50% {
    opacity: 1;
  }
}


@keyframes boltFlash {
  0%, 100% {
    transform: scale(1);
    opacity: .65;
  }

  50% {
    transform: scale(1.35);
    opacity: 1;
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .special-offers {
    padding: 24px 18px;

    border-radius: 23px;

    margin-bottom: 22px;
  }

  .special-offers-header {
    margin-bottom: 20px;
  }

  .special-offers-header h3 {
    font-size: 1.55rem;
  }

  .special-offers-header p {
    font-size: .78rem;
  }

  .special-offers-grid {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .special-offer-card {
    min-height: 200px;

    padding: 20px;

    border-radius: 19px;
  }

  .special-offer-content h4 {
    font-size: 1.15rem;
  }

  .special-offer-content p {
    font-size: .76rem;
  }

  .special-offer-price strong {
    font-size: 1.5rem;
  }

  .special-offers-note {
    font-size: .58rem;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .special-offers,
  .special-offer-card,
  .special-offer-badge,
  .special-offer-price strong,
  .special-offers-note,
  .special-offer-sparkle,
  .special-offer-icon i,
  .special-offers-header h3 span {
    animation: none !important;
    transition: none !important;
  }

}

/* =========================================
   SERVICES BOTTOM SECTION
   ========================================= */

.services-bottom-section {
  position: relative;
  width: 100%;
  margin-top: 55px;
}


/* =========================================
   SERVICES SPACING / DIVIDER
   ========================================= */

.services-section-divider {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 14px;

  width: min(100%, 520px);

  margin: 0 auto 32px;
}

.services-section-divider > span {
  flex: 1;

  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(226, 180, 189, .7)
    );
}

.services-section-divider > span:last-child {
  background:
    linear-gradient(
      90deg,
      rgba(226, 180, 189, .7),
      transparent
    );
}

.services-divider-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  flex-shrink: 0;

  border-radius: 50%;

  color: #9d5368;

  background:
    linear-gradient(
      135deg,
      #fff7f6,
      #f7d6d0
    );

  border: 1px solid rgba(226, 180, 189, .5);

  box-shadow:
    0 8px 22px rgba(70, 30, 45, .08);

  animation:
    dividerFloat 3s ease-in-out infinite;
}

.services-divider-icon i {
  font-size: .82rem;

  animation:
    dividerRotate 4s ease-in-out infinite;
}


/* =========================================
   SPECIAL OFFERS
   ========================================= */

.special-offers {
  position: relative;
  isolation: isolate;

  width: 100%;

  padding: 32px;

  margin-bottom: 22px;

  overflow: hidden;

  border-radius: 28px;

  background:
    radial-gradient(
      circle at 10% 0%,
      rgba(247, 214, 208, .30),
      transparent 34%
    ),
    radial-gradient(
      circle at 90% 100%,
      rgba(226, 180, 189, .26),
      transparent 36%
    ),
    linear-gradient(
      135deg,
      #fffafa,
      #fff5f5 50%,
      #fffafa
    );

  border: 1px solid rgba(226, 180, 189, .42);

  box-shadow:
    0 20px 55px rgba(71, 34, 48, .10),
    inset 0 1px 0 rgba(255,255,255,.9);

  opacity: 0;

  transform:
    translateY(25px)
    scale(.98);

  animation:
    specialOfferReveal .9s cubic-bezier(.16,1,.3,1) forwards;

  animation-delay: 150ms;
}


/* =========================================
   GLOW
   ========================================= */

.special-offers-glow {
  position: absolute;

  z-index: -1;

  width: 280px;
  height: 280px;

  top: -160px;
  right: -70px;

  border-radius: 50%;

  background:
    rgba(247, 214, 208, .48);

  filter: blur(38px);

  animation:
    offerGlow 5s ease-in-out infinite alternate;
}


/* =========================================
   HEADER
   ========================================= */

.special-offers-header {
  text-align: center;

  margin-bottom: 26px;
}

.special-offer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;

  padding: 7px 14px;

  border-radius: 999px;

  background:
    rgba(255,255,255,.8);

  border: 1px solid rgba(226,180,189,.55);

  color: #9c596b;

  font-size: .72rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;

  box-shadow:
    0 7px 20px rgba(84,39,54,.08);

  animation:
    badgeFloat 3s ease-in-out infinite;
}

.special-offer-badge i {
  animation:
    sparkleRotate 2s linear infinite;
}


.special-offers-header h3 {
  margin: 13px 0 5px;

  color: #35222a;

  font-size: clamp(1.55rem, 3vw, 2.15rem);

  font-weight: 800;

  letter-spacing: -.04em;
}

.special-offers-header h3 span {
  background:
    linear-gradient(
      110deg,
      #9d5368,
      #d38b9c,
      #9d5368
    );

  background-size: 200% auto;

  -webkit-background-clip: text;
  background-clip: text;

  color: transparent;

  animation:
    gradientMove 4s linear infinite;
}

.special-offers-header p {
  max-width: 500px;

  margin: 0 auto;

  color: #806b72;

  font-size: .9rem;

  line-height: 1.6;
}


/* =========================================
   OFFER GRID
   ========================================= */

.special-offers-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 18px;
}


/* =========================================
   OFFER CARD
   ========================================= */

.special-offer-card {
  position: relative;
  isolation: isolate;

  min-height: 225px;

  padding: 23px;

  display: flex;
  flex-direction: column;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.97),
      rgba(255,246,247,.90)
    );

  border: 1px solid rgba(226,180,189,.35);

  box-shadow:
    0 12px 30px rgba(65,31,45,.07);

  transition:
    transform .5s cubic-bezier(.16,1,.3,1),
    box-shadow .5s ease,
    border-color .5s ease;

  animation:
    offerCardIn .8s cubic-bezier(.16,1,.3,1) both;

  animation-delay: 430ms;
}

.special-offer-card:nth-child(2) {
  animation-delay: 570ms;
}

.special-offer-card:hover {
  transform:
    translateY(-8px);

  border-color:
    rgba(211,139,156,.55);

  box-shadow:
    0 22px 45px rgba(65,31,45,.13);
}


/* =========================================
   CARD SHINE
   ========================================= */

.special-offer-shine {
  position: absolute;

  top: -100%;
  left: -70%;

  width: 45%;
  height: 300%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.78),
      transparent
    );

  transform: rotate(18deg);

  transition:
    left .85s ease;

  pointer-events: none;
}

.special-offer-card:hover
.special-offer-shine {
  left: 125%;
}


/* =========================================
   ICON
   ========================================= */

.special-offer-icon {
  width: 45px;
  height: 45px;

  display: grid;
  place-items: center;

  margin-bottom: 15px;

  border-radius: 14px;

  color: #8e4d61;

  background:
    linear-gradient(
      135deg,
      #f9dfdc,
      #efd0d7
    );

  box-shadow:
    0 8px 18px rgba(150,79,99,.13);

  transition:
    transform .5s cubic-bezier(.16,1,.3,1);
}

.special-offer-card:hover
.special-offer-icon {
  transform:
    rotate(-8deg)
    scale(1.12);
}


/* =========================================
   CONTENT
   ========================================= */

.special-offer-label {
  display: block;

  margin-bottom: 4px;

  color: #a06b78;

  font-size: .67rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;
}

.special-offer-content h4 {
  margin: 0;

  color: #34222a;

  font-size: 1.25rem;

  line-height: 1.15;

  letter-spacing: -.025em;
}

.special-offer-content h4 span {
  color: #a65d70;
}

.special-offer-content p {
  max-width: 390px;

  margin: 9px 0 0;

  color: #806d73;

  font-size: .79rem;

  line-height: 1.55;
}


/* =========================================
   PRICE
   ========================================= */

.special-offer-price {
  margin-top: auto;

  padding-top: 18px;

  display: flex;
  align-items: baseline;

  gap: 8px;
}

.special-offer-price small {
  color: #9b727c;

  font-size: .62rem;
  font-weight: 800;

  letter-spacing: .1em;
}

.special-offer-price strong {
  color: #8d465d;

  font-size: 1.65rem;
  font-weight: 900;

  letter-spacing: -.045em;

  text-shadow:
    0 3px 15px rgba(141,70,93,.14);

  animation:
    pricePulse 3s ease-in-out infinite;
}


/* =========================================
   SPARKLES
   ========================================= */

.special-offer-sparkle {
  position: absolute;

  color:
    rgba(183,105,126,.55);

  pointer-events: none;

  animation:
    sparkleFloat 3s ease-in-out infinite;
}

.sparkle-1 {
  top: 18px;
  right: 22px;

  font-size: 13px;
}

.sparkle-2 {
  top: 65px;
  right: 48px;

  font-size: 9px;

  animation-delay: .8s;
}

.sparkle-3 {
  bottom: 20px;
  right: 22px;

  font-size: 11px;

  animation-delay: 1.4s;
}


/* =========================================
   OFFER NOTE
   ========================================= */

.special-offers-note {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 9px;

  margin-top: 20px;

  color: #9b6675;

  font-size: .67rem;
  font-weight: 800;

  letter-spacing: .12em;
  text-transform: uppercase;

  animation:
    notePulse 3s ease-in-out infinite;
}

.special-offers-note i {
  font-size: .6rem;

  animation:
    boltFlash 1.5s ease-in-out infinite;
}


/* =========================================
   BOOKING CTA
   ========================================= */

.services-cta {
  position: relative;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 24px;

  width: 100%;

  padding: 24px 27px;

  overflow: hidden;

  border-radius: 22px;

  background:
    linear-gradient(
      110deg,
      #35222a,
      #4b2b36,
      #35222a
    );

  background-size: 200% auto;

  box-shadow:
    0 18px 42px rgba(53,34,42,.20);

  animation:
    ctaGradient 7s ease infinite,
    ctaReveal .8s cubic-bezier(.16,1,.3,1) both;

  animation-delay: 0s, 700ms;
}

.services-cta::before {
  content: "";

  position: absolute;

  inset: 0;

  background:
    radial-gradient(
      circle at 85% 50%,
      rgba(247,214,208,.18),
      transparent 35%
    );

  pointer-events: none;
}


/* =========================================
   CTA COPY
   ========================================= */

.services-cta-copy {
  position: relative;

  display: flex;
  flex-direction: column;

  gap: 5px;
}

.services-cta-kicker {
  color: #e7b8c1;

  font-size: .68rem;
  font-weight: 800;

  letter-spacing: .13em;
  text-transform: uppercase;
}

.services-cta-copy strong {
  color: #fff;

  font-size: 1.12rem;

  letter-spacing: -.02em;
}


/* =========================================
   BOOK BUTTON
   ========================================= */

.services-book-button {
  position: relative;

  display: inline-flex;

  align-items: center;

  gap: 10px;

  flex-shrink: 0;

  padding: 9px 12px 9px 9px;

  color: #fff;

  text-decoration: none;

  border-radius: 999px;

  background:
    rgba(255,255,255,.11);

  border: 1px solid rgba(255,255,255,.17);

  backdrop-filter: blur(12px);

  transition:
    transform .35s cubic-bezier(.16,1,.3,1),
    background .35s ease,
    box-shadow .35s ease;
}

.services-book-button:hover {
  transform:
    translateX(5px);

  background:
    rgba(255,255,255,.18);

  box-shadow:
    0 10px 28px rgba(0,0,0,.18);
}

.services-book-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  color: #4a2935;

  background:
    #f7d6d0;

  box-shadow:
    0 5px 15px rgba(0,0,0,.12);

  animation:
    phonePulse 2.5s ease-in-out infinite;
}

.services-book-button > span:not(.services-book-icon) {
  font-size: .84rem;

  font-weight: 800;

  white-space: nowrap;
}

.services-book-arrow {
  font-size: .7rem;

  transition:
    transform .35s ease;
}

.services-book-button:hover
.services-book-arrow {
  transform:
    translateX(4px);
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes specialOfferReveal {

  from {
    opacity: 0;

    transform:
      translateY(30px)
      scale(.97);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes offerCardIn {

  from {
    opacity: 0;

    transform:
      translateY(25px)
      scale(.96);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}

@keyframes offerGlow {

  from {
    transform:
      translate3d(-20px,10px,0)
      scale(.9);
  }

  to {
    transform:
      translate3d(30px,35px,0)
      scale(1.15);
  }
}

@keyframes badgeFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}

@keyframes sparkleRotate {

  0% {
    transform: rotate(0deg) scale(1);
  }

  50% {
    transform: rotate(180deg) scale(1.15);
  }

  100% {
    transform: rotate(360deg) scale(1);
  }
}

@keyframes gradientMove {

  to {
    background-position: 200% center;
  }
}

@keyframes sparkleFloat {

  0%, 100% {
    opacity: .35;

    transform:
      translateY(0)
      rotate(0deg)
      scale(1);
  }

  50% {
    opacity: 1;

    transform:
      translateY(-9px)
      rotate(15deg)
      scale(1.25);
  }
}

@keyframes pricePulse {

  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.035);
  }
}

@keyframes notePulse {

  0%, 100% {
    opacity: .7;
  }

  50% {
    opacity: 1;
  }
}

@keyframes boltFlash {

  0%, 100% {
    transform: scale(1);

    opacity: .65;
  }

  50% {
    transform: scale(1.35);

    opacity: 1;
  }
}

@keyframes dividerFloat {

  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}

@keyframes dividerRotate {

  0%, 100% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-8deg);
  }
}

@keyframes ctaGradient {

  0%, 100% {
    background-position: 0% center;
  }

  50% {
    background-position: 100% center;
  }
}

@keyframes ctaReveal {

  from {
    opacity: 0;

    transform:
      translateY(20px);
  }

  to {
    opacity: 1;

    transform:
      translateY(0);
  }
}

@keyframes phonePulse {

  0%, 100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.08);
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .services-bottom-section {
    margin-top: 42px;
  }

  .services-section-divider {
    margin-bottom: 24px;
  }

  .special-offers {
    padding: 24px 17px;

    border-radius: 23px;
  }

  .special-offers-grid {
    grid-template-columns: 1fr;

    gap: 13px;
  }

  .special-offer-card {
    min-height: 205px;

    padding: 20px;

    border-radius: 19px;
  }

  .special-offers-header h3 {
    font-size: 1.55rem;
  }

  .special-offers-header p {
    font-size: .78rem;
  }

  .special-offer-content h4 {
    font-size: 1.15rem;
  }

  .special-offer-content p {
    font-size: .76rem;
  }

  .special-offer-price strong {
    font-size: 1.5rem;
  }

  .special-offers-note {
    font-size: .58rem;
  }

  .services-cta {
    flex-direction: column;

    align-items: stretch;

    gap: 17px;

    padding: 21px;

    border-radius: 20px;

    text-align: center;
  }

  .services-cta-copy {
    align-items: center;
  }

  .services-cta-copy strong {
    font-size: 1rem;
  }

  .services-book-button {
    justify-content: center;

    width: 100%;
  }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .services-section-divider *,
  .special-offers *,
  .services-cta,
  .services-book-button,
  .services-book-icon {
    animation: none !important;

    transition: none !important;
  }
}

/* =========================================
   COMPACT BOOKING CTA
   ========================================= */

.services-cta-compact {
  width: min(88%, 760px);

  margin: 16px auto 0;

  padding: 15px 18px;

  min-height: 0;

  border-radius: 18px;

  gap: 18px;

  box-shadow:
    0 12px 30px rgba(53, 34, 42, .14);

  transform-origin: center;
}


/* slightly smaller text */

.services-cta-compact .services-cta-kicker {
  font-size: .58rem;
  letter-spacing: .11em;
}

.services-cta-compact .services-cta-copy strong {
  font-size: .92rem;
}




/* smaller phone button */

.services-cta-compact .services-book-button {
  padding: 7px 10px 7px 7px;

  gap: 8px;
}

.services-cta-compact .services-book-icon {
  width: 31px;
  height: 31px;

  font-size: .75rem;
}

.services-cta-compact
.services-book-button > span:not(.services-book-icon) {
  font-size: .74rem;
}

.services-cta-compact .services-book-arrow {
  font-size: .6rem;
}


/* =========================================
   HOVER EFFECT
   ========================================= */

.services-cta-compact:hover {
  transform: translateY(-3px);

  box-shadow:
    0 17px 36px rgba(53, 34, 42, .18);
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .services-cta-compact {
    width: 94%;

    margin-top: 13px;

    padding: 15px;

    gap: 12px;

    border-radius: 17px;
  }

  .services-cta-compact
  .services-cta-copy {
    align-items: center;

    text-align: center;
  }

  .services-cta-compact
  .services-cta-copy strong {
    font-size: .88rem;
  }

  .services-cta-compact
  .services-book-button {
    width: auto;

    align-self: center;
  }
}

/* =========================================
   ATTACHED COMPACT BOOKING CTA
   ========================================= */

.services-cta-compact {
  width: min(88%, 760px);

  margin: -2px auto 0;

  padding: 14px 18px;

  min-height: 0;

  border-radius: 0 0 18px 18px;

  gap: 18px;

  position: relative;
  z-index: 2;

  box-shadow:
    0 12px 28px rgba(53, 34, 42, .14);

  transform-origin: top center;
}


/* =========================================
   SMALLER CONTENT
   ========================================= */

.services-cta-compact .services-cta-kicker {
  font-size: .58rem;
  letter-spacing: .11em;
}

.services-cta-compact .services-cta-copy strong {
  font-size: .92rem;
}


/* =========================================
   PHONE BUTTON
   ========================================= */

.services-cta-compact .services-book-button {
  padding: 7px 10px 7px 7px;

  gap: 8px;
}

.services-cta-compact .services-book-icon {
  width: 31px;
  height: 31px;

  font-size: .75rem;
}

.services-cta-compact
.services-book-button > span:not(.services-book-icon) {
  font-size: .74rem;
}

.services-cta-compact .services-book-arrow {
  font-size: .6rem;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 650px) {

  .services-cta-compact {
    width: 94%;

    margin-top: -2px;

    padding: 14px;

    gap: 10px;

    border-radius: 0 0 16px 16px;
  }

  .services-cta-compact .services-cta-copy {
    align-items: center;
    text-align: center;
  }

  .services-cta-compact
  .services-cta-copy strong {
    font-size: .86rem;
  }

  .services-cta-compact
  .services-book-button {
    width: auto;
    align-self: center;
  }
}

/* =========================================
   REMOVE GAP BETWEEN OFFERS + CTA
   ========================================= */

.special-offers {
  margin-bottom: 0 !important;
}

.services-cta-compact {
  width: min(88%, 760px);

  margin: 0 auto !important;

  padding: 14px 18px;

  border-radius: 0 0 18px 18px;

  position: relative;
  z-index: 5;

  gap: 18px;
}

@media (max-width: 768px) {

  .services-tab-panels,
  .service-panel,
  .service-panel-inner {
    width: 100%;
    max-width: 100%;
  }

  .services-tab-panels {
    width: 100vw;
    max-width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }

}

/* =========================================
   SPECIAL OFFERS — FULL WIDTH MOBILE
   ========================================= */

@media (max-width: 768px) {
  .special-offers {
    width: 100vw;
    max-width: 100vw;

    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);

    box-sizing: border-box;
  }
}

/* =========================================
   HAIR SALON FLOWING TRANSITION
   ========================================= */

.studio-transition-divider {
  position: relative;
  width: 100%;
  height: 145px;
  overflow: hidden;
  isolation: isolate;
  pointer-events: none;
}


/* =========================================
   SOFT SALON GLOW
   ========================================= */

.hair-ambient-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 55%;
  height: 90px;

  transform: translate(-50%, -50%);

  background: radial-gradient(
    ellipse,
    rgba(226, 180, 189, 0.20) 0%,
    rgba(226, 180, 189, 0.08) 35%,
    transparent 72%
  );

  filter: blur(18px);

  animation: salonGlow 5s ease-in-out infinite;
}


/* =========================================
   FLOWING HAIR
   ========================================= */

.hair-flow {
  position: absolute;
  inset: 0;

  width: 100%;
  height: 100%;

  overflow: visible;
}


/* Base strand */

.hair-strand {
  fill: none;

  stroke-linecap: round;
  stroke-linejoin: round;

  stroke: url(#hairGradient);

  stroke-dasharray: 1600;
  stroke-dashoffset: 1600;

  animation:
    hairDraw 7s ease-in-out infinite,
    hairFloat 5s ease-in-out infinite;
}


/* Main strand */

.strand-main {
  stroke-width: 3;
  opacity: 0.65;
}


/* Secondary strand */

.strand-secondary {
  stroke-width: 1.8;
  opacity: 0.38;

  animation-delay: -1.2s;
}


/* Fine strands */

.strand-fine {
  stroke-width: 1;
  opacity: 0.22;

  animation-delay: -2s;
}

.strand-fine.second {
  opacity: 0.16;
  animation-delay: -3s;
}


/* =========================================
   MOVING HAIR SHINE
   ========================================= */

.hair-shine {
  position: absolute;

  top: 10px;
  left: -15%;

  width: 18%;
  height: 125px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    rgba(255, 255, 255, 0.35),
    rgba(255, 255, 255, 0.04),
    transparent
  );

  filter: blur(10px);

  transform: skewX(-20deg);

  animation: hairShineMove 6s ease-in-out infinite;
}


/* =========================================
   FLOATING PARTICLES
   ========================================= */

.hair-particles {
  position: absolute;
  inset: 0;
}

.hair-particles span {
  position: absolute;

  width: 3px;
  height: 3px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.7);

  box-shadow:
    0 0 8px rgba(255, 255, 255, 0.5);

  animation: hairParticleFloat 4s ease-in-out infinite;
}


/* Individual positions */

.hair-particles span:nth-child(1) {
  left: 18%;
  top: 48%;
  animation-delay: -1s;
}

.hair-particles span:nth-child(2) {
  left: 31%;
  top: 35%;
  animation-delay: -2.5s;
}

.hair-particles span:nth-child(3) {
  left: 47%;
  top: 62%;
  animation-delay: -0.8s;
}

.hair-particles span:nth-child(4) {
  left: 62%;
  top: 38%;
  animation-delay: -3s;
}

.hair-particles span:nth-child(5) {
  left: 76%;
  top: 55%;
  animation-delay: -1.8s;
}

.hair-particles span:nth-child(6) {
  left: 87%;
  top: 42%;
  animation-delay: -3.5s;
}


/* =========================================
   CENTER SALON DETAIL
   ========================================= */

.hair-divider-center {
  position: absolute;

  left: 50%;
  top: 50%;

  transform: translate(-50%, -50%);

  display: flex;
  align-items: center;
  gap: 14px;

  opacity: 0.9;
}


/* Elegant lines */

.center-line {
  width: 70px;
  height: 1px;

  background: linear-gradient(
    90deg,
    transparent,
    rgba(226, 180, 189, 0.55),
    transparent
  );
}


/* Center mark */

.salon-mark {
  width: 44px;
  height: 44px;

  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px solid rgba(226, 180, 189, 0.45);

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.035);

  backdrop-filter: blur(8px);

  box-shadow:
    0 0 25px rgba(226, 180, 189, 0.12);

  animation: salonMarkFloat 4s ease-in-out infinite;
}


/* Scissors */

.mark-scissors {
  font-size: 18px;

  color: rgba(226, 180, 189, 0.9);

  transform: rotate(-18deg);

  display: block;

  animation: scissorsRotate 5s ease-in-out infinite;
}


/* =========================================
   ANIMATIONS
   ========================================= */

@keyframes hairDraw {
  0% {
    stroke-dashoffset: 1600;
  }

  45% {
    stroke-dashoffset: 0;
  }

  75% {
    stroke-dashoffset: 0;
  }

  100% {
    stroke-dashoffset: -1600;
  }
}


@keyframes hairFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-4px);
  }
}


@keyframes hairShineMove {
  0% {
    left: -20%;
    opacity: 0;
  }

  20% {
    opacity: 0;
  }

  40% {
    opacity: 1;
  }

  65% {
    left: 105%;
    opacity: 0;
  }

  100% {
    left: 105%;
    opacity: 0;
  }
}


@keyframes hairParticleFloat {
  0%,
  100% {
    transform: translateY(8px) scale(0.7);
    opacity: 0;
  }

  40% {
    opacity: 0.7;
  }

  60% {
    transform: translateY(-12px) scale(1);
    opacity: 0.8;
  }
}


@keyframes salonGlow {
  0%,
  100% {
    opacity: 0.45;
    transform: translate(-50%, -50%) scale(0.9);
  }

  50% {
    opacity: 0.9;
    transform: translate(-50%, -50%) scale(1.08);
  }
}


@keyframes salonMarkFloat {
  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-3px);
  }
}


@keyframes scissorsRotate {
  0%,
  100% {
    transform: rotate(-18deg);
  }

  50% {
    transform: rotate(-8deg);
  }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 768px) {

  .studio-transition-divider {
    height: 105px;
  }

  .center-line {
    width: 38px;
  }

  .hair-divider-center {
    gap: 9px;
  }

  .salon-mark {
    width: 38px;
    height: 38px;
  }

  .mark-scissors {
    font-size: 15px;
  }

  .hair-strand {
    stroke-width: 2;
  }

  .strand-secondary {
    stroke-width: 1.3;
  }

  .strand-fine {
    stroke-width: 0.8;
  }
}


/* =========================================
   REDUCE MOTION
   ========================================= */

@media (prefers-reduced-motion: reduce) {

  .hair-strand,
  .hair-shine,
  .hair-particles span,
  .hair-ambient-glow,
  .salon-mark,
  .mark-scissors {
    animation: none;
  }
}

/* =========================================
   FULL-WIDTH SERVICE TAB NAV
   ========================================= */

.services-tab-nav-container {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;

  /* Space for hover effect */
  padding: 14px 12px;
}


/* Navigation remains full width */

.services-tab-nav {
  width: 100%;
  max-width: 100%;

  padding: 8px 4px;

  box-sizing: border-box;
}


/* Track */

.services-tab-track {
  width: 100%;
  box-sizing: border-box;

  padding: 8px 6px;

  display: flex;
  align-items: center;
}


/* =========================================
   TABS
   ========================================= */

.service-tab {
  position: relative;

  transform-origin: center;

  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    background 0.3s ease;
}


/* Keep hover inside the available space */

.service-tab:hover {
  transform: translateY(-2px) scale(1.025);
  z-index: 10;
}


/* =========================================
   MOBILE — FULL WIDTH
   ========================================= */

@media (max-width: 768px) {

  .services-tab-nav-container {
    width: 100%;
    max-width: 100%;

    padding: 12px 8px;
  }

  .services-tab-nav {
    width: 100%;
    padding: 6px 3px;
  }

  .services-tab-track {
    width: 100%;
    padding: 6px 5px;
  }

  .service-tab:hover {
    transform: translateY(-2px) scale(1.02);
  }
}

/* =====================================================
   INSTAGRAM — SINGLE FULL-WIDTH LAYOUT FIX
   ===================================================== */

/* Main wrapper */
.social-proof-grid {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;

  box-sizing: border-box;
}


/* Instagram panel */
.social-proof-grid .instagram-panel {
  display: block !important;

  width: 100% !important;
  max-width: 100% !important;

  min-width: 0;

  grid-column: 1 / -1;

  visibility: visible !important;
  opacity: 1 !important;

  box-sizing: border-box;
}


/* Make the Instagram content fill the panel */
.instagram-panel .instagram-showcase-header,
.instagram-panel .instagram-premium-grid,
.instagram-panel .instagram-navigation,
.instagram-panel .instagram-showcase-footer {
  width: 100%;
  box-sizing: border-box;
}


/* =====================================================
   INSTAGRAM GRID
   ===================================================== */

.instagram-premium-grid {
  width: 100% !important;
  max-width: 100% !important;

  min-height: 320px;

  box-sizing: border-box;
}


/* =====================================================
   MOBILE
   ===================================================== */

@media (max-width: 768px) {

  .social-proof-grid {
    display: block !important;

    width: 100% !important;
    max-width: 100% !important;

    padding: 0 !important;
  }

  .instagram-panel {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;
  }

  .instagram-showcase-header {
    width: 100%;
  }

  .instagram-premium-grid {
    width: 100% !important;
    min-height: 280px;
  }

}


/* =========================================================
   NAUREEN'S — PREMIUM ABOUT SECTION
   22 YEARS EXPERIENCE
   ========================================================= */

.naureen-about {
  --about-bg: #faf6f4;
  --about-dark: #45212c;
  --about-dark-2: #321720;
  --about-rose: #e2b4bd;
  --about-blush: #f7d6d0;
  --about-gold: #b88a62;
  --about-gold-light: #d8b08b;
  --about-white: #fff;

  position: relative;
  isolation: isolate;
  overflow: hidden;

  padding: 130px 0 105px;

  background:
    radial-gradient(
      circle at 12% 30%,
      rgba(226, 180, 189, .18),
      transparent 30%
    ),
    radial-gradient(
      circle at 90% 65%,
      rgba(184, 138, 98, .12),
      transparent 30%
    ),
    var(--about-bg);

  color: var(--about-dark);
}


/* =========================================================
   AMBIENT ORBS
   ========================================================= */

.about-orb {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;

  filter: blur(2px);

  animation:
    aboutOrbFloat 12s ease-in-out infinite;
}

.about-orb-1 {
  width: 430px;
  height: 430px;

  top: -180px;
  left: -170px;

  background:
    radial-gradient(
      circle,
      rgba(226,180,189,.35),
      rgba(226,180,189,0) 70%
    );
}

.about-orb-2 {
  width: 520px;
  height: 520px;

  right: -240px;
  top: 25%;

  background:
    radial-gradient(
      circle,
      rgba(184,138,98,.16),
      rgba(184,138,98,0) 70%
    );

  animation-delay: -4s;
}

.about-orb-3 {
  width: 320px;
  height: 320px;

  left: 40%;
  bottom: -190px;

  background:
    radial-gradient(
      circle,
      rgba(247,214,208,.35),
      transparent 70%
    );

  animation-delay: -8s;
}


@keyframes aboutOrbFloat {

  0%,
  100% {
    transform: translate3d(0,0,0) scale(1);
  }

  50% {
    transform: translate3d(30px,-25px,0) scale(1.08);
  }

}


/* =========================================================
   PARTICLES
   ========================================================= */

.about-particles {
  position: absolute;
  inset: 0;

  pointer-events: none;
  z-index: -1;
}

.about-particles span {
  position: absolute;

  width: 4px;
  height: 4px;

  border-radius: 50%;

  background: var(--about-gold);

  opacity: .35;

  animation:
    aboutParticle 8s ease-in-out infinite;
}

.about-particles span:nth-child(1) {
  left: 8%;
  top: 25%;
  animation-delay: -1s;
}

.about-particles span:nth-child(2) {
  left: 18%;
  top: 72%;
  animation-delay: -4s;
}

.about-particles span:nth-child(3) {
  left: 34%;
  top: 15%;
  animation-delay: -2s;
}

.about-particles span:nth-child(4) {
  left: 55%;
  top: 80%;
  animation-delay: -6s;
}

.about-particles span:nth-child(5) {
  left: 68%;
  top: 18%;
  animation-delay: -3s;
}

.about-particles span:nth-child(6) {
  left: 80%;
  top: 55%;
  animation-delay: -7s;
}

.about-particles span:nth-child(7) {
  left: 91%;
  top: 25%;
  animation-delay: -5s;
}

.about-particles span:nth-child(8) {
  left: 47%;
  top: 55%;
  animation-delay: -2.5s;
}


@keyframes aboutParticle {

  0%,
  100% {
    transform:
      translate3d(0,0,0)
      scale(.7);

    opacity: .15;
  }

  50% {
    transform:
      translate3d(0,-35px,0)
      scale(1.7);

    opacity: .65;
  }

}


/* =========================================================
   CONTAINER
   ========================================================= */

.about-container {
  position: relative;

  width: min(1200px, calc(100% - 40px));

  margin: 0 auto;

  display: grid;

  grid-template-columns:
    minmax(0, .92fr)
    minmax(0, 1.08fr);

  gap: 90px;

  align-items: center;
}


/* =========================================================
   LEFT
   ========================================================= */

.about-left {
  position: relative;
  z-index: 2;
}


/* =========================================================
   KICKER
   ========================================================= */

.about-kicker {
  display: flex;

  align-items: center;
  gap: 12px;

  margin-bottom: 22px;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: .28em;

  color: var(--about-gold);

  text-transform: uppercase;
}

.kicker-line {
  width: 42px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--about-gold)
    );

  transform-origin: left;

  animation: kickerLine 1.5s ease both;
}

.kicker-dot {
  width: 5px;
  height: 5px;

  border-radius: 50%;

  background: var(--about-gold);

  box-shadow:
    0 0 0 5px rgba(184,138,98,.10),
    0 0 20px rgba(184,138,98,.5);

  animation: kickerPulse 2s ease-in-out infinite;
}


@keyframes kickerLine {

  from {
    transform: scaleX(0);
  }

  to {
    transform: scaleX(1);
  }

}


@keyframes kickerPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

}


/* =========================================================
   TITLE
   ========================================================= */

.about-title {
  margin: 0 0 35px;

  max-width: 650px;

  font-size:
    clamp(42px, 5.2vw, 78px);

  line-height: .94;

  letter-spacing: -.055em;

  font-weight: 700;

  color: var(--about-dark);

  text-wrap: balance;
}

.about-title span {
  display: block;

  color: transparent;

  background:
    linear-gradient(
      110deg,
      var(--about-dark) 10%,
      var(--about-gold) 45%,
      var(--about-dark) 75%
    );

  background-size: 220% auto;

  -webkit-background-clip: text;
  background-clip: text;

  animation:
    titleShimmer 6s linear infinite;
}


@keyframes titleShimmer {

  to {
    background-position: 220% center;
  }

}


/* =========================================================
   EXPERIENCE BLOCK
   ========================================================= */

.experience-intro {
  display: flex;

  align-items: center;

  gap: 25px;

  margin-bottom: 30px;

  padding: 18px 22px;

  width: fit-content;

  border-radius: 24px;

  background:
    rgba(255,255,255,.58);

  border:
    1px solid rgba(184,138,98,.18);

  box-shadow:
    0 18px 50px rgba(69,33,44,.07),
    inset 0 1px 0 rgba(255,255,255,.8);

  backdrop-filter: blur(16px);

  transition:
    transform .5s cubic-bezier(.2,.8,.2,1),
    box-shadow .5s ease;
}

.experience-intro:hover {
  transform: translateY(-6px);

  box-shadow:
    0 25px 65px rgba(69,33,44,.12),
    inset 0 1px 0 rgba(255,255,255,.9);
}


/* =========================================================
   EXPERIENCE RING
   ========================================================= */

.experience-number-wrap {
  position: relative;

  width: 125px;
  height: 125px;

  flex: 0 0 125px;

  display: grid;
  place-items: center;
}


.experience-ring {
  position: absolute;
  inset: 0;

  animation:
    experienceRotate 18s linear infinite;
}

.experience-ring svg {
  width: 100%;
  height: 100%;

  overflow: visible;
}

.experience-ring text {
  font-size: 10px;
  font-weight: 800;

  letter-spacing: 3px;

  fill: var(--about-gold);
}


@keyframes experienceRotate {

  to {
    transform: rotate(360deg);
  }

}


/* =========================================================
   NUMBER
   ========================================================= */

.experience-number {
  position: relative;

  width: 84px;
  height: 84px;

  display: flex;

  justify-content: center;
  align-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--about-dark),
      #663341
    );

  box-shadow:
    0 12px 35px rgba(69,33,44,.25),
    inset 0 1px 1px rgba(255,255,255,.18);

  color: white;
}

.experience-number::before {
  content: "";

  position: absolute;
  inset: -5px;

  border-radius: inherit;

  border: 1px solid rgba(184,138,98,.45);

  animation:
    experiencePulse 2.5s ease-in-out infinite;
}

.experience-number strong {
  font-size: 42px;

  line-height: 1;

  letter-spacing: -.06em;

  font-weight: 700;
}

.experience-number sup {
  position: relative;

  top: -13px;

  margin-left: 2px;

  font-size: 17px;

  color: var(--about-gold-light);
}


@keyframes experiencePulse {

  0%,
  100% {
    transform: scale(1);

    opacity: .5;
  }

  50% {
    transform: scale(1.12);

    opacity: 1;
  }

}


/* =========================================================
   EXPERIENCE COPY
   ========================================================= */

.experience-copy {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.experience-copy span {
  font-size: 10px;

  letter-spacing: .25em;

  font-weight: 800;

  color: var(--about-gold);
}

.experience-copy strong {
  font-size: 20px;

  letter-spacing: -.02em;

  color: var(--about-dark);
}

.experience-copy small {
  margin-top: 3px;

  font-size: 12px;

  color: rgba(69,33,44,.62);
}


/* =========================================================
   BODY COPY
   ========================================================= */

.about-lead {
  max-width: 650px;

  margin: 0 0 17px;

  font-size: 18px;

  line-height: 1.75;

  font-weight: 500;

  color: rgba(69,33,44,.88);
}

.about-text {
  max-width: 650px;

  margin: 0;

  font-size: 15px;

  line-height: 1.9;

  color: rgba(69,33,44,.62);
}

.about-text strong {
  color: var(--about-dark);

  font-weight: 700;
}


/* =========================================================
   SIGNATURE
   ========================================================= */

.about-signature {
  display: flex;

  align-items: center;

  gap: 15px;

  margin-top: 35px;
}

.signature-mark {
  width: 48px;
  height: 48px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    linear-gradient(
      145deg,
      var(--about-dark),
      #693746
    );

  color: white;

  font-family: Georgia, serif;

  font-size: 25px;

  box-shadow:
    0 10px 25px rgba(69,33,44,.2);

  animation:
    signatureFloat 4s ease-in-out infinite;
}

.signature-info {
  display: flex;

  flex-direction: column;

  gap: 2px;
}

.signature-info strong {
  font-family: Georgia, serif;

  font-size: 20px;

  font-weight: 600;
}

.signature-info small {
  font-size: 10px;

  letter-spacing: .13em;

  text-transform: uppercase;

  color: var(--about-gold);
}

.signature-line {
  width: 70px;
  height: 1px;

  margin-left: 5px;

  background:
    linear-gradient(
      90deg,
      var(--about-gold),
      transparent
    );
}


@keyframes signatureFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }

}


/* =========================================================
   RIGHT SIDE
   ========================================================= */

.about-right {
  position: relative;
}


/* =========================================================
   IMAGE CARD
   ========================================================= */

.about-image-card {
  position: relative;

  max-width: 560px;

  margin-left: auto;

  transform-style: preserve-3d;

  transition:
    transform .25s ease;
}

.about-image-frame {
  position: relative;

  overflow: hidden;

  aspect-ratio: 4 / 4.7;

  border-radius: 30px;

  background: var(--about-dark);

  box-shadow:
    0 35px 90px rgba(69,33,44,.18),
    0 5px 15px rgba(69,33,44,.08);
}

.about-image-frame::before {
  content: "";

  position: absolute;

  inset: 0;

  z-index: 2;

  border-radius: inherit;

  border:
    1px solid rgba(255,255,255,.28);

  pointer-events: none;
}

.about-image-frame img {
  width: 100%;
  height: 100%;

  display: block;

  object-fit: cover;

  transform: scale(1.04);

  transition:
    transform 1.2s cubic-bezier(.2,.8,.2,1),
    filter 1.2s ease;
}

.about-image-card:hover img {
  transform: scale(1.10);

  filter:
    saturate(1.08)
    contrast(1.02);
}


/* =========================================================
   IMAGE OVERLAY
   ========================================================= */

.image-overlay {
  position: absolute;

  inset: 0;

  z-index: 1;

  background:
    linear-gradient(
      180deg,
      rgba(69,33,44,0) 45%,
      rgba(69,33,44,.40) 100%
    );
}

.image-shine {
  position: absolute;

  z-index: 3;

  top: -30%;
  left: -70%;

  width: 45%;
  height: 170%;

  transform: rotate(20deg);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.28),
      transparent
    );

  filter: blur(5px);

  pointer-events: none;

  animation:
    imageShine 7s ease-in-out infinite;
}


@keyframes imageShine {

  0%,
  45% {
    left: -70%;
  }

  70%,
  100% {
    left: 135%;
  }

}


/* =========================================================
   IMAGE GLOW
   ========================================================= */

.image-card-glow {
  position: absolute;

  inset: -20px;

  z-index: -1;

  border-radius: 45px;

  background:
    radial-gradient(
      ellipse,
      rgba(184,138,98,.23),
      transparent 65%
    );

  filter: blur(20px);

  animation:
    imageGlow 5s ease-in-out infinite;
}


@keyframes imageGlow {

  0%,
  100% {
    transform: scale(.96);

    opacity: .65;
  }

  50% {
    transform: scale(1.04);

    opacity: 1;
  }

}


/* =========================================================
   22 YEARS FLOATING BADGE
   ========================================================= */

.experience-floating-badge {
  position: absolute;

  z-index: 5;

  left: -35px;
  top: 45px;

  display: flex;

  align-items: center;

  gap: 12px;

  padding: 13px 18px;

  border-radius: 18px;

  color: white;

  background:
    linear-gradient(
      145deg,
      rgba(69,33,44,.96),
      rgba(94,45,59,.96)
    );

  border:
    1px solid rgba(216,176,139,.45);

  box-shadow:
    0 18px 40px rgba(69,33,44,.24);

  backdrop-filter: blur(14px);

  animation:
    floatingBadge 5s ease-in-out infinite;
}

.badge-icon {
  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  border-radius: 50%;

  background:
    rgba(216,176,139,.15);

  color: var(--about-gold-light);
}

.experience-floating-badge span {
  display: block;

  font-size: 8px;

  letter-spacing: .2em;

  color: rgba(255,255,255,.65);
}

.experience-floating-badge strong {
  display: block;

  margin-top: 2px;

  font-size: 16px;

  letter-spacing: .04em;

  color: white;
}


@keyframes floatingBadge {

  0%,
  100% {
    transform: translate3d(0,0,0);
  }

  50% {
    transform: translate3d(0,-10px,0);
  }

}


/* =========================================================
   LOCATION BADGE
   ========================================================= */

.about-float-badge {
  position: absolute;

  z-index: 5;

  right: -28px;
  bottom: 35px;

  display: flex;

  flex-direction: column;

  gap: 5px;

  padding: 17px 21px;

  border-radius: 18px;

  background:
    rgba(255,255,255,.88);

  border:
    1px solid rgba(184,138,98,.2);

  box-shadow:
    0 18px 50px rgba(69,33,44,.14);

  backdrop-filter: blur(16px);

  animation:
    locationFloat 6s ease-in-out infinite;
}

.about-float-badge span {
  font-size: 8px;

  letter-spacing: .2em;

  color: var(--about-gold);

  font-weight: 800;
}

.about-float-badge strong {
  display: flex;

  align-items: center;

  gap: 6px;

  font-size: 13px;

  letter-spacing: .08em;

  color: var(--about-dark);
}

.about-float-badge i {
  color: var(--about-gold);
}


@keyframes locationFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(8px);
  }

}


/* =========================================================
   FEATURE CARDS
   ========================================================= */

.about-features {
  display: grid;

  grid-template-columns:
    repeat(3, 1fr);

  gap: 12px;

  margin-top: 20px;
}

.about-feature {
  position: relative;

  min-height: 105px;

  padding: 17px;

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  gap: 12px;

  border-radius: 18px;

  background:
    rgba(255,255,255,.58);

  border:
    1px solid rgba(69,33,44,.07);

  box-shadow:
    0 10px 30px rgba(69,33,44,.05);

  backdrop-filter: blur(12px);

  overflow: hidden;

  transition:
    transform .45s cubic-bezier(.2,.8,.2,1),
    box-shadow .45s ease,
    border-color .45s ease;
}

.about-feature::after {
  content: "";

  position: absolute;

  left: 0;
  bottom: 0;

  width: 100%;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--about-gold),
      transparent
    );

  transform: translateX(-100%);

  transition:
    transform .55s ease;
}

.about-feature:hover {
  transform: translateY(-8px);

  border-color:
    rgba(184,138,98,.25);

  box-shadow:
    0 20px 45px rgba(69,33,44,.10);
}

.about-feature:hover::after {
  transform: translateX(0);
}


/* =========================================================
   FEATURE ICON
   ========================================================= */

.feature-icon {
  width: 38px;
  height: 38px;

  display: grid;
  place-items: center;

  border-radius: 12px;

  background:
    linear-gradient(
      145deg,
      rgba(226,180,189,.28),
      rgba(184,138,98,.10)
    );

  color: var(--about-gold);

  transition:
    transform .45s ease,
    background .45s ease;
}

.about-feature:hover .feature-icon {
  transform:
    rotate(-8deg)
    scale(1.08);

  background:
    var(--about-dark);

  color: white;
}

.feature-content {
  display: flex;

  flex-direction: column;

  gap: 4px;
}

.feature-content strong {
  font-size: 12px;

  color: var(--about-dark);
}

.feature-content small {
  font-size: 10px;

  line-height: 1.4;

  color: rgba(69,33,44,.55);
}

.feature-arrow {
  position: absolute;

  top: 15px;
  right: 15px;

  font-size: 9px;

  color: rgba(69,33,44,.35);

  transition:
    transform .4s ease,
    color .4s ease;
}

.about-feature:hover .feature-arrow {
  transform:
    translate(3px,-3px);

  color: var(--about-gold);
}


/* =========================================================
   REVEAL ANIMATION
   ========================================================= */

.about-reveal {
  opacity: 0;

  transform:
    translateY(35px);

  transition:
    opacity .9s cubic-bezier(.2,.8,.2,1),
    transform .9s cubic-bezier(.2,.8,.2,1);
}

.about-reveal.about-visible {
  opacity: 1;

  transform:
    translateY(0);
}


/* stagger */
.about-left .about-reveal:nth-child(1) {
  transition-delay: .05s;
}

.about-left .about-reveal:nth-child(2) {
  transition-delay: .12s;
}

.about-left .about-reveal:nth-child(3) {
  transition-delay: .20s;
}

.about-left .about-reveal:nth-child(4) {
  transition-delay: .28s;
}

.about-left .about-reveal:nth-child(5) {
  transition-delay: .36s;
}

.about-left .about-reveal:nth-child(6) {
  transition-delay: .44s;
}

.about-right .about-reveal:nth-child(1) {
  transition-delay: .16s;
}

.about-right .about-reveal:nth-child(2) {
  transition-delay: .35s;
}


/* =========================================================
   FOOTER BRIDGE
   ========================================================= */

.about-footer-bridge {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 15px;

  margin-top: 90px;

  color: rgba(69,33,44,.3);

  font-size: 9px;

  font-weight: 800;

  letter-spacing: .3em;
}

.about-footer-bridge span:first-child,
.about-footer-bridge span:last-child {
  width: 60px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(184,138,98,.5)
    );
}

.about-footer-bridge span:last-child {
  transform: rotate(180deg);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 950px) {

  .naureen-about {
    padding: 100px 0 80px;
  }

  .about-container {
    grid-template-columns: 1fr;

    gap: 65px;

    max-width: 720px;
  }

  .about-image-card {
    max-width: 600px;

    margin: 0 auto;
  }

  .about-title {
    max-width: 700px;
  }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

  .naureen-about {
    padding: 80px 0 65px;
  }

  .about-container {
    width:
      min(
        100% - 28px,
        500px
      );

    gap: 50px;
  }

  .about-kicker {
    font-size: 9px;

    letter-spacing: .22em;
  }

  .about-title {
    margin-bottom: 28px;

    font-size:
      clamp(39px, 12vw, 58px);

    letter-spacing: -.06em;
  }


  /* Experience */

  .experience-intro {
    width: 100%;

    padding: 15px;

    gap: 16px;

    border-radius: 20px;
  }

  .experience-number-wrap {
    width: 100px;
    height: 100px;

    flex-basis: 100px;
  }

  .experience-number {
    width: 68px;
    height: 68px;
  }

  .experience-number strong {
    font-size: 33px;
  }

  .experience-number sup {
    top: -9px;

    font-size: 13px;
  }

  .experience-copy strong {
    font-size: 16px;
  }

  .experience-copy small {
    font-size: 10px;
  }

  .experience-ring text {
    font-size: 9px;
  }


  .about-lead {
    font-size: 16px;

    line-height: 1.7;
  }

  .about-text {
    font-size: 14px;

    line-height: 1.8;
  }


  /* Image */

  .about-image-frame {
    border-radius: 23px;
  }

  .experience-floating-badge {
    left: -8px;
    top: 22px;

    padding: 10px 13px;

    border-radius: 14px;
  }

  .experience-floating-badge strong {
    font-size: 13px;
  }

  .experience-floating-badge span {
    font-size: 7px;
  }

  .badge-icon {
    width: 30px;
    height: 30px;

    font-size: 11px;
  }

  .about-float-badge {
    right: -6px;
    bottom: 20px;

    padding: 12px 14px;

    border-radius: 14px;
  }

  .about-float-badge strong {
    font-size: 11px;
  }


  /* Features */

  .about-features {
    grid-template-columns: 1fr;

    gap: 10px;

    margin-top: 14px;
  }

  .about-feature {
    min-height: 82px;

    flex-direction: row;

    align-items: center;

    padding: 14px;
  }

  .feature-content {
    flex: 1;
  }

  .feature-arrow {
    top: 50%;

    transform:
      translateY(-50%);
  }

  .about-feature:hover .feature-arrow {
    transform:
      translate(
        3px,
        calc(-50% - 3px)
      );
  }


  .about-footer-bridge {
    margin-top: 60px;

    font-size: 7px;

    letter-spacing: .22em;
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .naureen-about *,
  .naureen-about *::before,
  .naureen-about *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;

    scroll-behavior: auto !important;

    transition-duration: .01ms !important;
  }

}


/* =========================================
   ROOT TOUCH UP — EXTRA DETAILS
   ========================================= */

.special-offer-note {
  display: flex;
  align-items: center;
  gap: 6px;

  margin-top: 13px;

  font-size: 11px;
  line-height: 1.5;

  color: rgba(69, 33, 44, .68);

  letter-spacing: .01em;
}

.special-offer-note i {
  font-size: 10px;
  color: #b88a62;

  animation: colourDropPulse 2.5s ease-in-out infinite;
}

.special-offer-note strong {
  color: #45212c;
  font-weight: 700;
}

.special-offer-freshness {
  display: block;

  margin-top: 4px;

  font-size: 10px;
  line-height: 1.5;

  font-style: italic;

  color: #b88a62;
}


/* Subtle animation */
@keyframes colourDropPulse {

  0%,
  100% {
    transform: translateY(0);
    opacity: .7;
  }

  50% {
    transform: translateY(-2px);
    opacity: 1;
  }

}


/* Mobile */
@media (max-width: 600px) {

  .special-offer-note {
    font-size: 10px;
  }

  .special-offer-freshness {
    font-size: 9px;
  }


  /* =========================================
   ROOT TOUCH UP — APPLICATION NOTE
   Keeps existing card/footer layout
   ========================================= */

.special-offer-note {
  display: block;
  margin-top: 10px;

  font-size: 10px;
  line-height: 1.4;

  color: rgba(69, 33, 44, .65);
}

.special-offer-note strong {
  color: #45212c;
  font-weight: 700;
}

.special-offer-note span {
  font-weight: 400;
}

.special-offer-freshness {
  display: block;
  margin-top: 3px;

  font-size: 9px;
  line-height: 1.4;

  color: #b88a62;
  font-style: italic;
}
}