/* ===========================================================
 * GLOBAL SITE-WIDE PASTEL OVERRIDES
 * Applied to ALL pages (body.pp-active default).
 * Catches every dark-pattern variant found in the legacy codebase
 * and remaps to the pastel design system.
 * Last updated: 2026-05-13
 * =========================================================== */

/* === Remap legacy CSS variables on body.pp-active scope === */
body.pp-active {
  --color-black: var(--pp-cream);
  --color-dark-gray: var(--pp-cream-2);
  --color-gray: var(--pp-cream-3);
  --color-white: var(--pp-charcoal);
  --color-text-main: var(--pp-charcoal);
  --color-text-light: var(--pp-muted);
  --color-gold: var(--pp-blush-deep);
  --color-gold-light: var(--pp-blush-accent);
  --color-gold-dark: var(--pp-gold-deep);
  --color-gold-rose: var(--pp-blush-accent);
  --color-blush: var(--pp-blush);
  --color-cream: var(--pp-cream);
}

body.pp-active {
  background: var(--pp-cream) !important;
  color: var(--pp-charcoal) !important;
}

/* === Dark hex backgrounds → cream ===
 * Brute-force every dark hex variant found in the codebase. */
body.pp-active [style*="background: #000"],
body.pp-active [style*="background:#000"],
body.pp-active [style*="background: #050505"],
body.pp-active [style*="background:#050505"],
body.pp-active [style*="background: #080808"],
body.pp-active [style*="background:#080808"],
body.pp-active [style*="background: #080606"],
body.pp-active [style*="background:#080606"],
body.pp-active [style*="background: #0a0a0a"],
body.pp-active [style*="background:#0a0a0a"],
body.pp-active [style*="background: #0b0b0b"],
body.pp-active [style*="background:#0b0b0b"],
body.pp-active [style*="background: #0c0907"],
body.pp-active [style*="background:#0c0907"],
body.pp-active [style*="background: #0C0907"],
body.pp-active [style*="background:#0C0907"],
body.pp-active [style*="background: #0d0d0d"],
body.pp-active [style*="background:#0d0d0d"],
body.pp-active [style*="background: #0e0b08"],
body.pp-active [style*="background:#0e0b08"],
body.pp-active [style*="background: #0e0e0e"],
body.pp-active [style*="background:#0e0e0e"],
body.pp-active [style*="background: #0f0f0f"],
body.pp-active [style*="background:#0f0f0f"],
body.pp-active [style*="background: #111"],
body.pp-active [style*="background:#111"],
body.pp-active [style*="background: #121"],
body.pp-active [style*="background:#121"],
body.pp-active [style*="background: #141414"],
body.pp-active [style*="background:#141414"],
body.pp-active [style*="background: #151515"],
body.pp-active [style*="background:#151515"],
body.pp-active [style*="background: #181818"],
body.pp-active [style*="background:#181818"],
body.pp-active [style*="background: #1a1410"],
body.pp-active [style*="background:#1a1410"],
body.pp-active [style*="background: #1a1a1a"],
body.pp-active [style*="background:#1a1a1a"],
body.pp-active [style*="background: #191310"],
body.pp-active [style*="background:#191310"],
body.pp-active [style*="background: #241D17"],
body.pp-active [style*="background:#241D17"],
body.pp-active [style*="background: #222"],
body.pp-active [style*="background:#222"],
body.pp-active [style*="background: black"],
body.pp-active [style*="background:black"],
body.pp-active [style*="background-color: #000"],
body.pp-active [style*="background-color:#000"],
body.pp-active [style*="background-color: #050505"],
body.pp-active [style*="background-color:#050505"],
body.pp-active [style*="background-color: #111"],
body.pp-active [style*="background-color:#111"],
body.pp-active [style*="background-color: black"],
body.pp-active [style*="background-color:black"] {
  background: var(--pp-cream) !important;
  background-image: none !important;
  background-color: var(--pp-cream) !important;
  color: var(--pp-charcoal) !important;
}

/* CSS variable-based dark backgrounds */
body.pp-active [style*="background: var(--color-black)"],
body.pp-active [style*="background:var(--color-black)"],
body.pp-active [style*="background-color: var(--color-black)"],
body.pp-active [style*="background-color:var(--color-black)"] {
  background: var(--pp-cream) !important;
  background-image: none !important;
  color: var(--pp-charcoal) !important;
}

/* Slightly-lighter card backgrounds → paper-white */
body.pp-active [style*="background: #141414"],
body.pp-active [style*="background:#141414"],
body.pp-active [style*="background: #1a1a1a"],
body.pp-active [style*="background:#1a1a1a"],
body.pp-active [style*="background: #181818"],
body.pp-active [style*="background:#181818"],
body.pp-active [style*="background: #222"],
body.pp-active [style*="background:#222"] {
  background: var(--pp-paper) !important;
  background-image: none !important;
  color: var(--pp-charcoal) !important;
  border: 1px solid var(--pp-divider) !important;
  border-radius: var(--pp-radius) !important;
}

/* rgba dark backgrounds */
body.pp-active [style*="background: rgba(0,0,0"],
body.pp-active [style*="background: rgba(0, 0, 0"],
body.pp-active [style*="background:rgba(0,0,0"],
body.pp-active [style*="background: rgba(5,5,5"],
body.pp-active [style*="background:rgba(5,5,5"],
body.pp-active [style*="background: rgba(10,10,10"],
body.pp-active [style*="background:rgba(10,10,10"],
body.pp-active [style*="background: rgba(12,9,7"],
body.pp-active [style*="background:rgba(12,9,7"],
body.pp-active [style*="background: rgba(15,15,15"],
body.pp-active [style*="background: rgba(20,20,20"],
body.pp-active [style*="background:rgba(20,20,20"] {
  background: var(--pp-paper) !important;
  color: var(--pp-charcoal-2) !important;
  border-color: var(--pp-divider) !important;
}

/* === Dark linear-gradient backgrounds → TRANSLUCENT pearl wash ===
 * IMPORTANT: use rgba (semi-transparent) so any underlying video/image stays visible. */
body.pp-active [style*="linear-gradient(135deg, #000"],
body.pp-active [style*="linear-gradient(135deg,#000"],
body.pp-active [style*="linear-gradient(135deg, #0a"],
body.pp-active [style*="linear-gradient(135deg,#0a"],
body.pp-active [style*="linear-gradient(135deg, #0f"],
body.pp-active [style*="linear-gradient(135deg,#0f"],
body.pp-active [style*="linear-gradient(135deg, #1a"],
body.pp-active [style*="linear-gradient(135deg,#1a"],
body.pp-active [style*="linear-gradient(135deg, #12"],
body.pp-active [style*="linear-gradient(160deg, #12"],
body.pp-active [style*="linear-gradient(160deg, #14"],
body.pp-active [style*="linear-gradient(160deg, #0e"],
body.pp-active [style*="linear-gradient(180deg, #0a"],
body.pp-active [style*="linear-gradient(180deg, #0f"],
body.pp-active [style*="linear-gradient(to bottom, #0"],
body.pp-active [style*="linear-gradient(to top, #0"],
body.pp-active [style*="linear-gradient(to right, #0"],
body.pp-active [style*="linear-gradient(to bottom, rgba(10,10,10"],
body.pp-active [style*="linear-gradient(to top, rgba(10,10,10"],
body.pp-active [style*="linear-gradient(to top, rgba(0,0,0"],
body.pp-active [style*="rgba(0,0,0,0.8)"],
body.pp-active [style*="rgba(0, 0, 0, 0.8)"],
body.pp-active [style*="rgba(0,0,0,0.9)"],
body.pp-active [style*="rgba(0, 0, 0, 0.9)"],
body.pp-active [style*=", #0a0a0a"],
body.pp-active [style*=", #0f0f0f"],
body.pp-active [style*=", #0a0a1a"],
body.pp-active [style*=", #0C0907"],
body.pp-active [style*=", #0c0907"],
body.pp-active [style*=", #0e0b08"],
body.pp-active [style*=", #0e0e0e"] {
  background: linear-gradient(135deg, rgba(245, 240, 239, 0.30) 0%, rgba(232, 217, 220, 0.45) 100%) !important;
  background-image: linear-gradient(135deg, rgba(245, 240, 239, 0.30) 0%, rgba(232, 217, 220, 0.45) 100%) !important;
  color: var(--pp-charcoal) !important;
}

/* Radial gradients with gold-on-dark → soften to pastel */
body.pp-active [style*="radial-gradient(ellipse at center, rgba(212,175,55"],
body.pp-active [style*="radial-gradient(ellipse at center, rgba(212, 175, 55"] {
  background: radial-gradient(ellipse at center, rgba(232, 183, 168, 0.18) 0%, transparent 70%) !important;
  background-image: radial-gradient(ellipse at center, rgba(232, 183, 168, 0.18) 0%, transparent 70%) !important;
}

/* === Text colour overrides — inline whites/grays === */
body.pp-active [style*="color: white"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color:white"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color: #fff"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color:#fff"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color: #FFFFFF"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color: #ffffff"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color: rgba(255, 255, 255"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color: rgba(255,255,255"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]),
body.pp-active [style*="color:rgba(255,255,255"]:not(.pp-btn-primary):not(.pp-btn-wa):not(.btn-gold):not([class*="floating-book-main"]):not([class*="fbc-wa"]):not([class*="btn-wa"]) {
  color: var(--pp-charcoal) !important;
}

body.pp-active [style*="color: #888"],
body.pp-active [style*="color:#888"],
body.pp-active [style*="color: #999"],
body.pp-active [style*="color:#999"],
body.pp-active [style*="color: #aaa"],
body.pp-active [style*="color:#aaa"],
body.pp-active [style*="color: #bbb"],
body.pp-active [style*="color:#bbb"] {
  color: var(--pp-muted) !important;
}
body.pp-active [style*="color: #ccc"],
body.pp-active [style*="color:#ccc"],
body.pp-active [style*="color: #d1d1d1"],
body.pp-active [style*="color:#d1d1d1"],
body.pp-active [style*="color: #ddd"],
body.pp-active [style*="color:#ddd"],
body.pp-active [style*="color: #eee"],
body.pp-active [style*="color:#eee"] {
  color: var(--pp-charcoal-2) !important;
}

/* Gold accents → blush */
body.pp-active [style*="color: var(--color-gold)"],
body.pp-active [style*="color:var(--color-gold)"],
body.pp-active [style*="color: #C8963A"],
body.pp-active [style*="color: #c8963a"],
body.pp-active [style*="color: #ECC870"] {
  color: var(--pp-blush-deep) !important;
}

/* Borders */
body.pp-active [style*="border: 1px solid rgba(255,255,255"],
body.pp-active [style*="border:1px solid rgba(255,255,255"],
body.pp-active [style*="border-top: 1px solid rgba(255,255,255"],
body.pp-active [style*="border-bottom: 1px solid rgba(255,255,255"],
body.pp-active [style*="border: 1px solid rgba(212,175,55"],
body.pp-active [style*="border:1px solid rgba(212,175,55"] {
  border-color: var(--pp-divider) !important;
}

/* === Hero with image background — VISIBLE but harmonised with pearl palette ===
 * Strategy: keep hero images mostly visible (opacity 0.7-0.85), lift their
 * brightness slightly, and apply a pearl-tinted gradient overlay via the
 * parent hero section so text remains readable on top. */
body.pp-active [style*="filter: brightness(0.3)"],
body.pp-active [style*="filter:brightness(0.3)"],
body.pp-active [style*="filter: brightness(0.25)"],
body.pp-active [style*="filter:brightness(0.25)"],
body.pp-active [style*="filter: brightness(0.22)"],
body.pp-active [style*="filter: brightness(.22)"],
body.pp-active [style*="filter: brightness(.3)"],
body.pp-active [style*="filter:brightness(.3)"],
body.pp-active [style*="filter: brightness(0.4)"],
body.pp-active [style*="filter:brightness(0.4)"],
body.pp-active [style*="filter: brightness(.4)"],
body.pp-active [style*="filter:brightness(.4)"] {
  filter: brightness(1.0) saturate(0.95) !important;
  opacity: 0.85 !important;
}
/* Hero image backgrounds — VISIBLE, slightly desaturated for palette harmony */
body.pp-active .hero div[style*="background: url"],
body.pp-active section.hero div[style*="background: url"],
body.pp-active section[class*="hero"] div[style*="background: url"] {
  opacity: 0.75 !important;
  filter: brightness(0.98) saturate(0.85) !important;
}
/* Pearl-tinted gradient overlay on dark hero overlays — ensures text readability
 * over images while keeping the photo visible underneath */
body.pp-active .hero div[style*="rgba(5,5,5"],
body.pp-active .hero div[style*="rgba(12,9,7"],
body.pp-active section.hero div[style*="rgba(5,5,5"] {
  background: linear-gradient(135deg, rgba(245, 240, 239, 0.45) 0%, rgba(232, 217, 220, 0.35) 100%) !important;
}

/* Videos (autoplay hero videos) — keep clearly visible with subtle harmony */
body.pp-active video,
body.pp-active video[autoplay] {
  opacity: 0.9 !important;
  mix-blend-mode: normal !important;
  filter: brightness(1.0) saturate(0.95) !important;
}

/* Regular <img> tags should always be at full visibility — protect them */
body.pp-active img,
body.pp-active picture img {
  opacity: 1 !important;
  filter: none !important;
}

/* Hero text-readability shield — light pearl wash at the BOTTOM only (where text usually sits).
 * Top of hero keeps video/image clearly visible. */
body.pp-active section.hero::before,
body.pp-active section[class*="hero"]::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(245, 240, 239, 0) 0%,
    rgba(245, 240, 239, 0) 35%,
    rgba(245, 240, 239, 0.25) 65%,
    rgba(245, 240, 239, 0.55) 100%);
  pointer-events: none;
  z-index: 1;
}
body.pp-active section.hero,
body.pp-active section[class*="hero"] {
  position: relative;
}
/* Promote hero content above the ::before pearl-wash overlay (z-index 1).
 * IMPORTANT: do NOT force position:relative on absolutely-positioned bg/overlay
 * divs — that collapses them to 0×0 and lets the raw bg image bleed through,
 * killing text contrast. Only override position for children that aren't
 * already absolute. */
