:root {
  --white: oklch(0.98 0 0);
  --muted: oklch(0.86 0.01 210);
  --cyan: oklch(0.73 0.16 215);
  --bg: oklch(0.12 0.02 220);
  --line: oklch(0.98 0 0 / 0.42);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body { background: var(--bg); color: var(--white); font-family: "Open Sans", system-ui, sans-serif; }

.hero { min-height: 100svh; isolation: isolate; overflow: hidden; position: relative; display: flex; align-items: flex-end; }
.hero__fallback, .hero__video, .hero__veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__fallback img { width: 100%; height: 100%; display: block; object-fit: cover; object-position: center; }
.hero__video { z-index: -2; object-fit: cover; object-position: center; }
.hero__fallback { z-index: -3; }
.hero__veil { z-index: -1; background: linear-gradient(90deg, oklch(0.04 0.02 220 / 0.76) 0%, oklch(0.06 0.02 220 / 0.5) 46%, oklch(0.06 0.02 220 / 0.18) 100%), linear-gradient(0deg, oklch(0.04 0.02 220 / 0.7) 0%, transparent 58%); }
.hero__content { width: min(100%, 780px); padding: 30px; padding-bottom: clamp(32px, 5.5vh, 72px); animation: rise 800ms var(--ease-out) both; }
h1 { font-size: clamp(2.5rem, 7vw, 5.625rem); line-height: 1; letter-spacing: -.045em; margin: 0 0 24px; text-wrap: balance; }
.hero__body { align-items: flex-start; display: grid; gap: clamp(48px, 7vw, 76px); grid-template-columns: minmax(0, 1fr) max-content; }
.hero__copy { color: var(--muted); font-size: clamp(.9rem, 1.5vw, 1rem); line-height: 1.58; }
.hero__copy p { margin: 0 0 12px; }
.hero__copy p:last-child { color: var(--white); font-weight: 600; margin-bottom: 0; }
.contact-link { align-items: center; align-self: end; color: var(--white); display: inline-flex; gap: 11px; justify-content: flex-end; padding: 8px 0; text-decoration: none; transition: color 180ms var(--ease-out), transform 180ms var(--ease-out); }
.contact-link:hover { color: var(--cyan); transform: translateY(-3px); }
.contact-link:focus-visible { outline: 2px solid var(--cyan); outline-offset: 5px; }
.contact-link__icon { display: grid; place-items: center; }
.contact-link__icon svg { fill: none; height: 20px; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.4; width: 20px; }
.contact-link__email { font-size: .9rem; }
.contact-link__arrow { font-size: 1.35rem; line-height: 1; }

@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) {
  .hero__content { padding: 24px 20px 30px; }
  .hero__body { display: block; }
  .contact-link { justify-content: flex-start; margin-top: 32px; }
  .hero__veil { background: linear-gradient(90deg, oklch(0.04 0.02 220 / 0.86), oklch(0.06 0.02 220 / 0.47)), linear-gradient(0deg, oklch(0.04 0.02 220 / 0.9), transparent 75%); }
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } .hero__content { animation: none; } .contact-link { transition: none; } }