/* --------------------------------------------------------------------------
   Custom headers
   Source: headers.css
   -------------------------------------------------------------------------- */

h2 {
    gap: 5px;
}

h2 .bigBlue {
    color: var(--color-primary);
    font-weight: 900;
    min-width: 45px;
}

h3:not(.timeline-month) {
    border-left: solid 7px var(--color-highlight);
    padding-left: 10px;
    font-weight: 900;
}


/* --------------------------------------------------------------------------
   Blue title well
   Source: blueTitleWell.css
   -------------------------------------------------------------------------- */

.blueTitleWell {
    max-width: 850px;
    margin: 35px auto;

    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.blueTitleWell .blueTitleWellHead {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 65px;
    color: var(--color-primary);
    font-size: 22px;
    font-weight: 700;
    padding: 10px;
    text-align: center;
}

.blueTitleWell .blueTitleWellContent {
    padding: 15px;
    padding-top: 0;
}

.blueTitleWell .blueTitleWellHead p,
.blueTitleWell .blueTitleWellContent p {
    margin: 0;
}



/* --------------------------------------------------------------------------
   Build secure
   Source: buildSecure.css
   -------------------------------------------------------------------------- */

.buildSecure {
    max-width: 850px;
    margin: 35px auto;
}

.buildSecure .buildSecureHead {
    width: 100%;
    padding: 35px;

    color: white;
    background-color: var(--color-accent);
}

.buildSecure .buildSecureHead h4, .buildSecure .buildSecureHead p {
    text-align: center;
    margin: 0;
}

.buildSecure .buildSecureHead h4 {
    font-size: 32px;
    margin: 0;
}

.buildSecure .buildSecureContent {
    display: flex;
    flex-direction: column;
    gap: 15px;

    margin: 25px auto;
}

.buildSecure .buildSecureContent .buildSecureItem {
    display: flex;
    align-items: center;
    gap: 15px;
    min-height: 75px;

    width: 90%;
    margin-right: auto;
    margin-left: 0;

    padding: 15px 25px;

    background-color: var(--color-accent-lighterer);
    border: solid 2px var(--color-accent-lighter);
}

.buildSecure .buildSecureContent .buildSecureItem:nth-of-type(even) {
    width: 90%;
    margin-right: 0;
    margin-left: auto;
}

.buildSecure .buildSecureContent .buildSecureItem p {
    font-weight: 500;
    line-height: 24px;
    margin: 0;
}

.buildSecure .buildSecureContent .buildSecureItem img {
    max-width: 100px;
    padding: 5px;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: white;
    border: solid 4px var(--color-accent-light);
}

/* Small-screen defaults formerly defined in viewport queries. */
.buildSecure .buildSecureHead h4 {
    font-size: 28px;
}

.buildSecure .buildSecureContent .buildSecureItem img {
    max-width: 75px;
}

.buildSecure .buildSecureContent .buildSecureItem,
.buildSecure .buildSecureContent .buildSecureItem:nth-of-type(even) {
    width: 100%;
}

.buildSecure .buildSecureContent .buildSecureItem img {
    display: none;
}



/* --------------------------------------------------------------------------
   Coloured panels
   Source: coloredPanel.css
   -------------------------------------------------------------------------- */

.coloredPanel {
    margin: auto;
    margin-top: 15px;
    margin-bottom: 35px;
    border-radius: 5px;
    overflow: hidden;
    max-width: 850px;
}

.coloredPanel .coloredPanelHead {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 80px;
    margin: 0;
    padding: 10px 25px;

    color: white;
}

.coloredPanel .coloredPanelHead p {
    font-size: 24px;
    font-weight: 700;
    line-height: 26px;
    text-align: center;
    text-transform: uppercase;

    margin: 0;
}

.coloredPanel .coloredPanelHead span {
    font-size: 20px;
    font-weight: 500;
    text-transform: none;
    font-style: italic;
}

.coloredPanel .coloredPanelBody {
    display: flex;
    justify-content: space-evenly;
    align-items: stretch;
    gap: 15px;
    padding: 15px 25px;
}

.coloredPanel .coloredPanelBody .bodySection {
    flex: 1;
    text-align: center;
}

.coloredPanel .coloredPanelBody .bodySection:not(:nth-child(1)) {
    padding-left: 15px;
    border-left: solid 2px white;
}

.coloredPanel .coloredPanelBody .bodySection p {
    line-height: 26px;
    margin: 0;
}

.coloredPanel .coloredPanelBody .bodySection p:nth-of-type(3) {
    margin-top: 5px;
}

.coloredPanel .coloredPanelBody .bodySection .sectionHighlight {
    font-size: 36px;
    font-weight: 700;
    line-height: 40px;
    margin: 5px 0;
}

/* Lapis panel */

.coloredPanel.lapis {
    border: solid 3px var(--color-primary);
    background-color: var(--color-primary-lighterer);
}

.coloredPanel.lapis .coloredPanelHead {
    background-color: var(--color-primary);
}

.coloredPanel.lapis .coloredPanelBody .bodySection .sectionHighlight {
    color: var(--color-primary);
}

.coloredPanel.lapis .coloredPanelBody .bodySection:not(:nth-child(1)) {
    border-color: var(--color-primary);
}

/* Algae panel */

.coloredPanel.algae {
    border: solid 3px var(--color-accent);
    background-color: var(--color-accent-lighterer);
}

.coloredPanel.algae .coloredPanelHead {
    background-color: var(--color-accent);
}

.coloredPanel.algae .coloredPanelBody .bodySection .sectionHighlight {
    color: var(--color-accent);
}

.coloredPanel.algae .coloredPanelBody .bodySection:not(:nth-child(1)) {
    border-color: var(--color-accent);
}

/* Volcano panel */

.coloredPanel.volcano {
    border: solid 3px var(--color-secondary);
    background-color: var(--color-secondary-lighterer);
}

.coloredPanel.volcano .coloredPanelHead {
    background-color: var(--color-secondary);
}

.coloredPanel.volcano .coloredPanelBody .bodySection .sectionHighlight {
    color: var(--color-secondary);
}

.coloredPanel.volcano .coloredPanelBody .bodySection:not(:nth-child(1)) {
    border-color: var(--color-secondary);
}

/* Screens wider than 768px */

/* Small-screen defaults formerly defined in viewport queries. */
.coloredPanel .coloredPanelBody {
    flex-direction: column;
}

.coloredPanel .coloredPanelBody .bodySection:not(:nth-child(1)) {
    padding-left: 0;
    padding-top: 15px;

    border-left: none;
    border-top: solid 2px white;
}



/* --------------------------------------------------------------------------
   Competition grid
   Source: competitionGrid.css
   -------------------------------------------------------------------------- */

.competitionGrid {
    display: flex;
    flex-direction: column;
    gap: 15px;
    max-width: 850px;
    margin: auto;
}

.competitionGrid .competitionHeader {
    flex: 2;
    display: flex;
    align-items: center;
    gap: 15px;

    padding: 15px 20px;

    background-color: var(--color-primary);
    color: white;
}

.competitionGrid .competitionHeader .image {
    background-color: white;
    width: 100px;
    aspect-ratio: 1;

    -webkit-mask: url("./../../report-rapport/icons/icon-building-columns.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-building-columns.svg") no-repeat center / contain;
}

.competitionGrid .competitionHeader p {
    line-height: 24px;
}

.competitionGrid .competitionHeader .headerTitle {
    font-weight: 700;
    font-size: 24px;
}

.competitionGrid .competitionItem {
    display: flex;
    flex-direction: column;
    gap: 15px;

    padding: 10px 25px;

    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
    border-radius: 5px;
}

.competitionGrid .competitionItem .competitionItemTop .competitionItemHead {
    display: flex;
    align-items: center;
    gap: 20px;

    margin-bottom: 15px;
}

.competitionGrid .competitionItem .competitionItemTop .competitionItemHead .image {
    min-height: 50px;
    aspect-ratio: 1;
}

.competitionGrid .competitionItem .competitionItemTop .competitionItemHead h4 {
    font-weight: 700;
    font-size: 24px;
    line-height: 26px;
    margin: 0;
}

.competitionGrid .competitionItem .competitionItemBottom {
    border-top: solid 2px black;
    padding-top: 15px;
}

/* Lapis items */

.competitionGrid .competitionItem.lapis .competitionItemTop .competitionItemHead,
.competitionGrid .competitionItem.lapis strong {
    color: var(--color-primary);
}

.competitionGrid .competitionItem.lapis .competitionItemTop .competitionItemHead .image {
    background-color: var(--color-primary);

    -webkit-mask: url("./../../report-rapport/icons/icon-graph-up.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-graph-up.svg") no-repeat center / contain;
}

.competitionGrid .competitionItem.lapis .competitionItemBottom {
    border-color: var(--color-primary);
}

/* Algae items */

.competitionGrid .competitionItem.algae .competitionItemTop .competitionItemHead,
.competitionGrid .competitionItem.algae strong {
    color: var(--color-accent);
}

.competitionGrid .competitionItem.algae .competitionItemTop .competitionItemHead .image {
    background-color: var(--color-accent);

    -webkit-mask: url("./../../report-rapport/icons/icon-basket-algae.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-basket-algae.svg") no-repeat center / contain;
}

.competitionGrid .competitionItem.algae .competitionItemBottom {
    border-color: var(--color-accent);
}

/* Volcano items */

.competitionGrid .competitionItem.volcano .competitionItemTop .competitionItemHead,
.competitionGrid .competitionItem.volcano strong {
    color: var(--color-secondary);
}

.competitionGrid .competitionItem.volcano .competitionItemTop .competitionItemHead .image {
    background-color: var(--color-secondary);

    -webkit-mask: url("./../../report-rapport/icons/icon-idea.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-idea.svg") no-repeat center / contain;
}

.competitionGrid .competitionItem.volcano .competitionItemBottom {
    border-color: var(--color-secondary);
}

/* Small-screen defaults formerly defined in viewport queries. */
.competitionGrid .competitionHeader .image,
.competitionGrid .competitionItem .competitionItemTop .competitionItemHead .image {
    display: none;
}



/* --------------------------------------------------------------------------
   Cost panels
   Source: costPanels.css
   -------------------------------------------------------------------------- */

h4.costHeader {
    color: var(--color-primary);
    font-weight: 800 !important;
    border: none;
}

h4.costHeader span {
    color: var(--color-canada);
}

.costPanels {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    margin-bottom: 35px;
    gap: 25px;

    z-index: 0;
}

.costPanels .costItem {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;

    padding: 0 20px;

    width: 100%;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.costPanels .costItem .costItemHead {
    flex: 1;
    position: relative;
    isolation: isolate;
}

.costPanels .costItem .costItemHead::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background-color: var(--color-primary);

    mask-position: center;
    mask-size: auto 50%;
    mask-repeat: no-repeat;

    opacity: 0.07;
}

.costPanels .costItem .costItemHead.housing::before {
    mask-image: url("./../../report-rapport/icons/icon-house.svg");
}

.costPanels .costItem .costItemHead.food::before {
    mask-image: url("./../../report-rapport/icons/icon-groceries.svg");
}

.costPanels .costItem .costItemHead.energy::before {
    mask-image: url("./../../report-rapport/icons/icon-heat-pump.svg");
}

.costPanels .costItem .costItemHead p {
    text-align: center;
}

.costPanels .costItem .costItemHead hr {
    border-top: solid 2px var(--color-primary);
    margin-top: 15px;
    margin-bottom: 15px;
}

.costPanels .costItem .costItemHead .costItemTitle {
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
}

.costPanels .costItem .costItemHead .costItemAmount {
    font-size: 32px;
    line-height: 36px;
    font-weight: 900;
    color: var(--color-canada);
    margin: 0;
}

.costPanels .costItem .costItemContent {
    flex: 2;
    background-color: white;
}

.costPanels .costItem .costItemContent .costItemContentTitle {
    font-size: 26px;
    font-weight: 700;
    color: var(--color-primary);
}

.costPanels .costItem .costItemHead,
.costPanels .costItem .costItemContent {
    padding: 15px;
}

/* Small-screen defaults formerly defined in viewport queries. */
.costPanels .costItem {
    flex-direction: column;
    padding-bottom: 25px;
}

.costPanels .costItem .costItemHead::before {
    mask-size: auto 60%;
}



/* --------------------------------------------------------------------------
   Dual panel
   Source: dualPanel.css
   -------------------------------------------------------------------------- */

.dualPanel {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;
    width: 100%;

    margin: 35px 0;
}

.dualPanel .dualPanelItem {
    flex: 1;

    background: var(--color-surface-secondary);
    border: solid 2px var(--color-primary-lighter);

    padding: 0 25px;
    padding-bottom: 10px;
}

.dualPanel .dualPanelItem h4 {
    text-align: center;
    margin: 15px;
}

/* Small-screen defaults formerly defined in viewport queries. */
.dualPanel {
    grid-template-columns: 1fr;
}



/* --------------------------------------------------------------------------
   Full blue
   Source: fullBlue.css
   -------------------------------------------------------------------------- */

.fullBlue {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 25px;

    width: 100%;
    min-height: 100px;
    margin: 35px 0;

    font-size: 22px;
    color: white;
    font-weight: 700;
    background-color: var(--color-primary);

    padding: 25px 150px;
}

.fullBlue.home {
    font-size: 24px;
    line-height: 34px;
    font-weight: 400;

    min-height: 150px;

    margin: 50px 0;
}

.fullBlue.home strong {
    font-weight: 700;
}

.fullBlue p {
    margin: 0;
    text-align: center;
}

.fullBlueHead {
    margin-top: 25px;
    margin-bottom: -25px;

    color: var(--color-primary);
    font-size: 28px;
    font-weight: 800;
    text-align: center;
}

/* Small-screen defaults formerly defined in viewport queries. */
.fullBlue {
    padding: 25px 100px;
}

.fullBlue {
    padding: 25px 50px;
}

.fullBlue.home {
    font-size: 20px;
}



/* --------------------------------------------------------------------------
   Growth map
   Source: growthMap.css
   -------------------------------------------------------------------------- */

.growthMap {
    display: flex;
    flex-direction: column;

    width: 100%;
    margin: 35px 0;
}

.growthMap .growthMapHead {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 65px;
    padding: 5px 15px;

    background-color: var(--color-primary);
    color: white;
}

.growthMap .growthMapHead h4 {
    margin: 0;
}

.growthMap .growthMapItems {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
    padding: 10px;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.growthMap .growthMapItems .growthMapItem {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    padding: 10px;
}

.growthMap .growthMapItems .growthMapItem:not(:last-of-type) {
    border-right: solid 2px transparent;
    border-image: linear-gradient(to top, transparent, var(--color-primary-light), transparent) 1;
    padding-right: 20px;
}

.growthMap .growthMapItems .growthMapItem img {
    max-width: 80px;
    aspect-ratio: 1;
}

.growthMap .growthMapItems .growthMapItem p {
    text-align: center;
    margin-top: auto;
    margin-bottom: auto;

    font-weight: 500;
    line-height: 22px;
}

.growthMap .growthMapItems .growthMapItem p span:not(.nowrap) {
    color: var(--color-primary);
    font-weight: 800;
    font-size: 26px;
    line-height: 36px;
}

.growthMap .growthMapMain {
    display: flex;
    flex-direction: column;
}

.growthMap .growthMapMain .growthMapCanada {
    display: flex;
    justify-content: center;

    padding: 20px;
    border-left: solid 2px var(--color-border-subtle);
    border-right: solid 2px var(--color-border-subtle);
}

.growthMap .growthMapMain .growthMapCanada img {
    width: 100%;
    margin: auto;
}

.growthMap .growthMapMain .growthMapProjects {
    display: grid;
    grid-template-columns: 1fr 1fr;
    padding: 20px;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.growthMap .growthMapMain .growthMapProjects p {
    display: flex;
    justify-content: flex-start;
    align-items: center;

    width: 100%;
    min-height: 25px;
    padding: 0 5px;

    border-bottom: solid 2px transparent;
    border-image: linear-gradient(to left, transparent 20%, var(--color-primary-light)) 1;
}

.growthMap .growthMapMain .growthMapProjects ol {
    padding-right: 10px;
}

.growthMap .growthMapMain .growthMapProjects ol li::marker {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
}

/* Small-screen defaults formerly defined in viewport queries. */
.growthMap .growthMapItems .growthMapItem p {
    font-size: 1rem;
}

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

.growthMap .growthMapItems .growthMapItem {
    border-right: solid 2px transparent;
    border-image: linear-gradient(to top, transparent, var(--color-primary-light), transparent) 1;
}

.growthMap .growthMapItems .growthMapItem:nth-of-type(3) {
    border-right: none;
}

.growthMap .growthMapMain .growthMapProjects {
    grid-template-columns: 1fr;
    padding: 10px;
}

.growthMap .growthMapItems {
    grid-template-columns: repeat(2, 1fr);
}

.growthMap .growthMapItems .growthMapItem:nth-of-type(odd) {
    border-right: solid 2px var(--color-primary);
}

.growthMap .growthMapItems .growthMapItem:nth-of-type(even) {
    border-right: none;
}



/* --------------------------------------------------------------------------
   Housing grid
   Source: housingGrid.css
   -------------------------------------------------------------------------- */

.housingGrid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 15px;
    width: 100%;
}

.housingGrid .housingGridItem {
    display: flex;
    flex-direction: column;
    gap: 15px;
    height: 100%;
}

.housingGrid .housingGridItem .housingTable {
    flex-grow: 1;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.housingGrid .housingGridItem .housingTableHead {
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;

    min-height: 100px;
    padding: 10px 15px;

    text-align: center;
    line-height: 24px;
    color: white;
    background-color: var(--color-primary);
}

.housingGrid .housingGridItem .housingTableContent {
    padding: 10px 15px;
}

.housingGrid .housingGridFoot {
    grid-column: span 3;
    display: flex;
    gap: 15px;
}

.housingGrid .housingGridFoot .housingTableHead {
    display: flex;
    justify-content: center;
    align-items: center;

    text-align: center;
    font-weight: 700;

    padding: 10px 15px;
    max-width: 250px;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.housingGrid .housingGridFoot .housingTableContent ul {
    margin: 0;
}

/* Small-screen defaults formerly defined in viewport queries. */
.housingGrid {
    grid-template-columns: 1fr;
    gap: 25px;
}

.housingGrid .housingGridItem .housingTableHead {
    min-height: 60px;
}

.housingGrid .housingGridFoot {
    grid-column: span 1;
}

.housingGrid .housingGridFoot {
    flex-direction: column;
}

.housingGrid .housingGridFoot .housingTableHead {
    max-width: unset;
}



/* --------------------------------------------------------------------------
   Image grid
   Source: imageGrid.css
   -------------------------------------------------------------------------- */

.imageGrid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;

    height: 600px;
    margin-bottom: 25px;
}

.imageGrid .imageGridItem {
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
}

.imageGrid .imageGridItem.image1 {
    background-image: url("./../img/intro-contrecoeur-project.jpg");
    background-position: top;
}

.imageGrid .imageGridItem.image2 {
    background-image: url("./../img/intro-transmission-project.jpg");
    grid-column: span 2;
    grid-row: span 2;
}

.imageGrid .imageGridItem.image3 {
    background-image: url("./../img/intro-red-chris-project.jpg");
}

.imageGrid .imageGridItem.image4 {
    background-image: url("./../img/intro-hydro-project.jpg");
    background-position: top;
}

.imageGrid .imageGridItem.image5 {
    background-image: url("./../img/intro-lng-project.jpg");
    background-position: center 33%;
}

.imageGrid .imageGridItem.image6 {
    background-image: url("./../img/intro-darlington-project.jpg");
    background-position: center;
}

.imageGrid .imageGridItem p {
    color: white;
    font-weight: 700;
    font-size: 18px;
    line-height: 20px;

    padding: 5px 10px;
    margin: 0;
    width: 100%;

    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(3px);
}

/* Small-screen defaults formerly defined in viewport queries. */
.imageGrid {
    grid-template-columns: repeat(2, 1fr);
    height: 600px;
}

.imageGrid .imageGridItem.image2 {
    grid-column: span 1;
    grid-row: span 1;
}

.imageGrid {
    grid-template-columns: repeat(1, 1fr);
    height: 1200px;
}

.imageGrid .imageGridItem.image1 {
    background-position: center;
}

.imageGrid .imageGridItem.image2 {
    background-position: center 50%;
}

.imageGrid .imageGridItem.image4 {
    background-position: center;
}

.imageGrid .imageGridItem.image5 {
    background-position: center 33%;
}



/* --------------------------------------------------------------------------
   Investment grid
   Source: investGrid.css
   -------------------------------------------------------------------------- */

.investGridContainer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;

    width: 100%;
    margin: 35px 0;
}

.investGridItem {
    display: flex;
    flex-direction: column;

    height: 100%;

    background-color: white;
    overflow: hidden;
}

.investGridItem .investGridHeader {
    position: relative;
    min-height: 115px;
    padding: 25px;
}

.investGridItem .investGridHeader .headerImg {
    display: flex;
    align-items: center;

    position: absolute;
    bottom: -50px;
    left: 15px;

    width: 100px;
    aspect-ratio: 1;

    border-radius: 50px;
    background-color: white;
}

.investGridItem .investGridHeader .headerImg .image {
    margin: auto;
    width: 65%;
    aspect-ratio: 1;
}

.investGridItem .investGridHeader .headerImg .image.powerline {
    -webkit-mask: url("./../../report-rapport/icons/icon-transformer.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-transformer.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.nuclear {
    -webkit-mask: url("./../../report-rapport/icons/icon-nuclear-research.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-nuclear-research.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.mineral {
    -webkit-mask: url("./../../report-rapport/icons/icon-mineral.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-mineral.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.AI-en,
.investGridItem .investGridHeader .headerImg .image.AI-fr {
    display: flex;
    justify-content: center;
    align-items: center;

    color: white;
    font-size: 16px;
    font-weight: 700;
    font-family: 'Lato', sans-serif;
}

.investGridItem .investGridHeader .headerImg .image.AI-en {
    -webkit-mask: url("./../../report-rapport/icons/icon-ai-en.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-ai-en.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.AI-fr {
    -webkit-mask: url("./../../report-rapport/icons/icon-ai-fr.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-ai-fr.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.trade {
    -webkit-mask: url("./../../report-rapport/icons/icon-hammer-wrench.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-hammer-wrench.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.forest {
    -webkit-mask: url("./../../report-rapport/icons/icon-tree-forest.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-tree-forest.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.EV {
    -webkit-mask: url("./../../report-rapport/icons/icon-car-electric.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-car-electric.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.house {
    -webkit-mask: url("./../../report-rapport/icons/icon-house.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-house.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.seeds {
    -webkit-mask: url("./../../report-rapport/icons/icon-fertilizer.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-fertilizer.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.fish {
    -webkit-mask: url("./../../report-rapport/icons/icon-fish.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-fish.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.defense {
    -webkit-mask: url("./../../report-rapport/icons/icon-canada-shield.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-canada-shield.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader .headerImg .image.antiFraud {
    -webkit-mask: url("./../../report-rapport/icons/icon-lock-shield.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-lock-shield.svg") no-repeat center / contain;
}

.investGridItem .investGridHeader h4, .investGridItem .investGridHeader p {
    margin: 0;
    text-align: center;
}

.investGridItem .investGridHeader h4 {
    line-height: 30px;
    margin-bottom: 5px;
}

.investGridItem .investGridContent {
    min-height: 200px;
    padding: 10px 25px;
}

.investGridItem .investGridContent .contentJobs {
    /* display: flex;
    align-items: center;
    justify-content: flex-end; */
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 85px;
    gap: 10px;

    width: 100%;
    padding-left: 115px;
}

.investGridItem .investGridContent .contentJobs p {
    font-size: 18px;
    line-height: 22px;
    font-weight: 600;
    text-align: right;
    margin: 0;
}

.investGridItem .investGridContent .contentJobs p:nth-of-type(2) {
    grid-column: span 2;
    font-size: 18px;
}

.investGridItem .investGridContent .contentJobs img,
.investGridItem .investGridContent .contentJobs .jobImage {
    height: 75px;
    aspect-ratio: 1;
    justify-self: center;
}

.investGridItem .investGridContent .contentJobs .jobImage {
    -webkit-mask: url("./../../report-rapport/icons/icon-worker.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-worker.svg") no-repeat center / contain;
}

.investGridItem .investGridContent .noWork {
    height: 50px;
}

.investGridItem .bigText {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-grow: 1;
    margin-bottom: 20px;

    font-weight: 600;
    text-align: center;
    line-height: 26px;
}

.investGridItem .bigText p {
    margin: 0;
    padding: 10px 25px;

    color: white;
    background-color: var(--color-secondary);
    border-radius: 5px;
}

.investGridItem .bigText strong {
    font-weight: 800;
}

.investGridItem .bigText .biggerText {
    font-size: 26px;
}

.investGridItem .chartContainer {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
}

.investGridItem .chartContainer img {
    min-width: 0;
    max-width: 300px;
    height: auto;
}

.investGridItem .chartContainer.containerColumn {
    flex-direction: column;
}

.investGridItem .chartContainer.containerColumn img {
    min-width: 0;
    max-width: 600px;
    height: auto;
}

.investGridItem.lapis .investGridHeader .headerImg .image.AI-en,
.investGridItem.lapis .investGridHeader .headerImg .image.AI-fr {
    background-color: white;
}

/* Lapis items */

.investGridItem.lapis {
    border: solid 2px var(--color-primary);
}

.investGridItem.lapis .investGridHeader {
    color: white;
    background-color: var(--color-primary);
    border-bottom: solid 5px var(--color-primary-lighter);
}

.investGridItem.lapis .investGridHeader .headerImg {
    border: solid 5px var(--color-primary-lighter);
}

.investGridItem.lapis .investGridHeader .headerImg .image {
    background-color: var(--color-primary);
}

.investGridItem.lapis .investGridContent .contentJobs .jobImage {
    background-color: var(--color-primary);
}

.investGridItem.lapis .investGridContent .contentJobs p:nth-of-type(2) {
    color: var(--color-primary);
}

/* Celeste items */

.investGridItem.celeste {
    border: solid 2px var(--color-highlight);
}

.investGridItem.celeste .investGridHeader {
    color: black;
    background-color: var(--color-highlight);
    border-bottom: solid 5px var(--color-border-subtle);
}

.investGridItem.celeste .investGridHeader .headerImg {
    border: solid 5px var(--color-border-subtle);
}

.investGridItem.celeste .investGridHeader .headerImg .image {
    background-color: var(--color-highlight);
}

.investGridItem.celeste .investGridContent .contentJobs .jobImage {
    background-color: var(--color-highlight);
}

/* Volcano items */

.investGridItem.volcano {
    border: solid 2px var(--color-secondary);
}

.investGridItem.volcano .investGridHeader {
    color: white;
    background-color: var(--color-secondary);
    border-bottom: solid 5px var(--color-secondary-lighter);
}

.investGridItem.volcano .investGridHeader .headerImg {
    border: solid 5px var(--color-secondary-lighter);
}

.investGridItem.volcano .investGridHeader .headerImg .image {
    background-color: var(--color-secondary);
}

.investGridItem.volcano .investGridContent .contentJobs .jobImage {
    background-color: var(--color-secondary);
}

/* Charcoal items */

.investGridItem.charcoal {
    border: solid 2px var(--color-charcoal);
}

.investGridItem.charcoal .investGridHeader {
    color: white;
    background-color: var(--color-charcoal);
    border-bottom: solid 5px var(--color-support-lighter);
}

.investGridItem.charcoal .investGridHeader .headerImg {
    border: solid 5px var(--color-support-lighter);
}

.investGridItem.charcoal .investGridHeader .headerImg .image {
    background-color: var(--color-charcoal);
}

.investGridItem.charcoal .investGridContent .contentJobs .jobImage {
    background-color: var(--color-charcoal);
}

/* Algae items */

.investGridItem.algae {
    border: solid 2px var(--color-accent);
}

.investGridItem.algae .investGridHeader {
    color: white;
    background-color: var(--color-accent);
    border-bottom: solid 5px var(--color-accent-lighter);
}

.investGridItem.algae .investGridHeader .headerImg {
    border: solid 5px var(--color-accent-lighter);
}

.investGridItem.algae .investGridHeader .headerImg .image {
    background-color: var(--color-accent);
}

.investGridItem.algae .investGridContent .contentJobs .jobImage {
    background-color: var(--color-accent);
}

.investGridItem.algae .investGridContent .contentJobs p:nth-of-type(2) {
    color: var(--color-accent);
}

/* Small-screen defaults formerly defined in viewport queries. */
.investGridContainer {
    grid-template-columns: 1fr;
}

.investGridItem .chartContainer {
    flex-direction: column;
}

.investGridItem .investGridHeader .headerImg {
    display: none;
}

.investGridItem .investGridContent .contentJobs {
    padding: 5px;
    justify-content: center;
}

.investGridItem .investGridContent .noWork {
    height: 0px;
}

.investGridItem .investGridContent .contentJobs p {
    text-align: center;
    grid-column: span 2;
}

.investGridItem .investGridContent .contentJobs .jobImage {
    display: none;
}

.investGridItem .chartContainer img {
    max-width: 100%;
}



/* --------------------------------------------------------------------------
   Investment panel
   Source: investPanel.css
   -------------------------------------------------------------------------- */

.investPanelContainer {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(3, 1fr);
    gap: 15px;
    margin: 35px auto;

    max-width: 900px;
}

.investPanelContainer .investPanel {
    display: flex;
    justify-content: flex-start;
}

.investPanelContainer .investPanel .investPanelHead {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 1;
    color: white;
    padding: 20px;
}

.investPanelContainer .investPanel .investPanelHead .imageTitle {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.investPanelContainer .investPanel .investPanelHead .imageTitle .image {
    min-width: 50px;
    aspect-ratio: 1;
}

.investPanelContainer .investPanel .investPanelHead .imageTitle p {
    margin: 0;
    font-size: 24px;
    line-height: 30px;
    font-weight: 700;
}

.investPanelContainer .investPanel .investPanelHead .investValue {
    font-size: 46px;
    font-weight: 700;
    line-height: 52px;
    margin: 0;
}

.investPanelContainer .investPanel .investPanelContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex: 2;
    gap: 5px;

    padding: 15px 25px;
}

.investPanelContainer .investPanel .investPanelContent .investPanelItem p {
    font-weight: 700;
    margin-bottom: 0;
}

.investPanelContainer .investPanel .investPanelContent .investPanelItem .itemSubtitle {
    font-weight: lighter;
}

/* LAPIS */

.investPanelContainer .investPanel.lapis {
    background-color: var(--color-primary);
}

.investPanelContainer .investPanel.lapis .investPanelHead {
    border-right: solid 10px var(--color-primary-lighter);
}

.investPanelContainer .investPanel.lapis .investPanelHead .imageTitle .image {
    background-color: white;

    -webkit-mask: url("./../../report-rapport/icons/icon-water.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-water.svg") no-repeat center / contain;
}

.investPanelContainer .investPanel.lapis .investPanelContent {
    background-color: var(--color-primary-lighterer);
    border: solid 2px var(--color-primary-lighter);
}

.investPanelContainer .investPanel.lapis .investPanelContent .investPanelItem:not(:last-of-type) {
    border-bottom: solid 2px var(--color-primary-lighter);
    padding-bottom: 5px;
}

/* ALGAE */

.investPanelContainer .investPanel.algae {
    background-color: var(--color-accent);
}

.investPanelContainer .investPanel.algae .investPanelHead .imageTitle .image {
    background-color: white;

    -webkit-mask: url("./../../report-rapport/icons/icon-house.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-house.svg") no-repeat center / contain;
}

.investPanelContainer .investPanel.algae .investPanelHead {
    border-right: solid 10px var(--color-accent-lighter);
}

.investPanelContainer .investPanel.algae .investPanelContent {
    background-color: var(--color-accent-lighterer);
    border: solid 2px var(--color-accent-lighter);
}

.investPanelContainer .investPanel.algae .investPanelContent .investPanelItem:not(:last-of-type) {
    border-bottom: solid 2px var(--color-accent-lighter);
    padding-bottom: 5px;
}

/* VOLCANO */

.investPanelContainer .investPanel.volcano {
    background-color: var(--color-secondary);
}

.investPanelContainer .investPanel.volcano .investPanelHead .imageTitle .image {
    background-color: white;

    -webkit-mask: url("./../../report-rapport/icons/icon-gear.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-gear.svg") no-repeat center / contain;
}

.investPanelContainer .investPanel.volcano .investPanelHead {
    border-right: solid 10px var(--color-secondary-lighter);
}

.investPanelContainer .investPanel.volcano .investPanelContent {
    background-color: var(--color-secondary-lighterer);
    border: solid 2px var(--color-secondary-lighter);
}

.investPanelContainer .investPanel.volcano .investPanelContent .investPanelItem:not(:last-of-type) {
    border-bottom: solid 2px var(--color-secondary-lighter);
    padding-bottom: 5px;
}

/* Small-screen defaults formerly defined in viewport queries. */
.investPanelContainer .investPanel .investPanelContent {
    flex: 1;
}

.investPanelContainer {
    grid-template-rows: unset;
}

.investPanelContainer .investPanel {
    flex-direction: column;
}

.investPanelContainer .investPanel.lapis .investPanelHead {
    border-right: unset;
    border-bottom: solid 5px var(--color-primary-lighter);
}

.investPanelContainer .investPanel.algae .investPanelHead {
    border-right: unset;
    border-bottom: solid 5px var(--color-accent-lighter);
}

.investPanelContainer .investPanel.volcano .investPanelHead {
    border-right: unset;
    border-bottom: solid 5px var(--color-secondary-lighter);
}

.investPanelContainer .investPanel .investPanelHead,
.investPanelContainer .investPanel .investPanelContent {
    flex: unset;
}

.investPanelContainer .investPanel .investPanelHead .imageTitle p {
    font-size: 20px;
    line-height: 24px;
}



/* --------------------------------------------------------------------------
   METR panel
   Source: metrPanel.css
   -------------------------------------------------------------------------- */

.metrPanel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    max-width: 850px;
    margin: 35px auto;
    padding: 35px 25px;

    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.metrPanel .metrHead h4 {
    margin-top: 0;
}

.metrPanel .metrHead hr {
    border-top: solid 2px var(--color-border-subtle);
}

.metrPanel .metrContent {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    font-weight: 700;
}

.metrPanel .metrValue {
    font-size: 56px;
    line-height: 50px;
    color: var(--color-primary);
    text-align: right;
}

/* Small-screen defaults formerly defined in viewport queries. */
.metrPanel .metrContent {
    flex-direction: column;
    gap: 5px;
}

.metrPanel .metrValue {
    font-size: 48px;
    line-height: 50px;
}

.metrPanel .metrContent div {
    text-align: center;
}



/* --------------------------------------------------------------------------
   Powerhouse tables
   Source: powerhouseTables.css
   -------------------------------------------------------------------------- */

.powerhouseTables {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 25px;

    margin: 35px auto;
}

.powerhouseTables .tableHead {
    display: flex;
    align-items: center;

    width: 100%;
    min-height: 75px;

    margin: 0;
    padding: 20px;

    color: white;
    font-size: 22px;
    line-height: 24px;
    font-weight: 600;
}

.powerhouseTables p {
    margin: 0;
}

.powerhouseTables .powerhouseItem {
    display: flex;
    justify-content: space-between;
    align-items: center;

    min-height: 100px;
}

.powerhouseTables .powerhouseItem .itemDesc {
    display: flex;
    align-items: center;

    gap: 15px;

    font-size: 20px;
    line-height: 24px;
    font-weight: 700;

    padding: 15px 0;
}

.powerhouseTables .powerhouseItem .itemDesc img {
    height: 65px;
    aspect-ratio: 1;
}

.powerhouseTables .powerhouseItem .itemResult {
    min-width: 110px;

    font-size: 16px;
    text-align: center;
    line-height: 20px;
    font-weight: 500;
}

.powerhouseTables .powerhouseItem .itemResult span {
    font-size: 32px;
    font-weight: 700;
}

/* BLUE SECTION */

.powerhouseInnovation .tableHead {
    background-color: var(--color-primary);
}

.powerhouseInnovation .powerhouseItem {
    border-bottom: solid 3px var(--color-primary);
}

.powerhouseInnovation .powerhouseItem .itemResult {
    color: var(--color-primary);
}

/* GREEN SECTION */

.powerhouseResource .tableHead {
    background-color: var(--color-accent);
}

.powerhouseResource .powerhouseItem {
    border-bottom: solid 3px var(--color-accent);
}

.powerhouseResource .powerhouseItem .itemResult {
    color: var(--color-accent);
}

/* Small-screen defaults formerly defined in viewport queries. */
.powerhouseTables {
    grid-template-columns: 1fr;
    max-width: 550px;
}

.powerhouseTables .powerhouseItem {
    flex-direction: column-reverse;
}

.powerhouseTables .powerhouseItem .itemDesc img {
    display: none;
}

.powerhouseTables .powerhouseItem .itemDesc {
    text-align: center;
}

.powerhouseTables .powerhouseItem .itemResult {
    padding-top: 20px;
}



/* --------------------------------------------------------------------------
   Project timeline and bottom blue
   Source: projectTimeline.css
   -------------------------------------------------------------------------- */

.projectTimelineContainer {
    display: grid;
    grid-template-columns: 5px 1fr;
    margin: auto;
    margin-top: 35px;

    max-width: 725px;
}

.projectTimelineLine {
    width: 100%;
    height: 100%;
    background-color: var(--color-primary-lighter);

    z-index: -1;
}

.projectTimeline {
    display: flex;
    flex-direction: column;
    gap: 65px;

    max-width: 720px;
    margin: auto;

    padding-top: 60px;
    padding-left: 35px;
    padding-bottom: 25px;
}

.projectTimeline .projectItem {
    position: relative;
    display: flex;
}

.projectTimeline .projectItem .projectConnect {
    position: absolute;
    top: 50%;
    left: -40px;
    z-index: -1;

    height: 5px;
    width: 40px;
    background-color: var(--color-primary-lighter);
}

.projectTimeline .projectItem .projectConnect .projectDot {
    position: absolute;
    left: -19px;
    top: -19px;
    z-index: 2;

    width: 40px;
    aspect-ratio: 1;
    border-radius: 50%;
}

.projectTimeline .projectItem .projectMonth {
    position: absolute;
    top: -45px;
    left: -1px;

    display: flex;
    align-items: center;

    color: white;
    height: 40px;
    padding: 5px 10px;
}

.projectTimeline .projectItem .projectSidebar {
    position: relative;
    width: 75px;
    min-height: 175px;
}

.projectTimeline .projectItem .projectSidebar .projectImage {
    position: absolute;
    left: 10px;
    top: 10px;

    display: flex;
    align-items: center;

    width: 100px;
    aspect-ratio: 1;
    border-radius: 50px;
    background-color: white;
}

.projectTimeline .projectItem .projectSidebar .projectImage .image {
    width: 65%;
    aspect-ratio: 1;
    margin: auto;
}

.projectTimeline .projectItem .projectSidebar .projectImage .image.pipeline {
    -webkit-mask: url("./../../report-rapport/icons/icon-pipeline.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-pipeline.svg") no-repeat center / contain;
}

.projectTimeline .projectItem .projectSidebar .projectImage .image.powerline {
    -webkit-mask: url("./../../report-rapport/icons/icon-transformer.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-transformer.svg") no-repeat center / contain;
}

.projectTimeline .projectItem .projectSidebar .projectImage .image.nuclear {
    -webkit-mask: url("./../../report-rapport/icons/icon-nuclear-research.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-nuclear-research.svg") no-repeat center / contain;
}

.projectTimeline .projectItem .projectSidebar .projectImage .image.forest {
    -webkit-mask: url("./../../report-rapport/icons/icon-tree-forest.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-tree-forest.svg") no-repeat center / contain;
}

.projectTimeline .projectItem .projectContent {
    display: flex;
    flex-direction: column;
    justify-content: center;

    width: 100%;
    padding: 15px;
    padding-left: 65px;
}

.projectTimeline .projectItem .projectContent h4 {
    margin-top: 0;
}

.projectTimeline .projectItem .projectContent .projectStats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;

    padding-top: 15px;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem:first-of-type {
    min-width: 200px;
    width: 100%;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem:nth-of-type(2) {
    text-align: center;
    width: 100%;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem .statsImage {
    height: 60px;
    aspect-ratio: 1;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem .statsImage.nation {
    -webkit-mask: url("./../../report-rapport/icons/icon-people-group.svg") no-repeat center / contain;
    mask: url("./../../report-rapport/icons/icon-people-group.svg") no-repeat center / contain;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem p {
    margin: 0;
    line-height: 24px;
}

.projectTimeline .projectItem .projectContent .projectStats .statsItem p span {
    font-size: 26px;
    font-weight: 800;
}

/* Lapis items */

.projectTimeline .projectItem.lapis {
    background-color: var(--color-surface-secondary);
}

.projectTimeline .projectItem.lapis .projectMonth,
.projectTimeline .projectItem.lapis .projectSidebar,
.projectTimeline .projectItem.lapis .projectSidebar .projectImage .image,
.projectTimeline .projectItem.lapis .projectContent .projectStats .statsItem .statsImage,
.projectTimeline .projectItem.lapis .projectConnect .projectDot {
    background-color: var(--color-primary-light);
}

.projectTimeline .projectItem.lapis .projectSidebar {
    border-right: solid 5px var(--color-primary-lighter);
}

.projectTimeline .projectItem.lapis .projectSidebar .projectImage {
    border: solid 5px var(--color-primary-lighter);
}

.projectTimeline .projectItem.lapis .projectContent {
    border: solid 2px var(--color-primary-lighter);
}

.projectTimeline .projectItem.lapis .projectContent .projectStats {
    border-top: solid 3px var(--color-primary-lighter);
}

/* Algae items */

.projectTimeline .projectItem.algae {
    background-color: var(--color-accent-lighterer);
}

.projectTimeline .projectItem.algae .projectMonth,
.projectTimeline .projectItem.algae .projectSidebar,
.projectTimeline .projectItem.algae .projectSidebar .projectImage .image,
.projectTimeline .projectItem.algae .projectContent .projectStats .statsItem .statsImage,
.projectTimeline .projectItem.algae .projectConnect .projectDot {
    background-color: var(--color-accent);
}

.projectTimeline .projectItem.algae .projectSidebar {
    border-right: solid 5px var(--color-accent-lighter);
}

.projectTimeline .projectItem.algae .projectSidebar .projectImage {
    border: solid 5px var(--color-accent-lighter);
}

.projectTimeline .projectItem.algae .projectContent {
    border: solid 2px var(--color-accent-lighter);
}

.projectTimeline .projectItem.algae .projectContent .projectStats {
    border-top: solid 3px var(--color-accent-lighter);
}

.bottomBlue {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    max-width: 725px;
    min-height: 75px;
    margin: auto;
    margin-bottom: 35px;
    padding: 10px 25px;

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

.bottomBlue p {
    margin: 0;
    color: white;
    font-weight: 500;
    line-height: 22px;
}

.bottomBlue span {
    font-size: 24px;
    font-weight: 700;
}

/* Small-screen defaults formerly defined in viewport queries. */
.projectTimelineContainer {
    margin-left: 25px;
}

.projectTimeline .projectItem .projectContent .projectStats {
    flex-direction: column;
    align-items: flex-start;
}

.projectTimelineContainer {
    grid-template-columns: 0px 1fr;
    margin-left: auto;
}

.projectTimeline {
    padding-left: 0;
}

.projectTimeline .projectItem {
    min-width: 200px;
}

.projectTimeline .projectItem .projectSidebar {
    width: 20px;
}

.projectTimeline .projectItem .projectSidebar .projectImage {
    display: none;
}

.projectTimeline .projectItem .projectConnect {
    display: none;
}

.projectTimeline .projectItem .projectContent {
    padding-left: 15px;
}



/* --------------------------------------------------------------------------
   Affordability grid
   Source: affordableGrid.css
   -------------------------------------------------------------------------- */

.affordableGrid {
    max-width: 850px;
    margin: 35px auto;
}

.affordableGrid .affordableGridHead {
    width: 100%;
    padding: 35px;

    color: white;
    background-color: var(--color-primary);
}

.affordableGrid .affordableGridHead h4,
.affordableGrid .affordableGridHead p {
    margin: 0;
}

.affordableGrid .affordableGridHead h4 {
    font-size: 32px;
    margin-bottom: 10px;
}

.affordableGrid .affordableGridContent {
    display: flex;
    flex-direction: column;

    padding: 0 35px;

    background-color: var(--color-primary);
    color: white;
}

.affordableGrid .affordableGridContent .affordableGridItem {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    min-height: 75px;

    width: 100%;
    margin-right: auto;
    margin-left: 0;
}

.affordableGrid .affordableGridContent .affordableGridItem:nth-of-type(2n) {
    width: 90%;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemTitle {
    flex: 1;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemTitle p {
    font-weight: 500;
    line-height: 24px;

    margin: 0;
    padding-bottom: 5px;

    border-bottom: solid 2px var(--color-primary-lighter);
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    height: auto;
    aspect-ratio: 1;
    padding: 20px;

    text-align: center;

    background-color: white;
    color: var(--color-primary);
    border: solid 4px var(--color-primary-lighter);
    border-radius: 50%;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue p {
    margin: 0;
    line-height: 22px;
    font-size: 18px;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue p:first-of-type {
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
    line-height: 28px;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemValue p span {
    display: none;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemLegend {
    font-size: 18px;
    text-align: left;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemLegend p:last-of-type {
    margin: 0;
}

.affordableGrid .affordableGridFoot {
    display: flex;
    flex-direction: column;
    gap: 10px;

    background-color: var(--color-primary);
    color: white;
    padding: 15px 25px;
}

.affordableGrid .affordableGridFoot p {
    margin: 0;
    font-size: 18px;
}

.affordableGrid sup {
    margin: 0 5px;
}

/* Small-screen defaults formerly defined in viewport queries. */
.affordableGrid .affordableGridHead h4 {
    font-size: 28px;
}

.affordableGrid .affordableGridContent {
    padding: 0;
    background-color: unset;
    gap: 15px;
    margin: 15px 0;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemValue p span {
    display: inline;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemLegend {
    display: none;
}

.affordableGrid .affordableGridContent .affordableGridItem {
    gap: 0px;
    padding-top: 10px;
    background-color: var(--color-primary);
}

.affordableGrid .affordableGridContent .affordableGridItem,
.affordableGrid .affordableGridContent .affordableGridItem:nth-of-type(2n) {
    width: 100%;
    flex-direction: column;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemTitle p {
    border-bottom: unset;
    text-align: center;
    padding: 0 15px;
    padding-bottom: 7px;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer {
    width: 100%;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue {
    padding: 10px;
    aspect-ratio: unset;
    border-radius: unset;
    width: 100%;

    border: solid 3px var(--color-primary);
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue p {
    margin: 0;
    line-height: 20px;
    font-size: 18px;
}

.affordableGrid .affordableGridContent .affordableGridItem .itemValue p:first-of-type {
    font-size: 20px;
    margin-bottom: 5px;
}



/* --------------------------------------------------------------------------
   Benefits chart
   Source: benefitsChart.css
   -------------------------------------------------------------------------- */

.benefits-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 2rem;

    margin: 35px 0;
}

.benefits-header h4 {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.benefits-total {
    text-align: right;
    white-space: nowrap;
    line-height: 22px;
}

.benefits-total strong {
    display: block;

    line-height: 1.1;
    color: var(--color-primary);
    font-size: 42px;
    font-weight: 800;
}

.benefits-chart {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 3rem;
    margin-bottom: 25px;
}

.benefits-column {
    display: grid;
    gap: 1.4rem;
    align-content: start;
}

.benefit-heading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: .35rem;
    font-weight: 600;
}

.benefit-heading span:first-child {
    max-width: 75%;
}

.benefit-value {
    color: var(--color-primary);
    font-weight: 800;
    white-space: nowrap;
}

.benefit-track {
    height: 15px;
    background: var(--color-border-subtle);
    overflow: hidden;
}

.benefit-fill {
    width: 0;
    height: 100%;
    background: var(--desktop-color);
    transform-origin: left center;
}

.benefits.is-visible .benefit-fill {
    transform: scaleX(1);
}

.benefitsFoot {
    padding: 10px 15px;
    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
}

.benefitsFoot p:last-of-type {
    margin: 0;
}

/* Small-screen defaults formerly defined in viewport queries. */
.benefits-chart {
    display: flex;
    flex-direction: column;
    gap: 1.1rem;
}

.benefits-column {
    display: contents;
}

.benefit {
    order: var(--order);
}

.benefit-fill {
    background: var(--mobile-color);
}


/* --------------------------------------------------------------------------
   Blue-bar quote
   Source: blueBarQuote.css
   -------------------------------------------------------------------------- */

.blueBarQuote {
    max-width: 850px;
    margin: 35px auto;
    padding: 25px 15px;

    background-color: var(--color-surface-secondary);
    border: solid 2px var(--color-border-subtle);
    border-left: solid 5px var(--color-primary-light);

    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
}

.blueBarQuote p {
    margin-bottom: 0;
}

.quoteContent {
    font-size: 22px;
    font-weight: 600;
}

.quoteSource {
    margin-top: 15px;
    line-height: 24px;

    font-style: italic;
}

/* Small-screen defaults formerly defined in viewport queries. */
.blueBarQuote {
    width: 100%;
}



/* --------------------------------------------------------------------------
   Blue impact
   Source: blueImpact.css
   -------------------------------------------------------------------------- */

.blueImpact {
    display: flex;
    flex-direction: column;

    margin: 35px auto;
    border: solid 2px var(--color-primary);
    overflow: hidden;

    max-width: 850px;
}

.blueImpact p {
    margin: 0;
}

.blueImpact .impactHeader {
    display: flex;
    justify-content: center;
    align-items: center;

    width: 100%;
    min-height: 75px;
    padding: 10px 25px;

    color: white;
    font-size: 26px;
    font-weight: 700;
    text-align: center;

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

.blueImpact .impactContent {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.blueImpact .impactContent .impactItem {
    flex: 1;
    padding: 15px 25px;
    max-width: 375px;

    text-align: center;
}

.blueImpact .impactContent p {
    line-height: 26px;
}

.blueImpact .impactContent p span {
    font-size: 26px;
    font-weight: 900;
    color: var(--color-primary);

    margin-bottom: 5px;
}

/* Small-screen defaults formerly defined in viewport queries. */
.blueImpact .impactContent {
    flex-direction: column;
}



/* --------------------------------------------------------------------------
   Blue text
   Source: blueText.css
   -------------------------------------------------------------------------- */

li .blueText {
    color: var(--color-primary);
    font-size: 20px;
    font-weight: 700;
}


/* --------------------------------------------------------------------------
   Blue list items
   Source: blueListItems.css
   -------------------------------------------------------------------------- */

.blueListItems li {
    margin-left: -5px;
}

.blueListItems li::marker {
    font-size: 30px;
    font-weight: 700;
    color: var(--color-primary);
}



/* ==========================================================================
   RESPONSIVE OVERRIDES — FROM NARROW TO WIDE
   ========================================================================== */


/* Viewports >= 480px */
@media (width >= 480px) {
    /* --- Build secure --- */
    .buildSecure .buildSecureContent .buildSecureItem {
        width: 90%;
    }

    .buildSecure .buildSecureContent .buildSecureItem:nth-of-type(even) {
        width: 90%;
    }

    .buildSecure .buildSecureContent .buildSecureItem img {
        display: revert;
    }

    /* --- Competition grid --- */
    .competitionGrid .competitionHeader .image {
        display: revert;
    }

    .competitionGrid .competitionItem .competitionItemTop .competitionItemHead .image {
        display: revert;
    }

    /* --- Growth map --- */
    .growthMap .growthMapItems {
        grid-template-columns: repeat(3, 1fr);
    }

    .growthMap .growthMapItems .growthMapItem:nth-of-type(odd) {
        border-right: solid 2px transparent;
    }

    .growthMap .growthMapItems .growthMapItem:nth-of-type(even) {
        border-right: solid 2px transparent;
    }

    .growthMap .growthMapItems .growthMapItem:nth-of-type(3) {
        border-right: none;
    }

    /* --- Investment grid --- */
    .investGridItem .investGridHeader .headerImg {
        display: flex;
    }

    .investGridItem .investGridContent .contentJobs {
        padding: 0;
        justify-content: normal;
    }

    .investGridItem .investGridContent .noWork {
        height: 50px;
    }

    .investGridItem .investGridContent .contentJobs p {
        text-align: right;
        grid-column: auto;
    }

    .investGridItem .investGridContent .contentJobs .jobImage {
        display: revert;
    }

    .investGridItem .chartContainer img {
        max-width: 300px;
    }

    .investGridItem .investGridContent .contentJobs {
        padding-left: 115px;
    }

    /* --- Investment panel --- */
    .investPanelContainer .investPanel .investPanelHead .imageTitle p {
        font-size: 24px;
        line-height: 30px;
    }

    /* --- METR panel --- */
    .metrPanel .metrContent {
        flex-direction: row;
        gap: 20px;
    }

    .metrPanel .metrValue {
        font-size: 56px;
    }

    .metrPanel .metrContent div {
        text-align: inherit;
    }

    /* --- Powerhouse tables --- */
    .powerhouseTables .powerhouseItem {
        flex-direction: row;
    }

    .powerhouseTables .powerhouseItem .itemDesc img {
        display: revert;
    }

    .powerhouseTables .powerhouseItem .itemDesc {
        text-align: inherit;
    }

    .powerhouseTables .powerhouseItem .itemResult {
        padding-top: 0;
    }

    /* --- Blue impact --- */
    .blueImpact .impactContent {
        flex-direction: row;
    }

}


/* Viewports > 480px */
@media (width > 480px) {
    /* --- Full blue --- */
    .fullBlue {
        padding: 25px 100px;
    }

    .fullBlue.home {
        font-size: 24px;
    }

}


/* Viewports >= 500px */
@media (width >= 500px) {
    /* --- Project timeline and bottom blue --- */
    .projectTimelineContainer {
        grid-template-columns: 5px 1fr;
        margin-left: 25px;
    }

    .projectTimeline {
        padding-left: 35px;
    }

    .projectTimeline .projectItem {
        min-width: auto;
    }

    .projectTimeline .projectItem .projectSidebar {
        width: 75px;
    }

    .projectTimeline .projectItem .projectSidebar .projectImage {
        display: flex;
    }

    .projectTimeline .projectItem .projectConnect {
        display: revert;
    }

    .projectTimeline .projectItem .projectContent {
        padding-left: 65px;
    }

}


/* Viewports >= 575px */
@media (width >= 575px) {
    /* --- Affordability grid --- */
    .affordableGrid .affordableGridContent {
        padding: 0 35px;
        background-color: var(--color-primary);
        gap: normal;
        margin: 0;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemValue p span {
        display: none;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer .itemLegend {
        display: revert;
    }

    .affordableGrid .affordableGridContent .affordableGridItem {
        gap: 15px;
        padding-top: 0;
        background-color: transparent;
        flex-direction: row;
    }

    .affordableGrid .affordableGridContent .affordableGridItem:nth-of-type(2n) {
        width: 90%;
        flex-direction: row;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemTitle p {
        border-bottom: solid 2px var(--color-primary-lighter);
        text-align: inherit;
        padding: 0;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemLegendContainer {
        width: auto;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemValue {
        padding: 20px;
        aspect-ratio: 1;
        border-radius: 50%;
        width: auto;
        border: solid 4px var(--color-primary-lighter);
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemValue p {
        line-height: 22px;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemValue p:first-of-type {
        font-size: 26px;
    }

    .affordableGrid .affordableGridContent .affordableGridItem .itemTitle p {
        padding-bottom: 5px;
    }
}


/* Viewports >= 580px */
@media (width >= 580px) {
    /* --- Image grid --- */
    .imageGrid {
        grid-template-columns: repeat(2, 1fr);
        height: 600px;
    }

    .imageGrid .imageGridItem.image1 {
        background-position: top;
    }

    .imageGrid .imageGridItem.image2 {
        background-position: bottom;
    }

    .imageGrid .imageGridItem.image4 {
        background-position: top;
    }

}


/* Viewports >= 768px */
@media (width >= 768px) {
    /* --- Build secure --- */
    .buildSecure .buildSecureHead h4 {
        font-size: 32px;
    }

    .buildSecure .buildSecureContent .buildSecureItem img {
        max-width: 100px;
    }

    /* --- Coloured panels --- */
    .coloredPanel .coloredPanelBody {
        flex-direction: row;
    }

    .coloredPanel .coloredPanelBody .bodySection:not(:nth-child(1)) {
        padding-left: 15px;
        padding-top: 0;
        border-left: solid 2px white;
        border-top: none;
    }

    /* --- Cost panels --- */
    .costPanels .costItem {
        flex-direction: row;
        padding-bottom: 0;
    }

    .costPanels .costItem .costItemHead::before {
        mask-size: auto 50%;
    }

    /* --- Dual panel --- */
    .dualPanel {
        grid-template-columns: 1fr 1fr;
    }

    /* --- Growth map --- */
    .growthMap .growthMapItems {
        grid-template-columns: repeat(5, 1fr);
    }

    .growthMap .growthMapItems .growthMapItem {
        border-right: none;
        border-image: none;
    }

    .growthMap .growthMapItems .growthMapItem:nth-of-type(3) {
        border-right: none;
    }

    .growthMap .growthMapMain .growthMapProjects {
        grid-template-columns: 1fr 1fr;
        padding: 20px;
    }

    .growthMap .growthMapItems .growthMapItem:nth-of-type(even),
    .growthMap .growthMapItems .growthMapItem:nth-of-type(odd) {
        border-right: none;
    }

    .growthMap .growthMapItems .growthMapItem:not(:last-of-type) {
        border-right: solid 2px transparent;
    }

    /* --- Housing grid --- */
    .housingGrid .housingGridFoot {
        flex-direction: row;
    }

    .housingGrid .housingGridFoot .housingTableHead {
        max-width: 250px;
    }

    /* --- Image grid --- */
    .imageGrid {
        grid-template-columns: repeat(3, 1fr);
    }

    .imageGrid .imageGridItem.image2 {
        grid-column: span 2;
        grid-row: span 2;
    }

    /* --- Investment grid --- */
    .investGridItem .chartContainer {
        flex-direction: row;
    }

    /* --- Investment panel --- */
    .investPanelContainer {
        grid-template-rows: repeat(3, 1fr);
    }

    .investPanelContainer .investPanel {
        flex-direction: row;
    }

    .investPanelContainer .investPanel.lapis .investPanelHead {
        border-right: solid 10px var(--color-primary-lighter);
        border-bottom: none;
    }

    .investPanelContainer .investPanel.algae .investPanelHead {
        border-right: solid 10px var(--color-accent-lighter);
        border-bottom: none;
    }

    .investPanelContainer .investPanel.volcano .investPanelHead {
        border-right: solid 10px var(--color-secondary-lighter);
        border-bottom: none;
    }

    .investPanelContainer .investPanel .investPanelHead {
        flex: 1;
    }

    .investPanelContainer .investPanel .investPanelContent {
        flex: 1;
    }

    /* --- Project timeline and bottom blue --- */
    .projectTimeline .projectItem .projectContent .projectStats {
        flex-direction: row;
        align-items: center;
    }

    /* --- Affordability grid --- */
    .affordableGrid .affordableGridHead h4 {
        font-size: 32px;
    }

    /* --- Blue-bar quote --- */
    .blueBarQuote {
        width: auto;
    }


    .benefits-header {
        flex-direction: row;
    }
}


/* Viewports > 768px */
@media (width > 768px) {
    /* --- Full blue --- */
    .fullBlue {
        padding: 25px 150px;
    }

}


/* Viewports >= 992px */
@media (width >= 992px) {
    /* --- Growth map --- */
    .growthMap .growthMapItems .growthMapItem p {
        font-size: inherit;
    }

    /* --- Investment panel --- */
    .investPanelContainer .investPanel .investPanelContent {
        flex: 2;
    }

    /* --- Powerhouse tables --- */
    .powerhouseTables {
        grid-template-columns: 1fr 1fr;
        max-width: none;
    }

    /* --- Project timeline and bottom blue --- */
    .projectTimelineContainer {
        margin-left: auto;
    }

}


/* Viewports >= 1200px */
@media (width >= 1200px) {
    /* --- Investment grid --- */
    .investGridContainer {
        grid-template-columns: 1fr 1fr;
    }


    /* --- Housing grid --- */
    .housingGrid {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 15px;
    }

    .housingGrid .housingGridItem .housingTableHead {
        min-height: 100px;
    }

    .housingGrid .housingGridFoot {
        grid-column: span 3;
    }

}


/* Viewports > 1200px */
@media (width > 1200px) {
    /* --- Benefits chart --- */
    .benefits-chart {
        display: grid;
        flex-direction: row;
        gap: 3rem;
    }

    .benefits-column {
        display: grid;
    }

    .benefit {
        order: 0;
    }

    .benefit-fill {
        background: var(--desktop-color);
    }

}


/* ==========================================================================
   ACCESSIBILITY — USER PREFERENCES
   ========================================================================== */

/* --- Benefits chart --- */
@media (prefers-reduced-motion: reduce) {
    .benefit-fill {
            transition: none;
        }
}