.landing-page {
  background: var(--paper);
}

.lumera-nav {
  position: relative;
  z-index: 5;
  display: flex;
  min-height: 88px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding-inline: max(24px, calc((100vw - 1240px) / 2));
  background: var(--paper);
  border-block-end: 1px solid var(--line);
}

.lumera-nav > a {
  min-height: 48px;
  display: grid;
  place-items: center;
}

.lumera-nav > a img {
  width: 210px;
}

.lumera-nav nav {
  display: flex;
  align-items: center;
  gap: 24px;
}

.lumera-nav nav a {
  display: inline-flex;
  min-height: 44px;
  align-items: center;
  text-decoration: none;
}

.lumera-nav .landing-action {
  padding-inline: 20px;
  color: var(--paper);
  background: var(--ink);
  border-radius: 999px;
}

.landing-hero {
  display: grid;
  grid-template-columns: 0.82fr 1.18fr;
  min-height: calc(100svh - 88px);
}

.landing-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: clamp(36px, 7vw, 110px);
  background: var(--mist);
}

.landing-hero h1 {
  max-width: 10ch;
  margin: 0 0 30px;
  font-size: clamp(54px, 7.2vw, 108px);
  font-weight: 430;
  letter-spacing: -0.045em;
  line-height: 0.92;
}

.landing-hero-copy p {
  max-width: 42ch;
  margin: 0 0 32px;
  font-size: clamp(19px, 1.8vw, 25px);
}

.landing-hero-image {
  position: relative;
  min-height: 680px;
  overflow: hidden;
}

.landing-hero-image > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 27%;
}

.landing-hero-mark {
  position: absolute;
  inset-block-end: 34px;
  inset-inline-start: 34px;
  width: clamp(110px, 14vw, 210px);
}

.approach-section {
  display: grid;
  grid-template-columns: 1fr 0.8fr;
  gap: 70px;
  padding-block: clamp(100px, 14vw, 210px);
}

.approach-section h2,
.landing-close h2 {
  max-width: 12ch;
  margin: 0;
  font-size: clamp(42px, 6vw, 84px);
  font-weight: 450;
  letter-spacing: -0.04em;
  line-height: 0.98;
}

.approach-section > div {
  align-self: end;
  max-width: 54ch;
  font-size: clamp(18px, 1.7vw, 23px);
}

.principles-section {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr 0.8fr;
  min-height: 820px;
}

.principle {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(28px, 4.5vw, 70px);
}

.principle h2 {
  margin: auto 0 28px;
  font-size: clamp(34px, 4.5vw, 66px);
  font-weight: 440;
  letter-spacing: -0.035em;
  line-height: 1;
}

.principle p {
  margin: 0;
}

.principle-one { background: var(--sage); }
.principle-two { color: var(--paper); background: var(--stone); }
.principle-image { min-height: 760px; }
.principle-image img { width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }

.method-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 760px;
  color: var(--paper);
  background: var(--ink);
}

.method-mark,
.method-copy {
  display: grid;
  place-items: center;
  padding: clamp(40px, 8vw, 120px);
}

.method-mark {
  border-inline-end: 1px solid rgba(246, 247, 244, 0.18);
}

.method-mark img {
  width: min(440px, 75%);
}

.method-copy {
  align-content: center;
  justify-items: start;
}

.method-copy h2 {
  max-width: 10ch;
  margin: 0 0 28px;
  font-size: clamp(46px, 6vw, 86px);
  font-weight: 430;
  letter-spacing: -0.04em;
  line-height: 0.96;
}

.method-copy p {
  max-width: 42ch;
  margin: 0;
  color: rgba(246, 247, 244, 0.76);
  font-size: 20px;
}

.landing-close {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.72fr);
  min-height: 760px;
  align-items: center;
  gap: clamp(48px, 9vw, 140px);
  padding-block: 120px;
}

.landing-close-copy > img {
  width: min(520px, 75vw);
  margin-block-end: 42px;
}

.landing-close-copy p {
  max-width: 40ch;
  margin: 26px 0 0;
  font-size: 19px;
}

.landing-form {
  display: grid;
  gap: 20px;
  padding: clamp(28px, 4vw, 50px);
  border: 1px solid var(--line);
  background: var(--mist);
}

.form-field {
  display: grid;
  gap: 8px;
}

.form-field label {
  font-size: 14px;
  font-weight: 650;
}

.form-field input,
.form-field select {
  width: 100%;
  min-height: 50px;
  padding: 10px 13px;
  border: 1px solid rgba(20, 32, 40, 0.38);
  border-radius: 0;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.form-field input[aria-invalid="true"] {
  border-color: #8c2f2f;
}

.field-error {
  min-height: 19px;
  color: #7b2424;
  font-size: 13px;
}

.landing-form .button {
  width: 100%;
}

.landing-form .button:disabled {
  cursor: default;
  opacity: 0.55;
}

.form-note,
.form-success {
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}

.form-note { color: rgba(20, 32, 40, 0.66); }
.form-success { padding: 14px; color: var(--paper); background: var(--stone); }

.landing-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 28px;
  color: var(--paper);
  background: var(--ink);
}

.landing-footer img { width: 42px; }
.landing-footer p { margin: 0; }

@media (max-width: 820px) {
  .lumera-nav { min-height: 74px; padding-inline: 16px; }
  .lumera-nav > a img { width: 160px; }
  .lumera-nav nav a:not(.landing-action) { display: none; }
  .landing-hero { grid-template-columns: 1fr; }
  .landing-hero-copy { min-height: 620px; }
  .landing-hero-image { min-height: 680px; }
  .approach-section { grid-template-columns: 1fr; gap: 42px; }
  .principles-section { grid-template-columns: 1fr; }
  .principle { min-height: 520px; }
  .principle-image { min-height: 680px; }
  .method-band { grid-template-columns: 1fr; }
  .method-mark { min-height: 560px; border-inline-end: 0; border-block-end: 1px solid rgba(246, 247, 244, 0.18); }
  .landing-close { grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .lumera-nav > a img { width: 135px; }
  .lumera-nav .landing-action { padding-inline: 14px; font-size: 13px; }
  .landing-hero-copy { min-height: 570px; padding-inline: 24px; }
  .landing-hero-image { min-height: 620px; }
  .landing-hero h1 { font-size: 53px; }
  .landing-footer { align-items: flex-start; font-size: 13px; }
}