/* ============================================================
   Deruja Beauty Hub & Lounge — shared styles
   ============================================================ */

:root {
  --ink: #241f1c;
  --ink-soft: #5c534c;
  --rose-light: #f8c9db;
  --rose: #f4a8c7;
  --rose-dark: #d35f86;
  --rose-deep: #b8476c;
  --blush: #f9ebec;
  --blush-deep: #f6dde3;
  --wash: #fdf5f6;
  --wash-deep: #fbeef2;
  --cream: #faf7f2;
  --cream-2: #f3ece4;
  --text-dark: #241f1c;
  --text-muted: #6b6058;
  --shadow: 0 12px 30px rgba(36, 31, 28, 0.1);
  --radius: 18px;
  --serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Poppins', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  color: var(--text-dark);
  /* One continuous soft gradient down the whole page, instead of each
     section carrying its own flat block colour — sections without their
     own opaque background (plain <section>, .section-alt) just show
     through to this, so the page reads as one flowing wash rather than
     stacked boxes. Percentages are relative to body's full rendered
     height, so this naturally spans the entire page, not just one screen. */
  background: linear-gradient(180deg,
    var(--cream) 0%,
    var(--wash) 14%,
    var(--cream) 30%,
    var(--wash-deep) 48%,
    var(--cream-2) 64%,
    var(--wash) 82%,
    var(--cream) 100%
  );
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }

.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}

.eyebrow {
  display: inline-block;
  font-family: var(--sans);
  letter-spacing: 3px;
  text-transform: uppercase;
  font-size: 0.78rem;
  color: var(--rose-dark);
  font-weight: 600;
  margin-bottom: 10px;
}

h1, h2, h3, h4 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 0 0 14px;
  line-height: 1.15;
}

h2.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  text-align: center;
}

.accent-word { color: var(--rose-dark); font-style: italic; }

p.section-lead {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 44px;
  color: var(--text-muted);
  font-size: 1.02rem;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.4px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.btn-gold {
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  color: #fff;
  box-shadow: 0 8px 20px rgba(211, 95, 134, 0.4);
}
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(211, 95, 134, 0.5); }

.btn-outline {
  background: transparent;
  border-color: var(--rose-dark);
  color: var(--rose-dark);
}
.btn-outline:hover { background: rgba(211, 95, 134, 0.1); transform: translateY(-3px); }

.btn-outline-dark {
  background: transparent;
  border-color: var(--ink);
  color: var(--ink);
}
.btn-outline-dark:hover { background: var(--ink); color: var(--cream); }

/* ---------------- NAVBAR ---------------- */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  padding: 18px 0;
  transition: background 0.35s ease, padding 0.35s ease, box-shadow 0.35s ease;
}
.navbar.solid {
  background: rgba(250, 247, 242, 0.96);
  padding: 10px 0;
  box-shadow: 0 6px 20px rgba(36, 31, 28, 0.1);
  backdrop-filter: blur(6px);
}
.navbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand img { width: 46px; height: 46px; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-text .name {
  font-family: var(--serif);
  font-size: 1.15rem;
  color: var(--ink);
  letter-spacing: 1px;
}
.brand-text .tag {
  font-size: 0.62rem;
  letter-spacing: 2px;
  color: var(--ink-soft);
  opacity: 0.85;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}
.nav-links a {
  color: var(--ink);
  font-weight: 500;
  font-size: 0.93rem;
  letter-spacing: 0.4px;
  position: relative;
  padding: 6px 0;
}
.nav-links a::after {
  content: '';
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--rose-dark);
  transition: width 0.3s ease;
}
.nav-links a:hover::after, .nav-links a.active::after { width: 100%; }
.nav-links a.active { color: var(--rose-dark); }

.nav-cta { display: flex; align-items: center; gap: 18px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 26px; height: 2px; background: var(--ink); border-radius: 2px; }

/* ---------------- HERO ---------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  /* Off-white does the work here, not pink — a flat warm cream base, with
     the soft rose glow coming entirely from .hero-bg-glow below (a small,
     contained highlight) rather than a big pink-dominant radial that only
     reaches cream at the far edges. */
  background: var(--cream);
}

