/*----- FONTS -----*/
@font-face {
    font-family: "headingFont";
    src: url("./assets/fonts/Indivisible-SemiBold.ttf");
}

@font-face {
    font-family: "headingFontBold";
    src: url("./assets/fonts/Indivisible-Bold.ttf");
}

@font-face {
    font-family: "bodyFont";
    src: url("./assets/fonts/SF-Pro-Display-Regular.otf");
}

@font-face {
    font-family: "bodyFontLight";
    src: url("./assets/fonts/SF-Pro-Display-Light.ttf");
}

body {
    margin: 0;
    font-size:var(--Body-Text-M);
    color:var(--Text-Color-1);
    background-color: var(--Off-White);
}

html, body {
    scroll-behavior:smooth;
}

h1, h2, h3 {
    font-family: headingFontBold
}

h4, h5, h6, button {    
    font-family: headingFont;
}

h1, h2, h3, h4, h5, h6, button {
    /* letter-spacing: var(--Heading-Letter-Spacing); */
    line-height:var(--Line-Height-M);
    font-weight: normal;
}

img, canvas, object, video, figure, iframe {
    max-width:100%;
    vertical-align:middle;
}

a {
    font-family: headingFont;
    font-size:var(--Body-Text-L);
    font-weight:normal;
    text-decoration:none;
    color:var(--Nav-Links-Color);
}

/*----- LOADING SCREEN -----*/
.loading-screen {
    position:fixed;
    top:0;left:0;
    width:100vw;
    height:100vh;
    background-color:var(--Background-1);
    z-index:99;
}

.loading-screen video {
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    pointer-events:none;
}

.disappear {
    opacity:0
}

.loading-screen, .loading-screen.disappear {
    transition:opacity var(--Loading-Screen-FadeOut-Speed) ease-in-out
}

/*----- ALL CONTENT -----*/
.loading-screen + .main-content {
    opacity:0;
}

.appear {
    opacity:1;
}

.main-content, .main-content.appear {
    transition:opacity var(--Loading-Screen-FadeOut-Speed) ease-in-out
}

/*----------------------------*/
.welcome-screen {
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100vh;
    display:flex;
    flex-direction:column;
}

/*----- TOP BAR -----*/
nav {
    display:grid;
    grid-auto-flow:column;
    justify-content:space-between;
    margin-top:calc(var(--Screen-Margin-Y) / 2);
    margin-bottom:calc(var(--Screen-Margin-Y) / 2);
    margin-left:var(--Screen-Margin-X);
    width:calc(100% - (var(--Screen-Margin-X) * 2));
}

nav .logo-link {
    position:relative;
    display:flex;
    align-items: center;
    width:var(--Nav-Logo-Width);
}

nav object {
    display:block;
    width:100%;
    pointer-events:none;
}

nav .logo-link object:nth-child(2){
    position:absolute;
    top:0;left:0;
    width:100%;
    display:none;
}

nav img {
    width:100%;
    height:auto;
    object-fit:contain;
}

nav ul {
    margin:0;
    padding:0;
    list-style-type:none;
    display:grid;
    grid-auto-flow:column;
    grid-gap:var(--Nav-Links-Spacing);
    align-items:center;
}

.nav-links a {
    display:block;
    cursor:pointer;
}

.nav-links a:focus-visible {
    outline:3px solid rgba(var(--Accent-2-RGB),0.69);
    outline-offset:calc(0px - (var(--Nav-Links-Touch-Padding) / 2));
}

.hamburger-container {
    display:none;
    position:absolute;
    top:0;right:0;
    margin-right:3rem;
    height:100%;
    align-items:center;
    justify-content:center;
}

.hamburger {
    position:relative;
    background:none;
    border:none;
    font-family:inherit;
    font-size:inherit;
    color:inherit;
    width:var(--Mobile-Hamburger-Size);
    height:var(--Mobile-Hamburger-Size);
    flex-shrink:0;
    padding:0.69rem;
    cursor:pointer;
    box-sizing:content-box;
}

