/**
 * Contact Us page — sits on top of components.css / main.css.
 * Breakpoints mirror the shared set: 1024px (tablet) · 640px (mobile).
 */

/* ============================================================= *
 *  Hero
 * ============================================================= */
.ne-contact-hero {
	background: var(--ne-secondary-a10);
	padding-block: var(--ne-space-6xl);
}
.ne-contact-hero__inner {
	display: grid;
	grid-template-columns: 1.7fr 1fr;
	gap: var(--ne-space-3xl);
	align-items: center;
}
.ne-contact-hero__title { margin: 0 0 var(--ne-space-m); font-size: var(--ne-h1-size); line-height: 1.1; }
.ne-contact-hero__sub { margin: 0; color: var(--ne-neutral-800); max-width: 62ch; }

/* Contact info card (right of hero) */
.ne-contact-hero__card { border: 0; box-shadow: var(--ne-shadow-deep); gap: var(--ne-space-l); }
.ne-contact-card__hotline {
	display: flex; align-items: center; gap: var(--ne-space-s);
	padding-bottom: var(--ne-space-l);
	border-bottom: 1px solid var(--ne-neutral-200);
}
.ne-contact-card__hotline .ne-contact-card__icon { color: var(--ne-red-200); background: rgba(208, 4, 22, 0.08); }
.ne-contact-card__hotline-label { font-weight: 700; color: var(--ne-primary-500); font-size: var(--ne-h8-size); }
.ne-contact-card__rows { display: flex; flex-direction: column; gap: var(--ne-space-m); }
.ne-contact-card__row { display: flex; align-items: flex-start; gap: var(--ne-space-s); color: var(--ne-neutral-900); }
.ne-contact-card__row .ne-icon { width: 18px; height: 18px; color: var(--ne-secondary-400); margin-top: 2px; flex: 0 0 auto; }
.ne-contact-card__row a { color: var(--ne-primary-500); text-decoration: none; font-weight: 700; }
.ne-contact-card__row a:hover { color: var(--ne-primary-400); }
.ne-contact-card__label { display: block; font-size: var(--ne-b3-size); text-transform: uppercase; letter-spacing: var(--ne-h9-tracking); color: var(--ne-neutral-600); font-weight: 700; }
.ne-contact-card__langs { display: block; color: var(--ne-primary-500); font-weight: 600; }

/* Pull the enquiry form up so it overlaps the hero base slightly */
.ne-contact-enquiry { padding-top: var(--ne-space-4xl); }

/* ============================================================= *
 *  Locations — map + cards
 * ============================================================= */
.ne-contact-map {
	border-radius: 16px;
	overflow: hidden;
	margin-bottom: var(--ne-space-3xl);
	box-shadow: var(--ne-shadow-deep);
	background: var(--ne-neutral-200);
}
.ne-contact-map iframe,
.ne-contact-map img { display: block; width: 100%; height: 439px; border: 0; object-fit: cover; }

.ne-locactions { gap: var(--ne-space-xs); }
.ne-locactions .ne-btn { flex: 1 1 0; padding-inline: var(--ne-space-s); }

/* ============================================================= *
 *  FAQ
 * ============================================================= */
.ne-faq__heading { margin: 0 0 var(--ne-space-xl); font-size: var(--ne-h4-size); line-height: var(--ne-h4-line); color: var(--ne-primary-500); }

/* ============================================================= *
 *  Enquiry form (CF7 .ne-form-grid inside .ne-formwrap) — shared block
 * ============================================================= */
.ne-enquiry__head { display: flex; align-items: center; gap: var(--ne-space-s); margin-bottom: var(--ne-space-l); }
.ne-enquiry__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px;
	background: var(--ne-secondary-a10); color: var(--ne-secondary-400);
}
.ne-enquiry__icon .ne-icon { width: 24px; height: 24px; }
.ne-enquiry__title { margin: 0; font-size: var(--ne-h6-size); line-height: var(--ne-h6-line); color: var(--ne-primary-500); }

.ne-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--ne-space-m) var(--ne-space-l); }
.ne-form-grid .ne-field { margin-bottom: 0; }
.ne-field-full { grid-column: 1 / -1; }
/* Stretch the CF7 <p> wrapper (and a bare input) to full width so the
   Submit button spans the form rather than shrinking to its label. */
