:root { color-scheme: dark; --bg: #0e0e0e; --surface: #131313; --text: #e5e2e1; --muted: #aa9f9b; --accent: #e27b58; --line: rgba(85, 66, 61, .45); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 7rem; }
body { margin: 0; min-width: 0; min-height: 100vh; overflow-x: hidden; background-color: var(--bg); background-image: linear-gradient(to right, rgba(226,123,88,.03) 1px, transparent 1px), linear-gradient(to bottom, rgba(226,123,88,.03) 1px, transparent 1px); background-size: 80px 80px; color: var(--text); font-family: "Hanken Grotesk", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
p, h1, h2, a, span, label { overflow-wrap: break-word; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.skip-link { position: fixed; left: 1rem; top: 1rem; z-index: 100; transform: translateY(-160%); background: var(--accent); color: #390c00; padding: .75rem 1rem; font: 500 .7rem Geist, sans-serif; letter-spacing: .16em; }
.skip-link:focus { transform: translateY(0); }
.site-header { position: fixed; inset: 0 0 auto; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: clamp(1rem, 2.2vw, 1.5rem) clamp(1rem, 5.5vw, 5rem); background: rgba(0,0,0,.14); backdrop-filter: blur(14px); }
.brand { min-width: 0; font: 400 clamp(1.35rem, 3vw, 2.25rem) Metrophobic, sans-serif; letter-spacing: clamp(.12em, 1vw, .2em); white-space: nowrap; }
.desktop-nav { display: flex; align-items: center; gap: clamp(1.25rem, 2.6vw, 2.5rem); }
.nav-link, .eyebrow, .button, label, .status { font: 500 .72rem Geist, sans-serif; letter-spacing: .18em; text-transform: uppercase; }
.nav-link { color: var(--muted); transition: color .25s ease; }
.nav-link:hover, .nav-link:focus, .nav-link[aria-current="page"] { color: var(--accent); }
.button { display: inline-flex; max-width: 100%; min-height: 3.25rem; align-items: center; justify-content: center; padding: .85rem clamp(1.25rem, 4vw, 2rem); border: 1px solid var(--accent); background: transparent; color: var(--accent); text-align: center; cursor: pointer; transition: background .25s ease, color .25s ease, box-shadow .25s ease; }
.button:hover, .button:focus { background: var(--accent); color: #390c00; box-shadow: 0 0 30px rgba(226,123,88,.25); }
.menu-toggle { display: none; width: 3rem; height: 3rem; border: 1px solid var(--line); background: transparent; color: var(--text); cursor: pointer; }
.mobile-menu { position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column; justify-content: center; gap: clamp(1rem, 3vh, 1.5rem); min-height: 100svh; overflow-y: auto; overscroll-behavior: contain; padding: 7rem clamp(1rem, 6vw, 2.5rem) 2rem; background: rgba(14,14,14,.97); backdrop-filter: blur(18px); }
.mobile-menu[hidden] { display: none; }
.mobile-menu:not([hidden]) { animation: menu-in .35s cubic-bezier(.22, 1, .36, 1) both; }
.mobile-menu a { width: fit-content; max-width: 100%; font: 400 clamp(1.65rem, 8vw, 3rem)/1.08 Metrophobic, sans-serif; transition: color .25s ease; }
.mobile-menu a:hover, .mobile-menu a:focus, .mobile-menu a[aria-current="page"] { color: var(--accent); }
@keyframes menu-in { from { opacity: 0; transform: translateY(-1rem); } to { opacity: 1; transform: translateY(0); } }
body.menu-open { overflow: hidden; }
main { min-height: 100vh; }
.hero { min-height: 82svh; display: grid; place-items: center; padding: clamp(8rem, 18vh, 10rem) clamp(1rem, 8vw, 8rem) clamp(4.5rem, 10vh, 6rem); text-align: center; background: radial-gradient(circle at 50% 35%, rgba(226,123,88,.11), transparent 28%); }
.hero-inner { width: min(100%, 62rem); }
.eyebrow { display: block; margin-bottom: 1.5rem; color: var(--accent); }
h1, h2 { margin: 0; font-family: Metrophobic, sans-serif; font-weight: 400; }
h1 { font-size: clamp(2.65rem, 9vw, 6.7rem); line-height: 1.05; text-shadow: 0 0 25px rgba(226,123,88,.22); }
h2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.lead { max-width: 45rem; margin: 2rem auto 0; color: var(--muted); font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 1rem; margin-top: 2.5rem; }
.content { width: min(calc(100% - clamp(2rem, 8vw, 6rem)), 70rem); margin: 0 auto; padding: clamp(4.5rem, 9vw, 6rem) 0 clamp(5rem, 10vw, 8rem); }
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: clamp(1rem, 3vw, 2rem); margin-top: 3rem; }
.panel { min-height: 15rem; padding: 2rem; border: 1px solid var(--line); background: rgba(19,19,19,.72); transition: border-color .25s ease, transform .25s ease; }
.panel:hover { border-color: var(--accent); transform: translateY(-4px); }
.panel h2 { margin-top: 1.2rem; font-size: 1.4rem; letter-spacing: .08em; }
.panel p { color: var(--muted); line-height: 1.65; }
.contact-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 7vw, 5rem); align-items: start; }
.contact-copy p { color: var(--muted); line-height: 1.75; }
.contact-form { display: grid; min-width: 0; gap: 1.5rem; padding: clamp(1rem, 4vw, 2rem); border: 1px solid var(--line); background: rgba(19,19,19,.8); }
.field { display: grid; gap: .65rem; }
input, textarea, select { width: 100%; border: 1px solid var(--line); border-radius: 0; background: #0e0e0e; color: var(--text); padding: 1rem; }
input:hover, textarea:hover, select:hover { border-color: #a38c84; }
input:focus, textarea:focus, select:focus { border-color: var(--accent); outline: 1px solid var(--accent); }
textarea { min-height: 10rem; resize: vertical; }
.required { color: var(--accent); }
.honeypot { position: absolute; left: -9999px; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding: 2rem clamp(1rem, 5.5vw, 5rem); border-top: 1px solid rgba(255,255,255,.05); color: #a38c84; font: 500 .65rem/1.6 Geist, sans-serif; letter-spacing: .16em; }
@media (max-width: 850px) { .desktop-nav, .header-cta { display: none; } .menu-toggle { display: grid; flex: 0 0 auto; place-items: center; } .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px) { body { background-size: 48px 48px; } .hero { min-height: 76svh; } .actions { display: grid; grid-template-columns: 1fr; width: min(100%, 24rem); margin-inline: auto; } .actions .button { width: 100%; } .panel { min-height: 0; padding: clamp(1.25rem, 6vw, 2rem); } .site-footer { flex-direction: column; } }
@media (max-width: 374px) { .eyebrow, .button, label, .status { letter-spacing: .12em; } h1 { font-size: clamp(2.3rem, 13vw, 2.7rem); } }
@media (max-height: 700px) and (max-width: 850px) { .mobile-menu { justify-content: flex-start; } .mobile-menu a { font-size: clamp(1.5rem, 7vh, 2rem); } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } }