.xiancai-capabilities { background: var(--paper); }
.capabilities-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(48px, 6vw, 96px); align-items: center; }
.capabilities-media, .capabilities-copy { min-width: 0; }
.quality-main img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.quality-secondary { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.quality-secondary img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.capability-points > div { border-left: 2px solid var(--brand); padding-left: 20px; margin: 32px 0; }
.capability-points h3 { font-size: 20px; }
.capability-points p { font-size: 16px; color: var(--muted); margin: 0; }

/* The advantages variant shares editable content with the standard capabilities block. */
.xc-advantages { background: #FFF9F7; padding-bottom: 0; }
.xc-advantages__heading { margin-bottom: 20px; }
.xc-advantages__heading .lead { font-size: 18px; font-weight: 400; }
.xc-advantages__cta { flex: none; white-space: nowrap; }
.xc-advantages__panels { display: flex; width: 100%; height: 600px; }
.xc-advantages__panel { position: relative; isolation: isolate; flex: 1 1 0; min-width: 0; overflow: hidden; background: #351326; }
.xc-advantages__panel::after { content: ''; position: absolute; inset: 0; z-index: -1; background: rgba(0, 0, 0, 0.3); pointer-events: none; }
.xc-advantages__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.xc-advantages__content { padding: 16px 28px; position: absolute; bottom: 0; left: 0; width: 100%; min-height: 30%; display: flex; flex-direction: column; justify-content: center; isolation: isolate; color: #fff; text-align: center; }
.xc-advantages__content::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.55) 20%, rgba(0, 0, 0, 0.8) 100%); pointer-events: none; }
.xc-advantages__content h3 { font: 400 32px/1.2 Georgia, serif; margin: 0 auto; max-width: 290px; min-height: 2.4em; text-wrap: balance; }
.xc-advantages__panel:nth-last-child(-n+2) .xc-advantages__content h3 { max-width: 7em; }
.xc-advantages__toggle { padding: 0; border: 0; background: none; border-radius: 0; font: inherit; color: inherit; cursor: pointer; }
.xc-advantages__toggle::before { content: ''; position: absolute; inset: 0; }
.xc-advantages__toggle:focus-visible { outline: 2px solid #fff; outline-offset: 8px; }
.xc-advantages__detail { font: 400 16px/1.5 Arial, Helvetica, sans-serif; max-width: 640px; margin: 10px auto 0; text-wrap: pretty; }
.xc-advantages[data-advantages-ready] .xc-advantages__panel { flex: 0 0 var(--rest-width); transition: flex-basis 150ms cubic-bezier(.22,.61,.36,1); }
.xc-advantages[data-advantages-ready] .has-active .xc-advantages__panel { flex-basis: var(--other-width); }
.xc-advantages[data-advantages-ready] .has-active .xc-advantages__panel.is-active { flex-basis: var(--active-width); }
.xc-advantages[data-advantages-ready] .xc-advantages__content { height: 180px; transition: height 150ms cubic-bezier(.22,.61,.36,1); }
.xc-advantages[data-advantages-ready] .xc-advantages__content h3 { position: absolute; left: 50%; bottom: 90px; width: calc(100% - var(--content-inset, 56px)); transform: translate(-50%, 50%); transition: bottom 150ms cubic-bezier(.22,.61,.36,1); }
/* Keep copy at its final expanded width while the image panels resize. */
.xc-advantages[data-advantages-ready] .xc-advantages__detail { position: absolute; left: 50%; bottom: 16px; width: var(--expanded-copy-width); margin: 0; opacity: 0; visibility: hidden; transform: translateX(-50%); transition: none; }
.xc-advantages[data-advantages-ready] .is-active .xc-advantages__content { height: var(--expanded-content-height, 180px); }
.xc-advantages[data-advantages-ready] .is-active .xc-advantages__content h3 { width: var(--rest-copy-width); bottom: var(--expanded-title-bottom, 90px); }
.xc-advantages[data-advantages-ready] .is-revealed .xc-advantages__detail { opacity: 1; visibility: visible; transition: opacity 200ms ease; }
@media (min-width: 768px) and (max-width: 1199px) {
    .xc-advantages__content { padding-inline: 15px; }
    .xc-advantages__content h3 { font-size: 24px; }
    .xc-advantages__detail { font-size: 15px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
    .xc-advantages__content { padding-inline: 8px; }
    .xc-advantages__content h3 { font-size: clamp(16px, 2.1vw, 20px); }
}
@media (max-width: 767px) {
    .xc-advantages__heading { margin-bottom: 20px; }
    .xc-advantages__heading .xc-advantages__cta { margin-top: 24px; }
    .xc-advantages__panels { display: grid; height: auto; }
    .xc-advantages__panel { min-height: 360px; }
    .xc-advantages__content { padding: 32px 24px 24px; }
    .xc-advantages__content h3 { font-size: 30px; min-height: 0; }
    .xc-advantages[data-advantages-ready] .xc-advantages__content { height: auto; }
    .xc-advantages[data-advantages-ready] .xc-advantages__content h3 { position: static; width: auto; transform: none; }
    .xc-advantages[data-advantages-ready] .xc-advantages__detail { position: static; width: auto; margin-top: 10px; opacity: 1; visibility: visible; transform: none; }
    .xc-advantages__toggle { cursor: default; }
}
.xc-advantages--preview .xc-advantages__panels { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); height: auto; }
.xc-advantages--preview .xc-advantages__panel { min-height: 330px; }
.xc-advantages--preview .xc-advantages__content { position: relative; min-height: 330px; padding: 70px 18px 24px; justify-content: flex-end; }
.xc-advantages--preview .xc-advantages__content h3 { font-size: 24px; }
.xc-advantages--preview .xc-advantages__detail { font-size: 14px; }
@media (prefers-reduced-motion: reduce) {
    .xc-advantages[data-advantages-ready] .xc-advantages__panel,
    .xc-advantages[data-advantages-ready] .xc-advantages__content,
    .xc-advantages[data-advantages-ready] .xc-advantages__content h3,
    .xc-advantages[data-advantages-ready] .xc-advantages__detail { transition: none; }
}
@media (max-width: 767px) { .capabilities-grid { display: flex; flex-direction: column; gap: 24px; } .capabilities-copy, .capabilities-media { display: contents; } .capabilities-copy .eyebrow { order: -5; } .capabilities-copy h2 { order: -4; } .quality-main { order: -3; } .capabilities-copy .lead { order: -2; } .capability-points { order: -1; } .quality-secondary { width: 100%; } }