/* ==========================================================================
   City Infomart — static site stylesheet
   Layout metrics, colours, type scale and breakpoints are taken from the
   original design so the static build matches it.
   ========================================================================== */

@import url("../fonts/jost.css");
@import url("../fonts/roboto-slab.css");

:root {
	--green: #03B97C;
	--green-tint: rgba(3, 185, 124, .1);
	--navy: #052044;
	--navy-deep: #01291C;
	--grey-bg: #F5F5F5;
	--white: #FFFFFF;
	--ink: #052044;
	--font-body: "Jost", sans-serif;
	--font-alt: "Roboto Slab", serif;
	--container: 1140px;
	--gap: 20px;
	--radius: 5px;
	--bp-tablet: 1024px;
	--bp-mobile: 767px;
}

/* --------------------------------------------------------------------------
   Font Awesome Free 5.15.3 (subset) — icons: CC BY 4.0, fonts: SIL OFL 1.1.
   https://fontawesome.com/license/free
   -------------------------------------------------------------------------- */
@font-face {
	font-family: "Font Awesome 5 Free";
	font-style: normal;
	font-weight: 900;
	font-display: block;
	src: url("../fonts/fa-solid-900.woff2") format("woff2");
}
@font-face {
	font-family: "Font Awesome 5 Brands";
	font-style: normal;
	font-weight: 400;
	font-display: block;
	src: url("../fonts/fa-brands-400.woff2") format("woff2");
}
.fa, .fas { font-family: "Font Awesome 5 Free"; font-weight: 900; }
.fab { font-family: "Font Awesome 5 Brands"; font-weight: 400; }
.fa, .fab, .fas {
	-moz-osx-font-smoothing: grayscale;
	-webkit-font-smoothing: antialiased;
	display: inline-block;
	font-style: normal;
	font-variant: normal;
	line-height: 1;
	text-rendering: auto;
}

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

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

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 18px;
	font-weight: 400;
	line-height: 23px;
	overflow-x: hidden;
}

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

h1, h2, h3, h4, h5, h6 { font-family: var(--font-body); margin: 0; font-weight: 600; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

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

.accent { color: var(--green); }

/*:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }*/

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: calc(var(--container) + 40px);
	margin: 0 auto;
	padding: 0 20px;
}

.row { display: flex; flex-wrap: wrap; }
.col { width: 100%; min-width: 0; }

.stack > * + * { margin-top: var(--gap); }

.section { position: relative; }
.section--grey { background: var(--grey-bg); }
.section--tint { background: var(--green-tint); }

@media (min-width: 768px) {
	.col--hero-text { width: 58.929%; }
	.col--hero-media { width: 41.028%; }
	.col--welcome-text { width: 56.337%; }
	.col--welcome-media { width: 43.574%; }
	.col--cta-text { width: 36.875%; }
}

