/* ==========================================================================
   Anomatic.com — design system stylesheet
   Tokens and component styles per the design handoff (direction 2a).
   No drop shadows anywhere in the site design.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Fonts (self-hosted). Heavitas + Open Sans are preloaded in the layout;
   Summer Loving appears only mid-page and loads lazily.
   -------------------------------------------------------------------------- */
@font-face {
    font-family: "Heavitas";
    src: url("../fonts/heavitas.ttf") format("truetype");
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans VF";
    src: url("../fonts/open-sans-vf.ttf") format("truetype-variations");
    font-weight: 300 800;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "Open Sans VF";
    src: url("../fonts/open-sans-italic-vf.ttf") format("truetype-variations");
    font-weight: 300 800;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: "Summer Loving";
    src: url("../fonts/summer-loving.otf") format("opentype");
    font-weight: 400;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   Design tokens
   -------------------------------------------------------------------------- */
:root {
    /* Color */
    --navy: #0C1B59;
    --navy-deep: #04102F;
    --body: #333333;
    --grey-mid: #5A6070;
    --grey-light: #8A8F9C;
    --grey-pale: #B4B8C2;
    --border: #E6E8EC;
    --border-input: #C9CDD6;
    --border-pill: #D8DBE2;
    --surface-grey: #F4F5F7;
    --surface-faint: #FAFBFC;
    --teal: #1BACE0;
    --teal-text-on: #04213A;
    --green: #348859;
    --mint: #65B881;
    --mint-pale: #DFF0E4;
    --eco-surface: #F1F5F0;
    --eco-surface-row: #F4FBF6;
    --eco-border: #E1E7DE;
    --white: #FFFFFF;

    /* Type */
    --font-display: "Heavitas", Arial, sans-serif;
    --font-body: "Open Sans VF", "Open Sans", Arial, sans-serif;
    --font-script: "Summer Loving", cursive;

    /* Layout */
    --content-max: 1100px;
    --gutter: max(40px, calc((100% - var(--content-max)) / 2));
    /* For elements inside grid columns, where % would resolve against the
       column instead of the viewport. */
    --gutter-vw: max(40px, calc((100vw - var(--content-max)) / 2));
    --radius: 6px;
    --radius-btn: 4px;
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.7;
    color: var(--body);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: inherit;
    text-decoration: none;
}

p,
h1,
h2,
h3,
ul {
    margin: 0;
}

ul {
    padding: 0;
    list-style: none;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

.u-nowrap {
    white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Shared type patterns
   -------------------------------------------------------------------------- */
.eyebrow {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--teal);
}

.eyebrow--mint {
    color: var(--mint);
}

.eyebrow--green {
    color: var(--green);
}

.eyebrow--teal {
    color: var(--teal);
}

.eco-tagline {
    margin-top: 10px;
    font-weight: 600;
    color: var(--green);
}

.eco-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    color: var(--green);
}

.eco-badge__icon {
    margin-bottom: 6px;
}

.eco-badge__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.22em;
    text-transform: uppercase;
}

/* Sized to match where Summer Loving already reads well on this site
   (.cross-sell__script and .green-hero__script both run 34-46px). Weight is
   reset to normal: Summer Loving is a single-weight font, and it otherwise
   inherits font-weight: 700 from .eco-badge__label, which fake-bolds the
   connected cursive strokes into an unreadable blob. */
.eco-badge__script {
    font-family: var(--font-script);
    font-size: 36px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    color: var(--green);
    /* Summer Loving's internal metrics sit high relative to Open Sans; nudge it
       down to line up with "-family"'s baseline. */
    vertical-align: -3px;
}

.text-link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
}

.text-link:hover {
    color: var(--teal);
}

.source-line {
    font-size: 12px;
    line-height: 1.6;
    color: var(--grey-light);
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
    display: inline-block;
    border-radius: var(--radius-btn);
    font-family: var(--font-display);
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    line-height: 1;
    padding: 12px 22px;
    transition: background-color 160ms ease-out, border-color 160ms ease-out, color 160ms ease-out;
}

.btn--lg {
    font-size: 13px;
    padding: 16px 30px;
}

.btn--navy {
    background: var(--navy);
    color: var(--white);
}

.btn--navy:hover {
    background: #0A1748;
}

.btn--teal {
    background: var(--teal);
    color: var(--teal-text-on);
}

.btn--teal:hover {
    background: #189CCB;
}

.btn--ghost {
    border: 1px solid rgba(255, 255, 255, 0.5);
    color: var(--white);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
}

.btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
}

/* --------------------------------------------------------------------------
   Utility bar
   -------------------------------------------------------------------------- */
.util-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 10px var(--gutter);
    background: var(--navy);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: rgba(255, 255, 255, 0.72);
}

.util-bar__links {
    display: flex;
    gap: 24px;
}

.util-bar__links a:hover {
    color: var(--white);
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    padding: 22px var(--gutter);
    background: var(--white);
    border-bottom: 1px solid var(--border);
}

.site-header__logo img {
    height: 74px;
    width: auto;
}

.site-header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-link {
    font-size: 14px;
    font-weight: 600;
    color: var(--body);
    padding-bottom: 3px;
    border-bottom: 2px solid transparent;
    transition: color 160ms ease-out, border-color 160ms ease-out;
    white-space: nowrap;
}

/* The enlarged logo leaves less room for the nav row before the 900px menu breakpoint. */
@media (max-width: 1420px) {
    .site-header__nav {
        gap: 20px;
    }
}

.nav-link:hover {
    color: var(--navy);
    border-bottom-color: var(--teal);
}

.nav-link--active {
    color: var(--navy);
    border-bottom-color: var(--teal);
}

/* Sustainability goes green when active (p3 spec). */
.nav-link--eco.nav-link--active,
.nav-link--eco:hover {
    color: var(--green);
    border-bottom-color: var(--mint);
}

.btn--nav {
    flex-shrink: 0;
}

.site-header__menu-toggle {
    display: none;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 8px 14px;
    background: none;
    border: 1px solid var(--border-input);
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    cursor: pointer;
}

.site-header__menu-icon {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--navy);
    position: relative;
}

.site-header__menu-icon::before,
.site-header__menu-icon::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: var(--navy);
}

.site-header__menu-icon::before {
    top: -6px;
}

.site-header__menu-icon::after {
    top: 6px;
}

/* --------------------------------------------------------------------------
   Section shells
   -------------------------------------------------------------------------- */
.section {
    padding: 76px var(--gutter);
}

.section--grey {
    background: var(--surface-grey);
    border-top: 1px solid var(--border);
}

.section--eco {
    background: var(--eco-surface);
    border-top: 1px solid var(--eco-border);
}

.section--news {
    padding-block: 72px;
}

.section--center {
    text-align: center;
}

/* section__support carries a max-width; center the block itself, not just its text. */
.section--center .section__support {
    margin-left: auto;
    margin-right: auto;
}

