/*
Theme Name:		Chem-Trend 2026
Author:			John Green @ Phire Group
Author URI:		https://phiregroup.com/
Description:	The Chem-Trend parent theme for 2026. No site should use this theme directly.
Version:		1.0
Text Domain:	chemtrend
*/

:root {--ltorange: #fde4da; --orange: #fa6432; --dkorange: #c94a17; --white: #fff; --offwhite: #f2f2f2; --ltgray: #c8c8c8; --midgray: #969696; --dkgray: #5a5a5a; --black: #000; --black20: rgb(0 0 0 / .2); --black55: rgb(0 0 0 / .55); --green-1: #47d7ac; --green-2: #35a181; --green-3: #246c56; --green-4: #12362b; --brown: #a76d11; --logoorange: #f63; --mw: 73.125rem; --hs: 1.25rem; --vs: 2.5rem; --navbar: 4.5rem;}

/* basic styles */
* {margin: 0; padding: 0;}
*, ::before, ::after {box-sizing: border-box;}
html {font: medium/1.375 Whitney, Arial, 'Arial Unicode MS', sans-serif; -webkit-text-size-adjust: none; text-size-adjust: none; color: var(--dkgray); background-color: var(--white);}
html:is([lang^="ja"], [lang^="ko"], [lang^="th"], [lang^="vi"], [lang^="zh"]), :is([lang^="ja"], [lang^="ko"], [lang^="th"], [lang^="vi"], [lang^="zh"]), .usenoto {font-family: 'Noto Sans', 'Noto Sans SC', 'Noto Sans JP', 'Noto Sans KR', 'Noto Sans Thai', Arial, 'Arial Unicode MS', sans-serif;}
a {text-decoration-thickness: from-font; color: inherit;}
b, strong {font-weight: 500;}
blockquote p::before {content: open-quote;}
blockquote p::after {content: close-quote;}
button {border-width: 0; font: inherit; color: inherit; background-color: transparent; cursor: pointer; touch-action: manipulation;}
dialog {place-self: center; width: auto; height: auto; overscroll-behavior: contain; padding: var(--hs); border: 0; border-radius: .625rem; color: var(--dkgray);}
dialog::backdrop {overflow: hidden; overscroll-behavior: contain; background-color: var(--black20); backdrop-filter: blur(.5rem);}
h1, h2, h3, h4, h5, h6 {font-weight: 400; text-wrap: balance;}
h1 {font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em;}
h2 {font-weight: 400; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
h3 {font-weight: 400; font-size: 1.375rem; line-height: 1.272; letter-spacing: -.02em;}
:is([lang^="ja"], [lang^="ko"]) :is(h1, h2, h3, h4, h5, h6) {text-wrap: initial;} /* https://ryelle.codes/2025/04/typography-troubles-balancing-in-japanese-korean/ */
iframe, img, picture, svg, video {height: auto; max-width: 100%; vertical-align: middle;}
iframe {display: block; max-width: 100%; border: 0;}
input, select, textarea {font: inherit; letter-spacing: inherit; word-spacing: inherit;}
meter {width: 100%; height: .125rem; border-radius: 0; background: 0 0; background-color: var(--color2); appearance: none; --color1: var(--orange); --color2: var(--ltgray);}
.hasbg meter {--color1: var(--white); --color2: var(--orange);}
meter::-moz-meter-bar {background: 0 0; background-color: var(--color1);}
meter::-webkit-meter-bar {height: .125rem; background: 0 0; background-color: var(--color2);}
meter::-webkit-meter-optimum-value {background: 0 0; background-color: var(--color1);}
ol, ul {list-style: none;}
p {text-wrap: pretty;}
summary {list-style: none; cursor: pointer;}
summary::-webkit-details-marker {display: none;}
svg[width="0"][height="0"] {position: fixed;}
svg[width="0"][height="0"][aria-hidden="true"] {display: none;}
[hidden] {display: none !important;}

/* blocks */
main > section h2.sm {display: flex; gap: .375rem; align-items: center; font-size: .875rem; line-height: 1.143;}
main > section h2.sm::before {width: .375rem; height: .375rem; border-radius: 50%; background-color: var(--ltgray); content: '';}
main > section.hasbg h2.sm::before {background-color: var(--orange);}

/*
.h1 {font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em;}
.home .h1 {font-size: 3.5rem; line-height: 1.036; letter-spacing: -.036em;}
.h2 {font-weight: 400; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
.h3 {font-weight: 400; font-size: 1.375rem; line-height: 1.272; letter-spacing: -.02em;}
.subhead {font-size: 1rem; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em;}
.eyebrow {font-size: .875rem; line-height: 1.143;}
.body-copy-large {font-size: 1.125rem; line-height: 1.222;}
*/

/* utility classes */
.screen-reader-text {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.wrap {margin-inline: max(var(--hs), ((100% - var(--mw)) / 2));}
.wys *:where(:not(.btn)) {margin: revert; margin-block-end: 0; padding: revert; list-style: revert;}
.wys > :first-child {margin-block-start: 0;}
.wys > * + * {margin-block-start: 1.25em;}
.wys p:has(.btn:only-child, img:only-child) {margin-block-start: 2.5rem;}
.wys p:has(.btn:only-child, img:only-child):not(:last-child) {margin-block-end: 2.5rem;}
.wys p:has(img:only-child) img {border-radius: .625rem;}
.wys > ul {padding-inline-start: 1.5rem;}
.zi {display: block; overflow: clip; border-radius: .625rem;}
.zi > img {transition: .3s scale ease-out;}
.zi:hover > img, .card:has(.zi):hover .zi > img {scale: 1.05;}

/* buttons */
.btn, .btn2, .btn3, .btn4 {display: inline-flex; align-items: center; transition: .3s ease-out;}
.btn, .btn2, .btn3 {border: 1px solid var(--bc, var(--bg, var(--orange)));}
.btn, .btn2 {padding: .625rem 1.25rem; border-radius: .5rem; font-size: 1.125rem; line-height: 1; text-decoration: none; color: var(--fg, var(--white)); background-color: var(--bg, var(--orange));}
.btn[aria-disabled="true"] {opacity: .5; cursor: not-allowed;}
.pg-sustainability .main .btn {--bg: var(--green-2);}
.btn2, .btn3 {border-color: var(--bg, currentcolor); color: var(--fg, inherit); background-color: var(--bg, transparent);}
:is(.btn2, .btn3):hover {--fg: var(--white); --bg: var(--dkgray);}
.hasbg :is(.btn2, .btn3):hover {--fg: var(--dkgray); --bg: var(--white);}
.btn3, .btn4 {gap: .375rem; border-radius: 1.25rem;}
.btn.white {--fg: var(--orange); --bg: var(--white); --arrow: url('images/btn-arrow-orange.svg');}
.btn.gray {--fg: var(--white); --bg: var(--dkgray);}
.btn::after {flex-shrink: 0; width: 0px; height: .8125rem; background-image: var(--arrow, url('images/btn-arrow-white.svg')); background-position: right center; background-repeat: no-repeat; transition: .15s ease-out; content: '';}
.btn:hover::after {width: 1.5625rem;}
.btn[aria-disabled="true"]:hover::after {width: 0px;}
.btn3 {padding: .375rem .625rem; font-size: .875rem; line-height: 1.143;}
.btn4 {color: var(--fg); background-color: var(--bg, transparent); --fg: var(--orange);}
.btn4:hover {--fg: var(--white); --bg: var(--orange);}
.arrowlink {border-radius: 50%;}
.closebtn {--fg: var(--dkgray);}
.closebtn:hover {--fg: var(--white); --bg: var(--dkgray);}
.searchbtn {--fg: var(--dkgray);}
.searchbtn:hover {--fg: var(--orange);}
.txtarrowlink {display: inline-grid; grid-template-columns: auto 1.875rem; gap: .5rem; align-items: center; font-weight: 500; font-size: 1.125rem; line-height: .67; letter-spacing: -.02em;}
.txtarrowlink:not(:hover) {text-decoration: none;}
.txtarrowlink svg {border: 1px solid var(--orange); border-radius: 50%; color: var(--orange); transition: .15s ease-out;}
.txtarrowlink:hover svg {color: var(--white); background-color: var(--orange);}

/* components (general) */
.playbtn {border-radius: 50%; color: var(--dkgray); transition: .3s ease-out;}
.playbtn:hover {color: var(--orange);}
.pg-sustainability .playbtn:hover {color: var(--green-2);}

/* components: embeds */
:is(pg-vimeo, pg-youtube) > a {display: grid; place-items: center;}
:is(pg-vimeo, pg-youtube) > * {grid-area: 1 / 1;}
:is(pg-vimeo, pg-youtube) > a > * {grid-area: 1 / 1;}
:is(pg-vimeo, pg-youtube) > a > img {aspect-ratio: 16 / 9; width: 100%; height: 100%; max-width: none; object-fit: cover;}
:is(pg-vimeo, pg-youtube) > a svg {max-width: 3.125rem; color: rgb(0 0 0 / .7);}
:is(pg-vimeo, pg-youtube) > a:hover svg {color: var(--orange);}
.pg-sustainability :is(pg-vimeo, pg-youtube) > a:hover svg {color: var(--green-2);}
:is(pg-vimeo, pg-youtube) iframe {aspect-ratio: 16 / 9;}
:is(pg-vimeo, pg-youtube) > div {display: flex; flex-direction: column; gap: 1rem; justify-content: center; padding: var(--hs); text-align: center; color: var(--white); background-color: var(--black55);}
:is(pg-vimeo, pg-youtube) > div :is(a, button) {text-decoration: underline;}
:is(pg-vimeo, pg-youtube) > div :is(a, button):hover {text-decoration: none;}

/* components: carousels */
.block-carousel {display: grid; padding-block: var(--vs);}
.block-carousel pg-carousel > *:not(:first-child) {display: none;}
.block-carousel pg-carousel:defined {display: grid;}
.block-carousel pg-carousel:defined .ctrls {grid-row: 3; margin-block-start: 1.25rem;}
.block-carousel pg-carousel:defined .slide-wrap {display: grid; grid-row: 1;}
.block-carousel pg-carousel:defined .slide-wrap > * {grid-area: 1 / 1; transition: opacity .5s ease-out;}
.block-carousel pg-carousel:defined .slide-wrap > :not([inert]) {z-index: 1;}
.block-carousel pg-carousel:defined .slide-wrap > [inert] {opacity: 0;}
.block-carousel pg-carousel:defined meter {display: inline-block; grid-row: 2; margin-block-start: 1.875rem;}

/* components: sliders */
.block-slider {display: grid; grid-template: auto auto auto / max(var(--hs), ((100% - var(--mw)) / 2)) 1fr auto max(var(--hs), ((100% - var(--mw)) / 2)); align-items: center; padding-block: var(--vs); --cardwidth: 23.125rem;}
.block-slider-common_problems {color: var(--white); background-color: var(--dkorange);}
.block-slider-digital_tools, .block-slider-industries, .block-slider-news_events {background-color: var(--offwhite);}
.block-slider-industries {--cardwidth: 16.25rem;}
.block-slider h2 {z-index: 1; grid-area: 1 / 2;}
.block-slider pg-slider {display: grid; grid-area: 2 / 2 / 3 / -2; grid-template-columns: repeat(auto-fill, minmax(min(18.75rem, 100%), 1fr)); gap: 1.875rem; margin-block-start: var(--hs);}
.block-slider pg-slider:defined {grid-area: 1 / 1 / -1 / -1; grid-template: subgrid / subgrid; gap: 0; margin-block-start: 0;}
.block-slider pg-slider .slider-ctrls {display: flex; grid-area: 1 / 3; gap: .375rem;}
.block-slider pg-slider .slider-ctrls button[aria-disabled="true"] {border-color: var(--ltgray); color: var(--ltgray); background-color: transparent; cursor: not-allowed;}
.block-slider.hasbg pg-slider .slider-ctrls button[aria-disabled="true"] {border-color: var(--orange); color: var(--orange);}
.block-slider pg-slider .slide-wrap {grid-area: 2 / 1 / 3 / -1; gap: 1.875rem; margin-block-start: 1.25rem; padding-inline: max(var(--hs), ((100% - var(--mw)) / 2));}
.block-slider pg-slider .slide-wrap > * {width: min(var(--cardwidth), 77vw);}
.block-slider pg-slider a img {width: 100%;}
.block-slider pg-slider meter {grid-area: 3 / 2 / 4 / -2; margin-block-start: 2.5rem;}
.block-slider .btn {grid-area: 4 / 2; justify-self: start; margin-block-start: 2.5rem;}

/* components: cards */
.cardgrid {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(var(--cardwidth), 100%), 1fr)); gap: 2.5rem 1.875rem; --cardwidth: 17.5rem;}
.cardgrid-industry {--cardwidth: 16.25rem;}
.card {position: relative;}
.card .zi > img {width: 100%;}
.card h3 {margin-block-start: 1.25rem;}
.card h3 a {display: inline-grid; grid-template-columns: auto 1.875rem; gap: .5rem; align-items: center; width: 100%;}
.card h3 a:not(:hover) {text-decoration: none;}
.card h3 a svg, .card-innovation h3 ~ svg {border: 1px solid var(--color); border-radius: 50%; color: var(--color); transition: .15s ease-out; --color: var(--orange);}
.pg-sustainability :is(.card h3 a svg, .card-innovation h3 ~ svg) {--color: var(--green-2);}
.card h3 a:hover svg, .card-innovation:has(a:hover) h3 ~ svg {color: var(--white); background-color: var(--color);}
.card h3 a::before {position: absolute; inset: 0; content: '';}
.card .date {margin-block-start: .625rem; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em;}
.card p {position: relative; z-index: 1; margin-block-start: .625rem;}
.card-brand {display: grid; grid-template-rows: 1fr auto;}
.card-brand::after {z-index: 1; grid-area: 1 / 1; background-image: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / .55) 100%); content: '';}
.card-brand .zi {grid-area: 1 / 1 / -1 / -1;}
.card-brand h3 {z-index: 2; grid-area: 2 / 1; margin: 0; padding: var(--hs); border-radius: 0 0 .625rem .625rem; color: var(--white); background-color: rgb(0 0 0 / .55);}
.card-brand h3 a svg {--color: var(--white);}
.card-brand h3 a:hover svg {--color: var(--orange);}
.pg-sustainability .card-brand h3 a svg {--color: var(--green-2);}
.card-common-problem {overflow: clip; padding: 0 1.25rem 1.25rem; border-radius: .75rem; color: var(--dkgray); background-color: var(--white);}
:is(.card-event, .card-news) .zi {display: grid;}
:is(.card-event, .card-news) .zi > * {grid-area: 1 / 1 / -1 / -1;}
:is(.card-event, .card-news) .zi .flag {position: relative; z-index: 1; place-self: start; margin: .625rem; padding: .25rem .5rem; border-radius: 1.25rem; font-size: .875rem; line-height: 1.143; background-color: var(--white);}
.card-industry {display: grid; grid-template-rows: 1fr auto;}
.card-industry .zi {grid-area: 1 / 1 / -1 / -1;}
.card-industry h3 {z-index: 2; grid-area: 2 / 1; margin: .625rem; padding: .875rem 1.25rem; border-radius: .625rem; font-size: 1rem; color: var(--white); background-color: rgb(0 0 0 / .55);}
.card-industry h3 a::after {width: .9375rem; height: .8125rem; margin-inline-end: .625rem; background-image: url('images/btn-arrow-white.svg'); transition: .15s ease-out; content: '';}
.card-industry h3 a:hover::after {translate: .625rem;}
.card-innovation h3 ~ svg {margin-block-start: 1.25rem;}
.card-resource {padding-block-end: var(--hs); border-radius: .625rem; background-color: var(--offwhite);}
.card-resource pg-videowrap {display: grid; position: relative; z-index: 1; overflow: clip; border-start-start-radius: .625rem; border-start-end-radius: .625rem;}
.card-resource pg-videowrap > * {grid-area: 1 / 1 / -1 / -1;}
.card-resource pg-videowrap video {width: 100%;}
.card-resource pg-videowrap .playbtn {place-self: end start; margin: .625rem;}
.card-resource .zi {border-end-start-radius: 0; border-end-end-radius: 0;}
.card-resource h3 {padding-inline: var(--hs);}
.card-resource .tags {display: flex; position: relative; z-index: 1; flex-wrap: wrap; gap: .375rem; margin-block-start: 1.25rem; padding-inline: var(--hs);}
.card-resource .tag {padding: .25rem .5rem; border: 1px solid; border-radius: 1.25rem; font-size: .875rem; line-height: 1.143;}
.card-resource .tag1 {border-color: var(--orange);}
.card-resource .tag2 {border-color: var(--midgray);}
.card-resource .tag3 {border-color: var(--brown);}

