/* ==========================================================
   SONARIA — ABOUT
   ========================================================== */


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

.about-hero {

    min-height: 70vh;

    padding-top:
        calc(
            var(--navbar-height) +
            var(--space-4xl)
        );

    padding-bottom:
        var(--space-4xl);

    display: flex;

    align-items: center;

    background:
        var(--color-primary);

}


.about-hero-content {

    max-width: 820px;

}


.about-hero h1 {

    max-width: 820px;

    margin-top:
        var(--space-md);

    color:
        var(--color-background);

}


.about-hero p {

    max-width: 680px;

    margin-top:
        var(--space-lg);

    font-size:
        var(--fs-body-lg);

    color:
        var(--color-accent);

}



/* ==========================================================
   PHILOSOPHY
   ========================================================== */

.about-philosophy {

    padding-block:
        var(--section-spacing);

    background:
        var(--color-surface);

}


.philosophy-grid {

    display: grid;

    grid-template-columns:
        0.7fr 1.3fr;

    gap:
        var(--space-4xl);

    align-items: start;

}


.philosophy-content {

    max-width:
        760px;

}


.philosophy-content h2 {

    margin-bottom:
        var(--space-xl);

}


.philosophy-content p {

    max-width:
        700px;

    margin-top:
        var(--space-lg);

    color:
        var(--color-secondary);

}



/* ==========================================================
   PRINCIPLES
   ========================================================== */

.about-principles {

    padding-top:
        var(--space-4xl);

    padding-bottom:
        var(--space-4xl);

    background:
        var(--color-background);

}


.principles-intro {

    max-width:
        760px;

    margin-bottom:
        var(--space-3xl);

}


.principles-intro h2 {

    margin-top:
        var(--space-sm);

}



/* ==========================================================
   SKYLINE
   ========================================================== */

/*
 * The skyline is intentionally treated as a visual stage.
 *
 * Each pillar has its own height.
 * The content sits at the TOP of that pillar.
 *
 * This creates the architectural / skyline metaphor
 * without making the section excessively tall.
 */

.principles-skyline {

    position: relative;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    align-items: end;

    gap:
        var(--space-md);

    min-height:
        390px;

    padding-top:
        var(--space-xl);

    border-bottom:
        1px solid
        var(--color-border);

}


/* ==========================================================
   PILLARS
   ========================================================== */

.principle-pillar {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: flex-start;

    padding:
        var(--space-lg);

    border-top:
        1px solid
        var(--color-border);

    border-left:
        1px solid
        var(--color-border);

    background:
        linear-gradient(
            to bottom,
            rgba(176,122,69,.035),
            rgba(176,122,69,0)
        );

    opacity: 0;

    transform:
        translateY(24px);

    transition:
        opacity 800ms ease,
        transform 900ms cubic-bezier(.22,1,.36,1);

}


/*
 * Different architectural heights.
 *
 * The important part:
 * the HEIGHT belongs to the pillar itself.
 * The text therefore moves with the pillar.
 */

.pillar-01 {

    height:
        220px;

}


.pillar-02 {

    height:
        280px;

}


.pillar-03 {

    height:
        340px;

}


.pillar-04 {

    height:
        255px;

}


/* ==========================================================
   PILLAR ANIMATION
   ========================================================== */

.principle-pillar.is-visible {

    opacity: 1;

    transform:
        translateY(0);

}


.pillar-01.is-visible {

    transition-delay:
        0ms;

}


.pillar-02.is-visible {

    transition-delay:
        120ms;

}


.pillar-03.is-visible {

    transition-delay:
        240ms;

}


.pillar-04.is-visible {

    transition-delay:
        360ms;

}



/* ==========================================================
   PILLAR INNER CONTENT
   ========================================================== */

.pillar-inner {

    display: flex;

    flex-direction: column;

    align-items: flex-start;

    max-width:
        240px;

}


.pillar-number {

    display: block;

    margin-bottom:
        var(--space-lg);

    color:
        var(--color-accent);

    font-size:
        var(--fs-small);

    font-weight:
        var(--fw-semibold);

    letter-spacing:
        .08em;

}


