/* ========================================
   SOBRE NÓS
   CSS EXCLUSIVO DA PÁGINA
======================================== */


/* ========================================
   FLUXO ESCURO
======================================== */

.about-dark-flow {
    position: relative;

    width: 100%;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 22%,
            rgba(22, 184, 166, 0.13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #061522 0%,
            #092238 56%,
            #0c3047 100%
        );
}


/* ========================================
   HERO
======================================== */

.about-hero {
    position: relative;

    width: 100%;
    min-height: 760px;

    padding: 0;
}


.about-hero::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 34%;
    height: 4px;

    background-color: var(--color-secondary);
}


.about-hero__container {
    position: relative;

    width: 100%;
    max-width: 1420px;
    min-height: 760px;

    margin: 0 auto;
    padding: 75px 48px 90px;

    display: grid;
    grid-template-columns: 0.86fr 1.14fr;

    gap: 80px;

    align-items: center;

    z-index: 2;
}


/* ========================================
   CONTEÚDO DO HERO
======================================== */

.about-hero__content {
    max-width: 620px;
}


.about-hero__back {
    display: inline-flex;
    align-items: center;

    gap: 9px;

    margin-bottom: 48px;

    color: rgba(255, 255, 255, 0.46);

    font-size: 13px;
    font-weight: 500;

    transition: var(--transition);
}


.about-hero__back span {
    color: var(--color-secondary);

    font-size: 16px;

    transition: transform 0.25s ease;
}


.about-hero__back:hover {
    color: var(--color-white);
}


.about-hero__back:hover span {
    transform: translateX(-4px);
}


.about-hero__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.about-hero__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.about-hero__title {
    margin-bottom: 28px;

    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: clamp(48px, 4.6vw, 72px);
    font-weight: 600;

    line-height: 1.04;
    letter-spacing: -2.8px;
}


.about-hero__title span {
    display: block;

    color: var(--color-secondary);
}


.about-hero__description {
    max-width: 590px;

    margin-bottom: 37px;

    color: rgba(255, 255, 255, 0.63);

    font-family: var(--font-secondary);
    font-size: 16px;

    line-height: 1.8;
}


/* ========================================
   BOTÕES DO HERO
======================================== */

.about-hero__actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 15px;
}


.about-hero__primary,
.about-hero__secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;

    transition: var(--transition);
}


.about-hero__primary {
    gap: 13px;

    padding: 16px 24px;

    background-color: var(--color-secondary);
    color: var(--color-primary-dark);
}


.about-hero__primary:hover {
    background-color: #22d0bc;

    transform: translateY(-2px);
}


.about-hero__primary span {
    font-size: 17px;
}


.about-hero__secondary {
    padding: 15px 23px;

    border: 1px solid rgba(255, 255, 255, 0.24);

    color: var(--color-white);
}


.about-hero__secondary:hover {
    border-color: var(--color-secondary);

    color: var(--color-secondary);
}


/* ========================================
   COMPOSIÇÃO VISUAL
======================================== */

.about-hero__visual {
    position: relative;

    width: 100%;
    height: 610px;
}


.about-hero__visual::before {
    content: "";

    position: absolute;

    top: 24px;
    right: -24px;

    width: 72%;
    height: 86%;

    border: 1px solid rgba(255, 255, 255, 0.12);
}


.about-hero__image {
    position: absolute;

    overflow: hidden;

    background-color: #1a3446;
}


.about-hero__image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.8s ease;
}


.about-hero__image:hover img {
    transform: scale(1.025);
}


.about-hero__image--main {
    top: 0;
    right: 0;

    width: 78%;
    height: 510px;

    border-radius: 170px 16px 16px 16px;
}


.about-hero__image--main img {
    object-position: center;
}


.about-hero__image--secondary {
    left: 0;
    bottom: 8px;

    width: 40%;
    height: 260px;

    border: 10px solid #092238;
    border-radius: 16px 16px 130px 16px;

    z-index: 2;
}


