/* ==========================================================================
   MOSAIC DESIGN SYSTEM v1 — JOOMLA 6 / CASSIOPEIA
   Shared component system for Mosaic company websites.

   IMPORTANT:
   - Company-specific visual identity is controlled in SECTION 1 only.
   - The component rules below should remain the same across Mosaic sites.
   - Semantic token names describe PURPOSE, not a particular color.
   ========================================================================== */

/* ==========================================================================
   1. COMPANY THEME TOKENS — EDIT COLORS HERE
   ========================================================================== */

:root {
    /* ----- Brand surfaces ----- */
    --mosaic-brand-darkest: #17120f;
    --mosaic-brand-dark: #241b16;
    --mosaic-brand-mid: #32231b;
    --mosaic-brand-strong: #4a2a18;

    /* ----- Brand accents / interactions ----- */
    --mosaic-accent: #ef6c00;
    --mosaic-accent-strong: #b64a00;
    --mosaic-accent-soft: #f2ad73;
    --mosaic-link: #a84300;
    --mosaic-action: #b64a00;
    --mosaic-action-hover: #32231b;
    --mosaic-action-text: #ffffff;

    /* ----- Text on light surfaces ----- */
    --mosaic-text-primary: #2f2925;
    --mosaic-text-secondary: #625a54;
    --mosaic-text-muted: #746a63;

    /* ----- Text on dark surfaces ----- */
    --mosaic-text-on-dark: #ffffff;
    --mosaic-text-on-dark-secondary: rgb(255 255 255 / 84%);
    --mosaic-text-on-dark-muted: rgb(255 255 255 / 70%);
    --mosaic-text-on-dark-faint: rgb(255 255 255 / 58%);
    --mosaic-accent-on-dark: #ffd1ad;

    /* ----- Light surfaces ----- */
    --mosaic-surface-primary: #ffffff;
    --mosaic-surface-soft: #fbf5ef;
    --mosaic-surface-subtle: #f4ebe3;
    --mosaic-surface-page: #fcf8f3;
    --mosaic-card-surface: linear-gradient(145deg, rgb(255 255 255 / 97%), rgb(255 253 249 / 95%));

    /* ----- Borders ----- */
    --mosaic-border: #ded2c8;
    --mosaic-border-strong: #cbb8a9;
    --mosaic-border-on-dark: rgb(255 255 255 / 18%);

    /* ----- Header ----- */
    --mosaic-header-start: rgb(36 27 22 / 97%);
    --mosaic-header-end: rgb(82 40 17 / 97%);
    --mosaic-header-text: rgb(255 255 255 / 92%);
    --mosaic-header-hover: rgb(255 255 255 / 11%);

    /* ----- Hero ----- */
    --mosaic-hero-start: #241b16;
    --mosaic-hero-end: #32231b;
    --mosaic-hero-flare: rgb(239 108 0 / 24%);
    --mosaic-hero-flare-secondary: rgb(255 163 82 / 18%);

    /* ----- Footer ----- */
    --mosaic-footer-start: rgb(28 22 19 / 98%);
    --mosaic-footer-end: rgb(74 35 15 / 98%);

    /* ----- Shadows ----- */
    --mosaic-shadow-color: 70 38 20;
    --mosaic-shadow-sm: 0 5px 18px rgb(var(--mosaic-shadow-color) / 8%);
    --mosaic-shadow: 0 12px 32px rgb(var(--mosaic-shadow-color) / 11%);
    --mosaic-shadow-lg: 0 18px 46px rgb(var(--mosaic-shadow-color) / 14%);

    /* ----- Card accent artwork ----- */
    --mosaic-card-mark-stroke: #a97a5b;
    --mosaic-card-mark-glow: rgb(239 108 0 / 10%);

    /* ----- Status / notice colors ----- */
    --mosaic-success: #356b4f;
    --mosaic-success-bg: #edf7f1;
    --mosaic-success-border: #c9dfd1;

    --mosaic-heritage: #8a6419;
    --mosaic-heritage-bg: #fbf7ed;
    --mosaic-heritage-border: #dfca97;

    --mosaic-caution: #9a6500;
    --mosaic-caution-bg: #fff8e8;
    --mosaic-caution-border: #ead39d;

    --mosaic-danger: #8b3f37;
    --mosaic-danger-bg: #fff2f0;
    --mosaic-danger-border: #e4b8b2;

    --mosaic-info-bg: #fff4ea;
    --mosaic-info-border: #ead6c4;

    /* ----- Spectrum / educational graphic colors ----- */
    --mosaic-spectrum-violet: #6c4ba3;
    --mosaic-spectrum-blue: #2b6f9e;
    --mosaic-spectrum-green: #3c815d;
    --mosaic-spectrum-gold: #d28a24;
    --mosaic-spectrum-red: #d45a2a;

    --mosaic-card-mark-image: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%201254%201001%22%3E%3Cg%20fill=%22none%22%20stroke-linejoin=%22round%22%20stroke-linecap=%22round%22%3E%3Cg%20stroke=%22%23a97a5b%22%20stroke-width=%2232%22%20opacity=%22.42%22%3E%3Cpolygon%20points=%22546,72%20327,236%20328,352%20595,531%20758,415%20769,164%22/%3E%3Cpolygon%20points=%221141,108%201030,91%20842,177%20825,419%20955,490%201182,394%22/%3E%3Cpolygon%20points=%2283,595%20139,783%20418,892%20546,843%20561,595%20294,414%22/%3E%3Cpolygon%20points=%22790,483%20628,595%20614,843%20711,915%20961,787%20916,556%22/%3E%3C/g%3E%3Cg%20stroke=%22%23ffffff%22%20stroke-width=%2210%22%20opacity=%22.48%22%3E%3Cpolygon%20points=%22546,72%20327,236%20328,352%20595,531%20758,415%20769,164%22/%3E%3Cpolygon%20points=%221141,108%201030,91%20842,177%20825,419%20955,490%201182,394%22/%3E%3Cpolygon%20points=%2283,595%20139,783%20418,892%20546,843%20561,595%20294,414%22/%3E%3Cpolygon%20points=%22790,483%20628,595%20614,843%20711,915%20961,787%20916,556%22/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

    /* ----- Layout ----- */
    --mosaic-content: 1180px;
    --mosaic-content-wide: 1320px;
    --mosaic-reading: 780px;
    --mosaic-reading-wide: 900px;
    --mosaic-gutter: clamp(1rem, 3vw, 2rem);

    /* ----- Spacing ----- */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 3rem;
    --space-8: 4rem;
    --space-9: 5rem;
    --space-10: 6rem;

    /* ----- Shape / motion ----- */
    --mosaic-radius-sm: 0.35rem;
    --mosaic-radius: 0.6rem;
    --mosaic-radius-lg: 0.9rem;
    --mosaic-transition: 180ms ease;

    /* ----- Shared texture paths / scale ----- */
    --mosaic-texture-size: 900px;
}

