/* Contact / CTA Section CSS
 * HPP HP — Figma file hTk2UtIZPusbWScukKNgMV
 * Node: 102:449 (sec-CTA)
 * White bg, "Contact" title, rounded card with two CTA columns, blue band behind
 */

/* =====================
 * Section container
 * White background, vertical flex, center-aligned
 * pt-96px, pb-24px (card overflows bottom by ~24px)
 * ===================== */

.contact {
  position: relative;
  width: 100%;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 96px;
  padding-bottom: 24px;
  overflow: visible;
}

/* =====================
 * Background blue band
 * Positioned behind the card area
 * #2557A7 base, 230px tall, image overlay with mix-blend-multiply
 * ===================== */

.contact__bg {
  position: absolute;
  left: 0;
  top: 261px;
  width: 100%;
  height: 230px;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.contact__bg-base {
  position: absolute;
  inset: 0;
  background-color: #2557a7;
}

.contact__bg-img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 108%;
  height: 450%;
  object-fit: cover;
  mix-blend-mode: multiply;
}

/* =====================
 * "Contact" title
 * Cormorant Garamond Medium, 120px, #112B60
 * ===================== */

.contact__title {
  position: relative;
  z-index: 1;
  text-align: center;
  margin: 0 0 -22px;
}

.contact__title-en {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-style: normal;
  font-size: 120px;
  line-height: 1;
  letter-spacing: normal;
  color: #112b60;
  margin: 0;
}

/* =====================
 * CTA Card container
 * White bg with subtle gradient, 2px navy border, rounded-24px
 * Width 1080px, padding 80px vertical / 40px horizontal
 * Overlaps below the section by ~24px (mb: -24px in Figma)
 * ===================== */

.contact__card-wrapper {
  position: relative;
  z-index: 2;
  width: calc(100% - 48px);
  max-width: var(--layout-content-width); /* 1024px */
  border: 2px solid #112b60;
  border-radius: 24px;
  background: linear-gradient(179.76deg, #ffffff 0.6%, #fcffff 99.4%);
  padding: 80px 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  margin-bottom: -24px;
}

/* =====================
 * Two-column CTA layout
 * Gap 144px between the two card columns
 * ===================== */

.contact__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 144px;
}

/* =====================
 * Individual CTA card column
 * ===================== */

.contact__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}

/* Card heading: Noto Sans JP Bold, 32px, #112B60 */
.contact__card-title {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.5;
  letter-spacing: 3.2px;
  color: #112b60;
  margin: 0;
  font-feature-settings: 'palt' 1;
}

/* Card description: Noto Sans JP Regular, 16px, #1E4D8B */
.contact__card-desc {
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: normal;
  color: #1e4d8b;
  margin: 0;
  text-align: center;
}

/* =====================
 * CTA buttons
 * 320×64px, border-radius 40px (pill)
 * ===================== */

.contact__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 320px;
  height: 64px;
  border-radius: 40px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.75;
  text-decoration: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.contact__btn:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}

/* Primary button: navy bg, white text */
.contact__btn--primary {
  background-color: #112b60;
  color: #f8fafc;
}

/* Secondary button: white bg, navy border, navy text */
.contact__btn--secondary {
  background-color: #ffffff;
  border: 2px solid #112b60;
  color: #112b60;
}

/* Button icon */
.contact__btn-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.contact__btn--primary .contact__btn-icon {
  fill: #f8fafc;
}

.contact__btn--secondary .contact__btn-icon {
  fill: #112b60;
}