.about-hero__statement {
    position: absolute;

    right: 5%;
    bottom: 0;

    width: 47%;

    padding: 22px 25px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    background-color: var(--color-white);

    z-index: 3;
}


.about-hero__statement span {
    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.about-hero__statement strong {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;

    line-height: 1.5;
}


/* ========================================
   MANIFESTO
======================================== */

.about-manifesto {
    width: 100%;

    padding: 80px 0 110px;

    border-top: 1px solid rgba(255, 255, 255, 0.09);
}


.about-manifesto__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: 110px 1fr;

    gap: 45px;
}


.about-manifesto__index {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
}


.about-manifesto__eyebrow {
    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.42);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.about-manifesto__text {
    max-width: 1080px;

    color: rgba(255, 255, 255, 0.84);

    font-family: var(--font-primary);
    font-size: clamp(30px, 3.2vw, 48px);
    font-weight: 500;

    line-height: 1.28;
    letter-spacing: -1.3px;
}


/* ========================================
   FLUXO CLARO
======================================== */

.about-light-flow {
    width: 100%;

    background:
        linear-gradient(
            180deg,
            #f4f2ec 0%,
            #f4f2ec 56%,
            #ffffff 100%
        );
}


/* ========================================
   NOSSA ORIGEM
======================================== */

.about-origin {
    width: 100%;

    padding: 145px 0 150px;
}


.about-origin__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;
}


.about-origin__header {
    margin-bottom: 80px;
}


.about-origin__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 21px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.about-origin__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.about-origin__heading {
    display: grid;
    grid-template-columns: 1.15fr 0.65fr;

    gap: 90px;

    align-items: end;
}


.about-origin__title {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(44px, 4.5vw, 66px);
    font-weight: 600;

    line-height: 1.07;
    letter-spacing: -2.2px;
}


.about-origin__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.about-origin__description {
    max-width: 500px;

    padding-bottom: 6px;

    color: var(--color-text-secondary);

    font-size: 16px;
    line-height: 1.8;
}


/* LAYOUT */

.about-origin__layout {
    display: grid;
    grid-template-columns: 1.07fr 0.93fr;

    gap: 90px;

    align-items: center;
}


/* IMAGEM */

.about-origin__visual {
    position: relative;

    height: 680px;

    overflow: hidden;
}


.about-origin__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-origin__caption {
    position: absolute;

    left: 0;
    bottom: 0;

    width: 64%;

    padding: 23px 26px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    background-color: var(--color-primary-dark);
}