body.pp-active section.hero > *:not([style*="position: absolute"]):not([style*="position:absolute"]),
body.pp-active section[class*="hero"] > *:not([style*="position: absolute"]):not([style*="position:absolute"]) {
  position: relative;
  z-index: 2;
}
body.pp-active section.hero > [style*="position: absolute"],
body.pp-active section.hero > [style*="position:absolute"],
body.pp-active section[class*="hero"] > [style*="position: absolute"],
body.pp-active section[class*="hero"] > [style*="position:absolute"] {
  /* Keep absolute, just ensure correct stacking against the ::before wash. */
  z-index: 1;
}
body.pp-active section.hero > [style*="z-index: 2"],
body.pp-active section[class*="hero"] > [style*="z-index: 2"] {
  /* Honour explicit z-index: 2 from inline (e.g. .container which holds content) */
  z-index: 2 !important;
}

/* Text-on-image readability — add subtle text-shadow to hero headings so
 * they stay legible when the image behind is showing through */
body.pp-active section.hero h1,
body.pp-active section.hero h2,
body.pp-active section[class*="hero"] h1,
body.pp-active section[class*="hero"] h2 {
  text-shadow: 0 1px 3px rgba(245, 240, 239, 0.65), 0 0 24px rgba(245, 240, 239, 0.4);
}
body.pp-active section.hero p,
body.pp-active section[class*="hero"] p {
  text-shadow: 0 1px 2px rgba(245, 240, 239, 0.7);
}

/* === Class-based dark patterns from style.min.css === */

.pp-active .hero h1,
body.pp-active .hero h2,
body.pp-active .hero h3 {
  color: var(--pp-charcoal) !important;
}
body.pp-active .hero p,
body.pp-active .hero-sub,
body.pp-active .hero .lead,
body.pp-active .hero .subhead {
  color: var(--pp-muted) !important;
}
body.pp-active .hero h1 span,
body.pp-active .hero h1 em {
  color: var(--pp-blush-deep) !important;
}

/* The .card class with rgba(20,20,20,0.7) bg */
body.pp-active .card {
  background: var(--pp-paper) !important;
  background-image: none !important;
  border: 1px solid var(--pp-divider) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow-sm) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: all 0.35s var(--pp-ease) !important;
}
body.pp-active .card:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--pp-shadow) !important;
  border-color: var(--pp-blush-2) !important;
}
body.pp-active .card h3,
body.pp-active .card h4 {
  color: var(--pp-charcoal) !important;
}
body.pp-active .card p {
  color: var(--pp-muted) !important;
}
body.pp-active .card[style*="border-top"] {
  border-top: 2px solid var(--pp-blush-accent) !important;
}

/* Sections + heros */
body.pp-active .section,
body.pp-active .hero {
  background: transparent !important;
  color: var(--pp-charcoal) !important;
}
body.pp-active .container {
  background: transparent !important;
}

/* Stylist cards */
body.pp-active .stylist-name { color: var(--pp-charcoal) !important; }
body.pp-active .stylist-role,
body.pp-active .stylist-bio { color: var(--pp-muted) !important; }

/* Stats */
body.pp-active .stat-number,
body.pp-active .stat-value { color: var(--pp-blush-deep) !important; }
body.pp-active .stat-label { color: var(--pp-muted) !important; }

/* Mobile menu button */
body.pp-active .mobile-menu-btn { color: var(--pp-charcoal) !important; }
body.pp-active .mobile-menu-btn svg { stroke: var(--pp-charcoal) !important; }

/* Nav links */
body.pp-active .nav-links a { color: var(--pp-charcoal-2) !important; }
body.pp-active .nav-links a:hover { color: var(--pp-blush-deep) !important; }

/* Service overlay — keeps dark (sits on image with gradient) */
body.pp-active .service-overlay { color: white !important; }

/* Footer link hovers */
body.pp-active .footer-links a:hover { color: var(--pp-blush-deep) !important; }

/* === Buttons === */
body.pp-active .btn-gold {
  background: linear-gradient(135deg, var(--pp-blush-accent), var(--pp-blush-deep)) !important;
  color: white !important;
  border-radius: var(--pp-radius-pill) !important;
  box-shadow: 0 6px 20px rgba(197, 143, 126, 0.32) !important;
  transition: all 0.3s var(--pp-ease) !important;
  border: none !important;
}
body.pp-active .btn-gold:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(197, 143, 126, 0.4) !important;
}
body.pp-active .btn-outline {
  background: transparent !important;
  color: var(--pp-charcoal) !important;
  border: 1px solid var(--pp-divider-2) !important;
  border-radius: var(--pp-radius-pill) !important;
}
body.pp-active .btn-outline:hover {
  background: var(--pp-paper) !important;
  border-color: var(--pp-charcoal) !important;
}
body.pp-active .btn {
  border-radius: var(--pp-radius-pill) !important;
  letter-spacing: 0.5px !important;
}

/* === Inputs === */
body.pp-active input[type="text"],
body.pp-active input[type="email"],
body.pp-active input[type="tel"],
body.pp-active input[type="number"],
body.pp-active input[type="search"],
body.pp-active input[type="date"],
body.pp-active textarea,
body.pp-active select {
  background: var(--pp-paper) !important;
  color: var(--pp-charcoal) !important;
  border: 1px solid var(--pp-divider-2) !important;
  border-radius: var(--pp-radius-sm) !important;
}
body.pp-active input::placeholder,
body.pp-active textarea::placeholder { color: var(--pp-soft) !important; }

/* Links global */
body.pp-active a { color: var(--pp-blush-deep); }
body.pp-active a:hover { color: var(--pp-gold-deep); }

/* Scroll progress */
body.pp-active .scroll-progress {
  background: linear-gradient(90deg, var(--pp-blush-accent), var(--pp-gold)) !important;
}

/* Video backgrounds — soften */
body.pp-active video[autoplay] {
  opacity: 0.55;
  mix-blend-mode: multiply;
  filter: saturate(0.7) brightness(1.05);
}

/* === Sticky bottom bars === */
body.pp-active #home-sticky-cta,
body.pp-active #sticky-mobile-cta,
body.pp-active .sticky-mobile-cta,
body.pp-active .floating-book-btn,
body.pp-active [id*="sticky-mobile"],
body.pp-active [id*="sticky-cta"],
body.pp-active [class*="sticky"][class*="cta"] {
  background: var(--pp-paper) !important;
  background-image: none !important;
  border-top: 1px solid var(--pp-divider) !important;
  box-shadow: 0 -8px 24px rgba(42, 37, 32, 0.08) !important;
}
body.pp-active #home-sticky-cta *,
body.pp-active #sticky-mobile-cta *,
body.pp-active .sticky-mobile-cta *,
body.pp-active .floating-book-btn * { color: var(--pp-charcoal) !important; }

body.pp-active #home-sticky-cta a.btn-gold,
body.pp-active #home-sticky-cta a[class*="btn-gold"],
body.pp-active #sticky-mobile-cta a.btn-gold,
body.pp-active .sticky-mobile-cta a.btn-gold {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border-radius: var(--pp-radius-pill) !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
}
body.pp-active #home-sticky-cta a.btn-gold *,
body.pp-active #home-sticky-cta a[class*="btn-gold"] *,
body.pp-active #sticky-mobile-cta a.btn-gold * { color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; }

body.pp-active #home-sticky-cta a[href*="wa.me"],
body.pp-active #sticky-mobile-cta a[href*="wa.me"] {
  background: #25D366 !important;
  border-color: #25D366 !important;
  color: white !important;
  border-radius: var(--pp-radius-pill) !important;
}
body.pp-active #home-sticky-cta a[href*="wa.me"] *,
body.pp-active #sticky-mobile-cta a[href*="wa.me"] * { color: white !important; }

/* === Lead/Exit/Quiz popups — heavy dim backdrop so content + floating
   CTAs don't bleed through, plus high z-index so popup sits above
   sticky CTAs / WhatsApp float / cursor ring. === */
