/* =========================================================
   BANSI PICTURES — ABOUT
   DARK CINEMATIC WORLD
========================================================= */

:root {

    --about-black:
        #080808;

    --about-dark:
        #101010;

    --about-white:
        #e9e9e4;

    --about-muted:
        rgba(233,233,228,.42);

    --about-faint:
        rgba(233,233,228,.12);

    --about-yellow:
        #e5b800;

}


/* =========================================================
   GLOBAL
========================================================= */

.about-page {

    margin: 0;

    background:
        var(--about-black);

    color:
        var(--about-white);

    overflow-x: hidden;

    font-family:
        "Manrope",
        sans-serif;

}


.about-page a {

    color: inherit;

    text-decoration: none;

}


.about-page button {

    font-family: inherit;

}


/* =========================================================
   FILM GRAIN
========================================================= */

.about-page::before {

    content: "";

    position: fixed;

    inset: 0;

    z-index: 9990;

    pointer-events: none;

    opacity: .035;

    background-image:

        repeating-radial-gradient(
            circle at 0 0,
            transparent 0,
            rgba(255,255,255,.4) 1px,
            transparent 2px
        );

    background-size:
        5px 5px;

    mix-blend-mode:
        screen;

}


/* =========================================================
   LOADER
========================================================= */

.about-loader {

    position: fixed;

    inset: 0;

    z-index: 9999;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 18px;

    background:
        var(--about-black);

    pointer-events: none;

}


.about-loader-number {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 70px;

    line-height: 1;

    color:
        var(--about-yellow);

}


.about-loader-line {

    width: 140px;

    height: 1px;

    background:
        rgba(255,255,255,.4);

    transform-origin:
        left center;

}


.about-loader span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.35);

}


/* =========================================================
   HEADER
========================================================= */

.about-header {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    height: 90px;

    padding:
        0 42px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    z-index: 500;

}


.about-logo {

    display: flex;

    align-items: center;

    gap: 12px;

}


.about-logo-mark {

    width: 28px;

    height: 28px;

    display: flex;

    align-items: center;

    justify-content: center;

    border:
        1px solid rgba(255,255,255,.5);

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 14px;

}


.about-logo > span:last-child {

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .15em;

}


.about-header-right {

    display: flex;

    align-items: center;

    gap: 30px;

}


.about-counter {

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.3);

}


.about-menu-button {

    width: 38px;

    height: 38px;

    border:
        1px solid rgba(255,255,255,.35);

    background:
        transparent;

    display: flex;

    align-items: center;

    justify-content: center;

    flex-direction: column;

    gap: 5px;

    cursor: pointer;

}


.about-menu-button span {

    width: 13px;

    height: 1px;

    background:
        #fff;

}


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

.about-hero {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    display: flex;

    align-items: center;

    justify-content: center;

    background:

        radial-gradient(
            circle at 50% 48%,
            rgba(255,255,255,.045),
            transparent 27%
        ),

        var(--about-black);

}


/* =========================================================
   PERFORATION
========================================================= */

.about-film-perforation {

    position: absolute;

    top: 0;

    bottom: 0;

    left: 22px;

    width: 14px;

    display: flex;

    flex-direction: column;

    justify-content: space-around;

    opacity: .25;

}


.about-film-perforation span {

    width: 8px;

    height: 16px;

    border:
        1px solid rgba(255,255,255,.3);

}


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

.about-hero-meta {

    position: absolute;

    top: 130px;

    left: 42px;

    right: 42px;

    display: flex;

    justify-content: space-between;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.25);

}


.about-hero-meta span:first-child {

    color:
        var(--about-yellow);

}


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

.about-hero-title {

    position: relative;

    z-index: 5;

    width: 80vw;

}


.about-hero-title span {

    display: block;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            100px,
            17vw,
            290px
        );

    line-height: .7;

    letter-spacing:
        -.1em;

    font-weight: 300;

    text-align: center;

}


.about-hero-title span:nth-child(2) {

    margin-left:
        13vw;

}


.about-hero-title .about-outline {

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.5);

    margin-left:
        23vw;

}


/* =========================================================
   VIEWFINDER
========================================================= */

.about-viewfinder {

    position: absolute;

    inset:
        18vh 13vw;

    pointer-events: none;

}


/* corners */

.vf-corner {

    position: absolute;

    width: 40px;

    height: 40px;

}


.vf-top-left {

    top: 0;

    left: 0;

    border-top:
        1px solid rgba(255,255,255,.25);

    border-left:
        1px solid rgba(255,255,255,.25);

}


