/* ==========================================================================
   Canopus — CONTACT US page
   Page-only styles on top of style.css. Replica of the Figma "Contact us"
   frame: a two-column "Get in Touch" block (info + live map card).
   ========================================================================== */

.touch {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 8rem);
  overflow: hidden;
}
.touch__inner {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 6rem);
}

/* ------------------------------------------------------------ info column */
.touch__title { line-height: 1.08; display: grid; gap: 0.12em; margin-bottom: clamp(1.75rem, 3.5vw, 3.5rem); }

.touch__list { display: grid; gap: clamp(1.5rem, 3vw, 2.75rem); }
.touch__item {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: clamp(1rem, 1.6vw, 1.6rem);
}
.touch__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 4vw, 4rem);
  height: clamp(3rem, 4vw, 4rem);
  border-radius: 26%;                 /* soft rounded square (squircle) */
  background: #efeadb;                /* light warm beige, per the design */
  flex: none;
}
.touch__icon1 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(3rem, 4vw, 4rem);
  height: clamp(3rem, 4vw, 4rem);
  border-radius: 26%;                 /* soft rounded square (squircle) */
  background: #efeadb;                /* light warm beige, per the design */
  flex: none;
}
.touch__icon img { width: 35%; height: auto; }
.touch__icon1 img { width: 20%; height: auto; }

.touch__text h3 {
  font-family: var(--font-display);
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 0.35em;
}
.touch__text p { color: var(--ink-soft); line-height: 1.6; }
.touch__text a { color: inherit; text-decoration: none; transition: color 0.3s var(--ease); }
.touch__text a:hover { color: var(--gold-dark); }

/* ------------------------------------------------------------- map column */
.touch__map {
  position: relative;
  margin: 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 30px 70px -34px rgba(38, 38, 38, 0.45);
  aspect-ratio: 16 / 11;
}
.touch__map iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  filter: grayscale(0.25);
}

/* floating address card over the lower-left of the map */
.touch__card {
  position: absolute;
  left: clamp(1rem, 2.2vw, 2.25rem);
  bottom: clamp(1rem, 2.2vw, 2.25rem);
  right: clamp(1rem, 2.2vw, 2.25rem);
  max-width: 24rem;
  padding: clamp(1.1rem, 1.8vw, 1.6rem) clamp(1.2rem, 2vw, 1.8rem);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(6px);
  border-radius: 10px;
  box-shadow: 0 18px 40px -22px rgba(38, 38, 38, 0.5);
}
.touch__card-name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h3);
  margin-bottom: 0.3em;
}
.touch__card-addr {
  color: var(--ink-soft);
  font-size: var(--fs-body);
  line-height: 1.5;
  margin-bottom: clamp(0.9rem, 1.4vw, 1.25rem);
}
.touch__card .btn--gold { 
  border-radius: 200px;
  padding-block: clamp(0.6rem, 0.8vw, 0.85rem); }

/* --------------------------------------------------------- motion prep */
.js .touch .anim { opacity: 0; }

/* --------------------------------------------------------- responsive */
@media (max-width: 860px) {
  .touch__inner { grid-template-columns: 1fr; }
  .touch__map { aspect-ratio: 4 / 5; max-height: 34rem; }
  .touch__card { max-width: none; }
}