.section--center .section__heading--stack {
    margin-left: auto;
    margin-right: auto;
    align-items: center;
}

.section__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 40px;
    margin-bottom: 34px;
}

.section__header--center {
    align-items: center;
    margin-bottom: 30px;
}

.section__heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 620px;
}

.section__title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--navy);
}

.section__title--md {
    font-size: 28px;
}

.section__tagline {
    font-family: var(--font-display);
    font-size: 20px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--teal);
}

.section__support {
    font-size: 15px;
    line-height: 1.7;
    color: var(--grey-mid);
    max-width: 400px;
}

.section__support--sm {
    font-size: 14px;
    max-width: 380px;
}

.card-grid {
    display: grid;
    gap: 24px;
}

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

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

.card-grid--tight {
    gap: 20px;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero {
    position: relative;
    min-height: 540px;
    background: var(--navy);
    display: flex;
    align-items: center;
}

.hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.5;
}

.hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0C1B59 8%, rgba(12, 27, 89, 0.82) 46%, rgba(12, 27, 89, 0.25) 100%);
}

.hero__content {
    position: relative;
    padding: 82px 40px 82px var(--gutter);
    max-width: calc(790px + var(--gutter));
    display: flex;
    flex-direction: column;
    gap: 26px;
    align-items: flex-start;
}

.hero__title {
    font-family: var(--font-display);
    font-size: 58px;
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: var(--white);
}

.hero__lede {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.86);
    max-width: 570px;
}

.hero__actions {
    display: flex;
    gap: 14px;
    align-items: center;
    padding-top: 8px;
    flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Proof bar
   -------------------------------------------------------------------------- */
.proof-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--surface-grey);
    border-bottom: 1px solid var(--border);
    padding-inline: calc(var(--gutter) - 26px);
}

.proof-bar__cell {
    padding: 30px 34px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.proof-bar__cell + .proof-bar__cell {
    border-left: 1px solid var(--border);
}

.stat__value {
    font-family: var(--font-display);
    font-size: 32px;
    line-height: 1;
    color: var(--navy);
}

.stat__value--eco {
    color: var(--green);
}

.stat__label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--grey-mid);
    /* Content-authored line breaks in stats.json are honoured; the rest of the
       label still wraps normally. */
    white-space: pre-line;
}

.proof-bar__note {
    grid-column: 1 / -1;
    /* 26px matches the cell padding so the note lines up with the figures. */
    padding: 0 26px 18px;
}

/* --------------------------------------------------------------------------
   Technology cards
   -------------------------------------------------------------------------- */
.tech-card {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    background: var(--white);
}

.tech-card__image {
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform 300ms ease;
}

.tech-card:hover .tech-card__image {
    transform: scale(1.03);
}

/* Product-shot renditions arrive pre-trimmed and padded to the frame, so
   contain keeps the whole group visible on its own white ground. */
.tech-card__image--product {
    object-fit: contain;
    background: var(--white);
}

.tech-card__body {
    padding: 26px 26px 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tech-card__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.tech-card__summary {
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey-mid);
}

.tech-card__link {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    padding-top: 4px;
}

.tech-card__link span {
    display: inline-block;
    transition: transform 300ms ease;
}

.tech-card:hover .tech-card__link span {
    transform: translateX(4px);
}

/* --------------------------------------------------------------------------
   Brand leader marquee ("A global leader for today's leading brands")
   -------------------------------------------------------------------------- */
.brand-leader {
    text-align: center;
}

.brand-leader__title {
    margin-bottom: 44px;
}

/* Edge-faded viewport; the track inside scrolls continuously. */
.brand-marquee {
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.brand-marquee__track {
    display: flex;
    width: max-content;
    /* Duration tracks logo count so scroll speed stays constant (25 logos). */
    animation: brand-marquee-scroll 180s linear infinite;
}

.brand-marquee:hover .brand-marquee__track {
    animation-play-state: paused;
}

.brand-marquee__list {
    display: flex;
    align-items: center;
    gap: 72px;
    padding-right: 72px;
}

.brand-marquee__wordmark {
    font-family: var(--font-display);
    font-size: 19px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--grey-pale);
}

.brand-marquee__logo {
    /* Sized by the width attribute (the old site's per-logo widths);
       the salvaged art is already the muted single-tone treatment. */
    height: auto;
}

/* 2.4em, not 1.7: Summer Loving's x-height is small next to the display face,
   so "eco" has to run larger to read the same size as the caps beside it. */
.cross-sell__script {
    font-family: var(--font-script);
    font-size: 2.4em;
    font-weight: 400;
    text-transform: none;
    color: var(--mint);
    margin-left: 6px;
}

.cross-sell__icon {
    vertical-align: middle;
    margin-left: 10px;
}

/* The eyebrow now carries the eco icon, so it lays out as a row. */
.cross-sell__eyebrow {
    display: flex;
    align-items: center;
    gap: 4px;
}

.proof-bar__cell--iconed {
    display: flex;
    /* Reset the column direction inherited from .proof-bar__cell so the icon
       sits beside the figure rather than under it. */
    flex-direction: row;
    /* Top-aligned, not centred: every icon then sits at the same height
       whether its label runs to one line or two. */
    align-items: flex-start;
    /* flex-start + fixed gap, not space-between: the icon keeps the same
       distance from the end of its text in every cell. */
    justify-content: flex-start;
    gap: 18px;
    /* Tighter side padding: the icon now shares the cell width with the label. */
    padding-inline: 26px;
}

.proof-bar__icon {
    flex-shrink: 0;
    color: var(--green);
}

/* The stat text block keeps its own width so the icon that follows it starts
   right after the label rather than at the far edge of the cell. */
.proof-bar__cell--iconed > div:first-child {
    min-width: 0;
}

/* Marketing-supplied proof-bar icons (navy line art, transparent PNG). */
.proof-bar__icon-img {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    object-fit: contain;
}

@keyframes brand-marquee-scroll {
    to {
        transform: translateX(-50%);
    }
}

/* Without motion, show a static strip that wraps instead of scrolling. */
@media (prefers-reduced-motion: reduce) {
    .brand-marquee {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .brand-marquee__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .brand-marquee__list[aria-hidden="true"] {
        display: none;
    }

    .brand-marquee__list {
        flex-wrap: wrap;
        justify-content: center;
        gap: 32px 56px;
        padding-right: 0;
    }
}

/* Scrolling community/charity photo strip (Company page) */
.photo-scroll {
    margin-top: 40px;
    overflow: hidden;
    mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 4%, black 96%, transparent);
}

.photo-scroll__track {
    display: flex;
    width: max-content;
    animation: brand-marquee-scroll 60s linear infinite;
}

.photo-scroll:hover .photo-scroll__track {
    animation-play-state: paused;
}

.photo-scroll__list {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-right: 20px;
}

.photo-scroll__image {
    width: 320px;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius);
}

