.webpeak-home-design-card {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4.5rem);
  padding: clamp(2.5rem, 5vw, 4.5rem);
  border-radius: var(--border-radius--border-radius-large, 2rem);
  background: var(--neutral-colors--white, #fff);
}

.webpeak-home-design-copy h2 {
  max-width: 15ch;
  margin: 0;
  font-size: clamp(2.25rem, 3.5vw, 3.5rem);
  line-height: 1.05;
}

.webpeak-home-design-copy p {
  max-width: 34rem;
  margin: 1.5rem 0 0;
}

.webpeak-home-design-button {
  width: auto;
  margin-top: 2rem;
  border: 0;
}

.webpeak-home-design-cross {
  position: relative;
  height: 25rem;
  overflow: hidden;
}

.webpeak-home-design-grid {
  display: grid;
  height: 100%;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
}

.webpeak-home-design-item {
  display: flex;
  min-width: 0;
  padding: 1.5rem 1.75rem;
  align-items: center;
  opacity: 0;
  transition: opacity 720ms cubic-bezier(.16, 1, .3, 1) 980ms;
}

.webpeak-home-design-item:nth-child(even) {
  padding-right: .75rem;
  padding-left: 2.75rem;
}

.webpeak-home-design-title {
  display: flex;
  align-items: center;
  gap: .75rem;
}

.webpeak-home-design-title img {
  width: 2rem;
  height: 2rem;
  flex: 0 0 auto;
}

