/* The copy occupies the cavern's open left wall. The scene remains the focal point. */
/* The roof's projected silhouette reveals HTML as part of the world. */
.cavern-mask-definition{position:absolute;pointer-events:none}
.cavern-interface{position:absolute;inset:0;z-index:2;visibility:hidden;pointer-events:none;mask:url(#cavern-roof-mask);-webkit-mask:url(#cavern-roof-mask)}
.cavern-interface[data-active=true]{visibility:visible}
.cavern-interface[data-covered=false]{mask:none;-webkit-mask:none}
.cavern-copy{position:absolute;left:6.4%;top:50%;transform:translateY(-50%);width:min(39%,520px);pointer-events:none}
.cavern-copy::before{content:"";position:absolute;z-index:-1;inset:-18% -30% -22% -28%;background:radial-gradient(ellipse at 35% 50%,#0d131bbd 0%,#0d131b88 35%,transparent 70%);pointer-events:none}
.cavern-eyebrow{margin:0 0 22px;color:#f3ac7e;font-size:0.6875rem;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.cavern-copy h2{margin:0;font-size:clamp(2.5rem,5.3vw,4.875rem);line-height:1.04;letter-spacing:-.055em;font-weight:500}
.cavern-intro{max-width:38ch;margin:24px 0 0;font-size:clamp(0.9375rem,1.25vw,1.125rem);line-height:1.65;color:#e2e6e8;text-wrap:pretty;opacity:0}
.cavern-actions{display:flex;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:28px;opacity:0;pointer-events:none}
.cavern-actions[data-active=true]{pointer-events:auto}
.action-primary,.action-secondary{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:13px 21px;font:600 .875rem/1.5 Manrope,Arial,sans-serif;text-decoration:none;letter-spacing:0;cursor:pointer}
.action-primary{color:#201713;background:#efb38b;border:1px solid #efb38b;border-radius:2px;transition:background-color .18s,color .18s}
.action-primary:hover{color:#100c09;background:#ffcea9;border-color:#ffcea9}
.action-secondary{padding-inline:0;border-bottom:1px solid #c6cbd77a;min-height:44px;color:#f4efe4}
.action-secondary:hover{color:#fff;border-color:#efb38b}
html:has(#approach-dialog[open]){overflow:hidden}
#approach-dialog{position:fixed;inset:0 0 0 auto;margin:0;border:0;border-left:1px solid #c7cfdf2e;width:min(550px,100%);height:100%;height:100dvh;max-width:100%;max-height:100%;padding:0;color:#f4efe4;background:#13191f;box-shadow:-20px 0 80px #0005;overscroll-behavior:contain}
#approach-dialog::backdrop{background:#060b11a6}
.approach-top{position:sticky;top:0;z-index:1;background:#13191f;display:flex;align-items:center;justify-content:space-between;padding:20px 40px;border-bottom:1px solid #d5dee31c}
.approach-top .cavern-eyebrow{margin:0}
#approach-close{font-size:1rem;min-width:44px}
.approach-body{padding:36px 40px 40px}
.approach-body h2{font-size:2.125rem;line-height:1.18;letter-spacing:-.04em;font-weight:500;margin:0}
.approach-intro{font-size:1rem;line-height:1.65;color:#b7c3ce;margin:22px 0 32px}
.approach-principles section{padding:21px 0;border-top:1px solid #d5dee329}
.approach-principles h3{font-size:1.0625rem;font-weight:500;letter-spacing:-.02em;margin:0 0 9px}
.approach-principles p{font-size:1rem;line-height:1.7;color:#bac3cc;margin:0;max-width:48ch}
.approach-contact{margin-top:14px;border-top:1px solid #d5dee329;padding-top:26px}
.approach-contact p{font-size:1.0625rem;margin:0 0 18px}
.approach-contact span{display:block;margin-top:14px;color:#aab4be;font-size:1rem}
@media(min-width:701px) and (max-height:700px){
 .cavern-copy{top:49%;width:42%}.cavern-copy h2{font-size:clamp(2.5rem,5vw,4.375rem)}
 .cavern-intro{margin-top:18px;font-size:1rem;max-width:36ch}.cavern-actions{margin-top:20px}
}
@media(max-width:700px){
 /* A real reading area below the sculpture. The viewport changes while the
    handoff is covered, before the cavern appears. */
 body[data-realm=cavern] #stage{height:62svh}
 body[data-realm=cavern] .scrim{background:linear-gradient(180deg,#10172250,transparent 15%,transparent 43%,#080d1280 53%,#080d12 61%)}
 .cavern-copy{left:22px;right:22px;top:auto;bottom:max(32px,env(safe-area-inset-bottom));transform:none;width:auto}
 .cavern-copy::before{display:none}
 .cavern-copy h2{font-size:clamp(2.25rem,10vw,3rem);line-height:1.05}
 .cavern-intro{max-width:39ch;margin-top:15px;font-size:1rem;line-height:1.6}
 .cavern-actions{margin-top:21px;gap:12px 20px}
 .action-primary,.action-secondary{font-size:1rem;min-height:44px}
 .action-primary{padding:11px 16px}
 .approach-top{padding:16px 24px}.approach-body{padding:28px 24px 32px}
 .approach-body h2{font-size:1.875rem}.approach-intro{font-size:1rem}
 .approach-principles section{padding:19px 0}
 body[data-realm=cavern] .scroll-cue{display:none}
 body[data-realm=cavern] footer{grid-template-rows:44px;padding-bottom:max(18px,env(safe-area-inset-bottom))}
 body[data-realm=cavern] #motion,body[data-realm=cavern] #pool-action{grid-row:1}
}
@media(max-width:700px) and (max-height:720px){
 body[data-realm=cavern] #stage{height:57svh}
 body[data-realm=cavern] .scrim{background:linear-gradient(180deg,#10172250,transparent 15%,transparent 39%,#080d1280 49%,#080d12 56%)}
 .cavern-copy{bottom:max(24px,env(safe-area-inset-bottom))}.cavern-copy h2{font-size:2.25rem}
 .cavern-intro{margin-top:12px;font-size:1rem}
 .cavern-actions{margin-top:16px}
}
@media(min-width:701px) and (max-height:500px){
 .cavern-copy{width:46%;top:50%}.cavern-copy h2{font-size:clamp(2rem,4.6vw,2.625rem)}
 .cavern-intro{font-size:1rem;line-height:1.55;margin-top:13px;max-width:42ch}
 .cavern-actions{margin-top:15px}.cavern-actions>*{min-height:44px;padding-block:10px}
}
@media(prefers-reduced-motion:reduce){.action-primary{transition:none}}

/* Chapter controls share the existing reading area and require no extra canvas. */
.chapter-step{background:transparent;border:0;border-bottom:1px solid #c6cbd77a;border-radius:0}
.chapter-step:disabled{opacity:.4;cursor:default}
.cavern-copy[data-chapter=link] h2{font-size:clamp(2.25rem,4.1vw,4rem);line-height:1.1}
.cavern-copy[data-chapter=link] h2 span{display:block}
.cavern-copy[data-chapter=link] h2 span+span{margin-top:.12em}
.cavern-copy[data-chapter=link] .cavern-intro{font-size:clamp(0.875rem,1.16vw,1.0625rem);max-width:40ch}
.approach-example{margin:0 0 18px}
@media(max-width:700px){
 .cavern-copy[data-chapter=link] h2{font-size:clamp(1.75rem,7.7vw,2.375rem);line-height:1.08}
 .cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.6}
 .cavern-actions{gap:12px 14px}
}
@media(max-width:700px) and (max-height:720px){
 .cavern-copy[data-chapter=link] h2{font-size:1.6875rem}
 .cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.55}
}
@media(min-width:701px) and (max-height:700px){
 .cavern-copy[data-chapter=link] h2{font-size:clamp(1.875rem,3.9vw,2.75rem)}
 .cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.6;margin-top:17px}
}
@media(min-width:701px) and (max-height:500px){
 .cavern-copy[data-chapter=link] h2{font-size:2rem}
 .cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.55;margin-top:13px}
}
/* Short landscape phones use a side-by-side composition instead of squeezing
   the sculpture into the portrait reading area's upper half. */
@media(max-width:700px) and (max-height:450px) and (min-aspect-ratio:4/3){
 body[data-realm=cavern] #stage{height:100svh}
 body[data-realm=cavern] .scrim{background:linear-gradient(90deg,#080d1266,transparent 75%)}
 .cavern-copy{left:22px;right:auto;top:auto;bottom:20px;width:50%;transform:none}
 .cavern-copy::before{display:block}
 .cavern-copy h2{font-size:1.75rem;line-height:1.05}
 .cavern-copy[data-chapter=link] h2{font-size:1.5rem;line-height:1.08}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{max-width:none;font-size:1rem;line-height:1.5;margin-top:10px}
 .cavern-actions{margin-top:12px;gap:10px 12px}
 .cavern-actions>*{font-size:0.6875rem}
}

@media(min-width:701px) and (max-width:900px) and (max-aspect-ratio:9/10){
 body[data-realm=cavern] #stage{height:62svh}
 body[data-realm=cavern] .scrim{background:linear-gradient(180deg,#10172250,transparent 15%,transparent 43%,#080d1280 53%,#080d12 61%)}
 .cavern-copy{left:32px;right:32px;top:auto;bottom:36px;transform:none;width:auto}
 .cavern-copy::before{display:none}
 .cavern-copy h2{font-size:3.375rem;line-height:1.05}
 .cavern-copy[data-chapter=link] h2{font-size:2.625rem;line-height:1.08}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{max-width:55ch;font-size:1rem;line-height:1.6;margin-top:22px}
 .cavern-actions{margin-top:24px}
}

/* Three business chapters, with the reading and controls on one clear axis. */
.cavern-copy h2,.cavern-copy[data-chapter=link] h2{font-size:clamp(2.25rem,4.1vw,4rem);line-height:1.1}
.cavern-copy .cavern-eyebrow{margin-bottom:18px;font-size:0.6875rem}
.cavern-actions{gap:16px;margin-top:23px;flex-wrap:nowrap}
.chapter-previous{border:1px solid #bccbd74d;border-radius:2px;min-width:80px;min-height:44px;font-size:.875rem;line-height:1;padding:12px}
.chapter-previous:hover{border-color:#efb38b}
.chapter-previous:disabled{opacity:.25}
.chapter-step{justify-content:space-between;gap:24px;min-width:205px;text-align:left;font-weight:500}

@media(max-width:700px){
 .cavern-copy h2,.cavern-copy[data-chapter=link] h2{font-size:clamp(1.8125rem,7.8vw,2.375rem);line-height:1.09}
 .cavern-copy .cavern-eyebrow{margin-bottom:12px;font-size:0.6875rem}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.6;margin-top:15px}
 .cavern-actions{margin-top:18px}
}
@media(max-width:700px) and (max-height:720px){
 .cavern-copy{bottom:22px}.cavern-copy h2,.cavern-copy[data-chapter=link] h2{font-size:1.6875rem}
 .cavern-copy .cavern-eyebrow{margin-bottom:10px}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.55;margin-top:12px}
 .cavern-actions{margin-top:14px}
}
@media(max-height:500px) and (min-aspect-ratio:4/3){
 .cavern-copy{width:45%;left:22px;top:92px;bottom:auto;transform:none}
 .cavern-copy h2,.cavern-copy[data-chapter=link] h2{font-size:1.625rem}
 .cavern-copy .cavern-eyebrow{margin-bottom:8px;font-size:0.6875rem}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.5;margin-top:10px}
 .cavern-actions{margin-top:12px;gap:12px}.chapter-step{min-width:180px;font-size:0.6875rem}
}
@media(max-width:700px) and (max-height:360px) and (min-aspect-ratio:4/3){
 .cavern-copy{top:78px;width:51%}.cavern-copy h2,.cavern-copy[data-chapter=link] h2{font-size:1.375rem}
 .cavern-copy .cavern-eyebrow{font-size:0.6875rem;margin-bottom:7px}
 .cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.4;margin-top:8px}
 .cavern-actions{margin-top:7px}
}

.cavern-intro,.cavern-copy[data-chapter=link] .cavern-intro{font-size:1rem;line-height:1.65}
.cavern-copy .cavern-eyebrow{font-size:.75rem}
.action-primary,.action-secondary,.chapter-step,#approach-close{font-size:.875rem}
.chapter-step{min-width:0;flex:1;max-width:18rem;gap:16px}
.cavern-actions{max-width:23rem}
.approach-contact span{overflow-wrap:anywhere}
.approach-principles p{font-size:1rem}
.approach-example .action-secondary{text-align:left;justify-content:flex-start}