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

NAV

--------------------------------
----------------------------- */
/* #region NAV */

nav {
    grid-template-columns: minmax(1rem, 1fr) 2rem minmax(
            0,
            22rem
        ) 8rem 8rem 8rem 8rem minmax(1rem, 1fr);
    background-color: transparent;
    border-bottom: none;
    color: #fff;
}

nav aside {
    grid-column: 2/3;
    margin-top: 4rem;
}

nav p {
    line-height: calc(var(--h) / 2);
}

nav h1 {
    margin: 1.25rem 0 0 auto;
}

nav aside {
    grid-template-rows: 4rem 1fr;
    background-color: transparent;
    transform: none;
    transition: none;
}

nav #logo {
    transform: translateY(calc(var(--h) - 8rem));
}

nav #logo img {
    filter: none;
}

nav #logotype {
    transform: translateY(var(--y));
    opacity: var(--o);
}

.nav-signup::after {
    bottom: calc(2.75rem - var(--h) / 4); /* 0.75rem -> 1.75rem */
}

nav #logo {
    width: 2rem;
}

nav #logo img {
    padding: 1rem 0 0 0;
}

nav.sticky {
    border-bottom: none;
    background-color: #000;
}

/* #endregion NAV */

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

HERO

--------------------------------
----------------------------- */
/* #region HERO */

#hero {
    background-color: #000;
    grid-template-columns: minmax(0, 1fr) 64rem minmax(0, 1fr);
    grid-template-rows: 4rem 4rem 56rem 12rem 8rem;
    color: #fff;
}

#hero picture {
    width: 100%;
    max-height: 64rem;
    grid-column: 2/3;
    grid-row: 1/-2;
    object-position: bottom;
    transform: unset;
    background-color: #000;
}

#hero img,
#hero source {
    max-height: 64rem;
    object-position: bottom;
}

#hero aside {
    grid-row: 1/-1;
    background-color: #000;
}

#hero h2 {
    font-size: 2.5rem;
    grid-row: 1/2;
    grid-column: 3/4;
    grid-template-rows: max-content max-content;
}

#hero-tagline {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16rem minmax(0, 40rem) minmax(0, 1fr);
    grid-column: 1/-1;
    grid-row: 4/5;
}

#hero-tagline p {
    grid-column: 3/4;
    grid-row: 2/3;
}

/* #endregion HERO */

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

DOCS & PHOTOS GRIDS

--------------------------------
----------------------------- */
/* #region DOCS & PHOTOS GRIDS */

.index-intro-grid {
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    column-gap: 4rem;
}

.index-intro-grid div {
    grid-column: span 3;
}

#index-photos-intro {
    background-color: #111;
    color: #fff;

    background-image: url("../imgs/2026/hero_photos-576w.jpg");

    /* webkit prefix for older Safari/Chrome */
    background-image: -webkit-image-set(
        url("../imgs/2026/hero_photos-576w.webp") 1x,
        url("../imgs/2026/hero_photos-1152w.webp") 2x,
        url("../imgs/2026/hero_photos-1728w.webp") 3x,
        url("../imgs/2026/hero_photos-2304w.webp") 4x
    );

    /* standard */
    background-image: image-set(
        url("../imgs/2026/hero_photos-576w.webp") 1x,
        url("../imgs/2026/hero_photos-1152w.webp") 2x,
        url("../imgs/2026/hero_photos-1728w.webp") 3x,
        url("../imgs/2026/hero_photos-2304w.webp") 4x
    );

    background-repeat: no-repeat;
    background-position: right;
    background-size: auto 100%;
}

#index-photos-intro h2 {
    font-size: 2rem;
    letter-spacing: 0rem;
}

#index-photos-intro picture {
    height: 100%;
    width: auto;
    object-fit: cover;
    transform: translateX(calc(-100% - 4.5rem));
}

#index-photos-intro picture img,
#index-photos-intro picture source {
    height: 100%;
    width: auto;
    object-fit: cover;
}

#index-photos-intro section {
    padding: 8rem 0 7.5rem 0;
}

.index-grid-features {
    grid-auto-rows: 6rem;
    row-gap: 0rem;
}

.index-grid-features picture {
    width: 100%;
    height: 18rem;
    object-fit: cover;
    grid-row: span 3;
}

.index-grid-features picture img,
.index-grid-features picture source {
    width: 100%;
    height: 18rem;
    object-fit: cover;
}

.index-grid-features .feature p {
    line-height: 2rem;
    margin-top: 0;
}

.index-grid-features .feature p:first-of-type {
    margin-top: 1rem;
}

#index-docs-features picture {
    height: 24rem;
    grid-row: span 4;
}

#index-docs-features picture img,
#index-docs-features picture source {
    height: 24rem;
}

