:root {
  --ink: #2c1b0f;
  --warm-white: #f5f0e8;
  --line: rgba(44, 27, 15, .34);
}

* { box-sizing: border-box; }

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

body {
  background: var(--warm-white);
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
}

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

.hero-image, .wash { inset: 0; position: absolute; }

.hero-image {
  background: center right / cover no-repeat url("hero-lain-v3.png");
  z-index: -2;
}

.wash {
  background: linear-gradient(90deg, rgba(250, 247, 240, .98) 0%, rgba(250, 247, 240, .93) 34%, rgba(250, 247, 240, .2) 58%, rgba(250, 247, 240, 0) 75%);
  z-index: -1;
}

.header {
  align-items: center;
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 74px;
  justify-content: space-between;
  padding: 0 clamp(28px, 5.1vw, 86px);
}

.brand {
  color: var(--ink);
  font-family: Prata, Georgia, serif;
  font-size: 48px;
  letter-spacing: -4px;
  line-height: 1;
  text-decoration: none;
}

nav { display: flex; gap: clamp(24px, 4vw, 64px); }
nav a, .footer a {
  color: inherit;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 1px;
  text-decoration: none;
}

nav a:hover, .footer a:hover { opacity: .62; }

.content {
  margin-left: clamp(28px, 5.1vw, 86px);
  max-width: 800px;
  padding-top: clamp(105px, 13.8vh, 148px);
}

.eyebrow {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 9px;
  margin: 0 0 22px;
  text-transform: uppercase;
}

h1 {
  font-family: Prata, Georgia, serif;
  font-size: clamp(60px, 7.15vw, 120px);
  font-weight: 400;
  letter-spacing: -5px;
  line-height: .98;
  margin: 0 0 34px;
}

.intro { font-size: 20px; letter-spacing: .7px; line-height: 1.85; margin: 0 0 28px; }

.actions { display: grid; gap: 15px; max-width: 438px; }

.button {
  align-items: center;
  display: flex;
  font-size: 15px;
  font-weight: 600;
  justify-content: space-between;
  letter-spacing: 1.45px;
  min-height: 62px;
  padding: 0 43px 0 65px;
  text-decoration: none;
  text-transform: uppercase;
  transition: background .2s ease, color .2s ease;
}

.button span { font-size: 25px; font-weight: 400; line-height: 1; }
.button--filled { background: #3a2514; color: white; }
.button--filled:hover { background: #5c422a; }
.button--outline { border: 1px solid var(--line); color: var(--ink); }
.button--outline:hover { background: rgba(255, 255, 255, .4); }

.footer {
  align-items: center;
  bottom: 48px;
  display: flex;
  gap: 45px;
  left: clamp(28px, 5.1vw, 86px);
  position: absolute;
}

.footer address { font-size: 14px; font-style: normal; letter-spacing: .65px; }
.divider { background: var(--line); height: 31px; width: 1px; }

@media (max-width: 740px) {
  .landing { background: var(--warm-white); min-height: 100svh; padding-bottom: 42px; }
  .hero-image {
    inset: 54% 0 0;
    background-position: 69% center;
  }
  .wash {
    background: linear-gradient(180deg, var(--warm-white) 0 48%, rgba(250, 247, 240, .84) 64%, rgba(250, 247, 240, .52) 100%);
  }
  .header { height: 65px; padding: 0 23px; }
  .brand { font-size: 39px; }
  nav { gap: 17px; }
  nav a { font-size: 10px; letter-spacing: .55px; }
  .content {
    margin: 0 23px;
    padding-top: clamp(70px, 12vh, 115px);
    position: relative;
  }
  .eyebrow { font-size: 11px; letter-spacing: 5px; margin-bottom: 17px; }
  h1 { font-size: clamp(52px, 15vw, 80px); letter-spacing: -3px; margin-bottom: 25px; }
  .intro { font-size: 16px; line-height: 1.65; }
  .button { font-size: 12px; min-height: 55px; padding: 0 25px; }
  .footer {
    bottom: 20px;
    flex-wrap: wrap;
    gap: 8px 18px;
    left: 23px;
    right: 23px;
    text-shadow: 0 1px 8px rgba(250, 247, 240, .85);
  }
  .footer a, .footer address { font-size: 10px; letter-spacing: .55px; }
  .divider { height: 18px; }
}

@media (max-height: 760px) and (min-width: 741px) {
  .content { padding-top: 70px; }
  .footer { bottom: 22px; }
  h1 { font-size: clamp(64px, 6vw, 94px); margin-bottom: 20px; }
  .intro { line-height: 1.55; margin-bottom: 18px; }
  .actions { gap: 10px; }
  .button { min-height: 52px; }
}