:root {
    --mano-about-navy: #08203b;
    --mano-about-red: #e30613;
    --mano-about-text: #355777;
    --mano-about-muted: #6d8298;
    --mano-about-line: #dbe5ee;
    --mano-about-soft: #f5f8fb;
    --mano-page-title-size: 48px;
    --mano-section-title-size: 40px;
    --mano-article-title-size: 28px;
}

.mano-about { overflow: hidden; color: var(--mano-about-navy); background: #fff; }
.mano-about *, .mano-about *::before, .mano-about *::after { box-sizing: border-box; }
.mano-about-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.mano-about-intro { padding: 65px 0 55px; }
.mano-about-intro__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 60px; align-items: center; }
.mano-about-intro__copy { order: 1; }
.mano-about-intro__media { order: 2; min-height: 345px; position: relative; overflow: hidden; margin: 0; border-radius: 8px; background: linear-gradient(135deg, #b8c8d6, #24425e); box-shadow: 0 18px 45px rgba(8,32,59,.1); }
.mano-about-intro__media img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.mano-about-intro__media.is-placeholder::after { position: absolute; inset: 0; content: ''; background: repeating-linear-gradient(135deg, rgba(255,255,255,.05) 0 1px, transparent 1px 24px); }
.mano-about-intro h2 { margin: 0 0 22px; font-size: var(--mano-section-title-size); font-weight: 700; line-height: 1.35; }
.mano-about-intro h2 em { color: var(--mano-about-red); font-style: normal; }
.mano-about-intro__text { color: var(--mano-about-text); font-size: 16px; line-height: 2.25; text-align: justify; }
.mano-about-intro__text p:last-child { margin-bottom: 0; }

.mano-about-values { padding: 24px 0; border-block: 1px solid #e7eef5; background: var(--mano-about-soft); }
.mano-about-values__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.mano-about-value { min-height: 160px; padding: 25px 20px; border: 1px solid var(--mano-about-line); border-radius: 8px; background: #fff; text-align: center; }
.mano-about-value__icon { width: 48px; height: 48px; display: grid; place-items: center; margin: 0 auto 10px; }
.mano-about-value__icon svg { width: 38px; height: 38px; fill: var(--mano-about-red); }
.mano-about-value h3 { margin: 0 0 7px; font-size: 20px; font-weight: 700; }
.mano-about-value p { margin: 0; color: var(--mano-about-muted); font-size: 13px; line-height: 1.8; }

.mano-about-article { padding: 55px 0 65px; }
.mano-about-reading { width: min(1040px, calc(100% - 40px)); margin-inline: auto; color: var(--mano-about-text); font-size: 16px; line-height: 2.35; text-align: justify; }
.mano-about-reading h2 { margin: 0 0 18px; padding-top: 34px; border-top: 1px solid var(--mano-about-line); color: var(--mano-about-navy); font-size: var(--mano-article-title-size); font-weight: 700; line-height: 1.5; text-align: right; }
.mano-about-reading h2:first-child { padding-top: 0; border-top: 0; }
.mano-about-reading h3 { margin: 32px 0 12px; color: var(--mano-about-navy); font-size: 21px; font-weight: 800; }
.mano-about-reading p { margin: 0 0 20px; }
.mano-about-reading ul, .mano-about-reading ol { margin: 15px 0 25px; padding-right: 22px; }

.mano-about-cta { background: var(--mano-about-navy); }
.mano-about-cta__inner { min-height: 120px; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding-block: 25px; }
.mano-about-cta p { margin: 0; color: #fff; font-size: clamp(17px, 2vw, 23px); font-weight: 700; }
.mano-about-button { min-width: 160px; min-height: 50px; display: inline-flex; align-items: center; justify-content: center; gap: 18px; padding: 0 24px; border-radius: 6px; color: #fff; background: var(--mano-about-red); box-shadow: 0 10px 25px rgba(227,6,19,.2); font-weight: 800; text-decoration: none; transition: transform .2s ease, background .2s ease; }
.mano-about-button:hover { color: #fff; background: #bd0010; transform: translateY(-2px); }

@media (max-width: 900px) {
    :root {
        --mano-page-title-size: 42px;
        --mano-section-title-size: 35px;
        --mano-article-title-size: 26px;
    }

    .mano-about-intro__grid { grid-template-columns: 1fr; gap: 32px; }
    .mano-about-intro__copy, .mano-about-intro__media { order: initial; }
    .mano-about-intro__media { min-height: 330px; }
}

@media (max-width: 700px) {
    :root {
        --mano-page-title-size: 34px;
        --mano-section-title-size: 30px;
        --mano-article-title-size: 23px;
    }

    .mano-about-container, .mano-about-reading { width: min(100% - 28px, 1180px); }
    .mano-about-intro { padding: 42px 0 38px; }
    .mano-about-intro__media { min-height: 250px; }
    .mano-about-values__grid { grid-template-columns: 1fr; gap: 12px; }
    .mano-about-value { min-height: 0; display: grid; grid-template-columns: 48px 1fr; column-gap: 14px; align-items: center; padding: 18px; text-align: right; }
    .mano-about-value__icon { grid-row: 1 / 3; margin: 0; }
    .mano-about-value h3 { margin: 0; }
    .mano-about-article { padding: 42px 0 48px; }
    .mano-about-reading { font-size: 15px; line-height: 2.2; }
    .mano-about-cta__inner { min-height: 160px; flex-direction: column; justify-content: center; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .mano-about-button { transition: none; }
}