/* ==========================================================================
   2. GLOBAL BASE
   ========================================================================== */

html {
    scroll-behavior: smooth;
    scroll-padding-top: 7rem;
}

body {
    color: var(--mosaic-text-primary);
    background-color: var(--mosaic-surface-page);
    background-image: url("/images/texture/voronoi-light-xxs-seamless.svg");
    background-repeat: repeat;
    background-size: var(--mosaic-texture-size) auto;
    background-position: center top;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    font-size: 1rem;
    line-height: 1.7;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}

main,
.site-grid,
.grid-child,
.com-content-article,
.item-page,
.mosaic-page {
    min-width: 0;
}

.com-content-article,
.item-page {
    margin: 0;
}

.com-content-article > div,
.item-page > div {
    max-width: none;
}

.com-content-article,
.mosaic-page {
    background: transparent;
}

img,
svg,
video,
iframe {
    max-width: 100%;
}

img {
    height: auto;
}

figure {
    margin: 0;
}

p,
ul,
ol {
    margin-top: 0;
}

p:last-child,
ul:last-child,
ol:last-child {
    margin-bottom: 0;
}

::selection {
    color: var(--mosaic-text-on-dark);
    background: var(--mosaic-accent-strong);
}

/* ==========================================================================
   3. TYPOGRAPHY
   ========================================================================== */

.mosaic-page {
    color: var(--mosaic-text-primary);
}

.mosaic-page h1,
.mosaic-page h2,
.mosaic-page h3,
.mosaic-page h4 {
    color: var(--mosaic-brand-dark);
    font-weight: 720;
    letter-spacing: -0.025em;
    text-wrap: balance;
}

.mosaic-page h1 {
    margin: 0 0 var(--space-5);
    font-size: clamp(2.2rem, 4.2vw, 3.65rem);
    line-height: 1.08;
}

.mosaic-page h2 {
    margin: 0 0 var(--space-4);
    font-size: clamp(1.7rem, 3vw, 2.6rem);
    line-height: 1.15;
}

.mosaic-page h3 {
    margin: 0 0 var(--space-3);
    font-size: clamp(1.18rem, 1.8vw, 1.45rem);
    line-height: 1.28;
}

.mosaic-page h4 {
    margin: 0 0 var(--space-2);
    font-size: 1.05rem;
    line-height: 1.35;
}

.mosaic-eyebrow,
.mosaic-kicker {
    margin: 0 0 var(--space-3);
    color: var(--mosaic-accent-strong);
    font-size: 0.78rem;
    font-weight: 820;
    line-height: 1.3;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mosaic-lead {
    max-width: var(--mosaic-reading-wide);
    margin-bottom: var(--space-5);
    color: var(--mosaic-text-secondary);
    font-size: clamp(1.08rem, 1.55vw, 1.32rem);
    line-height: 1.65;
}

.mosaic-prose {
    max-width: var(--mosaic-reading);
}

.mosaic-prose p {
    margin-bottom: 1.15rem;
}

.mosaic-reading {
    width: min(100%, var(--mosaic-reading));
    margin-inline: auto;
}

.mosaic-meta,
figcaption {
    color: var(--mosaic-text-muted);
    font-size: 0.9rem;
    line-height: 1.5;
}

figcaption {
    margin-top: var(--space-3);
}

.mosaic-muted {
    color: var(--mosaic-text-muted);
}

.mosaic-subheading {
    margin-bottom: var(--space-4);
}

.mosaic-subheading h3,
.mosaic-subheading h4 {
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   4. CORE LAYOUT
   ========================================================================== */

.mosaic-container {
    width: min(var(--mosaic-content), calc(100% - (2 * var(--mosaic-gutter))));
    margin-inline: auto;
}

.mosaic-section {
    position: relative;
    --mosaic-context-heading: var(--mosaic-brand-dark);
    --mosaic-context-body: var(--mosaic-text-secondary);
    --mosaic-context-muted: var(--mosaic-text-muted);
    --mosaic-context-accent: var(--mosaic-accent-strong);
    --mosaic-context-link: var(--mosaic-link);

    padding-block: clamp(3.25rem, 6vw, 5.5rem);
    color: var(--mosaic-context-body);
    background: rgb(255 255 255 / 92%);
}

.mosaic-section--soft {
    background: color-mix(in srgb, var(--mosaic-surface-soft) 93%, transparent);
}

.mosaic-section--dark {
    --mosaic-context-heading: var(--mosaic-text-on-dark);
    --mosaic-context-body: var(--mosaic-text-on-dark-secondary);
    --mosaic-context-muted: var(--mosaic-text-on-dark-muted);
    --mosaic-context-accent: var(--mosaic-accent-on-dark);
    --mosaic-context-link: var(--mosaic-text-on-dark);

    color: var(--mosaic-context-body);
    background: linear-gradient(135deg, var(--mosaic-brand-darkest), var(--mosaic-brand-dark));
}

.mosaic-section h1,
.mosaic-section h2,
.mosaic-section h3,
.mosaic-section h4 {
    color: var(--mosaic-context-heading);
}

.mosaic-section p,
.mosaic-section li {
    color: inherit;
}

.mosaic-section .mosaic-lead {
    color: var(--mosaic-context-body);
}

.mosaic-section .mosaic-eyebrow,
.mosaic-section .mosaic-kicker {
    color: var(--mosaic-context-accent);
}

.mosaic-section .mosaic-link {
    color: var(--mosaic-context-link);
}

.mosaic-section--compact {
    padding-block: clamp(2rem, 4vw, 3.5rem);
}

.mosaic-split {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}

.mosaic-split > * {
    min-width: 0;
}

.mosaic-split--wide-media {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
}

.mosaic-split--product {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
}

.mosaic-grid {
    display: grid;
    gap: clamp(1.1rem, 2vw, 1.75rem);
}

.mosaic-grid > * {
    min-width: 0;
}

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

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

.mosaic-grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.mosaic-grid--auto {
    grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}

.mosaic-grid--spaced {
    margin-top: 2rem;
}

.mosaic-grid--spaced .mosaic-card {
    min-height: 13rem;
}

.mosaic-stack {
    display: grid;
    gap: var(--space-4);
    min-width: 0;
}

/* Shared section heading.
   Both class names are supported while HTML is standardized. */
.mosaic-section-header,
.mosaic-section-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.7fr);
    gap: var(--space-6);
    align-items: end;
    margin-bottom: clamp(2rem, 4vw, 3.5rem);
}

