#cookie-law-info-bar {
	font-size: 15px;
	margin: 0 auto;
	padding: 12px 10px;
	position: absolute;
	text-align: center;
	box-sizing: border-box;
	width:100%;
	z-index: 9999;
	/* box-shadow:rgba(0,0,0,.5) 0px 5px 50px; */
	display: none;
	left:0px;
	font-weight:300;
	box-shadow: 0 -1px 10px 0 rgba(172, 171, 171, 0.3);
}
#cookie-law-info-again {
	font-size: 10pt;
	margin: 0;
	padding:5px 10px;
	text-align: center;
	z-index: 9999;
	cursor: pointer;
	box-shadow: #161616 2px 2px 5px 2px;
}
#cookie-law-info-bar span {
	vertical-align: middle;
}

/** Buttons (http://papermashup.com/demos/css-buttons) */
.cli-plugin-button, .cli-plugin-button:visited {
	display: inline-block;
	padding: 9px 12px;
	color: #fff;
	text-decoration: none;
	position: relative;
	cursor: pointer;
	margin-left: 5px;
	text-decoration: none;
}
.cli-plugin-main-link {
	margin-left:0px;
	font-weight: 550; text-decoration: underline;
}
.cli-plugin-button:hover {
	background-color: #111;
	color: #fff;
	text-decoration: none;
}
.small.cli-plugin-button, .small.cli-plugin-button:visited {
	font-size: 11px;
}
.cli-plugin-button, .cli-plugin-button:visited,
	.medium.cli-plugin-button, .medium.cli-plugin-button:visited {
	font-size: 13px;
	font-weight: 400;
	line-height: 1;
}
.large.cli-plugin-button, .large.cli-plugin-button:visited {
	font-size: 14px;
	padding: 8px 14px 9px;
}
.super.cli-plugin-button, .super.cli-plugin-button:visited {
	font-size: 34px;
	padding: 8px 14px 9px;
}
.pink.cli-plugin-button, .magenta.cli-plugin-button:visited {
	background-color: #e22092;
}
.pink.cli-plugin-button:hover {
	background-color: #c81e82;
}
.green.cli-plugin-button, .green.cli-plugin-button:visited {
	background-color: #91bd09;
}
.green.cli-plugin-button:hover {
	background-color: #749a02;
}
.red.cli-plugin-button, .red.cli-plugin-button:visited {
	background-color: #e62727;
}
.red.cli-plugin-button:hover {
	background-color: #cf2525;
}
.orange.cli-plugin-button, .orange.cli-plugin-button:visited {
	background-color: #ff5c00;
}
.orange.cli-plugin-button:hover {
	background-color: #d45500;
}
.blue.cli-plugin-button, .blue.cli-plugin-button:visited {
	background-color: #2981e4;
}
.blue.cli-plugin-button:hover {
	background-color: #2575cf;
}
.yellow.cli-plugin-button, .yellow.cli-plugin-button:visited {
	background-color: #ffb515;
}
.yellow.cli-plugin-button:hover {
	background-color: #fc9200;
}
.cli-plugin-button{ margin-top:5px; }
.cli-bar-popup{
	-moz-background-clip: padding;
	-webkit-background-clip: padding;
	background-clip: padding-box;
	-webkit-border-radius:30px;
	-moz-border-radius:30px;
	border-radius:30px;
	padding:20px;
}
.cli-powered_by_p{width:100% !important; display:block !important; color:#333; clear:both; font-style:italic !important; font-size:12px !important; margin-top:15px !important; }
.cli-powered_by_a{color:#333; font-weight:600 !important; font-size:12px !important;}

/**
 * Added extra space between each cookie bar action elements @since 1.8.9
 */
.cli-plugin-main-link.cli-plugin-button {
	text-decoration: none;
}
.cli-plugin-main-link.cli-plugin-button {
	margin-left: 5px;
}
.gdpr-container-fluid {
	width: 100%;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.gdpr-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.gdpr-col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.gdpr-col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.gdpr-align-items-stretch {
	-ms-flex-align: stretch!important;
	align-items: stretch!important;
}
.gdpr-d-flex {
	display: -ms-flexbox!important;
	display: flex!important;
}
.gdpr-px-0 {
	padding-left: 0;
	padding-right: 0;
}
.modal-backdrop.show {
	opacity: .8;
}
.modal-open {
	overflow: hidden
}

.modal-open .gdpr-modal {
	overflow-x: hidden;
	overflow-y: auto
}

.gdpr-modal.fade .gdpr-modal-dialog {
	transition: -webkit-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out,-webkit-transform .3s ease-out;
	-webkit-transform: translate(0,-25%);
	transform: translate(0,-25%)
}

.gdpr-modal.show .gdpr-modal-dialog {
	-webkit-transform: translate(0,0);
	transform: translate(0,0)
}

.modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1039;
	background-color: #000
}

.modal-backdrop.fade {
	opacity: 0
}

.modal-backdrop.show {
	opacity: .5
}

.gdpr-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1050;
	display: none;
	overflow: hidden;
	outline: 0
}
.gdpr-modal a {
	text-decoration: none;
}
.gdpr-modal .gdpr-modal-dialog {
	position: relative;
	width: auto;
	margin: .5rem;
	pointer-events: none;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2))
}
@media (min-width: 576px) {
	.gdpr-modal .gdpr-modal-dialog {
		max-width:500px;
		margin: 1.75rem auto;
		min-height: calc(100% - (1.75rem * 2));
	}
}
@media (min-width: 992px) {
	.gdpr-modal .gdpr-modal-dialog {
		max-width: 900px;
	}
}
.gdpr-modal-content {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3rem;
	outline: 0
}
.gdpr-modal .row {
	margin: 0 -15px;
}
.gdpr-modal .modal-body {
	padding: 0;
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.gdpr-modal .close {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1;
	padding: 0;
	background-color: transparent;
	border: 0;
	-webkit-appearance: none;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
}
.gdpr-modal .close:focus {
	outline: 0;
}
.gdpr-switch {
	display: inline-block;
	position: relative;
	min-height: 1px;
	padding-left: 70px;
	font-size: 14px;
}
.gdpr-switch input[type="checkbox"] {
	display:none;
}
.gdpr-switch .gdpr-slider {
	background-color: #e3e1e8;
	height: 24px;
	width: 50px;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}
.gdpr-switch .gdpr-slider:before {
	background-color: #fff;
	bottom: 2px;
	content: "";
	height: 20px;
	left: 2px;
	position: absolute;
	transition: .4s;
	width: 20px;
}
.gdpr-switch input:checked + .gdpr-slider {
	background-color:rgb(99, 179, 95);
}
.gdpr-switch input:checked + .gdpr-slider:before {
	transform: translateX(26px);
}
.gdpr-switch .gdpr-slider {
	border-radius: 34px;
}
.gdpr-switch .gdpr-slider:before {
	border-radius: 50%;
}
.gdpr-tab-content>.gdpr-tab-pane {
	display: none;
}
.gdpr-tab-content>.active {
	display: block;
}
.gdpr-fade {
	transition: opacity .15s linear;
}
.gdpr-nav-pills {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	-ms-flex-direction: column !important;
	flex-direction: column !important;
	align-items: stretch !important;
	-ms-align-items: stretch !important;
}
.nav.gdpr-nav-pills, .gdpr-tab-content {
	width: 100%;
	padding: 30px;
}
.nav.gdpr-nav-pills {
	background: #f3f3f3;
}
.nav.gdpr-nav-pills .gdpr-nav-link {
	border: 1px solid #0070ad;
	margin-bottom: 10px;
	color: #0070ad;
	font-size: 14px;
	display: block;
	padding: .5rem 1rem;
	border-radius: .25rem;
}
.nav.gdpr-nav-pills .gdpr-nav-link.active, .nav.gdpr-nav-pills .show>.gdpr-nav-link {
	background-color: #0070ad;
	border: 1px solid #0070ad;
}
.nav.gdpr-nav-pills .gdpr-nav-link.active {
	color: #ffffff;
}
.gdpr-tab-content .gdpr-button-wrapper {
	padding-top: 30px;
	margin-top: 30px;
	border-top: 1px solid #d6d6d6;
}
.gdpr-tab-content .gdpr-button-wrapper .btn-gdpr {
	background-color: #0070ad;
	color: #ffffff;
	font-size: 14px;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .375rem .75rem;
	font-size: 1rem;
	line-height: 1.5;
	border-radius: .25rem;
	transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.gdpr-tab-content p {
	color: #343438;
	font-size: 14px;
	margin-top: 0;
}
.gdpr-tab-content h4 {
	font-size: 20px;
	margin-bottom: .5rem;
	margin-top: 0;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}


.cli-container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.cli-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.cli-col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.cli-col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
}
.cli-align-items-stretch {
	-ms-flex-align: stretch!important;
	align-items: stretch!important;
}
.cli-d-flex {
	display: -ms-flexbox!important;
	display: flex!important;
}
.cli-px-0 {
	padding-left: 0;
	padding-right: 0;
}
.cli-btn {
	cursor: pointer;
	font-size: 14px;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .5rem 1.25rem;
	line-height: 1;
	border-radius: .25rem;
	transition: all .15s ease-in-out;
}
.cli-btn:hover {
  opacity: .8;
}
.cli-read-more-link {
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
}
.cli-btn:focus {
	outline: 0;
}
.cli-modal-backdrop.cli-show {
  opacity: .8;
}
.cli-modal-open {
  overflow: hidden
}
.cli-barmodal-open {
  overflow: hidden
}
.cli-modal-open .cli-modal {
	overflow-x: hidden;
	overflow-y: auto
}
.cli-modal.cli-fade .cli-modal-dialog {
	transition: -webkit-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out,-webkit-transform .3s ease-out;
	-webkit-transform: translate(0,-25%);
	transform: translate(0,-25%)
}
.cli-modal.cli-show .cli-modal-dialog {
	-webkit-transform: translate(0,0);
	transform: translate(0,0)
}
.cli-modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
	display: none;
}
.cli-modal-backdrop.cli-fade {
  opacity: 0
}
.cli-modal-backdrop.cli-show {
	opacity: .5;
	display: block;
}
.cli-modal.cli-show {
	display: block;
}
.cli-modal a {
	text-decoration: none;
}
.cli-modal .cli-modal-dialog {
	position: relative;
	width: auto;
	margin: .5rem;
	pointer-events: none;
	font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2))
}
@media (min-width: 576px) {
	.cli-modal .cli-modal-dialog {
		max-width:500px;
		margin: 1.75rem auto;
		min-height: calc(100% - (1.75rem * 2))
	}
}
@media (min-width: 992px) {
	.cli-modal .cli-modal-dialog {
		max-width: 900px;
	}
}
.cli-modal-content {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border-radius: .3rem;
	outline: 0
}
.cli-modal .row {
	margin: 0 -15px;
}
.cli-modal .modal-body {
	padding: 0;
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.cli-modal .cli-modal-close {
	position: absolute;
	right: 10px;
	top: 10px;
	z-index: 1;
	padding: 0;
	background-color: transparent !important;
	border: 0;
	-webkit-appearance: none;
	font-size: 1.5rem;
	font-weight: 700;
	line-height: 1;
	color: #000;
	text-shadow: 0 1px 0 #fff;
}
.cli-modal .cli-modal-close:focus {
	outline: 0;
}
.cli-switch {
	display: inline-block;
	position: relative;
	min-height: 1px;
	padding-left: 70px;
	font-size: 14px;
}
.cli-switch input[type="checkbox"] {
	display:none;
}
.cli-switch .cli-slider {
	background-color: #e3e1e8;
	height: 24px;
	width: 50px;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}
.cli-switch .cli-slider:before {
	background-color: #fff;
	bottom: 2px;
	content: "";
	height: 20px;
	left: 2px;
	position: absolute;
	transition: .4s;
	width: 20px;
}
.cli-switch input:checked + .cli-slider {
	background-color: #00acad
}
.cli-switch input:checked + .cli-slider:before {
	transform: translateX(26px);
}
.cli-switch .cli-slider {
	border-radius: 34px;
}
.cli-switch .cli-slider:before {
	border-radius: 50%;
}
.cli-tab-content {
background: #ffffff;
}
.cli-tab-content>.cli-active {
	display: block;
}
.cli-fade {
	transition: opacity .15s linear;
}
.cli-nav-pills {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	-ms-flex-direction: column;
	flex-direction: column;
}
.cli-nav-pills, .cli-tab-content {
	width: 100%;
	padding: 30px;
}
@media (max-width: 767px) {
	.cli-nav-pills, .cli-tab-content {
	padding: 30px 10px;
	}
}
.cli-nav-pills {
	background: #f3f3f3;
}
.cli-nav-pills .cli-nav-link {
	border: 1px solid #00acad;
	margin-bottom: 10px;
	color: #00acad;
	font-size: 14px;
	display: block;
	padding: .5rem 1rem;
	border-radius: .25rem;
	cursor: pointer
}
.cli-nav-pills .cli-nav-link.cli-active, .cli-nav-pills .cli-show>.cli-nav-link {
	background-color: #00acad;
	border: 1px solid #00acad;
}
.cli-nav-pills .cli-nav-link.cli-active {
	color: #ffffff;
}
.cli-tab-content .cli-button-wrapper {
	padding-top: 30px;
	margin-top: 30px;
	border-top: 1px solid #d6d6d6;
}
.cli-tab-content p {
	color: #343438;
	font-size: 14px;
	margin-top: 0;
}
.cli-tab-content h4 {
	font-size: 20px;
	margin-bottom: 1.5rem;
	margin-top: 0;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}
/* Settings Popup */
.cli-container-fluid {
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
}
.cli-row {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	margin-right: -15px;
	margin-left: -15px;
}
.cli-col-4 {
	-ms-flex: 0 0 33.333333%;
	flex: 0 0 33.333333%;
	max-width: 33.333333%;
}
.cli-col-8 {
	-ms-flex: 0 0 66.666667%;
	flex: 0 0 66.666667%;
	max-width: 66.666667%;
	flex-direction: column;
}
.cli-align-items-stretch {
	-ms-flex-align: stretch!important;
	align-items: stretch!important;
}
.cli-d-flex {
	display: -ms-flexbox!important;
	display: flex!important;
}
.cli-px-0 {
	padding-left: 0;
	padding-right: 0;
}
.cli-btn {
	cursor: pointer;
	font-size: 14px;
	display: inline-block;
	font-weight: 400;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	border: 1px solid transparent;
	padding: .5rem 1.25rem;
	line-height: 1;
	border-radius: .25rem;
	transition: all .15s ease-in-out;
}
.cli-btn:hover {
  opacity: .8;
}
.cli-read-more-link {
	cursor: pointer;
	font-size: 15px;
	font-weight: 500;
	text-decoration: underline;
}
.cli-btn:focus {
	outline: 0;
}
.cli-modal-backdrop.cli-show {
  opacity: .8;
}
.cli-modal-open {
  overflow: hidden
}
.cli-barmodal-open {
  overflow: hidden
}
.cli-modal-open .cli-modal {
	overflow-x: hidden;
	overflow-y: auto
}
.cli-modal.cli-fade .cli-modal-dialog {
	transition: -webkit-transform .3s ease-out;
	transition: transform .3s ease-out;
	transition: transform .3s ease-out,-webkit-transform .3s ease-out;
	-webkit-transform: translate(0,-25%);
	transform: translate(0,-25%)
}
.cli-modal.cli-show .cli-modal-dialog {
	-webkit-transform: translate(0,0);
	transform: translate(0,0)
}
.cli-modal-backdrop {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 1040;
	background-color: #000;
	-webkit-transform:scale(0);
	transform:scale(0);
	transition: opacity ease-in-out 0.5s;
}
.cli-modal-backdrop.cli-fade {
  opacity: 0;

}
.cli-modal-backdrop.cli-show {
	opacity: .5;
  -webkit-transform:scale(1);
  transform:scale(1);
}
.cli-modal {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 99999;
	transform: scale(0);
	overflow: hidden;
	outline: 0;
	display: none;
}
.cli-modal a {
	text-decoration: none;
}
.cli-modal .cli-modal-dialog {
	position: relative;
	width: auto;
	margin: .5rem;
	pointer-events: none;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.5;
	color: #212529;
	text-align: left;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-align: center;
	align-items: center;
	min-height: calc(100% - (.5rem * 2))
}
@media (min-width: 576px) {
	.cli-modal .cli-modal-dialog {
		max-width:500px;
		margin: 1.75rem auto;
		min-height: calc(100% - (1.75rem * 2))
	}
}
.cli-modal-content {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: #fff;
	background-clip: padding-box;
	border-radius: .2rem;
	box-sizing: border-box;
	outline: 0
}
.cli-modal .row {
	margin: 0 -15px;
}
.cli-modal .modal-body {
	padding: 0;
	position: relative;
	-ms-flex: 1 1 auto;
	flex: 1 1 auto;
}
.cli-modal .cli-modal-close:focus {
	outline: 0;
}
.cli-switch {
	display: inline-block;
	position: relative;
	min-height: 1px;
	padding-left: 38px;
	font-size: 14px;
}
.cli-switch input[type="checkbox"] {
	display:none;
}
.cli-switch .cli-slider {
	background-color: #e3e1e8;
	height: 20px;
	width: 38px;
	bottom: 0;
	cursor: pointer;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
	transition: .4s;
}
.cli-switch .cli-slider:before {
	background-color: #fff;
	bottom: 2px;
	content: "";
	height: 15px;
	left: 3px;
	position: absolute;
	transition: .4s;
	width: 15px;
}
.cli-switch input:checked + .cli-slider {
	background-color: #61a229;
}
.cli-switch input:checked + .cli-slider:before {
	transform: translateX(18px);
}
.cli-switch .cli-slider {
	border-radius: 34px;
	font-size:0;
}
.cli-switch .cli-slider:before {
	border-radius: 50%;
}
.cli-tab-content {
background: #ffffff;
}
.cli-nav-pills {
	display: -ms-flexbox;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	padding-left: 0;
	margin-bottom: 0;
	list-style: none;
	-ms-flex-direction: column;
	flex-direction: column;
}
.cli-nav-pills, .cli-tab-content {
	width: 100%;
	padding:5px 30px 5px 5px;
	box-sizing: border-box;
}
@media (max-width: 767px) {
	.cli-nav-pills, .cli-tab-content {
	padding: 30px 10px;
	}
}
.cli-nav-pills {
	background: #fff;
}
.cli-nav-pills .cli-nav-link {
	border: 1px solid #cccccc;
	margin-bottom: 10px;
	color:#2a2a2a;
	font-size: 14px;
	display: block;
	padding: .5rem 1rem;
	border-radius: .25rem;
	cursor: pointer
}
.cli-nav-pills .cli-nav-link.cli-active, .cli-nav-pills .cli-show>.cli-nav-link {
	background-color: #f6f6f9;
	border: 1px solid #cccccc;
}
.cli-nav-pills .cli-nav-link.cli-active {
	color:#2a2a2a;
}
.cli-tab-content .cli-button-wrapper {
	padding-top: 30px;
	margin-top: 30px;
	border-top: 1px solid #d6d6d6;
}
.cli-tab-content p {
	color: #343438;
	font-size: 14px;
	margin-top: 0;
}
.cli-tab-content h4 {
	font-size: 20px;
	margin-bottom: 1.5rem;
	margin-top: 0;
	font-family: inherit;
	font-weight: 500;
	line-height: 1.2;
	color: inherit;
}
/* Cookie Settings In Bar */
#cookie-law-info-bar .cli-nav-pills,#cookie-law-info-bar .cli-tab-content,#cookie-law-info-bar .cli-nav-pills .cli-show>.cli-nav-link,#cookie-law-info-bar a.cli-nav-link.cli-active{
	background: transparent;
}

#cookie-law-info-bar .cli-nav-pills .cli-nav-link.cli-active,#cookie-law-info-bar  .cli-nav-link,#cookie-law-info-bar .cli-tab-container p,#cookie-law-info-bar span.cli-necessary-caption,#cookie-law-info-bar .cli-switch .cli-slider:after
{
color:inherit;
}
#cookie-law-info-bar .cli-tab-header a:before
{
	border-right: 1px solid currentColor;
	border-bottom: 1px solid currentColor;
}
#cookie-law-info-bar .cli-row
{
	margin-top:20px;
}
#cookie-law-info-bar .cli-col-4
{
	-webkit-box-flex: 0;
	-ms-flex: 0 0 auto;
	flex: 0 0 auto;
	width: auto;
	max-width: none;
}
#cookie-law-info-bar .cli-col-8
{
	flex-basis: 0;
	-webkit-box-flex: 1;
	-ms-flex-positive: 1;
	flex-grow: 1;
	max-width: 100%;
}
.cli-wrapper {
	max-width: 90%;
	float: none;
	margin: 0 auto;
}
#cookie-law-info-bar .cli-tab-content h4
{
	margin-bottom:0.5rem;
}
#cookie-law-info-bar .cli-nav-pills .cli-nav-link
{
	padding: .2rem 0.5rem;
}
#cookie-law-info-bar .cli-tab-container
{
	display:none;
	text-align:left;
}

/* Popup Footer Styles */
.cli-tab-footer .cli-btn {
	background-color: #00acad;
	padding: 10px 15px;
	text-decoration:none;
}
.cli-tab-footer .wt-cli-privacy-accept-btn {
	background-color: #61a229;
	color: #ffffff;
	border-radius: 0;
}

.cli-tab-footer {
	width:100%;
	text-align:right;
	padding: 20px 0;
}
/* version 2.0 */
.cli-col-12
{
	width:100%;
}
.cli-tab-header
{
	display: flex;
	justify-content: space-between;
}
.cli-tab-header a:before {
	width: 10px;
	height: 2px;
	left: 0;
	top: calc(50% - 1px);
}
.cli-tab-header a:after {
	width: 2px;
	height: 10px;
	left: 4px;
	top: calc(50% - 5px);
	-webkit-transform: none;
	transform: none;
}
.cli-tab-header a:before {
	width: 7px;
	height: 7px;
	border-right: 1px solid #4a6e78;
	border-bottom: 1px solid #4a6e78;
	content: " ";
	transform: rotate(-45deg);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
	margin-right:10px;
}
.cli-tab-header a.cli-nav-link  {
	position: relative;
	display: flex;
	align-items: center;
	font-size:14px;
	color:#000;
	text-transform: capitalize;

}
.cli-tab-header.cli-tab-active .cli-nav-link:before
{
	transform: rotate(45deg);
	-webkit-transition: all 0.2s ease-in-out;
	-moz-transition: all 0.2s ease-in-out;
	transition: all 0.2s ease-in-out;
}
.cli-tab-header {
	border-radius: 5px;
	padding: 12px 15px;
	cursor: pointer;
	transition: background-color 0.2s ease-out 0.3s, color 0.2s ease-out 0s;
	background-color:#f2f2f2;
}
.cli-modal .cli-modal-close {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 1;
	-webkit-appearance: none;
	width: 40px;
	height: 40px;
	padding: 0;
	border-radius: 50%;
	padding: 10px;
	background: transparent;
	border:none;
	min-width: 40px;
}
.cli-tab-container h4,.cli-tab-container h1 {
	font-family: inherit;
	font-size: 16px;
	margin:10px 0;
}
#cliSettingsPopup .cli-tab-section-container {
	padding-top: 12px;
}
.cli-tab-container p ,.cli-privacy-content-text{
	font-size: 14px;
	line-height: 1.4;
	margin-top: 0;
	padding: 0;
	color: #000;
}
.wt-cli-privacy
{
	display:none;
}
.cli-tab-content
{
	display:none;
}
.cli-tab-section .cli-tab-content
{
	padding: 10px 20px 5px 20px;
}
.cli-tab-section
{
	margin-top:5px;
}
@media (min-width: 992px) {
	.cli-modal .cli-modal-dialog {
		max-width: 645px;
	}
}
.cli-switch .cli-slider:after{
	content: attr(data-cli-disable);
	position: absolute;
	right: 50px;
	color: #000;
	font-size:12px;
	text-align:right;
	min-width: 80px;
}
.cli-switch input:checked + .cli-slider:after
{
	content: attr(data-cli-enable);
}
.cli-privacy-overview:not(.cli-collapsed) .cli-privacy-content {
	max-height: 60px;
	transition: max-height 0.15s ease-out;
	overflow: hidden;
}
a.cli-privacy-readmore {
	font-size: 12px;
	margin-top: 12px;
	display: inline-block;
	padding-bottom: 0;
	cursor: pointer;
	color:#000;
	text-decoration: underline;
}
.cli-modal-footer {
	position: relative;
}
a.cli-privacy-readmore:before {
	content: attr(data-readmore-text);
}
.cli-collapsed a.cli-privacy-readmore:before {
	content: attr(data-readless-text);
}

.cli-collapsed .cli-privacy-content
{
	transition: max-height 0.25s ease-in;

}
.cli-privacy-content p
{
	margin-bottom:0;
}
.cli-modal-close svg {
	fill: #000;
}
span.cli-necessary-caption {
	color: #000;
	font-size: 12px;
}
.cli-tab-section.cli-privacy-tab {
	display: none;
}
#cookie-law-info-bar .cli-tab-section.cli-privacy-tab {
	display: block;
}
#cookie-law-info-bar .cli-privacy-overview {
	display: none;
}
.cli-tab-container .cli-row
{
	max-height: 500px;
	overflow-y: auto;
}
.cli-modal.cli-blowup.cli-out {
	z-index: -1;
}
.cli-modal.cli-blowup {
	z-index: 999999;
	transform: scale(1);

  }
  .cli-modal.cli-blowup .cli-modal-dialog {
	animation: blowUpModal 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }
  .cli-modal.cli-blowup.cli-out .cli-modal-dialog
  {
	animation: blowUpModalTwo 0.5s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
  }
  @keyframes blowUpContent {
	0% {
	  transform: scale(1);
	  opacity: 1;
	}
	99.9% {
	  transform: scale(2);
	  opacity: 0;
	}
	100% {
	  transform: scale(0);
	}
  }
  @keyframes blowUpContentTwo {
	0% {
	  transform: scale(2);
	  opacity: 0;
	}
	100% {
	  transform: scale(1);
	  opacity: 1;
	}
  }
  @keyframes blowUpModal {
	0% {
	  transform: scale(0);
	}
	100% {
	  transform: scale(1);
	}
  }
  @keyframes blowUpModalTwo {
	0% {
	  transform: scale(1);
	  opacity: 1;
	}
	50% {
		transform: scale(0.5);
		opacity: 0;
	  }
	100% {
	  transform: scale(0);
	  opacity: 0;
	}
  }
  .cli-tab-section .cookielawinfo-row-cat-table td, .cli-tab-section .cookielawinfo-row-cat-table th {
	font-size: 12px;
}
.cli_settings_button
{
	cursor: pointer;
}
/* Accessibility Fix */
.wt-cli-sr-only
{
	display: none;
	font-size:16px;
}
/* Changes for CCPA
Version : 1.8.9
*/
a.wt-cli-element.cli_cookie_close_button {
	text-decoration: none;
	color: #333333;
	font-size: 22px;
	line-height: 22px;
	cursor: pointer;
	position: absolute;
	right: 10px;
	top: 5px;
}
/* GDPR Bar Version 2 */
.cli-bar-container{
	float: none;
	margin: 0 auto;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	justify-content: space-between;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.cli-bar-btn_container {
	margin-left: 20px;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-align: center;
	-moz-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
	flex-wrap: nowrap;
}
.cli-style-v2 a
{
	cursor: pointer;
}
.cli-bar-btn_container a {
	white-space: nowrap;
}
.cli-style-v2 .cli-plugin-main-link
{
	font-weight:inherit;
}
.cli-style-v2
{
	font-size: 11pt;
	line-height: 18px;
	font-weight:normal;
}
#cookie-law-info-bar[data-cli-type="widget"] .cli-bar-container,#cookie-law-info-bar[data-cli-type="popup"] .cli-bar-container{
	display: block;
}
.cli-style-v2 .cli-bar-message {
	width: 70%;
	text-align: left;
}
#cookie-law-info-bar[data-cli-type="widget"] .cli-bar-message,#cookie-law-info-bar[data-cli-type="popup"] .cli-bar-message
{
	width:100%;
}
#cookie-law-info-bar[data-cli-type="widget"] .cli-style-v2 .cli-bar-btn_container {
	margin-top:8px;
	margin-left: 0px;
	flex-wrap: wrap;
}
/* #cookie-law-info-bar[data-cli-type="widget"] .cli-style-v2 .cli-bar-message {
	text-align: center;
} */
#cookie-law-info-bar[data-cli-type="popup"] .cli-style-v2 .cli-bar-btn_container {
	margin-top:8px;
	margin-left: 0px;
}
#cookie-law-info-bar[data-cli-style="cli-style-v2"] .cli_messagebar_head{
	text-align: left;
	/* padding-left: 15px; */
	margin-bottom: 5px;
	margin-top: 0px;
	font-size: 16px;
}
/* #cookie-law-info-bar[data-cli-type="widget"] .cli-bar-container.cli-style-v2 {
	padding-left: 0px;
	padding-right: 0px;
} */

.cli-style-v2 .cli-bar-message .wt-cli-ccpa-element,.cli-style-v2 .cli-bar-message .wt-cli-ccpa-checkbox {
	margin-top: 5px;
}
.cli-style-v2 .cli-bar-btn_container .cli_action_button ,
.cli-style-v2 .cli-bar-btn_container .cli-plugin-main-link,
.cli-style-v2 .cli-bar-btn_container .cli_settings_button
{
	margin-left: 5px;
}
.wt-cli-ccpa-checkbox label {
	font-size: inherit;
	cursor: pointer;
	margin: 0px 0px 0px 5px;
}
/* .cli-bar-container.cli-style-v2 {
	padding-left: 15px;
	padding-right: 15px;
	padding-top: 2px;
	padding-bottom: 2px;
} */
#cookie-law-info-bar[data-cli-style="cli-style-v2"]
{
	padding: 14px 25px;
}
#cookie-law-info-bar[data-cli-style="cli-style-v2"][data-cli-type="widget"]
{
	padding:32px 30px;
}
#cookie-law-info-bar[data-cli-style="cli-style-v2"][data-cli-type="popup"] {
	padding: 32px 45px;
}
.cli-style-v2 .cli-plugin-main-link:not(.cli-plugin-button), .cli-style-v2 .cli_settings_button:not(.cli-plugin-button),.cli-style-v2 .cli_action_button:not(.cli-plugin-button){
	text-decoration: underline;
}
.cli-style-v2 .cli-bar-btn_container .cli-plugin-button {
	margin-top: 5px;
	margin-bottom: 5px;
}
a.wt-cli-ccpa-opt-out {
	white-space: nowrap;
	text-decoration: underline;
}
.wt-cli-necessary-checkbox {
	display: none !important;
}
@media (max-width: 985px) {
	.cli-style-v2 .cli-bar-message
	{
		width:100%;
	}
	.cli-style-v2.cli-bar-container
	{
		justify-content:left;
		flex-wrap: wrap;
	}
	.cli-style-v2 .cli-bar-btn_container {
		margin-left:0px;
		margin-top: 10px;
	}
	#cookie-law-info-bar[data-cli-style="cli-style-v2"],#cookie-law-info-bar[data-cli-style="cli-style-v2"][data-cli-type="widget"],#cookie-law-info-bar[data-cli-style="cli-style-v2"][data-cli-type="popup"]
	{
		padding: 25px 25px;
	}
}
/* Settings popup footer section */
.wt-cli-ckyes-brand-logo {
	display: flex;
	align-items: center;
	font-size: 9px;
	color: #111111;
	font-weight: normal;
}
.wt-cli-ckyes-brand-logo img{
	width: 65px;
	margin-left: 2px;
}
.wt-cli-privacy-overview-actions {
	padding-bottom:0;
}
@media only screen and (max-width: 479px) and (min-width: 320px){

	.cli-style-v2 .cli-bar-btn_container {
		flex-wrap: wrap;
	}
}
/* Fix: HTML validation error due to the enclosing of <p> tags on category description */
.wt-cli-cookie-description {
	font-size: 14px;
	line-height: 1.4;
	margin-top: 0;
	padding: 0;
	color: #000;
}
/*
 * DNCG Course Compare - "My Courses"
 *
 * Same contract as the search plugin's CSS: no literal colour in any
 * notation, theme tokens only; the child themes set the values. 1.1rem
 * minimum font size via --fs-min. One rule per component.
 */

/* --- "Study with Us" menu: count badge on the top-level item. The mega
       menu entry itself borrows the menu's own mega-menu__destination
       classes, so it needs no styling here and the design stays untouched --- */
/* margin-right: auto keeps the badge pinned beside the label when the
   mobile accordion turns the anchor into a space-between flex row;
   harmless inline on desktop. */
.dncg-mycourses__count { display: inline-block; margin-left: 8px; margin-right: auto; font-family: var(--font-mono); font-size: var(--fs-min); font-weight: 700; line-height: 1.3; color: var(--btn-accent-text); background: var(--btn-accent-bg); min-width: 22px; text-align: center; padding: 0 6px; border-radius: var(--radius-pill); vertical-align: middle; }
.dncg-mycourses__count--empty { display: none; }

/* Inside the injected submenu/mega item the link is a narrow block, where
   the auto margin lets the badge wrap under the label: keep label and
   badge on one row there. */
.dncg-mycourses-item > a { display: inline-flex; align-items: center; gap: 8px; }
.dncg-mycourses-item .dncg-mycourses__count { margin: 0; flex: 0 0 auto; }

/* --- Save toast --- */
.dncg-mycourses-toast { position: fixed; bottom: 24px; left: 50%; transform: translate(-50%, 12px); z-index: 9999; background: var(--navy); color: var(--white); font-size: var(--fs-min); font-weight: 700; padding: .7rem 1.4rem; border-radius: var(--radius-pill); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; }
.dncg-mycourses-toast--show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dncg-mycourses-toast__link { color: var(--accent-on-dark, var(--white)); text-decoration: underline; }

/* --- Course page save row --- */
.dncg-compare-add { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 1rem 0 1.4rem; }
.dncg-compare-add__btn { cursor: pointer; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-weight: 700; font-size: var(--fs-min); padding: .6rem 1.3rem; border-radius: var(--radius-pill); }
.dncg-compare-add__btn:hover { border-color: var(--accent); }
.dncg-compare-add__btn--in { background: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-bg); }
.dncg-compare-add__link { font-size: var(--fs-min); font-weight: 700; color: var(--link); }

/* Hero variant: sits directly beneath the Apply / Book Open Event CTAs as a
   quieter second row. The button carries the theme's own
   btn btn--white-outline classes (added in JS), so colours come from the
   theme stylesheet; these rules only downsize it and space the row. The
   negative top margin tucks the row into the actions' 2rem gap, and the
   2rem bottom absorbs the event-date line's own -1.3rem pull. */
.dncg-compare-add--hero { margin: -1.2rem 0 2rem; }
.dncg-compare-add--hero .dncg-compare-add__btn { font-size: var(--fs-min); padding: .4rem 1.1rem; }
.dncg-compare-add--hero .dncg-compare-add__btn--in { background: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-bg); }
.dncg-compare-add--hero .dncg-compare-add__link { color: var(--white); text-decoration: underline; }

/* --- Search result row toggle --- */
.dncg-compare-toggle { cursor: pointer; flex: 0 0 auto; width: 34px; height: 34px; margin-left: 8px; border: 1px solid var(--line); background: var(--white); color: var(--navy); font-size: var(--fs-min); font-weight: 700; border-radius: var(--radius-pill); align-self: center; }
.dncg-compare-toggle:hover { border-color: var(--accent); }
.dncg-compare-toggle--in { background: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-bg); }
.dncg-course-list li { display: flex; align-items: stretch; }
.dncg-course-list li > a { flex: 1 1 auto; }

/* --- My Courses page --- */
.dncg-compare-page { max-width: var(--content-max); margin: 0 auto; padding: 2.6rem var(--page-gutter) 3.6rem; }
.dncg-compare-page__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: clamp(2.2rem, 3.5vw, 3rem); color: var(--navy); margin: 0 0 .6rem; }
.dncg-compare-page__intro { font-size: var(--fs-min); line-height: 1.6; color: var(--muted); max-width: 70ch; margin: 0 0 2rem; }

.dncg-compare-empty { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--light); padding: 2.2rem; }
.dncg-compare-empty h2 { font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; color: var(--navy); margin: 0 0 .6rem; }
.dncg-compare-empty p { font-size: var(--fs-min); line-height: 1.6; color: var(--ink); margin: 0; }
.dncg-compare-loading { display: flex; align-items: center; gap: 12px; font-size: var(--fs-min); color: var(--muted); }
.dncg-compare-loading::before { content: ""; flex: 0 0 auto; width: 20px; height: 20px; border: 3px solid var(--line); border-top-color: var(--accent); border-radius: 50%; animation: dncg-compare-spin .8s linear infinite; }
@keyframes dncg-compare-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.dncg-compare-loading::before { animation: none; }
}

/* --- Single saved course --- */
.dncg-compare-single__head { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.7rem; color: var(--navy); margin: 0 0 1rem; }
.dncg-compare-single { border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-md); background: var(--light); padding: 1.8rem 2rem; max-width: 720px; }
.dncg-compare-single__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--link); text-decoration: none; margin-bottom: 1rem; }
.dncg-compare-single__title:hover { text-decoration: underline; }
.dncg-compare-single__facts { margin: 0 0 1.4rem; display: grid; grid-template-columns: 1fr; gap: .55rem; }
.dncg-compare-single__facts div { display: flex; gap: 12px; align-items: baseline; }
.dncg-compare-single__facts dt { flex: 0 0 160px; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.dncg-compare-single__facts dd { margin: 0; font-size: var(--fs-min); line-height: 1.55; color: var(--ink); }
.dncg-compare-single__actions { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.dncg-compare-single__hint { margin: 1.2rem 0 0; font-size: var(--fs-min); color: var(--muted); }

/* --- Comparison grid --- */
.dncg-compare-scroller { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-md); }
.dncg-compare-grid { width: 100%; border-collapse: collapse; min-width: 640px; }
.dncg-compare-grid th, .dncg-compare-grid td { padding: 1rem 1.2rem; font-size: var(--fs-min); line-height: 1.55; color: var(--ink); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); border-left: 1px solid var(--line); }
.dncg-compare-grid th:first-child, .dncg-compare-grid td:first-child { border-left: 0; }
.dncg-compare-grid__corner { background: var(--light); }
.dncg-compare-grid__course { background: var(--light); min-width: 200px; }
.dncg-compare-grid__title { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.2rem; color: var(--link); text-decoration: none; margin-bottom: .5rem; }
.dncg-compare-grid__title:hover { text-decoration: underline; }
.dncg-compare-grid__remove { cursor: pointer; border: 0; background: none; padding: 0; font-size: var(--fs-min); font-weight: 700; color: var(--muted); text-decoration: underline; }
.dncg-compare-grid__remove:hover { color: var(--navy); }
.dncg-compare-grid__fact { background: var(--light); font-weight: 700; color: var(--navy); white-space: nowrap; }
.dncg-compare-grid__row--differs .dncg-compare-grid__fact { border-left: var(--card-edge) solid var(--accent); }
.dncg-compare-grid__apply { display: inline-block; background: var(--btn-accent-bg); color: var(--btn-accent-text); font-weight: 700; font-size: var(--fs-min); padding: .6rem 1.3rem; border-radius: var(--radius-pill); text-decoration: none; }

.dncg-compare-clear { cursor: pointer; margin-top: 1.4rem; border: 1px solid var(--line); background: var(--white); color: var(--muted); font-size: var(--fs-min); font-weight: 700; padding: .55rem 1.2rem; border-radius: var(--radius-pill); }
.dncg-compare-clear:hover { color: var(--navy); border-color: var(--navy); }
/* DNCG Pathways Core Styles - Part 1: Variables & Base */
/* Clean, neutral styling for multi-site use */

/* Phase 3 consolidation: the plugin's --dncg-* vocabulary is now ALIASED onto
   the base-theme token layer (tokens.css, loaded first via get_header). This is
   the single authoritative :root for the plugin; the duplicate :root blocks in
   dncg-public-styles.css, dncg-archive-styles.css and archive-courses.css were
   removed so nothing reintroduces the old off-brand purple/cyan palette.
   Colour intent: primary -> navy, secondary -> blue, the retired teal -> the
   brand accent (FLAG: confirm accent with design). Raw hex still scattered in
   the component CSS is swept separately. Spacing keeps its rem scale; radius,
   shadow, transition and font follow our tokens. */
:root {
    /* Colour -> brand tokens */
    --dncg-primary: var(--navy);
    --dncg-primary-blue: var(--navy);
    --dncg-primary-light: var(--blue);
    --dncg-primary-dark: var(--navy-deep);
    --dncg-secondary: var(--blue);
    --dncg-secondary-blue: var(--blue);
    --dncg-secondary-light: var(--blue);
    --dncg-secondary-dark: var(--blue-dark);
    --dncg-teal: var(--accent);            /* retired teal -> brand accent (FLAG) */
    --dncg-light-blue: var(--aud-students-tint);
    --dncg-white: var(--white);
    --dncg-dark: var(--ink);
    --dncg-gray: var(--muted);
    --dncg-light-gray: var(--neutral-500);
    --dncg-border: var(--line);
    --dncg-border-light: var(--line);
    --dncg-background: var(--surface-alt);
    --dncg-success: var(--success);
    --dncg-warning: var(--warning);
    --dncg-error: var(--danger);
    --dncg-text-primary: var(--text);
    --dncg-text-secondary: var(--text-muted);
    --dncg-text-light: var(--neutral-500);

    /* Neutral ramp -> our neutral scale */
    --dncg-gray-50: var(--neutral-50);
    --dncg-gray-100: var(--neutral-100);
    --dncg-gray-200: var(--neutral-200);
    --dncg-gray-300: var(--neutral-300);
    --dncg-gray-400: var(--neutral-300);
    --dncg-gray-500: var(--neutral-500);
    --dncg-gray-600: var(--neutral-500);
    --dncg-gray-700: var(--neutral-700);
    --dncg-gray-800: var(--neutral-700);
    --dncg-gray-900: var(--neutral-900);

    /* Legacy un-prefixed drift names (were defined in the stripped :root blocks) */
    --primary-color: var(--navy);
    --primary-dark: var(--navy-deep);
    --secondary-color: var(--blue);
    --text-dark: var(--text);
    --text-medium: var(--text-muted);
    --text-light: var(--neutral-500);
    --bg-white: var(--surface);
    --bg-light: var(--surface-alt);
    --border-color: var(--line);

    /* Typography -> our body font; base raised to the 1.1rem floor */
    --dncg-font-family: var(--font-body);
    --dncg-font-size-base: 1.2rem;
    --dncg-line-height-base: 1.6;

    /* Spacing (rem scale kept; not colour) */
    --dncg-spacing-xs: 0.25rem;
    --dncg-spacing-sm: 0.5rem;
    --dncg-spacing-md: 1rem;
    --dncg-spacing-lg: 1.5rem;
    --dncg-spacing-xl: 2rem;
    --dncg-spacing-2xl: 3rem;
    --dncg-spacing-3xl: 4rem;

    /* Radius, shadow, motion -> our tokens */
    --dncg-border-radius-sm: var(--radius-sm);
    --dncg-border-radius-md: var(--radius-sm);
    --dncg-border-radius-lg: var(--radius);
    --dncg-border-radius-xl: var(--radius-lg);
    --dncg-shadow-sm: var(--shadow-sm);
    --dncg-shadow-md: var(--shadow-md);
    --dncg-shadow-lg: var(--shadow-lg);
    --dncg-shadow-xl: var(--shadow-lg);
    --dncg-shadow: var(--shadow-md);
    --dncg-transition-fast: var(--transition);
    --dncg-transition-normal: var(--transition);
    --dncg-transition-slow: var(--transition);
    --dncg-transition: var(--transition);
}

/* ================================
   BASE & RESET STYLES
   ================================ */

.dncg-subject-area-wrapper * {
    box-sizing: border-box;
}

.dncg-subject-area-wrapper {
    font-family: var(--dncg-font-family);
    font-size: var(--dncg-font-size-base);
    line-height: var(--dncg-line-height-base);
    color: var(--dncg-dark);
    background: var(--dncg-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Container */
.dncg-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--dncg-spacing-md);
}

.dncg-container-wide {
    max-width: 90%;
}

/* Headings take the display face (the child's --font-display, e.g. nort at dc,
   enra-slab at nlc), matching the course templates. Body text stays --font-body.
   This replaces the per-site font-forcing the override files used to do. */
.dncg-subject-area-wrapper h1,
.dncg-subject-area-wrapper h2,
.dncg-subject-area-wrapper h3,
.dncg-subject-area-wrapper h4,
.dncg-hero-headline,
.dncg-section-title,
.dncg-subsection-title,
.dncg-courses-title,
.dncg-archive-title,
.dncg-facility-title,
.dncg-course-title,
.dncg-career-title,
.dncg-level-title {
    font-family: var(--font-display);
}

@media (min-width: 768px) {
    .dncg-container {
        padding: 0 var(--dncg-spacing-xl);
    }
}

/* ================================
   TYPOGRAPHY
   ================================ */

.dncg-subject-area-wrapper h1,
.dncg-subject-area-wrapper h2,
.dncg-subject-area-wrapper h3,
.dncg-subject-area-wrapper h4,
.dncg-subject-area-wrapper h5,
.dncg-subject-area-wrapper h6 {
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: var(--dncg-spacing-md);
    color: var(--dncg-dark);
}

.dncg-subject-area-wrapper h1 {
    font-size: 2.25rem;
    line-height: 1.1;
    color: white;
}

.dncg-subject-area-wrapper h2 {
    font-size: 1.875rem;
}

.dncg-subject-area-wrapper h3 {
    font-size: 1.75rem;
}

.dncg-subject-area-wrapper h4 {
    font-size: 1.5rem;
}

.dncg-subject-area-wrapper h5 {
    font-size: 1.1rem;
}

.dncg-subject-area-wrapper h6 {
    font-size: 1.1rem;
}

@media (min-width: 768px) {
    .dncg-subject-area-wrapper h1 {
        font-size: 3.5rem;
    }

    .dncg-subject-area-wrapper h2 {
        font-size: 2.25rem;
    }

    .dncg-subject-area-wrapper h3 {
        font-size: 1.875rem;
    }
}

/* DNCG Pathways Core Styles - Part 2: Navigation & Hero */

/* ================================
   PAGE NAVIGATION
   ================================ */

.dncg-page-navigation {
    position: sticky;
    top: 0;
    margin-top: -3rem;
    width: 95%;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    z-index: 5;
    transition: all 0.3s ease;
    padding: 1rem;
    margin-bottom: -2rem;
    background: var(--dncg-white);
    box-shadow: 0 2px 10px rgba(var(--shadow-rgb), 0.05);
}

/* Navigation wrapper */
.dncg-nav-wrapper {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.dncg-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 15px 0;
    position: relative;
    z-index: 2;
}

/* Navigation pills */
.dncg-nav-pills {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    position: relative;
    z-index: 2;
}

.dncg-nav-label {
    font-weight: 600;
    color: var(--dncg-gray);
    margin-right: 8px;
    font-size: 1.1rem;
    opacity: 0.7;
}

.dncg-nav-pill {
    padding: 8px 14px;
    background: var(--dncg-white);
    border: 1px solid var(--dncg-border);
    border-radius: 20px;
    text-decoration: none;
    color: var(--dncg-gray);
    font-size: 1.1rem;
    font-weight: 500;
    transition: all var(--dncg-transition-fast);
    white-space: nowrap;
}

.dncg-nav-pill:hover,
.dncg-nav-pill.active {
    background: var(--dncg-primary-blue);
    color: var(--dncg-white);
    border-color: var(--dncg-primary-blue);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(var(--navy-rgb), 0.2);
    text-decoration: none;
}

/* Apply Now Button */
.dncg-apply-wrapper {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
}

.dncg-apply-now-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--dncg-teal) 0%, var(--dncg-primary-blue) 100%);
    color: var(--dncg-white);
    padding: 12px 28px;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 700;
    font-size: 1.1rem;
    transition: all var(--dncg-transition-normal);
    box-shadow: 0 4px 15px rgba(var(--accent-rgb), 0.3);
    position: relative;
    overflow: hidden;
}

.dncg-apply-now-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(var(--overlay-light-rgb), 0.2), transparent);
    transition: left 0.5s ease;
}

.dncg-apply-now-btn:hover {
    transform: scale(1.05) translateY(-2px);
    box-shadow: 0 6px 25px rgba(var(--accent-rgb), 0.4);
    color: var(--dncg-white);
    text-decoration: none;
}

.dncg-apply-now-btn:hover::before {
    left: 100%;
}

.dncg-apply-text {
    font-weight: 700;
}

.dncg-apply-arrow {
    width: 18px;
    height: 18px;
    transition: transform var(--dncg-transition-normal);
}

.dncg-apply-now-btn:hover .dncg-apply-arrow {
    transform: translateX(3px);
}

/* Scrolled state */
.dncg-page-navigation.dncg-nav-scrolled {
    margin-top: 0;
    box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.1);
}

.dncg-page-navigation.dncg-nav-scrolled .dncg-nav-inner {
    padding: 10px 0;
}

.dncg-page-navigation.dncg-nav-scrolled .dncg-apply-now-btn {
    padding: 10px 24px;
    font-size: 1.1rem;
}

/* ----------------------------------------------------------------------------
   Subject-area SINGLE component styles (hero, features, facilities, careers,
   news, gallery, partner + no-courses) now live once in dncg-public-styles.css
   (token layer, loaded after this file on subject pages). Removed here to keep
   one definition per selector. Archive uses distinct .subject-area-* classes.
   -------------------------------------------------------------------------- */

/* ================================
   BUTTONS & FORM ELEMENTS
   ================================ */


/* Audience Selector */
.dncg-audience-selector {
    display: flex;
    flex-wrap: wrap;
    gap: var(--dncg-spacing-sm);
    justify-content: center;
}

.dncg-audience-pill {
    padding: var(--dncg-spacing-sm) var(--dncg-spacing-md);
    background: var(--dncg-white);
    color: var(--dncg-gray);
    border: 2px solid var(--dncg-border);
    border-radius: 25px;
    text-decoration: none;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--dncg-transition-normal);
    display: inline-block;
}

.dncg-audience-pill:hover,
.dncg-audience-pill.active {
    background: var(--dncg-primary-blue);
    color: var(--dncg-white);
    border-color: var(--dncg-primary-blue);
    text-decoration: none;
}

/* Course option highlight */
.dncg-course-option.highlighted {
    animation: highlightPulse 1s ease-out 2;
}

@keyframes highlightPulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0);
    }
    50% {
        transform: scale(1.02);
        box-shadow: 0 0 20px 5px rgba(var(--accent-rgb), 0.3);
    }
}

.dncg-course-label.dncg-highlight-pulse {
    animation: dncg-pulse-highlight 1s ease-in-out 3;
}

@keyframes dncg-pulse-highlight {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(var(--accent-rgb), 0.4);
        background-color: transparent;
    }
    25% {
        box-shadow: 0 0 20px 5px rgba(var(--accent-rgb), 0.2);
        background-color: rgba(var(--blue-rgb), 0.3);
    }
    50% {
        box-shadow: 0 0 25px 10px rgba(var(--accent-rgb), 0.1);
        background-color: rgba(var(--blue-rgb), 0.5);
    }
    75% {
        box-shadow: 0 0 20px 5px rgba(var(--accent-rgb), 0.2);
        background-color: rgba(var(--blue-rgb), 0.3);
    }
}

.dncg-course-link-horizontal:focus {    border-radius: 4px;
}

.dncg-news-title-compact a:focus,
.dncg-gallery-item:focus-within {    border-radius: 4px;
}

/* ================================
   RESPONSIVE DESIGN
   ================================ */

/* Small mobile devices */
@media (max-width: 480px) {
    .dncg-container {
        padding: 0 15px;
    }
    
    .dncg-hero-headline {
        font-size: 2rem;
    }
    
    .dncg-hero-intro {
        font-size: 1.1rem;
    }
    
    .btn {
        padding: 10px 16px;
        font-size: 1.1rem;
    }
    
    .dncg-feature-card,
    .dncg-career-card {
        padding: 20px;
    }
    
    .dncg-features-section,
    .dncg-news-social-section,
    .dncg-gallery-section {
        padding: 50px 0;
    }
    
    .dncg-news-grid-compact,
    .dncg-gallery-grid {
        gap: 18px;
        margin-top: 30px;
    }
    
    .dncg-news-image-compact {
        height: 120px;
    }
    
    .dncg-news-content-compact {
        padding: 15px;
    }
    
    .dncg-news-title-compact {
        font-size: 1.1rem;
    }
    
    .dncg-news-meta-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
        margin-bottom: 10px;
    }
    
    .dncg-news-category-compact {
        max-width: none;
    }
    
    .dncg-gallery-caption {
        padding: 12px;
        font-size: 1.1rem;
    }
    
    .dncg-lightbox-close,
    .dncg-lightbox-prev,
    .dncg-lightbox-next {
        width: 40px;
        height: 40px;
    }
    
    .dncg-lightbox-close {
        top: 10px;
        right: 10px;
    }
    
    .dncg-lightbox-prev {
        left: 10px;
    }
    
    .dncg-lightbox-next {
        right: 10px;
    }
    
    .dncg-no-courses-message {
        padding: 40px 15px;
        margin: 30px 0;
    }
    
    .dncg-no-courses-content h3 {
        font-size: 1.3rem;
    }
    
    .dncg-no-courses-content p {
        font-size: 1.1rem;
    }
    
    .dncg-show-all-courses {
        padding: 10px 20px;
        font-size: 1.1rem;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 1023px) {
    .dncg-news-image-compact {
        height: 130px;
    }
    
    .dncg-news-title-compact {
        font-size: 1.1rem;
    }
    
    .dncg-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .dncg-gallery-masonry {
        grid-template-columns: repeat(2, 1fr);
    }
    
    @supports (column-count: 1) {
        .dncg-gallery-masonry {
            column-count: 2;
        }
    }
}

/* Large screen optimizations */
@media (min-width: 1024px) {
    .dncg-facilities-section {
        padding: 100px 0;
    }

    .dncg-facility-content-wrapper {
        gap: 60px;
        padding: 60px;
    }

    .dncg-facility-image-container {
        height: 360px;
    }

    .dncg-facility-even {
        margin-right: 120px;
    }

    .dncg-facility-odd {
        margin-left: 120px;
    }

    .dncg-facility-title {
        font-size: 2.2rem;
    }
    
    .dncg-careers-section,
    .dncg-courses-section,
    .dncg-progression-section {
        padding: 100px 0;
    }
    
    .dncg-hero-section {
        min-height: 50vh;
    }

    .dncg-hero-headline {
        font-size: 4rem;
    }

    .dncg-hero-intro {
        font-size: 1.5rem;
    }

    .dncg-hero-video-content {
        padding: 100px 0;
    }

    .dncg-hero-video-grid {
        gap: 80px;
    }

    .dncg-hero-with-video .dncg-hero-headline {
        font-size: 3rem;
    }

    .dncg-hero-with-video .dncg-hero-intro {
        font-size: 1.3rem;
    }
    
    .dncg-careers-grid {
        gap: 35px;
    }

    .dncg-career-card {
        padding: 35px;
    }
    
    .dncg-level-courses-horizontal {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 30px;
    }
}

@media (min-width: 1200px) {
    .dncg-news-social-section,
    .dncg-gallery-section {
        padding: 80px 0;
    }
    
    .dncg-news-grid-compact,
    .dncg-gallery-grid {
        gap: 35px;
    }
    
    .dncg-news-image-compact {
        height: 160px;
    }
    
    .dncg-news-content-compact {
        padding: 20px;
    }
    
    .dncg-news-title-compact {
        font-size: 1.1rem;
    }
    
    .dncg-feature-card {
        padding: 35px;
    }
    
    .dncg-feature-card h3 {
        font-size: 1.4rem;
        margin-bottom: 25px;
    }
    
    .dncg-cta-button {
        padding: 18px 28px;
        font-size: 1.1rem;
    }
    
    .dncg-course-progression-wrapper-v2 {
        max-width: 1400px;
        margin:0 auto;
    }
    
    .dncg-level-courses-horizontal {
        grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
        gap: 35px;
        padding: 40px;
    }
    
    .dncg-course-card-content {
        padding: 30px;
    }
    
    .dncg-course-title-horizontal {
        font-size: 1.3rem;
    }
}

/* Ultra-wide screens */
@media (min-width: 1440px) {
    .dncg-nav-wrapper {
        max-width: 1600px;
    }
    
    .dncg-features-section {
        padding: 120px 0;
    }
    
    .dncg-feature-card {
        padding: 40px;
    }
    
    .dncg-feature-card h3 {
        font-size: 1.5rem;
        margin-bottom: 28px;
    }
   
    .dncg-cta-button {
        padding: 20px 32px;
        font-size: 1.1rem;
    }
}

/* Very large screens */
@media (min-width: 1920px) {
    .dncg-container,
    .dncg-nav-wrapper {
        max-width: 1800px;
    }
    
    .dncg-facilities-section .dncg-container,
    .dncg-facilities-section .dncg-facilities-wrapper {
        max-width: 1800px;
    }
}

/* Mobile specific adjustments */
@media (max-width: 767px) {
    /* Facilities */
    .dncg-facilities-section {
        padding: 60px 0;
    }

    .dncg-facilities-wrapper {
        padding: 0 15px;
    }

    .dncg-facility-item {
        margin-bottom: 50px;
    }

    .dncg-facility-even,
    .dncg-facility-odd {
        margin-left: 0;
        margin-right: 0;
    }

    .dncg-facility-content-wrapper {
        padding: 30px;
        gap: 25px;
    }

    .dncg-facility-image-container {
        height: 220px;
    }

    .dncg-facility-title {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }

    .dncg-facility-description {
        font-size: 1.1rem;
        line-height: 1.6;
    }

    .dncg-facilities-header h2 {
        font-size: 2rem;
    }
    
    /* Course progression */
    .dncg-course-progression-wrapper-v2 {
        padding: 0 15px;
    }
    
    .dncg-level-row {
        margin-bottom: 25px;
    }
    
    .dncg-level-row-header {
        padding: 20px;
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .dncg-level-title {
        font-size: 1.3rem;
    }
    
    .dncg-level-courses-horizontal {
        padding: 20px;
        gap: 15px;
    }
    
    .dncg-course-card-content {
        padding: 20px;
    }
    
    .dncg-course-header-horizontal {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .dncg-course-expand-horizontal {
        align-self: flex-end;
        margin-top: -10px;
    }
    
    .dncg-course-title-horizontal {
        font-size: 1.1rem;
    }
    
    .dncg-progression-arrow {
        width: 36px;
        height: 36px;
    }
    
    .dncg-course-actions-horizontal {
        flex-direction: column;
        gap: 10px;
    }
    
    .dncg-apply-for-course-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
    
    /* Partner content */
    .dncg-partner-site-block {
        flex-direction: column;
        text-align: center;
        padding: 20px;
    }
    
    .dncg-he-arrow {
        margin: 20px auto;
    }
    
    .dncg-partner-he-card {
        margin: 15px;
        padding: 25px;
    }
    
    .dncg-he-header .dncg-level-title {
        font-size: 1.3rem;
    }
    
    .dncg-he-course-links {
        gap: 10px;
    }
    
    .dncg-he-course-link-btn {
        padding: 12px 16px;
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }
    
    .dncg-he-level-badge {
        font-size: 1.1rem;
        padding: 3px 8px;
    }
    
    .dncg-he-course-name {
        font-size: 1.1rem;
    }
    
    .dncg-he-link-arrow {
        font-size: 1.1rem;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .dncg-apply-now-btn,
    .dncg-feature-card,
    .dncg-feature-item,
    .dncg-testimonial-quote,
    .dncg-testimonial-image,
    .dncg-testimonial-attribution {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    
    .dncg-feature-card:hover,
    .dncg-testimonial-card:hover,
    .dncg-cta-button:hover,
    .dncg-testimonial-image img:hover {
        transform: none !important;
    }
}

/* Print styles */
@media print {
    .dncg-subject-area-wrapper {
        background: white !important;
        color: black !important;
    }

    .dncg-hero-top-controls,
    .dncg-page-navigation,
    .dncg-audience-selector,
    .dncg-cta-button,
    .dncg-apply-wrapper,
    .dncg-course-expand-horizontal,
    .dncg-level-arrow,
    .dncg-lightbox-modal {
        display: none !important;
    }

    .dncg-career-card,
    .dncg-level-row,
    .dncg-feature-card,
    .dncg-facility-content-wrapper,
    .dncg-news-card-compact,
    .dncg-gallery-item {
        background: white !important;
        border: 1px solid var(--line) !important;
        box-shadow: none !important;
        break-inside: avoid;
    }

    .dncg-course-details-horizontal {
        display: block !important;
    }

    .dncg-level-row-header {
        background: var(--surface-alt) !important;
        color: black !important;
    }

    .dncg-facility-image-overlay,
    .dncg-gallery-overlay {
        display: none !important;
    }

    .dncg-facility-even,
    .dncg-facility-odd {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .dncg-testimonial-card {
        background: transparent !important;
        break-inside: avoid;
    }
    
    .dncg-testimonial-quote {
        box-shadow: none !important;
        background: var(--surface-alt) !important;
        color: black !important;
    }
    
    .dncg-testimonial-quote::after {
        display: none !important;
    }
}


/* Subject Grid Shortcode Styles */
.dncg-subject-grid-shortcode-wrapper {
    margin: 40px 0;
}

.dncg-subject-grid {
    display: grid;
    gap: 30px;
    margin-top: 30px;
}

/* Grid columns */
.dncg-grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.dncg-grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.dncg-grid-cols-4 { grid-template-columns: repeat(4, 1fr); }


/* ================================
   HE COURSE GRID LAYOUT
   Simplified display for university courses
   ================================ */

.dncg-he-course-grid-wrapper {
    max-width: 1200px;
    margin: 40px auto 0;
    padding: 0 20px;
}

.dncg-he-course-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}

@media (min-width: 768px) {
    .dncg-he-course-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (min-width: 1200px) {
    .dncg-he-course-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
}

/* HE Course Cards */
.dncg-course-card-he {
    background: var(--dncg-white);
    border: 1px solid var(--dncg-border);
    border-radius: 12px;
    transition: all var(--dncg-transition-normal);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dncg-course-card-he:hover {
    border-color: var(--dncg-teal);
    box-shadow: 0 10px 15px -3px rgba(var(--shadow-rgb), 0.1), 0 0 0 3px rgba(var(--accent-rgb), 0.1);
    transform: translateY(-2px);
}

.dncg-course-card-he .dncg-course-card-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* HE Header with Level Badge */
.dncg-course-header-he {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
}

.dncg-course-title-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dncg-level-badge-he {
    display: inline-block;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    color: var(--white);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
}

.dncg-course-title-he {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--dncg-primary-blue);
    margin: 0;
    line-height: 1.4;
}

.dncg-htq-badge-he {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    object-fit: contain;
    transition: transform var(--dncg-transition-normal);
}

.dncg-course-card-he:hover .dncg-htq-badge-he {
    transform: scale(1.05);
}

/* Responsive Adjustments for HE Grid */
@media (max-width: 767px) {
    .dncg-he-course-grid-wrapper {
        padding: 0 15px;
    }
    
    .dncg-he-course-grid {
        gap: 20px;
    }
    
    .dncg-course-card-he .dncg-course-card-content {
        padding: 20px;
    }
    
    .dncg-course-title-he {
        font-size: 1.1rem;
    }
    
    .dncg-level-badge-he {
        font-size: 1.1rem;
        padding: 3px 8px;
    }
    
    .dncg-htq-badge-he {
        width: 32px;
        height: 32px;
    }
}

@media (min-width: 1400px) {
    .dncg-he-course-grid-wrapper {
        max-width: 1400px;
    }
}



/* ========================================
   ARCHIVE-STYLE LAYOUT FOR SUBJECT AREAS
   ======================================== */

/* Main Content Wrapper */
.dncg-courses-content.dncg-subject-area-courses {
    padding: 40px 0;
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--aud-students-tint) 100%);
}

/* Layout Grid */
.dncg-course-progression-wrapper-v2 .dncg-courses-layout {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 30px;
    align-items: start;
}

/* ========================================
   FILTER SIDEBAR
   ======================================== */

/* Filter Sidebar Container */
.dncg-filter-sidebar {
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 15px rgba(var(--navy-rgb), 0.1);
    padding: 25px;
}

.filter-sidebar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--line);
}

.filter-sidebar-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dncg-primary-blue);
    margin: 0;
}

.mobile-close-filters {
    display: none;
    background: none;
    border: none;
    padding: 5px;
    cursor: pointer;
    color: var(--muted);
    transition: color 0.3s ease;
}

.mobile-close-filters:hover {
    color: var(--dncg-primary-blue);
}

/* Filter Accordion Items */
.filter-accordion-item {
    border-bottom: 1px solid var(--line);
    padding: 15px 0;
}

.filter-accordion-item:last-child {
    border-bottom: none;
}

.filter-accordion-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: none;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
}

.filter-accordion-toggle:hover {
    color: var(--dncg-teal);
}

.accordion-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--ink);
}

.accordion-icon {
    transition: transform 0.3s ease;
    stroke: var(--muted);
    flex-shrink: 0;
}

.filter-accordion-toggle.is-active .accordion-icon {
    transform: rotate(180deg);
    stroke: var(--dncg-teal);
}

/* Accordion Content - Collapsible */
.filter-accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
}

.filter-accordion-content.is-open {
    max-height: 100%;
    opacity: 1;
    padding-top: 10px;
}

.filter-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Checkbox Styles */
.filter-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    cursor: pointer;
    transition: all 0.3s ease;
}

.filter-checkbox-label:hover {
    color: var(--blue);
}

.filter-checkbox {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.filter-checkbox:focus-visible + .checkbox-custom {    box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.2);
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--line);
    border-radius: 4px;
    flex-shrink: 0;
    transition: all 0.3s ease;
    position: relative;
    background: white;
}

.filter-checkbox:checked + .checkbox-custom {
    border-color: var(--blue);
    background: var(--blue);
}

.filter-checkbox:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-text {
    flex: 1;
    font-size: 1.1rem;
    color: var(--muted);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.filter-checkbox:checked + .checkbox-custom + .checkbox-text {
    color: var(--ink);
    font-weight: 600;
}

.option-count {
    font-size: 1.1rem;
    color: var(--neutral-500);
    font-weight: normal;
}

/* Filter Actions */
.filter-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 25px;
    padding-top: 20px;
    border-top: 2px solid var(--line);
}

.btn-apply-filters {
    background: linear-gradient(135deg, var(--dncg-teal) 0%, var(--dncg-primary-blue) 100%);
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-apply-filters:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}

.btn-clear-filters {
    background: white;
    color: var(--muted);
    border: 2px solid var(--line);
    padding: 10px 20px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
}

.btn-clear-filters:hover {
    border-color: var(--dncg-teal);
    color: var(--dncg-teal);
}

/* Mobile Filter Toggle Button */
.dncg-mobile-filter-toggle {
    display: none;
    background: white;
    border: 2px solid var(--dncg-border);
    border-radius: 8px;
    padding: 12px 20px;
    margin-bottom: 20px;
    cursor: pointer;
    font-weight: 600;
    color: var(--dncg-dark);
    gap: 10px;
    align-items: center;
    transition: all 0.3s ease;
}

.dncg-mobile-filter-toggle:hover {
    border-color: var(--dncg-teal);
    color: var(--dncg-teal);
}

.filter-count {
    background: var(--dncg-teal);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 1.1rem;
    font-weight: 700;
}

/* ========================================
   COURSE RESULTS GRID
   ======================================== */

/* Results Header */
.results-header {
    background: white;
    padding: 20px 25px;
    border-radius: 12px;
    margin-bottom: 25px;
    box-shadow: 0 2px 10px rgba(var(--navy-rgb), 0.08);
}

.results-count {
    font-size: 1.1rem;
    color: var(--muted);
    margin: 0;
}

.results-count strong {
    color: var(--dncg-primary-blue);
    font-weight: 700;
    font-size: 1.3rem;
}

/* Course Grid */
.subject-area-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px;
    margin-bottom: 40px;
}

/* Course Card Styling */
.subject-area-courses-grid .course-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 4px rgba(var(--shadow-rgb), 0.05);
    transition: all 0.3s ease;
    height: 100%;
    position: relative;
}

.subject-area-courses-grid .course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(var(--shadow-rgb), 0.15);
}

.subject-area-courses-grid .course-card-link {
    display: block;
    height: 100%;
    text-decoration: none;
    color: inherit;
}

.subject-area-courses-grid .course-image {
    height: 160px;
    background-size: cover;
    background-position: center;
    position: relative;
    background-color: var(--surface-alt);
}

.subject-area-courses-grid .course-image-placeholder {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.subject-area-courses-grid .placeholder-icon {
    position: relative;
    z-index: 2;
}

.subject-area-courses-grid .placeholder-icon svg,
.dncg-level-courses-grid .placeholder-icon svg {
    display: none;
}

.subject-area-courses-grid .course-image-placeholder::after,
.dncg-level-courses-grid .course-image-placeholder::after {
    content: '📚';
    font-size: 3rem;
    opacity: 0.5;
}

.subject-area-courses-grid .course-image-placeholder,
.dncg-level-courses-grid .course-image-placeholder {
    background: linear-gradient(135deg, var(--aud-students-tint) 0%, var(--aud-students-tint) 100%);
}

.subject-area-courses-grid .course-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(var(--shadow-rgb), 0) 0%, rgba(var(--shadow-rgb), 0.3) 100%);
}

.subject-area-courses-grid .course-content {
    padding: 20px;
}

.subject-area-courses-grid .course-subject {
    display: inline-block;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--blue);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.subject-area-courses-grid .course-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px;
    line-height: 1.4;
    min-height: 2.8em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.subject-area-courses-grid .course-meta {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
}

.subject-area-courses-grid .meta-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 1.1rem;
    color: var(--muted);
}

.subject-area-courses-grid .meta-item svg {
    flex-shrink: 0;
    stroke: var(--muted);
}

.subject-area-courses-grid .meta-audience {
    background: var(--aud-students-tint);
    color: var(--navy);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-block;
}

/* HTQ Badge - Small Version */
.dncg-htq-badge-small {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 30px;
    height: 30px;
    object-fit: contain;
    z-index: 3;
    filter: drop-shadow(0 2px 4px rgba(var(--shadow-rgb), 0.2));
}

.course-quick-actions,
.dncg-course-actions-horizontal {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    background: transparent;
    position: relative;
    padding: 0;
    margin-top: 15px;
    display: flex;
    gap: 10px;
    flex-direction: row;
    justify-content: stretch;
}
.quick-apply-btn,
.dncg-apply-for-course-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: linear-gradient(135deg, var(--dncg-teal, var(--accent)) 0%, var(--dncg-primary-blue, var(--navy)) 100%);
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-decoration: none;
}

.quick-apply-btn:hover,
.dncg-apply-for-course-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    color: white;
    text-decoration: none;
}


/* Empty State */
.dncg-no-courses-found {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 20px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(var(--navy-rgb), 0.08);
}

.no-courses-content {
    max-width: 400px;
    margin: 0 auto;
}

.no-courses-content svg {
    color: var(--dncg-teal);
    margin-bottom: 20px;
    opacity: 0.6;
}

.no-courses-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--dncg-primary-blue);
    margin-bottom: 12px;
}

.no-courses-content p {
    font-size: 1.1rem;
    color: var(--muted);
    line-height: 1.6;
    margin-bottom: 25px;
}

.btn-clear-search {
    background: var(--dncg-teal);
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-clear-search:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.3);
}

/* ========================================
   MOBILE RESPONSIVENESS
   ======================================== */

@media (max-width: 992px) {
    .dncg-subject-area-courses .dncg-courses-layout {
        grid-template-columns: 1fr;
    }
    
    .subject-area-courses-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    }
    
    .dncg-mobile-filter-toggle {
        display: flex;
    }

    .dncg-course-progression-wrapper-v2 .dncg-courses-layout {
        display: grid;
        grid-template-columns: 1fr;
      }
    
    .mobile-close-filters {
        display: block;
    }
    
    .dncg-filter-sidebar {
        position: fixed;
        top: 0;
        left: -100%;
        width: 320px;
        max-width: 85vw;
        height: 100vh;
        max-height: 100vh;
        z-index: 1000;
        transition: left 0.3s ease;
        border-radius: 0;
        overflow-y: auto;
    }
    
    .dncg-filter-sidebar.is-open {
        left: 0;
    }
    
    .filter-sidebar-overlay {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(var(--shadow-rgb), 0.5);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }
    
    body.filter-sidebar-open .filter-sidebar-overlay {
        opacity: 1;
        visibility: visible;
    }
    
    body.filter-sidebar-open {
        overflow: hidden;
    }
}

@media (max-width: 768px) {
    .dncg-courses-content.dncg-subject-area-courses {
        padding: 30px 0;
    }
    
    .subject-area-courses-grid {
        grid-template-columns: 1fr;
    }
    
    .subject-area-courses-grid .course-title,
    .dncg-level-courses-grid .course-title,
    .dncg-course-title-horizontal {
        font-size: 1.1rem;
    }
    
    .course-quick-actions,
    .dncg-course-actions-horizontal {
        flex-direction: column;
        gap: 8px;
    }
    
    .dncg-more-info-btn,
    .quick-apply-btn,
    .dncg-apply-for-course-btn {
        width: 100%;
        flex: none;
    }
    
    .dncg-filter-sidebar {
        width: 280px;
        padding: 20px;
    }
    
    .filter-sidebar-title {
        font-size: 1.3rem;
    }
    
    .accordion-title {
        font-size: 1.1rem;
    }
    
    .results-header {
        padding: 15px 20px;
    }
    
    .results-count {
        font-size: 1.1rem;
    }
    
    .results-count strong {
        font-size: 1.1rem;
    }
}



/* ========================================
   LEVEL-BASED PROGRESSION LAYOUT
   ======================================== */

.dncg-course-progression-wrapper-v2 {
    padding: 60px 0;
}

.dncg-level-progression-container {
    max-width: 1400px;
    margin: 0 auto;
}

/* Level Blocks */
.dncg-level-row {
    background: white;
    border-radius: 16px;
    margin-bottom: 40px;
    box-shadow: 0 4px 20px rgba(var(--navy-rgb), 0.1);
    overflow: hidden;
    transition: all 0.3s ease;
}

.dncg-level-row-header {
    background: linear-gradient(135deg, var(--dncg-teal) 0%, var(--dncg-primary-blue) 100%);
    padding: 24px 32px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dncg-level-title {
    color: white !important;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0;
}

.dncg-course-count {
    background: rgba(var(--overlay-light-rgb), 0.25);
    color: white;
    padding: 8px 18px;
    border-radius: 20px;
    font-size: 1.1rem;
    font-weight: 600;
    backdrop-filter: blur(10px);
}

/* Grid within Level Blocks */
.dncg-level-courses-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 25px;
    padding: 32px;
}

/* Progression Arrows */
.dncg-level-arrow {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    margin: 20px 0;
}

.dncg-progression-arrow {
    width: 48px;
    height: 48px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.dncg-level-arrow:hover .dncg-progression-arrow {
    opacity: 1;
    transform: translateY(3px);
}

/* HE Level Styling */
.dncg-he-level .dncg-level-row-header {
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-dark) 100%);
}

.dncg-he-arrow .dncg-progression-arrow path {
    stroke: url(#heArrowGradient) !important;
}

/* Partner Level Styling */
.dncg-partner-level .dncg-level-row-header {
    background: linear-gradient(135deg, var(--accent) 0%, var(--accent) 100%);
}

/* ========================================
   PARTNER ACCORDION CARDS
   ======================================== */

.dncg-partner-courses-accordion-grid {
    grid-template-columns: 1fr;
    gap: 20px;
}

.dncg-partner-accordion-card {
    background: linear-gradient(135deg, var(--surface-alt) 0%, var(--aud-students-tint) 100%);
    border: 2px solid rgba(var(--accent-rgb), 0.2);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.dncg-partner-accordion-card:hover {
    border-color: var(--dncg-teal);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.15);
}

.dncg-partner-accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.dncg-partner-info {
    flex: 1;
}

.dncg-partner-badge {
    display: inline-block;
    background: var(--dncg-teal);
    color: white;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.dncg-partner-name {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--dncg-primary-blue);
    margin: 0 0 8px 0;
}

.dncg-partner-summary {
    font-size: 1.1rem;
    color: var(--dncg-gray);
    margin: 0;
}

.dncg-accordion-toggle {
    background: white;
    border: 2px solid var(--dncg-border);
    border-radius: 8px;
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.dncg-accordion-toggle:hover {
    border-color: var(--dncg-teal);
    background: var(--dncg-light-blue);
}

.toggle-text {
    font-weight: 600;
    color: var(--dncg-dark);
    font-size: 1.1rem;
}

.toggle-icon {
    transition: transform 0.3s ease;
}

.dncg-partner-accordion-content {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* Partner Course List */
.dncg-partner-course-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dncg-partner-course-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: white;
    border: 2px solid var(--dncg-border);
    border-radius: 8px;
    text-decoration: none;
    color: var(--dncg-dark);
    transition: all 0.3s ease;
}

.dncg-partner-course-link:hover {
    border-color: var(--dncg-teal);
    background: var(--dncg-light-blue);
    transform: translateX(5px);
    text-decoration: none;
}

.dncg-course-level-badge {
    background: var(--dncg-teal);
    color: white;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    flex-shrink: 0;
}

.dncg-course-link-title {
    flex: 1;
    font-weight: 600;
    font-size: 1.1rem;
}

.dncg-external-icon {
    font-size: 1.1rem;
    color: var(--dncg-teal);
    transition: transform 0.3s ease;
}

.dncg-partner-course-link:hover .dncg-external-icon {
    transform: translateX(3px);
}

/* View All Message (for FE partners) */
.dncg-view-all-message {
    text-align: center;
    padding: 20px;
}

.dncg-view-all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--dncg-teal);
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.dncg-view-all-link:hover {
    color: var(--dncg-primary-blue);
    transform: translateX(5px);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dncg-level-row-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px;
    }
    
    .dncg-level-title {
        font-size: 1.4rem;
    }
    
    .dncg-level-courses-grid {
        grid-template-columns: 1fr;
        padding: 20px;
        gap: 20px;
    }
    
    .dncg-partner-accordion-header {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dncg-accordion-toggle {
        width: 100%;
        justify-content: center;
    }
    
    .dncg-level-arrow {
        height: 40px;
        margin: 15px 0;
    }
    
    .dncg-progression-arrow {
        width: 36px;
        height: 36px;
    }
}

/* Remove full card link behavior */
.subject-area-courses-grid .course-card-link,
.dncg-level-courses-grid .course-card-link {
    pointer-events: none;
    cursor: default;
}

/* Make buttons clickable */
.subject-area-courses-grid .course-card-link .quick-apply-btn,
.subject-area-courses-grid .course-card-link .dncg-more-info-btn,
.dncg-level-courses-grid .course-card-link .quick-apply-btn,
.dncg-level-courses-grid .course-card-link .dncg-more-info-btn {
    pointer-events: all;
    cursor: pointer;
}

/* More Info Button - Secondary style */
.dncg-more-info-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    background: white;
    color: var(--dncg-primary-blue, var(--navy));
    border: 2px solid var(--dncg-border, var(--line));
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    flex: 1;
    text-decoration: none;
}

.dncg-more-info-btn:hover {
    border-color: var(--dncg-primary-blue, var(--navy));
    background: var(--surface-alt);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--navy-rgb), 0.15);
    color: var(--dncg-primary-blue, var(--navy));
    text-decoration: none;
}

.dncg-more-info-btn svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

.dncg-more-info-btn:hover svg {
    transform: translateX(3px);
}


/* ========================================
   FE COURSE CARDS - CLEAN DESIGN
   For Level Progression Layout
   No icons, simple and professional
   ======================================== */

/* Level Progression Grid */
.dncg-level-courses-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 30px;
}

@media (min-width: 768px) {
    .dncg-level-courses-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
}

@media (min-width: 1200px) {
    .dncg-level-courses-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 35px;
    }
}

/* Course Card */
.dncg-level-courses-grid .course-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-radius: 12px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.dncg-level-courses-grid .course-card:hover {
    border-color: var(--accent);
    box-shadow: 0 10px 15px -3px rgba(var(--accent-rgb), 0.1), 
                0 0 0 3px rgba(var(--accent-rgb), 0.1);
    transform: translateY(-2px);
}

.dncg-level-courses-grid .course-content {
    padding: 24px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Level Badge */
.course-level-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--navy) 100%);
    color: var(--white);
    padding: 6px 12px;
    border-radius: 6px;
    font-size: 1.1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    align-self: flex-start;
    margin-bottom: 16px;
}

.htq-badge-inline {
    width: 20px;
    height: 20px;
    object-fit: contain;
}

/* Course Title */
.dncg-level-courses-grid .course-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ink);
    margin: 0 0 12px 0;
    line-height: 1.4;
    min-height: 3em;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Course Code */
.course-code {
    font-size: 1.1rem;
    color: var(--muted);
    font-weight: 500;
    margin-bottom: 12px;
}

/* Course Type Tags */
.course-type-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 12px;
}

.course-type-tag {
    background: var(--light);
    color: var(--muted);
    border: 1px solid var(--line);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 1.1rem;
    font-weight: 500;
}

/* Duration */
.course-duration {
    font-size: 1.1rem;
    color: var(--muted);
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--surface-alt);
}

/* Entry Requirements Section */
.course-requirements-section {
    margin: 16px 0;
    flex-grow: 1;
}

.requirements-toggle {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--surface-alt);
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 12px 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--muted);
}

.requirements-toggle:hover {
    background: var(--surface-alt);
    border-color: var(--line);
}

.requirements-toggle[aria-expanded="true"] {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background: var(--aud-students-tint);
    border-color: var(--accent);
}

.chevron-icon {
    font-size: 1.1rem;
    transition: transform 0.3s ease;
    color: var(--accent);
}

.requirements-toggle[aria-expanded="true"] .chevron-icon {
    transform: rotate(180deg);
}

.requirements-content {
    border: 1px solid var(--accent);
    border-top: none;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    padding: 16px;
    background: var(--surface-alt);
    font-size: 1.1rem;
    line-height: 1.6;
    color: var(--muted);
}

.requirements-content p {
    margin: 0;
}

/* Action Buttons Container */
.course-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--surface-alt);
}

/* Apply Now Button (Primary) */
.apply-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: linear-gradient(135deg, var(--accent) 0%, var(--navy) 100%);
    color: var(--white);
    border: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.apply-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--accent-rgb), 0.4);
    color: var(--white);
    text-decoration: none;
}

/* More Info Button (Secondary) */
.more-info-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 20px;
    background: var(--white);
    color: var(--accent);
    border: 2px solid var(--accent);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.more-info-btn:hover {
    background: var(--surface-alt);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.15);
    color: var(--blue-dark);
    text-decoration: none;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .dncg-level-courses-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding: 20px;
    }
    
    .dncg-level-courses-grid .course-content {
        padding: 20px;
    }
    
    .dncg-level-courses-grid .course-title {
        font-size: 1.1rem;
        min-height: auto;
    }
    
    .course-actions {
        flex-direction: column;
        gap: 8px;
    }
    
    .apply-btn,
    .more-info-btn {
        width: 100%;
    }
}

/* Remove any old styles that might conflict */
.dncg-level-courses-grid .course-card-link {
    pointer-events: none;
}

.dncg-level-courses-grid .course-image,
.dncg-level-courses-grid .course-image-placeholder,
.dncg-level-courses-grid .placeholder-icon,
.dncg-level-courses-grid .course-subject,
.dncg-level-courses-grid .meta-item svg,
.dncg-level-courses-grid .course-quick-actions {
    display: none !important;
}

.dncg-level-courses-grid .course-meta {
    display: none !important;
}

.dncg-level-courses-grid .dncg-htq-badge-small {
    display: none !important;
}

.dncg-partner-courses-accordion-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  /**
 * CSS-Based Progression Arrows
 * Automatically hides arrows for:
 * - Hidden level boxes
 * - Level boxes followed by hidden boxes
 * - The last visible level box
 */

/* Wrapper needs relative positioning for arrow placement */
.dncg-level-progression-container {
    position: relative;
}

/* Level rows need relative positioning and margin for arrow space */
.dncg-level-row {
    position: relative;
    margin-bottom: 68px; /* Space for arrow: 20px top + 48px arrow + buffer */
}

.dncg-level-row:last-of-type {
    margin-bottom: 0; /* No margin on last row */
}

/* Base arrow styling - positioned AFTER/BELOW the level row */
.dncg-level-row::after {
    content: "";
    position: absolute;
    bottom: -68px; /* Position below the box */
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 48px;
    background-image: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 48" xmlns="http://www.w3.org/2000/svg"><defs><linearGradient id="arrow" x1="0%" y1="0%" x2="100%" y2="0%"><stop offset="0%" style="stop-color:%230891b2"/><stop offset="100%" style="stop-color:%231e3a8a"/></linearGradient></defs><path d="M12 4 L12 36 M12 36 L6 30 M12 36 L18 30" stroke="url(%23arrow)" stroke-width="3" fill="none" stroke-linecap="round" stroke-linejoin="round"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: 1;
}

/* RULE 1: Hide arrow if the level box itself is hidden */
.dncg-level-row[style*="display: none"]::after,
.dncg-level-row[style*="display:none"]::after {
    display: none !important;
}

/* RULE 2: Hide arrow if next sibling is hidden */
.dncg-level-row:has(+ .dncg-level-row[style*="display: none"])::after,
.dncg-level-row:has(+ .dncg-level-row[style*="display:none"])::after {
    display: none !important;
}

/* RULE 3: Hide arrow on the last visible level box */
.dncg-level-row:last-of-type::after {
    display: none !important;
}

/* RULE 4: Also handle partner course blocks (they should never have arrows) */
.dncg-he-level::after,
.dncg-partner-level::after {
    display: none !important;
}

/* Fallback for browsers without :has() support (very rare now) */
@supports not (selector(:has(*))) {
    /* Remove all ::after arrows and require the separate arrow elements */
    .dncg-level-row::after {
        display: none !important;
    }
}/* =============================================================================
   DNCG Pathways — NLC overrides (Phase 3 consolidation)
   "Keep the animations, drop the quirks." NLC's file was almost entirely quirks,
   all removed so NLC uses the shared rebranded design:
     - enra-slab heading font forcing — now handled by the child --font-display
     - italic / uppercase / hard text-shadow hero highlight — removed
     - inset dark hero overlay — removed (brand hero stands)
     - rotate(5deg) testimonial image + breakout + artistic name/border — removed
     - hardcoded dark grey courses-section gradient + white arrows — removed
     - rotated dark grey apply button — removed (brand button stands)
   Only the genuine layout deltas remain. Colour via tokens, 1.1rem floor.
   ========================================================================== */

/* Feature row: narrow icon column */
.dncg-feature-item { grid-template-columns: 2.5rem 1fr; }
.dncg-emoji { font-size: 2.5rem; }
.dncg-feature-item .dncg-heading { font-size: 1.4rem; }
/* =============================================================================
   dncg-search — public styles
   Rebranded onto the base-theme design system (Phase 3 plugin consolidation).
   Colour is always var(--token); the theme's tokens.css resolves them (the
   theme loads first). No literal colour here, 1.1rem font floor, our
   --radius/--shadow/--space/--transition scale, and the course-template design
   language (white cards, hairline + soft shadow, pill CTAs, display headings).

   Everything is scoped to a plugin wrapper (.dncg-search-autocomplete for the
   site-wide header autocomplete, .dncg-search-results-page / .dncg-search-form /
   .dncg-search-featured-bar for the rest). The previous file's bare .container
   and "override theme styles" rules are gone: the plugin no longer fights the
   theme.
   ========================================================================== */

/* =============================================================================
   1. Autocomplete dropdown (site-wide: attaches to the header search)
   ========================================================================== */
.dncg-search-autocomplete {
  position: absolute;
  z-index: 80;
  left: 0;
  right: 0;
  margin-top: 0.4rem;
  background: var(--surface);
  border: var(--hair);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  max-height: 70vh;
  overflow-y: auto;
}
.dncg-autocomplete-group + .dncg-autocomplete-group {
  border-top: var(--hair);
}
.dncg-autocomplete-heading {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 0.9rem 1.2rem 0.5rem;
}
.dncg-autocomplete-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1.2rem;
  cursor: pointer;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  transition: background var(--transition);
}
.dncg-autocomplete-item:hover,
.dncg-autocomplete-selected {
  background: var(--surface-alt);
}
.dncg-autocomplete-icon {
  flex-shrink: 0;
  font-size: 1.3rem;
  line-height: 1;
}
.dncg-autocomplete-item-content { min-width: 0; }
.dncg-autocomplete-title {
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--text);
}
.dncg-autocomplete-text { color: var(--blue-text); font-weight: 700; }
.dncg-autocomplete-meta {
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* =============================================================================
   2. Search form (the [dncg_search_form] shortcode)
   ========================================================================== */
.dncg-search-form { position: relative; }
.dncg-search-input-wrapper {
  display: flex;
  gap: 0.6rem;
  position: relative;
}
.dncg-search-input {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 1.3rem;
  color: var(--text);
  background: var(--surface);
  padding: 0.9rem 1.2rem;
  border: 2px solid var(--line);
  border-radius: var(--radius-pill);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.dncg-search-input:focus {  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(var(--blue-rgb), 0.15);
}
.dncg-search-button {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  background: var(--blue);
  border: 2.5px solid var(--blue);
  border-radius: var(--radius-pill);
  padding: 0.9rem 1.8rem;
  cursor: pointer;
  transition: all var(--transition);
}
.dncg-search-button:hover {
  background: var(--blue-dark);
  border-color: var(--blue-dark);
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* =============================================================================
   3. Results page — rebuilt to design-export/search-results.html.
   A page-title search band, then a two-column (sidebar + grouped results)
   layout. Section colour is carried per-group in --sc. 0 literal colour.
   ========================================================================== */
.dncg-search-results-page { color: var(--ink); }

/* --- Search band (page-title treatment) --- */
.dncg-search-band { position: relative; overflow: hidden; background: var(--page-title-bg); }
.dncg-search-band__media {
  position: absolute; inset: 0; opacity: var(--page-title-media-opacity);
  background:
    linear-gradient(115deg, rgba(var(--tint-rgb), .94) 0%, rgba(var(--tint-rgb), .62) 100%),
    repeating-linear-gradient(135deg, rgba(var(--on-dark-rgb), .10) 0 14px, rgba(var(--on-dark-rgb), .03) 14px 28px);
}
/* padding-inline-start clears an overhanging site logo (--logo-clear, defined in
   the theme's tokens.css: 0 for every brand but UCNL, and 0 below 64em on UCNL
   too). The results band is the first thing under the header, so on UCNL desktop
   the mark hung over "Found N results for ...". Same treatment as the theme's
   .hero-page > .row. */
.dncg-search-band__inner { position: relative; max-width: var(--content-max); margin: 0 auto; padding: 3.2rem var(--page-gutter) 2.8rem; padding-inline-start: calc(var(--page-gutter) + var(--logo-clear)); }
.dncg-search-band__eyebrow { display: flex; align-items: center; gap: 12px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--page-title-eyebrow); margin: 0 0 1rem; }
.dncg-rule-tri { width: 28px; height: 4px; display: block; flex: 0 0 auto; background: var(--rule-tri); }
.dncg-search-band__title { font-family: var(--font-display); font-weight: var(--display-weight); color: var(--page-title-fg); font-size: clamp(2.4rem, 4vw, 3.5rem); line-height: var(--display-lh-hero); letter-spacing: var(--display-track-hero); margin: 0 0 1.4rem; }
.dncg-search-band__title em { color: var(--page-title-em); font-style: normal; }
.dncg-search-band__form { display: flex; gap: 14px; align-items: stretch; max-width: 820px; }
.dncg-search-band__form input { flex: 1 1 auto; min-width: 0; background: var(--white); border: 2px solid var(--white); border-radius: var(--radius-pill); outline: none; font-size: 1.3rem; font-weight: 700; color: var(--navy); padding: 14px 24px; }
.dncg-search-band__form input:focus { border-color: var(--accent-on-dark); }
.dncg-search-band__form button { flex: 0 0 auto; cursor: pointer; border: 0; background: var(--btn-accent-bg); color: var(--btn-accent-text); font-weight: 700; font-size: var(--fs-min); padding: 14px 34px; border-radius: var(--radius-pill); }
.dncg-search-band__notice { margin-top: 1.4rem; font-size: var(--fs-min); color: var(--page-title-muted); }
.dncg-search-band__notice a { color: var(--page-title-eyebrow); font-weight: 700; }

/* "People often search for" chips: real demand data on the empty and
   no-results states. Band variant sits on the dark title band; --onlight
   sits inside the no-results card. */
.dncg-popular { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 1.6rem; }
.dncg-popular__label { font-size: var(--fs-min); font-weight: 700; color: var(--page-title-muted); }
.dncg-popular__chip { font-size: var(--fs-min); font-weight: 700; color: var(--page-title-fg); text-decoration: none; border: 1px solid var(--page-title-muted); border-radius: var(--radius-pill); padding: .35rem 1rem; }
.dncg-popular__chip:hover { border-color: var(--page-title-fg); }
.dncg-popular--onlight .dncg-popular__label { color: var(--muted); }
.dncg-popular--onlight .dncg-popular__chip { color: var(--navy); border-color: var(--line); }
.dncg-popular--onlight .dncg-popular__chip:hover { border-color: var(--accent); }

/* --- Layout: sidebar + results (non-sticky) --- */
.dncg-search-layout { max-width: var(--content-max); margin: 0 auto; padding: 2.6rem var(--page-gutter) 3.6rem; display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 2.6rem; align-items: start; }
.dncg-search-layout--single { grid-template-columns: 1fr; max-width: 900px; }

/* --- Sidebar --- */
.dncg-search-sidebar { display: flex; flex-direction: column; gap: 1.2rem; }
.dncg-jump-nav { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--light); padding: 1.5rem 1.6rem; }
.dncg-jump-nav h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; color: var(--navy); margin: 0 0 1.1rem; }
.dncg-jump-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.dncg-jump-nav a { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--sc, var(--accent)); border-radius: 8px; padding: .9rem 1rem; }
.dncg-jump-nav a:hover { border-color: var(--sc, var(--accent)); }
.dncg-jump-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min); color: var(--navy); line-height: 1.25; }
.dncg-jump-count { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-min); font-weight: 700; color: var(--white); background: var(--sc, var(--accent)); min-width: 34px; text-align: center; padding: 4px 10px; border-radius: var(--radius-pill); }
.dncg-jump-note { margin: 1.1rem 0 0; border-top: 1px solid var(--line); padding-top: 1rem; font-size: var(--fs-min); color: var(--muted); }
.dncg-career-facet { border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--light); padding: 1.5rem 1.6rem; }
.dncg-career-facet h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5rem; color: var(--navy); margin: 0 0 1.1rem; }
.dncg-career-facet ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.dncg-career-facet a { display: flex; align-items: center; gap: 12px; text-decoration: none; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--aud-employers); border-radius: 8px; padding: .9rem 1rem; }
.dncg-career-facet a:hover { border-color: var(--aud-employers); }
.dncg-facet-label { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min); color: var(--navy); line-height: 1.25; }
.dncg-facet-count { margin-left: auto; flex: 0 0 auto; font-family: var(--font-mono); font-size: var(--fs-min); font-weight: 700; color: var(--white); background: var(--aud-employers); min-width: 34px; text-align: center; padding: 4px 10px; border-radius: var(--radius-pill); }
.dncg-adviser-card { border: 1px solid var(--line); border-radius: 8px; padding: 1.4rem 1.5rem; }
.dncg-adviser-card--accent { border-left: var(--card-edge) solid var(--aud-advisers); }
.dncg-adviser-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.35rem; color: var(--navy); margin: 0 0 .5rem; }
.dncg-adviser-card p { font-size: var(--fs-min); line-height: 1.6; color: var(--muted); margin: 0 0 .8rem; }
.dncg-adviser-card a { font-size: var(--fs-min); font-weight: 700; color: var(--link); }

/* --- Results column --- */
.dncgsr-results { display: flex; flex-direction: column; gap: 2.6rem; min-width: 0; }

.dncg-rsec--courses { --sc: var(--aud-students); }
.dncg-rsec--careers { --sc: var(--aud-employers); }
.dncg-rsec--events  { --sc: var(--aud-parents); }
.dncg-rsec--info    { --sc: var(--aud-advisers); }
.dncg-rsec--news    { --sc: var(--blue); }
.dncg-rsec__head { display: flex; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--sc); padding-bottom: .9rem; margin-bottom: 1.6rem; }
.dncg-rsec__head h2 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2.1rem; color: var(--navy); margin: 0; }
.dncg-rsec__count { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--muted); }
.dncg-rsec__subhead { font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; color: var(--navy); margin: 1.6rem 0 1rem; }

/* Courses section split (decision 2026-08-05): subjects and courses side by
   side with equal weight on desktop, stacked on narrow screens. auto-fit lets
   a lone column take the full width. */
.dncg-rsec__split { display: grid; grid-template-columns: 1fr; gap: 0 2.4rem; align-items: start; }
.dncg-rsec__col { min-width: 0; }
.dncg-rsec__col .dncg-rsec__subhead { margin-top: 1rem; }
@media (min-width: 64em) {
	.dncg-rsec__split { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
}

/* Badges now appear only in the featured panel, where result types mix and
   the label earns its place. Quieter than the old solid pill. */
.dncg-badge { display: inline-block; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--navy); background: none; border: 1px solid var(--line); padding: 3px 10px; border-radius: var(--radius-pill); }

.dncg-subject-card { border: 1px solid var(--line); border-top: var(--card-edge) solid var(--sc); border-radius: var(--radius-md); padding: 1.9rem 2rem; margin-bottom: 1.6rem; background: var(--light); }
.dncg-subject-card h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; color: var(--navy); margin: 0 0 .7rem; }
.dncg-subject-card__desc { font-size: var(--fs-min); line-height: 1.65; color: var(--ink); max-width: 74ch; margin: 0 0 1.2rem; }
.dncg-subject-card__foot { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.dncg-subject-card__count { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--muted); margin: 0; }

.dncg-course-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .8rem; }
.dncg-course-list a { text-decoration: none; display: flex; align-items: center; gap: 16px; border: 1px solid var(--line); border-left: var(--card-edge) solid var(--sc); border-radius: 8px; padding: 1rem 1.2rem; transition: box-shadow var(--transition); }
.dncg-course-list a:hover { box-shadow: var(--shadow-sm); }
.dncg-course-row__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: .25rem; }
.dncg-course-row__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); line-height: 1.3; }
.dncg-course-row__meta { font-size: var(--fs-min); color: var(--muted); }
.dncg-course-row__go { flex: 0 0 auto; color: var(--link); font-size: 1.3rem; font-weight: 700; }

.dncg-career-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.2rem; }
.dncgsr-career-card { border: 1px solid var(--line); border-top: var(--card-edge) solid var(--sc); border-radius: var(--radius-md); padding: 1.7rem 1.8rem; }
.dncgsr-career-card h3 { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.8rem; line-height: 1.12; color: var(--navy); margin: 0 0 .7rem; max-width: 34ch; }
.dncgsr-career-card__body { font-size: var(--fs-min); line-height: 1.65; color: var(--muted); max-width: 76ch; margin: 0 0 1.1rem; }
.dncg-salary-dl { display: flex; flex-wrap: wrap; gap: 2.2rem; margin: 0 0 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; }
.dncg-salary-dl dt { font-size: var(--fs-meta); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.dncg-salary-dl dd { margin: .2rem 0 0; font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; color: var(--navy); font-variant-numeric: tabular-nums; }
.dncg-routes { background: var(--light); border-radius: 8px; padding: 1.1rem 1.2rem; }
.dncg-routes__label { font-size: var(--fs-min); font-weight: 700; color: var(--navy); margin: 0 0 .7rem; }
.dncg-routes__chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.dncg-routes__chips a { text-decoration: none; border: 2px solid var(--navy); color: var(--navy); background: var(--white); font-size: var(--fs-min); font-weight: 700; padding: 7px 16px; border-radius: var(--radius-pill); }
.dncg-routes__chips a:hover { background: var(--navy); color: var(--white); }

.dncg-adviser-inline { border: 1px solid var(--line); border-left: var(--card-edge) solid var(--aud-advisers); border-radius: 8px; background: var(--light); padding: 1.2rem 1.4rem; margin-bottom: 1.6rem; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.dncg-adviser-inline p { font-size: var(--fs-min); line-height: 1.55; color: var(--ink); margin: 0; }
.dncg-adviser-inline a { font-size: var(--fs-min); font-weight: 700; color: var(--link); }

.dncg-info-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; }
.dncg-info-card { border: 1px solid var(--line); border-top: var(--card-edge) solid var(--sc); border-radius: var(--radius-md); padding: 1.6rem 1.7rem; display: flex; flex-direction: column; align-items: flex-start; gap: .7rem; }
.dncg-info-card h3 { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; line-height: 1.2; color: var(--navy); margin: 0; }
.dncg-info-card__meta { font-family: var(--font-mono); font-size: var(--fs-min); color: var(--muted); margin: 0; }
.dncg-info-card__body { font-size: var(--fs-min); line-height: 1.6; color: var(--muted); margin: 0; }
.dncg-info-card .dncgsr-btn { margin-top: auto; }

.dncg-viewall { margin-top: 1.1rem; display: flex; align-items: center; justify-content: center; gap: 10px; text-decoration: none; background: var(--light); border: 1px solid var(--line); border-radius: 8px; padding: 1.1rem; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.dncg-viewall:hover { border-color: var(--navy); }

/* --- Featured / boosted panel (not in the prototype) --- */
.dncg-featured { border: 1px solid var(--line); border-top: 4px solid var(--accent); border-radius: var(--radius-md); background: var(--light); padding: 1.6rem 1.8rem; box-shadow: var(--shadow-sm); }
.dncg-featured__eyebrow { display: flex; align-items: center; gap: 8px; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--link); margin: 0 0 1rem; }
.dncg-featured__eyebrow svg { color: var(--accent); }
.dncg-featured__message { font-size: var(--fs-min); color: var(--ink); margin: 0 0 1rem; }
.dncg-featured__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .7rem; }
.dncg-featured__list a { text-decoration: none; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--white); border: 1px solid var(--line); border-radius: 8px; padding: 1rem 1.2rem; }
.dncg-featured__list a:hover { border-color: var(--accent); }
.dncg-badge--featured { border-color: var(--accent); color: var(--accent); }
.dncg-featured__title { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; color: var(--navy); }
.dncg-featured__desc { flex: 1 1 100%; font-size: var(--fs-min); color: var(--muted); }
.dncg-featured__go { margin-left: auto; color: var(--link); font-weight: 700; font-size: 1.3rem; }

/* --- Buttons (scoped to the results page) --- */
.dncgsr-btn { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 700; font-size: var(--fs-min); padding: 12px 24px; border-radius: var(--radius-pill); border: 2px solid transparent; cursor: pointer; }
.dncgsr-btn--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-bg); }
.dncgsr-btn--primary:hover { background: var(--link-hover); border-color: var(--link-hover); }
.dncgsr-btn--accent { background: var(--btn-accent-bg); color: var(--btn-accent-text); border-color: var(--btn-accent-bg); }
.dncgsr-btn--ghost { background: transparent; color: var(--white); border-color: rgba(var(--on-dark-rgb), .6); }

/* --- Nothing / empty panel --- */
.dncg-nothing { background: var(--navy); color: var(--white); border-radius: var(--radius-md); padding: 2rem 2.2rem; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.dncg-nothing h2 { color: var(--white); font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.9rem; margin: 0 0 .5rem; }
.dncg-nothing p { font-size: var(--fs-min); line-height: 1.6; color: rgba(var(--on-dark-rgb), .85); margin: 0; max-width: 60ch; }
.dncg-nothing__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.dncg-nothing--empty { background: var(--surface-dark); }

/* --- Responsive --- */
@media (max-width: 64em) {
  .dncg-search-layout { grid-template-columns: 1fr; }
  .dncg-info-grid { grid-template-columns: 1fr; }
  .dncg-search-band__form { flex-wrap: wrap; }
}
/* ============================================================================
   DN Colleges Group — base-theme token layer
   ----------------------------------------------------------------------------
   Ported from design-export/tokens.css (the approved design). TWO default
   layers in :root, then a COMPAT appendix:

     1. BASE      structural tokens shared by all six sites.
     2. DNCG      the group palette, carried in :root as the default so a page
                  with no data-brand still resolves to real values.
     3. COMPAT    tokens consumed by CSS the export does not replace (HPC
                  sub-brand, Foundation, Parvus, campaign_hero art direction,
                  status colours, the neutral scale, pre-port structural
                  aliases). Disjoint from layers 1-2. Retire per entry as the
                  consuming CSS is ported.

   The six [data-brand] blocks live in the six child css/tokens.css files.
   data-brand is emitted on <html> (header.php); nothing here relies on the
   :root default except a page that failed to set it.
   ========================================================================== */

:root{
  /* type — body face is Open Sans on every site */
  --font-body:"Open Sans",system-ui,sans-serif;
  --font-mono:ui-monospace,Menlo,SFMono-Regular,monospace;
  --fs-min:1.1rem;                 /* baseline + hard floor: 17.6px, nothing smaller */

  /* space + layout */
  --space-section:5rem; --space-section-sm:3.5rem; --gap-grid:1.3rem;
  --pad-card:1.9rem; --pad-panel:2.1rem 2.3rem;
  --content-max:1320px; --content-max-narrow:820px; --measure:62ch;
  --page-gutter:46px; --page-width:1440px;

  /* radii, elevation, motion, structure */
  /* --radius-pill was a full 999px pill; softened to rounded corners (buttons,
     chips, badges, search fields read as rounded rects, not fully circled). */
  --radius-sm:8px; --radius-md:14px; --radius-lg:20px; --radius-pill:12px;
  --shadow-sm:0 2px 8px rgba(15,37,47,.08);
  --shadow-md:0 6px 22px rgba(15,37,47,.1);
  --shadow-lg:0 18px 50px rgba(15,37,47,.16);
  --transition:320ms cubic-bezier(.4,0,.2,1);
  --ease-out:cubic-bezier(.2,.7,.3,1);
  --card-edge:3px; --card-edge-hover:7px;

  /* neutrals + image placeholders (structural) */
  --white:#ffffff; --black:#000000; --page-bg:#dfe4e6;
  --ph-stripe-a:#e4e9eb; --ph-stripe-b:#eff3f4; --ph-ink:#7a8792;
  --neutral-400:#8a97a0; --neutral-500:#767676; --box-border:#cfd6da;
  /* Border for a control whose OWN fill matches its surface, so the border is
     the only thing identifying the control (WCAG 1.4.11 needs 3:1 there).
     --box-border (1.47:1 on white) and --line (1.24:1) are hairline/decorative
     weights and stay as they are; this is the interactive weight. 3.50:1 on white. */
  --control-border:#7d8b95;
  /* Focus indicator pair. Deliberately NOT brand colours: the ring has to work on
     every ground the theme paints, and a brand accent cannot. Children should
     leave these alone unless they can prove 3:1 on both their light and dark
     surfaces. */
  --focus-ring:#10181d;   /* dark ring: carries contrast on light grounds */
  --focus-halo:#ffffff;   /* light halo: carries contrast on dark grounds */

  /* Foreground channel for text, hairlines and fills drawn ON a dark component
     surface (dark bg-* grounds, dark panels, heroes, footer). White by default;
     a surface that flips light overrides this channel so the alpha ramp inverts
     with it. Same mechanism as --tint-rgb. Used as rgba(var(--on-dark-rgb), a). */
  --on-dark-rgb:255,255,255;

  /* logo box — constrained by HEIGHT; intrinsic ratio sets the width, so no
     lockup can ever squash. Each brand picks a height for optical parity. */
  --logo-height:54px; --logo-max-width:200px;
  /* Portrait-lockup escape hatch. Five of the six lockups are landscape and sit
     happily inside the bar; UCNL's is the only portrait one (200x302), and at a
     height that fits the bar it shrinks to a stamp. Rather than special-case a
     brand in base-theme, the bar can let a mark HANG BELOW it: --logo-overhang
     is how far it drops, --logo-clear is the room the content underneath must
     leave for it, and the panel pair gives it a ground to sit on once it is over
     page content rather than over the header. All inert at these defaults, so
     the five landscape brands render exactly as before. */
  --logo-overhang:0px; --logo-clear:0px;
  --logo-panel:transparent; --logo-pad:0;

  /* the type floor, as a usable token: eyebrows, meta and mono labels all sit on it */
  --fs-eyebrow:var(--fs-min); --fs-meta:var(--fs-min); --fs-mono:var(--fs-min);

  /* Accent order. Each brand lists its secondaries in the order they should be
     reached for; --accent is the first, --accent-on-dark is whichever member
     survives on a dark band. Stating the ramp stops the last-choice colour
     becoming the default just because it happens to contrast. */
  --accent-1:var(--blue); --accent-2:var(--magenta); --accent-3:var(--lime);

  /* display emphasis — <em>/<strong> inside a title. The direction leans on
     this: one clause set in the brand's emphasis colour (and italic where the
     face has a real italic) so titles carry a voice rather than a weight. */
  --em-style:italic; --em-weight:inherit; --em-color:var(--display-em);
  /* The TEXT step of the emphasis colour. --display-em is a brand colour doing
     the emphasis-inside-headings job, where the type is large display and 3:1
     applies. Small text roles (the eyebrow) need 4.5:1 on both --white and
     --light, which a raw brand colour does not always reach. Ratified rule:
     brand colours are for fills, large display type and non-text UI; text roles
     ride a -text step (decisions.md, Phase 3 rulings). Defaults to --display-em
     because five of the six brands already clear 4.5:1 on both grounds; only a
     brand that fails overrides it. */
  --display-em-text:var(--display-em);
  --page-title-em:var(--accent-on-dark);   /* emphasis ON the title band — follows the band, not the page */
  --strong-color:var(--display-em);

  /* chrome + page-title + search grounds. Dark by default (the college brands
     carry campus imagery here); a brand can flip the whole set to light. */
  --chrome-bg:var(--light); --chrome-fg:var(--ink);
  --page-title-bg:var(--navy-deep);
  --page-title-fg:var(--white);
  --page-title-muted:rgba(255,255,255,.86);
  --page-title-eyebrow:var(--accent-on-dark);
  --page-title-media-opacity:1;
  --search-bg:var(--navy-deep);
  --search-fg:var(--white);
  --search-muted:rgba(255,255,255,.82);
  --search-accent:var(--accent-on-dark);   /* typed term + underline */
  --page-title-rule:rgba(255,255,255,.22);      /* hairlines drawn on the band */
  --page-title-border:rgba(255,255,255,.4);     /* control borders on the band */
  --page-title-ph-a:rgba(255,255,255,.18);      /* image placeholder, on-band */
  --page-title-ph-b:rgba(255,255,255,.08);

  /* header treatment — a brand decides whether its bar is dark or white */
  --header-bg:var(--navy-deep);
  --header-fg:var(--white);
  --header-fg-muted:rgba(255,255,255,.86);
  --header-border:rgba(255,255,255,.12);
  --header-logo-filter:brightness(0) invert(1);
  /* The DN Colleges Group lockup is a SHARED asset drawn in white, so unlike the
     per-site logo it can never be left untreated: on a white bar it would be
     white on white. It therefore needs its own channel — a brand whose site logo
     must keep its colours (--header-logo-filter:none) still has to force this
     one to the bar's foreground. brightness(0) = black, brightness(0) invert(1)
     = white. Every brand that restates its header treatment must restate this. */
  --header-group-logo-filter:brightness(0) invert(1);
  /* Ground for the full-width utility strip: the header bar lifted 5% toward its
     own foreground. Derived rather than declared so it follows a brand whichever
     way that brand's bar runs — 5% white on the three dark bars, 5% navy on the
     three white ones — and no child has to restate it. Engines without
     color-mix() drop it and the strip is separated by its hairline alone. */
  --header-utility-bg:color-mix(in srgb, var(--header-fg) 5%, var(--header-bg));

  /* group-wide audience wayfinding — identical on all six sites */
  --aud-students:#0066a4; --aud-parents:#b8103c; --aud-employers:#7a8a00;
  --aud-employers-text:#5f6b00; --aud-advisers:#2d8659;

  /* Summer of Skills campaign palette — campaign-owned, not brand-owned. The
     gradient ends, the cream-button label ink and the date-chip scrim are all
     campaign colours; they must NOT follow the brand, so they live here and the
     scrim uses its own channel rather than --tint-rgb (which is per-brand). */
  --sos-teal:#1a7683; --sos-teal-deep:#125c68; --sos-cream:#f6e3a0; --sos-sky:#5cc4cf;
  --sos-gold:#f2c94c; --sos-blue:#0d8fc9; --sos-ink:#16333d; --sos-scrim-rgb:15,37,47;
  /* SoS below-hero surfaces (stats/cards/contact): pale cream ground, warm card
     hairline, and the deep-sea teal as an rgb channel for focus glows. */
  --sos-cream-pale:#fff8ec; --sos-line:#ece6d6; --sos-teal-rgb:26,118,131;
}

/* ------------------------- 2. BRAND — DNCG (default) ---------------------- */
:root{
  --navy:#1a3a4a; --navy-deep:#0f252f;
  --blue:#0066a4; --blue-dark:#005488;
  --magenta:#b8103c; --magenta-dark:#8f0c2e; --magenta-rgb:184,16,60;
  --lime:#c4d600; --lime-dark:#8f9c00;
  --dblue:#2d5a6b;
  --light:#f6f7f8; --line:#e3e7ea; --ink:#1a2226; --muted:#4d5a61;
  --tint-rgb:15,37,47;             /* overlay / scrim tint */

  --surface-dark:var(--navy); --surface-dark-alt:var(--navy-deep);
  --surface-brand:var(--magenta); --surface-blue:var(--blue); --surface-muted:#343735;
  --text-heading:var(--navy);
  --link:var(--magenta); --link-hover:var(--magenta-dark);
  /* order: blue → magenta → lime. Lime is the third choice, not the default;
     it holds --accent-on-dark only because blue and magenta both go muddy
     against the navy bands. */
  --accent-1:var(--blue); --accent-2:var(--magenta); --accent-3:var(--lime);
  --accent:var(--accent-1);                /* blue leads */
  --accent-on-dark:var(--accent-3);        /* lime, and only on dark grounds */
  --display-em:var(--magenta);

  --btn-primary-bg:var(--link); --btn-primary-text:var(--white);
  --btn-accent-bg:var(--accent); --btn-accent-text:var(--white);   /* white on blue = 6.11:1 */

  --logo-height:24px; --logo-max-width:350px;   /* 256x18 · 14.2:1 strip lockup */
  --hero-tint:var(--navy);           /* colour multiplied over greyscale footage */

  --header-bg:var(--white);
  --header-fg:var(--navy);
  --header-fg-muted:var(--muted);
  --header-border:var(--line);
  --header-logo-filter:none;
  --header-group-logo-filter:brightness(0);   /* white lockup, white bar — must be darkened */

  --font-display:"Open Sans",system-ui,sans-serif;
  --display-weight:800; --display-case:none;
  --display-track:-.018em; --display-track-hero:-.03em;
  --display-lh:.98; --display-lh-hero:.96;
}

/* ------------------------------- 3. COMPAT -------------------------------- */
:root{
  /* structural aliases → export equivalents (pre-port component/block CSS) */
  --surface:var(--white); --surface-alt:var(--light); --light-grey:var(--light);
  --text:var(--ink); --text-muted:var(--muted);
  /* Heading emphasis ON a dark/brand ground. Defaults to the on-dark text colour
     so it is always AA; a child may substitute a brand accent that measures 3:1
     on that child's own --surface-brand / --surface-blue fills. */
  --display-em-on-dark:var(--text-on-dark);
  /* Label that reads ON --accent. Distinct from --btn-accent-text, which partners
     --btn-accent-bg: where a child points --accent and --btn-accent-bg at
     different colours (nlc: magenta vs teal) the two labels are not interchangeable.
     Defaults to the button label; a child overrides when its --accent is dark. */
  --accent-text:var(--btn-accent-text);
  --text-on-dark:var(--white); --text-on-brand:var(--white);
  --brand:var(--navy);
  --radius:14px;                 /* pre-port name for --radius-md */
  --gap-grid-lg:1.6rem;
  --hair:1px solid var(--line);
  --rule-tri:linear-gradient(90deg, var(--aud-students) 0 33.33%, var(--aud-parents) 33.33% 66.66%, var(--aud-employers) 66.66% 100%);

  /* palette extras: audience 4th, employer UI green, greens, status */
  --blue-text:var(--blue);
  --green:#7a8a00; --green-dark:#5f6b00;
  --aud-parents-dark:#8f0c2e;
  --aud-advisers-dark:#236b46;
  --aud-students-tint:#f0f7fa;
  --employer:#357a38; --employer-dark:#2a6030;
  --amber:#b45309; --amber-deep:#92400e;
  --success:#166534; --success-tint:#dcfce7; --success-tint-2:#bbf7d0;
  /* --success existed but its counterparts did not, so dncg-pathways' alias block
     (--dncg-warning / --dncg-error) resolved to an empty string and its warning and
     error UI rendered with no colour at all. Both are set at the same weight as
     --success: dark enough to be body text on white (--warning 4.85:1,
     --danger 5.94:1). Semantic status colours, not brand; review if that is wrong. */
  --warning:#8a5300; --warning-tint:#fef3c7;
  --danger:#b3261e;  --danger-tint:#fee2e2;

  /* home hero search (page-home template) */
  --hero-search-accent:var(--blue); --hero-search-accent-hover:var(--blue-dark); --hero-search-badge:none;

  /* RGB channels for pre-port rgba() overlays (DNCG values; per-brand
     overrides reconciled in Stage 6 alongside data-brand verification) */
  --shadow-rgb:15,37,47;
  --surface-dark-rgb:26,58,74; --surface-dark-alt-rgb:15,37,47;
  --surface-brand-rgb:184,16,60; --surface-blue-rgb:0,102,164;
  --accent-rgb:0,102,164; --blue-rgb:0,102,164;   /* DNCG --accent is blue (was stale lime) */
  --navy-rgb:26,58,74; --navy-deep-rgb:15,37,47; --dblue-rgb:45,90,107;
  --aud-parents-rgb:184,16,60; --aud-employers-rgb:122,138,0; --aud-advisers-rgb:45,134,89;
  --overlay-light-rgb:255,255,255;

  /* neutral scale (Stage 3 grey collapse) */
  /* --neutral-700 was a hole in the ramp (50,100,200,300,400,500,900) that
     dncg-pathways referenced, so --dncg-gray-700/800 resolved empty. */
  --neutral-50:#f8f9fa; --neutral-100:#eeeeee; --neutral-200:#e0e0e0; --neutral-300:#cacaca; --neutral-700:#3f3f3f; --neutral-900:#1a1a1a;

  /* Faces consumed by pre-port CSS that the export does not replace. Named for
     ROLE, not typeface, so a brand can substitute without the name lying. The
     stacks are the originals, character for character, including the spacing
     after each comma: these are a rename, not a redesign, and nothing about
     which typeface renders has changed.

     They live here, in :root, for the same reason every other font token does —
     a child's [data-brand] block can override them and the cascade resolves on
     <html> where the rest of the palette resolves. */

  /* HPC sub-brand faces (ucdon page-hpc.php; css/templates/hpc.css).
     UCDon must keep rendering Magistral exactly as it does now: no child
     overrides these, so the computed stack is unchanged. */
  --hpc-font-display: "Magistral", sans-serif;      /* h2-h5 on the HPC template */
  --hpc-font-quote-mark: Georgia, "Times New Roman", serif;   /* the big decorative " */
  /* One quote mark was authored with a shorter fallback than the other two.
     Kept as its own token rather than folded into the one above, because
     merging them would change a computed stack. They differ only in what shows
     when Georgia is missing; collapse them if that is signed off. */
  --hpc-font-quote-mark-sm: Georgia, serif;
  /* HPC's own general and mono faces. These were declared inside hpc.css as
     bare `--font-display` and `--font-mono`, which SHADOWED the global tokens
     of those names for the whole page — including the shared header and footer,
     which page-hpc.php renders. Named for their role and moved here so the
     literal stacks sit in the token layer with every other typeface. Values are
     verbatim; nothing about what renders on the HPC template changed. */
  --hpc-font-sans: sans-serif;              /* HPC UI/general face, NOT Magistral */
  --hpc-font-mono: "Space Mono", monospace; /* stat readouts, labels, timers */

  /* [testimonial] shortcode suite (css/testimonial-shortcode.css). Group-wide,
     on all six sites. */
  --sc-font-name: "Nove", "Arial Black", sans-serif;      /* attribution names */
  --sc-font-quote: "Source Serif Pro", Georgia, serif;    /* the quote body */
  --sc-font-quote-mark: "Nove", Georgia, serif;           /* the decorative " */

  /* HPC sub-brand (ucdon page-hpc.php; css/templates/hpc.css) */
  --hpc-bg-deep:#0d1117; --hpc-bg-deep-rgb:13,17,23;
  --hpc-bg-primary:#111827; --hpc-bg-primary-rgb:17,24,39;
  --hpc-bg-elevated:#1a2332; --hpc-bg-teal:#0f2a3d;
  --hpc-cyan:#00bcd4; --hpc-cyan-bright:#26c6da; --hpc-cyan-rgb:0,188,212;
  --hpc-blue:#2196f3; --hpc-blue-rgb:33,150,243;
  --hpc-text-primary:#f0f4f8; --hpc-text-secondary:#94a3b8; --hpc-text-muted:#64748b;

  /* campaign_hero art direction (pagebuilder/campaign_hero) */
  --ch-teal-top:#6fd0d6; --ch-teal-bottom:#62c3cd; --ch-sand:#fae4a4; --ch-foam-1:#eaf6f1; --ch-foam-2:#a9dedf;
}
/* ============================================================================
   North Lindsey College — child token layer
   ----------------------------------------------------------------------------
   The one [data-brand] block for this site, ported verbatim from the approved
   design (design-export/tokens.css). This is the ONLY colour a child theme
   sets; base-theme/css/tokens.css carries the base + DNCG default and every
   semantic alias. data-brand="nlc" is emitted on <html> by header.php.
   ========================================================================== */

[data-brand="nlc"]{
  --logo-height:56px; --logo-max-width:220px;   /* 162x43 · 3.77:1 → 211px wide */
  --navy:#025577; --navy-deep:#013b53;
  --blue:#025577; --blue-dark:#013b53;
  --magenta:#c9002f; --magenta-dark:#a30026; --magenta-rgb:201,0,47;
  --lime:#c4d600; --lime-dark:#8f9c00;
  --dblue:#0a6f92; --teal:#00c4cc;
  /* NLC does NOT use lime — the palette slot takes the brand teal, so nothing
     that references --lime/--accent has to change. Order: magenta → teal. */
  --lime:#00c4cc; --lime-dark:#009aa1;
  --accent-1:var(--magenta); --accent-2:var(--teal); --accent-3:var(--teal);
  --accent:var(--accent-1);
  --accent-on-dark:var(--teal);            /* 5.2:1 on --navy-deep at display size */
  --btn-accent-bg:var(--teal); --btn-accent-text:var(--navy-deep);
  /* Search-hero "Type here" tooltip. The headline emphasis is teal on this
     ground, so the tooltip carries the magenta instead and keeps NLC's primary
     colour present in the hero. White on #c9002f is 5.9:1. */
  --hero-tooltip-bg:var(--magenta); --hero-tooltip-text:var(--white);
  /* nlc is the one brand whose --accent (magenta) is NOT its --btn-accent-bg
     (teal), so the button's navy label cannot be reused on accent fills:
     navy on magenta measured 2.01:1. White on magenta measures 5.96:1. */
  --accent-text:var(--white);
  --light:#f3f7f9; --ink:#12232b; --muted:#4b5c65;
  --tint-rgb:1,59,83;
  --hero-tint:var(--navy);
  --header-bg:var(--navy-deep); --header-fg:var(--white);
  --header-fg-muted:rgba(255,255,255,.86); --header-border:rgba(255,255,255,.12);
  --header-logo-filter:brightness(0) invert(1);
  --header-group-logo-filter:brightness(0) invert(1);   /* shared white lockup, dark bar */
  /* Chrome and titles: NAVY ground, MAGENTA accent text. Flat brand magenta
     #c9002f is 2.96:1 on #013b53, so text-bearing accents take the lighter
     magenta tint (6.1:1). Flat magenta still does fills, links and rules. */
  --magenta-light:#ff6b85;
  --chrome-bg:var(--light);
  --page-title-bg:var(--navy-deep);
  --page-title-fg:var(--white);
  --page-title-muted:rgba(255,255,255,.86);
  --page-title-eyebrow:var(--magenta-light);
  --page-title-em:var(--magenta-light);
  --page-title-media-opacity:1;
  --search-bg:var(--navy-deep);
  --search-fg:var(--white);
  --search-muted:rgba(255,255,255,.85);
  --search-accent:var(--magenta-light);

  --em-style:normal; --em-weight:800;
  --font-display:"program","Open Sans",system-ui,sans-serif;
  --display-weight:700; --display-track:-.02em; --display-track-hero:-.028em;
  /* per-brand -rgb channels for surviving CSS overlays (HPC, templates,
     slider, testimonial-shortcode). Computed from this brand's palette. */
  --surface-dark-rgb: 2, 85, 119;
  --surface-dark-alt-rgb: 1, 59, 83;
  --surface-brand-rgb: 201, 0, 47;
  --surface-blue-rgb: 2, 85, 119;
  --accent-rgb: 201, 0, 47;
  --link-rgb: 201, 0, 47;
  --blue-rgb: 2, 85, 119;
  --navy-rgb: 2, 85, 119;
  --navy-deep-rgb: 1, 59, 83;
  --dblue-rgb: 10, 111, 146;
  --text-rgb: 18, 35, 43;
}

[data-brand="nlc"] [data-emphasis="focal"]{
  --page-title-bg:var(--magenta);
  --page-title-fg:var(--white);
  --page-title-muted:rgba(255,255,255,.9);
  /* Navy-deep on magenta measures 2.01:1 — it cannot carry text. Emphasis is
     WHITE (underlined so it still reads as emphasis) and navy-deep moves to the
     non-text elements: the rule, the underline and chip fills. */
  --page-title-eyebrow:var(--white);
  --page-title-em:var(--white);
  --page-title-em-rule:var(--navy-deep);
  --page-title-media-opacity:0;
  --search-bg:var(--magenta);
  --search-fg:var(--white);
  --search-muted:rgba(255,255,255,.88);
  --search-accent:var(--white);
  --accent-on-dark:var(--white);
}
/*
 * foundation.css - the theme's structural CORE: normalise + float grid +
 * layout/visibility/a11y utilities. THEME-OWNED now, not vendor. Keep colour as
 * var(--token).
 *
 * PROVENANCE: began as the compiled Foundation for Sites 6.6.3 region of
 * sites/dc/dc-child/style.css (the build that renders live). Progressively
 * unwired from the framework:
 *   - Phase 3c-1 removed Foundation's button / form / card / table components;
 *     the shared components (buttons.css, forms.css, card.css, typography.css)
 *     own those. What remains: normalise, the float grid, visibility, float,
 *     text-align, breadcrumbs, responsive-embed and pagination.
 *   - Foundation's JavaScript is NOT enqueued anywhere (see functions.php).
 *     Interactions live in scripts/app.js and the per-block scripts.
 *   - Phase 3.5 unwire: every literal hex tokenised to var(--token); the
 *     Foundation default link colour is neutralised in foundation-overrides.css.
 *
 * The float grid (.row / .columns / .small|medium|large-*) is load-bearing
 * across all 53 blocks and every template — do not remove it. Accessibility
 * helpers (.show-for-sr et al.) also live in base.css, which is the single
 * source of truth; the copy kept here is harmless (base.css loads later).
 */

/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
}

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

hr {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
}

pre {
  font-family: monospace, monospace;
  font-size: 1em;
}

a {
  background-color: transparent;
}

abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted;
}

b,
strong {
  font-weight: bolder;
}

code,
kbd,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* normalize shipped these at 80% and 75%, which on 1.1rem body copy (body is
   --fs-min) computes to 0.88rem and 0.825rem. Both breach the floor (hard rule 2, "everywhere,
   no exceptions"). Pinned to the token instead. The raised/lowered position of
   sub and sup is geometry, not size, so it is untouched. */
small {
  font-size: var(--fs-min);
}

sub,
sup {
  font-size: var(--fs-min);
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

img {
  border-style: none;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  font-size: 100%;
  line-height: 1.15;
  margin: 0;
}

button,
input {
  overflow: visible;
}

button,
select {
  text-transform: none;
}

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

legend {
  box-sizing: border-box;
  color: inherit;
  display: table;
  max-width: 100%;
  padding: 0;
  white-space: normal;
}

progress {
  vertical-align: baseline;
}

textarea {
  overflow: auto;
}

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  padding: 0;
}

[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

[type="search"] {
  -webkit-appearance: textfield;
  outline-offset: -2px;
}

[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

::-webkit-file-upload-button {
  -webkit-appearance: button;
  font: inherit;
}

details {
  display: block;
}

summary {
  display: list-item;
}

template {
  display: none;
}

[hidden] {
  display: none;
}

.foundation-mq {
  font-family: "small=0em&medium=40em&smallland=41.6875em&large=64em&slarge=67.5em&xlarge=87.5em&xxlarge=100em";
}

html {
  box-sizing: border-box;
  font-size: 100%;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  margin: 0;
  padding: 0;
  background: var(--white);
  /* Was a literal `"source-sans-3", sans-serif` — Doncaster's old body face,
     leaking group-wide from the fork's origin, and not a token on any site.
     Currently INERT: css/base.css loads later and sets
     `body { font-family: var(--font-body) }` at the same specificity, so it
     already wins. Tokenised anyway, because a literal typeface here is one
     load-order change away from putting every brand in Doncaster's face. */
  font-family: var(--font-body);
  font-weight: 400;
  line-height: 1.5;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img {
  display: inline-block;
  vertical-align: middle;
  max-width: 100%;
  height: auto;
  -ms-interpolation-mode: bicubic;
}

textarea {
  height: auto;
  min-height: 50px;
  border-radius: 0;
}

select {
  box-sizing: border-box;
  width: 100%;
  border-radius: 0;
}

.map_canvas img,
.map_canvas embed,
.map_canvas object,
.mqa-display img,
.mqa-display embed,
.mqa-display object {
  max-width: none !important;
}

button {
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 0;
  background: transparent;
  line-height: 1;
  cursor: auto;
}
[data-whatinput="mouse"] button {
  outline: 0;
}

pre {
  overflow: auto;
}

button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

.is-visible {
  display: block !important;
}

.is-hidden {
  display: none !important;
}

.row {
  max-width: 75rem;
  margin-right: auto;
  margin-left: auto;
}
.row::before,
.row::after {
  display: table;
  content: " ";
  flex-basis: 0;
  order: 1;
}
.row::after {
  clear: both;
}
.row.collapse > .column,
.row.collapse > .columns {
  padding-right: 0;
  padding-left: 0;
}
.row .row {
  margin-right: -0.9375rem;
  margin-left: -0.9375rem;
}
@media print, screen and (min-width: 40em) {
  .row .row {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
@media print, screen and (min-width: 64em) {
  .row .row {
    margin-right: -0.9375rem;
    margin-left: -0.9375rem;
  }
}
.row .row.collapse {
  margin-right: 0;
  margin-left: 0;
}
.row.expanded {
  max-width: none;
}
.row.expanded .row {
  margin-right: auto;
  margin-left: auto;
}
.row:not(.expanded) .row {
  max-width: none;
}
.row.gutter-small > .column,
.row.gutter-small > .columns {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

.column,
.columns {
  width: 100%;
  float: left;
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}
.column,
.columns,
.column:last-child:not(:first-child) {
  float: left;
  clear: none;
}
.column:last-child:not(:first-child),
.columns:last-child:not(:first-child) {
  float: right;
}
.column.end:last-child:last-child,
.end.columns:last-child:last-child {
  float: left;
}

.column.row.row,
.row.row.columns {
  float: none;
}

.row .column.row.row,
.row .row.row.columns {
  margin-right: 0;
  margin-left: 0;
  padding-right: 0;
  padding-left: 0;
}

.small-1 {
  width: 8.3333333333%;
}

.small-push-1 {
  position: relative;
  left: 8.3333333333%;
}

.small-pull-1 {
  position: relative;
  left: -8.3333333333%;
}

.small-offset-0 {
  margin-left: 0%;
}

.small-2 {
  width: 16.6666666667%;
}

.small-push-2 {
  position: relative;
  left: 16.6666666667%;
}

.small-pull-2 {
  position: relative;
  left: -16.6666666667%;
}

.small-offset-1 {
  margin-left: 8.3333333333%;
}

.small-3 {
  width: 25%;
}

.small-push-3 {
  position: relative;
  left: 25%;
}

.small-pull-3 {
  position: relative;
  left: -25%;
}

.small-offset-2 {
  margin-left: 16.6666666667%;
}

.small-4 {
  width: 33.3333333333%;
}

.small-push-4 {
  position: relative;
  left: 33.3333333333%;
}

.small-pull-4 {
  position: relative;
  left: -33.3333333333%;
}

.small-offset-3 {
  margin-left: 25%;
}

.small-5 {
  width: 41.6666666667%;
}

.small-push-5 {
  position: relative;
  left: 41.6666666667%;
}

.small-pull-5 {
  position: relative;
  left: -41.6666666667%;
}

.small-offset-4 {
  margin-left: 33.3333333333%;
}

.small-6 {
  width: 50%;
}

.small-push-6 {
  position: relative;
  left: 50%;
}

.small-pull-6 {
  position: relative;
  left: -50%;
}

.small-offset-5 {
  margin-left: 41.6666666667%;
}

.small-7 {
  width: 58.3333333333%;
}

.small-push-7 {
  position: relative;
  left: 58.3333333333%;
}

.small-pull-7 {
  position: relative;
  left: -58.3333333333%;
}

.small-offset-6 {
  margin-left: 50%;
}

.small-8 {
  width: 66.6666666667%;
}

.small-push-8 {
  position: relative;
  left: 66.6666666667%;
}

.small-pull-8 {
  position: relative;
  left: -66.6666666667%;
}

.small-offset-7 {
  margin-left: 58.3333333333%;
}

.small-9 {
  width: 75%;
}

.small-push-9 {
  position: relative;
  left: 75%;
}

.small-pull-9 {
  position: relative;
  left: -75%;
}

.small-offset-8 {
  margin-left: 66.6666666667%;
}

.small-10 {
  width: 83.3333333333%;
}

.small-push-10 {
  position: relative;
  left: 83.3333333333%;
}

.small-pull-10 {
  position: relative;
  left: -83.3333333333%;
}

.small-offset-9 {
  margin-left: 75%;
}

.small-11 {
  width: 91.6666666667%;
}

.small-push-11 {
  position: relative;
  left: 91.6666666667%;
}

.small-pull-11 {
  position: relative;
  left: -91.6666666667%;
}

.small-offset-10 {
  margin-left: 83.3333333333%;
}

.small-12 {
  width: 100%;
}

.small-offset-11 {
  margin-left: 91.6666666667%;
}

.small-up-1 > .column,
.small-up-1 > .columns {
  float: left;
  width: 100%;
}
.small-up-1 > .column:nth-of-type(1n),
.small-up-1 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-1 > .column:nth-of-type(1n + 1),
.small-up-1 > .columns:nth-of-type(1n + 1) {
  clear: both;
}
.small-up-1 > .column:last-child,
.small-up-1 > .columns:last-child {
  float: left;
}

.small-up-2 > .column,
.small-up-2 > .columns {
  float: left;
  width: 50%;
}
.small-up-2 > .column:nth-of-type(1n),
.small-up-2 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-2 > .column:nth-of-type(2n + 1),
.small-up-2 > .columns:nth-of-type(2n + 1) {
  clear: both;
}
.small-up-2 > .column:last-child,
.small-up-2 > .columns:last-child {
  float: left;
}

.small-up-3 > .column,
.small-up-3 > .columns {
  float: left;
  width: 33.3333333333%;
}
.small-up-3 > .column:nth-of-type(1n),
.small-up-3 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-3 > .column:nth-of-type(3n + 1),
.small-up-3 > .columns:nth-of-type(3n + 1) {
  clear: both;
}
.small-up-3 > .column:last-child,
.small-up-3 > .columns:last-child {
  float: left;
}

.small-up-4 > .column,
.small-up-4 > .columns {
  float: left;
  width: 25%;
}
.small-up-4 > .column:nth-of-type(1n),
.small-up-4 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-4 > .column:nth-of-type(4n + 1),
.small-up-4 > .columns:nth-of-type(4n + 1) {
  clear: both;
}
.small-up-4 > .column:last-child,
.small-up-4 > .columns:last-child {
  float: left;
}

.small-up-5 > .column,
.small-up-5 > .columns {
  float: left;
  width: 20%;
}
.small-up-5 > .column:nth-of-type(1n),
.small-up-5 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-5 > .column:nth-of-type(5n + 1),
.small-up-5 > .columns:nth-of-type(5n + 1) {
  clear: both;
}
.small-up-5 > .column:last-child,
.small-up-5 > .columns:last-child {
  float: left;
}

.small-up-6 > .column,
.small-up-6 > .columns {
  float: left;
  width: 16.6666666667%;
}
.small-up-6 > .column:nth-of-type(1n),
.small-up-6 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-6 > .column:nth-of-type(6n + 1),
.small-up-6 > .columns:nth-of-type(6n + 1) {
  clear: both;
}
.small-up-6 > .column:last-child,
.small-up-6 > .columns:last-child {
  float: left;
}

.small-up-7 > .column,
.small-up-7 > .columns {
  float: left;
  width: 14.2857142857%;
}
.small-up-7 > .column:nth-of-type(1n),
.small-up-7 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-7 > .column:nth-of-type(7n + 1),
.small-up-7 > .columns:nth-of-type(7n + 1) {
  clear: both;
}
.small-up-7 > .column:last-child,
.small-up-7 > .columns:last-child {
  float: left;
}

.small-up-8 > .column,
.small-up-8 > .columns {
  float: left;
  width: 12.5%;
}
.small-up-8 > .column:nth-of-type(1n),
.small-up-8 > .columns:nth-of-type(1n) {
  clear: none;
}
.small-up-8 > .column:nth-of-type(8n + 1),
.small-up-8 > .columns:nth-of-type(8n + 1) {
  clear: both;
}
.small-up-8 > .column:last-child,
.small-up-8 > .columns:last-child {
  float: left;
}

.small-collapse > .column,
.small-collapse > .columns {
  padding-right: 0;
  padding-left: 0;
}
.small-collapse .row {
  margin-right: 0;
  margin-left: 0;
}

.expanded.row .small-collapse.row {
  margin-right: 0;
  margin-left: 0;
}

.small-uncollapse > .column,
.small-uncollapse > .columns {
  padding-right: 0.9375rem;
  padding-left: 0.9375rem;
}

.small-centered {
  margin-right: auto;
  margin-left: auto;
}
.small-centered,
.small-centered:last-child:not(:first-child) {
  float: none;
  clear: both;
}

.small-uncentered,
.small-push-0,
.small-pull-0 {
  position: static;
  margin-right: 0;
  margin-left: 0;
}
.small-uncentered,
.small-uncentered:last-child:not(:first-child),
.small-push-0,
.small-push-0:last-child:not(:first-child),
.small-pull-0,
.small-pull-0:last-child:not(:first-child) {
  float: left;
  clear: none;
}
.small-uncentered:last-child:not(:first-child),
.small-push-0:last-child:not(:first-child),
.small-pull-0:last-child:not(:first-child) {
  float: right;
}

@media print, screen and (min-width: 40em) {
  .medium-1 {
    width: 8.3333333333%;
  }
  .medium-push-1 {
    position: relative;
    left: 8.3333333333%;
  }
  .medium-pull-1 {
    position: relative;
    left: -8.3333333333%;
  }
  .medium-offset-0 {
    margin-left: 0%;
  }
  .medium-2 {
    width: 16.6666666667%;
  }
  .medium-push-2 {
    position: relative;
    left: 16.6666666667%;
  }
  .medium-pull-2 {
    position: relative;
    left: -16.6666666667%;
  }
  .medium-offset-1 {
    margin-left: 8.3333333333%;
  }
  .medium-3 {
    width: 25%;
  }
  .medium-push-3 {
    position: relative;
    left: 25%;
  }
  .medium-pull-3 {
    position: relative;
    left: -25%;
  }
  .medium-offset-2 {
    margin-left: 16.6666666667%;
  }
  .medium-4 {
    width: 33.3333333333%;
  }
  .medium-push-4 {
    position: relative;
    left: 33.3333333333%;
  }
  .medium-pull-4 {
    position: relative;
    left: -33.3333333333%;
  }
  .medium-offset-3 {
    margin-left: 25%;
  }
  .medium-5 {
    width: 41.6666666667%;
  }
  .medium-push-5 {
    position: relative;
    left: 41.6666666667%;
  }
  .medium-pull-5 {
    position: relative;
    left: -41.6666666667%;
  }
  .medium-offset-4 {
    margin-left: 33.3333333333%;
  }
  .medium-6 {
    width: 50%;
  }
  .medium-push-6 {
    position: relative;
    left: 50%;
  }
  .medium-pull-6 {
    position: relative;
    left: -50%;
  }
  .medium-offset-5 {
    margin-left: 41.6666666667%;
  }
  .medium-7 {
    width: 58.3333333333%;
  }
  .medium-push-7 {
    position: relative;
    left: 58.3333333333%;
  }
  .medium-pull-7 {
    position: relative;
    left: -58.3333333333%;
  }
  .medium-offset-6 {
    margin-left: 50%;
  }
  .medium-8 {
    width: 66.6666666667%;
  }
  .medium-push-8 {
    position: relative;
    left: 66.6666666667%;
  }
  .medium-pull-8 {
    position: relative;
    left: -66.6666666667%;
  }
  .medium-offset-7 {
    margin-left: 58.3333333333%;
  }
  .medium-9 {
    width: 75%;
  }
  .medium-push-9 {
    position: relative;
    left: 75%;
  }
  .medium-pull-9 {
    position: relative;
    left: -75%;
  }
  .medium-offset-8 {
    margin-left: 66.6666666667%;
  }
  .medium-10 {
    width: 83.3333333333%;
  }
  .medium-push-10 {
    position: relative;
    left: 83.3333333333%;
  }
  .medium-pull-10 {
    position: relative;
    left: -83.3333333333%;
  }
  .medium-offset-9 {
    margin-left: 75%;
  }
  .medium-11 {
    width: 91.6666666667%;
  }
  .medium-push-11 {
    position: relative;
    left: 91.6666666667%;
  }
  .medium-pull-11 {
    position: relative;
    left: -91.6666666667%;
  }
  .medium-offset-10 {
    margin-left: 83.3333333333%;
  }
  .medium-12 {
    width: 100%;
  }
  .medium-offset-11 {
    margin-left: 91.6666666667%;
  }
  .medium-up-1 > .column,
  .medium-up-1 > .columns {
    float: left;
    width: 100%;
  }
  .medium-up-1 > .column:nth-of-type(1n),
  .medium-up-1 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-1 > .column:nth-of-type(1n + 1),
  .medium-up-1 > .columns:nth-of-type(1n + 1) {
    clear: both;
  }
  .medium-up-1 > .column:last-child,
  .medium-up-1 > .columns:last-child {
    float: left;
  }
  .medium-up-2 > .column,
  .medium-up-2 > .columns {
    float: left;
    width: 50%;
  }
  .medium-up-2 > .column:nth-of-type(1n),
  .medium-up-2 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-2 > .column:nth-of-type(2n + 1),
  .medium-up-2 > .columns:nth-of-type(2n + 1) {
    clear: both;
  }
  .medium-up-2 > .column:last-child,
  .medium-up-2 > .columns:last-child {
    float: left;
  }
  .medium-up-3 > .column,
  .medium-up-3 > .columns {
    float: left;
    width: 33.3333333333%;
  }
  .medium-up-3 > .column:nth-of-type(1n),
  .medium-up-3 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-3 > .column:nth-of-type(3n + 1),
  .medium-up-3 > .columns:nth-of-type(3n + 1) {
    clear: both;
  }
  .medium-up-3 > .column:last-child,
  .medium-up-3 > .columns:last-child {
    float: left;
  }
  .medium-up-4 > .column,
  .medium-up-4 > .columns {
    float: left;
    width: 25%;
  }
  .medium-up-4 > .column:nth-of-type(1n),
  .medium-up-4 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-4 > .column:nth-of-type(4n + 1),
  .medium-up-4 > .columns:nth-of-type(4n + 1) {
    clear: both;
  }
  .medium-up-4 > .column:last-child,
  .medium-up-4 > .columns:last-child {
    float: left;
  }
  .medium-up-5 > .column,
  .medium-up-5 > .columns {
    float: left;
    width: 20%;
  }
  .medium-up-5 > .column:nth-of-type(1n),
  .medium-up-5 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-5 > .column:nth-of-type(5n + 1),
  .medium-up-5 > .columns:nth-of-type(5n + 1) {
    clear: both;
  }
  .medium-up-5 > .column:last-child,
  .medium-up-5 > .columns:last-child {
    float: left;
  }
  .medium-up-6 > .column,
  .medium-up-6 > .columns {
    float: left;
    width: 16.6666666667%;
  }
  .medium-up-6 > .column:nth-of-type(1n),
  .medium-up-6 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-6 > .column:nth-of-type(6n + 1),
  .medium-up-6 > .columns:nth-of-type(6n + 1) {
    clear: both;
  }
  .medium-up-6 > .column:last-child,
  .medium-up-6 > .columns:last-child {
    float: left;
  }
  .medium-up-7 > .column,
  .medium-up-7 > .columns {
    float: left;
    width: 14.2857142857%;
  }
  .medium-up-7 > .column:nth-of-type(1n),
  .medium-up-7 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-7 > .column:nth-of-type(7n + 1),
  .medium-up-7 > .columns:nth-of-type(7n + 1) {
    clear: both;
  }
  .medium-up-7 > .column:last-child,
  .medium-up-7 > .columns:last-child {
    float: left;
  }
  .medium-up-8 > .column,
  .medium-up-8 > .columns {
    float: left;
    width: 12.5%;
  }
  .medium-up-8 > .column:nth-of-type(1n),
  .medium-up-8 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .medium-up-8 > .column:nth-of-type(8n + 1),
  .medium-up-8 > .columns:nth-of-type(8n + 1) {
    clear: both;
  }
  .medium-up-8 > .column:last-child,
  .medium-up-8 > .columns:last-child {
    float: left;
  }
  .medium-collapse > .column,
  .medium-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }
  .medium-collapse .row {
    margin-right: 0;
    margin-left: 0;
  }
  .expanded.row .medium-collapse.row {
    margin-right: 0;
    margin-left: 0;
  }
  .medium-uncollapse > .column,
  .medium-uncollapse > .columns {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
  .medium-centered {
    margin-right: auto;
    margin-left: auto;
  }
  .medium-centered,
  .medium-centered:last-child:not(:first-child) {
    float: none;
    clear: both;
  }
  .medium-uncentered,
  .medium-push-0,
  .medium-pull-0 {
    position: static;
    margin-right: 0;
    margin-left: 0;
  }
  .medium-uncentered,
  .medium-uncentered:last-child:not(:first-child),
  .medium-push-0,
  .medium-push-0:last-child:not(:first-child),
  .medium-pull-0,
  .medium-pull-0:last-child:not(:first-child) {
    float: left;
    clear: none;
  }
  .medium-uncentered:last-child:not(:first-child),
  .medium-push-0:last-child:not(:first-child),
  .medium-pull-0:last-child:not(:first-child) {
    float: right;
  }
}
@media print, screen and (min-width: 64em) {
  .large-1 {
    width: 8.3333333333%;
  }
  .large-push-1 {
    position: relative;
    left: 8.3333333333%;
  }
  .large-pull-1 {
    position: relative;
    left: -8.3333333333%;
  }
  .large-offset-0 {
    margin-left: 0%;
  }
  .large-2 {
    width: 16.6666666667%;
  }
  .large-push-2 {
    position: relative;
    left: 16.6666666667%;
  }
  .large-pull-2 {
    position: relative;
    left: -16.6666666667%;
  }
  .large-offset-1 {
    margin-left: 8.3333333333%;
  }
  .large-3 {
    width: 25%;
  }
  .large-push-3 {
    position: relative;
    left: 25%;
  }
  .large-pull-3 {
    position: relative;
    left: -25%;
  }
  .large-offset-2 {
    margin-left: 16.6666666667%;
  }
  .large-4 {
    width: 33.3333333333%;
  }
  .large-push-4 {
    position: relative;
    left: 33.3333333333%;
  }
  .large-pull-4 {
    position: relative;
    left: -33.3333333333%;
  }
  .large-offset-3 {
    margin-left: 25%;
  }
  .large-5 {
    width: 41.6666666667%;
  }
  .large-push-5 {
    position: relative;
    left: 41.6666666667%;
  }
  .large-pull-5 {
    position: relative;
    left: -41.6666666667%;
  }
  .large-offset-4 {
    margin-left: 33.3333333333%;
  }
  .large-6 {
    width: 50%;
  }
  .large-push-6 {
    position: relative;
    left: 50%;
  }
  .large-pull-6 {
    position: relative;
    left: -50%;
  }
  .large-offset-5 {
    margin-left: 41.6666666667%;
  }
  .large-7 {
    width: 58.3333333333%;
  }
  .large-push-7 {
    position: relative;
    left: 58.3333333333%;
  }
  .large-pull-7 {
    position: relative;
    left: -58.3333333333%;
  }
  .large-offset-6 {
    margin-left: 50%;
  }
  .large-8 {
    width: 66.6666666667%;
  }
  .large-push-8 {
    position: relative;
    left: 66.6666666667%;
  }
  .large-pull-8 {
    position: relative;
    left: -66.6666666667%;
  }
  .large-offset-7 {
    margin-left: 58.3333333333%;
  }
  .large-9 {
    width: 75%;
  }
  .large-push-9 {
    position: relative;
    left: 75%;
  }
  .large-pull-9 {
    position: relative;
    left: -75%;
  }
  .large-offset-8 {
    margin-left: 66.6666666667%;
  }
  .large-10 {
    width: 83.3333333333%;
  }
  .large-push-10 {
    position: relative;
    left: 83.3333333333%;
  }
  .large-pull-10 {
    position: relative;
    left: -83.3333333333%;
  }
  .large-offset-9 {
    margin-left: 75%;
  }
  .large-11 {
    width: 91.6666666667%;
  }
  .large-push-11 {
    position: relative;
    left: 91.6666666667%;
  }
  .large-pull-11 {
    position: relative;
    left: -91.6666666667%;
  }
  .large-offset-10 {
    margin-left: 83.3333333333%;
  }
  .large-12 {
    width: 100%;
  }
  .large-offset-11 {
    margin-left: 91.6666666667%;
  }
  .large-up-1 > .column,
  .large-up-1 > .columns {
    float: left;
    width: 100%;
  }
  .large-up-1 > .column:nth-of-type(1n),
  .large-up-1 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-1 > .column:nth-of-type(1n + 1),
  .large-up-1 > .columns:nth-of-type(1n + 1) {
    clear: both;
  }
  .large-up-1 > .column:last-child,
  .large-up-1 > .columns:last-child {
    float: left;
  }
  .large-up-2 > .column,
  .large-up-2 > .columns {
    float: left;
    width: 50%;
  }
  .large-up-2 > .column:nth-of-type(1n),
  .large-up-2 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-2 > .column:nth-of-type(2n + 1),
  .large-up-2 > .columns:nth-of-type(2n + 1) {
    clear: both;
  }
  .large-up-2 > .column:last-child,
  .large-up-2 > .columns:last-child {
    float: left;
  }
  .large-up-3 > .column,
  .large-up-3 > .columns {
    float: left;
    width: 33.3333333333%;
  }
  .large-up-3 > .column:nth-of-type(1n),
  .large-up-3 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-3 > .column:nth-of-type(3n + 1),
  .large-up-3 > .columns:nth-of-type(3n + 1) {
    clear: both;
  }
  .large-up-3 > .column:last-child,
  .large-up-3 > .columns:last-child {
    float: left;
  }
  .large-up-4 > .column,
  .large-up-4 > .columns {
    float: left;
    width: 25%;
  }
  .large-up-4 > .column:nth-of-type(1n),
  .large-up-4 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-4 > .column:nth-of-type(4n + 1),
  .large-up-4 > .columns:nth-of-type(4n + 1) {
    clear: both;
  }
  .large-up-4 > .column:last-child,
  .large-up-4 > .columns:last-child {
    float: left;
  }
  .large-up-5 > .column,
  .large-up-5 > .columns {
    float: left;
    width: 20%;
  }
  .large-up-5 > .column:nth-of-type(1n),
  .large-up-5 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-5 > .column:nth-of-type(5n + 1),
  .large-up-5 > .columns:nth-of-type(5n + 1) {
    clear: both;
  }
  .large-up-5 > .column:last-child,
  .large-up-5 > .columns:last-child {
    float: left;
  }
  .large-up-6 > .column,
  .large-up-6 > .columns {
    float: left;
    width: 16.6666666667%;
  }
  .large-up-6 > .column:nth-of-type(1n),
  .large-up-6 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-6 > .column:nth-of-type(6n + 1),
  .large-up-6 > .columns:nth-of-type(6n + 1) {
    clear: both;
  }
  .large-up-6 > .column:last-child,
  .large-up-6 > .columns:last-child {
    float: left;
  }
  .large-up-7 > .column,
  .large-up-7 > .columns {
    float: left;
    width: 14.2857142857%;
  }
  .large-up-7 > .column:nth-of-type(1n),
  .large-up-7 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-7 > .column:nth-of-type(7n + 1),
  .large-up-7 > .columns:nth-of-type(7n + 1) {
    clear: both;
  }
  .large-up-7 > .column:last-child,
  .large-up-7 > .columns:last-child {
    float: left;
  }
  .large-up-8 > .column,
  .large-up-8 > .columns {
    float: left;
    width: 12.5%;
  }
  .large-up-8 > .column:nth-of-type(1n),
  .large-up-8 > .columns:nth-of-type(1n) {
    clear: none;
  }
  .large-up-8 > .column:nth-of-type(8n + 1),
  .large-up-8 > .columns:nth-of-type(8n + 1) {
    clear: both;
  }
  .large-up-8 > .column:last-child,
  .large-up-8 > .columns:last-child {
    float: left;
  }
  .large-collapse > .column,
  .large-collapse > .columns {
    padding-right: 0;
    padding-left: 0;
  }
  .large-collapse .row {
    margin-right: 0;
    margin-left: 0;
  }
  .expanded.row .large-collapse.row {
    margin-right: 0;
    margin-left: 0;
  }
  .large-uncollapse > .column,
  .large-uncollapse > .columns {
    padding-right: 0.9375rem;
    padding-left: 0.9375rem;
  }
  .large-centered {
    margin-right: auto;
    margin-left: auto;
  }
  .large-centered,
  .large-centered:last-child:not(:first-child) {
    float: none;
    clear: both;
  }
  .large-uncentered,
  .large-push-0,
  .large-pull-0 {
    position: static;
    margin-right: 0;
    margin-left: 0;
  }
  .large-uncentered,
  .large-uncentered:last-child:not(:first-child),
  .large-push-0,
  .large-push-0:last-child:not(:first-child),
  .large-pull-0,
  .large-pull-0:last-child:not(:first-child) {
    float: left;
    clear: none;
  }
  .large-uncentered:last-child:not(:first-child),
  .large-push-0:last-child:not(:first-child),
  .large-pull-0:last-child:not(:first-child) {
    float: right;
  }
}
.column-block {
  margin-bottom: 1.875rem;
}
.column-block > :last-child {
  margin-bottom: 0;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

.text-center {
  text-align: center;
}

.text-justify {
  text-align: justify;
}

@media print, screen and (min-width: 40em) {
  .medium-text-left {
    text-align: left;
  }
  .medium-text-right {
    text-align: right;
  }
  .medium-text-center {
    text-align: center;
  }
  .medium-text-justify {
    text-align: justify;
  }
}
@media print, screen and (min-width: 64em) {
  .large-text-left {
    text-align: left;
  }
  .large-text-right {
    text-align: right;
  }
  .large-text-center {
    text-align: center;
  }
  .large-text-justify {
    text-align: justify;
  }
}
.show-for-print {
  display: none !important;
}

@media print {
  * {
    background: transparent !important;
    color: black !important;
    color-adjust: economy;
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .show-for-print {
    display: block !important;
  }
  .hide-for-print {
    display: none !important;
  }
  table.show-for-print {
    display: table !important;
  }
  thead.show-for-print {
    display: table-header-group !important;
  }
  tbody.show-for-print {
    display: table-row-group !important;
  }
  tr.show-for-print {
    display: table-row !important;
  }
  td.show-for-print {
    display: table-cell !important;
  }
  th.show-for-print {
    display: table-cell !important;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a[href]:after {
    content: " (" attr(href) ")";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  abbr[title]:after {
    content: " (" attr(title) ")";
  }
  pre,
  blockquote {
    border: 1px solid var(--neutral-500);
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .print-break-inside {
    page-break-inside: auto;
  }
}
/* Phase 3c-1: Foundation's button, form, card and table components were
   removed from this fork; the shared components (buttons.css, forms.css,
   card.css, typography.css tables) own them. Grid, normalize, visibility,
   float, text-align, breadcrumbs, responsive-embed and pagination remain.
   The Foundation link colour is overridden in foundation-overrides.css. */

.breadcrumbs {
  margin: 0 0 1rem 0;
  list-style: none;
}
.breadcrumbs::before,
.breadcrumbs::after {
  display: table;
  content: " ";
  flex-basis: 0;
  order: 1;
}
.breadcrumbs::after {
  clear: both;
}
.breadcrumbs li {
  float: left;
  font-size: 1.1rem;
  color: var(--surface-muted);
  cursor: default;
  text-transform: uppercase;
}
.breadcrumbs li:not(:last-child)::after {
  position: relative;
  margin: 0 0.75rem;
  opacity: 1;
  content: "/";
  /* was --neutral-300 (#cacaca), 1.32:1 on the breadcrumb bar. Decorative, but it
     is rendered text and the house rule is AA everywhere. */
  color: var(--text-muted);
}
.breadcrumbs a {
  color: var(--blue-text);
}
.breadcrumbs a:hover {
  text-decoration: underline;
}
.breadcrumbs .disabled {
  color: var(--neutral-300);
  cursor: not-allowed;
}

.responsive-embed,
.flex-video {
  position: relative;
  height: 0;
  margin-bottom: 1rem;
  padding-bottom: 75%;
  overflow: hidden;
}
.responsive-embed iframe,
.responsive-embed object,
.responsive-embed embed,
.responsive-embed video,
.flex-video iframe,
.flex-video object,
.flex-video embed,
.flex-video video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.responsive-embed.widescreen,
.flex-video.widescreen {
  padding-bottom: 56.25%;
}

.pagination {
  margin-left: 0;
  margin-bottom: 1rem;
}
.pagination::before,
.pagination::after {
  display: table;
  content: " ";
  flex-basis: 0;
  order: 1;
}
.pagination::after {
  clear: both;
}
.pagination li {
  margin-right: 0.0625rem;
  border-radius: 0;
  font-size: 1.1rem;
  display: none;
}
.pagination li:last-child,
.pagination li:first-child {
  display: inline-block;
}
@media print, screen and (min-width: 40em) {
  .pagination li {
    display: inline-block;
  }
}
.pagination a,
.pagination button {
  display: block;
  padding: 0.1875rem 0.625rem;
  border-radius: 0;
  color: var(--surface-muted);
}
.pagination a:hover,
.pagination button:hover {
  background: var(--neutral-200);
}
.pagination .current {
  padding: 0.1875rem 0.625rem;
  background: var(--blue-text);
  color: var(--white);
  cursor: default;
}
.pagination .disabled {
  padding: 0.1875rem 0.625rem;
  color: var(--neutral-300);
  cursor: not-allowed;
}
.pagination .disabled:hover {
  background: transparent;
}
.pagination .ellipsis::after {
  padding: 0.1875rem 0.625rem;
  content: "…";
  color: var(--surface-muted);
}

.pagination-previous a::before,
.pagination-previous.disabled::before {
  display: inline-block;
  margin-right: 0.5rem;
  content: "«";
}

.pagination-next a::after,
.pagination-next.disabled::after {
  display: inline-block;
  margin-left: 0.5rem;
  content: "»";
}

.hide {
  display: none !important;
}

.invisible {
  visibility: hidden;
}

@media print, screen and (max-width: 39.99875em) {
  .hide-for-small-only {
    display: none !important;
  }
}

@media screen and (max-width: 0em), screen and (min-width: 40em) {
  .show-for-small-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) {
  .hide-for-medium {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em) {
  .show-for-medium {
    display: none !important;
  }
}

@media print, screen and (min-width: 40em) and (max-width: 41.68625em) {
  .hide-for-medium-only {
    display: none !important;
  }
}

@media screen and (max-width: 39.99875em), screen and (min-width: 41.6875em) {
  .show-for-medium-only {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) {
  .hide-for-large {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em) {
  .show-for-large {
    display: none !important;
  }
}

@media print, screen and (min-width: 64em) and (max-width: 67.49875em) {
  .hide-for-large-only {
    display: none !important;
  }
}

@media screen and (max-width: 63.99875em), screen and (min-width: 67.5em) {
  .show-for-large-only {
    display: none !important;
  }
}

.show-for-sr,
.show-on-focus {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.show-on-focus:active,
.show-on-focus:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
}

.show-for-landscape,
.hide-for-portrait {
  display: block !important;
}
@media screen and (orientation: landscape) {
  .show-for-landscape,
  .hide-for-portrait {
    display: block !important;
  }
}
@media screen and (orientation: portrait) {
  .show-for-landscape,
  .hide-for-portrait {
    display: none !important;
  }
}

.hide-for-landscape,
.show-for-portrait {
  display: none !important;
}
@media screen and (orientation: landscape) {
  .hide-for-landscape,
  .show-for-portrait {
    display: none !important;
  }
}
@media screen and (orientation: portrait) {
  .hide-for-landscape,
  .show-for-portrait {
    display: block !important;
  }
}

.align-left {
  justify-content: flex-start;
}

.align-right {
  justify-content: flex-end;
}

.align-center {
  justify-content: center;
}

.align-justify {
  justify-content: space-between;
}

.align-spaced {
  justify-content: space-around;
}

.align-left.vertical.menu > li > a {
  justify-content: flex-start;
}

.align-right.vertical.menu > li > a {
  justify-content: flex-end;
}

.align-center.vertical.menu > li > a {
  justify-content: center;
}

.align-top {
  align-items: flex-start;
}

.align-self-top {
  align-self: flex-start;
}

.align-bottom {
  align-items: flex-end;
}

.align-self-bottom {
  align-self: flex-end;
}

.align-middle {
  align-items: center;
}

.align-self-middle {
  align-self: center;
}

.align-stretch {
  align-items: stretch;
}

.align-self-stretch {
  align-self: stretch;
}

.align-center-middle {
  justify-content: center;
  align-items: center;
  align-content: center;
}

.small-order-1 {
  order: 1;
}

.small-order-2 {
  order: 2;
}

.small-order-3 {
  order: 3;
}

.small-order-4 {
  order: 4;
}

.small-order-5 {
  order: 5;
}

.small-order-6 {
  order: 6;
}

@media print, screen and (min-width: 40em) {
  .medium-order-1 {
    order: 1;
  }
  .medium-order-2 {
    order: 2;
  }
  .medium-order-3 {
    order: 3;
  }
  .medium-order-4 {
    order: 4;
  }
  .medium-order-5 {
    order: 5;
  }
  .medium-order-6 {
    order: 6;
  }
}
@media print, screen and (min-width: 64em) {
  .large-order-1 {
    order: 1;
  }
  .large-order-2 {
    order: 2;
  }
  .large-order-3 {
    order: 3;
  }
  .large-order-4 {
    order: 4;
  }
  .large-order-5 {
    order: 5;
  }
  .large-order-6 {
    order: 6;
  }
}
.flex-container {
  display: flex;
}

.flex-child-auto {
  flex: 1 1 auto;
}

.flex-child-grow {
  flex: 1 0 auto;
}

.flex-child-shrink {
  flex: 0 1 auto;
}

.flex-dir-row {
  flex-direction: row;
}

.flex-dir-row-reverse {
  flex-direction: row-reverse;
}

.flex-dir-column {
  flex-direction: column;
}

.flex-dir-column-reverse {
  flex-direction: column-reverse;
}

@media print, screen and (min-width: 40em) {
  .medium-flex-container {
    display: flex;
  }
  .medium-flex-child-auto {
    flex: 1 1 auto;
  }
  .medium-flex-child-grow {
    flex: 1 0 auto;
  }
  .medium-flex-child-shrink {
    flex: 0 1 auto;
  }
  .medium-flex-dir-row {
    flex-direction: row;
  }
  .medium-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }
  .medium-flex-dir-column {
    flex-direction: column;
  }
  .medium-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
@media print, screen and (min-width: 64em) {
  .large-flex-container {
    display: flex;
  }
  .large-flex-child-auto {
    flex: 1 1 auto;
  }
  .large-flex-child-grow {
    flex: 1 0 auto;
  }
  .large-flex-child-shrink {
    flex: 0 1 auto;
  }
  .large-flex-dir-row {
    flex-direction: row;
  }
  .large-flex-dir-row-reverse {
    flex-direction: row-reverse;
  }
  .large-flex-dir-column {
    flex-direction: column;
  }
  .large-flex-dir-column-reverse {
    flex-direction: column-reverse;
  }
}
/*
 * foundation-overrides.css
 *
 * Theme customisations layered on Foundation's own selectors, extracted from the
 * dc monolith (sites/dc/dc-child/style.css) and tokenised per the colour rules.
 * Loads AFTER foundation.css. Colour is always var(--token); no hex in base-theme.
 *
 * Source site: dc. Only two genuine, generic Foundation-selector overrides exist in
 * the dc monolith: the global form-control reset and the .pagination restyle.
 * (.course-tabs .tabs* is course-block-scoped, not a generic Foundation override -
 *  it belongs with the courses block, not here. See agent report.)
 *
 * Phase 3c-1 Foundation-conflict resolution (brief §Foundation):
 *   1. Link colour. Foundation shipped #1779ba on links; the theme's base
 *      anchor colour lives in typography.css (var(--blue-text)) which loads
 *      after this file, but Foundation's own component links (.breadcrumbs a
 *      kept in the fork) still carry #1779ba, so the token link colour is set
 *      here too as the belt-and-braces default. Underlying Foundation rule the
 *      later trim can delete: `.breadcrumbs a { color:#1779ba }` and the base
 *      anchor colour (already extracted to typography.css).
 *   2. Buttons / forms / cards / tables were DELETED from the fork (not
 *      overridden), so no override entry is needed for them.
 *   3. .button.tiny / .button.small collapse (Phase 2.5) is moot now the
 *      .button component is gone.
 */

/* 1. Foundation link colour -> token (conflict #1). The base anchor colour is
   owned by typography.css (loads after this file); Foundation's kept component
   link (.breadcrumbs a, still #1779ba in the fork) is overridden here. */
.breadcrumbs a {
  color: var(--blue-text);
}

/* Form controls - reset Foundation's native input/select/button/textarea chrome.
   Source dc L3858-3888. No colour. */
input[type="text"],
input[type="email"],
input[type="submit"],
input[type="button"],
select,
option,
button,
textarea {
  -moz-appearance: none;
  text-indent: 0.01px;
  text-overflow: "";
  -webkit-appearance: none;
  border-radius: 0;
  border: none;
}
/* The `:focus { outline: none }` block that used to live here is REMOVED, not
   moved. `button:focus` is (0,1,1) and out-specified the global
   `:focus-visible` rule in base.css (0,1,0), so eleven components rendered with
   no keyboard focus indicator at all: a WCAG 2.4.7 failure at AA.
   Suppressing the mouse-click ring is what :focus-visible is for; it does that
   already. Do not reintroduce a blanket focus reset. */

/* Pagination - theme fully restyles Foundation's .pagination (WP paginate_links markup).
   Source dc L6944-6982. */
.pagination {
  background-color: var(--surface-alt);
  overflow: hidden;
  padding: 2rem 0;
  margin: 0;
}
.pagination ul {
  margin: 0;
  padding: 0;
  text-align: center;
}
.pagination ul li {
  margin: 0 0.2rem;
  text-align: center;
  line-height: 1;
  text-indent: inherit;
  font-size: 1.1rem;
  padding-left: 0;
}
.pagination ul li a {
  background: var(--neutral-200);
  padding: 1rem 1.5rem;
  color: var(--text);
  transition: all 0.2s ease;
  text-align: center;
  display: block;
}
.pagination ul li a:hover {
  background-color: var(--surface-brand);
  color: var(--text-on-dark);
  transition: all 0.2s ease;
}
.pagination ul li.active a {
  background-color: var(--surface-brand);
  color: var(--text-on-dark);
}
.pagination ul li:before {
  content: none;
}
/* typography — element reset, headings, emphasis, body, leads, eyebrows, audience rule
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

p, ul, ol, li, figure, blockquote, dl, dd { margin: 0; padding: 0; }
ul, ol { list-style: none; }

/* ------------------------------------------------------------- typography */
h1, h2, h3, h4, h5, h6,
.content-area-title, .title-font {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  letter-spacing: var(--display-track);
  line-height: var(--display-lh);
  text-transform: var(--display-case);
  color: var(--text-heading);
  text-wrap: pretty;
}

h1, .title-font { font-size: clamp(2.4rem, 5vw, 3.4rem); letter-spacing: var(--display-track-hero); line-height: var(--display-lh-hero); }
h2, .content-area-title { font-size: clamp(2rem, 4.2vw, 3rem); }
/* Block section title (shared by accordion, content, contact, q&a, tabs …). A
   step below the display h2 — it was reading almost as large as a page h1 — and
   with space beneath so the block content isn't cramped against it. */
.content-area-title { font-size: clamp(2rem, 4vw, 2.2rem); margin-bottom: 1.1rem; }
h3 { font-size: 1.45rem; line-height: 1.12; }
h4 { font-size: 1.35rem; line-height: 1.15; }
h5, h6 { font-size: 1.25rem; line-height: 1.2; }
h6 { font-size: var(--fs-min); }

/* Emphasis is how a title carries a voice. One per title, on the clause that
   holds the meaning. <em> for voice, <strong> for a fact, never both. */
h1 em, h2 em, h3 em, h4 em,
.content-area-title em, .title-font em {
  font-style: var(--em-style);
  font-weight: var(--em-weight);
  color: var(--em-color);
}
h1 strong, h2 strong, h3 strong,
.content-area-title strong, .title-font strong {
  font-weight: 800;
  color: var(--strong-color);
}

p + p { margin-top: 1rem; }

/* Blockquote — default WYSIWYG quote. An accent rule and the display face lift a
   pulled quote off the body copy so it reads as intentional, not just indented
   text. Component quotes (e.g. .dncg-sc-testimonial) override at higher
   specificity. */
blockquote {
  margin: 1.75rem 0;
  padding: .2rem 0 .2rem 1.6rem;
  border-left: 4px solid var(--accent);
  max-width: var(--measure);
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.45;
  color: var(--text-heading);
}
blockquote p + p { margin-top: .9rem; }
blockquote :is(cite, footer) {
  display: block;
  margin-top: .9rem;
  font-family: var(--font-body);
  font-size: 1.1rem;
  font-weight: 700;
  font-style: normal;
  color: var(--muted);
}

a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: .22em; }
a:hover { color: var(--link-hover); }

strong { font-weight: 700; }
/* .92em computes to 1.012rem inside body copy (body is --fs-min, 1.1rem), under
   the floor. Pinned to --fs-min so it tracks the token rather than the arithmetic. */
code, kbd, samp { font-family: var(--font-mono); font-size: var(--fs-min); }
cite { font-style: normal; }

/* The quiet lead-in that sits ABOVE a statement. Display face, weight 400. */
.d-lead {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.3rem;
  line-height: 1.45;
  color: var(--text-heading);
  margin-bottom: .35rem;
  max-width: var(--measure);
}

/* The muted intro that sits AFTER a heading. Body face. */
.section-intro,
.content-area-title + p,
.title-area p {
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--muted);
  max-width: var(--measure);
  margin-top: .5rem;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-body);
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* The -text step, not the raw --em-color. An eyebrow is a small TEXT role at
     --fs-eyebrow (1.1rem), so 4.5:1 applies; --display-em is sized for heading
     emphasis, where the type is large and 3:1 applies. Identical on five brands;
     hesta steps it. The dark-ground and bg-mid-grey eyebrow colours are set in
     base.css and bridge.css and still win over this. */
  color: var(--display-em-text);
  margin-bottom: .8rem;
}
/* The audience rule — the ONLY place inside a section where the three fixed
   audience colours may appear. Semantic wayfinding, never decoration. */
.eyebrow::before { content: none; }
.eyebrow--rule::before {
  content: "";
  display: block;
  flex: 0 0 auto;
  width: 28px;
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}
.eyebrow--students { color: var(--aud-students); }
.eyebrow--students::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-students); }
.eyebrow--parents { color: var(--aud-parents); }
.eyebrow--parents::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-parents); }
.eyebrow--green,
.eyebrow--employers { color: var(--aud-employers-text); }
.eyebrow--employers::before { content: ""; display: block; flex: 0 0 auto; width: 28px; height: 4px; background: var(--aud-employers); }

.audience-rule {
  height: 4px;
  background: linear-gradient(90deg,
    var(--aud-students) 0 33.33%,
    var(--aud-parents) 33.33% 66.66%,
    var(--aud-employers) 66.66% 100%);
}
/* base — reset, grounds, layout, results furniture, print
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* ------------------------------------------------------------------ reset */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-min);
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

img, video, svg { max-width: 100%; }
img, video { display: block; height: auto; }

/* Decorative inline-icon size floor. Markup exception #1 replaced Font Awesome
   <i> with inline <svg> that carry a viewBox but no width/height; unsized they
   paint at the replaced-element default (up to ~300px), blowing out hero meta
   rows, detail icons and list markers across many blocks. Give every inline SVG
   with no explicit dimension a text-relative size. Zero-specificity :where() so
   any component rule (.btn svg, .contact-bar__item svg, sized icons, …) wins. */
:where(svg:not([width]):not([height])) { width: 1.5em; height: 1.5em; }

/* dncg_icon() inline SVGs (inc/icons.php): inline text-sized icons that inherit
   colour via currentColor. Higher specificity than the floor above. */
.icon { width: 1.1em; height: 1.1em; display: inline-block; vertical-align: -0.15em; flex: 0 0 auto; }



input, button, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

::selection { background: var(--accent); color: var(--btn-accent-text); }

/* Focus indicator. Two-tone on purpose: no SINGLE colour can clear 3:1 against
   both a white page and a navy panel, and the theme puts focusable controls on
   both. --accent alone measured 1.89:1 on white (WCAG 1.4.11 failure).
   The dark ring carries the contrast on light grounds, the light halo carries it
   on dark grounds, and one of the two always applies. */
:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--focus-halo);
}

/* Screen-reader-only text. Every alias the theme + plugins use is listed here so
   there is a single source of truth after the Foundation unwire: .sr-only and
   .screen-reader-text (WP core), .show-for-sr (Foundation legacy),
   .visually-hidden (course progression part) and .visible-hidden (skip links). */
.sr-only, .show-for-sr, .screen-reader-text, .visually-hidden, .visible-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0; padding: 0; margin: -1px;
}
/* Skip links (.visible-hidden) reveal on keyboard focus — accessible, not just
   hidden. They sit top-left over the header when focused. */
.visible-hidden:focus {
  position: fixed; top: .5rem; left: .5rem; z-index: 1000;
  width: auto; height: auto; clip: auto; clip-path: none; margin: 0;
  padding: .7rem 1.1rem; background: var(--navy-deep); color: var(--white);
  border-radius: var(--radius-sm); font-weight: 600;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --------------------------------------------------------- ground helpers */
.bg-white { background: var(--white); }
.bg-light-grey { background: var(--light); }
.bg-mid-grey { background: var(--neutral-300, var(--box-border)); }
.bg-blue { background: var(--surface-blue); color: var(--white); }
.bg-dark-blue { background: var(--surface-dark); color: var(--white); }
.bg-navy { background: var(--surface-dark); color: var(--white); }
.bg-black { background: var(--surface-muted); color: var(--white); }
.bg-red { background: var(--surface-brand); color: var(--white); }

:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(h1, h2, h3, h4, h5, .content-area-title, .title-font) { color: var(--white); }
/* Two families of coloured ground, and they need different treatment.

   DEEP grounds (navy, near-black, dark grey) are far enough from white that an
   accent or a softened tint still clears AA on them.

   MID-TONE BRAND fills (--surface-blue, --surface-brand) are sized to carry white
   at about 4.5:1 and have no headroom left, so on them an alpha tint drops under
   (measured 4.07:1 ucdon, 3.45:1 ucnl, 4.14:1 hesta, 4.22:1 dc) and a bright accent
   collapses (2.07:1 ucdon, 1.41:1 ucnl, 2.20:1 hesta). Those take full-strength
   on-dark text and lean on weight/underline instead of colour. */
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .eyebrow { color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(.section-intro, .title-area p) { color: rgba(var(--on-dark-rgb), .86); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .d-lead { color: rgba(var(--on-dark-rgb), .72); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(h1, h2, h3) em { color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) a:not(.btn):not(.button):not(.cta) { color: var(--accent-on-dark); }

:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(.eyebrow, .section-intro, .title-area p, .d-lead) { color: var(--text-on-dark); }
:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(h1, h2, h3) em { color: var(--display-em-on-dark); }
:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) a:not(.btn):not(.button):not(.cta) { color: var(--text-on-dark); text-decoration-thickness: 2px; }

/* ------------------------------------------------------ layout and rhythm */
.row {
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding-inline: var(--page-gutter);
}
.row--narrow { max-width: var(--content-max-narrow); }
.row--full { max-width: none; }

/* SECTION RHYTHM — the single source of truth for the whole .pad* family.
   ---------------------------------------------------------------------------
   There is no second set. css/bridge.css used to carry a parallel
   `.content-area.pad*` set at higher specificity, and the two disagreed:

     .pad          3.5rem / 5rem responsive   vs   5rem flat
     .pad-reduced  2.4rem flat                vs   3.5rem flat

   So the same editor choice measured differently depending on whether the
   block happened to emit .content-area, and "Reduced (50%)" was really 70% on
   the .content-area half. Those six compound rules are DELETED. Do not
   reintroduce them: any block-specific padding belongs in that block's own
   stylesheet, not in a second copy of this family.

   FULL     --space-section-sm (3.5rem) below 64em, --space-section (5rem) above
   REDUCED  exactly half of full at both widths: 1.75rem and 2.5rem

   Reduced is written as calc(full / 2) rather than as its own literal so it
   cannot drift: change --space-section and the reduced step follows. */
.pad { padding-block: var(--space-section-sm); }
.pad-top { padding-top: var(--space-section-sm); }
.pad-bottom { padding-bottom: var(--space-section-sm); }
.pad-reduced { padding-block: calc(var(--space-section-sm) / 2); }
.pad-top-reduced { padding-top: calc(var(--space-section-sm) / 2); }
.pad-bottom-reduced { padding-bottom: calc(var(--space-section-sm) / 2); }
@media (min-width: 64em) {
  .pad { padding-block: var(--space-section); }
  .pad-top { padding-top: var(--space-section); }
  .pad-bottom { padding-bottom: var(--space-section); }
  .pad-reduced { padding-block: calc(var(--space-section) / 2); }
  .pad-top-reduced { padding-top: calc(var(--space-section) / 2); }
  .pad-bottom-reduced { padding-bottom: calc(var(--space-section) / 2); }
}

/* All-round padding for a PANEL, as opposed to the .pad* rules above, which are
   section rhythm and only ever touch the block axis. Restored: both classes are
   emitted by templates in this theme and neither survived the extraction, so
   five elements were rendering with no internal padding at all —
   parts/repeats/breadcrumb-courses.php, breadcrumb-news.php,
   dark-breadcrumb.php, single-tribe_events.php (the "Attend this event" panel)
   and taxonomy-course-category.php (the testimonial panel).

   Values are the originals from sites/dc/dc-child/style.css L4349-4353, not new
   ones. The other two members of that family, .pad-full-medium and
   .pad-full-large, are NOT restored: nothing in target/ emits them. */
.pad-full-extra-small { padding: 1rem; }
.pad-full-small { padding: 2rem; }

.content-area { position: relative; }

/* ------------------------------------------------- pagination and results */
.pagination { display: flex; align-items: center; gap: .75rem; margin-top: 2rem; }
.pagination a, .pagination span.is-current {
  width: 44px; height: 44px; border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; text-decoration: none;
  border: 1px solid var(--line); color: var(--text-heading);
}
.pagination span.is-current { background: var(--navy); color: var(--white); border-color: var(--navy); }

.filter-panel { border-right: 1px solid var(--line); padding: 2rem 1.8rem 3rem; }
.filter-panel__head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 1.2rem; }
.filter-group { border-top: 1px solid var(--line); padding-block: 1.1rem; }
.filter-group__toggle { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.filter-group__toggle span:first-child { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.filter-group__options { margin-top: .9rem; max-height: 300px; overflow-y: auto; display: flex; flex-direction: column; gap: .55rem; }
.filter-option { display: flex; align-items: center; gap: .7rem; text-align: left; }
.filter-option__box { flex: 0 0 auto; width: 22px; height: 22px; border: 2px solid var(--box-border); background: var(--white); border-radius: 5px; display: flex; align-items: center; justify-content: center; color: var(--white); font-size: var(--fs-meta); font-weight: 700; }
.filter-option[aria-pressed="true"] .filter-option__box { background: var(--navy); border-color: var(--navy); }
.filter-option[aria-pressed="true"] .filter-option__label { font-weight: 700; color: var(--navy); }
.filter-option__count { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.results-layout { display: grid; grid-template-columns: 330px 1fr; align-items: start; }
@media (max-width: 64em) { .results-layout { grid-template-columns: 1fr; } .filter-panel { border-right: 0; border-bottom: 1px solid var(--line); } }

/* ------------------------------------------------ shared campaign motion
   Two general-purpose keyframes used by campaign / landing sections (Clearing,
   and future landing pages): `rise` is a fade-up entrance, `bob` a gentle idle
   loop. @keyframes are invalid inside the page-scoped Custom CSS wrapper, so
   they must live at theme level; they were previously duplicated per child as
   ucd-rise/ucd-bob (ucdon) and ucnl-rise/ucnl-bob (ucnl). Merged here once,
   brand-neutral. Page / variant CSS references them by these names, and must
   pair its `animation:` usage with a prefers-reduced-motion: reduce reset on the
   same selector (the consuming selectors are not known here). */
@keyframes rise { from { opacity: 0; translate: 0 32px; } to { opacity: 1; translate: 0 0; } }
@keyframes bob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } }

/* --------------------------------------------------------------- printing */
@media print {
  body { background: var(--white); }
  .site-header, .site-footer, .page-navigation, .controls,
  .brand-switcher, [data-print-hide] { display: none !important; }
  .hero-background, .full-page-hero__background, .stats-banner::before { display: none; }
  .hero, .full-page-hero, .hero-enhanced, .stats-banner { background: var(--white); color: var(--black); }
  a { text-decoration: underline; }
}
/* header — site header, megamenu, breadcrumb, page-nav, search chrome
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* =============================== GROUP 1 · CHROME ======================== */

/* Header. NOTE: the toolkit ships no header markup — these class names are
   ours, listed in notes.md as an open naming decision. */
.site-header {
  position: relative;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  /* Inline inset that reproduces .row's content edge from inside a full-bleed
     grid item: half the leftover width, never less than the page gutter. Used
     by the utility strip and the mobile drawer so both line up with the main
     menu above/below them. Resolves against the using element's grid area. */
  --header-inset: max(var(--page-gutter), calc((100% - var(--content-max) + var(--page-gutter) * 2) / 2));
  /* Gutter between the brand column and the menu column, and the hairline
     divider that sits in it. */
  --header-split: clamp(1.5rem, 2.4vw, 2.75rem);
}

/* --- 2-row header grid ---------------------------------------------------
   ROW 1  .site-header__info  — utility menu + search, full-bleed strip
   ROW 2  .site-header__main  — brand column | primary menu column

   Source order is brand+menu FIRST and the utility strip LAST (see the note in
   parts/repeats/header.php); both children are explicitly placed, so grid alone
   decides what paints where. `reading-flow: grid-rows` then walks keyboard focus
   in visual row order instead of source order — the supported replacement for a
   positive tabindex ladder, which would have leapfrogged the skip links. app.js
   hoists the node at runtime where reading-flow is not implemented yet.

   Column tracks: a bleed track either side of one content track sized exactly
   like .row (--content-max minus its two gutters), so a full-bleed row and a
   content-width row share the same right edge. */
.site-header__inner {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [content-start] minmax(0, calc(var(--content-max) - var(--page-gutter) * 2))
    [content-end] minmax(var(--page-gutter), 1fr)
    [full-end];
  reading-flow: grid-rows;
}

/* --- ROW 1 · utility strip ----------------------------------------------- */
.site-header__info {
  grid-row: 1; grid-column: full;
  display: flex; align-items: center; justify-content: flex-end;
  /* Items never wrap internally (see below); the CONTAINER may, so an unusually
     long secondary menu drops to a second strip row instead of spilling out of
     the page. */
  flex-wrap: wrap; row-gap: 0;
  gap: clamp(1rem, 1.7vw, 1.75rem);
  padding-inline: var(--header-inset);
  background: var(--header-utility-bg);
  border-bottom: 1px solid var(--header-border);
}
/* Direct child only: the dropdown .sub-menu panels are also <ul> and must keep
   their own stacked layout. */
.site-header__info > ul {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 1.7vw, 1.75rem); row-gap: 0; padding-block: .55rem;
}
/* white-space on both: a utility label that wrapped would grow the strip and
   break the row rhythm, so every item is single-line by construction and the
   gap clamp absorbs the width instead. */
.site-header__info a { color: var(--header-fg-muted); text-decoration: none; white-space: nowrap; }
.site-header__info a:hover { color: var(--header-fg); }
/* JS swaps dropdown-parent links (About Us, Facilities, Contact Us) for <button>
   toggles, so the button must read as the link it replaced — same colour, no
   chrome. Parity only; no new visual. */
.site-header__info button {
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; line-height: inherit; cursor: pointer;
  color: var(--header-fg-muted); text-decoration: none; white-space: nowrap;
}
.site-header__info button:hover { color: var(--header-fg); }
/* Search reveal sits at the right end of the strip, set off from the menu. */
.site-header__info .site-header__search-link {
  flex: 0 0 auto; margin-inline-start: clamp(.25rem, 1vw, 1rem);
  color: var(--header-fg-muted); font-weight: 600; font-size: var(--fs-min);
}
.site-header__info .site-header__search-link:hover { color: var(--header-fg); }

/* --- ROW 2 · brand | primary menu ---------------------------------------- */
.site-header__main {
  grid-row: 2; grid-column: content;
  display: grid;
  /* minmax(0, auto), not auto: the brand column must be allowed to shrink below
     its max-content width on small screens, or the group lockup (a 14:1 strip)
     pushes the whole row wider than the viewport. */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: stretch;
}

/* Brand column. The site logo is the primary mark; the group lockup rides above
   it as a secondary endorsement line. The divider is on this column so it runs
   the full height of the row. */
.site-header__brand {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .5rem; min-width: 0;
  padding-block: 1rem;
  padding-inline-end: var(--header-split);
  border-inline-end: 1px solid var(--header-border);
}
/* "Part of" + the group lockup — secondary by construction. */
.site-header__group { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; min-width: 0; text-decoration: none; }
.site-header__group-label {
  flex: 0 0 auto;
  font-size: var(--fs-min); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--header-accent, var(--header-fg-muted)); white-space: nowrap; line-height: 1;
}
.site-header__group-logo {
  /* Never allowed to compete with the site logo: capped at 18px (the height the
     lockup was drawn at) and at 40% of whatever height the brand gives its own
     mark, with a floor so it stays legible on the short-lockup brands. */
  height: clamp(12px, calc(var(--logo-height) * .4), 0.9rem);
  width: auto; min-width: 0; max-width: 100%; display: block;
  object-fit: contain; object-position: left center;
  /* Its OWN filter channel, not the site logo's: the lockup is a shared asset
     drawn in white and would disappear on the three white bars, whose site
     logos are full-colour and must stay untreated. */
  filter: var(--header-group-logo-filter);
}
/* The primary mark. --logo-height is the per-brand optical-parity height.
   The negative bottom margin is the portrait-lockup escape hatch (tokens.css):
   the mark keeps its full height and stays IN FLOW — so it still reserves its
   own width in the brand column and needs no magic top offset — but stops
   contributing --logo-overhang of that height to the row, and hangs over
   whatever follows the header instead. z-index clears the page-title band
   below it (z-index 1) while staying under the sticky page nav (20), the
   megamenu (50) and the mobile drawer (55), all of which should cover it. */
.site-header-logo {
  flex: 0 0 auto; display: block;
  position: relative; z-index: 10;
  margin-bottom: calc(-1 * var(--logo-overhang));
  padding: var(--logo-pad);
  background: var(--logo-panel);
}
.site-header-logo img {
  height: var(--logo-height);
  width: auto;
  /* min() so the brand cap is honoured on a wide bar but the mark can still give
     way on a narrow one: the phone brand column is ~130px, which is under the
     natural width of most of these lockups at their full height. object-fit
     keeps the ratio, so it scales down rather than squashing. */
  max-width: min(var(--logo-max-width), 100%);
  object-fit: contain;
  object-position: left center;
  filter: var(--header-logo-filter);
}

/* Menu column. Right-aligned so the last item lands on the same content edge as
   the utility strip above it. */
#main-nav, .site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
  padding-inline-start: var(--header-split);
}

/* Items are single-line by construction; the container is allowed to wrap so a
   site with a longer study menu than DC's gets a taller header rather than one
   that overflows its own content column. */
.menu-primary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 1.9vw, 1.85rem); row-gap: .4rem;
}
/* JS swaps dropdown-parent links for <button> toggles, so both must be styled. */
.menu-primary > .menu-item > a,
.menu-primary > .menu-item > button {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  /* Sheds width with the viewport but never below the 1.1rem floor, so long
     labels lose type size before they lose their single line. */
  font-size: clamp(var(--fs-min), 1.05vw + .35rem, 1.3rem);
  letter-spacing: var(--display-track);
  color: var(--header-fg);
  text-decoration: none;
  padding: 0 0 4px;
  border-bottom: 4px solid transparent;
  display: flex; align-items: center;
  /* A study-area label that wraps would double the row height and shunt the
     brand column with it — every item stays on one line. */
  white-space: nowrap;
  background: none; cursor: pointer; line-height: inherit;
}
/* Info-menu toggle buttons carry an inline caret, so align them like a flex row. */
.site-header__info .menu-item-has-children > button { display: inline-flex; align-items: center; }

/* Dropdown indicator caret on parents that open a panel — primary study menu
   AND the upper Information menu (About Us etc.). app.js turns every
   .menu-item-has-children parent in the header into a <button>, so both menus
   use the same button hook. */
.menu-primary > .menu-item-has-children > button::after,
.menu-item-study > button::after,
.site-header__info .menu-item-has-children > button::after {
  content: ""; flex: 0 0 auto; width: .42em; height: .42em; margin-left: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--transition);
}
.menu-primary > .menu-item-has-children.is-open > button::after,
.menu-item-study.is-open > button::after,
.site-header__info .menu-item-has-children.is-open > button::after { transform: translateY(1px) rotate(-135deg); }
.menu-primary > .menu-item > a:hover,
.menu-primary > .menu-item > button:hover,
.menu-primary > .menu-item.is-open > a,
.menu-primary > .menu-item.is-open > button,
.menu-primary > .menu-item.current-menu-item > a { border-bottom-color: var(--accent); }

.site-header__search-link {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--header-fg); font-weight: 700; text-decoration: none;
}
.site-header__search-link svg { flex: 0 0 auto; }

/* Megamenu. Class names ours — see notes.md. Hidden until the parent item is
   hovered/focused or .is-open (JS, Stage 5); drops full-width below the header. */
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mega-menu__panel { display: grid; grid-template-columns: repeat(3, 1fr) 1.05fr; gap: 2.2rem; padding-block: 2rem; }
.mega-menu__column .eyebrow { margin-bottom: 1rem; }
.mega-menu__destination {
  display: flex; justify-content: space-between; gap: .875rem;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem;
}
.mega-menu__destination + .mega-menu__destination { margin-top: .75rem; }
.mega-menu__destination a {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-heading); text-decoration: none;
}
.mega-menu__destination a:hover { color: var(--link); }
.mega-menu__destination span { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Browse-our-courses column: the two destinations are the prominent action on
   that edge of the menu, so they render as solid primary buttons (not count
   rows). Also sets a deliberate gap under the intro paragraph. */
.mega-menu__column--browse .section-intro { margin: .5rem 0 1.15rem; }
.mega-menu__column--browse ul { margin: 0; padding: 0; list-style: none; }
.mega-menu__column--browse .mega-menu__destination { display: block; border-bottom: 0; padding-bottom: 0; }
.mega-menu__column--browse .mega-menu__destination span { display: none; }
.mega-menu__column--browse .mega-menu__destination a {
  display: block; text-align: center;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}
.mega-menu__column--browse .mega-menu__destination a:hover { background: var(--link-hover); color: var(--btn-primary-text); }
.mega-menu__escape {
  /* navy-DEEP, not navy: --accent-on-dark is calibrated against --navy-deep, so
     the accent eyebrow + link below clear AA on it for every brand (on the
     lighter --surface-dark, nlc's link measured 3.8:1). */
  background: var(--surface-dark-alt); border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .9rem;
}
.mega-menu__escape h3 { color: var(--white); font-size: 1.625rem; }
/* The escape card is a dark (--surface-dark) card inside the light megamenu
   panel, so its eyebrow + link must read on dark. The base .eyebrow / link
   colour is --em-color / --link (orange on dc, a brand text-on-LIGHT colour) and
   fails on navy. Use the header accent where a brand sets one (dc: teal), else
   --accent-on-dark, which is calibrated for this navy ground on every site. */
.mega-menu__escape .eyebrow { color: var(--header-accent, var(--accent-on-dark)); }
.mega-menu__escape a { color: var(--header-accent, var(--accent-on-dark)); }
.mega-menu__escape a:hover { color: var(--white); }
.mega-menu__quick-entry { background: var(--light); padding-block: 1.1rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

/* Feature call-out card — the managed sibling of the escape card, same dark slot.
   Eyebrow + heading + body, optional chip links, optional CTA. Used by the
   Student Life / Apprenticeships / Employers mega panels. */
.mega-menu__feature {
  background: var(--surface-dark-alt); border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .9rem;
}
/* Pair the label with the token designed for this ground: --btn-accent-text is
   the calibrated foreground for --btn-accent-bg on every brand. Hardcoding
   --navy was navy-on-blue on brands whose accent is blue (dncg), and only
   passed on brands with a light accent (dc's teal). */
.mega-menu__feature .eyebrow { align-self: flex-start; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .2rem .7rem; border-radius: var(--radius-pill); }
.mega-menu__feature h3 { color: var(--white); font-size: 1.625rem; margin: 0; }
.mega-menu__feature p { color: rgba(var(--on-dark-rgb), .86); margin: 0; }
.mega-menu__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.mega-menu__chips li { margin: 0; }
.mega-menu__chips a {
  display: inline-block; padding: .35rem .8rem; border-radius: var(--radius-pill);
  background: rgba(var(--on-dark-rgb), .12); color: var(--white);
  font-size: var(--fs-min); font-weight: 700; text-decoration: none;
  transition: background var(--transition);
}
.mega-menu__chips a:hover { background: rgba(var(--on-dark-rgb), .22); }
.mega-menu__feature-cta { align-self: flex-start; margin-top: .3rem; }

/* Dropdown behaviour (Phase 3 Stage 3). The design-export only ever showed the
   megamenu and submenus OPEN, so the hide-by-default + reveal states are added
   here. Reveal on :hover / :focus-within (pre-JS) and on .is-open (the class the
   Stage 5 script toggles on click/keyboard). Regular wp_nav_menu submenus render
   as a card dropdown; the megamenu (.menu-item-study) spans the full header. */
.menu-item-has-children { position: relative; }
.menu-item-study { position: static; }   /* megamenu anchors to .site-header, not the item */

.sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 15rem; margin: 0; padding: .5rem 0;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.sub-menu a { display: block; padding: .5rem 1.1rem; color: var(--text-heading); text-decoration: none; font-weight: 700; }
.sub-menu a:hover { color: var(--link); background: var(--light); }
/* Menu items given a .separator / .menu-separator custom class are dividers, not
   links: functions.php blanks the anchor, so the <li> is empty and renders as a
   thin rule between groups. Works in flyout sub-menus and mega columns. */
.sub-menu li.menu-separator,
.sub-menu li.separator {
  height: 0; padding: 0; margin: .45rem 1.1rem;
  border-top: 1px solid var(--line);
  list-style: none; pointer-events: none;
}
.mega-menu__column li.menu-separator,
.mega-menu__column li.separator {
  height: 0; padding: 0; margin: .6rem 0 1.1rem;
  border: 0; border-top: 1px solid var(--line);
  list-style: none; pointer-events: none;
}
/* Right-most items' dropdowns open leftwards so they never spill off the
   viewport edge.
   The utility strip needs this as much as the primary menu and did not have it:
   a closed .sub-menu is visibility:hidden but still LAID OUT, so one hanging off
   the right edge adds its full 15rem to the document's scrollable width and the
   page gets a horizontal scrollbar onto blank space — with nothing visible out
   there to explain it. It only showed between ~1025px and ~1280px, because above
   that the page gutter is wide enough to swallow the overhang.
   Three deep rather than the primary menu's two: utility labels are set at the
   1.1rem floor, so more of them fit inside one 15rem panel width. */
.menu-primary > .menu-item:nth-last-child(-n+2) > .sub-menu,
.site-header__info > ul > .menu-item:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }

/* Reveal on click only (.is-open, set by app.js headerNav) — no hover/focus. */
.menu-item-has-children.is-open > .sub-menu,
.menu-item-study.is-open > .mega-menu {
  opacity: 1; visibility: visible; transform: none;
}

/* Breadcrumb — real toolkit vocabulary. Yoast renders a <p class="breadcrumbs">
   with inline <a> links, a "/" separator (forced via wpseo_breadcrumb_separator)
   and a <span class="breadcrumb_last"> current item, so the trail is styled on
   that markup rather than <li>. .disabled kept for any hand-built trail. */
.bread { background: var(--chrome-bg); border-bottom: 1px solid var(--line); }
.bread, .breadcrumbs { line-height: 1.4; }
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  /* padding-inline-start clears an overhanging site logo (--logo-clear, 0 for
     every brand but UCNL). The breadcrumb bar is the first thing under the
     header on a page that shows one, so it is directly in the drop zone. */
  padding-block: 1rem; padding-inline-start: var(--logo-clear); margin: 0; max-width: none;
  font-size: var(--fs-min); letter-spacing: .05em; text-transform: uppercase;
  /* --box-border is a BORDER token (#cfd6da) and was being used as text colour,
     giving the whole breadcrumb trail 1.32:1. decisions.md section 8 flags exactly
     this: a surface/border token used for text moves with the surface for no
     traceable reason, and here it was never legible to begin with. */
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .breadcrumb_last, .breadcrumbs .disabled { color: var(--muted); }

/* Page nav — real toolkit vocabulary. */
.page-navigation { background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 20; }
.page-nav { position: relative; display: flex; align-items: center; gap: 1rem; padding-block: .85rem; flex-wrap: wrap; }
/* The JS-enhanced page nav collapses overflow into a "More" button, so it must
   stay on ONE line — the container must not wrap the More button onto a 2nd row. */
.page-nav.pn-enhanced { flex-wrap: nowrap; }
.page-nav h2 { font-size: var(--fs-min); white-space: nowrap; color: var(--muted); font-family: var(--font-body); font-weight: 700; }
.page-nav > ul { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; min-width: 0; font-weight: 700; }
.page-nav.pn-enhanced > ul { flex-wrap: nowrap; overflow: hidden; }
.page-nav > ul > li { flex: 0 0 auto; }
.page-nav > ul > li > a {
  position: relative;
  display: block; padding: .35rem .6rem;
  color: var(--text-heading); text-decoration: none;
  white-space: nowrap;
}
.page-nav > ul > li > a:hover { color: var(--link); background: var(--light); }
/* Active state: teal text + an underline drawn as a pseudo-element so it never
   changes the item's box height. A real border-bottom, with the row's
   align-items:center, made the active item taller and nudged its text UP out of
   line with the others. This keeps every item's baseline identical. */
.page-nav > ul > li.active > a { color: var(--link); }
.page-nav > ul > li.active > a::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--link);
}
.page-nav > ul > li.cta-apply { max-width: none; margin-left: auto; }
.page-nav > ul > li.cta-apply.page-nav__cta > a {
  display: inline-flex; flex-direction: column; line-height: 1.2;
  background: var(--surface-blue); color: var(--white);
  padding: .5rem 1.2rem; border-radius: var(--radius-pill); border-bottom: 0;
}
.page-nav > ul > li.cta-apply.page-nav__cta > a:hover { background: var(--blue-dark); }
.page-nav__cta-label { font-weight: 700; }
.page-nav__event { font-weight: 600; opacity: .85; }

.page-nav-more { position: relative; flex: 0 0 auto; }
.page-nav-more-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  /* white fill on a white bar: the border is the only thing that identifies the
     control, so it carries the 3:1 interactive weight, not the hairline weight */
  border: 1px solid var(--control-border); background: var(--white);
  color: var(--text-heading); font-weight: 700;
  padding: .35rem .8rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.page-nav-more-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding-block: .4rem; min-width: 220px;
}
.page-nav-more-list[hidden] { display: none; }
.page-nav-more-list li { max-width: none; }
.page-nav-more-list a { display: block; padding: .5rem 1rem; color: var(--text-heading); text-decoration: none; }
.page-nav-more-list a:hover, .page-nav-more-list a:focus { background: var(--light); text-decoration: underline; }

.course-page-nav__compact { display: flex; align-items: center; gap: 1rem; background: var(--surface-dark); padding: .55rem var(--page-gutter); }
.course-page-nav__jump select {
  font-weight: 700; padding: .5rem .9rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--on-dark-rgb), .4); background: transparent; color: var(--white);
}
.course-page-nav__actions { display: flex; align-items: center; gap: .625rem; margin-left: auto; }
.course-page-nav__event { color: var(--accent-on-dark); font-weight: 700; text-decoration: none; }

/* Anchor targets must clear the sticky bar. */
section[id], article[id], div[id] { scroll-margin-top: 84px; }

/* Search reveal panel. Solid ground + its own stacking context so it always
   paints cleanly over whatever follows the header (e.g. the home hero), rather
   than letting that content bleed through the transparent panel. */
.site-search {
  position: relative; z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-md);
  padding-block: 1.4rem;
}
.site-search-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; color: var(--header-fg); }
.search { display: flex; gap: .75rem; flex-wrap: wrap; }
.search__field { position: relative; flex: 1 1 320px; display: flex; background: var(--white); border: 1px solid var(--box-border); border-radius: var(--radius-pill); overflow: hidden; }
.search__field svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search__input { width: 100%; flex: 1 1 auto; min-width: 0; border: 0; padding: .875rem 1.25rem .875rem 3.1rem; color: var(--ink); background: transparent; }
.search__input::placeholder { color: var(--muted); }
.search__field:focus-within { border-color: var(--link); }
.search__field--bare { background: transparent; border: 0; border-radius: 0; }

/* =============================================================================
   Mobile menu. The desktop nav collapses below 64em into a "Menu" button
   (hamburger + the word "Menu"); the JS toggle (#menu-toggle-button, app.js
   headerNav) flips .menu-container.is-open. Submenus/megamenu expand inline.
   ========================================================================== */
.menu-toggle {
  display: none; align-items: center; gap: .5rem;
  background: transparent; border: 2px solid var(--header-border);
  color: var(--header-fg); font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; padding: .5rem .9rem; border-radius: var(--radius-sm); cursor: pointer;
}
.menu-toggle__icon { flex: 0 0 auto; }

@media (max-width: 64em) {
  /* The utility strip goes as a STRIP, not as content: app.js relocates the
     whole .site-header__info into the drawer, below the study menu, and lifts
     the search trigger out to sit beside the Menu toggle. The element is styled
     by where it currently lives — hidden in the bar, restyled in the drawer —
     so nothing is duplicated and there is one copy of each link. */
  .site-header__inner > .site-header__info { display: none; }
  /* Column roles invert once the menu is a pair of controls: the controls take
     the width they need and the brand takes the remainder, rather than the
     brand claiming max-content and squeezing the controls to nothing. */
  .site-header__main { grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; padding-block: .3rem; }

  /* No second column to divide from once the menu is behind the toggle. */
  .site-header__brand { border-inline-end: 0; padding-inline-end: 1rem; padding-block: .7rem; }
  #main-nav { padding-inline-start: 0; gap: 1.25rem; }
  .menu-toggle { display: inline-flex; }
  /* The relocated search trigger sits left of the toggle and inherits the bar's
     own foreground rather than the strip's muted one. */
  #main-nav > .site-header__search-link { flex: 0 0 auto; color: var(--header-fg); font-weight: 700; font-size: var(--fs-min); }

  /* The drawer is the full width of the header, so it comes out of the menu
     column and hangs off .site-header (the only positioned ancestor) — below
     the audience rule, which stays visible. */
  #main-nav .menu-container {
    position: absolute; inset-inline: 0; top: 100%; z-index: 55;
    margin: 0; padding: .2rem var(--page-gutter) 1.4rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--shadow-md);
    display: none;
  }
  #main-nav .menu-container.is-open { display: block; }

  .menu-primary { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .menu-primary > .menu-item { border-top: 1px solid var(--header-border); }
  /* Full-width rows with the caret pushed to the trailing edge. Kept as flex,
     not block: a <button> is centred by the UA stylesheet, and the dropdown
     parents ARE buttons once app.js has swapped them. Labels may wrap here —
     the single-line rule is about the horizontal bar, not the drawer. */
  .menu-primary > .menu-item > a,
  .menu-primary > .menu-item > button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    padding: .95rem .2rem; font-size: 1.45rem; border-bottom: 0; white-space: normal;
  }

  /* The utility menu, once app.js has moved it into the drawer. Same element as
     the desktop strip, so every strip property it carries has to be unwound:
     it is no longer a grid item, no longer full-bleed, no longer a right-aligned
     flex row. It reads as the secondary block it is — smaller and quieter than
     the study menu it sits under, separated by a rule. */
  .menu-container > .site-header__info {
    display: block;
    padding-inline: 0; padding-block: 0;
    margin-top: .9rem; padding-top: .5rem;
    background: none;
    border-bottom: 0;
    border-top: 1px solid var(--header-border);
  }
  .menu-container > .site-header__info > ul {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 0; padding-block: 0;
  }
  /* Beats .site-header__info .menu-item-has-children > button (0,3,1), which
     sets inline-flex for the strip's inline caret. */
  .menu-container > .site-header__info a,
  .menu-container > .site-header__info .menu-item-has-children > button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    padding: .6rem .2rem;
    font-size: var(--fs-min); font-weight: 600;
    color: var(--header-fg-muted); white-space: normal;
  }
  .menu-container > .site-header__info a:hover,
  .menu-container > .site-header__info .menu-item-has-children > button:hover { color: var(--header-fg); }

  /* Submenus + megamenu expand inline (tap toggles .is-open via app.js). */
  .sub-menu, .mega-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    min-width: 0; width: auto; padding: 0; margin: 0;
    display: none;
  }
  .menu-item-has-children.is-open > .sub-menu,
  .menu-item-study.is-open > .mega-menu { display: block; padding: 0 0 .6rem 1rem; }
  .mega-menu__panel { grid-template-columns: 1fr; gap: 1rem; padding-block: .6rem; }

  /* ---------------------------------------------------------------------
     Panel contents re-grounded on the header bar.

     On desktop these panels paint their own white card, so everything inside
     is coloured for a LIGHT ground: .eyebrow takes --em-color (DC's deep
     orange), .section-intro and the destination counts take --muted, rules take
     --line. The rule above flattens that card to `background: transparent`, so
     on a dark bar all of it lands on --header-bg and drops to roughly 2:1.

     Everything below therefore re-points at the header's own channels, which is
     what makes this safe on all six brands rather than only the dark three:
     --header-fg / --header-fg-muted / --header-border already flip per brand, so
     the white-bar sites (hesta, ucnl, dncg) resolve back to their navy-on-white
     values and see no change at all. --header-accent is only set where a brand
     has proved an accent against its own bar (DC's teal, 8:1 on navy); every
     other brand falls back to the plain foreground rather than guessing.
     --------------------------------------------------------------------- */
  .sub-menu a, .mega-menu a { color: var(--header-fg); padding-inline: 0; }
  /* Underline, not just a colour shift: hover feedback has to survive on a
     ground where the brand's --link is one of the colours that just failed. */
  .sub-menu a:hover, .mega-menu a:hover {
    background: transparent; color: var(--header-accent, var(--header-fg)); text-decoration: underline;
  }
  .sub-menu .eyebrow, .mega-menu .eyebrow { color: var(--header-accent, var(--header-fg)); }
  .sub-menu p, .mega-menu p,
  .sub-menu .section-intro, .mega-menu .section-intro { color: var(--header-fg-muted); }
  .mega-menu__destination { border-bottom-color: var(--header-border); }
  .mega-menu__destination span { color: var(--header-fg-muted); }
  .sub-menu li.menu-separator, .sub-menu li.separator,
  .mega-menu__column li.menu-separator, .mega-menu__column li.separator { border-top-color: var(--header-border); }
  /* Both of these are GROUND swaps that only read against a white card — a navy
     panel on a navy bar, and a --light band on a bar that may itself be light.
     Drop the fills and let the hairline carry the grouping instead. */
  .mega-menu__escape { background: transparent; border: 1px solid var(--header-border); }
  .mega-menu__escape h3 { color: var(--header-fg); }
  .mega-menu__quick-entry { background: transparent; }
}

/* Between the full layout and the collapse point the brand and a four- or
   five-item study menu are competing for the same content width. Tighten the
   split and the logo before anything is asked to wrap. */
@media (max-width: 80em) and (min-width: 64.0625em) {
  .site-header { --header-split: 1.4rem; }
  .site-header-logo img { height: calc(var(--logo-height) * .88); }
}

/* Phone tier. The group lockup is drawn at 14:1, so at its normal height it is
   on its own wider than the content column a phone leaves after --page-gutter.
   Three things give: the endorsement line breaks under its own label, the
   lockup drops to its floor height, and the two controls go icon-only with
   their labels kept for assistive tech. */
@media (max-width: 40em) {
  .site-header__group { flex-wrap: wrap; gap: .1rem .5rem; }
  .site-header__group-logo { height: 12px; }
  .site-header__brand { padding-inline-end: .75rem; gap: .35rem; }
  #main-nav { gap: .5rem; }

  .menu-toggle { padding: .5rem .6rem; }
  .menu-toggle span,
  #main-nav > .site-header__search-link span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  #main-nav > .site-header__search-link { padding: .5rem .4rem; }
  #main-nav .menu-container { padding-inline: var(--page-gutter); }
}
/* footer
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Footer. Class names ours — see notes.md. */
.site-footer { background: var(--surface-muted); color: var(--white); }
.site-footer a { color: rgba(var(--on-dark-rgb), .88); }
.site-footer a:hover { color: var(--accent-on-dark); }
.footer-top { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 2.6rem; padding-block: 3rem 2.2rem; }
.footer-top h2 { color: var(--white); font-size: 1.875rem; margin-bottom: 1.1rem; }
.footer-top ul { display: flex; flex-direction: column; gap: .5rem; color: rgba(var(--on-dark-rgb), .88); }
.footer-bottom { display: flex; flex-direction: column; gap: .8rem; padding-block: 1.6rem 2rem; }
/* Bottom info links as a single horizontal, wrapping row. */
.footer-info-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; }
.footer-info-links li { margin: 0; }
.footer-info-links a { font-size: var(--fs-min); }
.footer-bottom p { color: rgba(var(--on-dark-rgb), .6); max-width: none; }

/* Partner / accreditation logo strip — even white cards, centred, consistent
   sizing so mixed logos sit tidily on the dark footer. */
.logo-bar { padding-block: 2.6rem; border-bottom: 1px solid rgba(var(--on-dark-rgb), .14); }
.logos { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: stretch; justify-content: center; gap: 1rem; }
.logos li { flex: 0 1 200px; }
/* The block's logo_bar.css also styles `.logo-bar .logos li` as a white rounded
   card; in the footer the card is the <a>, so neutralise that so we don't get a
   card inside a card. */
.site-footer .logo-bar .logos li { background: none; border: 0; border-radius: 0; height: auto; min-width: 0; }
.logos a { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 76px; background: var(--white); border-radius: 0; padding: .55rem 1rem; transition: transform var(--transition); }
.logos a:hover { transform: translateY(-3px); }
.logos img { display: block; max-height: 78px; width: auto; max-width: 100%; object-fit: contain; }

@media (max-width: 64em) { .footer-top { grid-template-columns: 1fr; } .logos li { flex-basis: 160px; } }

/* social channels: the inline SVG sat flush against its label. Space the icon
   from the text and give the rows a touch more air than the generic footer list. */
.footer-top .social-media { gap: .7rem; }
.social-media a { display: inline-flex; align-items: center; gap: .55rem; }
.social-media svg { flex: 0 0 auto; width: 1.2em; height: 1.2em; }
/* hero-page — shared hero media stack, page-title hero, blog post band
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* =============================== GROUP 5 · HEROES ======================== */

/* All heroes share one media stack: greyscale footage, a brand multiply, a
   scrim. What differs is how much page they spend. */
.hero, .hero-media, .full-page-hero { position: relative; overflow: hidden; background: var(--page-title-bg); }
.hero-background, .full-page-hero__background { position: absolute; inset: 0; opacity: var(--page-title-media-opacity); }
.hero-background > img, .hero-background > video,
.full-page-hero__image > img, .full-page-hero__image > video { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.45); }
.full-page-hero__image { position: absolute; inset: 0; }
.hero__tint, .full-page-hero__tint { position: absolute; inset: 0; background: var(--hero-tint); mix-blend-mode: color; opacity: .9; }
.overlay, .full-page-hero__overlay { position: absolute; inset: 0; background: linear-gradient(115deg, rgba(var(--tint-rgb), .94) 0%, rgba(var(--tint-rgb), .62) 100%); }
.full-page-hero__overlay { background: radial-gradient(120% 90% at 12% 12%, rgba(var(--tint-rgb), .3) 0%, rgba(var(--tint-rgb), .94) 78%); }

.hero .content, .hero-media .content { position: relative; padding-block: 2.8rem 2.6rem; max-width: 62ch; }
/* Page-title band (parts/page/hero.php uses .row/.columns, not .content) — give
   it breathing space so the title doesn't hug the header. */
.hero-page { padding-block: 3.4rem 3rem; }
/* padding-inline-start clears an overhanging site logo (--logo-clear in
   tokens.css, 0 for every brand but UCNL). Every page-title band is
   `.hero.hero-page > .row`, so this one rule covers page, blog, course, event
   and 404 titles: the h1 starts to the RIGHT of the logo instead of under it. */
.hero-page > .row {
  position: relative; z-index: 1;
  padding-inline-start: calc(var(--page-gutter) + var(--logo-clear));
}
/* Three page-title heroes wrap their .row in the slider scaffold
   (.hero-slider-container > .hero-slide-inner > .hero-slide) rather than hanging
   it off the section: course-archive-hero, course-tax-hero and
   waterfront-menus/hero. The child combinator above misses all three, so the
   course archive, course category and menu titles ran under the UCNL mark.
   --logo-clear ONLY here, no --page-gutter: these rows have never carried the
   gutter, and adding it would move them 46px on the other five brands. */
.hero-page > .hero-slider-container .row { padding-inline-start: var(--logo-clear); }

/* The three pagebuilder heroes page.php lifts into the hero slot. All three are
   top-of-page by construction (page.php renders the first hero layout it finds
   above <main> and skips every hero layout in the loop), so they sit in the
   drop zone exactly like a page-title band.
   search_hero is deliberately absent: .hero-content-wrapper carries
   padding-top:15rem = 240px, well past the 140px --logo-overhang, so its title
   already clears the mark and 170px of inset would only misalign it. */
.full-page-hero > .row { padding-inline-start: var(--logo-clear); }
.hero-media > .content { padding-inline-start: var(--logo-clear); }
.hero-page-reduced { padding-block: 2.4rem 2.1rem; }
.hero-page-minimal { padding-block: 1.8rem 1.5rem; }
/* .hero-media is on every one of these, not just .hero.
   The media stack (line 9) and the content box (line 18) already pair the two,
   but every COLOUR rule below used to scope to .hero alone. hero_unit emits
   .hero-media, so its heading and body copy inherited dark text onto the dark
   hero band: navy on navy, on all six brands, unreadable.
   This is the same fault as the .hero-page-content one noted below, found a
   second time in a second selector. If a rule here sets a colour for text on the
   hero band, it needs both class names. */
.hero h1, .hero .title-font,
.hero-media h1, .hero-media .title-font { color: var(--page-title-fg); }
.hero .eyebrow,
.hero-media .eyebrow { color: var(--page-title-eyebrow); }
.hero h1 em, .hero .title-font em,
.hero-media h1 em, .hero-media .title-font em { color: var(--page-title-em); }
/* Both the design-export lead class AND what parts/page/hero.php actually emits
   (.hero-page-content > p, the page synopsis). Only .d-lead was styled, so the
   synopsis inherited dark body text onto the dark hero band (invisible on ucdon).
   Both names, one rule.
   .hero-media .content covers hero_unit, whose `content` field is raw WYSIWYG
   dropped straight into .content, so it can hold p, ul, li and strong. */
.hero .d-lead,
.hero .hero-page-content,
.hero .hero-page-content p,
.hero-media .content,
.hero-media .content p,
.hero-media .content li { color: var(--page-title-muted); }
/* Prose links on the band. Colour alone does not clear contrast here, so they
   carry the heading colour and keep their underline. */
.hero-media .content a { color: var(--page-title-fg); }

/* WITH background media, the .overlay guarantees a dark ground whatever the
   brand's band colour is, so the text has to be on-dark rather than band-coloured.
   Those are the same thing on five brands. On dncg they are opposites:
   dncg-child sets --page-title-bg to a light grey and --page-title-fg to dark
   text, but inherits the near-black --tint-rgb the overlay is built from, so
   band-coloured text over media was dark on dark. full_page_hero never hit this
   because it hardcodes var(--white) and ignores the band tokens entirely. */
.hero-media--has-media h1,
.hero-media--has-media .title-font { color: var(--text-on-dark); }
.hero-media--has-media h1 em,
.hero-media--has-media .title-font em { color: var(--accent-on-dark); }
.hero-media--has-media .eyebrow { color: var(--accent-on-dark); }
.hero-media--has-media .content,
.hero-media--has-media .content p,
.hero-media--has-media .content li { color: rgba(var(--on-dark-rgb), .88); }
.hero-media--has-media .content a { color: var(--text-on-dark); }

/* Blog post band. No blog vocabulary exists in the toolkit — see notes.md. */
.hero-post .content { max-width: 70ch; }
.hero-post h1 { font-size: 3rem; line-height: 1.05; letter-spacing: var(--display-track); }
.post-category { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .35rem .9rem; border-radius: var(--radius-pill); }
/* .hero-post-date is what parts/blog/single-hero.php actually emits; only
   .post-meta was ever styled, so the published date inherited the page text colour
   onto the dark hero band and measured 1.02:1. Both names, one rule. */
.post-meta,
.hero-post-date { font-size: var(--fs-min); color: var(--page-title-muted); font-variant-numeric: tabular-nums; }

/* Hero breadcrumb — context nav rendered inside a .hero-page dark ground
   (employer sub-system apply/enquiry/subject pages). Was previously carried by
   per-plugin inline CSS at 0.9rem; re-homed here, tokenised, at the 1.1rem floor. */
.hero-breadcrumb { margin-bottom: 1rem; font-size: var(--fs-min); color: var(--page-title-muted); }
.hero-breadcrumb a { color: var(--page-title-muted); text-decoration: none; transition: color .2s ease; }
.hero-breadcrumb a:hover { color: var(--page-title-fg); text-decoration: underline; }
.hero-breadcrumb span { color: var(--page-title-muted); }
.hero-page-minimal .hero-breadcrumb { margin-bottom: .5rem; }
.post-header-meta { display: flex; align-items: center; gap: .875rem; flex-wrap: wrap; margin-bottom: 1rem; }
/* .post-byline (__avatar / __name / __role) REMOVED, deliberately.
   design-export/components-heroes.html designs a post byline — avatar, author
   name, role and an "All posts" link. No template ever built it, so this was
   dead CSS, but it was a ready-made styled slot for a staff name on the front
   end, which the author-disclosure rule in functions.php now forbids outright.
   Leaving it would have made re-introducing the leak a one-line markup change
   that already looked designed and intentional.
   The prototype component is superseded, not lost: it is still in the design
   export if the policy is ever revisited. */
.post-share { margin-left: auto; display: flex; gap: .625rem; align-items: center; }
.post-share > span { font-size: var(--fs-min); color: var(--page-title-muted); }
.post-share a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--page-title-border); display: flex; align-items: center; justify-content: center; color: var(--page-title-fg); text-decoration: none; font-weight: 700; }

/* Standard hero with CTAs + video controls (Stage 4: heroes consolidated
   here; the full_page_hero / hero_unit / carousel blocks inherit this). */
.full-page-hero { min-height: 520px; display: flex; background: var(--surface-dark-alt); }
.full-page-hero__content { position: relative; padding-block: 3rem; display: flex; flex-direction: column; justify-content: center; max-width: 74ch; }
.full-page-hero--center .full-page-hero__content { align-items: center; text-align: center; margin-inline: auto; }
.full-page-hero__badge { align-self: flex-start; font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .4rem 1rem; border-radius: var(--radius-pill); margin-bottom: 1.2rem; }
.full-page-hero__title { color: var(--white); font-size: 4.25rem; line-height: .98; margin-bottom: 1.1rem; }
.full-page-hero__title em { color: var(--accent-on-dark); }
.full-page-hero__intro { font-size: 1.4375rem; line-height: 1.55; color: rgba(var(--on-dark-rgb), .88); margin-bottom: 1.6rem; }
.full-page-hero__details { display: flex; flex-wrap: wrap; margin-bottom: 1.8rem; font-variant-numeric: tabular-nums; }
.full-page-hero__detail { padding-right: 1.6rem; margin-right: 1.6rem; border-right: 1px solid rgba(var(--on-dark-rgb), .28); }
.full-page-hero__detail:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.full-page-hero__detail strong { display: block; font-family: var(--font-display); font-weight: 800; font-size: 1.875rem; color: var(--accent-on-dark); line-height: 1.1; }
.full-page-hero__detail span { display: block; font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .8); }
.full-page-hero__ctas, .carousel-cta { display: flex; gap: .875rem; flex-wrap: wrap; }
.carousel-cta-left { justify-content: flex-start; }

.controls { position: absolute; right: 24px; bottom: 24px; }
.controls button { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(var(--on-dark-rgb), .5); background: rgba(var(--tint-rgb), .45); color: var(--white); font-size: var(--fs-min); }

@media (max-width: 64em) {
  .full-page-hero__title { font-size: 3rem; }
  .hero-post h1 { font-size: 2.25rem; }
}
/* card — card, event/people card, tile
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Card. The direction moves the accent edge from border-bottom to the LEFT,
   3px resting, 7px on hover, carrying the taxonomy colour. */
.card {
  position: relative; display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: var(--card-edge) solid var(--accent);
  border-radius: var(--radius-sm);
  overflow: hidden;
  transition: border-left-width var(--transition), box-shadow var(--transition);
}
.card:hover { border-left-width: var(--card-edge-hover); }
.card--students { border-left-color: var(--aud-students); }
.card--parents  { border-left-color: var(--aud-parents); }
.card--employers { border-left-color: var(--aud-employers); }
.card--neutral  { border-left-color: var(--dblue); }
.card--brand    { border-left-color: var(--accent-2); }
/* Legacy colour-named modifiers. */
.card--magenta { border-left-color: var(--surface-brand); }
.card--lime { border-left-color: var(--lime); }
.card--navy { border-left-color: var(--navy); }
.card--green { border-left-color: var(--aud-employers-text); }

.card > img, .card .card-image {
  width: 100%; aspect-ratio: 16 / 10; object-fit: cover;
  background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); color: var(--ph-ink);
}
.card .card-section { display: flex; flex-direction: column; gap: .55rem; flex: 1 1 auto; padding: 1.4rem 1.5rem; }
.card h3 { font-size: 1.4375rem; }
.card .feature-link { color: var(--text-heading); text-decoration: none; }
.card .feature-link:hover { color: var(--link); text-decoration: underline; }
.card .card-info, .card .card__by, .card .card-date, .card .card-location {
  font-size: var(--fs-min); color: var(--muted); line-height: 1.5;
}
.card .card-info { margin-top: auto; padding-top: .9rem; }

/* Row/list variants. */
.course-cards-list .card, .file-cards-list-plain .card,
.people-cards-list > .card, .people-cards-list-image > .card, .people-cards-list-full > .card { flex-direction: row; }
.course-cards-list .card .card-image,
.people-cards-list > .card .card-image,
.people-cards-list-image > .card .card-image,
.people-cards-list-full > .card .card-image { flex: 0 0 168px; aspect-ratio: auto; }
.file-cards-list-plain .card-section { flex-direction: row; align-items: center; gap: .875rem; }
.file-cards-list-plain .card h3, .file-cards-list-plain .card h4 { margin-bottom: 0; flex: 1 1 auto; }
.file-cards-list-plain .card-info { margin-top: 0; padding-top: 0; }

/* Event card. The block wraps the 16:9 image + a floating datebox badge in
   .event-card-media, then the text in a normal column .card-section. */
.event-card { overflow: hidden; }
.event-card-media { position: relative; }
.event-card-media img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.event-card-media .event-card-datebox {
  position: absolute; top: 12px; left: 12px;
  background: var(--white); border-radius: var(--radius-sm);
  padding: .5rem .85rem; box-shadow: var(--shadow-md);
  display: flex; flex-direction: column; align-items: center;
}
.event-card .card-section { padding: 1.3rem 1.4rem 1.5rem; }
.event-card-datebox { text-align: center; font-variant-numeric: tabular-nums; line-height: 1; }
.event-card-day, .event-card-datebox-day { font-family: var(--font-display); font-weight: 800; font-size: 2rem; line-height: 1; color: var(--text-heading); }
.event-card-mon, .event-card-datebox-mon { font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.event-card-cat { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--link); margin-bottom: .4rem; }
.event-card h3 { margin-bottom: .3rem; }
.event-card .card-info { display: flex; flex-direction: column; gap: .25rem; margin-top: auto; padding-top: .9rem; }
.event-card-time, .event-card .card-location { display: inline-flex; align-items: center; gap: .4rem; }

/* People card. */
.people-cards .card-name { padding: 1.2rem 1.1rem 0; }
.people-cards .card-name h3 { font-family: var(--font-display); margin-bottom: 0; }
.people-cards .card-info-role { margin: .35rem 0 0; font-size: var(--fs-min); color: var(--muted); }
.people-cards .card-section { padding: .8rem 1.1rem 1.4rem; }
.people-cards .card-info-summary { margin-bottom: .8rem; font-size: var(--fs-min); line-height: 1.5; color: var(--muted); }
.people-cards .card-info-contact { margin: 0; font-size: var(--fs-min); }

/* Tile — a card with no image and one number that earns the click. */
.card-grid__card {
  display: flex; flex-direction: column; gap: .5rem;
  background: var(--white); text-decoration: none;
  border: 1px solid var(--line);
  border-left: var(--card-edge) solid var(--accent);
  border-radius: var(--radius-sm);
  padding: 1.5rem 1.6rem;
  transition: border-left-width var(--transition);
}
.card-grid__card:hover { border-left-width: var(--card-edge-hover); }
.card-grid__category { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--em-color); }
.card-grid__card-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.5625rem; line-height: 1.08; color: var(--text-heading); }
.card-grid__description { font-size: var(--fs-min); color: var(--muted); }
.card-grid__pill { margin-top: auto; padding-top: .9rem; font-size: var(--fs-min); color: var(--muted); font-variant-numeric: tabular-nums; }
.card-grid__group-heading { font-size: 1.4rem; margin-bottom: .8rem; }
/* card grid — row-cards / card-grid layouts
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

.row-cards { display: grid; gap: var(--gap-grid); }
/* .card-grid is the grid container; the modifier sets the columns. The base rule
   must NOT set columns or, sitting later in the file than the --2-col/--3-col
   modifiers, it would override them (the 2-col grid was rendering as auto-fill,
   giving two ~⅓ cards and a gap). */
.card-grid { display: grid; gap: var(--gap-grid); }
.row-cards-2, .card-grid--2-col { grid-template-columns: repeat(2, 1fr); }
.row-cards-3, .card-grid--3-col { grid-template-columns: repeat(3, 1fr); }
.row-cards-4 { grid-template-columns: repeat(4, 1fr); }
/* auto-FIT (not auto-fill): empty tracks collapse, so 2 cards fill the row
   instead of leaving a ghost third column. */
.card-grid--auto { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
/* The events block names its layout .events-cards-Ngrid[-feature] rather than
   .row-cards-N, so map those to the same column counts. */
.events-cards-3grid, .events-cards-3grid-feature { grid-template-columns: repeat(3, 1fr); }
.events-cards-4grid, .events-cards-4grid-feature { grid-template-columns: repeat(4, 1fr); }
.events-cards-5grid, .events-cards-5grid-feature { grid-template-columns: repeat(5, 1fr); }

/* Same problem, same fix, for the course list. `.course-cards-Ngrid` is emitted
   by BOTH the courses block and multiple_course_lists, so it belongs here in the
   shared grid rather than in either block file. Neither count was mapped, so a
   block set to "3 tiles per row" resolved to the base .row-cards grid, which
   sets no columns, and rendered as one stacked column.
   4-col extracted from sites/dc/dc-child/style.css L7806-7811 (which gated it at
   64em); 3-col follows the field label, which states the count. */
.course-cards-3grid { grid-template-columns: repeat(3, 1fr); }
.course-cards-4grid { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 64em) {
  .row-cards-3, .row-cards-4, .card-grid--3-col,
  .events-cards-3grid, .events-cards-3grid-feature,
  .events-cards-4grid, .events-cards-4grid-feature,
  .events-cards-5grid, .events-cards-5grid-feature,
  .course-cards-3grid, .course-cards-4grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .row-cards-2, .row-cards-3, .row-cards-4,
  [class*="events-cards-"],
  .course-cards-3grid, .course-cards-4grid,
  .card-grid, .card-grid--2-col, .card-grid--3-col { grid-template-columns: 1fr; }
}
/* ==========================================================================
   Component: slider
   Source site: dc (fullest)
   Owns: the accessible carousel engine styling (.dncg-carousel*, built by
     js/carousel.js) shared by the carousel, image_carousel and testimonial
     blocks, PLUS the carousel block's own slide-content styling
     (.carousel-slider, .hero-slide + descendants, .image-overlay geometry).

   Stage 6 rebuild: slick + jQuery were removed. The old .slick-* core, the
   slick dot machinery (.slider-dots-container), the .carousel-slider-controls
   positioning and the dead @keyframes slideup2/3/4 are gone. Navigation is now
   generated and styled as .dncg-carousel__* below.

   Block-scoped slider usages (.testimonials-slider content, .home-hero-split,
     .hero-page, .hero-background) are deltas owned by their own block files.
   ========================================================================== */

/* ==========================================================================
   dncg carousel engine  —  structure + controls (js/carousel.js)
   Everything here is scoped under .dncg-carousel, which the engine adds on
   init. With no JS the slides simply stack (visible, reachable fallback).
   ========================================================================== */
.dncg-carousel {
  position: relative;
}
.dncg-carousel__viewport {
  overflow: hidden;
  /* Let vertical page scroll through; the engine captures horizontal drags. */
  touch-action: pan-y;
}
.dncg-carousel__track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}
.dncg-carousel__track.is-instant {
  transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
  .dncg-carousel__track {
    transition: none;
  }
}
.dncg-carousel__slide {
  min-width: 0;
  box-sizing: border-box;
}

/* Arrows: glass discs with a currentColor chevron. A light disc + dark chevron
   reads clearly over both dark hero images and light section backgrounds. */
.dncg-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  padding: 0;
  border: 1px solid rgba(var(--on-dark-rgb), 0.35);
  border-radius: 50%;
  /* Dark scrim + white chevron: a white button vanished on light slides. */
  background: rgba(var(--navy-deep-rgb), 0.6);
  color: var(--white);
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(var(--shadow-rgb), 0.28);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  transition:
    background 0.2s ease,
    transform 0.2s ease,
    opacity 0.2s ease;
}
@media print, screen and (min-width: 40em) {
  .dncg-carousel__arrow {
    width: 3.5rem;
    height: 3.5rem;
  }
}
.dncg-carousel__arrow::before {
  content: "";
  width: 0.8rem;
  height: 0.8rem;
  border: solid currentColor;
  border-width: 0.2rem 0.2rem 0 0;
}
.dncg-carousel__arrow--prev {
  left: 0.75rem;
}
.dncg-carousel__arrow--prev::before {
  transform: translateX(25%) rotate(-135deg);
}
.dncg-carousel__arrow--next {
  right: 0.75rem;
}
.dncg-carousel__arrow--next::before {
  transform: translateX(-25%) rotate(45deg);
}
.dncg-carousel__arrow:hover {
  /* The disc flips to a light fill on hover, but the chevron is drawn with
     `border: solid currentColor` and the resting colour is --white, so on hover it
     was white-on-light and the arrow effectively disappeared. Flip the glyph too. */
  background: var(--surface);
  color: var(--text-heading);
  transform: translateY(-50%) scale(1.06);
}
.dncg-carousel__arrow[disabled] {
  opacity: 0.35;
  cursor: default;
  box-shadow: none;
}
.dncg-carousel__arrow[disabled]:hover {
  transform: translateY(-50%);
  background: rgba(var(--overlay-light-rgb), 0.9);
}

/* Dots: a translucent capsule so the indicators read on any background. */
.dncg-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: 1rem;
  transform: translateX(-50%);
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.25rem 0.5rem;
  border-radius: 999px;
  /* 0.45 left the dots sitting on "45% dark over whatever the slide shows", so
     dot-to-pill contrast varied with the image and measured 1.61-1.89:1. At 0.88
     the pill is a predictable dark ground on any slide and the dots clear 3:1. */
  background: rgba(var(--surface-dark-rgb), 0.88);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* The hit area is the BUTTON (24x24 minimum, WCAG 2.2 target size); the visible
   dot is the ::before, so the design keeps its 12px dot without the control being
   12px. Previously the button itself was 12x12, and 28x12 when active. */
.dncg-carousel__dot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  transition: width 0.2s ease;
}
.dncg-carousel__dot::before {
  content: "";
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 999px;
  background: rgba(var(--overlay-light-rgb), 0.7);
  transition:
    background 0.2s ease,
    width 0.2s ease;
}
.dncg-carousel__dot:hover::before {
  background: rgba(var(--overlay-light-rgb), 0.9);
}
.dncg-carousel__dot.is-active {
  width: 2.5rem;
}
.dncg-carousel__dot.is-active::before {
  width: 1.75rem;
  background: var(--text-on-dark);
}

/* --- Progress variant (opt-in via data-carousel {"progress":true}) ----------
   Used by the testimonials carousel. Replaces the dot pagination with a bottom
   control bar: a "n / total" counter, a fill-track progress bar, and the two
   arrows moved inline (round, outlined). Sits below the slides on the dark
   section ground, under a hairline. */
.dncg-carousel--progress .dncg-carousel__bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-top: 2rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(var(--on-dark-rgb), 0.18);
}
.dncg-carousel--progress .dncg-carousel__counter {
  flex: 0 0 auto;
  font-size: var(--fs-min);
  font-variant-numeric: tabular-nums;
  color: rgba(var(--on-dark-rgb), 0.6);
}
.dncg-carousel--progress .dncg-carousel__progress {
  flex: 1 1 auto;
  height: 2px;
  border-radius: 999px;
  background: rgba(var(--on-dark-rgb), 0.2);
  overflow: hidden;
}
.dncg-carousel--progress .dncg-carousel__progress-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--accent-on-dark);
  transition: width 0.35s var(--ease-out);
}
.dncg-carousel--progress .dncg-carousel__nav { flex: 0 0 auto; display: flex; gap: 0.6rem; }
/* Arrows move from the slide edges into the bar: static, round, outlined. */
.dncg-carousel--progress .dncg-carousel__arrow {
  position: static;
  transform: none;
  width: 3rem;
  height: 3rem;
  background: transparent;
  border-color: rgba(var(--on-dark-rgb), 0.4);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.dncg-carousel--progress .dncg-carousel__arrow:hover {
  background: rgba(var(--on-dark-rgb), 0.12);
  color: var(--white);
  border-color: var(--white);
  transform: scale(1.06);
}
.dncg-carousel--progress .dncg-carousel__arrow[disabled]:hover { transform: none; background: transparent; }

/* Play / pause (only rendered when a block opts into autoplay). */
.dncg-carousel__playpause {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid rgba(var(--shadow-rgb), 0.12);
  border-radius: 50%;
  background: rgba(var(--overlay-light-rgb), 0.9);
  color: var(--text);
  cursor: pointer;
}
/* Playing -> pause glyph (two bars). */
.dncg-carousel__playpause::before {
  content: "";
  width: 0.4rem;
  height: 0.9rem;
  border-left: 0.28rem solid currentColor;
  border-right: 0.28rem solid currentColor;
  box-sizing: content-box;
}
/* Paused -> play glyph (triangle). */
.dncg-carousel__playpause.is-paused::before {
  width: 0;
  height: 0;
  border: 0.45rem solid transparent;
  border-right: 0;
  border-left: 0.7rem solid currentColor;
}

/* --- shared image-overlay geometry (source dc 5000-5013) --- */
.related-links .image-overlay,
.home-hero-split .image-overlay,
.carousel-slider .hero-slide .image-overlay {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
}

/* --- carousel-slider (source dc 5524-5811) --- */
.carousel-slider {
  margin: 0;
  overflow: hidden;
  position: relative;
}
/* Hero (content) carousels render white text on their dark slides at mobile
   sizes. The image carousel (.carousel-images) has its own captions on the
   page background, so it is excluded. */
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider:not(.carousel-images) {
    color: var(--text-on-dark) !important;
  }
}
.carousel-slider-logo {
  padding: 1rem;
  max-height: 100px;
  width: auto;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider-logo {
    padding: 0 2rem;
  }
}
.carousel-slider .hero-slide {
  background-color: var(--surface-blue);
  display: flex;
  display: -ms-flexbox;
  -ms-flex-align: center;
  justify-content: center;
  flex-direction: column;
  position: relative;
  color: var(--text-on-dark);
  padding-bottom: 4em;
  height: auto;
  min-height: 50vh;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide {
    min-height: 60vh;
  }
}
@media screen and (max-height: 750px) {
  .carousel-slider .hero-slide {
    min-height: 60vh;
  }
}
.carousel-slider .hero-slide .image-overlay {
  height: 120%;
}
/* Forced legibility: a scrim over the background image so overlaid content is
   readable by default, whatever image an editor picks. Stronger on mobile. */
.carousel-slider .hero-slide .image-overlay::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
  background: rgba(var(--shadow-rgb), 0.35);
}
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider .hero-slide .image-overlay::before {
    content: "";
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: rgba(var(--shadow-rgb), 0.7);
  }
}
.carousel-slider .hero-slide .row {
  width: 100%;
  position: relative;
  z-index: 90;
  padding: 6rem 1rem 0 1rem;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide .row {
    padding: 0 2rem;
  }
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row {
    padding: 0 2rem;
  }
}
@media screen and (min-width: 87.5em) {
  .carousel-slider .hero-slide .row {
    padding: 0;
  }
}
@media screen and (max-height: 750px) {
  .carousel-slider .hero-slide .row {
    padding-top: 8em;
  }
}
.carousel-slider .hero-slide .row .outline-cta {
  margin: 2rem 0 0 0;
}
.carousel-slider .hero-slide .row h2 {
  margin: 0;
  line-height: 1;
  font-weight: 700;
  display: inline-block;
  vertical-align: top;
  padding-bottom: 1.2rem;
  font-size: 2.2rem;
}
.carousel-slider .hero-slide .row h2 :after {
  clear: both;
  content: "";
  width: 100%;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2rem;
  }
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2rem;
  }
}
@media screen and (min-width: 67.5em) {
  .carousel-slider .hero-slide .row h2 {
    font-size: 2.5rem;
    line-height: 1;
  }
}
@media print, screen and (max-width: 41.68625em) {
  .carousel-slider .hero-slide .row h2 {
    background-color: transparent !important;
  }
}
/* Content over the image: forced glass backdrop (translucent dark + blur) so
   the copy is legible by default. Editor content_background_colour /
   content_text_colour (inline) still override this. */
.carousel-slider .hero-slide .row .carousel-content {
  padding: 1.25rem 1.5rem;
  font-size: 1.1rem;
  color: var(--text-on-dark);
  background: rgba(var(--surface-dark-alt-rgb), 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border-radius: 8px;
}
.carousel-slider .hero-slide .row .carousel-content a {
  color: var(--text-on-dark);
  text-decoration: underline;
}
/* Title sits above the glass panel, directly on the image - keep it legible. */
.carousel-slider .hero-slide .row h2.title-font {
  text-shadow: 0 1px 4px rgba(var(--shadow-rgb), 0.55);
}
.carousel-slider .hero-slide .row .home-slider-subtitle {
  font-size: 1.6rem;
  line-height: 1;
  font-weight: bold;
  display: block;
  margin-bottom: 1rem;
}
.carousel-slider .hero-slide .row h3 {
  font-weight: normal;
  font-size: 1.8rem;
  line-height: 1.8rem;
}
@media print, screen and (min-width: 64em) {
  .carousel-slider .hero-slide .row h3 {
    font-size: 2.5rem;
    line-height: 2.5rem;
  }
}
.carousel-slider .video-full {
  opacity: 1 !important;
}
.carousel-slider .image-overlay-full {
  opacity: 1 !important;
}
/* The dots capsule clears the hero's bottom padding on the home slider. */
.carousel-slider.home-slider .dncg-carousel__dots {
  bottom: 2rem;
}
.carousel-slider .home-slider .hero-slide {
  padding-bottom: 8em;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .home-slider .hero-slide {
    padding-bottom: 4em;
  }
}
.carousel-slider .cta-banner-home-indent {
  margin-left: 1rem;
  margin-right: 1rem;
}
@media print, screen and (min-width: 40em) {
  .carousel-slider .cta-banner-home-indent {
    margin-left: 2rem;
    margin-right: 2rem;
  }
}
/* accordion
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Accordion — real toolkit vocabulary. Hairlines, no boxes, no chevron circles. */
.accordion { max-width: 96ch; }
.accordion-section { background: transparent; border: 0; border-top: 1px solid var(--line); border-radius: 0; color: var(--ink); transition: background var(--transition); }
.accordion-section:last-of-type { border-bottom: 1px solid var(--line); }
.accordion-section-active { background: var(--light); }
.accordion-section-title { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 1rem; padding: 1.15rem .4rem 1.15rem 0; cursor: pointer; }
.accordion-section-title h3 { grid-column: 1; margin: 0; font-size: 1.5625rem; line-height: 1.3; }
.accordion-trigger { grid-column: 1; display: block; width: 100%; text-align: left; font: inherit; font-weight: 700; color: var(--text-heading); text-decoration: none; }
.accordion-section-title button i { display: none; }
.accordion-section-title .accordion-indicator { grid-column: 2; font-size: 1.5625rem; color: var(--muted); }
.accordion-section-content { padding: 0 0 1.3rem; }
.accordion-section-content[hidden] { display: none; }
/* section furniture — title-area
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

.title-area {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2.2rem;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 1rem;
  margin-bottom: 1.6rem;
}
.title-area > * { min-width: 0; }
.title-area--stacked { display: block; }
.title-area.text-center, .text-center { text-align: center; }
.title-area.text-center { justify-content: center; }
.title-area.text-center :is(.content-area-title, .section-intro, p) { margin-inline: auto; }

@media (max-width: 40em) {
  .title-area { display: block; }
}
/*
 * testimonial.css  —  shared component styles for the testimonials suite
 * ------------------------------------------------------------------
 * Stage 5c: STATIC CSS extracted from the inline <style> blocks in
 *   parts/testimonials/hero.php, parts/testimonials/cta.php,
 *   parts/testimonials/quick-facts.php, single-testimonials.php.
 * The DYNAMIC, ACF-colour-driven rules (hero/CTA gradient overlays, contrast
 * buttons, per-testimonial theme colour) stay inline in those templates: they
 * are computed per post from the `colour_theme` ACF value and cannot be a
 * static class. Only their literal ACF fallbacks remain inline (marked).
 *
 * Colour tokenised to CURRENT rendered values:
 *   - white text on the coloured hero/CTA -> var(--text-on-dark)
 *   - white backgrounds/borders -> var(--surface)
 *   - white overlays -> rgba(var(--overlay-light-rgb), a)
 *   - black shadows -> rgba(var(--shadow-rgb), a)
 *   - navy/teal/slate text -> --text-heading / --blue / --text (Phase 3a)
 *
 * ENQUEUE: not yet wired. Needs adding to the components block of
 * dncg_enqueue_cascade() (loaded with card/slider/etc). See audit doc.
 */

/* ==========================================================================
   Testimonial Quick Facts  (quick-facts.php; also inlined in cta.php)
   ========================================================================== */

.testimonial-quick-facts {
	background: var(--neutral-50);
	padding: 1.25rem 1rem;
}

.testimonial-quick-facts-inner {
	max-width: 1200px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 2rem 3rem;
}

.quick-fact {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
}

.quick-fact-label {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--neutral-500);
	margin-bottom: 0.25rem;
}

.quick-fact-value {
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	color: var(--text-heading);
}

.quick-fact-progression .quick-fact-value a {
	color: var(--blue-text);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease;
}

.quick-fact-progression .quick-fact-value a:hover {
	border-bottom-color: currentColor;
}

@media screen and (max-width: 600px) {
	.testimonial-quick-facts-inner {
		gap: 1.25rem 2rem;
	}

	.quick-fact-value {
		font-size: 1.1rem;
	}
}


/* ==========================================================================
   Testimonial Hero - Magazine Pull Quote Style  (hero.php)
   Dynamic colour overlay (.testimonial-hero::after background) and the
   image-wrapper fallback gradient are set inline from ACF.
   ========================================================================== */

.testimonial-hero {
    position: relative;
    min-height: 520px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

/* Background image layer */
.testimonial-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.testimonial-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Colour overlay - gradient set via inline PHP */
.testimonial-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}

/* Inner container */
.testimonial-hero-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 3.5rem 2rem;
    /* padding-inline-start clears an overhanging site logo (--logo-clear in
       tokens.css, 0 for every brand but UCNL, and 0 below 64em on UCNL too).
       single-testimonials.php renders this hero straight after the header. */
    padding-inline-start: calc(2rem + var(--logo-clear));
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 4rem;
    align-items: center;
}


/* Left Side: Quote Block (Magazine Style) */

.testimonial-hero-content {
    display: flex;
    flex-direction: column;
}

.testimonial-hero-quote-block {
    position: relative;
    padding-left: 0;
}

.testimonial-hero-quote-text {
    border-left: none;
    padding-left: 0;
}

.testimonial-hero-quote-mark {
    position: absolute;
    top: -1.75rem;
    left: -0.75rem;
    font-family: var(--font-display);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    color: rgba(var(--overlay-light-rgb), 0.15);
    pointer-events: none;
    user-select: none;
}

.testimonial-hero-quote-text {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-style: italic;
    font-weight: 400;
    line-height: 1.5;
    color: var(--text-on-dark);
    margin: 0;
    position: relative;
    z-index: 1;
}

.testimonial-hero-divider {
    width: 80px;
    height: 3px;
    background: rgba(var(--overlay-light-rgb), 0.4);
    margin: 1.75rem 0;
    position: relative;
}

.testimonial-hero-divider::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 100%;
    background: var(--surface);
}

.testimonial-hero-info {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.testimonial-hero-title {
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--text-on-dark);
    line-height: 1.1;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.01em;
}

.testimonial-hero-subtitle {
    font-family: var(--font-body);
    font-size: 1.1rem;
    font-weight: 400;
    color: rgba(var(--overlay-light-rgb), 0.85);
    margin: 0;
}


/* Right Side: Photo */

.testimonial-hero-photo {
    display: flex;
    justify-content: center;
    align-items: center;
}

.testimonial-hero-image-wrapper {
    position: relative;
    min-width: 280px;
    min-height: 320px;
    max-width: 360px;
    border-radius: 0.5rem;
    overflow: hidden;
    box-shadow:
        0 8px 30px rgba(var(--shadow-rgb), 0.3),
        0 2px 8px rgba(var(--shadow-rgb), 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Fallback gradient background for transparent PNGs - set via PHP */
}

.testimonial-hero-image-wrapper img {
    width: 100%;
    height: 100%;
    min-width: 280px;
    min-height: 320px;
    object-fit: cover;
    object-position: center top;
    display: block;
}


@media screen and (max-width: 960px) {
    .testimonial-hero {
        min-height: auto;
    }

    .testimonial-hero-inner {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 2.5rem 1.5rem;
    }

    .testimonial-hero-photo {
        order: -1;
    }

    .testimonial-hero-image-wrapper {
        min-width: 240px;
        min-height: 280px;
        max-width: 300px;
    }

    .testimonial-hero-image-wrapper img {
        min-width: 240px;
        min-height: 280px;
    }

    .testimonial-hero-content {
        text-align: center;
        align-items: center;
    }

    .testimonial-hero-quote-block {
        padding-left: 0;
    }

    .testimonial-hero-quote-mark {
        left: 50%;
        transform: translateX(-50%);
        top: -2rem;
        font-size: 6rem;
    }

    .testimonial-hero-quote-text {
        font-size: 1.25rem;
    }

    .testimonial-hero-title {
        font-size: 2.25rem;
    }
}

@media screen and (max-width: 480px) {
    .testimonial-hero-inner {
        padding: 2rem 1rem;
        gap: 2rem;
    }

    .testimonial-hero-image-wrapper {
        min-width: 200px;
        min-height: 240px;
        max-width: 260px;
    }

    .testimonial-hero-image-wrapper img {
        min-width: 200px;
        min-height: 240px;
    }

    .testimonial-hero-quote-mark {
        font-size: 5rem;
        top: -1.5rem;
    }

    .testimonial-hero-quote-text {
        font-size: 1.1rem;
    }

    .testimonial-hero-title {
        font-size: 1.75rem;
    }

    .testimonial-hero-subtitle {
        font-size: 1.1rem;
    }

    .testimonial-hero-divider {
        width: 60px;
        margin: 1.25rem 0;
    }
}


/* ==========================================================================
   Testimonial CTA  (cta.php)
   Primary button background/colour/hover are set inline from ACF (contrast).
   ========================================================================== */

.testimonial-cta {
	position: relative;
	padding: 4rem 1rem;
	text-align: center;
	overflow: hidden;
}

/* Colour overlay - set via PHP */
.testimonial-cta::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.testimonial-cta-bg {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.testimonial-cta-bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.testimonial-cta-inner {
	position: relative;
	z-index: 2;
	max-width: 700px;
	margin: 0 auto;
}

.testimonial-cta h2 {
	font-family: var(--font-display);
	font-size: 2rem;
	font-weight: 700;
	color: var(--text-on-dark);
	margin-bottom: 0.75rem;
}

.testimonial-cta p {
	font-family: var(--font-body);
	font-size: 1.1rem;
	color: rgba(var(--overlay-light-rgb), 0.85);
	margin-bottom: 2rem;
}

.testimonial-cta-buttons {
	display: flex;
	justify-content: center;
	gap: 1rem;
	flex-wrap: wrap;
}

.testimonial-cta .btn {
	display: inline-block;
	padding: 0.875rem 2rem;
	font-family: var(--font-body);
	font-size: 1.1rem;
	font-weight: 600;
	text-decoration: none;
	border-radius: 4px;
	transition: all 0.2s ease;
	box-shadow: 0 4px 15px rgba(var(--shadow-rgb), 0.2);
}

/* Primary button colours set via PHP for contrast */
.testimonial-cta .btn-primary {
	/* background and color set dynamically */
}

.testimonial-cta .btn-primary:hover {
	/* background set dynamically */
	transform: translateY(-1px);
	box-shadow: 0 6px 20px rgba(var(--shadow-rgb), 0.25);
}

.testimonial-cta .btn-secondary {
	background: transparent;
	color: var(--text-on-dark);
	border: 2px solid rgba(var(--overlay-light-rgb), 0.6);
	box-shadow: none;
}

.testimonial-cta .btn-secondary:hover {
	border-color: var(--surface);
	background: rgba(var(--overlay-light-rgb), 0.1);
}

@media screen and (max-width: 600px) {
	.testimonial-cta {
		padding: 3rem 1rem;
	}

	.testimonial-cta h2 {
		font-size: 1.5rem;
	}

	.testimonial-cta p {
		font-size: 1.1rem;
	}

	.testimonial-cta-buttons {
		flex-direction: column;
	}

	.testimonial-cta .btn {
		width: 100%;
	}
}


/* ==========================================================================
   Testimonial story body  (single-testimonials.php)
   Heading colours, pull-quote and Q markers are ACF-theme-driven and stay
   inline; only these fixed-colour rules move here.
   ========================================================================== */

.testimonial-story p {
	line-height: 1.8;
	color: var(--text);
	margin-bottom: 1.5rem;
}

/* Intro paragraph - slightly larger */
.testimonial-story p:first-child {
	font-size: 1.6rem;
	color: var(--text-heading);
}

/* Q&A Answer */
.qa-answer {
	padding-left: 2rem;
	margin-bottom: 1.5rem;
}
/* buttons — primary/accent/outline/ghost, legacy names, inline CTA
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* ============================== GROUP 2 · SURFACES ======================= */

/* Buttons. Three variants are in the system: primary, accent (.btn--lime),
   outline. The colour-named rest are legacy — see notes.md. */
.btn, .button, .cta,
.cta-black, .cta-white, .cta-red, .cta-blue, .cta-green, .cta-lime, .cta-navy, .cta-magenta, .cta-grey {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min);
  /* Wrap long labels to the container instead of overflowing it (white-space
     was nowrap). Short labels still sit on one line; max-width keeps even an
     unbreakable string inside its parent. */
  text-decoration: none; text-align: center; white-space: normal; overflow-wrap: break-word; max-width: 100%;
  padding: .9375rem 1.875rem; border-radius: var(--radius-pill);
  border: 2px solid transparent; cursor: pointer;
  /* A bare .btn / .button / .cta with no colour modifier previously got layout
     only, so it fell through to `a { color: var(--link) }` on a transparent
     background: a link-coloured label on whatever was behind it, measured 1.73:1
     on a carousel slide overlay. Default to the primary palette; every modifier
     below overrides it. */
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}

/* In-content buttons authored inline in a WYSIWYG paragraph have no row gap, so
   two or three of them wrap and collide vertically (and sit tight horizontally).
   Space them out. Deliberate button groups live in a flex/grid wrapper with its
   own gap, never a bare <p>, so this only reaches free-flowing content buttons. */
p > .btn, p > .button, p > .cta,
p > .cta-black, p > .cta-white, p > .cta-red, p > .cta-blue, p > .cta-green,
p > .cta-lime, p > .cta-navy, p > .cta-magenta, p > .cta-grey {
  margin: .4rem .75rem .4rem 0;
}

/* Inline icon inside any button/CTA. The blocks now ship decorative inline SVGs
   (markup exception #1: Font Awesome -> inline SVG) that carry a viewBox but no
   width/height; unconstrained they size to the SVG default (~66px in a flex
   button, 300px+ elsewhere) and collapse the label. Pin them to the type size. */
.btn svg, .button svg, .cta svg,
.cta-black svg, .cta-white svg, .cta-red svg, .cta-blue svg, .cta-green svg,
.cta-lime svg, .cta-navy svg, .cta-magenta svg, .cta-grey svg {
  flex: 0 0 auto; width: 1.15em; height: 1.15em;
}

/* TEMPORARY (pre-launch): legacy in-content .cta-* colour classes mapped onto
   the new button palette so old page-content buttons still render styled. To be
   REMOVED after a site-wide DB find/replace swaps .cta-* -> .btn--* (see
   docs/decisions.md / the cta-migration note). cta-black -> primary, cta-white
   -> outline, the rest -> their nearest brand colour. */
.cta-black { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.cta-black:hover { background: var(--link-hover); color: var(--btn-primary-text); }
.cta-white { background: transparent; color: var(--navy); border-color: var(--navy); }
.cta-white:hover { background: var(--navy); color: var(--white); }
.cta-red, .cta-magenta { background: var(--surface-brand); color: var(--white); }
.cta-red:hover, .cta-magenta:hover { background: var(--magenta-dark); color: var(--white); }
.cta-blue { background: var(--surface-blue); color: var(--white); }
.cta-blue:hover { background: var(--blue-dark); color: var(--white); }
.cta-green { background: var(--aud-employers-text); color: var(--white); }
.cta-lime { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.cta-lime:hover { background: var(--lime-dark); color: var(--btn-accent-text); }
.cta-navy { background: var(--navy); color: var(--white); }
.cta-grey { background: var(--surface-muted); color: var(--white); }
.btn--primary, .button--primary { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.btn--primary:hover, .button--primary:hover { background: var(--link-hover); color: var(--btn-primary-text); }

.btn--lime, .button--lime { background: var(--btn-accent-bg); color: var(--btn-accent-text); }
.btn--lime:hover, .button--lime:hover { background: var(--lime-dark); color: var(--btn-accent-text); }

.btn--outline, .button--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--outline:hover, .button--outline:hover { background: var(--navy); color: var(--white); }

.btn--ghost, .btn--white-outline, .button--ghost { background: transparent; color: var(--white); border-color: rgba(var(--on-dark-rgb), .6); }
.btn--ghost:hover, .btn--white-outline:hover { background: rgba(var(--on-dark-rgb), .12); border-color: var(--white); }

/* Legacy colour-named variants, kept so existing pages don't break. */
.btn--magenta, .btn--pink, .button--magenta { background: var(--surface-brand); color: var(--white); }
.btn--navy, .button--navy { background: var(--navy); color: var(--white); }
.btn--blue { background: var(--surface-blue); color: var(--white); }
.btn--dark-blue { background: var(--dblue); color: var(--white); }
.btn--green { background: var(--aud-employers-text); color: var(--white); }

/* The inline text CTA. */
.cta--inline {
  padding: 0 0 3px; border: 0; border-bottom: 3px solid var(--link);
  border-radius: 0; color: var(--link); background: transparent;
}
:is(.bg-dark-blue, .bg-navy, .bg-black) .cta--inline { color: var(--accent-on-dark); border-bottom-color: var(--accent-on-dark); }
/* chip — chips, tags, level-chip
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Chip — pressable. Tag — states a fact. Same pill, different weight. */
.chips { display: flex; flex-wrap: wrap; gap: .6rem; }
.chip {
  display: inline-flex; align-items: center; gap: .45rem;
  padding: .5rem 1.1rem;
  font-size: var(--fs-min); font-weight: 700;
  color: var(--navy); background: var(--light);
  border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: all var(--transition);
}
.chip:hover { background: var(--navy); color: var(--white); transform: translateY(-3px); }
.chip--active { background: var(--surface-blue); color: var(--white); }
.chip--active:hover { background: var(--blue-dark); transform: none; }

.tag {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .8rem;
  font-size: var(--fs-min); font-weight: 800;
  color: var(--btn-accent-text); background: var(--btn-accent-bg);
  border-radius: var(--radius-pill);
}
.tag--level { background: var(--dblue); color: var(--white); }
.tag--outline { background: transparent; color: var(--text-heading); border: 2px solid var(--box-border); }
.tag--urgent { background: var(--surface-brand); color: var(--white); }

.level-chip {
  flex: 1 1 180px; max-width: 240px;
  display: flex; flex-direction: column; gap: .3rem;
  background: var(--white); text-decoration: none;
  border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent);
  border-radius: var(--radius-sm); padding: 1.2rem 1.3rem;
}
.level-chip__badge { font-size: var(--fs-eyebrow); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--em-color); }
.level-chip__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; line-height: 1.1; color: var(--text-heading); }
.level-chip__subtitle { font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 40em) { .level-chip { max-width: none; } }
/* forms — field group, contact form, newsletter
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Form field. Labels always visible; help text before the control; errors state
   the fix. The field-group vocabulary is ours — see notes.md. */
.field-group { display: flex; flex-direction: column; gap: .4rem; }
.field-label { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); }
.field-label .field-required { color: var(--surface-brand); }
.field-help { font-size: var(--fs-min); color: var(--muted); }
.field-message { font-size: var(--fs-min); font-weight: 700; color: var(--surface-brand); }

.contact-form input[type="text"], .contact-form input[type="email"],
.contact-form input[type="tel"], .contact-form input[type="url"],
.contact-form input[type="search"], .contact-form select, .contact-form textarea,
.field-group input, .field-group select, .field-group textarea {
  width: 100%;
  font-size: var(--fs-min);
  padding: .875rem 1rem;
  /* an empty field has no label inside it, so the border is the only thing
     marking where to click: interactive weight, not hairline (WCAG 1.4.11) */
  border: 2px solid var(--control-border);
  border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.field-group textarea { resize: vertical; }
.field-group input:focus, .field-group select:focus, .field-group textarea:focus,
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--link); }
.field-group.is-error input, .field-group.is-error select, .field-group.is-error textarea { border-color: var(--surface-brand); }

/* .contact-form is a plain container. It used to be a 2-column grid intended for
   a theme-native form (.field-group children + .contact-form__actions) that was
   never built — the block always renders a Formidable form, whose fields are
   nested too deep for this grid to reach. On the form-only layout .contact-form
   also wraps the title, so the grid split title|form side by side (the "messy"
   look). Formidable owns the field layout; this stays a block. */
.contact-form { display: block; }

.newsletter-signup { background: var(--surface-dark); border-radius: var(--radius-md); padding: 1.8rem 1.9rem; display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.newsletter-form { flex: 1 1 340px; display: flex; gap: .625rem; flex-wrap: wrap; }
.newsletter-form input[type="email"], .newsletter-form input[type="text"] {
  flex: 1 1 240px; min-width: 0; width: 100%;
  font-size: var(--fs-min); padding: .875rem 1rem;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  background: var(--white); color: var(--ink);
}
.newsletter-form button[type="submit"], .newsletter-form input[type="submit"] {
  font-weight: 700; padding: .875rem 1.625rem; border: 0;
  border-radius: var(--radius-pill);
  background: var(--btn-accent-bg); color: var(--btn-accent-text);
  transition: background var(--transition);
}
/* ============================================================================
   Formidable Forms — the WHOLE presentation, including layout.
   Ported from design-export/formidable/forms.css.

   The site runs Formidable with "Formidable Styling" UNTICKED, so neither
   formidableforms.css nor the with_frm_style wrapper does anything — and
   functions.php dequeues the plugin sheet as a belt-and-braces. So this file is
   not a skin over Formidable's CSS; it is all of it, layout included.

   Formidable's width classes (frm_half, frm_third, frm_two_thirds, frm_fourth,
   frm_three_fourths, frm_sixth) are bare class names with no widths once the
   plugin sheet is gone — they are implemented here on a flex container. Miss it
   and every two-column form silently renders as one column.

   Class names are Formidable's own and are NOT ours to rename. No literal
   colour: every value is a token. Sizing follows the site's "Big Text" template
   (21px field text, 52px min control height, 24px checkboxes/radios). */

/* ------------------------------------------------------------- container --- */
.frm_forms { max-width: var(--content-max-narrow); }
.frm_form_fields > fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.frm_form_fields legend.frm_screen_reader { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frm_forms > .frm_description { font-size: 1.3rem; line-height: 1.6; color: var(--muted); max-width: var(--measure); margin-bottom: 1.6rem; }

/* ------------------------------------------------------------------ grid ---
   Formidable emits the width class on the FIELD wrapper. Flex basis (not grid
   columns), so a wrapping row of differently-sized fields collapses cleanly and
   a conditionally-hidden field leaves no hole. */
.frm_fields_container { display: flex; flex-wrap: wrap; gap: 1.5rem 1.3rem; }
.frm_form_field { flex: 1 1 100%; min-width: 0; margin: 0; }
.frm_form_field.frm_half { flex: 1 1 calc(50% - .65rem); }
.frm_form_field.frm_third { flex: 1 1 calc(33.333% - .87rem); }
.frm_form_field.frm_two_thirds { flex: 1 1 calc(66.666% - .44rem); }
.frm_form_field.frm_fourth { flex: 1 1 calc(25% - .98rem); }
.frm_form_field.frm_three_fourths { flex: 1 1 calc(75% - .33rem); }
.frm_form_field.frm_sixth { flex: 1 1 calc(16.666% - 1.09rem); }
.frm_form_field.frm_full { flex: 1 1 100%; }
/* frm_first / frm_last only mattered for Formidable's float clearing; kept as
   no-ops so markup carrying them is not broken by their absence. */
.frm_form_field.frm_first, .frm_form_field.frm_last { }

@media (max-width: 32em) {
  .frm_form_field.frm_half, .frm_form_field.frm_third, .frm_form_field.frm_two_thirds,
  .frm_form_field.frm_fourth, .frm_form_field.frm_three_fourths,
  .frm_form_field.frm_sixth { flex: 1 1 100%; }
}

/* ----------------------------------------------------------------- labels --- */
.frm_primary_label { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; line-height: 1.25; color: var(--text-heading); margin-bottom: .45rem; }
/* A form dropped straight onto a coloured/dark section ground (no card/accent
   panel) had navy --text-heading labels — e.g. navy on ucdon's teal bg-blue.
   Flip labels + help text to white on those grounds. The card/accent panel rules
   in contact.css are more specific (two classes + descendant) so they still win
   and keep their own label colour. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.frm_primary_label, .frm_description) {
  color: var(--white);
}
.frm_form_field.frm_inline_container { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.frm_form_field.frm_inline_container .frm_primary_label { margin-bottom: 0; flex: 0 0 auto; }
.frm_form_field.frm_none_container > .frm_primary_label,
.frm_form_field .frm_primary_label.frm_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.frm_none_container > .frm_primary_label { display: none; }

/* Required marker — the brand's emphasis colour, not a literal red. */
.frm_required { color: var(--em-color); font-weight: 800; margin-left: .15rem; }

/* ------------------------------------------------- descriptions and help --- */
.frm_description { font-size: var(--fs-min); line-height: 1.5; color: var(--muted); margin-top: .4rem; }
.frm_primary_label + .frm_description { margin-top: 0; margin-bottom: .5rem; }

/* ----------------------------------------------------------------- inputs --- */
.frm_form_field input[type="text"],
.frm_form_field input[type="email"],
.frm_form_field input[type="url"],
.frm_form_field input[type="tel"],
.frm_form_field input[type="number"],
.frm_form_field input[type="password"],
.frm_form_field input[type="date"],
.frm_form_field input[type="datetime-local"],
.frm_form_field input[type="month"],
.frm_form_field input[type="week"],
.frm_form_field input[type="time"],
.frm_form_field input[type="search"],
.frm_form_field select,
.frm_form_field textarea {
  width: 100%; box-sizing: border-box; min-height: 52px; padding: .8rem 1rem;
  font-family: var(--font-body); font-size: 1.3125rem; line-height: 1.4;
  color: var(--ink); background: var(--white);
  border: 1px solid var(--box-border); border-radius: var(--radius-sm);
  transition: border-color var(--transition), box-shadow var(--transition);
  appearance: none;
}
.frm_form_field textarea { min-height: 150px; resize: vertical; }
.frm_form_field input::placeholder,
.frm_form_field textarea::placeholder { color: var(--neutral-500); opacity: 1; }
.frm_form_field input:hover,
.frm_form_field select:hover,
.frm_form_field textarea:hover { border-color: var(--neutral-400); }
.frm_form_field input:focus,
.frm_form_field select:focus,
.frm_form_field textarea:focus { outline: 3px solid var(--accent); outline-offset: 1px; border-color: var(--accent); }
.frm_form_field input:disabled,
.frm_form_field select:disabled,
.frm_form_field textarea:disabled { background: var(--light); color: var(--muted); cursor: not-allowed; }

/* Select arrow, redrawn with gradients (no asset to lose) once appearance is off. */
.frm_form_field select {
  padding-right: 2.8rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-heading) 50%),
    linear-gradient(135deg, var(--text-heading) 50%, transparent 50%);
  background-position: calc(100% - 22px) calc(50% - 2px), calc(100% - 15px) calc(50% - 2px);
  background-size: 7px 7px, 7px 7px;
  background-repeat: no-repeat;
}
.frm_form_field select[multiple] { background-image: none; padding-right: 1rem; min-height: 150px; }

/* ------------------------------------------------- checkboxes and radios --- */
.frm_opt_container { display: grid; gap: .7rem; }
.frm_opt_container.frm_inline_opts,
.frm_opt_container.horizontal_radio { display: flex; flex-wrap: wrap; gap: .7rem 1.6rem; }
.frm_checkbox label,
.frm_radio label {
  display: flex; align-items: flex-start; gap: .75rem;
  font-family: var(--font-body); font-weight: 400; font-size: var(--fs-min);
  line-height: 1.5; color: var(--ink); cursor: pointer;
  min-height: 30px; padding: .35rem 0; max-width: var(--measure);
}
.frm_checkbox label:hover,
.frm_radio label:hover { color: var(--text-heading); }
.frm_form_field input[type="checkbox"],
.frm_form_field input[type="radio"] { flex: 0 0 auto; width: 24px; height: 24px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.frm_form_field.frm_single_checkbox .frm_opt_container label { padding-block: .5rem; }
.frm_other_input { margin-top: .5rem; }

/* ------------------------------------------------------------ file upload --- */
.frm_form_field input[type="file"] {
  width: 100%; box-sizing: border-box; font-family: var(--font-body); font-size: var(--fs-min);
  color: var(--muted); background: var(--white);
  border: 1px dashed var(--box-border); border-radius: var(--radius-sm); padding: 1rem; cursor: pointer;
}
.frm_form_field input[type="file"]:hover { border-color: var(--accent); }
.frm_form_field input[type="file"]::file-selector-button {
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min);
  color: var(--btn-primary-text); background: var(--btn-primary-bg);
  border: 0; border-radius: var(--radius-pill); padding: .7rem 1.4rem; margin-right: 1rem;
  cursor: pointer; transition: background var(--transition);
}
.frm_form_field input[type="file"]::file-selector-button:hover { background: var(--link-hover); }
.frm_dropzone, .frm_upload_progress { border-radius: var(--radius-sm); }
.frm_dropzone { border: 1px dashed var(--box-border); background: var(--white); padding: 1.6rem; text-align: center; }
.frm_dropzone.dz-drag-hover { border-color: var(--accent); background: var(--light); }

/* --------------------------------------------------------------- sections --- */
.frm_section_heading { flex: 1 1 100%; margin-top: 1.2rem; }
.frm_section_heading:first-child { margin-top: 0; }
.frm_section_heading > h3,
.frm_section_heading > .frm_section_heading_title {
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.75rem;
  line-height: var(--display-lh); letter-spacing: var(--display-track); color: var(--text-heading);
  padding-top: 1.2rem; border-top: 4px solid var(--accent); margin: 0 0 .4rem;
}
.frm_section_heading > .frm_description { margin-bottom: 1rem; max-width: var(--measure); }
.frm_section_spacing { padding-bottom: .4rem; }
.frm_repeat_sec, .frm_repeat_grid { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.3rem; background: var(--white); }
.frm_add_form_row, .frm_remove_form_row {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min);
  color: var(--link); background: none; border: 0; cursor: pointer; padding: .5rem 0;
}
.frm_add_form_row:hover, .frm_remove_form_row:hover { color: var(--link-hover); }

/* ------------------------------------------------------------------ HTML --- */
.frm_html_container { font-size: 1.3rem; line-height: 1.6; color: var(--ink); max-width: var(--measure); }
.frm_html_container h2, .frm_html_container h3 { font-family: var(--font-display); color: var(--text-heading); }

/* --------------------------------------------------------------- buttons --- */
.frm_submit, .frm_final_submit { flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: .8rem; align-items: center; margin-top: .6rem; }
.frm_button_submit, .frm_button, .frm_prev_page, .frm_next_page, .frm_save_draft {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min);
  line-height: 1; text-decoration: none; cursor: pointer; min-height: 52px; padding: 1rem 1.9rem;
  border: 2px solid transparent; border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.frm_button_submit, .frm_next_page { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
.frm_button_submit:hover, .frm_next_page:hover { background: var(--link-hover); }
.frm_prev_page, .frm_save_draft { background: transparent; color: var(--link); border-color: var(--box-border); }
.frm_prev_page:hover, .frm_save_draft:hover { border-color: var(--link); }
.frm_button_submit[disabled], .frm_button_submit.frm_ajax_loading { opacity: .6; cursor: progress; }

/* ------------------------------------------------- errors and validation ---
   No dedicated error token in the system; --surface-brand is the nearest dark-
   enough hue for white text on every brand. Errors also carry a NON-colour
   signal (a filled "!" glyph and a 4px left bar) because on four of six brands
   --surface-brand is also --btn-primary-bg, and WCAG 1.4.1 rules out colour on
   its own regardless. */
.frm_form_field.frm_blank_field input,
.frm_form_field.frm_blank_field select,
.frm_form_field.frm_blank_field textarea,
.frm_form_field.frm_blank_field input[type="file"] { border-color: var(--surface-brand); border-width: 2px; }
.frm_error { display: flex; align-items: flex-start; gap: .45rem; font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min); line-height: 1.45; color: var(--surface-brand); margin-top: .45rem; }
.frm_error::before {
  content: "!"; flex: 0 0 auto; width: 20px; height: 20px; margin-top: .1rem;
  border-radius: 50%; background: var(--surface-brand); color: var(--white);
  font-family: var(--font-display); font-size: var(--fs-min); line-height: 20px; text-align: center;
}
.frm_error_style {
  background: var(--white); border: 1px solid var(--surface-brand); border-left: 6px solid var(--surface-brand);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.2rem 1.4rem; margin-bottom: 1.6rem;
  font-size: var(--fs-min); line-height: 1.55; color: var(--ink);
}
.frm_error_style strong { color: var(--surface-brand); display: block; margin-bottom: .3rem; }
.frm_error_style ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.frm_form_field.frm_blank_field { border-left: 4px solid var(--surface-brand); padding-left: 1rem; margin-left: -1.25rem; }
.frm_message, .frm_success_style {
  background: var(--light); border-left: 6px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1.4rem 1.6rem;
  font-size: 1.3rem; line-height: 1.6; color: var(--ink);
}
.frm_message p:last-child, .frm_success_style p:last-child { margin-bottom: 0; }

/* Password strength (Pro). */
.frm_password_checks { font-size: var(--fs-min); color: var(--muted); margin-top: .4rem; }

/* ------------------------------------------------------------ multi-page --- */
.frm_page_bar { flex: 1 1 100%; margin-bottom: 1.6rem; }
.frm_rootline { display: flex; list-style: none; margin: 0; padding: 0; gap: .3rem; }
.frm_rootline_single { flex: 1 1 0; }
.frm_rootline_single .frm_page_back,
.frm_rootline_single a, .frm_rootline_single span {
  display: block; padding: .7rem .5rem .8rem; border-top: 4px solid var(--line);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-min); color: var(--muted); text-decoration: none;
}
.frm_rootline_single.frm_current_page a,
.frm_rootline_single.frm_current_page span { border-top-color: var(--accent); color: var(--text-heading); }
.frm_rootline_single.frm_completed_page a { border-top-color: var(--accent); color: var(--link); }
.frm_percent_complete { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }

/* ----------------------------------------------------- captcha and honeypot --- */
.frm_captcha_block, .frm-g-recaptcha { margin-block: .4rem; }
.frm_verify { position: absolute !important; left: -9999px; }
.frm_screen_reader, .frm_hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* --------------------------------------------------------- Pro extras ------
   Styled where the markup is predictable (date/time, range, star, total, word
   count, confirmation). Class names are Formidable's documented output. */
.frm_star_group { display: inline-flex; gap: .2rem; }
.frm_range_container { display: flex; align-items: center; gap: 1rem; }
.frm_range_container input[type="range"] { flex: 1 1 auto; accent-color: var(--accent); }
.frm_range_value, .frm_total, .frm_word_count { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--muted); }
.frm_time_select { display: flex; gap: .6rem; }
.frm_time_select select { flex: 1 1 auto; }
.frm_conf_field { margin-top: 1rem; }

/* --------------------------------------------------- form-beside-a-rail shell ---
   Our class (not Formidable's) for a form next to a reassurance rail. Stacks at
   64em, matching .results-layout. Optional — a full-width form ignores it. */
.form-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 2.6rem; align-items: start; }
.form-layout__aside { position: sticky; top: 1.4rem; display: grid; gap: 1.3rem; align-content: start; }
@media (max-width: 64em) {
  .form-layout { grid-template-columns: 1fr; }
  .form-layout__aside { position: static; }
}

/* --------------------------------------------------------------- printing --- */
@media print {
  .frm_submit, .frm_final_submit, .frm_page_bar, .frm_captcha_block, .frm-g-recaptcha { display: none; }
  .frm_form_field input, .frm_form_field textarea, .frm_form_field select { border: 1px solid var(--neutral-400); background: none; }
}
/* table — data-table
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* Table. The toolkit has no general table — this vocabulary is ours.
   Numbers right-aligned and tabular; one hairline per row; no zebra striping,
   which would fight the left-edge colour system. */
.data-table-wrap { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); overflow: hidden; }
.data-table { width: 100%; border-collapse: collapse; text-align: left; }
.data-table thead tr { border-bottom: 2px solid var(--text-heading); }
.data-table th {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 1.3125rem; color: var(--text-heading); padding: 1rem 1.4rem;
}
.data-table td { font-size: var(--fs-min); padding: 1rem 1.4rem; color: var(--muted); vertical-align: top; }
.data-table td:first-child { color: var(--ink); }
.data-table tbody tr { border-bottom: 1px solid var(--line); }
.data-table .is-numeric { text-align: right; font-variant-numeric: tabular-nums; }
.data-table th.is-numeric { text-align: right; }
.data-table .is-total { color: var(--text-heading); font-weight: 700; }
@media (max-width: 40em) {
  .data-table thead { display: none; }
  .data-table tr { display: block; border-bottom: 1px solid var(--line); padding-block: .6rem; }
  .data-table td { display: block; width: 100%; padding: .25rem 1.1rem; }
  .data-table td::before { content: attr(data-label) " "; font-weight: 700; color: var(--text-heading); }
  .data-table .is-numeric { text-align: left; }
}
/* overlay — the shared image overlay treatments.
   ---------------------------------------------------------------------------
   TWO blocks register the SAME six values for an image overlay:

     call_to_action     row_background_overlay_style  -> .call-to-action-overlay-{v}
     testimonial        overlay_style                 -> .testimonial-image-overlay-{v}

   Both offer none / blue-red / teal-blue / grey / 50grey / blur, which is
   strong evidence one overlay system was designed and only half-built: neither
   block had a single rule for any of the six until August 2026.

   The two class PREFIXES differ and are NOT renamed here. The prefix is a
   template literal and the stored ACF value is only the suffix, so renaming
   would be safe for the database, but it would break any per-page Custom CSS
   already written against either family. Both are carried instead, and the
   treatment is declared once with a selector list rather than duplicated.

   Colour is token-only. Alpha rides on opacity on the pseudo element rather
   than rgba(), so no -rgb token is needed and no literal appears.

   The host must establish a containing block or the ::before escapes it.
   .call-to-action already sets position: relative; .testimonial-image did not,
   so it is set below. */

.testimonial-image { position: relative; }

.call-to-action-overlay-blue-red::before,
.call-to-action-overlay-teal-blue::before,
.call-to-action-overlay-grey::before,
.call-to-action-overlay-50grey::before,
.call-to-action-overlay-blur::before,
.testimonial-image-overlay-blue-red::before,
.testimonial-image-overlay-teal-blue::before,
.testimonial-image-overlay-grey::before,
.testimonial-image-overlay-50grey::before,
.testimonial-image-overlay-blur::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.call-to-action-overlay-blue-red::before,
.testimonial-image-overlay-blue-red::before {
  background: linear-gradient(135deg, var(--blue) 0%, var(--surface-brand) 100%);
  opacity: .82;
}

/* --teal is only defined by dc and nlc. The other four brands fall back to
   --navy, which keeps a real dark-to-light gradient rather than dropping the
   whole declaration as invalid. Give a brand its own --teal to change this. */
.call-to-action-overlay-teal-blue::before,
.testimonial-image-overlay-teal-blue::before {
  background: linear-gradient(135deg, var(--teal, var(--navy)) 0%, var(--blue) 100%);
  opacity: .82;
}

/* backdrop-filter acts on what is painted behind the pseudo element, i.e. the
   host's own background image or <img>. A filter on the element itself would
   take the panel text with it. */
.call-to-action-overlay-grey::before,
.testimonial-image-overlay-grey::before     { backdrop-filter: grayscale(1); }

.call-to-action-overlay-50grey::before,
.testimonial-image-overlay-50grey::before   { backdrop-filter: grayscale(.5); }

.call-to-action-overlay-blur::before,
.testimonial-image-overlay-blur::before     { backdrop-filter: blur(6px); }

/* `none` is a real choice meaning no treatment. Declared so the class is not an
   unstyled unknown, and so a later blanket ::before cannot leak into it. */
.call-to-action-overlay-none::before,
.testimonial-image-overlay-none::before { content: none; }

/* Content must sit above whichever treatment is active. */
.call-to-action-panel { z-index: 1; }
/*
 * vendor/parvus.css  —  Parvus lightbox styling (vendor, not tokenised)
 * ------------------------------------------------------------------
 * Extracted from dc-child/style.css L3407-3704. Was dropped in the Stage 2
 * extraction, so the lightbox JS (scripts/parvus.min.js) ran but the overlay
 * had no styling - clicks appeared to do nothing. Vendor lightbox chrome; its
 * own --parvus-* theming vars are kept as-is (like foundation.css), not
 * tokenised. Parvus binds a.lightbox (e.g. the image_gallery block).
 */


:root {
  --parvus-transition-duration: 300ms;
  --parvus-transition-timing-function: cubic-bezier(0.4, 0, 0.22, 1);
  --parvus-overlay-color: hsl(23, 40%, 96%);
  --parvus-overlay-text: hsl(228, 24%, 23%);
  --parvus-button-color: hsl(228, 24%, 23%);
  --parvus-button-text: hsl(0, 0%, 100%);
  --parvus-button-hover-color: hsl(229, 24%, 33%);
  --parvus-button-hover-text: hsl(0, 0%, 100%);
  --parvus-focus-outline-color: hsl(228, 24%, 23%);
  --parvus-loader-background-color: hsl(23, 40%, 96%);
  --parvus-loader-color: hsl(228, 24%, 23%);
  --parvus-image-max-height: 85vh;
  --parvus-image-max-width: 85vw;
}

/**
 * Parvus trigger
 *
 */
.parvus-zoom__indicator {
  display: none;
}

.parvus-zoom__indicator svg {
  display: none;
}

/**
 * Parvus
 *
 */
.parvus {
  align-items: center;
  bottom: 0;
  contain: strict;
  display: flex;
  font:
    normal normal 400 1.125rem/1.7 -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Helvetica,
    Arial,
    sans-serif;
  justify-content: center;
  left: 0;
  line-height: 1.667;
  overflow: hidden;
  position: fixed;
  right: 0;
  top: 0;
  z-index: 1337;
}

.parvus[aria-hidden="true"] {
  display: none;
}

.parvus__overlay {
  background-color: var(--parvus-overlay-color);
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.parvus__slider {
  bottom: 0;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.parvus__slider[aria-hidden="true"] {
  display: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__slider--animate:not(.parvus__slider--is-dragging) {
    transition: transform var(--parvus-transition-duration) var(--parvus-transition-timing-function);
  }
}
.parvus__slider--is-draggable {
  cursor: grab;
}

.parvus__slider--is-dragging {
  cursor: grabbing;
}

.parvus__slide {
  align-items: center;
  display: flex;
  height: 100%;
  justify-content: center;
  width: 100%;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__slide {
    transition: visibility var(--parvus-transition-duration)
      var(--parvus-transition-timing-function);
  }
}
.parvus__slide:not(.parvus__slide--is-active) {
  visibility: hidden;
}

.parvus__slide figure {
  margin: 0;
}

.parvus__slide figcaption {
  padding: 1rem;
  text-align: center;
  will-change: transform, opacity;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__slide figcaption {
    transition:
      transform var(--parvus-transition-duration) var(--parvus-transition-timing-function),
      opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
  }
}
.parvus__slide img {
  display: block;
  height: auto;
  margin-left: auto;
  margin-right: auto;
  max-height: var(--parvus-image-max-height);
  max-width: var(--parvus-image-max-width);
  transform-origin: left top;
  width: auto;
}

.parvus__loader {
  display: inline-block;
  height: 6.25rem;
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 6.25rem;
}

.parvus__loader::before {
  animation: spin 1s infinite;
  border-radius: 100%;
  border: 0.25rem solid var(--parvus-loader-background-color);
  border-top-color: var(--parvus-loader-color);
  bottom: 0;
  content: "";
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
}

.parvus__btn {
  appearance: none;
  background-color: var(--parvus-button-color);
  background-image: none;
  border-radius: 0;
  border: 0.0625rem solid transparent;
  color: var(--parvus-button-text);
  cursor: pointer;
  display: flex;
  font: inherit;
  padding: 0.3125rem;
  touch-action: manipulation;
  will-change: transform, opacity;
  z-index: 7;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__btn {
    transition:
      transform var(--parvus-transition-duration) var(--parvus-transition-timing-function),
      opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
  }
}
.parvus__btn:hover {
  background-color: var(--parvus-button-hover-color);
  color: var(--parvus-button-hover-text);
}

.parvus__btn--close {
  position: absolute;
  right: 1rem;
  top: 1rem;
}

.parvus__btn--previous {
  left: 1rem;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.parvus__btn--next {
  position: absolute;
  right: 1rem;
  top: 50%;
  transform: translateY(-50%);
}

.parvus__btn svg {
  fill: none;
  height: 2rem;
  pointer-events: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1;
  stroke: currentColor;
  width: 2rem;
}

.parvus__btn[disabled] {
  display: none;
}

.parvus__counter {
  align-items: center;
  display: flex;
  justify-content: center;
  left: 1rem;
  min-height: 2.75rem;
  min-width: 2.75rem;
  position: absolute;
  top: 1rem;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus__counter {
    transition:
      transform var(--parvus-transition-duration) var(--parvus-transition-timing-function),
      opacity var(--parvus-transition-duration) var(--parvus-transition-timing-function);
  }
}
.parvus__counter[aria-hidden="true"] {
  display: none;
}

@media screen and (prefers-reduced-motion: no-preference) {
  .parvus--is-opening .parvus__counter,
  .parvus--is-opening .parvus__btn--close,
  .parvus--is-opening .parvus__btn--previous,
  .parvus--is-opening .parvus__btn--next,
  .parvus--is-opening figcaption,
  .parvus--is-closing .parvus__counter,
  .parvus--is-closing .parvus__btn--close,
  .parvus--is-closing .parvus__btn--previous,
  .parvus--is-closing .parvus__btn--next,
  .parvus--is-closing figcaption {
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__counter,
  .parvus--is-vertical-closing .parvus__btn--close {
    transform: translateY(-100%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__btn--previous {
    transform: translate(-100%, -50%);
    opacity: 0;
  }
  .parvus--is-vertical-closing .parvus__btn--next {
    transform: translate(100%, -50%);
    opacity: 0;
  }
  .parvus--is-vertical-closing figcaption {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
/**
 * Focus
 *
 */
.parvus-trigger:focus,
.parvus :focus {
  outline: 0;
}

.parvus-trigger:focus-visible,
.parvus :focus-visible {
  outline: 3px solid blue;
  outline-offset: 0.125rem;
}
/*
 * Block: accordion  —  rebuilt from the prototype FAQ (kitchen-sink .faq/.faqs).
 * Root: section.accordion-area > .accordion > .accordion-section.
 * ------------------------------------------------------------------
 * The generic accordion COMPONENT (css/components/accordion.css) is the
 * "hairline, no box" treatment shared by how-to-apply and course-list
 * accordions. This block gives the pagebuilder accordion the prototype's
 * boxed-FAQ look instead, scoped under .accordion-area so the shared
 * component is untouched for its other consumers.
 *
 * Mechanics preserved: app.js toggles .accordion-section-active on the
 * .accordion-section and aria-expanded on the inner <button>. The panel
 * animates via max-height. The FontAwesome <i> stays in the markup but is
 * hidden; a token plus/cross marker replaces it (real markup has no svg).
 */

.accordion-area .accordion {
  max-width: 900px;
}

/* each item = a bordered FAQ box; blue border when open */
.accordion-area .accordion-section {
  background: var(--surface);
  border: 2px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  overflow: hidden;
  color: var(--text);
  transition: border-color var(--transition);
}
.accordion-area .accordion-section:last-of-type {
  border-bottom: 2px solid var(--line);
}
.accordion-area .accordion-section-active {
  border-color: var(--blue);
}

/* clickable header: question (+ optional subtitle) left, plus/cross right */
.accordion-area .accordion-section-title {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 1rem;
  padding: 1.15rem 1.35rem;
  cursor: pointer;
}
.accordion-area .accordion-section-title h3 {
  grid-column: 1;
  margin: 0;
  font-size: 1.25rem;
  line-height: 1.3;
}
.accordion-area .accordion-section-title button {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  color: var(--text-heading);
  text-decoration: none;
}
/* hide the FontAwesome glyph; the CSS marker replaces it */
.accordion-area .accordion-section-title button i {
  display: none;
}
.accordion-area .accordion-section-title p {
  grid-column: 1;
  margin: 0.35rem 0 0 0;
  font-size: 1.1rem;
  color: var(--text-muted);
}

/* plus that rotates to a cross on open (two currentColor bars) */
.accordion-area .accordion-section-title::after {
  content: "";
  grid-column: 2;
  grid-row: 1 / -1;
  align-self: center;
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
  color: var(--blue);
  background:
    linear-gradient(currentColor, currentColor) center / 100% 2px no-repeat,
    linear-gradient(currentColor, currentColor) center / 2px 100% no-repeat;
  transition: transform var(--transition);
}
.accordion-area .accordion-section-active .accordion-section-title::after {
  transform: rotate(45deg);
}

/* answer: collapsed to max-height 0, animates open */
.accordion-area .accordion-section-content {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding: 0 1.35rem;
  font-size: 1.1rem;
  line-height: 1.55;
  color: var(--text-muted);
  transition: max-height var(--transition);
}
.accordion-area .accordion-section-active .accordion-section-content {
  max-height: 60rem;
  padding-bottom: 1.3rem;
}
/*
 * apprenticeship_vacancies — written from the design (kitchen-sink .tile with
 * <dl> metadata: level / employer / wage / closing date). Against the classes
 * apprenticeship_vacancies.php emits:
 *   <div class="row-cards apprenticeship-vacancies-cards row-cards-list">
 *     <article class="card feature-card">
 *       <div class="card-section">
 *         <h3><a class="feature-link"> … </a></h3>
 *         <div class="card-info"><dl> <dt>/<dd> … </dl></div>
 *
 * The tile shell (border, 5px accent foot, radius, HOVER LIFT), title,
 * feature-link and card-info colour come from components/card.css. The grid
 * base comes from card-grid.css. This file is the delta: a browse grid (the
 * shared row-cards-list is single-column; vacancies read better as tiles) and
 * the <dl> laid out as clean label / value rows.
 * Colour is always a token.
 */

/* breathing room between the section title and the cards */
.apprenticeship-vacancies-cards { margin-top: 2rem; }

/* browse grid — override the single-column row-cards-list from the large bp */
@media print, screen and (min-width: 48em) {
  .apprenticeship-vacancies-cards.row-cards-list {
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  }
}

/* metadata: label / value pairs read as a tidy two-column list */
.apprenticeship-vacancies-cards .card-info dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.3rem 0.7rem;
  margin: 0;
}
.apprenticeship-vacancies-cards .card-info dt {
  font-weight: 700;
  color: var(--text-heading);
}
.apprenticeship-vacancies-cards .card-info dd {
  margin: 0;
  color: var(--text-muted);
}
/* audience_switcher block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   tabs + panels; dot instead of emoji, colour from --aud-* */

.audience-switcher__header { margin-bottom: 1.6rem; }
.audience-switcher__intro { color: var(--muted); max-width: 62ch; }
.audience-switcher__tab-list { display: flex; border-bottom: 1px solid var(--box-border); margin-bottom: 1.6rem; flex-wrap: wrap; }
.audience-switcher__tab {
  display: flex; align-items: center; gap: .625rem;
  padding: .9rem 1.4rem; border-bottom: 4px solid transparent;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem;
  color: var(--muted);
}
/* The optional per-tab emoji (ACF field, may be set or empty). Render it as an
   actual glyph at a readable size, not the old placeholder dot which squashed
   the emoji into a 12px circle. */
.audience-switcher__tab-emoji { display: inline-flex; align-items: center; font-size: 1.2em; line-height: 1; }
.audience-switcher__tab-emoji:empty { display: none; }
.audience-switcher__tab--active { color: var(--aud-students); border-bottom-color: var(--aud-students); }
.audience-switcher__panel { display: none; }
.audience-switcher__panel--active { display: block; }
.audience-switcher__panel-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 2.2rem; align-items: start; }
.audience-switcher__panel-heading { font-size: 1.75rem; margin-bottom: 1rem; color: var(--aud-students); }
.audience-switcher__list { display: flex; flex-direction: column; gap: .8rem; margin-bottom: 1.4rem; }
.audience-switcher__list li { display: flex; gap: .75rem; line-height: 1.6; }
.audience-switcher__check { flex: 0 0 auto; width: 22px; height: 22px; margin-top: .15rem; color: var(--aud-students); }
.audience-switcher__callout { border-left: var(--card-edge) solid var(--aud-students); background: var(--white); padding: 1.2rem 1.4rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin-bottom: 1.3rem; }
.audience-switcher__callout-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.audience-switcher__callout-text { font-size: var(--fs-min); color: var(--muted); }
.audience-switcher__image { aspect-ratio: 4 / 3; border-radius: var(--radius-sm); background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
@media (max-width: 64em) { .audience-switcher__panel-grid { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------------------
   Audience colour wayfinding.

   The block emits a per-audience colour on three things: data-colour on the tab
   and the content column, and a --{colour} modifier on the panel heading and the
   callout. NOTHING consumed any of it, so every panel painted --aud-students
   blue whatever the editor chose. On the one block whose entire purpose is
   telling students, parents and employers apart.

   Keys are the five the field offers. Text-bearing roles take the employer
   green's TEXT variant (--aud-employers-text, 5f6b00); the flat --aud-employers
   is fills and rules only, per the token layer. Navy and dark-blue map to the
   structural tokens the (now removed) $colour_map in audience_switcher.php mirrored.
   --------------------------------------------------------------------------- */

/* active tab: label + 4px underline */
.audience-switcher__tab--active[data-colour="magenta"] { color: var(--aud-parents); border-bottom-color: var(--aud-parents); }
.audience-switcher__tab--active[data-colour="green"] { color: var(--aud-employers-text); border-bottom-color: var(--aud-employers); }
.audience-switcher__tab--active[data-colour="navy"] { color: var(--text-heading); border-bottom-color: var(--surface-dark); }
.audience-switcher__tab--active[data-colour="dark-blue"] { color: var(--dblue); border-bottom-color: var(--dblue); }

/* panel heading */
.audience-switcher__panel-heading--magenta { color: var(--aud-parents); }
.audience-switcher__panel-heading--green { color: var(--aud-employers-text); }
.audience-switcher__panel-heading--navy { color: var(--text-heading); }
.audience-switcher__panel-heading--dark-blue { color: var(--dblue); }

/* tick icons in the benefit list */
.audience-switcher__content[data-colour="magenta"] .audience-switcher__check { color: var(--aud-parents); }
.audience-switcher__content[data-colour="green"] .audience-switcher__check { color: var(--aud-employers-text); }
.audience-switcher__content[data-colour="navy"] .audience-switcher__check { color: var(--text-heading); }
.audience-switcher__content[data-colour="dark-blue"] .audience-switcher__check { color: var(--dblue); }

/* callout accent edge */
.audience-switcher__callout--magenta { border-left-color: var(--aud-parents); }
.audience-switcher__callout--green { border-left-color: var(--aud-employers); }
.audience-switcher__callout--navy { border-left-color: var(--surface-dark); }
.audience-switcher__callout--dark-blue { border-left-color: var(--dblue); }

/* Helper hint above the tabs; also the tablist's aria-describedby target. */
.audience-switcher__hint { font-size: var(--fs-min); color: var(--muted); margin-bottom: .9rem; }
/* Read a little more like tabs: top-rounded chips with a hover ground so it is
   obvious they are pickable, sitting on the tab-list's bottom rule. */
.audience-switcher__tab { border-radius: var(--radius-sm) var(--radius-sm) 0 0; }
.audience-switcher__tab:hover { color: var(--text-heading); background: var(--light); }
/* call_to_action block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   Restyled onto the .call-to-action panel.

   Four rules were deleted on 2026-08-05: .call-to-action__media, __media img,
   __media::after and __tint. They came across in the port but the template emits
   none of those elements, and a whole-theme search of every PHP and JS file found
   the class names nowhere, so nothing could ever have matched them. The block puts
   its background image on the section itself and its overlay treatments come from
   css/components/overlay.css, which is what the note below refers to. */

.call-to-action { position: relative; border-radius: var(--radius-md); overflow: hidden; background: var(--light); }
.call-to-action-panel { position: relative; padding: var(--pad-panel); }
.call-to-action-left .call-to-action-panel { max-width: 62%; margin: 1.6rem; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); }
.call-to-action-centre .call-to-action-panel, .call-to-action-right .call-to-action-panel { margin-inline: auto; }
@media (max-width: 64em) { .call-to-action-left .call-to-action-panel { max-width: none; } }

/* Image overlay treatments live in css/components/overlay.css, shared with
   testimonial, which registers the same six values. See that file. */
/* ============================================================
   campaign_hero — Summer of Skills
   FULL REPLACEMENT for pagebuilder/campaign_hero/campaign_hero.css
   Delete everything currently in that file and paste this.

   Restores the settled design (absolute canvas, corner beach
   circle, continuously floating letters) on the new design system:
   every colour a token, no --ch-* vars, no font-family, no literals.

   Architecture: the WRAP is the query container and owns the height.
   Height is a function of WIDTH (--ch-h), and every internal value is
   in cqi (1cqi = 1% of hero width), so the whole composition scales as
   one locked unit at any viewport. Do not mix in cqb: it decouples the
   type from the artwork and shrinks it on a height-capped hero.
   ============================================================ */

.campaign-hero-wrap {
   position: relative;
   /* clears the overhanging logo mark (0 for every brand but UCNL) */
   padding-inline-start: var(--logo-clear);
   width: 100%;
   /* Height is tied to WIDTH so every cqi-based value stays in proportion.
       --ch-h is the one knob: 56.25vw = the original 16:9 canvas,
       48vw = current (shorter, same internal proportions). */
   --ch-h: 48vw;
   height: clamp(30rem, var(--ch-h), 60rem);
   container-type: inline-size;
   container-name: chhero;
}

.campaign-hero {
   position: relative;
   width: 100%;
   height: 100%;
   overflow: hidden;
   border-radius: 0;
   padding: 0;
   margin: 0;
   max-width: none;
   isolation: isolate;
   background: linear-gradient(170deg, var(--sos-teal) 0%, var(--sos-teal-deep) 100%);
}

/* ---- WATER SURFACE ----------------------------------------
   Aerial wave crests sweeping toward the beach corner.
   ---------------------------------------------------------- */
.campaign-hero::after {
   content: '';
   position: absolute;
   inset: 0;
   z-index: 0;
   pointer-events: none;
   background-image:
      radial-gradient(ellipse 32% 16% at 26% 36%, rgba(var(--on-dark-rgb), 0.08), transparent 70%),
      radial-gradient(ellipse 26% 12% at 70% 56%, rgba(var(--on-dark-rgb), 0.06), transparent 70%),
      repeating-linear-gradient(135deg,
         transparent 0, transparent 90px,
         rgba(var(--on-dark-rgb), 0.045) 100px,
         rgba(var(--on-dark-rgb), 0.085) 110px,
         rgba(var(--on-dark-rgb), 0.045) 120px,
         transparent 130px, transparent 260px),
      repeating-linear-gradient(127deg,
         transparent 0, transparent 180px,
         rgba(var(--on-dark-rgb), 0.025) 196px,
         rgba(var(--on-dark-rgb), 0.05) 208px,
         rgba(var(--on-dark-rgb), 0.025) 220px,
         transparent 236px, transparent 460px);
   background-size: 200% 100%, 180% 100%, 220% 130%, 280% 150%;
   background-repeat: no-repeat, no-repeat, repeat, repeat;
   mix-blend-mode: screen;
   animation: chSeaSurface 36s ease-in-out infinite;
}

@keyframes chSeaSurface {

   0%,
   100% {
      background-position: 10% 30%, 80% 60%, 0 0, 0 0;
   }

   50% {
      background-position: 14% 28%, 76% 62%, 280px 280px, -360px -360px;
   }
}

/* ---- BEACH -------------------------------------------------
   Large circle pushed into the bottom-right corner, two foam
   bands riding the arc as box-shadow rings.
   ---------------------------------------------------------- */
.campaign-hero__beach {
   --beach-size: 92cqi;
   position: absolute;
   inset: auto auto calc(var(--beach-size) * -0.72) calc(var(--beach-size) * -0.5);
   left: auto;
   right: calc(var(--beach-size) * -0.5);
   bottom: calc(var(--beach-size) * -0.72);
   width: var(--beach-size);
   height: var(--beach-size);
   border-radius: 50%;
   background: var(--sos-gold);
   box-shadow:
      0 0 0 1.4cqi var(--sos-cream),
      0 0 0 3.1cqi var(--sos-sky);
   z-index: 1;
   margin: 0;
   padding: 0;
   pointer-events: none;
}

.campaign-hero__beach::before {
   content: none;
}

/* ---- TYPE -------------------------------------------------- */
.campaign-hero__type {
   position: absolute;
   top: 40%;
   left: 45%;
   transform: translate(-50%, -50%);
   width: 96%;
   margin: 0;
   padding: 0;
   text-align: center;
   z-index: 5;
   pointer-events: none;
}

.campaign-hero .campaign-hero__title {
   display: flex;
   justify-content: center;
   gap: 0.005em;
   font-size: 20cqi;
   font-weight: 900;
   line-height: 0.7;
   letter-spacing: -0.1em;
   text-transform: uppercase;
   color: var(--white);
   text-shadow: 0 0.4cqi 1.2cqi rgba(var(--sos-scrim-rgb), 0.16);
   margin: 0;
   padding: 0;
   max-width: none;
}

.campaign-hero .campaign-hero__title::before,
.campaign-hero .campaign-hero__title::after {
   content: none;
}

.campaign-hero .campaign-hero__subtitle {
   display: block;
   font-size: 8cqi;
   font-weight: 800;
   font-style: normal;
   line-height: 1;
   letter-spacing: -0.03em;
   color: var(--white);
   text-shadow: 0 0.3cqi 0.8cqi rgba(var(--sos-scrim-rgb), 0.16);
   margin: 0.6cqi 0 0 -1em;
   padding: 0;
   max-width: none;
}

/* Continuous gentle bob — each letter on its own delay */
.campaign-hero .campaign-hero__letter,
.campaign-hero .campaign-hero__subletter {
   display: inline-block;
   color: inherit;
   letter-spacing: inherit;
   transform-origin: 50% 60%;
   animation: chLetterBob 5s ease-in-out infinite;
   opacity: 1;
}

@keyframes chLetterBob {

   0%,
   100% {
      transform: translateY(0) rotate(var(--tilt, 0deg));
   }

   50% {
      transform: translateY(-0.5cqi) rotate(calc(var(--tilt, 0deg) * -1));
   }
}

.campaign-hero__letter:nth-child(1) {
   animation-delay: 0s;
   --tilt: -1.2deg;
}

.campaign-hero__letter:nth-child(2) {
   animation-delay: 0.4s;
   --tilt: 0.4deg;
   padding-top: 0.08em;
}

.campaign-hero__letter:nth-child(3) {
   animation-delay: 0.8s;
   --tilt: -0.4deg;
}

.campaign-hero__letter:nth-child(4) {
   animation-delay: 1.2s;
   --tilt: 0.6deg;
   padding-top: 0.11em;
}

.campaign-hero__letter:nth-child(5) {
   animation-delay: 1.6s;
   --tilt: -0.5deg;
}

.campaign-hero__letter:nth-child(6) {
   animation-delay: 2.0s;
   --tilt: 0.8deg;
   padding-top: 0.05em;
}

.campaign-hero__subletter--gap {
   margin-inline-end: 0.32em;
}

.campaign-hero__subletter:nth-child(1) {
   animation-delay: 0.2s;
   --tilt: -1deg;
}

.campaign-hero__subletter:nth-child(2) {
   animation-delay: 0.5s;
   --tilt: 0.6deg;
}

.campaign-hero__subletter:nth-child(3) {
   animation-delay: 0.8s;
   --tilt: -0.5deg;
}

.campaign-hero__subletter:nth-child(4) {
   animation-delay: 1.1s;
   --tilt: 0.7deg;
}

.campaign-hero__subletter:nth-child(5) {
   animation-delay: 1.4s;
   --tilt: -0.6deg;
}

.campaign-hero__subletter:nth-child(6) {
   animation-delay: 1.7s;
   --tilt: 0.8deg;
}

.campaign-hero__subletter:nth-child(7) {
   animation-delay: 2.0s;
   --tilt: -0.5deg;
}

.campaign-hero__subletter:nth-child(8) {
   animation-delay: 2.3s;
   --tilt: 0.6deg;
}

/* ---- FLOATING ELEMENTS ------------------------------------- */
.campaign-hero__el {
   position: absolute;
   margin: 0;
   padding: 0;
   line-height: 0;
   pointer-events: none;
   user-select: none;
}

.campaign-hero .campaign-hero__el img {
   display: block;
   width: 100%;
   height: 100%;
   max-width: none;
   max-height: none;
   min-height: 0;
   margin: 0;
   padding: 0;
   border: 0;
   border-radius: 0;
   box-shadow: none;
   object-fit: contain;
   opacity: 1;
}

.campaign-hero__el--hang {
   transform-origin: 50% 0%;
   animation: chSwing 6s ease-in-out infinite;
}

.campaign-hero__el--float {
   animation: chFloatBob 5s ease-in-out infinite;
}

.campaign-hero__el--tilt {
   transform-origin: 50% 50%;
   animation: chMicroTilt 4s ease-in-out infinite;
}

@keyframes chSwing {

   0%,
   100% {
      transform: rotate(-2.5deg);
   }

   50% {
      transform: rotate(2.5deg);
   }
}

@keyframes chFloatBob {

   0%,
   100% {
      transform: translateY(0) rotate(var(--r, 0deg));
   }

   50% {
      transform: translateY(-1cqi) rotate(calc(var(--r, 0deg) + 2deg));
   }
}

@keyframes chMicroTilt {

   0%,
   100% {
      transform: rotate(-2deg);
   }

   50% {
      transform: rotate(2deg);
   }
}

/* Locked positions */
.campaign-hero__el--watermelon {
   top: 9.6%;
   left: 18.8%;
   width: 14%;
   aspect-ratio: 194/150;
   z-index: 4;
   animation-delay: -2s;
   animation-duration: 5.5s;
}

.campaign-hero__el--ring {
   top: 8.4%;
   left: 40.8%;
   width: 15%;
   aspect-ratio: 1;
   z-index: 4;
   animation-delay: -4s;
   animation-duration: 6.5s;
}

.campaign-hero__el--camera {
   top: 13.4%;
   left: 73%;
   width: 9.5%;
   aspect-ratio: 137/105;
   z-index: 6;
   animation-delay: -1s;
   animation-duration: 7s;
}

.campaign-hero__el--starfish {
   top: 39%;
   left: 7%;
   width: 7%;
   aspect-ratio: 1;
   z-index: 6;
   --r: -8deg;
   animation-delay: -1.5s;
}

.campaign-hero__el--glasses {
   top: 42%;
   left: 27%;
   width: 11%;
   aspect-ratio: 160/63;
   z-index: 6;
   --r: -4deg;
}

.campaign-hero__el--crab {
   top: 45%;
   left: 54%;
   width: 7.5%;
   aspect-ratio: 122/76;
   z-index: 6;
   animation-delay: -3s;
}

.campaign-hero__el--lolly {
   top: 35%;
   left: 81%;
   width: 5%;
   aspect-ratio: 96/138;
   z-index: 6;
   --r: 6deg;
   animation-delay: -2.2s;
}

.campaign-hero__el--ball {
   bottom: 21%;
   right: 27%;
   width: 6.5%;
   aspect-ratio: 1;
   z-index: 7;
}

.campaign-hero__el--redstar {
   bottom: 26%;
   right: 17%;
   width: 4.2%;
   aspect-ratio: 1;
   z-index: 7;
}

.campaign-hero__el--flipflops {
   bottom: 4%;
   right: 13%;
   width: 6%;
   aspect-ratio: 76/86;
   z-index: 7;
}

/* ---- CONTENT ----------------------------------------------- */
.campaign-hero__content {
   position: absolute;
   bottom: 6%;
   left: 4%;
   max-width: 46%;
   margin: 0;
   padding: 0;
   text-align: start;
   z-index: 8;
}

.campaign-hero .campaign-hero__date {
   display: inline-block;
   font-size: max(var(--fs-min), 1.3cqi);
   font-weight: 700;
   letter-spacing: 0.15em;
   text-transform: uppercase;
   color: var(--white);
   background: var(--sos-ink);
   padding: 0.54em 1.08em;
   border-radius: var(--radius-pill);
   margin: 0 0 0.77em;
}

.campaign-hero .campaign-hero__strap {
   font-size: max(var(--fs-min), 2.6cqi);
   font-weight: 600;
   font-style: italic;
   line-height: 1.15;
   color: var(--white);
   text-shadow: 0 0.2cqi 0.6cqi rgba(var(--sos-scrim-rgb), 0.2);
   margin: 0;
   padding: 0;
   max-width: none;
}

.campaign-hero__ctas {
   display: flex;
   flex-wrap: wrap;
   gap: 0.53em;
   margin-top: 0.62em;
   justify-content: flex-start;
}

.campaign-hero .campaign-hero__btn {
   display: inline-flex;
   align-items: center;
   font-size: max(var(--fs-min), 1.5cqi);
   font-weight: 700;
   line-height: 1.3;
   text-decoration: none;
   background-image: none;
   border: 0;
   padding: 0.73em 1.33em;
   border-radius: var(--radius-pill);
   max-width: none;
   transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.campaign-hero .campaign-hero__btn::before,
.campaign-hero .campaign-hero__btn::after {
   content: none;
   display: none;
}

.campaign-hero .campaign-hero__btn--primary {
   background: var(--sos-ink);
   color: var(--white);
}

.campaign-hero .campaign-hero__btn--lime {
   background: var(--lime);
   color: var(--sos-ink);
}

.campaign-hero .campaign-hero__btn:hover,
.campaign-hero .campaign-hero__btn:focus-visible {
   transform: translateY(-2px);
   box-shadow: 0 8px 22px rgba(var(--sos-scrim-rgb), 0.3);
}

/* ---- TABLET & MOBILE: FLOW REFLOW -------------------------
   Below 1100px the type block and the content stack are taken OUT of
   absolute positioning and laid out in normal flow. Absolute type +
   absolute content cannot guarantee clearance once the CTA label wraps,
   which is what caused the overlap on "of Skills". In flow they stack,
   so the hero grows to fit the copy instead of colliding with it.
   The beach and the floating SVGs stay absolute — artwork unchanged.
   ---------------------------------------------------------- */
@container chhero (max-width: 1100px) {
   .campaign-hero-wrap {
      height: auto;
   }

   .campaign-hero {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: flex-start;
      min-height: 34rem;
      padding: 6cqi 5cqi 7cqi;
      gap: 3cqi;
   }

   /* out of absolute positioning */
   .campaign-hero__type {
      position: static;
      transform: none;
      top: auto;
      left: auto;
      width: 100%;
      text-align: center;
   }

   .campaign-hero__content {
      position: static;
      bottom: auto;
      left: auto;
      max-width: 34rem;
      width: 100%;
   }

   .campaign-hero .campaign-hero__title {
      font-size: min(19cqi, 10rem);
   }

   .campaign-hero .campaign-hero__subtitle {
      font-size: min(7.5cqi, 4rem);
   }

   .campaign-hero .campaign-hero__date {
      font-size: var(--fs-min);
   }

   .campaign-hero .campaign-hero__strap {
      font-size: clamp(var(--fs-min), 4.2cqi, 1.75rem);
   }

   .campaign-hero .campaign-hero__btn {
      font-size: clamp(var(--fs-min), 2.8cqi, 1.25rem);
   }

   /* keep decoration clear of the copy */
   .campaign-hero__el--starfish,
   .campaign-hero__el--redstar,
   .campaign-hero__el--flipflops {
      display: none;
   }

   .campaign-hero__el--watermelon {
      width: 15%;
      left: 12%;
      top: 12%;
   }

   .campaign-hero__el--ring {
      width: 18%;
      left: 42%;
      top: 8%;
   }

   .campaign-hero__el--camera {
      width: 12%;
      left: 79%;
      top: 13%;
   }

   .campaign-hero__el--glasses {
      width: 16%;
      left: 16%;
      top: 34%;
   }

   .campaign-hero__el--crab {
      width: 11%;
      left: 72%;
      top: 36%;
   }

   .campaign-hero__el--lolly {
      width: 6.5%;
      left: 90%;
      top: 26%;
   }

   .campaign-hero__el--ball {
      width: 11%;
      right: 5%;
      bottom: 5%;
   }
}

/* ---- MOBILE ------------------------------------------------ */
@container chhero (max-width: 700px) {
   .campaign-hero {
      min-height: 30rem;
      padding: 9cqi 6cqi 11cqi;
      gap: 4cqi;
   }

   .campaign-hero .campaign-hero__title {
      font-size: 24cqi;
   }

   .campaign-hero .campaign-hero__subtitle {
      font-size: 10cqi;
   }

   .campaign-hero .campaign-hero__strap {
      font-size: clamp(var(--fs-min), 6cqi, 1.5rem);
   }

   .campaign-hero .campaign-hero__btn {
      font-size: clamp(var(--fs-min), 4cqi, 1.2rem);
   }

   /* CTA full width so a long label wraps cleanly instead of ballooning */
   .campaign-hero__ctas {
      width: 100%;
   }

   .campaign-hero .campaign-hero__btn {
      width: 100%;
      justify-content: center;
      text-align: center;
   }

   .campaign-hero__el--glasses,
   .campaign-hero__el--camera {
      display: none;
   }

   .campaign-hero__el--watermelon {
      width: 20%;
      left: 6%;
      top: 10%;
   }

   .campaign-hero__el--ring {
      width: 26%;
      left: 40%;
      top: 5%;
   }

   .campaign-hero__el--crab {
      width: 15%;
      left: 74%;
      top: 30%;
   }

   .campaign-hero__el--lolly {
      width: 9%;
      left: 90%;
      top: 20%;
   }

   .campaign-hero__el--ball {
      width: 15%;
      right: 4%;
      bottom: 3%;
   }
}

/* ---- REDUCED MOTION ---------------------------------------- */
@media (prefers-reduced-motion: reduce) {

   .campaign-hero::after,
   .campaign-hero__letter,
   .campaign-hero__subletter,
   .campaign-hero__el {
      animation: none !important;
   }

   .campaign-hero__letter,
   .campaign-hero__subletter {
      opacity: 1;
      transform: none;
   }
}/* card_grid block. The card shell (.card-grid__card, __category, __card-title,
   __description, __pill) lives in css/components/card.css and the grid in
   css/components/card-grid.css. This file styles the parts those don't cover:
   the icon, the CTA, the pill row and the footer links. No literal colour. */

.card-grid-section .card-grid-title { margin-bottom: .4rem; }
.card-grid-intro { color: var(--muted); max-width: 62ch; margin-bottom: 1.6rem; }

.card-grid__icon { display: inline-flex; margin-bottom: .4rem; color: var(--accent); }
.card-grid__icon svg { width: 34px; height: 34px; }
.card-grid__icon--blue { color: var(--surface-blue); }
.card-grid__icon--green { color: var(--aud-employers-text); }

.card-grid__cta { margin-top: auto; padding-top: .9rem; display: inline-flex; align-items: center; gap: .4rem; font-size: var(--fs-min); font-weight: 700; color: var(--link); }
.card-grid__card:hover .card-grid__cta { text-decoration: underline; }
.card-grid__cta-icon { flex: 0 0 auto; width: 1em; height: 1em; }

.card-grid__pills { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .9rem; }
.card-grid__pills .card-grid__pill { margin-top: 0; padding-top: 0; color: var(--link); font-weight: 700; }

.card-grid__footer { margin-top: 1.8rem; padding-top: 1.4rem; border-top: 1px solid var(--line); }
.card-grid__footer-title { font-size: 1.25rem; margin-bottom: .7rem; }
.card-grid__footer-pills { display: flex; flex-wrap: wrap; gap: .8rem 1.4rem; }
.card-grid__footer-pills a { font-size: var(--fs-min); font-weight: 700; color: var(--link); }
/* carousel block (Phase 3 Stage 4).
   Slide chrome inherits from css/hero-page.css (.full-page-hero / .carousel-cta)
   and the engine styling from css/components/slider.css (.dncg-carousel__*).

   Desktop-only fix: the prev/next arrows are absolutely positioned at the
   viewport edges (~0.75rem + 3.5rem disc). Inset the slide CONTENT row so text
   and CTAs never slide underneath them. Slide backgrounds stay full-bleed
   because only the inner .row is padded, not the slide. */
@media (min-width: 40em) {
  .dncg-carousel__slide .hero-slide .row { padding-inline: 4.25rem; }
}
/* chip_strip block. A header plus a horizontal strip of level chips.
   The block emits its own `.chip-strip__*` shell and `.level-chip` cards; neither
   was styled (the old stub assumed shared .chips, which the block does not emit),
   so chips stacked vertically and the header was unstyled. `.level-chip*` ported
   from design-export/base.css. No literal colour, every value a token. */

.chip-strip--grey { background: var(--light); }

.chip-strip__header { margin-bottom: 1.6rem; }
.chip-strip__header--center { text-align: center; }
.chip-strip__title { margin-bottom: .6rem; }
.chip-strip__intro { color: var(--muted); max-width: 62ch; }
.chip-strip__header--center .chip-strip__intro { margin-inline: auto; }

/* .level-chip cards themselves are styled in css/components/chip.css (flex-basis
   180px, accent top edge). This block only needed its container to be a flex row
   so the chips sit horizontally rather than stacking. */
/* Auto-fit the chips across the full width so they stretch to fill the row
   instead of sitting at their 180px flex-basis with trailing empty space. */
.chip-strip__chips { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1rem; }
/* The shared .level-chip caps itself at max-width:240px (right for a loose flex
   row). In this grid each chip must fill its track, so lift the cap here; grid
   already stretches items to the full track width. */
.chip-strip__chips .level-chip { max-width: none; }

.chip-strip__cta-wrap { margin-top: 1.6rem; }
/* comparison_grid block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   two-up comparison cards, navy variant */

/* The section markup does not carry .content-area.pad, so it had no vertical
   rhythm and the cards sat flush to the section edges. Apply the shared section
   spacing here (top AND bottom) using the same tokens .content-area.pad uses. */
.comparison-grid { padding-top: var(--space-section); padding-bottom: var(--space-section); }

/* Columns are not an ACF choice, so auto-fit to the card count: 2 cards -> 2
   cols, 3 -> 3, etc., instead of a fixed 2-col that wrapped 3 cards as 2 + 1. */
.comparison-grid__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap-grid); }
.comparison-card { display: flex; flex-direction: column; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.7rem 1.8rem; }
.comparison-card--navy { background: var(--surface-dark); border-color: var(--surface-dark); }
.comparison-card--navy :is(h2, h3, .comparison-card__title) { color: var(--white); }
.comparison-card--navy :is(.comparison-card__description, .comparison-card__body li) { color: rgba(var(--on-dark-rgb), .84); }
.comparison-card__header { display: flex; align-items: center; gap: .75rem; }
/* A filled chip carrying text needs a fill/label pair that is known to work.
   --accent-2 is a bright accent with no defined label partner, so white on it
   measured 2.15:1 on nlc's teal. --btn-accent-bg / --btn-accent-text ARE defined
   as a pair, per brand, and every child sets them to clear AA together. */
.comparison-card__badge { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .35rem .8rem; border-radius: var(--radius-pill); }
.comparison-card__title { font-size: 1.75rem; }
.comparison-card__description { font-size: var(--fs-min); color: var(--muted); }
.comparison-card__body { display: flex; flex-direction: column; gap: .6rem; margin-top: .3rem; }
.comparison-card__body li { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.55; color: var(--muted); }
.comparison-card__body li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; margin-top: .5rem; background: var(--accent-2); }
.comparison-card__cta { display: inline-flex; align-items: center; gap: .4rem; margin-top: auto; font-weight: 700; font-size: var(--fs-min); color: var(--link); text-decoration: none; }
.comparison-card__cta:hover { text-decoration: underline; }

/* Navy card: DC's orange accent (--accent-2) bullets and the orange link fail
   contrast on navy — lift them to the bright on-dark accent (yellow on DC,
   otherwise the brand's accent-on-dark). */
.comparison-card--navy .comparison-card__body li::before { background: var(--yellow, var(--accent-on-dark)); }
.comparison-card--navy .comparison-card__cta { color: var(--yellow, var(--accent-on-dark)); }

@media (max-width: 64em) { .comparison-grid__cards { grid-template-columns: 1fr; } }
/* contact block (Phase 3 Stage 4 + template styles).
   Field and input styling come from css/components/forms.css; the block emits
   .contact-form, which that sheet styles. This file adds only the optional
   "Template style" panel treatments chosen in the block Settings, each keyed by
   a contact-section--{style} modifier on the section. The bespoke campaign
   pages that hand-styled .contact-form (a white card, a brand-colour box) fold
   into these. Colour is always a token; the panel re-colours per brand.

   The modifier targets .contact-form, which is the form column in every
   display_style (form / form-left / form-right), so only the form panels, never
   the copy column beside it. */

/* h2 inherited the global heading clamp (up to 3rem), reading almost as large as
   a page h1 — and contact blocks often carry several h2s (Our Address /
   Telephone / Email …), which looks heavy. Cap them, same rule as the content
   block's .pull-out-content h2. */
.contact-section h2 { font-size: clamp(2rem, 4vw, 2.2rem); }

/* --- Card: the form column becomes an elevated light panel ---------------
   Text is pinned to the light-ground tokens so it stays legible even when the
   section itself is a dark or coloured ground (bg-blue, bg-dark-blue, bg-red).
   Two classes + descendant outranks bridge.css's on-dark section text rules. */
.contact-section--card .contact-form {
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-panel);
}
.contact-section--card .contact-form,
.contact-section--card .contact-form :is(p, li, label, .frm_primary_label, .frm_description) {
  color: var(--text);
}
.contact-section--card .contact-form :is(h2, h3, h4, .content-area-title) {
  color: var(--text-heading);
}
.contact-section--card .contact-form a:not(.btn):not(.frm_button_submit) {
  color: var(--link);
}

/* --- Accent: the form column becomes a brand-colour panel with light text ---
   Inputs keep their own white fill and border (forms.css); only the surrounding
   panel and its labels re-colour. Sits best on a dark or neutral section. */
.contact-section--accent .contact-form {
  background: var(--surface-brand);
  color: var(--text-on-brand);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--pad-panel);
}
.contact-section--accent .contact-form :is(h2, h3, h4, .content-area-title, p, li, label, .frm_primary_label, .frm_description) {
  color: var(--text-on-brand);
}
/* contact_bar block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   contact bar with bg + align modifiers */

.contact-bar__inner { display: flex; flex-wrap: wrap; gap: 2rem; padding: 1.2rem 1.4rem; }
.contact-bar--bordered .contact-bar__inner { border: 1px solid var(--line); border-radius: var(--radius-sm); }
.contact-bar--bg-white .contact-bar__inner { background: var(--white); }
.contact-bar--bg-light-grey .contact-bar__inner { background: var(--light); }
.contact-bar--bg-navy .contact-bar__inner { background: var(--surface-dark); }
.contact-bar--bg-dark .contact-bar__inner { background: var(--surface-dark-alt); }
.contact-bar--align-center .contact-bar__inner { justify-content: center; }
.contact-bar--align-left .contact-bar__inner { justify-content: flex-start; }
.contact-bar--bg-transparent .contact-bar__inner { background: transparent; border: 0; padding-inline: 0; }
.contact-bar__item { display: flex; gap: .7rem; align-items: center; font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.contact-bar__item a { color: inherit; text-decoration: none; }
.contact-bar__item a:hover { color: var(--link); }
.contact-bar__item svg { width: 22px; height: 22px; color: var(--em-color); }
:is(.contact-bar--bg-navy, .contact-bar--bg-dark) .contact-bar__item { color: var(--white); }
:is(.contact-bar--bg-navy, .contact-bar--bg-dark) .contact-bar__item svg { color: var(--accent-on-dark); }
/* content block — pull-out furniture (.pull-out-content / .pullout).
   Phase 3 Stage 4. WYSIWYG body copy inherits typography.css. */

.pull-out-content .columns { margin-bottom: var(--gap-grid); }
/* h2 inherited the global heading size (up to 3rem), reading almost as large as
   the page h1. Pull it down here — h2 is still the right document level for these
   section headings, just not display-scale. Content block only; other blocks keep
   the global size. */
.pull-out-content h2 { font-size: clamp(2rem, 4vw, 2.2rem); }
.pull-out-content h3 { margin-bottom: .8rem; }
.pull-out-content h4 { margin-bottom: .6rem; }
.pull-out-content p { margin-bottom: 1rem; }
.pull-out-content p:last-child { margin-bottom: 0; }
/* bg-mid-grey (#cacaca) is a mid-tone ground, not a light one: --muted on it
   measures 4.34:1 against a 4.5 requirement. Excluded from the muted-copy chain
   so body copy there keeps full-strength --text. */
.pull-out-content:not(.bg-blue):not(.bg-dark-blue):not(.bg-black):not(.bg-red):not(.bg-magenta):not(.bg-dark):not(.bg-dc-dark-blue):not(.bg-dc-blue):not(.bg-mid-blue):not(.bg-dark-grey):not(.bg-mid-grey) p { color: var(--muted); }
.pull-out-content ul { margin: 1rem 0; }
.pull-out-content ul li { display: flex; gap: .7rem; color: var(--muted); line-height: 1.6; }
.pull-out-content.bg-mid-grey ul li { color: var(--text); }
.pull-out-content ul li + li { margin-top: .7rem; }
.pull-out-content ul li::before { content: ""; flex-shrink: 0; width: 10px; height: 10px; margin-top: .5rem; background: var(--accent); }
.pull-out-content:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) ul li { color: rgba(var(--on-dark-rgb), .86); }
.pull-out-content:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) ul li::before { background: var(--accent-on-dark); }

.pullout { padding: 1.6rem 1.8rem; border-left: 6px solid var(--accent); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; background: var(--light); }
.pullout h4 { color: var(--text-heading); }
.pullout p { color: var(--muted); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout { background: rgba(var(--on-dark-rgb), .08); border-left-color: var(--accent-on-dark); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout h4 { color: var(--white); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .pullout p { color: rgba(var(--on-dark-rgb), .82); }
/* courses block (Phase 3 Stage 4).
   Inherits its styling from css/components/card.css (.course-cards-list). The block markup already emits those
   shared classes, so it carries no block-specific CSS. */
/* decision_tree block — multi-step eligibility / decision checker.
   Ported from design-export/student-life/financial-support.html. No literal
   colour (the prototype's rgba(255,255,255,…) progress dots become the
   --on-dark-rgb channel). Option/outcome CTAs reuse the .btn family. */

.decision-tree .tree { max-width: 42rem; margin-inline: auto; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); background: var(--white); border: 1px solid var(--line); }

.tree__head { background: var(--surface-dark-alt); color: var(--white); padding: 1rem 1.4rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* The title carries .title-font, which sets --text-heading (navy). On the dark
   head bar that is navy-on-navy, so re-assert white. */
.tree__head-title { color: var(--white); }
.tree__head-title { font-size: 1.3125rem; text-transform: uppercase; letter-spacing: .04em; }
.tree__dots { display: flex; gap: .4rem; flex: 0 0 auto; }
.tree__dots span { width: 10px; height: 10px; border-radius: 50%; background: rgba(var(--on-dark-rgb), .28); transition: background var(--transition); }
.tree__dots span[data-on="true"] { background: var(--btn-accent-bg); }

.tree__body { padding: 1.8rem 1.6rem 1.6rem; }
.tree__q { font-size: 1.75rem; margin-bottom: .5rem; }
.tree__help { font-size: var(--fs-min); color: var(--muted); margin-bottom: 1.2rem; }

.tree__opts { display: grid; gap: .7rem; }
/* white option button on a white panel: the border is the only thing marking the
   control's bounds, so it carries the 3:1 interactive weight (WCAG 1.4.11) */
.tree__opt { display: flex; align-items: center; justify-content: space-between; gap: 1rem; text-align: left; width: 100%; background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: 1rem 1.15rem; cursor: pointer; font: inherit; transition: border-color var(--transition); }
.tree__opt:hover { border-color: var(--accent); }
.tree__opt b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; }
.tree__opt small { display: block; font-size: var(--fs-min); color: var(--muted); margin-top: .15rem; }
.tree__opt i { color: var(--link); font-size: 1.3rem; font-style: normal; flex: 0 0 auto; }

.tree__outcome-title { font-size: 1.9rem; margin: .5rem 0 .7rem; }
.tree__outcome-body { font-size: var(--fs-min); line-height: 1.6; margin-bottom: 1rem; max-width: 58ch; }
.tree__points { list-style: none; padding: 0; margin: 0 0 1.2rem; display: grid; gap: .5rem; }
.tree__points li { display: flex; gap: .6rem; font-size: var(--fs-min); line-height: 1.55; color: var(--muted); }
.tree__point-check { flex: 0 0 auto; margin-top: 3px; color: var(--accent); }
.tree__ctas { display: flex; flex-wrap: wrap; gap: .7rem; }

.tree__foot { display: flex; gap: 1.2rem; margin-top: 1.4rem; padding-top: 1.1rem; border-top: 1px solid var(--line); }
.tree__foot button { background: none; border: 0; font: inherit; cursor: pointer; color: var(--link); }
.tree__foot .tree__reset { color: var(--muted); }
.tree__note { margin: 0; padding: 1rem 1.6rem; background: var(--light); font-size: var(--fs-min); color: var(--muted); line-height: 1.5; }
/* downloads block (Phase 3 Stage 4).
   File-download cards. The .sortable-links-* search / filter / list vocabulary
   moved to pagebuilder/links/links.css, which is the block that emits it.
   No literal colour, every value a token. */

.file-cards { display: flex; flex-direction: column; gap: .7rem; }
.file-cards .icon { flex: 0 0 auto; color: var(--dblue); display: flex; }

/* The `4grid` display_style had no rule, so it inherited the flex column above
   and rendered as a single stacked list, identical to `list-plain`. It has to
   re-declare `display` because the base is flex, not grid. */
.file-cards-4grid { display: grid; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 64em) { .file-cards-4grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .file-cards-4grid { grid-template-columns: 1fr; } }
/* events / restaurant_menus card grid.
   The shared css/components/card-grid.css already maps the common event layouts
   (.events-cards-3grid, -4grid, -5grid and their -feature variants) to columns
   and collapses every `.events-cards-*` to one column at 40em. It was missing the
   two "big grid" variants below, so 3grid6 / 4grid8 fell back to the default
   single column and rendered full width. Map them to their column counts here;
   the shared sheet's 40em collapse (`[class*="events-cards-"]`) still applies.
   Card face styling comes from css/components/card.css (.event-card). */

.events-cards-3grid6 { grid-template-columns: repeat(3, 1fr); }
.events-cards-4grid8 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 64em) {
  .events-cards-3grid6,
  .events-cards-4grid8 { grid-template-columns: repeat(2, 1fr); }
}
/* Events Calendar block. Ported from the enrichment prototype's week calendar,
   retokenised: no literal colour (every value a token), 1.1rem (--fs-min) floor,
   theme display face. Category colour is a decorative left bar only. */

.events-calendar__head { max-width: 60ch; margin-bottom: 2rem; }
.events-calendar__title { font-size: clamp(2rem, 4vw, 2.6rem); margin: .4rem 0 0; }
.events-calendar__intro { font-size: 1.2rem; line-height: 1.55; color: var(--muted); margin-top: .9rem; max-width: none; }
.events-calendar__note {
  display: flex; align-items: flex-start; gap: .5rem;
  font-size: var(--fs-min); font-weight: 600; color: var(--muted);
  background: var(--white); border-left: 4px solid var(--accent);
  border-radius: var(--radius-sm); padding: .7rem .9rem; margin: 1.2rem 0 0; max-width: none;
}
.events-calendar__note svg { width: 20px; height: 20px; color: var(--accent); flex: 0 0 auto; margin-top: 1px; }

/* Shell */
.dncg-cal { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }

/* Control bar: filters group on the left, week nav on the right. */
.dncg-cal__bar { display: flex; flex-wrap: wrap; gap: 1.1rem 1.8rem; align-items: flex-start; justify-content: space-between; padding: 1.15rem 1.3rem; background: var(--surface-dark-alt); }
.dncg-cal__filters { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 1.1rem 1.8rem; }
/* Each control group is a labelled column: caption on top, control(s) below. */
.dncg-cal__set { display: flex; flex-direction: column; align-items: flex-start; gap: .45rem; }
.dncg-cal__nav { display: flex; align-items: center; gap: .5rem; }
.dncg-cal__chips { display: flex; gap: .5rem; flex-wrap: wrap; }
.dncg-cal__set-label { font-size: var(--fs-min); font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: var(--accent-on-dark); }
.dncg-cal__chip {
  font: inherit; font-size: var(--fs-min); font-weight: 700; cursor: pointer;
  border: 2px solid rgba(var(--on-dark-rgb), .5); background: transparent; color: var(--white);
  padding: .42rem 1rem; border-radius: var(--radius-pill); display: inline-flex; align-items: center; gap: .45rem;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.dncg-cal__chip:hover { border-color: var(--accent-on-dark); }
.dncg-cal__chip[aria-pressed="true"] { background: var(--btn-accent-bg); border-color: var(--btn-accent-bg); color: var(--btn-accent-text); }
.dncg-cal__tick { width: 15px; height: 15px; opacity: 0; }
.dncg-cal__chip[aria-pressed="true"] .dncg-cal__tick { opacity: 1; }

.dncg-cal__sel {
  font: inherit; font-size: var(--fs-min); font-weight: 700;
  background: var(--white); color: var(--navy);
  border: 2px solid var(--line); border-radius: var(--radius-sm);
  padding: .45rem .7rem; cursor: pointer;
}
.dncg-cal__arrow {
  font: inherit; cursor: pointer; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; border-radius: var(--radius-sm);
  border: 2px solid rgba(var(--on-dark-rgb), .5); background: transparent; color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.dncg-cal__arrow svg { width: 19px; height: 19px; }
.dncg-cal__arrow:hover:not(:disabled) { background: var(--btn-accent-bg); border-color: var(--btn-accent-bg); color: var(--btn-accent-text); }
.dncg-cal__arrow:disabled { opacity: .3; cursor: not-allowed; }
.dncg-cal__today {
  font: inherit; font-size: var(--fs-min); font-weight: 800; cursor: pointer; border: 0; white-space: nowrap;
  background: var(--surface-brand); color: var(--white); padding: .55rem 1rem; border-radius: var(--radius-sm);
  transition: background var(--transition);
}
.dncg-cal__today:hover { background: var(--magenta-dark); }

/* Head */
.dncg-cal__head { display: flex; flex-wrap: wrap; gap: .6rem 1.2rem; align-items: baseline; padding: 1.2rem 1.3rem .9rem; border-bottom: 3px solid var(--light); }
.dncg-cal__wk { font-family: var(--font-display); text-transform: uppercase; font-size: 1.9rem; line-height: 1; color: var(--navy); }
.dncg-cal__count { font-size: var(--fs-min); font-weight: 700; color: var(--muted); }
.dncg-cal__flag { font-size: var(--fs-min); font-weight: 800; color: var(--surface-brand); }

/* Body / grid */
.dncg-cal__body { padding: 1.1rem; }
.dncg-cal__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }

.dncg-cal__band { border-radius: var(--radius-sm); padding: .7rem .95rem; color: var(--white); display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .7rem; min-width: 0; }
.dncg-cal__band-t { font-weight: 800; font-size: var(--fs-min); }
.dncg-cal__band-s { font-size: var(--fs-min); opacity: .9; font-weight: 600; }
.dncg-cal__band--themed { background: repeating-linear-gradient(135deg, var(--navy) 0 12px, var(--surface-dark-alt) 12px 24px); }
.dncg-cal__band--multi { background: var(--blue); }

.dncg-cal__daycol { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.dncg-cal__dayhead { padding: .55rem .3rem; text-align: center; border-radius: var(--radius-sm); background: var(--light); }
.dncg-cal__dayhead b { display: block; font-family: var(--font-display); text-transform: uppercase; font-size: 1.35rem; line-height: 1; color: var(--navy); }
.dncg-cal__dayhead span { display: block; font-size: var(--fs-min); font-weight: 700; color: var(--muted); margin-top: .15rem; }
.dncg-cal__dayhead.is-today { background: var(--btn-accent-bg); }
.dncg-cal__dayhead.is-today b, .dncg-cal__dayhead.is-today span { color: var(--btn-accent-text); }

/* Slots */
.dncg-cal__slot { background: var(--white); border: 2px solid var(--light); border-left-width: 6px; border-radius: var(--radius-sm); padding: .7rem .8rem; min-width: 0; }
.dncg-cal__slot-time { display: block; font-size: var(--fs-min); font-weight: 800; color: var(--surface-brand); }
.dncg-cal__slot-t { font-size: var(--fs-min); font-weight: 800; color: var(--navy); line-height: 1.25; margin: .15rem 0 .2rem; }
.dncg-cal__slot-meta { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.35; }
.dncg-cal__slot-desc { display: block; font-size: var(--fs-min); color: var(--muted); line-height: 1.35; margin-top: .3rem; }
.dncg-cal__slot-badge { display: inline-block; margin-top: .45rem; font-size: var(--fs-min); font-weight: 800; padding: .1rem .6rem; border-radius: var(--radius-pill); background: var(--light); color: var(--navy); text-decoration: none; }
.dncg-cal__slot-badge--book { background: var(--blue); color: var(--white); }
.dncg-cal__slot-badge--book:hover { background: var(--blue-dark); color: var(--white); }
/* Category left bar (decorative only) */
.dncg-cal__slot--sport { border-left-color: var(--blue); }
.dncg-cal__slot--wellbeing { border-left-color: var(--magenta); }
.dncg-cal__slot--social { border-left-color: var(--aud-advisers); }
.dncg-cal__slot--creative { border-left-color: var(--lime); }
.dncg-cal__slot--careers { border-left-color: var(--green); }
.dncg-cal__slot--community { border-left-color: var(--navy); }
.dncg-cal__slot--safety { border-left-color: var(--magenta-dark); }
.dncg-cal__slot--event { box-shadow: 0 2px 10px rgba(var(--surface-dark-alt-rgb), .07); }

.dncg-cal__none { font-size: var(--fs-min); color: var(--muted); font-weight: 600; padding: .5rem .2rem; text-align: center; }
.dncg-cal__empty { padding: 2.5rem 1rem; text-align: center; font-size: 1.2rem; font-weight: 700; color: var(--muted); }

/* Stacked day list (small screens) */
.dncg-cal__dayblock { border-top: 3px solid var(--light); padding-top: .9rem; margin-top: .9rem; }
.dncg-cal__dayblock:first-child { border-top: 0; margin-top: 0; padding-top: 0; }
.dncg-cal__dayblock-h { display: flex; align-items: baseline; gap: .6rem; margin-bottom: .6rem; }
.dncg-cal__dayblock-h b { font-family: var(--font-display); text-transform: uppercase; font-size: 1.5rem; color: var(--navy); }
.dncg-cal__dayblock-h span { font-size: var(--fs-min); font-weight: 700; color: var(--muted); }
.dncg-cal__dayblock-h.is-today b { color: var(--surface-brand); }
.dncg-cal__dayblock .dncg-cal__slot { margin-bottom: 8px; }
.dncg-cal__stack .dncg-cal__band { margin-bottom: 8px; }

@media (max-width: 900px) {
  .dncg-cal__bar { padding: 1rem; }
  .dncg-cal__nav { margin-left: 0; width: 100%; }
  .dncg-cal__wk { font-size: 1.6rem; }
}
/* facilities_grid block.
   Thumbnail strip; click-to-expand modal (see facilities_grid.php + its inline
   JS). Strip CSS ported from design-export/base.css; no literal colour, every
   value a token. Responsive: 6-up desktop, 4-up laptop band (css/responsive.css
   §3B), 3-up below 64em.

   The MODAL has no design-export treatment: design-export/base.css defines
   .facilities-grid__strip, .facility-thumb and .facility-thumb__label and
   nothing else, and no modal, dialog or overlay component exists anywhere in
   the export or the theme. It is therefore built from the design system's own
   primitives, with each choice named in-line below. */

/* Header / footer around the thumbnail strip (eyebrow now uses the shared
   .eyebrow class). These were unstyled, so the strip sat flush against the intro
   and footer. */
.facilities-grid__header { margin-bottom: 1.6rem; }
.facilities-grid__header--center { text-align: center; }
.facilities-grid__title { margin-bottom: .5rem; }
.facilities-grid__intro { color: var(--muted); max-width: 62ch; }
.facilities-grid__header--center .facilities-grid__intro { margin-inline: auto; }
.facilities-grid__footer { margin-top: 1.3rem; font-size: var(--fs-min); color: var(--muted); }

.facilities-grid__strip { display: grid; gap: .7rem; grid-template-columns: repeat(6, 1fr); }
/* The `columns` field (3, 4 or 6) emits __strip--N, which nothing consumed, so
   every strip painted 6 across whatever the editor chose. Column counts
   extracted from sites/dc/dc-child/style.css L13480-13488. */
.facilities-grid__strip--3 { grid-template-columns: repeat(3, 1fr); }
.facilities-grid__strip--4 { grid-template-columns: repeat(4, 1fr); }
.facilities-grid__strip--6 { grid-template-columns: repeat(6, 1fr); }
@media (max-width: 64em) {
  .facilities-grid__strip,
  .facilities-grid__strip--4,
  .facilities-grid__strip--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 40em) {
  .facilities-grid__strip,
  .facilities-grid__strip--3,
  .facilities-grid__strip--4,
  .facilities-grid__strip--6 { grid-template-columns: repeat(2, 1fr); }
}

.facility-thumb { position: relative; display: block; border-radius: var(--radius-sm); overflow: hidden; aspect-ratio: 4 / 3; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); text-decoration: none; border: 0; padding: 0; cursor: pointer; width: 100%; }
.facility-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.facility-thumb__label { position: absolute; inset: auto 0 0 0; background: rgba(var(--tint-rgb), .82); color: var(--white); font-size: var(--fs-min); font-weight: 700; padding: .5rem .7rem; }

/* Expand affordance: a small badge top-right, not the raw viewBox-sized SVG
   (which rendered ~40px black over the image). Signals click-to-expand. */
.facility-thumb__expand { position: absolute; top: .5rem; right: .5rem; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(var(--tint-rgb), .82); color: var(--white); opacity: 0; transition: opacity var(--transition); }
.facility-thumb__expand svg { width: 15px; height: 15px; }
.facility-thumb:hover .facility-thumb__expand,
.facility-thumb:focus-visible .facility-thumb__expand { opacity: 1; }

/* ============================== MODAL ==================================== */

/* The overlay is toggled by the block's inline JS through the `hidden`
   attribute. `display: flex` on the open state out-specifies the UA's
   `[hidden] { display: none }`, so the panel would be visible over every page
   the block appears on. This is the identical fault fixed on the links block in
   Stage 6 (stage6-fix-log §11); the [hidden] reset is load-bearing, not tidy. */
.facilities-modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
  padding: 1.5rem;
  /* Scrim on the established rgba(var(--token-rgb), a) overlay pattern
     (decisions.md §8). --tint-rgb is the theme's scrim channel and is
     per-brand, so the scrim darkens in each brand's own key. */
  background: rgba(var(--tint-rgb), .72);
  overflow-y: auto;
  animation: fg-modal-in var(--transition) var(--ease-out);
}
.facilities-modal-overlay[hidden] { display: none; }

/* Floating UI, so it earns a shadow: the design reserves elevation for
   dropdowns, modals and the lightbox and keeps every resting surface flat
   (phase-3-prototype-summary.md §2, move 2). --radius-md rather than the card's
   --radius-sm because this is a large floating panel, not a tile. */
.facilities-modal {
  position: relative;
  display: grid; grid-template-columns: 1fr 1fr;
  width: min(100%, 62rem);
  max-height: 90vh;
  background: var(--surface);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  animation: fg-modal-panel-in var(--transition) var(--ease-out);
}

/* Close sits over the image, so it cannot inherit a page ground. A solid tinted
   disc gives it a predictable dark ground on any photograph, which is the same
   correction the carousel dots took (kitchen-sink-visual-audit §3.3). 40x40
   clears the WCAG 2.2 24x24 target size with margin. No focus colour is set
   here: the global two-tone :focus-visible ring carries both light and dark
   grounds, and per-component focus colours were removed theme-wide in pass 4
   (kitchen-sink-visual-audit §3c.3). */
.facilities-modal__close {
  position: absolute; top: .9rem; right: .9rem; z-index: 2;
  display: grid; place-items: center;
  width: 40px; height: 40px; padding: 0;
  border: 0; border-radius: 50%;
  background: rgba(var(--tint-rgb), .88); color: var(--white);
  cursor: pointer;
  transition: background var(--transition);
}
.facilities-modal__close:hover { background: var(--navy); }
.facilities-modal__close svg { width: 18px; height: 18px; }

.facilities-modal__image {
  background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px);
  min-height: 100%;
}
.facilities-modal__image img { width: 100%; height: 100%; object-fit: cover; display: block; }

.facilities-modal__content {
  display: flex; flex-direction: column; gap: .9rem;
  padding: var(--pad-panel);
  overflow-y: auto;
}

/* The tag reuses the .tag pair rather than inventing a fill/label combination.
   --btn-accent-bg / --btn-accent-text is a pairing every child defines and that
   was proven to hold at AA when two mispaired accent combinations were fixed
   (kitchen-sink-visual-audit §3b.4). The markup emits __tag, not .tag, and the
   markup is not being changed here. Empty when the facility has no tag, so it
   collapses rather than painting an empty pill. */
.facilities-modal__tag:empty { display: none; }
.facilities-modal__tag {
  align-self: flex-start;
  padding: .2rem .8rem;
  font-size: var(--fs-min); font-weight: 800;
  color: var(--btn-accent-text); background: var(--btn-accent-bg);
  border-radius: var(--radius-pill);
}

.facilities-modal__title { margin: 0; font-size: 1.75rem; }

/* Facts are injected by the block's JS, so a static class scan reports these
   three as unmatched markup. They are not orphans; do not delete. */
.facilities-modal__facts {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem;
  margin-top: .4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--line);
}
.facilities-modal__facts:empty { display: none; border-top: 0; padding-top: 0; }
.facilities-modal__fact-number {
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 2rem; line-height: 1.05;
  color: var(--text-heading);
  /* Tabular figures on statistics, per the design's craft details. */
  font-variant-numeric: tabular-nums;
}
.facilities-modal__fact-text { font-size: var(--fs-min); color: var(--muted); }

/* The CTA carries `.btn .btn--primary` in the markup and takes its whole
   treatment (pill, palette, hover, icon sizing) from components/buttons.css.
   Only placement belongs here.

   It must keep `.btn`: bridge.css's light-panel protection re-colours
   `a:not(.button):not(.btn)` inside a panel, which repainted the label onto its
   own dark fill at 1.08-1.60:1 across all six brands while this block styled the
   CTA by hand. Measured, not assumed. */
.facilities-modal__cta { align-self: flex-start; margin-top: auto; }

/* Both keyframes are neutralised by the global prefers-reduced-motion reset in
   base.css (animation-duration: .001ms !important), so no per-selector reset is
   needed here. */
@keyframes fg-modal-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes fg-modal-panel-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

@media (max-width: 40em) {
  .facilities-modal-overlay { padding: .75rem; align-items: flex-start; }
  .facilities-modal { grid-template-columns: 1fr; max-height: 94vh; }
  .facilities-modal__image { aspect-ratio: 16 / 9; min-height: 0; }
  .facilities-modal__facts { grid-template-columns: 1fr; gap: .8rem; }
}
/* facility_cards block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   facility cards grid (823 media split w/ facilities_grid) */

.facility-cards__grid { display: grid; gap: var(--gap-grid); }
/* The field offers 2, 3 and 4 columns; only 3 was mapped, so 2 and 4 fell back
   to the base grid, which sets no columns, and rendered single-column. */
.facility-cards__grid--2 { grid-template-columns: repeat(2, 1fr); }
.facility-cards__grid--3 { grid-template-columns: repeat(3, 1fr); }
.facility-cards__grid--4 { grid-template-columns: repeat(4, 1fr); }
.facility-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); overflow: hidden; }
.facility-card__image { aspect-ratio: 16 / 9; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
.facility-card__body { padding: 1.4rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; flex: 1 1 auto; }
.facility-card__title { font-size: 1.4375rem; }
.facility-card__desc { font-size: var(--fs-min); color: var(--muted); }
.facility-card__specs { margin-top: auto; padding-top: .9rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.facility-card__spec { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); border: 1px solid var(--box-border); padding: .25rem .7rem; border-radius: var(--radius-pill); }

@media (max-width: 64em) {
  .facility-cards__grid--3 { grid-template-columns: 1fr; }
  .facility-cards__grid--4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .facility-cards__grid--2,
  .facility-cards__grid--4 { grid-template-columns: 1fr; }
}
/* =============================================================================
   featured_links.css — link cards on the shared .card shell (Stage 4)
   Rebuilt from prototypes/kitchen-sink-dncg.html (.tile image cards). The .card
   shell (components/card.css) already owns the border, radius, 5px accent foot,
   hover lift, 16/10 image and card-section padding. This file adds only the
   block deltas: column counts, the description paragraph and the featured mark.
   Scoped to .featured-links so the numeric column classes don't leak.
   Colour is always a token.
   ========================================================================== */

/* --- Column counts (cards_per_row) -------------------------------------- */
.featured-links .row-cards-2 { grid-template-columns: repeat(2, 1fr); }
.featured-links .row-cards-3 { grid-template-columns: repeat(3, 1fr); }
.featured-links .row-cards-4 { grid-template-columns: repeat(4, 1fr); }
.featured-links .row-cards-5 { grid-template-columns: repeat(5, 1fr); }

/* simple-grid (staff/student links): denser, title-only tiles */
.featured-links .row-cards-simple-grid {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
}

/* --- Description under the title ---------------------------------------- */
.featured-links .card-section p {
  font-size: 1.1rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}

/* --- Featured link: lime accent foot marks the highlight ---------------- */
.featured-links .card-featured { border-bottom-color: var(--lime); }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .featured-links .row-cards-3,
  .featured-links .row-cards-4,
  .featured-links .row-cards-5 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .featured-links .row-cards-2,
  .featured-links .row-cards-3,
  .featured-links .row-cards-4,
  .featured-links .row-cards-5 { grid-template-columns: 1fr; }
}
/* featured_panel block.
   CSS ported from design-export/base.css; no literal colour, every value a token.
   dark featured panel, media + features. */

.featured-panel { background: var(--surface-dark); border-radius: var(--radius-lg); overflow: hidden; }
.featured-panel__inner { display: grid; grid-template-columns: 1.15fr 1fr; align-items: stretch; grid-template-areas: "content media"; }
.featured-panel--media-right .featured-panel__inner { grid-template-columns: 1.15fr 1fr; grid-template-areas: "content media"; }
.featured-panel--media-left .featured-panel__inner { grid-template-columns: 1fr 1.15fr; grid-template-areas: "media content"; }
.featured-panel--no-media .featured-panel__inner { grid-template-columns: 1fr; grid-template-areas: "content"; }
.featured-panel__content { padding: 2.2rem 2.3rem; grid-area: content; }
.featured-panel__media { grid-area: media; position: relative; background: repeating-linear-gradient(135deg, rgba(var(--on-dark-rgb), .14) 0 9px, rgba(var(--on-dark-rgb), .06) 9px 18px); display: flex; align-items: center; justify-content: center; min-height: 340px; font-family: var(--font-mono); color: rgba(var(--on-dark-rgb), .6); overflow: hidden; }

/* Real media must fill the media column, not sit as an unsized 300x150 iframe
   default that overlaps the content column. Image covers; video keeps 16:9. */
.featured-panel__image-wrapper,
.featured-panel__custom-content { width: 100%; height: 100%; align-self: stretch; }
.featured-panel__image-wrapper img,
.featured-panel__image { width: 100%; height: 100%; object-fit: cover; display: block; }
.featured-panel__video-wrapper { position: relative; width: 100%; aspect-ratio: 16 / 9; align-self: center; }
.featured-panel__video-wrapper iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

.featured-panel__title { color: var(--white); font-size: 2.5rem; line-height: 1.02; margin-bottom: .5rem; }
.featured-panel__subtitle { font-family: var(--font-display); font-weight: 400; font-size: 1.4375rem; color: rgba(var(--on-dark-rgb), .8); margin-bottom: .8rem; }
.featured-panel__description { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .84); margin-bottom: 1.4rem; }
.featured-panel__features { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; margin-bottom: 1.6rem; }
.featured-panel__feature { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.5; color: var(--white); }
.featured-panel__feature-icon { flex: 0 0 auto; color: var(--accent-on-dark); display: flex; margin-top: .1rem; }

/* Title emphasis on the dark panel. --display-em (orange on DC) fails contrast
   on navy, so use the brand's bright accent: --yellow where defined (DC),
   otherwise the on-dark accent. */
.featured-panel__title em,
.featured-panel__title strong { color: var(--yellow, var(--accent-on-dark)); }

/* CTA: a solid, high-contrast pill, not a low-contrast text link. Brand accent
   button tokens (DC: teal disc, navy label on the navy panel). */
.featured-panel__cta {
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--btn-accent-bg); color: var(--btn-accent-text);
  font-weight: 700; font-size: var(--fs-min);
  padding: .8rem 1.5rem; border-radius: var(--radius-pill);
  text-decoration: none;
  transition: background var(--transition), transform var(--transition);
}
.featured-panel__cta:hover { color: var(--btn-accent-text); transform: translateY(-2px); }
.featured-panel__cta svg { width: 1.1em; height: 1.1em; }

@media (max-width: 64em) {
  .featured-panel__inner,
  .featured-panel--media-left .featured-panel__inner,
  .featured-panel--media-right .featured-panel__inner { grid-template-columns: 1fr; grid-template-areas: "content" "media"; }
  .featured-panel__features { grid-template-columns: 1fr; }
}
/* fiftyfifty_content block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   two-column media/content, flip + single variants */

.fiftyfifty__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2.4rem; align-items: center; }
.fiftyfifty--flip .fiftyfifty__media { order: -1; }
.fiftyfifty--single .fiftyfifty__grid { grid-template-columns: 1fr; }
.fiftyfifty__image { aspect-ratio: 16 / 10; border-radius: var(--radius-md); background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
@media (max-width: 64em) { .fiftyfifty__grid { grid-template-columns: 1fr; } .fiftyfifty--flip .fiftyfifty__media { order: 0; } }
/* full_page_hero block.
   The shared hero shell (.full-page-hero, __background, __overlay, __content,
   __badge, __title, __intro, __details, __ctas, .controls) lives in
   css/hero-page.css — this block emits those classes and inherits them.

   This file owns the MODIFIERS the template emits and hero-page.css does not
   implement (height, text alignment, overlay style), plus the countdown, scroll
   indicator and video control the template emits and nothing styled.

   No literal colour, no literal font family: every value is a token.
   The three height values come from the field's own labels — "Full viewport
   (95vh)", "Large (80vh)", "Medium (60vh)" — not from a judgement call. */

/* ------------------------------------------------------------ hero height
   hero-page.css sets min-height: 520px as the floor. These raise it to the
   chosen viewport share and keep a pixel floor as the lower bound, so a short
   viewport never crushes the content. */
.full-page-hero--full   { min-height: max(520px, 95vh); }
.full-page-hero--large  { min-height: max(520px, 80vh); }
.full-page-hero--medium { min-height: max(420px, 60vh); }

/* On a short landscape phone a 95vh hero is a full screen of scrim with the
   title below the fold. */
@media (max-height: 34em) {
  .full-page-hero--full,
  .full-page-hero--large { min-height: 420px; }
}

/* -------------------------------------------------------- text alignment
   --center is implemented in hero-page.css. --left is the natural flow of
   .full-page-hero__content, but it is stated explicitly so the modifier is real
   and so it wins if a page-level override has centred the content. */
.full-page-hero--left .full-page-hero__content {
  align-items: flex-start;
  text-align: left;
  margin-inline: 0;
}
.full-page-hero--left .full-page-hero__details,
.full-page-hero--left .full-page-hero__ctas { justify-content: flex-start; }

.full-page-hero--center .full-page-hero__details,
.full-page-hero--center .full-page-hero__ctas { justify-content: center; }
/* Centred content puts the badge back in the flow rather than hard left. */
.full-page-hero--center .full-page-hero__badge { align-self: center; }

/* ------------------------------------------------------------ overlay style
   The overlay is a SCRIM over photography, not a text colour, so a full-strength
   brand fill is legitimate here: the title is --white, which makes these the
   same contrast case as the .bg-blue / .bg-red grounds.

   --overlay-navy is the default and is already the hero-page.css rule. It is
   restated so the modifier is not silently inert and so the other three sit at
   the same specificity. */
.full-page-hero--overlay-navy .full-page-hero__overlay {
  background: radial-gradient(120% 90% at 12% 12%,
    rgba(var(--tint-rgb), .3) 0%,
    rgba(var(--tint-rgb), .94) 78%);
}

/* "Dark solid" — one flat scrim, no gradient. The densest of the four, for busy
   footage a gradient cannot hold down. */
.full-page-hero--overlay-dark .full-page-hero__overlay {
  background: rgba(var(--tint-rgb), .84);
}

/* Brand-fill gradients. Both run from the brand fill at the reading corner to
   the page tint at the far corner, so the title always sits on the denser end. */
.full-page-hero--overlay-magenta .full-page-hero__overlay {
  background: linear-gradient(115deg,
    rgba(var(--surface-brand-rgb), .94) 0%,
    rgba(var(--tint-rgb), .86) 100%);
}
.full-page-hero--overlay-blue .full-page-hero__overlay {
  background: linear-gradient(115deg,
    rgba(var(--surface-blue-rgb), .94) 0%,
    rgba(var(--tint-rgb), .86) 100%);
}

/* On the two brand-fill overlays the ground is a MID-TONE brand colour, not a
   deep one. css/bridge.css carries the measurement: an accent collapses on those
   (2.07:1 ucdon, 1.41:1 ucnl, 2.20:1 hesta) because the fill is sized to carry
   white with no headroom left. So emphasis and the detail figures ride the
   on-brand text colour and lean on weight rather than hue, and the badge inverts
   to a white chip so its own label keeps its contrast. */
.full-page-hero--overlay-magenta .full-page-hero__title em,
.full-page-hero--overlay-blue .full-page-hero__title em,
.full-page-hero--overlay-magenta .full-page-hero__detail strong,
.full-page-hero--overlay-blue .full-page-hero__detail strong {
  color: var(--text-on-brand);
}
.full-page-hero--overlay-magenta .full-page-hero__badge,
.full-page-hero--overlay-blue .full-page-hero__badge {
  background: var(--white);
  color: var(--text-heading);
}

/* ---------------------------------------------------------------- countdown
   The template emits __countdown > __countdown-label + __countdown-timer >
   __countdown-block (__countdown-number + __countdown-unit), separated by
   __countdown-separator. Nothing styled any of it. */
.full-page-hero__countdown { margin-bottom: 1.8rem; }
.full-page-hero__countdown-label {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), .82);
  margin-bottom: .7rem;
}
.full-page-hero__countdown-timer {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  font-variant-numeric: tabular-nums;
}
.full-page-hero--center .full-page-hero__countdown-timer { justify-content: center; }
.full-page-hero__countdown-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 4.5rem;
  padding: .7rem .6rem .6rem;
  border-radius: var(--radius-sm);
  background: rgba(var(--on-dark-rgb), .1);
  border: 1px solid rgba(var(--on-dark-rgb), .18);
}
.full-page-hero__countdown-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--white);
}
.full-page-hero__countdown-unit {
  font-size: var(--fs-meta);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(var(--on-dark-rgb), .78);
  margin-top: .3rem;
}
.full-page-hero__countdown-separator {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: rgba(var(--on-dark-rgb), .45);
  padding-top: .6rem;
}

/* ------------------------------------------------------- scroll indicator
   `bob` is the shared idle keyframe in css/base.css, paired here with its
   required prefers-reduced-motion reset. */
.full-page-hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.4rem;
  translate: -50% 0;
  width: 34px;
  height: 34px;
  color: rgba(var(--on-dark-rgb), .7);
  animation: bob 2.4s ease-in-out infinite;
}
.full-page-hero__scroll svg { width: 100%; height: 100%; }
@media (prefers-reduced-motion: reduce) {
  .full-page-hero__scroll { animation: none; }
}

/* ----------------------------------------------------------- video control
   The block emits its own control (__video-controls > __video-btn with an
   .icon-pause / .icon-play pair), not the shared .controls button.
   `.paused` is toggled by full_page_hero.js. */
.full-page-hero__video-controls { position: absolute; right: 24px; bottom: 24px; z-index: 2; }
.full-page-hero__video-btn {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(var(--on-dark-rgb), .5);
  background: rgba(var(--tint-rgb), .45);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.full-page-hero__video-btn svg { width: 18px; height: 18px; }
.full-page-hero__video-btn .icon-play { display: none; }
.full-page-hero__video-btn.paused .icon-pause { display: none; }
.full-page-hero__video-btn.paused .icon-play { display: block; }

/* The still behind a video, so the video paints over it rather than under. */
.full-page-hero__image--fallback { z-index: 0; }

@media (max-width: 40em) {
  .full-page-hero__countdown-block { min-width: 3.6rem; padding: .55rem .45rem; }
  .full-page-hero__countdown-number,
  .full-page-hero__countdown-separator { font-size: 1.875rem; }
}
/* governor_minutes block. Each committee is a condensed card in a responsive
   grid — title, rule, then its dated minutes links — rather than full-width
   rows. No literal colour, every value a token. */

.row-governor-minutes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.2rem;
  align-items: start;
}
.governor-minutes-block {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 1.2rem 1.3rem;
}
.governor-minutes-block h4 {
  font-size: 1.2rem;
  color: var(--text-heading);
  margin: 0 0 .75rem;
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--line);
}
.governor-minutes-block ul {
  list-style: disc;
  margin: 0;
  padding-left: 1.1rem;
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.governor-minutes-block li { color: var(--link); font-size: var(--fs-min); line-height: 1.35; }
.governor-minutes-block a { color: var(--link); font-weight: 600; }
.governor-minutes-block a:hover { text-decoration: underline; }
/* hero_unit block (Phase 3 Stage 4).
   Inherits its styling from css/hero-page.css (.hero-media). The block markup already emits those
   shared classes, so it carries no block-specific CSS. */
/* icon_list block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   icon list grid */

.icon-list { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(4, 1fr); }
/* The `layout` field emits icon-list--{horizontal|vertical|2-col} and nothing
   consumed it, so every layout painted the 4-up default above.
   `--horizontal` IS that default, so it deliberately gets no rule of its own.
   The other two are extracted from sites/dc/dc-child/style.css L11713-11720. */
.icon-list--vertical { grid-template-columns: 1fr; max-width: 600px; }
.icon-list--2-col { grid-template-columns: repeat(2, 1fr); }
.icon-list__item { display: flex; flex-direction: column; gap: .7rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem; }
.icon-list__icon { color: var(--em-color); display: flex; }
.icon-list__heading { font-size: 1.4375rem; margin-bottom: .4rem; }
.icon-list__text { font-size: var(--fs-min); color: var(--muted); }
.icon-list__title { margin-bottom: .5rem; }
.icon-list__intro { margin-bottom: 1.6rem; }
@media (max-width: 64em) { .icon-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .icon-list, .icon-list--2-col { grid-template-columns: 1fr; } }
/*
 * Block: image_carousel
 * Source: prototypes/kitchen-sink-dncg.html  .car / .gal image tiles.
 * Depends on: components/slider.css (the .dncg-carousel engine + controls).
 *
 * The block reuses .carousel-slider as its container namespace but is a plain
 * image gallery (.carousel-images), not a content hero - it opts out of the
 * hero's dark slide background and white mobile text (handled in slider.css via
 * :not(.carousel-images)). These are the tile + gradient-caption deltas per
 * display_style .carousel-images--{2-image|3-image}. Tokens only.
 * (Full-image mode retired — too large; legacy values fall back to 3-image.)
 */

/* Leave room below the images for the dots capsule (engine positions it at the
   container's bottom edge). */
.carousel-images .carousel-slider-container {
  padding-bottom: 3rem;
}

.carousel-images .images-slide {
  position: relative;
  margin: 0;
  width: 100%;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--navy);
}

.carousel-images .images-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Multi-image tiles: uniform 4:3 crop so a mixed row reads as a set. */
.carousel-images--2-image .images-slide,
.carousel-images--3-image .images-slide {
  aspect-ratio: 4 / 3;
}
@media print, screen and (max-width: 47.9375em) {
  /* Engine drops to 1-up below 768px; let the single tile size naturally. */
  .carousel-images--2-image .images-slide,
  .carousel-images--3-image .images-slide {
    aspect-ratio: auto;
  }
  .carousel-images--2-image .images-slide img,
  .carousel-images--3-image .images-slide img {
    height: auto;
  }
}

/* Caption: gradient overlay on the image (prototype .car__item figcaption). */
.carousel-images .carousel-images-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: 0;
  padding: 1.6rem 1.1rem 0.9rem;
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--white);
  background: linear-gradient(
    180deg,
    rgba(var(--surface-dark-alt-rgb), 0),
    rgba(var(--surface-dark-alt-rgb), 0.9)
  );
}
/* image_gallery block. Grid/masonry + lightbox.
   The block emits `.images .images-{4grid|5grid|6grid|masonry}
   .images-width-{standard|full|breakout}`. The old CSS only styled the
   never-emitted `.images-grid`, so every gallery fell back to full-width stacked
   images. No literal colour, every value a token. */

.images { display: grid; gap: .7rem; }
.images-4grid { grid-template-columns: repeat(4, 1fr); }
.images-5grid { grid-template-columns: repeat(5, 1fr); }
.images-6grid { grid-template-columns: repeat(6, 1fr); }

/* Masonry: multi-column flow so portrait/landscape shots keep natural heights. */
.images-masonry { display: block; column-count: 4; column-gap: .7rem; }
.images-masonry .lightbox { aspect-ratio: auto; margin-bottom: .7rem; break-inside: avoid; }
.images-masonry .lightbox img { height: auto; }

.image-gallery .lightbox { position: relative; display: flex; align-items: center; justify-content: center; aspect-ratio: 3 / 2; border-radius: var(--radius-sm); overflow: hidden; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); font-family: var(--font-mono); color: var(--ph-ink); text-decoration: none; }
.image-gallery .lightbox img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Zoom affordance — a centred magnifier badge that fades in on hover/focus.
   (The <svg> ships without width/height, so it MUST be sized here.) */
.image-gallery__zoom { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(var(--navy-deep-rgb), .5); color: var(--white); opacity: 0; transition: opacity var(--transition); pointer-events: none; }
.image-gallery .lightbox:hover .image-gallery__zoom,
.image-gallery .lightbox:focus-visible .image-gallery__zoom { opacity: 1; }
.image-gallery__zoom svg { width: 30px; height: 30px; }

@media (max-width: 64em) {
  .images-4grid, .images-5grid, .images-6grid { grid-template-columns: repeat(3, 1fr); }
  .images-masonry { column-count: 3; }
}
@media (max-width: 40em) {
  .images-4grid, .images-5grid, .images-6grid { grid-template-columns: repeat(2, 1fr); }
  .images-masonry { column-count: 2; }
}
/* impact_bar block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   restyled onto .impact-bar / __inner / __text / colour modifiers */

.impact-bar { border-radius: var(--radius-md); }
.impact-bar__inner { display: flex; align-items: center; gap: 1rem; padding: 1.2rem 1.6rem; text-align: left; }
.impact-bar__icon { flex: 0 0 auto; color: var(--white); display: flex; }
.impact-bar__text { font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; line-height: 1.25; color: var(--white); max-width: none; }
.impact-bar__text em { font-style: var(--em-style); color: var(--white); text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: .15em; }
.impact-bar--blue { background: var(--surface-blue); }
.impact-bar--navy { background: var(--surface-dark-alt); }
.impact-bar--green { background: var(--aud-employers-text); }
.impact-bar--magenta { background: var(--surface-brand); }
@media (max-width: 600px) { .impact-bar--has-icon .impact-bar__inner { flex-direction: column; text-align: center; } }
/* levels_ladder block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   the qualification levels ladder */

.levels-ladder__ladder { display: flex; flex-direction: column-reverse; }
.levels-ladder__rung { display: flex; gap: 1.4rem; align-items: flex-start; border-top: 1px solid var(--line); padding-block: 1.2rem; }
/* The rung carries its step of the brand-primary ramp as --c (set inline in
   levels_ladder.php). Nothing consumed --c before, so every badge painted the
   same flat --light and the ladder's colour coding conveyed nothing. */
.levels-ladder__level { flex: 0 0 92px; text-align: center; background: var(--c, var(--light)); border-radius: var(--radius-sm); padding: .7rem .5rem; }
/* Full-strength on-dark, NOT an alpha tint. The deep rungs are mid-tone brand
   fills sized to carry white at ~4.5:1, so they have no headroom and any alpha
   below 1 drops the label under: measured 4.01 (ucdon), 3.95 (ucnl) and 4.09
   (hesta) at .85. This is the same correction bridge.css already made when it
   retired the white tint on coloured grounds (kitchen-sink-visual-audit §3.1b),
   and it clears one of the eight blocks listed in §4.3. */
.levels-ladder__level--deep .levels-ladder__level-label { color: var(--text-on-dark); }
.levels-ladder__level--deep .levels-ladder__level-number { color: var(--text-on-dark); }
.levels-ladder__level--crown { background: var(--surface-dark); }
.levels-ladder__level--crown .levels-ladder__level-number { color: var(--accent-on-dark); }
.levels-ladder__level-label { display: block; font-size: var(--fs-meta); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.levels-ladder__level-number { display: block; font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--text-heading); }
.levels-ladder__body { flex: 1 1 auto; }
.levels-ladder__meaning { font-size: 1.5625rem; margin-bottom: .6rem; }
.levels-ladder__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.levels-ladder__chip { font-size: var(--fs-min); font-weight: 700; color: var(--navy); background: var(--light); padding: .45rem 1rem; border-radius: var(--radius-pill); text-decoration: none; }
.levels-ladder__chip:hover { background: var(--navy); color: var(--white); }
.levels-ladder__flex-note { display: flex; gap: .75rem; align-items: flex-start; border-top: 1px solid var(--line); padding-top: 1.2rem; }
.levels-ladder__flex-icon { flex: 0 0 auto; color: var(--em-color); font-size: 1.4375rem; }
.levels-ladder__flex-text { font-size: var(--fs-min); color: var(--muted); }
/* links block (Phase 3 Stage 4).
   A grid of related-link cards with an optional text search and category
   filters. The block emits the .sortable-links-* vocabulary, so its styling
   lives here (moved out of downloads.css, which does not use these classes).
   No literal colour, every value a token. */

.sortable-links-controls { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.3rem; }
.sortable-links-search { flex: 1 1 280px; }
.sortable-links-search-input {
  width: 100%; font-size: var(--fs-min); padding: .7rem 1rem;
  /* white field on a white section: an empty input has no text to identify it,
     so the border carries the 3:1 interactive weight (WCAG 1.4.11) */
  border: 2px solid var(--control-border); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
}
.sortable-links-search-input:focus { border-color: var(--link); }
.sortable-links-filters { display: flex; gap: .6rem; flex-wrap: wrap; }
.sortable-links-filter {
  font-size: var(--fs-min); font-weight: 700; padding: .5rem 1.1rem;
  /* unpressed filter is a white pill on a white section; the border is the only
     thing marking its bounds, so it takes the 3:1 interactive weight */
  border: 1px solid var(--control-border); border-radius: var(--radius-pill);
  background: var(--white); color: var(--text-heading); cursor: pointer;
  transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.sortable-links-filter:hover { border-color: var(--accent); }
.sortable-links-filter[aria-pressed="true"] { background: var(--navy); color: var(--white); border-color: var(--navy); }
.sortable-links-area { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.sortable-links-card { display: flex; flex-direction: column; gap: .3rem; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.2rem 1.3rem; text-decoration: none; }
/* The filter JS toggles the [hidden] attribute; display:flex above would defeat
   its UA display:none, so re-assert it. This is why filtering appeared dead. */
.sortable-links-card[hidden] { display: none; }
.sortable-links-card:hover { border-left-width: var(--card-edge-hover); }
.sortable-links-card-featured { border-left-color: var(--aud-students); }
.sortable-links-card__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.sortable-links-card__note { font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 64em) { .sortable-links-area { grid-template-columns: 1fr; } }
/* logo_bar block. Partner / funding logo bar.
   Ported from design-export/base.css; no literal colour, every value a token.
   The block emits `.logos-{number_per_row}`; only -4 was defined, so any other
   count (the seed uses 5) fell back to a single stacked column. */

/* SCOPED to the footer strip, which is the only place this was ever meant to
   apply. `.logo-bar` is used twice: as this pagebuilder block, and as the
   front-page partner strip inside .site-footer (parts/repeats/footer.php).
   The bare selector hit both.

   On the BLOCK it was dead weight — the section also carries `.pad`, and
   bridge.css's `.content-area.pad` beat it on specificity. Deleting that
   compound rule would have handed the block 2rem instead of its chosen padding,
   so the selector is narrowed rather than the compound rule kept. The block now
   takes its spacing from `.pad` like every other block.

   In the FOOTER nothing changes: css/footer.css sets `.logo-bar { padding-block:
   2.6rem }` at (0,1,0) and this is (0,2,0), so 2rem still wins there exactly as
   it did before. */
.site-footer .logo-bar { padding-block: 2rem; }
.logo-bar__header { text-align: center; margin-bottom: 1.6rem; }
.logo-bar__title { margin: 0; }

.content-area.logo-bar .logos { display: grid; gap: 1.4rem; align-items: center; list-style: none; margin: 0; padding: 0; }
.content-area.logo-bar .logos-2 { grid-template-columns: repeat(2, 1fr); }
.content-area.logo-bar .logos-3 { grid-template-columns: repeat(3, 1fr); }
.content-area.logo-bar .logos-4 { grid-template-columns: repeat(4, 1fr); }
.content-area.logo-bar .logos-5 { grid-template-columns: repeat(5, 1fr); }
.content-area.logo-bar .logos-6 { grid-template-columns: repeat(6, 1fr); }
/* The field offers 3 to 8 per row. 7 and 8 were never mapped, so they fell back
   to the base .logos grid, which sets no columns, and stacked. */
.content-area.logo-bar .logos-7 { grid-template-columns: repeat(7, 1fr); }
.content-area.logo-bar .logos-8 { grid-template-columns: repeat(8, 1fr); }
.content-area.logo-bar .logos li { height: 56px; min-width: 120px; border: 1px solid var(--line); border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; background: var(--white); font-family: var(--font-mono); color: var(--ph-ink); text-align: center; }
.content-area.logo-bar .logos li a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.content-area.logo-bar .logos li img { display: block; width: auto; max-height: 100%; }

@media (max-width: 64em) {
  .content-area.logo-bar .logos-5, .content-area.logo-bar .logos-6,
  .content-area.logo-bar .logos-7, .content-area.logo-bar .logos-8 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 40em) {
  .content-area.logo-bar .logos-3, .content-area.logo-bar .logos-4, .content-area.logo-bar .logos-5, .content-area.logo-bar .logos-6,
  .content-area.logo-bar .logos-7, .content-area.logo-bar .logos-8 { grid-template-columns: repeat(2, 1fr); }
}

/* Credentials-bar mode: an optional lead credential (badge + text) beside a
   labelled row of awarding-body logos, in one contained band. Reproduces the HE
   TEF / "Degrees awarded by" strip without a bespoke template. */
.logo-bar__credentials { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; }
.logo-bar__credential {
  display: flex; align-items: center; gap: 1.1rem; flex: 0 0 auto;
  padding-right: 2rem; border-right: 1px solid var(--line);
}
.logo-bar__credential-badge img { height: 52px; width: auto; display: block; }
.logo-bar__credential-text { display: flex; flex-direction: column; }
.logo-bar__credential-heading {
  font-family: var(--font-display); font-weight: 700; font-size: 1.1rem;
  line-height: 1.2; color: var(--text-heading);
}
.logo-bar__credential-sub { font-size: 1.1rem; line-height: 1.4; color: var(--muted); }

.logo-bar__awards { display: flex; align-items: center; gap: 1.25rem; flex: 1 1 auto; flex-wrap: wrap; }
.logo-bar__awards-label { font-weight: 700; font-size: 1.1rem; color: var(--muted); white-space: nowrap; }
.logo-bar__awards-logos { display: flex; align-items: center; gap: 2rem; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.logo-bar__awards-logos li { display: flex; align-items: center; }
.logo-bar__awards-logos img { height: 36px; width: auto; display: block; }
.logo-bar__awards-logos a { display: block; opacity: .7; transition: opacity var(--transition); }
.logo-bar__awards-logos a:hover { opacity: 1; }

@media (max-width: 48em) {
  .logo-bar__credentials { gap: 1.25rem; }
  .logo-bar__credential {
    width: 100%; padding-right: 0; border-right: 0;
    padding-bottom: 1rem; border-bottom: 1px solid var(--line);
  }
}
/*
 * multiple_course_lists — written from the design (kitchen-sink .tabs + the
 * .courses rows shown inside each tab). This block only chooses a container
 * (tabs / accordion / columns / rows) and drops the shared course list inside.
 *
 * Ownership, to avoid redefining anything twice:
 *   - the inner course lists (ul.course-cards*) are owned by courses.css
 *     (rows for list style, card grid for 3grid/4grid). Nothing here.
 *   - the tabs chrome (.tabbed / .tabbed-menu) is owned by tabbed_content.css.
 *   - the accordion chrome (.accordion*) is owned by accordion.css.
 *   - .content-area / .pad / .bg-* is owned by bridge.css.
 * This file is the delta for the two layouts that are unique to this block:
 * the side-by-side Columns and Rows arrangements of several lists.
 * Colour is always a token.
 */

.multiple-course-lists-columns,
.multiple-course-lists-columns-rows {
  display: grid;
  gap: 2.6rem var(--gap-grid-lg);
  grid-template-columns: 1fr;
}

@media print, screen and (min-width: 48em) {
  .multiple-course-lists-columns,
  .multiple-course-lists-columns-rows {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* each list keeps its own heading tight to the list it introduces */
.multiple-course-lists-columns > .columns > h3,
.multiple-course-lists-columns-rows > .columns > h3 {
  margin-bottom: 0.8rem;
}
/* =============================================================================
   news.css — image news cards on the shared .card shell (Stage 4)
   Rebuilt from prototypes/kitchen-sink-dncg.html (.news). The .card shell owns
   the border, radius, 5px accent foot, hover lift, 16/10 image, card-section
   padding, title link (navy -> blue) and byline. This file adds the grid
   layouts, the "featured" lead (one big post left, the rest stacked right) and
   the uppercase date label. Colour is always a token.
   ========================================================================== */

/* --- Plain grids ------------------------------------------------------- */
.news-cards-3grid { grid-template-columns: repeat(3, 1fr); }
.news-cards-4grid { grid-template-columns: repeat(4, 1fr); }

/* --- Feature layouts: one big post left, the rest stacked right ---------
   The first card spans the left column across as many rows as there are
   remaining cards; those flow down the right column. */
.news-cards-3grid-feature,
.news-cards-4grid-feature,
.news-cards-5grid-feature {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--gap-grid);
  align-items: stretch;
}
.news-cards-3grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 2; }
.news-cards-4grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 3; }
.news-cards-5grid-feature > .card:first-child { grid-column: 1; grid-row: 1 / span 4; }
/* The feature image fills its column (the column is now short — see below — so
   the image runs as a proper lead rather than a capped strip). */
.news-cards-3grid-feature > .card:first-child > img,
.news-cards-4grid-feature > .card:first-child > img,
.news-cards-5grid-feature > .card:first-child > img {
  aspect-ratio: auto;
  flex: 1 1 auto;
  width: 100%;
  min-height: 220px;
  object-fit: cover;
}
/* Secondary posts are horizontal mini-cards: a square thumbnail cropped on the
   LEFT, the title + date stacked to its right and vertically centred. Four short
   rows instead of four tall stacked cards roughly halves the block height, and
   the feature card — spanning every row — follows the shorter right column. */
.news-cards-3grid-feature > .card:not(:first-child),
.news-cards-4grid-feature > .card:not(:first-child),
.news-cards-5grid-feature > .card:not(:first-child) {
  flex-direction: row;
  align-items: center;
}
.news-cards-3grid-feature > .card:not(:first-child) > img,
.news-cards-4grid-feature > .card:not(:first-child) > img,
.news-cards-5grid-feature > .card:not(:first-child) > img {
  flex: 0 0 auto;
  width: 120px;
  height: 120px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.news-cards-3grid-feature > .card:not(:first-child) > .card-section,
.news-cards-4grid-feature > .card:not(:first-child) > .card-section,
.news-cards-5grid-feature > .card:not(:first-child) > .card-section {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: .35rem;
}

/* --- Date byline reads as an uppercase label --------------------------- */
.news .card__by {
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
}

/* Breathing space above the "See more news" CTA — it otherwise butts straight
   against the cards grid. */
.news .cta { margin-top: 2.25rem; }

/* --- Responsive --------------------------------------------------------- */
@media (max-width: 860px) {
  .news-cards-3grid,
  .news-cards-4grid { grid-template-columns: repeat(2, 1fr); }
  .news-cards-3grid-feature,
  .news-cards-4grid-feature,
  .news-cards-5grid-feature { grid-template-columns: 1fr 1fr; }
  .news-cards-3grid-feature > .card:first-child,
  .news-cards-4grid-feature > .card:first-child,
  .news-cards-5grid-feature > .card:first-child { grid-column: 1 / -1; grid-row: auto; }
  .news-cards-3grid-feature > .card:first-child > img,
  .news-cards-4grid-feature > .card:first-child > img,
  .news-cards-5grid-feature > .card:first-child > img { aspect-ratio: 16 / 10; flex: none; min-height: 0; }
}
@media (max-width: 640px) {
  .news-cards-3grid,
  .news-cards-4grid,
  .news-cards-3grid-feature,
  .news-cards-4grid-feature,
  .news-cards-5grid-feature { grid-template-columns: 1fr; }
}
/* newsletter_signup block (Phase 3 Stage 4).
   Layout + form styling come from css/components/forms.css (.newsletter-*).
   .newsletter-signup always sits on --surface-dark (set there), so its heading,
   eyebrow and copy must read as on-dark: the base eyebrow/em colour is
   --em-color (orange on DC) and the heading would default to dark ink — both
   fail on navy. Lift them here. Colour is always a token. */
.newsletter-signup .eyebrow { color: var(--yellow, var(--accent-on-dark)); }
.newsletter-signup h2 { color: var(--white); }
.newsletter-signup h2 :is(em, strong) { color: var(--yellow, var(--accent-on-dark)); }
.newsletter-signup :is(p, li) { color: rgba(var(--on-dark-rgb), .84); }
.newsletter-signup a:not(.btn) { color: var(--accent-on-dark); }
/* open_event_rsvp block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   open event RSVP band */

.open-event-rsvp--bg-navy-gradient { background: linear-gradient(135deg, var(--surface-dark) 0%, var(--surface-dark-alt) 100%); border-radius: var(--radius-lg); padding: 2.2rem 2.3rem; }
.open-event-rsvp__card { max-width: 82ch; }
.open-event-rsvp__title { color: var(--white); font-size: 2.5rem; line-height: 1.02; margin-bottom: .6rem; }
.open-event-rsvp__intro { font-size: 1.3125rem; color: rgba(var(--on-dark-rgb), .86); margin-bottom: 1.3rem; }
.open-event-rsvp__form { display: flex; gap: .625rem; flex-wrap: wrap; margin-bottom: 1rem; }
.open-event-rsvp__form input { flex: 1 1 200px; min-width: 0; font-size: var(--fs-min); padding: .875rem 1rem; border: 2px solid transparent; border-radius: var(--radius-sm); background: var(--white); color: var(--ink); }
.open-event-rsvp__notice { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .75); }

/* The block sits on a navy GRADIENT, not a .bg-navy class, so the global
   dark-section link colour never reaches it — the footer link rendered dark on
   navy. Light it here. */
.open-event-rsvp__header { margin-bottom: 1rem; }
.open-event-rsvp__footer { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .75); margin-top: .9rem; }
.open-event-rsvp__footer a,
.open-event-rsvp__notice a { color: var(--accent-on-dark); }

/* Eyebrow + title emphasis on the navy gradient: base --em-color / --display-em
   is orange on DC and fails here. Lift to the bright accent (yellow on DC, else
   --accent-on-dark). */
.open-event-rsvp--bg-navy-gradient .eyebrow { color: var(--yellow, var(--accent-on-dark)); }
.open-event-rsvp__title :is(em, strong) { color: var(--yellow, var(--accent-on-dark)); }
/* pathway_routes block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   tabbed pathway routes */

.pathway-routes__tabs { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.4rem; }
.pathway-routes__tab { display: flex; flex-direction: column; gap: .2rem; text-align: left; background: var(--white); border: 1px solid var(--control-border); border-radius: var(--radius-sm); padding: .9rem 1.2rem; min-width: 210px; }
.pathway-routes__tab[aria-selected="true"] { background: var(--surface-dark); border-color: var(--surface-dark); }
.pathway-routes__tab-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--text-heading); }
.pathway-routes__tab-sublabel { font-size: var(--fs-min); color: var(--muted); }
.pathway-routes__tab[aria-selected="true"] .pathway-routes__tab-label { color: var(--white); }
.pathway-routes__tab[aria-selected="true"] .pathway-routes__tab-sublabel { color: rgba(var(--on-dark-rgb), .75); }
.pathway-routes__panel { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.8rem 1.9rem; }

/* Header + "who is this for" row. The theme adds a person icon + text and a
   head/intro block the design's thinner .pathway-routes__who did not cover. */
.pathway-routes__head { margin-bottom: 1.4rem; }
.pathway-routes__intro { color: var(--muted); max-width: 62ch; }
.pathway-routes__who { display: flex; align-items: center; gap: .6rem; margin-bottom: 1.2rem; }
.pathway-routes__who-icon { flex: 0 0 auto; display: inline-flex; color: var(--accent); }
.pathway-routes__who-icon svg { width: 22px; height: 22px; }
.pathway-routes__who-text { margin: 0; font-size: var(--fs-min); color: var(--ink); }
.pathway-routes__who-text strong { color: var(--em-color); }

.pathway-routes__flow { display: flex; align-items: stretch; flex-wrap: wrap; gap: 1.2rem 1.7rem; }
/* The step carries its level colour inline as --c (pathway_routes.php maps l3-l7
   onto the brand ramp). Nothing consumed it, so every step drew the same
   --accent edge and the level coding conveyed nothing. Same mechanism as
   .levels-ladder__level. Falls back to --accent when --c is absent. */
.pathway-routes__step { flex: 1 1 200px; border-top: var(--card-edge) solid var(--c, var(--accent)); padding-top: 1.1rem; }
.pathway-routes__step-level { font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--em-color); margin-right: .45rem; }
.pathway-routes__step-label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; line-height: 1.1; color: var(--text-heading); }
.pathway-routes__step-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; line-height: 1.1; color: var(--text-heading); margin-bottom: .35rem; }
.pathway-routes__step-text { font-size: var(--fs-min); color: var(--muted); }

/* Connector arrow between steps in the flow. */
.pathway-routes__arrow { flex: 0 0 auto; display: flex; align-items: center; align-self: center; color: var(--muted); }
.pathway-routes__arrow svg { width: 22px; height: 22px; }
@media (max-width: 48em) { .pathway-routes__arrow { transform: rotate(90deg); } }
/* people block.
   The card face, the list row and the name/role/summary treatment all come from
   css/components/card.css (.people-cards, .people-cards-list). This file is the
   delta that shared sheet cannot own: the display_style column counts.

   Before this, only `list` was mapped. `tiles`, `tiles-reduced`, `list-image`
   and `list-full` fell through to the base .row-cards grid, which sets no
   columns, so all four rendered as one stacked column.

   tiles-reduced extracted from sites/dc/dc-child/style.css L8527-8538 (2-up from
   40em, 5-up from 64em), re-expressed in this theme's max-width convention.
   FLAG: `tiles` had no rule in any source theme and none in design-export.
   Three across is a reading of the field label ("Tiles", the fuller variant of
   "Reduced Tiles" at five). Revisit if that is wrong.
   No literal colour, every value a token. */

.people-cards-tiles { grid-template-columns: repeat(3, 1fr); }
.people-cards-tiles-reduced { grid-template-columns: repeat(5, 1fr); }

/* The two list variants are rows, like .people-cards-list. The row treatment
   itself lives in components/card.css alongside it; this is only the column. */
.people-cards-list-image,
.people-cards-list-full { grid-template-columns: 100%; }

/* Image sizing. card.css sizes `.card-image`, but this block emits a BARE <img>
   (and an inline SVG placeholder) straight inside .card — no wrapper — so none
   of that applied. Unsized, the image became a greedy flex item on the list
   rows: it ballooned, stretched to the row height (cropping faces), and
   squeezed the name column so hard that names and roles wrapped one word per
   line. Size the real elements instead. */
.people-cards-list > .card > img,
.people-cards-list-image > .card > img,
.people-cards-list-full > .card > img,
.people-cards-list > .card > .person-photo-placeholder,
.people-cards-list-image > .card > .person-photo-placeholder,
.people-cards-list-full > .card > .person-photo-placeholder {
  /* !important is required, not lazy: the Smush plugin injects an inline
     `.lazyload { width: var(--smush-placeholder-width) !important }` (with a
     per-image --smush-placeholder-width) that otherwise pins every photo to its
     natural width and beats even a higher-specificity rule. */
  flex: 0 0 124px;
  width: 124px !important; height: 124px !important;
  object-fit: cover;
  object-position: center top;   /* keep heads in frame */
  align-self: flex-start;
  margin: 1.2rem 0 1.2rem 1.2rem;
  border-radius: var(--radius-sm);
}
/* Give the name column a sane share so it stops wrapping a word per line. */
.people-cards-list > .card .card-name,
.people-cards-list-image > .card .card-name,
.people-cards-list-full > .card .card-name { flex: 0 1 15rem; min-width: 0; }
.people-cards-list > .card .card-section,
.people-cards-list-image > .card .card-section,
.people-cards-list-full > .card .card-section { flex: 1 1 0; min-width: 0; }

/* Tile variants: square, full-bleed across the card. */
.people-cards-tiles > .card > img,
.people-cards-tiles-reduced > .card > img {
  display: block; width: 100%; aspect-ratio: 1; object-fit: cover; object-position: center top;
}

/* The profile link is a supporting action here, not a hero CTA. */
.people-cards .card-info .cta,
.people-cards .card-info .btn { font-size: var(--fs-min); padding: .5rem 1rem; }

@media (max-width: 64em) {
  .people-cards-tiles,
  .people-cards-tiles-reduced { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 40em) {
  .people-cards-list > .card,
  .people-cards-list-image > .card,
  .people-cards-list-full > .card { flex-direction: column; }
  .people-cards-list > .card > img,
  .people-cards-list-image > .card > img,
  .people-cards-list-full > .card > img { margin: 1.2rem 0 0 1.2rem; }
}
@media (max-width: 40em) {
  .people-cards-tiles,
  .people-cards-tiles-reduced { grid-template-columns: 1fr; }
}
/* process_steps block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   numbered process steps with connectors */

/* Breathing room so the steps aren't smashed against the intro above or the
   CTA / next block below. */
.process-steps__grid { display: grid; gap: 0; margin-block: 3rem; }
.process-steps--count-3 .process-steps__grid { grid-template-columns: repeat(3, 1fr); }
.process-steps--count-4 .process-steps__grid { grid-template-columns: repeat(4, 1fr); }
.process-steps--count-5 .process-steps__grid { grid-template-columns: repeat(5, 1fr); }
.process-steps__step { position: relative; padding-right: 1.4rem; }
.process-steps__indicator { display: flex; align-items: center; margin-bottom: 1rem; }
.process-steps__number { flex: 0 0 auto; width: 52px; height: 52px; border-radius: 50%; background: var(--aud-students); color: var(--white); font-family: var(--font-display); font-weight: 800; font-size: 1.4375rem; display: flex; align-items: center; justify-content: center; }
.process-steps--has-connector .process-steps__connector { background: var(--line); }
/* The `dark` background option now resolves to a real .bg-dark-blue ground, so
   the connector's light hairline has to invert or it disappears. */
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .process-steps--has-connector .process-steps__connector,
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey).process-steps--has-connector .process-steps__connector { background: rgba(var(--on-dark-rgb), .28); }
.process-steps__step:last-child .process-steps__connector { display: none; }

/* Horizontal (default): number + a connector line reaching toward the next
   step across the top, with the copy beneath. */
/* Top-align the step cells so every badge sits on the same line. Without this
   the grid stretches all cells to the tallest step, then each step's auto rows
   grow to fill, and align-items:center drops the shorter steps' badges toward
   centre — so a longer step nudges its neighbours' numbers out of line. */
.process-steps--horizontal .process-steps__grid { align-items: start; }
.process-steps--horizontal .process-steps__step { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: .7rem 1rem; }
.process-steps--horizontal .process-steps__indicator { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.process-steps--horizontal .process-steps__connector { grid-column: 2; grid-row: 1; width: 100%; height: 3px; }
.process-steps--horizontal .process-steps__content { grid-column: 1 / -1; grid-row: 2; }

/* Vertical: a left rail — number on top, connector running down it — with the
   copy to the right. */
.process-steps--vertical .process-steps__grid { grid-template-columns: 1fr; gap: 0; }
.process-steps--vertical .process-steps__step { display: grid; grid-template-columns: auto 1fr; column-gap: 1.3rem; padding: 0 0 1.8rem; }
.process-steps--vertical .process-steps__step:last-child { padding-bottom: 0; }
.process-steps--vertical .process-steps__indicator { grid-column: 1; grid-row: 1; margin-bottom: 0; }
.process-steps--vertical .process-steps__connector { grid-column: 1; grid-row: 2; width: 3px; height: 100%; min-height: 1.6rem; justify-self: center; margin: .4rem 0; }
.process-steps--vertical .process-steps__content { grid-column: 2; grid-row: 1 / span 2; }
.process-steps__step-title { font-size: 1.4375rem; margin-bottom: .45rem; }
/* Renamed from .process-steps__step-text, which nothing emitted. The template
   has always printed .process-steps__description, so the step body copy was
   unstyled. Selector follows the markup, not the other way round. */
.process-steps__description { font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 64em) { .process-steps__grid { grid-template-columns: 1fr !important; gap: 1.2rem; } .process-steps__connector { display: none; } }
/* q_and_a block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   Q&A short-answer grid */

.qa-grid-intro { margin-bottom: 1.5rem; color: var(--muted); max-width: 62ch; }
.qa-grid { display: grid; gap: var(--gap-grid); grid-template-columns: repeat(3, 1fr); }
.qa-grid--1 { grid-template-columns: 1fr; }
.qa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.qa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.qa-card { background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.6rem 1.7rem; }
.qa-card-question { font-size: 1.4375rem; line-height: 1.15; margin-bottom: .6rem; }
.qa-card-answer { font-size: var(--fs-min); color: var(--muted); }
.qa-card-answer p { margin: 0; }
@media (max-width: 64em) { .qa-grid, .qa-grid--2, .qa-grid--3 { grid-template-columns: 1fr; } }
/* qualification_cards block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   qualification cards. (.tabbed / .tabbed-menu styling relocated to
   tabbed_content.css so each block CSS is self-contained for per-page enqueue.) */

.qualification-cards__filters { display: flex; gap: .6rem; flex-wrap: wrap; margin-bottom: 1.3rem; border-bottom: 1px solid var(--box-border); }
.qualification-cards__filter {
  border-bottom: 4px solid transparent; padding: .8rem 1.1rem;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--muted);
}
/* JS sets aria-pressed on the level filter (it is a filter, not a tab). */
.qualification-cards__filter[aria-pressed="true"] { color: var(--em-color); border-bottom-color: var(--em-color); }
/* NB: .tabbed is NOT a grid — it is the tab container (menu + stacked panels).
   It was previously lumped into this 3-col grid, which laid the panels out
   side-by-side as cards and defeated the tab show/hide. */
.qualification-cards__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-grid); }
.qualification-cards__card { display: flex; flex-direction: column; gap: .5rem; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.5rem 1.6rem; }
/* The level filter (qualification_cards.js) hides a card with the `hidden`
   attribute. `display: flex` above overrides the UA `[hidden] { display: none }`,
   so without this the filter set the attribute but nothing disappeared. More
   specific than the rule above, so it wins without !important. */
.qualification-cards__card[hidden] { display: none; }
/* Same fill/label pairing fix as .comparison-card__badge: --accent-2 is a bright
   accent with no defined label partner, so white on nlc's teal measured 2.15:1.
   --btn-accent-bg / --btn-accent-text are defined per brand as a working pair. */
.qualification-cards__badge { align-self: flex-start; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .3rem .8rem; border-radius: var(--radius-pill); }
.qualification-cards__name { font-size: 1.4375rem; }
.qualification-cards__facts { display: flex; flex-wrap: wrap; gap: .4rem; }
.qualification-cards__fact { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); border: 1px solid var(--box-border); padding: .2rem .7rem; border-radius: var(--radius-pill); }
.qualification-cards__desc { font-size: var(--fs-min); color: var(--muted); }
.qualification-cards__link { margin-top: auto; padding-top: .8rem; font-size: var(--fs-min); font-weight: 700; }
@media (max-width: 64em) { .qualification-cards__grid { grid-template-columns: 1fr; } }
/* quick_links block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   quick links button grid */

.quick-links--panel .quick-links { border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.7rem 1.8rem; }
.quick-links__title { margin-bottom: .4rem; }
.quick-links__intro { font-size: var(--fs-min); color: var(--muted); margin-bottom: 1.1rem; }
.quick-links__buttons { display: grid; gap: .7rem; grid-template-columns: repeat(4, 1fr); }
.quick-links__buttons--stacked { grid-template-columns: 1fr; }
.quick-links__btn { display: flex; align-items: center; gap: .75rem; border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: .95rem 1.1rem; text-decoration: none; background: var(--white); }
.quick-links__btn:hover { border-left-width: var(--card-edge-hover); }
.quick-links__btn-icon { flex: 0 0 auto; color: var(--em-color); display: flex; }
.quick-links__btn-text { font-family: var(--font-display); font-weight: 700; font-size: var(--fs-min); color: var(--text-heading); }
.quick-links__btn-sub { font-size: var(--fs-min); color: var(--muted); }
.quick-links__btn-external { margin-left: auto; font-size: var(--fs-min); color: var(--muted); }
@media (max-width: 64em) { .quick-links__buttons { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .quick-links__buttons { grid-template-columns: 1fr; } }
/*
 * restaurant_menus — no block-specific rules by design.
 *
 * The block reuses the events markup wholesale: its section is `.events`, its
 * container is `.row-cards.events-cards.events-cards-{style}`, and each item is
 * `<article class="card feature-card">` with `.card-section`, `.card-info` and
 * a `.card-date` carrying `time.event-card-date` / `time.event-card-time`.
 *
 * Every one of those selectors is already owned:
 *   - the events grid + date treatment  -> pagebuilder/events/events.css
 *   - the tile shell (border, accent foot, radius, HOVER LIFT), title,
 *     feature-link, card-info, image ratio -> css/components/card.css
 *
 * Redefining them here would be exactly the layered drift this consolidation
 * removes (hard rule 5). The menu therefore renders identically to events,
 * including the date-led treatment, with no delta.
 *
 * FLAG: this leaves the file rule-less. If restaurant menus ever need to
 * diverge from events (e.g. a service-time emphasis), that delta belongs here.
 */
/* search_bar block (Phase 3 Stage 4).
   Inherits its styling from css/header.css (.site-search / .search). The block markup already emits those
   shared classes, so it carries no block-specific CSS. */
/* search_hero block — the homepage typing-search hero (.hero-enhanced) + peek CTA.
   Moved here from css/templates/home.css when page-home.php was retired; the block
   CSS auto-enqueues wherever a Search Hero block renders. No literal colour. */

.hero-enhanced { position: relative; overflow: hidden; }
.hero-enhanced { display: block; background: var(--surface-dark-alt); }
/* Play/pause pulled to the top-right so the peek CTA that overlaps the hero's
   bottom edge can never cover it; always visible + clickable. */
.hero-enhanced > .controls { top: 20px; bottom: auto; right: 24px; z-index: 4; }
/* Media stack order: image (bottom, poster/fallback) -> video -> gradient (top).
   The image div is absolutely positioned and later in the DOM than the video, so
   it sits at -1 to stay under the footage; the in-flow video needs no z-index.
   The gradient carries z-index: 0, and the wrapper's own z-index: 0 keeps the
   stack in its own stacking context, below the hero content. */
.hero-enhanced .hero-background { z-index: 0; }
.hero-enhanced .hero-background > video { filter: grayscale(1) contrast(1.15) brightness(.55); }
/* The image is a background-image div, not an <img>, so the shared media-stack
   sizing and greyscale in hero-page.css (scoped to > img / > video) never reach
   it: unsized it collapses to 0 height and nothing renders. Same geometry and
   treatment as the video path. */
.hero-enhanced .hero-background > .image-overlay { position: absolute; inset: 0; z-index: -1; background-size: cover; background-position: center; filter: grayscale(1) contrast(1.15) brightness(.55); }
.hero-enhanced .hero-background::after { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(120% 80% at 15% 10%, rgba(var(--tint-rgb), .28) 0%, rgba(var(--tint-rgb), .93) 78%); }
/* Hero height = content + block padding. The content otherwise renders ~128px
   high in this stacking context, so the top padding carries that offset to keep
   the block visually centred with generous breathing space. */
.hero-content-wrapper { position: relative; width: 100%; padding-top: 15rem; padding-bottom: 5rem; }
/* The content block is a centred, page-width column — equal left/right margins
   (so the search underline is balanced) and vertically centred in the hero. */
/* Narrower than the full content width (~80%) and centred, so the hero title +
   search box don't stretch edge-to-edge on wide viewports. */
.hero-content { width: 100%; max-width: 1040px; margin-inline: auto; padding-inline: var(--page-gutter); }
.hero-title { color: var(--white); font-size: 4rem; line-height: .96; margin-bottom: 42px; }
/* Emphasis inside the hero headline sits on a dark, tinted photograph, but
   typography.css colours h1 em/strong with --em-color / --strong-color, which
   are calibrated for LIGHT grounds (dc's deep orange, nlc's magenta, the darker
   brand greens/blues). On this ground they read muddy. --accent-on-dark is the
   token each brand already calibrates for exactly this: teal on dc and nlc, the
   brighter blue on ucdon, the brighter greens on ucnl and hesta. */
.hero-title :is(strong, em) { color: var(--accent-on-dark); }
/* Subtitle / search intro, sitting between the title and the search box. The
   bottom margin clears the "Type here" tooltip (absolute, 46px above the form)
   so the two don't overlap. */
.hero-subtitle { color: var(--white); font-size: clamp(1.4rem, 2.4vw, 1.9rem); font-weight: 600; line-height: 1.25; max-width: 42ch; margin: -1rem 0 3.6rem; }
.hero-search-primary { position: relative; max-width: none; }
.hero-search-primary .search__input {
  width: 100%; background: transparent; border: 0;
  border-bottom: 4px solid var(--accent-on-dark); border-radius: 0;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 4rem; line-height: 1.14; letter-spacing: var(--display-track-hero);
  color: var(--accent-on-dark); padding: 0 168px 8px 0; caret-color: var(--accent-on-dark);
}
/* Search button — a clear affordance that this is a search area. Slightly faded
   until the search box gets focus (or the button is hovered/focused). */
.hero-search-primary__submit {
  position: absolute; right: 0; bottom: 16px;
  display: inline-flex; align-items: center; gap: .5rem;
  background: var(--btn-accent-bg); color: var(--btn-accent-text);
  font-weight: 700; font-size: var(--fs-min);
  padding: .85rem 1.7rem; border-radius: var(--radius-pill); border: 0; cursor: pointer;
  opacity: .5; transition: opacity var(--transition), transform var(--transition);
}
.hero-search-primary:focus-within .hero-search-primary__submit,
.hero-search-primary__submit:hover,
.hero-search-primary__submit:focus-visible { opacity: 1; }
.hero-search-primary__submit svg { flex: 0 0 auto; }
.hero-search-tooltip {
  position: absolute; top: -46px; left: 2px;
  /* Brands whose headline emphasis is now teal (dc, nlc) put their own
     colour back on the tooltip instead; the rest keep the accent chip. */
  background: var(--hero-tooltip-bg, var(--btn-accent-bg));
  color: var(--hero-tooltip-text, var(--btn-accent-text));
  font-size: var(--fs-min); font-weight: 700;
  padding: .5rem 1rem; border-radius: 8px;
  animation: hero-nudge 2.4s ease-in-out infinite;
}
.hero-search-tooltip::after { content: ""; position: absolute; left: 22px; bottom: -7px; width: 14px; height: 14px; background: var(--hero-tooltip-bg, var(--btn-accent-bg)); transform: rotate(45deg); }
.hero-search-ghost {
  position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap;
  font-family: var(--font-display); font-weight: var(--display-weight);
  font-size: 4rem; line-height: 1.14; letter-spacing: var(--display-track-hero);
  color: var(--accent-on-dark);
  transition: opacity 380ms cubic-bezier(.4, 0, .2, 1);
}
.hero-search-ghost.is-fading { opacity: 0; }
.hero-search-ghost__caret { display: inline-block; width: 6px; height: 56px; background: var(--accent-on-dark); vertical-align: -8px; margin-left: 6px; animation: hero-caret 1s step-end infinite; }
.hero-qualifiers { margin-top: 34px; display: flex; flex-wrap: wrap; gap: .875rem 2rem; align-items: baseline; }
.hero-qualifier { display: flex; align-items: baseline; gap: .75rem; border-bottom: 3px solid rgba(var(--on-dark-rgb), .45); padding-bottom: 6px; }
.hero-qualifier__label { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.875rem; letter-spacing: var(--display-track); color: var(--white); }
.hero-qualifier__count { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .7); font-variant-numeric: tabular-nums; }
.hero-qualifier[aria-pressed="true"] { border-bottom-color: var(--accent-on-dark); }
.hero-qualifier[aria-pressed="true"] .hero-qualifier__count { color: var(--accent-on-dark); }
.hero-results { margin-top: 28px; max-width: 900px; border-top: 1px solid rgba(var(--on-dark-rgb), .25); padding-top: 1.2rem; }
.hero-results[hidden] { display: none; }
.hero-results__head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: .8rem; }
.hero-results__head h2 { color: var(--white); font-size: 1.625rem; }
.hero-results li { display: flex; justify-content: space-between; gap: 1.25rem; }
.hero-results li + li { margin-top: .6rem; }
.hero-results a { font-family: var(--font-display); font-weight: 700; font-size: 1.3125rem; color: var(--white); text-decoration: none; }
.hero-results span { flex: 0 0 auto; font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .65); font-variant-numeric: tabular-nums; }
.hero-shortcuts { margin-top: 30px; display: flex; align-items: center; gap: .75rem; flex-wrap: wrap; font-size: var(--fs-min); }
.hero-shortcuts__lead { color: rgba(var(--on-dark-rgb), .8); font-size: 1.3rem; }
.hero-shortcuts__cta {
  display: inline-flex; align-items: center; gap: .4rem;
  color: var(--white); font-weight: 600; text-decoration: none;
  padding: .55rem 1.2rem;
  border: 1.5px solid rgba(var(--on-dark-rgb), .4);
  border-radius: var(--radius-pill);
  transition: background var(--transition), border-color var(--transition);
}
.hero-shortcuts__cta:hover { background: rgba(var(--on-dark-rgb), .12); border-color: var(--white); }

@keyframes hero-caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
@keyframes hero-nudge { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

@media (max-width: 64em) {
  .hero-title, .hero-search-primary .search__input, .hero-search-ghost { font-size: 2.75rem; }
  .hero-search-ghost__caret { height: 40px; }
}

/* -------------------------------------------------------- hero peek CTA ----
   A panel that overlaps the hero's bottom edge. Was unstyled, so the actions
   overlapped the body text; a proper split flex layout fixes it. */
.hero-peek-wrap { position: relative; z-index: 2; }
.hero-peek-wrap--overlap { margin-top: -3.5rem; }
.hero-peek { position: relative; border-radius: var(--radius-lg); padding: 2rem 2.4rem; box-shadow: var(--shadow-lg); color: var(--white); overflow: hidden; }
.hero-peek--split { display: flex; align-items: center; justify-content: space-between; gap: 2rem 2.6rem; flex-wrap: wrap; }
.hero-peek--navy { background: var(--surface-dark); }
.hero-peek--magenta, .hero-peek--red { background: var(--surface-brand); }
.hero-peek--teal, .hero-peek--blue { background: var(--surface-blue); }
.hero-peek__body { min-width: 0; flex: 1 1 460px; }
.hero-peek__eyebrow { font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-on-dark); margin: 0 0 .5rem; }
.hero-peek__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; line-height: 1.1; color: var(--white); margin: 0 0 .6rem; }
.hero-peek__text { font-size: var(--fs-min); line-height: 1.55; color: rgba(var(--on-dark-rgb), .88); margin: 0; max-width: 64ch; }
.hero-peek__actions { flex: 0 0 auto; display: flex; align-items: center; gap: 1rem 1.4rem; flex-wrap: wrap; }
.hero-peek__cta { display: inline-flex; align-items: center; gap: .5rem; background: var(--btn-accent-bg); color: var(--btn-accent-text); font-weight: 700; font-size: var(--fs-min); padding: .9rem 1.7rem; border-radius: var(--radius-pill); text-decoration: none; white-space: nowrap; }
.hero-peek__cta:hover { background: var(--lime-dark); }
.hero-peek__link { color: var(--white); font-weight: 600; font-size: var(--fs-min); text-decoration: underline; white-space: nowrap; }
.hero-peek__link:hover { color: var(--accent-on-dark); }
@media (max-width: 48em) { .hero-peek--split { flex-direction: column; align-items: flex-start; } }
/* sector_focus block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   sector focus pills + marquee */

.sector-focus__pills { display: flex; flex-wrap: wrap; gap: .6rem; }
.sector-focus__pills-label { font-size: var(--fs-min); font-weight: 700; color: var(--text-heading); margin-bottom: .7rem; }
.focus-pill { font-size: var(--fs-min); font-weight: 700; color: var(--navy); background: var(--light); border: 2px solid transparent; padding: .5rem 1.1rem; border-radius: var(--radius-pill); text-decoration: none; }
.focus-pill--linked:hover { background: var(--navy); color: var(--white); }
.sector-focus__marquee { border-block: 1px solid var(--line); padding-block: .9rem; display: flex; align-items: center; gap: 1.2rem; overflow: hidden; }
.sector-focus__marquee-label { flex: 0 0 auto; font-size: var(--fs-meta); font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--em-color); }
.sector-focus__marquee p { flex: 1 1 auto; white-space: nowrap; font-size: var(--fs-min); color: var(--muted); max-width: none; }

/* Ticker: the track holds the items twice (see the block markup) and slides one
   full copy, so the loop is seamless. Was previously inert — the keyframe lived
   only in the old child stylesheets, so both copies showed static and ran
   together. Now self-contained, brand-neutral. */
.sector-focus__marquee-track-wrap { flex: 1 1 auto; overflow: hidden; }
.sector-focus__marquee-track { display: flex; align-items: center; width: max-content; animation: sectorMarqueeScroll 34s linear infinite; }
.sector-focus__marquee-track-wrap:hover .sector-focus__marquee-track { animation-play-state: paused; }
.marquee-pill { white-space: nowrap; font-size: var(--fs-min); font-weight: 600; color: var(--muted); display: inline-flex; align-items: center; }
.marquee-pill::after { content: "\2022"; margin-inline: .95rem; color: var(--accent); }
@keyframes sectorMarqueeScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .sector-focus__marquee-track { animation: none; } }
/* split_panel block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   split panel with checklist + image badge */

.split-panel__layout { display: grid; grid-template-columns: 1.25fr 1fr; gap: 2.4rem; align-items: start; }
.split-panel--image-left .split-panel__layout { grid-template-columns: 1fr 1.1fr; }
.split-panel--align-center .split-panel__layout { align-items: center; }
.split-panel__title { margin-bottom: .7rem; }
.split-panel__body { margin-bottom: 1.1rem; }
.split-panel__checklist { display: flex; flex-direction: column; gap: .6rem; margin-bottom: 1.1rem; }
.split-panel__checklist-item { display: flex; gap: .7rem; font-size: var(--fs-min); line-height: 1.55; color: var(--ink); }
.split-panel__check-icon { flex: 0 0 auto; color: var(--em-color); display: flex; margin-top: .15rem; }
.split-panel__highlight { border-left: 6px solid var(--accent); background: var(--white); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: 1rem 1.2rem; margin-bottom: 1.2rem; }
.split-panel__highlight-text { font-size: var(--fs-min); font-weight: 700; color: var(--navy); }
.split-panel__image-wrap { position: relative; border-radius: var(--radius-md); overflow: hidden; border: 1px solid var(--line); background: var(--white); }
.split-panel__image-wrap > div:first-child { aspect-ratio: 16 / 10; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 9px, var(--ph-stripe-b) 9px 18px); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); color: var(--ph-ink); }
.split-panel__image-badge { position: absolute; left: 12px; bottom: 12px; background: var(--white); border-radius: var(--radius-sm); padding: .6rem .9rem; line-height: 1.15; }
.split-panel__image-badge strong { display: block; font-weight: 700; font-size: var(--fs-min); color: var(--navy); }
.split-panel__image-badge span { font-size: var(--fs-min); color: var(--muted); }

/* Stat-cards visual variant. base.css never defined .stat-card, so the values
   rendered as plain unstyled text. */
.split-panel__stat-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.stat-card { background: var(--white); border: 1px solid var(--line); border-top: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); padding: 1.4rem 1.5rem; }
.stat-card--wide { grid-column: 1 / -1; }
.stat-card--navy { background: var(--navy); border-color: var(--navy); }
.stat-card--navy .stat-card__value { color: var(--accent-on-dark); }
.stat-card--navy .stat-card__label { color: rgba(var(--on-dark-rgb), .8); }
/* The label token here has to partner --accent, not --btn-accent-bg. On nlc those
   are different colours (magenta vs teal), so --btn-accent-text put navy on
   magenta at 2.01:1. --accent-text is the label defined to read on --accent. */
.stat-card--accent { background: var(--accent); border-color: var(--accent); }
.stat-card--accent .stat-card__value, .stat-card--accent .stat-card__label { color: var(--accent-text); }
.stat-card__value { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; line-height: 1; color: var(--em-color); }
.stat-card__label { font-size: var(--fs-min); color: var(--muted); margin-top: .3rem; }

/* On-dark grounds. The block's `navy` and `dark` options used to emit
   split-panel--bg-navy / --bg-dark, which had no CSS, so the section never
   actually went dark and nothing here mattered. Now that those values map to
   the real .bg-navy / .bg-dark-blue grounds, the copy column has to survive
   them: the checklist is --ink, the highlight is a white panel with --navy
   text, and both would be near-invisible. Same treatment as .pullout in
   pagebuilder/content/content.css. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__checklist-item { color: rgba(var(--on-dark-rgb), .86); }
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) .split-panel__check-icon { color: var(--accent-on-dark); }
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__highlight { background: rgba(var(--on-dark-rgb), .08); border-left-color: var(--accent-on-dark); }
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .split-panel__highlight-text { color: var(--white); }

@media (max-width: 64em) { .split-panel__layout, .split-panel--image-left .split-panel__layout { grid-template-columns: 1fr; } }

/* visual_type: none. The template sets --single deliberately, but no rule
   existed, so the base two-column grid stayed and left an empty second column
   at desktop; it only collapsed below 64em via the mobile rule. This is the
   line that makes it collapse at every width, and it also fixes every page
   that already stored `none`. */
.split-panel--single .split-panel__layout { grid-template-columns: 1fr; }
/* stats_banner block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   stats banner, audience-coloured items */

.stats-banner { background: var(--surface-dark); color: var(--white); position: relative; }
.stats-banner--dark { background: var(--surface-dark); }
/* (The scanline ::before texture was removed 2026-08-05 — it read as an unwanted
   pinstripe on the dark ground.) */
.stats-banner__grid { display: grid; gap: 1.6rem; font-variant-numeric: tabular-nums; }
.stats-banner__grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.stats-banner__grid[data-count="4"] { grid-template-columns: repeat(4, 1fr); }
.stats-banner__item { border-top: 4px solid var(--accent-on-dark); padding-top: 1.2rem; }
.stats-banner__item--students { border-top-color: var(--aud-students); }
.stats-banner__item--parents { border-top-color: var(--aud-parents); }
.stats-banner__item--employers { border-top-color: var(--aud-employers); }
.stats-banner__number { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.2rem, 4vw, 2.75rem); line-height: 1; color: var(--white); }
.stats-banner__prefix, .stats-banner__suffix { font-size: .6em; vertical-align: .32em; }
.stats-banner__label { font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; color: var(--accent-on-dark); margin: .5rem 0 .4rem; }
/* number_accent was emitted and consumed by nothing, so the label was always
   the brand's on-dark accent. `lime` IS that default and needs no rule of its
   own; `white` now does something. `magenta` was removed from the field: it did
   not carry on the navy ground. */
.stats-banner--accent-white .stats-banner__label { color: var(--white); }
.stats-banner__note { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .75); }
@media (max-width: 64em) { .stats-banner__grid[data-count="3"], .stats-banner__grid[data-count="4"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 40em) { .stats-banner__grid { grid-template-columns: 1fr !important; } }
/* sticky_cta block. Fixed to the viewport bottom, revealed on scroll.
   No literal colour, every value a token. The inline JS (sticky_cta.php) drops
   the [hidden] attribute and toggles .sticky-cta--visible once the page has
   scrolled past data-show-after; the positioning + reveal transition were never
   defined, so the bar just sat inline in the flow and never stuck. */

.sticky-cta {
  position: fixed; z-index: 900;
  left: 50%; bottom: 1rem;
  width: max-content; max-width: min(680px, calc(100% - 2rem));
  background: var(--surface-brand); border-radius: var(--radius-pill);
  box-shadow: 0 10px 34px rgba(var(--shadow-rgb), .32);
  transform: translate(-50%, calc(100% + 1.5rem)); opacity: 0;
  transition: transform var(--transition), opacity var(--transition);
}
.sticky-cta--visible { transform: translate(-50%, 0); opacity: 1; }

/* Full-width bar variant: flush to the bottom edge, square. */
.sticky-cta--bar {
  left: 0; right: 0; bottom: 0;
  width: auto; max-width: none; border-radius: 0;
  transform: translateY(100%);
}
.sticky-cta--bar.sticky-cta--visible { transform: translateY(0); }
.sticky-cta--bar .sticky-cta__inner { max-width: 1200px; margin-inline: auto; }

.sticky-cta__inner { display: flex; align-items: center; gap: 1.2rem; padding: .8rem 1.2rem .8rem 1.4rem; flex-wrap: nowrap; }
.sticky-cta--bar .sticky-cta__inner { flex-wrap: wrap; }
.sticky-cta__content { display: flex; align-items: center; gap: .7rem; flex: 1 1 auto; }
.sticky-cta__icon { flex: 0 0 auto; color: var(--white); }
.sticky-cta__text { display: flex; flex-direction: column; }
.sticky-cta__message { font-size: var(--fs-min); font-weight: 700; color: var(--white); }
.sticky-cta__countdown { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .85); }
.sticky-cta__button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem; background: var(--white); color: var(--surface-brand); padding: .7rem 1.4rem; border-radius: var(--radius-pill); font-weight: 700; text-decoration: none; }
.sticky-cta__arrow { flex: 0 0 auto; width: 1.1em; height: 1.1em; }
.sticky-cta__dismiss { flex: 0 0 auto; color: rgba(var(--on-dark-rgb), .85); padding: .4rem .6rem; }

/* Pulse affordance on the button (motion-safe). */
@media (prefers-reduced-motion: no-preference) {
  .sticky-cta--pulse .sticky-cta__button { animation: sticky-cta-pulse 2s ease-in-out infinite; }
  @keyframes sticky-cta-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }
}

/* --- Position variants ---------------------------------------------------
   `position` registers three values and only `bar` had a rule, so `responsive`
   and `floating` fell through to the base pill. `responsive` is the FIELD
   DEFAULT, which meant most instances silently rendered as something the
   editor had not chosen.

   floating   the centred pill. That is what the base .sticky-cta already is,
              so this only has to stop it being an unstyled unknown and pin the
              intent, rather than restate the geometry.
   responsive full-width bar on small screens, centred pill from 40em up. Built
              from the same declarations as --bar so the two cannot drift. */
.sticky-cta--floating {
  left: 50%; right: auto; bottom: 1rem;
  width: max-content; max-width: min(680px, calc(100% - 2rem));
  border-radius: var(--radius-pill);
}

@media (max-width: 39.9375em) {
  .sticky-cta--responsive {
    left: 0; right: 0; bottom: 0;
    width: auto; max-width: none; border-radius: 0;
    transform: translateY(100%);
  }
  .sticky-cta--responsive.sticky-cta--visible { transform: translateY(0); }
  .sticky-cta--responsive .sticky-cta__inner { max-width: 1200px; margin-inline: auto; flex-wrap: wrap; }
}

@media (min-width: 40em) {
  .sticky-cta--responsive {
    left: 50%; right: auto; bottom: 1rem;
    width: max-content; max-width: min(680px, calc(100% - 2rem));
    border-radius: var(--radius-pill);
    transform: translate(-50%, calc(100% + 1.5rem));
  }
  .sticky-cta--responsive.sticky-cta--visible { transform: translate(-50%, 0); }
}
/*
 * Block: tabbed_content  —  rebuilt from the prototype TABS (kitchen-sink
 * .tabs: pill nav + light panel). Root: .tabbed > ul.tabbed-menu, driven by
 * jQuery UI tabs.
 * ------------------------------------------------------------------
 * Real classes: ul.tabbed-menu > li > a (the pills), li.ui-tabs-active (the
 * active tab, jQuery UI), [role="tabpanel"] (the panels; UI shows/hides).
 * The jQuery UI hooks are preserved; panel display is left to the widget.
 *
 * Design: nav is a row of pill chips; the active pill is filled blue; the
 * panel sits on a light ground with a large radius.
 */

/* nav = a real tab bar: labels sitting ON a rail, the active one underlined.
   (Was a row of detached pill chips, which read as filter buttons rather than
   tabs and fought the panel they belong to.) */
ul.tabbed-menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0 0 2rem 0;
  list-style: none;
  border-bottom: 2px solid var(--line);
}
ul.tabbed-menu li {
  display: inline-block;
  padding-left: 0;
  text-indent: 0;
  margin: 0;
}
ul.tabbed-menu li::before {
  content: none;
}

/* a tab = a label on the rail */
ul.tabbed-menu li a {
  display: inline-block;
  padding: 0.85rem 1.4rem;
  margin-bottom: -2px;              /* overlap the rail so the tab sits on it */
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  font-size: 1.2rem;
  line-height: 1.2;
  text-decoration: none;
  color: var(--muted);
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  transition: color var(--transition), border-color var(--transition);
}
ul.tabbed-menu li a:hover {
  color: var(--text-heading);
  border-bottom-color: var(--line);
}

/* active tab = underlined in the brand link colour */
ul.tabbed-menu li.ui-tabs-active a,
ul.tabbed-menu li a[aria-selected="true"] {
  color: var(--link);
  border-bottom-color: var(--link);
}

/* panel on a light ground. Dark text is asserted here for light grounds and
   re-asserted by bridge.css's opaque-light-panel rule (which lists [role=tabpanel])
   on coloured grounds. The tab pills are <li> links, so bridge's prose-scoped
   lime-link rule never touches them — no per-block override needed. */
.tabbed:not(.course-he-tabs) [role="tabpanel"] {
  padding: 2.1rem 2.3rem;
  background: var(--surface-alt);
  border-radius: var(--radius-lg);
  color: var(--text);
}
.tabbed:not(.course-he-tabs) [role="tabpanel"] a,
.tabbed:not(.course-he-tabs) [role="tabpanel"] a[href^="tel:"] {
  color: var(--blue-text);
  text-decoration: underline;
}
.tabbed:not(.course-he-tabs) [role="tabpanel"] * + * {
  margin-top: 0.75rem;
}

/* Relocated verbatim from qualification_cards.css so tabbed-menu styling lives
   in its owning block (per-page enqueue). Both are inert against the current
   markup — the menu renders <a> pills (styled above), not <button>, and .tabbed
   is the tab container, not a grid — but kept rather than dropped. */
.tabbed-menu button {
  border-bottom: 4px solid transparent; padding: .8rem 1.1rem;
  font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.3125rem; color: var(--muted);
}
@media (max-width: 64em) { .tabbed { grid-template-columns: 1fr; } }

/* Pill label contrast.
   On a dark section, css/base.css recolours EVERY <a> to --accent-on-dark
   (teal on DC) with the selector
     :is(<dark grounds>) a:not(.btn):not(.button):not(.cta)   -> (0,4,1)
   which out-specifies a plain `.tabbed ul.tabbed-menu li a` (0,2,3). That is why
   the earlier fix never took and the pills stayed teal. These rules add the
   .tabbed-content scope plus two :not()s so they reach (0,5,3)+ and win on every
   ground: dark label on the light chip, white on the active blue chip. Verified
   AA across base + all child themes (--text-heading on --surface-alt,
   --text-on-dark on --surface-blue). */
.tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button) {
  color: var(--muted);
}
.tabbed-content .tabbed ul.tabbed-menu li.ui-tabs-active a:not(.btn):not(.button),
.tabbed-content .tabbed ul.tabbed-menu li a[aria-selected="true"]:not(.btn):not(.button) {
  color: var(--link);
}

/* Same rules again on a dark ground: the rail and the resting labels have to
   invert or they vanish, and the active label takes the on-dark accent. Same
   .tabbed-content .tabbed scope so they out-specify base.css's dark-ground
   link recolour. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu {
  border-bottom-color: rgba(var(--on-dark-rgb), .3);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button) {
  color: rgba(var(--on-dark-rgb), .78);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a:not(.btn):not(.button):hover {
  color: var(--white);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li.ui-tabs-active a:not(.btn):not(.button),
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .tabbed ul.tabbed-menu li a[aria-selected="true"]:not(.btn):not(.button) {
  color: var(--white);
  border-bottom-color: var(--accent-on-dark);
}

/* Section intro + eyebrow on a dark ground. Scoped to the block header row (a
   direct-child chain) so panel prose is never touched. The eyebrow lifts to the
   brand's bright on-dark accent (DC yellow, else --accent-on-dark); the intro
   paragraph to a soft white. Tokens only. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content .eyebrow {
  color: var(--yellow, var(--accent-on-dark));
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey).tabbed-content > .row > .columns > p {
  color: rgba(var(--on-dark-rgb), .84);
}
/* testimonial block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   figure testimonial on dark quote */

.testimonial { margin: 0; }
.testimonial .quote { background: var(--surface-dark); color: var(--white); border-radius: var(--radius-md); padding: 1.6rem 1.7rem; }
/* typography.css sets `blockquote { color: var(--text-heading) }`, and a direct
   rule beats the white inherited from .quote. On nlc --text-heading resolves to
   the same navy as --surface-dark, so the quote rendered navy-on-navy at 1.00:1,
   i.e. invisible. The quote panel owns its own foreground. */
.testimonial .quote blockquote { color: inherit; }
/* Drop typography.css's WYSIWYG blockquote treatment (4px accent rule + inset) —
   the testimonial quote is its own component and reads flush. */
.testimonial .quote blockquote { border-left: 0; padding-left: 0; margin: 0; max-width: none; }
.testimonial blockquote p { font-family: var(--font-display); font-weight: 400; font-size: 1.5625rem; line-height: 1.4; margin-bottom: 1.1rem; }
.testimonial blockquote em { font-style: italic; color: var(--accent-on-dark); }
.testimonial figcaption { display: flex; align-items: center; gap: .75rem; font-family: var(--font-display); font-weight: 800; font-size: 1.3125rem; }
.testimonial figcaption cite { display: block; font-family: var(--font-body); font-weight: 400; font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .75); }
.testimonial-image { border-radius: var(--radius-md); overflow: hidden; }
.testimonial__avatar { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; background: repeating-linear-gradient(135deg, rgba(var(--on-dark-rgb), .18) 0 6px, rgba(var(--on-dark-rgb), .08) 6px 12px); }

/* --- bg-inherit display style: a full-bleed portrait sits behind the quote
   panel. This layout was DROPPED in the Stage 4 CSS port, so the carousel slides
   had no internal structure and rendered as an unconstrained quote stacked on a
   full-size image, which then stretched every slide (the "broken carousel").
   Re-ported from the source theme and adapted for the carousel: the figure is
   the positioning context (isolate) so the absolute image stays behind its own
   quote, not the whole track. Layout only; colours live on .quote above. */
.testimonial-bg-inherit {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto auto;
  grid-template-areas: "image" "quote";
  gap: 0;
  width: 100%;
}
.testimonial-bg-inherit .testimonial-image { grid-area: image; margin: 0; }
.testimonial-bg-inherit .quote {
  grid-area: quote;
  position: relative;
  z-index: 1;
  margin: -4rem 1.5rem 0;
  align-self: center;
}
@media (min-width: 64em) {
  .testimonial-bg-inherit-left,
  .testimonial-bg-inherit-right,
  .testimonial-bg-inherit-center {
    grid-template-columns: 1fr 40%;
    grid-template-rows: auto;
    grid-template-areas: "quote image";
    align-items: center;
    min-height: 56vh;
    padding: 4rem 5rem;
  }
  .testimonial-bg-inherit-right {
    grid-template-columns: 40% 1fr;
    grid-template-areas: "image quote";
  }
  .testimonial-bg-inherit-left > .testimonial-image,
  .testimonial-bg-inherit-right > .testimonial-image,
  .testimonial-bg-inherit-center > .testimonial-image {
    position: absolute;
    inset: 0;
    z-index: 0;
    height: 100%;
    width: 100%;
    border-radius: 0;
  }
  .testimonial-bg-inherit-left > .testimonial-image img,
  .testimonial-bg-inherit-right > .testimonial-image img,
  .testimonial-bg-inherit-center > .testimonial-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: right center;
  }
  .testimonial-bg-inherit-right > .testimonial-image img { object-position: left center; }
  .testimonial-bg-inherit-left > .quote,
  .testimonial-bg-inherit-right > .quote,
  .testimonial-bg-inherit-center > .quote { margin: 0; }
}

/* --- img-left / img-right display styles: a SPLIT PANEL per slide, profile
   image one side, quote the other, with the name + course sitting UNDER the
   image (moved there in testimonial.php). Two-column grid; mobile stacks with a
   round avatar above the quote. Matches the Claude Design refinement: no boxed
   quote card (the dark section is the ground), a lead paragraph that leads, and
   a teal accent rule under the portrait. */
.testimonial-img-left,
.testimonial-img-right {
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto auto;
  grid-template-areas: "image" "quote";
  gap: 1.4rem;
  width: 100%;
}
/* No card on the split layouts — the quote reads straight on the dark section. */
.testimonial-img-left > .quote,
.testimonial-img-right > .quote {
  grid-area: quote;
  align-self: center;
  background: transparent;
  padding: 0;
  border-radius: 0;
}
/* Lead paragraph leads; the rest steps down and mutes. */
.testimonial-img-left .quote blockquote p:first-child,
.testimonial-img-right .quote blockquote p:first-child { font-size: 1.75rem; line-height: 1.32; color: var(--white); }
.testimonial-img-left .quote blockquote p:not(:first-child),
.testimonial-img-right .quote blockquote p:not(:first-child) { font-size: 1.2rem; line-height: 1.6; color: rgba(var(--on-dark-rgb), .72); }

.testimonial-img-left > .testimonial-image,
.testimonial-img-right > .testimonial-image {
  grid-area: image;
  max-width: 200px;
  margin: 1.5rem auto 0;
  overflow: visible;       /* the caption sits below the framed image */
  border-radius: 0;
}
.testimonial-img-left > .testimonial-image img,
.testimonial-img-right > .testimonial-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 9999px;   /* round avatar on mobile */
}
/* Name + course under the image. */
.testimonial-img-left > .testimonial-image figcaption,
.testimonial-img-right > .testimonial-image figcaption {
  display: block;
  margin-top: 1rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--white);
}
.testimonial-img-left > .testimonial-image figcaption cite,
.testimonial-img-right > .testimonial-image figcaption cite {
  display: block;
  margin-top: .2rem;
  font-weight: 400;
  color: rgba(var(--on-dark-rgb), .72);
}
@media (min-width: 64em) {
  .testimonial-img-left,
  .testimonial-img-right {
    grid-template-columns: minmax(260px, 34%) 1fr;
    grid-template-rows: auto;
    grid-template-areas: "image quote";
    align-items: center;
    gap: 3rem;
    padding: 3rem 5rem;
  }
  .testimonial-img-right {
    grid-template-columns: 1fr minmax(260px, 34%);
    grid-template-areas: "quote image";
  }
  .testimonial-img-left > .testimonial-image,
  .testimonial-img-right > .testimonial-image {
    max-width: 100%;
    margin: 0;
    align-self: center;
    text-align: left;
  }
  .testimonial-img-left > .testimonial-image img,
  .testimonial-img-right > .testimonial-image img {
    aspect-ratio: 3 / 4;
    max-height: 420px;
    width: 100%;
    border-radius: var(--radius-sm);
    /* the teal accent rule directly under the portrait */
    border-bottom: 3px solid var(--accent-on-dark);
  }
}

/* Control bar aligns with the slide content inset (matches the 5rem slide pad). */
.testimonials-slider .dncg-carousel__bar { padding-inline: 1.5rem; }
@media (min-width: 64em) { .testimonials-slider .dncg-carousel__bar { padding-inline: 5rem; } }
/* testimonial_panel block.
   CSS ported from design-export/base.css; no literal colour, every value a token.
   Split testimonial panel with stats.

   The template emits four modifier families — --bg-{background},
   --accent-{accent}, --{layout} and the padding class. Only the base element was
   implemented, so background, accent and layout were all inert; --quote-right in
   particular reversed the DOM order in PHP while the CSS kept the wide column on
   the left, so the stats got the wide track and the quote got the narrow one.

   The accent is now a single local custom property, --tp-accent, which the four
   accent-bearing parts read. Same mechanism as the --c ramp on levels_ladder and
   pathway_routes: one declaration per variant instead of four. */

.testimonial-panel {
  --tp-accent: var(--accent-on-dark);
  background: var(--surface-dark);
  border-radius: var(--radius-lg);
  padding: 2.1rem 2.2rem;
}

/* ------------------------------------------------------------------ ground
   `dark` is the only value the field offers, and the template defaults to it, so
   this restates the base ground rather than changing it. It exists so the
   modifier is real and so a second ground can be added later without moving the
   rule. */
.testimonial-panel--bg-dark { background: var(--surface-dark); }

/* ------------------------------------------------------------------ accent
   Following the resolution already applied to stats_banner (see
   pagebuilder/stats_banner/stats_banner.css): `lime` IS the brand's own on-dark
   accent, so it is the default and needs no rule; `white` does something.

   `blue` and `magenta` are removed from the field for the same reason magenta
   was removed there — a mid-tone brand fill does not carry as TEXT on the navy
   ground (bridge.css records 2.07:1 on ucdon's blue, 1.41:1 on ucnl's green,
   2.20:1 on hesta's). A row still holding one of those stored values matches no
   rule and therefore inherits --tp-accent's default, which is legible. */
.testimonial-panel--accent-white { --tp-accent: var(--white); }

.testimonial-panel__quote-mark,
.testimonial-panel__quote em,
.testimonial-panel__stats-heading { color: var(--tp-accent); }

/* ------------------------------------------------------------------ layout
   quote-left  the quote takes the wide track (the default)
   quote-right the STATS are printed first in the DOM by the template, so reading
               order stays sensible; the wide track has to move with them
   quote-only  no stats, so no grid — just a comfortable measure, centred */
.testimonial-panel__inner--split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 2.4rem;
  align-items: center;
}
.testimonial-panel--quote-right .testimonial-panel__inner--split {
  grid-template-columns: 1fr 1.3fr;
}
.testimonial-panel--quote-only .testimonial-panel__quote-col {
  max-width: 68ch;
  margin-inline: auto;
  text-align: center;
}
.testimonial-panel--quote-only .testimonial-panel__quote { max-width: none; }

/* ------------------------------------------------------------------ parts */
.testimonial-panel__quote-mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4rem;
  line-height: .7;
}
.testimonial-panel__quote {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.38;
  color: var(--white);
  margin: .6rem 0 1rem;
}
.testimonial-panel__quote em { font-style: italic; }
.testimonial-panel__attribution { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .78); }
.testimonial-panel__stats-heading {
  font-size: var(--fs-eyebrow);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.testimonial-panel__stat + .testimonial-panel__stat { margin-top: 1rem; }
.testimonial-panel__stat-number {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 2.5rem;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}
.testimonial-panel__stat-label { font-size: var(--fs-min); color: rgba(var(--on-dark-rgb), .78); }

/* Below the collapse the grid is one column, so the visual swap quote-right
   describes no longer exists and reading order is the DOM order either way. */
@media (max-width: 64em) {
  .testimonial-panel__inner--split,
  .testimonial-panel--quote-right .testimonial-panel__inner--split {
    grid-template-columns: 1fr;
  }
}
/* testimonials_grid block. Grid of testimonial cards, each a full-card link.
   No literal colour, every value a token. Fixes: the card link re-introduced the
   default underline (only .tg-card was reset), and the CSS styled .tg-card-body
   while the markup emits .tg-card-content, so the content area was unstyled. */

.tg-grid { display: grid; gap: var(--gap-grid); }
/* The field offers 2, 3 and 4 per row; only 3 was mapped, so 2 and 4 fell back
   to the base .tg-grid, which sets no columns, and rendered single-column. */
.tg-grid-2 { grid-template-columns: repeat(2, 1fr); }
.tg-grid-3 { grid-template-columns: repeat(3, 1fr); }
.tg-grid-4 { grid-template-columns: repeat(4, 1fr); }

.tg-card { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); border-left: var(--card-edge) solid var(--accent); border-radius: var(--radius-sm); overflow: hidden; }
.tg-card-link { display: flex; flex-direction: column; height: 100%; text-decoration: none; color: inherit; }

.tg-card-image-wrapper { aspect-ratio: 4 / 3; overflow: hidden; }
.tg-card-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-card-placeholder { display: flex; aspect-ratio: 4 / 3; align-items: center; justify-content: center; font-family: var(--font-display); font-weight: 800; font-size: 2rem; color: var(--white); }
.tg-card-placeholder-name { opacity: .9; }

.tg-card-content { padding: 1.3rem 1.4rem; display: flex; flex-direction: column; gap: .4rem; flex: 1 1 auto; }
.tg-card-name { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; color: var(--text-heading); }
.tg-card-course { font-size: var(--fs-min); color: var(--muted); }
.tg-card-quote { font-family: var(--font-display); font-weight: 400; font-style: italic; font-size: 1.3125rem; line-height: 1.4; color: var(--text-heading); }
.tg-card-button { margin-top: auto; padding-top: .8rem; font-size: var(--fs-min); font-weight: 700; color: var(--link); }
.tg-card-link:hover .tg-card-button { text-decoration: underline; }

@media (max-width: 64em) { .tg-grid-3, .tg-grid-4 { grid-template-columns: 1fr; } }
@media (max-width: 40em) { .tg-grid-2 { grid-template-columns: 1fr; } }
/* tile_guide block — tile grid + searchable guide rail.
   Ported from design-export/student-life/student-life-hub.html. No literal colour
   (the prototype's rgba(255,255,255,…) chip strokes become the --on-dark-rgb
   channel); tile background colours live in the .tile--* modifiers as tokens. */

.tile-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: calc(var(--gap-grid) * 1.6); align-items: start; }
.tile-grid--no-rail { grid-template-columns: minmax(0, 1fr); }
.tile-grid__col { display: grid; gap: var(--gap-grid); }
.tile-grid__tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--gap-grid); }
.tile-guide__header { margin-bottom: 1.8rem; }

.tile { position: relative; overflow: hidden; display: flex; flex-direction: column; min-height: 280px; border-radius: var(--radius-md); padding: var(--pad-card, 1.6rem); text-decoration: none; color: var(--white); transition: transform var(--transition); }
.tile:hover { transform: translateY(-3px); }
.tile--wide { grid-column: 1 / -1; min-height: auto; }
.tile > .tile__inner { position: relative; display: flex; flex-direction: column; flex: 1; }

/* Tile colour treatments (tokens only). */
.tile--dark-alt  { background: var(--surface-dark-alt); }
.tile--blue      { background: var(--surface-blue); }
.tile--brand     { background: var(--surface-brand); }
.tile--employers { background: var(--aud-employers-text); }
.tile--dblue     { background: var(--dblue); }
.tile--dark      { background: var(--surface-dark); }

.tile__eyebrow { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: .14em; text-transform: uppercase; opacity: .82; margin-bottom: .6rem; }
.tile__title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 2rem; line-height: var(--display-lh); letter-spacing: var(--display-track); margin-bottom: .7rem; }
.tile__body { font-size: var(--fs-min); line-height: 1.55; opacity: .9; max-width: 46ch; }
.tile__badge { align-self: flex-start; margin-bottom: .9rem; background: var(--btn-accent-bg); color: var(--btn-accent-text); font-family: var(--font-display); font-weight: 800; font-size: var(--fs-min); padding: .4rem .9rem; border-radius: var(--radius-pill); }
.tile__chips { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem; }
.tile__chips span { border: 1px solid rgba(var(--on-dark-rgb), .28); background: rgba(var(--on-dark-rgb), .08); border-radius: var(--radius-pill); padding: .45rem .95rem; font-size: var(--fs-min); font-weight: 700; }
/* The tile sets color:var(--white) for its dark fill, but typography.css has
   `a { color: var(--link) }`, and a direct rule beats inheritance — so every CTA
   inside a tile was painting in the site link colour on a dark ground
   (measured 2.01:1 nlc, 2.49:1 ucnl, 2.59:1 ucdon, 2.54:1 hesta). Links inside
   a tile follow the tile's own foreground.
   The :hover pair matters too: a whole-card tile IS an <a>, and a:hover (0,1,1)
   out-specifies .tile (0,1,0), so hovering a tile repainted its entire contents
   in --link-hover on the brand fill (measured 1.02:1 on ucdon's dblue tile). */
.tile__cta,
.tile__chips a,
.tile a:not(.btn):not(.button) { color: inherit; }
a.tile:hover, a.tile:focus-visible,
.tile__cta:hover, .tile a:not(.btn):not(.button):hover { color: var(--white); }
.tile__cta { margin-top: auto; padding-top: 1.3rem; display: inline-flex; align-items: center; gap: .7rem; font-weight: 700; font-size: var(--fs-min); }
.tile__cta i { width: 32px; height: 32px; border-radius: 50%; border: 2px solid currentColor; display: inline-flex; align-items: center; justify-content: center; font-style: normal; flex: 0 0 auto; }

/* Image tile: photo + brand scrim. */
.tile__media { position: absolute; inset: 0; background: repeating-linear-gradient(135deg, var(--ph-stripe-a) 0 12px, var(--ph-stripe-b) 12px 24px); }
.tile__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tile__scrim { position: absolute; inset: 0; background: linear-gradient(160deg, rgba(var(--tint-rgb), .93) 0%, rgba(var(--tint-rgb), .55) 100%); }

/* Guide rail. */
.guide-rail { position: sticky; top: 1.4rem; background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 1.6rem 1.5rem; box-shadow: var(--shadow-sm); max-height: calc(100vh - 2.8rem); overflow-y: auto; }
.guide-rail__title { font-size: 1.6rem; margin-bottom: .5rem; }
.guide-rail__intro { font-size: var(--fs-min); color: var(--muted); margin-bottom: 1rem; }
.guide-rail__search { margin-bottom: 1.2rem; }
.guide-rail__empty { font-size: var(--fs-min); color: var(--muted); }
.guide-rail ul { list-style: none; margin: 0; padding: 0; }
.guide-rail a { display: flex; justify-content: space-between; align-items: center; gap: .6rem; padding: .55rem 0; border-bottom: 1px solid var(--line); font-size: var(--fs-min); text-decoration: none; color: var(--text-heading); }
.guide-rail a:hover { color: var(--link); }
.guide-rail__chev { color: var(--muted); }
.guide-rail__group { margin-bottom: 1.2rem; }
.guide-rail__group-label { margin-bottom: .5rem; }
.guide-rail__footer { display: flex; justify-content: space-between; gap: .6rem; font-size: var(--fs-min); font-weight: 700; padding-top: .4rem; text-decoration: none; color: var(--link); border-bottom: 0 !important; }

/* Bare search field (no chrome box) for the rail. */
.search__field--bare { display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: .55rem .8rem; color: var(--muted); }
.search__field--bare .search__input { border: 0; background: none; width: 100%; font: inherit; color: var(--ink); min-width: 0; }

@media (max-width: 64em) {
  .tile-grid { grid-template-columns: 1fr; }
  .guide-rail { position: static; max-height: none; }
}
@media (max-width: 52em) {
  .tile-grid__tiles { grid-template-columns: 1fr; }
}

/* Feature-tile pills as individual links (guide CPT). Match the chip look and
   inherit the tile's on-dark text colour; they're interactive, so add hover +
   a visible keyboard focus ring. */
.tile__chips a {
  border: 1px solid rgba(var(--on-dark-rgb), .28);
  background: rgba(var(--on-dark-rgb), .08);
  border-radius: var(--radius-pill);
  padding: .45rem .95rem;
  font-size: var(--fs-min);
  font-weight: 700;
  color: inherit;
  text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.tile__chips a:hover { background: rgba(var(--on-dark-rgb), .18); border-color: rgba(var(--on-dark-rgb), .5); }

/* The wide/feature tile is a <div>, not a whole link — its pills + CTA carry the
   interaction, so drop the whole-card hover-lift and pointer. */
.tile--wide { cursor: default; }
.tile--wide:hover { transform: none; }
.tile--wide a.tile__cta { align-self: flex-start; }
.tile--wide a.tile__cta:hover { text-decoration: underline; }
/* timeline block (Phase 3 Stage 4).
   CSS ported from design-export/base.css; no literal colour, every value a token.
   vertical + banded timeline */

.timeline { display: flex; flex-direction: column; border-left: 3px solid var(--line); padding-left: 1.6rem; }
.timeline-item { position: relative; padding-bottom: 1.4rem; }
.timeline-item::before { content: ""; position: absolute; left: calc(-1.6rem - 9px); top: .35rem; width: 15px; height: 15px; border-radius: 50%; background: var(--accent); border: 3px solid var(--white); }
.timeline-title { font-family: var(--font-display); font-weight: var(--display-weight); font-size: 1.4375rem; color: var(--text-heading); }
.timeline-subtitle { font-size: var(--fs-min); font-weight: 700; color: var(--em-color); margin: .2rem 0 .3rem; }
.timeline-content p { font-size: var(--fs-min); color: var(--muted); }
.timeline--banded { flex-direction: row; border-left: 0; padding-left: 0; gap: 1.6rem; }
.timeline--banded .timeline-item { flex: 1 1 0; border-top: 4px solid var(--accent-on-dark); padding: 1rem 0 0; }
.timeline--banded .timeline-item::before { content: none; }

/* Double-sided: a centre spine with items alternating left / right. Previously
   had no rule, so it rendered identically to the default vertical timeline. */
.timeline--doubleside { border-left: 0; padding-left: 0; position: relative; }
.timeline--doubleside::before { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; background: var(--line); transform: translateX(-50%); }
.timeline--doubleside .timeline-item { width: 50%; box-sizing: border-box; padding-bottom: 1.8rem; }
.timeline--doubleside .timeline-item:nth-child(odd) { text-align: right; padding-right: 2.2rem; }
.timeline--doubleside .timeline-item:nth-child(even) { margin-left: 50%; padding-left: 2.2rem; }
.timeline--doubleside .timeline-item:nth-child(odd)::before { left: auto; right: -9px; }
.timeline--doubleside .timeline-item:nth-child(even)::before { left: -9px; }
/* Mobile collapses the two columns onto one spine. The overrides have to repeat
   the :nth-child() selectors: without them the desktop rules above out-specify
   this block, the even items kept margin-left:50% and the page scrolled
   horizontally (measured 449px against a 390px viewport). */
@media (max-width: 40em) {
  .timeline--doubleside { border-left: 3px solid var(--line); padding-left: 1.6rem; }
  .timeline--doubleside::before { content: none; }
  .timeline--doubleside .timeline-item,
  .timeline--doubleside .timeline-item:nth-child(odd),
  .timeline--doubleside .timeline-item:nth-child(even) {
    width: 100%; margin-left: 0; text-align: left; padding-left: 0; padding-right: 0;
  }
  .timeline--doubleside .timeline-item::before,
  .timeline--doubleside .timeline-item:nth-child(odd)::before,
  .timeline--doubleside .timeline-item:nth-child(even)::before {
    left: calc(-1.6rem - 9px); right: auto;
  }
}

/* On a dark section ground the title (navy) and subtitle (--em-color orange)
   fail contrast. Lift them: title -> white, subtitle/eyebrow -> the brand's
   bright accent (yellow where defined for DC, else --accent-on-dark), copy ->
   a legible tint of white. Scoped to the timeline section so it is self-contained. */
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-title { color: var(--white); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-subtitle { color: var(--yellow, var(--accent-on-dark)); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .eyebrow { color: var(--yellow, var(--accent-on-dark)); }
.timeline-area:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) .timeline-content p { color: rgba(var(--on-dark-rgb), .82); }
/*
 * Block: video
 * Source: prototypes/kitchen-sink-dncg.html  .video / .duo (side-by-side).
 * Root: .video (section) with display_style video | video-left | video-right.
 * The generic expand utilities (.js-expandmore, .js-to_expand,
 * .expandmore__button) and the Foundation .responsive-embed base are shared
 * globals; only .video-scoped rules live here. Tokens only.
 * FLAG: the prototype .video__play (lime circle) / .video__tag are the poster
 * of a placeholder box. The real block embeds <lite-youtube>, which renders its
 * own poster + play control, so those overlay elements are not added; the media
 * frame (16:9, radius, shadow) is applied to .responsive-embed.
 */

.video {
  padding: 4rem 0;
}

/* Media frame: prototype .video (rounded, soft shadow). lite-youtube fills it;
   the gradient is only a fallback ground before its thumbnail paints. */
.video .responsive-embed {
  margin-bottom: 0;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: linear-gradient(150deg, var(--navy) 0%, var(--dblue) 100%);
}

/* Side-by-side (video-left / video-right): a two-up split like prototype .duo.
   video-right keeps markup order (content left, media right); video-left
   reverses so the media sits left. */
@media print, screen and (min-width: 40em) {
  .video-left .row,
  .video-right .row {
    display: flex;
    align-items: center;
    gap: 3rem;
  }
  .video-left .row > .columns,
  .video-right .row > .columns {
    padding-left: 0;
    padding-right: 0;
  }
  .video-left .row {
    flex-direction: row-reverse;
  }
}

/* Transcript CSS REMOVED alongside the transcript_status /
   transcript_content fields and the render block. It styled a pane that
   never opened: the .js-expandmore / .js-to_expand toggle it sat behind is
   bound by no shipped script. About 60 lines (.video-transcript-pane and
   .video-transcript) went with it; recoverable from git if transcripts
   return. */
/* Responsive layer — laptop band.
   Ported from Claude Design's base.css §3B (design-export/notes.md §3B).

   Loads AFTER all block CSS in the enqueue cascade, so it overrides the
   block-level `@media (max-width: 64em)` single-column collapses without
   editing each block file. The problem it fixes: a windowed laptop (~900-1024px,
   what most internal users run) collapsed every two-up to one column at 64em,
   so a 16:10 panel image went full-bleed and each panel read as an image with a
   caption. Two-up now holds to 52em; below that it stacks and the media slot is
   capped so it is a band across the top, not half a screen.

   Breakpoints across the system: 1180 / 1024 / 900(~52em) / 520.
   Colour-free by construction: grid-template-columns, max-height, object-fit
   only. `!important` matches the design layer and beats block-level collapses
   that themselves use `!important` (e.g. process-steps). */

/* Laptop band: two-up stays two-up; dense rows thin rather than stack. */
@media (min-width: 52em) and (max-width: 64em) {
  .split-panel__layout,
  .split-panel--image-left .split-panel__layout,
  .fiftyfifty__grid,
  .comparison-grid__cards,
  .qa-grid,
  .footer-top { grid-template-columns: 1fr 1fr !important; }

  .featured-panel__inner { grid-template-columns: 1.05fr 1fr !important; grid-template-areas: "content media"; }
  .featured-panel--media-right .featured-panel__inner { grid-template-areas: "content media"; }
  .audience-switcher__panel-grid { grid-template-columns: 1.15fr 1fr !important; }
  .testimonial-panel__inner--split { grid-template-columns: 1.3fr 1fr !important; }
  .results-layout { grid-template-columns: 260px 1fr !important; }

  .facility-cards__grid--3,
  .tg-grid-3,
  .sortable-links-area,
  .qualification-cards__grid,
  .tabbed { grid-template-columns: repeat(2, 1fr) !important; }
  .process-steps__grid { grid-template-columns: repeat(2, 1fr) !important; }
  .facilities-grid__strip { grid-template-columns: repeat(4, 1fr) !important; }
  .images-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .contact-form { grid-template-columns: 1fr 1fr !important; }
}

/* Stacked (below 52em): the media slot is a band across the top, not a
   half-screen. object-fit keeps a 16:10 crop from distorting. */
@media (max-width: 52em) {
  .card-image,
  .fiftyfifty__image,
  .facility-card__image,
  .split-panel__image-wrap,
  .audience-switcher__image,
  .featured-panel__media { max-height: 300px; }
  .card-image > img,
  .fiftyfifty__image > img,
  .facility-card__image > img,
  .split-panel__image-wrap > img { height: 100%; object-fit: cover; }
}
/* =============================================================================
   bridge.css — section grounds, spacing rhythm and the tri-colour rule
   Rebuilt from prototypes/kitchen-sink-dncg.html (.section, .section--sm,
   .section--alt, .section--dark) and the design pass's structural device
   (--rule-tri). Mapped onto the theme's markup:
     <section class="content-area pad bg-*">
   Owns: section vertical rhythm, the .bg-* grounds, the tri-colour rule.
   Colour is always a token. Backgrounds are referenced (not redefined) by
   typography.css and section-heading.css for on-dark recolouring.
   ========================================================================== */

/* --- Section shell ----------------------------------------------------- */
.content-area {
  position: relative;
}

/* --- Vertical rhythm --------------------------------------------------
   REMOVED. This file used to carry a second copy of the .pad* family, scoped
   to .content-area and therefore at higher specificity than the set in
   css/base.css. The two disagreed, so a block's spacing depended on whether it
   happened to emit .content-area rather than on what the editor chose:

     .pad          base 3.5rem / 5rem responsive   here 5rem flat
     .pad-top      base 3.5rem / 5rem responsive   here 5rem flat
     .pad-bottom   base 3.5rem / 5rem responsive   here 5rem flat
     .pad-reduced  base 2.4rem flat                here 3.5rem flat

   css/base.css is now the ONLY definition, responsive throughout, with reduced
   as a true half. Do not add a .content-area-scoped copy back: a block that
   needs different spacing should say so in its own stylesheet.

   One thing did rely on the specificity — pagebuilder/logo_bar/logo_bar.css set
   `.logo-bar { padding-block: 2rem }` on the block ROOT, which the compound rule
   silently beat. That rule is now scoped to the footer strip it was meant for,
   so the logo_bar block is driven by its .pad class like every other block. */

/* --- Section grounds --------------------------------------------------
   The reachable background tokens. Coloured grounds carry white text; the
   per-element recolouring (headings, eyebrow, intro, links) lives with those
   components and keys off these class names. */
.bg-white      { background: var(--surface); }
.bg-light-grey { background: var(--surface-alt); }
.bg-mid-grey   { background: var(--neutral-300); }
/* Brand highlight ground — a bright accent panel, e.g. a big CTA. LIGHT: it
   carries dark text, so it stays OUT of the dark-ground groups below. The value
   is per-brand (--yellow, set by DC); a brand that defines no --yellow falls
   back to the light-grey ground. Prose links and eyebrows drop to ink because
   the tertiary accent is too low-contrast to sit on the accent itself. */
.bg-yellow     { background: var(--yellow, var(--surface-alt)); color: var(--ink); }
.bg-yellow :is(p, li, blockquote, dd) a:not(.btn):not(.button) { color: var(--ink); text-decoration-thickness: 2px; }
.bg-yellow .eyebrow { color: var(--ink); }
.bg-blue       { background: var(--surface-blue);     color: var(--text-on-dark); }
.bg-dark-blue  { background: var(--surface-dark-alt);  color: var(--text-on-dark); }
.bg-black      { background: var(--surface-muted);     color: var(--text-on-dark); }
.bg-red        { background: var(--surface-brand);     color: var(--text-on-brand); }

/* Legacy authored background classes. These were NEVER ACF choices (the field
   only ever stored bg-white / -light-grey / -mid-grey / -blue / -dark-blue /
   -black / -red / -inherit, all defined above). They came from the source
   themes' SCSS and could have been hand-added in WYSIWYG or a Custom CSS field,
   so a stored page may still carry them. Alias each to its canonical equivalent
   so it paints correctly. Grouped into the dark-ground text rules below too.
   Safe to delete once a content sweep replaces them. */
.bg-magenta                 { background: var(--surface-brand);    color: var(--text-on-brand); }
.bg-dark, .bg-dc-dark-blue  { background: var(--surface-dark-alt); color: var(--text-on-dark); }
.bg-dc-blue, .bg-mid-blue   { background: var(--surface-blue);     color: var(--text-on-dark); }
.bg-dark-grey               { background: var(--surface-muted);    color: var(--text-on-dark); }
.bg-light                   { background: var(--surface-alt); }
.bg-inherit                 { background: transparent; }

/* Body copy on a dark or coloured ground.
   This used to soften to a tint of white (0.86, then 0.92). A tint cannot work
   here: a brand fill sized to carry white text at exactly 4.5:1 has no headroom
   left, so ANY alpha below 1 drops it under (0.92 measured 4.09:1 on ucdon's
   blue). Full strength, and the softening idea is retired. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) p {
  color: var(--text-on-dark);
}

/* Heading emphasis on a coloured ground. --display-em is chosen to read on the
   PAGE ground (white), and on a brand fill it can collapse: dc's teal em on dc's
   orange fill measured 2.73:1. On these grounds emphasis rides the on-ground
   text colour by default. A child can point --display-em-on-dark at a brand
   accent instead, but only one that clears 3:1 on that child's own fills. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(h1, h2, h3, h4, h5, h6) em {
  color: var(--display-em-on-dark);
}

/* bg-mid-grey is a mid-tone ground, not a light one: --text-muted on it measured
   4.34:1. Body copy there takes the full-strength text colour. */
.bg-mid-grey :is(p, li, dd, blockquote) {
  color: var(--text);
}
/* Brand colour on mid-grey fails on every site: the brand link measured 3.16:1
   (dc) to 4.03:1 (dncg), and brand eyebrows 2.52:1 (ucnl) to 2.66:1 (hesta).
   --text-heading is the darkest brand-family token and clears AA on #cacaca
   everywhere. Links keep their underline, so colour is not the only cue. */
.bg-mid-grey :is(p, li, dd, blockquote) a:not(.btn):not(.button),
.bg-mid-grey .eyebrow,
.bg-mid-grey :is(h1, h2, h3, h4, h5, h6) em {
  color: var(--text-heading);
}
.bg-mid-grey :is(p, li, dd, blockquote) a:not(.btn):not(.button) {
  text-decoration-thickness: 2px;
}
/* Prose links on a coloured ground — scoped to paragraph/blockquote/definition
   text so it never leaks into UI links (tabs, nav, chips), which live in <li> or
   stand alone, not in prose.

   Split by how dark the ground actually is. --accent-on-dark is calibrated against
   --navy-deep and holds up there, but a mid-tone BRAND fill is much lighter and the
   accent collapses on it: 2.07:1 on ucdon's blue, 1.41:1 on ucnl's green, 2.20:1 on
   hesta's. Those grounds are sized to carry white, so links there ride the on-dark
   text colour and lean on the underline to stay distinguishable. */
:is(.bg-dark-blue, .bg-navy, .bg-black, .bg-dark, .bg-dc-dark-blue, .bg-dark-grey) :is(p, blockquote, dd) a:not(.button):not(.btn) {
  color: var(--accent-on-dark);
}
:is(.bg-blue, .bg-red, .bg-magenta, .bg-dc-blue, .bg-mid-blue) :is(p, blockquote, dd) a:not(.button):not(.btn) {
  color: var(--text-on-dark);
  text-decoration-thickness: 2px;
}

/* Opaque light panels keep their dark text on a coloured section ground — the
   section's white text/headings must not leak into a white or light card/panel
   (a bg-white call_to_action panel, a .qa-card, a tab panel). THIS is the single
   place the opaque-light-panel classes are listed; add new ones to the :is().
   .facility-card added 2026-08-05: the block-modifier convergence moved
   facility_cards onto the global grounds, and its white card on a bg-dark-blue
   section rendered white-on-white at 1.00:1 on all four sites swept.
   Two classes + element outranks the section leak above, so it is order-safe. */
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) {
  color: var(--text);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(h1, h2, h3, h4, h5, h6) {
  color: var(--text-heading);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(h1, h2, h3, h4, h5, h6) em {
  color: var(--display-em);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) .eyebrow {
  color: var(--blue-text);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) :is(p, li) {
  color: var(--text-muted);
}
:is(.bg-blue, .bg-dark-blue, .bg-navy, .bg-black, .bg-red, .bg-magenta, .bg-dark, .bg-dc-dark-blue, .bg-dc-blue, .bg-mid-blue, .bg-dark-grey) :is(.bg-white, .bg-light-grey, .bg-mid-grey, .qa-card, [role="tabpanel"], .card, .card-grid__card, .feature-card, .tg-card, .level-chip, .facility-card, .facilities-modal) a:not(.button):not(.btn) {
  color: var(--blue-text);
}

/* --- The tri-colour rule ----------------------------------------------
   The structural device: three equal thirds in the audience colours. Used
   under the header, on the footer edge, and as a section-edge accent. Markup
   drops <hr class="tri-rule"> or a decorative element carrying the class. */
.tri-rule,
.rule-tri {
  height: 5px;
  border: 0;
  margin: 0;
  background: var(--rule-tri);
}
.content-area--tri-top::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--rule-tri);
}
/* ================================
   TESTIMONIAL SHORTCODE STYLES
   ================================ */

/* --------------------------------
   DEFAULT COLOUR PALETTE
   Source: dc (byte-identical across all six sites). The shortcode is fully
   tokenised via these --ts-* custom properties; every rule below uses
   var(--ts-*), so this block is the only place colour is set. Values are
   mapped onto the DNCG brand token layer (no hex outside tokens.css), so
   per-site brand colours flow through automatically. The PHP shortcode still
   overrides --ts-* inline when a `bgcolor` attribute is supplied.
   FLAG (Phase 3 brand pass): the original was a Tailwind-style blue ramp
   (#1e3a8a / #3b82f6 / #dbeafe); the two lighter blues are derived from
   --surface-blue with color-mix. Revisit when the shortcode is redesigned.
   -------------------------------- */
:root {
  --ts-primary: var(--surface-blue);
  --ts-secondary: color-mix(in srgb, var(--surface-blue) 65%, var(--surface));
  --ts-light: color-mix(in srgb, var(--surface-blue) 15%, var(--surface));
  --ts-dark: var(--surface-blue);
  --ts-text: var(--text-on-dark);
  --ts-text-on-secondary: var(--text-on-dark);
  --ts-shadow-rgb: var(--surface-blue-rgb);

  /* Neutral colours (not affected by bgcolor) */
  --ts-neutral-dark: var(--text-heading);
  --ts-neutral-gray: var(--neutral-500);
  --ts-neutral-light: var(--surface-alt);
  --ts-white: var(--surface);
}

/* Base shortcode wrapper */
.dncg-sc-testimonial {
  margin: 2rem 0;
}

/* Alignment variations */
.dncg-sc-testimonial-align--left {
  text-align: left;
}

.dncg-sc-testimonial-align--center {
  text-align: center;
}

.dncg-sc-testimonial-align--right {
  text-align: right;
}

/* ================================
   SPEECH IMAGE LAYOUT
   ================================ */

.dncg-sc-testimonial-speechimage {
  max-width: 100%;
}

.dncg-sc-testimonial-speechimage__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Quote bubble - base styles */
.dncg-sc-testimonial-speechimage__quote {
  background: linear-gradient(135deg, var(--ts-primary) 0%, var(--ts-secondary) 100%);
  padding: 2rem;
  margin: 0 1rem 2rem;
  font-size: 1.1rem;
  line-height: 1.6;
  border-radius: 12px;
  color: var(--ts-text) !important;
  position: relative;
  box-shadow: 0 4px 15px rgba(var(--ts-shadow-rgb), 0.2);
  transition: all 0.3s ease;
}

/* --------------------------------
   VERTICAL ORIENTATION
   -------------------------------- */

.dncg-sc-testimonial-speechimage--vertical {
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}

.dncg-sc-testimonial-speechimage--vertical .dncg-sc-testimonial-speechimage__quote {
  width: 100%;
  box-sizing: border-box;
}

/* Speech bubble pointer - pointing down */
.dncg-sc-testimonial-speechimage--vertical .dncg-sc-testimonial-speechimage__quote::after {
  content: "";
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 15px solid var(--ts-secondary);
}

.dncg-sc-testimonial-speechimage--vertical .dncg-sc-testimonial-speechimage__person {
  text-align: center;
  margin-top: -1rem;
}

/* --------------------------------
   HORIZONTAL ORIENTATIONS
   -------------------------------- */

.dncg-sc-testimonial-speechimage--horizontal-left,
.dncg-sc-testimonial-speechimage--horizontal-right {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.dncg-sc-testimonial-speechimage__inner--horizontal {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
}

/* Person block in horizontal - fixed width */
.dncg-sc-testimonial-speechimage--horizontal-left .dncg-sc-testimonial-speechimage__person,
.dncg-sc-testimonial-speechimage--horizontal-right .dncg-sc-testimonial-speechimage__person {
  flex: 0 0 auto;
  width: 150px;
  text-align: center;
}

/* Quote takes remaining space */
.dncg-sc-testimonial-speechimage__inner--horizontal .dncg-sc-testimonial-speechimage__quote {
  flex: 1;
  margin: 0;
}

/* Horizontal Left: pointer pointing left (toward person) */
.dncg-sc-testimonial-speechimage__quote--right::after {
  content: "";
  position: absolute;
  left: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-right: 15px solid var(--ts-secondary);
}

/* Horizontal Right: pointer pointing right (toward person) */
.dncg-sc-testimonial-speechimage__quote--left::after {
  content: "";
  position: absolute;
  right: -15px;
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
  border-left: 15px solid var(--ts-secondary);
}

/* --------------------------------
   PERSON BLOCK (shared)
   -------------------------------- */

.dncg-sc-testimonial__image {
  max-width: 200px;
  margin: 0 auto;
}

.dncg-sc-testimonial__image img {
  width: 100%;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  object-position: center bottom;
  transition: all 0.3s ease;
}

.dncg-sc-testimonial__image img:hover {
  transform: scale(1.02);
}

/* Avatar fallback */
.dncg-sc-testimonial__avatar-fallback {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ts-light), var(--ts-primary));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: var(--ts-white);
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(var(--shadow-rgb), 0.1);
  transition: all 0.3s ease;
}

/* Attribution */
.dncg-sc-testimonial__attribution {
  margin-top: -2.5rem;
  text-align: center;
  display: inline-block;
  transform: rotate(-3deg);
}

.dncg-sc-testimonial__name {
  font-family: var(--sc-font-name);
  font-weight: 800;
  font-size: 2rem;
  text-align: center;
  text-transform: uppercase;
  color: var(--ts-text-on-secondary);
  line-height: 1.1;
  display: inline-block;
  background: var(--ts-secondary);
  padding: 0.2em 0.4em;
  margin-bottom: 0;
}

.dncg-sc-testimonial__course {
  font-size: 1.1rem;
  color: var(--ts-neutral-dark);
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
  background: var(--ts-secondary);
  padding: 0.15em 0.4em;
}

/* --------------------------------
   RESPONSIVE - HORIZONTAL
   -------------------------------- */

@media (max-width: 600px) {
  /* Stack horizontal layouts on mobile */
  .dncg-sc-testimonial-speechimage__inner--horizontal {
    flex-direction: column;
  }

  .dncg-sc-testimonial-speechimage--horizontal-left .dncg-sc-testimonial-speechimage__person,
  .dncg-sc-testimonial-speechimage--horizontal-right .dncg-sc-testimonial-speechimage__person {
    width: auto;
  }

  /* Reorder: quote first, then person (for both horizontal variants) */
  .dncg-sc-testimonial-speechimage--horizontal-left
    .dncg-sc-testimonial-speechimage__inner--horizontal {
    flex-direction: column-reverse;
  }

  /* Hide horizontal pointers on mobile */
  .dncg-sc-testimonial-speechimage__quote--right::after,
  .dncg-sc-testimonial-speechimage__quote--left::after {
    display: none;
  }

  /* Add vertical pointer instead */
  .dncg-sc-testimonial-speechimage--horizontal-left .dncg-sc-testimonial-speechimage__quote,
  .dncg-sc-testimonial-speechimage--horizontal-right .dncg-sc-testimonial-speechimage__quote {
    margin-bottom: 2rem;
  }

  .dncg-sc-testimonial-speechimage--horizontal-left .dncg-sc-testimonial-speechimage__quote::before,
  .dncg-sc-testimonial-speechimage--horizontal-right
    .dncg-sc-testimonial-speechimage__quote::before {
    content: "";
    position: absolute;
    bottom: -15px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 15px solid var(--ts-secondary);
  }
}

@media (max-width: 767px) {
  .dncg-sc-testimonial-speechimage__quote {
    font-size: 1.1rem;
    padding: 1.5rem;
  }

  .dncg-sc-testimonial__image {
    max-width: 150px;
  }

  .dncg-sc-testimonial__image img {
    max-height: 180px;
  }

  .dncg-sc-testimonial__avatar-fallback {
    width: 100px;
    height: 100px;
    font-size: 2rem;
  }

  .dncg-sc-testimonial__attribution {
    margin-top: -1rem;
  }

  .dncg-sc-testimonial__name {
    font-size: 1.5rem;
  }

  .dncg-sc-testimonial__course {
    font-size: 1.1rem;
  }
}

/* ================================
   CARD LAYOUT (Polaroid/Story style)
   ================================ */

.dncg-sc-testimonial-card {
  max-width: 350px;
}

.dncg-sc-testimonial-card__inner {
  background: var(--ts-white);
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(var(--shadow-rgb), 0.1);
  overflow: hidden;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.dncg-sc-testimonial-card__inner:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(var(--shadow-rgb), 0.15);
}

.dncg-sc-testimonial-card__image {
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
}

.dncg-sc-testimonial-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.dncg-sc-testimonial-card__content {
  padding: 1.5rem;
}

.dncg-sc-testimonial-card__attribution {
  margin-bottom: 1rem;
  display: inline-block;
  transform: rotate(-2deg);
}

.dncg-sc-testimonial-card__name {
  font-family: var(--sc-font-name);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--ts-text-on-secondary);
  line-height: 1.1;
  display: inline-block;
  background: var(--ts-secondary);
  padding: 0.15em 0.3em;
}

.dncg-sc-testimonial-card__course {
  font-size: 1.1rem;
  color: var(--ts-text-on-secondary);
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
  background: var(--ts-secondary);
  padding: 0.1em 0.3em;
}

.dncg-sc-testimonial-card__quote {
  font-family: var(--sc-font-quote);
  font-size: 1.1rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ts-neutral-dark);
  margin: 0;
  padding: 0;
}

/* No image variant */
.dncg-sc-testimonial-card.dncg-sc-testimonial--no-image .dncg-sc-testimonial-card__content {
  padding-top: 2rem;
}

/* ================================
   HIGHLIGHT LAYOUT (Featured/Hero)
   ================================ */

.dncg-sc-testimonial-highlight {
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.dncg-sc-testimonial-highlight__inner {
  background: linear-gradient(135deg, var(--ts-primary) 0%, var(--ts-secondary) 100%);
  border-radius: 16px;
  padding: 3rem;
  display: flex;
  align-items: center;
  gap: 3rem;
  box-shadow: 0 8px 30px rgba(var(--ts-shadow-rgb), 0.3);
}

.dncg-sc-testimonial-highlight__quote-area {
  flex: 1;
  position: relative;
}

.dncg-sc-testimonial-highlight__mark {
  font-family: var(--sc-font-quote-mark);
  font-size: 6rem;
  color: var(--ts-white);
  opacity: 0.3;
  line-height: 0.8;
  position: absolute;
  top: -1rem;
  left: -0.5rem;
}

.dncg-sc-testimonial-highlight__quote {
  font-family: var(--sc-font-quote);
  font-size: 1.5rem;
  font-style: italic;
  line-height: 1.6;
  color: var(--ts-text) !important;
  margin: 0;
  padding: 0;
  padding-left: 2.5rem;
}

.dncg-sc-testimonial-highlight__person {
  flex: 0 0 auto;
  text-align: center;
  max-width: 200px;
}

.dncg-sc-testimonial-highlight__image {
  margin-bottom: 1rem;
}

.dncg-sc-testimonial-highlight__image img {
  width: 150px;
  height: auto;
  max-height: 200px;
  object-fit: contain;
  object-position: center bottom;
}

.dncg-sc-testimonial-highlight__attribution {
  display: inline-block;
  transform: rotate(-3deg);
}

.dncg-sc-testimonial-highlight__name {
  font-family: var(--sc-font-name);
  font-weight: 800;
  font-size: 1.5rem;
  text-transform: uppercase;
  color: var(--ts-neutral-dark);
  line-height: 1.1;
  display: inline-block;
  background: var(--ts-white);
  padding: 0.15em 0.3em;
}

.dncg-sc-testimonial-highlight__course {
  font-size: 1.1rem;
  color: var(--ts-neutral-dark);
  font-weight: 600;
  line-height: 1.3;
  display: inline-block;
  background: var(--ts-white);
  padding: 0.1em 0.3em;
}

/* No image variant */
.dncg-sc-testimonial-highlight.dncg-sc-testimonial--no-image .dncg-sc-testimonial-highlight__inner {
  flex-direction: column;
  text-align: center;
}

.dncg-sc-testimonial-highlight.dncg-sc-testimonial--no-image .dncg-sc-testimonial-highlight__quote {
  padding-left: 0;
}

.dncg-sc-testimonial-highlight.dncg-sc-testimonial--no-image .dncg-sc-testimonial-highlight__mark {
  position: relative;
  top: 0;
  left: 0;
  display: block;
  margin-bottom: -2rem;
}

/* Responsive */
@media (max-width: 768px) {
  .dncg-sc-testimonial-highlight__inner {
    flex-direction: column;
    padding: 2rem;
    gap: 2rem;
  }

  .dncg-sc-testimonial-highlight__quote-area {
    order: 1;
  }

  .dncg-sc-testimonial-highlight__person {
    order: 2;
  }

  .dncg-sc-testimonial-highlight__quote {
    font-size: 1.25rem;
    padding-left: 2rem;
  }

  .dncg-sc-testimonial-highlight__mark {
    font-size: 4rem;
  }

  .dncg-sc-testimonial-highlight__image img {
    width: 120px;
  }
}

/* ================================
   INLINE LAYOUT (Compact)
   ================================ */

.dncg-sc-testimonial-inline {
  max-width: 700px;
}

.dncg-sc-testimonial-inline__inner {
  display: flex;
  align-items: center;
  gap: 1rem;
}

/* Circular image */
.dncg-sc-testimonial-inline__image {
  flex: 0 0 auto;
}

.dncg-sc-testimonial-inline__image img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
}

/* Avatar fallback */
.dncg-sc-testimonial-inline__avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ts-light), var(--ts-primary));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--ts-white);
  font-weight: 700;
  flex: 0 0 auto;
}

/* Content area */
.dncg-sc-testimonial-inline__content {
  flex: 1;
}

.dncg-sc-testimonial-inline__quote {
  font-size: 1.1rem;
  font-style: italic;
  color: var(--ts-neutral-dark);
  margin: 0;
  padding: 0;
  line-height: 1.5;
}

.dncg-sc-testimonial-inline__quote::before {
  content: '"';
  color: var(--ts-primary);
  font-weight: 700;
}

.dncg-sc-testimonial-inline__quote::after {
  content: '"';
  color: var(--ts-primary);
  font-weight: 700;
}

.dncg-sc-testimonial-inline__attribution {
  margin-top: 0.25rem;
  font-size: 1.1rem;
  color: var(--ts-neutral-gray);
}

.dncg-sc-testimonial-inline__name {
  font-weight: 700;
  color: var(--ts-neutral-dark);
}

.dncg-sc-testimonial-inline__separator {
  margin-right: 0.25rem;
}

.dncg-sc-testimonial-inline__course {
  font-weight: 400;
}

/* Size variations */
.dncg-sc-testimonial-inline--small .dncg-sc-testimonial-inline__image img,
.dncg-sc-testimonial-inline--small .dncg-sc-testimonial-inline__avatar {
  width: 40px;
  height: 40px;
  font-size: 1.1rem;
}

.dncg-sc-testimonial-inline--small .dncg-sc-testimonial-inline__quote {
  font-size: 1.1rem;
}

.dncg-sc-testimonial-inline--small .dncg-sc-testimonial-inline__attribution {
  font-size: 1.1rem;
}

.dncg-sc-testimonial-inline--large .dncg-sc-testimonial-inline__image img,
.dncg-sc-testimonial-inline--large .dncg-sc-testimonial-inline__avatar {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}

.dncg-sc-testimonial-inline--large .dncg-sc-testimonial-inline__quote {
  font-size: 1.1rem;
}

.dncg-sc-testimonial-inline--large .dncg-sc-testimonial-inline__attribution {
  font-size: 1.1rem;
}

/* Mobile: stack vertically */
@media (max-width: 480px) {
  .dncg-sc-testimonial-inline__inner {
    flex-direction: column;
    text-align: center;
  }
}

/* ================================
   QUOTE ONLY LAYOUT
   ================================ */

.dncg-sc-testimonial-quote-only {
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 2rem 0;
}

.dncg-sc-testimonial-quote-only__text {
  font-family: var(--sc-font-quote);
  font-size: 1.5rem;
  line-height: 1.6;
  color: var(--ts-neutral-dark);
  margin: 0;
  padding: 0;
  position: relative;
}

.dncg-sc-testimonial-quote-only__mark {
  font-family: var(--sc-font-quote-mark);
  font-size: 3rem;
  color: var(--ts-primary);
  opacity: 0.3;
  line-height: 1;
}

.dncg-sc-testimonial-quote-only__mark--open {
  margin-right: 0.25rem;
}

.dncg-sc-testimonial-quote-only__mark--close {
  margin-left: 0.25rem;
}

.dncg-sc-testimonial-quote-only__attribution {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  color: var(--ts-neutral-gray);
}

.dncg-sc-testimonial-quote-only__attribution .dncg-sc-testimonial__name {
  display: inline;
  font-size: inherit;
  color: var(--ts-neutral-dark);
}

.dncg-sc-testimonial-quote-only__attribution .dncg-sc-testimonial__course {
  display: inline;
  font-size: inherit;
  font-weight: 400;
}

.dncg-sc-testimonial-quote-only__separator {
  margin: 0 0.5rem;
}

/* Size variations */
.dncg-sc-testimonial-quote-only--small .dncg-sc-testimonial-quote-only__text {
  font-size: 1.1rem;
}

.dncg-sc-testimonial-quote-only--small .dncg-sc-testimonial-quote-only__mark {
  font-size: 2rem;
}

.dncg-sc-testimonial-quote-only--large .dncg-sc-testimonial-quote-only__text {
  font-size: 2rem;
}

.dncg-sc-testimonial-quote-only--large .dncg-sc-testimonial-quote-only__mark {
  font-size: 4rem;
}

@media (max-width: 767px) {
  .dncg-sc-testimonial-quote-only__text {
    font-size: 1.25rem;
  }

  .dncg-sc-testimonial-quote-only__mark {
    font-size: 2.5rem;
  }

  .dncg-sc-testimonial-quote-only--large .dncg-sc-testimonial-quote-only__text {
    font-size: 1.5rem;
  }
}

.dncg-sc-testimonial blockquote {
  border-left: none;
}