/* =========================================================
   CONTACT US
   Page-specific styles. Shared contact styles (.contact-section,
   .contact-grid, .contact-info, .timings, .map-embed,
   .enquiry-form) live in styles.css and are reused here.
   ========================================================= */


/* =========================================================
   01. LEAD — intro copy + quick detail cards
   ========================================================= */

.contact-lead__prose{
  max-width: 900px;
}

.contact-lead__prose p + p{
  margin-top: 14px;
}

.contact-cards{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;

  margin-top: 40px;
}

.contact-card{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 9px;

  padding: 24px 22px 26px;

  border: 1px solid var(--line);
  border-top: 3px solid var(--orange);
  border-radius: var(--r-sm);

  background: var(--cream);

  transition:
    transform .3s var(--ease),
    box-shadow .3s var(--ease);
}

.contact-card:hover{
  transform: translateY(-4px);
  box-shadow: var(--shadow-sm);
}

.contact-card__ico{
  display: grid;
  place-items: center;

  width: 42px;
  height: 42px;

  border-radius: 11px;

  background: #fff;
  color: var(--orange);
}

.contact-card__ico .icon{
  width: 20px;
  height: 20px;
}

.contact-card h5{
  margin: 4px 0 0;

  font-family: var(--head);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
}

.contact-card address{
  font-style: normal;
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}

.contact-card a{
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--royal);

  overflow-wrap: anywhere;
}

.contact-card a:hover{
  color: var(--orange);
}

.contact-card__value{
  font-family: var(--head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
}

.contact-card__hint{
  font-size: 12px;
  line-height: 1.5;
  color: var(--ink-2);
}

.enquiry-form--zoho{padding:26px 20px 16px;}
.enquiry-form--zoho::before{display:none;}
.enquiry-form--zoho .zoho-form__iframe{display:block;width:100%;min-height:850px;border:0;border-radius:12px;background:#fff;}


/* =========================================================
   02. DETAILS COLUMN — note under the timings table
   ========================================================= */

.contact-note{
  margin: 18px 0 0;

  font-size: 13.5px;
  line-height: 1.62;
  color: var(--ink-2);
}


/* =========================================================
   03. WAYS TO REACH US
   ========================================================= */

.contact-ways{
  background: var(--paper);
}

.contact-ways__lead{
  max-width: 820px;
  margin: 14px 0 0;
}

.contact-ways__list{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;

  margin: 28px 0 0;
  padding: 0;

  list-style: none;
}

.contact-ways__list li{
  display: flex;
  align-items: center;
  gap: 12px;

  padding: 15px 18px;

  border: 1px solid var(--line);
  border-radius: var(--r-sm);

  background: #fff;

  font-size: 14px;
  color: var(--ink);
}

.contact-ways__list .icon{
  width: 18px;
  height: 18px;
  flex: none;

  color: var(--orange);
}

.contact-ways__closing{
  max-width: 900px;
  margin: 26px 0 0;
}

.contact-ways__closing a{
  font-weight: 700;
  color: var(--royal);

  border-bottom: 1px solid rgba(28,58,138,.3);
}

.contact-ways__closing a:hover{
  color: var(--orange);
  border-bottom-color: var(--orange);
}


/* =========================================================
   04. RESPONSIVE
   ========================================================= */

@media (max-width: 1024px){
  .contact-cards{
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px){
  .contact-ways__list{
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px){
  .contact-cards{
    grid-template-columns: 1fr;
  }
}

@media (max-width:768px){
  .enquiry-form--zoho .zoho-form__iframe{min-height:1000px;}
}