.vf-top-right {

    top: 0;

    right: 0;

    border-top:
        1px solid rgba(255,255,255,.25);

    border-right:
        1px solid rgba(255,255,255,.25);

}


.vf-bottom-left {

    bottom: 0;

    left: 0;

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

    border-left:
        1px solid rgba(255,255,255,.25);

}


.vf-bottom-right {

    bottom: 0;

    right: 0;

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

    border-right:
        1px solid rgba(255,255,255,.25);

}


/* crosshair */

.vf-crosshair {

    position: absolute;

    top: 50%;

    left: 50%;

    width: 55px;

    height: 55px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid rgba(255,255,255,.12);

}


.vf-crosshair::before,
.vf-crosshair::after {

    content: "";

    position: absolute;

    background:
        rgba(255,255,255,.2);

}


.vf-crosshair::before {

    width: 1px;

    height: 75px;

    left: 50%;

    top: -10px;

}


.vf-crosshair::after {

    width: 75px;

    height: 1px;

    left: -10px;

    top: 50%;

}


/* data */

.vf-data {

    position: absolute;

    top: 20px;

    right: 20px;

    display: flex;

    gap: 18px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.3);

}


.vf-data span:first-child {

    color:
        #d44;

}


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

.about-hero-bottom {

    position: absolute;

    left: 9vw;

    right: 9vw;

    bottom: 75px;

    display: flex;

    justify-content: space-between;

    align-items: flex-end;

}


.about-hero-statement {

    display: flex;

    gap: 14px;

    align-items: flex-start;

}


.about-hero-statement > span {

    width: 32px;

    height: 1px;

    margin-top: 7px;

    background:
        var(--about-yellow);

}


.about-hero-statement p {

    width: 270px;

    margin: 0;

    font-size: 10px;

    line-height: 1.7;

    color:
        rgba(255,255,255,.35);

}


.about-hero-statement strong {

    color:
        rgba(255,255,255,.75);

    font-weight: 400;

}


.about-hero-scroll {

    display: flex;

    align-items: center;

    gap: 15px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.25);

}


.about-hero-scroll span:last-child {

    width: 50px;

    height: 1px;

    background:
        rgba(255,255,255,.2);

}


/* =========================================================
   BELIEF
========================================================= */

.about-belief {

    position: relative;

    min-height: 100vh;

    overflow: hidden;

    padding:
        150px 9vw;

    display: flex;

    align-items: center;

    background:
        #101010;

    border-top:
        1px solid rgba(255,255,255,.08);

}


.about-belief-index {

    position: absolute;

    top: 45px;

    left: 9vw;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        var(--about-yellow);

}


.about-belief-copy {

    position: relative;

    z-index: 5;

    width: 55%;

}


.about-small-label {

    display: block;

    margin-bottom: 30px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.3);

}


.about-belief-copy h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            60px,
            7vw,
            115px
        );

    line-height: .82;

    letter-spacing:
        -.075em;

    font-weight: 300;

}


.about-belief-copy h2 span {

    color:
        transparent;

    -webkit-text-stroke:
        1px rgba(255,255,255,.35);

}


.about-belief-copy h2 em {

    color:
        var(--about-yellow);

    font-style: normal;

}


.about-belief-copy p {

    max-width: 390px;

    margin-top: 55px;

    font-size: 11px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.4);

}


/* =========================================================
   ORBIT
========================================================= */

.about-orbit {

    position: absolute;

    right: 7vw;

    top: 50%;

    width: 430px;

    height: 430px;

    transform:
        translateY(-50%);

}


.orbit-ring {

    position: absolute;

    left: 50%;

    top: 50%;

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

    border-radius: 50%;

    transform:
        translate(-50%, -50%);

}


.orbit-ring-one {

    width: 430px;

    height: 430px;

}


.orbit-ring-two {

    width: 290px;

    height: 290px;

}


.orbit-ring-three {

    width: 150px;

    height: 150px;

    border-color:
        rgba(229,184,0,.35);

}


.orbit-core {

    position: absolute;

    left: 50%;

    top: 50%;

    width: 75px;

    height: 75px;

    transform:
        translate(-50%, -50%);

    border:
        1px solid var(--about-yellow);

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

}


.orbit-core span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    letter-spacing: .1em;

    color:
        var(--about-yellow);

}


/* =========================================================
   BELIEF BOTTOM
========================================================= */

.about-belief-bottom {

    position: absolute;

    left: 9vw;

    right: 9vw;

    bottom: 35px;

    display: flex;

    justify-content: space-between;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.2);

}


