/* ==========================================================================

   CUDDLE CUTS — Exact Reference Design System

   Pixel-Accurate Recreation of the Provided Reference Designs

   ========================================================================== */



@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=Playfair+Display:ital,wght@0,500;0,600;0,700;1,500;1,600&family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');



:root {

  /* Palette directly sampled from reference */

  --bg-canvas: #FAF7F2;

  --bg-pure: #FFFFFF;

  --bg-peach: #FFF2EB;

  --bg-peach-light: #FFF8F4;

  --color-navy: #0E335C; /* Crisp, rich Dark Blue instead of black */

  --color-navy-muted: #3B5B7A; /* Refined Dark Blue Muted */

  --color-coral: #FF5E5B;

  --color-coral-hover: #E84C49;

  --color-coral-light: #FFEAE9;

  --color-green-wa: #05CD6D;

  --color-green-wa-hover: #04B860;

  --color-yellow: #FFC02A;

  --color-yellow-light: #FFF6DD;

  --color-mint-light: #E7F9F5;

  --color-blue-light: #E9F4FE;

  --color-pink-light: #FDE8ED;

  --border-subtle: rgba(14, 51, 92, 0.08);



  /* Fonts */

  --font-serif: 'DM Serif Display', Georgia, serif;

  --font-sans: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;



  /* Elevation */

  --shadow-card: 0 10px 30px -4px rgba(16, 46, 64, 0.06);

  --shadow-hover: 0 16px 40px -6px rgba(16, 46, 64, 0.12);

  --shadow-pill: 0 6px 20px -2px rgba(255, 94, 91, 0.32);



  /* Radius */

  --radius-pill: 9999px;

  --radius-card: 24px;

  --radius-arch: 100px 100px 24px 24px;

}



*, *::before, *::after {

  box-sizing: border-box;

  margin: 0;

  padding: 0;

}



html {

  scroll-behavior: smooth;

  font-size: 16px;

  overflow-x: hidden;

  max-width: 100vw;

  -webkit-text-size-adjust: 100%;

}



body {

  font-family: var(--font-sans);

  background-color: var(--bg-canvas);

  color: var(--color-navy);

  line-height: 1.6;

  overflow-x: hidden;

  max-width: 100vw;

  position: relative;

}



img, video, iframe, svg {

  max-width: 100%;

}



img {

  height: auto;

  display: block;

}



a {

  color: inherit;

  text-decoration: none;

  transition: all 0.25s ease;

}



button {

  font-family: inherit;

  cursor: pointer;

  border: none;

  outline: none;

  background: none;

}



.container {

  width: 100%;

  max-width: 1220px;

  margin: 0 auto;

  padding: 0 24px;

}



/* Typography Scale */

h1, h2, h3, h4 {

  font-family: var(--font-serif);

  color: var(--color-navy);

  font-weight: 400;

  line-height: 1.15;

}



.section-eyebrow {

  font-family: var(--font-sans);

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--color-navy-muted);

  margin-bottom: 12px;

  display: block;

}



.section-headline {

  font-size: clamp(2rem, 3.8vw, 3rem);

  color: var(--color-navy);

  margin-bottom: 16px;

}



.section-subtitle {

  font-size: 1.05rem;

  color: var(--color-navy-muted);

  max-width: 620px;

  line-height: 1.65;

}



/* Pill Buttons */

.btn-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.95rem;

  padding: 13px 28px;

  border-radius: var(--radius-pill);

  transition: all 0.25s ease;

  white-space: nowrap;

}



.btn-coral {

  background: var(--color-coral);

  color: #FFFFFF;

  box-shadow: var(--shadow-pill);

}



.btn-coral:hover {

  background: var(--color-coral-hover);

  transform: translateY(-2px);

  box-shadow: 0 10px 24px -2px rgba(255, 94, 91, 0.45);

}



.btn-outline {

  background: #FFFFFF;

  color: var(--color-navy);

  border: 1.5px solid rgba(16, 46, 64, 0.18);

}



.btn-outline:hover {

  border-color: var(--color-navy);

  background: #FAF7F2;

  transform: translateY(-2px);

}



.btn-outline-coral {

  background: #FFFFFF;

  color: var(--color-coral);

  border: 1.5px solid var(--color-coral);

  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.12);

}



.btn-outline-coral:hover {

  background: var(--color-coral);

  color: #FFFFFF;

  transform: translateY(-2px);

  box-shadow: var(--shadow-pill);

}



.btn-navy {

  background: var(--color-navy);

  color: #FFFFFF;

  box-shadow: 0 6px 20px -2px rgba(16, 46, 64, 0.25);

}



.btn-navy:hover {

  background: #1B455E;

  transform: translateY(-2px);

}



.btn-whatsapp-pill {

  background: var(--color-green-wa);

  color: #FFFFFF;

  box-shadow: 0 6px 20px -2px rgba(5, 205, 109, 0.35);

}



.btn-whatsapp-pill:hover {

  background: var(--color-green-wa-hover);

  transform: translateY(-2px);

}



/* ==========================================================================

   Header & Navigation

   ========================================================================== */

.main-header {

  background: #FFFFFF;

  border-bottom: 1px solid var(--border-subtle);

  position: sticky;

  top: 0;

  z-index: 100;

  padding: 14px 0;

}



.header-inner {

  display: flex;

  align-items: center;

  justify-content: space-between;

}



.logo-brand {

  display: flex;

  align-items: center;

  gap: 10px;

}



.logo-brand img {

  height: 52px;

  width: auto;

  object-fit: contain;

  transition: transform 0.2s ease;

}



.logo-brand:hover img {

  transform: scale(1.03);

}



.exact-footer .logo-brand img {

  height: 48px;

  margin-bottom: 6px;

}



.nav-menu-list {

  display: flex;

  align-items: center;

  list-style: none;

  gap: 36px;

}



.nav-item-link {

  font-family: var(--font-sans);

  font-size: 0.96rem;

  font-weight: 600;

  color: var(--color-navy);

  padding: 6px 0;

  position: relative;

}



.nav-item-link.active {

  font-weight: 700;

}



.nav-item-link.active::after {

  content: '';

  position: absolute;

  bottom: -4px;

  left: 0;

  width: 100%;

  height: 3px;

  background: var(--color-navy);

  border-radius: var(--radius-pill);

}



.nav-item-link:hover {

  color: var(--color-coral);

}



.header-actions-group {

  display: flex;

  align-items: center;

  gap: 12px;

}



.btn-header-call {

  background: #FFFFFF;

  color: var(--color-coral);

  border: 1.5px solid rgba(255, 94, 91, 0.32);

  padding: 9px 20px;

  border-radius: var(--radius-pill);

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.92rem;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  transition: all 0.25s ease;

}



.btn-header-call svg {

  color: var(--color-coral);

}



.btn-header-call:hover {

  border-color: var(--color-coral);

  color: var(--color-coral);

  transform: translateY(-2px);

}



.btn-header-wa-coral {

  background: var(--color-coral);

  color: #FFFFFF;

  padding: 9px 20px;

  border-radius: var(--radius-pill);

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.92rem;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow: var(--shadow-pill);

  transition: all 0.25s ease;

}



.btn-header-wa-coral:hover {

  background: var(--color-coral-hover);

  transform: translateY(-2px);

}



.btn-header-wa-green {

  background: var(--color-green-wa);

  color: #FFFFFF;

  padding: 9px 20px;

  border-radius: var(--radius-pill);

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.92rem;

  display: inline-flex;

  align-items: center;

  gap: 8px;

  box-shadow: 0 6px 20px -2px rgba(5, 205, 109, 0.35);

  transition: all 0.25s ease;

}



.btn-header-wa-green:hover {

  background: var(--color-green-wa-hover);

  transform: translateY(-2px);

}



/* ==========================================================================

   Hero Section (Edge-to-Edge Waves & Zoomed-out 4K Photo)

   ========================================================================== */

.exact-hero {

  position: relative;

  background-color: var(--bg-canvas); /* #FAF7F2 */

  overflow: hidden;

  min-height: clamp(520px, 64vh, 620px);

  display: flex;

  align-items: center;

  padding-top: 0;

  padding-bottom: 75px;

}



/* Subtle organic blob in top-left */

.hero-top-wave-blob {

  position: absolute;

  top: -120px;

  left: -100px;

  width: 560px;

  height: 560px;

  background: radial-gradient(circle at 45% 45%, rgba(255, 237, 226, 0.8) 0%, rgba(250, 247, 242, 0) 70%);

  border-radius: 46% 54% 60% 40% / 40% 48% 52% 60%;

  pointer-events: none;

  z-index: 0;

}



.hero-content-container {

  position: relative;

  z-index: 2;

  width: 100%;

}



.hero-text-block {

  max-width: 640px;

}



.hero-text-block .section-eyebrow {

  font-size: 0.92rem;

  letter-spacing: 0.16em;

  font-weight: 800;

  margin-bottom: 16px;

}



.hero-title-main {

  font-size: clamp(3.2rem, 5vw, 4.4rem);

  line-height: 1.1;

  margin-bottom: 22px;

  color: var(--color-navy);

}



.hero-title-main .coral-text {

  color: var(--color-coral);

}



.hero-sub-text {

  font-size: clamp(1.15rem, 1.45vw, 1.32rem);

  color: var(--color-navy-muted);

  line-height: 1.6;

  margin-bottom: 34px;

  max-width: 530px;

}



.hero-btns-row {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}



.hero-btns-row .btn-pill {

  font-size: 1.02rem;

  padding: 15px 32px;

}



/* Edge-to-edge right photo container (Framed towards right) */

.hero-curved-img-wrap {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  width: 52%;

  max-width: none;

  height: 100%;

  pointer-events: none;

  z-index: 1;

}



.hero-curved-portal {

  width: 100%;

  height: 100%;

  clip-path: url(#hero-s-curve);

  -webkit-clip-path: url(#hero-s-curve);

  overflow: hidden;

  position: relative;

}



.hero-curved-img-wrap.about-hero-wrap {

  width: 58%;

}



.hero-curved-img-wrap.branches-hero-wrap {

  width: 57%;

}



.hero-curved-img-wrap.contact-hero-wrap {

  width: 59%;

}



.hero-curved-portal.about-portal {

  clip-path: url(#hero-s-curve-about);

  -webkit-clip-path: url(#hero-s-curve-about);

}



.hero-curved-portal.contact-portal {

  clip-path: url(#hero-s-curve-contact);

  -webkit-clip-path: url(#hero-s-curve-contact);

}



.hero-curved-portal img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 62% 20%; /* Perfectly framed showing salon mirrors, stylist combing curls, joyful smile & chair */

  display: block;

}



.hero-curved-portal.contact-portal img {

  object-position: 60% 20%;

}



.hero-curved-img-wrap.branches-hero-wrap .hero-curved-portal img {

  object-position: 26% 54%;

}



/* Floating quote positioned in open background between S-curve and stylist, away from faces */

.hero-floating-quote {

  position: absolute;

  top: 10%;

  left: 20%;

  right: auto;

  text-align: center;

  z-index: 5;

  pointer-events: auto;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

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

  backdrop-filter: blur(8px);

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

  padding: 8px 16px;

  border-radius: 16px;

  box-shadow: 0 4px 16px rgba(14, 51, 92, 0.08);

  border: 1px solid rgba(255, 255, 255, 0.8);

}



.hero-floating-quote .quote-title {

  font-family: 'Playfair Display', 'DM Serif Display', Georgia, serif;

  font-size: clamp(0.92rem, 1.15vw, 1.15rem);

  color: var(--color-navy);

  line-height: 1.25;

  font-weight: 600;

  letter-spacing: 0.01em;

  text-align: center;

}



.hero-floating-quote .quote-heart {

  color: var(--color-navy);

  display: flex;

  justify-content: center;

  align-items: center;

  margin-top: 3px;

}



.hero-floating-quote .quote-heart svg {

  stroke: var(--color-navy);

  color: var(--color-navy);

  width: 17px;

  height: 17px;

}



/* Bottom White Wave Transition */

.hero-bottom-wave-wrap {

  position: absolute;

  left: 0;

  right: 0;

  bottom: -1px;

  width: 100%;

  line-height: 0;

  z-index: 3;

  pointer-events: none;

}



.hero-bottom-wave-svg {

  width: 100%;

  height: 85px;

  display: block;

}



/* Contact Hero Heart Doodle */

.contact-heart-doodle {

  display: inline-block;

  vertical-align: middle;

  margin-left: 8px;

  transform: rotate(14deg) translateY(-2px);

  width: 34px;

  height: 36px;

}



/* Contact Hero Unified Badges Capsule (Exact Mockup Match) */

.contact-badges-capsule {

  display: inline-flex;

  align-items: center;

  gap: 28px;

  background: #FFFFFF;

  border-radius: var(--radius-pill);

  padding: 8px 24px 8px 12px;

  box-shadow: 0 10px 32px rgba(16, 46, 64, 0.08);

  position: relative;

  z-index: 10;

  margin-top: 26px;

  max-width: 100%;

}



.contact-capsule-item {

  display: inline-flex;

  align-items: center;

  gap: 12px;

  text-decoration: none;

  background: transparent;

  padding: 0;

  transition: transform 0.25s ease;

}



.contact-capsule-item:hover {

  transform: translateY(-2px);

}



.capsule-icon-circle {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.capsule-icon-circle.icon-peach {

  background: #FFE2DE;

  color: #FF5A65;

}



.capsule-icon-circle.icon-green {

  background: #D3F6E3;

  color: #0EA66D;

}



.capsule-icon-circle.icon-pink {

  background: #FFDDE2;

  color: #FF2E56;

}



.capsule-text-info strong {

  display: block;

  font-size: 0.94rem;

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.2;

  margin-bottom: 2px;

}



.capsule-text-info span {

  display: block;

  font-size: 0.76rem;

  color: #557287;

  font-weight: 400;

  line-height: 1.2;

}



@media (max-width: 991px) {

  .contact-badges-capsule {

    border-radius: 24px;

    padding: 14px 20px;

    gap: 18px;

    flex-wrap: wrap;

  }

}



/* Contact Hero Badges Legacy Support */

.hero-badges-strip {

  display: flex;

  align-items: center;

  gap: 14px;

  margin-top: 24px;

  flex-wrap: wrap;

}



.contact-hero-pill {

  display: flex;

  align-items: center;

  gap: 10px;

  padding: 8px 18px 8px 10px;

  border-radius: var(--radius-pill);

  background: #FFFFFF;

  border: 1px solid rgba(16, 46, 64, 0.08);

  box-shadow: 0 4px 16px rgba(16, 46, 64, 0.04);

}



.contact-hero-pill.pill-peach {

  background: #FFF2EB;

  border-color: rgba(255, 94, 91, 0.15);

}



.contact-hero-pill.pill-green {

  background: #E7F9F0;

  border-color: rgba(5, 205, 109, 0.15);

}



.contact-hero-pill.pill-red {

  background: #FFEAE9;

  border-color: rgba(255, 94, 91, 0.15);

}



.pill-icon-circle {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  flex-shrink: 0;

}



.pill-peach .pill-icon-circle {

  background: #FFD4C4;

  color: var(--color-coral);

}



.pill-green .pill-icon-circle {

  background: #B6F0D4;

  color: #049B50;

}



.pill-red .pill-icon-circle {

  background: #FFC4C2;

  color: #E84C49;

}



.pill-text-info strong {

  display: block;

  font-size: 0.88rem;

  color: var(--color-navy);

  line-height: 1.2;

}



.pill-text-info span {

  font-size: 0.76rem;

  color: var(--color-navy-muted);

}



/* ==========================================================================

   Section 2: OUR SERVICES — 6 Arch Cards

   ========================================================================== */

.services-arch-section {

  padding: 38px 0 52px;

  background: #FFFFFF;

  position: relative;

  text-align: center;

}



.services-arch-section .container {

  max-width: 1360px;

  padding: 0 24px;

}



.arch-cards-grid {

  display: grid;

  grid-template-columns: repeat(6, 1fr);

  gap: 22px;

  margin-top: 50px;

  margin-bottom: 50px;

}



.arch-service-card {

  background: #FFFFFF;

  border-radius: 140px 140px 30px 30px;

  padding: 0 0 30px 0;

  box-shadow: 0 10px 32px -4px rgba(16, 46, 64, 0.07);

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  border: 1px solid rgba(16, 46, 64, 0.06);

  overflow: hidden;

  text-decoration: none;

}



.arch-service-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 22px 48px -6px rgba(16, 46, 64, 0.14);

}



.arch-card-media {

  width: 100%;

  height: 255px;

  border-radius: 140px 140px 0 0;

  overflow: hidden;

  background: #FFEFE8;

  position: relative;

}



.arch-card-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.45s ease;

}



.arch-service-card:hover .arch-card-media img {

  transform: scale(1.08);

}



/* Arch Service Cards (All 6 cards unified with square photo and bottom peach block) */
.arch-card-media {
  width: 100%;
  height: 255px;
  border-radius: 140px 140px 0 0;
  overflow: hidden;
  background: #FFEFE8 !important;
  position: relative;
  display: block;
}

.arch-card-media img,
.arch-card-media.gift-media-box img {
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.arch-card-media.gift-media-box {
  background: #FFEFE8 !important;
  display: block !important;
  padding: 0 !important;
}



.arch-icon-bubble {

  width: 50px;

  height: 50px;

  border-radius: 50%;

  background: #FFFFFF;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-top: -25px;

  margin-bottom: 16px;

  z-index: 2;

  position: relative;

  box-shadow: 0 8px 22px rgba(16, 46, 64, 0.13);

  border: 1px solid rgba(16, 46, 64, 0.05);

  transition: transform 0.3s ease;

}



.arch-service-card:hover .arch-icon-bubble {

  transform: scale(1.12);

}



.arch-icon-bubble svg {

  width: 24px;

  height: 24px;

}



.arch-card-title {

  font-family: var(--font-sans);

  font-size: 1.12rem;

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.35;

  padding: 0 12px;

}



.services-arch-section .btn-pill {

  font-size: 1.05rem;

  padding: 15px 38px;

}



/* ==========================================================================

   Section 3: MORE THAN A SALON (Full Bleed Right & Curved Left)

   ========================================================================== */

.more-than-section {

  padding: 24px 0 32px;

  background: var(--bg-canvas); /* #FAF7F2 */

  position: relative;

  overflow: hidden;

  width: 100%;

}



.more-than-grid-bleed {

  display: grid;

  grid-template-columns: minmax(320px, 490px) 1fr;

  align-items: center;

  gap: clamp(24px, 4vw, 56px);

  padding-left: max(24px, calc((100vw - 1360px) / 2 + 24px));

  padding-right: 0;

  width: 100%;

}



.more-than-text-col {

  max-width: 490px;

  padding-top: 20px;

  padding-bottom: 20px;

}



.more-than-photo-bleed {

  width: 100%;

  display: flex;

  justify-content: flex-end;

  align-items: center;

  overflow: hidden;

  border-radius: 36px 0 0 160px;

  box-shadow: 0 16px 48px rgba(30, 42, 74, 0.08);

}



.more-than-photo-bleed img {

  width: 100%;

  max-width: none;

  height: 520px;

  display: block;

  object-fit: cover;

  object-position: center;

  border: none;

  border-radius: 36px 0 0 160px;

}



/* About Page Story Section (Exact Reference Match) */

.more-than-section.about-story-cream,

.more-than-section.about-story-white {

  background-color: #FAF7F2;

  padding: 56px 0 48px;

}



.about-story-white .container {

  max-width: 1440px;

  width: 100%;

  padding: 0 clamp(20px, 3.5vw, 48px);

}



.more-than-grid {

  display: grid;

  grid-template-columns: 1.35fr 1fr;

  gap: clamp(32px, 4.5vw, 64px);

  align-items: center;

}



.more-than-photo-frame {

  width: 100%;

  border-radius: 28px;

  overflow: hidden;

  box-shadow: 0 16px 44px rgba(14, 51, 92, 0.08);

  border: 1px solid rgba(14, 51, 92, 0.06);

}



.more-than-photo-frame img {

  width: 100%;

  height: auto;

  max-height: 480px;

  object-fit: cover;

  display: block;

  border-radius: 28px;

}



@media (max-width: 991px) {

  .more-than-grid {

    grid-template-columns: 1fr;

    gap: 36px;

  }

}



/* ==========================================================================

   Branch Exact Cards (Used in Branches & Contact Pages)

   ========================================================================== */

.branches-header-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 36px;

}



.location-note-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  font-size: 0.95rem;

  color: var(--color-navy-muted);

  font-weight: 500;

}



.branches-dual-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 32px;

}



.branches-tri-grid {

  display: grid;

  grid-template-columns: 1fr 1fr 1.15fr;

  gap: 24px;

}



.branch-exact-card {

  background: #FFFFFF;

  border-radius: var(--radius-card);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  transition: all 0.3s ease;

}



.branch-exact-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-hover);

}



