/* Dedicated contact page styles. Shared site styles remain in styles.css. */
.contact-page { background: #fff; }
.contact-main { overflow: hidden; color: #536579; }
.contact-hero {
  position: relative;
  min-height: 360px;
  display: flex;
  align-items: center;
  padding: 76px 0 84px;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 24%, rgba(255,255,255,.9) 0 3px, transparent 4px),
    linear-gradient(135deg, #eef8f7 0%, #f8fbfb 48%, #edf6f7 100%);
}
.contact-hero::before,
.contact-hero::after {
  content: "";
  position: absolute;
  border: 1px solid rgba(15,130,126,.13);
  border-radius: 50%;
}
.contact-hero::before { width: 420px; height: 420px; left: -260px; top: -210px; }
.contact-hero::after { width: 520px; height: 520px; right: -310px; bottom: -355px; }
.contact-hero-orb { position: absolute; border-radius: 50%; filter: blur(1px); pointer-events: none; }
.contact-hero-orb.one { width: 150px; height: 150px; left: 7%; bottom: -74px; background: rgba(33,155,147,.08); }
.contact-hero-orb.two { width: 210px; height: 210px; right: 8%; top: -122px; background: rgba(224,166,63,.09); }
.contact-hero-inner { position: relative; z-index: 2; max-width: 850px; text-align: center; }
.contact-breadcrumb { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 20px; color: #8a98a8; font-size: 11px; }
.contact-breadcrumb a:hover { color: var(--teal); }
.contact-hero .section-pill { margin-bottom: 16px; }
.contact-hero h1 {
  max-width: 760px;
  margin: 0 auto 17px;
  color: #2e4359;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: clamp(43px, 5.2vw, 67px);
  font-weight: 400;
  line-height: 1.05;
}
.contact-hero h1 em { color: var(--teal); font-style: italic; }
.contact-hero p { max-width: 680px; margin: 0 auto; color: #68798c; font-size: 14px; line-height: 1.78; }

.contact-info-strip { position: relative; z-index: 4; margin-top: -39px; }
.contact-info-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; }
.contact-info-card {
  min-height: 116px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 19px 18px;
  border: 1px solid #e2e9ec;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(35,63,75,.08);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.contact-info-card:hover { transform: translateY(-4px); border-color: rgba(15,130,126,.38); box-shadow: 0 18px 44px rgba(35,63,75,.12); }
.contact-info-card > span { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--teal); background: #eaf6f5; font-size: 22px; }
.contact-info-card.whatsapp > span { color: #fff; background: #29a765; }
.contact-info-card small, .contact-info-card strong, .contact-info-card em { display: block; }
.contact-info-card small { margin-bottom: 3px; color: #8b98a7; font-size: 9px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.contact-info-card strong { color: #33485e; font-size: 11.5px; line-height: 1.45; overflow-wrap: anywhere; }
.contact-info-card em { margin-top: 4px; color: var(--teal); font-size: 9.5px; font-style: normal; }

.contact-content-section { padding: 84px 0 88px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr); align-items: start; gap: 62px; }
.contact-details { padding-top: 5px; }
.contact-details h2,
.contact-form-heading h2,
.contact-map-heading h2,
.contact-quick-inner h2 {
  margin: 13px 0 12px;
  color: #30465d;
  font-family: "DM Serif Display", Georgia, serif;
  font-size: 37px;
  font-weight: 400;
  line-height: 1.15;
}
.contact-intro { max-width: 510px; margin: 0 0 27px; color: #708094; font-size: 12.5px; line-height: 1.8; }
.contact-detail-list { display: grid; gap: 12px; }
.contact-detail-list > div { display: flex; gap: 14px; padding: 17px 18px; border: 1px solid #e4eaed; border-radius: 11px; background: #fff; }
.contact-detail-list > div > span { width: 41px; height: 41px; flex: 0 0 41px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: var(--teal); background: #eaf6f5; font-size: 19px; }
.contact-detail-list small, .contact-detail-list strong { display: block; }
.contact-detail-list small { color: #8c98a7; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.contact-detail-list strong { margin-top: 3px; color: #354b61; font-size: 12px; line-height: 1.5; }
.contact-detail-list a { display: inline-flex; align-items: center; gap: 4px; margin-top: 7px; color: var(--teal); font-size: 10px; font-weight: 600; }
.contact-hours { margin-top: 17px; padding: 20px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, #0c7e7b, #0b6569); box-shadow: 0 14px 34px rgba(11,104,104,.18); }
.contact-hours-head { display: flex; align-items: center; gap: 12px; }
.contact-hours-head > span { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 9px; color: #0d7875; background: #fff; font-size: 19px; }
.contact-hours-head small, .contact-hours-head strong { display: block; }
.contact-hours-head small { color: rgba(255,255,255,.68); font-size: 8.5px; text-transform: uppercase; letter-spacing: .08em; }
.contact-hours-head strong { margin-top: 2px; font-size: 13px; }
.contact-hours ul { display: grid; gap: 8px; padding: 15px 0 0; margin: 15px 0 0; border-top: 1px solid rgba(255,255,255,.17); list-style: none; }
.contact-hours li { display: flex; justify-content: space-between; gap: 20px; color: rgba(255,255,255,.84); font-size: 10.5px; }
.contact-hours li b { color: #fff; font-weight: 600; }

.contact-form-card { padding: 31px 32px 27px; border: 1px solid #e0e8eb; border-radius: 16px; background: #fff; box-shadow: 0 20px 60px rgba(39,63,74,.09); }
.contact-form-heading { display: flex; align-items: center; gap: 13px; }
.contact-form-heading > span { width: 48px; height: 48px; flex: 0 0 48px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: var(--teal); background: #eaf6f5; font-size: 22px; }
.contact-form-heading small { display: block; color: var(--teal); font-size: 9px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.contact-form-heading h2 { margin: 3px 0 0; font-size: 29px; }
.contact-form-card > p { margin: 13px 0 22px; color: #778598; font-size: 11.5px; line-height: 1.7; }
.contact-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 15px; }
.contact-form label > span { display: block; margin-bottom: 7px; color: #4e6277; font-size: 10px; font-weight: 600; }
.contact-form label > div { position: relative; }
.contact-form label > div > i { position: absolute; left: 13px; top: 50%; z-index: 2; color: #9aa6b2; font-size: 15px; transform: translateY(-50%); pointer-events: none; }
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  border: 1px solid #dfe6ea;
  border-radius: 8px;
  outline: none;
  color: #40566d;
  background: #fbfcfc;
  font-family: Poppins, sans-serif;
  font-size: 11px;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.contact-form input,
.contact-form select { height: 44px; padding: 0 12px 0 39px; }
.contact-form select { appearance: none; }
.contact-form textarea { min-height: 122px; padding: 13px 15px 13px 40px; resize: vertical; line-height: 1.6; }
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus { border-color: rgba(15,130,126,.62); background: #fff; box-shadow: 0 0 0 3px rgba(15,130,126,.08); }
.contact-message { position: relative; display: block; margin-top: 15px; }
.contact-message > div > i { top: 16px !important; transform: none !important; }
.message-count { position: absolute; right: 10px; bottom: 8px; color: #9ba6b2; font-size: 8.5px; }
.contact-consent { display: flex !important; align-items: flex-start; gap: 9px; margin: 15px 0; cursor: pointer; }
.contact-consent input { width: 15px; height: 15px; flex: 0 0 15px; padding: 0; margin-top: 1px; accent-color: var(--teal); }
.contact-consent span { margin: 0 !important; color: #7c8998 !important; font-size: 9px !important; font-weight: 400 !important; line-height: 1.55; }
.contact-form button { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 9px; border: 0; border-radius: 8px; color: #fff !important; background: var(--teal); font-family: Poppins, sans-serif; font-size: 11px; font-weight: 700; cursor: pointer; box-shadow: 0 10px 24px rgba(15,130,126,.2); transition: transform .2s ease, background .2s ease; }
.contact-form button span,
.contact-form button i { color: #fff !important; }
.contact-form button:hover { transform: translateY(-2px); background: #0a7471; }
.contact-form-success { display: flex; align-items: center; gap: 8px; padding: 11px 13px; margin-top: 12px; border: 1px solid #bfe2d0; border-radius: 8px; color: #278259; background: #effaf4; font-size: 10px; }
.contact-form-success[hidden] { display: none; }
.contact-form-success i { font-size: 17px; }
.contact-form-note { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 13px; color: #98a3ae; font-size: 8.5px; }
.contact-form-note i { color: var(--teal); }

.contact-map-section { padding: 72px 0 82px; background: #f7f9fa; }
.contact-map-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 25px; }
.contact-map-heading h2 { margin-bottom: 6px; }
.contact-map-heading p { margin: 0; color: #7d8999; font-size: 11px; }
.contact-map-heading > a { min-height: 40px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 16px; border: 1px solid #cfe2e2; border-radius: 7px; color: var(--teal); background: #fff; font-size: 10px; font-weight: 600; }
.contact-map-frame { position: relative; min-height: 430px; overflow: hidden; border: 7px solid #fff; border-radius: 16px; box-shadow: 0 18px 50px rgba(44,65,76,.11); }
.contact-map-frame iframe { width: 100%; height: 430px; display: block; border: 0; filter: saturate(.75) contrast(.95); }
.contact-map-card { position: absolute; left: 24px; bottom: 24px; max-width: 330px; display: flex; gap: 12px; padding: 17px 18px; border-radius: 11px; background: rgba(255,255,255,.96); box-shadow: 0 12px 32px rgba(31,55,66,.19); backdrop-filter: blur(10px); }
.contact-map-card > span { width: 42px; height: 42px; flex: 0 0 42px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: var(--teal); font-size: 20px; }
.contact-map-card strong, .contact-map-card small { display: block; }
.contact-map-card strong { color: #30465d; font-size: 12px; }
.contact-map-card small { margin-top: 2px; color: var(--teal); font-size: 8.5px; }
.contact-map-card p { margin: 7px 0 0; color: #7a8796; font-size: 9.5px; }

.contact-quick-section { padding: 57px 0; color: #fff; background: linear-gradient(135deg, #0b7775, #07575f); }
.contact-quick-inner { display: flex; align-items: center; justify-content: space-between; gap: 36px; }
.contact-quick-inner .section-pill { color: #fff; background: rgba(255,255,255,.13); }
.contact-quick-inner h2 { margin: 11px 0 7px; color: #fff; font-size: 32px; }
.contact-quick-inner p { max-width: 620px; margin: 0; color: rgba(255,255,255,.78); font-size: 11.5px; line-height: 1.7; }
.contact-quick-inner > a { min-width: 295px; min-height: 69px; display: flex; align-items: center; gap: 12px; padding: 0 18px; border: 1px solid rgba(255,255,255,.24); border-radius: 11px; color: #0c6a62; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.12); }
.contact-quick-inner > a > i:first-child { width: 39px; height: 39px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; color: #fff; background: #28a864; font-size: 21px; }
.contact-quick-inner > a span { flex: 1; }
.contact-quick-inner > a small, .contact-quick-inner > a strong { display: block; }
.contact-quick-inner > a small { color: #8a98a7; font-size: 8.5px; }
.contact-quick-inner > a strong { margin-top: 2px; font-size: 12px; }
.contact-quick-inner > a > i:last-child { color: var(--teal); }

@media (max-width: 1080px) {
  .contact-info-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .contact-layout { grid-template-columns: 1fr; gap: 38px; }
  .contact-details { display: grid; grid-template-columns: 1fr 1fr; gap: 0 26px; }
  .contact-details > .section-pill, .contact-details > h2, .contact-details > .contact-intro { grid-column: 1 / -1; }
  .contact-hours { margin-top: 0; align-self: start; }
}
@media (max-width: 720px) {
  .contact-hero { min-height: 320px; padding: 58px 0 70px; }
  .contact-info-strip { margin-top: -27px; }
  .contact-info-grid { grid-template-columns: 1fr; gap: 10px; }
  .contact-info-card { min-height: 94px; }
  .contact-content-section { padding: 61px 0 68px; }
  .contact-details { display: block; }
  .contact-hours { margin-top: 16px; }
  .contact-form-card { padding: 25px 20px 22px; }
  .contact-form-grid { grid-template-columns: 1fr; }
  .contact-map-section { padding: 56px 0 64px; }
  .contact-map-heading { align-items: flex-start; flex-direction: column; }
  .contact-map-frame, .contact-map-frame iframe { min-height: 360px; height: 360px; }
  .contact-map-card { right: 13px; left: 13px; bottom: 13px; max-width: none; }
  .contact-quick-inner { align-items: stretch; flex-direction: column; }
  .contact-quick-inner > a { min-width: 0; }
}
@media (max-width: 480px) {
  .contact-hero h1 { font-size: 40px; }
  .contact-details h2, .contact-map-heading h2 { font-size: 32px; }
  .contact-form-heading h2 { font-size: 25px; }
  .contact-map-card { padding: 13px; }
}