/* ==========================================================
   O2CHEM Landing Page v1.1
   All rules are isolated under .o2chem-page to avoid Woodmart
   and Elementor typography / spacing / color overrides.
   ========================================================== */

.o2-svg-sprite {
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

.o2chem-page {
    --o2-navy: #072952;
    --o2-navy-deep: #041f40;
    --o2-navy-soft: #0e417a;
    --o2-red: #e30825;
    --o2-red-dark: #c80720;
    --o2-white: #ffffff;
    --o2-page: #f8f8fa;
    --o2-card: #ffffff;
    --o2-text: #082c5b;
    --o2-muted: #65728a;
    --o2-line: #dfe6ef;
    --o2-shadow: 0 14px 34px rgba(7, 41, 82, .09);
    --o2-container: 1260px;

    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: clip !important;
    background: var(--o2-white) !important;
    color: var(--o2-text) !important;
    font-family: Tahoma, Arial, sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.o2chem-page *,
.o2chem-page *::before,
.o2chem-page *::after {
    box-sizing: border-box !important;
}

.o2chem-page h1,
.o2chem-page h2,
.o2chem-page h3,
.o2chem-page p,
.o2chem-page figure,
.o2chem-page ul,
.o2chem-page ol {
    margin: 0 !important;
    padding: 0 !important;
    font-family: inherit !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

.o2chem-page h1,
.o2chem-page h2,
.o2chem-page h3 {
    color: var(--o2-text) !important;
}

.o2chem-page a,
.o2chem-page a:hover,
.o2chem-page a:focus {
    text-decoration: none !important;
}

.o2chem-page button,
.o2chem-page input,
.o2chem-page select,
.o2chem-page textarea {
    font-family: inherit !important;
}

.o2chem-page img {
    display: block !important;
    width: auto;
    max-width: 100% !important;
    border: 0 !important;
    box-shadow: none !important;
}

.o2chem-page .o2-container {
    width: min(calc(100% - 48px), var(--o2-container)) !important;
    max-width: var(--o2-container) !important;
    margin-inline: auto !important;
    padding: 0 !important;
}

.o2chem-page[data-lang="en"] {
    font-family: Arial, Helvetica, sans-serif !important;
}

.o2-svg-icon,
.o2-btn__svg,
.o2-cta__phone-icon,
.o2-lang__globe {
    display: block;
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}

/* ---------------- Top bar ---------------- */

.o2-topbar {
    min-height: 34px !important;
    background: var(--o2-navy) !important;
    color: var(--o2-white) !important;
}

.o2-topbar__inner {
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 24px !important;
    direction: ltr !important;
}

.o2-topbar__contact {
    display: flex !important;
    align-items: center !important;
    gap: 22px !important;
}

.o2-topbar__link,
.o2-topbar__hours {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    min-height: 34px !important;
    color: rgba(255, 255, 255, .96) !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
}

.o2-topbar__link .o2-svg-icon,
.o2-topbar__hours .o2-svg-icon {
    width: 15px;
    height: 15px;
    color: #ff233c !important;
}

.o2-topbar__hours {
    direction: rtl !important;
}

.o2chem-page[data-lang="en"] .o2-topbar__hours {
    direction: ltr !important;
}

/* ---------------- Header ---------------- */

.o2-header {
    position: relative !important;
    z-index: 100 !important;
    width: 100% !important;
    background: #fff !important;
    border-bottom: 1px solid #edf0f4 !important;
    box-shadow: none !important;
}

.o2-header__inner {
    min-height: 84px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 28px !important;
}

.o2-brand {
    flex: 0 0 205px !important;
    width: 205px !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.o2-brand__viewport {
    width: 198px !important;
    height: 66px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
}

.o2-brand img {
    width: 190px !important;
    max-width: none !important;
    height: auto !important;
    transform: scale(1.18) !important;
    transform-origin: center !important;
}

.o2-nav {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 34px !important;
    background: transparent !important;
    box-shadow: none !important;
}

.o2-nav a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    min-height: 84px !important;
    padding: 0 !important;
    color: var(--o2-navy) !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    box-shadow: none !important;
}

.o2-nav a::after {
    content: "" !important;
    position: absolute !important;
    inset-inline: 50% !important;
    bottom: 18px !important;
    width: 0 !important;
    height: 2px !important;
    border-radius: 20px !important;
    background: var(--o2-red) !important;
    transition: width .2s ease, inset-inline .2s ease !important;
}

.o2-nav a:hover,
.o2-nav a.is-active {
    color: var(--o2-red) !important;
}

.o2-nav a:hover::after,
.o2-nav a.is-active::after {
    width: 100% !important;
    inset-inline: 0 !important;
}

.o2-header__cta {
    flex: 0 0 auto !important;
    min-width: 168px !important;
}

.o2-menu-toggle {
    display: none !important;
    width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 9px !important;
    border: 1px solid var(--o2-line) !important;
    border-radius: 9px !important;
    background: #fff !important;
    box-shadow: none !important;
    cursor: pointer !important;
}

.o2-menu-toggle > span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    margin: 5px 0 !important;
    border-radius: 3px !important;
    background: var(--o2-navy) !important;
}

/* ---------------- Buttons ---------------- */

.o2-btn,
.o2-btn:hover,
.o2-btn:focus {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 9px !important;
    padding: 10px 19px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    box-shadow: none !important;
    transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.o2-btn:hover {
    transform: translateY(-2px) !important;
}

.o2-btn--primary,
.o2-btn--primary:hover,
.o2-btn--primary:focus {
    color: #fff !important;
    background: var(--o2-red) !important;
    border: 1px solid var(--o2-red) !important;
    box-shadow: 0 8px 18px rgba(227, 8, 37, .18) !important;
}

.o2-btn--primary:hover {
    background: var(--o2-red-dark) !important;
}

.o2-btn--ghost,
.o2-btn--ghost:hover,
.o2-btn--ghost:focus {
    color: #fff !important;
    background: rgba(3, 25, 55, .34) !important;
    border: 1px solid rgba(255, 255, 255, .62) !important;
    backdrop-filter: blur(6px) !important;
}

.o2-btn__svg {
    width: 18px !important;
    height: 18px !important;
}

.o2-btn__arrow {
    width: 16px !important;
    height: 16px !important;
}

.o2chem-page[dir="rtl"] .o2-btn__arrow {
    transform: rotate(180deg);
}

/* ---------------- Hero ---------------- */

.o2-hero {
    position: relative !important;
    min-height: 535px !important;
    display: flex !important;
    align-items: center !important;
    isolation: isolate !important;
    background:
        linear-gradient(90deg, rgba(2, 26, 57, .98) 0%, rgba(4, 39, 78, .92) 36%, rgba(4, 39, 78, .20) 67%, rgba(4, 39, 78, 0) 84%),
        url("https://o2chem.com/wp-content/uploads/2026/09/hero-desktop.webp") center center / cover no-repeat !important;
}

.o2-hero::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: -1 !important;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(2, 26, 57, .16) 100%) !important;
    pointer-events: none !important;
}

.o2-hero__content {
    min-height: 535px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    position: relative !important;
    direction: ltr !important;
}

.o2-hero__copy {
    width: min(560px, 52%) !important;
    margin: 0 !important;
    color: #fff !important;
    direction: rtl !important;
    text-align: right !important;
}

.o2chem-page[data-lang="en"] .o2-hero__copy {
    direction: ltr !important;
    text-align: left !important;
}

.o2-eyebrow {
    display: flex !important;
    align-items: center !important;
    gap: 11px !important;
    margin-bottom: 13px !important;
    color: rgba(255, 255, 255, .94) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
}

.o2-eyebrow__line {
    width: 31px !important;
    height: 2px !important;
    flex: 0 0 31px !important;
    border-radius: 10px !important;
    background: var(--o2-red) !important;
}

.o2-hero h1 {
    margin: 0 0 14px !important;
    color: #fff !important;
    font-size: clamp(40px, 3.15vw, 54px) !important;
    font-weight: 900 !important;
    line-height: 1.27 !important;
    text-shadow: none !important;
}

.o2-hero h1 span,
.o2-hero h1 strong {
    display: block !important;
    color: inherit !important;
    font: inherit !important;
}

.o2-hero h1 strong {
    color: #ff233c !important;
}

.o2-hero p {
    max-width: 545px !important;
    color: rgba(255, 255, 255, .91) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    line-height: 1.95 !important;
}

.o2-hero__actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 24px !important;
}