.branch-card-media {

  position: relative;

  height: 175px;

  overflow: hidden;

}



.branch-card-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.branch-exact-card:hover .branch-card-media img {

  transform: scale(1.05);

}



.branch-badge-pill {

  position: absolute;

  top: 14px;

  left: 14px;

  background: #0E3D6E;

  color: #FFFFFF;

  font-family: var(--font-sans);

  font-size: 0.78rem;

  font-weight: 700;

  padding: 5px 14px;

  border-radius: var(--radius-pill);

  z-index: 2;

  box-shadow: 0 2px 8px rgba(14, 61, 110, 0.28);

}



.branch-exact-body {

  padding: 16px 20px 18px;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.branch-title-header {

  display: flex;

  align-items: flex-start;

  gap: 12px;

  margin-bottom: 10px;

}



.branch-title-header .pin-badge {

  width: 34px;

  height: 34px;

  border-radius: 50%;

  background: #FFEAE9;

  color: var(--color-coral);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 16px;

  flex-shrink: 0;

}



.branch-names-wrap h3 {

  font-family: var(--font-serif);

  font-size: 1.35rem;

  line-height: 1.15;

  color: var(--color-navy);

}



.branch-names-wrap span {

  font-size: 0.88rem;

  color: var(--color-navy-muted);

}



.branch-info-row {

  display: flex;

  align-items: flex-start;

  gap: 8px;

  font-size: 0.84rem;

  color: var(--color-navy-muted);

  line-height: 1.45;

  margin-bottom: 10px;

}



.branch-info-row span {

  color: var(--color-coral);

  font-size: 16px;

}



.branch-features-split {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 12px;

  padding: 8px 0;

  border-top: 1px solid rgba(16, 46, 64, 0.06);

  border-bottom: 1px solid rgba(16, 46, 64, 0.06);

  margin-bottom: 14px;

}



.branch-feat-item {

  display: flex;

  align-items: center;

  gap: 8px;

  font-size: 0.82rem;

  color: var(--color-navy);

  font-weight: 600;

}



.branch-dual-btns {

  display: flex;

  align-items: center;

  gap: 10px;

  margin-top: auto;

}



.branch-dual-btns .btn-pill {

  flex: 1;

  padding: 11px 16px;

  font-size: 0.88rem;

}



/* Easy to Find Us (Branches Section 3) */

.easy-find-section {

  padding: 44px 0;

  background: var(--bg-canvas);

}



.easy-find-grid {

  display: grid;

  grid-template-columns: 1fr 1.35fr;

  align-items: center;

  gap: 40px;

}



.map-card-exact {

  background: #EEF5F2;

  border-radius: var(--radius-card);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  height: 100%;

  min-height: 100%;

}



.map-card-exact img {

  width: 100%;

  height: 100%;

  min-height: 100%;

  object-fit: cover;

  display: block;

  flex: 1;

}



/* Map Card in Contact 3-Col */

.contact-map-col {

  background: #FFFFFF;

  border-radius: var(--radius-card);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  height: 100%;

}



.contact-map-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 24px;

  border-bottom: 1px solid rgba(16, 46, 64, 0.06);

}



.contact-map-header h3 {

  font-family: var(--font-serif);

  font-size: 1.25rem;

  color: var(--color-navy);

}



.contact-map-body {

  position: relative;

  flex: 1;

  min-height: 220px;

  background: #EEF5F2;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

}



.contact-map-body img {

  width: 100%;

  height: 100%;

  object-fit: contain;

}



.contact-map-footer {

  padding: 16px 24px;

  background: #FAF7F2;

}



/* ==========================================================================

   Services Page Full Cards (10 Cards Grid)

   ========================================================================== */

.service-full-card {

  background: #FFFFFF;

  border-radius: var(--radius-card);

  overflow: hidden;

  box-shadow: var(--shadow-card);

  border: 1px solid var(--border-subtle);

  display: flex;

  flex-direction: column;

  transition: all 0.3s ease;

}



.service-full-card:hover {

  transform: translateY(-6px);

  box-shadow: var(--shadow-hover);

}



.service-full-card .service-card-media {

  position: relative;

  height: 220px;

  overflow: hidden;

  background: #FFEFE8;

}



.service-full-card .service-card-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

  display: block;

}



.service-full-card:hover .service-card-media img {

  transform: scale(1.05);

}



.service-full-card .service-card-body {

  padding: 24px;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.service-full-card .service-card-body h3 {

  font-family: var(--font-serif);

  font-size: 1.5rem;

  color: var(--color-navy);

  margin-bottom: 10px;

}



.service-full-card .service-card-body p {

  color: var(--color-navy-muted);

  font-size: 0.95rem;

  line-height: 1.6;

  margin-bottom: 24px;

}



.service-card-dual-btns {

  display: flex;

  gap: 10px;

  margin-top: auto;

}



.service-card-dual-btns .btn-pill {

  flex: 1;

  padding: 10px 16px;

  font-size: 0.88rem;

}



/* ==========================================================================

   Contact Page 3-Column Section (Form + Vertical Photo + Info)

   ========================================================================== */

.contact-tri-section {

  padding: 38px 0;

  background: var(--bg-canvas);

}



.contact-tri-container {

  max-width: 1380px;

  padding: 0 24px;

}



.contact-tri-grid {

  display: grid;

  grid-template-columns: 1.25fr 0.9fr 1.25fr;

  gap: 22px;

  align-items: stretch;

}



.contact-form-card {

  background: #FFFFFF;

  border-radius: 24px;

  padding: 34px 30px;

  box-shadow: 0 10px 30px rgba(16, 46, 64, 0.06);

  border: 1px solid rgba(16, 46, 64, 0.06);

  display: flex;

  flex-direction: column;

}



.contact-form-card h2 {

  font-size: 1.85rem;

  margin-bottom: 8px;

}



.contact-form-card p {

  font-size: 0.92rem;

  color: var(--color-navy-muted);

  line-height: 1.5;

  margin-bottom: 22px;

}



.contact-visual-col {

  border-radius: 24px;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(16, 46, 64, 0.06);

  height: 100%;

  min-height: 480px;

}



.contact-visual-col img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 50% 50%;

  display: block;

}



.form-group-custom {

  position: relative;

  margin-bottom: 14px;

}



.form-group-custom input,

.form-group-custom textarea {

  width: 100%;

  padding: 13px 16px 13px 44px;

  font-family: var(--font-sans);

  font-size: 0.92rem;

  color: var(--color-navy);

  background: #FFFFFF;

  border: 1.5px solid #EAE6DE;

  border-radius: 12px;

  outline: none;

  transition: all 0.25s ease;

}



.form-group-custom textarea {

  min-height: 105px;

  resize: vertical;

}



.form-group-custom input:focus,

.form-group-custom textarea:focus {

  border-color: var(--color-coral);

  background: #FFFFFF;

  box-shadow: 0 0 0 3px rgba(255, 94, 91, 0.12);

}



.form-group-custom .input-icon {

  position: absolute;

  left: 16px;

  top: 15px;

  font-size: 16px;

  color: var(--color-navy-muted);

  pointer-events: none;

}



.contact-info-card {

  background: #FFF5F4;

  border-radius: 24px;

  padding: 34px 28px;

  box-shadow: 0 10px 30px rgba(16, 46, 64, 0.05);

  border: 1px solid rgba(255, 94, 91, 0.12);

  display: flex;

  flex-direction: column;

}



.contact-info-card h2 {

  font-size: 1.85rem;

  margin-bottom: 20px;

}



.contact-info-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 12px 16px;

  border-radius: 18px;

  background: #FFFFFF;

  border: 1px solid rgba(255, 94, 91, 0.06);

  box-shadow: 0 4px 14px rgba(16, 46, 64, 0.03);

  margin-bottom: 12px;

  text-decoration: none;

  transition: all 0.25s ease;

}



.contact-info-row:hover {

  background: #FFFFFF;

  transform: translateX(4px);

  box-shadow: 0 6px 18px rgba(255, 94, 91, 0.12);

}



.info-row-left {

  display: flex;

  align-items: center;

  gap: 14px;

}



.info-row-circle {

  width: 44px;

  height: 44px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 18px;

  flex-shrink: 0;

}



