/*!
 * True Makeup Theme — About Us page
 *
 * Styles for the /about-us/ landing page. Six stacked regions:
 *
 *   1. Hero strip + lede
 *   2. Stats row (4 tiles with a flowing gradient border)
 *   3. Editorial story panels (ACF driven, alternating layout)
 *   4. Commitments grid (3 numbered value tiles)
 *   5. Brand directory (reuses partials/brand-grid.twig)
 *   6. Partner-with-us CTA strip
 *
 * The story-panel rules echo the makeup-artists page intentionally —
 * the two pages read as siblings. Both files stay independent so
 * they only load when their own page does.
 */

.tmt-about-page              { background: #F4F4F5; padding: 70px 0 80px; }
.tmt-about-page__inner       { max-width: var(--layout-max-width, 1700px); margin: 0 auto; }

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

.tmt-about-hero {
    position: relative;
    overflow: hidden;
    padding: 48px 40px;
    margin-bottom: 40px;
    background: #F4F4F5;
}
.tmt-about-hero__title {
    font-family: var(--font-secondary);
    font-size: 40px;
    font-weight: 400;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}
.tmt-about-hero__desc {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 8px 0 0;
    line-height: 1.6;
}

/* -------- Stats row --------------------------------------------- */

.tmt-about-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 40px;
}
.tmt-about-stat {
    position: relative;
    padding: 48px 24px;
    background: #F4F4F5;
    text-align: center;
}
.tmt-about-stat::after {
    content: '';
    position: absolute;
    inset: 0;
    border: 3px solid transparent;
    pointer-events: none;
    background: linear-gradient(90deg, #554350, #B07B5F, #CC9E80, #E0BAB2, #FAE8DD, #E0BAB2, #CC9E80, #B07B5F, #554350) border-box;
    background-size: 200% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
            mask-composite: exclude;
    animation: tmt-gradient-flow 4s ease infinite;
    z-index: 1;
}
.tmt-about-stat__figure {
    font-family: var(--font-secondary);
    font-size: 48px;
    font-weight: 400;
    color: #000;
    margin: 0 0 8px;
    line-height: 1;
}
.tmt-about-stat__label {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #000;
    opacity: 0.6;
}

/* -------- Editorial story panels -------------------------------- */

.tmt-about-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    min-height: 500px;
    margin-bottom: 8px;
}
.tmt-about-story--flip .tmt-about-story__media { order: 2; }
.tmt-about-story--flip .tmt-about-story__body  { order: 1; }

.tmt-about-story__media {
    position: relative;
    overflow: hidden;
    background: #F4F4F5;
}
.tmt-about-story__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.tmt-about-story__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 56px 64px;
}

.tmt-about-story__markers {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    max-width: 480px;
}
.tmt-about-story__markers-lhs {
    font-family: var(--font-secondary);
    font-size: 13px;
    font-style: italic;
    color: #000;
}
.tmt-about-story__markers-rhs {
    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #000;
}
.tmt-about-story__rule {
    height: 1px;
    background: #000;
    margin: 0 0 32px;
    max-width: 480px;
}

.tmt-about-story__title {
    font-family: var(--font-secondary);
    font-size: 44px;
    font-weight: 400;
    color: #000;
    margin: 0 0 24px;
    line-height: 1.08;
}
.tmt-about-story__copy {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.7;
    color: #000;
    margin: 0;
    max-width: 480px;
}
.tmt-about-story__copy p              { margin: 0 0 12px; }
.tmt-about-story__copy p:last-child   { margin-bottom: 0; }
.tmt-about-story__copy strong         { font-weight: 700; }

/* -------- Commitments grid -------------------------------------- */

.tmt-about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin: 40px 0;
}
.tmt-about-value {
    background: #F4F4F5;
    padding: 48px 32px;
    border: 1px solid #000;
}
.tmt-about-value__index {
    font-family: var(--font-secondary);
    font-size: 64px;
    font-weight: 400;
    color: #000;
    opacity: 0.15;
    margin: 0 0 16px;
    line-height: 1;
}
.tmt-about-value h3 {
    font-family: var(--font-secondary);
    font-size: 22px;
    font-weight: 400;
    color: #000;
    margin: 0 0 12px;
}
.tmt-about-value p {
    font-family: var(--font-primary);
    font-size: 13px;
    color: #000;
    opacity: 0.7;
    margin: 0;
    line-height: 1.7;
}

/* -------- Section heading strip --------------------------------- */

.tmt-about-section-head {
    padding: 24px 40px;
    margin: 40px 0 24px;
    background: #F4F4F5;
}
.tmt-about-section-head h2 {
    font-family: var(--font-secondary);
    font-size: 28px;
    font-weight: 400;
    color: #000;
    margin: 0;
    text-transform: uppercase;
}
.tmt-about-section-head p {
    font-family: var(--font-primary);
    font-size: 13px;
    color: #000;
    opacity: 0.6;
    margin: 8px 0 0;
    line-height: 1.6;
}

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

.tmt-about-cta {
    background: #FAE8DD;
    padding: 64px 48px;
    text-align: center;
    margin-top: 40px;
}
.tmt-about-cta h2 {
    font-family: var(--font-secondary);
    font-size: 36px;
    font-weight: 400;
    color: #000;
    margin: 0 0 12px;
}
.tmt-about-cta p {
    font-family: var(--font-primary);
    font-size: 14px;
    color: #000;
    opacity: 0.6;
    margin: 0 0 32px;
    line-height: 1.6;
}
.tmt-about-cta__btn {
    display: inline-block;
    background: #000;
    color: #fff;
    border: 1px solid #000;
    padding: 14px 36px;
    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    text-decoration: none;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.tmt-about-cta__btn:hover { background: #F4F4F5; color: #000; border-color: #000; }

/* -------- Mobile ------------------------------------------------ */

@media (max-width: 1023px) {
    /* Tighten the top gap between the masthead and the hero strip
       on mobile — same trim as contact-page.css and faq-page.css. */
    .tmt-about-page             { padding: 24px 0 48px; }
    .tmt-about-hero             { padding: 32px 24px; margin-bottom: 24px; }
    .tmt-about-hero__title      { font-size: 28px; }

    .tmt-about-stats            { grid-template-columns: repeat(2, 1fr); }
    .tmt-about-stat             { padding: 32px 16px; }
    .tmt-about-stat__figure     { font-size: 36px; }

    .tmt-about-story            { grid-template-columns: 1fr; min-height: 0; }
    .tmt-about-story--flip .tmt-about-story__media { order: 0; }
    .tmt-about-story--flip .tmt-about-story__body  { order: 1; }
    .tmt-about-story__media     { aspect-ratio: 4 / 3; }
    .tmt-about-story__body      { padding: 32px 24px; }
    .tmt-about-story__markers,
    .tmt-about-story__rule,
    .tmt-about-story__copy      { max-width: 100%; }
    .tmt-about-story__title     { font-size: 28px; }

    .tmt-about-values           { grid-template-columns: 1fr; }
    .tmt-about-section-head     { padding: 20px 24px; }
    .tmt-about-section-head h2  { font-size: 22px; }

    .tmt-about-cta              { padding: 40px 24px; }
    .tmt-about-cta h2           { font-size: 26px; }
}