.ims-section {
	width: 100%;
	/* Twenty Twenty-Five injects its own block-gap margin-top (~19px)
	   between top-level blocks automatically. Since spacing between
	   sections should be controlled entirely by our own padding system,
	   this neutralizes that extra, uncontrolled margin rather than
	   letting it stack on top of our values. */
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Force genuine edge-to-edge width.
   Twenty Twenty-Five's "global padding" feature is supposed to let
   alignfull blocks escape the theme's root padding automatically, but in
   testing this section still measured 100px narrower than the viewport
   (50px padding surviving on each side) despite having the alignfull
   class. Rather than depend on that theme behavior working correctly,
   this forces true full-bleed directly. */
.ims-section.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Backgrounds - confirmed IMS palette */
.ims-section.bg-white {
	background: #ffffff;
}

.ims-section.bg-light {
	background: #f0f4f8;
}

.ims-section.bg-navy {
	background: #1a2a4a;
}

.ims-section.bg-gradient {
	background: linear-gradient(135deg, #2c5f8d 0%, #1a3a52 100%);
}

/* Vertical spacing */
.ims-section.spacing-none {
	padding-top: 0;
	padding-bottom: 0;
}

/* Each of these values is applied to BOTH the top and bottom of every
   section. When two sections stack (the normal case - almost every page
   is a vertical run of sections), the visible gap between them is the
   SUM of the first section's bottom padding and the second section's top
   padding, not just one of them. The original values (48/72/96px) were
   sized as if the block would be the ONLY spacing between sections,
   which produced a doubled, excessive gap (a "large" section next to
   another "large" section had ~192px of combined whitespace). Halved
   here so the combined stacked gap lands close to a normal, intentional
   spacing rather than compounding. */
.ims-section.spacing-small {
	padding-top: 32px;
	padding-bottom: 32px;
}

.ims-section.spacing-medium {
	padding-top: 48px;
	padding-bottom: 48px;
}

.ims-section.spacing-large {
	padding-top: 48px;
	padding-bottom: 48px;
}

.ims-section .ims-section__inner {
	width: 100%;
}

/* Space between stacked blocks inside a section (default "stack" layout) */
.ims-section.layout-stack .ims-section__inner > * + * {
	margin-top: 40px;
}

/* Split layout: first block (typically a heading) spans full width,
   everything after it sits side by side in two columns - used for
   contact info next to a contact form. */
.ims-section.layout-split .ims-section__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	align-items: start;
}

.ims-section.layout-split .ims-section__inner > *:first-child {
	grid-column: 1 / -1;
}

/* Plain even two-column layout - every direct child (usually exactly two)
   sits side by side, with no special first-child spanning. Used for a
   text+image style pairing where neither child is a "heading that spans
   everything". */
.ims-section.layout-columns .ims-section__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

@media (max-width: 900px) {
	.ims-section.layout-columns .ims-section__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 900px) {
	.ims-section.layout-split .ims-section__inner {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 600px) {
	.ims-section.spacing-large {
		padding-top: 40px;
		padding-bottom: 40px;
	}
	.ims-section.spacing-medium {
		padding-top: 32px;
		padding-bottom: 32px;
	}
}