.circle-peach { background: #FFE4DE; color: #FF5A65; }

.circle-green { background: #D5F6E4; color: #0E9F6E; }

.circle-blue { background: #E1EFFE; color: #2563EB; }

.circle-yellow { background: #FEF3C7; color: #D97706; }



.info-row-text strong {

  display: block;

  font-size: 0.94rem;

  font-weight: 700;

  color: var(--color-navy);

  margin-bottom: 2px;

}



.info-row-text span {

  font-size: 0.78rem;

  color: #557287;

  font-weight: 400;

}



.info-row-arrow {

  width: 28px;

  height: 28px;

  border-radius: 50%;

  background: #FAF7F2;

  display: flex;

  align-items: center;

  justify-content: center;

  color: var(--color-coral);

  box-shadow: 0 1px 4px rgba(16, 46, 64, 0.06);

  flex-shrink: 0;

}



/* ==========================================================================

   About Us Page Specifics

   ========================================================================== */

.about-vision-mission-section {

  background-color: #FFFFFF;

  padding: 36px 0 32px;

  width: 100%;

}



.vision-mission-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 28px;

  margin: 16px 0 16px;

}



.vision-mission-card {

  background: #FFFFFF;

  border-radius: var(--radius-card);

  padding: 32px 28px;

  box-shadow: 0 10px 30px rgba(14, 51, 92, 0.07);

  border: 1px solid rgba(14, 51, 92, 0.08);

  display: flex;

  align-items: flex-start;

  gap: 20px;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.vision-mission-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 14px 36px rgba(14, 51, 92, 0.1);

}



.round-icon-badge {

  width: 52px;

  height: 52px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 22px;

  flex-shrink: 0;

}



.round-icon-badge svg {

  width: 24px;

  height: 24px;

  display: block;

}



.badge-pink { background: var(--color-pink-light); color: var(--color-coral); }

.badge-blue { background: var(--color-blue-light); color: #2B6CB0; }

.badge-yellow { background: var(--color-yellow-light); color: #B47800; }

.badge-mint { background: var(--color-mint-light); color: #10B981; }



/* ==========================================================================

   Section 4: WHY CHOOSE CUDDLE CUTS? (Designed Around Little Smiles)

   ========================================================================== */

.why-choose-section {

  padding: 56px 0 48px;

  background-color: #FFFFFF;

  text-align: center;

  width: 100%;

}



.why-choose-section .container {

  max-width: 1540px;

  width: 100%;

  padding: 0 clamp(24px, 4vw, 68px);

}



.why-choose-header {

  margin-bottom: 38px;

}



.why-choose-section .section-eyebrow {

  display: block;

  font-family: var(--font-sans);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--color-navy);

  margin-bottom: 16px;

}



.why-choose-section .section-headline {

  font-family: var(--font-serif);

  font-size: clamp(2.2rem, 3.4vw, 2.95rem);

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.22;

  margin: 0;

}



.four-pillars-row {

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  align-items: stretch;

  width: 100%;

  max-width: 100%;

  margin: 0 auto;

  position: relative;

}



.circle-pillar-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  padding: 0 clamp(16px, 2.5vw, 44px);

  position: relative;

}



/* Thin vertical divider line between columns matching reference image */

.circle-pillar-item:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;

  top: 14px;

  bottom: 8px;

  width: 1px;

  background: rgba(14, 51, 92, 0.12);

}



.circle-pillar-badge {

  width: 72px;

  height: 72px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 26px;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.circle-pillar-item:hover .circle-pillar-badge {

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

  box-shadow: 0 8px 20px rgba(14, 51, 92, 0.08);

}



.circle-pillar-badge.badge-yellow {

  background: #FFECC0;

  color: var(--color-navy);

}



.circle-pillar-badge.badge-pink {

  background: #FFE2E8;

  color: var(--color-navy);

}



.circle-pillar-badge.badge-blue {

  background: #DDF0FF;

  color: var(--color-navy);

}



.circle-pillar-badge.badge-mint {

  background: #D8F5ED;

  color: var(--color-navy);

}



.circle-pillar-badge svg {

  width: 28px;

  height: 28px;

  stroke: var(--color-navy);

}



.circle-pillar-title {

  font-family: var(--font-sans);

  font-size: 1.15rem;

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.28;

  min-height: 48px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 14px;

}



.circle-pillar-desc {

  font-size: 0.94rem;

  color: var(--color-navy-muted);

  line-height: 1.62;

  max-width: 230px;

  margin: 0 auto;

}



@media (max-width: 991px) {

  .four-pillars-row {

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

    row-gap: 40px;

  }

  .circle-pillar-item:nth-child(2)::after {

    display: none;

  }

}



@media (max-width: 576px) {

  .four-pillars-row {

    grid-template-columns: 1fr;

    row-gap: 36px;

  }

  .circle-pillar-item:not(:last-child)::after {

    display: none;

  }

  .circle-pillar-title {

    min-height: auto;

  }

}



/* ==========================================================================

   Section 5: WHO WE SERVE (Merged in Left with Curved Right Edge)

   ========================================================================== */

.who-serve-section {

  padding: 32px 0 28px;

  background: var(--bg-canvas); /* #FAF7F2 */

  position: relative;

  overflow: hidden;

  width: 100%;

}



.who-serve-bleed-grid {

  display: grid;

  grid-template-columns: minmax(360px, 1.18fr) 1fr;

  align-items: center;

  gap: clamp(32px, 5vw, 68px);

  padding-left: 0;

  padding-right: max(24px, calc((100vw - 1360px) / 2 + 24px));

  width: 100%;

}



.who-serve-photo-bleed {

  width: 100%;

  display: flex;

  justify-content: flex-start;

  align-items: center;

  overflow: hidden;

  border-radius: 0 clamp(140px, 16vw, 220px) clamp(40px, 5vw, 60px) 0;

  box-shadow: 0 16px 44px rgba(14, 51, 92, 0.08);

}



.who-serve-photo-bleed img {

  width: 100%;

  max-width: none;

  height: clamp(320px, 28vw, 400px);

  display: block;

  object-fit: cover;

  object-position: center 30%;

  border: none;

  border-radius: 0 clamp(140px, 16vw, 220px) clamp(40px, 5vw, 60px) 0;

}



.who-serve-text-col {

  max-width: 520px;

  padding-top: 10px;

  padding-bottom: 10px;

}



.who-serve-text-col .section-eyebrow {

  display: block;

  font-family: var(--font-sans);

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  text-transform: uppercase;

  color: var(--color-navy);

  margin-bottom: 12px;

}



.who-serve-text-col .section-headline {

  font-family: var(--font-serif);

  font-size: clamp(2.2rem, 3.4vw, 2.9rem);

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.2;

  margin-bottom: 16px;

  display: inline-block;

}



.who-serve-text-col .doodle-sparkle-yellow {

  display: inline-block;

  vertical-align: middle;

  margin-left: 8px;

  margin-bottom: 4px;

}



.who-serve-desc {

  font-size: 1.05rem;

  color: var(--color-navy-muted);

  line-height: 1.7;

  max-width: 480px;

}



@media (max-width: 991px) {

  .who-serve-bleed-grid {

    grid-template-columns: 1fr;

    gap: 32px;

    padding-left: 20px;

    padding-right: 20px;

  }

  .who-serve-photo-bleed,

  .who-serve-photo-bleed img {

    border-radius: 28px;

    height: 320px;

  }

}



/* ==========================================================================

   Pre-Footer Banner (End-to-End Full Bleed Match)

   ========================================================================== */

.pre-footer-section {

  width: 100%;

  padding: 0;

  margin: 20px 0 0;

  background: #FFF4EA;

}



.pre-footer-wrap {

  width: 100%;

  max-width: 100%;

  margin: 0;

  padding: 0;

}



.pre-footer-banner {

  background: #FFF4EA;

  border-radius: 0;

  width: 100%;

  max-width: 100%;

  margin: 0;

  padding: 0 clamp(32px, 5vw, 80px) 0 clamp(8px, 1.5vw, 24px);

  position: relative;

  overflow: hidden;

  display: flex;

  align-items: flex-end;

  justify-content: flex-start;

  min-height: 215px;

  height: 215px;

  box-shadow: none;

}



.banner-contact-theme {

  background: #FFF4EA;

}



.banner-boy-area {

  position: relative !important;

  display: flex !important;

  align-items: flex-end !important;

  flex-shrink: 0 !important;

  height: 220px !important;

  max-width: 320px !important;

  margin-right: 0 !important;

}



.banner-boy-img,

.banner-boy-area .banner-boy-img,

.elementor .banner-boy-img,

img.banner-boy-img {

  height: 220px !important;

  width: auto !important;

  max-width: 320px !important;

  object-fit: contain !important;

  object-position: bottom left !important;

  display: block !important;

  vertical-align: bottom !important;

}



.banner-doodle-heart-svg {

  position: absolute;

  top: 18px;

  right: -10px;

  transform: rotate(12deg);

  pointer-events: none;

  z-index: 2;

}



.banner-text-cta {

  flex: 1;

  padding: 20px 24px 20px 0;

  margin-left: clamp(36px, 5vw, 90px);

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-self: center;

  z-index: 1;

}



.banner-headline {

  font-family: var(--font-serif);

  font-size: clamp(1.8rem, 2.4vw, 2.35rem);

  font-weight: 700;

  color: var(--color-navy);

  margin-bottom: 6px;

  line-height: 1.2;

}



.banner-sub {

  font-size: 0.98rem;

  color: var(--color-navy-muted);

  margin-bottom: 18px;

  max-width: 560px;

}



.banner-btns-row {

  display: flex;

  align-items: center;

  gap: 16px;

  flex-wrap: wrap;

}



.banner-btns-row .btn-pill {

  padding: 12px 28px;

  font-size: 0.95rem;

  border-radius: 50px;

  font-weight: 600;

  display: inline-flex;

  align-items: center;

  gap: 8px;

}



.banner-right-doodle {

  position: absolute;

  top: 50%;

  right: clamp(24px, 4vw, 64px);

  transform: translateY(-50%);

  pointer-events: none;

  opacity: 0.95;

}



/* Contact Page Pre-Footer Banner & View FAQs Action */

.contact-faq-banner-exact {

  position: relative;

}



.banner-faq-action-row {

  display: flex;

  align-items: center;

  align-self: center; /* Perfectly centers vertically inside the 215px banner */

  gap: 16px;

  margin-left: auto;

  padding-right: clamp(16px, 3.5vw, 56px);

  z-index: 2;

  flex-shrink: 0;

}



.btn-faq-pill {

  background: #FFFFFF;

  color: var(--color-coral);

  border: 1.5px solid #FFD6D6;

  padding: 12px 28px;

  border-radius: var(--radius-pill);

  font-family: var(--font-sans);

  font-size: 0.95rem;

  font-weight: 700;

  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.12);

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  display: inline-flex;

  align-items: center;

  gap: 8px;

  white-space: nowrap;

  text-decoration: none;

  cursor: pointer;

}



.btn-faq-pill:hover {

  background: var(--color-coral);

  color: #FFFFFF;

  border-color: var(--color-coral);

  box-shadow: 0 8px 22px rgba(255, 107, 107, 0.35);

  transform: translateY(-2px);

}



/* FAQ Modal */

.faq-modal-overlay {

  position: fixed;

  top: 0;

  left: 0;

  width: 100vw;

  height: 100vh;

  background: rgba(16, 46, 64, 0.65);

  backdrop-filter: blur(6px);

  z-index: 9999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 20px;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.3s ease, visibility 0.3s ease;

}



.faq-modal-overlay.active {

  opacity: 1;

  visibility: visible;

}



.faq-modal-card {

  background: #FFFFFF;

  border-radius: 24px;

  max-width: 680px;

  width: 100%;

  max-height: 85vh;

  overflow-y: auto;

  box-shadow: 0 20px 50px rgba(16, 46, 64, 0.25);

  border: 1px solid var(--border-subtle);

  transform: translateY(20px) scale(0.97);

  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);

}



.faq-modal-overlay.active .faq-modal-card {

  transform: translateY(0) scale(1);

}



.faq-modal-header {

  padding: 24px 28px 18px;

  border-bottom: 1px solid var(--border-subtle);

  display: flex;

  align-items: center;

  justify-content: space-between;

  position: sticky;

  top: 0;

  background: #FFFFFF;

  z-index: 2;

}



.faq-modal-close {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 1px solid var(--border-subtle);

  background: #FAF7F2;

  color: var(--color-navy);

  font-size: 1.1rem;

  font-weight: 700;

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

}



.faq-modal-close:hover {

  background: var(--color-coral);

  color: #FFFFFF;

  border-color: var(--color-coral);

}



.faq-modal-body {

  padding: 20px 28px 28px;

  display: flex;

  flex-direction: column;

  gap: 12px;

}



.faq-item-clean {

  border: 1px solid var(--border-subtle);

  border-radius: 16px;

  background: #FAF7F2;

  overflow: hidden;

  transition: all 0.25s ease;

}



.faq-item-clean.active {

  background: #FFFFFF;

  border-color: var(--color-coral);

  box-shadow: 0 4px 16px rgba(255, 107, 107, 0.12);

}



.faq-item-clean .faq-q-btn {

  width: 100%;

  padding: 16px 20px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  background: transparent;

  border: none;

  font-family: var(--font-sans);

  font-size: 0.96rem;

  font-weight: 700;

  color: var(--color-navy);

  text-align: left;

  cursor: pointer;

  gap: 12px;

}



.faq-item-clean .faq-icon {

  width: 24px;

  height: 24px;

  border-radius: 50%;

  background: #FFFFFF;

  border: 1px solid var(--border-subtle);

  display: flex;

  align-items: center;

  justify-content: center;

  font-size: 14px;

  color: var(--color-coral);

  flex-shrink: 0;

  transition: transform 0.25s ease;

}



.faq-item-clean.active .faq-icon {

  transform: rotate(45deg);

  background: var(--color-coral);

  color: #FFFFFF;

}



.faq-item-clean .faq-answer {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.3s ease, padding 0.3s ease;

  padding: 0 20px;

  font-size: 0.88rem;

  line-height: 1.6;

  color: var(--color-navy-muted);

}



.faq-item-clean.active .faq-answer {

  max-height: 200px;

  padding: 0 20px 16px;

}



@media (max-width: 900px) {

  .banner-faq-action-row {

    margin: 16px auto 24px;

    padding-right: 0;

    order: 2;

    justify-content: center;

  }



  .pre-footer-banner {

    flex-direction: column;

    align-items: center;

    padding: 32px 20px 0;

    text-align: center;

    min-height: auto;

    height: auto;

  }

  .banner-boy-area {

    width: auto;

    height: 180px;

    margin-right: 0;

    order: 2;

    justify-content: center;

  }

  .banner-boy-img {

    height: 180px;

    object-position: bottom center;

  }

  .banner-doodle-heart-svg {

    right: -10px;

  }

  .banner-text-cta {

    padding: 0 0 20px;

    align-self: center;

    order: 1;

  }

  .banner-btns-row {

    justify-content: center;

  }

  .banner-right-doodle {

    display: none;

  }

}



/* ==========================================================================

   Clean White Footer (Exact Reference)

   ========================================================================== */

.exact-footer {

  background: #FFFFFF;

  padding: 64px 0 28px;

  border-top: 1px solid var(--border-subtle);

}



.exact-footer .container {

  max-width: 1360px;

  padding: 0 clamp(20px, 3vw, 40px);

}



.footer-four-columns {

  display: grid;

  grid-template-columns: 1.4fr 0.9fr 1.3fr 0.9fr;

  gap: 48px;

  padding-bottom: 48px;

  border-bottom: 1px solid var(--border-subtle);

}



.footer-brand-p {

  font-size: 0.92rem;

  color: var(--color-navy-muted);

  line-height: 1.6;

  margin: 16px 0 20px;

  max-width: 300px;

}



.footer-social-row {

  display: flex;

  align-items: center;

  gap: 14px;

  color: var(--color-navy);

  font-size: 18px;

}



.footer-col-heading {

  font-family: var(--font-sans);

  font-size: 0.95rem;

  font-weight: 700;

  color: var(--color-navy);

  margin-bottom: 18px;

}



.footer-clean-links {

  list-style: none;

  display: flex;

  flex-direction: column;

  gap: 10px;

}



.footer-clean-links a {

  font-size: 0.92rem;

  color: var(--color-navy-muted);

}



.footer-clean-links a:hover {

  color: var(--color-coral);

}



.footer-contact-item {

  display: flex;

  align-items: flex-start;

  gap: 10px;

  font-size: 0.92rem;

  color: var(--color-navy-muted);

  margin-bottom: 10px;

}



.footer-bottom-line {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding-top: 24px;

  font-size: 0.85rem;

  color: var(--color-navy-muted);

}



/* ==========================================================================

   Responsive Adaptations

   ========================================================================== */

@media (max-width: 1024px) {

  .hero-curved-img-wrap {

    width: 55%;

  }

  .arch-cards-grid {

    grid-template-columns: repeat(3, 1fr);

  }

  .branches-dual-grid, .branches-tri-grid, .contact-tri-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  .easy-find-grid, .more-than-grid, .who-serve-wrap {

    grid-template-columns: 1fr;

  }

  .more-than-grid-bleed {

    grid-template-columns: 1fr;

    padding-left: 20px;

    padding-right: 20px;

    gap: 28px;

  }

  .more-than-photo-bleed,

  .more-than-photo-bleed img {

    border-radius: 24px !important;

    height: clamp(240px, 55vw, 340px) !important;

    width: 100% !important;

    object-fit: cover !important;

  }

  .four-pillars-row {

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

  }

  .footer-four-columns {

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

  }

}



@media (max-width: 768px) {

  .nav-menu-list {

    display: none;

  }

  .exact-hero {

    min-height: auto;

    padding-top: 10px !important;

    padding-bottom: 45px !important;

    flex-direction: column;

  }

  .hero-curved-img-wrap {

    position: relative !important;

    width: calc(100% - 32px) !important;

    max-width: 520px !important;

    height: auto !important;

    aspect-ratio: 3 / 2 !important;

    margin: 12px auto 22px !important;

    padding: 0 !important;

    float: none !important;

    inset: unset !important;

  }

  .hero-curved-portal {

    clip-path: none !important;

    -webkit-clip-path: none !important;

    border-radius: 18px !important;

    width: 100% !important;

    height: 100% !important;

    overflow: hidden !important;

    box-shadow: 0 8px 24px rgba(14, 51, 92, 0.09) !important;

  }

  .hero-curved-portal img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center center !important;

    display: block !important;

  }

  .hero-bottom-wave-wrap {

    display: block;

  }

  .hero-bottom-wave-svg {

    height: 42px;

  }

  .hero-floating-quote {

    display: none !important;

  }

  .arch-cards-grid {

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

  }

  .banner-content-grid {

    grid-template-columns: 1fr;

    text-align: center;

  }

  .banner-btns-row {

    justify-content: center;

  }

  .footer-four-columns {

    grid-template-columns: 1fr;

  }

  .vision-mission-grid {

    grid-template-columns: 1fr;

  }

  .four-pillars-row {

    grid-template-columns: 1fr;

  }

}





/* ==========================================================================

   Exact Service Page Styles (Alternating Rows, Filter Bar, Pill Badges, Dual Cards)

   ========================================================================== */



.services-page-wrap {

  background-color: var(--bg-canvas);

  position: relative;

  overflow-x: hidden;

}



/* Hero Section - Bleed to Right Edge with Exact Reference Bezier S-Curve */

.services-hero-section {

  position: relative;

  background: var(--bg-canvas);

  overflow: hidden;

  width: 100%;

  min-height: clamp(540px, 65vh, 640px);

  display: flex;

  align-items: center;

  padding-top: 0;

  padding-bottom: 60px;

}



.services-hero-inner {

  width: 100%;

  max-width: 1220px;

  margin: 0 auto;

  padding: 0 24px;

  position: relative;

  z-index: 2;

  pointer-events: auto;

}



.services-hero-text {

  max-width: 640px;

  padding: 0;

  transform: translateX(-40px);

}



.services-hero-title {

  font-family: var(--font-serif);

  font-size: clamp(3.2rem, 5vw, 4.4rem);

  line-height: 1.1;

  color: var(--color-navy);

  font-weight: 400;

  margin-top: 12px;

  margin-bottom: 22px;

  letter-spacing: -0.01em;

}



.services-hero-title .coral-text {

  color: var(--color-coral);

}



.hero-sparkle-doodle {

  display: inline-block;

  vertical-align: top;

  margin-top: -6px;

  margin-left: 8px;

  animation: floatSparkle 3s ease-in-out infinite alternate;

}



@keyframes floatSparkle {

  0% { transform: scale(0.95) rotate(-5deg); }

  100% { transform: scale(1.1) rotate(5deg); }

}



.services-hero-sub {

  font-size: clamp(1.15rem, 1.45vw, 1.32rem);

  line-height: 1.6;

  color: var(--color-navy-muted);

  margin-bottom: 34px;

  max-width: 530px;

}



.services-hero-media {

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  width: 55%;

  max-width: none;

  height: 100%;

  pointer-events: none;

  z-index: 1;

}



.services-hero-curve-mask {

  width: 100%;

  height: 100%;

  clip-path: url(#hero-s-curve-services);

  -webkit-clip-path: url(#hero-s-curve-services);

  overflow: hidden;

  position: relative;

}



.services-hero-curve-mask img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  object-position: 62% 20%;

  display: block;

}



/* Category Filter Bar (Overlapping hero bottom) */

.services-filter-bar-wrap {

  position: relative;

  z-index: 30;

  margin-top: -34px;

  margin-bottom: clamp(28px, 3.5vw, 40px);

  display: flex;

  justify-content: center;

  padding: 0 16px;

}



.services-filter-bar {

  display: inline-flex;

  flex-wrap: wrap;

  align-items: center;

  justify-content: center;

  background: #FFFFFF;

  border-radius: var(--radius-pill);

  padding: 6px 10px;

  gap: 6px;

  box-shadow: 0 12px 36px rgba(14, 51, 92, 0.10);

  border: 1px solid rgba(14, 51, 92, 0.06);

}



.filter-pill-btn {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  padding: 10px 20px;

  border-radius: var(--radius-pill);

  font-size: 0.94rem;

  font-weight: 600;

  color: var(--color-navy);

  cursor: pointer;

  background: transparent;

  transition: all 0.25s ease;

  border: none;

}



.filter-pill-btn svg {

  flex-shrink: 0;

  transition: transform 0.25s ease;

}



.filter-pill-btn:hover {

  background: #FFF4EC;

  color: var(--color-coral);

}



.filter-pill-btn.active {

  background: var(--color-coral);

  color: #FFFFFF;

  box-shadow: 0 6px 20px rgba(255, 94, 91, 0.35);

}



.filter-pill-btn.active svg {

  color: #FFFFFF;

  stroke: #FFFFFF;

}



/* Service Filterable State - Zero Gap When Hidden */

.service-filterable-item.filtered-hide {

  display: none !important;

  height: 0 !important;

  margin: 0 !important;

  padding: 0 !important;

  border: none !important;

  opacity: 0 !important;

  visibility: hidden !important;

  pointer-events: none !important;

}



/* Service Rows Container - Full Width Unified Alignment */

.services-list-container {

  max-width: 1360px;

  margin: 0 auto;

  padding: 0 clamp(20px, 3vw, 40px);

  display: flex;

  flex-direction: column;

  gap: clamp(28px, 3.5vw, 42px);

}



/* Alternating Zig-Zag Row - Equal Columns for Perfect Alignment */

.service-zigzag-row {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(32px, 4vw, 60px);

  align-items: center;

  transition: opacity 0.35s ease, transform 0.35s ease;

}



.service-zigzag-row.reverse {

  grid-template-columns: 1fr 1fr;

}



.service-zigzag-content {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: clamp(16px, 1.8vw, 24px);

  width: 100%;

}



.service-zigzag-body {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  flex: 1;

}



/* Service Circle Badges */

.service-icon-badge {

  width: 48px;

  height: 48px;

  border-radius: 50%;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  margin-top: 3px;

  margin-bottom: 0;

  flex-shrink: 0;

}



.service-icon-badge.badge-peach {

  background: #FFEFEA;

  color: var(--color-coral);

}



.service-icon-badge.badge-pink {

  background: #FFEAEA;

  color: #E84D8A;

}



.service-icon-badge.badge-teal {

  background: #E0F5F0;

  color: #169E81;

}



.service-icon-badge.badge-gold {

  background: #FEF3D6;

  color: #D48806;

}



.service-icon-badge.badge-blue {

  background: #E1F0FF;

  color: #1890FF;

}



.service-zigzag-title {

  font-family: var(--font-serif);

  font-size: clamp(1.6rem, 2.1vw, 2.05rem);

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.2;

  margin-bottom: 8px;

}



.service-zigzag-desc {

  font-size: 0.96rem;

  line-height: 1.5;

  color: var(--color-navy-muted);

  max-width: 480px;

  margin-bottom: 18px;

}



.service-zigzag-action-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  max-width: 440px;

  gap: 16px;

}



.service-age-badge {

  background: #FFF4EA;

  color: var(--color-navy);

  font-size: 0.78rem;

  font-weight: 700;

  padding: 6px 14px;

  border-radius: 12px;

  text-align: center;

  line-height: 1.25;

  box-shadow: 0 2px 8px rgba(14, 51, 92, 0.06);

  border: 1px solid rgba(255, 94, 91, 0.12);

  white-space: nowrap;

}



/* Service Row Media - Natural Uncropped Image Display */

.service-zigzag-media {

  position: relative;

  border-radius: 24px;

  overflow: hidden;

  width: 100%;

  height: auto;

  min-height: 0;

  max-height: none;

  background: #FAF7F2;

  box-shadow: 0 10px 28px rgba(14, 51, 92, 0.08);

}



.service-zigzag-media img {

  width: 100%;

  height: auto;

  max-width: 100%;

  max-height: none;

  object-fit: unset;

  display: block;

  transition: transform 0.4s ease;

}



.service-zigzag-row:hover .service-zigzag-media img {

  transform: scale(1.03);

}



.service-age-badge,

.service-zigzag-media .service-age-badge {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

}



/* Dual Column Row (Row 6) */

.services-dual-grid {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: clamp(20px, 3vw, 36px);

  margin-top: 4px;

  margin-bottom: clamp(24px, 3.5vw, 38px);

}



.service-dual-item {

  display: grid;

  grid-template-columns: 130px 1fr;

  gap: 18px;

  align-items: center;

}



.service-dual-media {

  width: 130px;

  height: 130px;

  border-radius: 20px;

  overflow: hidden;

  flex-shrink: 0;

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.08);

}



.service-dual-media img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}



.service-dual-item:hover .service-dual-media img {

  transform: scale(1.05);

}



.service-dual-content {

  display: flex;

  flex-direction: row;

  align-items: flex-start;

  gap: 14px;

  width: 100%;

}



.service-dual-body {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  flex: 1;

}



.service-dual-title {

  font-family: var(--font-serif);

  font-size: 1.3rem;

  font-weight: 700;

  color: var(--color-navy);

  line-height: 1.25;

  margin-bottom: 4px;

}



.service-dual-desc {

  font-size: 0.88rem;

  line-height: 1.45;

  color: var(--color-navy-muted);

  margin-bottom: 10px;

}



.service-dual-action-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  width: 100%;

  gap: 10px;

}



.service-dual-action-row .btn-pill {

  padding: 8px 16px;

  font-size: 0.85rem;

}



.service-dual-action-row .service-age-badge {

  font-size: 0.74rem;

  padding: 5px 10px;

  border-radius: 10px;

}



/* Services Pre-Footer Banner Edge-to-Edge with Organic Wave Curve */

.services-prefooter-wrap {

  width: 100%;

  padding: clamp(24px, 3.5vw, 44px) 0 clamp(36px, 5vw, 64px);

}



.services-prefooter-bleed {

  width: 100%;

  max-width: 1360px;

  margin: 0 auto;

  padding: 0 clamp(20px, 3vw, 40px);

  filter: drop-shadow(0 12px 28px rgba(14, 51, 92, 0.06));

}



