/* ==========================================================
   AMARI CMS BLOCKS
   StreamField blocks for WebPage, built on the homepage design
   language (home.css: --amari-* tokens, pill eyebrows and
   buttons, rounded cards with soft shadows, 64/96/120 rhythm).
   ========================================================== */

.cms-section,
.cms-page-header,
.cms-page-title-band {
    --cms-primary: var(--amari-primary, #801517);
    --cms-primary-dark: var(--amari-primary-dark, #651113);
    --cms-primary-light: var(--amari-primary-light, #f9eeee);
    --cms-tint: #f9efee;
    --cms-text: var(--amari-text, #111827);
    --cms-muted: var(--amari-text-light, #6b7280);
    --cms-bg: var(--amari-bg, #fafafa);
    --cms-border: var(--amari-border, #ececec);
    --cms-border-hover: rgba(128, 21, 23, .18);
    --cms-radius-sm: 14px;
    --cms-radius: 18px;
    --cms-radius-md: 22px;
    --cms-radius-lg: 28px;
    --cms-shadow-sm: var(--amari-shadow-sm, 0 6px 20px rgba(15, 23, 42, .05));
    --cms-shadow: var(--amari-shadow, 0 15px 45px rgba(15, 23, 42, .08));
    --cms-ease: var(--amari-transition, .28s cubic-bezier(.2, .8, .2, 1));
    --cms-py: var(--amari-section-py, 64px);
    --cms-py-md: var(--amari-section-py-md, 96px);
    --cms-py-lg: var(--amari-section-py-lg, 120px);
    /* Inverse palette, used on brand and dark backgrounds */
    --cms-on-dark: #fff;
    --cms-on-dark-muted: rgba(255, 241, 241, .82);
}

.cms-section {
    position: relative;
    color: var(--cms-text);
}

/* ---------- Browser surfaces ---------- */

.cms-section ::selection,
.cms-page-header ::selection {
    background: #f3d3d4;
    color: #4a0c0e;
}

.cms-section a:focus-visible,
.cms-section summary:focus-visible,
.cms-section button:focus-visible,
.cms-page-header a:focus-visible {
    outline: 3px solid rgba(128, 21, 23, .35);
    outline-offset: 3px;
    border-radius: 10px;
}

.cms-bg-brand a:focus-visible,
.cms-bg-dark a:focus-visible {
    outline-color: rgba(255, 255, 255, .7);
}

/* ==========================================================
   Section rhythm (SectionSettings.spacing)
   ========================================================== */

.cms-space-none { padding-top: 0; padding-bottom: 0; }
.cms-space-compact { padding-top: 40px; padding-bottom: 40px; }
.cms-space-normal { padding-top: var(--cms-py); padding-bottom: var(--cms-py); }
.cms-space-large { padding-top: 88px; padding-bottom: 88px; }

@media (min-width: 768px) {
    .cms-space-compact { padding-top: 56px; padding-bottom: 56px; }
    .cms-space-normal { padding-top: var(--cms-py-md); padding-bottom: var(--cms-py-md); }
    .cms-space-large { padding-top: 128px; padding-bottom: 128px; }
}

@media (min-width: 1200px) {
    .cms-space-compact { padding-top: 64px; padding-bottom: 64px; }
    .cms-space-normal { padding-top: var(--cms-py-lg); padding-bottom: var(--cms-py-lg); }
    .cms-space-large { padding-top: 160px; padding-bottom: 160px; }
}

/* ==========================================================
   Backgrounds (SectionSettings.background)
   ========================================================== */

.cms-bg-white { background: #fff; }
.cms-bg-light { background: var(--cms-bg); }

.cms-bg-brand {
    background: linear-gradient(135deg, var(--cms-primary) 0%, #a61d22 100%);
    color: var(--cms-on-dark);
}

.cms-bg-dark {
    background: #1b0d0e;
    color: var(--cms-on-dark);
}

.cms-bg-brand :is(h1, h2, h3, h4, strong),
.cms-bg-dark :is(h1, h2, h3, h4, strong) {
    color: var(--cms-on-dark);
}

.cms-bg-brand :is(p, li, figcaption),
.cms-bg-dark :is(p, li, figcaption) {
    color: var(--cms-on-dark-muted);
}

/* Cards keep their own light surface on dark sections */
.cms-bg-brand .cms-surface :is(h1, h2, h3, h4, strong),
.cms-bg-dark .cms-surface :is(h1, h2, h3, h4, strong) {
    color: var(--cms-text);
}

.cms-bg-brand .cms-surface :is(p, li, figcaption),
.cms-bg-dark .cms-surface :is(p, li, figcaption) {
    color: var(--cms-muted);
}

/* ==========================================================
   Section header (SectionHeader)
   ========================================================== */

.cms-section-header {
    max-width: 760px;
    margin: 0 auto 48px;
    text-align: center;
}

.cms-section-header.text-start {
    margin-left: 0;
    text-align: left;
}

.cms-eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 8px 16px;
    margin-bottom: 18px;
    border-radius: 999px;
    background: var(--cms-primary-light);
    color: var(--cms-primary);
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.cms-bg-brand .cms-eyebrow,
.cms-bg-dark .cms-eyebrow {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.cms-section-header h2,
.cms-section-header h3 {
    margin: 0 0 16px;
    color: var(--cms-text);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -.02em;
    text-wrap: balance;
}

.cms-section-header h2 { font-size: 2rem; }
.cms-section-header h3 { font-size: 1.6rem; }

.cms-section-header p {
    max-width: 720px;
    margin: 0 auto;
    color: var(--cms-muted);
    font-size: 1.05rem;
    line-height: 1.8;
    text-wrap: pretty;
}

.cms-section-header.text-start p {
    margin-left: 0;
}

.cms-bg-brand .cms-section-header :is(h2, h3),
.cms-bg-dark .cms-section-header :is(h2, h3) {
    color: #fff;
}

.cms-bg-brand .cms-section-header p,
.cms-bg-dark .cms-section-header p {
    color: var(--cms-on-dark-muted);
}

@media (min-width: 768px) {
    .cms-section-header h2 { font-size: 2.5rem; }
    .cms-section-header h3 { font-size: 1.9rem; }
}

/* ==========================================================
   Buttons and links (LinkBlock styles)
   Primary and outline reuse the homepage's amari-home-btn-*
   ========================================================== */

.cms-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px;
    margin-top: 32px;
}

.cms-text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cms-primary);
    font-weight: 700;
    text-decoration: underline;
    text-decoration-thickness: 2px;
    text-decoration-color: rgba(128, 21, 23, .25);
    text-underline-offset: 5px;
    transition: text-decoration-color var(--cms-ease), color var(--cms-ease);
}

.cms-text-link:hover {
    color: var(--cms-primary-dark);
    text-decoration-color: currentColor;
}

/* On brand and dark sections: inverse buttons, as in the homepage final CTA */
.cms-bg-brand .amari-home-btn-primary,
.cms-bg-dark .amari-home-btn-primary {
    background: #fff;
    color: var(--cms-primary);
}

.cms-bg-brand .amari-home-btn-primary:hover,
.cms-bg-dark .amari-home-btn-primary:hover {
    background: #f6eaea;
    color: var(--cms-primary-dark);
}

.cms-bg-brand .amari-home-btn-outline,
.cms-bg-dark .amari-home-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.cms-bg-brand .amari-home-btn-outline:hover,
.cms-bg-dark .amari-home-btn-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--cms-primary);
}

.cms-bg-brand .cms-text-link,
.cms-bg-dark .cms-text-link {
    color: #fff;
    text-decoration-color: rgba(255, 255, 255, .45);
}

/* ==========================================================
   Shared grids and cards
   ========================================================== */

.cms-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
}

@media (min-width: 768px) {
    .cms-grid-2,
    .cms-grid-3,
    .cms-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (min-width: 1200px) {
    .cms-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
    .cms-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
}

.cms-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    box-shadow: var(--cms-shadow-sm);
    color: var(--cms-text);
    text-decoration: none;
    transition: transform var(--cms-ease), box-shadow var(--cms-ease), border-color var(--cms-ease);
}

a.cms-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cms-shadow);
    border-color: var(--cms-border-hover);
    color: var(--cms-text);
}

.cms-card-media {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: var(--cms-tint);
}

.cms-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

a.cms-card:hover .cms-card-media img {
    transform: scale(1.05);
}

.cms-card-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 24px;
}

.cms-card-title {
    margin: 0 0 10px;
    color: var(--cms-text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.35;
}

.cms-card-body p {
    margin: 0 0 18px;
    color: var(--cms-muted);
    font-size: .96rem;
    line-height: 1.75;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.cms-card-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: auto;
    color: var(--cms-primary);
    font-weight: 700;
    transition: gap var(--cms-ease);
}

a.cms-card:hover .cms-card-more {
    gap: 10px;
}

.cms-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 160px;
    margin: 0;
    padding: 24px;
    border: 2px dashed var(--cms-border);
    border-radius: var(--cms-radius);
    color: var(--cms-muted);
    text-align: center;
}

/* ==========================================================
   Page header (page_header) and fallback title band
   ========================================================== */

.cms-page-header,
.cms-page-title-band {
    background: linear-gradient(135deg, var(--cms-primary) 0%, #932d30 55%, #a61d22 100%);
    color: #fff;
}

.cms-page-header.cms-bg-light {
    background: linear-gradient(180deg, #fff 0%, var(--cms-tint) 100%);
    color: var(--cms-text);
}

.cms-page-header.cms-bg-dark {
    background: #1b0d0e;
}

.cms-page-header-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.cms-page-header h1,
.cms-page-title {
    margin: 0 0 16px;
    color: #fff;
    font-size: 2.3rem;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.cms-page-header-sub {
    max-width: 640px;
    margin: 0 0 24px;
    color: rgba(255, 241, 241, .88);
    font-size: 1.1rem;
    line-height: 1.75;
}

.cms-page-header .page-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 0;
    margin: 0;
    padding: 0;
    background: none;
}

.page-banner-section.cms-page-header .banner-content .page-breadcrumb nav ol li {
    color: rgba(255, 241, 241, .72);
    font-size: .95rem;
    font-weight: 500;
}

.page-banner-section.cms-page-header .banner-content .page-breadcrumb nav ol li a {
    color: #fff;
    text-decoration: none;
}

.page-banner-section.cms-page-header .banner-content .page-breadcrumb nav ol li a:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.cms-page-header.cms-bg-light h1 { color: var(--cms-text); }
.cms-page-header.cms-bg-light .cms-page-header-sub { color: var(--cms-muted); }
.page-banner-section.cms-page-header.cms-bg-light .banner-content .page-breadcrumb nav ol li { color: var(--cms-muted); }
.page-banner-section.cms-page-header.cms-bg-light .banner-content .page-breadcrumb nav ol li::before { color: var(--cms-muted); }
.page-banner-section.cms-page-header.cms-bg-light .banner-content .page-breadcrumb nav ol li a { color: var(--cms-primary); }

.cms-page-header-media img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--cms-radius-lg);
    box-shadow: 0 24px 60px rgba(40, 4, 6, .35);
}

.cms-page-header.cms-bg-light .cms-page-header-media img {
    box-shadow: var(--cms-shadow);
}

.cms-page-title-band {
    padding: 56px 0;
}

.cms-page-title {
    margin: 0;
}

@media (min-width: 768px) {
    .cms-page-header h1,
    .cms-page-title { font-size: 3rem; }
}

@media (min-width: 1200px) {
    .cms-page-header-grid.has-media {
        grid-template-columns: minmax(0, 1fr) 520px;
        gap: 72px;
    }
    .cms-page-header h1,
    .cms-page-title { font-size: 3.4rem; }
    .cms-page-title-band { padding: 80px 0; }
}

/* ==========================================================
   Hero (hero)
   ========================================================== */

.cms-hero.cms-bg-white {
    background: linear-gradient(180deg, #fff 0%, var(--cms-bg) 100%);
}

.cms-hero.page-banner-section {
    /* first block: clear the fixed navbar the way page-banner-section does */
    padding-top: calc(var(--cms-py) * .75);
}

.cms-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 48px;
    align-items: center;
}

.cms-hero h1 {
    margin: 0 0 18px;
    color: var(--cms-text);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.03em;
    text-wrap: balance;
}

.cms-hero-sub {
    margin: 0 0 16px;
    color: var(--cms-primary);
    font-size: 1.2rem;
    font-weight: 600;
    line-height: 1.5;
}

.cms-hero-body {
    max-width: 620px;
    margin: 0;
    color: var(--cms-muted);
    font-size: 1.05rem;
    line-height: 1.9;
}

.cms-bg-brand .cms-hero-sub,
.cms-bg-dark .cms-hero-sub {
    color: #ffd9da;
}

.cms-hero-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow);
}