.mosaic-section-header > *,
.mosaic-section-heading > * {
    min-width: 0;
}

.mosaic-section-header > p,
.mosaic-section-heading > p {
    color: var(--mosaic-context-body, var(--mosaic-text-secondary));
}

.mosaic-section-header--single,
.mosaic-section-heading--single {
    display: block;
    max-width: var(--mosaic-reading-wide);
}

.mosaic-section-header--center,
.mosaic-section-heading--center {
    display: block;
    max-width: var(--mosaic-reading-wide);
    margin-inline: auto;
    text-align: center;
}

/* ==========================================================================
   5. HERO
   ========================================================================== */

.mosaic-hero {
    position: relative;
    overflow: hidden;
    padding-block: clamp(3.8rem, 8vw, 7rem);

    --mosaic-context-heading: var(--mosaic-text-on-dark);
    --mosaic-context-body: var(--mosaic-text-on-dark-secondary);
    --mosaic-context-muted: var(--mosaic-text-on-dark-muted);
    --mosaic-context-accent: var(--mosaic-accent-on-dark);
    --mosaic-context-link: var(--mosaic-text-on-dark);

    color: var(--mosaic-context-body);
    background:
        radial-gradient(circle at 85% 20%, var(--mosaic-hero-flare), transparent 28rem),
        linear-gradient(135deg, var(--mosaic-hero-start), var(--mosaic-hero-end));
}

.mosaic-hero::before,
.mosaic-section--dark::before,
.mosaic-cta:not(.mosaic-cta--light)::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/texture/voronoi-dark-medium-seamless.svg");
    background-repeat: repeat;
    background-size: var(--mosaic-texture-size) auto;
    background-position: center;
    pointer-events: none;
    z-index: 0;
}

.mosaic-hero::after,
.mosaic-section--dark::after,
.mosaic-cta:not(.mosaic-cta--light)::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 84% 32%, rgb(255 255 255 / 75%) 0, rgb(255 227 175 / 42%) 0.7%, rgb(255 182 82 / 18%) 2%, transparent 6%),
        radial-gradient(circle at 75% 50%, var(--mosaic-hero-flare-secondary) 0, transparent 8%),
        radial-gradient(circle at 69% 58%, rgb(255 210 115 / 13%) 0, rgb(255 210 115 / 5%) 2%, transparent 5%);
    pointer-events: none;
    z-index: 1;
}

.mosaic-hero > *,
.mosaic-section--dark > *,
.mosaic-cta > * {
    position: relative;
    z-index: 2;
}

.mosaic-hero h1,
.mosaic-hero h2,
.mosaic-hero h3,
.mosaic-hero h4 {
    color: var(--mosaic-context-heading);
}

.mosaic-hero .mosaic-eyebrow,
.mosaic-hero .mosaic-kicker {
    color: var(--mosaic-context-accent);
}

.mosaic-hero .mosaic-lead,
.mosaic-hero p:not(.mosaic-eyebrow):not(.mosaic-kicker) {
    color: var(--mosaic-context-body);
}

.mosaic-hero__content {
    max-width: var(--mosaic-reading-wide);
}

.mosaic-hero__inner {
    position: relative;
    z-index: 2;
}

.mosaic-hero--split {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-inline: max(var(--mosaic-gutter), calc((100vw - var(--mosaic-content)) / 2));
}

.mosaic-hero--split > .mosaic-hero__content,
.mosaic-hero--split > .mosaic-container {
    width: min(var(--mosaic-content), calc(100% - (2 * var(--mosaic-gutter))));
    margin-inline: auto;
}

.mosaic-hero--split .mosaic-hero__content {
    width: auto;
    margin: 0;
}

.mosaic-hero__media {
    position: relative;
    z-index: 2;
}

.mosaic-hero__media figure {
    min-height: 150px;
    display: grid;
    place-items: center;
    padding: var(--space-3);
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--mosaic-border-on-dark);
    border-radius: var(--mosaic-radius);
}

.mosaic-hero__media img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
}

.mosaic-hero__media-main {
    grid-row: span 2;
}

/* ==========================================================================
   6. ACTIONS / LINKS / BUTTONS / TAGS
   ========================================================================== */

.mosaic-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    align-items: center;
    margin-top: var(--space-6);
}

.mosaic-actions--center {
    justify-content: center;
}

.mosaic-button {
    min-height: 46px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.72rem 1.15rem;
    color: var(--mosaic-action-text);
    background: var(--mosaic-action);
    border: 1px solid var(--mosaic-action);
    border-radius: var(--mosaic-radius-sm);
    box-shadow: var(--mosaic-shadow-sm);
    font-weight: 750;
    line-height: 1.2;
    text-decoration: none;
    transition:
        transform var(--mosaic-transition),
        box-shadow var(--mosaic-transition),
        background var(--mosaic-transition),
        border-color var(--mosaic-transition);
}

.mosaic-button:hover,
.mosaic-button:focus-visible {
    color: var(--mosaic-action-text);
    background: var(--mosaic-action-hover);
    border-color: var(--mosaic-action-hover);
    box-shadow: var(--mosaic-shadow);
    transform: translateY(-1px);
}

