.tree-stage{height:clamp(400px,51vh,550px);isolation:isolate}
.tree-stage:before{content:'';position:absolute;left:50%;top:4%;width:min(72%,650px);height:85%;transform:translateX(-50%);background:radial-gradient(ellipse,#d9d8b95c,transparent 68%);border-radius:50%;z-index:-1;animation:tree-light 12s ease-in-out infinite}
.tree-stage:after{content:'';position:absolute;bottom:3%;left:50%;width:28%;height:3%;background:radial-gradient(ellipse,#42493125,transparent 70%);transform:translateX(-50%);filter:blur(4px);z-index:-1}
.tree-webgl{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity .65s;pointer-events:none}
.tree-ready .tree-webgl{opacity:1}.tree-ready .living-tree{opacity:0}.living-tree{transition:opacity .65s}
.wind-leaf{position:absolute;top:0;left:0;width:12px;height:5px;background:linear-gradient(145deg,#acb283,#626c42);border-radius:0 90% 0 90%;box-shadow:0 2px 3px #42493113;pointer-events:none;opacity:0;z-index:1;will-change:transform}
.branch{background:#f8f6efeb;border-color:#bfc5a8;box-shadow:0 7px 20px #42493110;transition:transform .7s cubic-bezier(.18,1.8,.45,1),box-shadow .5s,background .5s}
.branch:before{content:'';position:absolute;left:50%;top:-16px;height:16px;width:1px;background:#89936d80;transform:rotate(8deg);transform-origin:bottom}
.branch-arrow{transition:transform .5s,color .5s}
@media(hover:hover){.branch:hover{transform:translateY(-10px) rotate(-3deg) scale(1.055);box-shadow:0 18px 30px #42493121;background:#fffef7}.branch:nth-child(even):hover{transform:translateY(-10px) rotate(3deg) scale(1.055)}.branch:hover .branch-arrow{transform:translate(3px,-3px);color:var(--deep)}}
.motion-toggle{z-index:3}.motion-paused:before{animation-play-state:paused}
@keyframes tree-light{0%,100%{opacity:.5;transform:translateX(-50%) scale(.95)}50%{opacity:1;transform:translateX(-48%) scale(1.07)}}
@media(max-width:600px){.tree-stage{height:480px}.tree-webgl{height:310px;top:0}.tree-stage:before{height:290px;width:100%;top:0}.tree-stage:after{top:290px;bottom:auto;width:45%}.living-tree{height:310px;top:0}.branch-1,.branch-2{top:244px}.branch-3,.branch-4{top:306px}.branch-5,.branch-6{top:382px}.branch:before{display:none}.wind-leaf{width:10px;height:4px}}
@media(prefers-reduced-motion:reduce){.tree-stage:before{animation:none}.branch,.tree-webgl,.living-tree{transition:none}.wind-leaf{display:none}}

/* Keep the complete brand together; mobile navigation follows it in normal flow. */
.tree-stage{--art-height:clamp(400px,51vh,550px);height:auto}
.tree-stage:before,.tree-stage:after{display:none}
.tree-art{position:relative;height:var(--art-height);isolation:isolate}
.tree-art:before{content:'';position:absolute;inset:4% 12% 11%;background:radial-gradient(ellipse,#d9d8b95c,transparent 68%);z-index:-1;border-radius:50%}
.tree-art:after{content:'';position:absolute;left:36%;right:36%;bottom:3%;height:3%;background:radial-gradient(ellipse,#42493125,transparent 70%);filter:blur(4px);z-index:-1}
.tree-art .living-tree,.tree-art .tree-webgl{position:absolute;inset:0;width:100%;height:100%}
.tree-stage .branch-nav{position:static;height:auto;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;max-width:900px;margin:30px auto 0}
.tree-stage .branch{position:relative;inset:auto;width:auto;min-height:82px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:18px 20px;transform:none;box-shadow:none;background:#f8f6ef;border-color:#d3d5c4}
.tree-stage .branch:before,.tree-stage .branch-number{display:none}
.tree-stage .branch-title{font-size:25px;line-height:1.15}
.tree-stage .branch small{font-size:12px;line-height:1.3}
@media(hover:hover){.tree-stage .branch:hover{transform:translateY(-3px);background:#fffef7;box-shadow:0 6px 16px #42493110}}
.branch{grid-template-columns:22px auto}.branch-arrow{display:none}
.tree-stage .home-brand{margin-top:4px}
.tree-stage .motion-toggle{position:static;transform:none;margin:16px auto 0}
@media(max-width:600px){
 .home-header{padding:14px 20px}.home-intro>p{margin-bottom:0}
 .tree-stage{--art-height:260px}
 .tree-art{max-width:360px;margin:auto}
 .tree-stage .home-brand{width:260px;max-width:80%;margin:-7px auto 0}
 .tree-stage .home-brand p{margin-top:12px}
 .tree-stage .branch-nav{position:static;height:auto;display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:26px 3px 0}
 .tree-stage .branch{position:relative;inset:auto;width:auto;min-height:68px;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:6px;padding:13px 12px;transform:none;box-shadow:none;background:#f8f6ef;border-color:#d3d5c4}
 .tree-stage .branch-title{font-size:21px;line-height:1.12}
 .tree-stage .branch small{font-size:11px;line-height:1.3}
 .tree-stage .branch-number{display:none}
 .tree-stage .motion-toggle{position:static;transform:none;margin:14px auto 0;font-size:11px}
 .tree-stage .branch:active{background:var(--cream)}
 .home-invitation{margin-top:24px}
}
/* Stable trunk and roots, with palette-based navigation hierarchy. */
.tree-canopy{animation:none!important;transform:none!important}.tree-canopy image{filter:none}
.tree-stage .branch{border-color:#d3d5c4;background:#f8f6ef;color:#30352b}

.tree-stage .branch-4{background:#d5d8c5;border-color:#939b78;color:#303725;box-shadow:0 5px 16px #79805a20}
.tree-stage .branch-4 .branch-title{font-weight:600}.tree-stage .branch-4 small{color:#303725;font-size:12px}
.tree-stage .branch:focus-visible{outline:3px solid #4e5446;outline-offset:4px}
@media(hover:hover){.tree-stage .branch:hover{background:#fffef7}.tree-stage .branch-4:hover{background:#c6ccb4;border-color:#79805a}}
.tree-stage .branch-4:active{background:#c6ccb4}
.tree-stage .branch{align-items:center;text-align:center}