:root { color-scheme: dark; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background: #101314; color: #ededeb; }
* { box-sizing: border-box; }
html, body { margin: 0; min-width: 280px; }
body { -webkit-font-smoothing: antialiased; }
.hero { position: relative; isolation: isolate; min-height: 640px; height: 100svh; overflow: hidden; background: radial-gradient(ellipse at 82% 12%, #191c1d 0%, #101314 48%, #0c0f10 100%); }
.landscape { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.landscape canvas, .fallback { position: absolute; inset: 0; width: 100%; height: 100%; }
.fallback { object-fit: fill; }
.landscape.is-ready .fallback { visibility: hidden; }
.identity { position: absolute; top: 13.4%; left: 6%; right: 6%; display: grid; grid-template-columns: clamp(48px, 5.5vw, 88px) minmax(0, 1fr); column-gap: clamp(18px, 2vw, 32px); align-items: center; }
.brand-mark { grid-column: 1; grid-row: 1 / span 2; display: block; width: 100%; height: auto; }
.identity h1, .identity p { grid-column: 2; }
h1 { margin: 0; font-size: clamp(2.6rem, 4.52vw, 6.75rem); line-height: 1.12; letter-spacing: -.035em; font-weight: 200; }
h1 strong { font-weight: 650; letter-spacing: -.032em; }
h1 span { font-weight: 200; }
.identity p { margin: 1.15rem 0 0 .2em; font-size: clamp(.75rem, 1.07vw, 1rem); font-weight: 400; line-height: 1.9; letter-spacing: .34em; color: #cccdcc; }
.site-footer { position: absolute; left: 6%; right: 6%; bottom: max(24px, env(safe-area-inset-bottom)); color: #969d9b; font-size: 11px; line-height: 1.5; letter-spacing: .04em; }
.site-footer small { font-size: inherit; }
.contact { position: absolute; z-index: 3; top: max(20px, 2.4%); right: 4%; color: #dededb; font-size: .75rem; letter-spacing: .3em; }
.contact summary { min-height: 44px; display: flex; align-items: center; list-style: none; cursor: pointer; }
.contact summary::-webkit-details-marker { display: none; }
.contact summary:hover, .contact[open] summary { color: #fff; text-decoration: underline; text-underline-offset: 6px; }
.contact-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 2rem)); padding: 16px; background: #171b1c; border: 1px solid #ffffff24; border-radius: 12px; box-shadow: 0 16px 50px #0005; letter-spacing: normal; }
.contact-panel label { display: block; color: #a7afad; font-size: .625rem; letter-spacing: .2em; margin-bottom: 8px; }
.contact-panel input { display: block; width: 100%; min-width: 0; padding: 0; border: 0; border-radius: 0; background: transparent; color: #eeefeb; font: inherit; font-size: clamp(.8rem, 3.7vw, 1rem); line-height: 1.7; cursor: text; }
.contact-email-row { display: flex; align-items: center; gap: 8px; }
.email-address { flex: 1; min-width: 0; overflow-wrap: anywhere; color: #eeefeb; font-size: clamp(.8rem, 3.7vw, 1rem); line-height: 1.7; user-select: text; }
.copy-email { display: flex; flex: none; align-items: center; justify-content: center; width: 44px; min-height: 44px; padding: 12px; border: 0; border-radius: 2px; background: transparent; color: #c5ceca; cursor: pointer; }
.copy-email:hover, .copy-email:focus-visible, .copy-email[data-copied="true"] { color: #fff; }
.copy-email svg { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.2; }
.copied-icon, .copy-email[data-copied="true"] .copy-icon { display: none; }
.copy-email[data-copied="true"] .copied-icon { display: block; }
.copy-email:disabled { cursor: wait; opacity: .65; }
.contact-status { margin: 12px 0 0; color: #bac2be; font-size: .75rem; line-height: 1.6; }
.contact-status:empty { margin: 0; }
:focus-visible { outline: 1px solid #f0f0ed; outline-offset: 6px; }
[hidden] { display: none !important; }
@media (max-width: 700px) {
  .hero { min-height: 580px; }
  .identity { top: 16%; left: 7%; right: 7%; grid-template-columns: 44px minmax(0, 1fr); column-gap: 14px; }
  .brand-mark { grid-row: 1; }
  h1 { font-size: clamp(2.35rem, 7.6vw, 3.3rem); }
  .identity p { grid-column: 1 / -1; max-width: 32em; font-size: .7rem; letter-spacing: .22em; margin-top: 1rem; line-height: 2; }
  .site-footer { left: 7%; right: 7%; }
  .contact { right: 7%; font-size: .7rem; }
}
@media (max-width: 600px) { h1 span { display: block; } }
@media (max-width: 380px) { .identity { top: 14%; } }
@media (max-height: 550px) and (min-width: 701px) { .hero { min-height: 500px; } }