:root
{
    --sunflower:  #FFBD20;
    --mango:      #FE813E;

    --cherry:     #FF576B;

    --paper:      #eef3ff;

    --corporate:  #5F8CFF;
    --ocean:      #5F7DFF;

    --charcoal:   #363636;
    --dust:       #454545;
    --soot:       #505050;
    --gray:       #bcbcbc;
    --select:     #9d9d9d;

    --placeholder: #f0f0f0;
    --shadow:      #e2e7eb;


    --small:       clamp(25px,  15vw, 75px);
    --medium:      clamp(50px,  10vh, 150px);
    --large:       clamp(100px, 20vh, 300px);
}


.sunflower      { color: var(--sunflower); }
.mango          { color: var(--mango); }

.cherry         { color: var(--cherry); }

.paper          { color: var(--paper); }

.corporate      { color: var(--corporate); }
.ocean          { color: var(--ocean); }

.charcoal       { color: var(--charcoal); }
.dust           { color: var(--dust); }
.soot           { color: var(--soot); }
.gray:          { color: var(--gray); }
.white          { color: white; }

.small
{
    height:             var(--small);
}

.medium
{
    height:             var(--medium);
}

.large
{
    height:             var(--large);
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


html
{
    scroll-behavior: smooth;
}

html, body
{
    overflow-x:     hidden;
}


body
{
    margin:  0;
    padding: 0;
}

section
{
    place-items:        center;

    padding-inline:     clamp(8px, 4vw, 32px);

    padding-block:      var(--medium);

    scroll-margin-top:  0rem;
}

a
{
    text-decoration: none;
}

h1
{
    font-family:        nexa, sans-serif;
    font-weight:        800;
    font-style:         normal; 

    font-size:          4.5rem;

    letter-spacing:     0.05em;

    line-height:        1.5;


}

h2
{
    font-family:        nexa, sans-serif;
    font-weight:        800;
    font-style:         normal; 

    font-size:          3.5rem;

    letter-spacing:     0.05em;

    line-height:        1.25;
}


h3
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          2rem;

    line-height:        2;
}

h3
{
    font-family:        nexa, sans-serif;
    font-weight:        700;
    font-style:         normal;

    font-size:          2.5rem;

    line-height:        1.75;
}

p
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;
  
    font-size:          1.5rem;

    line-height:        2.25;
}

p.italic
{
    font-style:         italic;
}

p.bold
{
    font-weight:        500;
}

li
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1.25rem;

    line-height:        2;

    padding-left:       2rem;

    margin-bottom:      1.5rem;
}


