:root {
    --font-base: Goldplay, Helvetica Neue, Arial, sans-serif;
    --font-display: GoldPlayAlt, "Arial Rounded MT Bold", "Helvetica Rounded", Arial, sans-serif;
    --color-dark: #222;
    --color-light: #e5e8df;
    --color-light-bg: #f5f6f7;
    --color-medium-bg: rgb(220,220,220);
    --color-light-logo: #999999;
    --color-faint-text: #babcc2;
    --color-play-green: #59813F;
    --pdf-green: #749C7A;
    --pdf-green-pale: #E9EFE9;
    /*
    --size-step--2: clamp(0.7813rem, 0.7747rem + 0.0326vi, 0.8rem);
    --size-step--1: clamp(0.9375rem, 0.9158rem + 0.1087vi, 1rem);
    --size-step-0: clamp(1rem, 0.9661rem + 0.1695vw, 1.125rem);
    --size-step-1: clamp(1.125rem, 1.0243rem + 0.5034vw, 1.4963rem);
    --size-step-2: clamp(1.2656rem, 1.0692rem + 0.9822vw, 1.99rem);
    --size-step-3: clamp(1.4238rem, 1.0921rem + 1.6585vw, 2.6469rem);
    --size-step-4: clamp(1.6019rem, 1.0817rem + 2.6008vw, 3.52rem);
    --size-step-5: clamp(1.8019rem, 1.0209rem + 3.9051vw, 4.6819rem);
    */

    /*
    --size-step--2: clamp(0.6944rem, 0.6856rem + 0.0444vi, 0.72rem);
    --size-step--1: clamp(0.8333rem, 0.8101rem + 0.1159vi, 0.9rem);
    --size-step-0: clamp(1rem, 0.9565rem + 0.2174vi, 1.125rem);
    --size-step-1: clamp(1.2rem, 1.1283rem + 0.3587vi, 1.4063rem);
    --size-step-2: clamp(1.44rem, 1.3295rem + 0.5527vi, 1.7578rem);
    --size-step-3: clamp(1.728rem, 1.5648rem + 0.8161vi, 2.1973rem);
    --size-step-4: clamp(2.0736rem, 1.8395rem + 1.1704vi, 2.7466rem);
    --size-step-5: clamp(2.4883rem, 2.1597rem + 1.6433vi, 3.4332rem);
    --size-step-6: clamp(2.986rem, 2.5319rem + 2.2705vi, 4.2915rem);
    --size-step-7: clamp(3.5832rem, 2.9636rem + 3.0978vi, 5.3644rem);
    --size-step-8: clamp(4.2998rem, 3.463rem + 4.1838vi, 6.7055rem);
    */

    --size-step--3: clamp(0.434rem, 0.4069rem + 0.1356vw, 0.512rem);
  --size-step--2: clamp(0.5208rem, 0.4794rem + 0.2072vw, 0.64rem);
  --size-step--1: clamp(0.625rem, 0.5641rem + 0.3043vw, 0.8rem);
  --size-step-0: clamp(0.75rem, 0.663rem + 0.4348vw, 1rem);
  --size-step-1: clamp(0.9rem, 0.7783rem + 0.6087vw, 1.25rem);
  --size-step-2: clamp(1.08rem, 0.9122rem + 0.8391vw, 1.5625rem);
  --size-step-3: clamp(1.296rem, 1.0674rem + 1.1428vw, 1.9531rem);
  --size-step-4: clamp(1.5552rem, 1.247rem + 1.5412vw, 2.4414rem);
  --size-step-5: clamp(1.8662rem, 1.4539rem + 2.0618vw, 3.0518rem);
  --size-step-6: clamp(2.2395rem, 1.6916rem + 2.7395vw, 3.8147rem);
  --size-step-7: clamp(2.6874rem, 1.9636rem + 3.6191vw, 4.7684rem);
  --size-step-8: clamp(3.2249rem, 2.2733rem + 4.7576vw, 5.9605rem);

    /*--size-step-mega: clamp(6.1917rem, 4.7011rem + 7.4533vi, 10.4774rem);*/
    --size-step-mega: clamp(4.0456rem, 1.8084rem + 11.1858vi, 10.4774rem);
    --space-3xs: clamp(0.25rem, 0.2410rem + 0.0420vw, 0.2312rem);
    --space-2xs: clamp(0.5rem, 0.4831rem + 0.0847vw, 0.5625rem);
    --space-xs: clamp(0.75rem, 0.7161rem + 0.1695vw, 0.875rem);
    --space-s: clamp(1rem, 0.9661rem + 0.1695vw, 1.125rem);
    --space-m: clamp(1.5rem, 1.4492rem + 0.2542vw, 1.6875rem);
    --space-l: clamp(2rem, 1.9322rem + 0.339vw, 2.25rem);
    --space-xl: clamp(3rem, 2.8983rem + 0.5085vw, 3.375rem);
    --space-m-xl: clamp(1.5rem, 0.9915rem + 2.5424vw, 3.375rem);
    --space-mega: clamp(6rem, 4.5763rem + 7.1186vw, 11.25rem);
    --gutter: var(--space-s);
    --measure: 72ch;
    --box-radius: 0.623rem;
    --btn-radius: 2rem;
    --icon-btn-size: 40px;
    --btn-border: #555;


    --inner-wrapper-max: 1100px;
    --wrapper-max: 1300px;

    --table-radius: 4mm;
}

