.contact-cards__grid{

  display: grid;

  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

  gap: 28px;

}

.office-card{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius);

  padding: 32px 28px;

  display: flex; flex-direction: column;

  transition: all .3s var(--tr);

  position: relative; overflow: hidden;

}

.office-card::before{

  content:''; position: absolute;

  top: 0; left: 0; right: 0; height: 4px;

  background: linear-gradient(90deg, var(--c-primary), var(--c-accent));

  transform: scaleX(0); transform-origin: left;

  transition: transform .35s var(--tr);

}

.office-card:hover{

  transform: translateY(-6px);

  box-shadow: var(--shadow-lg);

  border-color: transparent;

}

.office-card:hover::before{ transform: scaleX(1); }


.office-card__head{

  display: flex; align-items: center; justify-content: space-between;

  margin-bottom: 18px;

}

.office-card__badge{

  display: inline-flex; align-items: center; gap: 6px;

  background: rgba(30,58,138,.1);

  color: var(--c-primary);

  font-size: .72rem; font-weight: 700;

  letter-spacing: .08em; text-transform: uppercase;

  padding: 5px 12px; border-radius: 999px;

}

.office-card__badge--branch{

  background: rgba(245,158,11,.15);

  color: var(--c-accent-dark);

}

.office-card__badge--helpline{

  background: rgba(16,185,129,.15);

  color: var(--c-success);

}

.office-card__icon{

  width: 56px; height: 56px;

  display: flex; align-items: center; justify-content: center;

  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));

  color: #fff;

  border-radius: 16px;

  font-size: 1.4rem;

  transition: transform .3s var(--tr);

}

.office-card--branch .office-card__icon{

  background: linear-gradient(135deg, var(--c-accent-dark), var(--c-accent));

  color: #1f1300;

}

