/* ==========================================================================
   components.css — Meras X Theme
   Component library: cards, metrics, testimonials, CTA, framework, strips.
   All variables resolve from style.css :root tokens.
   Mobile-first. WCAG AA contrast. prefers-reduced-motion safe.
   ========================================================================== */


/* ==========================================================================
   1. PROJECT CARD — .mx-project-card
   ========================================================================== */

.mx-project-card {
    background-color: var(--mx-black-card);
    border: var(--mx-border);
    border-radius: var(--mx-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--mx-shadow-card);
    transition:
        border-color var(--mx-duration) var(--mx-ease),
        box-shadow   var(--mx-duration) var(--mx-ease);
    will-change: border-color, box-shadow;
}

@media (prefers-reduced-motion: reduce) {
    .mx-project-card { transition: none; }
}

.mx-project-card__cover {
    aspect-ratio: 3 / 2;
    overflow: hidden;
    flex-shrink: 0;
}

.mx-project-card__cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform var(--mx-duration) var(--mx-ease);
    will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
    .mx-project-card__cover img { transition: none; }
}

.mx-project-card__body {
    padding: var(--mx-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-4);
}

.mx-project-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-2);
    flex-wrap: wrap;
}

.mx-project-card__tag {
    display: inline-block;
    background-color: var(--mx-gold-dim);
    color: var(--mx-gold);
    font-size: var(--mx-text-xs);
    font-weight: 600;
    letter-spacing: var(--mx-tracking-wider);
    text-transform: uppercase;
    padding: 0.2em 0.65em;
    border-radius: var(--mx-radius-sm);
    line-height: 1.6;
}

.mx-project-card__title {
    font-size: var(--mx-text-xl);
    font-weight: 600;
    color: var(--mx-white);
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-project-card__title a {
    color: inherit;
    text-decoration: none;
}

.mx-project-card__summary {
    color: var(--mx-white-70);
    font-size: var(--mx-text-sm);
    line-height: var(--mx-leading-loose);
    flex-grow: 1;
}

.mx-project-card__results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--mx-space-4);
    border-top: var(--mx-border);
    padding-top: var(--mx-space-5);
    margin-top: var(--mx-space-2);
}

.mx-project-result__value {
    font-size: var(--mx-text-2xl);
    font-weight: 600;
    color: var(--mx-gold);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mx-tracking-tight);
}

.mx-project-result__label {
    font-size: var(--mx-text-xs);
    color: var(--mx-white-40);
    text-transform: uppercase;
    letter-spacing: var(--mx-tracking-wider);
    margin-top: 0.25em;
    line-height: var(--mx-leading-snug);
}

.mx-project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-2);
    margin-top: auto;
    padding-top: var(--mx-space-4);
    font-size: var(--mx-text-sm);
    font-weight: 500;
    color: var(--mx-gold);
    text-decoration: none;
    transition: gap var(--mx-duration-fast) var(--mx-ease);
}

.mx-project-card__cta::after {
    content: '\2192';
    display: inline-block;
    transition: transform var(--mx-duration-fast) var(--mx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mx-project-card__cta,
    .mx-project-card__cta::after { transition: none; }
}

@media (hover: hover) {
    .mx-project-card:hover {
        border-color: rgba(212, 175, 55, 0.30);
        box-shadow: var(--mx-shadow-card), var(--mx-shadow-glow);
    }
    .mx-project-card:hover .mx-project-card__cover img { transform: scale(1.04); }
    .mx-project-card:hover .mx-project-card__cta { gap: var(--mx-space-3); }
    .mx-project-card:hover .mx-project-card__cta::after { transform: translateX(4px); }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .mx-project-card:hover .mx-project-card__cover img { transform: none; }
    .mx-project-card:hover .mx-project-card__cta { gap: var(--mx-space-2); }
    .mx-project-card:hover .mx-project-card__cta::after { transform: none; }
}

/* Projects grid */
.mx-projects-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-8);
}

@media (min-width: 48em) {
    .mx-projects-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 80em) {
    .mx-projects-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   2. SERVICE CARD — .mx-service-card
   ========================================================================== */

.mx-service-card {
    background-color: var(--mx-black-card);
    border: var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-4);
    box-shadow: var(--mx-shadow-card);
    position: relative;
    overflow: hidden;
    transition:
        border-color var(--mx-duration) var(--mx-ease),
        box-shadow   var(--mx-duration) var(--mx-ease);
}