.mosaic-button--secondary {
    color: var(--mosaic-brand-dark);
    background: var(--mosaic-surface-primary);
    border-color: var(--mosaic-border-strong);
}

.mosaic-button--secondary:hover,
.mosaic-button--secondary:focus-visible {
    color: var(--mosaic-brand-dark);
    background: var(--mosaic-surface-soft);
    border-color: var(--mosaic-accent);
}

.mosaic-link {
    color: var(--mosaic-link);
    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
}

.mosaic-tags {
    width: fit-content;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-5);
    color: var(--mosaic-text-on-dark-secondary);
    font-size: 0.86rem;
    font-weight: 700;
}

.mosaic-tags > * {
    padding: 0.38rem 0.68rem;
    color: var(--mosaic-text-on-dark-secondary);
    background: rgb(255 255 255 / 8%);
    border: 1px solid var(--mosaic-border-on-dark);
    border-radius: 999px;
    font-size: 0.86rem;
    font-weight: 700;
}

/* ==========================================================================
   7. BADGES / NOTICES
   ========================================================================== */

.mosaic-badge {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    margin-bottom: var(--space-4);
    padding: 0.3rem 0.62rem;
    color: var(--mosaic-text-secondary);
    background: var(--mosaic-surface-subtle);
    border: 1px solid var(--mosaic-border);
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 820;
    line-height: 1.2;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.mosaic-badge--success {
    color: var(--mosaic-success);
    background: var(--mosaic-success-bg);
    border-color: var(--mosaic-success-border);
}

.mosaic-badge--archive {
    color: var(--mosaic-heritage);
    background: var(--mosaic-heritage-bg);
    border-color: var(--mosaic-heritage-border);
}

.mosaic-hero .mosaic-badge--archive {
    color: #f5dfad;
    background: rgb(138 100 25 / 18%);
    border-color: rgb(245 223 173 / 35%);
}

.mosaic-notice {
    padding: clamp(1rem, 2vw, 1.5rem);
    color: var(--mosaic-text-primary);
    background: var(--mosaic-info-bg);
    border: 1px solid var(--mosaic-info-border);
    border-left: 4px solid var(--mosaic-accent);
    border-radius: var(--mosaic-radius-sm);
}

.mosaic-notice--archive {
    background: var(--mosaic-heritage-bg);
    border-color: var(--mosaic-heritage-border);
    border-left-color: var(--mosaic-heritage);
}

.mosaic-notice--warning {
    background: var(--mosaic-caution-bg);
    border-color: var(--mosaic-caution-border);
    border-left-color: var(--mosaic-caution);
}

.mosaic-notice--critical {
    background: var(--mosaic-danger-bg);
    border-color: var(--mosaic-danger-border);
    border-left-color: var(--mosaic-danger);
}

/* ==========================================================================
   8. CARD SYSTEM
   ========================================================================== */

.mosaic-card {
    position: relative;
    overflow: hidden;
    min-width: 0;
    height: 100%;
    display: flex;
    flex-direction: column;

    --mosaic-context-heading: var(--mosaic-text-primary);
    --mosaic-context-body: var(--mosaic-text-secondary);
    --mosaic-context-muted: var(--mosaic-text-muted);
    --mosaic-context-accent: var(--mosaic-accent-strong);
    --mosaic-context-link: var(--mosaic-link);

    padding: clamp(1.35rem, 2.4vw, 2rem);
    padding-right: clamp(4.6rem, 6vw, 5.6rem);
    color: var(--mosaic-context-body);
    background: var(--mosaic-card-surface);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow-sm);
    transition:
        transform var(--mosaic-transition),
        box-shadow var(--mosaic-transition),
        border-color var(--mosaic-transition);
}

.mosaic-card:hover {
    border-color: var(--mosaic-border-strong);
    box-shadow: var(--mosaic-shadow);
    transform: translateY(-2px);
}

.mosaic-card::before {
    content: "";
    position: absolute;
    top: 16px;
    right: 16px;
    width: 68px;
    aspect-ratio: 1254 / 1001;
    background-image: var(--mosaic-card-mark-image);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    opacity: 0.78;
    filter:
        drop-shadow(0 2px 3px rgb(var(--mosaic-shadow-color) / 8%))
        drop-shadow(0 0 8px var(--mosaic-card-mark-glow));
    pointer-events: none;
    z-index: 0;
}

.mosaic-card > * {
    position: relative;
    z-index: 1;
}

.mosaic-card h1,
.mosaic-card h2,
.mosaic-card h3,
.mosaic-card h4 {
    color: var(--mosaic-context-heading);
}

.mosaic-card p,
.mosaic-card li {
    color: var(--mosaic-context-body);
}

.mosaic-card .mosaic-eyebrow,
.mosaic-card .mosaic-kicker {
    color: var(--mosaic-context-accent);
}

.mosaic-card a:not(.mosaic-button) {
    color: var(--mosaic-context-link);
}

.mosaic-card--featured {
    border-color: var(--mosaic-border-strong);
    box-shadow: var(--mosaic-shadow);
}

.mosaic-card--compact {
    padding: clamp(1rem, 1.8vw, 1.35rem);
}

.mosaic-card__media {
    margin: calc(-1 * clamp(1.35rem, 2.4vw, 2rem));
    margin-right: calc(-1 * clamp(4.6rem, 6vw, 5.6rem));
    margin-bottom: var(--space-5);
    min-height: 210px;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--mosaic-surface-soft);
    border-bottom: 1px solid var(--mosaic-border);
}

