/* ═══════════════════════════════════════════════
   DOWER HOUSE HOLISTIC THERAPIES
   Design System — English Country Elegance
   ═══════════════════════════════════════════════ */

/* --- Design Tokens --- */
:root {
  --sage: #5B7B6A;
  --sage-dark: #3D5A4C;
  --sage-light: #8FA99B;
  --sage-mist: #C5D5CC;
  --sage-ghost: #E8EFE9;

  --brass: #C4956A;
  --brass-light: #E8D5BD;
  --brass-dark: #A07850;

  --cream: #FAF8F5;
  --stone: #F0EDE8;
  --linen: #E8E3DB;
  --parchment: #D4CCC0;

  --charcoal: #2A2A28;
  --text: #3D3D3A;
  --text-muted: #7A7A75;
  --text-light: #A3A39E;

  --whatsapp: #25D366;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out-soft: cubic-bezier(0.45, 0, 0.55, 1);
}

/* --- Base --- */
html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Subtle film-grain texture overlay */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 256px 256px;
}

/* --- Selection --- */
::selection {
  background-color: var(--sage-mist);
  color: var(--charcoal);
}

/* --- Scrollbar --- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--cream); }
::-webkit-scrollbar-thumb { background: var(--parchment); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--sage-light); }

/* --- Focus --- */
:focus-visible {
  outline: 2px solid var(--sage);
  outline-offset: 3px;
  border-radius: 2px;
}


/* ═══════════════════════════════════════════════
   NAVIGATION
   ═══════════════════════════════════════════════ */

#main-header {
  backdrop-filter: blur(16px) saturate(1.2);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  /* White under the logo, fading right to cream */
  background-color: rgba(250, 248, 245, 0.88);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    38%,
    rgba(255, 255, 255, 0)    58%
  );
  border-bottom: 1px solid transparent;
  transition: background-color 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo);
}

#main-header.nav-scrolled {
  background-color: rgba(250, 248, 245, 0.96);
  background-image: linear-gradient(
    to right,
    rgba(255, 255, 255, 1)    0%,
    rgba(255, 255, 255, 1)    38%,
    rgba(255, 255, 255, 0)    58%
  );
  border-bottom-color: var(--linen);
  box-shadow: 0 1px 30px rgba(0, 0, 0, 0.04);
}

/* On small screens the logo fills the header width — just use white */
@media (max-width: 767px) {
  #main-header,
  #main-header.nav-scrolled {
    background-image: none;
    background-color: rgba(255, 255, 255, 0.96);
  }
}

.nav-logo {
  transition: height 0.5s var(--ease-out-expo);
  transform: translateZ(0);
  will-change: height;
  height: 6.75rem !important;  /* 108px mobile */
}

@media (min-width: 1024px) {
  .nav-logo {
    height: 9rem !important;   /* 144px desktop */
  }
}

.nav-scrolled .nav-logo {
  height: 5.25rem !important;  /* 84px scrolled */
}

/* Header and hero offsets for larger logo */
#main-header {
  height: 132px !important;
}

@media (min-width: 1024px) {
  #main-header {
    height: 168px !important;
  }
}

.hero-home {
  padding-top: 132px !important;
}

.hero-gradient {
  margin-top: 132px !important;
}

@media (min-width: 1024px) {
  .hero-home {
    padding-top: 168px !important;
  }
  .hero-gradient {
    margin-top: 168px !important;
  }
}

/* Footer logo — white silhouette on dark charcoal background */
.footer-logo {
  height: 3rem;
  margin-bottom: 1.25rem;
  filter: brightness(0) invert(1);
}

/* Desktop nav link underline animation */
.nav-link {
  position: relative;
  letter-spacing: 0.03em;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 0;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brass), var(--sage));
  transition: width 0.4s var(--ease-out-expo), left 0.4s var(--ease-out-expo);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
  left: 0;
}

.nav-link.active {
  color: var(--sage-dark);
}

/* Services dropdown */
#services-dropdown-menu {
  border: 1px solid var(--linen);
  transition: opacity 0.25s var(--ease-out-expo), transform 0.25s var(--ease-out-expo);
  transform: translateY(6px);
  opacity: 0;
  pointer-events: none;
}

#services-dropdown-menu:not(.hidden) {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Mobile Nav */
.mobile-nav {
  transform: translateX(100%);
  transition: transform 0.45s var(--ease-out-expo);
  background-color: var(--cream);
}

.mobile-nav.open {
  transform: translateX(0);
}


/* ═══════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */

