/* Landing page — hero layout + gentle shelf-scene animation */

.hero { padding: 70px 0 20px; }
.hero-wrap {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 40px;
  align-items: center;
}
@media (max-width: 900px) { .hero-wrap { grid-template-columns: 1fr; } }

.hero-sub { max-width: 46ch; color: var(--ink-soft); font-size: 1.08rem; }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }

.hero-scene { display: flex; justify-content: center; }
.hero-svg { width: 100%; max-width: 420px; }

/* Stem draws itself in on load */
.grow-path {
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  animation: drawStem 2.2s ease-out .3s forwards;
}
.grow-leaves { opacity: 0; transform-origin: center; animation: popLeaves .6s ease-out 2s forwards; }
@keyframes drawStem { to { stroke-dashoffset: 0; } }
@keyframes popLeaves { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: scale(1); } }

.mini-bubbles circle {
  fill: #fff;
  opacity: .8;
  animation: miniRise 3.2s ease-in-out infinite;
}
.mini-bubbles circle:nth-child(2) { animation-delay: .6s; }
.mini-bubbles circle:nth-child(3) { animation-delay: 1.1s; }
@keyframes miniRise {
  0% { transform: translateY(0); opacity: 0; }
  15% { opacity: .9; }
  100% { transform: translateY(-26px); opacity: 0; }
}

.flame {
  transform-origin: 50% 100%;
  animation: flicker 2.6s ease-in-out infinite;
}
@keyframes flicker {
  0%, 100% { transform: scale(1) rotate(0deg); }
  25% { transform: scale(1.05, .95) rotate(-2deg); }
  50% { transform: scale(.95, 1.08) rotate(1deg); }
  75% { transform: scale(1.03, .97) rotate(2deg); }
}

.services-art svg { width: 100%; max-width: 340px; margin: 0 auto; display: block; }

.promo-banner .eyebrow { font-family: var(--font-utility); }

@media (prefers-reduced-motion: reduce) {
  .grow-path { stroke-dashoffset: 0; animation: none; }
  .grow-leaves { opacity: 1; animation: none; }
  .flame, .mini-bubbles circle { animation: none; }
}