:root {
  --essenz-ground: #0c1712;
  --essenz-white: #fff;
}

.essenz-world { position: relative; isolation: isolate; background: var(--essenz-ground); }
.essenz-hero { position: relative; display: grid; align-items: end; min-height: 720px; height: 100svh; overflow: hidden; color: var(--essenz-white); }
.essenz-photo { position: absolute; inset: 0; z-index: -2; }
.essenz-photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.essenz-hero::after { content: ""; position: absolute; z-index: -1; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgb(4 13 8 / .32) 0%, transparent 19%, transparent 44%, rgb(4 13 8 / .32) 62%, rgb(4 13 8 / .64) 90%, var(--essenz-ground) 100%); }
.essenz-header { position: absolute; inset: 0 0 auto; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 30px 4.5%; }
.essenz-wordmark { font-size: 21px; font-weight: 620; letter-spacing: -.045em; text-decoration: none; }
.essenz-wordmark span { font-weight: 400; }
.essenz-nav { display: flex; align-items: center; gap: clamp(22px, 2.8vw, 46px); font-size: 14px; }
.essenz-nav a { display: inline-flex; align-items: center; min-height: 44px; text-decoration: none; text-underline-offset: 6px; }
.essenz-nav a:hover { text-decoration: underline; }
.essenz-hero a:focus-visible { outline-color: #fff; outline-offset: 6px; }
.essenz-content { position: relative; z-index: 1; width: min(94%, 1180px); margin-inline: auto; padding-block: 100px clamp(58px, 8.3svh, 108px); text-align: center; }
.essenz-eyebrow { margin: 0 0 21px; font-size: clamp(12px, 1.05vw, 17px); font-weight: 450; letter-spacing: .055em; text-transform: uppercase; }
.essenz-title { margin: 0; font-size: clamp(64px, 5.25vw, 110px); font-weight: 560; line-height: 1.015; letter-spacing: -.043em; text-wrap: balance; }
.essenz-title span { display: block; }
.essenz-description { max-width: 880px; margin: 24px auto 0; font-size: clamp(17px, 1.15vw, 21px); font-weight: 400; line-height: 1.5; text-wrap: balance; }
.essenz-cta { display: inline-flex; align-items: center; justify-content: center; min-width: 182px; min-height: 58px; margin-top: 32px; padding: 17px 29px; border: 1px solid #fff; border-radius: 7px; background: #fff; color: #112017; font-size: 16px; font-weight: 600; line-height: 1.3; text-decoration: none; transition: background-color 160ms ease, color 160ms ease; }
.essenz-cta:hover { background: #d9e7d9; }
.essenz-cta:active { background: #c5d8c5; }
.essenz-world > .pixel-cut { position: relative; margin-top: -1px; background: var(--essenz-ground); }

@media (min-aspect-ratio: 21/9) {
  .essenz-photo img { object-position: 50% 32%; }
}
@media (max-width: 900px) {
  .essenz-photo img { object-position: 50% 24%; }
  .essenz-content { width: min(92%, 740px); padding-bottom: 65px; }
  .essenz-title { font-size: clamp(54px, 7.4vw, 72px); }
  .essenz-description { max-width: 640px; font-size: 17px; }
}
@media (max-width: 600px) {
  .essenz-hero { min-height: 700px; }
  .essenz-header { padding: 18px 23px; gap: 18px; align-items: center; }
  .essenz-wordmark { font-size: 17px; white-space: nowrap; }
  .essenz-nav { gap: 17px; font-size: 11px; }
  .essenz-photo img { object-position: 50% 20%; }
  .essenz-hero::after { background: linear-gradient(180deg, rgb(4 13 8 / .3), transparent 18%, transparent 36%, rgb(4 13 8 / .48) 54%, rgb(4 13 8 / .82) 90%, var(--essenz-ground) 100%); }
  .essenz-content { width: calc(100% - 38px); padding-bottom: clamp(40px, 6.5svh, 65px); }
  .essenz-eyebrow { margin-bottom: 19px; font-size: 11px; letter-spacing: .1em; }
  .essenz-title { font-size: clamp(40px, 10.8vw, 62px); line-height: 1.05; letter-spacing: -.04em; }
  .essenz-description { max-width: 420px; margin-top: 21px; font-size: 15px; line-height: 1.55; }
  .essenz-cta { min-height: 55px; margin-top: 26px; font-size: 15px; }
}
@media (max-width: 360px) {
  .essenz-header { padding-inline: 17px; gap: 12px; }
  .essenz-nav { gap: 12px; font-size: 10px; }
  .essenz-wordmark { font-size: 16px; }
  .essenz-content { width: calc(100% - 32px); }
  .essenz-title { font-size: 38px; }
}
@media (max-height: 740px) and (min-width: 901px) {
  .essenz-hero { min-height: 620px; }
  .essenz-title { font-size: 64px; }
  .essenz-content { padding-bottom: 42px; }
  .essenz-eyebrow { margin-bottom: 16px; }
  .essenz-description { margin-top: 18px; }
  .essenz-cta { margin-top: 24px; }
}
@media (prefers-reduced-motion: reduce) {
  .essenz-cta { transition: none; }
}