.services-banner-capsule {

  width: 100%;

  min-height: clamp(200px, 16vw, 240px);

  background: linear-gradient(135deg, #FFF1EA 0%, #FFEBE3 100%);

  border-radius: 36px;

  display: grid;

  grid-template-columns: auto 1fr auto;

  align-items: center;

  padding: clamp(22px, 2.6vw, 36px) clamp(32px, 4.5vw, 64px);

  gap: clamp(28px, 3.5vw, 54px);

  position: relative;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(14, 51, 92, 0.05);

}



.services-banner-kid {

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.services-banner-kid-img {

  height: clamp(145px, 14vw, 185px);

  width: auto;

  object-fit: contain;

  display: block;

}



.banner-heart-doodle {

  position: absolute;

  animation: pulseHeart 2.5s ease-in-out infinite;

}



.banner-heart-doodle.doodle-left {

  left: -18px;

  top: 25%;

  transform: rotate(-15deg);

}



.banner-heart-doodle.doodle-right {

  right: -18px;

  top: 15%;

  transform: rotate(15deg);

}



@keyframes pulseHeart {

  0% { transform: scale(0.95); opacity: 0.85; }

  50% { transform: scale(1.1); opacity: 1; }

  100% { transform: scale(0.95); opacity: 0.85; }

}



.services-banner-text {

  display: flex;

  flex-direction: column;

}



.services-banner-eyebrow {

  font-size: 0.82rem;

  font-weight: 700;

  letter-spacing: 0.14em;

  color: var(--color-navy-muted);

  text-transform: uppercase;

  margin-bottom: 6px;

}



.services-banner-title {

  font-family: var(--font-serif);

  font-size: clamp(2.1rem, 3vw, 2.85rem);

  font-weight: 700;

  color: var(--color-navy);

  margin-bottom: 8px;

  line-height: 1.15;

}



.services-banner-sub {

  font-size: clamp(1rem, 1.2vw, 1.15rem);

  color: var(--color-navy-muted);

  line-height: 1.5;

  max-width: 580px;

}



.services-banner-action {

  flex-shrink: 0;

}



.services-banner-action .btn-pill {

  font-size: 1.05rem;

  padding: 15px 34px;

}



/* Responsive Adaptations for Services Page */

@media (max-width: 960px) {

  .services-hero-section {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    min-height: auto !important;

    padding-top: 0 !important;

    padding-bottom: 20px !important;

    text-align: center !important;

    overflow: hidden !important;

  }

  .services-hero-inner {

    min-height: auto !important;

    padding: 0 18px !important;

    width: 100% !important;

    display: block !important;

    pointer-events: auto !important;

    box-sizing: border-box !important;

  }

  .services-hero-text {

    max-width: 100% !important;

    text-align: center !important;

    padding: 0 !important;

    margin: 0 auto !important;

    transform: none !important;

  }

  .services-hero-title {

    font-size: clamp(2rem, 7vw, 2.6rem) !important;

    line-height: 1.15 !important;

    margin-top: 8px !important;

    margin-bottom: 12px !important;

  }

  .services-hero-sub {

    font-size: 0.95rem !important;

    line-height: 1.5 !important;

    margin: 0 auto 16px !important;

    max-width: 380px !important;

  }

  .services-hero-media {

    position: relative !important;

    width: calc(100% - 36px) !important;

    max-width: 380px !important;

    height: 230px !important;

    min-height: 0 !important;

    margin: 0 auto !important;

    border-radius: 24px !important;

    overflow: hidden !important;

    box-shadow: 0 10px 28px rgba(14, 51, 92, 0.08) !important;

    top: auto !important;

    right: auto !important;

    bottom: auto !important;

  }

  .services-hero-curve-mask {

    width: 100% !important;

    height: 100% !important;

    clip-path: none !important;

    -webkit-clip-path: none !important;

    border-radius: 24px !important;

    overflow: hidden !important;

  }

  .services-hero-curve-mask img {

    width: 100% !important;

    height: 100% !important;

    object-fit: cover !important;

    object-position: center 20% !important;

    display: block !important;

  }

  .services-filter-bar-wrap {

    display: block !important;

    justify-content: flex-start !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    padding: 10px 18px !important;

    margin-top: 18px !important;

    margin-bottom: 24px !important;

    text-align: left !important;

  }

  .services-filter-bar-wrap::-webkit-scrollbar {

    display: none !important;

  }

  .services-filter-bar {

    display: inline-flex !important;

    flex-wrap: nowrap !important;

    justify-content: flex-start !important;

    width: max-content !important;

    max-width: none !important;

    border-radius: 9999px !important;

    padding: 6px 10px !important;

    margin: 0 !important;

  }

  .service-zigzag-row,

  .service-zigzag-row.reverse {

    display: flex;

    flex-direction: column !important;

    background: #FFFFFF !important;

    border-radius: 24px !important;

    border: 1px solid rgba(14, 51, 92, 0.08) !important;

    box-shadow: 0 8px 24px rgba(14, 51, 92, 0.05) !important;

    overflow: hidden !important;

    margin-bottom: 24px !important;

    gap: 0 !important;

  }

  .service-zigzag-row .service-zigzag-media,

  .service-zigzag-row.reverse .service-zigzag-media {

    order: 1 !important;

    width: 100% !important;

    height: auto !important;

    max-height: none !important;

    border-radius: 24px 24px 0 0 !important;

    box-shadow: none !important;

    position: relative !important;

  }

  .service-zigzag-row .service-zigzag-media img,

  .service-zigzag-row.reverse .service-zigzag-media img {

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    object-fit: unset !important;

    display: block !important;

  }

  .service-zigzag-row .service-zigzag-content,

  .service-zigzag-row.reverse .service-zigzag-content {

    order: 2 !important;

    width: 100% !important;

    padding: 20px 20px 22px !important;

    display: flex !important;

    flex-direction: row !important;

    align-items: flex-start !important;

    gap: 14px !important;

    background: #FFFFFF !important;

  }

  .services-dual-grid {

    grid-template-columns: 1fr;

    gap: 24px;

  }

  .services-banner-capsule {

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;

    text-align: center !important;

    border-radius: 28px !important;

    clip-path: none !important;

    -webkit-clip-path: none !important;

    padding: 36px 20px 0 !important;

    overflow: hidden !important;

    position: relative !important;

  }

  .services-banner-text {

    order: 1 !important;

    padding: 0 !important;

    max-width: 100% !important;

  }

  .services-banner-eyebrow {

    font-size: 0.82rem !important;

    margin-bottom: 8px !important;

    display: inline-block !important;

  }

  .services-banner-title {

    font-size: clamp(1.8rem, 6.5vw, 2.3rem) !important;

    margin-bottom: 10px !important;

  }

  .services-banner-sub {

    font-size: 0.95rem !important;

    line-height: 1.55 !important;

    max-width: 380px !important;

    margin: 0 auto !important;

  }

  .services-banner-action {

    order: 2 !important;

    margin-top: 18px !important;

    margin-bottom: 24px !important;

    width: 100% !important;

  }

  .services-banner-action .btn-pill {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

  }

  .services-banner-kid {

    order: 3 !important;

    margin: 0 auto !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;

    position: relative !important;

    height: 185px !important;

    width: 100% !important;

    overflow: visible !important;

  }

  .services-banner-kid-img {

    height: 185px !important;

    width: auto !important;

    max-width: 320px !important;

    object-fit: contain !important;

    object-position: bottom center !important;

    display: block !important;

    margin: 0 auto !important;

    vertical-align: bottom !important;

  }

  .banner-heart-doodle {

    display: none !important;

  }

}



/* ==========================================================================

   Branches Page Styles & Interactive Map

   ========================================================================== */

.map-tab-btn {

  font-size: 0.88rem !important;

  padding: 8px 18px !important;

  cursor: pointer;

  transition: all 0.25s ease;

}



.map-tab-btn.active {

  background: var(--color-coral) !important;

  color: #FFFFFF !important;

  border-color: var(--color-coral) !important;

  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.35);

}



.live-google-map-wrap iframe {

  filter: saturate(1.05);

}



.branches-hero-text {

  max-width: 580px;

  z-index: 2;

  position: relative;

  transform: translateX(-40px);

}



@media (max-width: 1024px) {

  .branches-hero-text {

    transform: translateX(-20px);

  }

}



@media (max-width: 768px) {

  .branches-hero-text {

    transform: none;

    max-width: 100%;

  }

}



.branches-hero-title {

  font-size: clamp(2.5rem, 4.2vw, 3.5rem);

  line-height: 1.15;

  color: var(--color-navy);

  margin-top: 10px;

  margin-bottom: 16px;

  letter-spacing: -0.01em;

}



.branches-hero-title .coral-text {

  color: var(--color-coral);

}



.branches-sparkle-img {

  display: inline-block;

  vertical-align: -6px;

  margin-left: 8px;

  width: clamp(30px, 2.8vw, 38px);

  height: auto;

  animation: floatSparkle 3s ease-in-out infinite alternate;

}



@keyframes floatSparkle {

  0% { transform: translateY(0px) rotate(0deg); }

  50% { transform: translateY(-4px) rotate(3deg); }

  100% { transform: translateY(0px) rotate(0deg); }

}



.branches-hero-sub {

  font-size: clamp(1rem, 1.25vw, 1.15rem);

  line-height: 1.6;

  color: var(--color-navy-muted);

  max-width: 510px;

}



.branches-section-white {

  background-color: #FFFFFF !important;

  padding: 44px 0 68px;

  position: relative;

  z-index: 2;

}



.branches-header-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 32px;

  flex-wrap: wrap;

  gap: 16px;

}



.location-note-badge {

  display: inline-flex;

  align-items: center;

  gap: 8px;

  background: #FFF9F3;

  color: #D97706;

  border: 1px solid #FDE68A;

  padding: 7px 16px;

  border-radius: var(--radius-pill);

  font-size: 0.88rem;

  font-weight: 500;

}



.branch-exact-card {

  background: #FFFFFF;

  border: 1px solid var(--border-subtle);

  border-radius: var(--radius-card);

  overflow: hidden;

  box-shadow: 0 4px 20px rgba(16, 46, 64, 0.06);

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}



.branch-exact-card:hover {

  transform: translateY(-4px);

  box-shadow: 0 12px 30px rgba(16, 46, 64, 0.12);

}



.map-card-link {

  display: block;

  text-decoration: none;

  transition: transform 0.3s ease;

}



.map-card-link:hover .map-card-exact {

  transform: translateY(-3px);

  box-shadow: 0 12px 32px rgba(16, 46, 64, 0.12);

}



@media (max-width: 900px) {

  .branches-hero-section {

    min-height: auto;

    padding-bottom: 40px;

  }

  .branches-hero-img-wrap {

    position: relative;

    width: 100%;

    height: 320px;

    margin-top: 24px;

  }

  .branches-hero-portal {

    clip-path: none !important;

    -webkit-clip-path: none !important;

    border-radius: 24px;

  }

  .branches-hero-peach-accent {

    display: none;

  }

}



/* ==========================================================================

   Contact Page Map Branch Switcher & Card Interactivity

   ========================================================================== */

.contact-map-switcher-bar {

  padding: 10px 16px;

  background: #FAF7F2;

  border-bottom: 1px solid var(--border-subtle);

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 8px;

}



.cmap-tab-pill {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 6px;

  padding: 8px 12px;

  border-radius: 9999px;

  font-family: var(--font-sans);

  font-size: 0.82rem;

  font-weight: 700;

  cursor: pointer;

  border: 1.5px solid #EAE6DE;

  background: #FFFFFF;

  color: var(--color-navy);

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  outline: none;

  white-space: nowrap;

}



.cmap-tab-pill svg {

  flex-shrink: 0;

  stroke: var(--color-navy-muted);

  transition: stroke 0.25s ease;

}



.cmap-tab-pill:hover {

  border-color: #FFB3A7;

  color: var(--color-coral);

  background: #FFF9F8;

}



.cmap-tab-pill:hover svg {

  stroke: var(--color-coral);

}



.cmap-tab-pill.active {

  background: var(--color-coral) !important;

  border-color: var(--color-coral) !important;

  color: #FFFFFF !important;

  box-shadow: 0 4px 12px rgba(255, 107, 107, 0.32);

}



.cmap-tab-pill.active svg {

  stroke: #FFFFFF !important;

}



.branch-interactive-card {

  cursor: pointer;

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

}



.branch-interactive-card.selected-branch-card {

  border-color: rgba(255, 107, 107, 0.6) !important;

  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.16) !important;

}



/* ==========================================================================

   Mobile-First Header, Hamburger Button & Slide-in Drawer Navigation

   ========================================================================== */



/* Header Mobile Controls (Hidden by default on desktop) */

.header-mobile-controls {

  display: none;

  align-items: center;

  gap: 10px;

  margin-left: auto;

}



.btn-mobile-quick-call {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  width: 42px;

  height: 42px;

  border-radius: 50%;

  background: var(--color-coral);

  color: #FFFFFF !important;

  box-shadow: 0 4px 12px rgba(255, 94, 91, 0.35);

  transition: transform 0.2s ease, background 0.2s ease;

  text-decoration: none;

  flex-shrink: 0;

}



.btn-mobile-quick-call:hover {

  transform: scale(1.05);

  background: var(--color-coral-hover);

}



.btn-mobile-quick-call svg {

  stroke: #FFFFFF;

}



.mobile-menu-btn {

  display: inline-flex;

  flex-direction: column;

  justify-content: center;

  align-items: center;

  width: 42px;

  height: 42px;

  border-radius: 12px;

  background: #FFFFFF;

  border: 1.5px solid var(--border-subtle);

  cursor: pointer;

  padding: 0;

  gap: 5px;

  transition: all 0.25s ease;

  box-shadow: 0 2px 8px rgba(16, 46, 64, 0.05);

  flex-shrink: 0;

  touch-action: manipulation;

  -webkit-tap-highlight-color: transparent;

  user-select: none;

}



.mobile-menu-btn:hover {

  border-color: var(--color-coral);

  background: #FFF9F8;

}



.hamburger-bar {

  width: 20px;

  height: 2.2px;

  background: var(--color-navy);

  border-radius: 2px;

  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);

  transform-origin: center;

  pointer-events: none;

}



.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(1) {

  transform: translateY(7.2px) rotate(45deg);

}



.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(2) {

  opacity: 0;

  transform: scaleX(0);

}



.mobile-menu-btn[aria-expanded="true"] .hamburger-bar:nth-child(3) {

  transform: translateY(-7.2px) rotate(-45deg);

}



/* Backdrop Overlay */

.drawer-overlay {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  background: rgba(14, 51, 92, 0.55);

  backdrop-filter: blur(5px);

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

  z-index: 99998;

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.32s cubic-bezier(0.16, 1, 0.3, 1);

}



.drawer-overlay.active {

  opacity: 1 !important;

  pointer-events: auto !important;

}



/* Slide-in Mobile Drawer */

.mobile-drawer {

  position: fixed;

  top: 0;

  right: 0;

  bottom: 0;

  width: min(340px, 86vw);

  height: 100vh;

  height: 100dvh;

  background: #FFFFFF;

  z-index: 99999;

  box-shadow: -10px 0 35px rgba(14, 51, 92, 0.22);

  transform: translateX(105%);

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);

  display: flex;

  flex-direction: column;

  overflow-y: auto;

  -webkit-overflow-scrolling: touch;

  pointer-events: none;

}



.mobile-drawer.open {

  transform: translateX(0) !important;

  pointer-events: auto !important;

}



.drawer-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 18px 20px;

  border-bottom: 1px solid var(--border-subtle);

  background: #FAF7F2;

  flex-shrink: 0;

}



.drawer-logo img {

  height: 38px;

  width: auto;

  display: block;

}



.drawer-close {

  width: 38px;

  height: 38px;

  border-radius: 50%;

  border: 1.5px solid var(--border-subtle);

  background: #FFFFFF;

  color: var(--color-navy);

  display: inline-flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.2s ease;

}



.drawer-close:hover {

  background: #FFF0EE;

  color: var(--color-coral);

  border-color: var(--color-coral);

}



.drawer-nav-list {

  list-style: none;

  margin: 0;

  padding: 16px 14px;

  display: flex;

  flex-direction: column;

  gap: 6px;

  flex-shrink: 0;

}



.drawer-nav-link {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 13px 18px;

  border-radius: 14px;

  font-family: var(--font-sans);

  font-size: 1rem;

  font-weight: 600;

  color: var(--color-navy);

  text-decoration: none;

  transition: all 0.2s ease;

}



.drawer-nav-link:hover {

  background: #FFF5F2;

  color: var(--color-coral);

  padding-left: 22px;

}



.drawer-nav-link.active {

  background: var(--color-coral);

  color: #FFFFFF !important;

  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.32);

}



.drawer-nav-link svg {

  stroke: currentColor;

  transition: transform 0.2s ease;

}



.drawer-nav-link:hover svg {

  transform: translateX(3px);

}



.drawer-footer {

  margin-top: auto;

  padding: 18px;

  border-top: 1px solid var(--border-subtle);

  background: #FAF7F2;

  display: flex;

  flex-direction: column;

  gap: 10px;

  flex-shrink: 0;

}



.drawer-action-btn {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  width: 100%;

  padding: 11px 16px;

  border-radius: 9999px;

  font-family: var(--font-sans);

  font-weight: 700;

  font-size: 0.90rem;

  text-decoration: none;

  transition: all 0.2s ease;

}



.drawer-action-btn.call-gaurcity {

  background: var(--color-coral);

  color: #FFFFFF !important;

  box-shadow: 0 4px 12px rgba(255, 94, 91, 0.28);

}



.drawer-action-btn.call-gaurcity:hover {

  background: var(--color-coral-hover);

}



.drawer-action-btn.call-sec100 {

  background: #FFFFFF;

  color: var(--color-navy) !important;

  border: 1.5px solid var(--border-subtle);

}



.drawer-action-btn.call-sec100:hover {

  border-color: var(--color-coral);

  color: var(--color-coral) !important;

}



.drawer-action-btn.whatsapp-direct {

  background: #25D366;

  color: #FFFFFF !important;

  box-shadow: 0 4px 12px rgba(37, 211, 102, 0.28);

}



.drawer-action-btn.whatsapp-direct:hover {

  background: #1EBE5D;

}



.drawer-meta-info {

  font-size: 0.76rem;

  color: var(--color-navy-muted);

  text-align: center;

  line-height: 1.45;

  margin-top: 2px;

}



/* ==========================================================================

   Comprehensive Mobile & Tablet Media Queries

   ========================================================================== */



@media (max-width: 991px) {

  /* Header transformation */

  .desktop-nav,

  .nav-menu-list,

  .main-header .btn-coral,

  .main-header .header-desktop-cta,

  .header-actions-group {

    display: none !important;

  }



  .header-mobile-controls {

    display: inline-flex !important;

  }



  .header-inner {

    padding-top: 12px;

    padding-bottom: 12px;

  }



  .logo-brand img {

    max-height: 44px;

    width: auto;

  }



  /* Branches Page */

  .branches-dual-grid {

    grid-template-columns: 1fr !important;

    gap: 24px !important;

  }



  .branches-header-row {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 12px !important;

  }



  .location-note-badge {

    white-space: normal !important;

    max-width: 100% !important;

  }



  /* Services Filter Bar horizontal smooth scroll */

  .services-filter-bar-wrap {

    display: block !important;

    justify-content: flex-start !important;

    width: 100% !important;

    max-width: 100% !important;

    box-sizing: border-box !important;

    overflow-x: auto !important;

    -webkit-overflow-scrolling: touch !important;

    scrollbar-width: none !important;

    padding: 10px 18px !important;

    margin: 18px 0 24px !important;

    text-align: left !important;

  }



  .services-filter-bar-wrap::-webkit-scrollbar {

    display: none !important;

  }



  .services-filter-bar {

    display: inline-flex !important;

    flex-wrap: nowrap !important;

    justify-content: flex-start !important;

    width: max-content !important;

    max-width: none !important;

    padding: 6px 10px !important;

    border-radius: 9999px !important;

    background: #FFFFFF !important;

    box-shadow: 0 4px 18px rgba(14, 51, 92, 0.08) !important;

    margin: 0 !important;

  }



  .filter-pill-btn {

    white-space: nowrap !important;

    padding: 8px 16px !important;

    font-size: 0.88rem !important;

    flex-shrink: 0 !important;

    border-radius: 9999px !important;

  }



  /* More Than a Salon Photo Bleed Mobile Normalization */

  .more-than-grid-bleed {

    grid-template-columns: 1fr !important;

    padding-left: 20px !important;

    padding-right: 20px !important;

    gap: 24px !important;

    width: 100% !important;

    box-sizing: border-box !important;

  }



  .more-than-text-col {

    max-width: 100% !important;

    padding: 0 !important;

  }



  .more-than-photo-bleed {

    border-radius: 24px !important;

    width: 100% !important;

    max-width: 100% !important;

    box-shadow: 0 10px 30px rgba(14, 51, 92, 0.08) !important;

    margin: 0 auto !important;

    overflow: hidden !important;

    display: block !important;

  }



  .more-than-photo-bleed img {

    border-radius: 24px !important;

    width: 100% !important;

    height: clamp(230px, 58vw, 320px) !important;

    object-fit: cover !important;

    display: block !important;

  }



  /* Contact Page */

  .contact-badges-capsule {

    flex-direction: column !important;

    width: 100% !important;

    border-radius: 20px !important;

    padding: 12px !important;

    gap: 10px !important;

  }



  .contact-capsule-item {

    width: 100% !important;

    padding: 10px 14px !important;

    border-radius: 14px !important;

    background: #FAF7F2 !important;

  }



  .contact-tri-grid {

    grid-template-columns: 1fr !important;

    gap: 28px !important;

  }



  .contact-visual-col {

    display: none !important;

  }



  /* Arch Cards on Tablets (3 columns) */

  .arch-cards-grid {

    grid-template-columns: repeat(3, 1fr) !important;

    gap: 16px !important;

  }

}



