@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/geist-latin-ext.woff2") format("woff2");unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url("assets/geist-latin.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root {
  color-scheme: dark;
  font-family: Geist, "Helvetica Neue", Arial, sans-serif;
  --paper: #f8f7f4;
  --ink: #111210;
  --pad: clamp(20px, 5.1vw, 92px);
  color: var(--paper);
  background: var(--ink);
}
* { box-sizing: border-box }
body { min-height: 100vh; min-height: 100svh; margin: 0; display: flex; flex-direction: column }
h1, p { margin: 0 }
img { display: block; max-width: 100% }
a { color: inherit; text-decoration: none }
a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px }
.shell { width: min(100%, 1580px); margin-inline: auto; padding-inline: var(--pad) }

header { border-bottom: 1px solid #383935 }
.masthead, .footer-inner { display: flex; justify-content: space-between; align-items: center; gap: 16px }
.masthead { min-height: 78px }
.wordmark { width: 75px; height: auto }
.opening { display: flex; align-items: center; gap: 9px; font-size: 14px; font-weight: 530 }
.opening::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor }

.hero { flex: 1; display: grid; position: relative; isolation: isolate; background: #111210 }
.hero picture, .hero picture img, .hero::after { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2 }
.hero picture img { object-fit: cover; object-position: center 52% }
.hero::after { content: ""; z-index: -1; background: linear-gradient(90deg, rgb(12 13 11 / 57%), rgb(12 13 11 / 10%) 54%, transparent 70%) }
.hero-layout { min-height: clamp(490px, 42vw, 710px); display: flex; align-items: center; padding-block: clamp(40px, 5vw, 88px) }
.kicker { font-size: 11px; font-weight: 550; letter-spacing: .15em; text-transform: uppercase }
.hero h1 {
  margin-block: 20px;
  font-size: clamp(72px, 7.6vw, 132px);
  font-weight: 800;
  letter-spacing: -.06em;
  line-height: 1.07;
}
.intro { color: #e3e3de; font-size: clamp(15px, 1.2vw, 20px); line-height: 1.5 }

footer { border-top: 1px solid #383935 }
.footer-inner { min-height: 76px }
.socials, .socials a, .location { display: flex; align-items: center }
.socials { gap: clamp(12px, 2.3vw, 36px) }
.socials a, .location { min-height: 44px; gap: 8px; font-size: 13px; font-weight: 500 }
.socials svg, .location svg { width: 18px; height: 18px; flex: none }
.socials a:hover span, .location:hover { text-decoration: underline; text-underline-offset: 4px }

@media (max-width: 680px) {
  .masthead { min-height: 64px }
  .wordmark { width: 59px }
  .opening { font-size: 13px }
  .hero-layout { align-items: flex-end; min-height: 600px; padding-top: 235px; padding-bottom: 35px }
  .hero picture { height: 66% }
  .hero picture img { object-position: 68% 36% }
  .hero::after { background: linear-gradient(to bottom, transparent 18%, rgb(17 18 16 / 15%) 29%, rgb(17 18 16 / 92%) 60%, #111210 66%) }
  .hero h1 { font-size: clamp(58px, 14.7vw, 84px); margin-block: 12px }
  .intro { font-size: 14px }
  .footer-inner { min-height: 66px }
  .socials { gap: 4px }
  .socials a { width: 44px; justify-content: center }
  .socials svg { width: 21px; height: 21px }
  .socials span { display: none }
}