/* Layout / Master Plan page. Needs style.css + gsap.css from your GSAP project (colour tokens, header, buttons). */
:root{--warm:#faf8f3;--beige:#ebe3d3;--gold:#b8975a;--char:#232826}
.lp{background:var(--warm);color:var(--char)}
.hero,.lq,.lc{position:relative;overflow:hidden;isolation:isolate;background:var(--deep)}
.bg{position:absolute;left:0;top:-12%;width:100%;height:124%;object-fit:cover;z-index:-2}
.shade{position:absolute;inset:0;z-index:-1}
.img-missing{opacity:0!important}
.hero-layout{min-height:92svh;padding-bottom:6rem}
.hero-layout h1{text-transform:uppercase;letter-spacing:.1em;font-size:clamp(2rem,6.4vw,4.8rem)}
.hero-layout p{max-width:680px;margin:1.2rem auto 0}
.scroll-ind{position:absolute;bottom:1.6rem;left:50%;translate:-50% 0;display:flex;flex-direction:column;align-items:center;gap:.6rem;color:#fff;text-decoration:none;font-size:.7rem;letter-spacing:.25em;text-transform:uppercase}
.scroll-ind i{width:1px;height:46px;background:linear-gradient(#fff,transparent);transform-origin:top;animation:sd 2s ease-in-out infinite}
@keyframes sd{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
h2.t{text-transform:uppercase;letter-spacing:.12em;font-size:clamp(1.7rem,4vw,2.8rem);text-align:center}
.sub{max-width:700px;margin:1rem auto 0;text-align:center;color:#4a5a53}
section.sec{padding-block:clamp(4rem,9vw,7rem) 0}
/* viewer */
.mp .lv-wrap{margin-top:2.2rem}
.lv{position:relative;background:var(--beige);border:1px solid #d9cfba;border-radius:6px;overflow:hidden}
.lv-inline{height:min(84svh,920px);min-height:420px}
.lv-stage{position:absolute;inset:0;overflow:hidden;cursor:zoom-in;touch-action:pan-y}
.lv.zoomed .lv-stage{cursor:grab}
.lv-stage img{position:absolute;left:50%;top:50%;max-width:100%;max-height:100%;transform:translate(-50%,-50%);user-select:none;-webkit-user-drag:none;will-change:transform}
.lv-ph{position:absolute;inset:0;display:none;align-items:center;justify-content:center;text-align:center;padding:2rem;color:#6b6250;font-size:.95rem;border:2px dashed #cbbfa6}
.lv.missing .lv-ph{display:flex}
.lv-tools{position:absolute;top:12px;right:12px;z-index:3;display:flex;flex-direction:column;gap:8px}
.lv-tools button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(0,0,0,.12);background:rgba(255,255,255,.94);color:var(--deep);font:inherit;font-size:1.1rem;cursor:pointer}
.lv-tools button:hover{background:var(--deep);color:#fff}
.lv-hint{position:absolute;left:14px;bottom:10px;z-index:3;font-size:.72rem;color:#6b6250;background:rgba(255,255,255,.8);padding:.2rem .6rem;border-radius:99px}
.mp-btn{text-align:center;margin-top:1.8rem}
.mp-btn .m{display:none}
.lv-lb{position:fixed;inset:0;z-index:300;background:rgba(10,18,15,.96);display:flex}
.lv-lb[hidden]{display:none}
.lv-big{flex:1;border:0;border-radius:0;background:transparent}
.lv-big .lv-stage{touch-action:none}
.lv-big .lv-tools{flex-direction:row;top:max(12px,env(safe-area-inset-top))}
/* understanding */
.uc{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem;margin-top:3rem}
.uc h3{font-size:.8rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--sans);font-weight:500;color:var(--clay);padding-top:1rem;border-top:2px solid var(--gold);margin-bottom:.7rem}
.uc p{color:#3d4a44;font-size:.95rem}
.note{text-align:center;font-size:.85rem;color:#7a7566;margin-top:2.5rem}
/* flow */
.fx{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,6vw,5rem);align-items:center}
.fx h2{text-align:left}.fx .sub{text-align:left;margin-left:0}
.flow{display:flex;flex-direction:column;align-items:center}
.fn{background:#fff;border:1px solid #d9cfba;border-radius:99px;padding:.8rem 2rem;font-size:.78rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;color:var(--deep);text-align:center;min-width:210px}
.fn.end{background:var(--deep);color:#fff;border-color:var(--deep)}
.fl{display:block;width:1px;height:34px;background:var(--gold);transform-origin:top}
.fb{display:grid;grid-template-columns:1fr 1fr;gap:1rem;width:100%;max-width:440px;border-top:1px solid var(--gold);margin-top:0}
.fb>div{display:flex;flex-direction:column;align-items:center}.fb .fn{min-width:0;width:100%;padding-inline:1rem}
/* key features */
.kf{background:var(--deep);color:#fff;margin-top:clamp(4rem,9vw,7rem);padding:clamp(3rem,7vw,5rem) 1.25rem}
.kf-in{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;max-width:1100px;margin:auto;text-align:center}
.kf strong{display:block;font-family:var(--serif);font-weight:400;font-size:clamp(1.8rem,3.6vw,3rem);color:#d9b97a;line-height:1.1}
.kf small{display:block;margin-top:.6rem;font-size:.75rem;letter-spacing:.16em;text-transform:uppercase;opacity:.85}
/* plan to reality */
.pr{display:grid;grid-template-columns:repeat(4,1fr);gap:1.4rem;margin-top:3rem}
.pr figure{position:relative}
.pr .ph{display:block;position:relative;aspect-ratio:4/5;overflow:hidden;border-radius:4px;background:var(--beige);cursor:zoom-in}
.pr img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s cubic-bezier(.2,.7,.2,1)}
.pr .ph:hover img{transform:scale(1.05)}
.pr figcaption{margin-top:.9rem}.pr b{display:block;font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--clay);font-weight:500}
.pr span{font-family:var(--serif);font-size:1.15rem}
.pr figure:not(:last-child)::after{content:"→";position:absolute;right:-1.2rem;top:38%;translate:50% 0;color:var(--gold);font-size:1.5rem}
/* quote + cta */
.lq{margin-top:clamp(4rem,9vw,7rem);min-height:66svh;display:grid;place-items:center;text-align:center;color:#fff;padding:4rem 1.5rem}
.lq blockquote{font-family:var(--serif);font-style:italic;font-size:clamp(2rem,6vw,4.5rem);line-height:1.2;max-width:900px}
.lc{min-height:78svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#fff;padding:5rem 1.5rem}
.lc h2{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(1.8rem,5.2vw,3.8rem);max-width:900px}
.lc p{margin:1rem 0 2.2rem;font-size:clamp(1rem,2vw,1.2rem)}
.bt{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center}
.bt .btn{margin:0;text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:500}
.btn-ghost{background:transparent;border:1px solid rgba(255,255,255,.7)}.btn-ghost:hover{background:#fff;color:var(--deep)}
.wa svg{width:30px;height:30px;fill:#fff}
@media(max-width:1000px){.uc{grid-template-columns:repeat(2,1fr)}.pr{grid-template-columns:repeat(2,1fr);row-gap:2rem}.pr figure:nth-child(2)::after{display:none}.fx{grid-template-columns:1fr}.fx h2,.fx .sub{text-align:center;margin-inline:auto}.kf-in{grid-template-columns:repeat(2,1fr);row-gap:2.5rem}}
@media(max-width:640px){
  .uc{grid-template-columns:1fr}.pr figure::after{display:none!important}
  .lv-inline{height:min(64svh,540px);min-height:300px}.lv-inline .lv-tools,.lv-hint{display:none}
  .mp-btn .d{display:none}.mp-btn .m{display:inline}.mp-btn .btn{width:100%}
  .bt{flex-direction:column;width:100%;max-width:320px}.bt .btn{width:100%}
}
@media(max-height:520px) and (orientation:landscape){.hero-layout,.lq,.lc{min-height:auto;padding-block:6rem 4rem}}