:root {
  color-scheme: dark;
  --canvas-ratio: 1.7777778;
  --canvas-height-ratio: 0.5625;
  --font-display: "beaufort-pro", "Beaufort Pro", Georgia, "Times New Roman", serif;
  --font-text: "Inter", Arial, Helvetica, sans-serif;
  --copper: #efb08d;
  --page-y-margin: 60px;
  --stage-height: calc(100svh - var(--page-y-margin) - var(--page-y-margin));
  --ember-visibility: 0.75;
  --ember-tempo: 1.25;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background: #101111;
  font-family: var(--font-text);
}

.landing {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background: #101111;
  isolation: isolate;
}

.landing::before {
  position: absolute;
  inset: -2%;
  z-index: -1;
  content: "";
  background-image: image-set(
    url("assets/background.webp") type("image/webp"),
    url("assets/background.jpg") type("image/jpeg")
  );
  background-position: center;
  background-size: cover;
  filter: blur(18px) brightness(0.72);
  transform: scale(1.04);
}

.stage {
  position: absolute;
  top: var(--page-y-margin);
  left: 50%;
  width: calc(var(--stage-height) / var(--canvas-height-ratio));
  height: var(--stage-height);
  transform: translateX(-50%);
  container-type: size;
  z-index: 1;
}

.background {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: max(100vw, calc(100svh * var(--canvas-ratio)));
  height: max(100svh, calc(100vw / var(--canvas-ratio)));
  transform: translate(-50%, -50%);
  z-index: 0;
}

.background img {
  display: block;
  width: 100%;
  height: 100%;
}

.background img {
  object-fit: cover;
}

.layer {
  position: absolute;
  z-index: 2;
  display: block;
  height: auto;
  margin: 0;
  --x-offset: 0;
  transform: translateX(var(--x-offset));
  pointer-events: none;
  transform-origin: center top;
  user-select: none;
  -webkit-user-drag: none;
}

.layer--logo {
  top: 10.185185%;
  left: 50%;
  width: 20.807292%;
  --x-offset: -50%;
}

.layer--headline {
  top: 55.092593%;
  left: 50%;
  width: max-content;
  --x-offset: -50%;
  color: #ffffff;
  font-family: var(--font-display);
  font-size: 2.44cqw;
  font-style: normal;
  font-weight: 400;
  font-kerning: normal;
  line-height: 1.16;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
}

.layer--headline span {
  display: block;
}

.layer--contact {
  top: 74.814815%;
  left: 50%;
  width: max-content;
  --x-offset: -50%;
  color: #ffffff;
  font-family: var(--font-text);
  font-size: 1.2cqw;
  font-style: normal;
  font-weight: 400;
  line-height: 1.24;
  text-align: center;
  white-space: nowrap;
  pointer-events: auto;
  user-select: text;
}

.layer--contact span {
  display: block;
}

.layer--contact a {
  color: inherit;
  text-decoration: none;
}

.contact-title {
  margin-bottom: 2.23em;
}

.contact-name,
.contact-row a {
  color: var(--copper);
}

.contact-name {
  margin-bottom: 0.13em;
}

.stage address {
  font-style: normal;
}

@media (min-width: 1024px) {
  .background {
    width: 100vw;
    height: calc(100vw / var(--canvas-ratio));
  }
}

/* Enhanced cinematic ember layer */
.embers {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: calc(0.92 * var(--ember-visibility));
}

.embers::before,
.embers::after {
  position: absolute;
  inset: -8%;
  content: "";
  pointer-events: none;
}

.embers::before {
  background:
    radial-gradient(circle at 48% 52%, rgba(255, 95, 28, 0.28), transparent 16%),
    radial-gradient(circle at 58% 62%, rgba(255, 144, 52, 0.18), transparent 22%),
    radial-gradient(circle at 36% 70%, rgba(180, 42, 9, 0.2), transparent 24%),
    radial-gradient(circle at 77% 66%, rgba(255, 73, 12, 0.16), transparent 18%);
  filter: blur(30px);
  opacity: calc(0.72 * var(--ember-visibility));
  animation: ember-glow calc(5.4s * var(--ember-tempo)) ease-in-out infinite alternate;
}

.embers::after {
  background:
    radial-gradient(ellipse at 52% 80%, rgba(255, 86, 18, 0.16), transparent 34%),
    linear-gradient(90deg, transparent 0%, rgba(255, 103, 24, 0.08) 48%, transparent 100%);
  filter: blur(20px);
  opacity: calc(0.42 * var(--ember-visibility));
  animation: ember-breathe calc(7.2s * var(--ember-tempo)) ease-in-out infinite alternate;
}