/* forms */
.no-js [data-country]:not([data-country~="Def"]) {display: none;}
.pgform {display: grid; grid-template-columns: repeat(auto-fill, minmax(min(21.75rem, 100%), 1fr)); gap: 1.25rem 1.875rem;}
.pgform label {font-weight: 500;}
.pgform .req {color: var(--orange);}
.pgform :where(input:not([type="checkbox"], [type="radio"]), select, textarea) {width: 100%; height: 3.75rem; padding: .625rem 1rem; border: 1px solid var(--dkgray); border-radius: .625rem; font-weight: 500; font-size: 1.125rem; line-height: 1; color: inherit; background-color: inherit;}
.pgform input:where([type="checkbox"], [type="radio"]) {width: .75rem; height: .75rem; margin-block: .3125rem; border: 1px solid var(--dkgray); accent-color: var(--orange);}
.pgform input[type="checkbox"] {border-radius: .25rem;}
.pgform input[type="radio"] {border-radius: 50%;}
.pgform select {background-image: url('images/select.svg'); background-position: right 1rem center; background-repeat: no-repeat; appearance: none;}
.pgform textarea {height: 15rem; line-height: 1.375;}
.pgform fieldset {border: 0;}
.pgform legend {margin-block-end: .625rem; font-weight: 500;}
.pgform fieldset ul {display: grid; gap: .625rem; align-content: center; height: 100%;}
.pgform fieldset input:where([type="checkbox"], [type="radio"]) {margin-block: .125rem;}
.pgform fieldset label {font-size: 1.125rem; line-height: 1;}
.fieldwrap {display: grid; position: relative; gap: .625rem; justify-items: start; width: 100%;}
.crwrap {grid-template-columns: .75rem 1fr;}
.fieldwrap-twocol {grid-column: 1 / -1;}
.fieldwrap-twocol.crwrap label {font-weight: 400;}
.fieldwrap .hp {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;} /* .screen-reader-text */
.fieldwrap .captcha {display: flex; gap: .25rem; max-width: calc(100dvw - 2 * var(--hs)); min-height: 4.375rem;}

