:root {
  --lens-ink: #1a1612;
  --lens-brown: #382c24;
  --lens-cream: #f4efe8;
  --lens-sand: #e8ddd0;
  --lens-taupe: #baa38e;
  --lens-muted: #6f655b;
  --lens-line: rgba(56,44,36,.14);
}

body[data-page="lens"] {
  background: var(--lens-cream);
  color: var(--lens-brown);
}

.lens-hero {
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding: 132px 0 74px;
  background:
    radial-gradient(circle at 82% 42%, rgba(186,163,142,.16) 0%, transparent 28%),
    linear-gradient(110deg, rgba(26,22,18,.98) 0%, rgba(26,22,18,.92) 52%, rgba(26,22,18,.84) 100%),
    #1a1612;
  color: #fff;
  overflow: hidden;
}

.lens-shell {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(260px, .62fr);
  gap: clamp(34px, 6vw, 78px);
  align-items: center;
}

.lens-copy {
  max-width: 650px;
}

.lens-kicker {
  display: inline-block;
  margin-bottom: 18px;
  color: rgba(255,255,255,.55);
  font-size: .72rem;
  letter-spacing: .32em;
  text-transform: uppercase;
}

.lens-copy h1,
.lens-signup-copy h2 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.02;
}

.lens-copy h1 {
  max-width: 760px;
  margin-bottom: 26px;
  font-size: clamp(3.2rem, 7vw, 6.5rem);
}

.lens-copy p {
  max-width: 39rem;
  color: rgba(255,255,255,.78);
  font-size: 1.05rem;
  line-height: 1.95;
}

.lens-card {
  min-height: min(62svh, 620px);
  background: url("../images/door-mijn-lens-nieuwsbrief.jpg") center center/contain no-repeat;
  filter: drop-shadow(0 32px 46px rgba(0,0,0,.32));
}

.lens-signup {
  padding: 104px 0;
  background: linear-gradient(180deg, #fbf7f1 0%, var(--lens-cream) 100%);
}

.lens-signup-grid {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(300px, .72fr);
  gap: clamp(34px, 6vw, 72px);
  align-items: start;
}

.lens-signup .lens-kicker {
  color: var(--lens-taupe);
}

.lens-signup-copy h2 {
  max-width: 560px;
  color: var(--lens-brown);
  font-size: clamp(2.3rem, 4.6vw, 4.4rem);
}

.lens-form {
  display: grid;
  gap: 18px;
  padding: clamp(26px, 4vw, 42px);
  background: #fff;
  border: 1px solid var(--lens-line);
}

.lens-form label {
  display: grid;
  gap: 9px;
}

.lens-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.lens-form label > span {
  color: var(--lens-muted);
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.lens-form input[type="text"],
.lens-form input[type="email"] {
  width: 100%;
  min-height: 50px;
  padding: 14px 16px;
  border: 1px solid var(--lens-line);
  background: #fbf7f1;
  color: var(--lens-brown);
  font: inherit;
  outline: none;
}

.lens-form input:focus {
  border-color: rgba(56,44,36,.42);
}

.lens-consent {
  grid-template-columns: 18px minmax(0, 1fr);
  align-items: start;
  gap: 12px;
}

.lens-consent input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  accent-color: var(--lens-brown);
}

.lens-consent span {
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
}

.lens-form button {
  min-height: 52px;
  padding: 14px 28px;
  border: 1px solid var(--lens-brown);
  background: var(--lens-brown);
  color: #fff;
  font: inherit;
  font-size: .74rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}

.lens-form button:hover {
  background: transparent;
  color: var(--lens-brown);
}

.lens-form p,
.lens-form-status {
  color: var(--lens-muted);
  font-size: .86rem;
  line-height: 1.75;
}

.lens-form-status {
  padding: 12px 14px;
  background: var(--lens-cream);
  border: 1px solid var(--lens-line);
}

.lens-form-status[data-type="success"] {
  color: #31513a;
  background: #eef6ed;
  border-color: rgba(49,81,58,.2);
}

.lens-form-status[data-type="error"] {
  color: #7a2f25;
  background: #fff0ec;
  border-color: rgba(122,47,37,.2);
}

@media (max-width: 980px) {
  .lens-hero {
    min-height: auto;
    padding: 124px 0 64px;
    background:
      radial-gradient(circle at 50% 18%, rgba(186,163,142,.16) 0%, transparent 32%),
      linear-gradient(180deg, rgba(26,22,18,.94) 0%, rgba(26,22,18,.86) 100%),
      #1a1612;
  }

  .lens-shell,
  .lens-signup-grid {
    grid-template-columns: 1fr;
  }

  .lens-card {
    min-height: 420px;
    order: -1;
  }
}

@media (max-width: 650px) {
  .lens-copy h1 {
    font-size: clamp(2.8rem, 15vw, 4.4rem);
  }

  .lens-copy p {
    font-size: .98rem;
  }

  .lens-card {
    min-height: 330px;
  }

  .lens-signup {
    padding: 76px 0;
  }
}