/* ==========================
   RESET
========================== */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

img{
    max-width:100%;
    display:block;
}

body{
    font-family:"Instrument Sans",sans-serif;
    color:#000;
    background:#fff;
    overflow-x:hidden;
}

/* ==========================
   VARIABLES
========================== */

:root{
    --red:#BD0101;
    --peach:#FFE6D5;
    --light:#F4F4F4;
    --text:#000;
    --container:1100px;
}

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

.container{
    width:min(100%, var(--container));
    margin:0 auto;
    padding:0 32px;
}

.narrow{
    max-width:820px;
}

section{
    padding:120px 0;
}

h2{
    font-size:clamp(3rem, 8vw, 5rem);
    line-height:0.95;
    font-weight:800;
    text-align:center;
    margin-bottom:48px;
    text-transform:lowercase;
}

p{
    font-size:18px;
    line-height:32px;
    text-align:center;
}

a{
    color:inherit;
    text-decoration:none;
    transition:.3s ease;
}

a:hover{
    opacity:.65;
}

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

.hero{
    background:var(--red);
    height:640px;
    position:relative;
    overflow:hidden;
}

.hero-inner{
    width:min(100%, 1100px);
    height:100%;
    margin:0 auto;
    position:relative;
}

/* HERO TEXT */

.hero-title{
    position:absolute;
    top:110px;
    left:50%;
    transform:translateX(-50%);
    color:#fff;
    text-align:center;
    line-height:.82;
    font-weight:900;
    z-index:1;
    font-family:"BBH Bartle",sans-serif;
}

.hero-title span{
    display:block;
    font-size:clamp(5rem,11vw,8.5rem);
    letter-spacing:-4px;

    opacity:0;
}

.hero-title span:first-child{
    animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}

.hero-title span:last-child{
    animation:fadeUp .9s cubic-bezier(.22,1,.36,1) .35s forwards;
}


/* HERO IMAGE */

.hero-image{
    position:absolute;
    bottom:0;
    left:50%;
    transform:translateX(-50%);
    width:min(445px,75vw);
    z-index:2;

    opacity:0;
    animation:fadeIn 1.2s ease .75s forwards;
}


/* ANIMATIONS */

@keyframes fadeUp{
    from{
        opacity:0;
        transform:translateY(50px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}

@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

/* ==========================
   CONTENT SECTIONS
========================== */

.section-light{
    background:#f2f2f2;
}

.section-peach{
    background:var(--peach);
}

.intro p{
    font-size:24px;
    line-height:1.5;
    font-weight:600;
}

.contact{
    min-height:420px;
    display:flex;
    align-items:center;
}

/* ==========================
   CAREER
========================== */

.career-grid{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:60px 40px;
    max-width:780px;
    margin:0 auto;
    text-align:center;
}

.job h3{
    font-size:22px;
    font-weight:700;
    margin-bottom:6px;
}

.job span{
    display:block;
    color:#555;
    margin-bottom:4px;
}

.job small{
    color:#777;
    font-size:14px;
}

/* ==========================
   FOOTER
========================== */

footer{
    background:var(--red);
    color:#fff;
}

.footer-inner{
    width:min(100%, 1200px);
    margin:0 auto;
    min-height:100px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 32px;
    gap:24px;
}

.footer-left,
.footer-center,
.footer-right{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:.05em;
}

.footer-center{
    text-align:center;
}

.footer-right{
    display:flex;
    gap:20px;
}

.footer-right a:hover{
    opacity:.7;
}

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

@media (max-width:900px){

    section{
        padding:90px 0;
    }

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

    .intro p{
        font-size:20px;
    }
}

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

@media (max-width:768px){

    .hero{
        height:520px;
    }

    .hero-title{
        top:80px;
    }

    .hero-title span{
        letter-spacing:-2px;
    }

    h2{
        margin-bottom:32px;
    }

    p{
        font-size:16px;
        line-height:30px;
    }

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

    .footer-inner{
        flex-direction:column;
        justify-content:center;
        text-align:center;
        padding:24px;
    }

    .footer-right{
        flex-wrap:wrap;
        justify-content:center;
    }
}

@media (max-width:480px){

    .hero{
        height:460px;
    }

    .hero-image{
        width:320px;
    }

    .container{
        padding:0 24px;
    }

    section{
        padding:80px 0;
    }

    .intro p{
        font-size:18px;
    }
}