.hero-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  z-index: 0;
  display: none;
}
.hero-photo-overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: none;
  /* Directional, not uniform: the top (where a portrait's face usually
     sits) stays nearly untouched, darkening builds up toward the bottom
     where the text block lives once .has-photo pins it there — the photo
     reads clearly, the text still has full contrast. */
  background: linear-gradient(180deg,
    rgba(20,14,11,0.02) 0%,
    rgba(20,14,11,0.08) 40%,
    rgba(20,14,11,0.38) 68%,
    rgba(20,14,11,0.72) 88%,
    rgba(20,14,11,0.85) 100%);
}
.hero.has-photo { align-items: flex-end; }
.hero.has-photo .hero-content { padding-top: 0; padding-bottom: 110px; }
.hero.has-photo .hero-mandala { opacity: 0.25; }
.hero.has-photo .hero-photo,
.hero.has-photo .hero-photo-overlay { display: block; }
.hero.has-photo .eyebrow-row .txt,
.hero.has-photo .hero-tamil { color: var(--rose-light); }
.hero.has-photo .hero-title,
.hero.has-photo .hero-sub {
  color: var(--cream);
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.hero.has-photo .hero-title { font-size: clamp(2.2rem, 5.6vw, 4rem); }
.hero.has-photo .hero-title span { color: var(--rose-light); }
.hero.has-photo .scroll-cue { color: var(--cream); }
.hero.has-photo .scroll-cue .dot,
.hero.has-photo .scroll-cue .dot::after { border-color: var(--cream); background: var(--cream); }
@media (max-width: 640px) {
  .hero.has-photo .hero-content { padding-bottom: 80px; }
}

.hero-bg-glow {
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(circle at 15% 80%, rgba(211,95,134,0.22), transparent 42%),
    radial-gradient(circle at 85% 15%, rgba(211,95,134,0.18), transparent 38%);
  animation: glowShift 12s ease-in-out infinite alternate;
}
@keyframes glowShift {
  0% { opacity: 0.7; transform: scale(1); }
  100% { opacity: 1; transform: scale(1.08); }
}

.hero-mandala {
  position: absolute;
  top: 50%; left: 50%;
  width: 900px; height: 900px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1px dashed rgba(211, 95, 134, 0.22);
  animation: spinSlow 90s linear infinite;
  pointer-events: none;
  z-index: 2;
}
.hero-mandala::before,
.hero-mandala::after {
  content: '';
  position: absolute;
  inset: 60px;
  border-radius: 50%;
  border: 1px dashed rgba(211, 95, 134, 0.15);
}
.hero-mandala::after { inset: 140px; border-style: solid; border-color: rgba(211, 95, 134, 0.1); }
@keyframes spinSlow {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}

.petals { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 3; }
.petal {
  position: absolute;
  top: -40px;
  width: 14px; height: 14px;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  clip-path: path('M7,0 C11,4 11,10 7,14 C3,10 3,4 7,0 Z');
  opacity: 0.85;
  animation-name: fall;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}
@keyframes fall {
  0% { transform: translateY(-5vh) translateX(0) rotate(0deg); opacity: 0; }
  10% { opacity: 0.9; }
  100% { transform: translateY(105vh) translateX(var(--drift, 40px)) rotate(360deg); opacity: 0.2; }
}

.sparkles { position: absolute; inset: 0; pointer-events: none; z-index: 3; }
.sparkle {
  position: absolute;
  width: 6px; height: 6px;
  background: var(--rose-dark);
  border-radius: 50%;
  box-shadow: 0 0 8px 2px rgba(211,95,134,0.55);
  animation: twinkle 2.6s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.7); }
  50% { opacity: 1; transform: scale(1.2); }
}