/* header */
.header-skip {display: block; padding: .5rem; text-align: center;}
.header-skip:not(:focus) {position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;}
.header-skip:focus {outline: none;}
.header-skip span {padding-inline: .25rem;}
.header-skip:focus-visible span {outline: 1px solid;}
.ph {position: absolute; inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + var(--wrongsiteoffset, 0px)); width: 100%; margin-block-start: var(--hs);}
.header-skip:focus-visible + .ph {inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 2.375rem);}
.ph-wrap {display: grid; position: relative; z-index: 3; grid-template: var(--navbar) / 1fr; grid-auto-rows: auto; align-items: center; --mw: 85rem;}
.ph-bar {display: flex; justify-content: space-between; padding: 1rem 1.25rem; border-radius: .625rem; color: var(--black); background-color: var(--bg, var(--offwhite)); backdrop-filter: blur(1rem);}
body:has(.firstblock.hasbg) .ph-bar {color: var(--white); --bg: var(--black20);}

/* first block */
.firstblock.hasbg {display: grid; color: var(--white);}
.firstblock-sm {grid-template-rows: 28.125rem;}
.firstblock-md {grid-template-rows: 37.5rem;}
.firstblock-home:has(.firstblock-announcement) {grid-template-rows: 37.5rem auto;}
.firstblock-lg {grid-template-rows: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));}
.firstblock.hasbg > * {grid-area: 1 / 1 / -1 / -1;}
.firstblock-home:has(.firstblock-announcement) > * {grid-row: 1;}
.firstblock.hasbg::after {grid-area: 1 / 1 / -1 / -1; background-color: var(--black55); content: '';}
.firstblock-lg.hasbg:has(.firstblock-img)::after {background-image: linear-gradient(114deg, color(from var(--orange) srgb r g b / 0) 39%, color(from var(--orange) srgb r g b / .8) 79.8%);}
.firstblock-home.hasbg::after {background-image: linear-gradient(245deg, color(from var(--orange) srgb r g b / 0) 30.5%, color(from var(--orange) srgb r g b / .8) 88.9%);}
.firstblock-home:has(.firstblock-announcement)::after {grid-row: 1;}
.firstblock-img, .firstblock pg-videowrap, .firstblock pg-videowrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}
.firstblock pg-videowrap {display: grid; grid-template: 100% / max(var(--hs), ((100% - var(--mw)) / 2)) 1fr max(var(--hs), ((100% - var(--mw)) / 2));}
.firstblock pg-videowrap video {grid-area: 1 / 1 / -1 / -1;}
.firstblock pg-videowrap .playbtn {z-index: 2; grid-area: 1 / 2; place-self: end start; margin-block-end: 2.5rem;}
.firstblock .wrap {display: flex; z-index: 1; flex-direction: column; gap: var(--hs); place-items: start; margin-block-start: calc(var(--hs) + var(--navbar)); padding-block: 1.875rem 2.5rem;}
.firstblock pg-videowrap + .wrap::after {width: 25px; height: 25px; content: '';}
.firstblock-sm pg-videowrap + .wrap::after {margin-block-start: auto;}
.bc {min-height: 1rem; font-size: .875rem; line-height: 1.143;}
.bc li {display: inline-block;}
.bc li:not(:last-child)::after {content: '|';}
.bc a:not(:hover) {text-decoration: none;}
.firstblock h1 {margin-block-start: 1.25rem;}
.search-results .firstblock h1 {margin-inline: auto; text-align: center;}
.firstblock-md h1 {max-width: 31.25rem; margin-block-start: auto; font-size: 3.5rem; line-height: 1.036; letter-spacing: -.036em;}
.firstblock-intro {margin-block-start: auto;}
.firstblock-md .firstblock-intro {max-width: 31.25rem; margin-block-start: 0; font-size: 1.125rem; line-height: 1.222;}
.firstblock-lg .firstblock-intro {max-width: 25rem;}
.firstblock-md:has(pg-videowrap) .btn {margin-block-end: 2.5rem;}
.firstblock-home > .firstblock-announcement {display: grid; grid-row: 2; gap: var(--hs); justify-items: start; margin: var(--hs); padding: var(--hs); border: 1px solid var(--ltgray); border-radius: .625rem; color: var(--dkgray); background-color: var(--white);}
.firstblock-announcement h2 {font-weight: 600; font-size: 1rem; line-height: 1; text-transform: uppercase; letter-spacing: .05em;}

