/* =========================================
   BRAND COLOUR VARIABLES
   ========================================= */

/* Default - Graphene */
.graphene {
	--brand-primary: #5C2947;
	--brand-primary-hover: #803962;
	--brand-banner-bg: #000000;
	--brand-top-bar: #52426C;
	--brand-nav-bg: #5c2947;
	--brand-cta: #2C7F80;
	--brand-cta-bg: #5c2947;
	--brand-card-image-border: #2C7F80;
	--brand-card-border-width: 8px;
}

/* GEIC */
.geic {
	--brand-primary: #1E7259;
	--brand-primary-hover: #296b5d;
	--brand-banner-bg: #000000;
	--brand-top-bar: #52426C;
	--brand-nav-bg: #1E7259;
	--brand-cta: #2C7F80;
	--brand-cta-bg: #1E7259;
	--brand-card-image-border: #1E7259;
	--brand-card-border-width: 8px;
}

/* NGI */
.ngi {
	--brand-primary: #3960A2;
	--brand-primary-hover: #4371c0;
	--brand-banner-bg: #000000;
	--brand-top-bar: #52426C;
	--brand-nav-bg: #3960A2;
	--brand-cta: #2C7F80;
     --brand-cta-bg: #3960A2;
	--brand-card-image-border: #3960A2;
	--brand-card-border-width: 0px;
}

/* =========================================
   1. GLOBAL & RESET
   ========================================= */

html,
body {
	overflow-x: hidden;
	margin: 0;
	padding: 0;
	width: 100%;
}

section > h2.primary {
	background: var(--brand-primary);
}

.cta a.primary,
.cta a.primary:visited {
	border-color: var(--brand-cta);
	background-color: var(--brand-cta-bg);
}

.graphene .mainContentContainer > h1 {
	padding: 0 3%;
}

.graphene .pageWrapper,
.graphene .oneColLayoutContainer,
.graphene .row {
	overflow: visible;
}

#azRow,
.graphene footer .row {
	overflow: hidden;
}

.graphene #breadcrumb-share-container,
.flexbox .graphene #breadcrumb-share-container {
	border-bottom: none;
}

.graphene .contentContainer .tripleVertPadding {
	padding: 0;
}

.graphene .contentContainer .row:not(#breadcrumb-share-container) {
	width: 100%;
	max-width: none;
}

.graphene .leftMenuContainer {
	display: none;
}

.graphene .mainContentContainer {
	display: flex;
}

.graphene .banner-bg,
.geic .banner-bg,
.ngi .banner-bg {
	background: var(--brand-banner-bg);
}

.graphene .banner {
	display: flex;
	flex-flow: row wrap;
	align-items: flex-start;
	margin: 0 auto;
	width: 94%;
	max-width: 1140px;
	padding: 30px 0;
	line-height: 0;
}

.graphene .banner .content {
	overflow: visible;
}

.graphene .banner p,
.graphene .banner h1 {
	color: #fff;
}

.graphene .banner p:last-of-type {
	padding-bottom: 0;
}

.graphene .banner p.sub-heading,
.graphene .banner h1 {
	font-family: 'trumpgothicpro', 'Open Sans', sans-serif;
	font-weight: 500;
	font-style: italic;
	text-transform: uppercase;
}

.graphene.not-sr .banner p.sub-heading,
.graphene.not-sr .banner h1 {
	font-family: 'Open Sans', sans-serif;
	font-weight: 400;
	font-style: normal;
	text-transform: none;
}

.graphene .banner p.sub-heading {
	padding-bottom: .5em;
	font-size: 2.5em;
	line-height: 1.2;
}

.graphene.not-sr .banner p.sub-heading {
	font-size: 1.538461em;
}

.graphene .banner h1 {
	font-size: 4.7em;
	padding: 0 0 20px;
}

.graphene.not-sr .banner h1 {
	font-size: 2.769231em;
}

.graphene.no-header-nav .menu-search-icons {
	display: none;
}

