.living-hero { padding-top: clamp(3.5rem, 6vw, 6rem); padding-bottom: clamp(3rem, 5vw, 5rem); min-height: 0; }
.living-hero .eyebrow { margin-bottom: 2rem; }
.living-composition { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); align-items: center; gap: 1rem; }
.living-hero h1 { margin: 0; color: var(--green-900); font-size: clamp(3.5rem, 6.8vw, 6.8rem); letter-spacing: -.06em; line-height: 1.03; text-wrap: initial; }
.living-heading-line { display: block; }
.living-word-space { display: grid; }
.living-word-space > span { grid-area: 1 / 1; }
.living-word-measure { visibility: hidden; }
.living-word { color: #a15037; transition: opacity 380ms ease, transform 600ms cubic-bezier(.2,.7,.2,1), filter 380ms ease; }
.living-word.is-changing { opacity: 0; transform: translateY(.1em); filter: blur(3px); }
.living-hero .hero-intro { max-width: 36rem; margin-top: 1.8rem; }
.living-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1.5rem; margin-top: 2.5rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.living-controls[hidden] { display: none; }
.living-choices { display: flex; flex-wrap: wrap; gap: 1.2rem; }
.living-controls button { font: inherit; font-size: .75rem; color: var(--muted); background: transparent; border: 0; border-bottom: 1px solid transparent; padding: .65rem 0; min-height: 44px; cursor: pointer; }
.living-controls button[aria-pressed="true"] { color: var(--green-900); border-bottom-color: #a15037; }
.living-controls button:hover { color: var(--green-900); }
.living-controls button:focus-visible { outline: 2px solid var(--green-800); outline-offset: 5px; }
.living-art { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; pointer-events: none; }
.living-halo { position: absolute; inset: -10%; background: radial-gradient(circle, var(--green-100), transparent 65%); opacity: .65; }
.living-ring { position: absolute; border: 1px solid var(--green-900); border-radius: 18%; width: 76%; height: 76%; left: 50%; top: 50%; opacity: .5; transition: transform 1500ms cubic-bezier(.2,.8,.2,1), border-radius 1500ms, opacity 1500ms; }
.living-ring.r1 { transform: translate(-50%,-50%) rotate(-16deg); }
.living-ring.r2 { transform: translate(-50%,-50%) rotate(14deg) scale(.82); opacity: .35; }
.living-ring.r3 { transform: translate(-50%,-50%) rotate(44deg) scale(.62); opacity: .2; }
.living-tile { position: absolute; width: 22%; height: 28%; left: 50%; top: 50%; border: 1px solid var(--line); background: var(--paper); box-shadow: 0 12px 24px rgb(0 0 0 / .03); transition: transform 1500ms cubic-bezier(.2,.8,.2,1), border-radius 1500ms; }
.living-tile.t1 { transform: translate(-145%,-45%) rotate(-12deg); }
.living-tile.t2 { transform: translate(-35%,-75%) rotate(6deg); background: var(--green-100); }
.living-tile.t3 { transform: translate(65%,-20%) rotate(19deg); background: var(--terracotta); border-color: transparent; }
.living-seed { position: absolute; width: 4%; height: 4%; left: 48%; top: 48%; border-radius: 50%; background: var(--green-900); transform: translate(0,950%); transition: transform 1500ms; }
.living-axis { position: absolute; height: 1px; background: var(--line); width: 100%; top: 50%; z-index: -1; transform: rotate(-25deg); }
[data-scene="1"] .living-ring.r1 { border-radius: 50%; transform: translate(-50%,-50%) scale(1.16); }
[data-scene="1"] .living-ring.r2 { border-radius: 50%; transform: translate(-50%,-50%) scale(.86); }
[data-scene="1"] .living-ring.r3 { border-radius: 50%; transform: translate(-50%,-50%) scale(.56); }
[data-scene="1"] .living-tile.t1 { transform: translate(-50%,-50%) scale(.65); border-radius: 50%; }
[data-scene="1"] .living-tile.t2 { transform: translate(-50%,-50%) scale(.42); border-radius: 50%; }
[data-scene="1"] .living-tile.t3 { transform: translate(-50%,-50%) scale(.2); border-radius: 50%; }
[data-scene="1"] .living-seed { transform: translate(700%,-700%); }
[data-scene="2"] .living-ring.r1 { border-radius: 50%; transform: translate(-50%,-50%) rotate(-35deg) scale(1.15,.65); }
[data-scene="2"] .living-ring.r2 { border-radius: 50%; transform: translate(-50%,-50%) rotate(35deg) scale(1.15,.65); }
[data-scene="2"] .living-ring.r3 { border-radius: 50%; transform: translate(-50%,-50%) scale(.4); opacity: .2; }
[data-scene="2"] .living-tile.t1 { transform: translate(-190%,-85%) rotate(-8deg) scale(.65); }
[data-scene="2"] .living-tile.t2 { transform: translate(65%,-110%) rotate(12deg) scale(.7); }
[data-scene="2"] .living-tile.t3 { transform: translate(25%,45%) rotate(-6deg) scale(.6); }
[data-scene="2"] .living-seed { transform: translate(-100%,0); }
@media (min-width: 50.01rem) and (max-width: 70rem) { .living-hero h1 { font-size: clamp(3.2rem, 6vw, 4.6rem); } }
@media (max-width: 50rem) { .living-hero h1 { font-size: clamp(3rem, 9.8vw, 5.5rem); } }
@media (max-width: 35rem) {
  .living-composition { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; }
  .living-hero h1 { font-size: clamp(3.2rem, 13.8vw, 4.8rem); }
  .living-art { width: 9rem; justify-self: end; margin-top: -1rem; margin-bottom: -1rem; }
  .living-hero .hero-intro { margin-top: 1.5rem; }
  .living-choices { gap: 1rem; }
  .living-controls { gap: .25rem; }
}
@media (prefers-reduced-motion: reduce) { .living-hero *, .living-hero *::before { transition: none !important; } }