.webpeak-home-design-title h3 {
  margin: 0;
  color: var(--neutral-colors--almost-black, #1a1c1c);
  font-family: var(--fonts--space-grotesk);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -.01em;
  line-height: 1.22;
}

.webpeak-home-design-line {
  position: absolute;
  display: block;
  background: var(--main-colors--blue-300, #abd7ee);
  opacity: 0;
  pointer-events: none;
  transition: transform 1080ms cubic-bezier(.16, 1, .3, 1), opacity 0s linear 1080ms;
}

.webpeak-home-design-line.is-top,
.webpeak-home-design-line.is-bottom {
  left: calc(50% - 1px);
  width: 2px;
  height: calc(50% - 3.025rem);
}

.webpeak-home-design-line.is-top { top: 0; transform: translateY(-100%); }
.webpeak-home-design-line.is-bottom { bottom: 0; transform: translateY(100%); }

.webpeak-home-design-line.is-left,
.webpeak-home-design-line.is-right {
  top: calc(50% - 1px);
  width: calc(50% - 3.25rem);
  height: 2px;
}

.webpeak-home-design-line.is-left { left: 0; transform: translateX(-100%); }
.webpeak-home-design-line.is-right { right: 0; transform: translateX(100%); }

.webpeak-home-design-peak {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 5.25rem;
  height: 4.8rem;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.35);
  transition: opacity 220ms ease-out, transform 360ms cubic-bezier(.16, 1, .3, 1);
}

.webpeak-home-design-peak svg { display: block; width: 100%; height: 100%; overflow: visible; }
.webpeak-home-design-peak .is-back { fill: var(--main-colors--blue-300, #abd7ee); }
.webpeak-home-design-peak .is-front { fill: var(--main-colors--blue-500, #5685a0); }
.webpeak-home-design-peak .is-snow { fill: var(--main-colors--blue-200, #d9edf7); }
.webpeak-home-design-peak .is-pole { fill: none; stroke: var(--main-colors--blue-700, #344f61); stroke-linecap: round; stroke-width: 2.5; }
.webpeak-home-design-peak .is-flag { fill: #e4002b; }

.webpeak-home-design-cross.is-drawn .webpeak-home-design-line { opacity: 1; transform: translate(0); transition: transform 1080ms cubic-bezier(.16, 1, .3, 1), opacity 0s; }
.webpeak-home-design-cross.is-drawn .webpeak-home-design-peak { opacity: 1; transform: translate(-50%, -50%) scale(1); transition-delay: 280ms; }
.webpeak-home-design-cross.is-drawn .webpeak-home-design-item { opacity: 1; }

html.webpeak-home-design-modal-open { overflow: hidden; }
.webpeak-home-design-modal[hidden] { display: none; }
.webpeak-home-design-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.webpeak-home-design-backdrop { position: absolute; inset: 0; background: rgba(9, 23, 38, .58); backdrop-filter: blur(10px); }
.webpeak-home-design-dialog { position: relative; z-index: 1; width: min(100%, 74rem); max-height: min(90vh, 56rem); overflow: auto; padding: clamp(1.15rem, 2.6vw, 2rem); border: 1px solid var(--borders--borders, #cfe4f1); border-radius: clamp(1.35rem, 3vw, 2rem); background: rgba(255, 255, 255, .97); box-shadow: 0 1.5rem 4rem rgba(11, 31, 58, .28); }
.webpeak-home-design-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; width: 2.5rem; height: 2.5rem; padding: 0; border: 1px solid var(--borders--borders, #cfe4f1); border-radius: 50%; background: #fff; color: #0b1f3a; font: inherit; font-size: 1.6rem; line-height: 1; cursor: pointer; }
.webpeak-home-design-modal-header { max-width: 48rem; margin: 0 auto 1.25rem; text-align: center; }
.webpeak-home-design-modal-header h2 { margin: .65rem 0 .45rem; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.05; }
.webpeak-home-design-modal-header p { margin: 0; color: rgba(11, 31, 58, .62); }
.webpeak-home-design-form { display: grid; width: min(100%, 68rem); margin: 0 auto; padding: clamp(1.15rem, 2vw, 1.65rem); border: 1px solid var(--borders--borders, #cfe4f1); border-radius: 1.45rem; background: rgba(255, 255, 255, .8); grid-template-columns: 1fr 1fr; column-gap: .8rem; }
.webpeak-home-design-form label { display: block; margin-bottom: .82rem; color: #0b1f3a; font-size: .95rem; font-weight: 700; }
.webpeak-home-design-form label > span { display: block; margin-bottom: .32rem; }
.webpeak-home-design-form input { width: 100%; min-height: 3.15rem; padding: .72rem .95rem; border: 1px solid var(--borders--borders, #cfe4f1); border-radius: .9rem; outline: none; background: #fff; color: #0b1f3a; font: inherit; font-weight: 500; }
.webpeak-home-design-form input:focus { border-color: #0069ff; box-shadow: 0 0 0 .18rem rgba(0, 105, 255, .12); }
.webpeak-home-design-form-grid { display: grid; grid-column: 1 / -1; grid-template-columns: 1fr 1fr; gap: .8rem; }
.webpeak-home-design-honey { position: absolute !important; left: -9999px !important; opacity: 0 !important; }
.webpeak-home-design-submit { grid-column: 1 / -1; width: 100%; border: 0; }

@media (max-width: 991px) {
  .webpeak-home-design-card { grid-template-columns: 1fr; }
  .webpeak-home-design-copy h2 { max-width: 18ch; }
}

@media (max-width: 767px) {
  .webpeak-home-design-section .padding-section-xxlarge { padding-top: 3rem; padding-bottom: 3rem; }
  .webpeak-home-design-card { gap: 1.5rem; padding: 1.5rem; }
  .webpeak-home-design-copy h2 { font-size: clamp(2rem, 9vw, 2.65rem); line-height: 1.02; }
  .webpeak-home-design-copy p { margin-top: 1rem; }
  .webpeak-home-design-button { width: 100%; margin-top: 1.5rem; white-space: normal; }
  .webpeak-home-design-cross { height: 22rem; }
  .webpeak-home-design-item { padding: .85rem; }
  .webpeak-home-design-item:nth-child(odd) { padding-right: 2.5rem; }
  .webpeak-home-design-item:nth-child(even) { padding-right: .85rem; padding-left: 2.5rem; }
  .webpeak-home-design-title { flex-direction: column; align-items: flex-start; gap: .45rem; }
  .webpeak-home-design-title img { width: 1.5rem; height: 1.5rem; }
  .webpeak-home-design-title h3 { font-size: 1.1rem; line-height: 1.18; }
  .webpeak-home-design-modal-header { padding-right: 2rem; text-align: left; }
  .webpeak-home-design-form,
  .webpeak-home-design-form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .webpeak-home-design-item,
  .webpeak-home-design-line,
  .webpeak-home-design-peak { opacity: 1; transition: none; }
  .webpeak-home-design-line { transform: none !important; }
  .webpeak-home-design-peak { transform: translate(-50%, -50%); }
}