@media (prefers-reduced-motion: reduce) {
    .photo-scroll {
        mask-image: none;
        -webkit-mask-image: none;
    }

    .photo-scroll__track {
        animation: none;
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
    }

    .photo-scroll__list[aria-hidden="true"] {
        display: none;
    }

    .photo-scroll__list {
        flex-wrap: wrap;
        justify-content: center;
    }
}

/* --------------------------------------------------------------------------
   Filter pills (consultation form, spirits closures)
   -------------------------------------------------------------------------- */
.pills {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 30px;
}

.pill {
    padding: 9px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-pill);
    background: transparent;
    color: var(--grey-mid);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* No pointer cursor here: the only interactive pills are the consultation
       radios, and .pill--radio span sets its own. The PFAS badge was inheriting
       this and reading as a button. */
    transition: all 160ms ease-out;
}

.pill--eco {
    border-color: #BFD6C4;
    color: var(--green);
}

.pill--active {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.pill--eco.pill--active {
    border-color: var(--green);
    background: var(--green);
}

/* --------------------------------------------------------------------------
   Markets split section
   -------------------------------------------------------------------------- */
.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
}

.split__copy {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.split__body {
    font-size: 16px;
    line-height: 1.7;
}

.split__image {
    width: 100%;
    height: 420px;
    object-fit: cover;
    border-radius: var(--radius);
}

.market-list {
    padding-top: 8px;
}

.market-list__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    padding: 18px 0;
    border-top: 1px solid var(--border);
}

.market-list__row:last-child {
    border-bottom: 1px solid var(--border);
}

.market-list__name {
    font-size: 15px;
    font-weight: 600;
    color: var(--navy);
}

a.market-list__name:hover {
    color: var(--teal);
}

.market-list__components {
    font-size: 15px;
    color: var(--grey-light);
    text-align: right;
}

/* --------------------------------------------------------------------------
   Alloy footprint table
   -------------------------------------------------------------------------- */
.alloy-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--eco-border);
    border-radius: var(--radius);
    background: var(--white);
    margin-bottom: 14px;
}

.alloy-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
}

.alloy-table thead th {
    background: var(--navy);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    padding: 16px 22px;
}

.alloy-table thead th:nth-child(1) { width: 25%; }
.alloy-table thead th:nth-child(2) { width: 23%; }
.alloy-table thead th:nth-child(3) { width: 23%; }
.alloy-table thead th:nth-child(4) { width: 29%; }

.alloy-table tbody tr {
    border-top: 1px solid var(--border);
}

.alloy-table tbody tr:first-child {
    border-top: none;
}

.alloy-table tbody th,
.alloy-table tbody td {
    padding: 18px 22px;
    text-align: left;
    vertical-align: top;
}

.alloy-table tbody th {
    font-weight: 700;
    color: var(--navy);
}

.alloy-table__notes {
    color: var(--grey-mid);
}

.alloy-table__delta {
    color: var(--green);
    font-weight: 700;
    margin-left: 6px;
}

.alloy-table__row--eco {
    background: var(--eco-surface-row);
}

.alloy-table__row--eco th {
    color: var(--green);
}

.alloy-table .alloy-table__row--muted th,
.alloy-table .alloy-table__row--muted td {
    color: var(--grey-light);
}

/* --------------------------------------------------------------------------
   Answer cards (knowledge base, market FAQs)
   -------------------------------------------------------------------------- */
.answer-card {
    background: var(--surface-grey);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
    padding: 30px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.answer-card--eco {
    border-left-color: var(--green);
}

/* Photo closing a card, framed like the video facade opposite it. */
.answer-card__image {
    width: 100%;
    height: auto;
    margin-top: auto;
    border-radius: var(--radius);
}

.answer-card__question {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.3;
    color: var(--navy);
}

.answer-card__question a:hover {
    color: var(--teal);
}

.answer-card__answer {
    font-size: 14px;
    line-height: 1.7;
    color: var(--grey-mid);
}

.answer-card__list {
    padding-left: 18px;
    list-style: disc;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--grey-mid);
}

/* FAQ category sections on /knowledge/ — anchored below the sticky header
   plus the sub-nav, which wraps to two rows on this page */
.faq-section {
    scroll-margin-top: 200px;
    padding-block: 56px;
}

/* Collapsed question list; native details/summary, no JS */
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 860px;
}

.faq-item {
    background: var(--surface-grey);
    border-left: 3px solid var(--teal);
    border-radius: var(--radius);
}

.faq-item--eco {
    border-left-color: var(--green);
}

.faq-item__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 24px;
    cursor: pointer;
    list-style: none;
}

.faq-item__question::-webkit-details-marker {
    display: none;
}

.faq-item__title {
    font-family: var(--font-display);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.35;
    color: var(--navy);
}

.faq-item__question:hover .faq-item__title {
    color: var(--teal);
}

.faq-item__icon {
    position: relative;
    flex: none;
    width: 12px;
    height: 12px;
}

.faq-item__icon::before,
.faq-item__icon::after {
    content: "";
    position: absolute;
    background: var(--navy);
    transition: transform 200ms ease;
}

.faq-item__icon::before {
    top: 5px;
    left: 0;
    right: 0;
    height: 2px;
}

.faq-item__icon::after {
    left: 5px;
    top: 0;
    bottom: 0;
    width: 2px;
}

.faq-item[open] .faq-item__icon::after {
    transform: scaleY(0);
}

.faq-item__body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
    padding: 0 24px 22px;
    max-width: 760px;
}

.faq-section + .faq-section {
    border-top: 1px solid var(--border);
}

/* --------------------------------------------------------------------------
   Global footprint band — navy with a subtle dot-grid texture; the plants
   are listed explicitly rather than implied by a map image.
   -------------------------------------------------------------------------- */
.footprint {
    background:
        radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px) 0 0 / 20px 20px,
        linear-gradient(90deg, var(--navy) 40%, #12246B 100%);
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 88px var(--gutter);
}

.footprint__content {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.footprint__plants {
    display: flex;
    flex-direction: column;
}

.footprint__plant {
    padding: 13px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.footprint__plant:last-child {
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.footprint__summary {
    display: flex;
    align-items: center;
    gap: 14px;
    cursor: pointer;
    list-style: none;
}

.footprint__summary::-webkit-details-marker {
    display: none;
}

.footprint__summary:hover .footprint__city {
    color: var(--teal);
}

.footprint__summary--static {
    cursor: default;
}

.footprint__summary--static:hover .footprint__city {
    color: var(--white);
}

.footprint__marker {
    width: 13px;
    height: 13px;
    flex-shrink: 0;
    fill: var(--teal);
    transition: transform 200ms ease;
}

.footprint__details[open] .footprint__marker {
    transform: rotate(45deg);
}

.footprint__capabilities {
    margin: 8px 0 2px 27px;
    font-size: 14px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
}

.footprint__plant-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.footprint__city {
    font-family: var(--font-display);
    font-size: 17px;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--white);
}

.footprint__region {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
}

.footprint__title {
    font-family: var(--font-display);
    font-size: 46px;
    line-height: 1.04;
    text-transform: uppercase;
    color: var(--white);
}

.footprint__body {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.78);
}

/* --------------------------------------------------------------------------
   News cards
   -------------------------------------------------------------------------- */
.news-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.news-card__image {
    width: 100%;
    height: 170px;
    object-fit: cover;
    border-radius: var(--radius);
}

.news-card__meta {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-light);
}