@media (max-width: 768px) {

  /* Arch Cards on Mid Tablets & Phablets (2 columns Side by Side) */

  .arch-cards-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 14px !important;

    max-width: 100% !important;

  }



  .arch-service-card {

    border-radius: 90px 90px 22px 22px !important;

    padding: 0 0 16px 0 !important;

  }



  .arch-card-media {

    height: 155px !important;

    border-radius: 90px 90px 0 0 !important;

  }

  /* Global Container Spacing */

  .container {

    padding-left: 18px !important;

    padding-right: 18px !important;

  }



  /* Section Spacing */

  section {

    padding-top: clamp(36px, 6vw, 48px);

    padding-bottom: clamp(36px, 6vw, 48px);

  }



  /* Branch Cards on Mobile */

  .branch-exact-card {

    border-radius: 20px;

  }



  .branch-card-media {

    height: 190px !important;

  }



  .branch-dual-btns {

    flex-direction: column;

    gap: 10px;

    width: 100%;

  }



  .branch-dual-btns .btn-pill {

    width: 100%;

    justify-content: center;

  }



  /* Easy to Find Us Section on Branches */

  .easy-find-grid {

    grid-template-columns: 1fr !important;

    gap: 26px !important;

  }



  .live-google-map-wrap {

    height: 320px !important;

    min-height: 320px !important;

  }



  /* Services Alternating Rows */

  .services-list-container {

    padding: 0 16px !important;

    gap: 28px !important;

  }



  .service-zigzag-media {

    height: auto !important;

    max-height: none !important;

  }

  .service-zigzag-media img {

    height: auto !important;

    max-width: 100% !important;

    object-fit: unset !important;

  }



  .service-zigzag-action-row {

    flex-wrap: wrap;

    gap: 12px;

  }



  /* Pre-Footer Banner */

  .pre-footer-wrap {

    padding: 0 16px;

  }



  .pre-footer-banner {

    border-radius: 24px !important;

    padding: 32px 20px 0 !important;

    overflow: hidden !important;

    align-items: center !important;

  }



  .banner-boy-area {

    width: 100% !important;

    height: 180px !important;

    display: flex !important;

    align-items: flex-end !important;

    justify-content: center !important;

    order: 2 !important;

    margin-top: 10px !important;

  }



  .banner-boy-img {

    height: 180px !important;

    width: auto !important;

    object-fit: contain !important;

    object-position: bottom center !important;

    display: block !important;

    margin: 0 auto !important;

    vertical-align: bottom !important;

  }



  .banner-btns-row {

    flex-direction: column;

    width: 100%;

    gap: 12px;

  }



  .banner-btns-row .btn-pill {

    width: 100%;

    justify-content: center;

  }



  .banner-faq-action-row {

    margin: 16px auto 0 !important;

    width: 100% !important;

    justify-content: center !important;

  }



  .banner-faq-action-row .btn-outline-white {

    width: 100% !important;

    justify-content: center !important;

  }



  /* Section 3: More Than a Salon Photo Card Responsive Fix */

  .more-than-grid-bleed {

    grid-template-columns: 1fr !important;

    padding-left: 18px !important;

    padding-right: 18px !important;

    gap: 24px !important;

  }



  .more-than-photo-bleed,

  .more-than-photo-bleed img {

    border-radius: 24px !important;

    height: clamp(230px, 58vw, 320px) !important;

    width: 100% !important;

    object-fit: cover !important;

    display: block !important;

  }



  /* Section 4: Homepage Real Interactive Google Map Card */

  .home-live-map-card {

    min-height: 370px !important;

    display: flex !important;

    flex-direction: column !important;

    border-radius: 20px !important;

    overflow: hidden !important;

  }



  .home-live-map-card .contact-map-body {

    min-height: 220px !important;

    height: 220px !important;

    flex: 1 !important;

  }



  /* Form Elements prevent iOS auto zoom */

  input, textarea, select {

    font-size: 16px !important;

  }

}



@media (max-width: 540px) {

  /* Arch Cards 2 Columns Side by Side */

  .arch-cards-grid {

    grid-template-columns: repeat(2, 1fr) !important;

    gap: 10px !important;

    max-width: 100% !important;

    margin-left: auto !important;

    margin-right: auto !important;

    margin-top: 24px !important;

    margin-bottom: 24px !important;

  }



  .arch-card-media {

    height: 135px !important;

    border-radius: 75px 75px 0 0 !important;

  }



  .arch-service-card {

    border-radius: 75px 75px 18px 18px !important;

    padding: 0 0 14px 0 !important;

    box-shadow: 0 4px 14px rgba(16, 46, 64, 0.05) !important;

  }



  .arch-icon-bubble {

    width: 36px !important;

    height: 36px !important;

    margin-top: -18px !important;

    margin-bottom: 6px !important;

  }



  .arch-icon-bubble svg {

    width: 17px !important;

    height: 17px !important;

  }



  .arch-card-title {

    font-size: 0.78rem !important;

    line-height: 1.2 !important;

    padding: 0 4px !important;

  }



  /* Services Mobile Cards Phone Refinement - Natural Uncropped Height */

  .service-zigzag-row .service-zigzag-media,

  .service-zigzag-row.reverse .service-zigzag-media {

    height: auto !important;

    max-height: none !important;

  }

  .service-zigzag-row .service-zigzag-media img,

  .service-zigzag-row.reverse .service-zigzag-media img {

    width: 100% !important;

    height: auto !important;

    max-width: 100% !important;

    object-fit: unset !important;

    display: block !important;

  }



  .service-zigzag-row .service-zigzag-content,

  .service-zigzag-row.reverse .service-zigzag-content {

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 10px !important;

    padding: 16px 16px 18px !important;

  }



  .service-icon-badge {

    width: 40px !important;

    height: 40px !important;

    margin-bottom: 2px !important;

  }



  .service-zigzag-title {

    font-size: 1.25rem !important;

  }



  .service-zigzag-desc {

    font-size: 0.88rem !important;

    margin-bottom: 12px !important;

  }



  .service-zigzag-action-row {

    flex-direction: column !important;

    align-items: stretch !important;

    width: 100% !important;

    gap: 8px !important;

  }



  .service-zigzag-action-row .btn-pill,

  .service-zigzag-body > .btn-pill {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

  }



  .service-age-badge {

    text-align: center !important;

    width: 100% !important;

  }



  /* Hero Content */

  .hero-title-main {

    font-size: clamp(2.1rem, 7.5vw, 2.7rem) !important;

    line-height: 1.15 !important;

  }



  .hero-sub-text {

    font-size: 0.98rem !important;

  }



  .hero-btns-row {

    flex-direction: column !important;

    width: 100% !important;

    gap: 12px !important;

  }



  .hero-btns-row .btn-pill {

    width: 100% !important;

    justify-content: center !important;

  }



  .hero-curved-img-wrap {

    height: 280px !important;

    margin-top: 0 !important;

  }



  .hero-floating-quote {

    right: 12px !important;

    bottom: 14px !important;

    top: auto !important;

    padding: 8px 14px !important;

  }



  .quote-title {

    font-size: 0.88rem !important;

  }



  /* Vision Mission Stack */

  .vision-mission-grid {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }



  /* Services Dual Item Card Layout */

  .service-dual-item {

    display: flex !important;

    flex-direction: column !important;

    background: #FFFFFF !important;

    border-radius: 24px !important;

    border: 1px solid rgba(14, 51, 92, 0.08) !important;

    box-shadow: 0 8px 24px rgba(14, 51, 92, 0.05) !important;

    overflow: hidden !important;

    text-align: left !important;

  }



  .service-dual-media {

    margin: 0 !important;

    width: 100% !important;

    max-width: none !important;

    height: 185px !important;

    border-radius: 24px 24px 0 0 !important;

    box-shadow: none !important;

  }



  .service-dual-content {

    flex-direction: column !important;

    align-items: flex-start !important;

    text-align: left !important;

    padding: 16px 16px 18px !important;

    gap: 10px !important;

  }



  .service-dual-body {

    align-items: flex-start !important;

    width: 100% !important;

  }



  .service-dual-action-row {

    flex-direction: column !important;

    align-items: stretch !important;

    width: 100% !important;

    gap: 8px !important;

  }



  .service-dual-action-row .btn-pill {

    width: 100% !important;

    justify-content: center !important;

    text-align: center !important;

  }



  .service-dual-action-row .service-age-badge {

    text-align: center !important;

    width: 100% !important;

  }



  /* Section 3: More Than a Salon Photo Mobile 540px */

  .more-than-grid-bleed {

    padding-left: 14px !important;

    padding-right: 14px !important;

    gap: 20px !important;

  }



  .more-than-photo-bleed,

  .more-than-photo-bleed img {

    border-radius: 20px !important;

    height: clamp(210px, 58vw, 290px) !important;

    width: 100% !important;

    object-fit: cover !important;

    display: block !important;

  }



  /* Section 4: Real Google Map Card 540px */

  .home-live-map-card .contact-map-body {

    min-height: 200px !important;

    height: 200px !important;

  }

}



/* ==========================================================================

   Collapsible Floating Quick Action Speed Dial (Call & WhatsApp)

   ========================================================================== */

.floating-cta-container {

  position: fixed;

  bottom: 24px;

  right: 20px;

  z-index: 99999;

  display: flex;

  flex-direction: column;

  align-items: flex-end;

  pointer-events: none;

}



/* Main Trigger Button */

.floating-cta-trigger {

  width: 62px;

  height: 62px;

  border-radius: 50%;

  background: linear-gradient(135deg, #0E335C 0%, #15457A 100%);

  color: #FFFFFF;

  border: 3.5px solid #FFFFFF;

  box-shadow: 0 10px 28px rgba(14, 51, 92, 0.35);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  position: relative;

  outline: none;

  pointer-events: auto;

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease, background 0.28s ease;

}



.floating-cta-trigger:hover {

  transform: scale(1.08) translateY(-2px);

  box-shadow: 0 14px 34px rgba(14, 51, 92, 0.45);

}



.floating-cta-trigger:active {

  transform: scale(0.95);

}



/* Icon Switching (Chat -> X) */

.trigger-icon-inner {

  position: relative;

  width: 28px;

  height: 28px;

  display: flex;

  align-items: center;

  justify-content: center;

}



.trigger-icon-inner .icon-open {

  position: absolute;

  transition: transform 0.25s ease, opacity 0.25s ease;

  transform: scale(1) rotate(0deg);

  opacity: 1;

}



.trigger-icon-inner .icon-close {

  position: absolute;

  transition: transform 0.25s ease, opacity 0.25s ease;

  transform: scale(0.6) rotate(-90deg);

  opacity: 0;

}



/* Open State on Trigger */

.floating-cta-container.open .floating-cta-trigger {

  background: #1A2840;

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.4);

}



.floating-cta-container.open .icon-open {

  transform: scale(0.6) rotate(90deg);

  opacity: 0;

}



.floating-cta-container.open .icon-close {

  transform: scale(1) rotate(0deg);

  opacity: 1;

}



/* Subtle attention pulse ring */

.trigger-pulse-ring {

  position: absolute;

  top: -4px;

  left: -4px;

  right: -4px;

  bottom: -4px;

  border-radius: 50%;

  border: 2px solid rgba(255, 107, 107, 0.7);

  animation: pulseRing 3s ease-out infinite;

  pointer-events: none;

}



.floating-cta-container.open .trigger-pulse-ring {

  display: none;

}



@keyframes pulseRing {

  0% { transform: scale(0.95); opacity: 0.9; }

  50% { transform: scale(1.22); opacity: 0; }

  100% { transform: scale(1.22); opacity: 0; }

}



/* Menu items (stacked upward above trigger) */

.floating-cta-menu {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-bottom: 14px;

  align-items: flex-end;

}



.floating-cta-item {

  display: flex;

  align-items: center;

  gap: 10px;

  text-decoration: none;

  opacity: 0;

  transform: translateY(18px) scale(0.85);

  pointer-events: none;

  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.22s ease;

}



/* Open state reveals menu items with staggered transition */

.floating-cta-container.open .floating-cta-item {

  opacity: 1;

  transform: translateY(0) scale(1);

  pointer-events: auto;

}



.floating-cta-container.open .floating-call-item {

  transition-delay: 0.04s;

}



.floating-cta-container.open .floating-wa-item {

  transition-delay: 0.08s;

}



/* Button Circles: Large 56px */

.floating-item-btn {

  width: 56px;

  height: 56px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  border: 3px solid #FFFFFF;

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.25);

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  flex-shrink: 0;

}



.floating-cta-item:hover .floating-item-btn {

  transform: scale(1.08);

}



.floating-wa-btn {

  background: #25D366;

  color: #FFFFFF;

  box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);

}



