/**
 * office.css — "Our Office" (page-templates/tpl-office.php).
 * Rails: heading bands 1300px · content 1120px · FAQ column 750px.
 * Type: bands Poppins 32 charcoal · content H2 Poppins 30 navy ·
 * H3 Poppins 24 navy · body Merriweather 16 charcoal · FAQ-Q Poppins 35.2 navy.
 */

/* shared 1120 content rail — content-box so the rail is a true 1120px at
   desktop (matching live's centered inner-wrap); the gutter only bites once
   the viewport drops below 1120 + gutter. */
.odx-office__wrap {
	box-sizing: content-box;
	max-width: 1120px;
	margin: 0 auto;
	padding: 0 var(--container-pad);
}

/* ── heading bands (section-167/154/965/977) ── */
.odx-office__band {
	background-color: var(--color-off-white);
}
.odx-office__band-inner {
	box-sizing: content-box;
	max-width: 1300px;
	margin: 0 auto;
	padding: 75px var(--container-pad);
}
.odx-office__band-title {
	margin: 0;
	font-family: var(--font-sans);
	font-size: 32px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-charcoal);
}
.odx-office__accent {
	color: var(--color-blue-light);
}

/* ── content headings ── */
.odx-office__h2 {
	margin: 0 0 20px;
	font-family: var(--font-sans);
	font-size: 30px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-navy);
}
.odx-office__h3 {
	margin: 0 0 25px;
	font-family: var(--font-sans);
	font-size: 24px;
	font-weight: 500;
	line-height: 1.6;
	color: var(--color-navy);
}

/* section-572/1620 subheads are the large 35.2px cut (section-15's stay 24px) */
.odx-office__prose-section .odx-office__h3 {
	font-size: 35.2px;
	line-height: 56.32px;
}

/* ── body prose ── */
.odx-office__intro-lede p,
.odx-office__block p {
	margin: 0 0 16px;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-charcoal);
}
.odx-office__intro-lede p:last-child,
.odx-office__block p:last-child {
	margin-bottom: 0;
}
.odx-office__intro-lede a,
.odx-office__block a {
	color: var(--color-blue);
}

/* ── intro (section-15): photo/lede 2-col + centered prose ── */
.odx-office__intro {
	padding: 0 0 75px;
}
.odx-office__intro-top {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
}
.odx-office__intro-photo img {
	display: block;
	width: 100%;
	height: auto;
}
/* live lede block carries 30px vertical padding (col height 506 vs 446 content) */
.odx-office__intro-lede {
	padding: 30px;
}
.odx-office__prose {
	display: flex;
	flex-direction: column;
	max-width: 896px;
	margin: 0 auto;
}
/* Oxygen flex-column groups: 30px leading above the first block, 35px between
   (live section-572/1620/15 all share this rhythm; no margin collapse). */
.odx-office__block {
	margin-top: 35px;
}
.odx-office__block:first-child {
	margin-top: 30px;
}
/* section-15's prose runs a tighter cut than 572/1620: 55px leading, 25 gaps */
.odx-office__intro .odx-office__block {
	margin-top: 25px;
}
.odx-office__intro .odx-office__block:first-child {
	margin-top: 55px;
}

/* ── prose sections (section-572/1620) ── */
.odx-office__prose-section {
	padding: 50px 0 75px;
}

/* ── FAQ (section-980): always-open Q&A, 750 column ── */
.odx-office__faq {
	padding: 30px 0 75px;
}
.odx-office__faq-inner {
	max-width: 896px;
	margin: 0 auto;
}
.odx-office__faq-list {
	margin: 0;
}
/* flex column so each answer's <p> margins stay put (no collapse through <dd>) */
.odx-office__faq-item {
	display: flex;
	flex-direction: column;
	max-width: 750px;
}
.odx-office__faq-q {
	margin: 0;
	padding: 15px 0;
	font-family: var(--font-sans);
	font-size: 35.2px;
	font-weight: 500;
	line-height: 56.32px;
	color: var(--color-navy);
}
.odx-office__faq-a p {
	margin: 16px 0;
	font-family: var(--font-serif);
	font-size: 16px;
	line-height: 1.6;
	color: var(--color-charcoal);
}

/* ── responsive ──
   Live ≤767 (768 is still desktop): sections go full-bleed with no container
   gutter; the photo runs edge-to-edge and text elements carry a 30px side
   inset. Mirror that instead of the desktop 1120 rail. */
@media (max-width: 767px) {
	.odx-office__wrap {
		max-width: none;
		padding: 0;
	}
	.odx-office__intro-top {
		grid-template-columns: 1fr;
	}
	.odx-office__prose {
		max-width: none;
		padding: 0 30px;
	}
	.odx-office__faq-inner {
		max-width: none;
		padding: 0 30px;
	}
	.odx-office__faq-item {
		max-width: none;
	}
}