:root { color-scheme:dark; --ink:#f4f1e9; --gold:#d9bc88; font-family:"Avenir Next","Segoe UI",Arial,sans-serif; font-synthesis:none; background:#03080b; color:var(--ink); }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; }
button,input { font:inherit; }
a { color:inherit; text-decoration:none; }
button,a,input { -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
[hidden] { display:none!important; }
:focus-visible { outline:2px solid var(--gold); outline-offset:5px; }
.scene { position:fixed; inset:0; pointer-events:none; overflow:hidden; background:#03080b; isolation:isolate; }
.scene-image,.scene-light,.scene-shade { position:absolute; inset:0; }
.scene-image { background:url('./wealth-horizon.webp') 50% 50% / cover no-repeat; transform-origin:65% 57%; animation:harbor-dolly 32s ease-in-out infinite alternate paused; will-change:transform; }
.scene-light { inset:-5%; background:radial-gradient(ellipse 35% 15% at 62% 67%,#e7af5328,transparent 80%),radial-gradient(ellipse 43% 28% at 79% 33%,#479ba611,transparent 80%); mix-blend-mode:screen; animation:harbor-light 13s ease-in-out infinite alternate paused; will-change:opacity,transform; }
.scene-shade { background:linear-gradient(90deg,#020609b0 0%,#02060945 36%,transparent 59%),linear-gradient(180deg,#02060935,transparent 22%,transparent 67%,#020609b3); }
body[data-surface=workbench] .scene-image { transform-origin:62% 48%; animation-name:sculpture-dolly; animation-duration:26s; }
body[data-surface=workbench] .scene-light { background:radial-gradient(ellipse 18% 34% at 64% 48%,#edb45726,transparent 78%),radial-gradient(ellipse 28% 49% at 82% 30%,#3fa7ad16,transparent 76%); animation-name:sculpture-light; animation-duration:11s; }
body[data-surface=workbench] .scene-shade { background:linear-gradient(90deg,#02060975 0%,#0206092b 36%,transparent 59%),linear-gradient(180deg,#02060935,transparent 22%,transparent 67%,#020609b3); }
.scene[data-motion=playing] .scene-image,.scene[data-motion=playing] .scene-light { animation-play-state:running; }
.page { position:relative; width:min(1800px,100%); min-height:100svh; padding:34px 5.2% 25px; margin:auto; display:flex; flex-direction:column; }
.masthead { display:flex; justify-content:space-between; align-items:center; gap:24px; }
.brand { display:flex; align-items:baseline; font-size:26px; letter-spacing:-1.15px; font-weight:600; }
.brand-colon { color:var(--gold); padding:0 2px; }
.brand-domain { font-weight:350; }
.brand-dot { width:5px; height:5px; border-radius:50%; margin-left:8px; background:var(--gold); align-self:center; }
.surface-nav { display:flex; gap:31px; font-size:12px; }
.surface-nav a { color:#b9c4c5; padding:10px 0; position:relative; }
.surface-nav a[aria-current=page] { color:#f4f3ed; }
.surface-nav a[aria-current=page]::after { content:""; position:absolute; bottom:0; left:0; width:24px; height:1px; background:var(--gold); }
.surface-nav a:hover { color:var(--gold); }
.surface-nav span { margin-left:6px; }
.main { display:grid; grid-template-columns:minmax(0,1fr) 286px; align-items:center; gap:8%; padding:70px 0 88px; flex:1; }
.story { max-width:650px; padding-bottom:20px; }
.eyebrow { display:flex; align-items:center; gap:13px; color:var(--gold); text-transform:uppercase; letter-spacing:2.2px; font-size:9px; line-height:1.7; margin:0 0 27px; font-weight:500; }
.eyebrow > span { height:1px; width:27px; background:currentColor; flex-shrink:0; }
h1 { font-size:clamp(50px,5.2vw,82px); font-weight:350; line-height:1.08; letter-spacing:-.052em; margin:0; text-shadow:0 2px 32px #02060933; }
h1 em { font-family:Georgia,"Times New Roman",serif; font-weight:400; letter-spacing:-.055em; color:#efdab6; }
.entry { margin-top:74px; padding:24px 25px 25px; border:1px solid #d2ddd523; border-radius:3px; background:linear-gradient(135deg,#081317ad,#071115d4); box-shadow:0 25px 70px #00000020; backdrop-filter:blur(17px); -webkit-backdrop-filter:blur(17px); }
h2 { display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:20px; line-height:1.3; font-weight:400; letter-spacing:-.4px; margin:0 0 22px; }
h2 svg { width:13px; height:13px; color:#a2b3b6; }
.field { margin-bottom:16px; }
.field label { display:block; color:#bfcbcd; font-size:10px; margin-bottom:8px; }
.field input { display:block; width:100%; height:41px; padding:0 11px; background:#010b1026; color:#f4f4ef; border:1px solid #b9d0d33e; border-radius:2px; font-size:13px; transition:border-color .2s,background .2s; }
.field input:hover { border-color:rgba(190,211,216,.5); }
.field input:focus { border-color:var(--gold); background:rgba(1,13,22,.54); outline:none; box-shadow:0 0 0 2px rgba(226,197,143,.13); }
.field input:-webkit-autofill { -webkit-text-fill-color:#f4f4ef; box-shadow:0 0 0 50px #102733 inset; caret-color:#f4f4ef; }
.password-field { position:relative; }
.password-field input { padding-right:44px; }
.reveal { position:absolute; right:0; top:0; width:41px; height:41px; color:#9fb2bb; display:grid; place-items:center; background:transparent; border:0; padding:0; border-radius:2px; }
.reveal:hover,.reveal[aria-pressed=true] { color:var(--gold); }
.reveal svg { width:18px; height:18px; }
.error { color:#ffc3b1; font-size:11px; line-height:1.5; margin:0; }
.error:not(:empty) { margin:4px 0 16px; }
.submit { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; height:44px; margin-top:22px; padding:0 13px; border:1px solid #d9bc8899; border-radius:2px; background:var(--gold); color:#162529; font-size:11px; font-weight:600; transition:background .2s,transform .2s; }
.submit svg { width:18px; height:18px; transition:transform .2s; }
.submit:hover { background:#eed6aa; }
.submit:hover svg { transform:translateX(3px); }
.submit:active { transform:translateY(1px); }
.submit:disabled { opacity:.65; cursor:wait; }
.footer { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:36px; color:#b3bfc0; font-size:9px; letter-spacing:.2px; }
#motion { display:flex; align-items:center; gap:8px; background:#06101530; border:1px solid #b8d0d327; border-radius:20px; padding:8px 12px; color:#d3d9d7; font-size:10px; min-height:36px; white-space:nowrap; }
#motion:hover { border-color:#d9bc8877; color:var(--gold); }
#motion:disabled { opacity:.65; cursor:default; }
#motion svg { width:11px; height:11px; }
#motion .play-icon,#motion[aria-pressed=true] .pause-icon { display:none; }
#motion[aria-pressed=true] .play-icon { display:block; }
.skip-link { position:fixed; left:24px; top:-70px; z-index:10; padding:12px 18px; background:var(--gold); color:#10232e; border-radius:2px; }
.skip-link:focus { top:16px; }
@keyframes harbor-dolly { from { transform:scale(1.025) translate3d(-.65%,.25%,0); } to { transform:scale(1.045) translate3d(.65%,-.2%,0); } }
@keyframes harbor-light { 0% { opacity:.22; transform:translate3d(-4%,0,0); } 55% { opacity:.9; } 100% { opacity:.4; transform:translate3d(4%,-1%,0); } }
@keyframes sculpture-dolly { from { transform:scale(1.005) translate3d(-.1%,.1%,0); } to { transform:scale(1.035) translate3d(.3%,-.15%,0); } }
@keyframes sculpture-light { 0% { opacity:.28; transform:translate3d(-1%,.5%,0); } 55% { opacity:.85; } 100% { opacity:.45; transform:translate3d(1%,-.5%,0); } }
@media(min-width:1600px) { .page { padding-inline:72px; }.main { gap:13%; }.entry { margin-top:90px; } }
@media(max-width:1100px) { .main { grid-template-columns:minmax(0,1fr) 266px; gap:4%; }.entry { padding:23px; }h1 { font-size:52px; }.eyebrow { font-size:8px; letter-spacing:1.7px; } }
@media(max-width:780px) { .page { padding:26px 7% 20px; }.main { grid-template-columns:1fr; align-content:center; padding:52px 0 30px; gap:94px; }.story { padding:0; }h1 { font-size:clamp(43px,7.4vw,58px); }.eyebrow { margin-bottom:21px; }.entry { width:min(300px,100%); justify-self:end; margin-top:0; padding:22px 24px; }.scene-image { background-position:61% 50%; transform-origin:68% 42%; }body[data-surface=workbench] .scene-image { transform-origin:68% 42%; }.scene-shade,body[data-surface=workbench] .scene-shade { background:linear-gradient(180deg,#02060945,transparent 40%,#02060922 60%,#020609bb),linear-gradient(90deg,#0206092b,transparent 60%); }.brand { font-size:24px; }.footer { font-size:8px; gap:12px; }#motion { font-size:9px; padding:8px 10px; } }
@media(max-width:440px) { .masthead { gap:10px; }.brand { font-size:22px; }.brand-dot { margin-left:5px; }.surface-nav { gap:16px; font-size:10px; }.surface-nav span { margin-left:3px; }.page { padding-inline:24px; }.main { padding-top:49px; gap:85px; }.eyebrow { font-size:7px; gap:9px; letter-spacing:1.45px; }.eyebrow > span { width:20px; }h1 { font-size:clamp(34px,10.4vw,43px); }.entry { width:min(286px,100%); }.field input { font-size:16px; }.footer { font-size:7.5px; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none!important; transition:none!important; scroll-behavior:auto!important; }.scene-image,.scene-light { will-change:auto; } }