/* HUMANBOTS ABOUT PAGE STYLES (loads after global.css) */

/* =========================================================
   ABOUT: HERO, INTRO, SYSTEM, ORIGIN STORY
=========================================================*/
/* =========================================================
   HUMANBOTS - ABOUT PAGE
   HERO + INTRO + SCROLL STORY
========================================================= */

.hb-about,
.hb-about *{
    box-sizing:border-box;
}

.hb-about{
    --orange:#ff4d16;
    --black:#000;
    --card:#080808;
    --white:#f3f3f3;
    --muted:#7b7b7b;
    --gray:#626262;
    --line:rgba(255,255,255,.11);

    width:100%;
    background:#000;
    color:#fff;

    font-family:var(--font-body);

    /* clip (not hidden) so the sticky columns still stick */
    overflow:clip;
}

.hb-about-container{
    width:100%;
    /* same content width as the rest of the site (svc-container: 1180px) */
    max-width:1228px;

    margin:0 auto;

    padding-left:24px;
    padding-right:24px;
}


/* =========================================================
   HERO - KEPT LARGE
========================================================= */

.hb-about-hero{
    position:relative;

    min-height:92vh;

    display:flex;
    align-items:flex-end;

    padding:170px 0 85px;

    overflow:hidden;
}

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

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.025) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.025) 1px,
            transparent 1px
        );

    background-size:90px 90px;

    mask-image:
        linear-gradient(
            to bottom,
            rgba(0,0,0,.85),
            transparent 90%
        );

    pointer-events:none;
}

.hb-about-hero::after{
    content:"";

    position:absolute;

    width:700px;
    height:700px;

    right:-260px;
    top:-250px;

    border-radius:50%;

    background:rgba(255,77,22,.08);

    filter:blur(120px);

    pointer-events:none;
}

.hb-about-hero-inner{
    position:relative;
    z-index:2;
}

.hb-about-eyebrow{
    margin-bottom:24px;

    color:var(--orange);

    font-size:11px;
    font-weight:700;

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

.hb-about-heading{
    max-width:1300px;

    margin:0;

    color:#f3f3f3;

    font-size:clamp(54px,6vw,96px);
    line-height:.96;

    letter-spacing:-5px;
    font-weight:600;
}

.hb-about-heading span{
    display:block;
    color:#626262;
}

.hb-about-hero-bottom{
    margin-top:55px;

    display:grid;
    grid-template-columns:1.15fr .85fr;

    gap:80px;

    align-items:end;
}

.hb-about-hero-copy{
    max-width:720px;

    margin:0;

    color:#858585;

    font-size:18px;
    line-height:1.65;
}

.hb-about-hero-copy strong{
    color:#dcdcdc;
    font-weight:500;
}

.hb-about-actions{
    display:flex;
    justify-content:flex-end;
    align-items:center;

    gap:12px;
}

.hb-about-btn{
    min-height:54px;

    padding:0 24px;

    border-radius:999px;

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

    gap:10px;

    text-decoration:none;

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

    transition:
        transform .3s ease,
        background .3s ease,
        border-color .3s ease;
}

.hb-about-btn.primary{
    background:var(--orange);
    color:#fff;
}

.hb-about-btn.secondary{
    color:#aaa;

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

    background:#080808;
}

.hb-about-btn:hover{
    transform:translateY(-3px);
}

.hb-about-btn.primary{
    box-shadow:0 14px 40px rgba(255,77,22,.16);
}

.hb-about-btn.primary:hover{
    box-shadow:0 20px 52px rgba(255,77,22,.24);
}

.hb-about-heading,
.hb-about-hero-copy,
.hb-about-capabilities{
    will-change:transform;
}


/* =========================================================
   CAPABILITY BAR
========================================================= */

.hb-about-capabilities{
    margin-top:70px;

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

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.hb-about-capability{
    min-height:100px;

    padding:24px;

    border-right:1px solid var(--line);

    display:flex;
    align-items:center;

    gap:15px;
}

.hb-about-capability:last-child{
    border-right:0;
}

.hb-about-capability strong{
    color:#f0f0f0;

    font-size:12px;
    font-weight:600;

    letter-spacing:1px;
}

.hb-about-capability span{
    color:#666;

    font-size:11px;
    line-height:1.5;
}

.hb-cap-number{
    color:var(--orange) !important;
    font-size:10px !important;
}


/* =========================================================
   INTRO
========================================================= */

.hb-about-intro{
    padding:120px 0;
}

.hb-about-intro-top{
    display:grid;
    grid-template-columns:.8fr 1.2fr;

    gap:100px;

    align-items:start;

    margin-bottom:90px;
}

.hb-about-intro-left{
    position:sticky;
    top:140px;
}


/* SUBHEADING MADE SMALLER */

.hb-about-intro-title{
    max-width:520px;

    margin:0;

    color:#f3f3f3;

    font-size:clamp(34px,3vw,50px);
    line-height:1.04;

    letter-spacing:-2.2px;
    font-weight:600;
}

.hb-about-intro-title span{
    color:#646464;
}

.hb-about-story{
    max-width:780px;
}

.hb-about-story-lead{
    margin:0 0 35px;

    color:#e7e7e7;

    font-size:clamp(21px,1.7vw,29px);
    line-height:1.42;

    letter-spacing:-.8px;

    font-weight:400;
}

.hb-about-story-lead strong{
    color:var(--orange);
    font-weight:500;
}

.hb-about-story-copy{
    display:grid;
    gap:20px;
}

.hb-about-story-copy p{
    margin:0;

    color:#7f7f7f;

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

.hb-about-story-copy strong{
    color:#d7d7d7;
    font-weight:500;
}


/* =========================================================
   BUILD / GROW / AUTOMATE / SCALE
========================================================= */

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

    border:1px solid var(--line);
    border-radius:28px;

    overflow:hidden;

    background:#050505;
}

.hb-about-system-card{
    position:relative;

    min-height:290px;

    padding:30px;

    border-right:1px solid var(--line);

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255,77,22,.035),
            transparent 32%
        );
}

