:root {
  font-family: Arial, Helvetica, sans-serif;
  color: #fff;
  background: #111;
  --red: #ef3124;
}

* { box-sizing: border-box; }
body { margin: 0; background: #111; }
.hero { position: relative; min-height: 100svh; overflow: hidden; isolation: isolate; }
.photo-layer { position: absolute; z-index: -3; inset: -3%; background: url("assets/anna-red-dress.webp") center 28% / cover no-repeat; transform: translate3d(var(--mx, 0), var(--my, 0), 0) scale(1.06); transition: transform .22s ease-out; }
.shade { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, rgba(8,8,8,.78) 0%, rgba(8,8,8,.18) 52%, rgba(8,8,8,.08) 100%), linear-gradient(0deg, rgba(8,8,8,.65), transparent 48%); }
.brand { position: absolute; top: 28px; left: clamp(22px, 5vw, 72px); display: flex; gap: 12px; align-items: center; font-size: 16px; font-weight: 800; }
.brand-mark { position: relative; display: inline-grid; place-items: center; width: 38px; height: 42px; color: var(--red); font-size: 38px; font-weight: 900; line-height: 1; transform: scaleX(.82); }
.brand-mark i { position: absolute; bottom: 0; width: 28px; height: 4px; background: var(--red); }
.identity { position: absolute; left: clamp(22px, 5vw, 72px); top: 25%; }
.kicker { margin: 0 0 14px; color: #fff; font-size: 12px; font-weight: 900; letter-spacing: .16em; text-transform: uppercase; }
h1 { margin: 0; font-size: clamp(64px, 10vw, 148px); line-height: .78; letter-spacing: -.08em; text-transform: uppercase; }
.contact-card { position: absolute; right: clamp(18px, 4vw, 58px); bottom: clamp(18px, 4vw, 52px); width: min(440px, calc(100% - 36px)); padding: 28px; border-radius: 28px; background: rgba(255,255,255,.96); color: #111; box-shadow: 0 30px 90px rgba(0,0,0,.34); backdrop-filter: blur(12px); animation: rise .85s cubic-bezier(.22,.8,.25,1) both; }
.role p { margin: 0; font-size: 23px; font-weight: 900; line-height: 1.05; letter-spacing: -.035em; }
.role span { display: block; margin-top: 8px; color: var(--red); font-size: 13px; font-weight: 900; text-transform: uppercase; }
.description { margin: 22px 0; color: #5d5d5d; font-size: 15px; line-height: 1.45; }
.actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: 10px; }
.button { display: grid; min-height: 52px; place-items: center; padding: 0 16px; border-radius: 16px; font-size: 14px; font-weight: 900; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.button:hover { transform: translateY(-2px); }
.button:focus-visible { outline: 3px solid #111; outline-offset: 3px; }
.button--red { background: var(--red); color: #fff; box-shadow: 0 10px 24px rgba(239,49,36,.25); }
.button--light { border: 1px solid #ddd; color: #111; background: #fff; }
.button--email { grid-column: 1 / -1; background: #111; color: #fff; }
.note { margin: 18px 0 0; color: #777; font-size: 10px; line-height: 1.4; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } }

@media (max-width: 760px) {
  .hero { display: grid; min-height: 100svh; grid-template-rows: max(560px, 72svh) auto; overflow: hidden; }
  .photo-layer { inset: 0 0 auto; height: max(560px, 72svh); background-position: 51% top; transform: none; }
  .shade { inset: 0 0 auto; height: max(560px, 72svh); background: linear-gradient(0deg, rgba(8,8,8,.8) 0%, rgba(8,8,8,.08) 60%, rgba(8,8,8,.22) 100%); }
  .brand { top: 22px; }
  .identity { top: calc(max(560px, 72svh) - 190px); right: 22px; bottom: auto; left: 22px; }
  h1 { font-size: clamp(52px, 18vw, 82px); line-height: .82; }
  .contact-card { position: relative; z-index: 3; grid-row: 2; right: auto; bottom: auto; width: auto; margin: -22px 12px 12px; padding: 22px; border-radius: 24px; }
  .role p { font-size: 20px; }
}

@media (max-width: 390px) {
  .actions { grid-template-columns: 1fr; }
  .button--email { grid-column: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-layer, .button { transition: none; }
  .contact-card { animation: none; }
}