@media (min-width: 768px) {
    .cms-hero h1 { font-size: 3rem; }
}

@media (min-width: 1200px) {
    .cms-hero-grid.has-media {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 72px;
    }
    .cms-hero h1 { font-size: 3.5rem; }
}

/* ==========================================================
   Rich text (rich_text) and text + image (text_image)
   Typography comes from .amari-richtext (product pages)
   ========================================================== */

.cms-rich-text .container > .cms-section-header,
.cms-rich-text .cms-prose {
    max-width: 780px;
    margin-left: auto;
    margin-right: auto;
}

.cms-prose > :first-child { margin-top: 0; }
.cms-prose > :last-child { margin-bottom: 0; }

.cms-prose a {
    color: var(--cms-primary);
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: rgba(128, 21, 23, .3);
    text-underline-offset: 4px;
}

.cms-prose a:hover { text-decoration-color: currentColor; }

.cms-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--cms-radius);
}

.cms-bg-brand .cms-prose,
.cms-bg-dark .cms-prose { color: var(--cms-on-dark-muted); }

.cms-bg-brand .cms-prose :is(h2, h3, h4),
.cms-bg-dark .cms-prose :is(h2, h3, h4) { color: #fff; }

.cms-bg-brand .cms-prose a,
.cms-bg-dark .cms-prose a { color: #fff; }

.cms-text-image-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.cms-text-image-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow);
}