.hero-content {
  position: relative;
  z-index: 4;
  text-align: center;
  width: 100%;
  padding-top: 90px;
}
.hero-content .eyebrow-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-bottom: 18px;
  opacity: 0;
  animation: riseIn 0.9s ease forwards 0.15s;
}
.hero-content .eyebrow-row .line { width: 40px; height: 1px; background: var(--rose-dark); }
.hero-content .eyebrow-row span.txt {
  color: var(--rose-dark);
  letter-spacing: 4px;
  font-size: 0.8rem;
  text-transform: uppercase;
  font-weight: 600;
}

.hero-title {
  font-size: clamp(2.4rem, 6.5vw, 4.6rem);
  color: var(--ink);
  margin: 0 auto 18px;
  max-width: 900px;
  opacity: 0;
  animation: riseIn 1s ease forwards 0.35s;
}
.hero-title span { color: var(--rose-dark); font-style: italic; }

.hero-sub {
  max-width: 620px;
  margin: 0 auto 14px;
  color: var(--ink-soft);
  font-size: 1.08rem;
  opacity: 0;
  animation: riseIn 1s ease forwards 0.55s;
}
.hero-tamil {
  color: var(--rose-dark);
  font-size: 1rem;
  letter-spacing: 0.5px;
  margin-bottom: 34px;
  opacity: 0;
  animation: riseIn 1s ease forwards 0.7s;
}

.hero-actions {
  display: flex;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  opacity: 0;
  animation: riseIn 1s ease forwards 0.85s;
}

@keyframes riseIn {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-jewel-border {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 34px;
  background-repeat: repeat-x;
  background-size: 44px 34px;
  background-image: radial-gradient(circle at 50% 0%, var(--rose-dark) 0 6px, transparent 7px);
  opacity: 0.3;
}

.scroll-cue {
  position: absolute;
  bottom: 26px; left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: var(--rose-dark);
  font-size: 0.7rem;
  letter-spacing: 2px;
  opacity: 0.85;
}
.scroll-cue .dot {
  width: 6px; height: 10px;
  border: 1.5px solid var(--rose-dark);
  border-radius: 6px;
  position: relative;
}
.scroll-cue .dot::after {
  content: '';
  position: absolute;
  top: 2px; left: 50%; transform: translateX(-50%);
  width: 2px; height: 3px;
  background: var(--rose-dark);
  border-radius: 2px;
  animation: bounceDown 1.6s ease-in-out infinite;
}
@keyframes bounceDown {
  0% { top: 2px; opacity: 1; }
  70% { top: 8px; opacity: 0; }
  100% { top: 2px; opacity: 0; }
}

/* ---------------- REVEAL ON SCROLL ---------------- */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------------- SECTIONS GENERIC ---------------- */
section { padding: 90px 0; }
/* .section-alt intentionally has no background of its own — it shows
   through to body's continuous gradient (see body { background: ... }
   above), which is what keeps sections flowing into each other instead
   of reading as separate flat-coloured blocks. */

.page-hero {
  position: relative;
  padding: 170px 0 80px;
  text-align: center;
  color: var(--ink);
  /* Cream base with a small contained glow, not a pink-dominant radial —
     same reasoning as .hero above. */
  background:
    radial-gradient(ellipse 55% 70% at 50% 0%, var(--blush-deep) 0%, transparent 70%),
    var(--cream);
  overflow: hidden;
}
.page-hero .eyebrow { color: var(--rose-dark); }
.page-hero h1 { color: var(--ink); }
.page-hero p { color: var(--ink-soft); max-width: 560px; margin: 0 auto; }

/* ---------------- ABOUT STRIP (home) ---------------- */
.about-strip {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 50px;
  align-items: start;
}
.about-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4/5;
  max-width: 420px;
  margin: 0 auto;
  background: linear-gradient(135deg, var(--blush), var(--blush-deep));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow);
}
.about-media .about-photo { width: 100%; height: 100%; object-fit: cover; }
.about-media::before {
  content: '';
  position: absolute; inset: 14px;
  border: 1.5px solid rgba(211, 95, 134, 0.35);
  border-radius: calc(var(--radius) - 6px);
  pointer-events: none;
}
.about-text .eyebrow { color: var(--rose-dark); }
.about-text p { color: var(--text-muted); margin-bottom: 16px; line-height: 1.75; }
.about-points { display: grid; gap: 12px; margin: 22px 0 26px; }
.about-points li { display: flex; gap: 10px; align-items: flex-start; color: var(--text-dark); font-weight: 500; }
.about-points li .ico { color: var(--rose-dark); font-size: 1.05rem; }

