:root {
  --background: hsl(25, 35%, 94%);
  --foreground: hsl(25, 25%, 20%);
  --card: hsl(25, 40%, 97%);
  --card-foreground: hsl(25, 25%, 20%);
  --primary: hsl(280, 40%, 60%);
  --primary-foreground: hsl(25, 40%, 97%);
  --secondary: hsl(15, 30%, 85%);
  --secondary-foreground: hsl(25, 25%, 25%);
  --muted: hsl(25, 25%, 88%);
  --muted-foreground: hsl(25, 15%, 45%);
  --accent: hsl(15, 25%, 90%);
  --accent-foreground: hsl(25, 25%, 30%);
  --rose-warm: hsl(15, 40%, 80%);
  --beige-soft: hsl(35, 30%, 88%);
  --cream-light: hsl(25, 50%, 95%);
  --border: hsl(214.3, 31.8%, 91.4%);
  --radius: 0.75rem;
  /* Hero animation amplitudes */
  --float-amp: 28px;
  --drift-amp: 40px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
img { max-width: 100%; height: auto; }

body {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background: var(--background);
  color: var(--foreground);
  line-height: 1.6;
  font-weight: 300;
  letter-spacing: 0.02em;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

body.loaded {
  opacity: 1;
}

.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
section { padding: 5rem 0; overflow-x: hidden; /* Prevent horizontal scroll on reveal */}
.card { 
  background: var(--card); 
  border: 1px solid var(--border); 
  border-radius: var(--radius); 
  padding: 1.5rem; 
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
  transform: translateY(-15px) scale(1.07);
  box-shadow: 0 30px 50px -20px hsla(280, 40%, 60%, 0.35);
}
.warm-glow { box-shadow: 0 20px 40px -20px hsla(280, 40%, 60%, 0.25); }

/* Mobile pseudo-hover: apply :hover styles when centered */
@media (hover: none), (pointer: coarse) {
  .card.is-hovered {
    transform: translateY(-15px) scale(1.07);
    box-shadow: 0 30px 50px -20px hsla(280, 40%, 60%, 0.35);
  }
  .card.is-hovered .card-image {
    transform: scale(2) rotate(12deg);
  }
}

/* Navigation */
.nav { position: fixed; top: 0; width: 100%; z-index: 50; transition: all .3s ease; }
.nav.scrolled { background: hsla(25, 40%, 97%, .95); backdrop-filter: blur(10px); border-bottom: 1px solid var(--border); box-shadow: 0 10px 30px -10px hsla(280, 40%, 60%, 0.15); }
.nav-content { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; position: relative; }
.logo { display: flex; align-items: center; gap: .75rem; }
.logo-text { font-size: 1.25rem; font-weight: 300; }
.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 768px) { .nav-links { display: flex; } }
.nav-link { background: none; border: none; color: var(--foreground); opacity: .8; cursor: pointer; font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; transition: all .3s ease; font-weight: 300; }
.nav-link:hover { opacity: 1; color: var(--primary); }
.nav-link.active { color: var(--primary); opacity: 1; font-weight: 500; }

/* Mobile nav toggle */
.nav-toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 8px; border: none; background: transparent; color: var(--foreground); cursor: pointer; transition: transform .2s ease; position: relative; }
.nav-toggle:hover { transform: translateY(-1px); }
.nav-toggle:focus { outline: 2px solid var(--border); outline-offset: 2px; }
.nav-toggle .bar { display: block; width: 22px; height: 2px; background: var(--foreground); opacity: .9; border-radius: 2px; transition: transform .25s ease, opacity .25s ease; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-toggle .bar:nth-child(1) { top: 13px; }
.nav-toggle .bar:nth-child(2) { top: 21px; }
.nav-toggle .bar:nth-child(3) { top: 29px; }
@media (min-width: 768px) { .nav-toggle { display: none; } }

/* Mobile menu panel */
@media (max-width: 767px) {
  .nav.open .nav-links {
    display: flex;
    position: absolute;
    top: calc(100% + .5rem);
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: .5rem;
    z-index: 60;
    box-shadow: 0 20px 40px -20px hsla(280, 40%, 60%, 0.25);
  }
  .nav.open .nav-link,
  .nav.open .nav-links .btn {
    width: 100%;
    text-align: left;
    padding: .875rem 1rem;
    border-radius: .5rem;
  }
}

/* Burger to X animation */
.nav.open .nav-toggle .bar:nth-child(1) { top: 21px; transform: translateX(-50%) rotate(45deg); }
.nav.open .nav-toggle .bar:nth-child(2) { opacity: 0; }
.nav.open .nav-toggle .bar:nth-child(3) { top: 21px; transform: translateX(-50%) rotate(-45deg); }

/* Social icons */
.social-icon { 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  border-radius: 999px; 
  color: var(--muted-foreground); 
  text-decoration: none; 
  transition: all .2s ease; 
}
.social-icon:hover { 
  color: var(--primary); 
  transform: translateY(-2px); 
}
.social-icon svg { 
  width: 22px; 
  height: 22px; 
  stroke-width: 1.5; 
}

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: .875rem 2rem; border-radius: 999px; font-size: 1rem; font-weight: 500; cursor: pointer; transition: all .3s ease; border: none; text-decoration: none; }
.btn-therapy { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 10px 30px -10px hsla(280, 40%, 60%, 0.35); }
.btn-therapy:hover { opacity: .95; transform: translateY(-2px); box-shadow: 0 15px 30px -10px hsla(280, 40%, 60%, 0.45); }
.btn-therapy-outline { background: transparent; color: var(--primary); border: 2px solid var(--primary); }
.btn-therapy-outline:hover { background: var(--primary); color: var(--primary-foreground); }