@media (min-width: 768px) and (max-width: 1024px) {
	.col--hero-text { width: 60%; }
	.col--hero-media { width: 40%; }
	.col--welcome-text, .col--welcome-media, .col--cta-text { width: 100%; }
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
	display: inline-block;
	background: var(--green);
	color: var(--white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	border: 0;
	border-radius: var(--radius);
	padding: 12px 24px;
	transition: background-color .3s, color .3s;
}

.btn:hover, .btn:focus { background: var(--navy); color: var(--white); }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.header {
	width: 100%; display: block; 
	position: relative;
	z-index: 60;
	background: var(--green-tint);
	padding: 15px 0;
}

.header__inner { display: flex; align-items: center; }
.header__brand { width: 75%; }
.header__logo { display: block; max-width: 52.207%; }
.header__logo img { width: 75%; }
.header__nav-area { width: 100%; display: flex; justify-content: flex-end; }

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

.nav__item { position: relative; }

.nav__link {
	display: block;
	padding: 5px 16px;
	font-size: 18px;
	font-weight: 400;
	color: var(--navy);
	transition: color .3s;
}

.nav__link:hover,
.nav__link:focus,
.nav__item.is-active > .nav__link { color: var(--green); }

.nav__row { display: flex; align-items: center; }

.nav__caret {
	border: 0;
	background: none;
	color: inherit;
	padding: 12px 4px 12px 0;
	font-size: 12px;
	line-height: 1;
}

.nav__item--parent:hover .nav__link,
.nav__item--parent.is-open > .nav__link { color: var(--green); }

.nav__submenu {
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 285px;
	background: var(--white);
	box-shadow: 0 4px 18px rgba(5, 32, 68, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .25s, transform .25s, visibility .25s;
	z-index: 20;
}

.nav__item--parent:hover .nav__submenu,
.nav__item--parent:focus-within .nav__submenu,
.nav__item--parent.is-open .nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.nav__submenu a {
	display: block;
	padding: 11px 18px;
	font-size: 16px;
	font-weight: 400;
	color: var(--navy);
	border-bottom: 1px solid rgba(5, 32, 68, .07);
	transition: background-color .3s, color .3s;
}

.nav__submenu li:last-child a { border-bottom: 0; }

.nav__submenu a:hover,
.nav__submenu a:focus,
.nav__submenu a.is-active { background: var(--green); color: var(--white); }

.burger {
	display: none;
	margin-left: auto;
	border: 0;
	background: var(--green);
	color: var(--white);
	width: 44px;
	height: 40px;
	font-size: 18px;
	align-items: center;
	justify-content: center;
}

/* Mobile drawer */
.mobile-nav {
	position: absolute;
	top: 70px;
	left: 0;
	width: 100%;
	background: var(--white);
	box-shadow: 0 10px 24px rgba(5, 32, 68, .14);
	z-index: 50;
}

.mobile-nav[hidden] { display: none; }

.mobile-nav__list { padding: 6px 0 14px; }

.mobile-nav__link {
	display: block;
	padding: 12px 0;
	font-size: 18px;
	color: var(--navy);
	border-bottom: 1px solid rgba(5, 32, 68, .07);
}

.mobile-nav__link.is-active,
.mobile-nav__link:hover { color: var(--green); }

.mobile-nav__row { display: flex; align-items: center; }
.mobile-nav__row .mobile-nav__link { flex: 1; }

.mobile-nav__toggle {
	border: 0;
	background: none;
	color: var(--navy);
	width: 44px;
	height: 44px;
	font-size: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.mobile-nav__toggle i { transition: transform .3s; }
.mobile-nav__toggle[aria-expanded="true"] i { transform: rotate(45deg); }

.mobile-nav__submenu { display: none; padding-left: 14px; }
.mobile-nav__item--parent.is-open .mobile-nav__submenu { display: block; }

.mobile-nav__submenu a {
	display: block;
	padding: 10px 0;
	font-size: 16px;
	color: var(--navy);
	border-bottom: 1px solid rgba(5, 32, 68, .06);
}

@media (max-width: 1024px) {
	.header__brand { width: 70%; }
	.header__logo { max-width: 221.719px; }
	.header__nav-area { width: 30%; }
	.nav { display: none; }
	.burger { display: flex; }
}

@media (max-width: 767px) {
	.header__brand { width: 60%; }
	.header__nav-area { width: 40%; }
	.nav__link, .nav__caret { font-size: 17px; }
}

/* --------------------------------------------------------------------------
   Section furniture
   -------------------------------------------------------------------------- */
.eyebrow {
	color: var(--green);
	font-size: 30px;
	font-weight: 600;
	line-height: 28px;
}

.section__head { margin-bottom: 0; }
.section__head--center { text-align: center; }
.section__head--left { text-align: left; }

.section__intro {
	margin-top: 12px;
	font-size: 20px;
	line-height: 28px;
	color: var(--navy);
}

/* Animated marker headline */
.hl {
	position: relative;
	display: inline-block;
	font-size: 44px;
	font-weight: 600;
	line-height: 45px;
	color: var(--navy);
	max-width: 94.071%;
}

.hl__text { position: relative; z-index: 1; font-weight: 700; }
.hl__plain { position: relative; z-index: 1; color: var(--navy); }
.hl__text--green, .hl__plain--green { color: var(--green); }

.hl__mark {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
}

.hl__mark svg { width: 100%; height: 100%; overflow: visible; display: block; }

.hl__mark ellipse,
.hl__mark path {
	fill: none;
	stroke: var(--green);
	stroke-width: 6;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-dasharray: 1500;
	stroke-dashoffset: 1500;
	animation: mark-draw 2.6s ease-in-out infinite;
}

.hl__mark--circle { display: none; }
.hl__mark--curly { top: auto; bottom: -14px; height: 34px; }
.hl__mark--curly path { stroke-width: 5; }

.hl__mark--navy ellipse { stroke: var(--navy); stroke-width: 5; }

@keyframes mark-draw {
	0%   { stroke-dashoffset: 1500; opacity: 0; }
	35%  { stroke-dashoffset: 0;    opacity: 1; }
	65%  { stroke-dashoffset: 0;    opacity: 1; }
	100% { stroke-dashoffset: -1500; opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.hl__mark ellipse, .hl__mark path { animation: none; stroke-dashoffset: 0; }
	html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--white); }
.hero__row { align-items: center; }

.hero__body { display: flex; flex-direction: column; align-items: flex-start; }

.hero__title {
	font-size: 54px;
	font-weight: 600;
	line-height: 60px;
	color: var(--navy);
	margin-bottom: var(--gap);
}

.hero__text {
	font-size: 20px;
	line-height: 28px;
	color: var(--navy);
	margin-bottom: var(--gap);
}

.btn--hero { font-size: 18px; font-weight: 500; padding: 14px 35px; }

.hero__media { text-align: center; }
.hero__media img { width: 100%; }

@media (max-width: 1024px) {
	.hero__title { font-size: 40px; line-height: 44px; }
	.hero__text { font-size: 18px; line-height: 24px; }
}

@media (max-width: 767px) {
	.hero__title { font-size: 26px; line-height: 34px; }
	.hero__media { margin-top: 20px; }
}

/* --------------------------------------------------------------------------
   Welcome
   -------------------------------------------------------------------------- */
.section--tint { padding: 50px 0; }
.welcome__row { align-items: center; }
.welcome__inner { padding-right: 100px; }

.welcome__text {
	margin-top: var(--gap);
	font-size: 20px;
	line-height: 28px;
	text-align: justify;
	color: var(--navy);
}

.welcome__text--lead { margin-top: 29px; }

.hl--welcome { font-size: 44px; line-height: 45px; max-width: 77.776%; }

@media (max-width: 1024px) {
	.section--tint { padding: 50px 0; }
	.welcome__inner { padding: 10px; }
	.eyebrow { font-size: 26px; line-height: 26px; }
	.hl--welcome { font-size: 30px; line-height: 32px; }
	.welcome__text { font-size: 18px; line-height: 24px; }
}

@media (max-width: 767px) {
	.section--tint { padding: 20px 0; }
	.hl--welcome { font-size: 26px; line-height: 30px; }
	.welcome__inner { padding: 15px 15px 0; }
	.welcome__media { margin-top: 10px; }
}

/* --------------------------------------------------------------------------
   Course cards carousel
   -------------------------------------------------------------------------- */
.section--courses { padding: 50px 0; }
.hl--courses { font-size: 44px; line-height: 42px; max-width: 94.071%; }

.cards {
	position: relative;
	margin-top: 20px;
	--per-view: 1;
	--track-gap: 20px;
}

.cards__viewport { overflow: hidden; }

.cards__track {
	display: flex;
	align-items: center;
	gap: var(--track-gap);
	transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.card {
	flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--track-gap)) / var(--per-view));
	background: var(--white);
	box-shadow: 0 0 8px 6px rgba(0, 0, 0, .11);
	text-align: center;
	transform: scale(.948);
	transition: transform .3s;
	overflow: hidden;
}

.card.is-active { transform: scale(1); }

.card__media { padding: 5px 5px 20px; }
.card__media img { width: 100%; height: 270px; object-fit: cover; }

.card__body {
	display: flex;
	flex-direction: column;
	padding: 0 20px 20px;
}

.card__title { font-size: 22px; font-weight: 500; line-height: 26px; color: var(--navy); }

.card__text {
	margin-top: 16px;
	font-size: 20px;
	line-height: 24px;
	color: var(--navy);
}

.card__more {
	margin-top: 27px;
	align-self: center;
	display: inline-block;
	background: var(--green);
	color: var(--white);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.3;
	padding: 8px 35px;
	border-radius: var(--radius);
	transition: background-color .5s;
}

.card__more:hover, .card__more:focus { background: var(--navy); color: var(--white); }

.cards__nav {
	position: absolute;
	top: 232px;
	transform: translateY(-50%);
	width: 46px;
	height: 46px;
	border: 0;
	border-radius: 0;
	background: var(--green);
	color: var(--white);
	font-size: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 5;
	transition: background-color .3s;
}

.cards__nav:hover { background: var(--navy); color: var(--white); }
.cards__nav--prev { left: 0; }
.cards__nav--next { right: 0; }
.cards__nav[disabled] { opacity: .4; cursor: default; }

@media (min-width: 768px) and (max-width: 979px) {
	.cards { --per-view: 2; }
}

@media (min-width: 980px) {
	.cards { --per-view: 3; }
}

@media (max-width: 767px) {
	.section--courses { padding: 20px 0; }
	.eyebrow { font-size: 26px; line-height: 26px; }
	.hl--courses { font-size: 30px; line-height: 32px; }
	.card__title { font-size: 26px; line-height: 28px; }
	.card__text { font-size: 18px; line-height: 24px; }
	.card__media img { height: 220px; }
	.cards__nav { top: 100px; }
}

/* --------------------------------------------------------------------------
   Call to action
   -------------------------------------------------------------------------- */
.cta { position: relative; padding: 180px 0;background: url("../images/2023-student-study.jpg") center center / cover no-repeat; }
.cta__title { font-size: 50px; font-weight: 600; line-height: 55px; color: var(--white); }
.cta__kicker { margin-top: var(--gap); font-size: 30px; font-weight: 500; line-height: 28px; color: var(--white); }
.cta__text { margin-top: var(--gap); font-size: 20px; line-height: 28px; color: var(--white); }
.btn--cta { margin-top: var(--gap); padding: 16px 38px; }

@media (max-width: 1024px) {
	.cta { padding: 80px; }
	.cta__text { font-size: 18px; line-height: 24px; }
}

@media (max-width: 767px) {
	.cta { padding: 60px 15px; }
	.cta__title { font-size: 30px; line-height: 35px; }
	.cta__text { font-size: 18px; line-height: 24px; }
}

/* --------------------------------------------------------------------------
   Testimonials
   -------------------------------------------------------------------------- */
.section--grey { padding: 50px 0; }
.hl--testimonials { font-size: 38px; line-height: 39px; text-align: center; max-width: 97.99%; }

.quotes {
	position: relative;
	margin-top: 30px;
	--per-view: 1;
	--track-gap: 10px;
}

.quotes__viewport { overflow: hidden; }

.quotes__track {
	display: flex;
	gap: var(--track-gap);
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}

.quote { flex: 0 0 calc((100% - (var(--per-view) - 1) * var(--track-gap)) / var(--per-view)); text-align: center; }

.quote__media img {
	width: 96px;
	height: 96px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0 auto;
}

.quote__body { margin-top: 18px; }

.quote__text { font-size: 18px; line-height: 22px; color: var(--navy); }

.quote__name { margin-top: 14px; font-size: 22px; font-weight: 500; color: var(--navy); }

.quotes__nav {
	position: absolute;
	top: 42px;
	transform: translateY(-50%);
	width: 38px;
	height: 38px;
	border: 0;
	background: none;
	color: var(--navy);
	font-size: 18px;
	z-index: 5;
	display: flex;
	align-items: center;
	justify-content: center;
}

.quotes__nav--prev { left: -42px; }
.quotes__nav--next { right: -42px; }
.quotes__nav[disabled] { opacity: .35; cursor: default; }

/* Below the 1140px container the page has no outer margin, so pull the arrows
   in to the viewport edge instead of letting them hang off the page. */
@media (max-width: 1024px) {
	.quotes__nav--prev { left: -20px; }
	.quotes__nav--next { right: -20px; }
}

.quotes__dots { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }

.quotes__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--navy);
	opacity: 1;
	transition: background-color .3s;
}