.pillar-inner h3 {

    margin: 0;

    font-size:
        var(--fs-h3);

    line-height:
        var(--lh-heading);

}


.pillar-inner p {

    margin-top:
        var(--space-md);

    color:
        var(--color-secondary);

    line-height:
        var(--lh-body);

}



/* ==========================================================
   ARCHITECTURAL VERTICAL LINES
   ========================================================== */

.principle-pillar::after {

    content: "";

    position: absolute;

    left: -1px;

    bottom: 0;

    width: 1px;

    height: 100%;

    background:
        var(--color-border);

    opacity: .65;

}


/*
 * Small horizontal "roof" accent.
 */

.principle-pillar::before {

    content: "";

    position: absolute;

    top: -1px;

    left: -1px;

    width: 100%;

    height: 1px;

    background:
        var(--color-accent);

    opacity: .35;

}



/* ==========================================================
   PROCESS
   ========================================================== */

.about-process {

    padding-block:
        var(--section-spacing);

    background:
        var(--color-surface);

}


.about-process-heading {

    max-width:
        760px;

    margin-bottom:
        var(--space-3xl);

}


.about-process-heading h2 {

    margin-top:
        var(--space-sm);

}


.about-process-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        var(--space-lg);

}


.about-process-step {

    padding-top:
        var(--space-lg);

    border-top:
        1px solid
        var(--color-border);

}


.about-process-step > span {

    display: block;

    margin-bottom:
        var(--space-xl);

    color:
        var(--color-accent);

    font-size:
        var(--fs-small);

    font-weight:
        var(--fw-semibold);

}


.about-process-step h3 {

    margin-bottom:
        var(--space-sm);

}


.about-process-step p {

    color:
        var(--color-secondary);

}



/* ==========================================================
   CLOSING CTA
   ========================================================== */

.about-closing {

    padding-block:
        var(--space-4xl);

    background:
        var(--color-primary);

    color:
        var(--color-background);

}


.about-closing-content {

    max-width:
        760px;

}


.about-closing h2 {

    margin-top:
        var(--space-sm);

}


.about-closing p {

    max-width:
        620px;

    margin-top:
        var(--space-md);

    color:
        rgba(245,243,239,.72);

}


.about-closing .btn {

    margin-top:
        var(--space-xl);

}



/* ==========================================================
   RESPONSIVE — TABLET
   ========================================================== */

@media (max-width: 992px) {


    .philosophy-grid {

        grid-template-columns:
            1fr;

        gap:
            var(--space-xl);

    }


    .principles-skyline {

        grid-template-columns:
            repeat(2, 1fr);

        min-height:
            620px;

        align-items:
            end;

    }


    .pillar-01 {
        height: 230px;
    }


    .pillar-02 {
        height: 290px;
    }


    .pillar-03 {
        height: 340px;
    }


    .pillar-04 {
        height: 270px;
    }


    .about-process-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}



/* ==========================================================
   RESPONSIVE — MOBILE
   ========================================================== */

@media (max-width: 768px) {


    .about-hero {

        min-height:
            auto;

        padding-top:
            calc(
                var(--navbar-height) +
                var(--space-3xl)
            );

        padding-bottom:
            var(--space-3xl);

    }


    .about-philosophy {

        padding-block:
            var(--space-3xl);

    }


    .about-principles {

        padding-top:
            var(--space-3xl);

        padding-bottom:
            var(--space-3xl);

    }


    .principles-skyline {

        grid-template-columns:
            1fr;

        min-height:
            auto;

        gap:
            var(--space-md);

        padding-top:
            var(--space-md);

    }


    .principle-pillar,
    .pillar-01,
    .pillar-02,
    .pillar-03,
    .pillar-04 {

        width: 100%;

        height: auto;

        min-height:
            180px;

    }


    .pillar-inner {

        max-width:
            100%;

    }


    .about-process {

        padding-block:
            var(--space-3xl);

    }


    .about-process-grid {

        grid-template-columns:
            1fr;

    }


    .about-closing {

        padding-block:
            var(--space-3xl);

    }

}