/* Coordinates match the uncropped 3:2 garden photograph at every size. */
.garden-analysis { background: var(--cream); padding-bottom: 0; }
.garden-heading { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 36px; }
.garden-heading h2 { font-size: clamp(2.8rem, 5.6vw, 5rem); line-height: 1; margin: 0; letter-spacing: -.05em; }
.garden-heading > p { max-width: 370px; color: var(--muted); margin: 0 0 4px; }
.garden-scene { position: relative; isolation: isolate; }
.garden-photo { margin: 0; position: relative; }
.garden-photo img { display: block; width: 100%; height: auto; border-radius: 12px; }
.garden-photo figcaption { position: absolute; bottom: 0; inset-inline: 0; padding: 54px 28px 22px; background: linear-gradient(transparent, rgba(13,48,51,.8)); border-radius: 0 0 12px 12px; color: white; font-size: 1rem; }
.garden-overlay { position: absolute; inset: 0; width: 100%; height: auto; pointer-events: none; overflow: visible; }
.garden-overlay circle { fill: var(--pine); stroke: #fffdf8; stroke-width: 3; }
.garden-overlay text { fill: white; text-anchor: middle; font: bold 18px Arial, sans-serif; }
.garden-line { fill: none; stroke: #fffdf8; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 260; }
.garden-area { stroke: #ffd875; stroke-width: 3; fill: rgba(242,190,69,.12); stroke-linecap: round; }
path.garden-area { fill: none; stroke-width: 5; }
.garden-findings { margin: 0; padding: 0; list-style: none; }
.garden-findings li { position: absolute; display: flex; align-items: start; gap: 12px; background: var(--paper); padding: 14px 18px; border-radius: 6px; box-shadow: 0 8px 28px #0d303330; font-size: .9rem; line-height: 1.45; }
.garden-findings strong, .garden-findings div > span { display: block; }
.garden-findings strong { color: var(--pine); font-size: 1rem; margin-bottom: 3px; }
.garden-findings div > span { color: var(--muted); }
.finding-number { display: none; }
.garden-findings .feature-tree { right: 4%; top: 19%; }
.garden-findings .feature-edge { left: 36%; top: 72%; }
.garden-findings .feature-terrace { left: 5%; top: 19%; }
.garden-caption { margin: 16px 0 36px; color: var(--muted); font-size: .85rem; }
.garden-resolution { display: grid; grid-template-columns: 1.15fr 1fr; gap: 48px; background: var(--pine); color: white; padding: 42px; border-radius: 12px; border-top: 4px solid var(--sun); }
.garden-resolution h2 { color: white; font-size: clamp(1.85rem, 3.2vw, 2.65rem); margin-bottom: 0; }
.garden-resolution .eyebrow { color: #ffd875; }
.garden-resolution-copy > p:first-child { font-size: 1.15rem; }
.garden-resolution-copy strong { font-size: 1.35rem; }
@media (max-width: 1023px) and (min-width: 768px) {
  .garden-findings li { padding: 10px 12px; font-size: .78rem; }
  .garden-findings strong { font-size: .88rem; }
  .garden-findings .feature-tree { right: 2%; }
  .garden-resolution { gap: 28px; padding: 30px; }
}
@media (max-width: 767px) {
  .garden-heading { display: block; margin-bottom: 24px; }
  .garden-heading h2 { font-size: clamp(2.8rem, 10vw, 4rem); margin-bottom: 20px; }
  .garden-heading > p { font-size: 1rem; }
  .garden-photo figcaption { font-size: .82rem; padding: 32px 14px 12px; }
  .garden-overlay { width: 100%; }
  .garden-overlay circle { r: 29px; stroke-width: 4; }
  .garden-overlay text { font-size: 29px; transform: translateY(4px); }
  .garden-line, .garden-area { display: none; }
  .garden-findings { display: grid; gap: 10px; margin-top: 16px; }
  .garden-findings li { position: static; box-shadow: none; padding: 12px 14px; border: 1px solid var(--line); font-size: .94rem; }
  .finding-number { display: grid; place-items: center; flex-shrink: 0; width: 28px; height: 28px; border-radius: 50%; background: var(--pine); color: white; font-size: .85rem; font-weight: bold; }
  .garden-findings strong { font-size: 1rem; }
  .garden-caption { font-size: .8rem; margin-bottom: 24px; }
  .garden-resolution { grid-template-columns: 1fr; gap: 24px; padding: 28px 20px; }
  .garden-resolution h2 br { display: none; }
  .garden-resolution-copy > p:first-child { font-size: 1rem; }
  .garden-resolution-copy strong { font-size: 1.2rem; }
  .garden-resolution .button { width: 100%; padding-inline: 12px; gap: 10px; }
  .garden-resolution .reassurance { font-size: .75rem; }
}
/* Static is the default: no JS, missing observer, and reduced motion keep all content. */
@media (prefers-reduced-motion: no-preference) {
  .garden-motion .garden-feature { animation: garden-tree 10s ease infinite paused; }
  .garden-motion .feature-edge { animation-name: garden-edge; }
  .garden-motion .feature-terrace { animation-name: garden-terrace; }
  .garden-motion .garden-line { animation: garden-tree-line 10s ease infinite paused; }
  .garden-motion .feature-edge .garden-line { animation-name: garden-edge-line; }
  .garden-motion .feature-terrace .garden-line { animation-name: garden-terrace-line; }
  .garden-motion.is-analyzed .garden-feature, .garden-motion.is-analyzed .garden-line { animation-play-state: running; }
  .garden-motion.garden-paused .garden-feature { animation: none; opacity: 1; }
  .garden-motion.garden-paused .garden-line { animation: none; stroke-dashoffset: 0; }
  @keyframes garden-tree { 0%, 10%, 100% { opacity: 0; } 20%, 92% { opacity: 1; } }
  @keyframes garden-edge { 0%, 23%, 100% { opacity: 0; } 33%, 92% { opacity: 1; } }
  @keyframes garden-terrace { 0%, 36%, 100% { opacity: 0; } 46%, 92% { opacity: 1; } }
  @keyframes garden-tree-line { 0%, 10%, 100% { stroke-dashoffset: 260; } 21%, 92% { stroke-dashoffset: 0; } }
  @keyframes garden-edge-line { 0%, 23%, 100% { stroke-dashoffset: 260; } 34%, 92% { stroke-dashoffset: 0; } }
  @keyframes garden-terrace-line { 0%, 36%, 100% { stroke-dashoffset: 260; } 47%, 92% { stroke-dashoffset: 0; } }
}
/* Three comparison links retain 44px targets on the smallest screens. */
@media (max-width: 767px) {
  .header-inner { gap: 8px; }
  .logo { width: 124px; }
}
@media (prefers-reduced-motion: reduce) {
  .garden-feature { opacity: 1; transition: none; }
  .garden-line { stroke-dashoffset: 0; transition: none; }
}

.garden-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 16px 0 36px; }
.garden-controls .garden-caption { flex: 1 1 300px; margin: 0; }
.garden-toggle { min-height: 44px; padding: 8px 12px; border: 1px solid var(--pine); border-radius: 4px; background: var(--paper); color: var(--pine); font: inherit; font-size: .85rem; cursor: pointer; }