.hamburger object:nth-child(2){
    position:absolute;
    top:0;left:0;
    margin-top:0.69rem;
    margin-left:0.69rem;
    width:var(--Mobile-Hamburger-Size);
    height:var(--Mobile-Hamburger-Size);
}

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

/*----- HEADER -----*/
.welcome-header {
    align-self:center;
    display:flex;
    align-items:center;
    justify-content:center;
    flex:1;
    width: 100%;
    position: relative;
}

.header-gradient {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    /*
    background: linear-gradient(to bottom right, #edfafe, transparent 40%),
    linear-gradient(235deg, #d6ceff -20%, transparent),
    linear-gradient(20deg, #ffedd3, transparent);
    */
    background-image:url("./assets/svgs/headerBG.svg");
    background-size: 100% 100%;
    background-repeat:no-repeat;
    border-radius:var(--Header-Border-Radius)
}

.header-wrap {
    max-width:min(var(--Features-Grid-Width), 1005px);
    display:flex;
    gap: 16px;
    align-items:stretch;
}

.header-left {
    flex: 1 1 40%;
}
.header-middle {
    flex: 1 1 30%;
}
.header-right {
    flex: 1 1 30%;
}


.header-left, .header-right {
    display:grid;
    align-content:center;
    grid-gap:var(--Header-Text-Row-Spacing) 0;
}

.welcome-header h1 {
    margin:0;
    font-size:var(--Heading-Size-XXXL);
    color:var(--Text-Color-1);
    line-height:var(--Line-Height-XS);
    max-width:calc(100% - 10px);
    text-align:right;
    letter-spacing: calc(0px - var(--Body-Text-Letter-Spacing-S));
    transform: translateY(calc(var(--Header-Text-Translate)*(-1)));
}