/* Some global styles */

body {
    font-family: var(--font-base);
    font-weight: 400;
    font-size: var(--size-step-0);
    color: var(--color-dark);
    margin: 0;
    background: #FFFFFF;
}

body.scroll-lock {
    overflow: hidden;
}

:is(h1, h2, h3) {
    font-family: var(--font-display);
    font-weight: 600;
    max-width: 40ch;
}

[role=list] {
    padding: 0;
    margin-bottom: 0
}

td select {
  background-color: #fff;
  border: 1px solid #777;
  padding: 0.3rem;
  border-radius: 4px;
  -webkit-appearance:caret;
}

td input {
    border: 1px solid #777;
    border-radius: 4px;
    padding: 0.3rem;
}

p {
    max-width: var(--measure, 60ch);
}

a {
    color: currentColor;
    text-underline-offset: 0.26em;
}

/* utilities */

.ts-5 {
    font-size: var(--size-step-5);
}

.ts-4 {
    font-size: var(--size-step-4);
}

.ts-3 {
    font-size: var(--size-step-3);
}

.ts-2 {
    font-size: var(--size-step-2);
}

.ts-1 {
    font-size: var(--size-step-1);
}

.ts-0 {
    font-size: var(--size-step-0);
}

.ts--1 {
    font-size: var(--size-step--1);
}

.ts--2 {
    font-size: var(--size-step--2);
}


/* Composition */

.flow>*+* {
    margin-top: var(--space-m, 1em);
}

.flow> :first-child {
    margin-top: 0;
}

.flow-s>*+* {
    margin-top: var(--space-s, 1em);
}

.flow-xs>*+* {
    margin-top: var(--space-xs, 1em);
}

.flow-2xs>*+* {
    margin-top: var(--space-2xs, 1em);
}

.flow-m>*+* {
    margin-top: var(--space-m, 1em);
}

.flow-l>*+* {
    margin-top: var(--space-l, 1em);
}

.flow-page>*+* {
    margin-top: var(--space-xl, 1em);
}

/* for last sections in a page - some pages need this */
.flow-page> :last-child {
    margin-block-end: var(--space-xl, 1em);
}

.flow-tight>*+* {
    margin-top: var(--space-xs, 1em);
}

/*
svg:not([width]):not([height]):not([class]) {
    height: 1.5ex;
    width: auto;
}
*/

.pdf-page {
	color: #444;
    page-break-after: always;
    min-height: 100vh;
    display: grid;
    grid-template-rows: auto 1fr auto;
    padding: 5mm;
}

.pdf-page:last-child {
    page-break-after: avoid;
}

.pdf-page--world {
    background-color: var(--pdf-green);
    color: #fff;
    border-radius: 0.5cm;
    overflow: hidden;
}


.pdf-cover-title {
    position: relative;
    z-index: 10;
    width: 50%;
    color: #fff;
    margin: 2cm auto; 
}

.pdf-cover-title svg {
    width: 100%;
}

.pdf-catalogue-title {
    position: absolute;
    width: 100%;
    bottom: 2cm;
    left: 0;
}

.pdf-catalogue-title h1 {
    color: #fff;
    text-shadow: #444 1px 1px 4px;
    text-align: center;
    font-size: var(--size-step-7);
    max-width: 19ch;
    margin: 0 auto;
}


.pdf-full-bleed-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 .pdf-full-bleed-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.pdf-catalogue-end-logo {
    color: #fff;
    text-align: center;
    margin-top: 40vh;
}

.pdf-catalogue-end-logo svg {
    width: 8cm;
}

.pdf-contact-copy {
    width: 60%;
    margin: 0 auto;
    text-align: center;
    font-size: var(--size-step-2);
    margin-top: var(--space-xl);
}