.office-card--helpline .office-card__icon{

  background: linear-gradient(135deg, var(--c-success), #34d399);

}

.office-card:hover .office-card__icon{ transform: rotate(-6deg) scale(1.05); }


.office-card h3{

  font-family: var(--ff-display);

  font-size: 1.4rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 18px;

}


.office-card__list{

  flex: 1;

  margin-bottom: 22px;

}

.office-card__list li{

  display: flex; gap: 14px; align-items: flex-start;

  padding: 12px 0;

  border-top: 1px solid var(--c-border);

}

.office-card__list li:first-child{ border-top: 0; padding-top: 0; }

.office-card__list i{

  color: var(--c-accent);

  font-size: 1rem;

  width: 32px; height: 32px;

  background: rgba(245,158,11,.1);

  border-radius: 8px;

  display: flex; align-items: center; justify-content: center;

  flex-shrink: 0;

  margin-top: 2px;

}

.office-card__list strong{

  display: block; font-size: .72rem; font-weight: 600;

  color: var(--c-text-soft);

  letter-spacing: .08em; text-transform: uppercase;

  margin-bottom: 3px;

}

.office-card__list span{

  font-size: .92rem; color: var(--c-text);

  line-height: 1.5;

}

.office-card__list a{

  color: var(--c-text);

  transition: color .2s var(--tr);

}

.office-card__list a:hover{ color: var(--c-accent-dark); }


.office-card__cta{

  display: inline-flex; align-items: center; justify-content: center;

  gap: 8px;

  background: var(--c-bg-soft);

  color: var(--c-primary-dark);

  padding: 12px 20px;

  border-radius: 10px;

  font-size: .9rem; font-weight: 600;

  text-decoration: none;

  transition: all .25s var(--tr);

  border: 1px solid var(--c-border);

}

.office-card__cta:hover{

  background: var(--c-primary);

  color: #fff;

  border-color: var(--c-primary);

  transform: translateY(-2px);

  box-shadow: 0 8px 20px rgba(30,58,138,.2);

}

.office-card__cta--accent{

  background: var(--c-success);

  color: #fff;

  border-color: var(--c-success);

}

.office-card__cta--accent:hover{

  background: #047857;

  border-color: #047857;

  color: #fff;

}


/* ----- Contact form section ----- */

.contact-form-section__grid{

  display: grid; grid-template-columns: 1fr 1.3fr;

  gap: 56px; align-items: start;

}

.contact-form-section__intro p{

  color: var(--c-text-soft);

  font-size: 1rem;

  margin-bottom: 28px;

}

.contact-form-section__intro p strong{

  color: var(--c-primary-dark);

}


.contact-reasons{

  margin-bottom: 32px;

}

.contact-reasons li{

  display: flex; align-items: center; gap: 14px;

  padding: 12px 0;

  border-top: 1px solid var(--c-border);

}

.contact-reasons li:first-child{ border-top: 0; }

.contact-reasons i{

  width: 40px; height: 40px;

  display: flex; align-items: center; justify-content: center;

  background: linear-gradient(135deg, var(--c-primary), var(--c-primary-light));

  color: #fff;

  border-radius: 12px;

  font-size: 1rem;

  flex-shrink: 0;

}

.contact-reasons strong{

  display: block; font-size: .95rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 2px;

}

.contact-reasons span{ font-size: .85rem; color: var(--c-text-soft); }


.contact-socials h4{

  font-family: var(--ff-display);

  font-size: 1rem; font-weight: 700;

  color: var(--c-primary-dark);

  margin-bottom: 14px;

}

.contact-socials__list{ display: flex; gap: 10px; }

.contact-socials__list a{

  width: 42px; height: 42px;

  display: flex; align-items: center; justify-content: center;

  background: var(--c-bg-soft);

  color: var(--c-primary);

  border: 1px solid var(--c-border);

  border-radius: 50%;

  font-size: 1rem;

  transition: all .25s var(--tr);

}

.contact-socials__list a:hover{

  background: var(--c-accent);

  color: #1f1300;

  border-color: var(--c-accent);

  transform: translateY(-3px);

  box-shadow: 0 8px 18px rgba(245,158,11,.3);

}


@media (max-width: 900px){

  .contact-form-section__grid{ grid-template-columns: 1fr; gap: 40px; }

}


/* ----- Form card ----- */

.contact-form{

  background: #fff;

  border: 1px solid var(--c-border);

  border-radius: var(--radius-lg);

  padding: 36px 32px;

  box-shadow: var(--shadow);

}

.contact-form__row{

  display: grid; grid-template-columns: 1fr 1fr;

  gap: 18px;

}

.contact-form__group{ margin-bottom: 20px; }

.contact-form__group label{

  display: block;

  font-size: .85rem; font-weight: 600;

  color: var(--c-primary-dark);

  margin-bottom: 8px;

}

.req{ color: var(--c-danger); }


.contact-form__input{

  position: relative;

  display: flex; align-items: center;

  background: var(--c-bg-soft);

  border: 1.5px solid var(--c-border);

  border-radius: var(--radius-sm);

  transition: all .2s var(--tr);

}

.contact-form__input:focus-within{

  background: #fff;

  border-color: var(--c-accent);

  box-shadow: 0 0 0 4px rgba(245,158,11,.12);

}

.contact-form__input > i{

  position: absolute; left: 14px;

  color: var(--c-muted);

  font-size: .9rem;

  pointer-events: none;

  transition: color .2s var(--tr);

}

.contact-form__input:focus-within > i{ color: var(--c-accent-dark); }


.contact-form__input input,

.contact-form__input select,

.contact-form__input textarea{

  width: 100%;

  border: 0;

  background: transparent;

  padding: 13px 14px 13px 42px;

  font-family: var(--ff-body);

  font-size: .95rem;

  color: var(--c-text);

  outline: none;

}

.contact-form__input select{

  appearance: none;

  -webkit-appearance: none;

  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%2364748b' d='M6 8L0 0h12z'/></svg>");

  background-repeat: no-repeat;

  background-position: right 16px center;

  background-size: 10px;

  padding-right: 36px;

  cursor: pointer;

}

.contact-form__input textarea{

  resize: vertical;

  min-height: 120px;

  padding-top: 14px;

  line-height: 1.5;

}

.contact-form__input--textarea{

  align-items: flex-start;

}

.contact-form__input--textarea > i{

  top: 16px; transform: none;

}


.contact-form__error{

  display: block;

  font-size: .8rem; color: var(--c-danger);

  margin-top: 6px;

  min-height: 16px;

}


.contact-form__footer{

  display: flex; align-items: center; gap: 20px;

  flex-wrap: wrap;

  margin-top: 8px;

  padding-top: 20px;

  border-top: 1px solid var(--c-border);

}

.contact-form__check{

  display: flex; align-items: center; gap: 8px;

  font-size: .85rem; color: var(--c-text-soft);

  cursor: pointer;

}

.contact-form__check input{

  width: 18px; height: 18px;

  accent-color: var(--c-accent);

  cursor: pointer;

}

.contact-form__submit{

  margin-left: auto;

  min-width: 180px;

  justify-content: center;

}


.contact-form__notice{

  margin-top: 20px;

  padding: 14px 18px;

  border-radius: var(--radius-sm);

  font-size: .9rem;

  display: flex; align-items: center; gap: 10px;

}

.contact-form__notice--success{

  background: rgba(16,185,129,.1);

  color: #047857;

  border: 1px solid rgba(16,185,129,.3);

}

.contact-form__notice--error{

  background: rgba(239,68,68,.1);

  color: #b91c1c;

  border: 1px solid rgba(239,68,68,.3);

}

.contact-form__notice i{ font-size: 1.1rem; }


@media (max-width: 640px){

  .contact-form{ padding: 24px 20px; }

  .contact-form__row{ grid-template-columns: 1fr; gap: 0; }

  .contact-form__footer{ flex-direction: column; align-items: stretch; }

  .contact-form__submit{ margin-left: 0; width: 100%; }

}


/* ----- Map section ----- */

.contact-map{ padding-bottom: 96px; }

.contact-map__frame{

  position: relative;

  border-radius: var(--radius-lg);

  overflow: hidden;

  box-shadow: var(--shadow-lg);

  border: 4px solid #fff;

  margin: 0 24px;

  max-width: var(--container);

  margin-left: auto; margin-right: auto;

}

.contact-map__frame iframe{

  display: block;

  width: 100%; height: 450px;

}

@media (max-width: 640px){

  .contact-map__frame{ margin: 0 16px; }

  .contact-map__frame iframe{ height: 350px; }

}