/* ===== LVNG teaser landing — standalone single page (Dir 2 layout) ===== */
*{box-sizing:border-box}
html{height:100%}
body{margin:0;min-height:100%;background:var(--paper);color:var(--ink);font-family:var(--font-text)}
[data-lucide]{width:20px;height:20px;stroke-width:1.75}
img{display:block}

.page{display:flex;width:100%;min-height:100vh}

/* shared bits */
.kicker{font:var(--t-mono);font-size:13px;text-transform:uppercase;letter-spacing:.2em;font-weight:600;color:var(--ember-deep)}
.wordmark{height:30px;width:auto;display:block}
.statusdot{width:8px;height:8px;border-radius:50%;background:var(--ember);display:inline-block;
  box-shadow:0 0 0 0 rgba(235,98,44,.55);animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(235,98,44,.5)}70%{box-shadow:0 0 0 12px rgba(235,98,44,0)}100%{box-shadow:0 0 0 0 rgba(235,98,44,0)}}

/* calm staggered fade-up — resting state is VISIBLE; the hidden 'from'
   state is only applied via JS inside rAF (fires only when visible), so
   content can never be permanently hidden if the timeline is frozen. */
.rev{opacity:1;transform:none}
body.anim-from .rev{opacity:0;transform:translateY(16px);transition:none}
body.anim-go .rev{opacity:1;transform:none;
  transition:opacity .85s cubic-bezier(.2,.7,.3,1) var(--d,0s),transform .85s cubic-bezier(.2,.7,.3,1) var(--d,0s)}
@media (prefers-reduced-motion:reduce){body.anim-go .rev{transition:none}}

/* ---- left: content ---- */
.left{flex:1.12;display:flex;flex-direction:column;padding:clamp(40px,5vw,72px) clamp(36px,5vw,76px)}
.body{margin-top:auto}
h1{font-family:var(--font-display);font-weight:800;font-size:clamp(40px,5.4vw,64px);line-height:1.05;
  letter-spacing:-.03em;margin:20px 0 0;max-width:11ch;text-wrap:balance}
h1 .mk{position:relative;white-space:nowrap}
h1 .mk::after{content:"";position:absolute;left:-2px;right:-2px;bottom:.1em;height:.26em;
  background:var(--ember-tint);z-index:-1}
.sub{font:var(--t-body-lg);font-size:clamp(17px,1.5vw,20px);color:var(--fg-muted);max-width:42ch;margin:24px 0 34px}

/* email contact link */
.mail{display:inline-flex;align-items:center;gap:10px;margin-top:36px;font:var(--t-body);font-size:17px;font-weight:600;color:var(--ink);
  transition:.18s cubic-bezier(.2,.7,.3,1)}
.mail .ul{position:relative}
.mail .ul::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--ember);
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.7,.3,1)}
.mail:hover .ul::after{transform:scaleX(1)}
.mail .arw{display:inline-flex;transition:transform .2s}
.mail:hover .arw{transform:translateX(3px)}

.footline{margin-top:auto;padding-top:28px;display:flex;align-items:center;justify-content:space-between;
  font:var(--t-caption);letter-spacing:.02em;color:var(--clay-500);gap:18px;flex-wrap:wrap}
.footline .stat{display:inline-flex;align-items:center;gap:8px;color:var(--clay-600);font-weight:600}

/* ---- right: photo ---- */
.right{flex:1;position:relative;overflow:hidden;background:var(--paper-2)}
.right .photo{position:absolute;inset:0;background:url(assets/property-stadium-way.jpg) center/cover;
  transform:scale(1.06);animation:driftin 16s ease-out forwards}
@keyframes driftin{to{transform:scale(1)}}
.right .vig{position:absolute;inset:0;background:linear-gradient(90deg,rgba(245,241,234,.6),rgba(245,241,234,0) 26%)}
.right .flag{position:absolute;top:0;left:clamp(40px,5vw,64px);width:42px;height:62px;background:var(--ember);z-index:2}
.right .iso{position:absolute;bottom:40px;right:40px;width:66px;opacity:.92;z-index:2}

/* ---- responsive: stack ---- */
@media (max-width:820px){
  .page{flex-direction:column;min-height:100vh}
  .right{order:-1;flex:none;height:34vh;min-height:240px}
  .right .vig{background:linear-gradient(0deg,rgba(245,241,234,.5),rgba(245,241,234,0) 40%)}
  .left{flex:none;padding:36px 28px 44px}
  .body{margin-top:34px}
  h1{max-width:none}
}