.news-card__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.25;
    color: var(--navy);
}

.news-card:hover .news-card__title {
    color: var(--teal);
}

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */
.cta-panel {
    background: var(--surface-grey);
    border-top: 1px solid var(--border);
    padding: 72px var(--gutter);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.cta-panel__title {
    font-family: var(--font-display);
    font-size: 36px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--navy);
    max-width: 640px;
}

.cta-panel__body {
    font-size: 17px;
    line-height: 1.65;
    color: var(--grey-mid);
    max-width: 580px;
}

.cta-panel__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
}

/* Teal-ruled text card (brochure page value props) */
.topline-card {
    border-top: 3px solid var(--teal);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.topline-card__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.topline-card__body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey-mid);
}

/* Company values (icons, no subtext — marketing slides 28-29) */
/* 6 tracks so the 3-2 layout's second row (2 cards) can be centered by
   spanning 2 tracks each and shifting their start column — a straight 3-column
   grid would leave the last row flush left instead of centered. */
.values-grid {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 48px 32px;
    /* Left-aligned, not centred: marketing wants the first icon's label to line
       up with the mission paragraph above it (slide 22). Row two sits directly
       under row one — the old half-column offset read as a misalignment. */
    justify-items: start;
    max-width: 900px;
    margin: 0;
}

.value-card {
    grid-column: span 2;
}

.value-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
    /* A fixed box, not shrink-to-fit: sized to the label, each card centred its
       icon over its own text, so a short label like "Trust & Respect" and a long
       one like "Integrity & Accountability" put their icons at different offsets. */
    width: 220px;
    max-width: 100%;
}

.value-card__icon {
    color: var(--teal);
}

.value-card__name {
    font-size: 15px;
    font-weight: 700;
    color: var(--navy);
    line-height: 1.35;
}

@media (max-width: 900px) {
    .site-header__logo img {
        height: 58px;
    }

    .site-footer__brand img {
        height: 56px;
    }

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

    .value-card {
        grid-column: auto;
    }
}

@media (max-width: 560px) {
    .values-grid {
        grid-template-columns: 1fr;
    }
}

/* Company mission quote */
.mission-quote {
    margin: 0 0 34px;
    max-width: 820px;
    font-size: 17px;
    line-height: 1.75;
    color: var(--navy);
    border-left: 3px solid var(--teal);
    padding: 6px 0 6px 24px;
}

/* Non-interactive pill chips (finish option lists) */
.pills--static {
    margin-bottom: 0;
    padding-top: 4px;
}

.pills--static .pill {
    cursor: default;
    background: var(--white);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.site-footer {
    background: var(--navy);
    padding: 60px var(--gutter);
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 40px;
    align-items: start;
}

.site-footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.site-footer__brand img {
    height: 68px;
    width: auto;
    align-self: flex-start;
}

.site-footer__address {
    font-size: 14px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    max-width: 380px;
}

.site-footer__col {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.site-footer__col a:hover {
    color: var(--white);
}

.site-footer__heading {
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--white);
    margin-bottom: 4px;
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .hero__title {
        font-size: 46px;
    }

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

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

    .proof-bar__cell {
        border-top: 1px solid var(--border);
    }

    .proof-bar__cell:nth-child(-n+2) {
        border-top: none;
    }

    .proof-bar__cell:nth-child(3) {
        border-left: none;
    }
}

/* Menu breakpoint sits above 900px: the enlarged logo plus the no-wrap nav row
   needs ~1200px before it fits alongside 40px gutters. */
@media (max-width: 1200px) {
    .site-header__menu-toggle {
        display: flex;
    }

    .site-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        background: var(--white);
        border-bottom: 1px solid var(--border);
        padding: 8px var(--gutter) 20px;
    }

    .site-header__nav.is-open {
        display: flex;
    }

    .nav-link {
        padding: 14px 0;
        min-height: 44px;
        border-bottom: 1px solid var(--border);
    }

    .nav-link--active {
        border-bottom-color: var(--border);
        color: var(--navy);
    }

    .btn--nav {
        margin-top: 16px;
        text-align: center;
        padding-block: 15px;
    }
}

@media (max-width: 900px) {
    .section__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .split {
        grid-template-columns: 1fr;
    }

    .split__image {
        order: 2;
        height: 320px;
    }

    .footprint {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .util-bar__tagline {
        display: none;
    }

    .util-bar {
        justify-content: flex-end;
    }
}

@media (max-width: 640px) {
    .site-header__logo img {
        height: 42px;
    }

    .site-footer__brand img {
        height: 48px;
    }

    .hero__title {
        font-size: 32px;
    }

    /* The authored line break is too long for a phone; let the headline wrap. */
    .hero__title br {
        display: none;
    }

    .hero__lede {
        font-size: 16px;
    }

    .card-grid--3,
    .card-grid--2 {
        grid-template-columns: 1fr;
    }

    .proof-bar {
        grid-template-columns: 1fr;
    }

    .proof-bar__cell {
        border-left: none;
        border-top: 1px solid var(--border);
    }

    .proof-bar__cell:first-child {
        border-top: none;
    }

    .proof-bar__cell:nth-child(-n+2) {
        border-top: 1px solid var(--border);
    }

    .proof-bar__cell:first-child {
        border-top: none;
    }

    .section {
        padding-block: 56px;
    }

    .section__title {
        font-size: 28px;
    }

    .footprint__title {
        font-size: 34px;
    }

    .cta-panel__title {
        font-size: 28px;
    }

    .site-footer {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   Inner-page components (p1–p5)
   ========================================================================== */

/* Breadcrumbs */
.breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--grey-light);
}

.breadcrumb a {
    color: inherit;
}

.breadcrumb a:hover {
    color: var(--navy);
}

.breadcrumb--onDark {
    color: rgba(255, 255, 255, 0.6);
}

.breadcrumb--onDark a:hover {
    color: var(--white);
}

/* Navy breadcrumb hero */
.page-hero {
    position: relative;
    background: var(--navy);
}

.page-hero__media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.35;
}

.page-hero__scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, #0C1B59 10%, rgba(12, 27, 89, 0.7) 100%);
}

.page-hero__content {
    position: relative;
    padding: 62px 40px 62px var(--gutter);
    max-width: calc(790px + var(--gutter));
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.page-hero__title {
    font-family: var(--font-display);
    font-size: 46px;
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--white);
}