.cms-text-image .cms-section-header {
    margin: 0 0 24px;
    text-align: left;
}

.cms-text-image .cms-section-header p {
    margin-left: 0;
}

@media (min-width: 992px) {
    .cms-text-image-grid {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 72px;
    }
}

/* ==========================================================
   Image (image)
   ========================================================== */

.cms-figure {
    margin: 0;
}

.cms-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-sm);
}

.cms-figure-full img {
    border-radius: 0;
    box-shadow: none;
}

.cms-caption {
    max-width: 720px;
    margin: 14px auto 0;
    padding: 0 16px;
    color: var(--cms-muted);
    font-size: .92rem;
    line-height: 1.6;
    text-align: center;
}

/* ==========================================================
   Callout (callout)
   ========================================================== */

.cms-callout {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    color: var(--cms-text);
}

.cms-callout-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--cms-primary-light);
    color: var(--cms-primary);
    font-size: 22px;
}

.cms-callout-title {
    margin: 4px 0 6px;
    color: var(--cms-text);
    font-size: 1.05rem;
    font-weight: 700;
}

.cms-callout-text {
    color: #4b5563;
    line-height: 1.75;
}

.cms-callout-text > :last-child { margin-bottom: 0; }

.cms-callout-text a {
    color: var(--cms-primary);
    font-weight: 600;
    text-underline-offset: 3px;
}