.quotes__dot.is-active { background: var(--green); }

@media (min-width: 768px) and (max-width: 1024px) {
	.quotes { --per-view: 2; --track-gap: 10px; }
}

@media (min-width: 1025px) {
	.quotes { --per-view: 3; --track-gap: 50px; }
}

@media (max-width: 767px) {
	.section--grey { padding: 20px 0; }
	.hl--testimonials { font-size: 30px; line-height: 34px; }
	.section__intro { font-size: 18px; line-height: 24px; }
	.quotes { margin-top: 0; }
	.quotes__nav--prev { left: 0; }
	.quotes__nav--next { right: 0; }
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer { position: relative; background: var(--navy) url("../images/2023-cim-background.png") center center / cover no-repeat; color: var(--white); padding: 60px 0 0; overflow: hidden; }

.footer__top { position: relative; z-index: 1; display: grid; grid-template-columns: 2.1fr 1fr 1.2fr 1.2fr; gap: 34px; }
.footer__wave { width: 70%; margin-bottom: 18px; }
.footer__tagline { font-size: 18px; line-height: 24px; color: var(--white); }
.socials { display: flex; gap: 7px; margin-top: 10px; }
.socials__link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--green); color: var(--white); font-size: 20px; border-radius: 50%; transition: background-color .3s, color .3s; }