.mx-service-card::before {
    content: '';
    position: absolute;
    inset: 0 0 auto 0;
    height: 2px;
    background-color: var(--mx-gold);
    opacity: 0;
    transition: opacity var(--mx-duration) var(--mx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mx-service-card,
    .mx-service-card::before { transition: none; }
}

.mx-service-card__system {
    font-size: var(--mx-text-xs);
    font-weight: 600;
    color: var(--mx-gold);
    text-transform: uppercase;
    letter-spacing: var(--mx-tracking-widest);
}

.mx-service-card__icon {
    width: 40px;
    height: 40px;
    color: var(--mx-gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mx-service-card__title {
    font-size: var(--mx-text-xl);
    font-weight: 600;
    color: var(--mx-white);
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-service-card__summary {
    color: var(--mx-white-70);
    font-size: var(--mx-text-sm);
    line-height: var(--mx-leading-loose);
    flex-grow: 1;
}

.mx-service-card__cta {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-2);
    margin-top: auto;
    font-size: var(--mx-text-sm);
    font-weight: 500;
    color: var(--mx-gold);
    text-decoration: none;
}

.mx-service-card__cta::after {
    content: '\2192';
    display: inline-block;
    transition: transform var(--mx-duration-fast) var(--mx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mx-service-card__cta::after { transition: none; }
}

@media (hover: hover) {
    .mx-service-card:hover {
        border-color: rgba(212, 175, 55, 0.30);
        box-shadow: var(--mx-shadow-card), var(--mx-shadow-glow);
    }
    .mx-service-card:hover::before { opacity: 1; }
    .mx-service-card:hover .mx-service-card__cta::after { transform: translateX(4px); }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .mx-service-card:hover .mx-service-card__cta::after { transform: none; }
}

/* Services grid */
.mx-services-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-6);
}

@media (min-width: 48em) {
    .mx-services-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 80em) {
    .mx-services-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   3. METRIC ITEM — .mx-metric / .mx-metrics-bar
   ========================================================================== */

.mx-metric {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-2);
}

.mx-metric__value {
    font-size: var(--mx-text-4xl);
    font-weight: 600;
    color: var(--mx-gold);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: var(--mx-tracking-tight);
}

.mx-metric__label {
    font-size: var(--mx-text-sm);
    color: var(--mx-white);
    font-weight: 500;
    line-height: var(--mx-leading-snug);
}

.mx-metric__sublabel {
    font-size: var(--mx-text-xs);
    color: var(--mx-white-40);
    line-height: var(--mx-leading-normal);
}

.mx-metrics-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: var(--mx-space-12);
    padding-block: var(--mx-space-12);
    border-top: var(--mx-border);
    border-bottom: var(--mx-border);
}


/* ==========================================================================
   4. OFFICE CARD — .mx-office-card
   ========================================================================== */

.mx-office-card {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-3);
}

.mx-office-card__city {
    font-size: var(--mx-text-xl);
    color: var(--mx-white);
    font-weight: 600;
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-office-card__country {
    font-size: var(--mx-text-sm);
    color: var(--mx-white-40);
    text-transform: uppercase;
    letter-spacing: var(--mx-tracking-wider);
}

.mx-office-card__address {
    font-size: var(--mx-text-sm);
    color: var(--mx-white-70);
    line-height: var(--mx-leading-loose);
    font-style: normal;
}

.mx-office-card__links {
    display: flex;
    flex-wrap: wrap;
    gap: var(--mx-space-4);
    margin-top: var(--mx-space-2);
}

.mx-office-card__link {
    font-size: var(--mx-text-sm);
    color: var(--mx-gold);
    text-decoration: none;
    font-weight: 500;
}

@media (hover: hover) {
    .mx-office-card__link:hover { text-decoration: underline; }
}

.mx-office-card__hq-badge {
    display: inline-block;
    border: 1px solid var(--mx-gold);
    color: var(--mx-gold);
    font-size: var(--mx-text-xs);
    font-weight: 600;
    letter-spacing: var(--mx-tracking-wider);
    text-transform: uppercase;
    padding: 0.1em 0.55em;
    border-radius: var(--mx-radius-sm);
    line-height: 1.7;
    vertical-align: middle;
}


/* ==========================================================================
   5. TESTIMONIAL CARD — .mx-testimonial-card
   ========================================================================== */

.mx-testimonial-card {
    background-color: var(--mx-black-card);
    border: var(--mx-border);
    border-left: 3px solid var(--mx-gold);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-8);
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-5);
    box-shadow: var(--mx-shadow-card);
}

.mx-testimonial-card__quote {
    position: relative;
    font-family: var(--mx-font-serif);
    font-size: var(--mx-text-lg);
    color: var(--mx-white);
    line-height: var(--mx-leading-snug);
    font-style: italic;
    padding-left: var(--mx-space-6);
}

.mx-testimonial-card__quote::before {
    content: '\201C';
    position: absolute;
    left: -0.1em;
    top: -0.25em;
    font-size: 4em;
    font-family: var(--mx-font-serif);
    line-height: 1;
    color: var(--mx-gold);
    opacity: 0.3;
    pointer-events: none;
    user-select: none;
}

.mx-testimonial-card__footer {
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-1);
    margin-top: auto;
}

.mx-testimonial-card__author {
    font-size: var(--mx-text-sm);
    color: var(--mx-white);
    font-weight: 600;
}

.mx-testimonial-card__meta {
    font-size: var(--mx-text-xs);
    color: var(--mx-white-40);
}

.mx-testimonial-card__logo {
    max-height: 28px;
    width: auto;
    filter: brightness(0) invert(1);
    opacity: 0.6;
    display: block;
    margin-top: var(--mx-space-3);
}

