:root { color-scheme: dark; font-family: Arial, sans-serif; background: #0b0b0b; color: #fff; }
* { box-sizing: border-box; letter-spacing: 0; }
body { margin: 0; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
a:focus-visible { outline: 2px solid #ff626a; outline-offset: 6px; }
.skip { position: absolute; top: -60px; left: 20px; padding: 14px; z-index: 5; background: white; color: black; }
.skip:focus { top: 14px; }
header { height: 80px; display: flex; align-items: center; justify-content: space-between; padding: 0 6%; border-bottom: 1px solid #282828; }
.brand { font-size: 17px; font-weight: 800; }
nav { display: flex; align-items: center; gap: 20px; }
svg { width: 19px; height: 19px; flex-shrink: 0; }
.icon-link { display: grid; place-items: center; width: 44px; height: 44px; }
.call { display: flex; align-items: center; gap: 10px; padding: 13px 18px; background: #e50914; border-radius: 3px; font-size: 13px; font-weight: bold; }
.call:hover, .portfolio-link:hover { background: #b80710; }
.hero { position: relative; isolation: isolate; height: 520px; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; z-index: -2; }
.shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg,#000e 0%,#000b 36%,#0000 75%); }
.hero-content { position: relative; padding: 105px 6% 50px; }
.eyebrow { font-size: 10px; font-weight: bold; color: #ff626a; margin: 0 0 20px; }
h1 { font-size: 72px; line-height: 1.05; margin: 0 0 26px; font-weight: 800; max-width: 600px; }
.statement { font-size: 27px; line-height: 1.3; margin: 0 0 22px; font-weight: bold; }
.coming { color: #ddd; font-size: 14px; margin: 0; }
.featured { padding: 45px 6%; display: flex; justify-content: space-between; gap: 30px; align-items: center; background: #151515; border-bottom: 1px solid #303030; }
.featured .eyebrow { margin-bottom: 12px; }
h2 { font-size: 26px; line-height: 1.25; margin: 0 0 10px; }
.featured p:not(.eyebrow) { font-size: 13px; color: #bbb; margin: 0; }
.portfolio-link { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: #e50914; border-radius: 3px; padding: 16px 20px; font-size: 13px; font-weight: bold; flex-shrink: 0; }
footer { padding: 28px 6%; display: flex; flex-wrap: wrap; gap: 24px; color: #aaa; font-size: 11px; }
footer span { color: white; margin-right: auto; }
@media (min-width: 1000px) {
  .hero > img { object-fit: contain; object-position: right center; }
  .shade { background: linear-gradient(90deg,#0b0b0b 25%,#0b0b0b00 75%); }
}
@media (max-width: 700px) {
  header { height: 70px; padding: 0 5%; }
  .brand { font-size: 13px; } nav { gap: 4px; }
  .call { padding: 12px; font-size: 11px; gap: 8px; }
  .hero { height: 450px; }
  .hero > img { object-position: center 20%; }
  .shade { background: linear-gradient(0deg,#000 0%,#000d 34%,#0000 90%); }
  .hero-content { padding: 248px 5% 25px; }
  .eyebrow { margin-bottom: 12px; font-size: 9px; }
  h1 { font-size: 43px; margin-bottom: 14px; }
  .statement { font-size: 20px; margin-bottom: 12px; }
  .coming { font-size: 12px; }
  .featured { padding: 28px 5%; flex-direction: column; align-items: stretch; gap: 20px; }
  h2 { font-size: 23px; }
  .portfolio-link { width: 100%; }
  footer { gap: 14px; padding: 24px 5%; } footer span { width: 100%; }
}