.page-hero__lede {
    font-size: 18px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.85);
    max-width: 680px;
}

/* Pharma-blue hero accent — same value as --teal, kept as its own modifier so
   the pharma pages can be retinted independently of the shared navy default. */
.page-hero--teal {
    background: var(--teal);
}

.page-hero--teal .page-hero__scrim {
    background: linear-gradient(90deg, #1BACE0 10%, rgba(27, 172, 224, 0.7) 100%);
}

/* Market overview band (image + lead paragraph in the market accent color) */
.market-overview__lead {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.6;
    color: var(--teal);
}

.market-overview__body {
    font-size: 15px;
    line-height: 1.75;
    color: var(--grey-mid);
}

/* Small rounded accent pill ("PFAS-Free Solution") */
.pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 999px;
    background: var(--teal);
    color: var(--white);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    width: fit-content;
}

/* Language selector (English / 中文) */
.language-select {
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.language-select__label {
    font-size: 14px;
    font-weight: 700;
    color: var(--teal);
}

.language-select__options {
    display: flex;
    gap: 10px;
}

.language-select__option {
    padding: 8px 22px;
    border: 1px solid var(--teal);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    color: var(--teal);
    transition: background 160ms ease-out, color 160ms ease-out;
}

.language-select__option:hover {
    background: var(--teal);
    color: var(--white);
}

.language-select__option--active {
    background: var(--teal);
    color: var(--white);
}

/* The PFAS badge and the language chips share one row. */
.pill-row {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

/* Navy, not teal, for the selected language here: beside a teal badge two
   identical teal pills read as one control. */
.pill-row .language-select__option--active {
    background: var(--navy);
    border-color: var(--navy);
}

.pill-row .language-select__option {
    padding: 6px 16px;
    font-size: 12px;
}

/* Lightweight click-to-load YouTube facade — no iframe/JS cost until clicked */
.video-facade {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: var(--radius);
    overflow: hidden;
    background-size: cover;
    background-position: center;
    cursor: pointer;
}

.video-facade__poster {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-facade::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(12, 27, 89, 0.25);
}

.video-facade__play {
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: rgba(255, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

.video-facade__play svg {
    width: 22px;
    height: 22px;
    fill: var(--white);
    margin-left: 3px;
}

.video-facade iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* Sticky anchor sub-nav */
.sub-nav {
    position: sticky;
    top: 79px;
    z-index: 90;
    display: flex;
    gap: 32px;
    padding: 0 var(--gutter);
    background: var(--surface-grey);
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
    scrollbar-width: none;
}

.sub-nav::-webkit-scrollbar {
    display: none;
}

.sub-nav__link {
    padding: 20px 0 18px;
    border-bottom: 2px solid transparent;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--grey-mid);
    white-space: nowrap;
    transition: color 160ms ease-out, border-color 160ms ease-out;
}

.sub-nav__link:hover,
.sub-nav__link--active {
    color: var(--navy);
    border-bottom-color: var(--navy);
}

/* Wide item sets (the knowledge FAQ nav) wrap on desktop instead of clipping;
   below the wrap threshold the base overflow-x scroll takes over. */
@media (min-width: 761px) {
    .sub-nav--wrap {
        flex-wrap: wrap;
        column-gap: 32px;
        row-gap: 0;
    }
}

/* Alternating process sections */
.process-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    scroll-margin-top: 140px;
}

.process-section__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.process-section--flipped .process-section__copy {
    order: 2;
}

/* Trimmed product shots are wide and short, so an even split leaves them
   reading small beside a full column of copy — give the image a little more of
   the row. Collapses to one column with the rest at 900px. */
.process-section--product {
    grid-template-columns: 1fr 1.2fr;
}

.process-section__body {
    font-size: 16px;
    line-height: 1.75;
}

.process-section__image {
    width: 100%;
    /* Trimmed product shot at its own aspect ratio: it fills the column edge to
       edge, nothing is cropped, and there are no white bars around it. */
    height: auto;
    border-radius: var(--radius);
}

/* Photograph, not a product shot: crops to a fixed frame. */
.process-section__image--photo {
    height: 440px;
    object-fit: cover;
}

.section__title--inner {
    font-size: 34px;
}

.section__heading--stack {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-width: 640px;
    margin-bottom: 30px;
}

.section__support--wide {
    max-width: 640px;
}

.stat-row {
    display: flex;
    gap: 28px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.stat-row__item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-row__value {
    font-family: var(--font-display);
    font-size: 24px;
    line-height: 1;
    color: var(--navy);
}

.stat-row__label {
    font-size: 12px;
    color: var(--grey-mid);
}

.underline-link {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    border-bottom: 2px solid var(--teal);
    padding-bottom: 3px;
}

.underline-link:hover {
    color: var(--teal);
}

/* Generic data table (capability reference) */
.table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--white);
}

.table-wrap--eco {
    border-color: var(--eco-border);
    margin-bottom: 14px;
}

.data-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    line-height: 1.6;
}

.data-table thead th {
    background: var(--navy);
    color: var(--white);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    text-align: left;
    padding: 16px 22px;
}

.data-table tbody tr {
    border-top: 1px solid var(--border);
}

.data-table tbody tr:first-child {
    border-top: none;
}

.data-table tbody th,
.data-table tbody td {
    padding: 18px 22px;
    text-align: left;
    vertical-align: top;
}

.data-table tbody th {
    font-weight: 700;
    color: var(--navy);
}

.data-table__muted {
    color: var(--grey-mid);
}

.alloy-table--expanded thead th {
    padding: 16px 20px;
}

.alloy-table--expanded thead th:nth-child(1) { width: 20%; }
.alloy-table--expanded thead th:nth-child(2) { width: 19%; }
.alloy-table--expanded thead th:nth-child(3) { width: 19%; }
.alloy-table--expanded thead th:nth-child(4) { width: 19%; }
.alloy-table--expanded thead th:nth-child(5) { width: 23%; }

.alloy-table--expanded tbody th,
.alloy-table--expanded tbody td {
    padding: 18px 20px;
}

/* Market split hero */
.market-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: stretch;
}

.market-hero__copy {
    padding: 76px 40px 76px var(--gutter-vw);
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: flex-start;
}

.market-hero__logo {
    /* Up from 96px per marketing (round 3, slide 10). */
    height: 120px;
    width: auto;
}

.market-hero__title {
    font-family: var(--font-display);
    font-size: 44px;
    font-weight: 400;
    line-height: 1.05;
    text-transform: uppercase;
    color: var(--navy);
}

.market-hero__lede {
    font-size: 17px;
    line-height: 1.7;
    max-width: 520px;
}

.market-hero__actions {
    display: flex;
    gap: 12px;
    padding-top: 6px;
    flex-wrap: wrap;
}

.market-hero__image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    /* The renditions are trimmed product shots padded to the frame; contain
       keeps whole bottles and canisters instead of cropping their tops. */
    object-fit: contain;
    background: var(--white);
}