.qualifications { margin: 8px 0 30px; }
.qualifications h4 {
  font-family: var(--sans); font-size: 0.8rem; letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: 14px;
}
.qual-card {
  background: var(--cream-2); border-left: 3px solid var(--rose-dark);
  border-radius: 10px; padding: 16px 20px; margin-bottom: 12px;
}
.qual-card h5 { font-family: var(--serif); color: var(--ink); font-size: 1rem; margin: 0 0 8px; }
.qual-card ul { display: grid; gap: 6px; }
.qual-card li { color: var(--text-muted); font-size: 0.9rem; line-height: 1.55; padding-left: 16px; position: relative; }
.qual-card li::before { content: '•'; position: absolute; left: 0; color: var(--rose-dark); }

/* ---------------- SERVICE CARDS (home preview + services page) ---------------- */
.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
  gap: 26px;
}
.service-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 34px 26px;
  text-align: center;
  box-shadow: 0 10px 26px rgba(36,31,28,0.06);
  border: 1px solid rgba(211,95,134,0.18);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  position: relative;
}
.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 36px rgba(36,31,28,0.12);
  border-color: var(--rose-dark);
}
.service-card .icon-wrap {
  width: 66px; height: 66px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem;
  color: #fff;
  box-shadow: 0 8px 16px rgba(211,95,134,0.35);
  flex-shrink: 0;
}
/* Custom line-icon set (replaces platform-dependent emoji, which render
   inconsistently — some as broken/tofu glyphs — across different phones,
   browsers and OSes). Fixed pixel size keeps every icon identical on
   every device and at every screen width, unlike emoji glyphs which
   scale and render per the visitor's own system font. */
.service-card .icon-wrap svg { width: 30px; height: 30px; }
.service-card h3 { font-size: 1.15rem; margin-bottom: 8px; }
.service-card p { color: var(--text-muted); font-size: 0.92rem; line-height: 1.6; margin: 0; }
.service-card .badge {
  position: absolute; top: 16px; right: 16px;
  font-size: 0.62rem; letter-spacing: 1px;
  background: var(--rose-dark); color: #fff;
  padding: 4px 10px; border-radius: 20px; font-weight: 600;
}

/* Services page: alternate list-style detail rows */
.service-detail {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 22px;
  align-items: flex-start;
  padding: 26px 0;
  border-bottom: 1px solid rgba(36,31,28,0.08);
}
.service-detail:last-child { border-bottom: none; }
.service-detail .num {
  font-family: var(--serif);
  font-size: 2.2rem;
  color: var(--rose-dark);
  opacity: 0.85;
}
.service-detail h3 { margin-bottom: 6px; }
.service-detail p { color: var(--text-muted); margin: 0; line-height: 1.7; }
.service-detail .tags { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; }
.service-detail .tags span {
  font-size: 0.72rem; letter-spacing: 0.5px;
  background: var(--cream-2); color: var(--rose-dark);
  padding: 4px 12px; border-radius: 20px; font-weight: 600;
}

/* ---------------- BOOKING AVAILABILITY WIDGET (public, read-only) ---------------- */
/* Sits top-right of the Services page-hero on desktop; falls back to a
   normal centered block, stacked below the hero text, on small screens. */
