.evolution-legacy-page {
	margin-top: 0;
}

.evolution-legacy-page .wp-block-post-content {
	margin-top: 0;
}

/* WordPress's default get_the_password_form() output (unchanged - legacy's
   own real markup, confirmed live on evolution.edu.au/agent-portal/, is the
   exact same unmodified "Password: <input/></label> <input type=submit>"
   structure, no custom template). It inherits legacy's real GLOBAL form
   styling (style.css:186-200 `select, form input`), which this codebase
   otherwise scopes per-block rather than applying globally - scoped here to
   .post-password-form specifically since it's the one WP-core form with no
   block of its own to scope through. Width/padding on the form itself is a
   reasonable readable-line-length default, not a confirmed legacy value -
   legacy's raw markup has no container of its own either. */
.evolution-legacy-page .post-password-form {
	max-width: 1200px;
	margin: 2cm auto 0;
	padding: 3rem 1.5rem;
	text-align: left;
}
.evolution-legacy-page .post-password-form p {
	margin: 0 0 15px;
}
.evolution-legacy-page .post-password-form label {
	display: block;
	color: #1a152e;
	font-size: 14px;
	font-weight: 500;
}
.evolution-legacy-page .post-password-form input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 57px;
	margin-top: 10px;
	padding: 10px 30px;
	background: #F5F8FD;
	outline: 0;
	border-radius: 6px;
	border: 2px solid rgb(240, 240, 240);
	font-size: 16px;
	transition: border-color 0.3s ease 0s;
}
.evolution-legacy-page .post-password-form input:focus {
	border-color: #6B5CF6;
}
.evolution-legacy-page .post-password-form input[type="password"] {
	width: 33.3333%;
}
.evolution-legacy-page .post-password-form input[type="submit"] {
	width: 100%;
	margin-top: 15px;
	font-weight: 600;
	cursor: pointer;
}
.evolution-legacy-page .post-password-form input[type="submit"]:hover {
	border-color: #6B5CF6;
}

.evolution-global-banner .breadcrumbs-wrap {
	background: #000;
	height: 350px;
	overflow: hidden;
	position: relative;
}