.socials__link:hover, .socials__link:focus { background: var(--white); color: var(--green); }

.footer__title { font-size: 22px; font-weight: 600; line-height: 26px; color: var(--white); }

.footer__list { margin-top: 16px; }

.footer__link {
	display: inline-block;
	padding: 5px 0;
	font-size: 17px;
	color: rgba(255, 255, 255, .88);
	transition: color .3s;
}

.footer__link:hover, .footer__link:focus, .footer__link.is-active { color: var(--green); }

.footer__contact { margin-top: 16px; }

.footer__contact-item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0;
	font-size: 17px;
}

.footer__contact-item i { color: var(--green); font-size: 16px; width: 18px; text-align: center; }
.footer__contact-link { color: rgba(255, 255, 255, .88); transition: color .3s; }
.footer__contact-link:hover, .footer__contact-link:focus { color: var(--green); }

.footer__bottom {
	position: relative;
	z-index: 1;
	margin-top: 60px;
	padding: 30px 0;
	border-top: 1px solid rgba(255, 255, 255, .12);
	text-align: center;
}

.footer__copy { font-size: 16px; color: rgba(255, 255, 255, .8); }

@media (max-width: 1024px) {
	.footer__top { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 767px) {
	.footer { padding: 40px 0 0; }
	.footer__top { grid-template-columns: 1fr; gap: 24px; }
	.footer__wave { max-width: 280px; }
}

/* ==========================================================================
   Icon glyphs
   Codepoints taken from the site's own Font Awesome Free 5.15.3 stylesheet.
   ========================================================================== */
.fa-home::before { content: "\f015"; }
.fa-bars::before { content: "\f0c9"; }
.fa-caret-down::before { content: "\f0d7"; }
.fa-check::before { content: "\f00c"; }
.fa-check-circle::before { content: "\f058"; }
.fa-plus::before { content: "\f067"; }
.fa-minus::before { content: "\f068"; }
.fa-chevron-left::before { content: "\f053"; }
.fa-chevron-right::before { content: "\f054"; }
.fa-arrow-circle-right::before { content: "\f0a9"; }
.fa-stopwatch::before { content: "\f2f2"; }
.fa-envelope::before { content: "\f0e0"; }
.fa-phone-alt::before { content: "\f879"; }
.fa-map-marker-alt::before { content: "\f3c5"; }
.fa-facebook-f::before { content: "\f39e"; }
.fa-instagram::before { content: "\f16d"; }
.fa-linkedin::before { content: "\f08c"; }
.fa-twitter::before { content: "\f099"; }

/* ==========================================================================
   Interior page furniture
   ========================================================================== */
.section { padding: 60px 0; }
.section--white { background: var(--white); }
.section--flush { padding: 0; }

/* soft photographic band used under the course hero image */
.section--photo {
	position: relative;
	padding: 60px 0 80px;
	background: var(--white) url("../images/2023-bg-contact-2.jpg") center center / cover no-repeat;
}
.section--photo > .container { position: relative; z-index: 1; }
.section--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--white);
	opacity: .71;
}

