* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Rubik", Arial, sans-serif;
overflow-x: hidden;
}
#acknowledgement-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-image: url('images/section-1-bg.jpg');
  background-size: cover;
  background-position: center;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  text-align: center;
  z-index: 9999;
  padding: 25px;
}

#acknowledgement-overlay p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
color: #fff;
margin-top: 15px;
}

.overlay-content {
  max-width: 600px;
  padding: 20px;
  font-size: 1.2em;
}

.btn {
font-size: 16px;
font-weight: 600;
color: #000000;
text-decoration: none;
background: #ffffff;
padding: 12px 24px;
border-radius: 12px;
display: inline-block;
white-space: nowrap;
width: fit-content;
cursor: pointer;
transition: 0.3s;
border: none;
padding: 10px 20px;
margin: 10px 0 15px 0;
}

.btn:hover {
  background: #ddd;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #333333;
background-repeat: no-repeat;
background-position: center;
z-index: 10;
display: flex;
align-items: center;
justify-content: center;
}
.header-container {
padding: 50vh 0 !Important;
}
h1 {
font-size: 96px;
line-height: 85px;
text-align: center;
color: #ffffff;
text-transform: uppercase;
max-width: 1400px;
}
h2,
.h2 {
font-size: 72px;
line-height: 62px;
text-align: center;
color: #ffffff;
text-transform: uppercase;
font-weight: 300;
}
h5 strong {
font-weight: 500;
}
header .container {
gap: 25px;
}
header .background-image-container img {
width: 100%;
}
nav {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px 50px;
height: 60px;
z-index: 1000;
}
.nav-logo-container {
display: flex;
align-items: center;
}
.nav-logo {
height: 40px;
width: auto;
margin-right: 10px;
}
.nav-button {
background-color: white;
color: #333;
font-size: 14px;
font-weight: bold;
padding: 10px 20px;
border-radius: 10px;
text-decoration: none;
transition: background 0.3s;
}
.nav-button:hover {
background-color: #ddd;
}
.content .nav-button {
  margin-bottom: 10px;
}
main {
margin-top: 100vh;
margin-bottom: 100vh;
position: relative;
z-index: 30;
}
footer {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: #333333;
background-repeat: no-repeat;
background-position: center;
z-index: 0;
display: flex;
justify-content: center;
color: #ffffff;
}
.footer-container {
gap: 10px !important;
padding: 20px !important;
}
footer h2,
footer .h1 {
font-size: 72px;
line-height: 62px;
text-align: center;
text-transform: uppercase;
font-weight: 300;
}
.footer-trigger {
height: 0px;
}
.year {
color: #F15C22;
font-weight: 300;
}
.white-link {
color: #ffffff;
}
.scroll-arrow {
position: absolute;
bottom: 150px;
height: 100px;
width: auto;
z-index: 1;
animation: floatAnimation 3s ease-in-out infinite;
}
.cards_single_card .scroll-arrow {
  align-content: center;
  justify-content: center;
  display: flex;
  position: inherit !important;
}
@keyframes floatAnimation {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20px);
}
}
#backToTop {
position: fixed;
bottom: 20px;
right: 20px;
width: 60px;
height: auto;
opacity: 0;
visibility: hidden;
transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out, transform .2s ease;
z-index: 1000;
}
#backToTop:hover {
transform: scale(1.05);
}
#backToTop img {
width: 100%;
height: auto;
}
#backToTop.show {
opacity: 1;
visibility: visible;
}
ul {
list-style: none;
}
ul li {
position: relative;
padding-left: 20px;
}
ul li::before {
content: "";
position: absolute;
left: 0;
top: 11px;
transform: translateY(-50%);
width: 8px;
height: 8px;
background-image: url('images/dot.png');
background-size: contain;
background-repeat: no-repeat;
}
section.cards {
position: relative;
min-height: 100vh;
height: max-content;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
font-weight: bold;
color: black;
z-index: 9;
}
.container {
position: relative;
z-index: 6;
width: 100%;
padding: 90vh 0 50vh 0;
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
gap: 70vh;
}
.container::-webkit-scrollbar {
display: none;
}
.small-container {
gap: 20vh !important;
padding: 20vh !important;
}
.video-container {
  padding: 50px 0 50vh 0 !important;
}
.key-insights-container {
  padding: 150px 0 50vh 0 !important;
}
.cards_single_card, .video_card {
width: 100%;
max-width: 900px;
height: auto;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
padding: 5rem;
border-radius: 16px;
}
.video_card {
box-shadow: none !Important;
padding: 0 !important;
}
.video_card p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
background: #E7DEDD;
color: #333333;
padding: 5em;
border-radius: 16px;
}
.cards_single_card.two-col-card {
display: flex;
align-items: center;
justify-content: space-between;
gap: 2rem;
}
.image-container {
width: 30%;
flex-shrink: 0;
}
.brown-row .cards_single_card.two-col-card .image-container {
width: 40%;
}
.image-container img {
width: 100%;
height: auto;
display: block;
box-shadow: -2px 2px 3px rgba(0,0,0,.4);
}
.download-desktop {
  display: block !important;
  width: fit-content;
}
.download-mobile {
  display: none !important;
}
.content {
width: 70%;
display: flex;
flex-direction: column;
}
.brown-row .cards_single_card.two-col-card .content {
width: 60%;
}
.impact-img {
width: 60%;
margin: 0 20%;
}
.cards_brown .cards_single_card {
background: #602319;
color: white;
}
.cards_white .cards_single_card {
background: #E7DEDD;
color: #333333;
}
.cards_beige .cards_single_card {
background: #FDE7DE;
color: #333333;
}
.cards_colour h6, .small-container h3, .cards_brown .cards_single_card h3, .two-col-card h3 {
font-size: 40px !important;
line-height: 48px !important;
margin-bottom: 20px;
display: inline-block;
font-family: "Rubik", Arial, sans-serif;
text-transform: none !important
}
.cards_colour .no_colour, .no_colour {
background: transparent !important;
box-shadow: none !important;
padding: 5rem !important;
}
.no_colour h4 {
margin-left: 30px;
margin-bottom: 5px !important;
}
.no_colour p {
margin-bottom: 30px !important;
}
.cards_colour .cards_single_card {
padding: 0;
box-shadow: 0 0px 0px rgba(0, 0, 0, 0.2) !important;
}
.dots {
width: 20px;
height: 20px;
position: absolute;
border-radius: 20px;
margin-top: 2px;
}
.brown-dot {
background: #602319;
}
.orange-dot {
background: #F05C24;
}
.peach-dot {
background: #F58C64;
}
.pink-dot {
background: #FABDA5;
}
.cards_single_card .brown_card {
background: #602319;
color: #ffffff;
background-image: url('images/dot-bg.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: right top;
padding: 5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius: 15px;
}
.cards_single_card .red_card {
background: #E41F26;
color: #ffffff;
background-image: url('images/dot-bg.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: right top;
padding: 5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius: 15px;
}
.cards_single_card .blue_card {
background: #00548C;
color: #ffffff;
background-image: url('images/dot-bg.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: right top;
padding: 5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius: 15px;
}
.cards_single_card .grey_card {
background: #939CB0;
color: #000000;
background-image: url('images/dot-bg.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: right top;
padding: 5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius: 15px;
}
.cards_single_card .orange_card  {
background: #F15C22;
color: #000000;
background-image: url('images/dot-bg.png');
background-repeat: no-repeat;
background-size: 40%;
background-position: right top;
padding: 5rem;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
margin-bottom: 25px;
border-radius: 15px;
}
.cards_single_card h3 {
font-size: 20px;
line-height: 24px;
font-weight: 800;
display: block;
margin-bottom: 20px;
text-transform: uppercase;
}
.cards_single_card h4 {
font-size: 20px;
line-height: 24px;
font-weight: 600;
display: block;
margin-bottom: 10px;
}
.cards_single_card h5, .artwork-text h5 {
font-size: 20px;
line-height: 30px;
font-weight: 300;
margin-bottom: 15px;
}
.cards_single_card h5:last-child, .artwork-text h5:last-child {
margin-bottom: 0;
}
.cards_single_card p, .artwork-text p {
font-size: 16px;
line-height: 24px;
font-weight: 300;
margin-bottom: 15px;
}
.cards_single_card p:last-child {
margin-bottom: 0;
}
.cards_single_card li {
font-size: 16px;
line-height: 24px;
font-weight: 300;
margin-bottom: 15px;
}
.domain {
padding: 20px;
border-radius: 10px;
width: 900px;
}
.bar {
display: flex;
height: 80px;
border-radius: 5px;
overflow: hidden;
}
.segment {
height: 100%;
transition: width 1.5s ease-in-out;
width: 0;
}
.domain-a.bar.visible .segment.foundational {
width: 29%;
}
.domain-a.bar.visible .segment.growth {
width: 29%;
}
.domain-a.bar.visible .segment.integration{
width: 38%;
}
.domain-a.bar.visible .segment.advocacy{
width: 4%;
}
.domain-b.bar.visible .segment.foundational {
width: 26%;
}
.domain-b.bar.visible .segment.growth {
width: 35%;
}
.domain-b.bar.visible .segment.integration{
width: 26%;
}
.domain-b.bar.visible .segment.advocacy{
width: 13%;
}
.domain-c.bar.visible .segment.foundational {
width: 15%;
}
.domain-c.bar.visible .segment.growth {
width: 79%;
}
.domain-c.bar.visible .segment.integration{
width: 3%;
}
.domain-c.bar.visible .segment.advocacy{
width: 3%;
}
.domain-d.bar.visible .segment.foundational {
width: 24%;
}
.domain-d.bar.visible .segment.growth {
width: 50%;
}
.domain-d.bar.visible .segment.integration{
width: 26%;
}
.domain-d.bar.visible .segment.advocacy{
width: 0%;
}
.domain-e.bar.visible .segment.foundational {
width: 21%;
}
.domain-e.bar.visible .segment.growth {
width: 59%;
}
.domain-e.bar.visible .segment.integration{
width: 18%;
}
.domain-e.bar.visible .segment.advocacy{
width: 3%;
}
.foundational { background: #651b0c; }
.growth { background: #e6531a; }
.integration { background: #f58f6e; }
.advocacy { background: #fbc2a9; }
.legend {
display: flex;
justify-content: space-between;
margin-top: 15px;
}
.legend-item {
display: flex;
align-items: center;
gap: 10px;
}
.color {
width: 40px;
height: 40px;
border-radius: 50%;
flex-shrink: 0;
}
.legend-text {
display: flex;
flex-direction: column;
text-align: left;
}
.legend-text strong {
font-size: 36px;
font-weight: bold;
color: #222;
line-height: 1;
}
.legend-text span {
font-size: 18px;
font-weight: bold;
color: #222;
}
.legend-item .foundational { background: #651b0c; }
.legend-item .growth { background: #e6531a; }
.legend-item .integration { background: #f58f6e; }
.legend-item .advocacy { background: #fbc2a9; }
.background-image-container {
z-index: 1;
width: 100%;
height: 110vh;
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
footer .background-image-container {
height: 100vh;
}
.background-image-container img.img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: top center;
}
.divider {
position: relative;
z-index: 9;
margin-top: -55px;
width: 101%;
}
.div-flipped {
transform: rotate(180deg);
margin-top: -5px !important;
}
.toc-desktop, .aus-desktop {
  display: block;
}
.toc-mobile, .aus-mobile {
  display: none;
}
.floating-container {
width: 100%;
padding: 200px 0;
position: relative;
z-index: 9;
display: flex;
align-content: center;
justify-content: center;
margin-top: -20px;
}
.floating-container.brown-row {
background: #602319;
color: #ffffff;
}
.brown-row .cards_single_card {
box-shadow: 0 0 0;
}
.brown-row .cards_single_card.two-col-card {
padding: 0 !important;
}
.floating-container.brown-row::before {
content: '';
position: absolute;
right: 0;
top: -50px;
width: 300px;
height: 300px;
background-image: url('images/circle-dots.png');
background-size: contain;
background-repeat: no-repeat;
background-position: right;
}
.floating-container.brown-row::after {
content: '';
position: absolute;
left: -50px;
bottom: -50px;
width: 80%;
height: 400px;
background-image: url('images/footprints.png');
background-size: cover;
z-index: -1;
}
.floating-container.beige-row {
background: #FDF2EA;
color: #333333;
}
.floating-container.white-row {
background: #FFFFFF;
color: #333333;
}
.artwork-container {
display: flex;
align-items: flex-start;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.artwork-image {
flex: 1;
max-width: 50%;
position: sticky;
top: 100px;
}
.artwork-image img {
width: 100%;
height: auto;
display: block;
}
.caption {
font-size: 14px;
font-style: italic;
color: #555;
margin-top: 8px;
}
.artwork-text {
flex: 1;
max-width: 50%;
}
.artwork-text h2 {
font-size: 40px;
font-weight: bold;
color: #333;
text-align: left;
text-transform: none;
}
.artwork-text h5 {
margin-bottom: 10px;
}
.more-text {
max-height: 0;
overflow: hidden;
transition: max-height 0.5s ease-in-out, opacity 0.3s ease-in-out;
opacity: 0;
}
.more-text.expanded {
max-height: 500px;
opacity: 1;
}
.read-more {
font-size: 16px;
font-weight: bold;
color: #333;
text-decoration: none;
display: inline-flex;
align-items: center;
margin-top: 10px;
cursor: pointer;
}
.read-more span {
margin-left: 5px;
transition: transform 0.3s ease-in-out;
}
.toggle-arrow {
width: 15px;
height: 15px;
background: url('images/toggle.svg');
background-size: cover;
}
.toggle-flipped {
transform: rotate(180deg);
}
.read-more.active span {
transform: rotate(180deg);
}
.collaborators-section {
max-width: 1200px;
margin: 50px auto;
}
.collaborators-section h2 {
font-size: 40px;
font-weight: bold;
color: #333;
text-align: center;
text-transform: none;
}
.collaborators-logos {
display: flex;
justify-content: center;
align-items: center;
gap: 100px;
flex-wrap: wrap;
margin-top: 50px;
}
.collaborators-logo img {
width: auto;
height: 100px;
}
.steve {
position: absolute;
z-index: 3;
max-width: 20rem;
width: 50%;
height: auto;
}
.graphic-left {
top: 100px;
left: -130px;
}
.graphic-right {
bottom: 50px;
right: 0;
}
.graphic-left-alt {
bottom: 50px;
left: -50px;
}
.graphic-right-alt {
top: 0px;
right: -50px;
}
footer .background-image-container img {
width: 100%;
object-fit: cover;
object-position: bottom;
height: 100%;
}
.footer-cols {
width: 100%;
display: flex;
padding: 100px 50px 0 50px;
text-transform: uppercase;
line-height: 25px;
}
.footer-cols a {
color: #fff;
text-decoration: none;
display: block;
font-weight: 300;
}
.footer-cols div {
width: 50%;
}
.footer-cols div:nth-child(2) {
text-align: right;
}
.acknowledge {
max-width: 600px;
text-align: center;
margin-top: -50px;
font-weight: 300;
line-height: 24px;
}

/* Breakpoints */
@media(max-width: 1450px) {
h1 {
  font-size: 80px;
}
.graphic-right-alt {
  right: -200px;
}
.graphic-left-alt {
  left: -200px;
}
}

@media(max-width: 1250px) {
h1 {
font-size: 66px;
line-height: 72px;
}
h2,
.h2 {
font-size: 52px;
line-height: 58px;
}
.artwork-container {
	padding: 0 38px;
}
.collaborators-logo img {
  height: 70px;
}
}

@media(max-width: 1000px) {
.download-desktop {
  display: none !important;
}
.download-mobile {
  display: block !important;
  width: fit-content;
}
h1 {
font-size: 60px;
line-height: 65px;
}
h2,
.h2 {
font-size: 46px;
line-height: 52px;
}
.domain {
  width: 100%;
}
.graphic-left {
  top: 50px;
  left: -200px;
}
.graphic-right {
  bottom: 50px;
  right: -150px;
}
.graphic-left-alt {
  left: -250px;
}
.graphic-right-alt {
  right: -250px;
}
.floating-container.brown-row::after {
  width: 100%;
  left: 0;
}
.floating-container.brown-row::before {
width: 150px;
height: 150px;
}
.toc-desktop, .aus-desktop {
  display: none;
}
.toc-mobile {
  display: block;
  object-fit: contain !important;
  background: white !important;
}
.aus-mobile {
  display: block;
  object-fit: cover !important;
}
footer .background-image-container img {
  display: none;
}
}

@media(max-width: 700px) {
h1 {
font-size: 50px;
line-height: 55px;
padding: 0 20px;
}
h2,
.h2 {
font-size: 46px;
line-height: 52px;
}
.header-container h2 {
  font-size: 30px;
  line-height: 38px;
}
nav {
 padding: 15px;
}
.nav-logo {
	height: 30px;
}
.intro-bg {
  height: 100%;
  object-fit: contain;
}
.scroll-arrow {
 bottom: 220px;
}
.graphic-left {
  left: -220px;
}
.graphic-right {
  right: -250px;
}
.graphic-left-alt {
  left: -450px;
}
.cards_single_card, .video_card {
  padding: 3rem;
  width: 90%;
}
.video_card p {
  padding: 3rem;
  width: 90%;
  margin: 0 5%;
}
.cards_colour h6 {
  font-size: 30px !important;
  line-height: 35px !important;
}
.cards_single_card .brown_card, .cards_single_card .red_card, .cards_single_card .blue_card, .cards_single_card .grey_card, .cards_single_card .orange_card {
  padding: 3rem;
}
.cards_single_card.no_colour {
  padding: 3rem !important;
}
.domain {
	width: 100%;
}
.bar {
  height: 40px;
}
.legend {
  flex-wrap: wrap;
  row-gap: 20px;
}
.legend-item {
  flex: 1 1 calc(50% - 10px);
}
.legend-text strong {
	font-size: 24px;
}
.legend-text span {
	font-size: 14px;
}
.color {
	width: 20px;
	height: 20px;
}
.impact-img {
  width: 100%;
  margin: 0;
}
.two-col-card {
  width: 90%;
}
.artwork-container, .two-col-card {
 flex-direction: column;
 align-items: center;
 gap: 20px;
}
.artwork-image {
  position: inherit;
}
.artwork-image, .artwork-text {
 max-width: 100%;
}
.two-col-card {
 padding: 2rem;
}
.image-container {
  width: 70% !important;
}
.content {
  width: 90% !important;
}
.footer-cols {
  padding: 100px 15px 0 15px;
}
.footer-cols a {
	margin-bottom: 20px;
}
.divider {
  display: none;
}
footer h1 {
 font-size: 50px;
 line-height: 55px;
}
#backToTop {
  width: 40px;
}
}