/* ==========================================================================
   01. Shared About Page
   ========================================================================== */

.about-page {
    background: var(--color-ivory);
    color: var(--color-text-dark);
}

.site-header.site-header-inner:not(.is-scrolled):not(.menu-open) {
    background: transparent;
    border-bottom-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}

.site-header.site-header-inner.is-scrolled {
    background-color: rgba(241, 237, 228, 0.98);
}

.main-nav a.is-active::after {
    width: 100%;
}

.about-eyebrow {
    color: var(--color-gold);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


/* ==========================================================================
   02. About Hero
   ========================================================================== */

.about-page-hero {
    min-height: 620px;
    padding: 175px var(--page-padding) 82px;

    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(300px, 0.65fr);
    align-items: end;
    gap: 90px;

    background:
        linear-gradient(
            rgba(9, 9, 9, 0.58),
            rgba(9, 9, 9, 0.68)
        ),
        url("assets/images/darkmarble.png")
        center / cover
        no-repeat;

    color: var(--color-text-light);
}

.about-page-intro {
    max-width: 920px;
}

.about-page-hero .about-page-intro h1 {
    max-width: 820px;
    margin-top: 18px;

    font-family: var(--font-heading);
    font-size: clamp(3.1rem, 5vw, 5.35rem);
    font-weight: 400;
    line-height: 0.9;
    text-transform: uppercase;
}

.about-page-lead {
    max-width: 650px;
    margin-top: 34px;

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

    font-size: 0.96rem;
}

.about-page-side {
    max-width: 360px;
    padding-top: 22px;

    align-self: center;

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

.about-side-label {
    margin-bottom: 14px;

    color: var(--color-gold);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.about-page-side > p:last-child {
    color: rgba(255, 255, 255, 0.68);

    font-size: 0.76rem;
    letter-spacing: 0.08em;
    line-height: 1.8;
    text-transform: uppercase;
}


/* ==========================================================================
   03. Studio Story
   ========================================================================== */

.studio-story {
    padding: 72px var(--page-padding) 54px;

    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: 90px;

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

.studio-story-heading h2,
.about-section-heading h2 {
    margin-top: 16px;

    font-family: var(--font-heading);
    font-size: clamp(3.2rem, 5vw, 5.4rem);
    font-weight: 400;
    line-height: 0.94;
    text-transform: uppercase;
}

.studio-story-copy {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    padding-top: 30px;

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

.studio-story-lead {
    margin-bottom: 30px;

    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 2.6vw, 2.8rem);
    line-height: 1.05;
}

.studio-story-copy > p:not(.studio-story-lead) {
    max-width: 640px;
    margin-top: 20px;

    color: rgba(29, 27, 24, 0.7);

    font-size: 0.9rem;
}


/* ==========================================================================
   04. Studio Principles
   ========================================================================== */

.about-principles {
    padding: 0 var(--page-padding) 56px;

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

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

.about-principle {
    min-height: 230px;
    padding: 24px 28px;

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

.about-principle:last-child {
    border-right: 1px solid var(--color-border-dark);
}

.about-principle > span {
    color: var(--color-gold);

    font-size: 0.66rem;
    letter-spacing: 0.13em;
}

.about-principle h3 {
    margin: 20px 0 14px;

    font-family: var(--font-body);
    font-size: 1.45rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    line-height: 1.15;
    text-transform: uppercase;
}

.about-principle p {
    max-width: 350px;

    color: rgba(29, 27, 24, 0.68);

    font-size: 0.82rem;
}


/* ==========================================================================
   05. Person Behind the Studio
   ========================================================================== */

.about-person {
    min-height: 575px;
    padding: 0 var(--page-padding);

    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    align-items: center;
    gap: 90px;

    background:
        linear-gradient(
            rgba(8, 8, 8, 0.70),
            rgba(8, 8, 8, 0.78)
        ),
        url("assets/images/darkmarble.png")
        center / cover
        no-repeat;

    color: var(--color-text-light);
}

.about-person-portrait {
    padding: 42px 0;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.about-portrait-frame {
    width: fit-content;
    max-width: 100%;

    overflow: visible;

    border: 0;
    background: transparent;
    box-shadow: none;
}

.about-portrait-frame img {
    display: block;

    width: auto;
    max-width: 100%;
    height: auto;
    max-height: 535px;

    object-fit: contain;
    object-position: center bottom;

    filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.2));

    transition:
        transform var(--transition-slow),
        filter var(--transition-slow);

    will-change: transform;
}

.about-portrait-frame:hover img {
    transform: scale(1.035);

    filter:
        drop-shadow(0 28px 34px rgba(0, 0, 0, 0.25));
}

.about-portrait-caption {
    margin-top: 16px;

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

    font-size: 0.62rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-person-copy {
    width: 100%;
    max-width: 760px;
    margin-left: auto;
    padding: 42px 0;

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

.about-person-copy h2 {
    margin: 18px 0 22px;

    font-family: var(--font-heading);
    font-size: clamp(3.4rem, 5.8vw, 6.1rem);
    font-weight: 400;
    line-height: 1.02;
    letter-spacing: -0.02em;
    text-transform: uppercase;
}

.about-person-role {
    margin-bottom: 32px;

    color: var(--color-gold);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-person-copy > p:not(.about-person-role):not(.about-eyebrow) {
    max-width: 570px;
    margin-top: 18px;

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

    font-size: 0.9rem;
    line-height: 1.65;
}


/* ==========================================================================
   06. Experience
   ========================================================================== */

.about-experience,
.about-capabilities,
.about-beyond {
    padding: 100px var(--page-padding);
}

.about-education {
    padding: 82px var(--page-padding) 54px;
}

.about-experience {
    background: var(--color-ivory);
}

.about-section-heading {
    max-width: 760px;
    margin-bottom: 64px;
}

.about-section-heading > p:last-child:not(.about-eyebrow) {
    max-width: 560px;
    margin-top: 24px;

    color: rgba(29, 27, 24, 0.66);

    font-size: 0.88rem;
}

.experience-list {
    border-top: 1px solid var(--color-border-dark);
}

.experience-entry {
    padding: 28px 0;

    display: grid;
    grid-template-columns: 70px minmax(260px, 0.7fr) minmax(0, 1.3fr);
    gap: 28px;
    align-items: start;

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

.experience-index {
    color: var(--color-gold);

    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.13em;
}

.experience-entry h3 {
    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 500;
    line-height: 1.15;
}

.experience-role {
    margin-top: 7px;

    color: var(--color-gold);

    font-size: 0.62rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.experience-entry > p:last-child {
    max-width: 620px;

    color: rgba(29, 27, 24, 0.66);

    font-size: 0.82rem;
}


/* ==========================================================================
   07. Education
   ========================================================================== */

.about-education {
    background: var(--color-paper);
}

.education-list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.education-entry {
    min-height: 245px;
    padding: 28px 30px;

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

.education-entry:last-child {
    border-right: 1px solid var(--color-border-dark);
}

.education-entry > span {
    color: var(--color-gold);

    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}

.education-entry h3 {
    margin: 44px 0 16px;

    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    line-height: 1.12;
    text-transform: uppercase;
}

.education-entry p {
    color: rgba(29, 27, 24, 0.66);

    font-size: 0.8rem;
}


/* ==========================================================================
   08. Capabilities
   ========================================================================== */

.about-capabilities {
    background: var(--color-ivory);
}

.about-capability-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    box-shadow:
        0 12px 30px rgba(35, 25, 15, 0.06),
        0 34px 70px rgba(35, 25, 15, 0.08);
}

.about-capability {
    min-height: 360px;
    padding: 32px;

    background: #f5f0e8;

    border-top: 1px solid rgba(30, 25, 20, 0.09);
    border-left: 1px solid rgba(30, 25, 20, 0.09);
}

.about-capability:last-child {
    border-right: 1px solid rgba(30, 25, 20, 0.09);
}

.about-capability > span {
    color: var(--color-gold);

    font-size: 0.66rem;
    letter-spacing: 0.13em;
}

.about-capability h3 {
    margin: 24px 0 26px;

    font-family: var(--font-body);
    font-size: 1.3rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.15;
    text-transform: uppercase;
}

.about-capability ul,
.about-certifications ul {
    list-style: none;
}

.about-capability li,
.about-certifications li {
    padding: 9px 0;

    border-bottom: 1px solid rgba(30, 25, 20, 0.1);

    color: rgba(29, 27, 24, 0.7);

    font-size: 0.78rem;
}


/* ==========================================================================
   09. Languages & Certifications
   ========================================================================== */

.about-credentials {
    padding: 74px var(--page-padding) 80px;

    display: grid;
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    column-gap: 100px;
    row-gap: 34px;

    background:
        linear-gradient(
            rgba(9, 9, 9, 0.50),
            rgba(9, 9, 9, 0.60)
        ),
        radial-gradient(
            circle at 54% 46%,
            rgba(191, 145, 58, 0.17),
            transparent 44%
        ),
        url("assets/images/darkmarble.png")
        center 56% / cover
        no-repeat;

    color: var(--color-text-light);
}

.credentials-section-heading {
    grid-column: 1 / -1;

    padding-bottom: 18px;

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

.about-languages h3,
.about-certifications h3 {
    margin-bottom: 28px;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 2.6vw, 2.8rem);
    font-weight: 400;
    line-height: 1;
    text-transform: uppercase;
}

.language-list {
    border-top: 1px solid rgba(255, 255, 255, 0.13);
}

.about-language {
    padding: 14px 0;

    display: grid;
    gap: 3px;

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

.about-language span {
    font-family: var(--font-body);
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.05;
}

.about-language strong {
    color: var(--color-gold);

    font-family: var(--font-body);
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-certifications ul {
    margin-top: 0;

    counter-reset: credential-item;

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

.about-certifications li {
    padding: 13px 0;

    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 14px;
    align-items: baseline;

    counter-increment: credential-item;

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

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

    font-family: var(--font-body);
    font-size: 1.16rem;
    font-weight: 400;
    line-height: 1.18;
}

.about-certifications li::before {
    content: counter(credential-item, decimal-leading-zero);

    color: var(--color-gold);

    font-family: var(--font-body);
    font-size: 0.58rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.about-language,
.about-certifications li {
    transition:
        padding-left var(--transition-fast),
        color var(--transition-fast);
}

.about-language:hover,
.about-certifications li:hover {
    padding-left: 8px;
}

.about-certifications li:hover {
    color: #ffffff;
}


/* ==========================================================================
   10. Beyond Work
   ========================================================================== */

.about-beyond {
    background: var(--color-ivory);
}

.about-beyond-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.about-beyond-card {
    min-height: 230px;
    padding: 28px;

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

.about-beyond-card:last-child {
    border-right: 1px solid var(--color-border-dark);
}

.about-beyond-card span {
    color: var(--color-gold);

    font-size: 0.66rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.about-beyond-card p {
    margin-top: 64px;

    font-family: var(--font-body);
    font-size: 1.15rem;
    font-weight: 400;
    line-height: 1.25;
}


/* ==========================================================================
   11. Responsive - Desktop
   ========================================================================== */

@media (min-width: 1440px) {

    .about-page-hero {
        min-height: 650px;
    }

    .studio-story {
        padding-top: 78px;
        padding-bottom: 56px;
    }

    .about-experience,
    .about-capabilities,
    .about-beyond {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .about-education {
        padding-top: 88px;
        padding-bottom: 56px;
    }

}


/* ==========================================================================
   12. Responsive - Laptop & Tablet
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1439px) {

    .about-page-hero {
        min-height: 580px;
        padding-top: 155px;
        gap: 54px;
    }

    .about-page-hero .about-page-intro h1 {
        font-size: clamp(3.4rem, 6vw, 5.2rem);
    }

    .studio-story {
        gap: 54px;
    }

    .about-person {
        grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
        gap: 54px;
    }

    .about-portrait-frame {
        width: fit-content;
        max-width: 100%;
    }

    .about-portrait-frame img {
        max-height: 490px;
    }

    .about-person-copy {
        margin-left: auto;
        padding: 44px 0;
    }

    .about-person-copy h2 {
        font-size: clamp(3.2rem, 5.4vw, 5.4rem);
        line-height: 1.02;
    }

    .experience-entry {
        grid-template-columns: 54px minmax(230px, 0.75fr) minmax(0, 1.25fr);
        gap: 22px;
    }

    .about-capability {
        padding: 26px;
    }

    .about-credentials {
        column-gap: 54px;
        row-gap: 30px;
    }

    .about-languages h3,
    .about-certifications h3 {
        font-size: clamp(1.9rem, 3vw, 2.4rem);
    }

}


/* ==========================================================================
   13. Responsive - Smartphone
   ========================================================================== */

@media (max-width: 768px) {

    .site-header-inner.menu-open {
        background: rgba(241, 237, 228, 0.99);
    }

    .about-page-hero {
        min-height: 0;
        padding:
            126px
            var(--page-padding)
            58px;

        grid-template-columns: 1fr;
        gap: 46px;
    }

    .about-page-hero .about-page-intro h1 {
        font-size: clamp(3.8rem, 18vw, 6rem);
        line-height: 0.84;
    }

    .about-page-side {
        max-width: 420px;
    }

    .studio-story {
        padding:
            54px
            var(--page-padding)
            44px;

        grid-template-columns: 1fr;
        gap: 38px;
    }

    .studio-story-copy {
        padding-top: 24px;
    }

    .about-principles {
        padding:
            0
            var(--page-padding)
            48px;

        grid-template-columns: 1fr;
    }

    .about-principle {
        min-height: 0;

        border-right: 1px solid var(--color-border-dark);
    }

    .about-principle:last-child {
        border-bottom: 1px solid var(--color-border-dark);
    }

    .about-principle h3 {
        margin-top: 22px;
    }

    .about-person {
        min-height: 0;
        padding: 0 var(--page-padding);

        grid-template-columns: 1fr;
        gap: 34px;
    }

    .about-person-portrait {
        padding: 54px 0 0;
    }

    .about-portrait-frame {
        width: fit-content;
        max-width: 100%;
    }

    .about-portrait-frame img {
        width: 100%;
        max-height: 520px;
    }

    .about-person-copy {
        max-width: 100%;
        margin-left: 0;
        padding: 0 0 68px;
    }

    .about-person-copy h2 {
        font-size: clamp(3rem, 15vw, 4.9rem);
        line-height: 1.02;
    }

    .about-experience,
    .about-capabilities,
    .about-beyond {
        padding:
            68px
            var(--page-padding);
    }

    .about-education {
        padding:
            60px
            var(--page-padding)
            44px;
    }

    .experience-entry {
        padding: 24px 0;

        grid-template-columns: 42px 1fr;
        gap: 18px;
    }

    .experience-entry > p:last-child {
        grid-column: 2;
    }

    .education-list,
    .about-capability-grid,
    .about-beyond-grid {
        grid-template-columns: 1fr;
    }

    .education-entry,
    .about-capability,
    .about-beyond-card {
        min-height: 0;

        border-right: 1px solid var(--color-border-dark);
    }

    .education-entry:last-child,
    .about-capability:last-child,
    .about-beyond-card:last-child {
        border-bottom: 1px solid var(--color-border-dark);
    }

    .education-entry h3 {
        margin-top: 34px;
    }

    .about-capability h3 {
        margin-top: 22px;
    }

    .about-credentials {
        padding:
            58px
            var(--page-padding)
            62px;

        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 42px;

        background-position: center;
    }

    .credentials-section-heading {
        padding-bottom: 14px;
    }

    .about-languages h3,
    .about-certifications h3 {
        margin-bottom: 22px;

        font-size: 2rem;
    }

    .about-certifications li {
        grid-template-columns: 34px minmax(0, 1fr);

        font-size: 1.08rem;
    }

    .about-beyond-card p {
        margin-top: 34px;
    }

}

/* This code was written with the assistance of AI Tools */