.graphene-card-padding {
	padding: 40px;
}

/* =========================================
   2. NAVIGATION & TOP BAR
   ========================================= */

#navigation {
	display: none !important;
}

.graphene-top-bar {
	background: var(--brand-top-bar);
	width: 100%;
	height: 27px;
}

/* Hidden on mobile, shown at 600px+ */
.graphene-nav-container {
	display: none;
	background: var(--brand-nav-bg);
	border-top: 1px solid #fff;
	padding: 20px 0;
	width: 100%;
}

ul.graphene-nav-menu {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

.graphene-nav-menu li::before,
.graphene-nav-menu li::marker,
.graphene-nav-menu a::before {
	content: none !important;
	display: none !important;
	border: 0 !important;
	width: 0 !important;
	height: 0 !important;
}

.graphene-nav-menu li,
.graphene-nav-menu a {
	background: none !important;
	background-image: none !important;
}

.graphene-nav-menu li {
	display: flex;
	align-items: center;
	margin: 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
}

.graphene-nav-menu li::after {
	content: "|";
	display: inline-block;
	color: #bbb;
	font-weight: 300;
	position: relative;
	top: -1px;
}

.graphene-nav-menu li:last-child::after {
	display: none;
}

.graphene-nav-menu a {
	display: inline-block;
	padding: 0 15px;
	text-decoration: none;
	color: #fff !important;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.2;
	transition: color 0.2s;
}

.graphene-nav-menu a:hover {
	color: #dcdcdc !important;
}

/* =========================================
   3. CASE STUDY
   ========================================= */

.case-study-page #banner-container {
    margin: 0 auto 0px !important;
}

.case-study-page figure img {
     margin-bottom: 10px;
     border-radius: 20px;
}
.case-study-page figure.noIndent figcaption {
    padding: 0 0 3em;
	text-align: center;
    color: #000;
}
#banner-container {
     margin: 0 auto 0px !important;
}
.case-study-bar {
     background: var(--brand-primary);
     width: 100%;
     padding: 50px 0;
     color: white;
     margin-bottom: 60px;
}
.landing-page-copy-container h1 {
    color: var(--brand-primary);
}
.case-study-bar p {
     margin: 0;
}
.case-study-bar .inner {
     max-width: 1140px;
     margin: 0 auto;
     padding: 10px 0;
     height: 100%;
     display: flex;
     flex-direction: column;
     justify-content: center;
}
.case-study-bar .company {
     font-size: 4em;
     line-height: 1;
     margin: 0;
     color: white;
}
.case-study-bar .slogan {
     font-size: 2em;
     margin: 0;
     color: white;
     padding-bottom: 20px;
}
.case-study-bar .tagline {
     font-size: 3em;
     font-weight: 100;
     color: white;
     padding-top: 20px;
     line-height: 1.2;
}

.graphene-impact-grid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}

.graphene-impact-grid .impact-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-sizing: border-box;
  padding: 1rem;
}

.graphene-impact-grid.usp.one   .impact-item { width: 100%; }
.graphene-impact-grid.usp.two   .impact-item { width: 50%; }
.graphene-impact-grid.usp.three .impact-item { width: 33.333%; }
.graphene-impact-grid.usp.four  .impact-item { width: 25%; }

/* =========================================
   4. BANNER VIDEO
   ========================================= */

/* Mobile base styles */
#banner-container,
#banner-video-container {
	position: relative;
	margin: 0 auto 60px !important;
	width: 100%;
	font-size: 2rem;
	font-weight: bold;
	text-transform: uppercase;
	text-align: center;
	background: #000;
	overflow: hidden;
	aspect-ratio: auto;
	height: 150px;
	display: flex;
	flex-direction: column;
	align-items: center;
	background-size: cover;
	background-position: center;
	justify-content: flex-start;
	padding: 40px 20px 20px;
}

#banner-container > img {
	display: none;
}

