/* Website-wide visual language: the homepage hero carried into every surface. */

:root {
    --design-ink: #171a1d;
    --design-graphite: #252b30;
    --design-silver: #edf0f1;
    --design-silver-bright: #f7f8f8;
    --design-line: rgba(32, 35, 38, .14);
    --design-red-line: rgba(221, 4, 45, .72);
}

body {
    background:
        linear-gradient(90deg, rgba(32, 35, 38, .035) 1px, transparent 1px),
        var(--color-background);
    background-size: var(--grid-size) 100%;
}

.header {
    border-bottom-color: color-mix(in srgb, var(--color-border) 72%, transparent);
}

.header__container {
    min-height: 4.5rem;
}

.header-nav__link,
.header-nav__sublink {
    letter-spacing: .06em;
}

.header-nav__submenu {
    background: var(--design-graphite);
    border-color: var(--color-border-premium);
    box-shadow: 0 1.5rem 3rem rgba(6, 8, 9, .22);
}

.header-nav__sublink {
    color: var(--color-text-premium-muted);
}

.header-nav__sublink:hover,
.header-nav__sublink:focus-visible {
    background: rgba(255, 255, 255, .08);
    color: #ffffff;
}

.home-section,
.delivery,
.solution-guide,
.page-content,
.product-page__content {
    border-color: var(--design-line);
}

.home-section--usp,
.home-section--about,
.home-section--markets,
.home-section--main,
.home-section--cta,
.delivery,
.solution-guide {
    background-color: var(--design-silver);
    background-image:
        linear-gradient(118deg, rgba(255, 255, 255, .62), transparent 42%),
        linear-gradient(90deg, rgba(32, 35, 38, .035) 1px, transparent 1px);
    background-size: 100% 100%, var(--grid-size) 100%;
}

.home-section--capabilities,
.home-section--process {
    background-color: var(--design-graphite);
    background-image:
        linear-gradient(112deg, rgba(255, 255, 255, .07), transparent 30%),
        linear-gradient(90deg, rgba(242, 243, 243, .045) 1px, transparent 1px),
        linear-gradient(0deg, rgba(242, 243, 243, .035) 1px, transparent 1px);
    background-size: 100% 100%, var(--grid-size) var(--grid-size), var(--grid-size) var(--grid-size);
}

.home-section__content {
    border-color: var(--design-line);
}

.home-section--capabilities .home-section__content,
.home-section--process .home-section__content {
    background: rgba(10, 12, 14, .16);
    box-shadow: inset 0 1px rgba(255, 255, 255, .16), inset 0 -1px rgba(0, 0, 0, .3);
}

.section__eyebrow,
.delivery__proof-title,
.solution-guide__placeholder-index,
.solution-guide__card-index {
    letter-spacing: .18em;
}

.section__title {
    letter-spacing: -.015em;
}

.page-banner {
    background:
        linear-gradient(110deg, rgba(23, 26, 29, .98), rgba(37, 43, 48, .94) 56%, rgba(23, 26, 29, .98)),
        var(--design-ink);
}

/* Default/product hero: the same dark studio stage as the homepage banner. */
.product-page__hero {
    isolation: isolate;
    background:
        linear-gradient(90deg, rgba(10, 12, 14, .96), rgba(10, 12, 14, .72) 48%, rgba(10, 12, 14, .9)),
        linear-gradient(110deg, var(--design-ink), var(--design-graphite) 56%, #101214);
}

.product-page__hero::before {
    display: none;
}

.product-page__hero::after {
    display: none;
}

.product-page__title span {
    padding: .08em 0 .12em;
    background: none;
    box-shadow: none;
    color: #ffffff;
    text-shadow: 0 .15rem 1.2rem rgba(0, 0, 0, .35);
}

.product-page__title span::after {
    display: block;
    width: 3.5rem;
    height: 2px;
    margin-top: .25em;
    background: var(--color-primary);
    content: '';
}

.product-page__title span::before {
    display: none;
}

.product-page__hero-media::before,
.product-page__hero-media::after {
    display: none;
}

.product-page__switcher {
    background: var(--design-silver-bright);
    border-block-color: var(--design-line);
    border-radius: 0;
}

.product-page__switcher-container {
    min-height: 4.5rem;
}

.product-page__switcher-label {
    color: var(--color-text-muted);
}

.product-page__switcher a {
    color: var(--color-text-dimmed);
}

.product-page__switcher a:hover,
.product-page__switcher a:focus-visible,
.product-page__switcher a.is-active {
    color: var(--color-primary);
}

.page-content {
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .22), transparent 44%),
        linear-gradient(90deg, rgba(32, 35, 38, .055) 1px, transparent 1px),
        var(--design-silver);
    background-size: 100% 100%, var(--grid-size) 100%, 100% 100%;
}

.page-content__paper {
    background: var(--design-silver-bright);
    border-color: rgba(32, 35, 38, .18);
    box-shadow: 0 1.5rem 3rem rgba(32, 35, 38, .16), inset 0 1px rgba(255, 255, 255, .95);
}

.page-content__paper-header {
    color: var(--color-text-muted);
    border-bottom-color: var(--design-line);
}

.page-content__paper::after {
    background: var(--design-red-line);
}

.contact-card,
.duv-sample-request-form {
    background: var(--design-silver-bright);
    border-color: rgba(32, 35, 38, .18);
    box-shadow: 0 1.25rem 2.5rem rgba(32, 35, 38, .14), inset 0 1px rgba(255, 255, 255, .95);
}

.contact-card::after,
.duv-sample-request-form::after {
    background: radial-gradient(circle, rgba(221, 4, 45, .13), transparent 70%);
}

.product-page__content {
    border-block-end: 1px solid var(--design-line);
    background:
        linear-gradient(118deg, rgba(255, 255, 255, .38), transparent 44%),
        var(--design-silver);
}