.hero-home {
  position: relative;
  overflow: hidden;
  background: var(--cream);
}

/* Soft radial wash — sage + brass */
.hero-home::before {
  content: '';
  position: absolute;
  top: -30%;
  right: -15%;
  width: 70%;
  height: 160%;
  background: radial-gradient(ellipse at 60% 40%,
    rgba(91, 123, 106, 0.08) 0%,
    rgba(196, 149, 106, 0.05) 40%,
    transparent 70%);
  pointer-events: none;
}

/* Organic shape accent — bottom left */
.hero-home::after {
  content: '';
  position: absolute;
  bottom: -5%;
  left: -8%;
  width: 40%;
  height: 50%;
  background: radial-gradient(ellipse at center,
    rgba(197, 213, 204, 0.25) 0%,
    transparent 70%);
  pointer-events: none;
}

/* Bottom fade into next section */
.hero-fade {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100px;
  background: linear-gradient(to top, var(--cream), transparent);
  pointer-events: none;
}

/* Scroll indicator */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(6px); opacity: 1; }
}

.scroll-indicator {
  animation: scrollBounce 2s ease-in-out infinite;
}

/* Sub-page hero banner */
.hero-gradient {
  background: linear-gradient(160deg, var(--sage-dark) 0%, var(--sage) 55%, var(--sage-light) 100%);
  position: relative;
}

.hero-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 85% 15%, rgba(196, 149, 106, 0.12), transparent 55%);
  pointer-events: none;
}

/* Dot pattern overlay for hero-gradient */
.hero-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}


/* ═══════════════════════════════════════════════
   ANIMATIONS
   ═══════════════════════════════════════════════ */

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

@keyframes slideLeft {
  from { opacity: 0; transform: translateX(-40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes slideRight {
  from { opacity: 0; transform: translateX(40px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleReveal {
  from { opacity: 0; transform: scale(0.93); }
  to { opacity: 1; transform: scale(1); }
}

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

@keyframes lineReveal {
  from { width: 0; }
  to { width: 60px; }
}

/* Scroll-triggered: fade up */
.fade-up {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* Scroll-triggered: slide left */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.slide-left.visible { opacity: 1; transform: translateX(0); }

/* Scroll-triggered: slide right */
.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.slide-right.visible { opacity: 1; transform: translateX(0); }

/* Scroll-triggered: scale in */
.scale-in {
  opacity: 0;
  transform: scale(0.93);
  transition: opacity 0.8s var(--ease-out-expo), transform 0.8s var(--ease-out-expo);
}
.scale-in.visible { opacity: 1; transform: scale(1); }

/* Stagger delays */
.delay-1 { transition-delay: 80ms; }
.delay-2 { transition-delay: 160ms; }
.delay-3 { transition-delay: 240ms; }
.delay-4 { transition-delay: 320ms; }
.delay-5 { transition-delay: 400ms; }
.delay-6 { transition-delay: 480ms; }
.delay-7 { transition-delay: 560ms; }
.delay-8 { transition-delay: 640ms; }


/* ═══════════════════════════════════════════════
   CARDS & COMPONENTS
   ═══════════════════════════════════════════════ */

/* Service cards */
.service-card {
  border: 1px solid var(--linen);
  transition: transform 0.5s var(--ease-out-expo), box-shadow 0.5s var(--ease-out-expo), border-color 0.5s var(--ease-out-expo);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 24px 48px rgba(42, 42, 40, 0.06), 0 8px 16px rgba(42, 42, 40, 0.03);
  border-color: var(--sage-mist);
}

/* Review cards */
.review-card {
  position: relative;
  border: 1px solid var(--linen);
  transition: border-color 0.4s var(--ease-out-expo), transform 0.4s var(--ease-out-expo);
}

.review-card:hover {
  border-color: var(--sage-mist);
  transform: translateY(-3px);
}

.review-card .quote-mark {
  font-family: 'Fraunces', serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--sage-mist);
  position: absolute;
  top: 0.75rem;
  left: 1.25rem;
  pointer-events: none;
  opacity: 0.5;
}

/* Accordion */
.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.5s var(--ease-out-expo), padding 0.5s var(--ease-out-expo);
  padding: 0 1.5rem;
}

.accordion-content.open {
  max-height: 600px;
  padding: 1rem 1.5rem 1.5rem;
}

.accordion-chevron {
  transition: transform 0.4s var(--ease-out-expo);
}

.accordion-chevron.rotate {
  transform: rotate(180deg);
}

.accordion-trigger {
  transition: color 0.3s var(--ease-out-expo);
}

.accordion-trigger:hover {
  color: var(--sage);
}


/* ═══════════════════════════════════════════════
   DECORATIVE ELEMENTS
   ═══════════════════════════════════════════════ */

/* Brass divider line */
.brass-divider {
  width: 60px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--brass), var(--brass-light));
}

/* Ornamental diamond */
.ornament {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--brass);
  font-size: 0.65rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
}

.ornament::before,
.ornament::after {
  content: '';
  width: 32px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-light));
}

