/* Veyra Enterprise holding page. Stone and Canopy, brand light type. No scripts. */
@font-face{font-family:"Jost";src:url(/assets/fonts/jost.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Inter";src:url(/assets/fonts/inter.woff2) format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(/assets/fonts/plex-mono-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --paper:#EEEDE6; --panel:#E2E0D6; --ink:#1C211C; --soft:#575C52; --hair:#D3D0C4; --signal:#2F5A43; --hover:#4E7A5E;
  --f-display:"Jost","Helvetica Neue",Arial,sans-serif; --f-body:"Inter","Helvetica Neue",Arial,sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --gutter:clamp(20px,4vw,64px); color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root{--paper:#121712; --panel:#1A211B; --ink:#ECEBE4; --soft:#A3AA9F; --hair:#2A322B; --signal:#8DB59A; --hover:#A9CBB4; color-scheme:dark}
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--paper);color:var(--ink)}
body{font:16px/1.6 var(--f-body);-webkit-font-smoothing:antialiased}
.mono{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase}
a{color:var(--signal)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}

.hold{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);min-height:100vh;min-height:100svh}
.photo{position:relative;overflow:hidden;background:#2a2a24}
.photo::before{content:"";position:absolute;inset:-3%;background:url(/assets/img/house.jpg) center/cover no-repeat;animation:drift 30s ease-in-out infinite alternate}
.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,18,14,0) 60%,rgba(16,18,14,.18) 100%)}
@keyframes drift{from{transform:scale(1.02)}to{transform:scale(1.12) translate3d(-2%,-1.5%,0)}}

.panel{display:flex;flex-direction:column;justify-content:space-between;gap:48px;padding:clamp(28px,5vw,72px) var(--gutter);
  background:radial-gradient(900px 500px at 100% 0%,color-mix(in srgb,var(--signal) 9%,transparent),transparent 60%),var(--paper)}
.logo{width:170px;height:auto;display:block}
.logo-paper{display:none}
@media (prefers-color-scheme:dark){.logo-ink{display:none}.logo-paper{display:block}}

.body{max-width:34rem}
.kicker{color:var(--soft);margin:0 0 18px}
h1{font-family:var(--f-display);font-weight:300;font-size:clamp(40px,5.2vw,76px);line-height:1.02;letter-spacing:-.015em;margin:0 0 22px}
h1 span{display:inline-block}
.lead{color:var(--soft);font-size:clamp(16px,1.3vw,19px);margin:0 0 30px}

.progress{height:1px;background:var(--hair);position:relative;overflow:hidden;margin:0 0 30px;max-width:22rem}
.progress i{position:absolute;inset:0 auto 0 0;width:38%;background:var(--signal);animation:build 3.2s cubic-bezier(.6,0,.2,1) infinite}
@keyframes build{0%{transform:translateX(-100%)}100%{transform:translateX(270%)}}

.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:12px 18px;border:1px solid var(--ink);border-radius:2px;
  color:var(--ink);text-decoration:none;font:500 12px/1 var(--f-mono);letter-spacing:.06em;text-transform:uppercase;transition:background .2s,color .2s,border-color .2s}
.btn:hover{background:var(--signal);border-color:var(--signal);color:var(--paper)}
.btn.solid{background:var(--signal);border-color:var(--signal);color:var(--paper);text-transform:none;letter-spacing:.02em}
.btn.solid:hover{background:var(--hover);border-color:var(--hover)}

.foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;color:var(--soft);font-size:11px;border-top:1px solid var(--hair);padding-top:18px}

/* entrance */
.top,.kicker,h1 span,.lead,.progress,.actions,.foot{animation:rise .9s cubic-bezier(.2,.7,.2,1) both}
.kicker{animation-delay:.1s} h1 span:first-child{animation-delay:.2s} h1 span:last-child{animation-delay:.32s}
.lead{animation-delay:.44s} .progress{animation-delay:.56s} .actions{animation-delay:.66s} .foot{animation-delay:.8s}
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .hold{grid-template-columns:minmax(0,1fr)}
  .photo{min-height:42vh}
  .panel{gap:36px}
  .btn{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
  .progress i{width:60%}
}