/* =========================================================
   PEOPLE
========================================================= */

.about-people {

    position: relative;

    min-height: 120vh;

    padding:
        140px 9vw;

    overflow: hidden;

    background:
        var(--about-black);

    border-top:
        1px solid rgba(255,255,255,.08);

}


.about-people-heading {

    position: relative;

    z-index: 5;

}


.about-people-heading > span {

    display: block;

    margin-bottom: 25px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .2em;

    color:
        var(--about-yellow);

}


.about-people-heading h2 {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            90px,
            12vw,
            190px
        );

    line-height: .72;

    letter-spacing:
        -.09em;

    font-weight: 300;

}


.about-people-intro {

    position: absolute;

    top: 260px;

    right: 9vw;

    width: 260px;

}


.about-people-intro p {

    margin: 0;

    font-size: 10px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.4);

}


/* =========================================================
   PEOPLE IMAGE
========================================================= */

.about-people-image {

    position: relative;

    width: 68vw;

    height: 65vh;

    margin:
        130px auto 0;

    overflow: hidden;

    background:
        #171717;

}


.about-people-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(.7)
        contrast(1.1);

    transform:
        scale(1.08);

}


.about-image-grain {

    position: absolute;

    inset: 0;

    background-image:

        repeating-linear-gradient(
            0deg,
            transparent,
            transparent 3px,
            rgba(255,255,255,.08) 4px
        );

    opacity: .12;

    pointer-events: none;

}


.about-image-frame {

    position: absolute;

    inset: 20px;

    border:
        1px solid rgba(255,255,255,.18);

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    padding: 15px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.4);

}


/* =========================================================
   ROLE CARDS
========================================================= */

.about-role {

    position: absolute;

    z-index: 10;

    padding:
        12px 16px;

    border:
        1px solid rgba(255,255,255,.18);

    background:
        rgba(8,8,8,.7);

    backdrop-filter:
        blur(8px);

    display: flex;

    align-items: center;

    gap: 15px;

}


.about-role span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    color:
        var(--about-yellow);

}


.about-role strong {

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .12em;

    font-weight: 400;

}


.about-role-one {

    top: 500px;

    left: 7vw;

}


.about-role-two {

    top: 650px;

    right: 7vw;

}


.about-role-three {

    top: 820px;

    left: 14vw;

}


.about-role-four {

    top: 950px;

    right: 15vw;

}


/* =========================================================
   METHOD
========================================================= */

.about-method {

    position: relative;

    min-height: 100vh;

    padding:
        140px 9vw;

    background:
        #101010;

    border-top:
        1px solid rgba(255,255,255,.08);

    overflow: hidden;

}


.about-method-header {

    display: flex;

    justify-content: space-between;

}


.about-method-header span,
.about-method-header p {

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.3);

}


.about-method-header span {

    color:
        var(--about-yellow);

}


.about-method-title {

    margin-top: 110px;

    display: flex;

    flex-direction: column;

    gap: 0;

}


.about-method-title span {

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            70px,
            11vw,
            170px
        );

    line-height: .73;

    letter-spacing:
        -.085em;

    font-weight: 300;

}


.about-method-title span:nth-child(2) {

    margin-left: 10vw;

}


.about-method-title span:nth-child(3) {

    margin-left: 20vw;

}


.about-method-title .method-yellow {

    margin-left: 30vw;

    color:
        var(--about-yellow);

}


/* =========================================================
   METHOD LINE
========================================================= */

.about-method-line {

    position: absolute;

    top: 53%;

    left: 9vw;

    right: 9vw;

    height: 1px;

    background:
        rgba(255,255,255,.12);

}


.about-method-line span {

    position: absolute;

    top: -4px;

    width: 9px;

    height: 9px;

    border:
        1px solid var(--about-yellow);

    border-radius: 50%;

}


.about-method-line span:nth-child(1) {

    left: 0;

}


.about-method-line span:nth-child(2) {

    left: 33%;

}


.about-method-line span:nth-child(3) {

    left: 66%;

}


.about-method-line span:nth-child(4) {

    right: 0;

}


/* =========================================================
   METHOD DESCRIPTION
========================================================= */

.about-method-description {

    position: absolute;

    left: 9vw;

    bottom: 120px;

}


.about-method-description p {

    width: 310px;

    margin: 0;

    font-size: 10px;

    line-height: 1.8;

    color:
        rgba(255,255,255,.38);

}


/* =========================================================
   METHOD MARKERS
========================================================= */

