@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

:root { color-scheme: dark; font-family: 'DM Sans', sans-serif; color: #fff; background: #152c37; }
* { box-sizing: border-box; }
body { margin: 0; min-width: 280px; min-height: 100svh; }
.backdrop { position: fixed; inset: 0; z-index: -1; background: #152c37 url('assets/background.jpg?v=poster') center / cover; overflow: hidden; }
.backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(110deg, rgba(10,25,34,.64), rgba(13,29,39,.5) 50%, rgba(9,26,36,.65)); }
main { min-height: 100svh; display: grid; place-items: center; padding: 64px 24px; }
.glass-card { width: min(100%, 680px); text-align: center; padding: 48px 54px 0; border: 1px solid rgba(255,255,255,.36); border-radius: 28px; background: linear-gradient(130deg, rgba(213,228,235,.045), rgba(131,158,172,.01) 55%, rgba(212,232,239,.025)); box-shadow: 0 28px 90px rgba(0,13,24,.22), inset 0 1px 0 rgba(255,255,255,.24); backdrop-filter: blur(3px) saturate(1); -webkit-backdrop-filter: blur(3px) saturate(1); position: relative; isolation: isolate; transform: perspective(1200px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transition: transform 400ms ease-out; animation: arrive 1100ms cubic-bezier(.2,.7,.2,1) both; }
.brand { display: flex; justify-content: center; margin-bottom: 30px; }
.brand img { filter: brightness(0) invert(1); display: block; width: 175px; max-width: 100%; height: auto; }
.location { font-size: 12px; font-weight: 500; letter-spacing: .19em; margin: 0 0 22px; color: #e0e9ec; }
h1 { font-family: 'Barlow Condensed', 'Arial Narrow', sans-serif; font-size: clamp(2rem, 4.5vw, 3rem); line-height: .88; letter-spacing: -.015em; font-weight: 800; margin: 0 0 40px; text-wrap: balance; }
h1 span { color: #dce6e9; }
.card-footer { border-top: 1px solid rgba(255,255,255,.2); min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 12px; letter-spacing: .1em; color: #e2e9ec; }
.footer-divider { height: 12px; width: 1px; background: #ffffff40; margin: 0 9px; }
.page-footer { position: absolute; left: 0; right: 0; bottom: 25px; text-align: center; color: #d8e0e3; font-size: 12px; letter-spacing: .04em; }
@keyframes arrive { from { opacity: 0; translate: 0 22px; scale: .975; } to { opacity: 1; translate: 0 0; scale: 1; } }
@media (max-width: 540px) { main { padding: 48px 20px; } .glass-card { padding: 38px 22px 0; border-radius: 24px; } .brand { margin-bottom: 36px; }  .location { font-size: 12px; letter-spacing: .12em; } .card-footer { gap: 7px; letter-spacing: .06em; flex-wrap: wrap; padding: 18px 0; } .footer-divider { margin: 0 4px; } }
@media (max-height: 650px) { .page-footer { position: static; padding: 0 0 20px; margin-top: -40px; } }
@media (prefers-reduced-motion: reduce) { .glass-card { animation: none; } }
@supports not (backdrop-filter: blur(1px)) { .glass-card { background: rgba(28,49,61,.92); } }

.backdrop video { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 540px) { .brand img { width: 145px; }  .page-footer { position: static; padding: 0 0 16px; } }

.cursor-hammer { position: fixed; left: 0; top: 0; width: 32px; height: 39px; pointer-events: none; z-index: 10; opacity: 0; background-color: #fff; color-scheme: only light; -webkit-mask-image: url("assets/roofing-hammer.svg?v=4"); mask-image: url("assets/roofing-hammer.svg?v=4"); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; mask-mode: alpha; filter: drop-shadow(0 2px 4px #0008); transition: opacity .2s; will-change: transform; }
.cursor-hammer.visible { opacity: .8; }
@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) { .cursor-hammer { display: none; } }

.glass-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at var(--shine-x, 50%) var(--shine-y, 25%), rgba(255,255,255,.12), transparent 65%); opacity: .6; }
.glass-card > :not(.cracks) { animation: reveal 850ms ease-out both; }
.glass-card .brand { animation-delay: 120ms; }
.glass-card .location { animation-delay: 220ms; }
.glass-card h1 { animation-delay: 300ms; }
.glass-card .card-footer { animation-delay: 380ms; }
@keyframes reveal { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) { .glass-card, .glass-card > :not(.cracks) { animation: none; transition: none; } .glass-card { transform: none; } }

.cracks { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 2; }
.cracks path { fill: none; stroke: #fff; stroke-width: 1; stroke-linecap: round; stroke-linejoin: round; opacity: .8; }
.cracks .hairline { stroke-width: .5; opacity: .6; }
@media (max-width: 360px) { h1 { font-size: 1.65rem; letter-spacing: -.015em; } }