/* Hero */
.hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background:
  linear-gradient(45deg, var(--rose-warm) 0%, transparent 30%),
  linear-gradient(-45deg, var(--beige-soft) 0%, transparent 40%);
  opacity: .3; z-index: 0; }
.hero-shapes { position: absolute; inset: 0; pointer-events: none; }
.hero-shape-1 { position: absolute; top: 5rem; left: 2.5rem; width: 8rem; height: 10rem; background: hsla(15,40%,80%,.3); border-radius: 1rem; --rot: 12deg; animation: floatY ease-in-out infinite; animation-duration: 4s; }
.hero-shape-2 { position: absolute; bottom: 10rem; right: 5rem; width: 12rem; height: 8rem; background: hsla(35,30%,88%,.4); border-radius: .75rem; --rot2: 0deg; animation: driftX linear infinite; animation-duration: 7s; }
.hero-shape-3 { position: absolute; top: 33%; right: 25%; width: 6rem; height: 9rem; background: hsla(15,25%,90%,.3); border-radius: .75rem; --rot: -12deg; animation: floatY ease-in-out infinite reverse; animation-duration: 5.2s; }
.hero-shape-4 { position: absolute; top: 20%; left: 15%; width: 9rem; height: 5rem; background: hsla(280,40%,60%,.08); border-radius: .75rem; --rot: 8deg; animation: floatY ease-in-out infinite; animation-duration: 6s; }
.hero-shape-5 { position: absolute; bottom: 18%; left: 20%; width: 7rem; height: 10rem; background: hsla(15,40%,80%,.22); border-radius: 1rem; --rot2: -6deg; animation: driftX linear infinite reverse; animation-duration: 8.5s; }
.hero-shape-6 { position: absolute; top: 12%; right: 10%; width: 11rem; height: 6rem; background: hsla(35,30%,88%,.25); border-radius: 1rem; --rot: 14deg; animation: floatY ease-in-out infinite; animation-duration: 5.8s; }
.hero-shape-7 { position: absolute; bottom: 8%; right: 28%; width: 5rem; height: 5rem; background: hsla(15,25%,90%,.35); border-radius: .75rem; transform: rotate(-18deg); animation: rotateSlow linear infinite; animation-duration: 11s; }
.hero-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; position: relative; z-index: 1; }
@media (min-width: 1024px) { .hero-grid { grid-template-columns: 1fr 1fr; } }
.hero-title { font-size: clamp(2.25rem, 5vw, 3.5rem); font-weight: 300; margin-bottom: 1rem; line-height: 1.1; min-height: 100px; }
.hero-title .highlight { color: var(--primary); font-weight: 400; }
.hero-sub { font-size: clamp(1rem, 2.5vw, 1.25rem); color: var(--muted-foreground); margin-bottom: 2rem; max-width: 40rem; }
/* Center hero button group on wider screens */
.hero .inline-flex.gap-4 { justify-content: center; }

/* Smaller and stacked hero buttons on mobile */
@media (max-width: 640px) {
  .hero .btn { padding: .6rem 1.2rem; font-size: .9rem; }
  .hero .inline-flex.gap-4 { display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 100%; }
}

.hero-illustration { position: relative; border-radius: 1.5rem; overflow: hidden; background: hsla(0,0%,100%,.2); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 1rem; min-height: 420px; }
.hero-illustration-img { position: relative; z-index: 3; display: block; width: 100%; max-width: 640px; margin: 0 auto; filter: drop-shadow(0 10px 24px hsla(280,40%,40%,.25)); }
.hero-caption { position: relative; z-index: 3; margin-top: 0; transform: translateY(-50px); font-family: 'Great Vibes', cursive; font-size: 3rem; color: black; text-align: center; font-weight: 700; }

/* Social icons (footer) */
.social-footer { display: flex; gap: .75rem; margin-top: 1rem; justify-content: center; }
.social-footer .social-icon {
  width: 44px;
  height: 44px;
  background: hsla(280, 40%, 60%, 0.08);
}
.social-footer .social-icon:hover {
  background: hsla(280, 40%, 60%, 0.15);
}
.social-footer .social-icon svg {
  width: 24px;
  height: 24px;
}