.pdf-end-logo {
    width: 4cm;
    color: #fff;
    margin: 0.5cm auto;
    display: block;
}


.pdf-header {
    position: relative;
}

.pdf-header__banner {
	background-color: var(--pdf-green);
	color: #fff;
	border-radius: 0.5cm;
	display: grid;
	grid-template-columns: 5cm auto;
	gap: var(--space-m);
	padding: var(--space-m);
	align-items: center;
}

.pdf-header__icon-logo {
    display: grid;
    grid-template-columns: 1fr 2fr;
    align-items: center;
    gap: var(--space-xs);
}

.pdf-header__banner h1 {
    font-size: var(--size-step-2);
}

.pdf-header__sub {
    font-weight: 600;
    position: absolute;
    top: 53px;
    right: 25px;
    color: #fff;
}

.pdf-main {

}

.pdf-main__copy {
    max-width: 76ch;
    margin-left: auto;
    margin-right: auto;
}

.pdf-footer {

}

.pdf-footer--world {
    padding: var(--space-m);
}

.pdf-footer p {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.pdf-footer p a {
    font-weight: 600;
    text-decoration: none;
}

.pillar-icon {
	border-right: 2px solid #fff;
	padding-right: var(--space-xs);
}

.logo {
	
}

.header-title {
	font-size: var(--size-step-0);
}


.product-name {
	color: var(--pdf-green);
    font-size: var(--size-step-4);
}

.product-number {
	font-weight: bold;
    font-size: var(--size-step-3);
}

.pdf-title {
    font-size: var(--size-step-3);
    color: var(--pdf-green);
}

.icon-guide {
	background-color: rgba(200, 200, 200, 0.5);
    padding: var(--space-xs);
    font-size: var(--size-step--2);
    border-radius: 4mm;
}


.icon-guide__list {
	padding: 0;
	margin: 0;
	list-style: none;
	display: flex;
	justify-content: space-around;
}

.icon-guide__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3xs);
	width: 18%;
}

.icon-guide__icon {
	background-color: #fff;
	padding: 2mm;
  	border-radius: 2mm;
}


.icon-guide__item p {
	text-align: center;
}

.icon-guide__item svg {
	color: #777;
	width: 8mm;
	display: block;
}

.product-badges {
	list-style: none;
	padding: 0;
	display: flex;
    flex-wrap: wrap;
	gap: var(--space-2xs);
}


.product-badge {
	border: 1px solid #777;
	display: flex;
	flex-direction: column;
	width: 12mm;
	border-radius: 2mm;
}

.product-badge svg {
	width: 100%;
	padding: 1mm;

}

.product-badge span {
	display: block;
	border-top: 1px solid #777;
	text-align: center;
	font-weight: bold;
}