#banner-container .banner-content {
	position: relative;
	inset: auto;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	z-index: 3;
	padding: 0 16px;
	gap: 8px;
	text-transform: none;
}

#banner-video-container h1 {
	position: absolute;
	inset: 0;
	z-index: 1;
	margin: auto;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 50%;
	max-width: 800px;
	color: #fff;
}

#banner-video-container h1 img {
	width: 100%;
	display: block;
}

#banner-video-container video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	z-index: 0 !important;
}

#banner-video-container::after {
	content: "";
	display: block;
	height: 60px;
}

#banner-container img {
	width: 100%;
	height: auto;
	display: block;
}

.banner-headline {
	position: relative;
	z-index: 3;
	color: #fff;
	font-weight: 300;
	text-align: center;
	text-shadow: 2px 2px 0 #000;
	padding-bottom: 0;
	margin: 0;
	font-size: 4rem;
}

.banner-subtitle {
	margin: 0;
	z-index: 3;
	padding: 0;
	color: #fff;
	font-weight: 200;
	line-height: 1.35;
	text-align: center;
	text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.6);
	font-size: 3rem;
	max-width: 60%;
}

.banner-headline,
.banner-subtitle {
	display: inline-block;
	width: auto !important;
	max-width: max-content;
	background: rgba(60, 60, 60, 0.4);
	padding: 0.08em 0.3em;
	border-radius: 3px;
	box-decoration-break: clone;
	-webkit-box-decoration-break: clone;
}

/* Mobile CTA */
.banner-cta,
.cta-banner-pos {
	position: relative;
	inset: auto;
	transform: none;
	white-space: normal;
	font-size: 1rem;
	padding: 12px 20px;
	width: 100%;
	display: block;
	z-index: 2;
}

#banner-container h1 {
	position: relative;
	inset: auto;
	transform: none;
	width: 90%;
	margin-bottom: 0;
	text-align: center;
}

/* =========================================
   4. CTA BUTTONS
   ========================================= */

.cta-base,
.banner-cta,
.footer-cta {
	display: inline-block;
	padding: 15px 40px;
	background-color: var(--brand-cta-bg);
	color: #fff !important;
	font-weight: 800 !important;
	font-size: 20px;
	border: 1px solid #ffffff;
	border-radius: 10px;
	text-decoration: none !important;
	transition: transform 0.2s, background-color 0.2s;
	box-sizing: border-box;
	line-height: 1.2;
	text-align: center;
	pointer-events: auto;
}

.cta-base:hover,
.banner-cta:hover,
.footer-cta:hover {
	background-color: var(--brand-primary-hover);
	color: #e0e0e0 !important;
	transform: translateY(-3px);
}

.banner-cta:hover,
.cta-banner-pos:hover {
	transform: translateX(-50%) translateY(-3px);
}

.footer-cta,
.cta-footer-pos {
	margin: 20px 0;
}

.footer-cta-container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	clear: both;
}

/* =========================================
   5. PULL QUOTE
   ========================================= */

.pullQuote {
	display: flex !important;
	align-items: flex-start !important;
	gap: 30px;
	border: none !important;
}

.pullQuote > span,
.pullQuote > noscript {
	display: none !important;
}

.pullQuote blockquote {
	margin: 0 !important;
}

.pullQuote .quotes {
	background: none !important;
}

.pullQuote img {
	width: 300px !important;
	height: 250px !important;
	object-fit: cover;
	object-position: center;
	flex-shrink: 0;
	border-right: 7px solid var(--brand-primary);
	border-top-left-radius: 15px;
	border-bottom-left-radius: 15px;
}

.pullQuote blockquote p {
	font-size: 2rem;
	font-weight: bold;
	color: var(--brand-primary);
	line-height: 1.4;
}

.pullQuote cite {
	font-size: 2rem;
	color: #555;
	font-weight: bold;
}

.pullQuote cite span {
	font-size: 1.5rem;
	color: #777;
	display: block;
	font-weight: normal;
}

