/* ==========================================================================
   About page
   Reuses global tokens (--orange, --orange-bright, --panel, --panel-light,
   --line, --muted, --shadow, --radius, --text-body, --heading-section)
   and existing components (.hero, .hero-copy, .hero-actions, .button,
   .section-heading, .centered-heading, .icon-badge, .store-eyebrow) from
   the Home / Repair Services / Contact pages. Only new, page-specific
   classes are introduced below.
   ========================================================================== */

.hero.about-hero {
    grid-template-columns: 1fr;
    min-height: auto;
    padding-block: 68px 8px;
    justify-items: center;
    text-align: center;
}
.about-hero .hero-copy { max-width: 760px; margin: 0 auto; }
.about-hero .hero-copy > p { margin-inline: auto; }
.about-eyebrow { display: block; margin-bottom: 14px; color: var(--orange); font-size: var(--text-eyebrow); font-weight: 750; }
.about-hero-actions { justify-content: center; margin-top: 38px; }

.genesis-section { padding-block: 76px; }
.genesis-grid { display: grid; grid-template-columns: .92fr 1fr; gap: 60px; align-items: center; }
.genesis-copy h2 { margin: 0; font-size: var(--heading-section); font-weight: 780; letter-spacing: -.03em; }
.genesis-copy p { margin: 18px 0 0; max-width: 480px; color: var(--muted); font-size: var(--text-body); line-height: 1.65; }
.genesis-stats { display: flex; gap: 54px; margin-top: 34px; }
.genesis-stat strong { display: block; font-size: clamp(1.9rem, 1.55rem + .9vw, 2.4rem); font-weight: 800; color: var(--orange); letter-spacing: -.03em; }
.genesis-stat span { display: block; margin-top: 4px; color: var(--muted); font-size: .8125rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.genesis-gallery {
    display: grid;
    grid-template-columns: 1.1fr .9fr;
    grid-template-rows: 1fr 1fr;
    gap: 16px;
    height: 420px;
}
.genesis-art { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.genesis-art-technician { grid-column: 2; grid-row: 1 / 3; }
.genesis-art img { display: block; width: 100%; height: 100%; object-fit: cover; }

.pillars-section { padding-block: 12px 82px; }
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; margin-top: 50px; }
.pillar-card {
    padding: 40px 30px;
    border: 1px solid rgba(255,59,10,.45);
    border-radius: var(--radius);
    background: var(--panel);
    text-align: center;
}
.pillar-icon {
    display: grid;
    margin: 0 auto;
    width: 58px;
    height: 58px;
    place-items: center;
    border-radius: 16px;
    background: var(--orange-bright);
}
.pillar-icon svg { width: 28px; height: 28px; fill: none; stroke: #fff; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pillar-card h3 { margin: 22px 0 0; font-size: clamp(1.4rem, 1.2rem + .6vw, 1.75rem); font-weight: 780; color: var(--orange); letter-spacing: -.02em; }
.pillar-card p { margin: 14px 0 0; color: var(--muted); font-size: .9375rem; line-height: 1.6; }

.quality-section { padding-block: 12px 90px; }
.quality-grid { display: grid; grid-template-columns: 1fr .95fr; gap: 60px; align-items: center; }
.quality-copy h2 { margin: 0; font-size: var(--heading-section); font-weight: 780; letter-spacing: -.03em; }
.quality-list { display: grid; gap: 30px; margin: 36px 0 0; padding: 0; list-style: none; }
.quality-list li { display: flex; gap: 18px; align-items: flex-start; }
.quality-list h3 { margin: 0; font-size: 1.0625rem; font-weight: 780; letter-spacing: -.01em; }
.quality-list p { margin: 6px 0 0; max-width: 420px; color: var(--muted); font-size: .9375rem; line-height: 1.55; }
.quality-visual { position: relative; min-height: 420px; overflow: hidden; border-radius: var(--radius); background: var(--panel); }
.quality-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.about-cta { padding-block: 12px 90px; }
.about-cta-inner {
    padding: 64px 40px;
    border-radius: var(--radius);
    background: linear-gradient(135deg, var(--orange-bright), #ff5a1f);
    text-align: center;
}
.about-cta-inner h2 { margin: 0; max-width: 620px; margin-inline: auto; font-size: var(--heading-section); font-weight: 800; letter-spacing: -.03em; color: #fff; }
.about-cta-inner p { max-width: 560px; margin: 18px auto 0; color: rgba(255,255,255,.9); font-size: var(--text-body); line-height: 1.55; }
.about-cta-actions { justify-content: center; margin-top: 36px; }
.about-cta-actions .button-light:hover { background: #fff; }

@media (max-width: 1180px) {
    .genesis-grid { grid-template-columns: 1fr; gap: 40px; }
    .genesis-gallery { height: 340px; }
    .quality-grid { grid-template-columns: 1fr; gap: 36px; }
    .quality-visual { min-height: 300px; order: -1; }
}

@media (max-width: 960px) {
    .pillar-grid { grid-template-columns: 1fr; }
    .genesis-stats { gap: 36px; }
}

@media (max-width: 620px) {
    .hero.about-hero { padding-block: 48px 4px; }
    .genesis-section, .pillars-section, .quality-section, .about-cta { padding-block: 10px 56px; }
    .genesis-gallery { grid-template-columns: 1fr; grid-template-rows: repeat(3, 140px); height: auto; }
    .genesis-art-technician { grid-column: auto; grid-row: auto; }
    .pillar-card { padding: 30px 22px; }
    .about-cta-inner { padding: 44px 24px; }
    .about-cta-actions { flex-direction: column; align-items: stretch; gap: 14px; }
    .about-cta-actions .button { min-width: 0; width: 100%; }
    .quality-list li { flex-direction: column; }
}

/* Shared card motion
   One restrained interaction is used across the site so every card feels
   consistent. It runs only on devices that support precise hover input. */
:is(
    .service-card,
    .offers-card,
    .endorsement-card,
    .repair-device-card,
    .other-service-card,
    .pillar-card,
    .flow-card,
    .service-select-card,
    .flow-feature-card,
    .delivery-card,
    .pricing-mode-option,
    .review-card,
    .info-card,
    .call-direct-card
) {
    transition:
        transform .24s cubic-bezier(.22, 1, .36, 1),
        box-shadow .24s ease,
        border-color .24s ease;
}

@media (hover: hover) and (pointer: fine) {
    :is(
        .service-card,
        .offers-card,
        .endorsement-card,
        .repair-device-card,
        .other-service-card,
        .pillar-card,
        .flow-card,
        .service-select-card,
        .flow-feature-card,
        .delivery-card,
        .pricing-mode-option,
        .review-card,
        .info-card,
        .call-direct-card
    ):is(:hover, :focus-within) {
        transform: translateY(-3px);
        border-color: rgba(255, 59, 10, .38);
        box-shadow:
            0 14px 28px rgba(0, 0, 0, .16),
            0 0 0 1px rgba(255, 59, 10, .1);
    }

    :is(
        .service-card,
        .offers-card,
        .endorsement-card,
        .repair-device-card,
        .other-service-card,
        .pillar-card,
        .flow-card,
        .service-select-card,
        .flow-feature-card,
        .delivery-card,
        .pricing-mode-option,
        .review-card,
        .info-card,
        .call-direct-card
    ):active {
        transform: translateY(-1px);
    }
}