.product-showcase__image {
    width: 100%;
    height: 280px;
    object-fit: contain;
    /* Bottom, not centre: these shots stand on a reflective surface and one of
       them is cut off mid-reflection, which read as a gap under the image. */
    object-position: bottom;
    background: var(--white);
    border-radius: var(--radius);
}

.tech-block__cards {
    margin-top: 48px;
}

/* Feature list under a component card's description (pharma technologies). */
.component-card__features {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.component-card__features li {
    position: relative;
    padding-left: 16px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-mid);
}

.component-card__features li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 9px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--teal);
}

.product-showcase__facts {
    margin-bottom: 40px;
}

.product-showcase__figure {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.product-showcase__caption {
    font-family: var(--font-display);
    font-size: 15px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--navy);
    text-align: center;
}

.product-showcase__video {
    max-width: 760px;
    margin: 40px auto 0;
}

.btn--md {
    font-size: 12px;
    padding: 15px 28px;
}

.btn--outline {
    border: 1px solid var(--border-input);
    color: var(--navy);
    font-family: var(--font-body);
    font-weight: 700;
    letter-spacing: 0.08em;
    background: transparent;
}

.btn--outline:hover {
    border-color: var(--navy);
}

.btn--white {
    background: var(--white);
    color: var(--navy);
}

.btn--white:hover {
    background: rgba(255, 255, 255, 0.88);
}

.btn--green {
    background: var(--green);
    color: var(--white);
}

.btn--green:hover {
    background: #2E7950;
}

.btn--full {
    display: block;
    text-align: center;
}

/* Trusted-by logo strip */
.logo-strip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 44px var(--gutter);
}

.logo-strip__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--grey-light);
    white-space: nowrap;
}

/* The names list scrolls as a logo marquee (slide 19); constrain it so the
   marquee's own overflow clipping can work inside the flex row. */
.logo-strip__marquee {
    flex: 1;
    min-width: 0;
}

/* Component cards (market pages, locations) */
.card-grid--4 {
    grid-template-columns: repeat(4, 1fr);
}

.component-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: var(--white);
}

.component-card__image {
    width: 100%;
    height: 140px;
    object-fit: contain;
    margin-bottom: 6px;
}

/* Show artwork runs full card width; both files are pre-rendered to the same
   frame so the logo banner and the photo sit at matching heights. */
.component-card__image--show {
    height: 190px;
    object-fit: cover;
    border-radius: calc(var(--radius) - 4px);
    margin-bottom: 14px;
}

.component-card__name {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.component-card__description {
    font-size: 14px;
    line-height: 1.6;
    color: var(--grey-mid);
}

.component-card__meta {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: 0.04em;
    color: var(--grey-light);
}

.component-card__meta a {
    color: var(--grey-mid);
}

.component-card__meta a:hover {
    color: var(--teal);
}

.component-card__cta {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--navy);
    padding-top: 4px;
}

.component-card__cta span {
    display: inline-block;
    transition: transform 300ms ease;
}

.component-card--link:hover {
    border-color: var(--navy);
}

.component-card--link:hover .component-card__cta span {
    transform: translateX(4px);
}

/* Navy sustainability cross-sell */
.cross-sell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 70px var(--gutter);
    background: var(--navy);
}

.cross-sell__copy {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.cross-sell__title {
    font-family: var(--font-display);
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;
    text-transform: uppercase;
    color: var(--white);
}

.cross-sell__body {
    font-size: 16px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.82);
}

.cross-sell__image {
    width: 100%;
    height: 340px;
    object-fit: cover;
    border-radius: var(--radius);
}

/* Product shots come through trimmed and padded to the frame: contain keeps
   the whole group, including the lid that cover used to clip. */
.cross-sell__image--product {
    object-fit: contain;
    background: var(--white);
}

/* Sustainability green hero */
.green-hero {
    background: var(--green);
    padding: 74px 40px 74px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: flex-start;
}

.green-hero__title {
    font-family: var(--font-display);
    font-size: 50px;
    font-weight: 400;
    line-height: 1.04;
    text-transform: uppercase;
    color: var(--white);
    max-width: 760px;
}

.green-hero__script {
    font-family: var(--font-script);
    font-size: 40px;
    line-height: 1.2;
    color: var(--mint-pale);
}

.green-hero__lede {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.9);
    max-width: 640px;
}

/* The four R's */
.four-rs__item {
    border-top: 3px solid var(--green);
    padding-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.four-rs__title {
    font-family: var(--font-display);
    font-size: 19px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.four-rs__body {
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey-mid);
}

.split--media-first .split__copy {
    order: 2;
}

.split__image--contain {
    object-fit: contain;
    height: 340px;
}

/* Article layout (knowledge, news) */
.article {
    display: grid;
    grid-template-columns: 1.6fr 1fr;
    gap: 56px;
    align-items: start;
    padding: 68px var(--gutter) 76px;
}

.article--news {
    grid-template-columns: 1fr;
    max-width: calc(760px + 2 * var(--gutter));
}

.article__main {
    display: flex;
    flex-direction: column;
    gap: 24px;
    align-items: flex-start;
    min-width: 0;
}

.article__title {
    font-family: var(--font-display);
    font-size: 42px;
    font-weight: 400;
    line-height: 1.08;
    text-transform: uppercase;
    color: var(--navy);
}

.article__byline {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    align-self: stretch;
    font-size: 13px;
    color: var(--grey-light);
    border-bottom: 1px solid var(--border);
    padding-bottom: 20px;
}

.article__lead {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--navy);
}

.article__body {
    font-size: 16px;
    line-height: 1.8;
}

.article__image {
    width: 100%;
    height: auto;
    border-radius: var(--radius);
}

.article__pull-quote {
    margin: 0;
    font-family: var(--font-display);
    font-size: 22px;
    line-height: 1.3;
    color: var(--navy);
    border-left: 3px solid var(--teal);
    padding: 4px 0 4px 24px;
}

.article__h2 {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
    padding-top: 8px;
}