.product-page__content::after {
    display: none;
}

.product-page__content::before {
    width: min(18rem, 34vw);
    height: 3px;
    background: var(--color-primary);
}

.product-page__content-body > [class*="frame-type-"] + [class*="frame-type-"] {
    border-top-color: var(--design-line);
}

.product-page__content-intro h2 {
    color: var(--design-ink);
    font-weight: var(--font-weight-medium);
}

.product-page__content-body .frame-type-header h2,
.product-page__content-body .frame-type-header h3,
.product-page__content-body .frame-type-header h4 {
    color: var(--design-ink);
}

.product-page__content-body .frame-type-header {
    border-block-end-color: var(--color-primary);
}

.product-page__content-body .ce-bodytext {
    color: #41484d;
}

.product-page__content-intro .section__eyebrow {
    font-size: var(--text-xs);
    letter-spacing: .12em;
    line-height: 1.4;
}

.product-page__content-intro h2 {
    max-width: 16ch;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0;
    line-height: 1.12;
}

.product-page__content-body .frame-type-header h2,
.product-page__content-body .frame-type-header h3,
.product-page__content-body .frame-type-header h4 {
    max-width: 20ch;
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.12;
}

.product-page__content-body .ce-bodytext {
    font-size: var(--text-base);
    line-height: 1.65;
}

.packaging-carousel {
    background: var(--design-silver);
    background-image: none;
}

.site-main--product .cta-banner {
    border-block-color: rgba(242, 243, 243, .2);
    background:
        linear-gradient(112deg, rgba(255, 255, 255, .055), transparent 36%),
        var(--design-graphite);
}

.site-main--product .cta-banner::before,
.site-main--product .cta-banner::after {
    display: none;
}

.site-main--product .cta-banner__title {
    max-width: 18ch;
    font-size: clamp(2rem, 4vw, 3.25rem);
    letter-spacing: 0;
}

.site-main--product .cta-banner__actions {
    border-inline-start-color: rgba(242, 243, 243, .2);
}

.site-main--product .cta-banner .button--ghost {
    border-color: rgba(242, 243, 243, .46);
}

.ce-table,
.ce-uploads li,
.frame-type-menu_pages a,
.frame-type-menu_subpages a,
.frame-type-menu_section a,
.frame-type-menu_categorized_content a,
.frame-type-menu_categorized_pages a,
.frame-type-menu_sitemap a,
.frame-type-menu_sitemap_pages a,
.frame-type-menu_recently_updated a,
.frame-type-menu_related_pages a {
    background: rgba(247, 248, 248, .84);
    border-color: var(--design-line);
}

.ce-table thead th {
    background: var(--design-graphite);
    color: var(--color-text-premium);
}

.ce-table tbody tr:nth-child(even) {
    background: rgba(221, 4, 45, .035);
}

.duv-sample-request-form .sample-request-form__input {
    background: rgba(255, 255, 255, .92);
    border-color: rgba(32, 35, 38, .28);
}

.footer {
    background:
        linear-gradient(112deg, rgba(255, 255, 255, .035), transparent 34%),
        var(--design-ink);
}

@media (max-width: 47.99rem) {
    .page-content__paper {
        width: min(calc(100% - 1rem), var(--container-7xl));
    }

    .home-section__content {
        padding-inline: 1rem;
    }
}

.product-page__hero-background,
.product-page__hero-overlay {
    position: absolute;
    inset: 0;
}

.product-page__hero-background {
    z-index: -2;
    inset-block: -10%;
    height: 120%;
    background: var(--design-ink);
    will-change: transform;
}

.product-page__hero-background-video,
.product-page__hero-background-image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: .52;
}

.product-page__hero-overlay {
    z-index: -1;
    background: linear-gradient(90deg, rgba(10, 12, 14, .94) 0%, rgba(10, 12, 14, .78) 42%, rgba(10, 12, 14, .2) 78%, rgba(10, 12, 14, .44) 100%);
}

/* Shared type scale for every page template and content element. */
body,
button,
input,
select,
textarea {
    font-family: var(--font-body);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero__title,
.product-page__title,
.cta-banner__title {
    font-family: var(--font-display);
    letter-spacing: 0;
    text-wrap: balance;
}

h1,
.page-content__container > h1,
.page-content__container > h2,
.frame-type-header h1,
.frame-type-header h2 {
    font-size: clamp(1.9rem, 4vw, 3.25rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.08;
}

.product-page__title {
    max-width: 14ch;
    font-size: clamp(2.5rem, 5vw, 4.25rem);
    line-height: 1.05;
}

h2,
.section__title {
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.12;
}

h3,
.frame-type-header h3 {
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.16;
}

h4,
h5,
h6,
.frame-type-header h4,
.frame-type-header h5,
.frame-type-header h6 {
    font-size: clamp(1.1rem, 1.7vw, 1.45rem);
    font-weight: var(--font-weight-semibold);
    line-height: 1.25;
}

p,
li,
td,
th,
label {
    line-height: 1.6;
}

.ce-bodytext,
.section__text,
.page-content__paper,
.product-page__content-body,
.packaging-carousel__intro,
.cta-banner__text {
    font-size: var(--text-base);
    line-height: 1.65;
}

.hero__text,
.product-page__subtitle,
.product-page__lead,
.section__lead {
    font-size: var(--text-lg);
    line-height: 1.55;
}

.section__eyebrow,
.hero__eyebrow,
.product-page__eyebrow,
.cta-banner__eyebrow,
.product-page__switcher-label {
    font-size: var(--text-xs);
    font-weight: var(--font-weight-semibold);
    line-height: 1.4;
    letter-spacing: .14em;
    text-transform: uppercase;
}