.availability-widget {
  position: absolute; top: 28px; right: 28px; z-index: 3;
  background: #fff; border-radius: 14px; box-shadow: var(--shadow);
  padding: 14px 16px; width: 230px; text-align: left;
}
.avail-widget-title {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase;
  color: var(--rose-dark); margin-bottom: 8px; text-align: center;
}
.avail-header {
  display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px;
}
.avail-header h3 { margin: 0; font-family: var(--serif); font-size: 0.85rem; }
.avail-header button {
  width: 22px; height: 22px; border-radius: 50%; border: 1.5px solid var(--rose);
  background: none; color: var(--rose-dark); font-size: 0.8rem; cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; padding: 0;
}
.avail-header button:hover { background: var(--blush); }
.avail-weekdays, .avail-grid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px;
}
.avail-weekdays span {
  text-align: center; font-size: 0.6rem; font-weight: 600; color: var(--text-muted);
}
.avail-day {
  aspect-ratio: 1; display: flex; align-items: center; justify-content: center;
  border-radius: 5px; background: var(--cream-2); font-size: 0.66rem; color: var(--text-dark);
}
.avail-day.empty { background: none; }
.avail-day.today { box-shadow: inset 0 0 0 1.3px var(--rose-dark); font-weight: 700; }
.avail-day.booked { background: var(--rose); color: #fff; font-weight: 700; }
.avail-legend {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-top: 10px; font-size: 0.62rem; color: var(--text-muted);
}
.avail-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 3px; margin-right: 4px;
  vertical-align: middle;
}
.avail-dot.booked { background: var(--rose); }
.avail-dot.today { background: var(--cream-2); box-shadow: inset 0 0 0 1.3px var(--rose-dark); }

.page-hero.has-availability { padding-bottom: 320px; }

@media (max-width: 760px) {
  .page-hero.has-availability { padding-bottom: 80px; }
  .availability-widget { position: static; width: 100%; max-width: 280px; margin: 28px auto 0; }
}

/* ---------------- GALLERY ---------------- */
.gallery-filter {
  display: flex; justify-content: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 40px;
}
.gallery-filter button {
  border: 1.5px solid var(--rose-dark);
  background: transparent;
  color: var(--rose-dark);
  padding: 9px 20px;
  border-radius: 30px;
  font-family: var(--sans);
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.25s ease;
}
.gallery-filter button.active,
.gallery-filter button:hover {
  background: var(--rose-dark);
  color: #fff;
  border-color: var(--rose-dark);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 22px;
}
.gallery-item {
  display: block;
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 24px rgba(36,31,28,0.1);
  aspect-ratio: 4/3;
}
.gallery-item img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .gi-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(36,20,14,0.82), transparent 60%);
  display: flex; align-items: flex-end; padding: 16px;
  opacity: 0; transition: opacity 0.35s ease;
}
.gallery-item:hover .gi-overlay { opacity: 1; }
.gallery-item .gi-overlay span { color: #fff; font-weight: 600; font-size: 0.9rem; letter-spacing: 0.5px; }

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(20,15,12,0.92);
  display: none; align-items: center; justify-content: center;
  padding: 30px;
}
.lightbox.open { display: flex; }
.lightbox img {
  max-width: min(700px, 90vw); max-height: 80vh; border-radius: 14px; box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  opacity: 1; transition: opacity 0.15s ease;
}
.lightbox img.lb-loading { opacity: 0.35; }
.lightbox .lb-close {
  position: absolute; top: 24px; right: 30px;
  color: var(--rose-light); font-size: 2rem; cursor: pointer; line-height: 1;
  background: none; border: none;
}
.lightbox .lb-caption {
  position: absolute; bottom: 34px; left: 0; right: 0;
  text-align: center; color: var(--rose-light); letter-spacing: 1px; font-size: 0.9rem;
}
.lightbox .lb-counter {
  position: absolute; top: 26px; left: 0; right: 0;
  text-align: center; color: rgba(255,255,255,0.7); letter-spacing: 1px; font-size: 0.8rem;
  display: none;
}
.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1.5px solid rgba(255,255,255,0.3);
  color: #fff; font-size: 1.8rem; line-height: 1; cursor: pointer;
  display: none; align-items: center; justify-content: center;
  transition: background 0.2s ease;
}
.lb-nav:hover { background: rgba(255,255,255,0.22); }
.lb-prev { left: 16px; }
.lb-next { right: 16px; }
@media (max-width: 640px) {
  .lb-nav { width: 38px; height: 38px; font-size: 1.4rem; }
  .lb-prev { left: 6px; }
  .lb-next { right: 6px; }
}

