/* ===== Heron-style hero: blueprint wordmark behind a solid 3D building stack ===== */
.hero2{padding:94px 16px 0}
.h2-stage{position:relative;height:min(72vh,640px);min-height:460px;margin-top:14px;border:1px solid var(--line);border-radius:8px;overflow:hidden;
  background:radial-gradient(ellipse 70% 50% at 50% 100%,rgba(119,172,162,.28),transparent 70%),radial-gradient(rgba(3,25,38,.07) 1px,transparent 1.3px) 0 0/7px 7px,var(--paper)}
.h2-rule{position:absolute;left:34px;right:34px;height:9px;opacity:.55;background:repeating-linear-gradient(90deg,var(--navy) 0 1px,transparent 1px 10px)}
.h2-rule.top{top:12px}.h2-rule.bot{bottom:12px}
.cx{position:absolute;width:18px;height:18px}
.cx::before,.cx::after{content:"";position:absolute;background:var(--navy);opacity:.7}.cx::before{left:8px;top:0;bottom:0;width:1px}.cx::after{top:8px;left:0;right:0;height:1px}
.cx.a{left:10px;top:6px}.cx.b{right:10px;top:6px}.cx.c{left:10px;bottom:6px}.cx.d{right:10px;bottom:6px}
.wordmark{position:absolute;left:0;right:0;top:11%;text-align:center;font-family:var(--head);font-weight:800;font-size:min(10.4vw,168px);line-height:1;letter-spacing:.01em;white-space:nowrap;color:transparent;-webkit-text-stroke:1.5px var(--navy);filter:drop-shadow(7px 9px 0 rgba(70,129,137,.28))}
.wordmark::before,.wordmark::after{content:"";position:absolute;left:34px;right:34px;height:1px;background:rgba(3,25,38,.35)}
.wordmark::before{top:-14px}.wordmark::after{bottom:-14px}
.wordmark span{display:inline-block;opacity:0;transform:translateY(20px);animation:wm 1.1s .15s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes wm{to{opacity:1;transform:none}}
.h2-label{position:absolute;color:var(--mute);z-index:3}
.h2-label.l1{left:34px;bottom:30px}.h2-label.l2{right:34px;bottom:30px}

/* 3D scene */
.scene3d{position:absolute;left:0;right:0;bottom:0;height:86%;perspective:1700px;perspective-origin:50% 22%}
.bld-sway{position:absolute;left:50%;bottom:78px;width:0;height:0;transform-style:preserve-3d;animation:sway 14s ease-in-out infinite alternate}
@keyframes sway{from{transform:rotateY(-5deg)}to{transform:rotateY(6deg)}}
.bld{position:absolute;left:0;bottom:0;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-12deg) rotateY(var(--ry,-30deg));transition:transform .35s ease-out}
.ground{position:absolute;left:-520px;top:-360px;width:1040px;height:720px;transform:rotateX(90deg);border-radius:50%;
  background:radial-gradient(ellipse,rgba(244,233,205,.9),rgba(244,233,205,0) 70%);transform-style:preserve-3d}