.o2-hero__trust {
    position: absolute !important;
    right: 0 !important;
    bottom: 44px !important;
    width: 175px !important;
    display: grid !important;
    gap: 11px !important;
    direction: rtl !important;
    color: #fff !important;
}

.o2-hero-trust__item {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    color: rgba(255, 255, 255, .92) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
}

.o2-hero-trust__item .o2-svg-icon {
    width: 21px !important;
    height: 21px !important;
    color: #fff !important;
}

/* ---------------- Generic section headings ---------------- */

.o2-section {
    padding: 64px 0 !important;
}

.o2-section-heading {
    max-width: 750px !important;
    margin-bottom: 28px !important;
}

.o2-section-heading--center {
    margin-inline: auto !important;
    text-align: center !important;
}

.o2-section-heading__kicker {
    display: inline-block !important;
    margin-bottom: 5px !important;
    color: var(--o2-red) !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.o2-section-heading__kicker::after {
    content: "" !important;
    display: block !important;
    width: 32px !important;
    height: 2px !important;
    margin-top: 5px !important;
    margin-inline: auto !important;
    border-radius: 10px !important;
    background: var(--o2-red) !important;
}

.o2-about .o2-section-heading__kicker::after {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

.o2-section-heading h2,
.o2-about h2,
.o2-cta h2 {
    margin: 0 0 8px !important;
    color: var(--o2-navy) !important;
    font-size: clamp(26px, 2.25vw, 34px) !important;
    font-weight: 900 !important;
    line-height: 1.38 !important;
}

.o2-section-heading p {
    color: var(--o2-muted) !important;
    font-size: 13px !important;
    line-height: 1.9 !important;
}

/* ---------------- Chemical cards ---------------- */

.o2-section--chemicals {
    position: relative !important;
    background:
        radial-gradient(circle at 4% 12%, rgba(7, 41, 82, .04), transparent 16%),
        radial-gradient(circle at 96% 90%, rgba(7, 41, 82, .04), transparent 16%),
        #fff !important;
}

.o2-section--chemicals .o2-section-heading {
    margin-bottom: 18px !important;
}

.o2-chem-table-shell {
    width: min(100%, 1080px) !important;
    margin-inline: auto !important;
}

.o2-chem-table-note {
    width: 100% !important;
    min-height: 34px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 6px !important;
    padding: 6px 14px !important;
    border-radius: 4px !important;
    background: #073b78 !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.55 !important;
    text-align: center !important;
}

.o2-chem-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 6px !important;
    direction: rtl !important;
}

.o2-chem-card {
    min-width: 0 !important;
    min-height: 190px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 9px 8px 8px !important;
    border: 1px solid #cbd9e8 !important;
    border-radius: 5px !important;
    background: #fbfdff !important;
    box-shadow: 0 2px 6px rgba(7, 41, 82, .025) !important;
    text-align: center !important;
    overflow: hidden !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.o2-chem-card:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(227, 8, 37, .35) !important;
    box-shadow: 0 7px 16px rgba(7, 41, 82, .07) !important;
}

.o2-chem-card__structure {
    width: 100% !important;
    height: 72px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ef1f2f !important;
    overflow: visible !important;
}

.o2-molecule {
    direction: ltr !important;
    display: block !important;
    width: 112px !important;
    height: 66px !important;
    max-width: 100% !important;
    overflow: visible !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 1.85 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.o2-molecule use {
    overflow: visible !important;
}

.o2-molecule text {
    fill: currentColor !important;
    stroke: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
    text-anchor: start !important;
}

.o2-chem-card__abbr {
    display: block !important;
    margin-top: 0 !important;
    color: #062d5c !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 17px !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
}

.o2-chem-card h3 {
    min-height: 20px !important;
    margin-top: 4px !important;
    color: #0a3264 !important;
    font-size: 11px !important;
    font-weight: 800 !important;
    line-height: 1.45 !important;
    text-align: center !important;
}

.o2-chem-card__secondary {
    display: block !important;
    min-height: 24px !important;
    margin-top: 1px !important;
    color: #536a86 !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8px !important;
    font-weight: 400 !important;
    line-height: 1.35 !important;
    text-align: center !important;
}

.o2-chem-card__formula {
    display: block !important;
    margin-top: auto !important;
    padding-top: 3px !important;
    color: #073b78 !important;
    direction: ltr !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    text-align: center !important;
    white-space: nowrap !important;
}

.o2-center-action {
    display: flex !important;
    justify-content: center !important;
    margin-top: 24px !important;
}

/* ---------------- Services ---------------- */

.o2-section--services {
    background: var(--o2-page) !important;
}

.o2-services-grid {
    display: grid !important;
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 12px !important;
}

.o2-service-card {
    min-height: 205px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    padding: 20px 13px !important;
    border: 1px solid var(--o2-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--o2-navy) !important;
    text-align: center !important;
    box-shadow: 0 5px 14px rgba(7, 41, 82, .035) !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}

.o2-service-card:hover {
    transform: translateY(-3px) !important;
    border-color: rgba(227, 8, 37, .28) !important;
    box-shadow: 0 12px 24px rgba(7, 41, 82, .08) !important;
}

.o2-service-card__icon,
.o2-why-card__icon,
.o2-contact-card__icon {
    display: grid !important;
    place-items: center !important;
    color: var(--o2-red) !important;
}

.o2-service-card__icon {
    width: 54px !important;
    height: 54px !important;
    margin-bottom: 12px !important;
}

.o2-service-card__icon .o2-svg-icon {
    width: 44px !important;
    height: 44px !important;
    stroke-width: 1.55 !important;
}

.o2-service-card h3 {
    color: var(--o2-navy) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.45 !important;
}

.o2-service-card p {
    margin-top: 7px !important;
    color: var(--o2-muted) !important;
    font-size: 11px !important;
    line-height: 1.75 !important;
}

/* ---------------- About ---------------- */

.o2-about {
    position: relative !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 49.5% 50.5% !important;
    grid-template-areas: "media content" !important;
    direction: ltr !important;
    overflow: hidden !important;
    background: #fff !important;
}

.o2-about__media {
    position: relative !important;
    grid-area: media !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 0 !important;
    overflow: hidden !important;
    background: #eef3f8 !important;
}

.o2-about__media img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* The white diagonal cut is part of the approved desktop mockup. */
.o2-about__media::after {
    content: "" !important;
    position: absolute !important;
    top: -1px !important;
    right: -1px !important;
    z-index: 2 !important;
    width: 82px !important;
    height: calc(100% + 2px) !important;
    background: #fff !important;
    clip-path: polygon(58% 0, 100% 0, 100% 100%, 0 100%) !important;
    pointer-events: none !important;
}

.o2-about__image-note {
    position: absolute !important;
    top: 48px !important;
    left: 54px !important;
    z-index: 3 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    direction: rtl !important;
    text-align: right !important;
    transform: rotate(-4deg) !important;
    color: var(--o2-navy) !important;
    text-shadow: 0 1px 0 rgba(255,255,255,.2) !important;
}

.o2-about__image-note strong,
.o2-about__image-note span {
    display: block !important;
    color: var(--o2-navy) !important;
    font-size: 19px !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
}

.o2-about__image-note i {
    display: block !important;
    width: 72px !important;
    height: 3px !important;
    margin-top: 8px !important;
    margin-inline-start: 0 !important;
    border-radius: 20px !important;
    background: var(--o2-red) !important;
    transform: rotate(-7deg) !important;
}

.o2-about__content {
    grid-area: content !important;
    width: 100% !important;
    height: 420px !important;
    min-height: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    padding: 44px clamp(52px, 6.2vw, 96px) 44px clamp(40px, 5vw, 78px) !important;
    direction: rtl !important;
    text-align: right !important;
    background: #fff !important;
}

.o2chem-page[data-lang="en"] .o2-about__content {
    direction: ltr !important;
    text-align: left !important;
}

.o2chem-page[data-lang="en"] .o2-about__image-note {
    direction: ltr !important;
    text-align: left !important;
}

.o2-about__inner {
    width: 100% !important;
    max-width: 570px !important;
    margin: 0 !important;
}

.o2-about .o2-section-heading__kicker {
    margin-bottom: 4px !important;
}

.o2-about .o2-section-heading__kicker::after {
    margin-inline-start: 0 !important;
    margin-inline-end: auto !important;
}

.o2-about h2 {
    margin-bottom: 12px !important;
    font-size: clamp(27px, 2.15vw, 34px) !important;
    line-height: 1.35 !important;
}

.o2-about__inner p {
    margin: 0 0 11px !important;
    color: var(--o2-muted) !important;
    font-size: 12px !important;
    font-weight: 400 !important;
    line-height: 1.95 !important;
}

.o2-about__inner .o2-btn {
    min-width: 136px !important;
    margin-top: 6px !important;
}

/* ---------------- Why us ---------------- */

.o2-section--why {
    background: #fff !important;
}

.o2-why-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.o2-why-card {
    min-height: 185px !important;
    padding: 22px 18px !important;
    border: 1px solid var(--o2-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    text-align: center !important;
    box-shadow: 0 5px 14px rgba(7, 41, 82, .035) !important;
}

.o2-why-card__icon {
    width: 50px !important;
    height: 50px !important;
    margin: 0 auto 10px !important;
}

.o2-why-card__icon .o2-svg-icon {
    width: 40px !important;
    height: 40px !important;
    stroke-width: 1.55 !important;
}

.o2-why-card h3 {
    color: var(--o2-navy) !important;
    font-size: 14px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.o2-why-card p {
    margin-top: 7px !important;
    color: var(--o2-muted) !important;
    font-size: 11px !important;
    line-height: 1.75 !important;
}

/* ---------------- CTA ---------------- */

.o2-cta {
    position: relative !important;
    overflow: hidden !important;
    padding: 27px 0 !important;
    background: var(--o2-navy) !important;
    color: #fff !important;
}

.o2-cta::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        radial-gradient(circle at 5% 50%, rgba(255,255,255,.055), transparent 17%),
        radial-gradient(circle at 92% 35%, rgba(255,255,255,.055), transparent 14%) !important;
    pointer-events: none !important;
}

.o2-cta__inner {
    position: relative !important;
    z-index: 1 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 30px !important;
}

.o2-cta__copy > span {
    display: block !important;
    margin-bottom: 3px !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 11px !important;
    line-height: 1.4 !important;
}

.o2-cta h2 {
    margin: 0 !important;
    color: #fff !important;
    font-size: clamp(22px, 2vw, 30px) !important;
    line-height: 1.45 !important;
}

.o2-cta__phone,
.o2-cta__phone:hover,
.o2-cta__phone:focus {
    min-width: 250px !important;
    min-height: 54px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 12px 20px !important;
    border: 1px solid rgba(255,255,255,.5) !important;
    border-radius: 7px !important;
    background: var(--o2-red) !important;
    color: #fff !important;
    box-shadow: none !important;
}

.o2-cta__phone strong {
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 18px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
}

.o2-cta__phone-icon {
    width: 20px !important;
    height: 20px !important;
}

/* ---------------- Contact ---------------- */

.o2-contact {
    background: var(--o2-page) !important;
}

.o2-contact-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 14px !important;
}

.o2-contact-card {
    min-height: 150px !important;
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 20px !important;
    border: 1px solid var(--o2-line) !important;
    border-radius: 7px !important;
    background: #fff !important;
    color: var(--o2-navy) !important;
    box-shadow: 0 5px 14px rgba(7, 41, 82, .035) !important;
}

a.o2-contact-card:hover {
    border-color: rgba(227, 8, 37, .28) !important;
}

.o2-contact-card__icon {
    width: 42px !important;
    height: 42px !important;
    flex: 0 0 42px !important;
    border-radius: 10px !important;
    background: rgba(227, 8, 37, .07) !important;
}

.o2-contact-card__icon .o2-svg-icon {
    width: 21px !important;
    height: 21px !important;
    stroke-width: 1.7 !important;
}

.o2-contact-card__body {
    min-width: 0 !important;
    display: block !important;
}

.o2-contact-card__body strong {
    display: block !important;
    margin-bottom: 5px !important;
    color: var(--o2-navy) !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1.4 !important;
}

.o2-contact-card__body > span {
    display: block !important;
    color: #425674 !important;
    font-size: 11px !important;
    line-height: 1.75 !important;
    overflow-wrap: anywhere !important;
}

.o2-contact-card__body small {
    display: block !important;
    margin-top: 4px !important;
    color: #7a8798 !important;
    font-size: 10px !important;
    line-height: 1.55 !important;
}

/* ---------------- Footer ---------------- */

.o2-footer {
    background: var(--o2-navy) !important;
    color: rgba(255,255,255,.84) !important;
}

.o2-footer__grid {
    display: grid !important;
    grid-template-columns: 1.25fr .75fr .9fr 1fr !important;
    gap: 42px !important;
    padding-top: 38px !important;
    padding-bottom: 34px !important;
}

.o2-footer__brand {
    min-width: 0 !important;
}

.o2-footer__logo-viewport {
    width: 185px !important;
    height: 68px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    overflow: hidden !important;
    margin-bottom: 9px !important;
}

.o2-footer__brand img {
    width: 182px !important;
    max-width: none !important;
    height: auto !important;
    transform: scale(1.18) !important;
    filter: brightness(0) invert(1) !important;
}

.o2-footer__brand p,
.o2-footer__col p {
    color: rgba(255,255,255,.75) !important;
    font-size: 11px !important;
    line-height: 1.8 !important;
}

.o2-footer__col {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
}

.o2-footer__col h3 {
    margin-bottom: 4px !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 800 !important;
    line-height: 1.4 !important;
}

.o2-footer__col a,
.o2-footer__col span {
    color: rgba(255,255,255,.78) !important;
    font-size: 10px !important;
    line-height: 1.65 !important;
}

.o2-footer__col a:hover {
    color: #fff !important;
}

.o2-footer__bottom {
    border-top: 1px solid rgba(255,255,255,.12) !important;
}

.o2-footer__bottom .o2-container {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
    color: rgba(255,255,255,.58) !important;
    font-size: 10px !important;
    line-height: 1.5 !important;
}

/* ---------------- Floating language action ---------------- */

.o2-lang {
    position: fixed !important;
    inset-inline-end: 22px !important;
    bottom: 22px !important;
    z-index: 999999 !important;
    width: auto !important;
    font-family: Tahoma, Arial, sans-serif !important;
}

.o2-lang__fab {
    min-width: 132px !important;
    height: 50px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 0 13px !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    border-radius: 999px !important;
    background: var(--o2-navy) !important;
    color: #fff !important;
    box-shadow: 0 14px 34px rgba(2, 23, 50, .28) !important;
    cursor: pointer !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1 !important;
}

.o2-lang__globe {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
}

.o2-lang__label {
    color: #fff !important;
}

.o2-lang__code {
    min-width: 28px !important;
    height: 24px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 6px !important;
    border-radius: 999px !important;
    background: var(--o2-red) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.o2-lang__menu {
    position: absolute !important;
    inset-inline-end: 0 !important;
    bottom: calc(100% + 9px) !important;
    min-width: 190px !important;
    padding: 7px !important;
    border: 1px solid var(--o2-line) !important;
    border-radius: 12px !important;
    background: #fff !important;
    box-shadow: 0 16px 38px rgba(7, 41, 82, .18) !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(7px) !important;
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease !important;
}

.o2-lang.is-open .o2-lang__menu {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
}

.o2-lang__menu button {
    width: 100% !important;
    min-height: 42px !important;
    display: grid !important;
    grid-template-columns: 34px 1fr 22px !important;
    align-items: center !important;
    gap: 9px !important;
    padding: 7px 9px !important;
    border: 0 !important;
    border-radius: 8px !important;
    background: transparent !important;
    color: var(--o2-navy) !important;
    box-shadow: none !important;
    cursor: pointer !important;
    text-align: start !important;
}

.o2-lang__menu button:hover,
.o2-lang__menu button.is-active {
    background: #f3f6fa !important;
}

.o2-lang__option-code {
    width: 32px !important;
    height: 25px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 6px !important;
    background: var(--o2-navy) !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 10px !important;
    font-weight: 800 !important;
}

.o2-lang__option-name {
    color: var(--o2-navy) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}

.o2-lang__check {
    display: none !important;
    color: var(--o2-red) !important;
}

.o2-lang__menu button.is-active .o2-lang__check {
    display: grid !important;
}

.o2-lang__check .o2-svg-icon {
    width: 18px !important;
    height: 18px !important;
}

/* ---------------- Responsive ---------------- */

@media (max-width: 1180px) {
    .o2-nav {
        gap: 22px !important;
    }

    .o2-brand {
        flex-basis: 175px !important;
        width: 175px !important;
    }

    .o2-brand__viewport {
        width: 172px !important;
    }

    .o2-brand img {
        width: 168px !important;
    }

    .o2-chem-table-shell {
        width: min(100%, 860px) !important;
    }

    .o2-chem-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 8px !important;
    }

    .o2-services-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 940px) {
    .o2-topbar__inner {
        padding: 5px 0 !important;
    }

    .o2-topbar__contact {
        gap: 14px !important;
    }

    .o2-header__inner {
        min-height: 72px !important;
        gap: 14px !important;
    }

    .o2-brand {
        flex: 0 0 162px !important;
        width: 162px !important;
        height: 58px !important;
    }

    .o2-brand__viewport {
        width: 160px !important;
        height: 58px !important;
    }

    .o2-brand img {
        width: 156px !important;
    }

    .o2-header__cta {
        display: none !important;
    }

    .o2-menu-toggle {
        display: block !important;
        order: 3 !important;
    }

    .o2-nav {
        position: absolute !important;
        top: calc(100% + 8px) !important;
        inset-inline: 24px !important;
        z-index: 200 !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        padding: 7px !important;
        border: 1px solid var(--o2-line) !important;
        border-radius: 12px !important;
        background: #fff !important;
        box-shadow: var(--o2-shadow) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateY(-8px) !important;
        pointer-events: none !important;
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease !important;
    }

    .o2-header.is-menu-open .o2-nav {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
        pointer-events: auto !important;
    }

    .o2-nav a {
        min-height: 42px !important;
        justify-content: flex-start !important;
        padding: 0 12px !important;
        border-bottom: 1px solid #edf1f5 !important;
        font-size: 13px !important;
    }

    .o2-nav a:last-child {
        border-bottom: 0 !important;
    }

    .o2-nav a::after {
        display: none !important;
    }

    .o2-hero__trust {
        display: none !important;
    }

    .o2-hero__copy {
        width: min(560px, 58%) !important;
    }

    .o2-why-grid,
    .o2-contact-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .o2-footer__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

@media (max-width: 767px) {
    .o2chem-page .o2-container {
        width: min(calc(100% - 28px), var(--o2-container)) !important;
    }

    .o2-topbar__inner {
        min-height: 56px !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: 4px !important;
    }

    .o2-topbar__contact {
        width: 100% !important;
        justify-content: center !important;
        gap: 14px !important;
    }

    .o2-topbar__link,
    .o2-topbar__hours {
        min-height: auto !important;
        font-size: 10px !important;
    }

    .o2-topbar__hours {
        justify-content: center !important;
    }

    .o2-header__inner {
        min-height: 70px !important;
    }

    .o2-hero {
        min-height: 710px !important;
        align-items: flex-start !important;
        padding-top: 54px !important;
        background:
            linear-gradient(180deg, rgba(2, 26, 57, .95) 0%, rgba(4, 39, 78, .83) 31%, rgba(4, 39, 78, .25) 59%, rgba(4, 39, 78, .10) 100%),
            url("https://o2chem.com/wp-content/uploads/2026/09/hero-mobile.webp") center center / cover no-repeat !important;
    }

    .o2-hero__content {
        min-height: 656px !important;
        display: block !important;
    }

    .o2-hero__copy {
        width: min(100%, 430px) !important;
    }

    .o2-hero h1 {
        font-size: clamp(34px, 9.5vw, 43px) !important;
        line-height: 1.32 !important;
    }

    .o2-hero p {
        max-width: 420px !important;
        font-size: 13px !important;
        line-height: 1.9 !important;
    }

    .o2-hero__actions {
        width: min(100%, 330px) !important;
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 9px !important;
    }

    .o2-section {
        padding: 52px 0 !important;
    }

    .o2-section-heading {
        margin-bottom: 24px !important;
    }

    .o2-section-heading h2,
    .o2-about h2 {
        font-size: 27px !important;
    }

    .o2-chem-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .o2-chem-table-note {
        min-height: 38px !important;
        padding: 7px 10px !important;
        font-size: 10px !important;
    }

    .o2-chem-card {
        min-height: 182px !important;
        padding: 9px 6px 8px !important;
    }

    .o2-chem-card__structure {
        height: 66px !important;
    }

    .o2-molecule {
        width: 100px !important;
        height: 60px !important;
    }

    .o2-chem-card__abbr {
        font-size: 15px !important;
    }

    .o2-chem-card h3 {
        font-size: 10px !important;
    }

    .o2-chem-card__secondary {
        min-height: 22px !important;
        font-size: 8px !important;
    }

    .o2-chem-card__formula {
        font-size: 9px !important;
    }

    .o2-services-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }

    .o2-service-card {
        min-height: 190px !important;
        padding: 17px 10px !important;
    }

    .o2-about {
        height: auto !important;
        min-height: 0 !important;
        grid-template-columns: 1fr !important;
        grid-template-areas:
            "content"
            "media" !important;
        overflow: visible !important;
    }

    .o2-about__content {
        height: auto !important;
        min-height: 0 !important;
        padding: 46px 24px 42px !important;
    }

    .o2-about__inner {
        max-width: 100% !important;
    }

    .o2-about__media {
        height: 300px !important;
        min-height: 0 !important;
    }

    .o2-about__media::after {
        display: none !important;
    }

    .o2-about__image-note {
        top: 28px !important;
        left: 28px !important;
    }

    .o2-about__image-note strong,
    .o2-about__image-note span {
        font-size: 16px !important;
    }

    .o2-why-grid,
    .o2-contact-grid {
        grid-template-columns: 1fr !important;
    }

    .o2-why-card,
    .o2-contact-card {
        min-height: auto !important;
    }

    .o2-cta__inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        text-align: center !important;
    }

    .o2-cta__phone {
        width: 100% !important;
        min-width: 0 !important;
    }

    .o2-footer__grid {
        grid-template-columns: 1fr !important;
        gap: 25px !important;
        padding-top: 32px !important;
        padding-bottom: 28px !important;
    }

    .o2-lang {
        inset-inline-end: 14px !important;
        bottom: 14px !important;
    }

    .o2-lang__fab {
        min-width: 116px !important;
        height: 46px !important;
        padding-inline: 11px !important;
    }
}

@media (max-width: 430px) {
    .o2-topbar__contact {
        gap: 9px !important;
    }

    .o2-topbar__link {
        font-size: 9px !important;
    }

    .o2-hero {
        min-height: 680px !important;
        padding-top: 44px !important;
    }

    .o2-hero__content {
        min-height: 636px !important;
    }

    .o2-hero h1 {
        font-size: 33px !important;
    }

    .o2-chem-grid,
    .o2-services-grid {
        grid-template-columns: 1fr 1fr !important;
    }

    .o2-service-card h3 {
        font-size: 13px !important;
    }
}

/* ==========================================================
   v1.1.4 - Chemical grid final visual match
   ========================================================== */
.o2chem-page .o2-chem-card:hover {
    transform: none !important;
    border-color: #cbd9e8 !important;
    box-shadow: 0 2px 6px rgba(7, 41, 82, .025) !important;
}

.o2chem-page .o2-chem-card__structure {
    height: 72px !important;
    color: #ef2838 !important;
}

.o2chem-page .o2-molecule {
    width: 118px !important;
    height: 68px !important;
    overflow: visible !important;
    stroke-width: 1.75 !important;
}

.o2chem-page .o2-molecule .bond {
    fill: none !important;
    stroke: #173d68 !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.o2chem-page .o2-molecule .redbond {
    fill: none !important;
    stroke: #ef2838 !important;
    stroke-width: 1.75 !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
}

.o2chem-page .o2-molecule .atom {
    fill: #ef2838 !important;
    stroke: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.o2chem-page .o2-molecule .carbon {
    fill: #173d68 !important;
    stroke: none !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 8.5px !important;
    font-weight: 700 !important;
    direction: ltr !important;
    unicode-bidi: isolate !important;
}

.o2chem-page .o2-chem-card {
    min-height: 190px !important;
    border-color: #c9d8e7 !important;
    background: #fbfdff !important;
}

.o2chem-page .o2-chem-table-note {
    background: #0a4385 !important;
    border-radius: 3px !important;
    font-weight: 700 !important;
}


/* ---------------- Chemical table final polish v1.1.6 ---------------- */
.o2chem-page .o2-section--chemicals {
    padding-top: 18px !important;
    padding-bottom: 40px !important;
}

.o2chem-page .o2-section--chemicals .o2-section-heading {
    max-width: 1200px !important;
    margin: 0 auto 8px !important;
}

.o2chem-page .o2-section--chemicals .o2-section-heading__kicker,
.o2chem-page .o2-section--chemicals .o2-section-heading h2,
.o2chem-page .o2-section--chemicals .o2-section-heading p {
    display: none !important;
}

.o2chem-page .o2-chem-table-shell {
    width: min(100%, 1184px) !important;
}

.o2chem-page .o2-chem-table-note {
    min-height: 40px !important;
    margin-bottom: 10px !important;
    padding: 8px 14px !important;
    border-radius: 4px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    line-height: 1.35 !important;
}

.o2chem-page .o2-chem-grid {
    gap: 8px !important;
}

.o2chem-page .o2-chem-card {
    min-height: 171px !important;
    padding: 10px 9px 8px !important;
    border: 1px solid #d6e1ea !important;
    border-radius: 4px !important;
    box-shadow: none !important;
}

.o2chem-page .o2-chem-card:hover {
    transform: none !important;
    border-color: #d6e1ea !important;
    box-shadow: none !important;
}

.o2chem-page .o2-chem-card__structure {
    height: 62px !important;
    margin-bottom: 1px !important;
}

.o2chem-page .o2-molecule {
    width: 108px !important;
    height: 60px !important;
}

.o2chem-page .o2-molecule .bond,
.o2chem-page .o2-molecule .redbond {
    stroke-width: 1.6 !important;
}

.o2chem-page .o2-molecule .atom {
    font-size: 8.7px !important;
    font-weight: 800 !important;
}

.o2chem-page .o2-molecule .carbon {
    font-size: 8px !important;
    font-weight: 700 !important;
}

.o2chem-page .o2-chem-card__abbr {
    font-size: 16px !important;
    line-height: 1.05 !important;
}

.o2chem-page .o2-chem-card h3 {
    min-height: 18px !important;
    margin-top: 4px !important;
    font-size: 10px !important;
    line-height: 1.3 !important;
}

.o2chem-page .o2-chem-card__secondary {
    min-height: 21px !important;
    margin-top: 2px !important;
    font-size: 7.6px !important;
    line-height: 1.25 !important;
}

.o2chem-page .o2-chem-card__formula {
    padding-top: 4px !important;
    font-size: 9px !important;
    line-height: 1 !important;
}

.o2chem-page .o2-center-action {
    margin-top: 20px !important;
}

.o2chem-page .o2-section--chemicals .o2-center-action .o2-btn {
    min-height: 40px !important;
    padding: 9px 18px !important;
    border-radius: 6px !important;
    font-size: 12px !important;
    box-shadow: 0 6px 16px rgba(227, 8, 37, .16) !important;
}

@media (max-width: 767px) {
    .o2chem-page .o2-section--chemicals {
        padding-top: 10px !important;
        padding-bottom: 34px !important;
    }

    .o2chem-page .o2-chem-table-note {
        min-height: 34px !important;
        margin-bottom: 8px !important;
        padding: 6px 10px !important;
        font-size: 10px !important;
    }

    .o2chem-page .o2-chem-grid {
        gap: 8px !important;
    }

    .o2chem-page .o2-chem-card {
        min-height: 168px !important;
        padding: 10px 7px 8px !important;
    }

    .o2chem-page .o2-chem-card__structure {
        height: 58px !important;
    }

    .o2chem-page .o2-molecule {
        width: 100px !important;
        height: 56px !important;
    }
}


/* Molecule color lock v1.1.7: keep reference navy bonds + red functional groups through SVG <use>. */
.o2chem-page .o2-chem-card__structure { color: #173d68 !important; }
.o2chem-page .o2-molecule { color: #173d68 !important; }


/* ---------------- Premium motion + hover v1.1.8 ---------------- */
.o2chem-page .o2-chem-card,
.o2chem-page .o2-chem-card__structure,
.o2chem-page .o2-chem-card__abbr,
.o2chem-page .o2-chem-card h3,
.o2chem-page .o2-chem-card__secondary,
.o2chem-page .o2-chem-card__formula,
.o2chem-page .o2-section--chemicals .o2-center-action .o2-btn,
.o2chem-page .o2-section--chemicals .o2-center-action .o2-btn .o2-btn__svg {
    transition:
        transform .28s cubic-bezier(.22, .61, .36, 1),
        box-shadow .28s ease,
        border-color .28s ease,
        background-color .28s ease,
        color .28s ease,
        opacity .28s ease !important;
}

.o2chem-page .o2-chem-card {
    position: relative !important;
    isolation: isolate !important;
    overflow: hidden !important;
    background: linear-gradient(180deg, #fbfdff 0%, #f9fcff 100%) !important;
    will-change: transform !important;
}

.o2chem-page .o2-chem-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(125deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 46%, rgba(255,255,255,0) 64%) !important;
    transform: translateX(-130%) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    z-index: 0 !important;
    transition: transform .55s ease, opacity .35s ease !important;
}

.o2chem-page .o2-chem-card > * {
    position: relative !important;
    z-index: 1 !important;
}

.o2chem-page .o2-section--chemicals .o2-center-action .o2-btn {
    position: relative !important;
    overflow: hidden !important;
}

.o2chem-page .o2-section--chemicals .o2-center-action .o2-btn::before {
    content: "" !important;
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: -35% !important;
    width: 28% !important;
    background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.35), rgba(255,255,255,0)) !important;
    transform: skewX(-22deg) !important;
    transition: left .55s ease !important;
    pointer-events: none !important;
}

@media (hover: hover) and (pointer: fine) {
    .o2chem-page .o2-chem-card:hover {
        transform: translateY(-6px) !important;
        border-color: #b7cce2 !important;
        background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%) !important;
        box-shadow: 0 12px 26px rgba(7, 41, 82, .09) !important;
    }

    .o2chem-page .o2-chem-card:hover::before {
        transform: translateX(130%) !important;
        opacity: 1 !important;
    }

    .o2chem-page .o2-chem-card:hover .o2-chem-card__structure {
        transform: translateY(-2px) scale(1.045) !important;
    }

    .o2chem-page .o2-chem-card:hover .o2-chem-card__abbr {
        transform: translateY(-1px) !important;
        color: #08376e !important;
        text-shadow: 0 1px 0 rgba(255,255,255,.7) !important;
    }

    .o2chem-page .o2-chem-card:hover h3,
    .o2chem-page .o2-chem-card:hover .o2-chem-card__secondary,
    .o2chem-page .o2-chem-card:hover .o2-chem-card__formula {
        transform: translateY(-1px) !important;
    }

    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn:hover {
        transform: translateY(-3px) !important;
        box-shadow: 0 12px 24px rgba(227, 8, 37, .24) !important;
        background: var(--o2-red-dark) !important;
    }

    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn:hover::before {
        left: 115% !important;
    }

    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn:hover .o2-btn__svg {
        animation: o2chem-phone-wiggle .7s ease-in-out 1 !important;
    }
}

.o2chem-page .o2-chem-grid .o2-chem-card {
    animation: o2chem-card-rise .55s cubic-bezier(.22, .61, .36, 1) both !important;
}

.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(1)  { animation-delay: .02s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(2)  { animation-delay: .05s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(3)  { animation-delay: .08s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(4)  { animation-delay: .11s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(5)  { animation-delay: .14s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(6)  { animation-delay: .17s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(7)  { animation-delay: .20s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(8)  { animation-delay: .23s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(9)  { animation-delay: .26s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(10) { animation-delay: .29s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(11) { animation-delay: .32s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(12) { animation-delay: .35s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(13) { animation-delay: .38s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(14) { animation-delay: .41s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(15) { animation-delay: .44s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(16) { animation-delay: .47s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(17) { animation-delay: .50s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(18) { animation-delay: .53s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(19) { animation-delay: .56s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(20) { animation-delay: .59s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(21) { animation-delay: .62s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(22) { animation-delay: .65s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(23) { animation-delay: .68s !important; }
.o2chem-page .o2-chem-grid .o2-chem-card:nth-child(24) { animation-delay: .71s !important; }

.o2chem-page .o2-chem-table-note {
    animation: o2chem-fade-down .45s ease both !important;
}

.o2chem-page .o2-section--chemicals .o2-center-action {
    animation: o2chem-fade-up .55s ease .3s both !important;
}

@keyframes o2chem-card-rise {
    from {
        opacity: 0;
        transform: translateY(12px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes o2chem-fade-down {
    from {
        opacity: 0;
        transform: translateY(-8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes o2chem-fade-up {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes o2chem-phone-wiggle {
    0%, 100% { transform: rotate(0deg); }
    20% { transform: rotate(-12deg); }
    40% { transform: rotate(9deg); }
    60% { transform: rotate(-6deg); }
    80% { transform: rotate(4deg); }
}

@media (prefers-reduced-motion: reduce) {
    .o2chem-page .o2-chem-card,
    .o2chem-page .o2-chem-card::before,
    .o2chem-page .o2-chem-card__structure,
    .o2chem-page .o2-chem-card__abbr,
    .o2chem-page .o2-chem-card h3,
    .o2chem-page .o2-chem-card__secondary,
    .o2chem-page .o2-chem-card__formula,
    .o2chem-page .o2-chem-table-note,
    .o2chem-page .o2-section--chemicals .o2-center-action,
    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn,
    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn::before,
    .o2chem-page .o2-section--chemicals .o2-center-action .o2-btn .o2-btn__svg {
        animation: none !important;
        transition: none !important;
        transform: none !important;
    }
}