/* Page banner: green wash + photo, navy overlay, white title and breadcrumbs */
.pagehead {
	position: relative;
	padding: 100px 0;
	background: rgba(3, 185, 124, .1) url("../images/2023-about-banner.jpg") center center / cover no-repeat;
	text-align: center;
}
.pagehead--tall { padding: 150px 0; }
.pagehead__bg { position: absolute; inset: 0; background: var(--navy); opacity: .8; }
.pagehead > .container { position: relative; z-index: 1; }
.pagehead__title {
	color: var(--white);
	font-size: 32px;
	font-weight: 600;
	line-height: 40px;
	max-width: 734px;
	margin: 0 auto;
}

.crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 14px;
	font-size: 16px;
	line-height: 22px;
	color: rgba(255, 255, 255, .78);
}
.crumbs__link { display: inline-flex; align-items: center; gap: 6px; color: var(--white); }
.crumbs__link i { font-size: 13px; }
.crumbs__link:hover, .crumbs__link:focus { text-decoration: underline; }
.crumbs__item { color: rgba(255, 255, 255, .92); }

/* Section heading scale (matches the original per-page heading settings) */
.h2 {
	color: var(--navy);
	font-size: 40px;
	font-weight: 600;
	line-height: 42px;
	text-align: center;
	max-width: 564px;
	margin: 0 auto 30px;
}
.h3 { color: var(--navy); font-size: 30px; font-weight: 600; line-height: 36px; margin-bottom: 5px; }
.h4 { color: var(--navy); font-size: 22px; font-weight: 600; line-height: 26px; margin-bottom: 16px; }
.h5 { color: var(--navy); font-size: 24px; font-weight: 600; line-height: 26px; margin-bottom: 24px; }
.h5--date {
	font-size: 18px;
	font-weight: 400;
	line-height: 24px;
	color: rgba(5, 32, 68, .7);
	margin-top: 30px;
}
.hl--about { font-size: 34px; line-height: 44px; margin-bottom: 20px; }
.hl--about .hl__plain { display: block; }
.col--full { width: 100%; }