.mx-testimonials-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-6);
}

@media (min-width: 48em) {
    .mx-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 80em) {
    .mx-testimonials-grid { grid-template-columns: repeat(3, 1fr); }
}


/* ==========================================================================
   6. GROWTH FRAMEWORK ITEM — .mx-framework-item / .mx-framework-grid
   ========================================================================== */

.mx-framework-item {
    position: relative;
    padding-inline-start: var(--mx-space-12);
    display: flex;
    flex-direction: column;
    gap: var(--mx-space-3);
}

.mx-framework-item__number {
    position: absolute;
    left: 0;
    top: 0;
    font-size: var(--mx-text-xs);
    color: var(--mx-gold);
    font-weight: 600;
    letter-spacing: var(--mx-tracking-widest);
    text-transform: uppercase;
}

.mx-framework-item__system-tag {
    display: inline-block;
    background-color: var(--mx-gold-dim);
    color: var(--mx-gold);
    font-size: var(--mx-text-xs);
    font-weight: 600;
    letter-spacing: var(--mx-tracking-wider);
    text-transform: uppercase;
    padding: 0.2em 0.7em;
    border-radius: 100px;
    line-height: 1.6;
    align-self: flex-start;
}

.mx-framework-item__title {
    font-size: var(--mx-text-2xl);
    color: var(--mx-white);
    font-weight: 600;
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-framework-item__description {
    color: var(--mx-white-70);
    font-size: var(--mx-text-base);
    line-height: var(--mx-leading-loose);
    flex-grow: 1;
}

.mx-framework-item__link {
    display: inline-flex;
    align-items: center;
    gap: var(--mx-space-2);
    font-size: var(--mx-text-sm);
    font-weight: 500;
    color: var(--mx-gold);
    text-decoration: none;
    align-self: flex-start;
    margin-top: var(--mx-space-2);
}

.mx-framework-item__link::after {
    content: '\2192';
    display: inline-block;
    transition: transform var(--mx-duration-fast) var(--mx-ease);
}

@media (prefers-reduced-motion: reduce) {
    .mx-framework-item__link::after { transition: none; }
}

@media (hover: hover) {
    .mx-framework-item__link:hover::after { transform: translateX(4px); }
}

@media (hover: hover) and (prefers-reduced-motion: reduce) {
    .mx-framework-item__link:hover::after { transform: none; }
}

.mx-framework-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-12);
}

@media (min-width: 48em) {
    .mx-framework-grid { grid-template-columns: repeat(2, 1fr); }
}


/* ==========================================================================
   7. CTA BLOCK — .mx-cta-block
   ========================================================================== */

.mx-cta-block {
    background-color: var(--mx-black-card);
    border: var(--mx-border);
    border-radius: var(--mx-radius-lg);
    padding: var(--mx-space-16);
    text-align: center;
    box-shadow: var(--mx-shadow-card);
}

.mx-cta-block__headline {
    font-size: var(--mx-text-3xl);
    font-weight: 600;
    color: var(--mx-white);
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-cta-block__sub {
    color: var(--mx-white-70);
    font-size: var(--mx-text-base);
    line-height: var(--mx-leading-loose);
    margin-block: var(--mx-space-5);
    max-width: var(--mx-container-text);
    margin-inline: auto;
}

.mx-cta-block__actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--mx-space-4);
    flex-wrap: wrap;
}


/* ==========================================================================
   8. ABOUT / CREDIBILITY STRIP — .mx-about-strip
   ========================================================================== */

.mx-about-strip {
    background-color: var(--mx-black-soft);
    padding-block: var(--mx-space-section);
}

.mx-about-strip__grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--mx-space-12);
    align-items: start;
}

@media (min-width: 48em) {
    .mx-about-strip__grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--mx-space-16);
    }
}

.mx-about-strip__statement {
    font-family: var(--mx-font-serif);
    font-size: var(--mx-text-3xl);
    font-style: italic;
    color: var(--mx-white);
    line-height: var(--mx-leading-snug);
    letter-spacing: var(--mx-tracking-tight);
}

.mx-about-strip__body {
    color: var(--mx-white-70);
    font-size: var(--mx-text-base);
    line-height: var(--mx-leading-loose);
}


/* ==========================================================================
   9. GLOBAL FOOTPRINT SECTION — .mx-footprint
   ========================================================================== */

.mx-footprint {
    position: relative;
    overflow: hidden;
}

.mx-footprint::before {
    content: 'X';
    position: absolute;
    right: -0.1em;
    top: 50%;
    transform: translateY(-50%);
    font-family: var(--mx-font-sans);
    font-size: clamp(20rem, 40vw, 45rem);
    font-weight: 600;
    line-height: 1;
    color: var(--mx-white);
    opacity: 0.015;
    pointer-events: none;
    user-select: none;
    letter-spacing: var(--mx-tracking-tight);
    z-index: 0;
}

.mx-footprint > * {
    position: relative;
    z-index: 1;
}

.mx-footprint__offices {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: var(--mx-space-10);
}