.embers span {
  position: absolute;
  bottom: -8%;
  left: var(--ember-x, 50%);
  width: var(--ember-size, 4px);
  height: var(--ember-size, 4px);
  border-radius: 999px;
  background: rgba(255, 151, 66, 0.98);
  box-shadow:
    0 0 8px rgba(255, 132, 36, 0.95),
    0 0 18px rgba(255, 78, 13, 0.78),
    0 0 34px rgba(255, 38, 0, 0.38);
  filter: blur(var(--ember-blur, 0.2px));
  opacity: 0;
  transform: translate3d(0, 0, 0) rotate(var(--ember-rotate, 0deg)) scale(var(--ember-scale, 1));
  animation: ember-rise calc(var(--ember-duration, 6s) * var(--ember-tempo)) linear infinite;
  animation-delay: var(--ember-delay, 0s);
}

.embers span:nth-child(3n) {
  width: calc(var(--ember-size, 4px) * 0.58);
  height: calc(var(--ember-size, 4px) * 4.2);
  border-radius: 999px;
  background: linear-gradient(to top, rgba(255, 78, 12, 0), rgba(255, 174, 86, 0.96), rgba(255, 239, 175, 0.62));
  filter: blur(calc(var(--ember-blur, 0.2px) + 0.45px));
}

.embers span:nth-child(5n) {
  width: calc(var(--ember-size, 4px) * 1.7);
  height: calc(var(--ember-size, 4px) * 1.7);
  background: rgba(255, 112, 29, 0.78);
  filter: blur(calc(var(--ember-blur, 0.2px) + 1px));
}

