/* Main Configuration */
@layer configuration {
*,*::before,*::after {
    box-sizing      : border-box;
    padding         : 0;
    margin          : 0;
    background      : none;
    text-decoration : none;
    outline         : none;
    font-family     : inherit;
    font-size       : inherit;
    line-height     : inherit;
    font-weight     : inherit;
    color           : inherit;

    /* Disable double tap to zoom */
    touch-action : manipulation;

    /* Fix the antialias when needed */
    -webkit-font-smoothing  : antialiased;
    -moz-osx-font-smoothing : grayscale;
    font-feature-settings   : "onum", "kern", "liga", "clig", "calt";

    /* Global Transitions */
    transition-delay           : 0ms;
    transition-duration        : 150ms;
    transition-property        : none;
    transition-timing-function : ease-out ;
}
}
@layer configuration {

@font-face {
    font-family  : "HND";
    src          : url('fonts/HND300.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 300;
    font-display : swap;
}

@font-face {
    font-family  : "HND";
    src          : url('fonts/HND400.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 400;
    font-display : swap;
}

@font-face {
    font-family  : "HND";
    src          : url('fonts/HND500.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 500;
    font-display : swap;
}

@font-face {
    font-family  : "TN";
    src          : url('fonts/TN300.woff2') format('woff2');
    font-style   : normal;
    font-weight  : 300;
    font-display : swap;
}

:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : hsl(0,0%,0%);

    --dark  : #000;
    --light : #fff;
    --gray  : #EDF1F3;

    /* Font Settings */
    --font-family : HND, sans-serif;
    --font-size   : clamp(22px, 2.05vi + 13.81px, 65px);
    --font-height : clamp(28px, 2vi + 20px, 70px);
    --font-weight : 300;

    --sans-xxs : 300 clamp(13px, 0.33vi + 11.67px, 20px) / 1.25 HND;
    --sans-xs  : 300 clamp(15px, 0.48vi + 13.1px, 25px) / 1.2 HND;
    --sans-s   : 300 clamp(18px, 1.29vi + 12.86px, 45px) / 1.2 HND;
    --sans     : 300 clamp(22px, 2.05vi + 13.81px, 65px) / 1.2 HND;
    --sans-l   : 400 clamp(30px, 3.81vi + 14.76px, 110px) / 1.05 HND;
    --serif    : 300 clamp(30px, 3.81vi + 14.76px, 110px) / 1.05 TN;

    /* Set the defaults */
    font-size      : var(--font-height);
    font-family    : var(--font-family);
    font-weight    : var(--font-weight);
    background     : var(--background);
    color          : var(--text);

    /* Spacer Variables */
    --spacer-2-1 : 2rlh;
    --spacer-1-1 : 1rlh;
    --spacer-1-2 : 0.5rlh;
    --spacer-1-4 : 0.25rlh;
    --spacer-1-8 : 0.125rlh;

    --side-spacer : 0.5rlh;

    @media (width > 700px) {
        --side-spacer : 1rlh;
    }

    /* Grid Settings */
    --grid-template-columns : repeat(12,1fr);
    --grid-gap              : 0.5rlh 0.25rlh;
    
}

body {
    font-size      : var(--font-size);
    line-height    : var(--font-height);
    letter-spacing : -0.02em;
}
}/* Global Settings *//* Content Goes Here *//* UI Elements *//* Site's Header and navigation */
.header {
    padding               : var(--spacer-1-2) var(--side-spacer);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    grid-template-areas   : "logo logo logo logo . . . menu menu menu menu menu";
    gap                   : var(--grid-gap);
    align-items           : baseline;
    position              : fixed;
    inset                 : 0 0 auto;
    mix-blend-mode        : difference;
    z-index               : 9999;
}
@media (width > 1200px) {
    .header {
        grid-template-areas : "logo logo logo logo . . . . menu menu menu menu";
    }
}
.header-home-link {
    grid-area : logo;
}
.header-logo {
    fill : var(--light);
}
.header-menu {
    grid-area: menu;
    display: flex;
    justify-content: space-between;
}
.header-menu-item {
    font                : var(--sans-s);
    color               : var(--light);
    transition-property : opacity;
}
.header-menu-item:hover {
    opacity : 0.35;
}
.small-header .header-home-link {
    grid-area : unset;
    grid-column : span 3;
}
.small-header .header {
    padding : var(--spacer-1-4) var(--side-spacer);
}
.menu-button {
    grid-area    : menu;
    font         : var(--sans-s);
    color        : var(--light);
    justify-self : end;
    border       : none;
    display      : none;
}/* The Gradient background for the header */
.header-background {
    position            : fixed;
    inset               : 0;
    pointer-events      : none;
    background          : pink;
    z-index             : 1000;
    background          : radial-gradient(circle at top right, rgba(255,255,255,1), transparent);
    transition-property : opacity;
    transition-duration : 500ms;
    transform-origin    : top right;
    opacity             : 0;


}
@media (width < 800px) {

    .header {
        grid-template-areas: "logo logo logo logo logo logo . menu menu menu menu menu";
    }

    .small-header .header-home-link {
        grid-area : unset;
        grid-column : span 4;
    }

    .menu-button {
        display: block;
        transition-property: opacity;
        cursor: pointer;
    }

    .menu-button:hover {
        opacity : 0.35;
    }

    .header-menu {
        flex-direction : column;
        align-items    : flex-end;
        display        : none;
        gap            : 0.25rlh;
    }

    .mobile-menu-is-open .menu-button {
        display: none;
    }

    .mobile-menu-is-open .header-menu {
        display: flex;
    }

    .mobile-menu-is-open .header-background {
        opacity   : 1;
    }

}
@media (width < 550px) {
    .header {
        grid-template-areas: "logo logo logo logo logo logo logo logo menu menu menu menu";
    }

    .small-header .header-home-link {
        grid-area   : unset;
        grid-column : span 6;
    }
}/* Hero Section */
.hero-container {
    width    : 100%;
    height   : 100svh;
    position : relative;
    z-index  : 5000;
}
.hero-media {
    display : block;
    width   : 100%;
    height  : 100%;
}
.hero-video,
.hero-img {
    object-fit : cover;
    display    : block;
    width      : 100%;
    height     : 100%;
}
.hero-title {
    text-transform : uppercase;
    position       : absolute;
    bottom         : 0.5rlh;
    left           : var(--side-spacer);
    right           : var(--side-spacer);
    color          : var(--light);
    mix-blend-mode : difference;
    font           : var(--sans-l);
}
@media (orientation : landscape) { .hero-media-vertical { display : none } }
@media (orientation : portrait) { .hero-media-horizontal { display : none } }/* The Main blocks section */
.blocks {
    display : grid;
    padding : 0.75rlh 0;
}
.block {
    background                 : linear-gradient(to bottom, var(--gradient-top) , var(--gradient-bottom));
    padding-bottom             : 0.5rlh;
    padding-top                : 0.5rlh;
    opacity                    : 0;
    transition-property        : transform, opacity;
    transition-timing-function : ease-out;
    transition-duration        : 500ms;
    transform                  : translateY(0.5rlh);
}
.block.visible {
    opacity   : 1;
    transform : initial;
}
.block[data-spacing-top="double"] { padding-top : 1rlh; }
.block[data-spacing-bottom="double"] { padding-bottom : 1rlh; }
.block a { transition-property: opacity; }
.block a:hover { opacity : .5; }/* Site's Footer and Legal info */
.footer {
    padding               : 0 var(--side-spacer) var(--spacer-1-2);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--grid-gap);
}
.footer-column {
    grid-column    : span 4;
    font           : var(--sans-s);
    display        : flex;
    flex-direction : column;
}
.footer-legal {
    display               : grid;
    grid-column           : 1 / -1;
    grid-template-columns : subgrid;
}
.footer-legal .footer-column {
    font           : var(--sans-xxs);
    letter-spacing : -0.03em;
}
.credits-short {
    display: none;
}
@media (width >= 600px) and (width < 1000px) {
    .footer-column {
        grid-column: span 5;
    }

    .footer-column:nth-child(3) {
        grid-column : span 2;
    }

    .credits-short {
        display: block;
    }
    .credits-long {
        display: none;
    }
}
@media (width < 600px) {
    .footer-column {
        grid-column: 1 / -1;
    }
}
.footer a { transition-property: opacity; }
.footer a:hover { opacity : .5; }/* Silence is golden */
.block-text {
    padding-left          : var(--side-spacer);
    padding-right         : var(--side-spacer);
    display               : grid;
    grid-template-columns : var(--grid-template-columns);
    gap                   : var(--grid-gap);
}
.block-text-title {
    grid-column : 1/-1;
}
.block-text-title span {
    font-variant   : super;
    display        : inline-block;
    white-space    : pre;
    font-size      : 0.75em;
    margin-left    : 0.25em;
    vertical-align : top;
}
.block-text[data-style="sans"] .block-text-content {
    grid-column : 2 / -2;
    font        : var(--sans);
    text-wrap: balance;
}
.block-text[data-style="serif"] .block-text-content {
    grid-column    : 1 / -1;
    font           : var(--serif);
    text-wrap      : balance;
    letter-spacing : -0.04em;
}
.block-text-title {
    font : var(--sans-s);
}
@media (width < 800px) {
    .block-text[data-style="sans"] .block-text-content {
        grid-column : 2 / -1;
    }
}
#default .block-text[data-style="sans"] .block-text-content {
    font : var(--sans-s);
}/* Silence is golden */
.block-pictures {
    display               : grid;
    grid-template-columns : 18fr 16fr 19fr;
    gap                   : var(--grid-gap);
}
#home .block-pictures {
    grid-template-columns : 7.00fr 10.00fr 9.00fr;
}/* Services Block */
.block-services {
    padding-left          : var(--side-spacer);
    padding-right         : var(--side-spacer);
    display               : grid;
    grid-template-columns : 1fr 1fr;
    gap                   : var(--grid-gap);
    align-items           : baseline;
}
.block-services-title {
    font           : var(--serif);
    text-wrap      : balance;
    letter-spacing : -0.04em;
}
@media (width < 1000px) {
    .block-services-content p:not(:last-child) {
        margin-bottom : 0.25em;
    }
}/* Silence is golden */
.block-video-content {
    width : 100%;
}
@media (orientation : landscape) { .block-video-content-vertical { display : none } }
@media (orientation : portrait) { .block-video-content-horizontal { display : none } }/* Silence is golden */
.block-profile {
    padding-left          : var(--side-spacer);
    padding-right         : var(--side-spacer);
    display               : grid;
    grid-template-columns : repeat(12,1fr);
    gap                   : var(--grid-gap);
    grid-template-areas   : ". picture text .";
}
.block-grid-spacer {
    aspect-ratio : 1;
    grid-column  : 1;
    grid-row     : 1;
}
.block-profile-figure {
    grid-column: 2 / span 5;
}
.block-profile-image {
    width : 90%;
}
.block-profile-content {
    grid-column : 7 / span 5;
    font        : var(--sans-s);
    align-self  : center;
}
@media (width < 700px) {
    .block-profile-figure {
        grid-column: 3 / -1;
    }

    .block-profile-image {
        width : 100%;
    }

    .block-profile-content {
        grid-column : 1 / -2;
        align-self  : start;
    }

    .block-profile {
        gap : 1rlh 0.25rlh;
    }
}/* Silence is golden */
.block-logos {
    min-width : 100%;
    overflow  : hidden;
    display   : flex;
}
.block-logos-container {
    display: flex;
}
.block-logos-logo-container {
    aspect-ratio: 1;
    width : 4rlh;
}
.block-logos-logo {
    display         : block;
    width           : 100%;
    height          : 100%;
    object-fit      : contain;
    object-position : center;
    animation       : marquee var(--speed) linear infinite;
}
@keyframes marquee {
    from {
        transform : translateX(0);
    }
    to {
        transform : translateX(var(--transform));
    }
}/* Silence is golden */
.block-projects {
    padding-left  : var(--side-spacer);
    padding-right : var(--side-spacer);
}
.projects-filters {
    display               : grid;
    grid-template-columns : 1fr;
    gap                   : var(--grid-gap);
    font                  : var(--sans-xs);
    margin-bottom         : var(--spacer-1-1);
}
@media (width > 750px) {
    .projects-filters {
        grid-template-columns : 1fr 1fr;
    }
}
.project-filters-buttons {
    display: flex;
    flex-wrap: wrap;
}
.projects-filters-title {
    font-weight   : 500;
    margin-bottom : 1em;
}
.project-filters-button {
    display: flex;
}
.projects-filter {
    opacity : .5;
    border  : none;
    cursor  : pointer;
}
.projects-filter:hover {
    opacity : .75;
}
.projects-filter.selected {
    opacity : 1;
}
.project-filters-button:not(:last-child)::after {
    content : " / ";
    white-space: pre;
    opacity: 0.5;
}
.project {
    padding-bottom : 0.25rlh;
}
.project.hidden {
    display: none;
}
.project-picture {
    position : relative;
}
.project-caption {
    position        : absolute;
    inset           : 0 0 auto 0;
    padding         : var(--spacer-1-2);
    background      : rgba(255,255,255,0.75);
    backdrop-filter : blur(10px);
}
.project-categories {
    display   : flex;
    flex-wrap : wrap;
    gap       : var(--spacer-1-4);
}
.project-category {
    font           : var(--sans-xs);
    background     : var(--light);
    padding        : var(--spacer-1-8) var(--spacer-1-4);
    border-radius  : 9999px;
    letter-spacing : -0.01em;
    cursor         : pointer;
}
.project-title {
    margin : var(--spacer-1-4) 0;
    font-weight: 500;
}
.project-service {
    font           : var(--sans-xs);
    letter-spacing : -0.01em;
}/* Silence is golden */
.block-grid {
    display               : grid;
    gap                   : 0.25rlh;
    grid-auto-flow        : dense;
    grid-template-columns : 100fr 55fr 190fr 350fr 105fr 100fr;
    grid-template-rows    : 315fr 200fr 170fr 190fr 310fr 160fr;
    align-items: start;
    grid-template-areas   : "a a a b b b"
                            "a a a c c ."
                            ". d d c c ."
                            ". . e c c ."
                            "f f f f g g"
                            "f f f f . .";

}
.block-grid-img {
    object-fit      : cover;
    object-position : center center;
    align-self      : stretch;
}
.block-grid-img-a {
    grid-area : a;
}
.block-grid-img-b {
    grid-area : b;
}
.block-grid-img-c {
    grid-area : c;
}
.block-grid-img-d {
    grid-area : d;
}
.block-grid-img-e {
    grid-area    : e;
    aspect-ratio : 1;
}
.block-grid-img-f {
    grid-area : f;
}
.block-grid-img-g {
    grid-area : g;
}/* Silence is golden */
.block-line-hr {
    border     : none;
    height     : 1px;
    background : #A5A5A5;
}/* Reusable Components *//* Nothing to see here */
.editor p:not(:last-child) {
    margin-bottom : 1em;
}/* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}