.article__list {
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: article-list;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.article__list li {
    counter-increment: article-list;
    display: flex;
    gap: 14px;
    font-size: 16px;
    line-height: 1.7;
}

.article__list li::before {
    content: counter(article-list, decimal-leading-zero);
    color: var(--teal);
    font-weight: 700;
}

.download-card {
    background: var(--surface-grey);
    border-radius: var(--radius);
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 8px;
    align-self: stretch;
}

.download-card__title {
    font-family: var(--font-display);
    font-size: 18px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.download-card__note {
    font-size: 14px;
    line-height: 1.7;
    color: var(--grey-mid);
}

.download-card__detail {
    color: var(--navy);
    font-weight: 700;
    margin-left: 6px;
}

.download-card__link {
    color: var(--navy);
    font-weight: 600;
}

.download-card__link:hover {
    color: var(--teal);
}

/* Article sidebar */
.article__sidebar {
    display: flex;
    flex-direction: column;
    gap: 24px;
    position: sticky;
    top: 103px;
}

.facts-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.facts-panel__header {
    background: var(--navy);
    color: var(--white);
    padding: 14px 22px;
    font-family: var(--font-display);
    font-size: 12px;
    font-weight: 400;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.facts-panel__list {
    margin: 0;
    padding: 8px 22px 18px;
}

.facts-panel__row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border);
}

.facts-panel__row:last-child {
    border-bottom: none;
}

.facts-panel__row dt {
    font-size: 12px;
    color: var(--grey-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.facts-panel__row dd {
    margin: 0;
    font-size: 15px;
    color: var(--navy);
    font-weight: 600;
}

.facts-panel__value--eco {
    color: var(--green);
}

.toc-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.toc-card__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.toc-card__list {
    display: flex;
    flex-direction: column;
    gap: 9px;
    font-size: 14px;
    color: var(--grey-mid);
}

.sidebar-cta {
    background: var(--navy);
    border-radius: var(--radius);
    padding: 26px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-cta__title {
    font-family: var(--font-display);
    font-size: 17px;
    font-weight: 400;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--white);
}

.sidebar-cta__body {
    font-size: 14px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.8);
}

/* Keep reading */
.keep-reading {
    background: var(--surface-grey);
    border-top: 1px solid var(--border);
    padding: 60px var(--gutter);
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.keep-reading__title {
    font-family: var(--font-display);
    font-size: 24px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.keep-reading__card {
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.keep-reading__category {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--grey-light);
}

.keep-reading__headline {
    font-family: var(--font-display);
    font-size: 16px;
    line-height: 1.3;
    color: var(--navy);
}

.keep-reading__card:hover .keep-reading__headline {
    color: var(--teal);
}


.news-card__summary {
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey-mid);
}

/* Forms (p5) */
.form-page {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    align-items: stretch;
}

.form-page__main {
    padding: 68px 40px 76px var(--gutter-vw);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.form-page__main form {
    display: flex;
    flex-direction: column;
    gap: 28px;
    margin-top: 14px;
}

.form-page__title {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 400;
    line-height: 1.06;
    text-transform: uppercase;
    color: var(--navy);
}

.form-page__promise {
    font-size: 17px;
    line-height: 1.7;
    max-width: 520px;
}

.field-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    border: 0;
    padding: 0;
    margin: 0;
    min-inline-size: 0;
}

.field__label,
.field legend.field__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-mid);
}

.field--pills {
    gap: 10px;
}

.field__input {
    height: 46px;
    padding: 0 14px;
    background: var(--white);
    border: 1px solid var(--border-input);
    border-radius: var(--radius-btn);
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--body);
}

.field__input:focus {
    outline: 2px solid var(--teal);
    outline-offset: -1px;
}

.field__input--textarea {
    height: 120px;
    padding: 12px 14px;
    resize: vertical;
}

.field__input--address {
    height: 84px;
    padding: 12px 14px;
    resize: vertical;
}

.field__error {
    font-size: 13px;
    color: #B4231F;
}

.field__error:empty {
    display: none;
}

.form-error-summary {
    color: #B4231F;
    font-size: 14px;
}

.form-error-summary ul {
    margin: 0;
    padding-left: 18px;
    list-style: disc;
}

.pills--form {
    margin-bottom: 0;
}

.pill--radio {
    position: relative;
    padding: 0;
    border: 0;
    /* The later badge-style .pill rule paints a teal fill; the span carries the
       look here, so the label itself stays clear. */
    background: transparent;
}

.pill--radio input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.pill--radio span {
    padding: 10px 18px;
    border-radius: 999px;
    border: 1px solid var(--border-pill);
    color: var(--grey-mid);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 160ms ease-out;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
}

.pill--radio input:checked + span {
    border-color: var(--navy);
    background: var(--navy);
    color: var(--white);
}

.pill--radio input:focus-visible + span {
    outline: 2px solid var(--teal);
    outline-offset: 2px;
}

.drop-zone {
    position: relative;
    min-height: 84px;
    border: 1px dashed var(--border-input);
    border-radius: var(--radius-btn);
    background: var(--surface-faint);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
    color: var(--grey-light);
    font-size: 14px;
    cursor: pointer;
    transition: border-color 160ms ease-out, background-color 160ms ease-out;
}

.drop-zone:hover,
.drop-zone--over {
    border-color: var(--teal);
    background: var(--white);
}

