@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito+Sans:wght@400;600;700&display=swap');

:root {
  --ripple-green: #54B948;
  --ripple-green-dark: #006225;
  --ripple-lime: #9ACA4A;
  --ripple-brown: #3B2314;
  --ripple-gold: #F89829;
  --ripple-gold-light: #FFE35A;
  --ripple-cream: #FFF8DB;
  --font-heading: 'Fredoka', -apple-system, 'Trebuchet MS', Arial, sans-serif;
  --font-body: 'Nunito Sans', -apple-system, 'Trebuchet MS', Arial, sans-serif;
  --max-width: 1080px;
  --radius: 3px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ripple-brown);
  background: #fff;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: var(--ripple-green-dark); }
a:hover { color: var(--ripple-green); }

h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 0.5em;
  color: var(--ripple-green-dark);
}

h1 { font-size: clamp(2rem, 5vw, 2.75rem); }
h2 { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }

p { margin: 0 0 1em; }

.wrap {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 16px;
}

/* dots divider */
.dots {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0 0 1.2em;
}
.dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ripple-gold);
  opacity: 0.85;
}
.dots span:nth-child(2n) { background: var(--ripple-lime); opacity: 0.7; }
.dots span:nth-child(3n) { background: var(--ripple-gold-light); opacity: 0.9; }

/* header / nav */
.site-header {
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 20;
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  padding-bottom: 12px;
  gap: 16px;
  flex-wrap: wrap;
}
.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.brand img { height: 44px; width: auto; }
.brand-tagline { color: var(--ripple-gold); font-size: 0.72rem; letter-spacing: 0.03em; }

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 22px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}
nav.main-nav a {
  text-decoration: none;
  color: var(--ripple-brown);
  font-weight: 600;
  font-size: 0.95rem;
}
nav.main-nav a:hover,
nav.main-nav a[aria-current="page"] { color: var(--ripple-green); }

/* buttons */
.btn {
  display: inline-block;
  background: var(--ripple-green);
  color: #fff;
  padding: 12px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 700;
  transition: background 0.15s ease;
}
.btn:hover { background: var(--ripple-green-dark); color: #fff; }
.btn.btn-outline {
  background: transparent;
  border: 2px solid var(--ripple-green);
  color: var(--ripple-green-dark);
}
.btn.btn-outline:hover { background: var(--ripple-cream); }

/* hero */
.hero {
  background: linear-gradient(180deg, var(--ripple-cream) 0%, #fff 100%);
  padding: 56px 0 48px;
}
.hero .wrap {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 40px;
  align-items: center;
}
.hero-photo img {
  border-radius: var(--radius);
  box-shadow: 0 12px 30px rgba(59, 35, 20, 0.12);
}
.hero p.lede { font-size: 1.1rem; }
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 20px; }

@media (max-width: 760px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-photo { order: -1; }
}

/* sections */
section { padding: 48px 0; }
section.alt { background: var(--ripple-cream); }

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: center;
}
.grid-2.reverse .grid-photo { order: 2; }
@media (max-width: 760px) {
  .grid-2 { grid-template-columns: 1fr; }
  .grid-2.reverse .grid-photo { order: -1; }
}
.grid-photo img { border-radius: var(--radius); }

.card-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.card {
  background: #fff;
  border: 1px solid #eee;
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: 0 2px 8px rgba(59, 35, 20, 0.06);
}
.card h3 { color: var(--ripple-green); font-size: 1.15rem; }

blockquote.event {
  border-left: 4px solid var(--ripple-gold);
  margin: 0;
  padding: 14px 20px;
  background: var(--ripple-cream);
  border-radius: 0 var(--radius) var(--radius) 0;
  font-style: normal;
}

/* speaking / educators section marker icon */
.section-marker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.section-marker svg { width: 28px; height: 28px; }

/* footer */
footer.site-footer {
  background: var(--ripple-green-dark);
  color: #f2f7ee;
  padding: 40px 0 28px;
  margin-top: 40px;
  position: relative;
}
footer.site-footer a { color: #d9f2cf; }
footer.site-footer a:hover { color: #fff; }
.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 24px;
  margin-bottom: 20px;
}
.footer-grid h4 { color: #fff; font-family: var(--font-heading); font-size: 1rem; margin: 0 0 10px; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: 6px; }
.site-credit { font-size: 0.8rem; opacity: 0.85; margin: 6px 0 0; }
.site-credit a { color: inherit; }
.trademark { font-size: 0.8rem; opacity: 0.85; border-top: 1px solid rgba(255,255,255,0.15); padding-top: 16px; }

/* footer duck easter egg */
.footer-duck {
  position: absolute;
  top: -9px;
  left: 24px;
  width: 18px;
  height: 18px;
}

/* hidden scottie signature */
.scottie-mark {
  opacity: 0.35;
  width: 22px;
  height: 22px;
  transition: opacity 0.2s ease;
}
.scottie-mark:hover { opacity: 0.9; }

/* splash / ripple intro (index.html only) */
.splash {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, var(--ripple-cream) 0%, #fff 100%);
  transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), filter 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.splash.is-done { opacity: 0; filter: blur(8px); pointer-events: none; }

.splash-logo {
  position: relative;
  height: 110px;
  width: auto;
  opacity: 0;
  animation: splash-logo-in 0.4s ease 0.1s forwards;
  will-change: transform, opacity;
}
.splash-logo.is-moving {
  animation: none;
  opacity: 1;
  transition: transform 0.9s cubic-bezier(0.65, 0, 0.35, 1);
}

@keyframes splash-logo-in {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: scale(1); }
}

.splash {
  overflow: hidden; /* clip the oversized rings to the viewport, no scrollbar flash */
}

.splash-rings {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 260px;
  height: 260px;
  margin: -130px 0 0 -130px;
  pointer-events: none;
}
.ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.05);
}
/* layered gradients + inset shadows fake curved, lit glass instead of a flat stroke;
   the SVG feTurbulence/feDisplacementMap filter (defined inline in the HTML) warps
   that shape and its shadows with real pixel distortion as it grows, so the edge
   wobbles like an actual water surface instead of tracing a perfect circle */
