/* ============ HERO (620px video + live glass card) ============ */
.cn-hero { position: relative; height: 620px; overflow: hidden; background: #111; }
.cn-hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 620px;
  object-fit: cover;
  filter: grayscale(1);
}
.cn-hero__glass {
  position: absolute;
  left: var(--edge);
  bottom: 0;
  width: 1080px;
  height: 308px;
  background: rgba(255,255,255,.86);
  backdrop-filter: blur(5px);
  border: 1px solid rgba(255,255,255,.55);
}
.cn-hero__kicker {
  position: absolute;
  left: var(--edge);
  top: 58px;
  font-size: 20px;
  line-height: 1.2;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--black);
}
.cn-hero__glass h1 {
  position: absolute;
  left: 120px;
  top: 122px;
  width: 410px;
  font-size: var(--fs-display);
  font-weight: 400;
  line-height: 1.08;
}
.cn-hero__glass p {
  position: absolute;
  left: 556px;
  top: 131px;
  width: 444px;
  font-size: 20px;
  line-height: 1.2;
  text-align: right;
  color: rgba(0,0,0,.6);
}

/* ============ CONTACT (815px black: info left + white form right) ============ */
.cn-contact { position: relative; height: 900px; background: var(--black); color: #fff; } /* v3.0: 120px below the form, mirroring the top */
/* v2.9: 50/50 columns with 80px gap between them */
.cn-info { position: absolute; left: var(--edge); top: 120px; width: calc((100% - (2 * var(--edge)) - 80px) / 2); min-height: 660px; display: flex; flex-direction: column; justify-content: center; } /* v3.0: vertically centered against the form column */
.cn-info h1 { font-size: var(--fs-h2); font-weight: 400; }
.cn-info .email-row { display: flex; align-items: center; gap: 8px; margin-top: 88px; }
.cn-info .email-row svg { width: 16px; height: 16px; }
.cn-info .email-row a { text-decoration: underline; text-underline-offset: 3px; }
.cn-info hr { border: none; border-top: 1px solid rgba(255,255,255,0.5); margin: 48px 0 0; width: 100%; }
.site { margin-top: 56px; }
.site h3 { font-size: var(--fs-title); font-weight: 400; }
.site .row { display: flex; gap: 8px; margin-top: 20px; align-items: flex-start; }
.site .row + .row { margin-top: 10px; }
.site .row svg { width: 16px; height: 16px; margin-top: 4px; }
.site .row > img { width: 16px; height: 16px; flex: none; margin: 0; object-fit: contain; }
.site .row p { line-height: 1.44; }
.cn-info hr + .site { margin-top: 40px; }
.cn-form {
  position: absolute; right: var(--edge); left: auto; top: 50%; transform: translateY(-50%); /* v3.0: height hugs content, box y-centered in the 900px band so padding matches top & bottom */
  width: calc((100% - (2 * var(--edge)) - 80px) / 2); height: auto; /* v3.0: was fixed 660px which left only 19px under the submit button */
  background: #fff;
  background-image: linear-gradient(90deg, rgba(0,0,0,.016), rgba(0,0,0,.048));
  color: #000;
  padding: 80px; /* v3.0: equal 80px on all sides — content defines the height */
}
.cn-form label { display: block; font-size: 16px; }
.cn-form .pair { display: flex; gap: 20px; }
.cn-form input, .cn-form textarea {
  font-family: var(--font); font-size: 16px; color: #000;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(0,0,0,0.2);
  border-radius: 0;
  outline: none;
  height: 44px; padding: 0; width: 100%;
}
.cn-form input:focus, .cn-form textarea:focus { border-bottom-color: rgba(0,0,0,.65); }
.cn-form textarea { height: 44px; resize: none; }
.cn-form .field { margin-top: 40px; }
.cn-form .field:first-child { margin-top: 0; }
.cn-form .field .pair input { flex: 1; width: auto; min-width: 0; } /* v2.9: 50/50 balanced */
.cn-form .btn { margin-top: 40px; }

/* ============ MAP (702px) — v2.7: working toggle + live Google embeds ============ */
.cn-map { position: relative; height: 702px; overflow: hidden; background: #e8e8e8; }
.cn-map .map-frame { position: absolute; inset: 0; display: none; }
.cn-map .map-frame.is-on { display: block; }
.cn-map iframe { width: 100%; height: 100%; border: 0; filter: grayscale(1); }
.cn-map .toggle {
  position: absolute; right: var(--edge); top: 60px; z-index: 2; /* v2.8: moved right, was overlapping address */
  display: flex; align-items: center;
  background: #fff; border-radius: 26px; /* v2.9: Figma — one white container pill, active label gets black pill */
  box-shadow: 0 2px 12px rgba(0,0,0,.18);
  padding: 3px; /* v2.9: tighter container */
}
.cn-map .toggle button {
  display: flex; align-items: center; justify-content: center;
  height: 46px; font-weight: 600; font-size: 16px;
  font-family: var(--font);
  border: 0; cursor: pointer; padding: 0 28px;
  background: transparent; color: #020204;
  border-radius: 22px;
}
.cn-map .toggle .on { background: #030001; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.25); }

/* v2.9: Figma captcha — label + underline input + captcha image + icon refresh */
.cn-form .captcha-row {
  margin-top: 16px;
  display: flex; align-items: center; gap: 14px;
}
.cn-form .captcha-row input { flex: 1; width: auto; min-width: 0; height: 44px; border-bottom: 1px solid rgba(0,0,0,0.2); }
.cn-form .captcha-row .captcha-img {
  width: 132px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid rgba(0,0,0,.25);
}
.cn-form .captcha-row .captcha-img svg { width: 100%; height: 100%; }
.cn-form .captcha-row .captcha-refresh {
  border: 0; background: none; cursor: pointer; padding: 6px;
  width: 34px; height: 34px; flex: none; margin-left: 2px;
}
.cn-form .captcha-row .captcha-refresh svg { width: 100%; height: 100%; }
.cn-form .captcha-msg { font-size: 14px; margin-top: 10px; color: #b00020; min-height: 17px; }

/* ============ COMPACT DESKTOP (768–1439px) ============ */
@media (min-width: 768px) and (max-width: 1439px) {
  .cn-hero { height: 620px; }
  .cn-hero__video { width: 100%; height: 100%; display: block; }
  .cn-hero__glass {
    left: var(--chrome-edge);
    width: min(1080px, calc(100% - (2 * var(--chrome-edge))));
    height: auto;
    min-height: 340px;
    padding: 112px clamp(48px, 6vw, 76px) 54px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(38px, 6vw, 72px);
    align-items: center;
  }
  .cn-hero__kicker { left: clamp(48px, 6vw, 76px); top: 48px; }
  .cn-hero__glass h1,
  .cn-hero__glass p { position: relative; left: auto; top: auto; width: auto; }
  .cn-hero__glass h1 { font-size: clamp(48px, 5.5vw, 72px); }
  .cn-hero__glass p { font-size: clamp(17px, 1.6vw, 20px); }

  .cn-contact {
    height: auto;
    min-height: 900px;
    padding: 96px var(--chrome-edge);
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(48px, 6vw, 80px);
    align-items: center;
  }
  .cn-info,
  .cn-form { position: relative; left: auto; right: auto; top: auto; width: auto; height: auto; transform: none; }
  .cn-info { min-height: 0; }
  .cn-form { padding: clamp(46px, 5vw, 68px); }
  .cn-form .captcha-row { gap: 10px; }
  .cn-form .captcha-row .captcha-img { width: clamp(108px, 11vw, 132px); }

  .cn-map { height: clamp(620px, 49vw, 702px); }
  .cn-map .toggle { right: var(--chrome-edge); }
}

@media (min-width: 768px) and (max-width: 999px) {
  .cn-contact { grid-template-columns: 1fr; gap: 72px; padding-top: 80px; padding-bottom: 80px; }
  .cn-info { width: min(620px, 100%); margin: 0 auto; text-align: center; }
  .cn-info .email-row, .site .row { justify-content: center; }
  .site .row p { max-width: 520px; }
  .cn-form { width: min(680px, 100%); margin: 0 auto; padding: 64px; }
}

@media (min-width: 768px) and (max-width: 1080px) {
  .cn-form .captcha-row {
    display: grid;
    grid-template-columns: 1fr 132px 40px 1fr;
    gap: 10px;
  }
  .cn-form .captcha-row input {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .cn-form .captcha-row .captcha-img {
    grid-column: 2;
    width: 132px;
  }
  .cn-form .captcha-row .captcha-refresh {
    grid-column: 3;
    width: 40px;
    height: 40px;
    margin-left: 0;
    align-self: center;
  }
}

@media (max-width: 767px) {
  html, body { width: 100%; overflow-x: hidden; }
  body { font-size: 16px; }
  .shell { width: 100vw; max-width: none; margin: 0; }


  .cn-hero { height: 429px; }
  .cn-hero__video { width: 100%; height: 332px; left: 0; right: auto; transform: none; object-fit: cover; }
  .cn-hero__glass { left: 0; bottom: 0; width: 100%; height: 189px; background: rgba(255,255,255,.88); }
  .cn-hero__kicker, .cn-hero__glass p { display: none; }
  .cn-hero__glass h1 { left: 20px; top: 60px; width: calc(100% - 40px); font-size: 32px; line-height: 1.21; text-align: center; }
  .cn-hero__glass h1 br { display: initial; }

  .cn-contact { height: 1408px; } /* v3.0: taller for captcha + 120px below the form, mirroring desktop */
  .cn-info { left: 20px; top: 60px; width: calc(100% - 40px); text-align: center; min-height: 0; display: block; } /* v3.0: stacked layout on mobile, no centering */
  .cn-info h1 { font-size: 30px; line-height: 1.21; }
  .cn-info .email-row { justify-content: center; margin-top: 60px; gap: 8px; }
  .cn-info hr { width: 100%; margin-top: 32px; }
  .site { margin-top: 32px; }
  .site h3 { font-size: 16px; }
  .site .row { justify-content: center; gap: 8px; margin-top: 20px; }
  .site .row p { max-width: 360px; line-height: 1.44; }
  .site .row > img { margin-top: 2px; }
  .cn-info hr + .site { margin-top: 32px; }
  .cn-form { left: 20px; right: auto; top: 628px; transform: none; width: calc(100% - 40px); height: auto; padding: 60px 20px; box-sizing: border-box; text-align: center; } /* v3.0: equal 60px top/bottom, no desktop centering transform */
  .cn-form .pair { gap: 20px; }
  .cn-form .field { margin-top: 40px; }
  .cn-form .field .pair input { flex: 1; width: auto; min-width: 0; text-align: center; } /* v2.9: 50/50 on mobile too */
  .cn-form input, .cn-form textarea { text-align: center; }
  .cn-form .btn { width: 100%; height: 52px; justify-content: center; }

  .cn-map { height: 600px; }
  .cn-map .toggle { right: 56px; top: 120px; } /* clear the map address card on mobile */
  .cn-map .toggle .on { padding: 0 22px; }
  .cn-map .toggle .off { padding: 0 22px; }
  .cn-form .captcha-row {
    display: grid;
    grid-template-columns: 1fr 132px 40px 1fr;
    justify-content: stretch;
    gap: 10px;
  }
  .cn-form .captcha-row input {
    grid-column: 1 / -1;
    width: 100%;
    min-width: 0;
  }
  .cn-form .captcha-row .captcha-img {
    grid-column: 2;
    width: 132px;
  }
  .cn-form .captcha-row .captcha-refresh {
    grid-column: 3;
    width: 40px;
    height: 40px;
    margin-left: 0;
    align-self: center;
  }

  /* V4 mobile: contact information and form use normal document flow. */
  .cn-contact {
    height: auto;
    min-height: 0;
    padding: 60px 20px;
    display: flex;
    flex-direction: column;
    gap: 60px;
  }
  .cn-info {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    min-height: 0;
  }
  .cn-form {
    position: relative;
    left: auto;
    right: auto;
    top: auto;
    transform: none;
    width: 100%;
    height: auto;
    padding: 60px 20px;
  }
  .cn-map .toggle {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    max-width: calc(100% - 32px);
  }
  .cn-map .toggle button { padding-left: clamp(14px, 5vw, 22px); padding-right: clamp(14px, 5vw, 22px); }

}