.mosaic-card__media img {
    width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.mosaic-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.mosaic-card__section {
    margin: var(--space-4) 0;
    padding-top: var(--space-4);
    border-top: 1px solid var(--mosaic-border);
}

.mosaic-card__footer {
    margin-top: auto;
    padding-top: var(--space-5);
}

.mosaic-grid > .mosaic-card h3 {
    padding-right: 1.5rem;
}

/* Whole-card link behavior */
.mosaic-card--link,
.mosaic-card--link:link,
.mosaic-card--link:visited,
.mosaic-card--link:hover,
.mosaic-card--link:focus,
.mosaic-card--link:focus-visible {
    min-height: 5rem;
    justify-content: center;
    color: var(--mosaic-context-body);
    text-decoration: none !important;
}

.mosaic-card--link h1,
.mosaic-card--link h2,
.mosaic-card--link h3,
.mosaic-card--link h4,
.mosaic-card--link p,
.mosaic-card--link li,
.mosaic-card--link span {
    text-decoration: none !important;
}

.mosaic-card--link .mosaic-card__link {
    color: var(--mosaic-context-link);
    text-decoration: none !important;
    font-weight: 700;
}

.mosaic-card--link:hover .mosaic-card__link,
.mosaic-card--link:focus-visible .mosaic-card__link {
    text-decoration: underline !important;
    text-underline-offset: 0.18em;
}

/* ==========================================================================
   9. PANELS
   ========================================================================== */

.mosaic-panel {
    min-width: 0;

    --mosaic-context-heading: var(--mosaic-text-primary);
    --mosaic-context-body: var(--mosaic-text-secondary);
    --mosaic-context-muted: var(--mosaic-text-muted);
    --mosaic-context-accent: var(--mosaic-accent-strong);

    padding: clamp(1.35rem, 2.5vw, 2rem);
    color: var(--mosaic-context-body);
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow-sm);
}

.mosaic-panel h1,
.mosaic-panel h2,
.mosaic-panel h3,
.mosaic-panel h4 {
    color: var(--mosaic-context-heading);
}

.mosaic-panel p,
.mosaic-panel li {
    color: var(--mosaic-context-body);
}

.mosaic-panel .mosaic-eyebrow,
.mosaic-panel .mosaic-kicker,
.mosaic-panel li::marker {
    color: var(--mosaic-context-accent);
}

.mosaic-panel--glass {
    position: relative;
    --mosaic-context-heading: var(--mosaic-text-on-dark);
    --mosaic-context-body: rgb(255 255 255 / 86%);
    --mosaic-context-accent: var(--mosaic-accent-on-dark);

    color: var(--mosaic-context-body);
    background:
        linear-gradient(
            145deg,
            rgb(255 255 255 / 14%),
            rgb(255 255 255 / 7%)
        );
    border: 1px solid rgb(255 255 255 / 24%);
    box-shadow:
        inset 0 1px 0 rgb(255 255 255 / 15%),
        var(--mosaic-shadow);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.mosaic-panel--glass::before {
    content: "";
    position: absolute;
    top: 0;
    left: 1.5rem;
    width: 3.5rem;
    height: 2px;
    background: linear-gradient(90deg, var(--mosaic-accent), transparent);
    pointer-events: none;
}

.mosaic-panel--glass > * {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   10. CTA
   ========================================================================== */

.mosaic-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: var(--space-6);
    align-items: center;
    justify-content: space-between;
    padding: clamp(1.6rem, 3vw, 2.5rem);

    --mosaic-context-heading: var(--mosaic-text-on-dark);
    --mosaic-context-body: var(--mosaic-text-on-dark-secondary);
    --mosaic-context-accent: var(--mosaic-accent-on-dark);

    color: var(--mosaic-context-body);
    background: linear-gradient(135deg, var(--mosaic-brand-dark), var(--mosaic-brand-mid));
    border-radius: var(--mosaic-radius-lg);
}

.mosaic-cta h2,
.mosaic-cta h3 {
    color: var(--mosaic-context-heading);
}

.mosaic-cta p {
    color: var(--mosaic-context-body);
}

.mosaic-cta .mosaic-eyebrow,
.mosaic-cta .mosaic-kicker {
    color: var(--mosaic-context-accent);
}

.mosaic-cta__inner {
    gap: 2rem;
}

.mosaic-cta--light {
    --mosaic-context-heading: var(--mosaic-brand-dark);
    --mosaic-context-body: var(--mosaic-text-secondary);
    --mosaic-context-accent: var(--mosaic-accent-strong);

    color: var(--mosaic-context-body);
    background: var(--mosaic-surface-soft);
    border: 1px solid var(--mosaic-border);
}

.mosaic-cta--light::before,
.mosaic-cta--light::after {
    display: none;
}

/* ==========================================================================
   11. MEDIA / GALLERIES / PLACEHOLDERS
   ========================================================================== */

.mosaic-page img {
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.mosaic-gallery {
    display: grid;
    gap: var(--space-4);
}

.mosaic-gallery--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.mosaic-gallery figure,
.mosaic-grid figure,
.mosaic-media-frame {
    min-width: 0;
}

.mosaic-gallery figure,
.mosaic-media-frame {
    display: grid;
    place-items: center;
    padding: var(--space-3);
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow-sm);
}

.mosaic-gallery img,
.mosaic-media-frame img,
.mosaic-grid figure img {
    width: 100%;
    max-height: 520px;
    object-fit: contain;
}

.mosaic-media-frame--diagram {
    background: var(--mosaic-surface-primary);
}

.mosaic-media-frame--diagram img,
.mosaic-media-frame--product img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.mosaic-media-frame--product {
    max-width: 30rem;
    margin-inline: auto;
}

.mosaic-media-group {
    margin-top: var(--space-6);
}

.mosaic-video {
    width: min(900px, 100%);
    margin-inline: auto;
}

.mosaic-video iframe,
.mosaic-video video {
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: var(--mosaic-radius);
}

.mosaic-image-label {
    display: inline-block;
    margin-bottom: var(--space-2);
    color: var(--mosaic-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.mosaic-image-label--good {
    color: var(--mosaic-success);
}

.mosaic-image-placeholder,
.mosaic-placeholder,
.mosaic-placeholder--image,
.mosaic-placeholder--diagram {
    min-height: 220px;
    display: grid;
    place-items: center;
    padding: var(--space-6);
    color: var(--mosaic-text-muted);
    background: var(--mosaic-surface-soft);
    border: 1px dashed var(--mosaic-border-strong);
    border-radius: var(--mosaic-radius);
    text-align: center;
}

/* ==========================================================================
   12. FEATURE ROWS / STEPS / TIMELINE
   ========================================================================== */

.mosaic-feature-row {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: center;
    padding-block: clamp(2rem, 4vw, 3.25rem);
    border-top: 1px solid var(--mosaic-border);
}

.mosaic-feature-row:first-of-type {
    border-top: 0;
}

.mosaic-feature-row > * {
    min-width: 0;
}

.mosaic-feature-row--reverse > :first-child {
    order: 2;
}

.mosaic-feature-row--numbered {
    grid-template-columns: 3rem minmax(180px, 0.55fr) minmax(0, 1.35fr);
    align-items: start;
}

.mosaic-feature-row__copy {
    min-width: 0;
}

.mosaic-number {
    display: grid;
    place-items: center;
    width: 2.7rem;
    height: 2.7rem;
    flex: 0 0 auto;
    color: var(--mosaic-action-text);
    background: var(--mosaic-action);
    border-radius: 50%;
    font-size: 0.84rem;
    font-weight: 850;
    line-height: 1;
}

.mosaic-steps {
    width: min(var(--mosaic-content), calc(100% - (2 * var(--mosaic-gutter))));
    margin-inline: auto;
}

.mosaic-step {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.8fr);
    gap: clamp(1.5rem, 4vw, 3.5rem);
    align-items: center;
    padding-block: clamp(1.6rem, 3vw, 2.6rem);
    border-top: 1px solid var(--mosaic-border);
}

.mosaic-step:nth-child(even) {
    grid-template-columns: minmax(280px, 0.8fr) minmax(0, 1fr);
}

.mosaic-step:nth-child(even) > :first-child {
    order: 2;
}

.mosaic-step > * {
    min-width: 0;
}

.mosaic-step img {
    width: 100%;
    max-height: 440px;
    padding: var(--space-3);
    object-fit: contain;
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
}

.mosaic-step-phase {
    display: flex;
    gap: var(--space-4);
    align-items: center;
    margin-bottom: var(--space-5);
}

.mosaic-footer-note {
    padding-block: var(--space-7);
    text-align: center;
    background: var(--mosaic-surface-soft);
    border-top: 1px solid var(--mosaic-border);
}

.mosaic-timeline {
    position: relative;
    display: grid;
    gap: var(--space-6);
}

.mosaic-timeline::before {
    content: "";
    position: absolute;
    top: 1.35rem;
    bottom: 1.35rem;
    left: 1.35rem;
    width: 1px;
    background: var(--mosaic-border-strong);
}

.mosaic-timeline__item {
    position: relative;
    display: grid;
    grid-template-columns: 2.7rem minmax(0, 1fr);
    gap: var(--space-5);
}

.mosaic-timeline__item > .mosaic-number {
    position: relative;
    z-index: 1;
}

/* ==========================================================================
   13. FAQ / SUBNAV / PROFILE / SPECS
   ========================================================================== */

.mosaic-faq {
    display: grid;
    gap: var(--space-4);
}

.mosaic-faq > article,
.mosaic-faq > section,
.mosaic-faq > details {
    overflow: hidden;
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow-sm);
}

.mosaic-faq > article,
.mosaic-faq > section {
    padding: clamp(1.2rem, 2.3vw, 1.8rem);
}

.mosaic-faq > details > summary {
    cursor: pointer;
    padding: 1rem 1.25rem;
    color: var(--mosaic-brand-dark);
    font-weight: 750;
    line-height: 1.35;
}

.mosaic-faq > details[open] > summary {
    border-bottom: 1px solid var(--mosaic-border);
    background: var(--mosaic-surface-soft);
}

.mosaic-faq > details > :not(summary) {
    margin-inline: 1.25rem;
}

.mosaic-faq > details > p:first-of-type {
    margin-top: 1rem;
}

.mosaic-faq > details > p:last-child {
    margin-bottom: 1.25rem;
}

.mosaic-subnav {
    position: sticky;
    top: 1rem;
    z-index: 5;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    padding: var(--space-3);
    background: color-mix(in srgb, var(--mosaic-surface-primary) 95%, transparent);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow-sm);
}