.about-method-markers {

    position: absolute;

    left: 9vw;

    right: 9vw;

    bottom: 45px;

    display: flex;

    justify-content: space-between;

}


.about-method-markers div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}


.about-method-markers span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    color:
        var(--about-yellow);

}


.about-method-markers strong {

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .12em;

    font-weight: 400;

    color:
        rgba(255,255,255,.4);

}


/* =========================================================
   FOUNDER
========================================================= */

.about-founder {

    position: relative;

    min-height: 110vh;

    background:
        var(--about-black);

    overflow: hidden;

    border-top:
        1px solid rgba(255,255,255,.08);

}


.about-founder-label {

    position: absolute;

    top: 50px;

    left: 9vw;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        var(--about-yellow);

}


.about-founder-image {

    position: absolute;

    top: 12vh;

    left: 9vw;

    width: 48vw;

    height: 72vh;

    overflow: hidden;

}


.about-founder-image img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    filter:
        grayscale(1)
        contrast(1.1);

}


.about-founder-image-overlay {

    position: absolute;

    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(0,0,0,.2),
            transparent 70%
        );

}


.about-founder-copy {

    position: absolute;

    right: 8vw;

    top: 25vh;

    width: 35vw;

}


.about-founder-copy > span {

    display: block;

    margin-bottom: 35px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .18em;

    color:
        rgba(255,255,255,.3);

}


.about-founder-copy blockquote {

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            45px,
            5vw,
            80px
        );

    line-height: .85;

    letter-spacing:
        -.065em;

    font-weight: 300;

}


.about-founder-copy blockquote em {

    color:
        var(--about-yellow);

    font-style: normal;

}


.about-founder-signature {

    margin-top: 60px;

    display: flex;

    flex-direction: column;

    gap: 7px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .14em;

    color:
        rgba(255,255,255,.25);

}


.about-founder-signature span:first-child {

    color:
        rgba(255,255,255,.65);

}


.about-founder-film-mark {

    position: absolute;

    right: 40px;

    bottom: 40px;

    display: flex;

    gap: 20px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 6px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.2);

}


/* =========================================================
   ENDING
========================================================= */

.about-ending {

    position: relative;

    min-height: 90vh;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        #080808;

    border-top:
        1px solid rgba(255,255,255,.08);

    overflow: hidden;

}


.about-ending-noise {

    position: absolute;

    inset: 0;

    background-image:

        repeating-linear-gradient(
            90deg,
            transparent 0,
            transparent 80px,
            rgba(255,255,255,.025) 81px
        );

}


.about-ending-small {

    position: relative;

    z-index: 2;

    margin-bottom: 30px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .2em;

    color:
        rgba(255,255,255,.25);

}


.about-ending h2 {

    position: relative;

    z-index: 2;

    margin: 0;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            70px,
            11vw,
            170px
        );

    line-height: .75;

    letter-spacing:
        -.09em;

    font-weight: 300;

}


.about-ending h2 em {

    color:
        var(--about-yellow);

    font-style: normal;

}


.about-ending-bottom {

    position: absolute;

    left: 9vw;

    right: 9vw;

    bottom: 40px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}


.about-ending-bottom > span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .15em;

    color:
        rgba(255,255,255,.2);

}


.about-ending-button {

    padding:
        14px 18px;

    border:
        1px solid rgba(255,255,255,.3);

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    letter-spacing: .15em;

}


.about-ending-button span {

    margin-left: 20px;

    color:
        var(--about-yellow);

}


/* =========================================================
   MENU
========================================================= */

.about-menu-overlay {

    position: fixed;

    inset: 0;

    z-index: 10000;

    padding:
        120px 9vw;

    background:
        #101010;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

}

.about-menu-overlay nav {

    display: flex;

    flex-direction: column;

    gap: 10px;

}


.about-menu-overlay nav a {

    display: flex;

    align-items: baseline;

    gap: 25px;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size:
        clamp(
            50px,
            7vw,
            100px
        );

    line-height: .9;

    letter-spacing:
        -.06em;

    font-weight: 300;

}


.about-menu-overlay nav a span {

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    color:
        var(--about-yellow);

}


.about-menu-close {

    position: absolute;

    top: 30px;

    right: 42px;

    border: 0;

    background: transparent;

    color: #fff;

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    letter-spacing: .15em;

    cursor: pointer;

}


.about-menu-contact {

    position: absolute;

    left: 9vw;

    bottom: 55px;

}


.about-menu-contact span {

    display: block;

    margin-bottom: 10px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 7px;

    color:
        rgba(255,255,255,.25);

}