.hb-about-system-card:last-child{
    border-right:0;
}

.hb-about-system-card{
    transition:
        background .45s ease,
        transform .45s cubic-bezier(.16,1,.3,1);
}

.hb-about-system-card:hover{
    background:
        radial-gradient(
            circle at 78% 15%,
            rgba(255,77,22,.085),
            transparent 38%
        ),
        #070707;
    transform:translateY(-5px);
}

.hb-about-system-card:hover .hb-about-system-icon{
    transform:translateY(-3px) scale(1.04);
    border-color:rgba(255,77,22,.42);
}

.hb-about-system-icon{
    transition:
        transform .4s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        background .35s ease;
}

.hb-about-system-no{
    color:var(--orange);

    font-size:10px;
    font-weight:700;

    margin-bottom:50px;
}

.hb-about-system-icon{
    width:50px;
    height:50px;

    margin-bottom:22px;

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

    border-radius:14px;

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

    background:rgba(255,77,22,.055);

    color:var(--orange);
}

.hb-about-system-icon svg{
    width:23px;
    height:23px;

    fill:none;
    stroke:currentColor;
    stroke-width:1.7;
    stroke-linecap:round;
    stroke-linejoin:round;
}


/* smaller system headings */

.hb-about-system-card h3{
    margin:0 0 12px;

    color:#f0f0f0;

    font-size:23px;
    line-height:1;

    letter-spacing:-.8px;
    font-weight:500;
}