#index-docs-intro {
    background-color: #131316;
    color: #fff;

    background-image: url("../imgs/2026/hero_docs-576w.jpg");

    /* webkit prefix for older Safari/Chrome */
    background-image: -webkit-image-set(
        url("../imgs/2026/hero_docs-576w.webp") 1x,
        url("../imgs/2026/hero_docs-1152w.webp") 2x,
        url("../imgs/2026/hero_docs-1728w.webp") 3x,
        url("../imgs/2026/hero_docs-2304w.webp") 4x
    );

    /* standard */
    background-image: image-set(
        url("../imgs/2026/hero_docs-576w.webp") 1x,
        url("../imgs/2026/hero_docs-1152w.webp") 2x,
        url("../imgs/2026/hero_docs-1728w.webp") 3x,
        url("../imgs/2026/hero_docs-2304w.webp") 4x
    );

    background-repeat: no-repeat;
    background-position: left;
    background-size: auto 100%;
}

#index-docs-intro h2 {
    font-size: 2rem;
    letter-spacing: 0rem;
}

#index-docs-intro picture {
    height: 100%;
    width: auto;
    object-fit: cover;
    transform: translateX(calc(-100% - 4.5rem));
}

#index-docs-intro picture img,
#index-docs-intro picture source {
    height: 100%;
    width: auto;
    object-fit: cover;
}

#index-docs-intro section {
    padding: 8rem 0 7.5rem 0;
}

/* #endregion DOCS & PHOTOS GRIDS */

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

EUROPE / MEDIA

--------------------------------
----------------------------- */
/* #region EUROPE / MEDIA */

#europe-section {
    margin: 0;
    background-color: #fff;
    color: #000;
}

#europe-section img {
    filter: invert(1);
}

#media-section {
    padding-top: 4rem;
}

/* #endregion EUROPE / MEDIA */

@media (max-width: 1280px) {
    #hero {
        grid-template-columns: minmax(0, 1fr) 64rem minmax(0, 1fr);
        grid-template-rows: 4rem 4rem 56rem 12rem 8rem;
    }
}

@media (max-width: 1023px) {

    #hero {
        grid-template-columns: 0 1fr 0;
    }

    nav {
        height: 4rem;
        grid-template-columns: 3rem 2rem 0 1fr 1fr 1fr 1fr 1rem;
        grid-template-columns: 2rem 2rem 1fr repeat(4, minmax(4rem,8rem)) 1rem;
    }

    nav p {
        transform: translateY(1rem) !important;
    }

    nav aside {
        transform: none !important;
        filter: none !important;
        background-color: transparent !important;
    }

    nav #logo {
        transform: translateY(calc(var(--h) / 4 - 4rem)) translateX(calc(var(--h) / 4 - 2rem));
    }

    nav #logotype {
        transform: translateY(calc(var(--y) - 4rem));
        opacity: var(--o);
    }

    nav #logo img {
        padding: 0;
        width: 2rem;
        height: 2rem;
    }

    #hero-tagline {
        grid-template-columns: 1fr 16rem 40rem 1fr;
    }

}


@media (max-width: 927px) {

    #hero {
        display: block;
        overflow: hidden;
        padding-bottom: 8rem;
    }

    #hero picture {
        width: 100%;
        transform: none;
        margin: -4rem 0 0 0;
    }

    #hero h2 {
        margin-top: 0;
        text-align: left;
        max-width: 24rem;
    }

    #hero-tagline {
        grid-template-columns: 1rem 16rem minmax(16rem, 40rem) 1rem;
    }

    .index-intro-grid {
        grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
        padding: 4rem 0 !important;
    }

    .index-intro-grid h2 {
        margin-top: 0;
        font-size: 1.125rem !important;
        line-height: 2rem !important;
    }

    .index-intro-grid div {
        grid-column: span 1;
    }

    #index-photos-intro {
        background-position: bottom right -2rem;
    }
}

@media (max-width : 703px) {

    #hero-tagline {
        grid-template-columns: 1rem 1fr 1rem;
    }

    #hero-tagline h2,
    #hero-tagline p {
        text-align: center;
        grid-column: 2/3;
        margin: auto;
    }

    #index-photos-intro {
        background-image: none;
        background-color: #FFF;
        color: #000;
    }

    #index-docs-intro  {
        background-image: none;
        background-color: var(--cryptee-4);
        color: #000;
    }

    #index-docs-intro section b {
        display: none;
    }

    #index-photos-features {
        background-color: #FFF;
    }

    #index-docs-intro section div,
    .index-intro-grid div {
        grid-column: span 2;
    }

    .index-intro-grid h2 {
        margin-top: 0;
        font-size: 2rem !important;
        line-height: 3rem !important;
    }

    #index-docs-intro section,
    .index-intro-grid {
        padding: 8rem 0 0 0 !important;
    }

}

@media (max-width : 544px) {
    #hero picture {
        margin: 0 0 4rem 0;
    }
}

@media (max-width : 399px) {
    #hero-tagline h2 {
        font-size: 1.75rem;
        line-height: 2.5rem;
    }

    #hero-tagline p br {
        display: none;
    }
}

@media (max-width: 374px) {
    nav {
        grid-template-columns: 1rem 2rem 1fr 1fr 1fr 1rem;
    }

    nav #logo {
        transform: translateY(-3rem) translateX(0);
    }

    nav p {
        line-height: 2rem !important;
    }

    .nav-signup::after {
        bottom: 1.75rem;
    }
}