.welcome-header h1 span {
    padding:0 var(--Body-Text-Letter-Spacing-S); /* bc somehow the rainbow text gets cut off at the end */
    color: var(--Text-Color-1);
    background: linear-gradient(to right,
        rgba(132, 196, 44, 0.8),
        rgba(239, 204, 50, 0.8),
        rgba(219, 103, 27, 0.8),
        rgba(219, 103, 27, 0.8),
        rgba(211, 61, 18, 0.8),
        rgba(var(--Accent-1-RGB), 0.8),
        rgba(var(--Accent-2-RGB), 0.8)
    );

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.welcome-header p {
    margin:0;
    font-family: headingFont;
    font-size: var(--Body-Text-L);
    color: var(--Text-Color-4);
    transform: translateY(var(--Header-Text-Translate));
}

.welcome-header .mobile-imgs {
    display:none;
}

.header-middle {
    position:relative;
    display:flex;
    align-items:center;
}

.header-middle img {
    max-width: 100%;
}

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

/*----- MAIN -----*/
main {
    position:relative;
    margin-top:calc(100vh + var(--Screen-Margin-Y));
    margin-bottom:var(--Screen-Margin-Y);
}

/*----- SECTIONS -----*/
section {
    margin-top:calc(var(--Sections-Spacing-Y) * 0.2);
    padding-top:calc(var(--Sections-Spacing-Y) * 0.8)
}

/*----- DIVDER / LINE -----*/
hr {
    display:block;
    margin-top:calc(var(--Sections-Spacing-Y) * 1.2);
    margin-bottom:0;
    border-top:0.5px solid var(--Line-Color);
    border-bottom:0.5px solid var(--Line-Color);
    transform:perspective(0);
    width:var(--Sections-Divider-Width)
}

hr.nav-divider {
    margin-top: 0;
}

/*----- SECTION: FEATURES -----*/
.features-section {
    width:var(--Features-Grid-Width);
    max-width: var(--Sections-Max-Width);
    margin-left:auto;
    margin-right:auto;
}

.headings-group {
    display:grid;
    align-content:center;
    justify-content:center;
    text-align:center;
    grid-gap:0.5rem;
}

.headings-group > * {
    margin:0; /* remove default margin from <header> child elements */
}

.headings-group h2 {
    font-size:var(--Heading-Size-XXXL)
}

.headings-group p {
    margin-left:auto;
    margin-right:auto;
    font-size:calc(var(--Body-Text-L) + 2px);
    letter-spacing:var(--Body-Text-Letter-Spacing-XS);
    line-height:var(--Line-Height-M);
    max-width:50vw;
}

.features-grid {
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    grid-gap:var(--Features-Spacing);
    margin-top:var(--Features-Grid-Top-Gap)
}

.one-feature {
    position:relative;
    transform-origin:center;
}

.card-inner {
    display:flex;
    transition:transform var(--Features-Flip-Speed) ease-in-out;
    transform-style: preserve-3d;
    box-shadow:4px 4px 14px rgba(0,0,0,0.15);
    border-radius:var(--Features-Border-Radius);
    aspect-ratio: 1 / 0.63
}

.one-feature:hover .card-inner {
    transform:rotateY(180deg);
}

.card-front, .card-back {
    backface-visibility:hidden;
    border-radius:var(--Features-Border-Radius);
    overflow:hidden;
}

/*----- FEATURES, CARD, FRONT -----*/
.card-front {
    display:flex;
    justify-content:center;
    align-items:center;
    width:100%;
    flex:1;
}

.card-front-content {
    position:relative;
    /* width:calc(100% - (var(--Rainbow-Borders-Width) * 2));
    height:calc(100% - (var(--Rainbow-Borders-Width) * 2)); */
    width:100%;
    height:100%;
    padding:1.5em;
    background:var(--Background-1);
    border-radius:calc(var(--Features-Border-Radius) - var(--Rainbow-Borders-Width));
    box-sizing:border-box;
    display:grid;
    grid-auto-flow:row;
    align-items:center;
}

.feature-column {
    display: flex;
    align-items: center;
}

.feature-column > * {
    flex: 0 0 50%;
}

.feature-column img {
    display:block;
    margin-left:auto;
    margin-right:auto;
    height:var(--Features-Front-Image-Height);
    user-select:none;
    -webkit-user-select:none;
    -moz-user-select:none;
    pointer-events:none;
    object-fit: contain;
}

.card-front-content h3 {
    margin:0;
    color: var(--Text-Color-4);
    font-size: var(--Heading-Size-M)
}

/*----- FEATURES, CARD, BACK -----*/
.card-back {
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    display:flex;
    transform:rotateY(180deg);
    background: linear-gradient(to right,
        var(--Accent-1),
        var(--Accent-2)
    );
}

.card-back-content {
    padding:var(--Features-Box-Padding);
}

.text-constraint {
    max-height:100%;
    overflow:auto;
    width:60%;
    scrollbar-width:none; /* firefox */
    -ms-overflow-style:none; /* IE, Edge */
}

.text-constraint::-webkit-scrollbar {
    display:none; /* chrome & webkit */
}

.text-column {
    display:grid;
    grid-auto-flow:row;
}

.text-column > * {
    margin:0; /* remove default margin from .text-column child elements */
    color:var(--Background-1);
}

.card-back-content h3 {
    font-size:var(--Heading-Size-M);
    line-height:var(--Line-Height-S);
    text-overflow:ellipsis;
    overflow:hidden;
    margin-bottom:0.420em;
}

.card-back-content p {
    font-size:var(--Body-Text-M)
}

.card-back-content img.screenshot {
    position:absolute;
    display:block;
    bottom:0;right:0;
    width:40%;
    max-width:none;
    max-height:100%;
    object-fit:contain;
}

/*----- SECTION: MOCKUPS -----*/
.mockups-section {
    max-width: var(--Sections-Max-Width);
    width:var(--Features-Grid-Width);
    margin-left:auto;
    margin-right:auto;
}

.mockups-grid, .mockups-btn {
    margin-top: 30px;
}

.mockups-grid.mockups-grid-mobile {
    display: none;
}

.mockups-grid {
    display: flex;
    justify-content: space-between;
    padding: 14px 64px;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
    border-radius: 15px;
}

.mockups-btn {
    display: flex;
    justify-content: center;
}

.mockups-btn a {
    display: block;
}

/*----- SECTION: VIDEO -----*/
.video-gradient {
    position:relative;
    width:var(--Video-Gradient-Width);
    margin-right:calc(0px - var(--Rainbow-Borders-Width-XL));
    margin-right:0;
    margin-left:auto;
    display:flex;
    background: linear-gradient(123.15deg,
        var(--Accent-1), var(--Accent-2)
    );
    border-radius:var(--Video-Gradient-Border-Radius) 0 0 var(--Video-Gradient-Border-Radius);
    box-sizing:border-box;
    z-index:1;
}

.video-gradient:after {
    content:"";
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background: linear-gradient(to right,
        #9f8ec9,
        #a7b2e7,
        #bcecf7
    );
    border-radius:var(--Video-Gradient-Border-Radius) 0 0 var(--Video-Gradient-Border-Radius);
    opacity:0;
    transition:opacity var(--Video-Hover-Speed) ease-in-out;
    z-index:0;
}

.video-gradient:hover:after {
    opacity:1;
}

.video-avatar {
    position:absolute;
    z-index:2
}

.avatarTop {
    top:0;left:0;
    width:var(--Video-Avatar-Width);
    margin-top:calc(0px - (var(--Video-Avatar-Width) * 0.3));
    margin-left:calc(0px - (var(--Video-Avatar-Width) * 0.3));
}

.avatarBot {
    bottom:0;left:0;
    width:calc(var(--Video-Avatar-Width) * 0.95);
    margin-bottom:calc(0px - (var(--Video-Avatar-Width) * 0.35));
    margin-left:calc(var(--Video-Left-Gap) + var(--Video-Width));
}

.video-gradient-inner {
    margin-top:var(--Rainbow-Borders-Width-XL);
    margin-left:var(--Rainbow-Borders-Width-XL);
    width:100%;
    height:calc(100% - (var(--Rainbow-Borders-Width-XL) * 2));
    margin-bottom:var(--Rainbow-Borders-Width-XL);
    border-radius:calc(var(--Video-Gradient-Border-Radius) - var(--Rainbow-Borders-Width-XL)) 0 0 calc(var(--Video-Gradient-Border-Radius) - var(--Rainbow-Borders-Width-XL));
    background:var(--Background-1);
}

.video-block {
    position:relative;
    margin-top:var(--Video-Vertical-Gap);
    margin-left:var(--Video-Left-Gap);
    margin-bottom:var(--Video-Vertical-Gap);
    width:var(--Video-Width);
    border-radius:var(--Video-Border-Radius);
    overflow:hidden;
    box-shadow: 1rem 1rem 2.5rem rgba(0,0,0,0.25);
    z-index:2;
}

.video-block [data-player]{
    width:100%!important;
    height:calc(var(--Video-Width) / 16 * 9)!important;
}

.video-block .media-control[data-media-control] .media-control-background[data-background]{
    height:30%!important;
}

.video-block .media-control-indicator {
    font-family:inherit!important;
    font-size:var(--Body-Text-M)!important
}

.video-block .play-wrapper {
    height:4rem!important;
    opacity:1!important;
}

.video-block .media-control[data-media-control] .media-control-icon {
    opacity:0.9!important
}

.video-block .play-wrapper svg {
    position:relative;
    filter: drop-shadow(4px 4px 12px rgba(0,0,0,0.25));
    z-index:0;
}

.video-block .play-wrapper svg path[fill]{
    fill: #a7b2e7!important;
}

[data-bounce1], [data-bounce2], [data-bounce3]{
    background-color:#a7b2e7!important;
}

.video-block img {
    width:100%;
}

.video-block iframe {
    display:block;
    width:100%;
}

/*----- SECTION: TEAM -----*/
.team-section {
    width:var(--Team-Section-Width);
    margin-left:auto;
    margin-right:auto;
}

.team-grid {
    margin-top:var(--Team-Section-Top-Gap);
    margin-left:auto;
    margin-right:auto;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0 var(--Team-Grid-Spacing-X)
}

.one-person {
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:var(--Team-Photos-And-Text-Spacing);
    width:var(--Team-Photos-Size);
    flex-shrink:0;
}

.flex-break {
    margin-top:var(--Team-Grid-Spacing-Y);
    flex-basis: 100%;
    height: 0;
}

.avatar-wrap {
    position:relative;
    width:var(--Team-Photos-Size);
    height:var(--Team-Photos-Size);
    flex-shrink:0;
    overflow:hidden;
}

.avatar-gray, .avatar-full {
    position:absolute;
    top:0;left:0;
    display:block;
    width:100%;
    height:100%;
    object-fit:cover;
}

.avatar-gray {
    z-index:2;
    transition:opacity var(--Team-Photos-Hover-Speed) ease-in-out;
}

.avatar-full {
    margin-top:0.25px;
    margin-left:0.25px;
    width:calc(100% - .5px);
    height:calc(100% - .5px);
    z-index:1;
}

.one-person:hover .avatar-gray {
    opacity:0;
}

.person-text {
    display:grid;
    grid-auto-flow:row;
    grid-gap:0.8em;
    text-align:center;
}

.person-text > * {
    margin:0; /* remove default margin from .person-text child elements */
}

.person-text p {
    letter-spacing:var(--Body-Text-Letter-Spacing-XS);
}

.person-text h4 {
    margin-bottom:calc(((var(--Heading-Size-L) * var(--Line-Height-S) - var(--Heading-Size-L)) / -2) - 1px);
    font-size:var(--Heading-Size-L);
    color:var(--Accent-1);
    line-height:var(--Line-Height-S);
}

.person-links {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.69em;
    margin-top:0.5em;
}

.person-links a {
    display:block;
}

.person-links a:focus-visible {
    outline:3px solid var(--Accent-2);
    outline-offset:3px;
    border-radius:3px
}

.person-links object {
    display:block;
    width:var(--Team-Link-Icons-Size);
    height:var(--Team-Link-Icons-Size);
}

.person-links a object {
    pointer-events:none;
}

.person-links object img {
    width:100%;
    height:100%;
}

/*----- FOOTER -----*/
footer {
    padding:var(--Footer-Padding-Y) var(--Footer-Padding-X);
    background-color:var(--Footer-BG);
    color:var(--Footer-Text);
}

.footer-inner {
    max-width: var(--Sections-Max-Width);
    margin: auto;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0 var(--Footer-Column-Spacing)
}

.tagline-cont {
    width:var(--Footer-Tagline-Width);
}

.tagline {
    position:relative;
    text-align:right;
    margin-left:calc(0px - var(--Footer-Quote-Mark-Width) - var(--Heading-Size-XL))
}

.tagline object {
    position:absolute;
    width:var(--Footer-Quote-Mark-Width);
}

.tagline object[data*="quote-left"]{
    bottom:100%;
    margin-bottom:calc(0px - ((var(--Heading-Size-XL) * var(--Line-Height-S)) * 0.35));
    margin-left:calc(0px - var(--Footer-Quote-Mark-Width) - ((var(--Heading-Size-XL) * var(--Line-Height-S)) * 0.35));
}

.tagline h2 {
    display:inline;
    margin:0;
    font-size:var(--Heading-Size-XL);
    line-height:var(--Line-Height-S);
}

.tagline h2 span {
    color: var(--Footer-Text);
    background: linear-gradient(242.43deg, var(--Accent-2) 2.76%, var(--Accent-1) 251.92%);

    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.tagline object[data*="quote-right"]{
    top:100%;
    margin-top:calc(0px - ((var(--Heading-Size-XL) * var(--Line-Height-S)) * 0.5));
    margin-left:calc(0px + ((var(--Heading-Size-XL) * var(--Line-Height-S)) * 0.35));
}

footer form {
    display:grid;
    align-items:center;
    grid-gap:var(--Contact-Form-Fields-Spacing) var(--Contact-Form-Fields-Right-Gap)
}

footer input,
footer textarea {
    display:block;
    margin:0;
    font-family:inherit;
    font-size:inherit;
    border:none;
    box-shadow:none;
    border-radius:5px;
    background-color:var(--Background-2);
    color:var(--Text-Color-2);
    box-sizing:border-box;
    transform:perspective(0);
    width:var(--Contact-Form-Fields-Width);
    padding:var(--Contact-Form-Fields-Padding-Y) var(--Contact-Form-Fields-Padding-X)
}

footer input:placeholder,
footer textarea:placeholder {
    color:var(--Text-Color-3);
}

footer input:focus, footer input:focus-visible, footer input:active,
footer textarea:focus, footer textarea:focus-visible, footer textarea:active,
footer button:focus, footer button:focus-visible, footer button:active {
    outline:3px solid var(--Accent-2);
    outline-offset:-1.5px;
}

footer form label {
    position:absolute;
    margin:-1px;
    clip:rect(1px, 1px, 1px, 1px);
    clip-path:inset(50%);
    height:1px;
    width:1px;
    padding:0;
    overflow:hidden;
}

footer textarea {
    resize: vertical
}

.form-row:first-of-type {
    grid-area: 1 / 1 / 2 / 2;
}

.form-row:nth-of-type(2){
    grid-area: 2 / 1 / 3 / 2;
}

.form-row:nth-of-type(3){
    grid-area: 3 / 1 / 4 / 2;
}

.form-row:nth-of-type(4){
    grid-area: 4 / 1 / 5 / 2;
}

.form-title {
    grid-area: 1 / 2 / 4 / 3;
}

.form-title object {
    width:var(--Contact-Form-Logo-Width)
}

.form-title h4 {
    margin-top:0.69em;
    margin-bottom:0;
}

.form-submit {
    /* grid-area: 4 / 2 / 5 / 3; */
    grid-area: 3 / 2 / 4 / 3;
}

.form-submit button {
    position:relative;
    margin:0;
    padding:var(--Contact-Form-Button-Padding-Y) var(--Contact-Form-Button-Padding-X);
    border:none;
    box-sizing:border-box;
    border-radius:5px;
    width:var(--Contact-Form-Button-Width);
    background:var(--Accent-2);
    color:var(--Text-Color-1);
    cursor:pointer;
    overflow:hidden;
    z-index:0;
}

.form-submit button:after {
    content:"";
    position:absolute;
    top:0;left:0;
    width:100%;
    height:100%;
    background: linear-gradient(to bottom right, var(--Accent-2) 2.76%, var(--Accent-1) 251.92%);
    opacity:0;
    transition:opacity 0.25s ease-in-out;
    z-index:-1;
}

.form-submit button:hover:after {
    opacity:1;
}

.form-submit button:focus,
.form-submit button:focus-visible,
.form-submit button:active {
    outline-offset: 5px
}

.copyright-holder {
    margin-top:3rem;
    font-size:var(--Body-Text-S);
    letter-spacing:calc((var(--Body-Text-Letter-Spacing-S) + var(--Body-Text-Letter-Spacing-M)) / 2);
    text-align:center;
}

.download-proposal-btn {
    position:relative;
    font-family: bodyFont;
    padding: 8px 28px;
    border-radius: 15px;
    box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.15);
    letter-spacing: var(--Body-Text-Letter-Spacing-XS);
    text-shadow:none;
    z-index:0;
}