.about-origin__caption span {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.about-origin__caption strong {
    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;
}


/* ITENS */

.about-origin__content {
    border-top: 1px solid rgba(16, 42, 67, 0.16);
}


.about-origin__item {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 27px 0;

    border-bottom: 1px solid rgba(16, 42, 67, 0.16);
}


.about-origin__number {
    padding-top: 3px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.about-origin__item h3 {
    margin-bottom: 9px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 20px;
    font-weight: 600;
}


.about-origin__item p {
    max-width: 480px;

    color: var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.7;
}


/* ========================================
   PROPÓSITO
======================================== */

.about-purpose {
    width: 100%;

    padding: 130px 0 145px;

    border-top: 1px solid rgba(16, 42, 67, 0.08);
}


.about-purpose__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;

    gap: 95px;
}


.about-purpose__eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.about-purpose__title {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(42px, 4vw, 61px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -2px;
}


.about-purpose__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.about-purpose__lead {
    max-width: 650px;

    margin-bottom: 30px;

    color: var(--color-text-secondary);

    font-size: 16px;
    line-height: 1.8;
}


.about-purpose__quote {
    margin: 0 0 42px;

    padding: 24px 26px;

    background-color: var(--color-primary-dark);

    border-left: 3px solid var(--color-secondary);

    color: rgba(255, 255, 255, 0.83);

    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;

    line-height: 1.65;
}


.about-purpose__areas {
    display: grid;
    grid-template-columns: repeat(2, 1fr);

    border-top: 1px solid rgba(16, 42, 67, 0.15);
    border-left: 1px solid rgba(16, 42, 67, 0.15);
}


.about-purpose__areas > div {
    min-height: 115px;

    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    gap: 7px;

    border-right: 1px solid rgba(16, 42, 67, 0.15);
    border-bottom: 1px solid rgba(16, 42, 67, 0.15);
}


.about-purpose__areas span {
    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 10px;
    font-weight: 700;

    letter-spacing: 0.6px;
    text-transform: uppercase;
}


.about-purpose__areas strong {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 500;

    line-height: 1.5;
}


/* ========================================
   COMO TRABALHAMOS
======================================== */

.about-work {
    width: 100%;

    padding: 150px 0;

    background-color: var(--color-white);
}


.about-work__container {
    width: 100%;
    max-width: 1420px;

    margin: 0 auto;
    padding: 0 48px;

    display: grid;
    grid-template-columns: 0.92fr 1.08fr;

    gap: 100px;

    align-items: center;
}


.about-work__content {
    max-width: 600px;
}


.about-work__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 11px;

    margin-bottom: 20px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.about-work__eyebrow::before {
    content: "";

    width: 32px;
    height: 2px;

    background-color: var(--color-secondary);
}


.about-work__title {
    margin-bottom: 26px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(42px, 4vw, 61px);
    font-weight: 600;

    line-height: 1.08;
    letter-spacing: -2px;
}


.about-work__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.about-work__description {
    margin-bottom: 46px;

    color: var(--color-text-secondary);

    font-size: 16px;
    line-height: 1.8;
}


.about-work__list {
    border-top: 1px solid rgba(16, 42, 67, 0.16);
}


.about-work__item {
    display: grid;
    grid-template-columns: 45px 1fr;

    gap: 18px;

    padding: 24px 0;

    border-bottom: 1px solid rgba(16, 42, 67, 0.16);
}


.about-work__item > span {
    padding-top: 3px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.about-work__item h3 {
    margin-bottom: 8px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
}


.about-work__item p {
    color: var(--color-text-secondary);

    font-size: 13px;
    line-height: 1.7;
}


/* IMAGEM */

.about-work__visual {
    position: relative;

    height: 690px;

    overflow: hidden;
}


.about-work__visual img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


.about-work__visual-card {
    position: absolute;

    right: 0;
    bottom: 0;

    width: 60%;

    padding: 23px 26px;

    display: flex;
    flex-direction: column;

    gap: 7px;

    background-color: var(--color-primary-dark);
}


.about-work__visual-card span {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 9px;
    font-weight: 700;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.about-work__visual-card strong {
    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 500;

    line-height: 1.5;
}


/* ========================================
   PRINCÍPIOS
======================================== */

.about-principles {
    width: 100%;

    padding: 130px 0 145px;

    background-color: #f4f2ec;
}


.about-principles__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;
}


.about-principles__header {
    max-width: 900px;

    margin-bottom: 70px;
}


.about-principles__eyebrow {
    display: inline-block;

    margin-bottom: 20px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 0.9px;
    text-transform: uppercase;
}


.about-principles__title {
    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(44px, 4.4vw, 65px);
    font-weight: 600;

    line-height: 1.07;
    letter-spacing: -2.1px;
}


.about-principles__title span {
    display: block;

    color: var(--color-secondary-dark);
}


.about-principles__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid rgba(16, 42, 67, 0.15);
    border-bottom: 1px solid rgba(16, 42, 67, 0.15);
}


.about-principle {
    min-height: 300px;

    padding: 32px 28px;

    border-right: 1px solid rgba(16, 42, 67, 0.15);

    transition:
        background-color 0.3s ease,
        transform 0.3s ease;
}


.about-principle:last-child {
    border-right: none;
}


.about-principle:hover {
    background-color: var(--color-white);

    transform: translateY(-5px);
}


.about-principle__number {
    display: block;

    margin-bottom: 82px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 700;
}


.about-principle h3 {
    margin-bottom: 14px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: 22px;
    font-weight: 600;
}


.about-principle p {
    color: var(--color-text-secondary);

    font-size: 14px;
    line-height: 1.7;
}


/* ========================================
   VISÃO DE FUTURO
======================================== */

.about-future {
    width: 100%;

    padding: 135px 0;

    background-color: #071c2d;
}


.about-future__container {
    width: 100%;
    max-width: var(--container-width);

    margin: 0 auto;
    padding: 0 32px;

    display: grid;
    grid-template-columns: 110px 1fr;

    gap: 45px;
}


.about-future__index {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 700;
}


.about-future__content {
    max-width: 1100px;
}


.about-future__eyebrow {
    display: block;

    margin-bottom: 22px;

    color: rgba(255, 255, 255, 0.42);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;

    letter-spacing: 0.8px;
    text-transform: uppercase;
}


.about-future__title {
    margin-bottom: 30px;

    color: var(--color-white);

    font-family: var(--font-primary);
    font-size: clamp(43px, 4.5vw, 67px);
    font-weight: 600;

    line-height: 1.07;
    letter-spacing: -2.2px;
}


.about-future__title span {
    display: block;

    color: var(--color-secondary);
}


.about-future__description {
    max-width: 760px;

    margin-bottom: 50px;

    color: rgba(255, 255, 255, 0.60);

    font-size: 16px;
    line-height: 1.8;
}


.about-future__statement {
    max-width: 840px;

    padding: 26px 0;

    display: grid;
    grid-template-columns: 160px 1fr;

    gap: 30px;

    border-top: 1px solid rgba(255, 255, 255, 0.13);
    border-bottom: 1px solid rgba(255, 255, 255, 0.13);
}


.about-future__statement span {
    color: var(--color-secondary);

    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: 600;
}


.about-future__statement p {
    color: rgba(255, 255, 255, 0.67);

    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;

    line-height: 1.65;
}


/* ========================================
   CTA FINAL
======================================== */

.about-cta {
    position: relative;

    width: 100%;

    padding: 125px 0 135px;

    overflow: hidden;

    background-color: #f4f2ec;
}


.about-cta::before {
    content: "";

    position: absolute;

    top: -520px;
    left: 50%;

    width: 900px;
    height: 900px;

    border: 1px solid rgba(16, 42, 67, 0.08);
    border-radius: 50%;

    transform: translateX(-50%);
}


.about-cta__container {
    position: relative;

    width: 100%;
    max-width: 1120px;

    margin: 0 auto;
    padding: 0 32px;

    text-align: center;

    z-index: 2;
}


.about-cta__eyebrow {
    display: inline-flex;
    align-items: center;

    gap: 12px;

    margin-bottom: 24px;

    color: var(--color-secondary-dark);

    font-family: var(--font-primary);
    font-size: 12px;
    font-weight: 700;

    letter-spacing: 1px;
    text-transform: uppercase;
}


.about-cta__eyebrow::before,
.about-cta__eyebrow::after {
    content: "";

    width: 27px;
    height: 1px;

    background-color: rgba(22, 184, 166, 0.58);
}


.about-cta__title {
    max-width: 1040px;

    margin: 0 auto 27px;

    color: var(--color-primary-dark);

    font-family: var(--font-primary);
    font-size: clamp(48px, 5vw, 74px);
    font-weight: 600;

    line-height: 1.03;
    letter-spacing: -3px;
}


.about-cta__title span {
    display: block;

    margin-top: 8px;

    color: var(--color-secondary-dark);
}


.about-cta__description {
    max-width: 680px;

    margin: 0 auto 38px;

    color: var(--color-text-secondary);

    font-size: 16px;
    line-height: 1.75;
}


.about-cta__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 14px;
}


.about-cta__primary,
.about-cta__secondary {
    min-height: 56px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 999px;

    font-family: var(--font-primary);
    font-size: 14px;
    font-weight: 600;

    transition: var(--transition);
}


.about-cta__primary {
    min-width: 235px;

    gap: 15px;

    padding: 0 26px;

    background-color: var(--color-primary-dark);
    color: var(--color-white);
}


.about-cta__primary:hover {
    background-color: var(--color-secondary-dark);

    transform: translateY(-3px);
}


.about-cta__primary span {
    font-size: 19px;

    transition: transform 0.25s ease;
}


.about-cta__primary:hover span {
    transform: translateX(5px);
}


.about-cta__secondary {
    min-width: 190px;

    padding: 0 26px;

    border: 1px solid rgba(16, 42, 67, 0.23);

    color: var(--color-primary-dark);
}


.about-cta__secondary:hover {
    border-color: var(--color-secondary-dark);

    color: var(--color-secondary-dark);

    transform: translateY(-3px);
}

/* ======================================================
   RESPONSIVIDADE — SOBRE NÓS
====================================================== */


/* ======================================================
   PROTEÇÃO CONTRA OVERFLOW
====================================================== */

.about-hero__container,
.about-hero__content,
.about-hero__visual,
.about-manifesto__container,
.about-manifesto__content,
.about-origin__container,
.about-origin__heading,
.about-origin__layout,
.about-origin__visual,
.about-origin__content,
.about-purpose__container,
.about-purpose__intro,
.about-purpose__content,
.about-work__container,
.about-work__content,
.about-work__visual,
.about-principles__container,
.about-principles__grid,
.about-future__container,
.about-future__content,
.about-cta__container {
    min-width: 0;
}


/* ======================================================
   ATÉ 1200PX
====================================================== */

@media (max-width: 1200px) {

    .about-hero__container {
        padding-left: 32px;
        padding-right: 32px;

        grid-template-columns:
            minmax(360px, 0.9fr)
            minmax(0, 1.1fr);

        gap: 55px;
    }


    .about-hero__visual {
        height: 570px;
    }


    .about-origin__heading {
        grid-template-columns:
            minmax(0, 1.1fr)
            minmax(320px, 0.7fr);

        gap: 55px;
    }


    .about-origin__layout {
        gap: 60px;
    }


    .about-purpose__container {
        gap: 60px;
    }


    .about-work__container {
        padding-left: 32px;
        padding-right: 32px;

        gap: 60px;
    }


    .about-principles__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }


    .about-principle:nth-child(2) {
        border-right: none;
    }


    .about-principle:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(16, 42, 67, 0.15);
    }

}