.ne-form-actions { display: flex; flex-direction: column; }
.ne-form-actions p { margin: 0; }
.ne-form-actions input[type=submit] {
	width: 100%;
	font-family: var(--ne-font);
	font-size: var(--ne-b1-size);
	font-weight: 600;
	line-height: 1;
	padding: 15px var(--ne-space-xl);
	border-radius: 999px;
	/* Full-width primary BLUE per design + the 2026-07-10 button-colour decision. */
	border: 2px solid var(--ne-secondary-300);
	background: var(--ne-secondary-300);
	color: var(--ne-neutral-100);
	cursor: pointer;
	transition: background .18s ease, border-color .18s ease;
}
.ne-form-actions input[type=submit]:hover { background: var(--ne-secondary-400); border-color: var(--ne-secondary-400); }
.wpcf7 form .wpcf7-response-output {
	margin: var(--ne-space-m) 0 0;
	border-radius: 10px;
	padding: var(--ne-space-s) var(--ne-space-m);
	font-size: var(--ne-b2-size);
}
.wpcf7-not-valid-tip { color: var(--ne-red-200); font-size: var(--ne-b3-size); margin-top: var(--ne-space-2xs); }
.wpcf7 .wpcf7-spinner { margin: 0 0 0 var(--ne-space-s); }

/* ============================================================= *
 *  Why Choose New Era — shared block
 * ============================================================= */
.ne-whychoose__head { text-align: center; max-width: 720px; margin: 0 auto var(--ne-space-3xl); }
.ne-whychoose__title { margin: 0 0 var(--ne-space-s); font-size: var(--ne-h4-size); line-height: var(--ne-h4-line); color: var(--ne-primary-500); }
.ne-whychoose__sub { margin: 0; color: var(--ne-neutral-800); }
.ne-whychoose__card {
	background: var(--ne-tertiary-a10);
	border-radius: 18px;
	padding: var(--ne-space-l);
	display: flex; flex-direction: column; gap: var(--ne-space-s);
}
.ne-whychoose__icon {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 14px;
	background: var(--ne-neutral-100); color: var(--ne-tertiary-500);
}
.ne-whychoose__icon .ne-icon { width: 24px; height: 24px; }
.ne-whychoose__icon img { width: 28px; height: 28px; object-fit: contain; }
.ne-whychoose__card-title { margin: 0; font-size: var(--ne-h8-size); color: var(--ne-primary-400); font-weight: 700; }
.ne-whychoose__card-body { margin: 0; color: var(--ne-neutral-800); font-size: var(--ne-b3-size); line-height: var(--ne-b3-line); }

/* ============================================================= *
 *  Testimonials — shared block
 * ============================================================= */
.ne-testimonial {
	display: flex; flex-direction: column; gap: var(--ne-space-m);
	background: var(--ne-neutral-100);
	border: 1px solid var(--ne-neutral-200);
	border-radius: 20px;
	padding: var(--ne-space-2xl);
	height: 100%;
}
.ne-testimonial__mark {
	display: inline-flex; align-items: center; justify-content: center;
	width: 48px; height: 48px; border-radius: 12px;
	background: var(--ne-primary-a10); color: var(--ne-primary-400);
}
.ne-testimonial__mark .ne-icon { width: 26px; height: 26px; }
.ne-testimonial__quote { margin: 0; font-size: var(--ne-h7-size); line-height: var(--ne-h7-line); color: var(--ne-neutral-900); font-weight: 400; }
.ne-testimonial__foot { display: flex; align-items: center; gap: var(--ne-space-s); margin-top: auto; }
.ne-testimonial__avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.ne-testimonial__meta { display: flex; flex-direction: column; }
.ne-testimonial__name { font-weight: 700; color: var(--ne-primary-500); }
.ne-testimonial__role { font-size: var(--ne-b2-size); color: var(--ne-neutral-700); }

/* ============================================================= *
 *  Responsive
 * ============================================================= */
@media (max-width: 1024px) {
	.ne-contact-hero__inner { grid-template-columns: 1fr; gap: var(--ne-space-2xl); }
}
@media (max-width: 640px) {
	.ne-form-grid { grid-template-columns: 1fr; }
	.ne-contact-map iframe, .ne-contact-map img { height: 300px; }
	.ne-locactions { flex-direction: column; align-items: stretch; }
}