/* Crew Contact Us — Figma node 29:1971. All rules scoped to .crew-contact-page. */
.crew-contact-page {
	font-family: 'Almarai', Arial, Helvetica, sans-serif;
	color: #656263;
	background: #fff;
	overflow-x: hidden;
	padding-top: 64px;
}
.crew-contact-page *,
.crew-contact-page *::before,
.crew-contact-page *::after { box-sizing: border-box; }
.crew-contact-page h1,
.crew-contact-page h2,
.crew-contact-page h3,
.crew-contact-page p { padding: 0; }

.crew-contact-page .crew-contact-container {
	width: min(1240px, calc(100% - 40px));
	margin: 0 auto;
}

/* ---- Title + intro + form (frame 1159 wide, right-aligned in the 1240 container) ---- */
.crew-contact-page .crew-contact-hero-inner {
	width: min(1159px, 100%);
	margin-inline: 0 auto;
}
.crew-contact-page .crew-contact-title {
	width: min(923px, 100%);
	margin: 0 0 24px;
	font-size: 40px;
	line-height: 64px;
	font-weight: 700;
	color: #030883;
	text-align: right;
}
.crew-contact-page .crew-contact-intro {
	width: min(923px, 100%);
	margin: 0 0 32px;
	font-size: 24px;
	line-height: 42px;
	font-weight: 400;
	color: #656263;
	text-align: right;
}

