@charset "UTF-8";
/* ==========================================================================
   Collingwood Buildings – site stylesheet
   One file for the whole site. Sizes are in em against a 10px base
   (body font-size 62.5%) so they match the original design exactly.
   ========================================================================== */

/* ---------- Colours (for reference) ----------
   Header purple   #1f0132   Header border  #411f55
   Nav active      #4f2668   Mobile dark    #13001f
   Link blue       #017ab7   Button         #586d91 / #394b68
   Page cream      #f5f3ec   Footer beige   #e4e0d6
   Promo blue      #e0e5ee   Quote lilac    #e7e4e9
------------------------------------------------ */

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, figcaption, table, th, td, form, fieldset, legend, blockquote {
	margin: 0; padding: 0; border: 0;
}
body {
	font-size: 62.5%;
	line-height: 1;
	color: #000;
	background: #e4e0d6;
	font-family: 'Open Sans', 'Century Gothic', sans-serif;
	font-weight: 300;
}
h1, h2, h3, h4, h5, h6 { font-size: 1em; font-weight: 300; }
p { font-size: 1.4em; line-height: 1.6em; margin: 1em 0; }
ul, ol { list-style: none; }
img { max-width: 100%; height: auto; border: 0; }
table { border-collapse: collapse; }
th, td { text-align: left; font-weight: 300; }
a { color: #017ab7; text-decoration: none; line-height: 1.3em; }
a:hover, a:focus { text-decoration: underline; }
a.linkArrow { background: url(../img/ui/link-arrow-blue.png) no-repeat right center; padding-right: 0.8em; }
:focus-visible { outline: 2px solid #017ab7; outline-offset: 2px; }
button { font: inherit; cursor: pointer; }

.clearfix::after { content: ""; display: table; clear: both; }
.visually-hidden {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap;
}

#skipLink {
	position: absolute; top: -10em; left: 2em; z-index: 100;
	background: #fff; color: #1f0132; padding: 0.8em 1.2em; font-size: 1.4em;
}
#skipLink:focus { top: 1em; }

/* ---------- Layout ---------- */
.pageWrap { background: #f5f3ec url(../img/ui/page-bkgd.jpg) repeat-x top; width: 100%; }
.pageWrap.homeBkgd { background-image: url(../img/ui/page-bkgd-home.jpg); }
#content { width: 97.6em; margin: -2.5em auto 0; }
.pageBkgd { background-color: #fff; border: 1px solid #ccc; box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2); }
#mainContent { padding: 2.3em 0; margin-bottom: 2.3em; }
.homeBkgd #mainContent { margin-bottom: 0; padding-bottom: 2.3em; }
.alphaCol { border-right: 1px solid #ccc; float: left; padding: 0 2em 0 2.3em; width: 65.7em; margin-left: -1px; }
.betaCol { float: right; padding: 0 2.3em; width: 31.6em; }
.alphaColHome { float: left; padding: 2.3em 2em 2.3em 2.3em; width: 64em; }
.betaColHome { float: right; width: 30.3em; }
.betaColHome .pageBkgd { padding: 2.3em 2em 2.3em 2.3em; }

/* ---------- Header ---------- */
#header { background: #1f0132 url(../img/ui/header-grad-bkgd.png) no-repeat bottom center; border-bottom: 2px solid #411f55; }
#header .headerInner { height: 15em; margin: 0 auto; position: relative; width: 97.6em; }
#header .logo { width: 26.2em; position: absolute; left: -2em; top: 0; }
#header .logo img { display: block; }
#header .phoneNumber { position: absolute; top: 1em; right: 0.8em; margin: 0; font-size: 1em; line-height: 1; }
#header .phoneNumber a {
	display: block; color: #fff; text-decoration: none;
	background: url(../img/ui/phone-icon.png) no-repeat center left;
	font-family: 'Sorts Mill Goudy', Georgia, serif; font-size: 3.2em; line-height: 1.6; padding-left: 1.2em;
}

/* Main navigation (one menu for desktop and mobile) */
#nav { position: absolute; top: 8em; right: 1em; }
#nav .menuButton { display: none; }
#nav ul { display: flex; }
#nav li { margin-left: 0.3em; }
#nav a { color: #ccc; display: block; font-size: 1.4em; font-weight: 400; padding: 0.7em 0.7em 1.4em; line-height: 1.3em; }
#nav a:hover, #nav a:focus { color: #fff; text-decoration: none; }
#nav a[aria-current] { background-color: #4f2668; color: #fff; border-radius: 5px 5px 0 0; }

/* ---------- Footer ---------- */
#footer { background-color: #e4e0d6; border-top: 1px solid #d9d4c4; }
#footer .footerInner { margin: 0 auto; width: 97.6em; }
#footer .alphaCol, #footer .betaCol { margin: 2em 0; }
#footer h2 { font-size: 1.8em; line-height: 1.3; }
#footer address { font-style: normal; }
#footer span.phone { display: block; font-size: 1.6em; }
#footer span.phone a { color: #000; }
#footer .footerLinks { clear: both; margin: 0 0 3em 2.3em; width: 62em; }
#footer .footerLinks p { margin-bottom: 0.3em; }
#footer .footerLinks ul { display: flex; flex-wrap: wrap; }
#footer .footerLinks li { font-size: 1.2em; }
#footer .footerLinks a { background: url(../img/ui/link-divider.png) no-repeat left center; padding: 0 0.5em; }
#footer .footerLinks li:first-child a { background: none; padding-left: 0; }

/* ---------- Page content ---------- */
.htmlContent img { border: 1px solid #ccc; }
.htmlContent strong { font-weight: 400; }
.htmlContent em { font-style: italic; }
.htmlContent p { margin: 0 0 0.7em; line-height: 1.6em; }
.htmlContent ul, .htmlContent ol { margin-left: 2.5em; padding: 0 0 1em; }
.htmlContent ul li { list-style: disc outside; font-size: 1.4em; line-height: 1.6em; }
.htmlContent ol li { list-style: decimal outside; font-size: 1.4em; line-height: 1.6em; }
.htmlContent h1, .htmlContent h2, .htmlContent h3, .htmlContent h4 { margin: 1em 0 0.5em; }
.htmlContent h1 { font-size: 3.6em; line-height: 1.2; margin-top: 0; }
.htmlContent h2 { font-size: 2.4em; line-height: 1.3; }
.htmlContent h3 { font-size: 2em; line-height: 1.2; }
.htmlContent h4 { font-size: 1.6em; }
.htmlContent .lead-out { font-size: 2em; font-style: italic; line-height: 1.3; margin-top: 1em; }

.htmlContent table { width: 90%; margin: 1.4em 0; }
.htmlContent th, .htmlContent td { border: 1px solid #999; padding: 0.5em 0.8em; font-size: 1.4em; line-height: 1.4em; }
.htmlContent th { text-align: center; background-color: #efefef; font-weight: 400; }

.map { margin: 2em 0; }
.map iframe { display: block; width: 100%; height: 42em; border: 1px solid #ccc; }
.map .mapLinks { display: flex; flex-wrap: wrap; gap: 0.8em; margin: 1.2em 0 0; font-size: 1em; }
.mapButton {
	display: inline-flex; align-items: center; justify-content: center; min-height: 3.2em;
	padding: 0.6em 1.4em; border: 1px solid #586d91; border-radius: 5px;
	background: #fff; color: #394b68; font-size: 1.4em; font-weight: 400; line-height: 1.3; text-decoration: none;
}
.mapButton:hover, .mapButton:focus { background: #eef1f6; color: #394b68; text-decoration: none; }
.mapButton.primary { background: #586d91; border-color: #394b68; border-bottom-width: 2px; color: #fff; }
.mapButton.primary:hover, .mapButton.primary:focus { background: #4b5e7f; color: #fff; }
@media screen and (max-width: 480px) { .mapButton { flex: 1 1 100%; } }
@media screen and (max-width: 660px) { .map iframe { height: 32em; } }

.videoEmbed { position: relative; padding-top: 56.25%; margin: 1.5em 0; }
.videoEmbed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* Breadcrumbs (news articles) */
.breadcrumb { display: flex; flex-wrap: wrap; margin: 0 0 2em 2em; }
.breadcrumb li { background: url(../img/ui/bc-link-arrow.png) no-repeat center right; font-size: 1.1em; margin-right: 0.4em; padding-right: 1em; }
.breadcrumb li:last-child { background: none; }
.breadcrumb [aria-current] { color: #000; }

/* ---------- Sidebar promos ---------- */
.textPromo { background: #e0e5ee url(../img/ui/logo-watermark.png) no-repeat bottom right; padding: 2em; margin-bottom: 2em; }
.textPromo h2 { font-size: 2.2em; line-height: 1.2em; }
.textPromo p { font-size: 1.4em; margin-bottom: 0; }
.textPromo.client { background-color: #e7e4e9; }
.textPromo blockquote p { margin-top: 1em; }
.textPromo .cite span { display: block; font-weight: 400; }
.textPromo.fileDownload ul { margin-top: 0.5em; }
.textPromo.fileDownload li { border-bottom: 1px solid #ccc; padding: 2em 0 2em 4em; }
.textPromo.fileDownload li.pdf { background: url(../img/ui/doc-icon-pdf.png) no-repeat left center; }
.textPromo.fileDownload a { font-size: 1.4em; }
.contactNumbers { margin-top: 2em; }
.contactNumbers dl { font-size: 1.4em; line-height: 1.6em; margin-top: 1em; display: grid; grid-template-columns: 4.4em 1fr; }
.contactNumbers dt { font-weight: 400; }
.contactNumbers dd { margin: 0; }

/* ---------- Forms ---------- */
.contactForm { margin-top: 1em; }
.formfield { margin-bottom: 1.5em; padding-right: 24em; }
.formfield label { display: block; font-size: 1.6em; font-weight: 400; margin: 1em 0 0.2em; }
.formfield input, .formfield textarea {
	width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 1.4em;
	border: 1px solid #555; background: #f4f4f4; margin-top: 0.3em; padding: 0.5em;
}
.formfield textarea { min-height: 8em; resize: vertical; }
.formfield .hint { font-weight: 300; font-size: 0.875em; }
.formfield.trap { position: absolute; left: -9999px; }
.formNote { font-size: 1.2em; }
.button {
	background: #586d91; color: #fff; padding: 0.8em 1.6em; border: 0; border-bottom: 2px solid #394b68;
	border-radius: 5px; font-size: 1.4em; -webkit-appearance: none; appearance: none;
}
.button:hover { background: #4b5e7f; }
.errorMsg { background-color: #f5e9ec; border: 1px solid #d192a2; color: #ad042e; padding: 0.7em; margin: 1em 0; }

/* ---------- Home page ---------- */
.imageWrap { padding: 4px; position: relative; }
.homeLinkPanel { background: rgba(50, 2, 79, 0.7); padding: 2em 2.7em; position: absolute; bottom: 6em; left: 8em; z-index: 2; }
.homeLinkPanel li { padding: 0.2em 0; }
.homeLinkPanel a {
	background: url(../img/ui/link-arrow-rt.png) no-repeat center right;
	color: #f5f3ec; font-size: 2.8em; padding-right: 0.7em;
}
.homeLinkPanel a:hover, .homeLinkPanel a:focus {
	background-image: url(../img/ui/link-arrow-rt-hover.png); color: #d4d1c6; text-decoration: none;
}

#newsFeed { position: relative; }
#newsFeed h2 { font-size: 3em; }
#newsFeed .moreNews { font-size: 1.4em; position: absolute; top: 2.6em; right: 2em; }
#newsFeed ul { padding: 0.4em 0 0.6em; }
#newsFeed li { padding: 1.4em 0 0; }
#newsFeed h3 { font-size: 1.8em; }
#newsFeed p { margin: 0.1em 0 0.3em; }
#newsFeed p.articleSummary { margin-top: 0.4em; }

/* ---------- News list ---------- */
.newsHome h1 { font-size: 3.6em; line-height: 1.2; margin-bottom: 0.3em; }
.newsHome li { border-bottom: 1px solid #ccc; padding: 1em 0; }
.newsHome h2 { font-size: 2em; line-height: 1.3; }
.newsHome p { margin: 0.3em 0; }
.newsHome p.date { margin: 0 0 0.3em; }

/* ---------- Site map ---------- */
.sitemap ul { padding-bottom: 0; }

/* ---------- Galleries and slideshow ---------- */
.gallery { position: relative; margin: 2em 0 2em; padding: 0 37px; }
.gallery-main { position: relative; }
.gallery-track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scrollbar-width: none; margin: 0 !important; padding: 0 !important;
}
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-track > li { flex: 0 0 100%; scroll-snap-align: start; list-style: none !important; font-size: 1em !important; }
.gallery-track img { display: block; width: 100%; border: 0 !important; }
.gallery-track figcaption { background-color: #e7e4e9; padding: 0.5em 0.7em; font-size: 1.4em; line-height: 1.6em; }

.gallery-prev, .gallery-next {
	position: absolute; top: 50%; margin-top: -37px; width: 37px; height: 74px; z-index: 3;
	border: 0; padding: 0; background: url(../img/ui/galleryArrows.png) no-repeat; opacity: 0.85;
}
.gallery-prev { left: -37px; background-position: top; }
.gallery-next { right: -37px; background-position: bottom; }
.gallery-prev:hover, .gallery-next:hover { opacity: 1; }
.gallery-prev[hidden], .gallery-next[hidden] { display: none; }
.gallery .gallery-main .gallery-prev, .gallery .gallery-main .gallery-next { margin-top: -55px; }

.gallery-thumbs {
	display: flex; gap: 0.5em; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: thin;
	margin: 1em 0 0 !important; padding: 0 0 0.4em !important;
}
.gallery-thumbs li { flex: 0 0 auto; list-style: none !important; font-size: 1em !important; }
.gallery-thumbs button { display: block; border: 3px solid #fff; padding: 0; background: none; }
.gallery-thumbs button[aria-current="true"] { border-color: #4f2668; }
.gallery-thumbs img { display: block; width: 94px; height: 94px; border: 0 !important; }

/* Home slideshow: arrows sit inside the image */
.slider-home { margin: 0; padding: 0; }
.slider-home .gallery-prev, .slider-home .gallery-next { background-image: url(../img/ui/galleryArrowsHome.png); margin-top: -37px; }
.slider-home .gallery-prev { left: 0; }
.slider-home .gallery-next { right: 0; }

/* ---------- Cookie banner ---------- */
.cookieBanner {
	position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
	background: #1f0132; border-top: 1px solid #411f55; color: #fff; padding: 1.2em 2em;
}
.cookieBanner .inner { max-width: 97.6em; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 1em 2em; }
.cookieBanner p { margin: 0; flex: 1 1 30em; }
.cookieBanner a { color: #fff; text-decoration: underline; }
.cookieBanner .actions { display: flex; gap: 1em; }
.cookieBanner .button.secondary { background: transparent; border: 1px solid #ccc; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media screen and (max-width: 1000px) {
	#content, #footer .footerInner, #header .headerInner { width: 94%; }
	.alphaColHome { width: 65.3%; }
	.betaColHome { width: 31.1%; }
	.alphaCol { width: 67.3%; }
	.betaCol { width: 32.1%; }
	.htmlContent table { width: 100%; }
	.formfield { padding-right: 10em; }
}

@media screen and (max-width: 920px) {
	#header { background-image: none; }
	#header .headerInner { height: auto; padding: 1.5em 0 0; }
	#header .logo { position: relative; left: 0; }
	#nav { position: static; width: 100vw; margin: 1.5em 0 0 calc(50% - 50vw); }
	#nav .menuButton {
		display: block; width: 100%; text-align: left; color: #fff; font-size: 1.5em; font-weight: 300;
		padding: 1em 2em 1em 3em; border: 0; border-top: 1px solid #411f55;
		background: #13001f url(../img/ui/mobileNav.png) no-repeat 1.4em 1.2em;
	}
	#nav ul { display: none; flex-direction: column; border-top: 1px solid #411f55; }
	#nav.open ul { display: flex; }
	#nav li { margin: 0; border-bottom: 1px solid #411f55; }
	#nav a { font-size: 1.5em; font-weight: 300; color: #fff; padding: 1em 2em 1em 3em; }
	#nav a[aria-current] { background: #13001f; border-radius: 0; }
	#content { margin-top: 1em; }
}

@media screen and (max-width: 860px) {
	.alphaColHome, .betaColHome { width: 100%; float: none; }
	.betaColHome { margin-top: 2em; }
	.alphaCol, .betaCol, #footer .footerLinks { width: 100%; float: none; padding: 0 2em; }
	#footer .alphaCol, #footer .betaCol, #footer .footerLinks { padding: 0 1em; margin-left: 0; }
	.alphaCol { border-right: 0; margin-left: 0; }
	.betaCol { margin-top: 2em; }
}

@media screen and (max-width: 730px) {
	.homeLinkPanel { bottom: 4em; }
	.homeLinkPanel a { font-size: 2em; }
	.homeLinkPanel li { padding: 0.5em 0; }
}

@media screen and (max-width: 660px) {
	#header .logo { width: 46.6%; }
	#header .phoneNumber { top: 0.6em; }
	#header .phoneNumber a { font-size: 2em; padding-left: 1.8em; }
	#footer .footerLinks { margin: 0; padding: 0 1em 3em; }
	.homeLinkPanel { position: relative; bottom: auto; left: auto; }
	.formfield { padding-right: 0; }
	.htmlContent table { word-break: break-word; }
	.gallery { padding: 0; }
	.gallery .gallery-main .gallery-prev, .gallery .gallery-main .gallery-next { margin-top: -50px; }
	.gallery-prev { left: 0; }
	.gallery-next { right: 0; }
	.gallery-thumbs img { width: 64px; height: 64px; }
}

@media (prefers-reduced-motion: reduce) {
	.gallery-track, .gallery-thumbs { scroll-behavior: auto; }
}

@media print {
	#nav, .gallery-prev, .gallery-next, .gallery-thumbs, .cookieBanner, #skipLink { display: none !important; }
	.pageWrap, #header { background: none; }
}

/* Heading styled as the original sub-heading size */
.htmlContent h2.h3 { font-size: 2em; line-height: 1.2; }
.newsArticle .date, .htmlContent p.date { color: #555; }
kbd { font-family: inherit; font-weight: 400; border: 1px solid #ccc; border-radius: 3px; padding: 0 0.3em; background: #f4f4f4; }

/* ---------- History page ---------- */
.htmlContent p.lead { font-size: 1.7em; line-height: 1.55; margin-bottom: 1.2em; }
.historyFigure { margin: 0 0 1.5em; }
.historyFigure img { display: block; width: 100%; height: auto; border: 1px solid #ccc; }
.historyFigure figcaption { background-color: #e7e4e9; padding: 0.6em 0.8em; font-size: 1.3em; line-height: 1.5; }
.historyFigure figcaption strong { font-weight: 600; }
.historyFigure .credit { display: block; font-size: 0.9em; color: #4a4450; font-style: italic; }
.thenNow, .detailGrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.6em; margin: 1.5em 0; }
.thenNow img, .detailGrid img { aspect-ratio: 4 / 3; object-fit: cover; }
.htmlContent ol.timeline { list-style: none; margin: 1.5em 0 2em; padding: 0; border-left: 2px solid #4f2668; }
.htmlContent ol.timeline > li { list-style: none; font-size: 1em; display: grid; grid-template-columns: 11em minmax(0, 1fr); gap: 1.5em; position: relative; padding: 0 0 2.2em 2.2em; }
.htmlContent ol.timeline > li::before { content: ""; position: absolute; left: -0.8em; top: 0.5em; width: 1.4em; height: 1.4em; border-radius: 50%; background: #fff; border: 3px solid #4f2668; box-sizing: border-box; }
.htmlContent ol.timeline .year { margin: 0; font-family: 'Sorts Mill Goudy', Georgia, serif; font-size: 2.6em; line-height: 1.1; color: #4f2668; }
.htmlContent ol.timeline h3 { margin: 0.2em 0 0.4em; }
.htmlContent ol.timeline .historyFigure { margin-top: 1.2em; }
.factList { font-size: 1.4em; line-height: 1.5; margin: 1em 0 0; }
.factList dt { font-weight: 600; margin-top: 0.7em; }
.factList dd { margin: 0; }
.detailSplit { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 2em; align-items: start; }
.detailSplit .historyFigure { margin-top: 0.4em; }
@media screen and (max-width: 660px) {
	.detailSplit { grid-template-columns: minmax(0, 1fr); }
	.thenNow, .detailGrid { grid-template-columns: minmax(0, 1fr); }
	.htmlContent ol.timeline > li { grid-template-columns: minmax(0, 1fr); gap: 0.3em; padding-left: 1.8em; }
}

/* ---------- Sidebar panels ---------- */
aside.betaCol > * + * { margin-top: 2em; }
aside.betaCol .textPromo { margin-bottom: 0; }
.sidePanel.viewing { background: #1f0132 url(../img/ui/logo-watermark.png) no-repeat bottom right; color: #fff; padding: 2em; }
.sidePanel.viewing h2 { font-size: 2.2em; line-height: 1.2; color: #fff; }
.sidePanel.viewing p { font-size: 1.4em; color: #e9e3ee; margin: 0.8em 0 0; }
.sidePanel.viewing .bigPhone span { display: block; font-size: 0.85em; color: #d9cfe0; }
.sidePanel.viewing .bigPhone a { font-family: 'Sorts Mill Goudy', Georgia, serif; font-size: 1.9em; color: #fff; text-decoration: none; line-height: 1.2; }
.sidePanel.viewing .mapButton { font-size: 1em; margin-top: 0.4em; }
.mapButton.light { background: #f5f3ec; border-color: #f5f3ec; color: #1f0132; font-weight: 600; }
.mapButton.light:hover, .mapButton.light:focus { background: #fff; color: #1f0132; }
.tickList { margin: 0.8em 0 0; padding: 0; list-style: none; }
.tickList li { position: relative; font-size: 1.4em; line-height: 1.45; padding: 0.35em 0 0.35em 1.7em; border-bottom: 1px solid rgba(31, 1, 50, 0.12); }
.tickList li:last-child { border-bottom: 0; }
.tickList li::before { content: ""; position: absolute; left: 0.15em; top: 0.75em; width: 0.45em; height: 0.8em; border: solid #4f2668; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.explore h2 { font-size: 2.2em; line-height: 1.2; margin-bottom: 0.6em; }
.explore ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 1.4em; }
.explore a { display: block; background: #fff; border: 1px solid #ddd; color: #1f1a24; text-decoration: none; }
.explore a:hover, .explore a:focus { border-color: #4f2668; text-decoration: none; }
.explore img { display: block; width: 100%; aspect-ratio: 16 / 7; object-fit: cover; }
.explore .exploreTitle { display: block; padding: 0.6em 0.8em 0; font-size: 1.8em; color: #1f0132; }
.explore .exploreText { display: block; padding: 0.2em 1em 0.9em; font-size: 1.3em; line-height: 1.45; color: #4a4450; }
.htmlContent h1 .h1Sub { display: block; font-size: 0.6em; color: #4f2668; margin-top: 0.2em; }
aside.betaColHome > * + * { margin-top: 2em; }
aside.betaColHome .textPromo { margin-bottom: 0; }