@media (max-width: 600px)
{

    h1
    {
        font-size:      2.5rem;       
        text-align:     left;
    }

    h2
    {
        font-size:      2.25rem;
        text-align:     left;
    }

    h3
    {
        font-size:      2rem;
        line-height:    1.75;
    }


    p
    {
        font-size:      1.25rem;
    }

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.unwrap
{
    white-space:        nowrap;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.highlight
{
    display:            inline-block;
    vertical-align:     baseline;
    margin-top:         0.5rem;
    color:              white;
    padding:            0.1em 0.3em;
    border-radius:      0.2em;
    white-space:        nowrap;
}


.sunflower.highlight
{
    background-color:   var(--sunflower);
}

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

.corporate.highlight
{
    background-color:   var(--corporate);
}

.cherry.highlight
{
    background-color:   var(--cherry);
}

.white.highlight
{
    background-color:   white;
}

@media (max-width: 600px)
{
    .highlight.hide
    {
        display: none;
    }
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.quick-links
{
    position:       fixed;

    left:           50%;
    transform:      translateX(-50%);        

    z-index:        1000;

    background:     var(--charcoal);

    border-radius:  1000rem;

    overflow:       hidden;

}

.quick-links.top
{
    top:            1rem;
}

.quick-links.bottom
{
    bottom:         1rem;
}

.quick-margin
{
    display:            flex;
    justify-content:    center;

    gap:                0rem;

    margin:             0.75rem;
}

.quick-link
{
    display:            flex;
    align-items:        center;

    padding-left:       3rem;
    padding-right:      3rem;

    border-radius:      1000rem;

    box-sizing:         border-box;

    text-decoration:    none;
    color:              white;
    white-space:        nowrap;
}

.quick-link:hover 
{
    cursor:             pointer;

    color:              var(--charcoal);
    background-color:   var(--hover);
}

.quick-link p
{
    line-height:        1.25;
}



@media (max-width: 1050px)
{
    .quick-links.hide
    {
        display: none;
    }
}


.quick-link p
{
    font-weight:        500;
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.button
{
    margin-inline:      auto;

    display:            inline-flex;

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

    background-color:   white;
    color:              var(--soot);


    border:             0;
    border-radius:      100rem;


    padding-top:        2rem;
    padding-bottom:     2rem;

    max-width:          90vw;
    width:              40rem;

    white-space:        nowrap;


    transition:         transform .2s ease;
    transform-origin:   center;
    cursor:             pointer;

    position:           relative;

    z-index:            1;
}


@media (max-width: 1000px)
{

    .button
    {
        padding-top:    1rem;
        padding-bottom: 1rem;
    }
}


@media (hover: hover) and (pointer: fine)
{
    .button:hover
    {
        transform:      scale(1.06);
    }
}



.button .orange
{
    background:         linear-gradient(144deg,rgba(255, 191, 54, 1) 0%, rgba(255, 113, 74, 1) 100%);
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.paragraph
{
    width:          95%;
    max-width:      1000px;

    margin-inline:  auto;

    padding-bottom: var(--small);
}

.boundless
{
    max-width:      none;
}

.unpadded-top
{
    padding-top:    0;
}

.unpadded-bottom
{
    padding-bottom: 0;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.story
{


}

.story-element
{
    width:                      95%;
    max-width:                  1500px;

    display:                    grid;
    grid-template-columns:      0.4fr 1fr;

    gap:                        6rem;

    align-items:                center;
}

.story-text
{
    display:                    flex;
    flex-direction:             column;
    justify-content:            center;
}

.story-image
{
    display:                    grid;
    place-items:                center;
}

.story-image img
{
    max-width:                  100%;
    height:                     auto;
}

@media (max-width: 1300px)
{
    .story-element
    {
        grid-template-columns: 1fr;
    }

    .story-image
    {
        display:                none;
    }
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.reveal
{
    
}

.reveal .paragraph
{
    max-width:  1200px;
}

.reveal-words .word
{
    opacity:      0;
    transition:   opacity 600ms ease;
}

.reveal-words .word.visible
{
    opacity:      1;
}

.reveal-stack
{
    display:      grid;
}

.reveal-stack > *
{
    grid-area: 1 / 1; 
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.album
{
    display:            flex;
    flex-direction:     column; 
    align-items:        center;   
    gap:                20px;

    width:              95%;
    max-width:          1500px;
    margin:             0 auto;
}

.album p
{


}

.frame
{
    width:              100%;
}

.frame img
{
    display:            block;
    width:              100%;  
    height:             auto;
    border-radius:      6rem;
}

.reel
{
    display:                grid;
    grid-template-columns:  1fr 1fr; 
    gap:                    20px;
    width:                  100%;
}

.reel img
{
    width:                  100%;
    height:                 auto;
    display:                block;
    border-radius:          1.5vw;
}


@media (max-width: 800px)
{

    .reel
    {
        display: grid;
        grid-template-columns: 1fr;
    }

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.white
{

}

.white h1
{
    color:      var(--soot);
}

.white h2
{
    color:      var(--soot);
}

.white h3
{
    color:      var(--soot);
}

.white p
{
    color:      var(--charcoal);
}

.white ul
{
    color:      var(--charcoal);
}

.white li
{
    color:      var(--charcoal);
}

.white a
{
    color:      #5f9fff;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.yellow
{
    background-color: var(--sunflower);
}

.yellow h3
{
    color: white;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.gradient
{
    margin-top:     var(--large);
    padding-top:    var(--large);

    background:     linear-gradient(346deg,rgba(255, 102, 61, 1) 0%, rgba(255, 145, 64, 1) 56%, rgba(255, 191, 54, 1) 100%);
}

.gradient h1
{
    color: white;
}

.gradient p
{
    color: white;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.contact
{
    display:            flex;
    flex-direction:     row;
    align-items:        center;
    justify-content:    center;
    gap:                20px;

    width:              95%;
    max-width:          1500px;
    margin:             0 auto;
}


.letter
{
    width:      48px;
    height:     auto;
    display:    block;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.left
{
    text-align: left;
}

.focus
{
    text-align: center;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.anchor
{
    position: fixed;
    z-index:  1000;
}

.center
{
    left:     50%;
    transform: translateX(-50%);        
}

.top
{
    top: 0;
}

.bottom
{
    bottom: 0px;
}

.right
{
    right: 0;
}



/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.icon
{
    width:            1.2em;

    margin-left:      0.3em;

    position:         relative;
    top:              5px;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.hero
{
  position:         relative;
  overflow:         hidden;
  padding:          clamp(28px, 8vw, 100px);

  padding-top:      var(--medium);
  padding-bottom:   0;
}

.hero::before
{
  content:          "";
  position:         absolute;
  inset:            0;
  height:           80%;
  background:       var(--sunflower);
  z-index:          0;
}

.hero-element
{
  position:             relative;

  max-width:            100%;
  margin:               0 auto;
  display:              grid;
  justify-items:        center;
  text-align:           center;
}

.hero-video
{
    width:              min(1600px, 110%);
    max-width:          110%;

    aspect-ratio:       16 / 9;

    border-radius:      75px;
    overflow:           hidden;

    background:       var(--charcoal);

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

.hero-video video
{
  width:            100%;
  height:           100%;
  object-fit:       cover;
  display:          block;
}

.hero img
{
    width:              100px;
    height:             auto;
}


/* ---------------------------------------------------------------- */

@media (max-width: 1050px)
{

    .hero
    {
        padding:        0;
    }

    .hero::before
    {
        display:        none;
    }

    .hero-element
    {
        max-width:      100%;
        border-radius:  0;
        margin:         0;
    }

    .hero-video
    {
        width:          100%;
        margin:         0;
        border-radius:  0;
    }
}




/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */

.services
{
    background-color:   var(--corporate);

    margin-top:         var(--medium);
    margin-bottom:      var(--medium);
}

.services .scale
{
    width:              95%;
    max-width:          1400px;
    margin-inline:      auto;

    display:            flex;
    flex-direction:     column;

    gap:                0rem;

}

.services .bound
{
    margin-bottom:      0rem;
}

.services .box
{
    width:              100%;

    display:            flex;
    flex-direction:     column;

    box-sizing:         border-box;
    border-radius:      3rem;

    background-color:   white;

    padding:            4rem;
}

.services .dark
{
    background-color:   var(--ocean);
}


.services .white
{
    color:              white;
}

.services h2
{
    font-weight:        500;
    font-style:         normal;
    font-size:          clamp(2rem, 2.85vw, 3rem); 

    letter-spacing:     0.05em;
        
    margin:             0;
}

.services h3
{
    font-weight:        400;
    font-style:         normal;
    font-size:          clamp(1.5rem, 1.8vw, 1.8rem); 

    margin:             0;
}

.services h4
{
    font-family:        nexa, sans-serif;
    font-weight:        400;
    font-style:         normal;

    font-size:          1rem;
}


section.services .flex
{
    display:                grid;
    grid-template-columns:  repeat(2, minmax(0, 1fr));
    gap:                    clamp(16px, 2vw, 28px);
    align-items:            stretch;
}



@media (max-width: 1300px)
{
    section.services .flex
    {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 1300px)
{
    .services .box
    {
        padding:              1.5rem;
    }
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


.team
{

}

.team p
{
    line-height:                0.5;
    white-space:                nowrap;
}

.team-grid
{
    width:                      80vw;
    max-width:                  1200px;
    margin-inline:              auto;

    display:                    grid;

    grid-template-columns:      repeat(auto-fit, minmax(min(20rem, 100%), 1fr));

    column-gap:                 4rem;
    row-gap:                    4rem;

    justify-items:              center;
}

.team-member
{
    max-width:                  17.5rem;
    width:                      100%;

    text-align:                 center;
}

.team-photo
{
    width:                      100%;
    aspect-ratio:               1 / 1;
    object-fit:                 cover;

    background-color:           var(--placeholder);
    border-radius:              9999px;

    margin-bottom:              3rem;
}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------- */


form
{
    display:                    flex;
    flex-direction:             column;

    gap:                        2.5rem;

    width:                      100%;
    max-width:                  800px;
}

form .contact
{
    padding:                    20px;

    border:                     none;
    border-radius:              0.5rem;

    font-family:                nexa, sans-serif;
    font-weight:                400;
    font-style:                 normal;
  
    font-size:                  1.25rem;

    line-height:                2;

    color:                      var(--soot);
}

form .contact::placeholder
{
    color:                      var(--gray);
}

input:hover::placeholder, textarea:hover::placeholder
{
    color:                      var(--select); 
}


input:hover, input:focus, textarea:hover, textarea:focus, select:focus
{
    outline:                    none;
}

form textarea
{
    min-height:                 15rem;
    overflow:                   hidden;

    resize:                     none;
}


form .field
{
    display:                    inline-block;
    width:                      100%;
    position:                   relative;
}

form .field > .contact
{
    width:                      100%;
    box-sizing:                 border-box;
    display:                    block;
}


.field::after
{
    content:                    "";
    position:                   absolute;
    inset:                      0;
    border-radius:              inherit;
    pointer-events:             none;

    background:                 transparent;
    box-shadow:                 0 1rem 1rem rgba(0,0,0,0.4);

    mix-blend-mode:             soft-light;

    opacity:                    0;
    transition:                 opacity 0.2s ease;
}

.field:hover::after, .field:focus-within::after
{
    opacity:                    1;
}

form button.button
{
    padding-top:                1rem;
    padding-bottom:             1rem;

    transition:                 opacity 0.6s ease, transform 0.8s ease;
}

form button:disabled
{
    opacity:                    0.2;
    mix-blend-mode:             overlay;


    transform:                  scale(0.95);

    cursor:                    default;
}


form button:disabled:hover
{
    transform:                  none;
}