.crew-contact-page .crew-contact-form { width: 100%; margin: 0; }
.crew-contact-page .crew-contact-field { margin: 0 0 24px; }
.crew-contact-page .crew-contact-field--phone { margin-bottom: 0; }
.crew-contact-page .crew-contact-field--phone label { margin-bottom: 7.556px; }
.crew-contact-page .crew-contact-field--notes { margin: 48.944px 0 0; }
.crew-contact-page .crew-contact-field label {
	display: block;
	margin: 0 0 16px;
	font-size: 19.833px;
	line-height: 22px;
	font-weight: 700;
	letter-spacing: 0.1417px;
	color: #656263;
	text-align: right;
}
.crew-contact-page .crew-contact-input {
	display: block;
	width: 100%;
	height: 46.222px;
	margin: 0;
	padding: 15.111px;
	font-family: inherit;
	font-size: 14.167px;
	line-height: 16px;
	font-weight: 400;
	letter-spacing: 0.2361px;
	color: #656263;
	background: #f0f0f0;
	border: 0;
	border-radius: 100px;
	box-shadow: none;
	text-align: right;
	transition: box-shadow .2s, background-color .2s;
}
.crew-contact-page .crew-contact-input::placeholder { color: #656263; opacity: .6; }
.crew-contact-page .crew-contact-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px #030883;
}
.crew-contact-page .crew-contact-ltr { direction: ltr; text-align: right; }
.crew-contact-page .crew-contact-ltr::placeholder { direction: rtl; }
.crew-contact-page .crew-contact-textarea {
	height: 206px;
	border-radius: 20px;
	resize: vertical;
}
.crew-contact-page .crew-contact-input[aria-invalid="true"] { box-shadow: 0 0 0 2px #d92d20; }
.crew-contact-page .crew-contact-error {
	margin: 8px 15px 0;
	font-size: 14px;
	line-height: 1.5;
	color: #d92d20;
	text-align: right;
}
.crew-contact-page .crew-contact-error[hidden] { display: none; }

.crew-contact-page .crew-contact-actions { display: flex; justify-content: center; margin-top: 32px; }
.crew-contact-page .crew-contact-submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 277.667px;
	max-width: 100%;
	height: 47.222px;
	margin: 0;
	padding: 9.444px 30.222px;
	font-family: inherit;
	font-size: 16.056px;
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: 0;
	color: #fff;
	background: #030883;
	border: 0.944px solid #fff;
	border-radius: 100px;
	box-shadow: none;
	text-transform: none;
	cursor: pointer;
	transition: background-color .2s;
}
.crew-contact-page .crew-contact-submit:hover { background: #3e509e; }
.crew-contact-page .crew-contact-submit:focus-visible { outline: 3px solid #3e509e; outline-offset: 3px; }

/* ---- Why Crew (1240 container) ---- */
.crew-contact-page .crew-contact-why { padding: 64px 0 64px; }
.crew-contact-page .crew-contact-why-head {
	width: min(833px, 100%);
	margin: 0 auto 32px;
	text-align: center;
}
.crew-contact-page .crew-contact-why-title {
	margin: 0 0 16px;
	font-size: 40px;
	line-height: 45px;
	font-weight: 700;
	letter-spacing: 0.25px;
	color: #030883;
}
.crew-contact-page .crew-contact-why-text {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	font-weight: 400;
	letter-spacing: 0.25px;
	color: #6b6e74;
}
.crew-contact-page .crew-contact-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
}
.crew-contact-page .crew-contact-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px;
	min-height: 290px;
	padding: 32px 16px;
	background: #f0f0f0;
	border-radius: 24px;
	text-align: center;
	font-family: 'Alexandria', 'Almarai', Arial, sans-serif;
	letter-spacing: 0.15px;
}
.crew-contact-page .crew-contact-card-icon { display: block; width: 108px; height: 108px; }
.crew-contact-page .crew-contact-card-text { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.crew-contact-page .crew-contact-card h3 {
	margin: 0;
	font-family: 'Alexandria', 'Almarai', Arial, sans-serif;
	font-size: 20px;
	line-height: 34px;
	font-weight: 700;
	color: #030883;
}
.crew-contact-page .crew-contact-card--delivery h3 { color: #3e509e; }
.crew-contact-page .crew-contact-card p {
	margin: 0;
	max-width: 100%;
	font-size: 16px;
	line-height: 1.8;
	font-weight: 400;
	color: #6b6e74;
}
/* text-box widths taken from Figma so the descriptions wrap onto two lines like the design */
.crew-contact-page .crew-contact-card--variety p  { width: 203px; }
.crew-contact-page .crew-contact-card--quality p  { width: 161px; }
.crew-contact-page .crew-contact-card--tracking p { width: 199px; }
.crew-contact-page .crew-contact-card--delivery p { width: 251px; }
.crew-contact-page .crew-contact-card--brands p   { width: 322px; }
.crew-contact-page .crew-contact-card--support p  { width: 211px; }

@media (max-width: 1024px) {
	.crew-contact-page .crew-contact-title { font-size: 32px; line-height: 52px; }
	.crew-contact-page .crew-contact-intro,
	.crew-contact-page .crew-contact-why-text { font-size: 20px; line-height: 32px; }
	.crew-contact-page .crew-contact-why-title { font-size: 32px; line-height: 40px; }
	.crew-contact-page .crew-contact-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
	.crew-contact-page { padding-top: 32px; }
	.crew-contact-page .crew-contact-title { font-size: 26px; line-height: 42px; margin-bottom: 16px; }
	.crew-contact-page .crew-contact-intro { font-size: 17px; line-height: 30px; margin-bottom: 24px; }
	.crew-contact-page .crew-contact-field label { font-size: 17px; line-height: 22px; }
	.crew-contact-page .crew-contact-field--notes { margin-top: 24px; }
	.crew-contact-page .crew-contact-why { padding: 40px 0; }
	.crew-contact-page .crew-contact-why-title { font-size: 26px; line-height: 36px; }
	.crew-contact-page .crew-contact-why-text { font-size: 17px; line-height: 28px; }
	.crew-contact-page .crew-contact-cards { grid-template-columns: 1fr; gap: 16px; }
	.crew-contact-page .crew-contact-card p { width: auto !important; max-width: 300px; }
}

/* WoodMart wraps page content in .wd-content-layout with 40px top/bottom padding; the Figma spacing is header -> 64px -> title and cards -> 64px -> footer. Scoped to this template only. */
.page-template-page-contact-us-php .wd-content-layout.content-layout-wrapper {
	padding-top: 0;
	padding-bottom: 0;
}

@media (max-width: 767px) {
	/* mobile gutters: WoodMart's content wrapper already adds its own side padding */
	.crew-contact-page .crew-contact-container { width: 100%; }
}

/* ---- Branches (id="branches") ---- */
.crew-contact-page .crew-contact-branches { padding: 64px 0 64px; scroll-margin-top: 40px; }
.crew-contact-page .crew-contact-branches-title {
	margin: 0 0 32px;
	font-size: 40px;
	line-height: 45px;
	font-weight: 700;
	letter-spacing: 0.25px;
	color: #030883;
	text-align: center;
}
.crew-contact-page .crew-contact-branch-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
}
.crew-contact-page .crew-contact-branch {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 32px 16px;
	min-height: 240px;
	background: #f0f0f0;
	border: 2px solid transparent;
	border-radius: 24px;
	text-align: center;
	font-family: 'Alexandria', 'Almarai', Arial, sans-serif;
	letter-spacing: 0.15px;
	transition: transform .2s, box-shadow .2s;
}
.crew-contact-page .crew-contact-branch:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(3, 8, 131, .12); }
.crew-contact-page .crew-contact-branch-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	margin-bottom: 8px;
	border-radius: 50%;
	background: #030883;
	color: #fff;
}
.crew-contact-page .crew-contact-branch-city { margin: 0; font-size: 22px; line-height: 34px; font-weight: 700; color: #030883; }
.crew-contact-page .crew-contact-branch-district { margin: 0; font-size: 17px; line-height: 1.7; font-weight: 700; color: #46464d; }
.crew-contact-page .crew-contact-branch-address { margin: 0; font-size: 16px; line-height: 1.8; color: #6b6e74; }
.crew-contact-page .crew-contact-branch.is-soon { background: #fff; border: 2px dashed #3e509e; }
.crew-contact-page .crew-contact-branch.is-soon:hover { transform: none; box-shadow: none; }
.crew-contact-page .crew-contact-branch.is-soon .crew-contact-branch-icon { background: #e4e6f4; color: #3e509e; }
.crew-contact-page .crew-contact-branch.is-soon .crew-contact-branch-city { color: #3e509e; }
.crew-contact-page .crew-contact-branch-badge {
	display: inline-block;
	margin-top: 4px;
	padding: 6px 20px;
	border-radius: 100px;
	background: #e4e6f4;
	font-size: 16px;
	line-height: 1.6;
	font-weight: 700;
	color: #030883;
}
@media (max-width: 1024px) {
	.crew-contact-page .crew-contact-branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.crew-contact-page .crew-contact-branches-title { font-size: 32px; line-height: 40px; }
}
@media (max-width: 767px) {
	.crew-contact-page .crew-contact-branches { padding: 40px 0; scroll-margin-top: 20px; }
	.crew-contact-page .crew-contact-branches-title { font-size: 26px; line-height: 36px; margin-bottom: 24px; }
	.crew-contact-page .crew-contact-branch-grid { grid-template-columns: 1fr; gap: 16px; }
	.crew-contact-page .crew-contact-branch { min-height: 0; padding: 24px 16px; }
}