/* Sections base */
.section-header { text-align: center; margin-bottom: 4rem; }
.section-label { font-size: .875rem; text-transform: uppercase; letter-spacing: .1em; color: var(--primary); font-weight: 500; }
.section-title { font-size: clamp(2rem, 4vw, 2.5rem); font-weight: 300; margin: 1rem 0 1.5rem; }
.section-description { font-size: 1.125rem; color: var(--muted-foreground); max-width: 48rem; margin: 0 auto; }

/* Grids */
.grid { display: grid; gap: 2rem; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2,1fr) } }
@media (min-width: 1024px) { .grid-3 { grid-template-columns: repeat(3,1fr) } .grid-4 { grid-template-columns: repeat(4,1fr) } }

/* Utilities */
.text-center { text-align: center; }
.mb-2 { margin-bottom: .5rem; } .mb-3 { margin-bottom: .75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mt-12 { margin-top: 3rem; }
.opacity-80 { opacity: .8; }
.inline-flex { display: inline-flex; }
.items-center { align-items: center; } .justify-center { justify-content: center; }
.gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* Forms */
.form-group { display: flex; gap: .75rem; }
.form-control, select, textarea, input { width: 100%; padding: .75rem 1rem; border: 1px solid var(--border); border-radius: .5rem; background: var(--background); color: var(--foreground); font-size: 1rem; }
.success-message { display: none; margin-bottom: 1rem; padding: .75rem 1rem; border: 1px solid var(--primary); color: var(--primary); border-radius: .5rem; background: hsla(280,40%,60%,.06); }
.success-message.show { display: block; }

/* Icon Wrapper */
.icon-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: hsla(280, 40%, 60%, 0.1);
  margin: 0 auto 1.5rem;
}

.icon-wrapper svg {
  width: 24px;
  height: 24px;
  color: var(--primary);
}

/* Texture */
.textured {
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%239C92AC' fill-opacity='0.1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
}

.card-image {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
  object-fit: contain;
  transition: transform 0.3s ease-in-out;
}

.card:hover .card-image {
  transform: scale(2) rotate(12deg);
}

/* SVG line-draw effect */
.draw-svg {
  display: block;
  color: #000; /* stroke uses currentColor */
}
.draw-svg.card-image {
  width: 120px;
  height: 120px;
  margin: 0 auto 1.5rem;
}
.draw-svg * {
  vector-effect: non-scaling-stroke;
}
.draw-svg path,
.draw-svg circle,
.draw-svg rect,
.draw-svg line,
.draw-svg polyline,
.draw-svg polygon {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: var(--len, 0);
  stroke-dashoffset: calc(var(--len, 0) * (1 - var(--p, 0)));
}

/* --- ANIMATIONS & EFFECTS --- */

/* Button Loader */
.btn .btn-text { transition: opacity 0.2s ease; }
.btn .loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  width: 24px;
  height: 24px;
  border: 3px solid hsla(25, 40%, 97%, .5);
  border-bottom-color: var(--primary-foreground);
  border-radius: 50%;
  animation: spin 1s linear infinite;
}
.btn.loading .loader { display: block; }
.btn.loading .btn-text { opacity: 0; }
.btn.loading { cursor: wait; }

/* Page Loader */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--background);
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.4s ease-out;
}

#page-loader .spinner {
  width: 40px;
  height: 40px;
  border: 4px solid var(--primary);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Scroll Reveal */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Typing Effect */
.hero-title .cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: var(--primary);
  animation: blink 0.7s infinite;
  vertical-align: middle;
}

/* Keyframes */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@keyframes blink {
  50% { opacity: 0; }
}

@keyframes floatY {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(var(--rot, 0deg)); }
  50% { transform: translate3d(0, calc(-1 * var(--float-amp)), 0) rotate(var(--rot, 0deg)); }
}
@keyframes driftX {
  0% { transform: translate3d(0, 0, 0) rotate(var(--rot2, 0deg)); }
  50% { transform: translate3d(var(--drift-amp), 0, 0) rotate(var(--rot2, 0deg)); }
  100% { transform: translate3d(0, 0, 0) rotate(var(--rot2, 0deg)); }
}
@keyframes rotateSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes pulseSoft {
  0%, 100% { opacity: .55; }
  50% { opacity: .85; }
}
@keyframes blobMove {
  0%, 100% { transform: translate(0, 0) scale(1); }
  25% { transform: translate(8px, -6px) scale(1.02); }
  50% { transform: translate(-6px, 6px) scale(0.98); }
  75% { transform: translate(-10px, -4px) scale(1.01); }
}
@keyframes ringPulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: .9; }
  50% { transform: translate(-50%, -50%) scale(1.03); opacity: 1; }
}
@keyframes stripeDrift {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(10px); }
}
@keyframes gridFloat {
  0% { background-position: 0 0; }
  100% { background-position: 36px 36px; }
}


/* Map embed */
.map-embed { position: relative; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.map-embed iframe { display: block; width: 100%; height: min(60vh, 520px); }