.floating-call-btn {

  background: var(--color-coral, #FF6B6B);

  color: #FFFFFF;

  box-shadow: 0 8px 24px rgba(255, 107, 107, 0.45);

}



/* Item Labels */

.floating-item-label {

  background: #FFFFFF;

  color: var(--color-navy, #0E335C);

  font-family: var(--font-sans);

  font-size: 0.90rem;

  font-weight: 700;

  padding: 8px 16px;

  border-radius: 9999px;

  box-shadow: 0 4px 18px rgba(14, 51, 92, 0.16);

  border: 1px solid rgba(14, 51, 92, 0.08);

  white-space: nowrap;

}



/* Mobile Adjustments */

@media (max-width: 768px) {

  .floating-cta-container {

    bottom: 22px;

    right: 18px;

  }



  .floating-cta-trigger {

    width: 58px;

    height: 58px;

  }



  .floating-item-btn {

    width: 54px;

    height: 54px;

  }



  .floating-item-label {

    font-size: 0.85rem;

    padding: 7px 14px;

  }

}



/* ==========================================================================

   STATS RIBBON BAR (Reference Match: Soft Lavender Pill with Confetti)

   ========================================================================== */

.stats-ribbon-section {

  display: flow-root;

  background: #FFFFFF;

  padding: 0 0 28px 0;

  position: relative;

  z-index: 5;

}



.stats-ribbon-wrap {

  background: #EFEAF8;

  border: 1.5px solid rgba(135, 116, 225, 0.28);

  border-radius: 24px;

  padding: 10px 24px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  box-shadow: 0 8px 24px rgba(135, 116, 225, 0.16);

  position: relative;

  overflow: hidden;

  max-width: 780px;

  margin: -56px auto 0 auto;

  z-index: 10;

}



.stats-swirl-left {

  position: absolute;

  left: 12px;

  top: 50%;

  transform: translateY(-50%);

  width: 20px;

  height: 32px;

  opacity: 0.6;

  pointer-events: none;

}



.stats-heart-right {

  position: absolute;

  right: 12px;

  top: 50%;

  transform: translateY(-50%);

  width: 20px;

  height: 26px;

  opacity: 0.6;

  pointer-events: none;

}



.stats-items-grid {

  display: flex;

  align-items: center;

  justify-content: space-around;

  width: 100%;

  max-width: 700px;

  margin: 0 auto;

}



.stats-pill-item {

  display: flex;

  flex-direction: column;

  align-items: center;

  text-align: center;

  flex: 1;

  padding: 2px 8px;

  position: relative;

}



.stats-pill-item:not(:last-child)::after {

  content: "";

  position: absolute;

  right: 0;

  top: 25%;

  height: 50%;

  width: 1.5px;

  background: rgba(135, 116, 225, 0.25);

}



.stats-icon-wrap {

  width: 24px;

  height: 24px;

  display: flex;

  align-items: center;

  justify-content: center;

  margin-bottom: 3px;

}



.stats-icon-wrap svg {

  width: 24px;

  height: 24px;

}



.stats-num {

  font-family: var(--font-sans);

  font-size: 1.25rem;

  font-weight: 800;

  line-height: 1.1;

  letter-spacing: -0.02em;

  margin-bottom: 0;

}



.num-coral { color: #FF4A6B; }

.num-gold { color: #F5A623; }

.num-orange { color: #FF7043; }

.num-purple { color: #8C54FF; }



.stats-label {

  font-family: var(--font-sans);

  font-size: 0.76rem;

  font-weight: 600;

  color: #373449;

  letter-spacing: 0.01em;

}



@media (max-width: 768px) {

  .stats-ribbon-section {

    display: flow-root;

    padding: 0 0 16px 0;

  }

  .stats-ribbon-wrap {

    max-width: 360px;

    margin-top: -28px;

    padding: 10px 12px;

    border-radius: 18px;

  }

  .stats-items-grid {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 8px 6px;

  }

  .stats-pill-item:not(:last-child)::after {

    display: none;

  }

  .stats-num {

    font-size: 1.12rem;

  }

  .stats-label {

    font-size: 0.70rem;

  }

  .stats-icon-wrap {

    width: 22px;

    height: 22px;

    margin-bottom: 2px;

  }

  .stats-icon-wrap svg {

    width: 22px;

    height: 22px;

  }

  .stats-swirl-left, .stats-heart-right {

    display: none;

  }

}



/* ==========================================================================

   VIRTUAL TOUR SECTION (Reference Match: Panoramic Salon with Pink Play Button)

   ========================================================================== */

.virtual-tour-section {

  padding: 32px 0 20px;

  background: #FFFDFB;

  text-align: center;

}



.vt-header {

  max-width: 620px;

  margin: 0 auto 18px;

}



.vt-header .section-eyebrow {

  margin-bottom: 4px;

}



.vt-header .section-heading {

  font-size: clamp(1.45rem, 2.2vw, 2.0rem);

  margin-bottom: 6px;

}



.vt-header .section-subheading {

  font-size: 0.90rem;

  line-height: 1.45;

}



.vt-card {

  position: relative;

  max-width: 780px;

  margin: 0 auto;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 10px 30px rgba(14, 51, 92, 0.10);

  border: 3px solid #FFFFFF;

}



.vt-media-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 21 / 9;

  max-height: 320px;

  overflow: hidden;

  background: #F4E8EE;

}



.vt-media-img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

  transition: transform 0.4s ease;

}



.vt-card:hover .vt-media-img {

  transform: scale(1.02);

}



.vt-overlay-shade {

  position: absolute;

  inset: 0;

  background: linear-gradient(180deg, rgba(14, 51, 92, 0.08) 0%, rgba(14, 51, 92, 0.35) 100%);

  display: flex;

  align-items: center;

  justify-content: center;

}



.vt-play-btn {

  width: 54px;

  height: 54px;

  border-radius: 50%;

  background: #FF2E74;

  color: #FFFFFF;

  border: 3px solid #FFFFFF;

  box-shadow: 0 6px 22px rgba(255, 46, 116, 0.55);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.vt-play-btn:hover {

  transform: scale(1.1);

  box-shadow: 0 10px 28px rgba(255, 46, 116, 0.7);

}



.vt-play-btn svg {

  width: 22px;

  height: 22px;

  margin-left: 3px;

}



/* Virtual Tour Fullscreen Modal */

.vt-modal-overlay {

  position: fixed;

  inset: 0;

  background: rgba(14, 51, 92, 0.96);

  backdrop-filter: blur(8px);

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

  z-index: 999999;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 0;

  margin: 0;

  width: 100vw;

  height: 100vh;

  height: 100dvh;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.25s ease, visibility 0.25s ease;

}



.vt-modal-overlay.active {

  opacity: 1;

  visibility: visible;

}



.vt-modal-dialog {

  background: #0b1a2d;

  border-radius: 0;

  width: 100vw;

  height: 100vh;

  height: 100dvh;

  max-width: 100vw;

  max-height: 100vh;

  max-height: 100dvh;

  display: flex;

  flex-direction: column;

  overflow: hidden;

  box-shadow: none;

  position: relative;

  margin: 0;

}



.vt-modal-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  padding: 0 20px;

  background: #FFFFFF;

  border-bottom: 1px solid rgba(14, 51, 92, 0.12);

  flex-shrink: 0;

  z-index: 10;

  height: 52px;

  box-sizing: border-box;

}



.vt-modal-title {

  display: flex;

  align-items: center;

  gap: 10px;

  font-weight: 700;

  color: var(--color-navy);

  font-size: 1.02rem;

  letter-spacing: -0.01em;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.vt-modal-title svg {

  flex-shrink: 0;

}



.vt-modal-actions {

  display: flex;

  align-items: center;

  gap: 8px;

  flex-shrink: 0;

}



.vt-modal-fs-btn,

.vt-modal-close {

  background: #F4F6F9;

  border: 1px solid rgba(14, 51, 92, 0.12);

  cursor: pointer;

  padding: 7px;

  color: var(--color-navy);

  border-radius: 9px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  transition: all 0.2s ease;

  width: 36px;

  height: 36px;

}



.vt-modal-fs-btn:hover,

.vt-modal-close:hover {

  background: var(--color-coral);

  color: #FFFFFF;

  border-color: var(--color-coral);

  transform: scale(1.05);

}



.vt-modal-body {

  position: relative;

  width: 100%;

  flex: 1;

  height: calc(100vh - 52px);

  height: calc(100dvh - 52px);

  aspect-ratio: unset;

  background: #000;

  overflow: hidden;

}



.vt-modal-body iframe,

.vt-modal-body video {

  width: 100%;

  height: 100%;

  border: none;

  display: block;

}



/* ==========================================================================

   EASY STEPS / HOW IT WORKS (Reference Match: 3 Tinted Cards with Dashed Line)

   ========================================================================== */

.easy-steps-section {

  padding: 32px 0 24px;

  background: #FFFFFF;

}



.steps-container {

  max-width: 920px;

  margin: 0 auto;

}



.easy-steps-section .section-header-center {

  margin-bottom: 18px;

}



.easy-steps-section .section-heading {

  font-size: clamp(1.45rem, 2.2vw, 2.0rem);

  margin-bottom: 6px;

}



.easy-steps-section .section-subheading {

  font-size: 0.90rem;

  line-height: 1.45;

}



.steps-cards-row {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 16px;

  position: relative;

  margin-top: 18px;

}



.step-card {

  border-radius: 16px;

  padding: 18px 16px;

  text-align: center;

  display: flex;

  flex-direction: column;

  align-items: center;

  position: relative;

  transition: transform 0.22s ease, box-shadow 0.22s ease;

}



.step-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 22px rgba(14, 51, 92, 0.08);

}



/* Card 1: Pink */

.step-card-pink {

  background: #FFF1F3;

  border: 1.5px solid #FFD8DF;

}



/* Card 2: Blue */

.step-card-blue {

  background: #EEF7FF;

  border: 1.5px solid #D2E9FF;

}



/* Card 3: Cream / Yellow */

.step-card-yellow {

  background: #FFFDF0;

  border: 1.5px solid #FFEBB6;

}



.step-badge-cluster {

  display: flex;

  align-items: center;

  gap: 6px;

  margin-bottom: 10px;

}



.step-num-circle {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  background: #FBB040;

  color: #1A1A1A;

  font-family: var(--font-sans);

  font-weight: 800;

  font-size: 0.95rem;

  display: flex;

  align-items: center;

  justify-content: center;

  box-shadow: 0 2px 8px rgba(251, 176, 64, 0.3);

}



.step-icon-circle {

  width: 30px;

  height: 30px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

}



.step-icon-circle svg {

  width: 15px;

  height: 15px;

}



.step-icon-wa {

  background: #25D366;

  color: #FFFFFF;

}



.step-icon-cal {

  background: #4A90E2;

  color: #FFFFFF;

}



.step-icon-party {

  background: #FF5A70;

  color: #FFFFFF;

}



.step-title {

  font-family: var(--font-sans);

  font-weight: 800;

  font-size: 1.05rem;

  color: #1A2E44;

  margin-bottom: 6px;

}



.step-desc {

  font-family: var(--font-sans);

  font-size: 0.84rem;

  color: #4A5B70;

  line-height: 1.45;

  margin: 0;

}



@media (max-width: 900px) {

  .steps-cards-row {

    grid-template-columns: 1fr;

    gap: 12px;

  }

  .step-card {

    padding: 16px 14px;

  }

}



/* ==========================================================================

   GOOGLE MY BUSINESS (GMB) VERIFIED REVIEWS

   ========================================================================== */

.gmb-reviews-section {

  padding: 34px 0 26px;

  background: #FAF7F2;

}



.gmb-header-row {

  display: flex;

  align-items: flex-end;

  justify-content: space-between;

  margin-bottom: 20px;

  gap: 16px;

}



.gmb-header-row .section-heading {

  font-size: clamp(1.45rem, 2.2vw, 2.0rem);

  margin-bottom: 4px;

}



.gmb-header-row .section-subheading {

  font-size: 0.88rem;

}



.gmb-overall-badge {

  display: flex;

  align-items: center;

  gap: 10px;

  background: #FFFFFF;

  padding: 6px 14px;

  border-radius: 9999px;

  border: 1px solid rgba(14, 51, 92, 0.1);

  box-shadow: 0 3px 10px rgba(14, 51, 92, 0.05);

}



.gmb-header-actions {

  display: flex;

  align-items: center;

  gap: 14px;

}



.gmb-carousel-arrows {

  display: flex;

  align-items: center;

  gap: 8px;

}



.gmb-arrow-btn {

  width: 36px;

  height: 36px;

  border-radius: 50%;

  border: 1.5px solid rgba(14, 51, 92, 0.15);

  background: #FFFFFF;

  color: var(--color-navy);

  display: flex;

  align-items: center;

  justify-content: center;

  cursor: pointer;

  transition: all 0.22s ease;

  box-shadow: 0 2px 8px rgba(14, 51, 92, 0.05);

}



.gmb-arrow-btn:hover {

  background: var(--color-coral);

  color: #FFFFFF;

  border-color: var(--color-coral);

  transform: scale(1.08);

  box-shadow: 0 4px 14px rgba(255, 107, 107, 0.35);

}



.gmb-carousel-viewport {

  width: 100%;

  overflow: hidden;

  position: relative;

  padding: 6px 2px 14px;

}



.gmb-carousel-track {

  display: flex;

  transition: transform 0.55s cubic-bezier(0.25, 1, 0.5, 1);

  will-change: transform;

}



.gmb-carousel-slide {

  flex: 0 0 50%;

  max-width: 50%;

  padding: 0 10px;

  box-sizing: border-box;

}



@media (min-width: 1100px) {

  .gmb-carousel-slide {

    flex: 0 0 33.333%;

    max-width: 33.333%;

  }

}



@media (max-width: 768px) {

  .gmb-carousel-slide {

    flex: 0 0 100%;

    max-width: 100%;

    padding: 0 4px;

  }

  .gmb-header-actions {

    width: 100%;

    justify-content: space-between;

  }

}



.gmb-review-card {

  background: #FFFFFF;

  border-radius: 16px;

  padding: 20px 22px;

  box-shadow: 0 4px 16px rgba(14, 51, 92, 0.06);

  border: 1px solid rgba(14, 51, 92, 0.07);

  display: flex;

  flex-direction: column;

  justify-content: space-between;

  min-height: 180px;

  height: 100%;

  box-sizing: border-box;

  transition: transform 0.25s ease, box-shadow 0.25s ease;

}



.gmb-review-card:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.10);

}



.gmb-stars-row {

  display: flex;

  align-items: center;

  gap: 3px;

  color: #FBB040;

  margin-bottom: 8px;

}



.gmb-quote-text {

  font-size: 0.86rem;

  color: var(--color-navy);

  line-height: 1.5;

  margin-bottom: 12px;

  font-style: italic;

}



.gmb-author-row {

  display: flex;

  align-items: center;

  justify-content: space-between;

  border-top: 1px solid rgba(14, 51, 92, 0.08);

  padding-top: 8px;

  margin-top: auto;

}



.gmb-author-name {

  font-weight: 700;

  font-size: 0.84rem;

  color: var(--color-navy);

}



.gmb-branch-pill {

  font-size: 0.72rem;

  font-weight: 600;

  color: var(--color-coral);

  background: rgba(255, 107, 107, 0.1);

  padding: 2px 7px;

  border-radius: 9999px;

}



/* Pagination Dots with active pill animation */

.gmb-carousel-dots {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 8px;

  margin-top: 16px;

}



.gmb-dot {

  width: 9px;

  height: 9px;

  border-radius: 9999px;

  background: rgba(14, 51, 92, 0.2);

  border: none;

  padding: 0;

  cursor: pointer;

  transition: all 0.25s ease;

}



.gmb-dot.active {

  width: 26px;

  background: var(--color-coral);

  border-radius: 9999px;

}



@media (max-width: 768px) {

  .gmb-header-row {

    flex-direction: column;

    align-items: flex-start;

  }

}















/* ==========================================================================

   UPDATES (Google Doc & Service Taxonomy Overhaul v2.6.0)

   ========================================================================== */



/* 1. Header Freezing & Sticky Navbar */

html, body {

  overflow-x: clip !important;

}



.main-header {

  background: rgba(255, 255, 255, 0.98) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  border-bottom: 1px solid rgba(14, 51, 92, 0.08) !important;

  position: sticky !important;

  top: 0 !important;

  left: 0 !important;

  width: 100% !important;

  z-index: 1000 !important;

  padding: 14px 0 !important;

  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05) !important;

  transition: box-shadow 0.3s ease, background 0.3s ease !important;

}



/* 2. Hide Hero Floating Quote Box */

.hero-floating-quote {

  display: none !important;

}



/* 3. Hide Stats Ribbon Box */

.stats-ribbon-section {

  display: none !important;

}



/* 4. Subtitle Centering in Services Section */

.services-arch-section .section-subtitle {

  margin-left: auto !important;

  margin-right: auto !important;

  text-align: center !important;

}



/* 5. Gaur City Branch Image Auto-Slider */

.branch-card-media.branch-slider-media {

  position: relative;

  overflow: hidden;

}



.branch-slider-track {

  position: relative;

  width: 100%;

  height: 100%;

  aspect-ratio: 16 / 10;

}



.branch-slider-slide {

  position: absolute;

  inset: 0;

  width: 100%;

  height: 100%;

  opacity: 0;

  visibility: hidden;

  transition: opacity 0.8s ease, visibility 0.8s ease;

}



.branch-slider-slide.active {

  position: relative;

  opacity: 1;

  visibility: visible;

}



.branch-slider-slide img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  display: block;

}



.branch-slider-dots {

  position: absolute;

  bottom: 10px;

  left: 50%;

  transform: translateX(-50%);

  display: flex;

  gap: 6px;

  z-index: 5;

  background: rgba(0, 0, 0, 0.35);

  padding: 4px 8px;

  border-radius: 9999px;

  backdrop-filter: blur(4px);

}



.branch-slider-dot {

  width: 7px;

  height: 7px;

  border-radius: 50%;

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

  border: none;

  cursor: pointer;

  padding: 0;

  transition: all 0.25s ease;

}



.branch-slider-dot.active {

  background: #FFFFFF;

  width: 18px;

  border-radius: 4px;

}



/* 6. Virtual Tour Redesign (No Grey Card, Split 2-Col with QR) */

.virtual-tour-section {

  padding: 48px 0;

  background: transparent;

  position: relative;

}



.vt-redesigned-grid {

  display: grid;

  grid-template-columns: 1.15fr 0.85fr;

  align-items: center;

  gap: 40px;

  background: #FFFFFF;

  border-radius: 28px;

  padding: 36px 40px;

  box-shadow: 0 12px 36px rgba(14, 51, 92, 0.06);

  border: 1px solid rgba(14, 51, 92, 0.08);

}



.vt-left-content {

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  text-align: left;

}



.vt-left-content .section-eyebrow {

  background: rgba(255, 94, 91, 0.1);

  color: var(--color-coral);

  border-radius: 9999px;

  padding: 6px 14px;

  font-weight: 700;

  font-size: 0.82rem;

  letter-spacing: 0.06em;

  display: inline-block;

  margin-bottom: 12px;

}



.vt-left-content .section-headline {

  font-size: clamp(1.85rem, 2.8vw, 2.4rem);

  margin-bottom: 12px;

  line-height: 1.2;

}



.vt-left-content .section-subtitle {

  font-size: 1.02rem;

  color: var(--color-navy-muted);

  line-height: 1.6;

  margin-bottom: 22px;

  max-width: 520px;

}



.vt-features-list {

  display: flex;

  flex-direction: column;

  gap: 10px;

  margin-bottom: 26px;

}



.vt-feature-item {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.94rem;

  font-weight: 600;

  color: var(--color-navy);

}



.vt-feature-icon {

  width: 26px;

  height: 26px;

  border-radius: 50%;

  background: #FFF1F0;

  color: var(--color-coral);

  display: flex;

  align-items: center;

  justify-content: center;

  flex-shrink: 0;

}



.vt-right-showcase {

  display: flex;

  flex-direction: column;

  gap: 16px;

}



.vt-preview-card {

  position: relative;

  border-radius: 20px;

  overflow: hidden;

  box-shadow: 0 10px 28px rgba(14, 51, 92, 0.12);

  cursor: pointer;

  aspect-ratio: 16 / 9;

}



.vt-preview-card img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

  display: block;

}



.vt-preview-card:hover img {

  transform: scale(1.03);

}



.vt-qr-box {

  display: flex;

  align-items: center;

  gap: 16px;

  background: #FAF7F2;

  border: 1px solid rgba(14, 51, 92, 0.08);

  border-radius: 16px;

  padding: 14px 18px;

}



.vt-qr-code-img {

  width: 76px;

  height: 76px;

  border-radius: 8px;

  background: #FFFFFF;

  padding: 4px;

  box-shadow: 0 2px 8px rgba(0,0,0,0.06);

  flex-shrink: 0;

}



.vt-qr-text {

  font-size: 0.88rem;

  line-height: 1.45;

  color: var(--color-navy);

}



.vt-qr-text strong {

  display: block;

  font-size: 0.94rem;

  color: var(--color-navy);

  margin-bottom: 2px;

}



@media (max-width: 900px) {

  .vt-redesigned-grid {

    grid-template-columns: 1fr;

    padding: 24px 20px;

    gap: 28px;

  }

}



/* 7. How It Works (Remove Grey Box) */

.easy-steps-section {

  background: transparent !important;

  padding: 40px 0 !important;

}



/* 8. Associate Partners Section */

.associate-partners-section {

  padding: 56px 0 64px;

  background: #FFFFFF;

  border-top: 1px solid rgba(14, 51, 92, 0.06);

  border-bottom: 1px solid rgba(14, 51, 92, 0.06);

  text-align: center;

}



.partners-header {

  max-width: 680px;

  margin: 0 auto 36px;

}



.partners-header .section-eyebrow {

  margin-bottom: 8px;

  color: var(--color-coral);

  font-weight: 700;

}



.partners-header .section-headline {

  font-size: clamp(1.8rem, 2.6vw, 2.3rem);

  margin-bottom: 8px;

}



.partners-header .section-subtitle {

  margin: 0 auto;

}



.partners-grid {

  display: flex;

  align-items: center;

  justify-content: center;

  flex-wrap: wrap;

  gap: 24px 32px;

  max-width: 1100px;

  margin: 0 auto;

  padding: 0 16px;

}



.partner-logo-item {

  width: 170px;

  height: 85px;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 10px 16px;

  background: #FAF7F2;

  border-radius: 14px;

  border: 1px solid rgba(14, 51, 92, 0.07);

  box-shadow: 0 4px 12px rgba(14, 51, 92, 0.03);

  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;

}



.partner-logo-item:hover {

  transform: translateY(-3px);

  box-shadow: 0 8px 22px rgba(14, 51, 92, 0.08);

  background: #FFFFFF;

}



.partner-logo-item img {

  max-width: 100%;

  max-height: 100%;

  object-fit: contain;

}



/* 9. Services Page Overhaul */

.services-category-title-strip {

  display: flex;

  align-items: center;

  gap: 12px;

  margin: 44px 0 24px;

  padding-bottom: 12px;

  border-bottom: 2px solid rgba(14, 51, 92, 0.08);

}



.services-category-title-strip h2 {

  font-size: 1.85rem;

  color: var(--color-navy);

  margin: 0;

}



.services-category-title-strip .cat-badge {

  background: rgba(255, 94, 91, 0.12);

  color: var(--color-coral);

  font-size: 0.80rem;

  font-weight: 700;

  padding: 4px 12px;

  border-radius: 9999px;

  text-transform: uppercase;

  letter-spacing: 0.05em;

}



.service-card-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));

  gap: 28px;

  margin-bottom: 40px;

}



.service-item-card {

  background: #FFFFFF;

  border-radius: 20px;

  overflow: hidden;

  border: 1px solid rgba(14, 51, 92, 0.08);

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.05);

  display: flex;

  flex-direction: column;

  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease;

}



.service-item-card:hover {

  transform: translateY(-5px);

  box-shadow: 0 16px 36px rgba(14, 51, 92, 0.10);

}



.service-card-img-wrap {

  position: relative;

  width: 100%;

  aspect-ratio: 16 / 10;

  overflow: hidden;

  background: #FAF7F2;

}



.service-card-img-wrap img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  transition: transform 0.4s ease;

}



.service-item-card:hover .service-card-img-wrap img {

  transform: scale(1.04);

}