.mosaic-subnav a {
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.7rem;
    color: var(--mosaic-link);
    border-radius: var(--mosaic-radius-sm);
    font-weight: 700;
    text-decoration: none;
}

.mosaic-subnav a:hover,
.mosaic-subnav a:focus-visible {
    background: var(--mosaic-surface-soft);
}

.mosaic-profile {
    display: grid;
    grid-template-columns: minmax(220px, 0.55fr) minmax(0, 1.45fr);
    gap: clamp(2rem, 5vw, 4rem);
    align-items: start;
}

.mosaic-profile > * {
    min-width: 0;
}

.mosaic-spec-row {
    display: grid;
    grid-template-columns: minmax(130px, 0.45fr) minmax(0, 1fr);
    gap: var(--space-4);
    padding: 0.7rem 0;
    border-bottom: 1px solid var(--mosaic-border);
}

.mosaic-spec-label {
    color: var(--mosaic-text-muted);
    font-weight: 800;
}

.mosaic-spectrum {
    display: block;
    width: 100%;
    height: 0.65rem;
    margin: var(--space-5) 0;
    background: linear-gradient(
        90deg,
        var(--mosaic-spectrum-violet),
        var(--mosaic-spectrum-blue),
        var(--mosaic-spectrum-green),
        var(--mosaic-spectrum-gold),
        var(--mosaic-spectrum-red)
    );
    border-radius: 999px;
}

.mosaic-feature-group + .mosaic-feature-group {
    margin-top: var(--space-7);
}

/* ==========================================================================
   14. SLIDESHOW / CAROUSEL
   ========================================================================== */

.mosaic-slideshow {
    position: relative;
    min-height: 370px;
    overflow: hidden;
    background: var(--mosaic-surface-soft);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius-lg);
    box-shadow: var(--mosaic-shadow-sm);
}

.mosaic-slideshow__slide {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    padding: var(--space-5);
    opacity: 0;
    animation: mosaic-slides 24s infinite;
}

.mosaic-slideshow__slide img {
    width: 100%;
    height: 330px;
    object-fit: contain;
}

.mosaic-slideshow__slide--1 { animation-delay: 0s; }
.mosaic-slideshow__slide--2 { animation-delay: 6s; }
.mosaic-slideshow__slide--3 { animation-delay: 12s; }
.mosaic-slideshow__slide--4 { animation-delay: 18s; }

