/* Alta Ridge base: Alpine Night palette, shared by all four homepage options. Single dark look by design. */
:root{
  color-scheme: dark;
  --n0:#0b1016; --n1:#0e131a; --n2:#141b24; --n3:#1a212b; --n4:#232b36; --mist:#2a3340;
  --ink:#f4f6f9; --ink2:#c3ccd6; --ink3:#aab4bf;
  --line:rgba(238,242,246,.14); --line2:rgba(238,242,246,.26); --glass:rgba(20,27,36,.62);
  --alpen:#e08a52; --alpen2:#f0a06e; --alpen-ink:#1a0f08; --gold:#ecc66f; --gold2:#f6dc9c; --peach:#efb48d;
  --ok:#8fd3b0;
  --ease:cubic-bezier(.215,.61,.355,1); --ease-io:cubic-bezier(.65,0,.35,1);
  --display:"Big Shoulders Display", "Arial Narrow", "Roboto Condensed", sans-serif;
  --body:"Manrope", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono:"IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter:max(16px, env(safe-area-inset-left, 0px));
  --gutter-r:max(16px, env(safe-area-inset-right, 0px));
}
*{box-sizing:border-box}
html{background:var(--n2); -webkit-text-size-adjust:100%}
body{background:var(--n2); color:var(--ink); font-family:var(--body); font-size:17px; line-height:1.6; overflow-x:clip}
h1,h2,h3,h4{margin:0; text-wrap:balance; font-weight:700}
p{margin:0}
ul,ol{margin:0; padding:0; list-style:none}
a{color:inherit; text-decoration:none}
img,svg{max-width:100%}
button{font:inherit; color:inherit}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px; border-radius:6px}

.wrap{width:100%; max-width:1240px; margin:0 auto; padding-left:var(--gutter); padding-right:var(--gutter-r)}
.mono{font-family:var(--mono); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase}
.eyebrow{font-family:var(--mono); font-size:.76rem; letter-spacing:.16em; text-transform:uppercase; color:var(--alpen2)}
.muted{color:var(--ink3)}
.tnum{font-variant-numeric:tabular-nums}

/* buttons: fast, ease-out, transform only */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:48px; padding:0 24px; border-radius:999px;
  background:var(--alpen); color:var(--alpen-ink); font-weight:700; font-size:1rem; letter-spacing:.005em; border:0; cursor:pointer;
  transition:transform .12s var(--ease), background-color .12s var(--ease), box-shadow .15s var(--ease); will-change:transform}
.btn:hover{background:var(--alpen2); transform:translateY(-1px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line2)}
.btn.ghost:hover{background:rgba(238,242,246,.06)}
.btn .arr{transition:transform .14s var(--ease)}
.btn:hover .arr{transform:translateX(3px)}

/* nav */
.nav{position:fixed; inset:0 0 auto; z-index:50; padding-top:env(safe-area-inset-top, 0px); transition:background-color .3s var(--ease), box-shadow .3s var(--ease)}
.nav .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; height:72px}
.nav.scrolled{background:rgba(14,19,26,.72); -webkit-backdrop-filter:blur(14px) saturate(140%); backdrop-filter:blur(14px) saturate(140%); box-shadow:0 1px 0 var(--line)}
.logo{display:flex; align-items:center; gap:10px; font-weight:800; letter-spacing:.1em; font-size:1.02rem; white-space:nowrap}
.logo svg{flex:none}
.logo b{font-weight:600; color:var(--alpen2)}
.nav-links{display:flex; align-items:center; gap:30px; font-size:.95rem; font-weight:500; color:var(--ink2)}
.nav-links a:not(.btn){transition:color .12s var(--ease)}
.nav-links a:not(.btn):hover{color:var(--ink)}
.nav .btn{min-height:42px; padding:0 18px; font-size:.92rem; white-space:nowrap}
.nav .short{display:none}
@media (max-width: 860px){ .nav-links a:not(.btn){display:none} }
@media (max-width: 640px){ .nav .long{display:none} .nav .short{display:inline} .nav .btn{padding:0 16px} }
@media (max-width: 400px){ .logo span{font-size:1.06rem !important} .logo{gap:8px; letter-spacing:.06em} .nav .wrap{gap:10px} }

/* ambient scene motion (transform only) */
.drift-a{animation:drift 42s var(--ease-io) infinite alternate}
.drift-b{animation:drift 30s var(--ease-io) infinite alternate-reverse}
@keyframes drift{from{transform:translateX(-60px)} to{transform:translateX(60px)}}
.glint{animation:glint 7s var(--ease) infinite; animation-delay:1.2s}
@keyframes glint{0%{transform:translateX(-320px)} 34%{transform:translateX(320px)} 100%{transform:translateX(320px)}}
.sparkle{animation:sparkle 7s var(--ease) infinite; animation-delay:1.2s; opacity:0}
@keyframes sparkle{0%,14%{opacity:0; transform:scale(.2) rotate(0deg)} 20%{opacity:1; transform:scale(1) rotate(45deg)} 30%{opacity:0; transform:scale(.4) rotate(90deg)} 100%{opacity:0; transform:scale(.2)}}
.tw{animation:tw 3.4s var(--ease-io) infinite alternate}
@keyframes tw{from{opacity:.15} to{opacity:.9}}
.halo{animation:halo 7s var(--ease-io) infinite}
@keyframes halo{0%,100%{opacity:.55} 22%{opacity:1}}
.bob{animation:bob 6s var(--ease-io) infinite}
@keyframes bob{0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)}}

/* reveal starting states only apply when motion is on */
.motion [data-highlight] .w{opacity:.16}

/* forms */
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field label{font-size:.82rem; font-weight:600; color:var(--ink2)}
.field input{height:50px; border-radius:12px; border:1px solid var(--line2); background:rgba(11,16,22,.6); color:var(--ink); padding:0 14px; font:inherit; font-size:1rem}
.field input:focus{outline:2px solid var(--gold); outline-offset:1px}
.consent{font-size:.78rem; color:var(--ink3); line-height:1.5}
.form-msg{font-size:.9rem; color:var(--ok)}

.footer{border-top:1px solid var(--line); padding-block:40px calc(40px + env(safe-area-inset-bottom, 0px)); color:var(--ink3); font-size:.88rem}
.footer .wrap{display:flex; flex-wrap:wrap; gap:16px 32px; justify-content:space-between; align-items:center}
.footer nav{display:flex; gap:22px}
.draft-tag{font-family:var(--mono); font-size:.72rem; letter-spacing:.1em; text-transform:uppercase; color:var(--ink3)}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important; transition:none !important; scroll-behavior:auto !important}
  .sparkle{opacity:0}
}