.drop-zone__input {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.field--trap {
    position: absolute;
    left: -9999px;
    top: auto;
}

.form-page__submit {
    display: flex;
    align-items: center;
    gap: 20px;
    padding-top: 4px;
    flex-wrap: wrap;
}

.form-page__submit .btn {
    border: 0;
    cursor: pointer;
}

.form-page__note {
    font-size: 13px;
    color: var(--grey-light);
    line-height: 1.6;
    max-width: 280px;
}

/* Form right rail */
.form-page__rail {
    background: var(--surface-grey);
    border-left: 1px solid var(--border);
    padding: 68px 36px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.rail-block {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.rail-block--divided {
    border-top: 1px solid var(--border);
    padding-top: 26px;
}

.rail-block__title {
    font-family: var(--font-display);
    font-size: 15px;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--navy);
}

.rail-block__title--lg {
    font-size: 20px;
}

.rail-block__body {
    font-size: 14px;
    line-height: 1.7;
    color: var(--grey-mid);
}

.rail-block__body a {
    color: var(--navy);
}

.rail-block__body a:hover {
    color: var(--teal);
}

.rail-block__body--links {
    line-height: 1.9;
}

.steps {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.steps__item {
    display: flex;
    gap: 14px;
}

.steps__number {
    font-family: var(--font-display);
    font-size: 14px;
    color: var(--teal);
}

.steps__text {
    font-size: 14px;
    line-height: 1.65;
    color: var(--grey-mid);
}

.steps__text strong {
    color: var(--navy);
    font-weight: 700;
}

/* --------------------------------------------------------------------------
   Inner-page responsive
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .card-grid--4 {
        grid-template-columns: repeat(2, 1fr);
    }

    .article {
        grid-template-columns: 1fr;
        gap: 48px;
    }

    .article__sidebar {
        position: static;
    }

    .page-hero__title {
        font-size: 38px;
    }

    .green-hero__title {
        font-size: 42px;
    }
}

@media (max-width: 900px) {
    .sub-nav {
        top: 78px;
    }

    .process-section {
        grid-template-columns: 1fr;
    }

    .process-section__image {
        order: 2;
    }

    .process-section--flipped .process-section__copy {
        order: 0;
    }

    .market-hero,
    .cross-sell,
    .form-page {
        grid-template-columns: 1fr;
    }

    .market-hero__image {
        order: 2;
        min-height: 300px;
    }

    .cross-sell__image {
        height: 280px;
    }

    .form-page__rail {
        border-left: 0;
        border-top: 1px solid var(--border);
        padding: 48px 40px;
    }

    .logo-strip {
        flex-direction: column;
        align-items: stretch;
        gap: 18px;
    }
}

@media (max-width: 640px) {
    .card-grid--4 {
        grid-template-columns: 1fr;
    }

    .field-grid {
        grid-template-columns: 1fr;
    }

    .page-hero__content,
    .green-hero,
    .market-hero__copy,
    .form-page__main,
    .form-page__rail,
    .article,
    .keep-reading,
    .cross-sell,
    .section,
    .logo-strip,
    .sub-nav,
    .hero__content,
    .footprint__content,
    .util-bar,
    .site-header,
    .site-header__nav,
    .site-footer,
    .cta-panel {
        padding-inline: 24px;
    }

    /* The cell carries the gutter here so the figures line up with the
       sections above and below. */
    .proof-bar {
        padding-inline: 0;
    }

    .proof-bar__cell,
    .proof-bar__cell--iconed {
        padding-inline: 24px;
    }

    .sub-nav {
        gap: 22px;
    }

    .market-hero__title,
    .article__title,
    .form-page__title {
        font-size: 30px;
    }

    .green-hero__title {
        font-size: 34px;
    }

    .green-hero__script {
        font-size: 32px;
    }

    .page-hero__title {
        font-size: 30px;
    }
}

/* --------------------------------------------------------------------------
   Stock spirits closures — the one-pager PDF rebuilt as a page
   -------------------------------------------------------------------------- */
.spirits-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 24px;
    /* Marketing's swatch (round 3, slide 4), sampled from the deck: navy through
       slate to sea green. The mid stop keeps the ramp as dark as the swatch. */
    background: linear-gradient(105deg, #1A3160 0%, #396B7F 50%, #62B8A7 100%);
    /* A narrow right pad instead of the full gutter, so the art column runs out
       toward the page edge (slide 4) without being sliced flush against it. The
       copy keeps the left gutter. */
    padding: 68px 48px 68px var(--gutter);
    overflow: hidden;
}

.spirits-hero__copy {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
}

.spirits-hero__title {
    font-family: var(--font-display);
    font-size: 74px;
    font-weight: 400;
    line-height: 0.98;
    text-transform: uppercase;
    color: var(--white);
}

.spirits-hero__lede {
    font-size: 26px;
    line-height: 1.3;
    color: rgba(255, 255, 255, 0.92);
}

.spirits-hero__art {
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
    /* The artwork is a bleed fragment: its bottles are cut off along the bottom
       edge of the file. Sitting it on the bottom of the band puts that cut on the
       band's own edge, where it reads as the art running under the fold rather
       than as a slice floating mid-band. */
    align-self: end;
    margin-bottom: -68px;
}

.spirits-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: start;
}

.spirits-col {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: flex-start;
}

/* The second and later headings in a column need air above them. */
.spirits-col .section__title--inner + * {
    margin-top: 0;
}

.spirits-col > .section__title--inner ~ .section__title--inner {
    margin-top: 22px;
}

.spirits-col__body {
    font-size: 16px;
    line-height: 1.75;
}

.spirits-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.spirits-list li {
    position: relative;
    padding-left: 16px;
    font-size: 16px;
    line-height: 1.6;
    color: var(--body);
}

.spirits-list li::before {
    content: "\2022";
    position: absolute;
    left: 0;
    color: var(--navy);
}

/* The sheet runs the twelve finishing options as two columns. */
.spirits-list--split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
}

.spirits-art {
    position: relative;
    width: 100%;
    margin-top: 18px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    gap: 12px;
}

.spirits-art__drawing,
.spirits-art__bottle {
    width: 100%;
    height: auto;
}

.spirits-table thead th {
    padding-inline: 16px;
    white-space: nowrap;
}

.spirits-table tbody th,
.spirits-table tbody td {
    padding-inline: 16px;
    white-space: nowrap;
}

.spirits-table tbody td.data-table__muted {
    white-space: normal;
    min-width: 200px;
}

.spirits-table__note {
    margin-top: 14px;
    font-size: 13px;
    color: var(--grey-mid);
}

@media (max-width: 900px) {
    .spirits-hero {
        grid-template-columns: 1fr;
        padding-block: 48px;
    }

    .spirits-hero__title {
        font-size: 52px;
    }

    .spirits-hero__lede {
        font-size: 21px;
    }

    .spirits-hero {
        /* One column: the art no longer needs the bleed, so pad both sides. */
        padding-right: var(--gutter);
    }

    .spirits-hero__art {
        order: 2;
        max-height: 300px;
        object-position: center;
        /* One column: the art sits in the flow, no bottom bleed. */
        align-self: auto;
        margin-bottom: 0;
    }

    .spirits-cols,
}

@media (max-width: 560px) {
    .spirits-hero__title {
        font-size: 42px;
    }

    .spirits-list--split {
        grid-template-columns: 1fr;
    }

}

/* --------------------------------------------------------------------------
   Careers
   -------------------------------------------------------------------------- */
/* The banner art sits on its own navy field, so it bleeds to the hero's right
   edge rather than living inside a card. */
.careers-hero {
    display: grid;
    grid-template-columns: 1fr minmax(0, 701px);
    align-items: center;
}

.careers-hero__image {
    display: block;
    width: 100%;
    height: auto;
}

.check-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 16px;
    line-height: 1.5;
    color: var(--body);
}

.check-list li {
    position: relative;
    padding-left: 30px;
}

.check-list li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.3em;
    width: 14px;
    height: 8px;
    border-left: 3px solid var(--teal);
    border-bottom: 3px solid var(--teal);
    transform: rotate(-45deg);
}

.check-list--compact {
    gap: 8px;
    font-size: 14px;
}

.check-list--compact li {
    padding-left: 26px;
}

.check-list--compact li::before {
    width: 12px;
    height: 7px;
}

.careers-values__heading {
    margin-top: 24px;
}

.careers-value {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.careers-value__icon {
    width: 64px;
    height: 64px;
}

.careers-future {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 48px;
    align-items: start;
}

.careers-future__cards {
    display: flex;
    flex-direction: column;
    gap: 36px;
}

.careers-future__benefits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
    margin-top: 6px;
}

.careers-future__image {
    width: 100%;
    height: 100%;
    min-height: 420px;
    object-fit: cover;
    border-radius: var(--radius);
}

.careers-form {
    max-width: 820px;
}

.careers-form form {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

@media (max-width: 900px) {
    .careers-hero,
    .careers-future {
        grid-template-columns: 1fr;
    }

    .careers-hero .page-hero__content {
        padding-bottom: 24px;
    }

    .careers-future__image {
        min-height: 0;
        height: 300px;
    }
}

@media (max-width: 560px) {
    .careers-future__benefits {
        grid-template-columns: 1fr;
    }
}