/* Rich text blocks */
.prose > * + * { margin-top: 18px; }
.prose p { font-size: 18px; line-height: 27px; color: var(--navy); }
.prose h2, .prose h3, .prose h4 { margin-top: 30px; }
.prose a { color: var(--green); text-decoration: underline; }
.prose a:hover, .prose a:focus { color: var(--navy); }
.prose ul, .prose ol { padding-left: 22px; list-style: disc; }
.prose ol { list-style: decimal; }
.prose li { font-size: 18px; line-height: 27px; color: var(--navy); }
.prose li + li { margin-top: 8px; }
.prose--page { max-width: 1000px; margin: 0 auto; }
.prose--page > .h2 { margin-bottom: 24px; }
.section__intro { margin-top: 0px; }

/* Two column text/figure blocks */
.split { display: grid; gap: 40px; align-items: center; }
.split__media, .split__body { min-width: 0; }
.split__body > * + * { margin-top: 18px; }
.split__body .prose p { font-size: 20px; line-height: 28px; }

@media (min-width: 1025px) {
	.split { grid-template-columns: 1fr 1fr; gap: 60px; }
}

/* Figures */
.figure--course { margin: 0; }
.figure--course img {
	width: 100%;
	height: 500px;
	object-fit: cover;
	object-position: center center;
	border-radius: 20px 20px 0 0;
}
.figure--about { margin: 0; }
.figure--about img { width: 100%; border-radius: 5px; }

/* Check-marked and arrowed lists */
.ticks__item, .arrows__item { display: flex; gap: 14px; align-items: flex-start; }
.ticks__item { margin-bottom: 20px; }
.arrows__item { margin-bottom: 14px; }
.ticks__item:last-child, .arrows__item:last-child { margin-bottom: 0; }
.ticks__item i, .arrows__item i { flex: 0 0 auto; color: var(--green); font-size: 18px; line-height: 27px; }
.arrows__item i { font-size: 16px; }
.ticks__item span, .arrows__item span { font-size: 18px; line-height: 27px; color: var(--navy); }

/* Course body blocks */
.course__learn, .course__close { margin-top: 40px; }
.course__close {
	padding-top: 30px;
	border-top: 1px solid rgba(5, 32, 68, .1);
}

/* Accordion (curriculum chapters) */
.acc__item { border: 1px solid #d5d8dc; }
.acc__item + .acc__item { border-top: 0; }
.acc__head {
	display: flex;
	gap: 14px;
	align-items: center;
	margin: 0;
	padding: 15px 20px;
	color: var(--navy);
	font-weight: 700;
	line-height: 1;
	cursor: pointer;
	list-style: none;
}
.acc__head::-webkit-details-marker { display: none; }
.acc__head:hover, .acc__head:focus { color: var(--green); }
.acc__label { font-size: 18px; line-height: 24px; }
.acc__sign { position: relative; flex: 0 0 auto; width: 14px; height: 14px; color: var(--green); }
.acc__sign::before, .acc__sign::after {
	content: "";
	position: absolute;
	background: currentColor;
	transition: transform .3s;
}
.acc__sign::before { top: 6px; left: 0; width: 14px; height: 2px; }
.acc__sign::after { top: 0; left: 6px; width: 2px; height: 14px; }
.acc__item[open] > .acc__head .acc__sign::after { transform: scaleY(0); }
.acc__body { padding: 15px 15px 30px 22px; border-top: 1px solid #d5d8dc; }
.acc__body li {
	position: relative;
	padding-left: 18px;
	font-size: 18px;
	line-height: 27px;
	color: var(--navy);
}
.acc__body li + li { margin-top: 6px; }
.acc__body li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--green);
}