.ring-1, .ring-2, .ring-3 {
  box-shadow:
    0 10px 34px rgba(59, 35, 20, 0.14),
    inset 0 3px 10px rgba(255, 255, 255, 0.7),
    inset 0 -10px 20px rgba(0, 0, 0, 0.09);
}
.ring-1 {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle,
      rgba(0, 98, 37, 0.5) 0%,
      rgba(84, 185, 72, 0.5) 35%,
      rgba(84, 185, 72, 0.85) 55%,
      rgba(84, 185, 72, 0.42) 70%,
      rgba(84, 185, 72, 0) 100%);
  filter: url(#glass-ripple-1);
  animation: ring-grow 2.1s ease-out 0.2s forwards;
}
.ring-2 {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle,
      rgba(84, 185, 72, 0.42) 0%,
      rgba(154, 202, 74, 0.42) 35%,
      rgba(154, 202, 74, 0.78) 55%,
      rgba(154, 202, 74, 0.36) 70%,
      rgba(154, 202, 74, 0) 100%);
  filter: url(#glass-ripple-2);
  animation: ring-grow 2.1s ease-out 0.45s forwards;
}
.ring-3 {
  background:
    radial-gradient(circle at 30% 26%, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0) 40%),
    radial-gradient(circle,
      rgba(217, 122, 26, 0.4) 0%,
      rgba(248, 152, 41, 0.4) 35%,
      rgba(248, 152, 41, 0.72) 55%,
      rgba(248, 152, 41, 0.32) 70%,
      rgba(248, 152, 41, 0) 100%);
  filter: url(#glass-ripple-3);
  animation: ring-grow 2.1s ease-out 0.7s forwards;
}

@keyframes ring-grow {
  0%   { transform: scale(0.04); opacity: 0; }
  8%   { opacity: 1; }
  60%  { opacity: 1; }
  88%  { opacity: 0.35; }
  100% { transform: scale(10); opacity: 0; } /* 260px * 10 covers essentially all real screens while keeping the gradient's highlight/rim detail from stretching off past the viewport */
}

@media (prefers-reduced-motion: reduce) {
  .splash { display: none; }
}

/* review cards */
.review-card blockquote { margin: 0 0 10px; font-style: italic; }
.review-card cite { font-style: normal; font-weight: 700; color: var(--ripple-green-dark); display: block; font-size: 0.9rem; }

/* placeholder pages */
.placeholder {
  text-align: center;
  padding: 90px 0;
}
.placeholder .dots { justify-content: center; }

/* contact */
.contact-block { display: grid; gap: 10px; font-size: 1.05rem; }
.contact-block a { font-weight: 700; }

/* 404 */
.error-page {
  text-align: center;
  padding: 100px 0 60px;
  position: relative;
}

/* Round 2: testimonial reveal, video placeholder */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.8s ease, transform 0.8s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }
.video-embed { position: relative; aspect-ratio: 16 / 9; max-width: 720px; border-radius: var(--radius); overflow: hidden; background: var(--ripple-cream); }
.video-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-placeholder { aspect-ratio: 16 / 9; max-width: 720px; background: var(--ripple-cream); border: 2px dashed var(--ripple-gold); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; text-align: center; padding: 16px; }
nav.main-nav ul { flex-wrap: wrap; }
.hero-sub { font-size: 1.35rem; margin: 0 0 14px; }

/* Parent FAQ: plain details/summary so the answers stay in the HTML for search and AI crawlers */
.faq details { max-width: 760px; border-bottom: 1px solid var(--ripple-cream); padding: 14px 0; }
.faq summary { cursor: pointer; font-family: var(--font-heading); font-size: 1.1rem; color: var(--ripple-green-dark); }
.faq details p { margin: 10px 0 0; }

/* Home: photos and videos added from Jessica's dashboard */
.moments { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); margin-top: 28px; }
.moments figure { margin: 0; }
.moments img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius); }
.moments figcaption { font-size: .9rem; margin-top: 6px; }