/* footer */
.pf {border-block-start: 1px solid var(--ltgray);}
.pf .wrap {padding-block: 2.5rem;}
.pf-social {display: grid; gap: 1.25rem 1.75rem; font-size: .875rem; line-height: 1.57;}
.pf-social a {display: flex; gap: .625rem; align-items: center;}
.pf-social a:not(:hover) {text-decoration: none;}
.pf-social a:hover svg {transition: .15s ease-out;}
.pf-social a:hover svg:has([href="#social-linkedin"]) {color: #0073b1;}
.pf-social a:hover svg:has([href="#social-wechat"]) {color: #07c160;}
.pf-social a:hover svg:has([href="#social-youtube"]) {color: #f03;}
.pf-nav:not(:first-child) {margin-block-start: 1.875rem;}
.pf-nav {font-weight: 700; line-height: 1.5;}
.pf-nav ul {columns: 12.5rem 2; column-gap: 3.125rem; max-width: 28.125rem;}
.pf-nav li {padding-block-end: .625rem; break-inside: avoid;}
.pf-nav a:not(:hover) {text-decoration: none;}
.pf-fse {display: inline-flex;}
.pf-fse:not(:first-child) {margin-block-start: 2.5rem;}
.pf-nav + .pf-fse {margin-block-start: 1.875rem;}
.pf-legal {margin-block-start: 1.875rem; font-size: .875rem; line-height: 16px;}

/* block: contact form */
.block-contact {display: flex; flex-wrap: wrap; gap: 2.5rem 6.25rem; padding-block: var(--vs);}
.contact-side {flex: 1 1 18.75rem;}
.contact-main, .block-contact .contact-form {flex: calc(infinity) 1 36.5rem;}
.contact-main {display: grid; gap: var(--hs);}
.contact-main pre {max-width: 35.5rem; margin-block-start: 1rem; padding: .5rem; white-space: pre-wrap; overflow-wrap: break-word; color: #000; background-color: #dedede;}
.contact-main summary {list-style: revert;}

/* block: card grid */
.block-cg {padding-block: var(--vs);}
.block-cg .cardgrid {margin-block-start: 1.875rem;}
.block-rr .btn {margin-block-start: 2.5rem;}

/* block: faqs */
.block-faqs {padding-block: var(--vs); color: var(--white); background-color: var(--dkgray);}
.block-faqs details {margin-block-start: 1.875rem; padding-block-end: 1.875rem; border-block-end: 1px solid var(--midgray);}
.block-faqs details:nth-of-type(1) {margin-block-start: 1.25rem;}
.block-faqs summary {display: grid; grid-template-columns: 1fr 1.25rem; gap: .625rem; font-weight: 400; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
.block-faqs svg {grid-area: 1 / 2; width: 1.25rem; height: 1.25rem; margin-block: .5rem; fill: currentcolor;}
.block-faqs svg use {transition: .15s rotate ease-out; transform-origin: 50% 50%;}
.block-faqs details:not([open]) summary svg use + use {rotate: 90deg;}
.block-faqs details:not([open]) summary svg + svg {rotate: 90deg;}
.block-faqs .wys {padding-block-start: .625rem;}

/* block: image plus content */
.block-ipc {padding-block: var(--vs); --mw: 64.375rem;}
.block-ipc.offwhite {background-color: var(--offwhite);}
.block-ipc .wrap {display: grid; gap: 1.875rem; align-items: center;}
.block-ipc .wrap > img {justify-self: center; border-radius: .625rem;}
.block-ipc .wrap > .wys h2 {color: var(--orange);}
.pg-sustainability .block-ipc .wrap > .wys h2 {color: var(--green-3);}

/* block: testimonial */
.block-testimonial {display: grid; gap: var(--gap); padding-block: var(--vs); --gap: 1.25rem;}
.block-testimonial > :is(img, pg-videowrap) {justify-self: center; overflow: clip; border-radius: .625rem;}
.block-testimonial pg-videowrap {display: grid;}
.block-testimonial pg-videowrap > * {grid-area: 1 / 1 / -1 / -1;}
.block-testimonial pg-videowrap button {place-self: end start; margin: .625rem;}
.block-testimonial figure {display: grid; grid-template-rows: 1fr auto; gap: var(--gap);}
.block-testimonial blockquote {display: grid; align-items: center; padding: var(--hs); border: 1px solid var(--orange); border-radius: .625rem; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
.pg-sustainability .block-testimonial blockquote {border-color: var(--green-1);}
.block-testimonial figcaption {padding: var(--hs); border-radius: .625rem; background-color: var(--offwhite);}
.block-testimonial figcaption div:first-child {font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em; color: var(--orange);}
.pg-sustainability .block-testimonial figcaption div:first-child {color: var(--green-3);}

/* block: testimonial carousel */
.block-carousel-testimonials {background-color: var(--offwhite);}
.slide-testimonial {display: grid; background-color: var(--offwhite);}
.slide-testimonial:has(img) {gap: 1.875rem 4.375rem;}
.slide-testimonial img {justify-self: center; border-radius: .625rem;}
.slide-testimonial blockquote {font-weight: 300; font-size: 2.5rem; line-height: 1.1; letter-spacing: -.02em;}
.slide-testimonial:has(img) blockquote {font-weight: 400; font-size: 1.875rem; line-height: 1.2; letter-spacing: -.02em;}
.slide-testimonial figcaption {margin-block-start: 1.25rem;}
.slide-testimonial figcaption div:first-child {font-weight: 500; line-height: 1.25; text-transform: uppercase; letter-spacing: .05em;}

/* block: two column */
.block-twocol {display: flex; flex-wrap: wrap; gap: 1.875rem 6.25rem; padding-block: var(--vs);}
.block-twocol > div:first-child {flex: 1 1 18.75rem;}
.block-twocol > div:first-child h2 {color: var(--orange);}
.block-twocol > div:first-child h2 + .wys {margin-block-start: 1.25rem;}
.pg-sustainability .block-twocol > div:first-child h2 {color: var(--green-3);}
.block-twocol > .wys:last-child {flex: calc(infinity) 1 36.5rem;}

/* block: wide image */
.block-wi {--mw: 85rem; --hs: 0px;}
.block-wi img {width: 100%;}

/* search */
.search-results-list {--mw: 48.125rem;}
.search-results-list li {margin-block-end: 1.25rem; padding-block-end: 1.25rem; border-block-end: 1px solid var(--offwhite);}
.search-results-list a {font-size: 1.375rem; line-height: 1.272; letter-spacing: -.02em;}
.search-results-list a:not(:hover) {text-decoration: none;}
.search-results-list p {margin-block-start: .625rem;}

/* pagination */
.pagination {display: flex; flex-wrap: wrap; gap: .375rem; justify-content: center; margin-block-start: 2.5rem; --mw: 48.125rem;}
.pagination > * {display: grid; place-items: center; width: 1.875rem; height: 1.875rem;}
.pagination a {border: 1px solid transparent; border-radius: 1.875rem; text-decoration: none;}
.pagination a:hover {background-color: var(--offwhite);}
.pagination a.current {color: var(--white); background-color: var(--dkgray);}
.pagination:last-child {margin-block-end: 4.375rem;}

@media (width >= 48em) { /* 768px */

	:root {--vs: 4.375rem;}

	/* components: carousels */
	.block-carousel pg-carousel:defined .ctrls {justify-self: end;}

	/* components: embeds */
	:is(pg-vimeo, pg-youtube) > a svg {max-width: none;}

	/* first block */
	.firstblock-lg .wrap {display: grid; grid-template: auto auto 1fr / auto auto;}
	.firstblock-lg:has(pg-videowrap) .wrap {grid-template-rows: auto auto 1fr auto;}
	.firstblock-lg .wrap > * {grid-column: 1;}
	.firstblock-lg .wrap::after {grid-area: -1 / 1;}
	.firstblock-lg .wrap > .firstblock-jumplinks {grid-area: -1 / 2; place-self: end;}
	.firstblock-lg .firstblock-intro {grid-row: 4; max-width: 18.75rem;}
	.firstblock-lg.hasbg:has(.firstblock-img)::after {background-image: linear-gradient(125deg, color(from var(--orange) srgb r g b / 0) 62.4%, color(from var(--orange) srgb r g b / .8) 97.5%);}

	/* footer */
	.pf .wrap {display: grid; grid-template: auto auto / 1fr auto; column-gap: var(--hs); justify-items: start;}
	.pf-social {display: flex; grid-area: 1 / 1; flex-wrap: wrap;}
	.pf-nav {grid-area: 2 / 1;}
	.pf-nav:not(:first-child) {margin-block-start: 2.5rem;}
	.pf-fse {grid-area: 1 / 2; align-self: end; margin-block-start: 0 !important;}
	.pf-legal {grid-area: 2 / 2; margin-block-start: 2.5rem;}

	/* block: image plus content */
	.block-ipc .wrap > .wys {max-width: 24.375rem;}
	.block-ipc.ipc-ic .wrap {grid-template-columns: 50fr 39fr;}
	.block-ipc.ipc-ic .wrap > img {justify-self: start;}
	.block-ipc.ipc-ic .wrap > .wys {justify-self: end;}
	.block-ipc.ipc-ci .wrap {grid-template-columns: 39fr 50fr;}
	.block-ipc.ipc-ci .wrap > img {grid-area: 1 / 2; justify-self: end;}

	/* block: testimonial carousel */
	.slide-testimonial {align-items: center;}
	.slide-testimonial:has(img) {grid-template-columns: 5fr 6fr;}
	.slide-testimonial img {margin-block: 1.5625rem;}
	.slide-testimonial blockquote {font-size: 3.5rem; line-height: 1.036; letter-spacing: -.036em;}
	.slide-testimonial figcaption {margin-block-start: 2.5rem;}

	/* block: video embed */
	.block-ve {overflow: clip; margin: 1.25rem max(var(--hs), ((100% - var(--mw)) / 2)); border-radius: .625rem; --mw: 85rem;}

}

@media (width >= 64em) { /* 1024px */

	/* first block */
	.firstblock-home:has(.firstblock-announcement) {grid-template: 37.5rem / max(var(--hs), ((100% - var(--mw)) / 2)) 500px 1fr 350px max(var(--hs), ((100% - var(--mw)) / 2));}
	.firstblock-home:has(.firstblock-announcement) > .wrap {grid-column: 2; margin-inline: 0;}
	.firstblock-home > .firstblock-announcement {z-index: 1; grid-area: 1 / 4; align-self: end; margin: 0; margin-block-end: 2.5rem;}

	/* block: two column */
	.block-twocol > .wys:only-child {max-width: 48.125rem;}

}

@media (width >= 85em) { /* 1360px */

	/* block: testimonial */
	.block-testimonial {grid-template-columns: 23.125rem 1fr; --gap: 1.875rem;}
	.block-testimonial pg-videowrap video {width: 100%; height: 100%; max-width: none; object-fit: cover;}
	.block-testimonial blockquote {padding: 2.5rem;}
	.block-testimonial figcaption {padding: 2.5rem;}

	/* block: wide image */
	.block-wi {padding-block: var(--hs); --mw: 85rem; --hs: 1.25rem;}
	.block-wi img {border-radius: .625rem;}

}

@supports (interpolate-size: allow-keywords) {

	:root {interpolate-size: allow-keywords;}

	::details-content {height: 0; overflow: clip; transition: height .3s ease-out, content-visibility .3s ease allow-discrete;}
	[open]::details-content {height: auto;}

}

@media print {

	*, *::before, *::after {border-color: #000 !important; text-shadow: none !important; color: #000 !important; background-color: transparent !important;}
	blockquote, figure {break-inside: avoid;}

}

@media (prefers-reduced-motion: no-preference) {

	html:focus-within {scroll-behavior: smooth;}

	@view-transition {navigation: auto;}

	/* components */
	.block-slider pg-slider .slide-wrap {scroll-behavior: smooth;}

}

@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {scroll-behavior: auto !important; transition-duration: 1ms !important; animation-duration: 1ms !important; animation-iteration-count: 1 !important;}

}

@media (forced-colors: active) {

	/* @TODO */

}
