.landing {
  display: grid;
  grid-template-columns: minmax(320px, 39%) minmax(0, 61%);
  min-height: 100svh;
  overflow: hidden;
}

.intro {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100svh;
  padding: clamp(28px, 4.5vw, 68px);
  background: rgba(239, 233, 222, 0.78);
  border-right: 1px solid rgba(52, 76, 61, 0.24);
}

.studio-badge {
  position: relative;
  width: min(100%, 300px);
  max-width: 100%;
  container-type: inline-size;
}

.studio-badge img {
  display: block;
  width: 100%;
  height: auto;
}

.hero-copy {
  width: min(100%, 390px);
  padding-bottom: clamp(12px, 4vh, 48px);
}

.hero-copy h1 {
  margin: 0;
  color: var(--field-green);
  font-family: var(--body);
  font-size: clamp(3.1rem, 5vw, 5.7rem);
  font-weight: 450;
  letter-spacing: -0.045em;
  line-height: 0.98;
}

.acre-line {
  display: block;
  width: 56px;
  height: 1px;
  margin: clamp(26px, 4.4vh, 44px) 0 24px;
  background: var(--warm-acre);
}

.hero-copy p {
  max-width: 29rem;
  margin: 0;
  font-size: clamp(0.9rem, 1.15vw, 1.06rem);
  line-height: 1.65;
}

.field-map {
  position: relative;
  min-height: 100svh;
  overflow: hidden;
  background:
    linear-gradient(rgba(239, 233, 222, 0.44), rgba(239, 233, 222, 0.44)),
    radial-gradient(circle at 28% 22%, rgba(255, 255, 255, 0.62), transparent 32rem),
    var(--canvas);
  isolation: isolate;
}

.field-map::before,
.field-map::after,
.contour {
  position: absolute;
  z-index: -3;
  content: "";
  border: 1px solid rgba(52, 76, 61, 0.2);
  border-radius: 52% 48% 44% 56% / 52% 41% 59% 48%;
}

.field-map::before {
  top: -29%;
  right: -14%;
  width: 90%;
  aspect-ratio: 1.15;
  transform: rotate(-17deg);
  box-shadow:
    0 0 0 22px rgba(52, 76, 61, 0.045),
    0 0 0 48px rgba(52, 76, 61, 0.04),
    0 0 0 78px rgba(52, 76, 61, 0.035),
    0 0 0 112px rgba(52, 76, 61, 0.03),
    0 0 0 150px rgba(52, 76, 61, 0.025);
}

.field-map::after {
  right: 18%;
  bottom: -38%;
  width: 82%;
  aspect-ratio: 1.3;
  transform: rotate(11deg);
  box-shadow:
    0 0 0 20px rgba(52, 76, 61, 0.045),
    0 0 0 45px rgba(52, 76, 61, 0.04),
    0 0 0 74px rgba(52, 76, 61, 0.035),
    0 0 0 108px rgba(52, 76, 61, 0.03);
}

.contour-one {
  top: 8%;
  left: -28%;
  width: 62%;
  aspect-ratio: 0.8;
  box-shadow:
    0 0 0 16px rgba(52, 76, 61, 0.035),
    0 0 0 35px rgba(52, 76, 61, 0.03),
    0 0 0 58px rgba(52, 76, 61, 0.025);
}

.contour-two {
  top: 27%;
  right: 22%;
  width: 36%;
  aspect-ratio: 1.5;
  transform: rotate(-24deg);
}

.contour-three {
  right: -7%;
  bottom: 17%;
  width: 40%;
  aspect-ratio: 0.9;
}

.parcel-boundary {
  position: absolute;
  z-index: -1;
  height: 1px;
  background: repeating-linear-gradient(90deg, rgba(52, 76, 61, 0.72) 0 7px, transparent 7px 13px);
  transform-origin: left;
}

.boundary-a {
  top: 42%;
  left: 11%;
  width: 68%;
  transform: rotate(-24deg);
}

.boundary-b {
  top: -6%;
  left: 52%;
  width: 96%;
  transform: rotate(87deg);
}

.boundary-c {
  top: 60%;
  left: 51%;
  width: 72%;
  transform: rotate(18deg);
}

.map-label {
  position: absolute;
  color: var(--field-green);
  font-family: var(--body);
  font-size: clamp(0.48rem, 0.65vw, 0.66rem);
  font-weight: 700;
  letter-spacing: 0.16em;
  line-height: 1.6;
  text-align: center;
  text-transform: uppercase;
}

.map-label strong {
  font-size: 1.2em;
}

.map-label-a {
  top: 27%;
  left: 40%;
}

.map-label-b {
  top: 49%;
  right: 22%;
}

.map-point {
  position: absolute;
  top: 58.6%;
  left: 50.5%;
  width: 15px;
  height: 15px;
  border: 2px solid var(--field-green);
  border-radius: 50%;
  background: var(--canvas);
}

.map-point::after {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 5px;
  height: 5px;
  content: "";
  background: var(--field-green);
  border-radius: 50%;
}

@media (max-width: 760px) {
  .landing {
    grid-template-columns: 1fr;
    overflow: visible;
  }

  .intro {
    min-height: 72svh;
    gap: 72px;
    padding: 38px 44px 56px;
    border-right: 0;
    border-bottom: 1px solid rgba(52, 76, 61, 0.24);
  }

  .studio-badge {
    width: min(100%, 280px);
  }

  .field-map {
    min-height: 64svh;
  }
}

@media (max-width: 420px) {
  .intro {
    padding: 32px 30px 48px;
  }

  .hero-copy h1 {
    font-size: 3.4rem;
  }
}