.embers span:nth-child(1) { --ember-x: 44%; --ember-size: 3px; --ember-duration: 5.4s; --ember-delay: -0.2s; --ember-drift: -36px; --ember-scale: 0.8; --ember-rotate: 18deg; }
.embers span:nth-child(2) { --ember-x: 53%; --ember-size: 5px; --ember-duration: 7.1s; --ember-delay: -2.8s; --ember-drift: 48px; --ember-scale: 1.1; --ember-rotate: -16deg; }
.embers span:nth-child(3) { --ember-x: 59%; --ember-size: 4px; --ember-duration: 5.8s; --ember-delay: -1.6s; --ember-drift: 34px; --ember-scale: 0.9; --ember-rotate: 27deg; }
.embers span:nth-child(4) { --ember-x: 38%; --ember-size: 3px; --ember-duration: 6.5s; --ember-delay: -3.4s; --ember-drift: -52px; --ember-scale: 0.7; --ember-rotate: 8deg; }
.embers span:nth-child(5) { --ember-x: 66%; --ember-size: 6px; --ember-duration: 8.2s; --ember-delay: -0.9s; --ember-drift: 58px; --ember-scale: 1.2; --ember-blur: 0.6px; }
.embers span:nth-child(6) { --ember-x: 49%; --ember-size: 3px; --ember-duration: 4.9s; --ember-delay: -2.1s; --ember-drift: -28px; --ember-scale: 0.75; --ember-rotate: -25deg; }
.embers span:nth-child(7) { --ember-x: 73%; --ember-size: 4px; --ember-duration: 6.9s; --ember-delay: -4.2s; --ember-drift: 62px; --ember-scale: 1; }
.embers span:nth-child(8) { --ember-x: 31%; --ember-size: 4px; --ember-duration: 7.4s; --ember-delay: -1.1s; --ember-drift: -66px; --ember-scale: 0.95; }
.embers span:nth-child(9) { --ember-x: 57%; --ember-size: 5px; --ember-duration: 5.7s; --ember-delay: -3.8s; --ember-drift: 26px; --ember-scale: 1.05; --ember-rotate: 34deg; }
.embers span:nth-child(10) { --ember-x: 42%; --ember-size: 7px; --ember-duration: 8.6s; --ember-delay: -5.2s; --ember-drift: -44px; --ember-scale: 1.22; --ember-blur: 0.8px; }
.embers span:nth-child(11) { --ember-x: 62%; --ember-size: 2px; --ember-duration: 5.1s; --ember-delay: -0.5s; --ember-drift: 36px; --ember-scale: 0.6; }
.embers span:nth-child(12) { --ember-x: 48%; --ember-size: 4px; --ember-duration: 6.2s; --ember-delay: -4.7s; --ember-drift: -22px; --ember-scale: 0.85; --ember-rotate: -12deg; }
.embers span:nth-child(13) { --ember-x: 70%; --ember-size: 3px; --ember-duration: 7.9s; --ember-delay: -2.6s; --ember-drift: 74px; --ember-scale: 0.8; }
.embers span:nth-child(14) { --ember-x: 36%; --ember-size: 5px; --ember-duration: 6.8s; --ember-delay: -6.1s; --ember-drift: -54px; --ember-scale: 1.05; }
.embers span:nth-child(15) { --ember-x: 54%; --ember-size: 4px; --ember-duration: 4.7s; --ember-delay: -1.9s; --ember-drift: 28px; --ember-scale: 0.9; --ember-rotate: 21deg; }
.embers span:nth-child(16) { --ember-x: 23%; --ember-size: 3px; --ember-duration: 8.9s; --ember-delay: -3.2s; --ember-drift: -82px; --ember-scale: 0.72; }
.embers span:nth-child(17) { --ember-x: 81%; --ember-size: 3px; --ember-duration: 8.4s; --ember-delay: -5.8s; --ember-drift: 86px; --ember-scale: 0.75; }
.embers span:nth-child(18) { --ember-x: 51%; --ember-size: 5px; --ember-duration: 5.9s; --ember-delay: -0.8s; --ember-drift: -18px; --ember-scale: 1; --ember-rotate: -31deg; }
.embers span:nth-child(19) { --ember-x: 64%; --ember-size: 3px; --ember-duration: 6.4s; --ember-delay: -3.9s; --ember-drift: 52px; --ember-scale: 0.82; }
.embers span:nth-child(20) { --ember-x: 46%; --ember-size: 8px; --ember-duration: 9.1s; --ember-delay: -6.8s; --ember-drift: -38px; --ember-scale: 1.25; --ember-blur: 1px; }
.embers span:nth-child(21) { --ember-x: 58%; --ember-size: 2px; --ember-duration: 4.5s; --ember-delay: -2.4s; --ember-drift: 20px; --ember-scale: 0.58; }
.embers span:nth-child(22) { --ember-x: 33%; --ember-size: 4px; --ember-duration: 7.2s; --ember-delay: -4.5s; --ember-drift: -62px; --ember-scale: 0.86; }
.embers span:nth-child(23) { --ember-x: 75%; --ember-size: 5px; --ember-duration: 6.6s; --ember-delay: -1.4s; --ember-drift: 72px; --ember-scale: 1.08; }
.embers span:nth-child(24) { --ember-x: 41%; --ember-size: 3px; --ember-duration: 5.2s; --ember-delay: -3.1s; --ember-drift: -30px; --ember-scale: 0.8; --ember-rotate: 18deg; }
.embers span:nth-child(25) { --ember-x: 55%; --ember-size: 6px; --ember-duration: 8.7s; --ember-delay: -7.1s; --ember-drift: 44px; --ember-scale: 1.18; --ember-blur: 0.55px; }
.embers span:nth-child(26) { --ember-x: 69%; --ember-size: 3px; --ember-duration: 5.6s; --ember-delay: -0.6s; --ember-drift: 50px; --ember-scale: 0.76; }
.embers span:nth-child(27) { --ember-x: 29%; --ember-size: 4px; --ember-duration: 7.7s; --ember-delay: -5.5s; --ember-drift: -78px; --ember-scale: 0.92; --ember-rotate: -22deg; }
.embers span:nth-child(28) { --ember-x: 61%; --ember-size: 3px; --ember-duration: 5.0s; --ember-delay: -2.7s; --ember-drift: 32px; --ember-scale: 0.7; }
.embers span:nth-child(29) { --ember-x: 47%; --ember-size: 4px; --ember-duration: 6.1s; --ember-delay: -4.1s; --ember-drift: -24px; --ember-scale: 0.88; }
.embers span:nth-child(30) { --ember-x: 83%; --ember-size: 7px; --ember-duration: 9.4s; --ember-delay: -6.4s; --ember-drift: 90px; --ember-scale: 1.18; --ember-blur: 1px; }
.embers span:nth-child(31) { --ember-x: 17%; --ember-size: 3px; --ember-duration: 8.8s; --ember-delay: -2.2s; --ember-drift: -92px; --ember-scale: 0.72; }
.embers span:nth-child(32) { --ember-x: 52%; --ember-size: 5px; --ember-duration: 6.3s; --ember-delay: -5.9s; --ember-drift: 16px; --ember-scale: 1.02; }
.embers span:nth-child(33) { --ember-x: 39%; --ember-size: 3px; --ember-duration: 5.3s; --ember-delay: -1.3s; --ember-drift: -42px; --ember-scale: 0.78; --ember-rotate: 35deg; }
.embers span:nth-child(34) { --ember-x: 67%; --ember-size: 4px; --ember-duration: 7.0s; --ember-delay: -3.6s; --ember-drift: 58px; --ember-scale: 0.98; }
.embers span:nth-child(35) { --ember-x: 45%; --ember-size: 5px; --ember-duration: 8.1s; --ember-delay: -7.4s; --ember-drift: -34px; --ember-scale: 1.1; }
.embers span:nth-child(36) { --ember-x: 56%; --ember-size: 3px; --ember-duration: 4.8s; --ember-delay: -0.3s; --ember-drift: 30px; --ember-scale: 0.74; --ember-rotate: -19deg; }
.embers span:nth-child(37) { --ember-x: 72%; --ember-size: 2px; --ember-duration: 6.7s; --ember-delay: -4.9s; --ember-drift: 64px; --ember-scale: 0.62; }
.embers span:nth-child(38) { --ember-x: 35%; --ember-size: 4px; --ember-duration: 7.6s; --ember-delay: -2.9s; --ember-drift: -70px; --ember-scale: 0.9; }
.embers span:nth-child(39) { --ember-x: 63%; --ember-size: 5px; --ember-duration: 5.5s; --ember-delay: -1.7s; --ember-drift: 46px; --ember-scale: 1.06; --ember-rotate: 24deg; }
.embers span:nth-child(40) { --ember-x: 50%; --ember-size: 7px; --ember-duration: 9.0s; --ember-delay: -6.6s; --ember-drift: -12px; --ember-scale: 1.15; --ember-blur: 0.9px; }