.cms-callout-success { background: #f1faf4; border-color: #d4efdd; }
.cms-callout-success .cms-callout-icon { background: #dcf3e4; color: #17733f; }

.cms-callout-warning { background: #fff8ec; border-color: #f6e2bd; }
.cms-callout-warning .cms-callout-icon { background: #fcebcc; color: #995605; }

.cms-callout-disclaimer {
    background: #fffdfd;
    border-color: #efe7e7;
    box-shadow: none;
}
.cms-callout-disclaimer .cms-callout-icon { background: #f4eeee; color: #6b4a4b; }
.cms-callout-disclaimer .cms-callout-text { color: #5b6170; font-size: .92rem; }

/* The callout keeps its light surface on dark sections */
.cms-bg-brand .cms-callout :is(p, li),
.cms-bg-dark .cms-callout :is(p, li) { color: #4b5563; }
.cms-bg-brand .cms-callout-title,
.cms-bg-dark .cms-callout-title { color: var(--cms-text); }

@media (min-width: 768px) {
    .cms-callout { padding: 28px 32px; gap: 22px; }
}

/* ==========================================================
   Table of contents (table_of_contents)
   ========================================================== */

.cms-toc-card {
    max-width: 780px;
    margin: 0 auto;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
}

.cms-toc-title {
    margin: 0 0 14px;
    color: var(--cms-muted);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cms-toc-list {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 4px 32px;
    margin: 0;
    padding-left: 1.4em;
    color: var(--cms-primary);
    font-weight: 700;
}

.cms-toc-list li {
    padding: 6px 0;
}

.cms-toc-list a {
    color: var(--cms-text);
    font-weight: 600;
    text-decoration: none;
    transition: color var(--cms-ease);
}

.cms-toc-list a:hover {
    color: var(--cms-primary);
    text-decoration: underline;
    text-underline-offset: 4px;
}

@media (min-width: 768px) {
    .cms-toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ==========================================================
   Features (features) — homepage capability cards
   ========================================================== */

.cms-feature {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 32px 28px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    box-shadow: var(--cms-shadow-sm);
    transition: transform var(--cms-ease), box-shadow var(--cms-ease), border-color var(--cms-ease);
}

.cms-feature:hover {
    transform: translateY(-6px);
    box-shadow: var(--cms-shadow);
    border-color: var(--cms-border-hover);
}

.cms-feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 20px;
    background: var(--cms-primary-light);
    color: var(--cms-primary);
    font-size: 28px;
    transition: background var(--cms-ease), color var(--cms-ease), transform var(--cms-ease);
}

.cms-feature:hover .cms-feature-icon {
    background: var(--cms-primary);
    color: #fff;
    transform: rotate(-6deg) scale(1.05);
}

.cms-feature-title {
    margin: 0 0 12px;
    color: var(--cms-text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.cms-feature p {
    flex: 1;
    margin: 0;
    color: var(--cms-muted);
    font-size: .96rem;
    line-height: 1.8;
}

.cms-feature-link {
    margin-top: 20px;
}

/* ==========================================================
   Stats (stats) — homepage stats band
   ========================================================== */

.cms-stats-panel {
    padding: 40px 24px;
    background: var(--cms-tint);
    border-radius: var(--cms-radius-lg);
}

.cms-bg-brand .cms-stats-panel,
.cms-bg-dark .cms-stats-panel {
    padding: 0;
    background: none;
}

.cms-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-stat-item {
    text-align: center;
}

.cms-stat-number {
    display: block;
    margin-bottom: 8px;
    color: var(--cms-primary);
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.02em;
    font-variant-numeric: tabular-nums;
}

.cms-stat-label {
    display: block;
    color: var(--cms-primary);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
}

.cms-bg-brand .cms-stat-number,
.cms-bg-dark .cms-stat-number { color: #fff; }
.cms-bg-brand .cms-stat-label,
.cms-bg-dark .cms-stat-label { color: var(--cms-on-dark-muted); }

@media (min-width: 992px) {
    .cms-stats-panel { padding: 56px 32px; }
    .cms-stats-grid { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 0; }
    .cms-stat-item + .cms-stat-item { border-left: 1px solid rgba(128, 21, 23, .14); }
    .cms-bg-brand .cms-stat-item + .cms-stat-item,
    .cms-bg-dark .cms-stat-item + .cms-stat-item { border-left-color: rgba(255, 255, 255, .2); }
    .cms-stat-number { font-size: 2.75rem; }
}

/* ==========================================================
   Process steps (process_steps) — homepage process timeline
   ========================================================== */

.cms-steps-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-step {
    position: relative;
    z-index: 1;
    height: 100%;
    padding: 30px 26px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    box-shadow: var(--cms-shadow-sm);
    transition: transform var(--cms-ease), box-shadow var(--cms-ease), border-color var(--cms-ease);
}

.cms-step:hover {
    transform: translateY(-6px);
    box-shadow: var(--cms-shadow);
    border-color: var(--cms-border-hover);
}

.cms-step-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin-bottom: 22px;
    border-radius: 50%;
    background: var(--cms-primary-light);
    color: var(--cms-primary);
    font-size: 1.35rem;
    font-weight: 800;
    font-variant-numeric: tabular-nums;
    transition: background var(--cms-ease), color var(--cms-ease), transform var(--cms-ease);
}

.cms-step:hover .cms-step-number {
    background: var(--cms-primary);
    color: #fff;
    transform: scale(1.06);
}

.cms-step-title {
    margin: 0 0 12px;
    color: var(--cms-text);
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;
}

.cms-step p {
    margin: 0;
    color: var(--cms-muted);
    font-size: .96rem;
    line-height: 1.8;
}

@media (min-width: 768px) {
    .cms-steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
}

@media (min-width: 1200px) {
    .cms-steps-grid {
        grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
        gap: 24px;
    }
    .cms-steps-grid::before {
        content: "";
        position: absolute;
        top: 62px;
        left: 10%;
        right: 10%;
        z-index: 0;
        height: 2px;
        background: linear-gradient(to right, var(--cms-primary), rgba(128, 21, 23, .18));
    }
    .cms-step {
        padding: 30px 24px;
        text-align: center;
    }
    .cms-step-number { margin: 0 auto 22px; }
}

/* ==========================================================
   Comparison table (comparison_table)
   ========================================================== */

.cms-comparison-table-wrap {
    overflow-x: auto;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
}

.cms-comparison-table-wrap table {
    width: 100%;
    min-width: 560px;
    margin: 0;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.cms-comparison-table-wrap th,
.cms-comparison-table-wrap td {
    padding: 16px 20px;
    border-bottom: 1px solid #f1f1f1;
    color: #374151;
    font-size: .96rem;
    line-height: 1.5;
    text-align: left;
    vertical-align: top;
}

.cms-comparison-table-wrap thead th {
    background: var(--cms-primary);
    border-bottom: none;
    color: #fff;
    font-size: .82rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

.cms-comparison-table-wrap tbody th,
.cms-comparison-table-wrap tbody td:first-child {
    color: var(--cms-text);
    font-weight: 700;
}

.cms-comparison-table-wrap tbody tr:last-child td,
.cms-comparison-table-wrap tbody tr:last-child th { border-bottom: none; }

.cms-comparison-table-wrap tbody tr:hover td,
.cms-comparison-table-wrap tbody tr:hover th { background: #fdf7f7; }

.cms-comparison-table-wrap caption {
    caption-side: bottom;
    padding: 14px 20px;
    border-top: 1px solid #f1f1f1;
    color: var(--cms-muted);
    font-size: .88rem;
    text-align: left;
}

/* ==========================================================
   CTA banner (cta_banner) — homepage final CTA card
   ========================================================== */

.cms-cta-card {
    display: flex;
    flex-direction: column;
    gap: 28px;
    padding: 40px 28px;
    background: linear-gradient(135deg, var(--cms-primary) 0%, #a61d22 100%);
    border-radius: var(--cms-radius-lg);
    box-shadow: 0 20px 60px rgba(128, 21, 23, .28);
    color: #fff;
}

/* Bootstrap's .text-center is !important; inside the CTA card and the
   text + image column the header always aligns with the copy below it */
.cms-cta-card .cms-section-header,
.cms-text-image .cms-section-header {
    text-align: left !important;
}

.cms-cta-card .cms-section-header {
    max-width: 700px;
    margin: 0;
}

.cms-cta-card .cms-section-header :is(h2, h3) { color: #fff; }

.cms-cta-card .cms-section-header p,
.cms-cta-banner-text {
    margin: 0;
    color: rgba(255, 241, 241, .9);
    line-height: 1.8;
}

.cms-cta-banner-text { margin-top: 12px; max-width: 700px; }

.cms-cta-card .cms-eyebrow {
    background: rgba(255, 255, 255, .14);
    color: #fff;
}

.cms-cta-card .cms-actions { margin-top: 0; flex-shrink: 0; }

.cms-cta-card .amari-home-btn-primary {
    background: #fff;
    color: var(--cms-primary);
}

.cms-cta-card .amari-home-btn-primary:hover {
    background: #f6eaea;
    color: var(--cms-primary-dark);
}

.cms-cta-card .amari-home-btn-outline {
    background: transparent;
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
}

.cms-cta-card .amari-home-btn-outline:hover {
    background: #fff;
    border-color: #fff;
    color: var(--cms-primary);
}

.cms-cta-card .cms-text-link { color: #fff; text-decoration-color: rgba(255, 255, 255, .45); }

/* On a brand section the card becomes a quiet frame instead of a second slab */
.cms-bg-brand .cms-cta-card,
.cms-bg-dark .cms-cta-card {
    background: rgba(255, 255, 255, .07);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: none;
}

@media (min-width: 768px) {
    .cms-cta-card { padding: 52px 48px; }
}

@media (min-width: 1200px) {
    .cms-cta-card {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 48px;
        padding: 60px 64px;
    }
}

/* ==========================================================
   FAQ (faq) — homepage FAQ list
   ========================================================== */

.cms-faq-list {
    max-width: 900px;
    margin: 0 auto;
}

.cms-faq-item {
    margin-bottom: 16px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    transition: border-color var(--cms-ease), box-shadow var(--cms-ease);
}

.cms-faq-item:last-child { margin-bottom: 0; }

.cms-faq-item[open] {
    border-color: var(--cms-border-hover);
    box-shadow: var(--cms-shadow);
}

.cms-faq-item summary {
    position: relative;
    padding: 22px 72px 22px 26px;
    color: var(--cms-text);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
    list-style: none;
    cursor: pointer;
}

.cms-faq-item summary::-webkit-details-marker { display: none; }

/* Drawn plus that turns into a minus */
.cms-faq-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 22px;
    width: 32px;
    height: 32px;
    margin-top: -16px;
    border-radius: 50%;
    background:
        linear-gradient(currentColor, currentColor) center / 12px 2px no-repeat,
        linear-gradient(currentColor, currentColor) center / 2px 12px no-repeat,
        var(--cms-primary-light);
    color: var(--cms-primary);
    transition: background-size var(--cms-ease), background-color var(--cms-ease);
}

.cms-faq-item[open] summary::after {
    background:
        linear-gradient(#fff, #fff) center / 12px 2px no-repeat,
        linear-gradient(#fff, #fff) center / 2px 0 no-repeat,
        var(--cms-primary);
}

.cms-faq-answer {
    padding: 0 26px 24px;
    color: var(--cms-muted);
    line-height: 1.85;
}

.cms-faq-answer > :last-child { margin-bottom: 0; }

.cms-faq-answer a { color: var(--cms-primary); font-weight: 600; text-underline-offset: 3px; }

.cms-bg-brand .cms-faq-item summary,
.cms-bg-dark .cms-faq-item summary { color: var(--cms-text); }
.cms-bg-brand .cms-faq-answer :is(p, li),
.cms-bg-dark .cms-faq-answer :is(p, li) { color: var(--cms-muted); }

/* ==========================================================
   Testimonials (testimonials)
   ========================================================== */

.cms-testimonial {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 32px 28px 28px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-md);
    box-shadow: var(--cms-shadow-sm);
}

.cms-testimonial-mark {
    margin-bottom: 18px;
    color: var(--cms-primary);
    font-size: 28px;
    line-height: 1;
}

.cms-testimonial-quote {
    flex: 1;
    margin: 0 0 24px;
}

.cms-testimonial-quote p {
    margin: 0;
    color: #374151;
    font-size: 1.02rem;
    line-height: 1.8;
}

.cms-testimonial-person {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 20px;
    border-top: 1px solid #f1f1f1;
}

.cms-testimonial-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.cms-testimonial-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.cms-testimonial-meta strong {
    color: var(--cms-text);
    font-weight: 700;
}

.cms-testimonial-meta span {
    color: var(--cms-muted);
    font-size: .88rem;
}

/* ==========================================================
   Trust signals (trust_signals)
   ========================================================== */

.cms-trust-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.cms-trust-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    min-height: 150px;
    padding: 24px 18px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    text-align: center;
}

.cms-trust-image {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 72px;
    object-fit: contain;
}

.cms-trust-label {
    color: var(--cms-text);
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.4;
}

@media (min-width: 768px) {
    .cms-trust-list { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 22px; }
}

/* ==========================================================
   Logo marquee (logo_marquee) — homepage clients marquee
   ========================================================== */

.cms-logos .clients-slider {
    -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
}

.cms-logo-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 200px;
    height: 104px;
    padding: 18px 24px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
}

.cms-logo-tile img {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 64px;
    object-fit: contain;
}

@media (max-width: 767px) {
    .cms-logo-tile { width: 160px; height: 88px; }
}

/* ==========================================================
   Gallery (gallery)
   ========================================================== */

.cms-gallery-item {
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    transition: transform var(--cms-ease), box-shadow var(--cms-ease);
}

.cms-gallery-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--cms-shadow);
}

.cms-gallery-media {
    display: block;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    background: var(--cms-tint);
}

.cms-gallery-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.cms-gallery-item:hover .cms-gallery-media img {
    transform: scale(1.05);
}

.cms-gallery-caption {
    padding: 14px 18px 16px;
    color: var(--cms-muted);
    font-size: .92rem;
    line-height: 1.5;
}

.cms-bg-brand .cms-gallery-caption,
.cms-bg-dark .cms-gallery-caption { color: var(--cms-muted); }

/* ==========================================================
   Video (video)
   ========================================================== */

.cms-video-frame {
    max-width: 980px;
    margin: 0 auto;
}

.cms-video-wrap {
    overflow: hidden;
    background: #111;
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow);
}

.cms-video-wrap iframe {
    width: 100%;
    height: 100%;
    border: 0;
}

.cms-video-caption {
    margin: 16px 0 0;
    color: var(--cms-muted);
    font-size: .92rem;
    line-height: 1.6;
    text-align: center;
}

/* ==========================================================
   Product list (product_list) — homepage product cards
   Card styling comes from .amari-home-product-card (home.css)
   ========================================================== */

.cms-product-list .amari-home-product-image {
    aspect-ratio: 4 / 3;
    background: var(--cms-tint);
}

.cms-product-list .amari-home-product-body .cms-card-title {
    margin: 0 0 8px;
    font-size: 1.05rem;
}

.cms-product-meta {
    margin: 0 0 16px;
    color: var(--cms-muted);
    font-size: .9rem;
    line-height: 1.5;
}

.cms-product-list-more {
    margin-top: 40px;
    text-align: center;
}

/* ==========================================================
   Downloads (downloads)
   ========================================================== */

.cms-download-list {
    display: grid;
    gap: 14px;
    max-width: 900px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
}

.cms-download-link {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 18px;
    align-items: center;
    padding: 18px 22px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius);
    box-shadow: var(--cms-shadow-sm);
    color: var(--cms-text);
    text-decoration: none;
    transition: transform var(--cms-ease), box-shadow var(--cms-ease), border-color var(--cms-ease);
}

.cms-download-link:hover {
    transform: translateY(-3px);
    box-shadow: var(--cms-shadow);
    border-color: var(--cms-border-hover);
    color: var(--cms-text);
}

.cms-download-icon,
.cms-download-go {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: var(--cms-radius-sm);
}

.cms-download-icon {
    width: 52px;
    height: 52px;
    background: var(--cms-primary-light);
    color: var(--cms-primary);
    font-size: 22px;
}

.cms-download-go {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    color: var(--cms-primary);
    font-size: 18px;
    transition: background var(--cms-ease), color var(--cms-ease);
}

.cms-download-link:hover .cms-download-go {
    background: var(--cms-primary);
    color: #fff;
}

.cms-download-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.cms-download-title {
    font-weight: 700;
    line-height: 1.4;
}

.cms-download-desc {
    margin: 0;
    color: var(--cms-muted);
    font-size: .92rem;
    line-height: 1.6;
}

.cms-download-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    color: var(--cms-muted);
    font-size: .8rem;
}

.cms-download-type {
    padding: 3px 9px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #374151;
    font-weight: 700;
    letter-spacing: .06em;
}

.cms-download-size {
    font-variant-numeric: tabular-nums;
}

/* ==========================================================
   Spacer (spacer)
   ========================================================== */

.cms-spacer-small { height: 32px; }
.cms-spacer-medium { height: 64px; }
.cms-spacer-large { height: 112px; }

/* ==========================================================
   Enquiry form (enquiry_form)
   ========================================================== */

.cms-enquiry.contact-form-wrapper {
    max-width: 880px;
    margin: 0 auto;
    padding: 32px 24px;
    background: #fff;
    border: 1px solid var(--cms-border);
    border-radius: var(--cms-radius-lg);
    box-shadow: var(--cms-shadow-sm);
}

.cms-enquiry.contact-form-wrapper:hover {
    box-shadow: var(--cms-shadow);
}

@media (min-width: 768px) {
    .cms-enquiry.contact-form-wrapper { padding: 48px 52px; }
}

@media (min-width: 1200px) and (max-width: 1399px) {
    .cms-enquiry.contact-form-wrapper { margin-left: auto; }
}

/* ==========================================================
   Brand and dark sections: text that sits directly on the
   section background (not on a white card)
   ========================================================== */

.cms-bg-brand.cms-hero h1,
.cms-bg-dark.cms-hero h1 {
    color: #fff;
}

.cms-bg-brand .cms-hero-body,
.cms-bg-dark .cms-hero-body,
.cms-bg-brand .cms-caption,
.cms-bg-dark .cms-caption,
.cms-bg-brand .cms-video-caption,
.cms-bg-dark .cms-video-caption {
    color: var(--cms-on-dark-muted);
}

.cms-bg-brand .cms-empty,
.cms-bg-dark .cms-empty {
    border-color: rgba(255, 255, 255, .3);
    color: var(--cms-on-dark-muted);
}

.cms-bg-brand .cms-hero-media img,
.cms-bg-dark .cms-hero-media img,
.cms-bg-brand .cms-text-image-media img,
.cms-bg-dark .cms-text-image-media img {
    box-shadow: 0 24px 60px rgba(40, 4, 6, .35);
}

/* ==========================================================
   Motion preference
   ========================================================== */

@media (prefers-reduced-motion: reduce) {
    .cms-section *,
    .cms-section *::before,
    .cms-section *::after {
        transition-duration: .01ms !important;
    }
    a.cms-card:hover,
    .cms-feature:hover,
    .cms-step:hover,
    .cms-gallery-item:hover,
    .cms-download-link:hover {
        transform: none;
    }
}