.product-info-icon {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.product-info-icon svg {
    width: 12mm;
    color: #45703a;
}

.anchoring-types {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.anchor-initials {
    width: 12mm;
    height: 12mm;
    background-color: #45703a;
    color: #fff;
    font-family: var(--font-display);
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.4rem;
    border-radius: 1mm;
}

.anchor-diagram {
    width: 40mm;
    border: 1px solid var(--color-play-green);
    border-radius: 2mm;
}


.environment-badges {
    list-style: none;
    padding: 0;
    display: flex;
    gap: var(--space-s);
}

.environment-badges__item img {
    width: 24mm;
}


/* table styles */

.pdf-table {
    table-layout: fixed;
    /*width: 90%;*/
    border-collapse: collapse;
    margin: 0;
    border-radius: var(--table-radius, 4mm);
    overflow: hidden;
    font-size: var(--size-step--1);
}

.pdf-table tfoot {
    background-color: var(--pdf-green);
    color: #fff;
}

.pdf-table thead {
    background-color: var(--pdf-green);
    color: #fff;
}

.pdf-table thead th {
    text-align: right;
}

.pdf-table thead th:first-child {
    text-align: left;
}

.pdf-table thead th:nth-child(1) {
    width: 21%;
}

.pdf-table thead th:nth-child(2) {
    width: 7%;
}

.pdf-table thead th:nth-child(3) {
    width: 7%;
}

.pdf-table thead th:nth-child(4) {
    width: 10%;
}

.pdf-table thead th:nth-child(5) {
    width: 10%;
}

.pdf-table thead th:nth-child(6) {
    width: 10%;
}

.pdf-table tbody tr:nth-child(even) {
    background-color: var(--pdf-green-pale);
}

.pdf-table th, .pdf-table td {
    padding-block: 0.4ch;
    padding-inline: 1ch;
}

.pdf-table td {
    text-align: right;
}

.pdf-table td:first-child {
    text-align: left;
}

/* breadcrumb */

.product-nav {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs, 1rem);
    justify-content: flex-start;
    align-items: center;
}

.product-nav__label {
    font-weight: 700;
}

.product-nav li {
    display: inline-flex;
    gap: var(--space-xs, 1rem);
}

.product-nav li a {
    text-decoration: none;
}

.product-nav li.current a {
    font-weight: 600;
    
}

.product-nav li:last-child a {
    font-weight: 600;
    text-decoration: none;
}

.product-nav--arrows li::after {
    content: ">";
}

/*
.product-nav--arrows li:first-child::after {
    content: none;
}
*/

.product-nav--arrows li:last-child::after {
    content: none;
}


/* page layouts */

/* product first page */

.pdf-grid-product-front {
    display: grid;
    grid-template-columns: 2fr 3fr;
    grid-template-areas:
        "main main main"
        "sidebar info info";
    gap: var(--space-l);
}

.front-page__img {
    grid-area: main;
}

.front-page__img img {
    height: 30vh;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.front-page__desc {
    grid-area: info;
}

.front-page__sidebar {
    grid-area: sidebar;
}


.pdf-materials {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    column-gap: var(--space-s);
    font-size: var(--size-step--1);
    margin-top: calc( -1 * var(--space-s));
}

.pdf-materials__item {
    display: flex;
    flex-direction: column;
    gap: var(--space-3xs);
    page-break-inside: avoid;
    margin-top: var(--space-m);
}

.pdf-materials__item img {
    /*height: 35mm;*/
    width: auto;
    object-fit: contain;
}


.pdf-grid-tech {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
        "images images"
        "tables other"
        "details other";
    gap: var(--space-l);
}

.pdf-grid-tech__images {
    grid-area: images;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(-space-s);
}

.pdf-grid-tech__images img {
    max-height: 7cm;
} 

.pdf-grid-tech__details {
    grid-area: details;
}

.pdf-grid-tech__tables {
    grid-area: tables;
}


.pdf-grid-sustain {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
    grid-template-areas:
        "image"
        "table"
        "badges";
    gap: var(--space-s);
}

.pdf-grid-sustain__img {
    grid-area: image;
}

.pdf-grid-sustain__img img {
    height: 17vh;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
}

.pdf-grid-sustain__table {
    grid-area: table;
    font-size: var(--size-step--1);
}

.pdf-grid-sustain__badges {
    grid-area: badges;
}


.pdf-grid-inclusive {
    display: grid;
    gap: 0;
    grid-template-columns: 1.5fr 1fr;
    grid-template-areas: 
        "enablers image"
        "experience experience";
}

.pdf-grid-inclusive__img {
    /*
    height: 17vh;
    width: auto;
    object-fit: contain;
    margin: 0 auto;
    */
    grid-area: image;
}

.pdf-grid-inclusive__img img {
    height: 8cm;
    width: 8cm;
    position: absolute;
    object-fit: contain;
}

.pdf-grid-inclusive__enablers {
    grid-area: enablers;
}

.pdf-grid-inclusive__experiences {
    grid-area: experience;
}


.experiences {
    position: relative;
}

.experiences__category {

}

.experiences__list {
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(7, 20mm);
    column-gap: var(--space-m);
    row-gap: var(--space-3xs);
}

.experiences__item {
    display: flex;
    flex-direction: column;
    height: 100%;
    font-size: var(--size-step--2);
}

.experiences__item.active {
    
}


.experiences__item img {
    opacity: 0.45;
    width: 16mm;
    margin: 0 auto;
}

.experiences__item.active img {
    opacity: 1;
}

.experiences__item.active span {
    font-weight: 600;
}


.experiences__item span {
    text-align: center;
    display: block;
}

.enablers {

}

.enablers__list {
    padding: 0;
    list-style: none;
    display: grid;
    gap: var(--space-3xs);
    grid-template-columns: 1fr 1fr;
}

.enablers__item {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
}

.enablers__tick {
    color: var(--pdf-green-pale);
    display: flex;
    padding: 2mm;
    border-radius: 50%;
    background-color: var(--pdf-green-pale);
    width: 7mm;
    height: 7mm;
    align-items: center;
}

.enablers__tick svg {
    width: 100%;
}

.enablers__item.active {
    font-weight: 600;
}

.enablers__item.active .enablers__tick {
    color: #fff;
    background-color: var(--pdf-green);
}

.world-page-img {
    width: 85%;
    margin: 0 auto;
}