/* =========================================
   6. GRAPHENE ACCORDION
   ========================================= */

.graphene-accordion {
    padding: 0 16px;
}

.graphene-accordion details {
	border: 0.5px solid #e0e0e0;
	border-radius: 12px;
	margin-bottom: 10px;
	overflow: hidden;
	background: #fdfdf0;
}

.graphene-accordion summary {
	padding: 18px 20px;
	font-size: 20px;
	font-weight: 500;
	cursor: pointer;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 14px;
	user-select: none;
}

.graphene-accordion summary::-webkit-details-marker {
	display: none;
}

.graphene-accordion details[open] summary {
	border-bottom: 0.5px solid #e0e0e0;
}

.graphene-accordion details[open] {
	margin-bottom: 30px;
}

.graphene-accordion__icon {
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: var(--brand-primary);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 300;
	flex-shrink: 0;
	line-height: 1;
}

.graphene-accordion details .graphene-accordion__icon::before {
	content: '+';
}

.graphene-accordion details[open] .graphene-accordion__icon::before {
	content: '-';
}

.graphene-accordion__content {
	padding: 16px 20px;
	font-size: 14px;
	line-height: 1.7;
}

.graphene-accordion summary h2 {
	font-weight: 500 !important;
	font-size: 1.461538em !important;
	line-height: 1.4 !important;
	margin: 0 !important;
	padding: 0 !important;
	color: #1d1d1d !important;
}