/* Checkered teal/green feature tiles */
.tiles__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-bottom: 20px;
}
.tile {
	background: var(--tile-bg, var(--teal));
	padding: 50px;
	color: var(--white);
}
.tile--teal { --tile-bg: #00729B; }
.tile--green { --tile-bg: #04A86C; }
.tile__media { width: 30%; margin-bottom: 20px; }
.tile__media img { width: 100%; border-radius: 100px; }
.tile__title { font-size: 25px; font-weight: 600; line-height: 30px; margin-bottom: 10px; }
.tile__text { font-size: 18px; line-height: 23px; }

@media (min-width: 768px) {
	.tiles__row { grid-template-columns: 1fr 1fr; gap: 0; margin-bottom: 0; }
}

@media (max-width: 1024px) {
	.tile { padding: 40px; }
}

@media (max-width: 767px) {
	.tile { padding: 30px; }
	.tiles__row { gap: 20px; margin-bottom: 20px; }
}

/* Educator flip cards */
.educators { display: grid; gap: 30px; grid-template-columns: 1fr; }
.educator { min-width: 0; }
.educator__inner {
	position: relative;
	height: 360px;
	perspective: 1000px;
	background: var(--green);
	overflow: hidden;
}
.educator__face, .educator__back {
	position: absolute;
	inset: 0;
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
	transition: transform .6s ease;
}
.educator__face img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.educator__back {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 30px;
	color: var(--white);
	transform: rotateY(180deg);
}
.educator__name { font-size: 28px; font-weight: 600; line-height: 30px; margin-bottom: 5px; }
.educator__role { font-size: 20px; line-height: 26px; margin-bottom: 12px; opacity: .92; }
.educator__bio { font-size: 17px; line-height: 24px; }

@media (min-width: 600px) {
	.educators { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.educators { grid-template-columns: repeat(3, 1fr); }
}

@media (hover: hover) {
	.educator__inner:hover .educator__face,
	.educator__inner:focus .educator__face { transform: rotateY(-180deg); }
	.educator__inner:hover .educator__back,
	.educator__inner:focus .educator__back { transform: rotateY(0); }
}

/* Without hover or focus there is no way to read the bio, so stack it */
@media (hover: none), (max-width: 767px) {
	.educator__inner { height: auto; perspective: none; display: grid; }
	.educator__face { position: static; }
	.educator__face img { height: 360px; }
	.educator__back { position: static; transform: none; padding: 26px 20px; }
}

/* Carousel clones sit in the track but must not be reachable or announced */
.is-clone { pointer-events: none; }
.is-clone a, .is-clone button { pointer-events: none; }
.cards__viewport, .quotes__viewport { cursor: grab; }
.cards__viewport:active, .quotes__viewport:active { cursor: grabbing; }
.cards__viewport:focus-visible, .quotes__viewport:focus-visible {
	outline: 2px solid var(--green);
	outline-offset: 3px;
}

/* Course listing cards: photo background, green title, navy copy */
.ccards { display: grid; gap: 30px; grid-template-columns: 1fr; margin-top: 40px; }

.ccard { position: relative; display: flex; align-items: flex-start; min-height: auto; padding: 12px; overflow: hidden; background-color: var(--white); background-image: linear-gradient(rgba(255, 255, 255, .62), rgba(255, 255, 255, .82)), var(--ccard-image, none); background-position: center center; background-size: cover; background-repeat: no-repeat; transition: background-size 1.5s ease; }

.ccard:hover, .ccard:focus-within { background-size: 108%; }
.ccard__body { position: relative; z-index: 1; width: 100%; text-align: left; }
.ccard__title { font-size: 26px; font-weight: 600; line-height: 32px; color: var(--green); margin: 15px 0 10px; }
.ccard__text { font-size: 18px; line-height: 27px; color: var(--navy); margin-bottom: 10px; }
.ccard__meta { margin-bottom: 18px; }
.ccard__meta li { display: flex; align-items: center; gap: 8px; font-size: 16px; line-height: 22px; color: var(--navy); }
.ccard__meta i { color: var(--green); font-size: 14px; }

@media (min-width: 768px) {
	.ccards { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1025px) {
	.ccards { grid-template-columns: repeat(3, 1fr); }
}

/* Contact cards */
.features { display: grid; gap: 40px; grid-template-columns: 1fr; margin-top: 34px; }
.feature {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 30px;
	background: var(--white);
	box-shadow: 0 0 10px 7px rgba(0, 0, 0, .07);
	height: 100%;
}
.feature__media img { width: 64px; height: 64px; }
.feature__title { font-size: 22px; font-weight: 600; line-height: 26px; margin: 16px 0 8px; }
.feature__text { font-size: 18px; line-height: 23px; }
.feature__link { color: var(--green); font-weight: 500; word-break: break-word; }
.feature__link:hover, .feature__link:focus { color: var(--navy); text-decoration: underline; }
.feature__more {
	display: inline-block;
	margin-top: 10px;
	color: var(--green);
	font-weight: 500;
}
.feature__more:hover, .feature__more:focus { color: var(--navy); text-decoration: underline; }
.contact__form { margin-top: 60px; }

@media (min-width: 768px) {
	.features { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1024px) {
	.feature { padding: 20px; }
	.features { gap: 20px; }
}

@media (max-width: 767px) {
	.feature { padding: 10px; }
	.contact__form { margin-top: 40px; }
}

/* Forms */
.form__grid { display: grid; grid-template-columns: 1fr; gap: 0 20px; }
.field { margin-bottom: 32px; min-width: 0; }
.field__label {
	display: block;
	padding-bottom: 4px;
	color: var(--navy);
	font-size: 20px;
	font-weight: 500;
	line-height: 23px;
	margin: 20px 0 5px;
}
.field__req { color: #e0483d; }
.field__control {
	display: block;
	width: 100%;
	min-height: 48px;
	padding: 12px 15px;
	background: #FCFCFC;
	border: 1px solid var(--green);
	border-radius: var(--radius);
	color: var(--navy);
	font: inherit;
	font-size: 18px;
	line-height: 23px;
}
.field__control::placeholder { color: rgba(5, 32, 68, .45); }
textarea.field__control { min-height: 130px; }
select.field__control {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%2303B97C' stroke-width='1.6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 12px 8px;
}
.field--upload { padding: 10px 12px; background: #FCFCFC; border: 1px dashed var(--green); border-radius: var(--radius); }
.field__options { display: flex; flex-wrap: wrap; gap: 10px 24px; }
.field__option { display: inline-flex; align-items: center; gap: 8px; font-size: 18px; line-height: 23px; color: var(--navy); }
.field__option input { width: 18px; height: 18px; accent-color: var(--green); }
.form__terms { margin-bottom: 32px; padding: 24px; background: var(--grey-bg); border-radius: var(--radius); }
.form__terms-title { font-size: 20px; font-weight: 600; line-height: 26px; margin-bottom: 14px; }
.form__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.form__note { font-size: 17px; line-height: 23px; color: var(--navy); }
.form__note.is-ok { color: #0a7d55; }
.form__note.is-error { color: #c0392b; }
.btn--form { min-width: 170px; text-align: center;margin-top: 25px; }
.btn--sm { padding: 12px 28px; font-size: 18px; }

@media (min-width: 768px) {
	.form__grid { grid-template-columns: repeat(2, 1fr); }
	.field--full { grid-column: 1 / -1; }
}

/* Embedded map */
.map { margin-top: 50px; }
.map__frame { display: block; width: 100%; height: 450px; border: 0; }

@media (max-width: 767px) {
	.map { margin-top: 30px; }
	.map__frame { height: 320px; }
}

/* Footer column scaffolding */
.footer__col { min-width: 0; }
.footer__col--brand { max-width: 340px; }
.footer__list-item { margin-bottom: 10px; }
.socials__item { display: inline-block; }

@media (max-width: 1024px) {
	.section { padding: 40px 0; }
	.section--photo { padding: 40px 0 50px; }
	.pagehead { padding: 50px 0; }
	.pagehead--tall { padding: 70px 0; }
	.pagehead__title { font-size: 36px; line-height: 44px; }
	.h2 { font-size: 34px; line-height: 38px; }
	.hl--about { font-size: 30px; line-height: 40px; }
	.educator__name { font-size: 24px; line-height: 28px; }
	.educator__bio { font-size: 16px; line-height: 23px; }
	.ccard { min-height: 260px; }
}

@media (max-width: 767px) {
	.hero__body {padding: 25px 0;}
	.section { padding: 20px 0; }
	.section--photo { padding: 20px 0 30px; }
	.pagehead { padding: 40px 0; }
	.pagehead--tall { padding: 50px 0; }
	.pagehead__title { font-size: 26px; line-height: 34px; }
	.crumbs { font-size: 15px; }
	.h2 { font-size: 26px; line-height: 28px; margin-bottom: 20px; }
	.h3 { font-size: 24px; line-height: 30px; }
	.h4 { font-size: 20px; line-height: 26px; }
	.h5 { font-size: 21px; line-height: 27px; }
	.hl--about { font-size: 26px; line-height: 32px; }
	.split { gap: 24px; }
	.split__body .prose p, .prose p, .ticks__item span, .arrows__item span { font-size: 17px; line-height: 26px; }
	.figure--course img { height: 240px; border-radius: 10px 10px 0 0; }
	.tile__title { font-size: 22px; line-height: 27px; }
	.ccard { padding: 10px; }
	.ccard__title { font-size: 23px; line-height: 29px; }
	.field__label { font-size: 18px; }
	.acc__head { padding: 12px 15px; }
	.acc__body { padding: 12px 15px 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.ccard, .educator__face, .educator__back, .acc__sign::before, .acc__sign::after { transition: none; }
}

/*Aman CSS*/
.cta .cta__bg_overlay { background-color: #01291C; width: 100%; height: 100%; display: block; position: absolute; opacity: 0.5; left: 0; right: 0; top: 0; bottom: 0; }
.cta__body { position: relative; }
.nav__link.is-active { color: var(--green); }
.nav__link.is-active,
.mobile-nav__link.is-active { color: var(--green); }
.nav__item.is-active > .nav__row > .nav__link,
.mobile-nav__item.is-active > .mobile-nav__row > .mobile-nav__link { color: var(--green); }
.contact-form__actions { margin-top: 20px; }


/* Message Send */
div#formMessage { margin-top: 10px; }
.form-message { margin-top: 10px; font-size: 14px; font-weight: 500; }
.form-message.success { color: #28a745; }
.form-message.error { color: #dc3545; }