/* LGE process review: scroll-driven 3D construction story. Scoped to this page. */

/* #page is overflow-y:auto site-wide, which makes it a scroll container and
   stops position:sticky from working. clip keeps the no-side-scroll rule
   without creating one. */
body.lge-process-review #page{overflow:clip}
/* No phone number in the header on this page, matching the live site. */
body.lge-process-review #nav-wrap li.lge-nav-phone{display:none!important}
/* No email-list pop-up on this page (the module also stops its timer). */
body.lge-process-review .email-list{display:none!important}

.ps-experience{padding-bottom:40px}
.ps-experience .ps-opening{margin-bottom:0}

.ps3{--ps3-top:var(--lge-nav-h,72px);--ps3-yellow:#fdaf3f;--ps3-ink:#071a24;position:relative;background:var(--ps3-ink);color:#fff}
.ps3.is-live{height:780vh;height:780svh}
.ps3-stage{position:relative;height:calc(100vh - var(--ps3-top));height:calc(100svh - var(--ps3-top));min-height:560px;overflow:hidden;isolation:isolate;background:radial-gradient(120% 90% at 55% 45%,#123341 0%,#071a24 70%)}
.ps3.is-live .ps3-stage{position:sticky;top:var(--ps3-top)}
.ps3-stage:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(130% 100% at 55% 45%,rgba(7,26,36,0) 55%,rgba(7,26,36,.32) 100%)}
/* Scrim so the rail and footer stay legible over the daylight scene. */
.ps3-stage:after{content:"";position:absolute;left:0;right:0;bottom:0;height:200px;z-index:2;pointer-events:none;background:linear-gradient(rgba(7,26,36,0),rgba(7,26,36,.62))}
.ps3-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:0;transition:opacity .8s ease}
.ps3.is-3d .ps3-canvas{opacity:1}

.ps3-photo{position:absolute;inset:0;z-index:1;opacity:1;pointer-events:none}
.ps3.is-3d .ps3-photo{opacity:0}
.ps3-photo img{display:block;width:100%;height:100%;object-fit:cover;object-position:50% 55%}


.ps3-tags{position:absolute;inset:0;z-index:2;pointer-events:none}
.ps3-tag{position:absolute;left:0;top:0;margin:-30px 0 0 -8px;padding:5px 9px;background:var(--ps3-yellow);color:#071a24;font:700 10px/1 var(--lge-font-body);letter-spacing:.12em;text-transform:uppercase;opacity:0;transition:opacity .35s ease;white-space:nowrap}
.ps3-tag.is-on{opacity:1}

/* Phase panel */
.ps3-panel{position:absolute;z-index:3;left:var(--lge-gutter,40px);top:clamp(18px,4vh,40px);width:min(390px,31vw);padding:24px 26px 22px;background:var(--ps3-ink);border-top:2px solid var(--ps3-yellow);box-shadow:0 18px 50px rgba(0,0,0,.25)}
.ps3-count{display:flex;align-items:baseline;gap:6px;margin:0 0 14px!important;font:700 11px/1 var(--lge-font-body)!important;letter-spacing:.14em;color:#8ea4af;text-transform:uppercase}
.ps3-count [data-ps3-num]{font:600 34px/1 var(--lge-font-display);letter-spacing:-.02em;color:var(--ps3-yellow)}
.ps3-name{margin:0 0 10px!important;font:700 11px/1.4 var(--lge-font-body)!important;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.ps3-panel h2{margin:0 0 12px;font-family:var(--lge-font-display);font-weight:600;font-size:clamp(26px,2.3vw,36px);line-height:1.08;letter-spacing:-.02em;color:#fff}
.ps3-summary{margin:0!important;font-size:15px!important;line-height:1.55!important;color:#c7d3d9}
.ps3-panel.is-swap .ps3-name,.ps3-panel.is-swap h2,.ps3-panel.is-swap .ps3-summary,.ps3-panel.is-swap .ps3-count{animation:ps3-in .55s cubic-bezier(.2,.7,.2,1) both}
.ps3-panel.is-swap h2{animation-delay:.05s}
.ps3-panel.is-swap .ps3-summary{animation-delay:.1s}
@keyframes ps3-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

.ps3-gate{display:grid;grid-template-rows:0fr;margin-top:0;opacity:0;transition:grid-template-rows .45s ease,opacity .35s ease,margin-top .45s ease}
.ps3-gate>div{overflow:hidden}
.ps3-gate.is-on{grid-template-rows:1fr;opacity:1;margin-top:18px}
.ps3-gate-inner{border-left:3px solid var(--ps3-yellow);padding:2px 0 2px 14px}
.ps3-gate-label{display:flex;align-items:center;gap:8px;font:700 10px/1.4 var(--lge-font-body);letter-spacing:.12em;text-transform:uppercase;color:var(--ps3-yellow)}
.ps3-gate-label:before{content:"";width:7px;height:7px;background:var(--ps3-yellow);transform:rotate(45deg)}
.ps3-gate p{margin:6px 0 0!important;font-size:14px!important;line-height:1.5!important;color:#fff}

/* Callout cards */
.ps3-cards{position:absolute;z-index:3;right:var(--lge-gutter,40px);top:clamp(18px,4vh,40px);width:min(320px,25vw);margin:0!important;padding:0!important;list-style:none!important;display:grid}
.ps3-group{grid-area:1/1;display:flex;flex-direction:column;gap:10px;margin:0!important;padding:0!important;visibility:hidden}
.ps3-group.is-current{visibility:visible}
.ps3-card{display:grid;grid-template-columns:26px 1fr;gap:10px;padding:15px 17px 16px;background:#fff;color:#071a24;box-shadow:0 14px 40px rgba(3,15,22,.28);opacity:0;transform:translateX(22px);transition:opacity .45s ease,transform .55s cubic-bezier(.2,.7,.2,1)}
.ps3-card.is-on{opacity:1;transform:none}
.ps3-card-n{font:700 11px/1.5 var(--lge-font-body);letter-spacing:.06em;color:#b37516;padding-top:1px}
.ps3-card h3{margin:0 0 4px;font:700 15px/1.3 var(--lge-font-body);color:#071a24}
.ps3-card p{margin:0!important;font-size:13.5px!important;line-height:1.5!important;color:#43535c}
.ps3-card-img{display:block;width:100%;aspect-ratio:16/8;object-fit:cover;margin-top:10px}

/* Rail */
.ps3-rail{position:absolute;z-index:4;left:var(--lge-gutter,40px);right:var(--lge-gutter,40px);bottom:18px;display:grid;grid-template-columns:16fr 17fr 17fr 30fr 20fr;--ps3-p:0}
.ps3-rail:before,.ps3-rail:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:rgba(255,255,255,.22)}
.ps3-rail:after{background:var(--ps3-yellow);transform-origin:left;transform:scaleX(var(--ps3-p))}
.ps3-rail button{position:relative;appearance:none;display:flex;align-items:baseline;gap:8px;min-height:44px;padding:0 10px 12px 0;background:none;border:0;border-radius:0;color:rgba(255,255,255,.6);font:700 11px/1.3 var(--lge-font-body);letter-spacing:.08em;text-transform:uppercase;text-align:left;cursor:pointer;text-shadow:0 1px 8px rgba(0,0,0,.45);transition:color .3s}
.ps3-rail button span{color:var(--ps3-yellow)}
.ps3-rail button:hover,.ps3-rail button[aria-current]{color:#fff}
.ps3-rail button:focus-visible{outline:2px solid var(--ps3-yellow);outline-offset:3px}
.ps3-rail button i{position:absolute;right:-5px;bottom:-4px;width:10px;height:10px;background:#071a24;border:2px solid rgba(255,255,255,.5);transform:rotate(45deg);z-index:1}
.ps3-rail button.is-done i{background:var(--ps3-yellow);border-color:var(--ps3-yellow)}

.ps3-hint{position:absolute;z-index:3;left:50%;bottom:78px;margin:0!important;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;font:700 10px/1 var(--lge-font-body)!important;letter-spacing:.16em;text-transform:uppercase;color:#fff;transition:opacity .4s ease;pointer-events:none}
.ps3-hint:after{content:"";width:1px;height:34px;background:linear-gradient(#fff,transparent);animation:ps3-drop 1.8s ease-in-out infinite;transform-origin:top}
@keyframes ps3-drop{0%{transform:scaleY(0)}50%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
.ps3-hint.is-gone{opacity:0}

.ps3-foot{position:absolute;z-index:3;left:var(--lge-gutter,40px);right:var(--lge-gutter,40px);bottom:72px;display:flex;justify-content:space-between;align-items:center;gap:20px;pointer-events:none}
.ps3-meta{margin:0!important;font:700 10px/1.4 var(--lge-font-body)!important;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ps3-skip{pointer-events:auto;color:#fff;font:700 10px/1 var(--lge-font-body);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border-bottom:1px solid rgba(255,255,255,.5);padding-bottom:4px;text-shadow:0 1px 8px rgba(0,0,0,.5)}
.ps3-skip:hover{color:var(--ps3-yellow);border-color:currentColor}

/* Paper scenes (construction onward): ink on a light page instead of white on navy. */
.ps3-stage:before,.ps3-stage:after{transition:opacity .6s ease}
.ps3.is-paper .ps3-stage:before{opacity:.35}
.ps3.is-paper .ps3-stage:after{opacity:0}
.ps3.is-paper .ps3-card{box-shadow:0 10px 30px rgba(40,52,60,.14),0 0 0 1px rgba(7,26,36,.07)}
.ps3.is-paper .ps3-panel{box-shadow:0 14px 36px rgba(7,26,36,.2)}
.ps3.is-paper .ps3-rail:before{background:rgba(7,26,36,.16)}
.ps3.is-paper .ps3-rail button{color:rgba(7,26,36,.55);text-shadow:none}
.ps3.is-paper .ps3-rail button span{color:#b06f12}
.ps3.is-paper .ps3-rail button:hover,.ps3.is-paper .ps3-rail button[aria-current]{color:#071a24}
.ps3.is-paper .ps3-rail button i{background:#f3f0e9;border-color:rgba(7,26,36,.4)}
.ps3.is-paper .ps3-rail button.is-done i{background:var(--ps3-yellow);border-color:var(--ps3-yellow)}
.ps3.is-paper .ps3-meta{color:rgba(7,26,36,.62);text-shadow:none}
.ps3.is-paper .ps3-skip{color:#071a24;border-color:rgba(7,26,36,.35);text-shadow:none}
.ps3.is-paper .ps3-tag{box-shadow:0 0 0 1px rgba(7,26,36,.12)}

/* Fallback (no WebGL): the photo carries the stage. */
.ps3.is-fallback .ps3-photo{opacity:1!important}
.ps3.is-fallback .ps3-tags{display:none}

@media(max-width:1100px){
 .ps3-panel{width:min(340px,34vw);padding:20px 22px}
 .ps3-cards{width:min(280px,28vw)}
 .ps3-summary{font-size:14px!important}
 .ps3-rail button{font-size:10px;letter-spacing:.05em}
}

@media(max-width:760px){
 .ps3.is-live{height:640vh;height:640svh}
 .ps3-stage{min-height:520px}
 .ps3-panel{left:0;right:0;bottom:0;top:auto;width:auto;padding:16px var(--lge-gutter,20px) 64px;border-top-width:2px;background:var(--ps3-ink)}
 .ps3-count{margin-bottom:8px!important}
 .ps3-count [data-ps3-num]{font-size:24px}
 .ps3-name{margin-bottom:6px!important;font-size:10px!important}
 .ps3-panel h2{font-size:24px;margin-bottom:0}
 .ps3-summary{display:none}
 .ps3-gate.is-on{margin-top:12px}
 .ps3-gate p{font-size:13px!important}
 .ps3-cards{left:var(--lge-gutter,20px);right:var(--lge-gutter,20px);top:14px;width:auto}
 .ps3-card{display:none;padding:12px 14px;grid-template-columns:22px 1fr;transform:translateY(-8px)}
 .ps3-card.is-latest{display:grid}
 .ps3-card h3{font-size:14px}
 .ps3-card p{font-size:12.5px!important}
 .ps3-card-img{display:none}
 .ps3-rail{bottom:10px}
 .ps3-rail button{min-height:40px;padding-bottom:10px;font-size:0;letter-spacing:0}
 .ps3-rail button span{font-size:11px}
 .ps3-hint{bottom:auto;top:46%}
 .ps3-foot{display:none}
}

@media(prefers-reduced-motion:reduce){
 .ps3-card,.ps3-gate,.ps3-tag,.ps3-hint{transition:none}
 .ps3-panel.is-swap *{animation:none!important}
 .ps3-hint:after{animation:none}
}

/* Kyle 2026-10-27: each phase shows its own name as the headline (the separate name line would repeat it), and the top phase strip drops its numbers on desktop so they don't clash with the five phases. Phones keep the numbers, since the strip shows only those there. */
.ps3-panel .ps3-name{display:none}
@media(min-width:761px){.ps3-rail button span{display:none}}