.ornament::after {
  background: linear-gradient(90deg, var(--brass-light), transparent);
}

/* Dot pattern background */
.bg-dots {
  background-image: radial-gradient(var(--linen) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* Wide brass rule */
.brass-rule {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-light) 20%, var(--brass-light) 80%, transparent);
}

/* Number markers for editorial sections */
.step-number {
  font-family: 'Fraunces', serif;
  font-size: 4.5rem;
  font-weight: 300;
  line-height: 1;
  color: var(--sage-mist);
  letter-spacing: -0.03em;
}


/* ═══════════════════════════════════════════════
   CTA & BUTTONS
   ═══════════════════════════════════════════════ */

.cta-gradient {
  background: linear-gradient(160deg, var(--sage-dark) 0%, var(--sage) 100%);
  position: relative;
  overflow: hidden;
}

.cta-gradient::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 25% 75%, rgba(196, 149, 106, 0.15), transparent 50%);
  pointer-events: none;
}

.cta-gradient::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
}

/* Button shimmer on hover */
.btn-shimmer {
  position: relative;
  overflow: hidden;
}

.btn-shimmer::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
  transition: left 0.6s var(--ease-out-expo);
}

.btn-shimmer:hover::before {
  left: 100%;
}


/* ═══════════════════════════════════════════════
   WHATSAPP FLOAT
   ═══════════════════════════════════════════════ */

.whatsapp-float {
  animation: gentleFloat 3s ease-in-out infinite;
  box-shadow: 0 4px 24px rgba(37, 211, 102, 0.3);
  transition: background-color 0.3s var(--ease-out-expo), box-shadow 0.3s var(--ease-out-expo);
}

.whatsapp-float:hover {
  animation-play-state: paused;
  box-shadow: 0 8px 32px rgba(37, 211, 102, 0.4);
}


/* ═══════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */

.site-footer {
  background: var(--charcoal);
  position: relative;
  overflow: hidden;
}

.site-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--brass-light) 30%, var(--brass-light) 70%, transparent);
}


/* ═══════════════════════════════════════════════
   SECTION BACKGROUNDS
   ═══════════════════════════════════════════════ */

/* Warm stone section with subtle depth */
.bg-stone-section {
  background: var(--stone);
  position: relative;
}

.bg-stone-section::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 20% 0%, rgba(196, 149, 106, 0.04), transparent 50%);
  pointer-events: none;
}

/* Sage tinted section */
.bg-sage-tint {
  background: linear-gradient(180deg, var(--sage-ghost) 0%, var(--cream) 100%);
}


/* ═══════════════════════════════════════════════
   RESPONSIVE & ACCESSIBILITY
   ═══════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════
   FLOWER ORNAMENT
   ═══════════════════════════════════════════════ */

/* Base: absolutely positioned, decorative only */
.flower-watermark {
  position: absolute;
  pointer-events: none;
  user-select: none;
  z-index: 0;
}

/* Hero section — large, top-right, partially off-screen */
.flower-watermark-hero {
  width: 640px;
  height: 640px;
  top: -80px;
  right: -180px;
  opacity: 0.065;
}

/* CTA banner — right edge, white-tinted for dark bg */
.flower-watermark-cta {
  width: 540px;
  height: 540px;
  top: 50%;
  right: -100px;
  transform: translateY(-50%);
  opacity: 0.1;
  filter: brightness(20) saturate(0);
}

/* Footer — bottom-right corner, white-tinted */
.flower-watermark-footer {
  width: 460px;
  height: 460px;
  bottom: -50px;
  right: -50px;
  opacity: 0.07;
  filter: brightness(20) saturate(0);
}

/* Sub-page hero (hero-gradient) — large, top-left, white-tinted */
.flower-watermark-subhero {
  width: 520px;
  height: 520px;
  top: -80px;
  left: -100px;
  opacity: 0.08;
  filter: brightness(20) saturate(0);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .fade-up, .slide-left, .slide-right, .scale-in {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .whatsapp-float,
  .scroll-indicator {
    animation: none;
  }
}