/* Framed architectural fresco prototype. */
body{background:var(--paper)}.hero{display:grid;grid-template-columns:44% 52%;column-gap:4%;grid-template-rows:1fr auto;align-items:center;min-height:calc(100svh - var(--header-height,110px));padding:42px 5.5%;overflow:hidden}
.hero h1{grid-column:1;grid-row:1;max-width:none;width:100%;margin:0 0 28px;font-size:clamp(52px,5.15vw,82px);line-height:1.17;align-self:end}
.hero-bottom{grid-column:1;grid-row:2;max-width:100%;padding:0;display:flex;gap:24px;align-self:start;align-items:center;margin-bottom:clamp(15px,6vh,70px)}
.hero-bottom p{font-size:15px;line-height:1.75}.round-link{font-size:12px}.round-link b{min-width:44px;height:44px}
.hero-art.handshake-art{grid-column:2;grid-row:1/3;position:relative;inset:auto;width:100%;height:auto;aspect-ratio:1;max-height:calc(100svh - var(--header-height,110px) - 84px);align-self:center;justify-self:center;z-index:1}
.fresco-frame{position:absolute;inset:0;overflow:hidden;background:#22221b;isolation:isolate;transform:perspective(1400px) rotateY(var(--frame-y,0deg)) rotateX(var(--frame-x,0deg));transition:transform 1s cubic-bezier(.16,1,.3,1)}
.fresco-room{position:absolute;inset:-3%;width:106%;height:106%;max-width:none!important;object-fit:cover;transform:translate(calc(var(--look-x,0px)*-.45),calc(var(--look-y,0px)*-.45));transition:transform 1.2s cubic-bezier(.16,1,.3,1);opacity:.85}
.hero-art .handshake-plane{position:absolute;inset:0;z-index:2;transform:translate(var(--look-x,0px),var(--look-y,0px));transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.hero-art .handshake-plane img{position:absolute;width:155%;max-width:none;left:-27.5%;height:96%;bottom:0;object-fit:contain;animation:none;filter:drop-shadow(0 14px 16px #090a0860)}
.frame-line{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;overflow:visible}.frame-line rect{fill:none;stroke:#b79860;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw-frame 2.8s .2s cubic-bezier(.16,1,.3,1) forwards}.frame-line .inner{stroke:#b7986040;animation-delay:.6s}
.fresco-frame:after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(180deg,transparent 65%,#13151045);box-shadow:inset 0 0 0 1px #ac8d5540}
@keyframes draw-frame{to{stroke-dashoffset:0}}
header .brand:focus:not(:focus-visible){text-decoration:none}.hero+.section{border-top:1px solid #b69d7026}
@media(min-width:761px) and (max-height:700px){.hero{padding-block:28px}.hero h1{font-size:clamp(46px,4.5vw,68px)}.hero-bottom{margin-bottom:12px}.hero-art.handshake-art{max-height:calc(100svh - var(--header-height,110px) - 56px)}.hero-bottom p{font-size:13px}.hero-bottom{gap:16px}}
@media(max-width:1100px){.hero-bottom{display:block}.hero-bottom .round-link{margin-top:20px}.hero-art.handshake-art{width:100%;right:auto}}
@media(max-width:760px){.hero{display:flex;flex-direction:column;align-items:stretch;gap:28px;padding:35px 6% 40px;min-height:calc(100svh - var(--header-height,92px))}.hero h1{font-size:clamp(42px,9vw,60px);max-width:100%;width:100%;margin:0;align-self:auto}.hero-bottom{margin:0;max-width:100%;padding:0;order:3;display:flex;gap:16px;align-items:center}.hero-bottom p{font-size:13px}.hero-bottom .round-link{margin-top:0;flex-shrink:0;font-size:11px}.hero-art.handshake-art{position:relative;inset:auto;width:100%;height:auto;max-height:none;aspect-ratio:1;margin:0;order:2}.hero-art .handshake-plane{transform:none}.round-link b{min-width:38px;height:38px}.hero-art .handshake-plane img{width:155%;left:-27.5%}}
@media(max-width:380px){.hero-bottom{display:block}.hero-bottom .round-link{margin-top:18px}}
@media(prefers-reduced-motion:reduce){.frame-line rect{animation:none;stroke-dashoffset:0}.fresco-frame,.fresco-room,.hero-art .handshake-plane{transform:none;transition:none}}

.hero{grid-template-rows:auto}.hero-copy{grid-column:1;grid-row:1;align-self:center}.hero-copy h1{margin-bottom:32px}.hero-copy .hero-bottom{margin-bottom:0}.hero-art.handshake-art{grid-row:1}
.hero-art img.fresco-room{width:106%;height:106%;left:-3%;top:-3%;bottom:auto;object-fit:cover;animation:none}
@media(max-width:760px){.hero-copy{display:contents}.hero-copy h1{margin-bottom:0}.hero-copy .hero-bottom{display:block}.hero-copy .hero-bottom p{font-size:14px;line-height:1.7}.hero-copy .hero-bottom .round-link{margin-top:18px;font-size:12px}}

.intro-pending .frame-line rect{animation:none;stroke-dashoffset:1}