/* ======================================================
   ATÉ 992PX
====================================================== */

@media (max-width: 992px) {

    /* HERO */

    .about-hero {
        min-height: auto;
    }


    .about-hero__container {
        min-height: auto;

        padding-top: 82px;
        padding-bottom: 95px;

        grid-template-columns: 1fr;

        gap: 65px;
    }


    .about-hero__content {
        max-width: 720px;
    }


    .about-hero__visual {
        width: 100%;
        max-width: 820px;
        height: 610px;

        margin: 0 auto;
    }


    /* MANIFESTO */

    .about-manifesto {
        padding: 70px 0 90px;
    }


    .about-manifesto__container {
        grid-template-columns: 70px 1fr;

        gap: 30px;
    }


    /* ORIGEM */

    .about-origin {
        padding: 110px 0 120px;
    }


    .about-origin__heading {
        grid-template-columns: 1fr;

        gap: 24px;
    }


    .about-origin__description {
        max-width: 720px;
    }


    .about-origin__layout {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .about-origin__visual {
        width: 100%;
        max-width: 820px;
        height: 580px;

        margin: 0 auto;
    }


    /* PROPÓSITO */

    .about-purpose {
        padding: 105px 0 115px;
    }


    .about-purpose__container {
        grid-template-columns: 1fr;

        gap: 45px;
    }


    .about-purpose__intro,
    .about-purpose__content {
        max-width: 760px;
    }


    /* COMO TRABALHAMOS */

    .about-work {
        padding: 110px 0;
    }


    .about-work__container {
        grid-template-columns: 1fr;

        gap: 60px;
    }


    .about-work__content {
        max-width: 720px;
    }


    .about-work__visual {
        width: 100%;
        max-width: 820px;
        height: 580px;

        margin: 0 auto;
    }


    /* PRINCÍPIOS */

    .about-principles {
        padding: 105px 0 115px;
    }


    /* FUTURO */

    .about-future {
        padding: 105px 0;
    }


    .about-future__container {
        grid-template-columns: 70px 1fr;

        gap: 30px;
    }

}


/* ======================================================
   ATÉ 768PX
====================================================== */

@media (max-width: 768px) {

    .about-hero__container,
    .about-manifesto__container,
    .about-origin__container,
    .about-purpose__container,
    .about-work__container,
    .about-principles__container,
    .about-future__container,
    .about-cta__container {
        padding-left: 20px;
        padding-right: 20px;
    }


    /* HERO */

    .about-hero__container {
        padding-top: 72px;
        padding-bottom: 82px;

        gap: 50px;
    }


    .about-hero__back {
        margin-bottom: 34px;
    }


    .about-hero__title {
        font-size: clamp(40px, 10vw, 54px);

        letter-spacing: -1.7px;
    }


    .about-hero__description {
        font-size: 15px;
    }


    .about-hero__visual {
        height: 500px;
    }


    .about-hero__image--main {
        width: 86%;
        height: 420px;

        border-radius: 110px 14px 14px 14px;
    }


    .about-hero__image--secondary {
        width: 42%;
        height: 210px;

        border-width: 7px;
        border-radius: 14px 14px 95px 14px;
    }


    .about-hero__statement {
        width: 58%;

        padding: 18px 20px;
    }


    /* MANIFESTO */

    .about-manifesto__text {
        font-size: clamp(28px, 7vw, 40px);
    }


    /* ORIGEM */

    .about-origin {
        padding: 90px 0 100px;
    }


    .about-origin__header {
        margin-bottom: 55px;
    }


    .about-origin__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-origin__description {
        font-size: 15px;
    }


    .about-origin__visual {
        height: 470px;
    }


    .about-origin__caption {
        width: 78%;
    }


    /* PROPÓSITO */

    .about-purpose {
        padding: 88px 0 98px;
    }


    .about-purpose__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-purpose__lead {
        font-size: 15px;
    }


    .about-purpose__areas {
        grid-template-columns: 1fr 1fr;
    }


    /* COMO TRABALHAMOS */

    .about-work {
        padding: 90px 0;
    }


    .about-work__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-work__description {
        font-size: 15px;
    }


    .about-work__visual {
        height: 470px;
    }


    .about-work__visual-card {
        width: 76%;
    }


    /* PRINCÍPIOS */

    .about-principles {
        padding: 90px 0 100px;
    }


    .about-principles__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-principle {
        min-height: 250px;
    }


    .about-principle__number {
        margin-bottom: 52px;
    }


    /* FUTURO */

    .about-future {
        padding: 90px 0;
    }


    .about-future__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-future__description {
        font-size: 15px;
    }


    .about-future__statement {
        grid-template-columns: 130px 1fr;

        gap: 22px;
    }


    /* CTA */

    .about-cta {
        padding: 95px 0;
    }


    .about-cta__title {
        font-size: clamp(38px, 9vw, 50px);

        letter-spacing: -1.5px;
    }


    .about-cta__description {
        font-size: 15px;
    }

}


/* ======================================================
   ATÉ 576PX
====================================================== */

@media (max-width: 576px) {

    /* HERO */

    .about-hero__container {
        padding-top: 58px;
        padding-bottom: 70px;
    }


    .about-hero__back {
        margin-bottom: 28px;

        font-size: 12px;
    }


    .about-hero__eyebrow {
        font-size: 10px;
    }


    .about-hero__title {
        font-size: 37px;
    }


    .about-hero__actions {
        align-items: stretch;
        flex-direction: column;
    }


    .about-hero__primary,
    .about-hero__secondary {
        width: 100%;
    }


    .about-hero__visual {
        height: auto;
    }


    .about-hero__visual::before {
        display: none;
    }


    .about-hero__image {
        position: relative;
        inset: auto;

        width: 100%;
    }


    .about-hero__image--main {
        height: 330px;

        border-radius: 65px 14px 14px 14px;
    }


    .about-hero__image--secondary {
        height: 220px;

        margin-top: 12px;

        border: none;
        border-radius: 14px 14px 65px 14px;
    }


    .about-hero__statement {
        position: relative;

        right: auto;
        bottom: auto;

        width: 100%;

        margin-top: 12px;
    }


    /* MANIFESTO */

    .about-manifesto {
        padding: 58px 0 70px;
    }


    .about-manifesto__container {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .about-manifesto__text {
        font-size: 27px;

        letter-spacing: -0.8px;
    }


    /* ORIGEM */

    .about-origin {
        padding: 72px 0 80px;
    }


    .about-origin__title {
        font-size: 35px;
    }


    .about-origin__visual {
        height: 350px;
    }


    .about-origin__caption {
        position: relative;

        width: 100%;

        padding: 18px;
    }


    .about-origin__item {
        grid-template-columns: 32px 1fr;

        gap: 12px;

        padding: 22px 0;
    }


    .about-origin__item h3 {
        font-size: 18px;
    }


    .about-origin__item p {
        font-size: 13px;
    }


    /* PROPÓSITO */

    .about-purpose {
        padding: 72px 0 80px;
    }


    .about-purpose__title {
        font-size: 35px;
    }


    .about-purpose__quote {
        padding: 20px;

        font-size: 14px;
    }


    .about-purpose__areas {
        grid-template-columns: 1fr;
    }


    .about-purpose__areas > div {
        min-height: 95px;
    }


    /* COMO TRABALHAMOS */

    .about-work {
        padding: 72px 0;
    }


    .about-work__title {
        font-size: 35px;
    }


    .about-work__item {
        grid-template-columns: 32px 1fr;

        gap: 12px;
    }


    .about-work__visual {
        height: 350px;
    }


    .about-work__visual-card {
        position: relative;

        width: 100%;

        padding: 18px;
    }


    /* PRINCÍPIOS */

    .about-principles {
        padding: 72px 0 80px;
    }


    .about-principles__header {
        margin-bottom: 45px;
    }


    .about-principles__title {
        font-size: 35px;
    }


    .about-principles__grid {
        grid-template-columns: 1fr;
    }


    .about-principle {
        min-height: auto;

        padding: 26px 20px;

        border-right: none;
        border-bottom: 1px solid rgba(16, 42, 67, 0.15);
    }


    .about-principle:last-child {
        border-bottom: none;
    }


    .about-principle__number {
        margin-bottom: 30px;
    }


    /* FUTURO */

    .about-future {
        padding: 72px 0;
    }


    .about-future__container {
        grid-template-columns: 1fr;

        gap: 14px;
    }


    .about-future__title {
        font-size: 35px;
    }


    .about-future__statement {
        grid-template-columns: 1fr;

        gap: 10px;
    }


    /* CTA */

    .about-cta {
        padding: 78px 0;
    }


    .about-cta__eyebrow {
        gap: 8px;

        font-size: 10px;
    }


    .about-cta__eyebrow::before,
    .about-cta__eyebrow::after {
        width: 20px;
    }


    .about-cta__title {
        font-size: 35px;
    }


    .about-cta__actions {
        align-items: stretch;
        flex-direction: column;
    }


    .about-cta__primary,
    .about-cta__secondary {
        width: 100%;
        min-width: 0;
    }

}