.sra-dip {
	--sra-dip-teal: #386d72;
	--sra-dip-teal-dark: #244f54;
	--sra-dip-mist: #eef3f2;
	--sra-dip-line: #cbd6d4;
	--sra-dip-green: #2f7d32;
	--sra-dip-green-soft: #e8f4e8;
	--sra-dip-red: #b42318;
	--sra-dip-red-soft: #fdecea;
	--sra-dip-amber: #8a5a00;
	--sra-dip-amber-soft: #fff3cd;
	--sra-dip-orange: #c4511e;
	color: var(--color-content-text, #273238);
}

.sra-dip .l-section-h {
	max-width: 1320px;
}

.sra-dip-hero {
	background: linear-gradient(120deg, var(--sra-dip-teal-dark), var(--sra-dip-teal));
	color: #fff;
	padding-block: clamp(2.5rem, 6vw, 5.5rem);
}

.sra-dip-hero h1 {
	max-width: 16ch;
	margin: 0;
	color: inherit;
	font-size: clamp(2.25rem, 6vw, 4.75rem);
	line-height: 1.02;
}

.sra-dip-prototype-label {
	display: inline-block;
	margin: 0 0 1.5rem;
	padding: .4rem .7rem;
	border: 1px solid rgba(255,255,255,.55);
	border-radius: 999px;
	background: rgba(255,255,255,.12);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sra-dip-tables,
.sra-dip-story,
.sra-dip-accordion,
.sra-dip-related {
	padding-block: clamp(2.75rem, 6vw, 5rem);
}

.sra-dip-tables h2,
.sra-dip-story h2,
.sra-dip-accordion h2,
.sra-dip-related h2 {
	color: var(--sra-dip-teal-dark);
}

.sra-dip-table-block + .sra-dip-table-block {
	margin-top: 3rem;
}

.sra-dip-table-scroll {
	overflow-x: auto;
	border: 1px solid var(--sra-dip-line);
	border-radius: .65rem;
	background: #fff;
	box-shadow: 0 12px 35px rgba(20,60,64,.08);
	-webkit-overflow-scrolling: touch;
}

.sra-dip-table-scroll:focus-visible {
	outline: 3px solid var(--sra-dip-orange);
	outline-offset: 4px;
}

.sra-dip-table {
	width: 100%;
	min-width: 900px;
	margin: 0;
	border-collapse: collapse;
	table-layout: fixed;
}

.sra-dip-table caption {
	padding: 1rem 1.2rem;
	background: var(--sra-dip-teal-dark);
	color: #fff;
	font-size: 1.2rem;
	font-weight: 700;
	text-align: left;
}

.sra-dip-table th,
.sra-dip-table td {
	padding: 1rem;
	border: 1px solid var(--sra-dip-line);
	vertical-align: top;
	text-align: left;
	line-height: 1.5;
	overflow-wrap: anywhere;
}

.sra-dip-table thead th {
	background: var(--sra-dip-mist);
	color: var(--sra-dip-teal-dark);
	font-size: .84rem;
	letter-spacing: .035em;
	text-transform: uppercase;
}

.sra-dip-table tbody tr:nth-child(odd) > * {
	background: #f8faf9;
}

.sra-dip-table tbody th {
	font-weight: 700;
}

.sra-dip-col-project { width: 22%; }
.sra-dip-col-activity { width: 38%; }
.sra-dip-col-status { width: 13%; }
.sra-dip-col-next { width: 27%; }

.sra-dip-status-cell {
	text-align: center !important;
}

.sra-dip-status {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .42rem .58rem;
	border: 1px solid currentColor;
	border-radius: 999px;
	font-size: .8rem;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

.sra-dip-status--green {
	background: var(--sra-dip-green-soft);
	color: var(--sra-dip-green);
}

.sra-dip-status--red {
	background: var(--sra-dip-red-soft);
	color: var(--sra-dip-red);
}

.sra-dip-status--amber {
	background: var(--sra-dip-amber-soft);
	color: var(--sra-dip-amber);
}

.sra-dip-status__dot {
	width: .7rem;
	height: .7rem;
	flex: 0 0 .7rem;
	border-radius: 50%;
	background: currentColor;
}

.sra-dip-placeholder-badge {
	display: block;
	width: fit-content;
	margin-bottom: .55rem;
	padding: .25rem .45rem;
	border-radius: .25rem;
	background: #fff2cc;
	color: #5b4300;
	font-size: .72rem;
	font-weight: 700;
	line-height: 1.25;
}

.sra-dip-story {
	background: var(--sra-dip-mist);
}

.sra-dip-story-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(280px, .85fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: center;
}

.sra-dip-story-photo img,
.sra-dip-media-placeholder {
	display: block;
	width: 100%;
	min-height: 300px;
	border-radius: .75rem;
	object-fit: cover;
}

.sra-dip-media-placeholder {
	display: grid;
	place-items: center;
	padding: 2rem;
	border: 2px dashed #8aa4a2;
	background: rgba(255,255,255,.65);
	color: var(--sra-dip-teal-dark);
	font-weight: 700;
	text-align: center;
}

.sra-dip-empty {
	padding: 1rem;
	border-left: 4px solid #d9a100;
	background: #fff8dc;
}

.sra-dip-accordion details {
	border-top: 1px solid var(--sra-dip-line);
}

.sra-dip-accordion details:last-child {
	border-bottom: 1px solid var(--sra-dip-line);
}

.sra-dip-accordion summary {
	cursor: pointer;
	padding: 1rem 2.5rem 1rem 0;
	color: var(--sra-dip-teal-dark);
	font-weight: 700;
}

.sra-dip-accordion summary:focus-visible {
	outline: 3px solid var(--sra-dip-orange);
	outline-offset: 3px;
}

.sra-dip-accordion-content {
	max-width: 75ch;
	padding: 0 0 1.5rem;
}

.sra-dip-related {
	background: #f7f7f7;
}

.sra-dip-related-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.25rem;
}

.sra-dip-related-card,
.sra-dip-slot {
	min-height: 230px;
	border: 1px solid var(--sra-dip-line);
	border-radius: .75rem;
	background: #fff;
	overflow: hidden;
}

.sra-dip-related-card a {
	display: block;
	height: 100%;
	padding-bottom: 1rem;
	color: inherit;
	text-decoration: none;
}

.sra-dip-related-card a:focus-visible {
	outline: 3px solid var(--sra-dip-orange);
	outline-offset: -4px;
}

.sra-dip-related-card__image {
	display: grid;
	height: 150px;
	place-items: center;
	background: var(--sra-dip-mist);
	color: var(--sra-dip-teal-dark);
	font-size: 2rem;
	font-weight: 800;
}

.sra-dip-related-card__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sra-dip-related-card__type,
.sra-dip-related-card h3 {
	margin-inline: 1rem;
}

.sra-dip-related-card__type {
	margin-top: 1rem;
	margin-bottom: .35rem;
	color: var(--sra-dip-teal);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sra-dip-related-card h3 {
	margin-bottom: 0;
	font-size: 1.05rem;
}

.sra-dip-slot {
	display: grid;
	place-content: center;
	gap: .4rem;
	padding: 2rem;
	border-style: dashed;
	color: var(--sra-dip-teal-dark);
	text-align: center;
}

.sra-dip-slot span {
	font-weight: 800;
}

.sra-dip-slot small {
	color: #566665;
}

.sra-dip-slot--video {
	background: var(--sra-dip-mist);
}

@media (max-width: 800px) {
	.sra-dip-story-grid,
	.sra-dip-related-grid {
		grid-template-columns: 1fr;
	}

	.sra-dip-table {
		min-width: 760px;
	}

	.sra-dip-table th,
	.sra-dip-table td {
		padding: .8rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sra-dip * {
		scroll-behavior: auto !important;
	}
}