@font-face {
font-family: "DM Sans";
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("/wp-content/themes/canopy-theme/resources/fonts/DMSans-VariableFont_wght.woff2") format("woff2");
}@font-face {
font-family: "Noto Sans";
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url("/wp-content/themes/canopy-theme/resources/fonts/NotoSans-VariableFont_wght.woff2") format("woff2");
}:root {
--site-max-width: none;
--container-width: 81.25rem;
--content-width-reading: 50rem;
--header-container-width: var(--container-width);
--footer-container-width: var(--container-width);
--site-shell-shadow: none;
--viewport-min: 360;
--viewport-max: 1300;
--section-padding-x: clamp(1rem, 3.5vw, 2.875rem);
--section-padding-y: var(--space-3xl);
--content-width-s: 42rem;
--content-width-m: 46rem;
--content-width-l: 48rem;
--page-stack-space: var(--space-l);
--page-content-stack-space: var(--space-m);
--front-page-content-stack-space: var(--space-xl);
--header-height: 5.5rem;
--admin-bar-offset: 0px;
--font-family-body: "Noto Sans", system-ui, sans-serif;
--font-family-heading: "DM Sans", system-ui, sans-serif;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-heading: 400;
--color-green-900: #004c4c;
--color-green-800: #007046;
--color-green-600: #00873b;
--color-green-500: #009440;
--color-green-400: #00d865;
--color-green-100: #dfeee8;
--color-brown-700: #6e4e3f;
--color-brown-600: #896048;
--color-wood-500: #a66d3f;
--color-navy-700: #143852;
--color-neutral-0: #ffffff;
--color-neutral-50: #f5f8f8;
--color-neutral-100: #e8efef;
--color-neutral-200: #e2e2e2;
--color-neutral-300: #d3dddd;
--color-neutral-600: #4a4e57;
--color-neutral-900: #1d242d;
--color-primary-100: var(--color-green-100);
--color-primary-500: var(--color-green-800);
--color-primary-700: var(--color-green-900);
--color-neutral-500: var(--color-neutral-600);
--color-neutral-800: var(--color-green-900);
--color-text: var(--color-green-800);
--color-text-muted: var(--color-green-900);
--color-heading: var(--color-green-800);
--color-surface: var(--color-neutral-0);
--color-surface-alt: var(--color-neutral-50);
--color-surface-green: var(--color-green-600);
--color-surface-brown: var(--color-brown-600);
--color-border: var(--color-neutral-100);
--color-rule: var(--color-green-900);
--color-link: var(--color-green-800);
--color-link-hover: var(--color-green-900);
--color-on-dark: var(--color-neutral-0);
--color-selection-bg: var(--color-green-800);
--color-selection-bg-link: var(--color-green-900);
--color-selection-text: var(--color-neutral-0);
--site-bg-outer: var(--color-surface);
--site-bg-inner: var(--color-surface);
--color-surface-warm: var(--color-neutral-50);
--color-surface-accent-soft: var(--color-neutral-50);
--color-surface-accent-hover: var(--color-green-100);
--color-focus: var(--color-green-900);
--text-2xs-min: 13;
--text-2xs-max: 14;
--text-xs-min: 14;
--text-xs-max: 15;
--text-s-min: 15;
--text-s-max: 16;
--text-m-min: 16;
--text-m-max: 17;
--text-l-min: 17;
--text-l-max: 20;
--text-xl-min: 19;
--text-xl-max: 22;
--text-2xl-min: 22;
--text-2xl-max: 28;--heading-1-min: 36;
--heading-1-max: 64;
--heading-2-min: 28;
--heading-2-max: 44;
--heading-3-min: 24;
--heading-3-max: 32;
--heading-4-min: 21;
--heading-4-max: 26;
--heading-5-min: 18;
--heading-5-max: 21;
--heading-6-min: 16;
--heading-6-max: 18;
--line-height-body: 1.75;
--line-height-body-tight: 1.55;
--line-height-heading: 1.25;
--line-height-heading-tight: 1.15;
--fluid-viewport-range: calc(var(--viewport-max) - var(--viewport-min));
--fluid-viewport-factor: calc((100vw - (var(--viewport-min) * 1px)) / var(--fluid-viewport-range));--text-2xs-scale: calc((var(--text-2xs-max) - var(--text-2xs-min)) * var(--fluid-viewport-factor));
--text-xs-scale: calc((var(--text-xs-max) - var(--text-xs-min)) * var(--fluid-viewport-factor));
--text-s-scale: calc((var(--text-s-max) - var(--text-s-min)) * var(--fluid-viewport-factor));
--text-m-scale: calc((var(--text-m-max) - var(--text-m-min)) * var(--fluid-viewport-factor));
--text-l-scale: calc((var(--text-l-max) - var(--text-l-min)) * var(--fluid-viewport-factor));
--text-xl-scale: calc((var(--text-xl-max) - var(--text-xl-min)) * var(--fluid-viewport-factor));
--text-2xl-scale: calc((var(--text-2xl-max) - var(--text-2xl-min)) * var(--fluid-viewport-factor));--heading-1-scale: calc((var(--heading-1-max) - var(--heading-1-min)) * var(--fluid-viewport-factor));
--heading-2-scale: calc((var(--heading-2-max) - var(--heading-2-min)) * var(--fluid-viewport-factor));
--heading-3-scale: calc((var(--heading-3-max) - var(--heading-3-min)) * var(--fluid-viewport-factor));
--heading-4-scale: calc((var(--heading-4-max) - var(--heading-4-min)) * var(--fluid-viewport-factor));
--heading-5-scale: calc((var(--heading-5-max) - var(--heading-5-min)) * var(--fluid-viewport-factor));
--heading-6-scale: calc((var(--heading-6-max) - var(--heading-6-min)) * var(--fluid-viewport-factor));
--text-2xs: clamp(calc(var(--text-2xs-min) * 1px), calc((var(--text-2xs-min) * 1px) + var(--text-2xs-scale)), calc(var(--text-2xs-max) * 1px));
--text-xs: clamp(calc(var(--text-xs-min) * 1px), calc((var(--text-xs-min) * 1px) + var(--text-xs-scale)), calc(var(--text-xs-max) * 1px));
--text-s: clamp(calc(var(--text-s-min) * 1px), calc((var(--text-s-min) * 1px) + var(--text-s-scale)), calc(var(--text-s-max) * 1px));
--text-m: clamp(calc(var(--text-m-min) * 1px), calc((var(--text-m-min) * 1px) + var(--text-m-scale)), calc(var(--text-m-max) * 1px));
--text-l: clamp(calc(var(--text-l-min) * 1px), calc((var(--text-l-min) * 1px) + var(--text-l-scale)), calc(var(--text-l-max) * 1px));
--text-xl: clamp(calc(var(--text-xl-min) * 1px), calc((var(--text-xl-min) * 1px) + var(--text-xl-scale)), calc(var(--text-xl-max) * 1px));
--text-2xl: clamp(calc(var(--text-2xl-min) * 1px), calc((var(--text-2xl-min) * 1px) + var(--text-2xl-scale)), calc(var(--text-2xl-max) * 1px));--heading-1: clamp(calc(var(--heading-1-min) * 1px), calc((var(--heading-1-min) * 1px) + var(--heading-1-scale)), calc(var(--heading-1-max) * 1px));
--heading-2: clamp(calc(var(--heading-2-min) * 1px), calc((var(--heading-2-min) * 1px) + var(--heading-2-scale)), calc(var(--heading-2-max) * 1px));
--heading-3: clamp(calc(var(--heading-3-min) * 1px), calc((var(--heading-3-min) * 1px) + var(--heading-3-scale)), calc(var(--heading-3-max) * 1px));
--heading-4: clamp(calc(var(--heading-4-min) * 1px), calc((var(--heading-4-min) * 1px) + var(--heading-4-scale)), calc(var(--heading-4-max) * 1px));
--heading-5: clamp(calc(var(--heading-5-min) * 1px), calc((var(--heading-5-min) * 1px) + var(--heading-5-scale)), calc(var(--heading-5-max) * 1px));
--heading-6: clamp(calc(var(--heading-6-min) * 1px), calc((var(--heading-6-min) * 1px) + var(--heading-6-scale)), calc(var(--heading-6-max) * 1px));
--space-2xs-min: 4;
--space-2xs-max: 6;
--space-xs-min: 8;
--space-xs-max: 10;
--space-s-min: 12;
--space-s-max: 16;
--space-m-min: 16;
--space-m-max: 20;
--space-l-min: 24;
--space-l-max: 32;
--space-xl-min: 32;
--space-xl-max: 48;
--space-2xl-min: 48;
--space-2xl-max: 72;
--space-3xl-min: 56;
--space-3xl-max: 100;
--space-2xs-scale: calc((var(--space-2xs-max) - var(--space-2xs-min)) * var(--fluid-viewport-factor));
--space-xs-scale: calc((var(--space-xs-max) - var(--space-xs-min)) * var(--fluid-viewport-factor));
--space-s-scale: calc((var(--space-s-max) - var(--space-s-min)) * var(--fluid-viewport-factor));
--space-m-scale: calc((var(--space-m-max) - var(--space-m-min)) * var(--fluid-viewport-factor));
--space-l-scale: calc((var(--space-l-max) - var(--space-l-min)) * var(--fluid-viewport-factor));
--space-xl-scale: calc((var(--space-xl-max) - var(--space-xl-min)) * var(--fluid-viewport-factor));
--space-2xl-scale: calc((var(--space-2xl-max) - var(--space-2xl-min)) * var(--fluid-viewport-factor));
--space-3xl-scale: calc((var(--space-3xl-max) - var(--space-3xl-min)) * var(--fluid-viewport-factor));
--space-2xs: clamp(calc(var(--space-2xs-min) * 1px), calc((var(--space-2xs-min) * 1px) + var(--space-2xs-scale)), calc(var(--space-2xs-max) * 1px));
--space-xs: clamp(calc(var(--space-xs-min) * 1px), calc((var(--space-xs-min) * 1px) + var(--space-xs-scale)), calc(var(--space-xs-max) * 1px));
--space-s: clamp(calc(var(--space-s-min) * 1px), calc((var(--space-s-min) * 1px) + var(--space-s-scale)), calc(var(--space-s-max) * 1px));
--space-m: clamp(calc(var(--space-m-min) * 1px), calc((var(--space-m-min) * 1px) + var(--space-m-scale)), calc(var(--space-m-max) * 1px));
--space-l: clamp(calc(var(--space-l-min) * 1px), calc((var(--space-l-min) * 1px) + var(--space-l-scale)), calc(var(--space-l-max) * 1px));
--space-xl: clamp(calc(var(--space-xl-min) * 1px), calc((var(--space-xl-min) * 1px) + var(--space-xl-scale)), calc(var(--space-xl-max) * 1px));
--space-2xl: clamp(calc(var(--space-2xl-min) * 1px), calc((var(--space-2xl-min) * 1px) + var(--space-2xl-scale)), calc(var(--space-2xl-max) * 1px));
--space-3xl: clamp(calc(var(--space-3xl-min) * 1px), calc((var(--space-3xl-min) * 1px) + var(--space-3xl-scale)), calc(var(--space-3xl-max) * 1px));
--flow-space: var(--space-s);
--paragraph-space: var(--space-s);
--heading-space: var(--space-l);
--list-indent-space: var(--space-m);
--list-item-space: var(--space-2xs);
--figure-space: var(--space-l);
--blockquote-space: var(--space-l);
--content-gap: var(--space-l);
--grid-gap: var(--space-m);
--radius-s: 5px;
--radius-m: 6px;
--radius-l: 10px;
--radius-pill: 999px;
--border-width-thin: 1px;
--border-width-accent: 3px;
--shadow-soft: 0 12px 32px rgb(0 76 76 / 0.12);
--transition-standard: 250ms ease;
--translate-interactive-hover: -1px;
--overlay-green: linear-gradient(180deg, rgb(0 135 59 / 0.25) 0%, rgb(0 135 59 / 0.85) 100%);
--button-padding-y: 0.8rem;
--button-padding-x: 1.8rem;
--button-font-size: var(--text-s);
--button-font-weight: 600;
--button-radius: var(--radius-s);
--button-bg: var(--color-green-800);
--button-bg-hover: var(--color-green-900);
--button-text: var(--color-neutral-0);
--button-border-width: 1px;
--button-border: var(--button-border-width) solid var(--color-green-800);
--button-border-hover: var(--button-border-width) solid var(--color-green-900);
--button-outline-bg: transparent;
--button-outline-text: var(--color-green-800);
--button-outline-text-hover: var(--color-green-900);
--object-fit: cover;
--object-position: 50% 50%;
}*,
*::before,
*::after {
box-sizing: border-box;
}html {
scroll-behavior: smooth;
}body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
margin: 0;
}img {
display: block;
height: auto;
max-width: 100%;
}body {
background: var(--site-bg-outer);
color: var(--color-text);
font-family: var(--font-family-body);
font-size: var(--text-m);
line-height: var(--line-height-body);
}h1,
h2,
h3,
h4,
h5,
h6 {
color: var(--color-heading);
font-family: var(--font-family-heading);
font-weight: var(--font-weight-heading);
line-height: var(--line-height-heading-tight);
text-wrap: pretty;
}h1 {
font-size: var(--heading-1);
line-height: var(--line-height-heading-tight);
}h2 {
font-size: var(--heading-2);
line-height: var(--line-height-heading-tight);
}h3 {
font-size: var(--heading-3);
line-height: var(--line-height-heading);
}h4 {
font-size: var(--heading-4);
line-height: var(--line-height-heading);
}h5 {
font-size: var(--heading-5);
line-height: var(--line-height-heading);
}h6 {
font-size: var(--heading-6);
line-height: var(--line-height-heading);
}.text-2xl,
.text-xl {
line-height: var(--line-height-body-tight);
}a {
color: var(--color-link);
transition: color var(--transition-standard);
}a:hover,
a:focus-visible {
color: var(--color-link-hover);
}::selection {
background: var(--color-selection-bg);
color: var(--color-selection-text);
}a::selection {
background: var(--color-selection-bg-link);
}.h1 {
font-size: var(--heading-1);
}.h2 {
font-size: var(--heading-2);
}.h3 {
font-size: var(--heading-3);
}.h4 {
font-size: var(--heading-4);
}.h5 {
font-size: var(--heading-5);
}.h6 {
font-size: var(--heading-6);
}.text-2xs {
font-size: var(--text-2xs);
}.text-xs {
font-size: var(--text-xs);
}.text-s {
font-size: var(--text-s);
}.text-m {
font-size: var(--text-m);
}.text-l {
font-size: var(--text-l);
}.text-xl {
font-size: var(--text-xl);
}.text-2xl {
font-size: var(--text-2xl);
}.has-text-2xs-font-size {
font-size: var(--text-2xs) !important;
}.has-text-xs-font-size {
font-size: var(--text-xs) !important;
}.has-text-s-font-size {
font-size: var(--text-s) !important;
}.has-text-m-font-size {
font-size: var(--text-m) !important;
}.has-text-l-font-size {
font-size: var(--text-l) !important;
}.has-text-xl-font-size {
font-size: var(--text-xl) !important;
line-height: var(--line-height-body-tight);
}.has-text-2xl-font-size {
font-size: var(--text-2xl) !important;
line-height: var(--line-height-body-tight);
}.has-primary-500-color {
color: var(--color-primary-500) !important;
}.has-primary-700-color {
color: var(--color-primary-700) !important;
}.has-text-color {
color: var(--color-text) !important;
}.has-text-muted-color {
color: var(--color-text-muted) !important;
}.has-heading-color {
color: var(--color-heading) !important;
}.has-surface-color {
color: var(--color-surface) !important;
}.has-surface-alt-color {
color: var(--color-surface-alt) !important;
}.has-neutral-100-color {
color: var(--color-neutral-100) !important;
}.has-primary-soft-background-color {
background-color: var(--color-primary-100) !important;
}.has-primary-500-background-color {
background-color: var(--color-primary-500) !important;
}.has-primary-700-background-color {
background-color: var(--color-primary-700) !important;
}.has-surface-background-color {
background-color: var(--color-surface) !important;
}.has-surface-alt-background-color {
background-color: var(--color-surface-alt) !important;
}.has-neutral-100-background-color {
background-color: var(--color-neutral-100) !important;
}.flow > * + *,
.canopy-page__content > * + *,
.canopy-front-page__content > * + *,
.gutenberg-content > * + * {
margin-block-start: var(--flow-space);
}.flow > :where(h1, h2, h3, h4, h5, h6),
.canopy-page__content > :where(h1, h2, h3, h4, h5, h6),
.canopy-front-page__content > :where(h1, h2, h3, h4, h5, h6),
.gutenberg-content > :where(h1, h2, h3, h4, h5, h6) {
margin-block-start: 0;
}.flow > * + :where(h1, h2, h3, h4, h5, h6),
.canopy-page__content > * + :where(h1, h2, h3, h4, h5, h6),
.canopy-front-page__content > * + :where(h1, h2, h3, h4, h5, h6),
.gutenberg-content > * + :where(h1, h2, h3, h4, h5, h6) {
margin-block-start: var(--heading-space);
}.flow > * + p,
.canopy-page__content > * + p,
.canopy-front-page__content > * + p,
.gutenberg-content > * + p {
margin-block-start: var(--paragraph-space);
}.flow > :is(ul, ol),
.canopy-page__content > :is(ul, ol),
.canopy-front-page__content > :is(ul, ol),
.gutenberg-content > :is(ul, ol) {
padding-inline-start: var(--list-indent-space);
}.flow > :is(ul, ol) li + li,
.canopy-page__content > :is(ul, ol) li + li,
.canopy-front-page__content > :is(ul, ol) li + li,
.gutenberg-content > :is(ul, ol) li + li {
margin-block-start: var(--list-item-space);
}.flow > * + figure,
.canopy-page__content > * + figure,
.canopy-front-page__content > * + figure,
.gutenberg-content > * + figure {
margin-block-start: var(--figure-space);
}.flow > * + blockquote,
.canopy-page__content > * + blockquote,
.canopy-front-page__content > * + blockquote,
.gutenberg-content > * + blockquote {
margin-block-start: var(--blockquote-space);
}html {
scroll-behavior: smooth;
scroll-padding-block-start: calc(var(--header-height) + var(--admin-bar-offset) + var(--space-s));
}body {
min-height: 100vh;
background: var(--site-bg-outer);
overflow-x: hidden;
}.site-shell {
position: relative;
display: flex;
flex-direction: column;
min-height: 100dvh;
width: min(100%, var(--site-max-width));
margin-inline: auto;
background: var(--site-bg-inner);
box-shadow: var(--site-shell-shadow);
overflow: clip;
}.site-shell > main {
flex: 1 0 auto;
}.visually-hidden {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}:focus-visible {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}.clickable-parent {
position: relative;
cursor: pointer;
}.clickable-parent :is(h2, h3) a {
color: inherit;
text-decoration: none;
}.clickable-parent :is(h2, h3) a::before {
content: "";
position: absolute;
inset: 0;
z-index: 3;
border-radius: var(--clickable-parent-radius, var(--radius-m));
}.clickable-parent :is(h2, h3) a:focus-visible {
outline: 0;
}.clickable-parent :is(h2, h3) a:focus-visible::before {
outline: 2px solid var(--color-focus);
outline-offset: 3px;
}img,
video {
max-inline-size: 100%;
block-size: auto;
}.skip-link {
position: fixed;
inset-block-start: calc(var(--admin-bar-offset) + var(--space-xs));
inset-inline-start: var(--space-s);
z-index: 1000;
display: inline-flex;
align-items: center;
justify-content: center;
min-block-size: 2.75rem;
padding: 0.625rem 1rem;
border-radius: var(--radius-pill);
background: var(--color-heading);
color: var(--color-neutral-0);
text-decoration: none;
transform: translateY(calc(-100% - var(--space-s)));
transition: transform var(--transition-standard), background-color var(--transition-standard);
}.skip-link:focus,
.skip-link:focus-visible {
box-shadow: var(--shadow-soft);
transform: translateY(0);
background: var(--color-primary-700);
color: var(--color-neutral-0);
}body.admin-bar {
--admin-bar-offset: 32px;
}@media (max-width: 782px) {
body.admin-bar {
--admin-bar-offset: 46px;
}
}.scroll-top {
position: fixed;
inset-inline-end: 1rem;
inset-block-end: 2rem;
z-index: 120;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 3rem;
block-size: 3rem;
border-radius: 999px;
background: var(--color-green-800);
color: var(--color-neutral-0);
text-decoration: none;
box-shadow: var(--shadow-soft);
opacity: 0;
pointer-events: none;
transform: translateY(0.75rem);
transition: opacity var(--transition-standard), transform var(--transition-standard), background-color var(--transition-standard), color var(--transition-standard);
}.scroll-top__icon {
display: inline-flex;
inline-size: 1.1rem;
block-size: 1.1rem;
}.scroll-top__icon svg {
inline-size: 100%;
block-size: 100%;
}.scroll-top:hover,
.scroll-top:focus-visible {
background: var(--color-link-hover);
color: var(--color-neutral-0);
}.scroll-top.is-visible {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}.mobile-contact-bar {
display: none;
}@media (max-width: 767px) {
body:has(.mobile-contact-bar) {
--mobile-contact-bar-height: 3.25rem;padding-block-end: calc(var(--mobile-contact-bar-height) + env(safe-area-inset-bottom, 0px));
}.mobile-contact-bar {
position: fixed;
inset-inline: 0;
inset-block-end: 0;
z-index: 110;
display: grid;
grid-auto-columns: 1fr;
grid-auto-flow: column;
padding-block-end: env(safe-area-inset-bottom, 0px);
background: var(--color-green-800);
box-shadow: 0 -2px 12px rgb(0 0 0 / 0.15);
}.mobile-contact-bar__link {
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-block-size: var(--mobile-contact-bar-height);
border-block-end: 1px solid rgb(255 255 255 / 0.3);
color: var(--color-neutral-0);
font-size: var(--text-xs);
font-weight: var(--font-weight-semibold);
text-decoration: none;
transition: color var(--transition-standard);
}.mobile-contact-bar__link + .mobile-contact-bar__link {
border-inline-start: 1px solid rgb(255 255 255 / 0.15);
}.mobile-contact-bar__link:hover,
.mobile-contact-bar__link:focus-visible {
color: var(--color-green-100);
}.mobile-contact-bar__link:focus-visible {
outline-offset: -3px;
}.mobile-contact-bar__icon {
display: inline-flex;
inline-size: 1.15rem;
block-size: 1.15rem;
}.mobile-contact-bar__icon .hb-icon {
inline-size: 100%;
block-size: 100%;
}body:has(.mobile-contact-bar) .scroll-top {
inset-block-end: calc(var(--mobile-contact-bar-height) + env(safe-area-inset-bottom, 0px) + 1.25rem);
}
}@media (prefers-reduced-motion: reduce) {
html {
scroll-behavior: auto;
}.scroll-top {
transition: none;
}
}@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}::view-transition-old(root),
::view-transition-new(root) {
animation-duration: 0.5s;
animation-timing-function: ease-in-out;
}::view-transition-group(site-header),
::view-transition-old(site-header),
::view-transition-new(site-header) {
animation: none;
}
}.site-header {
view-transition-name: site-header;
}.topbar {
background: var(--color-surface-green);
color: var(--color-on-dark);
font-size: var(--text-2xs);
}.topbar__inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space-2xs) var(--space-l);
inline-size: min(100% - (var(--section-padding-x) * 2), var(--header-container-width));
margin-inline: auto;
padding-block: 0.4rem;
}.topbar__item {
display: inline-flex;
align-items: center;
gap: 0.5em;
color: inherit;
text-decoration: none;
}a.topbar__item {
transition: text-decoration-color 0.2s ease;
}a.topbar__item:hover,
a.topbar__item:focus-visible {
color: inherit;
text-decoration: underline;
text-underline-offset: 0.2em;
}.topbar .hb-icon {
inline-size: 0.85em;
block-size: 0.85em;
}.topbar__languages {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
}.topbar__languages li + li::before {
content: "|";
margin-inline: 0.5em;
opacity: 0.6;
}.topbar__language {
color: inherit;
font-weight: 600;
text-decoration: none;
opacity: 1;
}.topbar__language:hover,
.topbar__language:focus-visible,
.topbar__language.is-current {
color: inherit;
opacity: 1;
}.topbar__language.is-current {
text-decoration: underline;
text-underline-offset: 0.25em;
}.site-header {
position: sticky;
inset-block-start: var(--admin-bar-offset);
z-index: 100;
background: var(--color-surface);
box-shadow: 0 4px 10px rgb(0 0 0 / 0.05);
transition: transform var(--transition-standard);
}.site-header--unpinned:not(.site-header--top) {
transform: translateY(calc(-100% - 1rem));
}.site-header__inner {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-l);
inline-size: min(100% - (var(--section-padding-x) * 2), var(--header-container-width));
block-size: var(--header-height);
margin-inline: auto;
}.site-header__brand {
display: flex;
flex-shrink: 0;
}.site-header__logo {
display: block;
inline-size: clamp(10.5rem, 16vw, 14.5rem);
block-size: auto;
}.site-header__nav {
display: flex;
align-items: center;
gap: var(--space-xl);
}.main-nav {
display: flex;
align-items: center;
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}.main-nav__item {
position: relative;
display: flex;
align-items: center;
}.main-nav__link {
position: relative;
display: block;
padding-block: 0.4rem;
color: var(--color-green-800);
font-size: var(--text-m);
text-decoration: none;
}.main-nav__link::after {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 0;
block-size: 2px;
background: currentColor;
transform: scaleX(0);
transition: transform var(--transition-standard);
}.main-nav__item.is-current > .main-nav__link::after,
.main-nav__link:hover::after,
.main-nav__link:focus-visible::after {
transform: scaleX(1);
}.main-nav__link:hover,
.main-nav__link:focus-visible {
color: var(--color-green-900);
}.main-nav__toggle {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 1.5rem;
block-size: 1.5rem;
margin-inline-start: 0.15rem;
padding: 0;
border: 0;
background: none;
color: var(--color-green-800);
cursor: pointer;
}.main-nav__toggle .hb-icon {
inline-size: 0.7rem;
block-size: 0.7rem;
transition: transform var(--transition-standard);
}.main-nav__toggle[aria-expanded="true"] .hb-icon {
transform: rotate(180deg);
}.main-nav__submenu {
position: absolute;
inset-block-start: calc(100% + 1.4rem);
inset-inline-start: -1.25rem;
z-index: 10;
min-inline-size: 18rem;
margin: 0;
padding: 0;
list-style: none;
background: var(--color-surface);
border-block-start: 3px solid var(--color-green-500);
box-shadow: var(--shadow-soft);
opacity: 0;
visibility: hidden;
transform: translateY(0.5rem);
transition: opacity var(--transition-standard), transform var(--transition-standard), visibility var(--transition-standard);
}.main-nav__submenu::before {
content: "";
position: absolute;
inset-inline: 0;
inset-block-end: 100%;
block-size: 1.6rem;
}@media (hover: hover) and (min-width: 62.0625rem) {
.main-nav__item--parent:hover > .main-nav__submenu {
opacity: 1;
visibility: visible;
transform: none;
}
}.main-nav__item--parent:has(> .main-nav__toggle[aria-expanded="true"]) > .main-nav__submenu {
opacity: 1;
visibility: visible;
transform: none;
}.main-nav__submenu > li + li {
border-block-start: 1px solid var(--color-neutral-100);
}.main-nav__sublink {
display: block;
padding: 0.45rem 1.25rem;
color: var(--color-green-800);
font-size: var(--text-s);
line-height: 1.4;
text-decoration: none;
transition: background-color 0.2s ease, color 0.2s ease;
}.main-nav__sublink:hover,
.main-nav__sublink:focus-visible,
.main-nav__sublink[aria-current="page"] {
background: var(--color-surface-alt);
color: var(--color-green-900);
}@media (min-width: 62.0625rem) {
.main-nav__item--button {
margin-inline-start: calc(var(--space-xl) - var(--space-l));
}.main-nav__link.main-nav__link--button {
padding: 0.7rem 1.6rem;
border: var(--button-border);
border-radius: var(--button-radius);
background: var(--button-bg);
color: var(--button-text);
font-family: var(--font-family-heading);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
line-height: 1.2;
transition: background-color var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard);
}.main-nav__link--button:hover,
.main-nav__link--button:focus-visible {
border: var(--button-border-hover);
background: var(--button-bg-hover);
color: var(--button-text);
}.main-nav__link--button::after {
display: none;
}
}.site-header__languages {
display: none;
}.site-header__toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
inline-size: 2.75rem;
block-size: 2.75rem;
padding: 0.6rem;
border: 0;
border-radius: var(--radius-s);
background: var(--color-green-800);
cursor: pointer;
}.site-header__toggle-line {
display: block;
block-size: 2px;
background: var(--color-on-dark);
transition: transform var(--transition-standard), opacity var(--transition-standard);
}body.has-mobile-menu-open .site-header__toggle-line:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}body.has-mobile-menu-open .site-header__toggle-line:nth-child(2) {
opacity: 0;
}body.has-mobile-menu-open .site-header__toggle-line:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}.site-header__backdrop {
display: none;
}@media (max-width: 62rem) {
:root {
--header-height: 4.5rem;
}.topbar {
display: none;
}.site-header__toggle {
display: flex;
position: relative;
z-index: 3;
}.site-header__nav {
position: fixed;
inset-block: 0;
inset-inline-end: 0;
z-index: 2;
flex-direction: column;
align-items: stretch;
justify-content: center;
gap: var(--space-l);
inline-size: min(19rem, 76vw);
padding: calc(var(--header-height) + var(--admin-bar-offset) + var(--space-s)) var(--space-l) var(--space-l);
overflow-y: auto;
background: var(--color-surface);
box-shadow: var(--shadow-soft);
transform: translateX(100%);
visibility: hidden;
}body.has-mobile-menu-ready .site-header__nav {
transition: transform var(--transition-standard), visibility var(--transition-standard);
}body.has-mobile-menu-open .site-header__nav {
transform: none;
visibility: visible;
}body.has-mobile-menu-open .site-header__backdrop {
display: block;
position: fixed;
inset: 0;
z-index: 1;
border: 0;
background: rgb(0 76 76 / 0.35);
}body.has-mobile-menu-open {
overflow: hidden;
}.main-nav {
flex-direction: column;
align-items: stretch;
gap: 0;
}.main-nav__item {
flex-wrap: wrap;
justify-content: space-between;
border-block-end: 1px solid var(--color-border);
}.main-nav__link {
flex: 1;
padding-block: 0.8rem;
}.main-nav__link::after {
display: none;
}.main-nav__item.is-current > .main-nav__link {
font-weight: var(--font-weight-semibold);
}.main-nav__toggle {
inline-size: 2.75rem;
block-size: 2.75rem;
}.main-nav__submenu {
position: static;
display: none;
flex-basis: 100%;
min-inline-size: 0;
padding: 0 0 var(--space-xs);
border: 0;
box-shadow: none;
opacity: 1;
visibility: visible;
transform: none;
transition: none;
}.main-nav__submenu::before {
display: none;
}.main-nav__item--parent:has(> .main-nav__toggle[aria-expanded="true"]) > .main-nav__submenu {
display: block;
}.main-nav__sublink {
padding-inline: var(--space-s);
}.site-header__languages {
display: flex;
align-items: center;
justify-content: center;
margin: 0;
padding: var(--space-xs) 0 0;
list-style: none;
}.site-header__languages li + li::before {
content: "|";
margin-inline: 0.65em;
color: var(--color-neutral-600);
opacity: 0.55;
}.site-header__language {
color: var(--color-green-800);
font-weight: var(--font-weight-semibold);
text-decoration: none;
}.site-header__language.is-current {
text-decoration: underline;
text-underline-offset: 0.25em;
}
}.notice-strip {
border-block-end: 1px solid rgb(255 255 255 / 0.3);
background: var(--color-surface-green);
color: var(--color-on-dark);
font-size: var(--text-2xs);
font-weight: var(--font-weight-semibold);
text-align: center;
}.notice-strip p,
.notice-strip__link {
display: block;
padding: 0.45rem var(--section-padding-x);
}.notice-strip__link {
color: inherit;
text-decoration: none;
transition: background-color 0.2s ease;
}.notice-strip__link:hover,
.notice-strip__link:focus-visible {
color: inherit;
background: var(--color-green-800);
}.notice-strip .hb-icon {
inline-size: 1em;
block-size: 1em;
vertical-align: -0.15em;
}.notice-strip__ending {
white-space: nowrap;
}@media (prefers-reduced-motion: reduce) {
.site-header,
.site-header__nav,
.main-nav__submenu,
.main-nav__link::after {
transition: none;
}
}.canopy-shell-section,
.canopy-page,
.canopy-service-page {
padding-inline: var(--section-padding-x);
padding-block: var(--section-padding-y);
}.canopy-shell-container,
.canopy-page__inner,
.canopy-service-page__inner {
width: min(100%, var(--layout-container-width, var(--container-width)));
margin-inline: auto;
}.canopy-shell-reading {
width: min(100%, var(--layout-reading-width, var(--content-width-reading)));
margin-inline: 0 auto;
}.canopy-page__inner > * + * {
margin-top: var(--page-stack-space);
}.canopy-service-page__content > * + *,
.canopy-front-page__content > * + * {
margin-top: var(--front-page-content-stack-space);
}.canopy-page__content > * + * {
margin-top: var(--page-content-stack-space);
}.section {
padding-block: var(--section-padding-y);
padding-inline: var(--section-padding-x);
}.section--alt {
background: var(--color-surface-alt);
}.section--green {
background: var(--color-surface-green);
color: var(--color-on-dark);
}.section--tight {
padding-block: var(--space-2xl);
}.section--flush-top {
padding-block-start: 0;
}.section + .section:not(.section--alt, .section--green, .section--image),
.section--alt + .section--alt {
padding-block-start: 0;
}.container {
inline-size: min(100%, var(--container-width));
margin-inline: auto;
}.container--reading {
max-inline-size: var(--content-width-reading);
}:where(.section--green, .on-dark) :is(h1, h2, h3, h4, h5, h6) {
color: var(--color-on-dark);
}:where(.section--green, .on-dark) a:not(.button) {
color: var(--color-on-dark);
text-decoration: underline;
}.section-heading {
display: flex;
align-items: center;
gap: var(--space-m);
margin-block-end: var(--space-xl);
color: var(--color-heading);
font-size: var(--heading-3);
text-align: center;
}.section-heading::before,
.section-heading::after {
content: "";
flex: 1;
block-size: 1px;
background: var(--color-rule);
}.section-heading--plain::before,
.section-heading--plain::after {
display: none;
}.section-heading--plain {
display: block;
}.display-heading {
font-size: var(--heading-2);
line-height: var(--line-height-heading-tight);
}.lead {
font-size: var(--text-xl);
line-height: var(--line-height-body-tight);
}.eyebrow {
color: var(--color-brown-700);
font-family: var(--font-family-heading);
font-size: var(--text-s);
letter-spacing: 0.06em;
}.kicker {
font-family: var(--font-family-heading);
font-size: var(--text-2xs);
font-weight: var(--font-weight-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
}.split {
display: grid;
gap: var(--space-xl) var(--space-2xl);
align-items: center;
}@media (min-width: 56rem) {
.split {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.split--top {
align-items: start;
}.split--wide-start {
grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
}
}.columns-3 {
display: grid;
gap: var(--space-l) var(--space-xl);
}@media (min-width: 48rem) {
.columns-3 {
grid-template-columns: repeat(3, minmax(0, 1fr));
}.columns-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-l) var(--space-2xl);
}
}.center {
text-align: center;
}.actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-s);
margin-block-start: var(--space-l);
}.actions--center {
justify-content: center;
}.media-rounded {
display: block;
inline-size: 100%;
border-radius: var(--radius-m);
object-fit: cover;
}.wave {
display: block;
inline-size: 100%;
block-size: clamp(2rem, 4.4vw, 4rem);
margin-block-start: -1px;
color: var(--color-surface-green);
}.site-footer {
background: var(--color-surface-green);
color: var(--color-on-dark);
font-size: var(--text-s);
}.site-footer a {
color: inherit;
text-decoration: none;
transition: opacity 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}.site-footer a:hover,
.site-footer a:focus-visible {
color: inherit;
opacity: 0.8;
}.site-footer__inner {
inline-size: min(100% - (var(--section-padding-x) * 2), var(--footer-container-width));
margin-inline: auto;
}.site-footer__main {
padding-block: var(--space-2xl) var(--space-xl);
}.site-footer__main .site-footer__inner {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--space-xl);
}.site-footer__address p + p {
margin-block-start: var(--space-s);
}.site-footer__hours {
display: none;
}.site-footer__menu,
.site-footer__social {
margin: 0;
padding: 0;
list-style: none;
}.site-footer__menu li + li {
margin-block-start: var(--space-xs);
}.site-footer__menu a {
display: inline-flex;
align-items: center;
gap: 0.4em;
}.site-footer__menu .hb-icon {
inline-size: 0.5em;
block-size: 0.8em;
}.site-footer__heading {
margin-block-end: var(--space-s);
color: inherit;
font-size: var(--text-l);
}.site-footer__social {
display: flex;
gap: var(--space-s);
}.site-footer__social a {
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 2.75rem;
block-size: 2.75rem;
border: 1px solid rgb(255 255 255 / 0.5);
border-radius: var(--radius-s);
}.site-footer__social a:hover,
.site-footer__social a:focus-visible {
border-color: var(--color-on-dark);
background: rgb(255 255 255 / 0.15);
opacity: 1;
}.site-footer__social .hb-icon {
inline-size: 1.15rem;
block-size: 1.15rem;
}.site-footer__bar {
padding-block: var(--space-m);
border-block-start: 1px solid rgb(255 255 255 / 0.25);
font-size: var(--text-xs);
}.site-footer__bar .site-footer__inner {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: var(--space-xs) var(--space-l);
}.site-footer__legal {
display: flex;
flex-wrap: wrap;
gap: var(--space-2xs) var(--space-m);
}@media (max-width: 62rem) {
.site-footer__hours {
display: inline;
}
}.button,
.fluentform .ff-btn-submit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.6em;
padding: var(--button-padding-y) var(--button-padding-x);
border: var(--button-border);
border-radius: var(--button-radius);
background: var(--button-bg);
color: var(--button-text);
font-family: var(--font-family-heading);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
line-height: 1.2;
text-align: center;
text-decoration: none;
cursor: pointer;
transition: background-color var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard);
}.button:hover,
.button:focus-visible,
.fluentform .ff-btn-submit:hover,
.fluentform .ff-btn-submit:focus-visible {
border: var(--button-border-hover);
background: var(--button-bg-hover);
color: var(--button-text);
}.button .hb-icon {
inline-size: 1em;
block-size: 1em;
flex-shrink: 0;
}.button--outline {
background: transparent;
color: var(--color-green-800);
}.button--outline:hover,
.button--outline:focus-visible {
background: var(--color-green-800);
color: var(--color-neutral-0);
}.button--light {
border-color: var(--color-neutral-0);
background: transparent;
color: var(--color-neutral-0);
}.button--light:hover,
.button--light:focus-visible {
border-color: var(--color-neutral-0);
background: var(--color-neutral-0);
color: var(--color-green-800);
}.button--white {
border-color: var(--color-neutral-0);
background: var(--color-neutral-0);
color: var(--color-green-800);
}.button--white:hover,
.button--white:focus-visible {
border-color: var(--color-green-100);
background: var(--color-green-100);
color: var(--color-green-900);
}.button--small {
--button-padding-y: 0.55rem;
--button-padding-x: 1rem;
--button-font-size: var(--text-2xs);
}.button--large {
--button-padding-y: 1rem;
--button-padding-x: 2.4rem;
--button-font-size: var(--text-m);
}@media (prefers-reduced-motion: reduce) {
.button {
transition: none;
}
}.fluentform .ff-el-group {
margin-block-end: var(--space-s);
}.fluentform .ff-el-input--label:not(.ff-el-is-required, .ff-hide-label),
.fluentform .ff-el-input--label {
position: absolute !important;
inline-size: 1px;
block-size: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}.fluentform .ff-el-form-control {
inline-size: 100%;
min-block-size: 2.75rem;
padding: 0.65rem 0.85rem;
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-s);
background: var(--color-surface);
color: var(--color-green-900);
font-family: var(--font-family-body);
font-size: var(--text-s);
}.fluentform .ff-el-form-control::placeholder {
color: #5f6b6b;
opacity: 1;
}.fluentform textarea.ff-el-form-control {
min-block-size: 6rem;
}.fluentform .ff-el-form-control:focus,
.fluentform .ff-el-form-control:focus-visible {
border-color: var(--color-green-900);
outline: 2px solid var(--color-green-900);
outline-offset: 1px;
box-shadow: none;
}.fluentform .ff-t-container {
display: grid;
gap: 0 var(--space-s);
}@media (min-width: 30rem) {
.fluentform .ff-t-container {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}.fluentform .ff-t-cell {
inline-size: auto !important;
padding: 0 !important;
}.fluentform .ff_gdpr_field,
.fluentform .ff-el-tc {
font-size: var(--text-2xs);
line-height: 1.5;
}.fluentform .ff_t_c {
display: flex;
gap: 0.6rem;
align-items: flex-start;
}.fluentform input[type="checkbox"] {
flex-shrink: 0;
inline-size: 1.1rem;
block-size: 1.1rem;
margin-block-start: 0.15rem;
accent-color: var(--color-green-800);
}.fluentform .ff_upload_btn.ff-btn {
display: block;
inline-size: 100%;
padding: var(--space-l) var(--space-s);
border: 2px dashed currentColor;
border-radius: var(--radius-s);
background: transparent;
color: inherit;
font-family: var(--font-family-body);
font-size: var(--text-xs);
text-align: center;
cursor: pointer;
}.fluentform .ff-el-help-message {
margin-block-start: 0.25rem;
font-size: var(--text-2xs);
font-style: normal;
}.fluentform .ff_submit_btn_wrapper {
margin-block-start: var(--space-m);
}.fluentform .ff-btn-submit {
inline-size: 100%;
--button-padding-y: 0.95rem;
--button-font-size: var(--text-m);
}.on-dark .fluentform .ff-btn-submit,
.section--green .fluentform .ff-btn-submit {
border-color: var(--color-neutral-0);
background: transparent;
color: var(--color-neutral-0);
}.on-dark .fluentform .ff-btn-submit:hover,
.on-dark .fluentform .ff-btn-submit:focus-visible,
.section--green .fluentform .ff-btn-submit:hover,
.section--green .fluentform .ff-btn-submit:focus-visible {
background: var(--color-neutral-0);
color: var(--color-green-800);
}.fluentform .error,
.fluentform .text-danger {
margin-block-start: 0.25rem;
color: #fff3c4;
font-size: var(--text-2xs);
font-weight: var(--font-weight-semibold);
}:not(.on-dark, .section--green) > .fluentform .error {
color: #a4001d;
}.ff-message-success {
padding: var(--space-m);
border: 0;
border-radius: var(--radius-s);
background: var(--color-neutral-0);
color: var(--color-green-800);
box-shadow: none;
}.ff-el-is-error .ff-el-form-control {
border-color: #a4001d;
}.page-hero {
position: relative;
display: flex;
align-items: flex-end;
min-block-size: clamp(16rem, 32vw, 27rem);
padding: var(--space-2xl) var(--section-padding-x);
overflow: hidden;
background: var(--color-surface-green);
color: var(--color-on-dark);
}.page-hero__image {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center top;
}.page-hero::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgb(0 135 59 / 0) 0%, rgb(0 135 59 / 0) 40%, rgb(0 135 59 / 0.6) 72%, rgb(0 135 59) 100%);
}@media (max-width: 40rem) {
.page-hero::after {
background: linear-gradient(180deg, rgb(0 135 59 / 0) 0%, rgb(0 135 59 / 0.35) 20%, rgb(0 135 59 / 0.75) 50%, rgb(0 135 59 / 0.92) 75%, rgb(0 135 59) 100%);
}
}.page-hero--plain::after {
display: none;
}.page-hero__inner {
position: relative;
z-index: 1;
inline-size: min(100%, var(--container-width));
}.page-hero__title {
color: inherit;
font-size: var(--heading-1);
text-shadow: 0 1px 12px rgb(0 0 0 / 0.25);
}.page-hero__text {
max-inline-size: 36rem;
margin-block-start: var(--space-s);
font-size: var(--text-l);
line-height: var(--line-height-body-tight);
}.certifications__list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-l) var(--space-m);
margin: 0;
padding: 0;
list-style: none;
}@media (min-width: 40rem) {
.certifications__list {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}@media (min-width: 62rem) {
.certifications__list {
grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
grid-auto-flow: column;
}
}.certifications__item {
display: flex;
flex-direction: column;
gap: var(--space-s);
text-align: center;
}.certifications__tile {
display: grid;
place-items: center;
block-size: 8.5rem;
padding: var(--space-m);
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-m);
background: var(--color-surface);
}a.certifications__tile {
transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}a.certifications__tile:hover,
a.certifications__tile:focus-visible {
border-color: var(--color-green-800);
box-shadow: var(--shadow-soft);
transform: translateY(-2px);
}.certifications__logo {
inline-size: auto;
max-inline-size: 100%;
max-block-size: 5.25rem;
object-fit: contain;
}.certifications__caption {
margin: 0;
padding-inline: var(--space-2xs);
color: var(--color-green-900);
font-size: var(--text-2xs);
line-height: 1.45;
text-wrap: pretty;
}.certifications__valid {
display: block;
margin-block-start: var(--space-2xs);
font-weight: var(--font-weight-semibold);
}.certifications__details {
display: none;
}@media (max-width: 39.9375rem) {
.certifications__list {
align-items: start;
}.certifications__item {
gap: var(--space-xs);
}.certifications__caption--desktop {
display: none;
}.certifications__details {
display: block;
}.certifications__details summary {
display: inline-flex;
align-items: center;
min-block-size: 2.25rem;
padding: 0.35rem 0.75rem;
border: 1px solid var(--color-green-800);
border-radius: var(--radius-pill);
color: var(--color-green-800);
font-size: var(--text-2xs);
font-weight: var(--font-weight-semibold);
cursor: pointer;
}.certifications__details summary::marker,
.certifications__details summary::-webkit-details-marker {
display: none;
}.certifications__details:not([open]) .certifications__caption {
display: none;
}.certifications__details[open] .certifications__caption {
margin-block-start: var(--space-xs);
}
}@media (prefers-reduced-motion: reduce) {
a.certifications__tile {
transition: none;
}
}.accordion {
border-block-start: 1px solid currentColor;
}.accordion__item {
border-block-end: 1px solid currentColor;
}.on-dark .accordion,
.section--green .accordion,
.on-dark .accordion__item,
.section--green .accordion__item {
border-color: rgb(255 255 255 / 0.5);
}.accordion__summary {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
padding-block: var(--space-s);
font-family: var(--font-family-heading);
padding-inline: var(--space-xs);
font-size: var(--text-l);
list-style: none;
cursor: pointer;
transition: background-color 0.2s ease;
}.accordion__summary:hover {
background: var(--color-surface-alt);
}.on-dark .accordion__summary:hover,
.section--green .accordion__summary:hover {
background: rgb(255 255 255 / 0.1);
}.accordion__summary:hover .accordion__icon {
transform: scale(1.15);
}.accordion__item[open] .accordion__summary:hover .accordion__icon {
transform: rotate(45deg) scale(1.15);
}.accordion__summary::-webkit-details-marker {
display: none;
}.accordion__icon {
display: inline-flex;
flex-shrink: 0;
inline-size: 1rem;
block-size: 1rem;
transition: transform var(--transition-standard);
}.accordion__icon .hb-icon {
inline-size: 100%;
block-size: 100%;
}.accordion__item[open] .accordion__icon {
transform: rotate(45deg);
}.accordion__body {
padding-block-end: var(--space-m);
padding-inline: var(--space-xs);
}.accordion__body ul {
padding-inline-start: 1.25rem;
list-style: disc;
}@media (prefers-reduced-motion: no-preference) {
.accordion__item::details-content {
block-size: 0;
overflow: clip;
transition: block-size 300ms ease, content-visibility 300ms allow-discrete;
}.accordion__item[open]::details-content {
block-size: auto;
}:root {
interpolate-size: allow-keywords;
}
}.customer-groups__title {
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
}.customer-groups__list {
margin-block-start: var(--space-xs);
font-size: var(--text-2xs);
}.stock-lists__card {
display: grid;
overflow: hidden;
border-radius: var(--radius-m);
background: var(--color-surface-green);
}@media (min-width: 56rem) {
.stock-lists__card {
grid-template-columns: 2fr 3fr;
}
}.stock-lists__media {
position: relative;
display: grid;
place-items: center;
overflow: hidden;
padding: clamp(var(--space-m), 2.5vw, var(--space-xl));
}.stock-lists__media::after {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.35);
}.stock-lists__backdrop {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
filter: blur(18px);
transform: scale(1.15);
}.stock-lists__image {
position: relative;
z-index: 1;
display: block;
inline-size: 100%;
block-size: auto;
border-radius: var(--radius-m);
box-shadow: 0 16px 40px rgb(0 0 0 / 0.35);
}@media (max-width: 55.99rem) {
.stock-lists__media {
padding: 0;
}.stock-lists__media::after,
.stock-lists__backdrop {
display: none;
}.stock-lists__image {
border-radius: 0;
box-shadow: none;
}
}.stock-lists__body {
padding: var(--space-2xl) clamp(var(--space-l), 5vw, var(--space-3xl));
color: var(--color-on-dark);
}.stock-lists__title {
font-size: var(--heading-3);
}.stock-lists__subtitle {
margin-block-start: var(--space-2xs);
font-size: var(--text-s);
}.stock-lists__list {
margin: var(--space-l) 0 0;
padding: 0;
border-block-start: 1px solid rgb(255 255 255 / 0.3);
list-style: none;
}.stock-lists__list li {
border-block-end: 1px solid rgb(255 255 255 / 0.3);
}.stock-lists__body .stock-file {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
gap: var(--space-s);
align-items: center;
padding: var(--space-s) var(--space-xs);
color: var(--color-on-dark);
text-decoration: none;
transition: background-color 0.2s ease;
}.stock-lists__body .stock-file:hover,
.stock-lists__body .stock-file:focus-visible {
background: rgb(255 255 255 / 0.12);
color: var(--color-on-dark);
}.stock-file__icon .hb-icon {
inline-size: 1.5rem;
block-size: 1.5rem;
}.stock-file__text {
display: grid;
gap: 0.1rem;
}.stock-file__name {
font-family: var(--font-family-heading);
font-size: var(--text-m);
font-weight: var(--font-weight-semibold);
line-height: 1.35;
}.stock-file__meta {
font-size: var(--text-2xs);
}.stock-file__action {
display: grid;
place-items: center;
inline-size: 2.5rem;
block-size: 2.5rem;
border: 1px solid rgb(255 255 255 / 0.6);
border-radius: 50%;
transition: background-color 0.2s ease, color 0.2s ease;
}.stock-file__action .hb-icon {
inline-size: 0.95rem;
block-size: 0.95rem;
transform: rotate(180deg);
}.stock-file:hover .stock-file__action,
.stock-file:focus-visible .stock-file__action {
background: var(--color-neutral-0);
color: var(--color-green-800);
}.card-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
gap: var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}@media (min-width: 62rem) {
.card-grid {
grid-template-columns: repeat(3, minmax(0, 1fr));
}.card-grid--4 {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}.card {
display: flex;
flex-direction: column;
block-size: 100%;
padding: 0.65rem;
border: 1px solid var(--color-neutral-300);
border-radius: var(--radius-m);
background: var(--color-surface);
transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}.card.clickable-parent:hover,
.card.clickable-parent:focus-within {
border-color: var(--color-green-800);
box-shadow: var(--shadow-soft);
transform: translateY(-3px);
}.card__media {
overflow: hidden;
border-radius: var(--radius-m);
}.card__media img {
transition: transform 0.4s ease;
will-change: transform;
}.card.clickable-parent:hover .card__media img {
transform: scale(1.03);
}.card.clickable-parent:hover .button {
border: var(--button-border-hover);
background: var(--button-bg-hover);
}.card__media img {
display: block;
inline-size: 100%;
border-radius: var(--radius-m);
object-fit: cover;
}.card__body {
display: flex;
flex: 1;
flex-direction: column;
gap: var(--space-xs);
padding: var(--space-s) 0.2rem 0.3rem;
}.card__title {
font-size: var(--heading-4);
line-height: var(--line-height-heading);
}.card__title a {
color: inherit;
text-decoration: none;
}.card--job .card__title {
font-size: var(--heading-6);
}.card__text {
font-size: var(--text-xs);
line-height: var(--line-height-body-tight);
}.card__action {
margin-block-start: auto;
padding-block-start: var(--space-xs);
}.overview-intro__title {
font-size: var(--heading-3);
}.overview-intro {
font-size: var(--text-xs);
}.overview-grid-text {
max-inline-size: 52rem;
margin: 0 auto var(--space-xl);
}@media (prefers-reduced-motion: reduce) {
.card,
.card__media img {
transition: none;
}.card.clickable-parent:hover,
.card.clickable-parent:focus-within {
transform: none;
}.card.clickable-parent:hover .card__media img {
transform: none;
}
}.video-embed {
position: relative;
isolation: isolate;
display: grid;
overflow: hidden;
aspect-ratio: 16 / 9;
border-radius: var(--radius-m);
background: var(--color-green-900);
color: var(--color-on-dark);
}.video-embed--portrait {
aspect-ratio: 9 / 16;
max-inline-size: 22rem;
}.video-embed > * {
grid-area: 1 / 1;
}.video-embed__poster {
z-index: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
opacity: 0.55;
pointer-events: none;
}.video-embed__button {
z-index: 1;
display: grid;
place-content: center;
justify-items: center;
gap: var(--space-s);
padding: var(--space-l);
border: 0;
background: transparent;
color: inherit;
font: inherit;
cursor: pointer;
}.video-embed__play {
display: grid;
place-items: center;
inline-size: 4.5rem;
block-size: 4.5rem;
border: 3px solid currentColor;
border-radius: 50%;
background: rgb(0 0 0 / 0.35);
}.video-embed__play .hb-icon {
inline-size: 1.6rem;
block-size: 1.6rem;
margin-inline-start: 0.3rem;
}.video-embed__button:hover .video-embed__play,
.video-embed__button:focus-visible .video-embed__play {
background: var(--color-green-800);
}.video-embed__label {
font-family: var(--font-family-heading);
font-size: var(--text-m);
}.video-embed__note {
z-index: 2;
align-self: end;
padding: var(--space-s);
font-size: var(--text-2xs);
line-height: 1.4;
text-align: center;
}.video-embed__note a {
color: inherit;
}.video-embed__frame {
inline-size: 100%;
block-size: 100%;
border: 0;
}.film {
position: relative;
display: grid;
overflow: hidden;
border-radius: var(--radius-m);
background: var(--color-green-900);
}.film > * {
grid-area: 1 / 1;
}.film__video {
display: block;
inline-size: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}.film__play {
display: grid;
place-items: center;
padding: 0;
border: 0;
background: rgb(0 0 0 / 0.1);
color: var(--color-green-800);
cursor: pointer;
transition: background-color 0.25s ease;
}.film__play[hidden] {
display: none;
}.film__play-icon,
.video-embed__play {
transition: transform 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}.film__play-icon {
display: grid;
place-items: center;
inline-size: clamp(4rem, 9vw, 6rem);
block-size: clamp(4rem, 9vw, 6rem);
border-radius: 50%;
background: var(--color-surface);
box-shadow: 0 6px 24px rgb(0 0 0 / 0.25);
}.film__play-icon .hb-icon {
inline-size: 38%;
block-size: 38%;
margin-inline-start: 8%;
}.film__play:hover,
.film__play:focus-visible {
background: rgb(0 0 0 / 0.25);
}.film__play:hover .film__play-icon,
.film__play:focus-visible .film__play-icon {
background: var(--color-green-800);
color: var(--color-on-dark);
transform: scale(0.9);
}.video-embed__button:hover .video-embed__play,
.video-embed__button:focus-visible .video-embed__play {
transform: scale(0.9);
}@media (prefers-reduced-motion: reduce) {
.film__play-icon,
.video-embed__play {
transition: none;
}
}.job__heading {
font-size: var(--heading-5);
letter-spacing: 0.02em;
text-transform: uppercase;
}.job__list {
padding-inline-start: 1.25rem;
list-style: disc;
}.job__video-heading {
margin-block-end: var(--space-s);
font-size: var(--text-l);
}.job__contact-title {
font-size: var(--text-l);
}.job__address,
.job__contact {
font-family: var(--font-family-heading);
font-size: var(--text-m);
font-style: normal;
line-height: 1.5;
}.job__subheading {
margin-block-start: var(--space-s);
font-size: var(--text-m);
font-weight: var(--font-weight-semibold);
}.home-hero {
position: relative;
display: grid;
place-items: center;
min-block-size: clamp(22rem, 42vw, 37.5rem);
padding: var(--space-3xl) var(--section-padding-x);
overflow: hidden;
background: var(--color-green-900);
color: var(--color-on-dark);
text-align: center;
}.home-hero__image {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}.home-hero::after {
content: "";
position: absolute;
inset: 0;
background: rgb(0 0 0 / 0.15);
}.home-hero__inner {
position: relative;
z-index: 1;
text-shadow: 0 1px 16px rgb(0 0 0 / 0.35);
display: grid;
justify-items: center;
gap: var(--space-s);
}.home-hero__title {
max-inline-size: 52rem;
color: inherit;
font-size: var(--heading-1);
line-height: var(--line-height-heading-tight);
}.home-hero__text {
max-inline-size: 42rem;
font-family: var(--font-family-heading);
font-size: var(--heading-3);
line-height: var(--line-height-heading);
}.home-hero__scroll {
display: inline-flex;
margin-block-start: var(--space-xl);
color: inherit;
}.home-hero__scroll .hb-icon {
inline-size: 2.2rem;
block-size: 2.2rem;
}.block-film {
gap: var(--space-xl) var(--space-2xl);
}@media (min-width: 56rem) {
.block-film {
grid-template-columns: 3fr 2fr;
}
}.block-film__text .display-heading {
font-size: var(--heading-3);
}.teaser-tiles {
display: grid;
gap: var(--space-l);
margin-block: var(--space-3xl) 0;
padding: 0;
list-style: none;
}@media (min-width: 48rem) {
.teaser-tiles {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}.teaser-tile {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-s);
padding: var(--space-2xl) var(--space-l);
border-radius: var(--radius-m);
color: var(--color-on-dark);
text-align: center;
}.teaser-tile--braun {
background: var(--color-surface-brown);
}.teaser-tile--gruen {
background: var(--color-surface-green);
}.teaser-tile.clickable-parent {
transition: background-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}.teaser-tile.clickable-parent:hover,
.teaser-tile.clickable-parent:focus-within {
box-shadow: 0 14px 32px rgb(0 0 0 / 0.18);
transform: translateY(-3px);
}.teaser-tile--braun.clickable-parent:hover,
.teaser-tile--braun.clickable-parent:focus-within {
background: var(--color-brown-700);
}.teaser-tile--gruen.clickable-parent:hover,
.teaser-tile--gruen.clickable-parent:focus-within {
background: var(--color-green-800);
}.teaser-tile.clickable-parent:hover .button--light {
background: var(--color-neutral-0);
color: var(--color-green-800);
}.teaser-tile--braun.clickable-parent:hover .button--light {
color: var(--color-brown-700);
}@media (prefers-reduced-motion: reduce) {
.teaser-tile.clickable-parent {
transition: none;
}.teaser-tile.clickable-parent:hover,
.teaser-tile.clickable-parent:focus-within {
transform: none;
}
}.teaser-tile__icon .hb-icon {
inline-size: 3.2rem;
block-size: 3.2rem;
}.teaser-tile__title {
color: inherit;
font-size: var(--heading-4);
}.teaser-tile__text {
font-size: var(--text-xs);
}.teaser-tile .button {
margin-block-start: auto;
}.band {
position: relative;
display: flex;
align-items: center;
min-block-size: clamp(22rem, 36vw, 32rem);
padding: var(--space-3xl) var(--section-padding-x);
overflow: hidden;
color: var(--color-on-dark);
}.band__image {
position: absolute;
inset: 0;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}.band::after {
content: "";
position: absolute;
inset: 0;
}.band--fixed {
clip-path: inset(0);
}.band--fixed.is-near .band__image {
position: fixed;
inset: 0;
block-size: 100vh;
}.band--wood::after {
background: linear-gradient(90deg, rgb(40 20 5 / 0.65) 0%, rgb(40 20 5 / 0.25) 70%);
}.band--green::after {
background: linear-gradient(90deg, rgb(0 135 59 / 0.95) 0%, rgb(0 135 59 / 0.75) 45%, rgb(0 135 59 / 0.25) 100%);
}.band--statement {
text-align: center;
}.band--statement::after {
background: linear-gradient(180deg, rgb(0 135 59 / 0.55), rgb(0 110 50 / 0.85));
}@media (max-width: 40rem) {
.band--statement::after {
background: linear-gradient(180deg, rgb(0 54 36 / 0.72), rgb(0 50 34 / 0.88));
}
}.band__inner {
position: relative;
z-index: 1;
inline-size: min(100%, var(--container-width));
}.band--wood .band__inner > *,
.band--green .band__inner > * {
max-inline-size: 42rem;
}.band__title {
color: inherit;
font-size: var(--heading-2);
line-height: var(--line-height-heading-tight);
}.band--statement .band__title {
max-inline-size: 56rem;
margin-inline: auto;
font-size: var(--heading-3);
line-height: var(--line-height-heading);
}.band__text {
font-size: var(--text-m);
}.block-split__media img {
display: block;
inline-size: 100%;
}@media (min-width: 56rem) {
.block-split--image-right .block-split__media {
order: 2;
}
}.checklist {
display: grid;
gap: var(--space-xs);
margin-inline: 0;
padding: 0;
list-style: none;
}.flow > * + .checklist {
margin-block-start: var(--space-m);
}.checklist li {
display: flex;
gap: var(--space-s);
align-items: baseline;
}.checklist .hb-icon {
flex-shrink: 0;
inline-size: 1.05rem;
block-size: 1.05rem;
color: var(--color-green-800);
transform: translateY(0.15em);
}.facts .section--green {
padding-block-end: var(--space-2xl);
}.facts__heading {
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
}.facts__columns {
font-size: var(--text-s);
}.facts__heading + .facts__columns {
margin-block-start: var(--space-xl);
}.facts .kicker {
margin-block-end: var(--space-xs);
}.quote {
display: grid;
overflow: hidden;
border-radius: var(--radius-m);
background: var(--color-surface-alt);
}@media (min-width: 56rem) {
.quote {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.quote--image-right .quote__media {
order: 2;
}
}.quote__media img {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
}.quote__body {
align-self: center;
padding: var(--space-2xl) clamp(var(--space-l), 4vw, var(--space-3xl));
}.quote__text {
font-family: var(--font-family-heading);
font-size: var(--heading-4);
line-height: var(--line-height-heading);
}.quote__more {
font-size: var(--text-s);
}.quote__more br {
display: none;
}.tiles {
overflow: hidden;
border-radius: var(--radius-m);
}.flow + .tiles {
margin-block-start: var(--space-2xl);
}.tiles__row {
display: grid;
}@media (min-width: 56rem) {
.tiles__row {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.tiles__row--reverse .tiles__media {
order: 2;
}
}.tiles__media img {
display: block;
inline-size: 100%;
block-size: 100%;
min-block-size: 18rem;
object-fit: cover;
}.tiles__text {
display: flex;
flex-direction: column;
justify-content: center;
align-self: stretch;
padding: var(--space-2xl) clamp(var(--space-l), 4vw, var(--space-3xl));
background: var(--color-surface-alt);
font-size: var(--text-m);
}.tiles__title {
font-size: var(--heading-3);
}.boxes {
display: grid;
gap: var(--space-3xl) var(--space-xl);
margin-block-start: var(--space-3xl);
padding: 0;
list-style: none;
}@media (min-width: 48rem) {
.boxes {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
}.boxes__item {
display: grid;
align-content: start;
justify-items: center;
gap: var(--space-s);
padding: 0 var(--space-l) var(--space-2xl);
background: var(--color-surface-alt);
text-align: center;
}.boxes__icon {
display: grid;
place-items: center;
inline-size: 6.5rem;
block-size: 6.5rem;
margin-block-start: -2rem;
border: 1px solid var(--color-neutral-300);
border-radius: 50%;
background: var(--color-surface);
box-shadow: 0 4px 14px rgb(0 76 76 / 0.08);
color: var(--color-green-500);
}.boxes__icon .hb-icon {
inline-size: 3.2rem;
block-size: 3.2rem;
}.boxes__title {
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
}.boxes__text {
font-size: var(--text-xs);
}.about-top__image {
max-block-size: 34rem;
}.about-top__title {
margin-block-start: var(--space-2xl);
font-size: var(--heading-2);
}.about-top__subtitle {
display: block;
margin-block-start: var(--space-2xs);
font-size: var(--heading-4);
}.about-top__columns {
margin-block-start: var(--space-xl);
}.cycle {
max-inline-size: 56rem;
}.pellets {
container-type: inline-size;
max-inline-size: 62rem;
padding: var(--space-l);
border: 1px solid var(--color-neutral-200);
background: var(--color-surface);
}.pellets .display-heading {
font-size: var(--heading-3);
}.gallery {
--gallery-columns: 2;
--gallery-gap: var(--space-xs);
display: grid;
grid-template-columns: repeat(var(--gallery-columns), minmax(0, 1fr));
grid-auto-rows: calc((100cqi - (var(--gallery-columns) - 1) * var(--gallery-gap)) / var(--gallery-columns));
grid-auto-flow: dense;
gap: var(--gallery-gap);
margin: var(--space-m) 0 0;
padding: 0;
list-style: none;
}@media (min-width: 40rem) {
.gallery {
--gallery-columns: 3;
}
}.gallery__item--portrait {
grid-row: span 2;
}.gallery__item--landscape {
grid-column: span 2;
}.gallery__link {
display: block;
block-size: 100%;
overflow: hidden;
cursor: zoom-in;
}.gallery__image {
display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
transition: transform 0.4s ease, opacity 0.25s ease;
will-change: transform;
}.gallery__link:hover .gallery__image,
.gallery__link:focus-visible .gallery__image {
opacity: 0.9;
transform: scale(1.04);
}@media (prefers-reduced-motion: reduce) {
.gallery__image {
transition: none;
}
}.technik__lead {
font-family: var(--font-family-heading);
font-size: var(--heading-4);
line-height: var(--line-height-heading);
}.technik__power {
margin-block-start: var(--space-3xl);
}.technik__power-text {
font-size: var(--text-s);
}.chart {
display: grid;
justify-items: center;
gap: var(--space-s);
}.chart__title {
font-family: var(--font-family-heading);
font-size: var(--heading-4);
font-weight: var(--font-weight-bold);
}.chart__legend {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs) var(--space-m);
margin: 0;
padding: 0;
list-style: none;
font-size: var(--text-2xs);
}.chart__key {
display: inline-flex;
align-items: center;
gap: 0.4rem;
}.chart__key::before {
content: "";
inline-size: 0.9rem;
block-size: 0.9rem;
border-radius: 2px;
background: currentColor;
}.chart__donut {
inline-size: min(100%, 15rem);
transform: rotate(0deg);
}.chart__segment--1 {
color: #00bcd4;
stroke: #00bcd4;
}.chart__segment--2 {
color: var(--color-green-500);
stroke: var(--color-green-500);
}.chart__key.chart__segment--1,
.chart__key.chart__segment--2 {
color: var(--color-green-900);
}.chart__key.chart__segment--1::before {
background: #00bcd4;
}.chart__key.chart__segment--2::before {
background: var(--color-green-500);
}.section-heading--action::before,
.section-heading--action::after {
align-self: center;
}.section-heading--action {
margin-block: var(--space-xl) 0;
}.content-page__top {
padding-block-end: var(--space-2xl);
}.content-page__layout {
display: grid;
gap: var(--space-2xl);
}@media (min-width: 62rem) {
.content-page__layout {
grid-template-columns: minmax(0, 2fr) minmax(18rem, 1fr);
gap: var(--space-3xl);
align-items: start;
}
}.content-page__title {
font-size: var(--heading-2);
}.content-page__main h2 {
font-size: var(--heading-4);
}.content-page__main,
.content-page__wide {
font-size: var(--text-s);
}.content-page__intro-image {
margin-block-start: var(--space-l);
}.content-section {
margin-block-start: var(--space-xl);
padding-block-start: var(--space-xl);
border-block-start: 1px solid rgb(255 255 255 / 0.3);
}.content-page__main ul {
padding-inline-start: 1.25rem;
list-style: disc;
}.content-page__aside {
display: grid;
gap: var(--space-xl);
}@media (min-width: 62rem) {
.content-page__aside {
position: sticky;
inset-block-start: calc(var(--admin-bar-offset) + var(--space-m));
}
}.quote-form__title {
margin-block-end: var(--space-m);
font-size: var(--heading-4);
}.content-page__aside .quote-form {
padding: var(--space-l);
border-radius: var(--radius-m);
background: var(--color-green-800);
}.quote-form__privacy {
margin-block-start: var(--space-s);
font-size: var(--text-2xs);
}.content-page__products {
display: grid;
gap: var(--space-xl);
padding: var(--space-l);
border: 1px solid rgb(255 255 255 / 0.4);
border-radius: var(--radius-m);
}.product-teasers {
display: grid;
gap: var(--space-l);
margin: 0;
padding: 0;
list-style: none;
}.product-teaser {
display: grid;
gap: var(--space-2xs);
justify-items: center;
max-inline-size: 16rem;
margin-inline: auto;
color: inherit;
text-align: center;
text-decoration: none;
}.content-page .product-teaser {
color: var(--color-on-dark);
text-decoration: none;
}.product-teaser__image {
inline-size: 100%;
border-radius: var(--radius-m);
object-fit: cover;
transition: opacity 0.25s ease, transform 0.25s ease;
}.product-teaser__title {
margin-block-start: var(--space-xs);
font-family: var(--font-family-heading);
font-size: var(--text-xl);
}.product-teaser__text {
font-size: var(--text-2xs);
}.product-teaser:hover .product-teaser__image,
.product-teaser:focus-visible .product-teaser__image {
opacity: 0.85;
transform: translateY(-3px);
}@media (prefers-reduced-motion: reduce) {
.product-teaser__image {
transition: none;
}.product-teaser:hover .product-teaser__image,
.product-teaser:focus-visible .product-teaser__image {
transform: none;
}
}.content-page__more {
text-align: center;
}.content-page__wide {
display: grid;
margin-block-start: var(--space-3xl);
border-block-end: 1px solid rgb(255 255 255 / 0.3);
}.wide-section {
display: grid;
gap: var(--space-m) var(--space-2xl);
padding-block: var(--space-2xl);
border-block-start: 1px solid rgb(255 255 255 / 0.3);
}.wide-section__title {
font-size: var(--heading-4);
}.wide-section--media {
gap: var(--space-xl) var(--space-2xl);
align-items: center;
}@media (min-width: 56rem) {
.wide-section--text {
grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
align-items: start;
}.wide-section--media {
grid-template-columns: repeat(2, minmax(0, 1fr));
}.wide-section--image-links .wide-section__media {
order: -1;
}
}.location-list {
margin-block-start: var(--space-3xl);
text-align: center;
}.location-list h2 {
margin-block-end: var(--space-m);
font-size: var(--heading-4);
}.location-list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--space-xs) var(--space-s);
margin: 0;
padding: 0;
list-style: none;
}.location-list a {
display: inline-block;
padding: 0.5rem 1rem;
border: 1px solid rgb(255 255 255 / 0.6);
border-radius: var(--radius-s);
text-decoration: none;
transition: background-color var(--transition-standard), color var(--transition-standard), border-color var(--transition-standard);
}.location-list a:hover,
.location-list a:focus-visible {
background: var(--color-neutral-0);
color: var(--color-green-800);
}@media (max-width: 40rem) {
.location-list {
text-align: start;
}.location-list ul {
display: block;
border-block-start: 1px solid rgb(255 255 255 / 0.4);
}.location-list li {
border-block-end: 1px solid rgb(255 255 255 / 0.4);
}.location-list a {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-m);
inline-size: 100%;
padding: 0.8rem 0;
border: 0;
border-radius: 0;
}.location-list a::after {
content: "→";
flex: 0 0 auto;
font-size: 1.15em;
transition: transform var(--transition-standard);
}.location-list a:hover,
.location-list a:focus-visible {
background: transparent;
color: inherit;
}.location-list a:hover::after,
.location-list a:focus-visible::after {
transform: translateX(0.25rem);
}
}.content-page__faq {
margin-block-start: var(--space-3xl);
}.content-page__faq > h2 {
margin-block-end: var(--space-l);
font-size: var(--heading-3);
}.content-page .customer-groups {
margin-block-start: var(--space-3xl);
}.contact__layout {
display: grid;
gap: var(--space-2xl);
}@media (min-width: 56rem) {
.contact__layout {
grid-template-columns: 3fr 2fr;
gap: var(--space-3xl);
}
}.contact__text {
margin-block-start: var(--space-xl);
font-size: var(--text-s);
}.contact__address {
font-family: var(--font-family-heading);
font-size: var(--text-l);
font-style: normal;
line-height: 1.45;
}.contact-qr {
margin-block: var(--space-l) var(--space-s);
}.contact-qr__code {
inline-size: min(100%, 13rem);
padding: 0.5rem;
border-radius: var(--radius-s);
background: var(--color-neutral-0);
color: #000;
}.contact-qr__code svg {
display: block;
inline-size: 100%;
block-size: auto;
}.contact-qr figcaption {
margin-block-start: var(--space-xs);
font-family: var(--font-family-heading);
font-size: var(--text-l);
}.contact__people {
margin-block-start: var(--space-3xl);
}.contact__people-title {
margin-block-end: var(--space-m);
font-size: var(--text-xl);
font-weight: var(--font-weight-semibold);
}.people {
max-inline-size: 38rem;
margin: 0;
padding: 0;
list-style: none;
}.people__item {
display: grid;
gap: var(--space-2xs) var(--space-l);
padding-block: var(--space-s);
border-block-end: 1px solid rgb(255 255 255 / 0.3);
font-size: var(--text-xs);
}@media (min-width: 36rem) {
.people__item {
grid-template-columns: 1fr 1fr;
}
}.people__name {
font-size: var(--text-m);
}.canopy-page--legal {
padding-block: var(--space-3xl);
}.canopy-page--legal .canopy-page__article {
display: grid;
gap: var(--space-l);
}.canopy-page__article--legal {
--layout-reading-width: var(--content-width-reading);
}.canopy-page--legal .canopy-page__content {
--flow-space: var(--space-m);
--paragraph-space: var(--space-s);
--heading-space: var(--space-l);
}.canopy-page--legal h1 {
font-size: clamp(2rem, 1.7rem + 1vw, 2.6rem);
line-height: 1.12;
}.canopy-page--legal h2 {
font-size: clamp(1.35rem, 1.15rem + 0.55vw, 1.75rem);
line-height: 1.2;
}.canopy-page--legal h3 {
font-size: clamp(1.1rem, 1rem + 0.35vw, 1.35rem);
line-height: 1.3;
}.canopy-page--legal .canopy-page__content > * + h2 {
margin-block-start: var(--space-xl);
}.canopy-page--legal .canopy-page__content > h1 + h2 {
margin-block-start: var(--space-2xl);
}.canopy-page--legal .canopy-page__content p,
.canopy-page--legal .canopy-page__content li {
font-size: var(--text-s);
}.canopy-page--legal .legal-page__last-updated {
margin-block-start: var(--space-2xl);
font-style: italic;
}.canopy-page__legal-note {
padding: var(--space-s) var(--space-m);
border-inline-start: 4px solid var(--color-surface-green);
background: var(--color-surface-alt);
font-size: var(--text-s);
}.canopy-page--search {
min-height: calc(100svh - var(--header-height));
padding-block-start: calc(var(--header-height) + var(--space-2xl));
}.canopy-page--search .canopy-page__article {
max-width: var(--content-width-reading);
}.canopy-page--search h1 {
margin: 0 0 var(--space-xs);
}.canopy-page--search .canopy-page__article > p {
margin: 0;
color: var(--color-text-muted);
font-size: var(--text-l);
font-weight: var(--font-weight-semibold);
}.canopy-page--search .canopy-page__content {
display: grid;
gap: var(--space-m);
margin-top: var(--space-xl);
}.canopy-page--search .canopy-page__content > article {
padding: var(--space-l);
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
}.canopy-page--search .canopy-page__content h2 {
margin: 0;
font-size: var(--heading-4);
line-height: var(--line-height-heading);
}.canopy-page--search .canopy-page__content h2 a {
color: var(--color-link);
text-decoration: none;
}.canopy-page--search .canopy-page__content h2 a:hover,
.canopy-page--search .canopy-page__content h2 a:focus-visible {
color: var(--color-link-hover);
}.canopy-page--search .canopy-page__content article p,
.canopy-page--search .canopy-page__content > p {
color: var(--color-text-muted);
}.canopy-page--search .canopy-page__content article p {
margin-top: var(--space-s);
}.canopy-page--search .canopy-page__content > p {
margin: 0;
}.canopy-page--search .canopy-page__content > p + p {
margin-top: calc(var(--space-xs) * -1);
}.canopy-page--not-found {
min-height: calc(100svh - var(--header-height));
display: grid;
align-items: center;
}.canopy-page--not-found .canopy-page__article {
max-width: var(--content-width-s);
}.not-found-page__code {
margin-bottom: var(--space-s);
color: var(--color-primary-500);
font-size: var(--text-xs);
font-weight: var(--font-weight-bold);
letter-spacing: 0.08em;
text-transform: uppercase;
}.canopy-page--not-found h1 {
margin: 0;
}.not-found-page__lead {
max-width: 42rem;
margin-top: var(--space-m);
color: var(--color-text-muted);
font-size: var(--text-l);
}.not-found-page__path {
margin-top: var(--space-s);
overflow-wrap: anywhere;
color: var(--color-text-muted);
font-size: var(--text-xs);
}.not-found-page__path span {
color: var(--color-text);
font-weight: var(--font-weight-semibold);
}.canopy-page--not-found .button {
margin-top: var(--space-l);
}@media (max-width: 40rem) {
.canopy-page--not-found {
align-items: start;
}
}