/* ==========================================================================
   Contact page (elementor-278)
   Depends on main.css for tokens, header, footer, buttons and .final-cta.
   ========================================================================== */

/* ---------- Page hero ---------- */
.page-hero {
  position: relative;
  min-height: 50vh;
  display: flex;
  align-items: center;
  background-image: url('../img/con-hero.jpg');
  background-position: center;
  background-size: cover;
  border-radius: 15px;
}
/* Gradient sits at z-index 0 with the copy at 1 — a negative z-index here
   would paint behind .page-hero's own background-image and vanish. */
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background: linear-gradient(90deg, var(--e-global-color-secondary) 0%, rgba(255, 255, 255, 0) 78%);
}
.page-hero > * { position: relative; z-index: 1; }
.page-hero__title {
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 600;
  line-height: 1.2em;
  color: #fff;
  text-wrap: balance;
}

.page-shell {
  background: #fff;
  border-radius: var(--radius-hero);
  margin: 0 auto;
  width: 100%;
  max-width: 1400px;
  padding: 0 32px 8px;
}
@media (max-width: 767px) { .page-shell { padding: 0 16px 6px; } }

/* ---------- Section nav (5 items here, not 4) ---------- */
.subnav__list {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
}
.subnav__item + .subnav__item { border-left: 1px solid var(--e-global-color-header-border); }
.subnav__link {
  display: block;
  padding: 18px 10px;
  text-align: center;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: var(--e-global-color-primary);
}
.subnav__link:hover, .subnav__link:focus-visible { color: var(--e-global-color-red); }

/* ---------- "How can we help?" ---------- */
.help { padding: 3em 0 2em; text-align: center; }
.help__title {
  font-family: var(--font-head);
  font-size: 36px;
  font-weight: 600;
  color: var(--e-global-color-primary);
}
.help__lead { margin-top: 0.75rem; font-size: 16px; line-height: 1.8; color: var(--e-global-color-accent); }

/* ---------- Action cards ---------- */
.actions { padding-bottom: 4em; }
.actions__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.acard {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 34px 26px;
  background: #f6fafe;                 /* --e-global-color-0f01f5c */
  border: 1px solid var(--e-global-color-header-border);
  border-radius: var(--radius-card);
}
.acard img { width: 96px; height: 96px; object-fit: contain; }
.acard__title {
  margin-top: 18px;
  font-family: var(--font-head);
  font-size: 21px;
  font-weight: 600;
  color: var(--e-global-color-primary);
}
.acard__text { margin-top: 10px; font-size: 15px; line-height: 1.8; color: var(--e-global-color-accent); }
/* The source paints these buttons a deep navy (#181544). */
.acard__btn {
  margin-top: 22px;
  padding: 12px 26px;
  font-family: var(--font-ui);
  font-size: 15px;
  font-weight: 500;
  color: #fff;
  background: #181544;
  border-radius: var(--radius-card);
  transition: background 0.25s ease;
}
.acard__btn:hover, .acard__btn:focus-visible { background: var(--e-global-color-red); }

/* ---------- Enquiry form (68063ca) ---------- */
.enquiry {
  padding: 4.5em 0 5em;
  background: #032146;
}
.enquiry__title {
  max-width: 780px;
  margin: 0 auto 2.5em;
  text-align: center;
  font-family: var(--font-head);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.35em;
  color: #fff;
  text-wrap: balance;
}
.enquiry__form { max-width: 880px; margin-inline: auto; }
.field { margin-bottom: 18px; }
.field--half { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.enquiry__form input[type='text'],
.enquiry__form input[type='email'],
.enquiry__form input[type='tel'],
.enquiry__form select,
.enquiry__form textarea {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--font-body);
  font-size: 15px;
  color: #fff;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
}
.enquiry__form textarea { min-height: 140px; resize: vertical; }
.enquiry__form select option { color: #000; }
.enquiry__form ::placeholder { color: rgba(255, 255, 255, 0.55); }
.enquiry__form input:focus,
.enquiry__form select:focus,
.enquiry__form textarea:focus {
  outline: 2px solid #16a0e2;
  outline-offset: 1px;
  border-color: transparent;
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
  color: #fff;
  cursor: pointer;
}
.check input { margin-top: 5px; accent-color: var(--e-global-color-red); }
.check a { color: #fbb50e; text-decoration: underline; }
.enquiry__submit {
  width: 100%;
  margin-top: 6px;
  padding: 15px;
  font-family: var(--font-ui);
  font-size: 16px;
  font-weight: 500;
  color: #fff;
  background: #e30008;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.25s ease;
}
.enquiry__submit:hover { background: #c40006; }
.enquiry__msg {
  margin-top: 14px;
  padding: 12px 16px;
  font-size: 15px;
  border-radius: 6px;
  text-align: center;
}
.enquiry__msg[data-state='ok'] { background: rgba(27, 168, 106, 0.18); color: #b8f5d8; }
.enquiry__msg[data-state='err'] { background: rgba(227, 0, 8, 0.18); color: #ffc9c9; }

/* ---------- FAQ accordion ---------- */
.faq { padding: 4em 0 3em; background: var(--e-global-color-surface); }
.faq__group + .faq__group { margin-top: 3.5em; }
.faq__title {
  text-align: center;
  margin-bottom: 1.5em;
  font-family: var(--font-head);
  font-size: 32px;
  font-weight: 600;
  color: var(--e-global-color-primary);
}
.faq__item { border-bottom: 1px solid var(--e-global-color-border); }
.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 4px;
  text-align: left;
  font-family: var(--font-ui);
  font-size: 17px;
  font-weight: 500;
  color: #10365c;
  background: none;
  border: 0;
  cursor: pointer;
}
.faq__q:hover { color: var(--e-global-color-blue); }
.faq__q i { flex: 0 0 auto; transition: transform 0.25s ease; font-size: 18px; }
.faq__item.is-open .faq__q i { transform: rotate(180deg); }
.faq__a {
  display: none;
  padding: 0 4px 22px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--e-global-color-accent);
  text-wrap: pretty;
}
.faq__item.is-open .faq__a { display: block; }

/* ---------- Map ---------- */
.map { padding-bottom: 4em; }
.map__frame {
  width: 100%;
  height: 420px;
  border: 0;
  border-radius: var(--radius-card);
  display: block;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .actions__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 767px) {
  .page-hero { min-height: 35vh; }
  .page-hero__title { font-size: 32px; }
  .subnav__list { grid-template-columns: repeat(2, 1fr); }
  .subnav__item:nth-child(odd) { border-left: 0; }
  .subnav__item:nth-child(n + 3) { border-top: 1px solid var(--e-global-color-header-border); }
  .help__title, .enquiry__title, .faq__title { font-size: 26px; }
  .actions__grid { grid-template-columns: 1fr; }
  .field--half { grid-template-columns: 1fr; }
  .faq__q { font-size: 16px; padding: 18px 2px; }
  .map__frame { height: 300px; }
}