.graphene-accordion details.blue1  { background: #EBF3FB; }
.graphene-accordion details.blue2  { background: #D5E6F5; }
.graphene-accordion details.blue3  { background: #C5DDEF; }
.graphene-accordion details.blue4  { background: #ACC9E5; }
.graphene-accordion details.blue5  { background: #8DB5DA; }

/* =========================================
   7. PLATFORM ACCORDION (existing UoM)faf4c0
   ========================================= */

.accordion-item-button {
	display: flex !important;
	align-items: center !important;
	width: 100% !important;
	background-color: #f6f6f6 !important;
	padding: 20px 15px !important;
	border: none !important;
	cursor: pointer !important;
}

.accordion-item-button .icon {
	background: #000;
	margin-right: 12px !important;
}

.accordion-item-button .text {
	line-height: 1 !important;
}

.accordion-item-button:not([disabled]) .icon:before,
.accordion-item-button:not([disabled]) .icon:after {
	background: #fff;
}

.accordion-item-button:not([disabled]):hover .icon {
	background-color: var(--brand-primary);
}

.accordion-item-button:not([disabled])[aria-expanded="true"] .icon {
	background: #d9d9d9;
}

.accordion-item-button[aria-expanded="true"] .icon:before,
.accordion-item-button[aria-expanded="true"] .icon:after {
	background: #000;
}

.accordion-item-button:not([disabled])[aria-expanded="true"]:hover .icon {
	background-color: var(--brand-primary);
}

.accordion-item-button:not([disabled])[aria-expanded="true"]:hover .icon:before,
.accordion-item-button:not([disabled])[aria-expanded="true"]:hover .icon:after {
	background: #fff;
}

/* =========================================
   8. GRID & LAYOUT
   ========================================= */

section {
	margin-top: 0 !important;
	padding-top: 0 !important;
}

section > h2,
section > h2.primary {
	margin-bottom: 0 !important;
	padding-bottom: 15px !important;
	border-bottom: none !important;
}

.imageFloat {
	margin-bottom: 0 !important;
}

.embed-container {
	margin-top: 1em;
	margin-bottom: 3em;
}

.card-image-border {
	border-left: var(--brand-card-border-width) solid var(--brand-card-image-border);
}

.flex-grid {
	margin: 0 0 0 -20px !important;
}

.grid-cell {
	margin-bottom: 0 !important;
	padding-bottom: 30px !important;
}

.grid-cell .card,
.grid-cell .card:not(.no-shadow):not(.with-border) {
	border-radius: 0 !important;
	overflow: visible !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1) !important;
}

.grid-cell .copy h4:first-child {
	font-size: 2em;
	font-weight: 600;
}

.graphene-stack .card {
	background: #ffffff;
	height: 100%;
	display: flex;
	flex-direction: column;
}

.graphene-stack .card img,
.graphene-stack .card figure {
	order: 1;
}

.graphene-stack .card .padding,
.graphene-stack .card .content,
.graphene-stack .card .copy {
	order: 2;
}

.graphene-stack:nth-child(even) .card img,
.graphene-stack:nth-child(even) .card figure {
	order: 2;
}

.graphene-stack:nth-child(even) .card .padding,
.graphene-stack:nth-child(even) .card .content,
.graphene-stack:nth-child(even) .card .copy {
	order: 1;
}

.tpad {
	margin: 60px 0 0;
	text-align: center;
}

/* Mobile: flexible auto-fit grid */
.Logo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
	gap: 15px;
}

.logo-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	font-size: 14px;
	color: #333;
}

.logo-item img {
	width: 100%;
	background: #fff;
	padding: 15px;
	border: 1px solid color-mix(in srgb, var(--brand-primary) 25%, white);
	border-radius: 8px;
	box-sizing: border-box;
}

.logo-name {
	margin-top: 8px;
	text-align: center;
}

.accreditation-image-grid {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  padding: 70px 0;
}

.accreditation-image-grid img {
  height: 200px; /* control size via height instead */
  width: auto;
}

/* =========================================
   9. IMPACT CARD
   ========================================= */

section.impact-card {
	margin-top: 30px !important;
	margin-bottom: 60px;
}

.impact-card {
	border-radius: 0;
	box-shadow: rgba(0, 0, 0, .2) 0 0 32px -10px;
	background: #fff;
	overflow: hidden;
	margin: 0;
}

.impact-card__header {
	background: #523852;
	margin-bottom: 0 !important;
	padding-bottom: 0 !important;
	border-bottom: none !important;
}

.impact-card__title {
	color: #fff;
}

.impact-card__body {
	padding: 18px 22px 26px;
}

.impact-card__intro {
	margin: 0 0 18px;
	font-size: 1.3rem;
	line-height: 1.5;
}

.impact-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 28px;
	align-items: start;
	margin-top: 10px;
}

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

.impact-item__icon img {
	height: 100px;
	object-fit: contain;
}

/* =========================================
   NEWS
   ========================================= */

.graphene-news-row {
  display: block !important;
  width: 100%;
  clear: both;
}

.graphene-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.graphene-news-header h2 {
  margin: 0;
}

.graphene-news-header .all {
  white-space: nowrap;
  margin: 0;
  line-height: 1;
}

.graphene-news-wrapper {
  display: block;
  width: 100%;
  clear: both;
  padding-bottom: 32px;
  border-bottom: 1px solid #d8d8d8;
  margin-bottom: 32px;
}

.graphene-news-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  width: 100%;
}

.graphene-news-card {
  min-width: 0;
}

.graphene-news-card a {
  display: block;
  text-decoration: none;
}

.graphene-news-card img {
  width: 100%;
  height: 153px;
  object-fit: cover;
  display: block;

  /* rounded top corners */
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;

  /* graphene brand monochrome */
  filter:
    grayscale(100%)
    sepia(35%)
    hue-rotate(255deg)
    saturate(180%)
    brightness(0.9);

  background-color: var(--brand-primary-hover);
}

.graphene-news-card h3 {
  margin: 12px 0 0;
}

/* =========================================
   10. FOOTER
   ========================================= */

#footer-container {
	display: flex !important;
	justify-content: center;
	width: 100vw !important;
	max-width: 100vw !important;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 !important;
	margin: 0 !important;
	line-height: 0;
	overflow: hidden;
}