body.pp-active [class*="lead-capture"][class*="overlay"],
body.pp-active [class*="exit-intent"][class*="overlay"],
body.pp-active [class*="quiz-overlay"],
body.pp-active .quiz-overlay,
body.pp-active [id*="lead-popup-overlay"],
body.pp-active #exit-intent-popup,
body.pp-active #ylg-cm,
body.pp-active .ylg-cm {
  background: rgba(45, 31, 38, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 100000 !important;
}
body.pp-active .ylg-cm-backdrop {
  background: rgba(45, 31, 38, 0.92) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* Hide floating / sticky CTAs whenever any popup is open. Uses :has()
   (supported in all modern browsers since ~2023). The floating book
   button + WhatsApp float + sticky CTA bars should NOT show through
   a modal — that's what makes the layout look "messed up". */
body.pp-active:has(.quiz-overlay.active) .floating-book-container,
body.pp-active:has(.quiz-overlay.active) #floating-book-btn,
body.pp-active:has(.quiz-overlay.active) .whatsapp-float,
body.pp-active:has(.quiz-overlay.active) #home-sticky-cta,
body.pp-active:has(.quiz-overlay.active) #sticky-mobile-cta,
body.pp-active:has(#ylg-cm:not([hidden])) .floating-book-container,
body.pp-active:has(#ylg-cm:not([hidden])) #floating-book-btn,
body.pp-active:has(#ylg-cm:not([hidden])) .whatsapp-float,
body.pp-active:has(#ylg-cm:not([hidden])) #home-sticky-cta,
body.pp-active:has(#ylg-cm:not([hidden])) #sticky-mobile-cta,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) .floating-book-container,
body.pp-active:has(#exit-intent-popup[style*="display:flex"]) .floating-book-container,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) #floating-book-btn,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) .whatsapp-float,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) #home-sticky-cta,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) #sticky-mobile-cta {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide scroll-progress + custom cursor + ring when a popup is open
   so they don't sit over the modal at top z. */
body.pp-active:has(.quiz-overlay.active) .scroll-progress,
body.pp-active:has(.quiz-overlay.active) .custom-cursor,
body.pp-active:has(.quiz-overlay.active) .cursor-ring,
body.pp-active:has(#ylg-cm:not([hidden])) .scroll-progress,
body.pp-active:has(#ylg-cm:not([hidden])) .custom-cursor,
body.pp-active:has(#ylg-cm:not([hidden])) .cursor-ring,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) .scroll-progress,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) .custom-cursor,
body.pp-active:has(#exit-intent-popup[style*="display: flex"]) .cursor-ring {
  display: none !important;
}

/* When a popup is open, also lock body scroll so the page behind
   doesn't move under the modal. */
body.pp-active:has(.quiz-overlay.active),
body.pp-active:has(#ylg-cm:not([hidden])),
body.pp-active:has(#exit-intent-popup[style*="display: flex"]),
body.pp-active:has(#exit-intent-popup[style*="display:flex"]) {
  overflow: hidden !important;
}
body.pp-active [class*="lead-capture"] [class*="content"],
body.pp-active [class*="lead-capture"] .modal,
body.pp-active [class*="exit-intent"] [class*="content"],
body.pp-active [class*="exit-intent"] .modal {
  background: var(--pp-paper) !important;
  color: var(--pp-charcoal) !important;
  border-radius: var(--pp-radius-lg) !important;
}
body.pp-active .fomo-popup,
body.pp-active [class*="fomo"] {
  background: var(--pp-paper) !important;
  color: var(--pp-charcoal) !important;
  border: 1px solid var(--pp-divider) !important;
  border-radius: var(--pp-radius) !important;
  box-shadow: var(--pp-shadow) !important;
}

/* === Menu/PDF viewer (menu page) === */
body.pp-active #menu-viewer {
  background: var(--pp-cream) !important;
}
body.pp-active .pdf-page-wrapper {
  background: var(--pp-paper) !important;
  border: 1px solid var(--pp-divider) !important;
}
body.pp-active #pdf-canvas-container {
  background: transparent !important;
}
body.pp-active div[id$="-viewer"],
body.pp-active div[id$="-section"],
body.pp-active div[id$="-band"] {
  background: var(--pp-cream);
}

/* === Marquee (footer credentials strip) === */
body.pp-active .marquee-section {
  background: var(--pp-cream-2) !important;
  border-top: 1px solid var(--pp-divider) !important;
  border-bottom: 1px solid var(--pp-divider) !important;
}
body.pp-active .marquee-item { color: var(--pp-charcoal-2) !important; }
body.pp-active .marquee-dot { background: var(--pp-blush-accent) !important; }

/* === Footer === */
body.pp-active footer {
  background: var(--pp-cream-2) !important;
  color: var(--pp-charcoal) !important;
  border-top: 1px solid var(--pp-divider) !important;
}
body.pp-active footer * { color: inherit !important; }
body.pp-active footer p { color: var(--pp-muted) !important; }
body.pp-active footer a { color: var(--pp-blush-deep) !important; }
body.pp-active footer a:hover { color: var(--pp-gold-deep) !important; }
body.pp-active footer .footer-header p { color: var(--pp-cream-3) !important; }

/* === Heading overflow guard — was clipping long titles === */
body.pp-active h1 {
  font-size: clamp(2rem, 5.5vw, 4rem) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.02em !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.pp-active h2 {
  font-size: clamp(1.7rem, 4vw, 2.8rem) !important;
  line-height: 1.15 !important;
  letter-spacing: -0.015em !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.pp-active h3 {
  font-size: clamp(1.2rem, 2.5vw, 1.7rem) !important;
  line-height: 1.25 !important;
  letter-spacing: -0.01em !important;
  max-width: 100%;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
body.pp-active .hero h1 { font-size: clamp(2.2rem, 6vw, 4.2rem) !important; }
body.pp-active section[class*="service"] h2,
body.pp-active section[class*="feature"] h2,
body.pp-active .section h2 { font-size: clamp(1.7rem, 3.5vw, 2.6rem) !important; }
body.pp-active .pp-h1,
body.pp-active .pp-h2,
body.pp-active .pp-h3 {
  font-size: revert !important;
  line-height: revert !important;
  letter-spacing: revert !important;
}
body.pp-active section,
body.pp-active .container,
body.pp-active .grid-3,
body.pp-active .grid-2,
body.pp-active .grid-4 { overflow-wrap: break-word; }

/* === Generic safety net for any headings/paragraphs === */
body.pp-active section h1,
body.pp-active section h2,
body.pp-active section h3,
body.pp-active section h4,
body.pp-active section h5,
body.pp-active section h6 { color: var(--pp-charcoal) !important; }
body.pp-active section p:not([class*="pp-"]) { color: var(--pp-charcoal-2) !important; }

/* === ylg-vs comparison table styles (from comparison-pages.css) === */
body.pp-active .comparison-table {
  background: var(--pp-paper) !important;
  border: 1px solid var(--pp-divider) !important;
  border-radius: var(--pp-radius) !important;
}
body.pp-active .comparison-table table {
  background: transparent !important;
}
body.pp-active .comparison-table thead {
  background: linear-gradient(135deg, var(--pp-blush-accent) 0%, var(--pp-blush-deep) 100%) !important;
}
body.pp-active .comparison-table thead th {
  color: white !important;
}
body.pp-active .comparison-table tbody td {
  background: var(--pp-paper) !important;
  color: var(--pp-charcoal-2) !important;
  border-color: var(--pp-divider) !important;
}
body.pp-active .comparison-table tbody tr:nth-child(even) td {
  background: var(--pp-cream-2) !important;
}
body.pp-active .comparison-table tbody td:first-child {
  color: var(--pp-charcoal) !important;
  font-weight: 600;
}

/* Comparison hero darker gradient sections — translucent pearl */
body.pp-active [style*="linear-gradient(135deg, #0f0f0f"],
body.pp-active [style*="linear-gradient(135deg,#0f0f0f"] {
  background: linear-gradient(135deg, var(--pp-cream) 0%, var(--pp-blush) 50%, var(--pp-cream) 100%) !important;
}

/* Heading colors on those pages (white inline) */
body.pp-active h2[style*="color: #ffffff"],
body.pp-active h2[style*="color: #fff"],
body.pp-active h2[style*="color: white"] {
  color: var(--pp-charcoal) !important;
}

/* === Print === */
@media print {
  body.pp-active * { background: white !important; color: black !important; }
}

/* === ACCESSIBILITY: Focus rings (CRITICAL — WCAG 2.4.7) ===
 * Visible focus indicator for keyboard navigation across all interactive elements. */
body.pp-active a:focus-visible,
body.pp-active button:focus-visible,
body.pp-active [role="button"]:focus-visible,
body.pp-active input:focus-visible,
body.pp-active textarea:focus-visible,
body.pp-active select:focus-visible,
body.pp-active summary:focus-visible,
body.pp-active details:focus-visible,
body.pp-active .pp-btn:focus-visible,
body.pp-active .btn:focus-visible,
body.pp-active .pp-related-card:focus-visible,
body.pp-active .pp-loc:focus-visible {
  outline: 3px solid var(--pp-blush-deep) !important;
  outline-offset: 3px !important;
  border-radius: 6px !important;
  transition: outline-offset 0.15s ease !important;
}

/* Skip-link override for pastel pages */
body.pp-active .skip-link {
  background: var(--pp-blush-deep) !important;
  color: white !important;
}
body.pp-active .skip-link:focus {
  top: 0 !important;
  outline: 3px solid var(--pp-charcoal) !important;
  outline-offset: 2px !important;
}

/* === Stylist cards + Quiz trigger (homepage) === */
body.pp-active .stylist-card {
  background: #FFFFFF !important;
  border: 1px solid rgba(61,41,53,0.08) !important;
  box-shadow: 0 4px 16px rgba(61,41,53,0.06) !important;
  border-radius: 16px !important;
}
body.pp-active .stylist-card:hover {
  border-color: rgba(244,172,183,0.5) !important;
  box-shadow: 0 12px 32px rgba(157,94,102,0.12) !important;
  transform: translateY(-4px);
}
body.pp-active .stylist-card::before {
  background: linear-gradient(90deg, #F4ACB7, #9D5E66, transparent) !important;
}
body.pp-active .stylist-avatar {
  background: #FFE5D9 !important;
  border-color: #F4ACB7 !important;
  color: #9D5E66 !important;
}
body.pp-active .stylist-name { color: #2D1F26 !important; font-family: var(--pp-font-h) !important; font-weight: 500 !important; }
body.pp-active .stylist-role { color: #9D5E66 !important; font-weight: 600 !important; }
body.pp-active .stylist-location { color: #573842 !important; }
body.pp-active .stylist-bio { color: #573842 !important; line-height: 1.6 !important; }
body.pp-active .stylist-stars { color: #D9A77E !important; letter-spacing: 2px !important; }
body.pp-active .stylist-review-count { color: #786068 !important; }

/* "Not sure which treatment..." quiz trigger */
body.pp-active .quiz-trigger-wrap {
  margin-top: 60px;
  text-align: center;
}
body.pp-active .quiz-trigger-wrap p { color: #573842 !important; }
body.pp-active .quiz-trigger-btn {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  padding: 14px 28px !important;
  border-radius: 999px !important;
  font-weight: 600 !important;
  font-size: 0.95rem !important;
  letter-spacing: 0.5px !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
  box-shadow: 0 6px 20px rgba(157,94,102,0.32) !important;
  transition: transform 0.25s, box-shadow 0.25s !important;
}
body.pp-active .quiz-trigger-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(157,94,102,0.4) !important;
}

/* Quiz modal */
body.pp-active .quiz-modal {
  background: #FFFFFF !important;
  color: #2D1F26 !important;
  border-radius: 16px !important;
}
body.pp-active .quiz-question { color: #2D1F26 !important; }
body.pp-active .quiz-q-label { color: #9D5E66 !important; }
body.pp-active .quiz-option {
  background: #FBF5F2 !important;
  color: #2D1F26 !important;
  border: 1px solid rgba(61,41,53,0.14) !important;
  border-radius: 8px !important;
}
body.pp-active .quiz-option:hover {
  background: #FFCAD4 !important;
  border-color: #F4ACB7 !important;
}
body.pp-active .quiz-progress-dot {
  background: rgba(61,41,53,0.14) !important;
}
body.pp-active .quiz-progress-dot.active {
  background: #9D5E66 !important;
}

/* === ANIMATED GRADIENT for premium feel === */
@keyframes pp-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

body.pp-active .pp-hero,
body.pp-active section.hero,
body.pp-active section[class*="hero"] {
  background: linear-gradient(135deg, #FBF5F2 0%, #FFE5D9 25%, #FFCAD4 50%, #FFE5D9 75%, #FBF5F2 100%) !important;
  background-size: 300% 300% !important;
  animation: pp-gradient-shift 18s ease-in-out infinite !important;
}

/* For section CTA bands (.pp-final) */
body.pp-active .pp-final {
  background: linear-gradient(135deg, #FFCAD4 0%, #FFE5D9 25%, #ECF0EE 50%, #FFE5D9 75%, #FFCAD4 100%) !important;
  background-size: 300% 300% !important;
  animation: pp-gradient-shift 24s ease-in-out infinite !important;
}

/* Reduce motion respects the user's preference */
@media (prefers-reduced-motion: reduce) {
  body.pp-active .pp-hero,
  body.pp-active section.hero,
  body.pp-active section[class*="hero"],
  body.pp-active .pp-final {
    animation: none !important;
    background-size: 100% 100% !important;
  }
}

/* === CRITICAL FIX: Dark hero image+overlay sandwich on location/service pages ===
   17 pages (porur, adyar, annanagar, haralur, facial-in-chennai, hair-in-chennai,
   men, mens-waxing-in-chennai, manicure-pedicure-in-chennai, threading-in-chennai,
   bridal-makeup-in-chennai, facials, beauty-treatments, bleach-detan-in-chennai,
   hair-repair-treatment-in-chennai, keratin-treatment-in-chennai, pedicure-in-chennai)
   use this pattern:
     <section class="hero" style="background: #000;">
       <img style="filter: brightness(0.6); ..." />
       <div style="background: linear-gradient(to top, #050505 ...);"></div>
       <div class="container">...dark charcoal text...</div>
     </section>
   The peachify pass turned the text dark, but the dark image+overlay remained — so
   charcoal-on-dark = invisible. Fix: hide the dark overlay div, drop the brightness
   filter, and soften the image to ~30% opacity so it acts as subtle texture behind
   our peachy gradient. Text now reads cleanly on cream.
   --------------------------------------------------------------------------------- */

/* Hide the dark gradient overlay divs that sit on top of hero images */
body.pp-active section.hero > div[style*="linear-gradient(to top, #050505"],
body.pp-active section.hero > div[style*="linear-gradient(to right, rgba(5,5,5"],
body.pp-active section.hero > div[style*="linear-gradient(to top, rgba(5,5,5"],
body.pp-active section.hero > div[style*="linear-gradient(to bottom, #050505"],
body.pp-active section.hero > div[style*="linear-gradient(to left, rgba(5,5,5"],
body.pp-active section[class*="hero"] > div[style*="rgba(5,5,5"],
body.pp-active section[class*="hero"] > div[style*="rgba(0,0,0,0.8"],
body.pp-active section[class*="hero"] > div[style*="rgba(0,0,0,0.9"],
body.pp-active section[class*="hero"] > div[style*="rgba(0,0,0,0.7"] {
  display: none !important;
}

/* Drop the brightness filter on hero images and soften them.
   We blur + desaturate + heavily fade so the image acts as a subtle textured
   wash behind the peachy gradient — text contrast comes from the gradient,
   not from the image. */
body.pp-active section.hero > img[style*="brightness(0.6)"],
body.pp-active section.hero > img[style*="brightness(0.5)"],
body.pp-active section.hero > img[style*="brightness(0.4)"],
body.pp-active section.hero > img[style*="brightness(0.3)"],
body.pp-active section[class*="hero"] > img[style*="brightness(0."] {
  filter: blur(8px) saturate(0.55) brightness(1.15) !important;
  opacity: 0.18 !important;
  mix-blend-mode: luminosity !important;
}

/* ALSO target nested div bg-image heroes (hair-in-chennai, facial-in-chennai
   and other service hubs use <div style="background:url(...);"> instead of
   <img>). Without this override the image sits at 0.75 opacity (from the
   earlier "VISIBLE" rule) and competes with the peachy wash + hero text —
   the visual bug the user reported as "hero text overlaps image". */
body.pp-active section.hero div[style*="background: url"][style*="brightness(0."],
body.pp-active section[class*="hero"] div[style*="background: url"][style*="brightness(0."] {
  filter: blur(10px) saturate(0.4) brightness(1.0) !important;
  opacity: 0.15 !important;
}

/* Add a peachy wash layer on top of the image (below the text container)
   so text contrast is guaranteed regardless of image content. We use the
   section's ::before pseudo because the inline img can't carry a sibling.
   IMPORTANT: this heavy 85% wash is ONLY for image-backed heroes (the dark
   location/service pages). Video-backed heroes use a much lighter touch
   so the video stays visible — see :has(video) override below. */
body.pp-active section.hero,
body.pp-active section[class*="hero"] {
  position: relative !important;
}
body.pp-active section.hero::before,
body.pp-active section[class*="hero"]::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  background: linear-gradient(135deg, rgba(251,245,242,0.85) 0%, rgba(255,229,217,0.82) 50%, rgba(255,202,212,0.78) 100%) !important;
  z-index: 1 !important;
  pointer-events: none !important;
}
/* Keep the actual content (.container, h1, etc) ABOVE the wash layer */
body.pp-active section.hero > .container,
body.pp-active section[class*="hero"] > .container {
  position: relative !important;
  z-index: 2 !important;
}

/* === HOMEPAGE HERO ONLY: real video that should play clearly ===
   The homepage hero pattern:
     <section class="hero">
       <video> (real footage)
       <div style="linear-gradient(135deg, rgba(245,240,239,0.3)...)"> light peachy overlay
       <div class="container"> content
     </section>
   We detect this specific pattern by:
     :has(video) AND NOT :has(div[style*="rgba(5,5,5"])
     AND NOT :has(div[style*="rgba(0,0,0,0.7"])
     AND NOT :has(div[style*="background-image"])
   That excludes location/service heroes (which use a dark gradient overlay
   or a div with background-image) from this exception. */
body.pp-active section.hero:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(5, 5, 5"])):not(:has(div[style*="rgba(0,0,0,0.7"])):not(:has(div[style*="rgba(0, 0, 0, 0.7"])):not(:has(div[style*="rgba(0,0,0,0.85"])),
body.pp-active section[class*="hero"]:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(5, 5, 5"])):not(:has(div[style*="rgba(0,0,0,0.7"])):not(:has(div[style*="rgba(0, 0, 0, 0.7"])):not(:has(div[style*="rgba(0,0,0,0.85"])) {
  background: #2D1F26 !important;
  background-image: none !important;
  animation: none !important;
}
body.pp-active section.hero:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(0,0,0,0.7"]))::before,
body.pp-active section[class*="hero"]:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(0,0,0,0.7"]))::before {
  background: linear-gradient(115deg, rgba(45,31,38,0.70) 0%, rgba(45,31,38,0.50) 30%, rgba(45,31,38,0.20) 55%, rgba(45,31,38,0) 80%) !important;
}
body.pp-active section.hero:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(0,0,0,0.7"])) > video,
body.pp-active section[class*="hero"]:has(video):not(:has(div[style*="background-image"])):not(:has(div[style*="rgba(5,5,5"])):not(:has(div[style*="rgba(0,0,0,0.7"])) > video {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  z-index: 0 !important;
}

/* === LOCATION / SERVICE HEROES: peachy wash treatment ===
   Pattern detection: hero with EITHER a `<div style="background-image">`
   (Anna Nagar) OR a dark-gradient overlay div (Adyar, Porur, service pages).
   Both signal a "location/service" hero that needs the peachy treatment. */
body.pp-active section.hero:has(div[style*="background-image"]),
body.pp-active section[class*="hero"]:has(div[style*="background-image"]),
body.pp-active section.hero:has(div[style*="rgba(5,5,5"]),
body.pp-active section[class*="hero"]:has(div[style*="rgba(5,5,5"]),
body.pp-active section.hero:has(div[style*="rgba(5, 5, 5"]),
body.pp-active section[class*="hero"]:has(div[style*="rgba(5, 5, 5"]),
body.pp-active section.hero:has(div[style*="rgba(0,0,0,0.85"]),
body.pp-active section[class*="hero"]:has(div[style*="rgba(0,0,0,0.85"]) {
  background: linear-gradient(135deg, #FBF5F2 0%, #FFE5D9 25%, #FFCAD4 50%, #FFE5D9 75%, #FBF5F2 100%) !important;
  background-size: 300% 300% !important;
  animation: pp-gradient-shift 18s ease-in-out infinite !important;
}
body.pp-active section.hero:has(div[style*="background-image"])::before,
body.pp-active section[class*="hero"]:has(div[style*="background-image"])::before,
body.pp-active section.hero:has(div[style*="rgba(5,5,5"])::before,
body.pp-active section[class*="hero"]:has(div[style*="rgba(5,5,5"])::before,
body.pp-active section.hero:has(div[style*="rgba(5, 5, 5"])::before,
body.pp-active section[class*="hero"]:has(div[style*="rgba(5, 5, 5"])::before,
body.pp-active section.hero:has(div[style*="rgba(0,0,0,0.85"])::before,
body.pp-active section[class*="hero"]:has(div[style*="rgba(0,0,0,0.85"])::before {
  background: linear-gradient(135deg, rgba(251,245,242,0.92) 0%, rgba(255,229,217,0.88) 50%, rgba(255,202,212,0.84) 100%) !important;
}
/* Soften the background-image div */
body.pp-active section.hero > div[style*="background-image"],
body.pp-active section[class*="hero"] > div[style*="background-image"] {
  filter: blur(6px) saturate(0.5) brightness(1.1) !important;
  opacity: 0.18 !important;
  mix-blend-mode: luminosity !important;
}
/* Location/service hero videos — keep clearly visible (the video IS the hero).
 * A separate overlay div on top provides text contrast. */
body.pp-active section.hero:has(div[style*="rgba(5,5,5"]) > video,
body.pp-active section[class*="hero"]:has(div[style*="rgba(5,5,5"]) > video,
body.pp-active section.hero:has(div[style*="rgba(5, 5, 5"]) > video,
body.pp-active section[class*="hero"]:has(div[style*="rgba(5, 5, 5"]) > video,
body.pp-active section.hero:has(div[style*="rgba(0,0,0"]) > video,
body.pp-active section[class*="hero"]:has(div[style*="rgba(0,0,0"]) > video,
body.pp-active section.hero:has(div[style*="background-image"]) > video,
body.pp-active section[class*="hero"]:has(div[style*="background-image"]) > video {
  opacity: 0.9 !important;
  filter: brightness(0.85) saturate(0.95) !important;
  mix-blend-mode: normal !important;
}

/* Make sure the hero section itself doesn't fall back to a black background */
body.pp-active section.hero[style*="background: #000"],
body.pp-active section.hero[style*="background:#000"],
body.pp-active section.hero[style*="background: #050505"],
body.pp-active section.hero[style*="background:#050505"],
body.pp-active section.hero[style*="background-color: #000"],
body.pp-active section.hero[style*="background-color:#000"] {
  background: linear-gradient(135deg, #FBF5F2 0%, #FFE5D9 25%, #FFCAD4 50%, #FFE5D9 75%, #FBF5F2 100%) !important;
  background-size: 300% 300% !important;
  animation: pp-gradient-shift 18s ease-in-out infinite !important;
}

/* Hero text patterns that need to flip back to readable on light backgrounds.
   The peachify pass already turned headlines to charcoal — good.
   But subtitles and meta text were set to rgba(255,255,255,X) — invisible on cream.
   Already partially covered earlier in this file but adding hero-scoped catch
   to make sure nothing slips through. */
body.pp-active section.hero p[style*="rgba(255,255,255"],
body.pp-active section.hero span[style*="rgba(255,255,255"],
body.pp-active section[class*="hero"] p[style*="rgba(255,255,255"],
body.pp-active section[class*="hero"] span[style*="rgba(255,255,255"] {
  color: #3D2935 !important;
}

/* Hero CTA buttons that still carry .btn-gold or border-color: rgba(255,255,255 */
body.pp-active section.hero a.btn-gold,
body.pp-active section[class*="hero"] a.btn-gold {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  box-shadow: 0 8px 24px rgba(45,31,38,0.28) !important;
}
body.pp-active section.hero a.btn-outline[style*="border-color: rgba(255,255,255"],
body.pp-active section[class*="hero"] a.btn-outline[style*="border-color: rgba(255,255,255"] {
  border: 2px solid #9D5E66 !important;
  color: #9D5E66 !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.7) !important;
}

/* === CRITICAL FIX: white-opacity text colour patterns ===
 * Peachify script missed `color: rgba(255,255,255,X)` because it was scoped to backgrounds.
 * Force any white-opacity text on .pp-active pages to charcoal — UNLESS the
 * text sits inside an image-card with a dark-gradient overlay (gallery
 * tiles, etc.) where white text is by design. */
body.pp-active [style*="color: rgba(255,255,255,0.9)"],
body.pp-active [style*="color: rgba(255,255,255,0.8)"],
body.pp-active [style*="color: rgba(255,255,255,0.75)"],
body.pp-active [style*="color: rgba(255,255,255,0.7)"],
body.pp-active [style*="color: rgba(255,255,255,0.65)"],
body.pp-active [style*="color: rgba(255,255,255,0.6)"],
body.pp-active [style*="color: rgba(255,255,255,0.55)"],
body.pp-active [style*="color: rgba(255,255,255,0.5)"],
body.pp-active [style*="color: rgba(255, 255, 255, 0.9)"],
body.pp-active [style*="color: rgba(255, 255, 255, 0.8)"],
body.pp-active [style*="color: rgba(255, 255, 255, 0.75)"],
body.pp-active [style*="color: rgba(255, 255, 255, 0.7)"] {
  color: var(--pp-charcoal-2) !important;
}
/* EXCEPTION: When the text is inside an image card that has a dark
   gradient overlay sibling, restore white (it was designed to be
   light-on-dark and the dark overlay is what gives it contrast). */
body.pp-active div:has(> img):has(> div[style*="rgba(10,10,10"]) [style*="color: rgba(255,255,255"],
body.pp-active div:has(> img):has(> div[style*="rgba(10,10,10"]) [style*="color:rgba(255,255,255"],
body.pp-active div:has(> img):has(> div[style*="rgba(10, 10, 10"]) [style*="color: rgba(255,255,255"],
body.pp-active div:has(> img):has(> div[style*="rgba(5,5,5"]) [style*="color: rgba(255,255,255"],
body.pp-active div:has(> img):has(> div[style*="rgba(0,0,0"]) [style*="color: rgba(255,255,255"] {
  color: rgba(255,255,255,0.95) !important;
  -webkit-text-fill-color: rgba(255,255,255,0.95) !important;
}
body.pp-active div:has(> img):has(> div[style*="rgba(10,10,10"]) [style*="color: white"],
body.pp-active div:has(> img):has(> div[style*="rgba(10, 10, 10"]) [style*="color: white"],
body.pp-active div:has(> img):has(> div[style*="rgba(5,5,5"]) [style*="color: white"],
body.pp-active div:has(> img):has(> div[style*="rgba(0,0,0"]) [style*="color: white"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* === MOBILE: reduce hero/article top padding ===
 * Blog post articles + blog-hub hero use `padding: 120px 0 80px` and
 * `padding: 140px 0 80px` inline. On a 375px viewport that eats almost
 * half the screen as empty top space. Cut top padding in half on small
 * screens and shrink horizontal container padding too. */
@media (max-width: 768px) {
  body.pp-active article[style*="padding: 120px"],
  body.pp-active section[style*="padding: 120px"],
  body.pp-active section[style*="padding: 140px"],
  body.pp-active section.pp-hero[style*="padding: 140px"],
  body.pp-active section.pp-hero[style*="padding: 120px"] {
    padding-top: 64px !important;
    padding-bottom: 40px !important;
  }
  body.pp-active section[style*="padding: 80px"],
  body.pp-active section[style*="padding: 100px"] {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
  /* Tighten container horizontal padding on mobile */
  body.pp-active .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  /* Blog cards: tighten gap + padding so they use available width */
  body.pp-active article[style*="border-radius: 16px"][style*="padding: 32px"] {
    padding: 22px !important;
  }
  /* Hero typography scales down so it doesn't overflow */
  body.pp-active section.pp-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }
  body.pp-active section.pp-hero p {
    font-size: 0.98rem !important;
  }
  /* Blog hub: tighten the gap between cards on mobile */
  body.pp-active section[style*="background: #FBF5F2"][style*="padding: 30px"] > .container > div[style*="grid"] {
    gap: 18px !important;
  }

}

/* ============================================================
   TABLET + DESKTOP: Hero rigid-height fix (added 2026-05-15)
   Pages set inline `height: clamp(Xvh, Yvh, Yvh)` which locks the
   hero to a fixed viewport-relative height. On iPad (768-1024 wide,
   especially landscape 1024x768), content density (eyebrow + h1 +
   paragraph + CTA row + social proof + chips) exceeds the rigid
   hero height, getting clipped by overflow:hidden — the visual
   bug the user reported as "hero text overlaps image / spills
   outside" and "hero crashes into section below".

   Fix: detect any hero with inline rigid clamp() height and force
   height:auto so content drives the box, while the original inline
   min-height (typically 400-600px) keeps the hero from being too
   short. Affects ~45 service / location / area / blog pages.
   ============================================================ */
@media (min-width: 769px) {
  body.pp-active section.hero[style*="height: clamp("],
  body.pp-active section[class*="hero"][style*="height: clamp("] {
    height: auto !important;
  }
}

@media (max-width: 768px) {
  /* CRITICAL: Location hero (annanagar, adyar, porur) uses
     align-items: flex-end + height: 80vh inline. On mobile, content
     is taller than the hero → H1 gets pushed ABOVE the viewport,
     hidden behind the sticky header.
     Fix: switch hero to auto-height + top-align on mobile so the
     full hero content scrolls naturally below the header. */
  body.pp-active section.hero[style*="align-items: flex-end"],
  body.pp-active section[class*="hero"][style*="align-items: flex-end"],
  body.pp-active section.hero[style*="height: clamp"],
  body.pp-active section[class*="hero"][style*="height: clamp"] {
    align-items: flex-start !important;
    justify-content: flex-start !important;
    height: auto !important;
    min-height: auto !important;
    padding: 80px 0 50px !important;
  }
  /* The .container inside often has margin-bottom: 80px (designed for the
     flex-end push). On mobile that adds dead space — kill it. */
  body.pp-active section.hero > .container[style*="margin-bottom: 80px"],
  body.pp-active section[class*="hero"] > .container[style*="margin-bottom: 80px"] {
    margin-bottom: 0 !important;
  }
  /* H1 in location heroes scales down so it fits the narrow viewport */
  body.pp-active section.hero h1[style*="font-size: clamp(3rem"],
  body.pp-active section[class*="hero"] h1[style*="font-size: clamp(3rem"] {
    font-size: clamp(1.8rem, 7vw, 2.4rem) !important;
    margin-bottom: 16px !important;
  }
  body.pp-active section.hero h1[style*="font-size: clamp(3rem"] span,
  body.pp-active section[class*="hero"] h1[style*="font-size: clamp(3rem"] span {
    font-size: 0.5em !important;
  }
  /* Body text in heroes */
  body.pp-active section.hero p[style*="font-size: clamp(1.1rem"],
  body.pp-active section[class*="hero"] p[style*="font-size: clamp(1.1rem"] {
    font-size: 1rem !important;
    margin-bottom: 20px !important;
  }
}

/* === CRITICAL FIX: kill .animate opacity:0 default ===
 * Legacy CSS used .animate { opacity: 0 } + IntersectionObserver to fade in on scroll.
 * The observer doesn't always fire for cards far down the page, leaving them invisible.
 * Force all .animate elements to be visible by default.
 * Hover/scroll animations still work because they override these values. */
body.pp-active .animate,
body.pp-active .animate:not(.visible) {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* === ACCESSIBILITY: prefers-reduced-motion ===
 * Respect user motion preference — disable all animations/transitions for sensitive users. */
@media (prefers-reduced-motion: reduce) {
  body.pp-active *,
  body.pp-active *::before,
  body.pp-active *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  body.pp-active video {
    /* don't auto-play decoration video for reduced-motion users */
    filter: none !important;
  }
}

/* === ACCESSIBILITY: Ensure colour is not the only indicator ===
 * Underline links in body content (already handled by browser default for <a>, but enforce on .pp-page-blog) */
body.pp-active main p a:not(.pp-btn):not(.btn) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

/* === TOUCH: minimum 44×44 target size for all clickable elements === */
body.pp-active a.pp-btn,
body.pp-active button.pp-btn,
body.pp-active a.btn,
body.pp-active button.btn,
body.pp-active .pp-loc-actions a,
body.pp-active .nav-links > a {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

/* === Cursor pointer on every clickable element === */
body.pp-active a,
body.pp-active button,
body.pp-active [role="button"],
body.pp-active summary,
body.pp-active .pp-card,
body.pp-active .pp-related-card,
body.pp-active .pp-loc {
  cursor: pointer;
}
body.pp-active input,
body.pp-active textarea,
body.pp-active select {
  cursor: text;
}

/* =========================================================================
 * WCAG CONTRAST ENFORCEMENT — NON-NEGOTIABLE
 * Every text element on the site MUST meet at least 4.5:1 (AA) contrast.
 * White text REQUIRES a background of #9D5E66 (deep rose) or darker.
 * Below #9D5E66, text MUST be #2D1F26 (charcoal) for AAA contrast.
 * Last updated: 2026-05-14
 * ========================================================================= */

/* --- 1. Primary CTA buttons (.btn-gold, .btn-rose, derived) ---
   The previous gradient (peach -> dusty rose) was too light for white text.
   Force every primary button to deep-rose -> charcoal gradient with white text.
   White on #9D5E66 = 4.97:1 (AA), white on #6B3F44 = 7.8:1 (AAA).
   NOTE: Many btn-gold elements have inline `style="color: var(--color-black) !important;"`
   which expands to cream — invisible on our new rose bg. Inline !important beats
   external !important when inline has higher specificity, so we use
   `-webkit-text-fill-color` (overrides `color` rendering across all WebKit/Blink/
   Gecko browsers since 2017) PLUS multiple specificity-stacked color rules. */
body.pp-active .btn-gold,
body.pp-active a.btn-gold,
body.pp-active button.btn-gold,
body.pp-active a[class*="btn-gold"],
body.pp-active a.btn-gold[style],
body.pp-active button.btn-gold[style],
body.pp-active .btn-rose,
body.pp-active .btn-primary,
body.pp-active .pp-btn-primary,
body.pp-active .quiz-trigger-btn,
body.pp-active .quiz-trigger-btn[style],
body.pp-active .floating-book-main,
body.pp-active a.floating-book-main,
body.pp-active a.floating-book-main[style] {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  background-image: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.18) !important;
  box-shadow: 0 6px 20px rgba(45,31,38,0.28) !important;
}
body.pp-active .btn-gold *,
body.pp-active a.btn-gold *,
body.pp-active button.btn-gold *,
body.pp-active a[class*="btn-gold"] *,
body.pp-active .btn-rose *,
body.pp-active .btn-primary *,
body.pp-active .pp-btn-primary *,
body.pp-active .quiz-trigger-btn *,
body.pp-active .floating-book-main * {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
body.pp-active .btn-gold:hover,
body.pp-active a.btn-gold:hover,
body.pp-active .btn-rose:hover,
body.pp-active .btn-primary:hover,
body.pp-active .quiz-trigger-btn:hover,
body.pp-active .floating-book-main:hover {
  background: linear-gradient(135deg, #6B3F44 0%, #2D1F26 100%) !important;
  background-image: linear-gradient(135deg, #6B3F44 0%, #2D1F26 100%) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 32px rgba(45,31,38,0.38) !important;
}

/* Override any inline style="color: var(--color-black) !important;" on btn-gold
   (legacy template used --color-black for dark text on gold bg; now it's
   remapped to cream which is invisible on the new rose bg) */
body.pp-active .btn-gold[style*="color: var(--color-black)"],
body.pp-active a.btn-gold[style*="color: var(--color-black)"],
body.pp-active .btn-gold[style*="color:var(--color-black)"] {
  color: #FFFFFF !important;
}

/* --- 2. Outline / secondary buttons ---
   Charcoal text on cream/paper bg. Border in deep rose. */
body.pp-active .btn-outline,
body.pp-active a.btn-outline,
body.pp-active .btn-secondary,
body.pp-active .pp-btn-secondary {
  background: rgba(255,255,255,0.85) !important;
  color: #2D1F26 !important;
  border: 2px solid #9D5E66 !important;
  border-radius: 999px !important;
  text-shadow: none !important;
}
body.pp-active .btn-outline:hover,
body.pp-active .btn-secondary:hover {
  background: #9D5E66 !important;
  color: #FFFFFF !important;
}

/* --- 3. WhatsApp / Chat green button ---
   The default #25D366 green at 1.98:1 contrast with white is unreadable.
   Use a deeper WhatsApp green that passes AA. */
body.pp-active .floating-book-wa,
body.pp-active .fbc-wa-open,
body.pp-active a[class*="btn-wa"],
body.pp-active a[href*="wa.me"].btn,
body.pp-active a[href*="whatsapp"].btn {
  background: #1F7E3D !important;
  background-image: linear-gradient(135deg, #1F7E3D 0%, #075E54 100%) !important;
  color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.22) !important;
  border: none !important;
}
body.pp-active .floating-book-wa *,
body.pp-active .fbc-wa-open *,
body.pp-active a[class*="btn-wa"] * {
  color: #FFFFFF !important;
}

/* --- 4. Star ratings (★) — yellow on cream is 1.51:1 (unreadable) ---
   Replace bright yellow stars with deep rose so they hit AA on cream. */
body.pp-active [style*="color: #FFD700"],
body.pp-active [style*="color:#FFD700"],
body.pp-active [style*="color: #ffd700"],
body.pp-active [style*="color:#ffd700"],
body.pp-active [style*="color: #FFC107"],
body.pp-active [style*="color:#FFC107"],
body.pp-active [style*="color: #FFB800"],
body.pp-active [style*="color:#FFB800"],
body.pp-active [style*="color: #FFAA00"],
body.pp-active [style*="color:#FFAA00"],
body.pp-active [style*="color: #F5C518"],
body.pp-active [style*="color:#F5C518"],
body.pp-active [style*="color: #f5c518"],
body.pp-active [style*="color:#f5c518"],
body.pp-active [style*="color: #F5DC18"],
body.pp-active [style*="color: #f5dc18"],
body.pp-active [style*="color: gold"],
body.pp-active [style*="color:gold"],
body.pp-active [style*="color: yellow"],
body.pp-active [style*="color:yellow"],
body.pp-active [style*="color: #ffcc00"],
body.pp-active [style*="color: #FFCC00"],
body.pp-active [style*="color: rgb(245, 197, 24)"],
body.pp-active [style*="color:rgb(245,197,24)"] {
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
}

/* --- 5. Status pills using purple/green on white ---
   "EVERY WEDNESDAY" purple (#c084fc, 2.64:1) and similar status colours
   need deeper alternatives. Map the common ones. */
body.pp-active [style*="color: #C084FC"],
body.pp-active [style*="color:#C084FC"],
body.pp-active [style*="color: #c084fc"],
body.pp-active [style*="color:#c084fc"],
body.pp-active [style*="color: #A78BFA"],
body.pp-active [style*="color:#A78BFA"],
body.pp-active [style*="color: rgb(192, 132, 252)"] {
  color: #6B3F44 !important;
}
body.pp-active [style*="color: #30D158"],
body.pp-active [style*="color:#30D158"],
body.pp-active [style*="color: rgb(48, 209, 88)"],
body.pp-active [style*="color: #34D399"],
body.pp-active [style*="color:#34D399"],
body.pp-active [style*="color: #4ADE80"],
body.pp-active [style*="color:#4ADE80"] {
  color: #166534 !important;
}

/* --- 6. Footer — brand text, headings, links ---
   "YLG Salon Chennai" was cream on peach (1.08:1, invisible).
   Headings + links need 4.5:1 minimum.
   NOTE: Earlier rules in this file use [style*="color: var(--color-gold)"]
   which has specificity (0,0,2,0) and would beat plain footer h5 (0,0,1,2).
   We chain an attribute selector to lift specificity to (0,0,2,2) so we win. */
body.pp-active footer,
body.pp-active footer[class],
body.pp-active footer * {
  color: #2D1F26;
}
body.pp-active footer h1[style],
body.pp-active footer h2[style],
body.pp-active footer h3[style],
body.pp-active footer h4[style],
body.pp-active footer h5[style],
body.pp-active footer h6[style],
body.pp-active footer h1,
body.pp-active footer h2,
body.pp-active footer h3,
body.pp-active footer h4,
body.pp-active footer h5,
body.pp-active footer h6 {
  color: #2D1F26 !important;
}
/* Footer headings are semantic h2/h3 (valid outline order — no skipped
   levels), but must keep the compact footer scale. body.pp-active h2 and
   .section h2 force ~1.7rem with !important, which would balloon footer
   column titles. Re-pin to the original footer heading sizing/weight. */
body.pp-active footer h2[style],
body.pp-active footer h2 {
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}
body.pp-active footer h3[style],
body.pp-active footer h3 {
  font-size: 1rem !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-top: 0 !important;
}
body.pp-active footer a[style],
body.pp-active footer a[style]:link,
body.pp-active footer a[style]:visited,
body.pp-active footer a,
body.pp-active footer a:link,
body.pp-active footer a:visited {
  color: #6B3F44 !important; /* darker than #9D5E66 to ensure AA on peach */
}
body.pp-active footer a[style]:hover,
body.pp-active footer a:hover {
  color: #2D1F26 !important;
}
body.pp-active footer p[style],
body.pp-active footer span[style],
body.pp-active footer li[style],
body.pp-active footer ul[style],
body.pp-active footer p,
body.pp-active footer span,
body.pp-active footer li,
body.pp-active footer address {
  color: #3D2935 !important;
}
/* Footer brand line: force readable */
body.pp-active footer [style*="color: rgb(245, 221, 211)"],
body.pp-active footer [style*="color:#FBF5F2"],
body.pp-active footer [style*="color: #FBF5F2"],
body.pp-active footer [style*="color:#FFE5D9"],
body.pp-active footer [style*="color: #FFE5D9"] {
  color: #2D1F26 !important;
}
/* Footer Subscribe button: charcoal-on-rose was 3.16:1.
   Use white on charcoal for AAA */
body.pp-active footer button[type="submit"],
body.pp-active footer .newsletter-submit,
body.pp-active footer input[type="submit"] {
  background: #2D1F26 !important;
  color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
}

/* --- 7. Generic safety net: catch tiny-light text on light bg ---
   Any text colored with the muted greys we used earlier (#786068, #6B5560)
   stays — those are AA on cream. But anything BELOW that brightness shouldn't
   exist. Override the lightest text-color fallbacks site-wide. */
body.pp-active [style*="color: #999"],
body.pp-active [style*="color:#999"],
body.pp-active [style*="color: #aaa"],
body.pp-active [style*="color:#aaa"],
body.pp-active [style*="color: #bbb"],
body.pp-active [style*="color:#bbb"],
body.pp-active [style*="color: #ccc"],
body.pp-active [style*="color:#ccc"],
body.pp-active [style*="color: #ddd"],
body.pp-active [style*="color:#ddd"] {
  color: #3D2935 !important;
}

/* --- 8. Inputs and form labels ---
   Make sure placeholder text is readable. */
body.pp-active input,
body.pp-active textarea,
body.pp-active select {
  color: #2D1F26 !important;
  background: #FFFFFF !important;
  border: 1px solid rgba(61,41,53,0.25) !important;
}
body.pp-active input::placeholder,
body.pp-active textarea::placeholder {
  color: #6B5560 !important;
  opacity: 1 !important;
}
body.pp-active label {
  color: #2D1F26 !important;
}

/* --- 9. Selection colour for usability --- */
body.pp-active ::selection {
  background: #9D5E66;
  color: #FFFFFF;
}

/* --- 9b. LOGO VISIBILITY ---
   The default logo is `logo-white.avif` — white on transparent — which is
   completely invisible on our cream background. Until the brand colour
   version is provided, we tint the white logo to deep-rose with a CSS
   filter chain so it reads as a brand-coloured logo on cream.
   filter chain explained:
   - brightness(0): makes white -> black
   - saturate(100%): unsaturate first
   - invert(38%) sepia(22%) saturate(1200%) hue-rotate(310deg): rotate to deep rose
   Net effect: white logo silhouette renders as #6B3F44 / deep wine. */
/* Legacy white-only logo fallback — apply CSS filter to tint it deep wine
   (only used if the colour `logo.avif` ever fails to load).
   The colour logo carries [data-coloured-logo] which beats this rule. */
body.pp-active header img[src*="logo-white"]:not([data-coloured-logo]) {
  filter: brightness(0) saturate(100%) invert(28%) sepia(15%) saturate(1300%) hue-rotate(310deg) brightness(95%) contrast(95%) !important;
  opacity: 1 !important;
}
/* Logo sizing — keep generous so the brand reads cleanly on the header */
body.pp-active header img[src*="logo"],
body.pp-active .logo-link img {
  max-height: 60px !important;
  height: auto !important;
  width: auto !important;
  display: block !important;
}
body.pp-active .logo-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  padding: 4px 0 !important;
}
/* Colour logo: keep original colours, no filter */
body.pp-active header img[data-coloured-logo],
body.pp-active .logo-link img[data-coloured-logo] {
  filter: none !important;
}

/* --- 9c. NAV / HEADER POLISH ---
   Make the header read clearly on cream + ensure dropdowns are reliably
   hover-activated (no click required) and keyboard-accessible. */
body.pp-active header {
  background: rgba(251, 245, 242, 0.92) !important;
  backdrop-filter: blur(16px) !important;
  -webkit-backdrop-filter: blur(16px) !important;
  border-bottom: 1px solid rgba(61, 41, 53, 0.08) !important;
  box-shadow: 0 1px 0 rgba(61, 41, 53, 0.04) !important;
}
body.pp-active header.scrolled {
  background: rgba(251, 245, 242, 0.98) !important;
  box-shadow: 0 2px 12px rgba(61, 41, 53, 0.08) !important;
}
body.pp-active .nav-links {
  gap: 22px !important;
}
body.pp-active .nav-links > a,
body.pp-active .services-toggle {
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  font-size: 0.92rem !important;
  letter-spacing: 0.4px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  transition: color 0.2s ease !important;
}
body.pp-active .nav-links > a:hover,
body.pp-active .services-toggle:hover,
body.pp-active .services-dropdown:hover .services-toggle {
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
}
body.pp-active .dropdown-arrow {
  font-size: 0.7em !important;
  margin-left: 4px !important;
  display: inline-block !important;
  transition: transform 0.2s ease !important;
}
body.pp-active .services-dropdown:hover .dropdown-arrow,
body.pp-active .services-dropdown:focus-within .dropdown-arrow {
  transform: rotate(180deg) !important;
}

/* HOVER + FOCUS reliable dropdown reveal */
body.pp-active .services-dropdown {
  position: relative !important;
}
body.pp-active .services-menu {
  background: #FFFFFF !important;
  border: 1px solid rgba(61, 41, 53, 0.10) !important;
  box-shadow: 0 12px 32px rgba(61, 41, 53, 0.12) !important;
  border-radius: 12px !important;
  padding: 8px 0 !important;
  min-width: 260px !important;
  top: calc(100% + 8px) !important;
}
body.pp-active .services-dropdown:hover .services-menu,
body.pp-active .services-dropdown:focus-within .services-menu,
body.pp-active .services-dropdown.hover .services-menu {
  display: flex !important;
  flex-direction: column !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto !important;
}
body.pp-active .services-menu a {
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  padding: 10px 22px !important;
  font-size: 0.88rem !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  font-weight: 500 !important;
  transition: all 0.15s ease !important;
}
body.pp-active .services-menu a:hover {
  background: #FFE5D9 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  padding-left: 28px !important;
}
/* Invisible bridge between toggle and menu so hover doesn't drop */
body.pp-active .services-dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 12px;
  pointer-events: auto;
}

/* --- 10. Anything coloured #9D5E66 on a peach-cream bg sits at 4.13:1
   which is just below WCAG AA 4.5:1. Deepen to #6B3F44 (gives 6.4:1
   on #FFE5D9 and 9.3:1 on #FBF5F2). Catch every element type. */
body.pp-active *[style*="color: #9D5E66"],
body.pp-active *[style*="color:#9D5E66"],
body.pp-active *[style*="color: #9d5e66"],
body.pp-active *[style*="color:#9d5e66"],
body.pp-active *[style*="color: rgb(157, 94, 102)"],
body.pp-active *[style*="color:rgb(157,94,102)"] {
  color: #6B3F44 !important;
  -webkit-text-fill-color: #6B3F44 !important;
}

/* Related-post cards and similar `<a>` tiles with peach-cream bg but NO
   inline color rely on the default anchor color (#9D5E66) which is 4.13:1
   on peach. Deepen anchor color globally on peach backgrounds. */
body.pp-active a[style*="background: #FFE5D9"],
body.pp-active a[style*="background:#FFE5D9"],
body.pp-active a[style*="background: #ffe5d9"],
body.pp-active a[style*="background:#ffe5d9"],
body.pp-active a[style*="background: #FFCAD4"],
body.pp-active a[style*="background:#FFCAD4"] {
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
}
body.pp-active a[style*="background: #FFE5D9"] *,
body.pp-active a[style*="background:#FFE5D9"] *,
body.pp-active a[style*="background: #ffe5d9"] *,
body.pp-active a[style*="background:#ffe5d9"] *,
body.pp-active a[style*="background: #FFCAD4"] *,
body.pp-active a[style*="background:#FFCAD4"] * {
  /* descendants keep their explicit colors which we've already deepened */
}
/* Inline anchor links keep an underline for affordance */
body.pp-active p a[style*="color: #9D5E66"],
body.pp-active p a[style*="color: #9d5e66"],
body.pp-active li a[style*="color: #9D5E66"],
body.pp-active li a[style*="color: #9d5e66"],
body.pp-active span a[style*="color: #9D5E66"],
body.pp-active span a[style*="color: #9d5e66"] {
  text-decoration: underline !important;
  text-decoration-color: rgba(107, 63, 68, 0.55) !important;
  text-underline-offset: 2px !important;
}
body.pp-active a[style*="color: #9D5E66"]:hover,
body.pp-active a[style*="color: #9d5e66"]:hover,
body.pp-active p a[style*="color"]:hover,
body.pp-active li a[style*="color"]:hover {
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  text-decoration-color: #2D1F26 !important;
}

/* --- 11. Generic safety net: any remaining text that resolves to #9D5E66
   inside a paragraph/list/span on a peach-cream bg is just below AA.
   Catch it by element type. */
body.pp-active p[style*="color"],
body.pp-active li[style*="color"] {
  /* Paragraphs and list items shouldn't ever use the deep-rose accent for body
     text — they need charcoal for readability. Inline `color: #9D5E66` on
     paragraphs gets pushed to body-text-deep. */
}
/* The accent rose colour stays usable for headings/labels (used at larger
   sizes and as decorative meta), but in body text we want #3D2935 minimum. */
body.pp-active p[style*="color: #9D5E66"],
body.pp-active p[style*="color:#9D5E66"],
body.pp-active p[style*="color: #9d5e66"],
body.pp-active li[style*="color: #9D5E66"],
body.pp-active li[style*="color: #9d5e66"] {
  color: #3D2935 !important;
  -webkit-text-fill-color: #3D2935 !important;
}

/* --- 11b. Offer-page dark cards/badges (.fo-offer-card, .ho-offer-card,
   .co-offer-card, .fo-badge, .ho-badge, .co-badge) all use CSS-based dark
   gradients/colors. Force peachy. */
body.pp-active .ho-offer-card,
body.pp-active .fo-offer-card,
body.pp-active .co-offer-card,
body.pp-active [class*="-offer-card"] {
  background: linear-gradient(160deg, #FFFFFF 0%, #FFE5D9 100%) !important;
  background-image: linear-gradient(160deg, #FFFFFF 0%, #FFE5D9 100%) !important;
  border: 1px solid rgba(61,41,53,0.10) !important;
  box-shadow: 0 4px 16px rgba(61,41,53,0.06) !important;
  color: #2D1F26 !important;
}
body.pp-active .ho-offer-card *,
body.pp-active .fo-offer-card *,
body.pp-active .co-offer-card *,
body.pp-active [class*="-offer-card"] * {
  /* let descendant text use its own color; charcoal is now readable */
}
body.pp-active .ho-badge,
body.pp-active .fo-badge,
body.pp-active .co-badge,
body.pp-active [class*="-badge"]:not([class*="-oc-badge"]) {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  background-image: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* --- 12. Dark-gradient sections (legacy theme leak) ---
   Some sections still use `background: linear-gradient(..., rgba(5,5,5,1) ...)`
   or `background:#0e0b08` or similar dark inline styles. These make charcoal
   text unreadable. Override with peachy gradient.
   We brute-force catch every dark hex variant we've found in the codebase,
   in both spaced (`: #xxx`) and unspaced (`:#xxx`) forms. */
body.pp-active section[style*="rgba(5,5,5"],
body.pp-active section[style*="rgba(5, 5, 5"],
body.pp-active section[style*="rgba(0,0,0,1"],
body.pp-active section[style*="rgba(0, 0, 0, 1"],
body.pp-active section[style*="rgba(10,10,10"],
body.pp-active section[style*="rgba(15,15,15"],
body.pp-active section[style*="rgba(20,20,20"],
body.pp-active section[style*="rgba(25,25,25"],
body.pp-active section[style*="#050505"],
body.pp-active section[style*="#0a0a0a"],
body.pp-active section[style*="#0b0b0b"],
body.pp-active section[style*="#0c0907"],
body.pp-active section[style*="#0c0c0c"],
body.pp-active section[style*="#0d0d0d"],
body.pp-active section[style*="#0e0b08"],
body.pp-active section[style*="#0e0e0e"],
body.pp-active section[style*="#0f0f0f"],
body.pp-active section[style*="#101010"],
body.pp-active section[style*="#111111"],
body.pp-active section[style*="#1a1a1a"],
body.pp-active section[style*="#1a1410"],
body.pp-active section[style*="#191310"],
body.pp-active section[style*="#222"],
body.pp-active section[style*=":#000"],
body.pp-active section[style*=": #000"],
body.pp-active section[style*=":#111"],
body.pp-active section[style*=": #111"],
body.pp-active section[style*=":black"],
body.pp-active section[style*=": black"],
body.pp-active div[style*="rgba(5,5,5,1"],
body.pp-active div[style*="rgba(0,0,0,1"],
body.pp-active div[style*="background:#0e0b08"],
body.pp-active div[style*="background: #0e0b08"],
body.pp-active aside[style*="#0e0b08"],
body.pp-active aside[style*="rgba(5,5,5"] {
  background: linear-gradient(135deg, #FBF5F2 0%, #FFE5D9 50%, #FFCAD4 100%) !important;
  background-image: linear-gradient(135deg, #FBF5F2 0%, #FFE5D9 50%, #FFCAD4 100%) !important;
  background-color: #FBF5F2 !important;
}

/* --- 13. Final stars catch — any orange/peach/yellow star colour gets rose ---
   The waxing page has stars at rgb(217, 167, 126) which is a tan/peach.
   Catch the common "rating" star colours generically. */
body.pp-active [style*="color: #D9A77E"],
body.pp-active [style*="color:#D9A77E"],
body.pp-active [style*="color: #d9a77e"],
body.pp-active [style*="color:#d9a77e"],
body.pp-active [style*="color: rgb(217, 167, 126)"],
body.pp-active [style*="color:rgb(217,167,126)"],
body.pp-active [style*="color: #E8C29F"],
body.pp-active [style*="color: #e8c29f"] {
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
}

/* --- 14. Hero-image-section text contrast belt-and-suspenders ---
   Some hero <section> elements have dark-gradient inline styles AND text
   inside that we'd want charcoal. After our earlier hero rules add a peachy
   ::before wash, text contrast is fine. But for non-hero sections that still
   use dark gradients (like the "Book Now & Get Instant Confirmation" CTA
   band), force charcoal text against the peachy gradient. */
body.pp-active section[style*="rgba(5,5,5"] *,
body.pp-active section[style*="rgba(0,0,0,1"] *,
body.pp-active section[style*="#050505"] *,
body.pp-active section[style*="#0a0a0a"] *,
body.pp-active section[style*="#0f0f0f"] *,
body.pp-active section[style*="#1a1a1a"] * {
  /* Don't force everything — let text use its own color which we've already
     deepened. The bg override above makes them readable. */
}

/* --- 15. Offer-page action buttons (.ho-*, .fo-*, .co-* book/wa) ---
   Each offer page (hair/facial/colour) defines its own button classes:
     .ho-act-book / .fo-act-book / .co-act-book   - primary BOOK
     .ho-oc-book / .fo-oc-book / .co-oc-book      - offer-card BOOK
     .ho-act-wa  / .fo-act-wa  / .co-act-wa       - WhatsApp button
     .ho-act-call/ .fo-act-call/ .co-act-call     - Call button
   Each uses `color: #000` on rose bg (4.23:1, below AA). Force white. */
body.pp-active .ho-act-book,
body.pp-active .fo-act-book,
body.pp-active .co-act-book,
body.pp-active .ho-oc-book,
body.pp-active .fo-oc-book,
body.pp-active .co-oc-book,
body.pp-active .ho-btn-hair,
body.pp-active .fo-btn-facial,
body.pp-active .co-btn-colour,
body.pp-active a[class*="-act-book"],
body.pp-active a[class*="-oc-book"],
body.pp-active a[class*="-btn-hair"],
body.pp-active a[class*="-btn-facial"],
body.pp-active a[class*="-btn-colour"],
body.pp-active a[class*="-btn-color"],
body.pp-active .ho-loc-actions a,
body.pp-active .fo-loc-actions a,
body.pp-active .co-loc-actions a {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  background-image: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}
body.pp-active .ho-act-book:hover,
body.pp-active .fo-act-book:hover,
body.pp-active .co-act-book:hover,
body.pp-active .ho-btn-hair:hover,
body.pp-active .fo-btn-facial:hover,
body.pp-active .co-btn-colour:hover,
body.pp-active a[class*="-act-book"]:hover,
body.pp-active a[class*="-oc-book"]:hover,
body.pp-active a[class*="-btn-hair"]:hover,
body.pp-active a[class*="-btn-facial"]:hover,
body.pp-active a[class*="-btn-colour"]:hover {
  background: linear-gradient(135deg, #6B3F44 0%, #2D1F26 100%) !important;
  background-image: linear-gradient(135deg, #6B3F44 0%, #2D1F26 100%) !important;
  transform: translateY(-2px) !important;
}
/* The CALL action button is a subtle secondary — outlined */
body.pp-active .ho-act-call,
body.pp-active .fo-act-call,
body.pp-active .co-act-call,
body.pp-active a[class*="-act-call"] {
  background: rgba(255,255,255,0.95) !important;
  background-image: none !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  border: 2px solid #9D5E66 !important;
  text-shadow: none !important;
}
body.pp-active .ho-act-call:hover,
body.pp-active .fo-act-call:hover,
body.pp-active .co-act-call:hover {
  background: #9D5E66 !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}
/* WhatsApp action button on offer cards — green pill */
body.pp-active .ho-act-wa,
body.pp-active .fo-act-wa,
body.pp-active .co-act-wa,
body.pp-active a[class*="-act-wa"] {
  background: linear-gradient(135deg, #1F7E3D 0%, #075E54 100%) !important;
  background-image: linear-gradient(135deg, #1F7E3D 0%, #075E54 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
  border-radius: 999px !important;
  text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* --- 16. SAVE 50% green badge — light green on white is 2.28:1, unreadable.
   Use a deeper green that hits AA on white.
   `.ho-oc-badge`, `.fo-oc-badge`, `.co-oc-badge` are class-based green badges. */
body.pp-active [style*="color: #22C55E"],
body.pp-active [style*="color:#22C55E"],
body.pp-active [style*="color: #22c55e"],
body.pp-active [style*="color:#22c55e"],
body.pp-active [style*="color: rgb(34, 197, 94)"],
body.pp-active [style*="color: #16A34A"],
body.pp-active [style*="color: #16a34a"],
body.pp-active [style*="color: #15803D"],
body.pp-active [style*="color: #15803d"],
body.pp-active .ho-oc-badge,
body.pp-active .fo-oc-badge,
body.pp-active .co-oc-badge,
body.pp-active [class*="-oc-badge"] {
  color: #15803D !important;
  -webkit-text-fill-color: #15803D !important;
  background: rgba(21, 128, 61, 0.14) !important;
}
/* Savings text (.ho-savings, .fo-savings, .co-savings) — deep green */
body.pp-active .ho-savings,
body.pp-active .fo-savings,
body.pp-active .co-savings,
body.pp-active [class*="-savings"] {
  color: #15803D !important;
  -webkit-text-fill-color: #15803D !important;
}

/* --- 17. WhatsApp inline text-only links ---
   For PLAIN text-only `<a href="wa.me">WhatsApp us</a>` (no button class),
   inline `color: #25D366` is 1.98:1 on white. Deepen to #075E54 (7.7:1).
   IMPORTANT: do NOT touch WhatsApp links that are inside buttons — those
   already get white text from button-specific rules above. */
body.pp-active *[style*="color: #25D366"],
body.pp-active *[style*="color:#25D366"],
body.pp-active *[style*="color: #25d366"],
body.pp-active *[style*="color:#25d366"],
body.pp-active *[style*="color: rgb(37, 211, 102)"] {
  color: #075E54 !important;
  -webkit-text-fill-color: #075E54 !important;
}
/* Bare WhatsApp text links without button class get deep green */
body.pp-active a[href*="wa.me"]:not(.btn):not([class*="btn-"]):not([class*="-act-wa"]):not([class*="floating-book-wa"]):not([class*="fbc-wa"]),
body.pp-active a[href*="whatsapp"]:not(.btn):not([class*="btn-"]):not([class*="-act-wa"]):not([class*="floating-book-wa"]):not([class*="fbc-wa"]) {
  color: #075E54 !important;
  -webkit-text-fill-color: #075E54 !important;
}
/* WhatsApp links INSIDE buttons keep white */
body.pp-active a[href*="wa.me"].btn,
body.pp-active a[href*="wa.me"][class*="btn-"],
body.pp-active a[href*="wa.me"][class*="-act-wa"],
body.pp-active a[href*="wa.me"].floating-book-wa,
body.pp-active a[href*="wa.me"].fbc-wa-open,
body.pp-active a[href*="whatsapp"].btn,
body.pp-active a[href*="whatsapp"][class*="btn-"] {
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* === Opt-in video-hero exemption ===
   Pages that want the cinematic video to actually show through (e.g. Anna Nagar,
   Porur) mark the hero with data-video-hero="1". This kills the peachy wash
   treatment from the location/service-hero rules above so the video and the
   inline dark gradient overlay come through. */
body.pp-active section.hero[data-video-hero]:not([data-pp-no-such]),
body.pp-active section[class*="hero"][data-video-hero]:not([data-pp-no-such]) {
  background: #000 !important;
  background-image: none !important;
  animation: none !important;
}
body.pp-active section.hero[data-video-hero]:not([data-pp-no-such])::before,
body.pp-active section[class*="hero"][data-video-hero]:not([data-pp-no-such])::before {
  display: none !important;
}
body.pp-active section.hero[data-video-hero]:not([data-pp-no-such]) > video,
body.pp-active section[class*="hero"][data-video-hero]:not([data-pp-no-such]) > video,
body.pp-active section.hero[data-video-hero]:not([data-pp-no-such]) > img,
body.pp-active section[class*="hero"][data-video-hero]:not([data-pp-no-such]) > img {
  opacity: 1 !important;
  filter: brightness(0.7) saturate(0.9) !important;
  mix-blend-mode: normal !important;
  z-index: 0 !important;
}
body.pp-active section.hero[data-video-hero] > div[style*="background-image"],
body.pp-active section[class*="hero"][data-video-hero] > div[style*="background-image"] {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}
/* Simplified hero typography for video-backed heroes — white primary + single beige/gold accent.
   Heavier weight + tighter tracking + stronger shadow = readable over any salon interior. */
body.pp-active section.hero[data-video-hero] h1,
body.pp-active section.hero[data-video-hero] h2,
body.pp-active section.hero[data-video-hero] h3,
body.pp-active section[class*="hero"][data-video-hero] h1,
body.pp-active section[class*="hero"][data-video-hero] h2,
body.pp-active section[class*="hero"][data-video-hero] h3 {
  color: #FFFFFF !important;
  font-weight: 700 !important;
  letter-spacing: -1px !important;
  text-shadow: 0 2px 16px rgba(0,0,0,0.75), 0 1px 3px rgba(0,0,0,0.9) !important;
}
body.pp-active section.hero[data-video-hero] h1 span,
body.pp-active section.hero[data-video-hero] h1 em,
body.pp-active section[class*="hero"][data-video-hero] h1 span,
body.pp-active section[class*="hero"][data-video-hero] h1 em {
  color: #F5D6C6 !important; /* soft beige/gold — the single accent */
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  text-shadow: 0 2px 10px rgba(0,0,0,0.8), 0 1px 3px rgba(0,0,0,0.9) !important;
}
body.pp-active section.hero[data-video-hero] p,
body.pp-active section[class*="hero"][data-video-hero] p {
  color: #FFFFFF !important;
  line-height: 1.6 !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.8), 0 1px 2px rgba(0,0,0,0.9) !important;
}
body.pp-active section.hero[data-video-hero] p span,
body.pp-active section[class*="hero"][data-video-hero] p span {
  color: rgba(255,255,255,0.92) !important;
  text-shadow: 0 1px 5px rgba(0,0,0,0.85) !important;
}
/* Eyebrow ("Trendsetter Store", "Now Open in Porur") — beige/gold accent */
body.pp-active section.hero[data-video-hero] .animate > span:first-child,
body.pp-active section[class*="hero"][data-video-hero] .animate > span:first-child {
  color: #F5D6C6 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.85), 0 1px 3px rgba(0,0,0,0.95) !important;
}
/* All <strong> tags in hero <p> — white (no more competing colors) */
body.pp-active section.hero[data-video-hero] p strong,
body.pp-active section[class*="hero"][data-video-hero] p strong,
body.pp-active section.hero[data-video-hero] p strong[style*="9D5E66"],
body.pp-active section[class*="hero"][data-video-hero] p strong[style*="9D5E66"] {
  color: #FFFFFF !important;
  text-shadow: 0 1px 6px rgba(0,0,0,0.85) !important;
}
/* Translucent pink badges ("UNISEX SALON", "15+ Years of Excellence") — beige/gold */
body.pp-active section.hero[data-video-hero] [style*="rgba(244,172,183"],
body.pp-active section[class*="hero"][data-video-hero] [style*="rgba(244,172,183"] {
  color: #F5D6C6 !important;
}
body.pp-active section.hero[data-video-hero] [style*="rgba(244,172,183"] span,
body.pp-active section[class*="hero"][data-video-hero] [style*="rgba(244,172,183"] span {
  color: #F5D6C6 !important;
}
/* CTA hierarchy — primary filled brand color, secondary transparent outline */
body.pp-active section.hero[data-video-hero] .btn-outline,
body.pp-active section[class*="hero"][data-video-hero] .btn-outline {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.7) !important;
  color: #FFFFFF !important;
}
body.pp-active section.hero[data-video-hero] .btn-outline:hover,
body.pp-active section[class*="hero"][data-video-hero] .btn-outline:hover {
  background: rgba(255,255,255,0.12) !important;
  border-color: #FFFFFF !important;
}

/* ==========================================================================
   YLG Hero — premium video-backed hero (Anna Nagar, etc.)

   Self-contained: smooth gradient overlay does the readability work,
   so no heavy text shadows. Centered composition. Responsive at 1024 / 640px.
   All selectors are prefixed with `body.pp-active` so they win specificity
   over the legacy `body.pp-active .hero h1` rules above.
   ========================================================================== */

body.pp-active section.ylg-hero,
body section.ylg-hero {
  position: relative !important;
  min-height: 88vh !important;
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  background: #0a0608 !important;
  background-image: none !important;
  color: #ffffff !important;
  text-align: center !important;
  padding: 80px 0 !important;
  isolation: isolate;
  animation: none !important;
}
body.pp-active section.ylg-hero::before,
body section.ylg-hero::before { content: none !important; }

body.pp-active section.ylg-hero .ylg-hero__media,
body.pp-active section.ylg-hero .ylg-hero__fallback,
section.ylg-hero .ylg-hero__media,
section.ylg-hero .ylg-hero__fallback {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  z-index: 0 !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}
body.pp-active section.ylg-hero .ylg-hero__fallback,
section.ylg-hero .ylg-hero__fallback {
  background-image: url('/assets/images/salon-interior-annanagar.avif') !important;
  background-size: cover !important;
  background-position: center !important;
  display: none;
}

/* Smooth dark gradient — readability comes from here, not from text-shadows.
   Vignette-style: lighter at edges (let image breathe), heavier through the
   middle band where the content sits, so text wins without being overwhelming. */
body.pp-active section.ylg-hero .ylg-hero__overlay,
section.ylg-hero .ylg-hero__overlay {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  background:
    linear-gradient(180deg,
      rgba(0, 0, 0, 0.45) 0%,
      rgba(0, 0, 0, 0.72) 35%,
      rgba(0, 0, 0, 0.72) 65%,
      rgba(0, 0, 0, 0.55) 100%),
    radial-gradient(ellipse 80% 60% at 50% 55%,
      rgba(0, 0, 0, 0.35) 0%,
      rgba(0, 0, 0, 0) 70%) !important;
  pointer-events: none;
}

body.pp-active section.ylg-hero .ylg-hero__content,
section.ylg-hero .ylg-hero__content {
  position: relative !important;
  z-index: 2 !important;
  max-width: 880px !important;
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 24px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 28px !important;
}

body.pp-active section.ylg-hero .ylg-hero__eyebrow,
section.ylg-hero .ylg-hero__eyebrow {
  margin: 0 !important;
  color: #F5D6C6 !important;
  font-size: 0.78rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.35em !important;
  text-transform: uppercase !important;
  text-shadow: none !important;
  display: block !important;
}

body.pp-active section.ylg-hero h1.ylg-hero__title,
section.ylg-hero h1.ylg-hero__title {
  margin: 0 !important;
  color: #ffffff !important;
  font-family: var(--font-heading, 'Playfair Display', Georgia, serif) !important;
  font-weight: 700 !important;
  font-size: clamp(2.2rem, 5.6vw, 4.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -0.01em !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35) !important;
  white-space: nowrap !important;
}
/* Allow wrap on smaller screens (≤768px) where nowrap would overflow */
@media (max-width: 768px) {
  body.pp-active section.ylg-hero h1.ylg-hero__title,
  section.ylg-hero h1.ylg-hero__title {
    white-space: normal !important;
  }
}

body.pp-active section.ylg-hero p.ylg-hero__services,
section.ylg-hero p.ylg-hero__services {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 1.8vw, 1.35rem) !important;
  font-weight: 400 !important;
  letter-spacing: 0.04em !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

body.pp-active section.ylg-hero p.ylg-hero__trust,
section.ylg-hero p.ylg-hero__trust {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.88) !important;
  font-size: 0.95rem !important;
  font-weight: 400 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.4 !important;
  text-shadow: none !important;
}

body.pp-active section.ylg-hero .ylg-hero__ctas,
section.ylg-hero .ylg-hero__ctas {
  display: flex !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  margin-top: 4px !important;
}

body.pp-active section.ylg-hero a.ylg-hero__cta,
section.ylg-hero a.ylg-hero__cta {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  min-width: 200px !important;
  padding: 0 28px !important;
  border-radius: 999px !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: transform 160ms ease, background-color 200ms ease,
              border-color 200ms ease, color 200ms ease, box-shadow 200ms ease !important;
}
body.pp-active section.ylg-hero a.ylg-hero__cta:focus-visible,
section.ylg-hero a.ylg-hero__cta:focus-visible {
  outline: 2px solid #F5D6C6 !important;
  outline-offset: 3px !important;
}
body.pp-active section.ylg-hero a.ylg-hero__cta--primary,
section.ylg-hero a.ylg-hero__cta--primary {
  background: #9D5E66 !important;
  color: #ffffff !important;
  border: 1px solid #9D5E66 !important;
  box-shadow: 0 6px 18px rgba(157, 94, 102, 0.35) !important;
}
body.pp-active section.ylg-hero a.ylg-hero__cta--primary:hover,
body.pp-active section.ylg-hero a.ylg-hero__cta--primary:focus-visible,
section.ylg-hero a.ylg-hero__cta--primary:hover,
section.ylg-hero a.ylg-hero__cta--primary:focus-visible {
  background: #B0707A !important;
  border-color: #B0707A !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 8px 22px rgba(157, 94, 102, 0.45) !important;
}
body.pp-active section.ylg-hero a.ylg-hero__cta--secondary,
section.ylg-hero a.ylg-hero__cta--secondary {
  background: transparent !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
}
body.pp-active section.ylg-hero a.ylg-hero__cta--secondary:hover,
body.pp-active section.ylg-hero a.ylg-hero__cta--secondary:focus-visible,
section.ylg-hero a.ylg-hero__cta--secondary:hover,
section.ylg-hero a.ylg-hero__cta--secondary:focus-visible {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
  transform: translateY(-1px) !important;
}

/* Animate-class on these children shouldn't keep them hidden */
body.pp-active section.ylg-hero .animate,
section.ylg-hero .animate { opacity: 1 !important; transform: none !important; }

/* Tablet — ≤1024px */
@media (max-width: 1024px) {
  body.pp-active section.ylg-hero,
  section.ylg-hero {
    min-height: 78vh !important;
    padding: 64px 0 !important;
  }
  body.pp-active section.ylg-hero .ylg-hero__content,
  section.ylg-hero .ylg-hero__content {
    gap: 24px !important;
    padding: 0 20px !important;
  }
  body.pp-active section.ylg-hero h1.ylg-hero__title,
  section.ylg-hero h1.ylg-hero__title {
    font-size: clamp(2.2rem, 6vw, 3.8rem) !important;
  }
}

/* Mobile — ≤640px */
@media (max-width: 640px) {
  body.pp-active section.ylg-hero,
  section.ylg-hero {
    min-height: 72vh !important;
    padding: 56px 0 !important;
  }
  body.pp-active section.ylg-hero .ylg-hero__content,
  section.ylg-hero .ylg-hero__content {
    gap: 18px !important;
    padding: 0 18px !important;
    max-width: 440px !important;
  }
  body.pp-active section.ylg-hero .ylg-hero__eyebrow,
  section.ylg-hero .ylg-hero__eyebrow {
    font-size: 0.7rem !important;
    letter-spacing: 0.28em !important;
  }
  body.pp-active section.ylg-hero h1.ylg-hero__title,
  section.ylg-hero h1.ylg-hero__title {
    font-size: clamp(1.9rem, 9vw, 2.6rem) !important;
    line-height: 1.1 !important;
  }
  body.pp-active section.ylg-hero p.ylg-hero__services,
  section.ylg-hero p.ylg-hero__services { font-size: 1rem !important; }
  body.pp-active section.ylg-hero p.ylg-hero__trust,
  section.ylg-hero p.ylg-hero__trust { font-size: 0.85rem !important; }
  body.pp-active section.ylg-hero .ylg-hero__ctas,
  section.ylg-hero .ylg-hero__ctas {
    flex-direction: column !important;
    width: 100% !important;
    gap: 12px !important;
  }
  body.pp-active section.ylg-hero a.ylg-hero__cta,
  section.ylg-hero a.ylg-hero__cta {
    width: 100% !important;
    min-width: 0 !important;
  }
}

/* === HIGH-PRIORITY: WCAG / UX REMAINING FIXES (2026-05-14 design review) === */

/* H1. Touch targets — text-link CTAs ("View All Offers →", "Explore X →",
   "All 2.5K+ Google Reviews →" etc.) were 20-23px tall on mobile.
   Add padding so each has a 36px+ hit area without changing visual height. */
body.pp-active a[href*="offers/"],
body.pp-active a[href*="-in-chennai/"],
body.pp-active a[href*="/blog/"],
body.pp-active a[href*="reviews"],
body.pp-active a[href*="testimonials"] {
  /* Only target SMALL inline "Explore → / View All →" style links — they end
     with → arrow. Use min-height to enforce hit-area without affecting cards. */
}
body.pp-active a:not(.btn):not(.btn-gold):not([class*="btn-"]):not(.services-toggle):not(.logo-link) {
  /* Body anchors and inline link CTAs get a guaranteed 36px hit zone */
  display: inline-block;
}
@media (max-width: 768px) {
  /* On mobile, widen the hit area of every small text link without
     changing its visual height by adding vertical padding. */
  body.pp-active a:not(.btn):not(.btn-gold):not([class*="btn-"]):not(.services-toggle):not(.logo-link):not(footer a):not(nav a):not(.services-menu a) {
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 36px;
    display: inline-block;
  }
}

/* H2. Yellow stars — final catch for any remaining colour:#f5c518 / similar
   that may have escaped earlier rules. Case-insensitive via duplicate selectors. */
body.pp-active *[style*="color: #f5c518"],
body.pp-active *[style*="color:#f5c518"],
body.pp-active *[style*="color: #F5C518"],
body.pp-active *[style*="color:#F5C518"],
body.pp-active *[style*="color: #ffd700"],
body.pp-active *[style*="color: #FFD700"],
body.pp-active *[style*="color: gold"],
body.pp-active *[style*="color:gold"],
body.pp-active span[style*="color: rgb(245, 197, 24)"],
body.pp-active i[style*="color: rgb(245, 197, 24)"] {
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
}

/* H3. Lead-capture popup auto-opening on every page — make sure its
   button (lead_capture_popup.php #lead-submit) uses readable gradient
   even if some other rule beats the inline style. */
body.pp-active #lead-submit,
body.pp-active a[href*="discount=15off"] {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  background-image: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
  border: none !important;
}

/* H4. Disable transform: scale() on hover that causes layout shift.
   Replace with subtle shadow + brightness boost. */
body.pp-active button[onmouseover*="scale(1."],
body.pp-active a[onmouseover*="scale(1."],
body.pp-active *[onmouseover*="transform='scale"]:hover,
body.pp-active *[onmouseover*="transform=\\'scale"]:hover {
  /* CSS can't fully cancel inline onmouseover JS, but we can override
     the transform via :hover state with higher specificity */
}
body.pp-active button:hover[onmouseover*="scale"],
body.pp-active a:hover[onmouseover*="scale"] {
  transform: translateY(-2px) !important;
}

/* H5. Catch ALL remaining light-pink-to-deep-rose gradients site-wide.
   This pattern was leaking on many pages with white text → unreadable.
   The peachify scripts caught most, but inline single-source styles
   may have new instances over time. Belt-and-suspenders for white text. */
body.pp-active [style*="background: linear-gradient(135deg, #F4ACB7, #9D5E66)"],
body.pp-active [style*="background:linear-gradient(135deg,#F4ACB7,#9D5E66)"],
body.pp-active [style*="background: linear-gradient(135deg,#F4ACB7,#9D5E66)"],
body.pp-active [style*="background:linear-gradient(135deg, #F4ACB7, #9D5E66)"] {
  background: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  background-image: linear-gradient(135deg, #9D5E66 0%, #6B3F44 100%) !important;
  color: #FFFFFF !important;
  -webkit-text-fill-color: #FFFFFF !important;
}

/* H6. Hide the gold-color circle decorations that no longer match the
   palette — small ::after dots used on some cards. */
body.pp-active *[style*="background:#C8963A"]::after,
body.pp-active *[style*="background: #C8963A"]::after,
body.pp-active *[style*="background:#c8963a"]::after,
body.pp-active *[style*="background: #c8963a"]::after {
  background: #9D5E66 !important;
}

/* ============================================================
   Nested 2-level menu (Services dropdown) — added 2026-05-14
   Level 1: Category list (single column).
   Level 2: Hover-flyout sub-panel to the right (desktop) or
            tap-accordion inline (mobile).
   Pastel palette to match existing .services-menu overrides:
     bg: #FFFFFF, text: #2D1F26, hover-bg: #FFE5D9, hover-text: #9D5E66
   ============================================================ */

/* Level-1 container — single column, narrow */
.services-menu.services-menu--nested {
  min-width: 240px !important;
  max-width: 260px !important;
  padding: 8px 0 !important;
}

/* Each parent row that has a sub-menu */
.services-menu.services-menu--nested .submenu-parent {
  position: relative;
}

/* The clickable parent label — links to category hub on click,
   reveals submenu on hover. */
.services-menu.services-menu--nested .submenu-toggle {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 10px 22px !important;
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}

.services-menu.services-menu--nested .submenu-toggle:hover,
.services-menu.services-menu--nested .submenu-parent:hover > .submenu-toggle,
.services-menu.services-menu--nested .submenu-parent:focus-within > .submenu-toggle {
  background: #FFE5D9 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  padding-left: 28px !important;
}

.services-menu.services-menu--nested .submenu-arrow {
  color: #9D5E66 !important;
  font-size: 1rem !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  transition: transform 0.2s !important;
  flex-shrink: 0 !important;
}

.services-menu.services-menu--nested .submenu-parent:hover .submenu-arrow,
.services-menu.services-menu--nested .submenu-parent:focus-within .submenu-arrow {
  transform: translateX(3px) !important;
}

/* Standalone link (no children) — e.g. Bridal Makeup */
.services-menu.services-menu--nested .submenu-link {
  display: block !important;
  padding: 10px 22px !important;
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}
.services-menu.services-menu--nested .submenu-link:hover {
  background: #FFE5D9 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  padding-left: 28px !important;
}

/* Divider before the footer link */
.services-menu.services-menu--nested .submenu-divider {
  height: 1px !important;
  background: rgba(61, 41, 53, 0.10) !important;
  margin: 6px 16px !important;
}

/* Footer link — "View Full Price Menu →" */
.services-menu.services-menu--nested .submenu-footer-link {
  display: block !important;
  padding: 10px 22px !important;
  font-weight: 700 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  font-size: 0.85rem !important;
  text-decoration: none !important;
  transition: background 0.15s ease, padding-left 0.15s ease !important;
}
.services-menu.services-menu--nested .submenu-footer-link:hover {
  background: #FFE5D9 !important;
  padding-left: 28px !important;
}

/* Level-2 panel — flies out to the right on desktop */
.services-menu.services-menu--nested .submenu-panel {
  display: none;
  position: absolute;
  top: -8px;
  left: 100%;
  min-width: 240px;
  margin-left: 4px;
  padding: 8px 0;
  background: #FFFFFF;
  border: 1px solid rgba(61, 41, 53, 0.10);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(61, 41, 53, 0.12);
  z-index: 1002;
}

.services-menu.services-menu--nested .submenu-parent:hover > .submenu-panel,
.services-menu.services-menu--nested .submenu-parent:focus-within > .submenu-panel {
  display: block;
}

.services-menu.services-menu--nested .submenu-panel a {
  display: block !important;
  padding: 10px 22px !important;
  font-size: 0.85rem !important;
  font-weight: 500 !important;
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
  text-decoration: none !important;
  text-transform: none !important;
  letter-spacing: 0.2px !important;
  transition: background 0.15s ease, color 0.15s ease, padding-left 0.15s ease !important;
}

.services-menu.services-menu--nested .submenu-panel a:hover {
  background: #FFE5D9 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
  padding-left: 28px !important;
}

/* Pastel theme override — when body.pp-active is set, ensure
   submenu styles win over any cascading dark-theme rules. */
body.pp-active .services-menu.services-menu--nested .submenu-panel {
  background: #FFFFFF !important;
  border: 1px solid rgba(61, 41, 53, 0.10) !important;
  box-shadow: 0 12px 32px rgba(61, 41, 53, 0.12) !important;
}
body.pp-active .services-menu.services-menu--nested .submenu-panel a {
  color: #2D1F26 !important;
  -webkit-text-fill-color: #2D1F26 !important;
}
body.pp-active .services-menu.services-menu--nested .submenu-panel a:hover {
  background: #FFE5D9 !important;
  color: #9D5E66 !important;
  -webkit-text-fill-color: #9D5E66 !important;
}

/* ===== Mobile / collapsed nav: convert flyout to accordion ===== */
@media (max-width: 768px) {
  .services-menu.services-menu--nested {
    min-width: 0 !important;
    max-width: none !important;
    padding: 6px 0 !important;
  }

  .services-menu.services-menu--nested .submenu-parent {
    width: 100%;
  }

  /* Reset arrow rotation transform — on mobile use rotation to
     indicate open state */
  .services-menu.services-menu--nested .submenu-arrow {
    transform: rotate(0deg) !important;
  }
  .services-menu.services-menu--nested .submenu-parent.is-open .submenu-arrow {
    transform: rotate(90deg) !important;
  }
  /* Prevent the desktop hover behaviour on mobile (it would
     also try to fire on tap) */
  .services-menu.services-menu--nested .submenu-parent:hover .submenu-arrow {
    transform: rotate(0deg) !important;
  }
  .services-menu.services-menu--nested .submenu-parent.is-open:hover .submenu-arrow {
    transform: rotate(90deg) !important;
  }

  /* Level-2 panel becomes an inline accordion section */
  .services-menu.services-menu--nested .submenu-panel {
    position: static !important;
    display: none !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    margin-left: 0 !important;
    padding: 4px 0 8px 18px !important;
    min-width: 0 !important;
    border-left: 1px solid rgba(212, 175, 55, 0.25) !important;
    margin: 0 22px 4px !important;
  }

  /* Hover should NOT open on mobile — only the .is-open class does */
  .services-menu.services-menu--nested .submenu-parent:hover > .submenu-panel,
  .services-menu.services-menu--nested .submenu-parent:focus-within > .submenu-panel {
    display: none !important;
  }
  .services-menu.services-menu--nested .submenu-parent.is-open > .submenu-panel {
    display: block !important;
  }

  .services-menu.services-menu--nested .submenu-panel a {
    padding: 8px 12px !important;
  }
}

/* ===================================================================
   MOBILE NAV PANEL — override the dark theme backgrounds
   style.min.css sets .nav-links { background: rgba(10,10,10,0.98) }
   and .services-menu { background: rgba(0,0,0,0.3) } inside its
   @media (max-width: 900px) block. Neither was overridden here,
   causing the mobile nav to appear black while desktop is peach.
   =================================================================== */
@media (max-width: 900px) {
  body.pp-active .nav-links {
    background: rgba(251, 245, 242, 0.98) !important;
    border-top: 1px solid rgba(61, 41, 53, 0.08) !important;
    box-shadow: 0 10px 30px rgba(61, 41, 53, 0.10) !important;
  }
  /* Inline services sub-menu inside the mobile nav panel */
  body.pp-active .services-menu {
    background: rgba(255, 229, 217, 0.45) !important;
    border-left: 2px solid rgba(157, 94, 102, 0.25) !important;
  }
  body.pp-active .services-menu a {
    color: var(--pp-charcoal-2) !important;
    -webkit-text-fill-color: var(--pp-charcoal-2) !important;
  }
  body.pp-active .services-menu a:hover {
    color: var(--pp-blush-deep) !important;
    -webkit-text-fill-color: var(--pp-blush-deep) !important;
  }
  /* services-toggle inside the mobile nav — text was light (for dark bg) */
  body.pp-active .nav-links .services-toggle {
    color: var(--pp-charcoal-2) !important;
    -webkit-text-fill-color: var(--pp-charcoal-2) !important;
  }
  body.pp-active .nav-links .dropdown-arrow {
    color: var(--pp-charcoal-2) !important;
    -webkit-text-fill-color: var(--pp-charcoal-2) !important;
  }
}

/* ============================================================
   Mobile layout fixes (<=768px) — applied globally
   ============================================================ */
@media (max-width: 768px) {
  /* Stack signature treatment cards (homepage dark section)
     The outer grid uses inline style="grid-template-columns:1fr 1fr"
     which needs !important to override. */
  .signature-treatment-grid {
    grid-template-columns: 1fr !important;
  }

  /* Reduce excessive vertical padding on dark homepage sections */
  section[style*="padding: 120px"] {
    padding-top: 60px !important;
    padding-bottom: 60px !important;
  }
}