html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, .font-display { letter-spacing: -0.02em; }
.logo-crop { width: 190px; height: 64px; overflow: hidden; position: relative; }
.logo-crop img { position: absolute; width: 330px; max-width: none; left: -70px; top: -118px; }
.link-u { position: relative; }
.link-u::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 0; height: 1px; background: currentColor; transition: width .3s; }
.link-u:hover::after, .link-u.active::after { width: 100%; }
.card .img2 { opacity: 0; transition: opacity .5s; }
.card:hover .img2 { opacity: 1; }
.card .add { transform: translateY(100%); transition: transform .35s; }
.card:hover .add { transform: translateY(0); }
.ph { background: linear-gradient(135deg, #EFEDE8, #E2DFD8); }
#drawer { transition: transform .4s cubic-bezier(.2, .8, .2, 1); }
.reveal { opacity: 0; transform: translateY(18px); transition: all .8s ease; }
.reveal.in { opacity: 1; transform: none; }
.field { width: 100%; background: #fff; border: 1px solid #E2DFD8; padding: .85rem 1rem; font-size: .9rem; outline: none; transition: border-color .2s; }
.field:focus { border-color: #111; }
.lbl { display: block; font-size: 11px; letter-spacing: .15em; text-transform: uppercase; color: #6B6A66; margin-bottom: .45rem; }
.btn { display: inline-block; background: #111; color: #fff; padding: 1rem 2.25rem; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: background .3s; text-align: center; }
.btn:hover { background: #8044B0; }
.btn-o { display: inline-block; border: 1px solid #111; padding: 1rem 2.25rem; font-size: 12px; letter-spacing: .2em; text-transform: uppercase; transition: all .3s; text-align: center; }
.btn-o:hover { background: #111; color: #fff; }
.eyebrow { font-size: 11px; letter-spacing: .3em; text-transform: uppercase; color: #8044B0; font-weight: 500; }