.hb-about-system-card p{
    margin:0;

    color:#737373;

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


/* =========================================================
   STORY SECTION
========================================================= */

.hb-origin{
    position:relative;

    padding:130px 0 140px;

    background:#000;
}


/* header */

.hb-origin-header{
    max-width:900px;
    margin-bottom:85px;
}

.hb-origin-title{
    margin:0;

    color:#f3f3f3;

    font-size:clamp(36px,3.3vw,54px);
    line-height:1.03;

    letter-spacing:-2.5px;

    font-weight:600;
}

.hb-origin-title span{
    color:#636363;
}

.hb-origin-sub{
    max-width:650px;

    margin:22px 0 0;

    color:#777;

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


/* =========================================================
   SCROLL STORY LAYOUT
========================================================= */

.hb-origin-grid{
    display:grid;
    grid-template-columns:.65fr 1.35fr;

    gap:90px;

    align-items:start;
}


/* sticky left */

.hb-origin-left{
    position:sticky;
    top:150px;
    padding:28px 0 34px;
}

.hb-origin-left::before{
    content:"";
    position:absolute;
    width:360px;
    height:360px;
    left:-160px;
    top:-100px;
    border-radius:50%;
    background:rgba(255,77,22,.055);
    filter:blur(110px);
    pointer-events:none;
}

.hb-origin-year{
    position:relative;
    color:var(--orange);

    font-size:clamp(70px,8vw,130px);
    line-height:.8;

    letter-spacing:-7px;
    font-weight:600;

    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.16,1,.3,1);

    will-change:transform,opacity;
}

.hb-origin-year.is-changing{
    opacity:.18;
    transform:translate3d(0,14px,0);
}

.hb-origin-year-label{
    margin-top:25px;

    color:#777;

    font-size:10px;
    font-weight:600;

    letter-spacing:2.3px;
    text-transform:uppercase;

    transition:
        opacity .28s ease,
        transform .38s cubic-bezier(.16,1,.3,1);
}

.hb-origin-year-label.is-changing{
    opacity:.15;
    transform:translate3d(0,8px,0);
}


/* progress */

.hb-origin-progress{
    position:relative;
    margin-top:40px;

    width:min(220px,70%);
    height:2px;

    overflow:hidden;
    border-radius:999px;

    background:rgba(255,255,255,.09);
}

.hb-origin-progress-fill{
    width:0%;
    height:100%;

    border-radius:inherit;
    background:var(--orange);

    transform-origin:left center;
    transition:width .45s cubic-bezier(.16,1,.3,1);
    box-shadow:0 0 24px rgba(255,77,22,.35);
}


/* =========================================================
   STORY CARDS
========================================================= */

.hb-origin-steps{
    position:relative;
}

.hb-origin-step{
    min-height:68vh;

    display:flex;
    align-items:center;

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

    opacity:.18;

    transform:translate3d(0,42px,0) scale(.985);

    filter:blur(1.5px);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .9s cubic-bezier(.16,1,.3,1),
        filter .65s ease;

    will-change:opacity,transform,filter;
}

.hb-origin-step:last-child{
    border-bottom:1px solid rgba(255,255,255,.10);
}

.hb-origin-step.active{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
    filter:blur(0);
}

.hb-origin-step.before{
    opacity:.10;
    transform:translate3d(0,-26px,0) scale(.99);
    filter:blur(2px);
}

.hb-origin-step.after{
    opacity:.16;
    transform:translate3d(0,34px,0) scale(.985);
    filter:blur(1.5px);
}

.hb-origin-step-inner{
    width:100%;

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

    gap:30px;

    padding:60px 0;
}

.hb-origin-number{
    color:var(--orange);

    font-size:11px;
    font-weight:700;

    padding-top:8px;
}

.hb-origin-step h3{
    max-width:800px;

    margin:0 0 22px;

    color:#f0f0f0;

    font-size:clamp(30px,2.6vw,44px);
    line-height:1.08;

    letter-spacing:-1.8px;

    font-weight:500;
}

.hb-origin-step p{
    max-width:700px;

    margin:0;

    color:#7a7a7a;

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

.hb-origin-step strong{
    color:#e5e5e5;
    font-weight:500;
}


/* little pills */

.hb-origin-tags{
    display:flex;
    flex-wrap:wrap;

    gap:8px;

    margin-top:28px;
}

.hb-origin-tag{
    padding:8px 12px;

    border-radius:999px;

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

    color:#777;

    font-size:10px;

    background:#060606;
}


/* =========================================================
   STORY END STAT
========================================================= */

.hb-origin-end{
    margin-top:100px;

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

    border:1px solid var(--line);

    border-radius:26px;

    overflow:hidden;
}

.hb-origin-stat{
    min-height:170px;

    padding:30px;

    border-right:1px solid var(--line);

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

    background:#060606;
}

.hb-origin-stat:last-child{
    border-right:0;
}

.hb-origin-stat strong{
    margin-bottom:10px;

    color:#f2f2f2;

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

    letter-spacing:-1.5px;
}

.hb-origin-stat span{
    color:#6f6f6f;

    font-size:11px;
    line-height:1.5;

    letter-spacing:.5px;
    text-transform:uppercase;
}


/* =========================================================
   FINAL STATEMENT
========================================================= */

.hb-about-statement{
    max-width:1100px;

    margin:100px auto 0;

    text-align:center;

    color:#696969;

    font-size:clamp(28px,3vw,48px);
    line-height:1.1;

    letter-spacing:-2px;

    font-weight:500;
}

.hb-about-statement strong{
    color:#f0f0f0;
    font-weight:500;
}


/* =========================================================
   GENERAL SCROLL REVEAL
========================================================= */

.hb-about-reveal{
    opacity:0;
    transform:translate3d(0,28px,0);
    transition:
        opacity .9s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);
    will-change:opacity,transform;
}

.hb-about-reveal.visible{
    opacity:1;
    transform:translate3d(0,0,0);
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1050px){

    .hb-about-hero{
        min-height:auto;
        padding:130px 0 80px;
    }

    .hb-about-hero-bottom{
        grid-template-columns:1fr;
        gap:35px;
    }

    .hb-about-actions{
        justify-content:flex-start;
    }

    .hb-about-capabilities{
        grid-template-columns:repeat(2,1fr);
    }

    .hb-about-intro-top{
        grid-template-columns:1fr;
        gap:45px;
    }

    .hb-about-intro-left{
        position:relative;
        top:auto;
    }

    .hb-about-system{
        grid-template-columns:repeat(2,1fr);
    }

    .hb-origin-grid{
        grid-template-columns:1fr;
        gap:40px;
    }

    .hb-origin-left{
        position:relative;
        top:auto;
    }

    .hb-origin-step{
        min-height:auto;
    }

}


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

@media(max-width:650px){

    .hb-about-container{
        padding-left:15px;
        padding-right:15px;
    }

    .hb-about-hero{
        padding:135px 0 60px;
    }

    .hb-about-heading{
        font-size:48px;
        line-height:.98;
        letter-spacing:-3px;
    }

    .hb-about-hero-bottom{
        margin-top:35px;
    }

    .hb-about-hero-copy{
        font-size:15px;
    }

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

    .hb-about-btn{
        width:100%;
    }

    .hb-about-capabilities{
        grid-template-columns:1fr;
        margin-top:50px;
    }

    .hb-about-capability{
        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .hb-about-intro{
        padding:80px 0;
    }

    .hb-about-intro-title{
        font-size:34px;
        letter-spacing:-1.7px;
    }

    .hb-about-story-lead{
        font-size:21px;
    }

    .hb-about-story-copy p{
        font-size:15px;
    }

    .hb-about-system{
        grid-template-columns:1fr;
        border-radius:22px;
    }

    .hb-about-system-card{
        min-height:235px;

        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .hb-origin{
        padding:90px 0;
    }

    .hb-origin-title{
        font-size:36px;
        letter-spacing:-1.8px;
    }

    .hb-origin-year{
        font-size:74px;
        letter-spacing:-4px;
    }

    .hb-origin-step-inner{
        grid-template-columns:35px 1fr;
        gap:12px;

        padding:45px 0;
    }

    .hb-origin-step h3{
        font-size:29px;
        letter-spacing:-1.3px;
    }

    .hb-origin-step p{
        font-size:14px;
    }

    .hb-origin-end{
        grid-template-columns:1fr;
    }

    .hb-origin-stat{
        min-height:130px;

        border-right:0;
        border-bottom:1px solid var(--line);
    }

    .hb-origin-stat:last-child{
        border-bottom:0;
    }

    .hb-about-statement{
        text-align:left;

        font-size:31px;
        letter-spacing:-1.5px;
    }

}

@media (prefers-reduced-motion: reduce){

    .hb-about *,
    .hb-about *::before,
    .hb-about *::after{
        scroll-behavior:auto !important;
        transition-duration:.01ms !important;
        animation-duration:.01ms !important;
        animation-iteration-count:1 !important;
    }

    .hb-origin-step,
    .hb-about-reveal{
        transform:none !important;
        filter:none !important;
    }
}


/* =========================================================
   ABOUT: MEET THE FOUNDERS (scroll scenes)
=========================================================*/
/* =========================================================
   HUMANBOTS - MEET THE FOUNDERS
   MODERN / SMOOTH EDITORIAL SCROLL
========================================================= */

.hb-team-story,
.hb-team-story *{
    box-sizing:border-box;
}

.hb-team-story{
    --orange:#ff4d16;
    --black:#000;
    --white:#f3f3f3;
    --gray:#626262;
    --muted:#777;
    --line:rgba(255,255,255,.10);

    position:relative;

    width:100%;
    height:390vh;

    background:#000;
    color:#fff;

    font-family:var(--font-body);
}


/* =========================================================
   STICKY
========================================================= */

.hb-team-sticky{
    position:sticky;
    top:0;

    width:100%;
    height:100vh;

    overflow:hidden;

    background:
        radial-gradient(
            circle at 50% 40%,
            rgba(255,77,22,.035),
            transparent 40%
        ),
        #000;
}


/* subtle grain/grid */

.hb-team-sticky::before{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            rgba(255,255,255,.014) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.014) 1px,
            transparent 1px
        );

    background-size:110px 110px;

    mask-image:
        radial-gradient(
            circle at center,
            black,
            transparent 88%
        );

    pointer-events:none;
}


/* =========================================================
   INTRO
========================================================= */

.hb-team-intro{
    position:absolute;
    inset:0;

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

    padding:60px 30px;

    text-align:center;

    opacity:1;

    transform:
        translateY(0)
        scale(1);

    transition:
        opacity .75s cubic-bezier(.16,1,.3,1),
        transform .85s cubic-bezier(.16,1,.3,1);

    pointer-events:none;
}

.hb-team-intro.hide{
    opacity:0;

    transform:
        translateY(-35px)
        scale(.97);
}

.hb-team-intro-inner{
    max-width:1100px;
}

.hb-team-eyebrow{
    margin-bottom:20px;

    color:var(--orange);

    font-size:10px;
    font-weight:700;

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

.hb-team-intro h2{
    margin:0;

    color:#f3f3f3;

    font-size:clamp(48px,5.8vw,90px);
    line-height:.96;

    letter-spacing:-4.5px;

    font-weight:500;
}

.hb-team-intro h2 span{
    color:#5e5e5e;
}

.hb-team-intro p{
    max-width:650px;

    margin:28px auto 0;

    color:#737373;

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


/* small cue */

.hb-team-intro-cue{
    margin-top:38px;

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

    gap:12px;

    color:#5d5d5d;

    font-size:9px;

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

.hb-team-intro-cue::before{
    content:"";

    width:34px;
    height:1px;

    background:var(--orange);
}


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

.hb-founder-feature{
    position:absolute;
    inset:0;

    padding:54px 38px 40px;

    display:grid;

    grid-template-columns:
        .9fr
        .78fr
        .9fr;

    grid-template-rows:1fr auto;

    gap:45px;

    align-items:center;

    opacity:0;

    pointer-events:none;

    transform:scale(.985);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1),
        transform .8s cubic-bezier(.16,1,.3,1);
}

.hb-founder-feature.active{
    opacity:1;
    transform:scale(1);
}


/* =========================================================
   BIG STATEMENT
========================================================= */

.hb-founder-statement{
    align-self:start;

    padding-top:45px;

    opacity:0;

    transform:
        translateY(50px)
        translateX(-20px);

    transition:
        opacity .75s cubic-bezier(.16,1,.3,1) .08s,
        transform .9s cubic-bezier(.16,1,.3,1) .08s;
}

.hb-founder-feature.active .hb-founder-statement{
    opacity:1;
    transform:none;
}

.hb-founder-index{
    margin-bottom:20px;

    color:var(--orange);

    font-size:10px;
    font-weight:700;

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

.hb-founder-statement h3{
    max-width:590px;

    margin:0;

    color:#f3f3f3;

    font-size:clamp(40px,4.2vw,68px);
    line-height:.97;

    letter-spacing:-3.5px;

    font-weight:500;
}

.hb-founder-statement h3 span{
    color:#5e5e5e;
}


/* Ahmad comes from opposite side */

.hb-founder-ahmad .hb-founder-statement{
    transform:
        translateY(50px)
        translateX(20px);
}

.hb-founder-ahmad.active .hb-founder-statement{
    transform:none;
}


/* =========================================================
   PORTRAIT
========================================================= */

.hb-founder-portrait{
    position:relative;

    justify-self:center;

    width:min(420px,100%);
    aspect-ratio:4/5;

    border-radius:32px;

    overflow:hidden;

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

    background:#0a0a0a;

    box-shadow:
        0 45px 120px rgba(0,0,0,.55);

    opacity:0;

    transform:
        translateY(90px)
        rotate(-5deg)
        scale(.9);

    transition:
        opacity .85s cubic-bezier(.16,1,.3,1),
        transform 1s cubic-bezier(.16,1,.3,1);

    will-change:transform;
}

.hb-founder-feature.active .hb-founder-portrait{
    opacity:1;

    transform:
        translateY(0)
        rotate(-1.5deg)
        scale(1);
}

.hb-founder-ahmad .hb-founder-portrait{
    transform:
        translateY(90px)
        rotate(5deg)
        scale(.9);
}

.hb-founder-ahmad.active .hb-founder-portrait{
    transform:
        translateY(0)
        rotate(1.5deg)
        scale(1);
}

.hb-founder-portrait img{
    width:100%;
    height:100%;

    object-fit:cover;

    display:block;

    filter:saturate(.9) contrast(1.02);

    transition:
        transform 1s cubic-bezier(.16,1,.3,1),
        filter .6s ease;
}

.hb-founder-feature.active .hb-founder-portrait img{
    transform:scale(1.025);
}

.hb-founder-portrait::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.18),
            transparent 45%
        );

    pointer-events:none;
}

.hb-founder-image-placeholder{
    position:absolute;
    inset:0;

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

    color:#505050;

    font-size:10px;
    letter-spacing:2px;

    text-transform:uppercase;
}


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

.hb-founder-text{
    align-self:end;

    padding-bottom:70px;

    opacity:0;

    transform:
        translateY(50px)
        translateX(20px);

    transition:
        opacity .75s cubic-bezier(.16,1,.3,1) .16s,
        transform .9s cubic-bezier(.16,1,.3,1) .16s;
}

.hb-founder-feature.active .hb-founder-text{
    opacity:1;
    transform:none;
}

.hb-founder-ahmad .hb-founder-text{
    transform:
        translateY(50px)
        translateX(-20px);
}

.hb-founder-ahmad.active .hb-founder-text{
    transform:none;
}

.hb-founder-role-small{
    margin-bottom:16px;

    color:var(--orange);

    font-size:10px;
    font-weight:700;

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

.hb-founder-text p{
    max-width:520px;

    margin:0;

    color:#7d7d7d;

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

.hb-founder-text p strong{
    color:#e5e5e5;
    font-weight:500;
}


/* =========================================================
   NAME + SIGNATURE
========================================================= */

.hb-founder-bottom{
    grid-column:1 / 4;

    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:30px;

    padding-top:20px;

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

    opacity:0;

    transform:translateY(25px);

    transition:
        opacity .7s cubic-bezier(.16,1,.3,1) .22s,
        transform .8s cubic-bezier(.16,1,.3,1) .22s;
}

.hb-founder-feature.active .hb-founder-bottom{
    opacity:1;
    transform:none;
}

.hb-founder-bottom-name{
    color:#efefef;

    font-size:17px;
    line-height:1.45;

    font-weight:500;
}

.hb-founder-bottom-name span{
    display:block;

    color:#666;

    font-size:11px;
    font-weight:400;

    margin-top:4px;
}

.hb-founder-signature{
    display:flex;
    align-items:center;

    gap:16px;
}

.hb-founder-signature-text{
    color:#e5e5e5;

    font-family:
        "Brush Script MT",
        "Segoe Script",
        cursive;

    font-size:32px;

    transform:rotate(-4deg);
}

.hb-founder-signature-line{
    width:70px;
    height:1px;

    background:
        linear-gradient(
            90deg,
            var(--orange),
            transparent
        );
}


/* =========================================================
   LAYOUT
========================================================= */

.hb-founder-sayaid .hb-founder-statement{
    grid-column:1;
    grid-row:1;
}

.hb-founder-sayaid .hb-founder-portrait{
    grid-column:2;
    grid-row:1;
}

.hb-founder-sayaid .hb-founder-text{
    grid-column:3;
    grid-row:1;
}


.hb-founder-ahmad .hb-founder-text{
    grid-column:1;
    grid-row:1;
}

.hb-founder-ahmad .hb-founder-portrait{
    grid-column:2;
    grid-row:1;
}

.hb-founder-ahmad .hb-founder-statement{
    grid-column:3;
    grid-row:1;

    text-align:right;
}


/* =========================================================
   TOGETHER
========================================================= */

.hb-founders-together{
    position:absolute;
    inset:0;

    padding:52px 38px 38px;

    opacity:0;

    transform:
        translateY(50px)
        scale(.985);

    pointer-events:none;

    transition:
        opacity .85s cubic-bezier(.16,1,.3,1),
        transform .95s cubic-bezier(.16,1,.3,1);
}

.hb-founders-together.active{
    opacity:1;

    transform:
        translateY(0)
        scale(1);

    pointer-events:auto;
}

.hb-founders-together-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;

    gap:40px;

    margin-bottom:30px;
}

.hb-founders-together-head h3{
    max-width:800px;

    margin:0;

    color:#f1f1f1;

    font-size:clamp(36px,3.4vw,54px);
    line-height:1;

    letter-spacing:-2.5px;

    font-weight:500;
}

.hb-founders-together-head h3 span{
    color:#5f5f5f;
}

.hb-founders-together-copy{
    max-width:410px;

    color:#6f6f6f;

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


/* =========================================================
   FINAL GRID
========================================================= */

.hb-founder-final-grid{
    display:grid;
    grid-template-columns:repeat(2,1fr);

    gap:14px;

    height:calc(100% - 105px);
}

.hb-founder-final-card{
    position:relative;

    min-height:500px;

    border-radius:28px;

    overflow:hidden;

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

    background:#080808;

    transition:
        transform .5s cubic-bezier(.16,1,.3,1),
        border-color .35s ease,
        box-shadow .5s ease;
}

.hb-founder-final-card:hover{
    transform:translateY(-7px);

    border-color:rgba(255,77,22,.28);

    box-shadow:
        0 35px 90px rgba(0,0,0,.42);
}

.hb-founder-final-image{
    position:absolute;
    inset:0;
}

.hb-founder-final-image img{
    width:100%;
    height:100%;

    object-fit:cover;

    transition:
        transform .8s cubic-bezier(.16,1,.3,1);
}

.hb-founder-final-card:hover img{
    transform:scale(1.035);
}

.hb-founder-final-image::after{
    content:"";

    position:absolute;
    inset:0;

    background:
        linear-gradient(
            to top,
            rgba(0,0,0,.96) 0%,
            rgba(0,0,0,.70) 30%,
            rgba(0,0,0,.08) 72%
        );
}


/* =========================================================
   FINAL CONTENT
========================================================= */

.hb-founder-final-content{
    position:absolute;

    z-index:4;

    left:28px;
    right:28px;
    bottom:26px;
}

.hb-founder-final-no{
    margin-bottom:11px;

    color:var(--orange);

    font-size:9px;
    font-weight:700;
}

.hb-founder-final-name{
    margin:0 0 7px;

    color:#f2f2f2;

    font-size:28px;
    line-height:1;

    letter-spacing:-1.2px;

    font-weight:500;
}

.hb-founder-final-role{
    margin-bottom:18px;

    color:#777;

    font-size:11px;
}

.hb-founder-final-meta{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;

    gap:25px;

    padding-top:16px;

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

.hb-founder-final-contact{
    display:flex;
    flex-direction:column;

    gap:5px;
}

.hb-founder-final-contact a{
    color:#777;

    text-decoration:none;

    font-size:10px;

    transition:color .25s ease;
}

.hb-founder-final-contact a:hover{
    color:#fff;
}

.hb-founder-final-socials{
    display:flex;

    gap:7px;
}

.hb-founder-final-social{
    width:35px;
    height:35px;

    border-radius:50%;

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

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

    color:#757575;

    text-decoration:none;

    transition:
        color .25s ease,
        background .25s ease,
        border-color .25s ease,
        transform .25s ease;
}

.hb-founder-final-social:hover{
    color:#fff;

    background:rgba(255,77,22,.07);

    border-color:rgba(255,77,22,.32);

    transform:translateY(-2px);
}

.hb-founder-final-social svg{
    width:14px;
    height:14px;

    fill:none;
    stroke:currentColor;

    stroke-width:1.8;
}


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

@media(max-width:900px){

    .hb-team-story{
        height:420vh;
    }

    .hb-founder-feature{
        grid-template-columns:.8fr .9fr .8fr;

        gap:28px;
    }

    .hb-founder-statement h3{
        font-size:44px;
    }

}


@media(max-width:700px){

    .hb-team-story{
        height:470vh;
    }

    .hb-team-intro{
        padding:35px 18px;
    }

    .hb-team-intro h2{
        font-size:44px;
        letter-spacing:-2.6px;
    }

    .hb-founder-feature{
        padding:28px 15px 20px;

        grid-template-columns:1fr;

        grid-template-rows:
            auto
            290px
            auto
            auto;

        gap:15px;

        align-content:center;
    }


    .hb-founder-sayaid .hb-founder-statement,
    .hb-founder-ahmad .hb-founder-statement{
        grid-column:1;
        grid-row:1;

        text-align:left;
    }


    .hb-founder-sayaid .hb-founder-portrait,
    .hb-founder-ahmad .hb-founder-portrait{
        grid-column:1;
        grid-row:2;

        width:200px;

        justify-self:center;
    }


    .hb-founder-sayaid .hb-founder-text,
    .hb-founder-ahmad .hb-founder-text{
        grid-column:1;
        grid-row:3;

        padding:0;

        text-align:left;
    }


    .hb-founder-bottom{
        grid-column:1;
        grid-row:4;

        padding-top:12px;
    }


    .hb-founder-statement{
        padding:0;
    }

    .hb-founder-statement h3{
        font-size:31px;
        letter-spacing:-1.6px;
    }

    .hb-founder-text p{
        font-size:12px;
    }

    .hb-founder-signature-text{
        font-size:24px;
    }


    /* together */

    .hb-founders-together{
        padding:28px 15px 20px;
    }

    .hb-founders-together-head{
        display:block;

        margin-bottom:18px;
    }

    .hb-founders-together-head h3{
        font-size:32px;
        letter-spacing:-1.6px;
    }

    .hb-founders-together-copy{
        margin-top:10px;
    }

    .hb-founder-final-grid{
        height:calc(100% - 95px);

        gap:7px;
    }

    .hb-founder-final-card{
        min-height:420px;

        border-radius:18px;
    }

    .hb-founder-final-content{
        left:14px;
        right:14px;
        bottom:14px;
    }

    .hb-founder-final-name{
        font-size:18px;
    }

    .hb-founder-final-role{
        font-size:8px;
    }

    .hb-founder-final-meta{
        display:block;
    }

    .hb-founder-final-contact a{
        font-size:7px;
    }

    .hb-founder-final-socials{
        margin-top:9px;
    }

    .hb-founder-final-social{
        width:28px;
        height:28px;
    }

}


/* =========================================================
   SMOOTH SCROLL / TRANSITION OVERRIDES
========================================================= */

.hb-team-sticky{
    transform:translateZ(0);
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
}

.hb-team-intro,
.hb-founder-feature,
.hb-founders-together{
    transition:none !important;
    will-change:opacity,transform;
    backface-visibility:hidden;
    -webkit-backface-visibility:hidden;
    transform-style:preserve-3d;
}

.hb-founder-statement,
.hb-founder-portrait,
.hb-founder-text,
.hb-founder-bottom{
    transition-duration:.95s !important;
    transition-timing-function:cubic-bezier(.16,1,.3,1) !important;
}

.hb-founder-portrait img{
    transition-duration:1.15s !important;
}

@media (prefers-reduced-motion: reduce){
    .hb-team-intro,
    .hb-founder-feature,
    .hb-founders-together,
    .hb-founder-statement,
    .hb-founder-portrait,
    .hb-founder-text,
    .hb-founder-bottom,
    .hb-founder-portrait img{
        transition:none !important;
    }
}

/* =========================================================
   FOUNDERS: offsets for the fixed header and floating nav
========================================================= */
.hb-team-intro,
.hb-founder-feature,
.hb-founders-together{
    top:110px;
}
.hb-founder-feature{
    padding-bottom:96px;
}
.hb-founder-portrait{
    width:min(420px,100%,calc((100vh - 380px) * .8));
    width:min(420px,100%,calc((100svh - 380px) * .8));
}
.hb-founders-together{
    display:flex;
    flex-direction:column;
    padding-bottom:100px;
}
.hb-founder-final-grid{
    flex:1;
    min-height:0;
    height:auto;
}
.hb-founder-final-card{
    min-height:0;
}
@media(max-width:980px){
    .hb-team-intro,
    .hb-founder-feature,
    .hb-founders-together{
        top:96px;
    }
}
@media(max-width:700px){
    .hb-founder-feature{
        padding-bottom:90px;
        grid-template-rows:auto 220px auto auto;
    }
    .hb-founder-sayaid .hb-founder-portrait,
    .hb-founder-ahmad .hb-founder-portrait{
        width:170px;
    }
    .hb-founders-together{
        padding-bottom:90px;
    }
    .hb-founder-final-card{
        min-height:0;
    }
}




/* link from the founders to the Team page (/team/) */
.hb-founders-team-link{margin-top:28px}

/* =========================================================
   FOUNDERS: same side spacing as the rest of the site, and
   portraits framed on the face (not the chest)
========================================================= */
.hb-team-intro,
.hb-founder-feature,
.hb-founders-together{
    padding-left:max(24px, calc((100% - 1180px) / 2));
    padding-right:max(24px, calc((100% - 1180px) / 2));
}
.hb-founder-final-image img{
    object-position:50% 14%;
}
.hb-founder-portrait img{
    object-position:50% 18%;
}
@media(max-width:700px){
    .hb-team-intro,
    .hb-founder-feature,
    .hb-founders-together{
        padding-left:16px;
        padding-right:16px;
    }
}