@keyframes mosaic-slides {
    0%, 22% { opacity: 1; }
    27%, 95% { opacity: 0; }
    100% { opacity: 1; }
}

.mosaic-carousel {
    overflow: hidden;
    margin: var(--space-7) 0;
    padding: var(--space-4) 0;
}

.mosaic-carousel__track {
    width: max-content;
    display: flex;
    gap: var(--space-5);
    animation: mosaic-carousel-track 28s linear infinite;
}

.mosaic-carousel__track figure {
    width: clamp(220px, 28vw, 340px);
    height: 250px;
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
}

.mosaic-carousel__track img {
    width: 100%;
    height: 215px;
    object-fit: contain;
}

@keyframes mosaic-carousel-track {
    to { transform: translateX(calc(-50% - 0.75rem)); }
}

/* ==========================================================================
   15. LISTS
   ========================================================================== */

.mosaic-list {
    padding-left: 1.25rem;
}

.mosaic-list li {
    margin-bottom: var(--space-2);
}

/* ==========================================================================
   16. HEADER / NAVIGATION
   ========================================================================== */

.container-header {
    position: relative;
    z-index: 1000;
    overflow: visible;
    color: var(--mosaic-text-on-dark);
    background: linear-gradient(
        135deg,
        var(--mosaic-header-start),
        var(--mosaic-header-end)
    );
    box-shadow: var(--mosaic-shadow-sm);
}

.container-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/texture/voronoi-dark-medium-seamless.svg");
    background-repeat: repeat;
    background-size: var(--mosaic-texture-size) auto;
    background-position: center;
    opacity: 0.55;
    pointer-events: none;
    z-index: 0;
}

.container-header > * {
    position: relative;
    z-index: 1;
}

.container-header .grid-child {
    width: min(var(--mosaic-content), calc(100% - (2 * var(--mosaic-gutter))));
    margin-inline: auto;
}

.container-header .navbar-brand,
.container-header .site-description {
    color: var(--mosaic-text-on-dark);
}

.container-header .navbar-brand img {
    width: auto;
    max-height: 66px;
    object-fit: contain;
}

.container-header .mod-menu {
    gap: 0.15rem;
}

.container-header .mod-menu > li > a,
.container-header .mod-menu > li > button,
.container-header .metismenu > li > a,
.container-header .metismenu > li > button {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.55rem 0.75rem;
    color: var(--mosaic-header-text);
    border-radius: var(--mosaic-radius-sm);
    font-weight: 650;
    text-decoration: none;
    transition: background var(--mosaic-transition), color var(--mosaic-transition);
}

.container-header .mod-menu > li > a:hover,
.container-header .mod-menu > li > a:focus-visible,
.container-header .metismenu > li > a:hover,
.container-header .metismenu > li > a:focus-visible,
.container-header .metismenu > li.active > a {
    color: var(--mosaic-text-on-dark);
    background: var(--mosaic-header-hover);
}

.container-header .metismenu.mod-menu .mm-collapse {
    color: var(--mosaic-text-primary);
    background: var(--mosaic-surface-primary);
    border: 1px solid var(--mosaic-border);
    border-radius: var(--mosaic-radius);
    box-shadow: var(--mosaic-shadow);
}

.container-header .metismenu.mod-menu .mm-collapse a {
    color: var(--mosaic-text-primary);
}

.container-header .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
    color: var(--mosaic-text-on-dark);
    border-color: rgb(255 255 255 / 35%);
}

@media (min-width: 821px) {
    .container-header,
    .container-header .container-nav,
    .container-header nav,
    .container-header .navbar-collapse,
    .container-header .mod-menu {
        overflow: visible;
    }

    .container-header .metismenu.mod-menu {
        display: flex;
        align-items: center;
    }

    .container-header .metismenu.mod-menu > .metismenu-item {
        position: relative;
    }

    .container-header .metismenu.mod-menu > .metismenu-item > .mm-collapse {
        position: absolute;
        top: calc(100% - 1px);
        left: 0;
        z-index: 3000;
        display: block !important;
        min-width: 250px;
        height: auto !important;
        margin: 0;
        padding: 0.45rem 0;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        transform: translateY(7px);
        pointer-events: none;
        transition:
            opacity 160ms ease,
            visibility 160ms ease,
            transform 160ms ease;
    }

    .container-header .metismenu.mod-menu > .metismenu-item:hover > .mm-collapse,
    .container-header .metismenu.mod-menu > .metismenu-item:focus-within > .mm-collapse {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        pointer-events: auto;
    }

    .container-header .metismenu.mod-menu > .metismenu-item > .mm-collapse > li {
        display: block;
        width: 100%;
    }

    .container-header .metismenu.mod-menu > .metismenu-item > .mm-collapse a {
        display: block;
        width: 100%;
        padding: 0.7rem 1rem;
        color: var(--mosaic-text-primary);
        line-height: 1.35;
        text-decoration: none;
        white-space: nowrap;
    }

    .container-header .metismenu.mod-menu > .metismenu-item > .mm-collapse a:hover,
    .container-header .metismenu.mod-menu > .metismenu-item > .mm-collapse a:focus-visible {
        color: var(--mosaic-brand-dark);
        background: var(--mosaic-surface-soft);
    }

    .container-header .metismenu.mod-menu > .metismenu-item > .mm-toggler {
        display: none !important;
    }

    .container-header .metismenu.mod-menu > .metismenu-item > a {
        width: auto;
        padding-right: 0.75rem;
    }
}

/* ==========================================================================
   17. FOOTER
   ========================================================================== */

.container-footer {
    position: relative;
    overflow: hidden;
    margin-top: 0;
    padding: 0;
    color: var(--mosaic-text-on-dark-secondary);
    background: linear-gradient(
        135deg,
        var(--mosaic-footer-start),
        var(--mosaic-footer-end)
    );
}

.container-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("/images/texture/voronoi-dark-medium-seamless.svg");
    background-repeat: repeat;
    background-size: var(--mosaic-texture-size) auto;
    background-position: center;
    opacity: 0.38;
    pointer-events: none;
    z-index: 0;
}

.container-footer > * {
    position: relative;
    z-index: 1;
}

.container-footer .grid-child {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
}