.service-age-tag {

  position: absolute;

  top: 14px;

  right: 14px;

  background: rgba(14, 51, 92, 0.88);

  color: #FFFFFF;

  backdrop-filter: blur(6px);

  padding: 5px 12px;

  border-radius: 9999px;

  font-size: 0.78rem;

  font-weight: 700;

  letter-spacing: 0.02em;

}



.service-card-content {

  padding: 22px 24px;

  display: flex;

  flex-direction: column;

  flex: 1;

}



.service-card-content h3 {

  font-family: var(--font-serif);

  font-size: 1.35rem;

  color: var(--color-navy);

  margin-bottom: 8px;

}



.service-card-content p {

  color: var(--color-navy-muted);

  font-size: 0.92rem;

  line-height: 1.55;

  margin-bottom: 18px;

  flex: 1;

}



.service-card-footer {

  display: flex;

  align-items: center;

  justify-content: space-between;

  margin-top: auto;

  gap: 12px;

}



/* About Us Alignment Unification */

.about-story-white .container,

.why-choose-section .container,

.vision-mission-grid {

  max-width: 1220px !important;

  width: 100% !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding-left: 24px !important;

  padding-right: 24px !important;

}



.about-story-white .more-than-grid {

  grid-template-columns: 1.15fr 1fr !important;

  gap: 40px !important;

}





/* ==========================================================================

   FIXES: More Than a Salon Image Slider & Clean Virtual Tour + QR

   ========================================================================== */



/* Section 3: More Than a Salon Auto-Slider */

.more-than-photo-bleed.more-than-slider {

  position: relative !important;

  overflow: hidden !important;

  border-radius: 36px 0 0 160px !important;

  height: clamp(380px, 34vw, 480px) !important;

  width: 100% !important;

  display: block !important;

  box-shadow: 0 16px 48px rgba(30, 42, 74, 0.08) !important;

}



.more-than-slide {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: opacity 0.8s ease-in-out, visibility 0.8s ease-in-out !important;

}



.more-than-slide.active {

  position: absolute !important;

  opacity: 1 !important;

  visibility: visible !important;

}



.more-than-slide img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center 30% !important;

  border-radius: 36px 0 0 160px !important;

  display: block !important;

}



.more-than-slider-dots {

  position: absolute !important;

  bottom: 18px !important;

  left: 40px !important;

  display: flex !important;

  gap: 8px !important;

  z-index: 10 !important;

  background: rgba(0, 0, 0, 0.4) !important;

  padding: 5px 12px !important;

  border-radius: 9999px !important;

  backdrop-filter: blur(4px) !important;

}



.more-than-dot {

  width: 8px !important;

  height: 8px !important;

  border-radius: 50% !important;

  background: rgba(255, 255, 255, 0.6) !important;

  border: none !important;

  cursor: pointer !important;

  padding: 0 !important;

  transition: all 0.25s ease !important;

}



.more-than-dot.active {

  background: #FFFFFF !important;

  width: 22px !important;

  border-radius: 4px !important;

}



/* ==========================================================================

   SECTION 5: SALON VIRTUAL TOUR (UNIFIED 360° THEATER + QR SUITE)

   ========================================================================== */

.virtual-tour-section {

  padding: clamp(50px, 6vw, 78px) 0 !important;

  background: transparent !important;

  position: relative !important;

  scroll-margin-top: 90px !important;

}



.vt-section-header {

  text-align: center !important;

  max-width: 680px !important;

  margin: 0 auto clamp(28px, 4vw, 38px) !important;

}



.vt-section-header .section-eyebrow {

  display: inline-block !important;

  font-size: 0.74rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.12em !important;

  color: var(--color-coral, #FF5E5B) !important;

  text-transform: uppercase !important;

  margin-bottom: 8px !important;

}



.vt-section-header .section-headline {

  font-family: var(--font-serif, "Playfair Display", Georgia, serif) !important;

  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;

  font-weight: 800 !important;

  color: #16113A !important;

  line-height: 1.25 !important;

  margin: 0 0 10px !important;

}



.vt-section-header .section-subtitle {

  font-size: clamp(0.92rem, 1.4vw, 1.02rem) !important;

  line-height: 1.55 !important;

  color: #555E6D !important;

  margin: 0 auto !important;

}



/* Unified 360 Suite Layout (Screen + QR Cohesive Pair) */

.vt-suite-container {

  display: grid !important;

  grid-template-columns: 1.7fr 1fr !important;

  gap: clamp(20px, 2.5vw, 28px) !important;

  max-width: 1080px !important;

  margin: 0 auto !important;

  align-items: stretch !important;

}



/* Left: 360 Panoramic Salon Theater */

.vt-suite-theater {

  position: relative !important;

  border-radius: 24px !important;

  overflow: hidden !important;

  background: #16113A !important;

  box-shadow: 0 16px 42px rgba(22, 17, 58, 0.12), 0 2px 8px rgba(0, 0, 0, 0.04) !important;

  border: 1px solid rgba(22, 17, 58, 0.08) !important;

  cursor: pointer !important;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

  display: flex !important;

  flex-direction: column !important;

}



.vt-suite-theater:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 24px 56px rgba(22, 17, 58, 0.18), 0 6px 20px rgba(255, 94, 91, 0.15) !important;

}



.vt-theater-media {

  position: relative !important;

  width: 100% !important;

  height: 100% !important;

  min-height: 380px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  overflow: hidden !important;

}



.vt-theater-cover {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.vt-suite-theater:hover .vt-theater-cover {

  transform: scale(1.04) !important;

}



.vt-theater-vignette {

  position: absolute !important;

  inset: 0 !important;

  background: radial-gradient(circle at center, rgba(22, 17, 58, 0.12) 0%, rgba(22, 17, 58, 0.45) 100%),

              linear-gradient(180deg, rgba(22, 17, 58, 0.25) 0%, rgba(22, 17, 58, 0.65) 100%) !important;

  pointer-events: none !important;

}



/* Floating Corner Badges inside Screen */

.vt-badge-top-left {

  position: absolute !important;

  top: 18px !important;

  left: 18px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 7px !important;

  padding: 5px 12px !important;

  background: rgba(22, 17, 58, 0.75) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  border-radius: 9999px !important;

  color: #FFFFFF !important;

  font-size: 0.72rem !important;

  font-weight: 700 !important;

  letter-spacing: 0.04em !important;

  border: 1px solid rgba(255, 255, 255, 0.18) !important;

  z-index: 2 !important;

}



.vt-pulse-dot {

  width: 8px !important;

  height: 8px !important;

  border-radius: 50% !important;

  background: #10B981 !important;

  box-shadow: 0 0 8px #10B981 !important;

  animation: vtBeaconPulse 1.8s ease infinite !important;

}



@keyframes vtBeaconPulse {

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

  50% { opacity: 0.4; transform: scale(0.85); }

}



.vt-badge-top-right {

  position: absolute !important;

  top: 18px !important;

  right: 18px !important;

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 5px 12px !important;

  background: rgba(255, 255, 255, 0.88) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  border-radius: 9999px !important;

  color: #16113A !important;

  font-size: 0.72rem !important;

  font-weight: 700 !important;

  border: 1px solid rgba(255, 255, 255, 0.95) !important;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;

  z-index: 2 !important;

}



/* Center Play Orb */

.vt-play-center {

  position: relative !important;

  z-index: 3 !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 10px !important;

  pointer-events: none !important;

}



.vt-orb-halo {

  position: absolute !important;

  border-radius: 50% !important;

  border: 1.5px solid rgba(255, 255, 255, 0.45) !important;

  pointer-events: none !important;

}



.vt-orb-halo.halo-1 {

  width: 108px !important;

  height: 108px !important;

  top: -18px !important;

  left: -18px !important;

  animation: vtPulseAnim 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite !important;

}



.vt-orb-halo.halo-2 {

  width: 90px !important;

  height: 90px !important;

  top: -9px !important;

  left: -9px !important;

  animation: vtPulseAnim 2.8s cubic-bezier(0.25, 1, 0.5, 1) infinite 0.7s !important;

}



@keyframes vtPulseAnim {

  0% { transform: scale(0.85); opacity: 0.8; }

  100% { transform: scale(1.4); opacity: 0; }

}



.vt-play-orb-btn {

  width: 72px !important;

  height: 72px !important;

  border-radius: 50% !important;

  background: linear-gradient(135deg, #FF6B6B 0%, #FF5E5B 100%) !important;

  color: #FFFFFF !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  border: 2.5px solid rgba(255, 255, 255, 0.92) !important;

  box-shadow: 0 10px 28px rgba(255, 94, 91, 0.6) !important;

  transition: transform 0.3s ease, box-shadow 0.3s ease !important;

}



.vt-play-orb-btn svg {

  margin-left: 3px !important;

}



.vt-suite-theater:hover .vt-play-orb-btn {

  transform: scale(1.08) !important;

  box-shadow: 0 14px 36px rgba(255, 94, 91, 0.75) !important;

}



.vt-orb-title {

  display: inline-block !important;

  padding: 4px 12px !important;

  background: rgba(22, 17, 58, 0.8) !important;

  backdrop-filter: blur(10px) !important;

  border-radius: 9999px !important;

  color: #FFFFFF !important;

  font-size: 0.7rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.08em !important;

  border: 1px solid rgba(255, 255, 255, 0.2) !important;

  text-transform: uppercase !important;

}



/* Bottom Feature Tags inside Screen */

.vt-theater-footer {

  position: absolute !important;

  bottom: 0 !important;

  left: 0 !important;

  right: 0 !important;

  padding: 10px 18px !important;

  background: linear-gradient(180deg, transparent 0%, rgba(22, 17, 58, 0.82) 100%) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  gap: 10px !important;

  font-size: 0.75rem !important;

  font-weight: 700 !important;

  color: rgba(255, 255, 255, 0.9) !important;

  z-index: 2 !important;

}



.vt-footer-sep {

  color: rgba(255, 255, 255, 0.4) !important;

}



/* Right: Luxury QR Experience Card */

.vt-suite-qr-card {

  background: linear-gradient(180deg, #FFFFFF 0%, #FFFDF9 100%) !important;

  border-radius: 24px !important;

  padding: 26px 22px !important;

  box-shadow: 0 16px 42px rgba(22, 17, 58, 0.08), 0 2px 8px rgba(0, 0, 0, 0.03) !important;

  border: 1px solid rgba(22, 17, 58, 0.08) !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: space-between !important;

  text-align: center !important;

  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s cubic-bezier(0.16, 1, 0.3, 1) !important;

}



.vt-suite-qr-card:hover {

  transform: translateY(-4px) !important;

  box-shadow: 0 22px 50px rgba(22, 17, 58, 0.12) !important;

}



.vt-qr-header {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 6px !important;

}



.vt-qr-pill-badge {

  display: inline-flex !important;

  align-items: center !important;

  gap: 6px !important;

  padding: 4px 12px !important;

  background: rgba(255, 94, 91, 0.08) !important;

  color: var(--color-coral, #FF5E5B) !important;

  font-size: 0.7rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.06em !important;

  text-transform: uppercase !important;

  border-radius: 9999px !important;

  border: 1px solid rgba(255, 94, 91, 0.18) !important;

}



.vt-qr-card-title {

  font-family: var(--font-serif, "Playfair Display", Georgia, serif) !important;

  font-size: 1.18rem !important;

  font-weight: 700 !important;

  color: #16113A !important;

  margin: 2px 0 0 !important;

}



.vt-qr-card-sub {

  font-size: 0.78rem !important;

  line-height: 1.4 !important;

  color: #555E6D !important;

  margin: 0 !important;

  max-width: 240px !important;

}



/* QR Code Artboard with Modern Brackets */

.vt-qr-artboard {

  position: relative !important;

  padding: 12px !important;

  margin: 12px 0 !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.vt-qr-bracket {

  position: absolute !important;

  width: 12px !important;

  height: 12px !important;

  border-color: var(--color-coral, #FF5E5B) !important;

  border-style: solid !important;

  pointer-events: none !important;

}



.vt-qr-bracket.top-left {

  top: 0 !important;

  left: 0 !important;

  border-width: 2.5px 0 0 2.5px !important;

  border-top-left-radius: 5px !important;

}



.vt-qr-bracket.top-right {

  top: 0 !important;

  right: 0 !important;

  border-width: 2.5px 2.5px 0 0 !important;

  border-top-right-radius: 5px !important;

}



.vt-qr-bracket.bottom-left {

  bottom: 0 !important;

  left: 0 !important;

  border-width: 0 0 2.5px 2.5px !important;

  border-bottom-left-radius: 5px !important;

}



.vt-qr-bracket.bottom-right {

  bottom: 0 !important;

  right: 0 !important;

  border-width: 0 2.5px 2.5px 0 !important;

  border-bottom-right-radius: 5px !important;

}



.vt-qr-inner-frame {

  padding: 10px !important;

  background: #FAF7F2 !important;

  border-radius: 16px !important;

  border: 1px solid rgba(22, 17, 58, 0.07) !important;

  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;

}



.vt-qr-image {

  width: 120px !important;

  height: 120px !important;

  object-fit: contain !important;

  display: block !important;

}



.vt-qr-card-footer {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  gap: 6px !important;

  width: 100% !important;

}



.vt-qr-cta-btn {

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  max-width: 190px !important;

  padding: 8px 18px !important;

  background: var(--color-coral, #FF5E5B) !important;

  color: #FFFFFF !important;

  font-size: 0.82rem !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  border-radius: 9999px !important;

  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.35) !important;

  transition: all 0.25s ease !important;

}



.vt-qr-cta-btn:hover {

  background: #E84C49 !important;

  transform: translateY(-2px) !important;

  box-shadow: 0 6px 18px rgba(255, 94, 91, 0.45) !important;

}



.vt-qr-hint {

  font-size: 0.7rem !important;

  color: #7D8695 !important;

}



/* ==========================================================================

   SECTION 8: ASSOCIATE PARTNERS (LUXURY MARQUEE & ECOSYSTEM REDESIGN)

   ========================================================================== */

.associate-partners-section {

  padding: clamp(50px, 6vw, 76px) 0 clamp(44px, 5vw, 64px) !important;

  background: #FAF7F2 !important;

  position: relative !important;

  scroll-margin-top: 90px !important;

}



.partners-section-header {

  text-align: center !important;

  max-width: 680px !important;

  margin: 0 auto clamp(26px, 3.5vw, 36px) !important;

}



.partners-section-header .section-eyebrow {

  display: inline-block !important;

  font-size: 0.74rem !important;

  font-weight: 800 !important;

  letter-spacing: 0.12em !important;

  color: var(--color-coral, #FF5E5B) !important;

  text-transform: uppercase !important;

  margin-bottom: 8px !important;

}



.partners-section-title {

  font-family: var(--font-serif, "Playfair Display", Georgia, serif) !important;

  font-size: clamp(1.9rem, 3.4vw, 2.6rem) !important;

  font-weight: 800 !important;

  color: #16113A !important;

  line-height: 1.25 !important;

  margin: 0 0 10px !important;

}



.partners-section-sub {

  font-size: clamp(0.92rem, 1.4vw, 1.02rem) !important;

  line-height: 1.55 !important;

  color: #555E6D !important;

  margin: 0 auto !important;

}



/* Marquee Container with Masked Fade Edges */

.partners-marquee-container {

  position: relative !important;

  width: 100% !important;

  overflow: hidden !important;

  padding: 22px 0 !important;

  border-radius: 26px !important;

  background: #FFFFFF !important;

  border: 1px solid rgba(22, 17, 58, 0.08) !important;

  box-shadow: 0 12px 34px rgba(22, 17, 58, 0.04) !important;

  mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%) !important;

  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 80px, black calc(100% - 80px), transparent 100%) !important;

}



.partners-marquee-rail {

  display: flex !important;

  width: max-content !important;

  animation: partnerMarqueeScroll 28s linear infinite !important;

  will-change: transform !important;

}



.partners-marquee-rail:hover,

.partners-marquee-rail:active {

  animation-play-state: paused !important;

}



@keyframes partnerMarqueeScroll {

  0% { transform: translateX(0); }

  100% { transform: translateX(-50%); }

}



.partners-marquee-group {

  display: flex !important;

  align-items: center !important;

  gap: 18px !important;

  padding: 0 9px !important;

  flex-shrink: 0 !important;

}



/* Prestige Partner Card */

.partner-glass-card {

  width: 200px !important;

  height: 132px !important;

  background: #FAF7F2 !important;

  border: 1px solid rgba(22, 17, 58, 0.06) !important;

  border-radius: 18px !important;

  padding: 14px 16px 12px !important;

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: space-between !important;

  box-shadow: 0 4px 12px rgba(22, 17, 58, 0.02) !important;

  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;

  cursor: default !important;

  flex-shrink: 0 !important;

}



.partner-glass-card:hover {

  transform: translateY(-6px) !important;

  background: #FFFFFF !important;

  border-color: rgba(255, 94, 91, 0.35) !important;

  box-shadow: 0 14px 32px rgba(22, 17, 58, 0.08), 0 0 0 1px rgba(255, 94, 91, 0.18) !important;

}



.partner-card-media {

  width: 100% !important;

  height: 68px !important;

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

}



.partner-card-media img {

  max-width: 154px !important;

  max-height: 56px !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain !important;

  display: block !important;

  transition: transform 0.3s ease !important;

}



.partner-glass-card:hover .partner-card-media img {

  transform: scale(1.05) !important;

}



.partner-category-tag {

  font-size: 0.69rem !important;

  font-weight: 700 !important;

  color: #555E6D !important;

  letter-spacing: 0.03em !important;

  text-transform: uppercase !important;

  background: rgba(22, 17, 58, 0.05) !important;

  padding: 3px 10px !important;

  border-radius: 9999px !important;

  white-space: nowrap !important;

  transition: all 0.25s ease !important;

}



.partner-glass-card:hover .partner-category-tag {

  color: #FF5E5B !important;

  background: rgba(255, 94, 91, 0.1) !important;

}



/* Collaboration Callout Bar */

.partners-collab-bar {

  margin-top: 26px !important;

  padding: 14px 24px !important;

  background: linear-gradient(135deg, rgba(255, 94, 91, 0.08) 0%, rgba(255, 170, 43, 0.08) 100%) !important;

  border-radius: 9999px !important;

  border: 1px solid rgba(255, 94, 91, 0.18) !important;

  display: flex !important;

  align-items: center !important;

  justify-content: space-between !important;

  gap: 16px !important;

}



.partners-collab-text {

  display: flex !important;

  align-items: center !important;

  gap: 10px !important;

  font-size: 0.88rem !important;

  font-weight: 600 !important;

  color: #16113A !important;

}



.collab-sparkle {

  font-size: 1.1rem !important;

}



.partners-collab-btn {

  display: inline-flex !important;

  align-items: center !important;

  padding: 8px 22px !important;

  background: #FF5E5B !important;

  color: #FFFFFF !important;

  font-size: 0.82rem !important;

  font-weight: 700 !important;

  text-decoration: none !important;

  border-radius: 9999px !important;

  transition: all 0.25s ease !important;

  white-space: nowrap !important;

  box-shadow: 0 4px 14px rgba(255, 94, 91, 0.3) !important;

}



.partners-collab-btn:hover {

  background: #E84C49 !important;

  transform: translateX(2px) !important;

}



/* ==========================================================================

   RESPONSIVE MEDIA QUERIES (VIRTUAL TOUR & PARTNERS)

   ========================================================================== */

@media (max-width: 900px) {

  .vt-suite-container {

    grid-template-columns: 1fr !important;

    gap: 20px !important;

  }



  .vt-theater-media {

    min-height: 260px !important;

    aspect-ratio: 16 / 9 !important;

  }



  .vt-suite-qr-card {

    padding: 22px 18px !important;

  }



  .partner-glass-card {

    width: 165px !important;

    height: 118px !important;

    padding: 12px 14px 10px !important;

  }



  .partner-card-media {

    height: 56px !important;

  }



  .partner-card-media img {

    max-width: 125px !important;

    max-height: 48px !important;

  }



  .partner-category-tag {

    font-size: 0.65rem !important;

    padding: 2px 8px !important;

  }



  .partners-collab-bar {

    flex-direction: column !important;

    text-align: center !important;

    border-radius: 20px !important;

    padding: 18px 16px !important;

  }



  .partners-collab-text {

    justify-content: center !important;

  }



  .partners-collab-btn {

    width: 100% !important;

    justify-content: center !important;

  }

}



@media (max-width: 600px) {

  .vt-suite-theater,

  .vt-suite-qr-card {

    border-radius: 20px !important;

  }



  .vt-play-orb-btn {

    width: 62px !important;

    height: 62px !important;

  }



  .vt-play-orb-btn svg {

    width: 24px !important;

    height: 24px !important;

  }



  .vt-orb-halo.halo-1 {

    width: 94px !important;

    height: 94px !important;

    top: -16px !important;

    left: -16px !important;

  }



  .vt-orb-halo.halo-2 {

    width: 78px !important;

    height: 78px !important;

    top: -8px !important;

    left: -8px !important;

  }



  .vt-badge-top-right {

    display: none !important;

  }



  .vt-qr-image {

    width: 105px !important;

    height: 105px !important;

  }



  .partners-marquee-container {

    mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%) !important;

    -webkit-mask-image: linear-gradient(to right, transparent 0%, black 24px, black calc(100% - 24px), transparent 100%) !important;

  }

}





/* About Us Four Pillars Alignment Fix */

.why-choose-section .container {

  max-width: 1440px !important;

  width: 100% !important;

  margin-left: auto !important;

  margin-right: auto !important;

  padding-left: clamp(16px, 3vw, 48px) !important;

  padding-right: clamp(16px, 3vw, 48px) !important;

}



.four-pillars-row {

  display: grid !important;

  grid-template-columns: repeat(4, 1fr) !important;

  align-items: stretch !important;

  width: 100% !important;

  max-width: 100% !important;

  margin: 0 auto !important;

  gap: 0 !important;

}



.circle-pillar-item {

  display: flex !important;

  flex-direction: column !important;

  align-items: center !important;

  text-align: center !important;

  padding: 0 clamp(8px, 1.2vw, 20px) !important;

  position: relative !important;

}



.circle-pillar-item:not(:last-child)::after {

  content: "" !important;

  position: absolute !important;

  right: 0 !important;

  top: 14px !important;

  bottom: 14px !important;

  width: 1px !important;

  background: rgba(14, 51, 92, 0.12) !important;

}



.circle-pillar-title {

  font-family: var(--font-sans) !important;

  font-size: 1.15rem !important;

  font-weight: 700 !important;

  color: var(--color-navy) !important;

  line-height: 1.32 !important;

  height: calc(1.32em * 2) !important;

  min-height: calc(1.32em * 2) !important;

  max-height: calc(1.32em * 2) !important;

  margin: 0 0 14px 0 !important;

  display: block !important;

  text-align: center !important;

}



.circle-pillar-desc {

  font-size: 0.92rem !important;

  color: var(--color-navy-muted) !important;

  line-height: 1.55 !important;

  height: calc(1.55em * 3) !important;

  min-height: calc(1.55em * 3) !important;

  max-height: calc(1.55em * 3) !important;

  margin: 0 auto !important;

  display: block !important;

  text-align: center !important;

  max-width: 240px !important;

}



/* Service Zig-Zag Points List & Floating Age Badge */

.service-category-tag {

  display: inline-block;

  font-size: 0.75rem;

  font-weight: 800;

  color: var(--color-coral);

  text-transform: uppercase;

  letter-spacing: 0.08em;

  margin-bottom: 6px;

}



.service-points-list {

  list-style: none;

  padding: 0;

  margin: 12px 0 20px;

  display: flex;

  flex-direction: column;

  gap: 8px;

}



.service-points-list li {

  display: flex;

  align-items: center;

  gap: 10px;

  font-size: 0.92rem;

  color: var(--color-navy);

  font-weight: 500;

  line-height: 1.35;

}



.service-points-list .service-check-icon {

  flex-shrink: 0;

  width: 18px;

  height: 18px;

}



/* Service Zig-Zag Media: 100% Uncropped Image Presentation */

.service-zigzag-media {

  position: relative !important;

  border-radius: 24px !important;

  overflow: hidden !important;

  width: 100% !important;

  height: auto !important;

  min-height: 0 !important;

  max-height: none !important;

  background: #FAF7F2 !important;

  box-shadow: 0 10px 28px rgba(14, 51, 92, 0.08) !important;

}



.service-zigzag-media img {

  width: 100% !important;

  height: auto !important;

  max-width: 100% !important;

  max-height: none !important;

  object-fit: unset !important;

  display: block !important;

  transition: transform 0.4s ease !important;

}



.service-zigzag-row:hover .service-zigzag-media img {

  transform: scale(1.03) !important;

}



/* Remove suitable age badge from all services */

.service-age-badge,

.service-zigzag-media .service-age-badge {

  display: none !important;

  visibility: hidden !important;

  opacity: 0 !important;

  pointer-events: none !important;

  height: 0 !important;

  width: 0 !important;

  overflow: hidden !important;

  margin: 0 !important;

  padding: 0 !important;

}



/* (Old partner marquee replaced above) */



/* --- SERVICES DUAL GRID BOTTOM ROW --- */

.services-dual-grid {

  display: grid !important;

  grid-template-columns: 1fr 1fr !important;

  gap: clamp(24px, 3.5vw, 40px) !important;

  margin-top: 10px !important;

  align-items: stretch !important;

}



.service-dual-item {

  display: grid !important;

  grid-template-columns: 160px 1fr !important;

  gap: 20px !important;

  align-items: center !important;

  background: transparent !important;

}



.service-dual-media {

  width: 160px !important;

  height: 160px !important;

  border-radius: 20px !important;

  overflow: hidden !important;

  flex-shrink: 0 !important;

  box-shadow: 0 8px 24px rgba(14, 51, 92, 0.08) !important;

  background-color: #f1ede8 !important;

}



.service-dual-media img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  display: block !important;

  transition: transform 0.4s ease !important;

}



.service-dual-item:hover .service-dual-media img {

  transform: scale(1.04) !important;

}



.service-dual-content {

  display: flex !important;

  flex-direction: column !important;

  align-items: flex-start !important;

  width: 100% !important;

}



.service-dual-header {

  display: flex !important;

  align-items: center !important;

  gap: 12px !important;

  margin-bottom: 8px !important;

}



.service-dual-header .service-icon-badge {

  width: 44px !important;

  height: 44px !important;

  min-width: 44px !important;

  border-radius: 50% !important;

  display: inline-flex !important;

  align-items: center !important;

  justify-content: center !important;

  flex-shrink: 0 !important;

}



.service-dual-title {

  font-family: var(--font-serif) !important;

  font-size: clamp(1.25rem, 1.8vw, 1.45rem) !important;

  font-weight: 700 !important;

  color: var(--color-navy) !important;

  line-height: 1.25 !important;

  margin: 0 !important;

}



.service-dual-desc {

  font-size: 0.92rem !important;

  line-height: 1.5 !important;

  color: var(--color-navy-muted) !important;

  margin: 0 0 16px 0 !important;

}



.service-dual-action-row {

  display: flex !important;

  align-items: center !important;

  gap: 14px !important;

  flex-wrap: wrap !important;

}



.service-dual-action-row .btn-pill {

  padding: 9px 20px !important;

  font-size: 0.88rem !important;

}



.service-dual-action-row .service-age-badge {

  position: static !important;

  display: inline-flex !important;

  flex-direction: column !important;

  align-items: center !important;

  justify-content: center !important;

  padding: 6px 14px !important;

  border-radius: 9999px !important;

  background: rgba(255, 255, 255, 0.95) !important;

  border: 1px solid rgba(255, 255, 255, 0.8) !important;

  box-shadow: 0 3px 10px rgba(14, 51, 92, 0.08) !important;

  line-height: 1.2 !important;

  width: auto !important;

}



.service-dual-action-row .service-age-badge .age-label {

  font-size: 0.65rem !important;

  color: #64748b !important;

  font-weight: 500 !important;

  display: block !important;

}



.service-dual-action-row .service-age-badge .age-val {

  font-size: 0.78rem !important;

  color: #142848 !important;

  font-weight: 700 !important;

  display: block !important;

  white-space: nowrap !important;

}



@media (max-width: 900px) {

  .services-dual-grid {

    grid-template-columns: 1fr !important;

    gap: 28px !important;

  }

}

@media (max-width: 600px) {

  .service-dual-item {

    grid-template-columns: 1fr !important;

    gap: 16px !important;

  }

  .service-dual-media {

    width: 100% !important;

    height: 200px !important;

  }

}



/* ==========================================================================

   2-Slide Hero Carousel

   ========================================================================== */

.hero-slider-portal {

  position: relative !important;

  width: 100% !important;

  height: 100% !important;

  overflow: hidden !important;

}

.hero-slider-portal .hero-slide {

  position: absolute !important;

  inset: 0 !important;

  width: 100% !important;

  height: 100% !important;

  opacity: 0 !important;

  visibility: hidden !important;

  transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1) !important;

  transform: scale(1.03) !important;

  z-index: 1 !important;

}

.hero-slider-portal .hero-slide.active {

  opacity: 1 !important;

  visibility: visible !important;

  transform: scale(1) !important;

  z-index: 2 !important;

}

.hero-slider-portal .hero-slide img {

  width: 100% !important;

  height: 100% !important;

  object-fit: cover !important;

  object-position: center 35% !important;

  display: block !important;

}

.hero-slider-dots {

  position: absolute !important;

  bottom: 22px !important;

  right: 28px !important;

  display: flex !important;

  align-items: center !important;

  gap: 8px !important;

  z-index: 10 !important;

  background: rgba(255, 255, 255, 0.82) !important;

  backdrop-filter: blur(10px) !important;

  -webkit-backdrop-filter: blur(10px) !important;

  padding: 6px 14px !important;

  border-radius: 9999px !important;

  border: 1px solid rgba(255, 255, 255, 0.9) !important;

  box-shadow: 0 4px 18px rgba(16, 46, 64, 0.14) !important;

}

.hero-dot {

  width: 10px !important;

  height: 10px !important;

  border-radius: 50% !important;

  background: #CBD5E1 !important;

  border: none !important;

  cursor: pointer !important;

  padding: 0 !important;

  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;

}

.hero-dot.active {

  width: 26px !important;

  border-radius: 9999px !important;

  background: var(--color-coral, #FF6B6B) !important;

}



/* ==========================================================================

   Redesigned Associate Partner Cards (No Categories, Modern Glass Capsules)

   ========================================================================== */

.partner-glass-card {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  background: #FFFFFF !important;

  border: 1.5px solid #F1F5F9 !important;

  border-radius: 20px !important;

  padding: 16px 28px !important;

  min-width: 180px !important;

  height: 80px !important;

  box-shadow: 0 4px 16px rgba(16, 46, 64, 0.04) !important;

  transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) !important;

  flex-shrink: 0 !important;

}

.partner-glass-card:hover {

  transform: translateY(-4px) scale(1.02) !important;

  border-color: rgba(255, 107, 107, 0.4) !important;

  box-shadow: 0 12px 28px rgba(255, 107, 107, 0.12) !important;

}

.partner-card-media {

  display: flex !important;

  align-items: center !important;

  justify-content: center !important;

  width: 100% !important;

  height: 100% !important;

}

.partner-card-media img {

  max-height: 52px !important;

  max-width: 130px !important;

  width: auto !important;

  height: auto !important;

  object-fit: contain !important;

  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.03)) !important;

}