.about-menu-contact strong {

    display: block;

    font-family:
        "Space Grotesk",
        sans-serif;

    font-size: 40px;

    line-height: .9;

    font-weight: 300;

}


.about-menu-contact a {

    display: inline-block;

    margin-top: 20px;

    font-family:
        "DM Mono",
        monospace;

    font-size: 8px;

    color:
        var(--about-yellow);

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 767px) {

    .about-header {

        height: 75px;

        padding:
            0 20px;

    }


    .about-counter {

        display: none;

    }


    .about-hero {

        min-height: 700px;

    }


    .about-hero-meta {

        top: 100px;

        left: 20px;

        right: 20px;

    }


    .about-hero-title {

        width: 95vw;

    }


    .about-hero-title span {

        font-size:
            28vw;

    }


    .about-hero-title span:nth-child(2) {

        margin-left:
            8vw;

    }


    .about-hero-title .about-outline {

        margin-left:
            14vw;

    }


    .about-viewfinder {

        inset:
            20vh 20px;

    }


    .about-hero-bottom {

        left: 20px;

        right: 20px;

        bottom: 50px;

    }


    .about-hero-scroll span:first-child {

        display: none;

    }


    .about-belief {

        min-height:
            100vh;

        padding:
            110px 20px;

        display: block;

    }


    .about-belief-copy {

        width: 100%;

    }


    .about-belief-copy h2 {

        font-size:
            15vw;

    }


    .about-belief-copy p {

        margin-top: 35px;

    }


    .about-orbit {

        position: relative;

        right: auto;

        top: auto;

        width: 280px;

        height: 280px;

        margin:
            80px auto 0;

        transform: none;

    }


    .orbit-ring-one {

        width: 280px;

        height: 280px;

    }


    .orbit-ring-two {

        width: 190px;

        height: 190px;

    }


    .orbit-ring-three {

        width: 100px;

        height: 100px;

    }


    .about-people {

        min-height:
            1100px;

        padding:
            100px 20px;

    }


    .about-people-heading h2 {

        font-size:
            22vw;

    }


    .about-people-intro {

        position: relative;

        top: auto;

        right: auto;

        width: 100%;

        margin-top: 40px;

    }


    .about-people-image {

        width: 100%;

        height: 55vh;

        margin-top: 70px;

    }


    .about-role-one {

        top: 480px;

        left: 10px;

    }


    .about-role-two {

        top: 590px;

        right: 10px;

    }


    .about-role-three {

        top: 720px;

        left: 20px;

    }


    .about-role-four {

        top: 850px;

        right: 20px;

    }


    .about-method {

        min-height:
            950px;

        padding:
            100px 20px;

    }


    .about-method-title {

        margin-top: 80px;

    }


    .about-method-title span {

        font-size:
            18vw;

    }


    .about-method-title span:nth-child(2) {

        margin-left:
            5vw;

    }


    .about-method-title span:nth-child(3) {

        margin-left:
            10vw;

    }


    .about-method-title .method-yellow {

        margin-left:
            15vw;

    }


    .about-method-line {

        top: 48%;

        left: 20px;

        right: 20px;

    }


    .about-method-description {

        left: 20px;

        bottom: 120px;

    }


    .about-method-markers {

        left: 20px;

        right: 20px;

        bottom: 40px;

    }


    .about-method-markers div {

        gap: 4px;

    }


    .about-method-markers strong {

        font-size: 6px;

    }


    .about-founder {

        min-height:
            1000px;

    }


    .about-founder-image {

        position: relative;

        top: auto;

        left: auto;

        width:
            calc(100% - 40px);

        height: 50vh;

        margin:
            100px 20px 0;

    }


    .about-founder-copy {

        position: relative;

        right: auto;

        top: auto;

        width: auto;

        margin:
            50px 20px;

    }


    .about-founder-copy blockquote {

        font-size:
            14vw;

    }


    .about-founder-film-mark {

        right: 20px;

        bottom: 20px;

    }


    .about-ending {

        min-height:
            75vh;

    }


    .about-ending h2 {

        font-size:
            19vw;

    }


    .about-ending-bottom {

        left: 20px;

        right: 20px;

        bottom: 25px;

    }


    .about-ending-bottom > span {

        display: none;

    }


    .about-menu-overlay {

        padding:
            100px 25px;

    }


    .about-menu-overlay nav a {

        font-size:
            48px;

    }


    .about-menu-contact {

        left: 25px;

        bottom: 30px;

    }


    .about-menu-contact strong {

        font-size:
            30px;

    }

}