.container-footer a {
    color: var(--mosaic-text-on-dark);
}

.mosaic-site-footer {
    position: relative;
    overflow: visible;
    width: 100%;
    margin: 0;
    color: var(--mosaic-text-on-dark-secondary);
    background: transparent;
}

.mosaic-site-footer::before {
    display: none;
}

.mosaic-site-footer > * {
    position: relative;
    z-index: 1;
}

.mosaic-footer-grid {
    display: grid;
    grid-template-columns: minmax(260px, 1.5fr) repeat(3, minmax(150px, 1fr));
    gap: clamp(2rem, 4vw, 4rem);
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(2.75rem, 5vw, 4.25rem);
}

.mosaic-footer-brand {
    max-width: 34rem;
}

.mosaic-footer-name {
    margin: 0 0 1rem;
    color: var(--mosaic-text-on-dark);
    font-size: clamp(1.45rem, 2vw, 1.9rem);
    font-weight: 800;
    line-height: 1.15;
}

.mosaic-footer-brand p:not(.mosaic-footer-name) {
    margin: 0;
    max-width: 31rem;
    color: var(--mosaic-text-on-dark-muted);
    line-height: 1.75;
}

.mosaic-footer-column h2 {
    margin: 0 0 1rem;
    color: rgb(255 255 255 / 94%);
    font-size: 0.78rem;
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.mosaic-footer-column ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.mosaic-footer-column li + li {
    margin-top: 0.6rem;
}

.mosaic-footer-column a {
    color: var(--mosaic-text-on-dark-muted);
    text-decoration: none;
    transition: color var(--mosaic-transition);
}

.mosaic-footer-column a:hover,
.mosaic-footer-column a:focus-visible {
    color: var(--mosaic-text-on-dark);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.mosaic-footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding-top: 1.4rem;
    padding-bottom: 1.4rem;
    border-top: 1px solid rgb(255 255 255 / 12%);
}

.mosaic-footer-bottom p {
    margin: 0;
    color: var(--mosaic-text-on-dark-faint);
    font-size: 0.86rem;
}

.mosaic-footer-tagline {
    text-align: right;
    letter-spacing: 0.05em;
}

/* ==========================================================================
   18. ACCESSIBILITY
   ========================================================================== */

a:focus-visible,
button:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--mosaic-accent) 48%, transparent);
    outline-offset: 3px;
}

/* ==========================================================================
   19. RESPONSIVE
   ========================================================================== */

@media (max-width: 1100px) {
    .mosaic-grid--4,
    .mosaic-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .container-header .navbar-brand img {
        max-height: 58px;
    }
}

@media (max-width: 1000px) {
    .mosaic-footer-grid {
        grid-template-columns: 1.5fr repeat(2, 1fr);
    }

    .mosaic-footer-brand {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    .mosaic-media-group > .mosaic-grid--3 {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 820px) {
    :root {
        --mosaic-gutter: 1rem;
        --mosaic-texture-size: 700px;
    }

    .mosaic-split,
    .mosaic-split--wide-media,
    .mosaic-split--product,
    .mosaic-section-header,
    .mosaic-section-heading,
    .mosaic-feature-row,
    .mosaic-feature-row--numbered,
    .mosaic-profile,
    .mosaic-step,
    .mosaic-step:nth-child(even) {
        grid-template-columns: 1fr;
    }

    .mosaic-feature-row--reverse > :first-child,
    .mosaic-step:nth-child(even) > :first-child {
        order: initial;
    }

    .mosaic-section-header,
    .mosaic-section-heading {
        align-items: start;
    }

    .mosaic-cta {
        flex-direction: column;
        align-items: flex-start;
    }

    .mosaic-subnav {
        position: static;
    }

    .mosaic-hero::after,
    .mosaic-section--dark::after,
    .mosaic-cta:not(.mosaic-cta--light)::after {
        opacity: 0.72;
    }

    .container-header .mod-menu > li > a,
    .container-header .metismenu > li > a {
        width: 100%;
    }

    .mosaic-grid--spaced .mosaic-card {
        min-height: auto;
    }

    .mosaic-media-frame--product {
        max-width: 24rem;
    }
}

@media (max-width: 700px) {
    .mosaic-footer-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        padding-top: 3rem;
        padding-bottom: 2.5rem;
    }

    .mosaic-footer-brand {
        grid-column: auto;
    }

    .mosaic-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
    }

    .mosaic-footer-tagline {
        text-align: left;
    }
}

@media (max-width: 600px) {
    .mosaic-grid--2,
    .mosaic-grid--3,
    .mosaic-grid--4,
    .mosaic-gallery--2,
    .mosaic-hero__media {
        grid-template-columns: 1fr;
    }

    .mosaic-hero__media-main {
        grid-row: auto;
    }

    .mosaic-hero {
        padding-block: 3.5rem;
    }

    .mosaic-section {
        padding-block: 3rem;
    }

    .mosaic-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .mosaic-actions .mosaic-button {
        width: 100%;
    }

    .mosaic-card {
        padding-right: 4rem;
    }

    .mosaic-card::before {
        top: 14px;
        right: 14px;
        width: 56px;
    }

    .mosaic-card__media {
        margin-right: -4rem;
    }

    .mosaic-slideshow {
        min-height: 300px;
    }

    .mosaic-slideshow__slide img {
        height: 260px;
    }

    .mosaic-carousel__track figure {
        width: 220px;
        height: 220px;
    }

    .mosaic-carousel__track img {
        height: 185px;
    }

    .mosaic-timeline::before {
        display: none;
    }

    .mosaic-timeline__item {
        grid-template-columns: 1fr;
    }

    .mosaic-spec-row {
        grid-template-columns: 1fr;
        gap: 0.1rem;
    }
}

/* ==========================================================================
   20. REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        scroll-behavior: auto;
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }

    .mosaic-slideshow__slide {
        position: static;
        display: none;
        opacity: 1;
    }

    .mosaic-slideshow__slide:first-child {
        display: grid;
    }

    .mosaic-carousel__track {
        width: auto;
        flex-wrap: wrap;
        justify-content: center;
        animation: none;
    }

    .mosaic-carousel__track figure[aria-hidden="true"] {
        display: none;
    }
}