#footer-container h1,
#footer-container img,
.footer-silhouette {
	width: 100% !important;
	max-width: none !important;
	height: auto;
	display: block;
	margin: 0 !important;
	padding: 0 !important;
	border: none;
}

.LastsubHeading {
	font-size: 1.692308em;
	line-height: 1.5;
	font-weight: 300;
	padding: 80px 0 30px;
}

/* =========================================
   BREAKPOINTS
   ========================================= */

/* --- Tablet and above (600px+) --- */
@media (min-width: 600px) {

	/* Navigation */
	.graphene-nav-container {
		display: block;
	}

	.graphene.no-header-nav #navigation,
	.graphene.no-header-nav #breadcrumb-share-container {
		display: none;
	}

	/* Banner - desktop layout */
	#banner-container,
	#banner-video-container {
		aspect-ratio: 16 / 4.9;
		height: auto;
		display: block;
		flex-direction: unset;
		align-items: unset;
		justify-content: unset;
		padding: 0;
	}

	#banner-container > img {
		display: block;
	}

	#banner-container .banner-content {
		position: absolute;
		inset: 0;
		padding: 0 20px;
		gap: unset;
	}

	#banner-container h1 {
          position: relative !important;
          inset: auto !important;
          transform: none !important;
	     width: auto !important;
	     max-width: max-content;
          margin-bottom: 0 !important;
          text-align: center !important;
                        font-size: 6rem;
	}

	/* CTA - desktop positioning */
	.banner-cta,
	.cta-banner-pos {
		position: absolute;
		left: 50%;
		bottom: 60px;
		transform: translateX(-50%);
		white-space: nowrap;
		font-size: 20px;
		padding: 15px 40px;
		width: auto;
		display: inline-block;
	}

	/* Layout */
	.pullQuote.twelvecol img {
		margin: 0 20px 0 0;
	}

	section {
		width: 100%;
	}

	.landing .accordion-item-content {
		max-width: none !important;
	}

	.graphene .banner p.sub-heading {
		font-size: 3em;
	}

	#breadcrumb-section-menu-container .breadcrumbNav ul,
	#breadcrumb-section-menu-container .section-menu {
		padding: 0 5%;
	}

	.graphene .mainContentContainer > h1 {
		padding: 0 5%;
	}

	.graphene .banner {
		width: 90%;
	}

     .graphene-accordion {
        padding: 0;
    }
}

@media (min-width: 500px) {
    .accordion-item-content {
        padding-left: 0 !important;
    }
}

@media (min-width: 600px) and (max-width: 999px) {
    .graphene .mainContentContainer section {
        padding-left: 3% !important;
        padding-right: 3% !important;
        box-sizing: border-box;
    }

     .graphene-nav-menu a {
        font-size: 16px;
        padding: 0 10px;
    }

        .banner-headline {
        font-size: 3rem;
    }

    .banner-subtitle {
        font-size: 2rem;
    }
}

/* --- Mid range (800px+) --- */
@media (min-width: 800px) {

	.graphene .mainContentContainer {
		padding-bottom: 0;
	}

	.graphene .banner {
		padding: 60px 0;
	}

	.graphene.not-sr .banner p.sub-heading {
		font-size: 2em;
	}

	.graphene .banner h1 {
		font-size: 5.7em;
	}

	.graphene.not-sr .banner h1 {
		font-size: 3.384615em;
	}

	.grid-cell:only-child:not(.youtube-short) .card > img {
		height: auto;
		object-fit: contain;
	}

     .graphene-accordion {
          padding: 0 16px;
     }
}

/* --- Desktop (1000px+) --- */
@media (min-width: 1000px) {

	.graphene .banner .content {
		max-width: 800px;
	}

	.graphene .banner .flex-grid {
		max-width: 800px;
	}

	.graphene .banner p {
		font-size: 1.4em;
	}

	.graphene.not-sr .banner h1 {
		font-size: 4.923077em;
		font-weight: 300;
	}

	.graphene .banner h1 {
		font-size: 6.7em;
	}

	.Logo-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}