.partner-category-tag {

  display: none !important;

}



/* ==========================================================================

   About Us 5 Pillars Row

   ========================================================================== */

.four-pillars-row,

.five-pillars-row {

  display: grid !important;

  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;

  gap: 20px !important;

}

@media (min-width: 992px) {

  .four-pillars-row,

  .five-pillars-row {

    grid-template-columns: repeat(5, 1fr) !important;

  }

}

.badge-purple {

  background: rgba(140, 84, 255, 0.12) !important;

  color: #8C54FF !important;

}




/* Header Brand Wrap & Age Highlight Badge */
.header-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
}

.header-age-highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #FFF9E6 0%, #FEF08A 100%);
  color: #142848;
  border: 1.5px solid #FACC15;
  font-family: var(--font-sans);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 9999px;
  box-shadow: 0 2px 8px rgba(250, 204, 21, 0.28);
  white-space: nowrap;
  line-height: 1.2;
}

.header-age-highlight .header-sparkle-icon {
  color: #D97706;
  flex-shrink: 0;
}

.drawer-brand-wrap {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.drawer-age-highlight {
  font-size: 0.60rem;
  padding: 4px 8px;
}

/* Remove contact capsule completely */
.contact-badges-capsule {
  display: none !important;
}

@media (max-width: 900px) {
  .header-brand-wrap {
    gap: 8px;
  }
  .header-age-highlight {
    font-size: 0.62rem;
    padding: 4px 8px;
    letter-spacing: 0.02em;
  }
}

@media (max-width: 480px) {
  .header-brand-wrap {
    gap: 6px;
  }
  .header-age-highlight {
    font-size: 0.54rem;
    padding: 3px 6px;
    letter-spacing: 0.01em;
  }
  .header-age-highlight .header-sparkle-icon {
    width: 10px;
    height: 10px;
  }
}

/* Temporarily hide Contact page links & related buttons */
a[href*="/contact-us"],
a[href*="/contact"],
.header-desktop-cta[href*="contact"],
.btn-contact-us,
.drawer-nav-link[href*="contact"] {
  display: none !important;
}


/* Section 4: Why Choose Cuddle Cuts (Centered Header & Subtitle) */
.why-choose-header {
  text-align: center !important;
  margin: 0 auto 38px !important;
  max-width: 800px !important;
}

.why-choose-header .section-eyebrow {
  display: block !important;
  text-align: center !important;
  margin: 0 auto 12px !important;
}

.why-choose-header .section-headline {
  display: block !important;
  text-align: center !important;
  margin: 0 auto 14px !important;
}

.why-choose-header .section-subtitle,
.why-choose-section .section-subtitle {
  display: block !important;
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-width: 640px !important;
  font-size: 1.05rem !important;
  line-height: 1.6 !important;
  color: var(--color-navy-muted, #5A6E7C) !important;
}


/* Header CTA Removal */
.header-actions-group,
.btn-header-call,
.btn-header-wa-coral,
.btn-header-wa-green {
  display: none !important;
}


/* Hide Mobile Quick Call Button */
.btn-mobile-quick-call {
  display: none !important;
}


/* ==========================================================================
   Theme 3.0.5 Improvements:
   1. Flush Hero Bottom Wave Transitions (Eliminate empty cream gap on Home, About Us & Branches)
   2. Reduced Vertical Gaps between Sections on Home Page
   3. Side-by-side Location Filter Tabs on Branches Page
   ========================================================================== */

/* 1. Flush Hero Wave Transition */
.elementor-element-home_sec_hero,
.elementor-element-about_hero_sec,
.elementor-element-branches_hero_sec,
.elementor-section:has(.exact-hero),
.elementor-section:has(.hero-bottom-wave-wrap) {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.elementor-element-home_sec_hero > .elementor-container,
.elementor-element-about_hero_sec > .elementor-container,
.elementor-element-branches_hero_sec > .elementor-container {
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

.elementor-element-home_sec_services,
.elementor-element-branches_cards_sec,
.elementor-element-about_story_sec,
.elementor-section:has(.services-arch-section),
.elementor-section:has(.branches-section-white) {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

.elementor-element-home_sec_services > .elementor-container,
.elementor-element-branches_cards_sec > .elementor-container,
.elementor-element-about_story_sec > .elementor-container {
  padding-top: 0 !important;
  margin-top: 0 !important;
}

/* Hide empty stats section on About page that created extra vertical void */
.elementor-element-about_stats_sec {
  display: none !important;
  padding: 0 !important;
  margin: 0 !important;
  height: 0 !important;
}

/* Seamless wave positioning */
.exact-hero {
  position: relative !important;
}

.exact-hero .hero-bottom-wave-wrap {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: -1px !important;
  width: 100% !important;
  line-height: 0 !important;
  z-index: 3 !important;
}

@media (max-width: 767px) {
  .exact-hero {
    padding-bottom: 35px !important;
  }
  .exact-hero .hero-bottom-wave-wrap {
    bottom: 0 !important;
  }
}

.services-arch-section {
  background-color: #FFFFFF !important;
  margin-top: 0 !important;
}

.branches-section-white {
  background-color: #FFFFFF !important;
  margin-top: 0 !important;
}

.about-vm-wrapper {
  background-color: #FFFFFF !important;
  margin-top: 0 !important;
}


/* 2. Side-by-side Location Filter Tabs on Branches Page */
.branch-map-pills-row {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  gap: 10px !important;
  margin-bottom: 16px !important;
  width: 100% !important;
}

.branch-map-pills-row .map-tab-btn {
  white-space: nowrap !important;
  flex: 1 1 0% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  padding: 9px 12px !important;
  font-size: 0.82rem !important;
  box-sizing: border-box !important;
}

.branch-map-pills-row .map-tab-btn svg {
  flex-shrink: 0 !important;
  margin-right: 5px !important;
  stroke: currentColor !important;
}

@media (max-width: 420px) {
  .branch-map-pills-row {
    gap: 6px !important;
  }
  .branch-map-pills-row .map-tab-btn {
    padding: 8px 6px !important;
    font-size: 0.74rem !important;
    gap: 3px !important;
  }
  .branch-map-pills-row .map-tab-btn svg {
    width: 12px !important;
    height: 12px !important;
    margin-right: 3px !important;
  }
}


/* 3. Reduced Vertical Gaps between Sections on Home Page */
.home .elementor-top-section {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.home .services-arch-section {
  padding: 28px 0 38px !important;
}

.home .more-than-section {
  padding: 38px 0 !important;
}

.home .virtual-tour-section {
  padding: 38px 0 !important;
}

.home .easy-steps-section {
  padding: 34px 0 !important;
}

.home .home-branches-preview {
  padding: 34px 0 !important;
}

.home .gmb-reviews-section {
  padding: 30px 0 24px !important;
}

.home .associate-partners-section {
  padding: 36px 0 30px !important;
}

.home .pre-footer-section {
  margin-top: 10px !important;
  margin-bottom: 0 !important;
}

@media (max-width: 767px) {
  .home .services-arch-section {
    padding: 18px 0 26px !important;
  }
  .home .more-than-section,
  .home .virtual-tour-section,
  .home .easy-steps-section,
  .home .home-branches-preview,
  .home .gmb-reviews-section,
  .home .associate-partners-section {
    padding: 22px 0 !important;
  }
  .home .pre-footer-section {
    margin-top: 8px !important;
    margin-bottom: 0 !important;
  }
}