:root { --mist: #aabcbd; --accent: #24b030; --shade: #061306; }
* { box-sizing: border-box; }
html, body { min-height: 100%; margin: 0; }
body { font-family: Arial, Helvetica, sans-serif; background: var(--shade); }
.hero { position: relative; min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; align-items: center; overflow: hidden; padding: clamp(2rem, 6vw, 6.25rem) 1.25rem 2.5rem; color: var(--mist); text-align: center; background: linear-gradient(rgb(6 19 6 / 90%), rgb(6 19 6 / 90%)), url("assets/hero-building.jpg") center / cover; }
.hero-content { width: min(37.5rem, 100%); margin: auto 0; }
.eyebrow, .details { margin: 0; font-family: Arial, Helvetica, sans-serif; font-size: .9rem; font-weight: 600; letter-spacing: .065em; text-transform: uppercase; }
.divider { display: block; width: 4.375rem; height: 2px; margin: .7rem auto 1.2rem; background: var(--accent); }
.logo { display: block; width: min(100%, 44.625rem); height: auto; margin-inline: auto; }
.service { margin: 1.1rem 0 0; font-size: clamp(1.25rem, 2.3vw, 1.5rem); }
.details { width: min(49rem, 100%); font-size: .8rem; line-height: 1.55; }
.details a { color: inherit; text-decoration: none; }.details a:hover { color: #fff; }
.signature-page { min-height: 100svh; display: grid; place-items: center; padding: 1.5rem; background: #fff; }.signature-page img { display: block; width: min(100%, 50rem); height: auto; }
@media (max-width: 40rem) { .hero { padding-block: 2rem 1.5rem; }.details { font-size: .7rem; } }