:root{
  --night:#0e0818; --panel:#170e26; --amber:#e8a34c; --gold:#d9a45b;
  --cream:#f4ead9; --cream-dim:rgba(244,234,217,.72);
  --serif:"Fraunces",Georgia,serif; --sans:"Outfit",system-ui,sans-serif;
  --ease-out:cubic-bezier(.16,1,.3,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:linear-gradient(to bottom,#140b22,var(--night) 40%);color:var(--cream);
  font-family:var(--sans);font-weight:300;min-height:100vh}
::selection{background:var(--amber);color:var(--night)}
a{color:inherit;text-decoration:none}

.site-header{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  padding:18px clamp(18px,4vw,44px);background:rgba(14,8,24,.82);backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(244,234,217,.08)}
.brand{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-weight:600;letter-spacing:.04em;font-size:16px}
.nav{display:flex;gap:clamp(12px,2.4vw,28px);font-size:13px;letter-spacing:.06em;text-transform:uppercase;font-weight:400}
.nav a{opacity:.8;transition:opacity .2s}
.nav a:hover,.nav a.here{opacity:1;color:var(--amber)}
.nav .cta{border:1px solid rgba(244,234,217,.4);border-radius:99px;padding:6px 16px;opacity:1}
.nav .cta:hover{background:var(--cream);color:var(--night)}
@media(max-width:820px){.nav a:not(.cta){display:none}}

main{max-width:1060px;margin:0 auto;padding:clamp(40px,8vh,84px) 22px 80px}
.crumb{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--amber);margin-bottom:20px;font-weight:500}
h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.2rem,5.4vw,3.8rem);line-height:1.06;margin-bottom:18px}
.lead{color:var(--cream-dim);font-size:clamp(1rem,1.5vw,1.15rem);line-height:1.75;max-width:38em;margin-bottom:44px}
.lead b{color:var(--cream);font-weight:500}

.grid2{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(28px,5vw,64px);align-items:start}
@media(max-width:820px){.grid2{grid-template-columns:1fr}}

form{background:var(--panel);border:1px solid rgba(232,163,76,.2);border-radius:20px;padding:clamp(24px,4vw,40px)}
form h2{font-family:var(--serif);font-weight:600;font-size:20px;margin-bottom:20px}
.field{margin-bottom:16px}
label{display:block;font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--cream-dim);margin-bottom:7px}
input,select,textarea{width:100%;background:#0e0818;border:1px solid rgba(244,234,217,.18);border-radius:10px;
  color:var(--cream);font-family:var(--sans);font-size:15px;padding:12px 14px;transition:border-color .2s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--amber)}
textarea{min-height:110px;resize:vertical}
button{width:100%;margin-top:6px;background:var(--amber);color:#241505;border:0;border-radius:99px;
  padding:15px;font-family:var(--sans);font-size:14px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;
  cursor:pointer;box-shadow:0 0 26px rgba(232,163,76,.3);transition:transform .3s var(--ease-out),box-shadow .3s}
button:hover{transform:translateY(-2px);box-shadow:0 5px 40px rgba(232,163,76,.5)}
.sent{display:none;text-align:center;padding:34px 10px}
.sent.show{display:block}
.sent .tick{width:44px;height:44px}
.pagefig{margin:0 0 26px;max-width:420px}
.pagefig img{width:100%;height:auto;display:block;filter:drop-shadow(0 16px 34px rgba(0,0,0,.45))}
.banner{border-radius:20px;padding:clamp(26px,4vw,46px);margin-bottom:34px;background-size:cover;background-position:center;
  position:relative;overflow:hidden;isolation:isolate}
.banner::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to right,rgba(14,8,24,.72),rgba(14,8,24,.3))}
.banner h1,.banner .lead{margin-bottom:0}
.banner .crumb{color:var(--cream)}
.oldsign{width:100%;height:auto;border-radius:10px;margin-bottom:10px;display:block}
.sent h2{margin:12px 0 8px}
.sent p{color:var(--cream-dim);line-height:1.7}
form.done .fields{display:none}

.aside .box{border:1px solid rgba(244,234,217,.14);border-radius:16px;padding:22px;margin-bottom:16px}
.aside h3{font-family:var(--serif);font-weight:600;font-size:16px;color:var(--amber);margin-bottom:10px}
.aside p,.aside a{color:var(--cream-dim);font-size:14px;line-height:1.8}
.aside a:hover{color:var(--cream)}

.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:16px}
.card{border:1px solid rgba(232,163,76,.22);border-radius:18px;padding:26px;background:var(--panel);
  transition:transform .4s var(--ease-out),border-color .3s}
.card:hover{transform:translateY(-5px);border-color:var(--amber)}
.card .tag{font-size:11px;letter-spacing:.24em;text-transform:uppercase;color:var(--amber);font-weight:500}
.card h3{font-family:var(--serif);font-weight:600;font-size:21px;margin:10px 0 8px}
.card p{font-size:13.5px;color:var(--cream-dim);line-height:1.65}
.card .price{margin-top:14px;font-family:var(--serif);font-style:italic;color:var(--gold)}

footer{border-top:1px solid rgba(244,234,217,.1);padding:26px 22px 34px;text-align:center;
  font-size:12.5px;color:rgba(244,234,217,.45)}
footer b{color:var(--cream-dim);font-weight:500}

main>*{opacity:0;transform:translateY(22px);animation:rise .8s var(--ease-out) forwards}
main>*:nth-child(2){animation-delay:.08s}
main>*:nth-child(3){animation-delay:.16s}
main>*:nth-child(4){animation-delay:.24s}
@keyframes rise{to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){main>*{animation:none;opacity:1;transform:none}}