@media (prefers-reduced-motion: no-preference) {
  .embers {
    animation: ember-layer-fade calc(1600ms * var(--ember-tempo)) ease-out both;
  }
}

@media (prefers-reduced-motion: reduce) {
  .embers span {
    animation: none;
    opacity: calc(0.38 * var(--ember-visibility));
    transform: translateY(-48vh) scale(0.85);
  }

  .embers::before,
  .embers::after {
    animation: none;
  }
}

@keyframes ember-rise {
  0% {
    opacity: 0;
    transform: translate3d(0, 0, 0) rotate(var(--ember-rotate, 0deg)) scale(var(--ember-scale, 1));
  }
  9% {
    opacity: calc(0.95 * var(--ember-visibility));
  }
  42% {
    opacity: calc(0.8 * var(--ember-visibility));
    transform: translate3d(calc(var(--ember-drift, 32px) * 0.45), -42vh, 0) rotate(calc(var(--ember-rotate, 0deg) + 26deg)) scale(calc(var(--ember-scale, 1) * 1.08));
  }
  72% {
    opacity: calc(0.42 * var(--ember-visibility));
  }
  100% {
    opacity: 0;
    transform: translate3d(var(--ember-drift, 32px), -112vh, 0) rotate(calc(var(--ember-rotate, 0deg) + 74deg)) scale(calc(var(--ember-scale, 1) * 0.58));
  }
}

@keyframes ember-glow {
  from {
    opacity: calc(0.48 * var(--ember-visibility));
    transform: scale(0.98) translate3d(-0.6%, 0.4%, 0);
  }
  to {
    opacity: calc(0.84 * var(--ember-visibility));
    transform: scale(1.06) translate3d(0.8%, -0.5%, 0);
  }
}

@keyframes ember-breathe {
  from {
    opacity: calc(0.26 * var(--ember-visibility));
    transform: scale(1);
  }
  to {
    opacity: calc(0.56 * var(--ember-visibility));
    transform: scale(1.08);
  }
}

@keyframes ember-layer-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: calc(0.92 * var(--ember-visibility));
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: no-preference) {
  .background img {
    animation: settle 1400ms ease-out both;
  }

  .layer--logo,
  .layer--headline,
  .layer--contact {
    animation: reveal 900ms ease-out both;
  }

  .layer--headline {
    animation-delay: 120ms;
  }

  .layer--contact {
    animation-delay: 220ms;
  }
}

@keyframes settle {
  from {
    transform: scale(1.018);
    filter: brightness(0.86);
  }
  to {
    transform: scale(1);
    filter: brightness(1);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    transform: translate(var(--x-offset), 1.2%);
  }
  to {
    opacity: 1;
    transform: translate(var(--x-offset), 0);
  }
}