/* ---------------- CONTACT / CTA ---------------- */
.cta-band {
  /* A deliberate bold accent band with crisp edges — a soft blurred fade
     here read as a muddy smear rather than elegant, so this stays solid;
     it's the soft-gradient sections around it doing the "flow" work.
     Both stops use the deeper rose tones (not the pale --rose) so the
     white text keeps proper contrast throughout the band. */
  background: linear-gradient(120deg, var(--rose-dark), var(--rose-deep));
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,0.9); max-width: 560px; margin: 0 auto 30px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-band .btn-gold { background: #fff; color: var(--rose-dark); box-shadow: 0 8px 20px rgba(0,0,0,0.15); }
.cta-band .btn-gold:hover { box-shadow: 0 14px 28px rgba(0,0,0,0.2); }
.cta-band .btn-outline { border-color: #fff; color: #fff; }
.cta-band .btn-outline:hover { background: rgba(255,255,255,0.15); }

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 24px;
}
.contact-card {
  background: #fff;
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  box-shadow: 0 10px 24px rgba(36,31,28,0.06);
  border: 1px solid rgba(211,95,134,0.18);
}
.contact-card .icon-wrap {
  width: 56px; height: 56px; margin: 0 auto 16px;
  border-radius: 50%;
  background: var(--blush);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem; color: var(--rose-dark);
}
.contact-card h4 { margin-bottom: 6px; font-size: 1rem; }
.contact-card a, .contact-card p { color: var(--text-muted); font-size: 0.93rem; margin: 0; }
.contact-card a:hover { color: var(--rose-dark); }

/* ---------------- FOOTER ---------------- */
footer {
  background: var(--ink);
  color: var(--cream-2);
  padding: 60px 0 24px;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 34px;
  border-bottom: 1px solid rgba(245,238,232,0.15);
}
.footer-brand { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; }
.footer-brand img { width: 42px; }
.footer-brand .name { font-family: var(--serif); color: var(--rose-light); font-size: 1.1rem; }
footer p { color: rgba(245,238,232,0.75); font-size: 0.9rem; line-height: 1.7; }
footer h5 { color: var(--rose-light); font-family: var(--sans); letter-spacing: 1.5px; font-size: 0.8rem; text-transform: uppercase; margin-bottom: 16px; }
footer ul li { margin-bottom: 10px; }
footer ul li a { color: rgba(245,238,232,0.8); font-size: 0.92rem; transition: color 0.2s ease; }
footer ul li a:hover { color: var(--rose-light); }
.footer-bottom {
  padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 0.8rem; color: rgba(245,238,232,0.55);
}

.floating-call {
  position: fixed;
  bottom: 24px; right: 24px;
  z-index: 900;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--rose), var(--rose-dark));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  color: #fff;
  box-shadow: 0 10px 24px rgba(211,95,134,0.5);
  animation: pulseCall 2.4s ease-in-out infinite;
}
@keyframes pulseCall {
  0%, 100% { box-shadow: 0 10px 24px rgba(211,95,134,0.5); }
  50% { box-shadow: 0 10px 24px rgba(211,95,134,0.8), 0 0 0 10px rgba(211,95,134,0.1); }
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .about-strip { grid-template-columns: 1fr; }
  .about-media { max-width: 340px; margin-bottom: 34px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
  .nav-links { position: fixed; top: 0; right: -100%; height: 100vh; width: 72%; max-width: 320px;
    background: var(--ink); flex-direction: column; justify-content: center; gap: 30px;
    transition: right 0.4s ease; padding: 40px 30px; }
  .nav-links.open { right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.3); }
  .nav-links a { color: var(--cream-2); }
  .nav-links a.active { color: var(--rose-light); }
  .nav-toggle { display: flex; }
  .nav-cta .btn-outline { display: none; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 64px 0; }
}