.evolution-global-banner .breadcrumbs-wrap img {
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.evolution-global-banner .breadcrumbs-wrap img.mobile {
	display: none;
}

.evolution-global-banner .breadcrumbs-inner {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
}

/* CORRECTED (confirmed live against legacy's real Bootstrap 5.0.2
   bootstrap.min.css): gutter is --bs-gutter-x: .75rem (12px), not 15px, and
   .container's real max-width is responsive - 540/720/960/1140/1320px at
   576/768/992/1200/1400px - not a flat 1140px. Same root cause and fix as
   home-blocks.css's .container rule; see that file's comment for the full
   trace (confirmed via a direct user screenshot comparison at ~1900px
   width). */
.evolution-global-banner .container,
.evolution-about-intro .container,
.evolution-home-video .container {
	box-sizing: border-box;
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
	padding-left: 12px;
	padding-right: 12px;
	width: 100%;
}
@media (min-width: 1400px) {
	.evolution-global-banner .container,
	.evolution-about-intro .container,
	.evolution-home-video .container {
		max-width: 1320px;
	}
}

/* evolution-about-intro's .row/.col-lg-12 wrapper (a single full-width
   column) doesn't visibly need flex to lay out correctly - .container
   above already centres/constrains it - but is completed here for
   selector-coverage consistency with the other block families. */
.evolution-about-intro .row {
	display: flex;
	flex-wrap: wrap;
	margin: 0 -15px;
}
.evolution-about-intro .col-lg-12 {
	flex: 0 0 100%;
	max-width: 100%;
	padding: 0 15px;
	box-sizing: border-box;
}

.evolution-global-banner .breadcrumbs-text {
	background: rgba(0, 0, 0, 0.5);
	border-radius: 28px;
	color: #fff;
	max-width: 1200px;
	padding: 40px;
	width: max-content;
}

.evolution-global-banner .breadcrumbs-title {
	color: #fff;
	font-size: 48px;
	font-weight: 700;
	line-height: 1;
	margin: 0 0 15px;
	text-transform: capitalize;
}

.evolution-global-banner .back-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.evolution-global-banner .back-nav li {
	color: #fff;
	display: inline;
	font-size: 16px;
	font-weight: 400;
	opacity: 0.8;
}

.evolution-global-banner .back-nav li::after {
	background: #fff;
	border-radius: 50%;
	content: "";
	display: inline-block;
	height: 7px;
	margin: 0 6px 0 12px;
	width: 7px;
}

.evolution-global-banner .back-nav li:last-child::after {
	content: none;
}

.evolution-global-banner .back-nav a {
	color: #fff;
	text-decoration: none;
}

/* .white-gray-bg (style.css:1881-1883, confirmed live): a hard 50/50
   white/light-gray split, not the flat gray this had been approximated as -
   legacy's real about-us wrapper is "about__area white-gray-bg
   multi-dots-sqaure p-relative pt---80", the base 50% split, not the
   history-section (30%) or home-about-section (16%) variants also defined
   nearby, neither of which this page's classes include. */
.evolution-about-intro {
	background: linear-gradient(90deg, #FFFFFF 50%, #F3F3F3 50%);
	overflow: hidden;
	padding-bottom: 80px;
	padding-top: 80px;
	position: relative;
}
/* Same WordPress global block-gap margin as .evolution-our-history (see
   content-blocks.css for the full trace): `:root :where(.is-layout-flow) >
   * { margin-block-start: ... }` inserts a gap above this section that sat
   outside its own background, showing as a plain white strip between this
   section and whatever precedes it (e.g. evolution/global-banner). Here it
   only showed up as a visible notch on the RIGHT half, since the LEFT half
   of this section's own background is white and blended into the page's
   white background underneath the gap - the gray right half didn't.
   section.evolution-about-intro (element+class, specificity 0,1,1) beats
   the `:root`-prefixed rule's (0,1,0) regardless of load order. */
section.evolution-about-intro {
	margin-block-start: 0;
}

/* No `top` here, matching legacy style.css:1893-1902's real
   .multi-dots-sqaure:before rule exactly (position: absolute; right: 10%;
   only - no top at all). Static-position fallback then places the square
   just past the section's own 80px padding-top instead of pinned flush to
   the section's very top edge (what an explicit `top: 0` had been doing
   here), matching the confirmed-live lower placement on
   evolution.edu.au/disclaimer/. */
.evolution-about-intro::before {
	background: url("../images/combined-shape.svg") no-repeat right top;
	content: "";
	height: 180px;
	position: absolute;
	right: 10%;
	width: 180px;
}

.evolution-about-intro .about__content {
	max-width: 1050px;
	position: relative;
	z-index: 1;
}

.evolution-about-intro .section-pretitle {
	color: #333;
	font-size: 20px;
	font-weight: 600;
	line-height: 15px;
	margin-bottom: 20px;
}

.evolution-about-intro .about__title {
	color: #333;
	font-size: 50px;
	font-weight: 700;
	line-height: 54px;
	margin: 0 0 25px;
}

.evolution-about-intro .about__paragraph {
	color: #777;
	font-size: 16px;
	line-height: 22px;
	white-space: pre-line;
}

.evolution-about-intro .about__paragraph h3 {
	color: #333;
	font-size: 28px;
	line-height: 1.25;
	margin: 32px 0 18px;
}

.evolution-about-intro .about__paragraph ul {
	margin-top: 0;
}
/* Privacy policy page (post ID 507) only - every "title" (1. Purpose, 2.
   Collecting your information, etc.) and bullet line on this page is a
   plain <p>, not a real heading/list element (the source content itself
   uses <p> for all of it, matching legacy's own stored markup), so
   removing the browser's default <p> margin here closes every gap at
   once. Scoped to this page specifically, not the shared .evolution-
   about-intro class, so disclaimer/about-us keep their normal paragraph
   spacing. */
.page-id-507 .evolution-about-intro .about__paragraph p {
	margin: 0;
}
.page-id-507 .evolution-about-intro .about__paragraph,
.page-id-229 .evolution-about-intro .about__paragraph,
.page-id-225 .evolution-about-intro .about__paragraph,
.page-id-28 .evolution-about-intro .about__paragraph {
	color: #333;
}
.page-id-507 .evolution-about-intro .about__paragraph,
.page-id-225 .evolution-about-intro .about__paragraph {
	font-size: 18px;
}
.page-id-225 .evolution-about-intro .about__paragraph {
	line-height: 28px;
}
/* Student Support & Welfare page (post ID 225) only - this page's content
   mixes real headings and <ul><li> lists with its paragraphs (unlike the
   flat all-<p> privacy-policy page above), so closing every gap needs to
   zero margin on all of them, not just p. :where() keeps specificity from
   ballooning further than needed - the .page-id-225 prefix alone already
   gives this (0,3,0), enough to beat the shared .about__paragraph h3 rule
   (0,2,1) regardless. */
.page-id-225 .evolution-about-intro .about__paragraph :where(h1, h2, h3, h4, h5, h6, p, ul, ol, li) {
	margin: 0;
}
/* Fully closing every gap above made headings run straight into the
   paragraph/list text right before them with no breathing room at all.
   Re-adding space only above headings (paragraph-to-paragraph and
   list-item-to-list-item stay flush, as asked) - same selector base so
   this wins on source order for the margin-top longhand specifically. */
.page-id-225 .evolution-about-intro .about__paragraph :where(h1, h2, h3, h4, h5, h6) {
	margin-top: 20px;
}
/* The stray <br> tags and trailing "&nbsp;" junk lines that used to sit
   around this page's lists (which the ul + br display:none rule formerly
   here was hiding, and a blank double-newline no CSS rule could reach at
   all) have been removed directly from the stored content instead - see
   the 2026-09-10 content edit. CSS couldn't fully close the gap because
   part of it was a literal blank line in the text, not any element's
   margin/box. */
/* ul's own margin is already 0 (see the earlier zero-all-margins rule).
   This used to be a negative margin-top to counteract a real blank-line
   gap before each list - that gap no longer exists (the content edit
   above removed the "\r\n \t" between the intro sentence and each list's
   first <li> outright, along with the same sequence between items), so
   the negative value was now pulling the list up INTO the preceding
   paragraph's own last line instead of just tightening a gap. A small
   positive margin-top restores real breathing room instead. */
/* Legacy's real global reset is `ul { margin:0; padding:0 }` (style.css
   line 233, confirmed live) - list-style itself is left commented out
   there, so bullets still show, but with no 40px indent the marker sits
   flush with the paragraph text's own left edge instead of the browser
   default's indented position. This theme carries no such sitewide ul
   reset, so padding-left here matches that confirmed value directly. */
.page-id-225 .evolution-about-intro .about__paragraph ul {
	margin-top: 10px;
	margin-bottom: -14px;
	padding-left: 0;
}
/* main.evolution-legacy-page is flex:1 inside .wp-site-blocks's min-
   height:100vh column (theme/evolution/style.css - the shared sticky-
   footer pattern, so short pages push the footer to the viewport bottom
   instead of it riding up under the content). At very short zoom levels
   this page's content no longer fills that full height, so main grows
   past .evolution-about-intro's own box, leaving plain white leftover
   space (not this section's gray-right-half background) between the
   content and the footer. Cascading flex:1 down through the single-child
   chain (main -> its one .wp-block-post-content child -> the about-intro
   section, the last block on this page) makes the section's own box -
   and therefore its background - fill that leftover space instead of
   leaving it blank. Scoped to this page; not a global change to the
   shared sticky-footer/.wp-block-post-content rules other pages rely on. */
.page-id-507 main.evolution-legacy-page {
	display: flex;
	flex-direction: column;
}
.page-id-507 main.evolution-legacy-page > .wp-block-post-content {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.page-id-507 .evolution-about-intro {
	flex: 1;
}

.evolution-about-intro .about__image {
	margin-left: auto;
	margin-right: auto;
	max-width: 1140px;
	padding: 80px 15px 0;
}

.evolution-about-intro .about__image img {
	display: block;
	height: auto;
	max-width: 100%;
}

.evolution-home-video {
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	padding: 160px 0 110px;
	position: relative;
}
/* Same WordPress global block-gap margin as .evolution-about-intro above
   (`:root :where(.is-layout-flow) > * { margin-block-start: ... }`) - this
   section never got the equivalent fix, so a plain white strip from that
   margin sat above its own background/overlay box, between it and
   whatever precedes it (e.g. evolution-about-intro). section.evolution-
   home-video (element+class, specificity 0,1,1) beats the `:root`-
   prefixed rule's (0,1,0) regardless of load order. */
section.evolution-home-video {
	margin-block-start: 0;
}

.evolution-home-video::before {
	background: rgba(44, 44, 44, 0.425);
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.evolution-home-video .contents {
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 571px;
	position: relative;
	width: 100%;
	z-index: 2;
}

.evolution-home-video .d-flex {
	display: flex;
}

.evolution-home-video .align-items-center {
	align-items: center;
}

.evolution-home-video .tour__video-btn--play-six {
	margin-bottom: 40px;
	position: relative;
}

.evolution-home-video .event__video-btn--play-btn {
	align-items: center;
	background: #fff;
	border-radius: 50%;
	display: inline-flex;
	height: 90px;
	justify-content: center;
	position: relative;
	width: 90px;
}

.evolution-home-video .event__video-btn--play-btn::before {
	background: rgba(107, 92, 246, 0.3);
	border-radius: 50%;
	content: "";
	height: 120px;
	left: -15px;
	position: absolute;
	top: -15px;
	width: 120px;
	z-index: -1;
	animation: evolution-video-pulse 2s ease-in-out infinite;
}

/* Pulses the halo's radius from r down to 2r/3 and back to r, the 2r/3
   point landing at the 1s mark of this 2s cycle (so each leg of the pulse -
   shrinking, then growing back - takes 1 second, as requested). Scaling via
   transform rather than animating width/height/border-radius directly
   keeps this off the layout/paint path (GPU-composited only). */
@keyframes evolution-video-pulse {
	0%,
	100% {
		transform: scale(1);
	}
	50% {
		transform: scale(0.6667);
	}
}

.evolution-home-video .event__video-btn--play-btn::after {
	background: #fff;
	border-radius: 50%;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.evolution-home-video .video-icon {
	display: block;
	width: 28px;
	height: 28px;
	margin-left: 4px;
	position: relative;
	z-index: 1;
}

.evolution-home-video .video-title {
	color: #fff;
	font-size: 50px;
	font-weight: 600;
	line-height: 1.15;
	margin: 0 0 40px 30px;
}

.evolution-home-video p {
	color: #fff;
	font-size: 22px;
	margin: 0;
	max-width: 620px;
}

@media (max-width: 992px) {
	.evolution-home-video {
		padding: 60px 0 40px;
	}

	.evolution-home-video .video-title {
		font-size: 30px;
	}

	.evolution-home-video p {
		font-size: 16px;
	}
}

@media screen and (max-width: 600px) {
	.evolution-global-banner .breadcrumbs-wrap {
		height: auto;
		min-height: 200px;
	}

	.evolution-global-banner .breadcrumbs-wrap img {
		min-height: 200px;
	}

	.evolution-global-banner .breadcrumbs-text {
		max-width: 330px;
		padding: 20px 15px;
	}

	.evolution-global-banner .breadcrumbs-title {
		font-size: 26px;
		line-height: 1.15;
	}

	.evolution-about-intro {
		padding-bottom: 60px;
		padding-top: 60px;
	}

	.evolution-about-intro .about__title {
		font-size: 30px;
		line-height: 1.2;
	}
}