body.contactPage .contactHero{
  padding:22px 0 10px;
}

body.contactPage .contactHeroBox{
  padding:24px;
}

body.contactPage .contactTitle{
  margin:10px 0 10px;
  font-weight:900;
  font-size: clamp(28px, 3.4vw, 42px);
  line-height:1.2;
}

body.contactPage .contactLayout{
  display:grid;
  grid-template-columns: 1.4fr .8fr;
  gap:16px;
}

body.contactPage .contactFormCard,
body.contactPage .contactInfoCard{
  padding:18px;
}

body.contactPage .contactSide{
  display:grid;
  gap:16px;
  align-content:start;
}

body.contactPage .contactForm{
  display:grid;
  gap:14px;
}

body.contactPage .formRow{
  display:grid;
  gap:8px;
}

body.contactPage .formRow label{
  font-weight:900;
}

body.contactPage .formRow label span{
  display:inline-block;
  margin-left:8px;
  padding:3px 8px;
  border-radius:999px;
  background: rgba(255,120,173,.18);
  border:1px solid rgba(58,47,42,.18);
  font-size:12px;
}

body.contactPage input,
body.contactPage select,
body.contactPage textarea{
  width:100%;
  padding:12px 14px;
  border-radius:16px;
  border:2px dashed rgba(58,47,42,.28);
  background: rgba(255,255,255,.78);
  font:inherit;
  color:inherit;
}

body.contactPage textarea{
  resize:vertical;
  min-height:180px;
}

body.contactPage input:focus,
body.contactPage select:focus,
body.contactPage textarea:focus{
  outline:none;
  border-color: rgba(103,183,255,.9);
  background:#fff;
}

body.contactPage .formNote{
  line-height:1.9;
  font-weight:700;
  opacity:.85;
  font-size:14px;
}

body.contactPage .formActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:4px;
}

body.contactPage .contactInfoCard h3{
  margin:0 0 12px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-family:"Yomogi", cursive;
}

body.contactPage .contactInfoCard p{
  margin:0;
  line-height:1.95;
  font-weight:700;
}

body.contactPage .contactTable{
  width:100%;
  border-collapse:collapse;
  font-weight:800;
}

body.contactPage .contactTable th,
body.contactPage .contactTable td{
  padding:12px 8px;
  text-align:left;
  vertical-align:top;
  border-bottom:2px dashed rgba(58,47,42,.18);
}

body.contactPage .contactTable th{
  width:110px;
  white-space:nowrap;
  font-weight:900;
}

body.contactPage .contactTable tr:last-child th,
body.contactPage .contactTable tr:last-child td{
  border-bottom:none;
}

@media (max-width: 900px){
  body.contactPage .contactLayout{
    grid-template-columns:1fr;
  }
}
body.contactPage .contactMap{
  margin-top:16px;
  border-radius:20px;
  overflow:hidden;
  border:3px solid rgba(58,47,42,.75);
  box-shadow: var(--shadow);
  background:
    radial-gradient(circle at 30% 30%, rgba(255,255,255,.85), transparent 55%),
    linear-gradient(135deg, rgba(255,210,77,.18), rgba(103,183,255,.14));
}

body.contactPage .contactMap iframe{
  display:block;
  width:100%;
  height:320px;
}