.ground::before{content:"";position:absolute;inset:0;border-radius:50%;background:repeating-linear-gradient(0deg,rgba(3,25,38,.12) 0 1px,transparent 1px 40px),repeating-linear-gradient(90deg,rgba(3,25,38,.12) 0 1px,transparent 1px 40px);-webkit-mask-image:radial-gradient(ellipse,#000 30%,transparent 70%);mask-image:radial-gradient(ellipse,#000 30%,transparent 70%)}
.gshadow{position:absolute;left:300px;top:250px;width:420px;height:240px;border-radius:10px;background:rgba(3,25,38,.42);filter:blur(16px);transform:translateZ(1px)}
.gshadow.s2{left:330px;top:290px;width:480px;height:270px;background:rgba(3,25,38,.16);filter:blur(34px)}

.bx{position:absolute;left:0;bottom:0;width:var(--w);height:var(--h);margin-left:calc(var(--w) / -2);transform-style:preserve-3d;transform:translate3d(var(--x,0px),calc(var(--y,0px) * -1),var(--z,0px));animation:drop 1s cubic-bezier(.2,.8,.2,1) both}
.bx.f1{animation-delay:.2s}.bx.f2{animation-delay:.38s}.bx.f3{animation-delay:.56s}.bx.sign{animation-delay:.74s}.bx.awn,.bx.st1,.bx.st2{animation-delay:.9s}
@keyframes drop{from{opacity:0;translate:0 -90px}to{opacity:1;translate:0 0}}
html:not(.ready) .bx,html:not(.ready) .wordmark span{animation-play-state:paused}
.fa{position:absolute;display:block;backface-visibility:hidden;overflow:hidden}
.fr{width:var(--w);height:var(--h);left:0;top:0;transform:translateZ(calc(var(--d) / 2));background:linear-gradient(#efe8d4,#e2dac4)}
.bk{width:var(--w);height:var(--h);left:0;top:0;transform:rotateY(180deg) translateZ(calc(var(--d) / 2));background:#cfc8b2}
.lf{width:var(--d);height:var(--h);top:0;left:calc((var(--w) - var(--d)) / 2);transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));background:#d3ddd6}
.rt{width:var(--d);height:var(--h);top:0;left:calc((var(--w) - var(--d)) / 2);transform:rotateY(90deg) translateZ(calc(var(--w) / 2));background:linear-gradient(90deg,#a9c3bd,#8fb0a9)}
.tp{width:var(--w);height:var(--d);left:0;top:calc((var(--h) - var(--d)) / 2);transform:rotateX(90deg) translateZ(calc(var(--h) / 2));background:#f7f1de;background-image:linear-gradient(rgba(3,25,38,.06) 1px,transparent 1px);background-size:100% 14px}
.gl{position:absolute;display:block;inset:20% 5% 9%;border-radius:2px;background:
  linear-gradient(90deg,transparent calc(100% - 4px),#f4e9cd 0) 0 0/calc(100% / var(--cols)) 100%,
  linear-gradient(transparent calc(50% - 2px),#f4e9cd calc(50% - 2px) calc(50% + 2px),transparent 0),
  linear-gradient(160deg,rgba(255,255,255,.35) 0 18%,transparent 18% 100%),
  linear-gradient(165deg,#a9ccc8,#468189 58%,#2f6670);box-shadow:inset 0 0 0 3px #f4e9cd}
.rt .gl{opacity:.9;filter:brightness(.82)}
.door{position:absolute;display:block;left:50%;bottom:0;width:76px;height:64px;margin-left:-38px;background:linear-gradient(#2f6670,#173e47);border:4px solid #f4e9cd;border-bottom:0;z-index:2}
.sq{position:absolute;display:block;width:22px;height:22px;background:var(--k);z-index:2}
.bx.sign .fr{background:#031926;display:grid;place-items:center}
.bx.sign .fr span{font-family:var(--head);font-weight:700;font-size:14px;letter-spacing:.12em;color:#f4e9cd}
.bx.sign .tp,.bx.sign .lf,.bx.sign .rt,.bx.sign .bk{background:#0b3347}
.bx.awn .fr{background:var(--cy)}.bx.awn .tp{background:#5fbdee}.bx.awn .rt,.bx.awn .lf,.bx.awn .bk{background:#1478b0}
.bx.st1 .fr,.bx.st2 .fr{background:#cfc8b2}.bx.st1 .tp,.bx.st2 .tp{background:#e6dfca}.bx.st1 .rt,.bx.st2 .rt{background:#a9c3bd}.bx.st1 .lf,.bx.st2 .lf,.bx.st1 .bk,.bx.st2 .bk{background:#c3cbbf}

/* info row under the stage */
.h2-info{display:grid;grid-template-columns:1.1fr 1fr auto;gap:30px;align-items:center;padding:28px 6px 6px}
.h2-info h1{font-size:clamp(24px,3vw,38px);text-transform:uppercase;font-weight:800;letter-spacing:-.02em}
.h2-info p{max-width:430px}
.h2-info .cta{display:flex;gap:10px;flex-wrap:wrap}

@media(max-width:900px){.h2-info{grid-template-columns:1fr}.wordmark{font-size:10.6vw}}
@media(max-width:760px){
 .hero2{padding:74px 10px 0}.h2-stage{height:62vh;min-height:420px}.scene3d{transform:scale(.52);transform-origin:50% 100%;height:140%;bottom:0}
 .bld-sway{bottom:70px}.h2-label.l2{display:none}.wordmark{top:14%;font-size:11.4vw;filter:none;-webkit-text-stroke-width:1px}
 .h2-info{gap:16px;padding-top:22px}.h2-info .cta .btn{flex:1;justify-content:center;text-align:center}
 .h2-stage{height:58svh;min-height:400px}.bld{transition:none}
}
@media(prefers-reduced-motion:reduce){.bx,.wordmark span,.bld-sway{animation:none!important;opacity:1!important}}