/* 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        : 200ms;
    transition-property        : none;
    transition-timing-function : ease-out;
}
}
@layer configuration {

@font-face {
    font-family  : 'HNLT';
    src          : url('fonts/HelveticaNeueLTStd-Bd.woff2') format('woff2');
    font-weight  : 700;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'HNLT';
    src          : url('fonts/HelveticaNeueLTStd-Roman.woff2') format('woff2');
    font-weight  : normal;
    font-style   : normal;
    font-display : swap;
}

@font-face {
    font-family  : 'HNLT';
    src          : url('fonts/HelveticaNeueLTStd-Blk.woff2') format('woff2');
    font-weight  : 900;
    font-style   : normal;
    font-display : swap;
}

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

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



:root {
    
    /* Colors */
    --background : hsl(0,0%,100%);
    --text       : #0d0e3b;
    --light      : #2B2D69;
    --dark       : #2B2D69;
    --accent     : #2B2D69;

    /* Font Settings */
    --font-family : HNLT, Helvetica, Arial, sans-serif;
    --font-size   : 14px;
    --font-height : 22px;
    --font-weight : 400;

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

    /* Font Sizes */
    --font-small  : 300 clamp(13px, 0.58vi + 10.69px, 28px)/1.2 var(--font-family);
    --font-main   : 300 clamp(14px, 0.63vi + 11.5px, 24px)/1.2 var(--font-family);
    --font-medium : 500 clamp(21px, 0.69vi + 18.25px, 32px)/1 var(--font-family);
    --font-large  : 700 clamp(28px, 1.25vi + 23px, 48px)/1 var(--font-family);

    --font-small  : 400 15px/22px var(--font-family);
    --font-main   : 400 18px/24px var(--font-family);
    --font-medium : 500 18px/24px var(--font-family);
    --font-large  : 700 26px/32px var(--font-family);

    --font-about : 500 clamp(20px, 0.97vi + 16.13px, 50px) / 1.2 var(--font-family);

    --font-product-title    : 900 clamp(30px, 1.29vi + 24.84px, 70px) / 1.2 var(--font-family);
    --font-product-subtitle : 400 clamp(30px, 1.29vi + 24.84px, 70px) / 1.2 var(--font-family);
    --font-product-text     : 500 clamp(16px, 0.77vi + 12.9px, 40px) / 1.2 var(--font-family);
    --font-product-specs    : 500 clamp(14px, 0.68vi + 11.29px, 35px) / 1.2 var(--font-family);


    --font-info : 500 clamp(16px, 0.77vi + 12.9px, 40px) / 1.2 var(--font-family);
    --font-plus : 500 clamp(14px, 0.68vi + 11.29px, 35px) / 1.2 var(--font-family);

    --main-navigation : 500 clamp(12px, 0.56vi + 10.31px, 30px) / 1.2 var(--font-family);
    --text-big        : 500 clamp(20px, 0.65vi + 17.42px, 40px) / 1.2 var(--font-family);
    --text-small      : 500 clamp(15px, 0.43vi + 14.98px, 30px) / 1.2 var(--font-family);
    --title           : 500 clamp(30px, 0.86vi + 29.97px, 60px) / 1.2 var(--font-family);
    --text-verysmall  : 500 clamp(12px, 0.42vi + 10.32px, 25px) / 1.2 var(--font-family);

    font-size : calc(clamp(20px, 0.65vi + 17.42px, 40px) * 1.2);

}

html,body {
    scroll-behavior: smooth;
}

body {
    font-size   : var(--font-size);
    line-height : var(--font-height);
}

::selection {
    background : var(--accent);
    color : white;
}
}/* Global Settings *//* Content Goes Here *//* UI Elements *//* Nothing to see here */
.header {
    position        : fixed;
    inset           : 0 0 auto 0;
    padding         : 0;
    z-index         : 10000;
    color           : black;
    display         : flex;
    justify-content : center;
    background      : rgba(255,255,255,0.85);
    backdrop-filter : blur(10px);
    box-shadow      : 0px 25px 30px rgba(0,0,0,0);
    border-bottom   : 1px solid rgba(255,255,255,0.3);
    opacity         : .3;
    transition-property: opacity, box-shadow;
}
.header:hover {
    opacity    : 1;
    box-shadow : 0px 25px 50px rgba(0,0,0,0.1);
}
.header-menu {
    display               : grid;
    grid-template-columns : repeat(5, auto);
    font                  : var(--main-navigation);
    margin                : 0 auto;
}
.header-menu-item {
    text-align : center;
    position   : relative;
    padding    : 0.5rem;
    transform : translateY(0.05em);
    color : var(--accent);
}
.header-menu-item:hover {
    color : black;
}
.header-menu-item:not(:last-child)::after {
    content : "";
    position : absolute;
    inset : 0.5rem 0 0.5rem auto;
    width : 2px;
    background: lightgray;
}/* Opening Section */
.opening {
    width      : 100%;
    height     : 100vh;
    display    : flex;
    overflow   : hidden;
    z-index    : 10000;
    position   : relative;
    background : white;
}
.opening-title {
    aspect-ratio   : 30/11;
    display        : block;
    width          : 25vmax;
    margin         : auto;
    z-index        : 10;
    position       : relative;
    margin         : auto;
    mix-blend-mode : difference;
}
.opening-logo {
    aspect-ratio : 30/11;
    fill : white;
}
.opening-backgrounds {
    position              : absolute;
    inset                 : 0;
    gap                   : 0;
    overflow              : hidden;
    z-index               : 0;
    display               : grid;
    grid-template-columns : 1fr 1fr;
}
.opening-background {
    display    : block;
    height     : 100%;
    object-fit : cover;
}
.opening-background:first-child {
    transform: translateY(2rem);
    opacity : 0;
    animation: slideUp .5s forwards 1;
}
.opening-background:last-child {
    transform: translateY(-2rem);
    opacity : 0;
    animation: slideDown .5s forwards 1;
}/* The Opening Animation */
@keyframes slideUp {
    from { transform: translateY(2rem) }
    to { transform: translateY(0rem); opacity : 1; }
}
@keyframes slideDown {
    from { transform: translateY(-2rem) }
    to { transform: translateY(0rem); opacity : 1; }
}
@media (orientation : portrait) {
    .opening-backgrounds {
        grid-template-columns : 1fr;
        grid-template-rows    : 50% 50%;
    }
}
.opening-link {
    display : block;
    position : absolute;
    bottom : 2rem;
    padding : 0 2rem;
    left : 50%;
    z-index: 9999;
    font : var(--text-small);
    text-transform: uppercase;
    text-align: center;
    transform : translateX(-50%);
    color : white;
    mix-blend-mode: difference;

}
.opening-link::after {
    content : "";
    position : absolute;
    right : 50%;
    top : 100%;
    height : 2rem;
    width : 2px;
    background: linear-gradient(to bottom, white, transparent);
    z-index: 9999;
    transform-origin: bottom center;
    animation : pulse 3s ease-out infinite alternate;
}
.opening-link::before {
    content : "";
    position : absolute;
    right : 0;
    left : 0;
    bottom : 0;
    height : 2px;
    width : 100%;
    background: linear-gradient(to right, transparent, white 25% 75%, transparent);
    z-index: 9999;
    transform-origin: bottom center;
    animation : pulse 3s ease-out infinite alternate;
}
@keyframes pulse {
    from { opacity : 1; }
    to   { opacity : .5; }
}/* About Section */
.about {
    width         : 100%;
    place-content : center;
    padding       : 25vh 10vw 0;
    position      : relative;
    clip-path     : border-box;
    background    : white;
}
.about-content {
    margin    : 0 auto;
    font      : var(--text-big);
    max-width : 25rem;
    color     : var(--accent);
}/* Product Navigation */
.products-navigation {
    width                 : 100%;
    display               : grid;
    grid-template-columns : repeat(19,auto);
    align-items           : center;
    justify-content       : center;
    justify-items         : center;
    padding               : 25vh 1rem 25vh;
    background            : white;
    position              : relative;
    margin-bottom         : 25vh;
}
.products-navigation-title {
    position        : absolute;
    inset           : 0;
    display         : flex;
    justify-content : center;
    align-items     : center;
    text-align      : center;
    z-index         : 9999;
    color           : white;
    font            : var(--title);
    mix-blend-mode  : difference;
    pointer-events  : none;
}
.products-navigation-item {
    grid-row            : 1;
    cursor              : pointer;
    display             : block;
    transition-property : transform, filter;
    width               : 9.5vw;
    transform           : skewY(20deg) rotateY(45deg);
    position            : relative;
    grid-column-start   : var(--start);
    grid-column-end     : var(--end);
}
.products-navigation-image {
    display    : block;
    width      : 100%;
    height     : 100%;
    object-fit : cover;
    transition-property : transform;
}
.products-navigation-item:hover {
    transform : skewY(20deg) rotateY(45deg) translateX(1rem) translateY(0.25rem);
}
.products-navigation:has(.products-navigation-item:hover) .products-navigation-item:not(:hover) {
    filter : grayscale(1);
}/* Mobile Adaptation */
@media (width < 1000px) {
    .products-navigation {
        grid-template-rows    : repeat(15,auto);
        grid-template-columns : 1fr;
        align-items           : center;
        justify-content       : center;
        justify-items         : center;
    }
    .products-navigation-item {
        width             : 90%;
        aspect-ratio      : 2/1;
        transform         : skewX(-5deg) rotateY(35deg) rotateZ(5deg) rotateX(-30deg);
        grid-row-start    : var(--start);
        grid-row-end      : var(--end);
        grid-column-start : 1;
        grid-column-end   : -1;
    }

    .products-navigation-item:hover {
        transform : skewX(-5deg) rotateY(35deg) rotateZ(5deg) rotateX(-25deg);
    }
}/* Product Sections */
.products {
    position   : relative;
    background : white;
}
.product {
    width                 : 100%;
    display               : grid;
    grid-template-columns : 1fr;
    position              : relative;
    grid-template-areas   : "picture" "text";
}/* The Product Image */
.product-picture {
    grid-area          : picture;
    place-content      : center;
    position           : relative;
    height             : 100vh;
    perspective-origin : center;
    perspective        : 2000px;
    z-index            : 2;
    background-image   : var(--background);
    background-size    : 100% auto;
    overflow           : hidden;
}
.product-titles {
    position        : absolute;
    top             : 50%;
    left            : 0;
    right           : 0;
    z-index         : 15;
    text-align      : center;
    display         : flex;
    gap             : 1rem;
    font-size       : 60px;
    justify-content : center;
    pointer-events  : none;
}
@media (width < 1000px) {
    .product-titles {
        flex-direction : column;
        gap : 0;
    }
}/* The Gradient Overlay */
.product-picture::before {
    content    : "";
    position   : absolute;
    inset      : 0;
    z-index    : 1;
    background : linear-gradient(to bottom, transparent, white 50%);
}
.product-image {
    display        : block;
    aspect-ratio   : 1/2;
    max-height     : 65vh;
    width          : auto;
    height         : auto;
    z-index        : 10;
    position       : relative;
    box-shadow     : 0px 0px 50px 10px rgba(0,0,0,0.15);
    margin         : auto;
    pointer-events : none;
}
.is-moving .product-image { transform : rotateX(var(--y)) rotateY(var(--x)) scale(1.02); }
.is-moving .product-titles { transform : rotateX(var(--y)) rotateY(var(--x)) translateZ(1rem) scale(1.02); }/* Info Section */
.product-info {
    z-index : 2;
    padding : 0 1rem 25vh;
    margin  : 0 auto;
}
.product-texts {
    align-self: end;
}
.product-dimentions {
    font : var(--text-small);
    margin-top : 2em;
}
.product-dimentions dt {
    color       : var(--accent);
    font-weight : 700;
}
.product-title {
    font        : var(--title);
    color       : var(--accent);
    font-weight : 900;
}
.product-subtitle {
    font        : var(--title);
    font-weight : 400;
}
.product-text {
    font : var(--text-big);
    max-width : 25rem;
}/* Dark Slabs */
.product-dark {

    --accent : gray;

    background : #14181a;
    color      : white;
}
.product-dark .product-picture::before {
    background : linear-gradient(to bottom, transparent, #14181a 50%);
}/* Info Section */
.info {
    width         : 100%;
    place-content : center;
    padding       : 50vh 1rem 25vh;
    position      : relative;
    clip-path     : border-box;
    background    : white;
}
.info-content,
.info-plusses {
    margin    : 0 auto;
    font      : var(--text-big);
    max-width : 25rem;
    color     : var(--accent);
}
.info-plus-title {
    font          : var(--text-big);
    font-weight   : 700;
    margin-bottom : 1rem;
    margin-top : 12.5vh;
}
.info-plus-list {
    list-style : none;
    display : grid;
    grid-template-columns: 1fr;
    gap : 0.5rem 2rem;
}
@media (width > 700px) {
    .info-plus-list {
        grid-template-columns: 1fr 1fr;
    }
}
.info-plus-item {
    display               : grid;
    grid-template-columns : 2rem 1fr;
    gap                   : 0.5rem;
    font                  : var(--text-verysmall);
    align-items           : center;
}
.info-plus-item::before {
    content : "";
    display : block;
    aspect-ratio: 1;
    place-content: center;
    text-align: center;
    background: var(--icon);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
}
@media (width < 600px) {
    .info-plusses {
        grid-template-columns : 1fr;
        max-width             : 30rem;
        width: 100%;
    }
}/* Certifications */
.info-certifications {
    margin    : 12.5vh auto 0;
    font      : var(--text-big);
    max-width : 25rem;
    color     : var(--accent);
}
.info-certifications-title {
    font-weight   : 700;
    margin-bottom : 1rem;
}
.info-certification {
    display               : grid;
    grid-template-columns : 3rem 1fr;
    align-items           : center;
    gap                   : 1rem;
}
.info-certification-caption {
    font : var(--text-small);
    text-wrap: balance;
}/* Gallery Section */
.gallery {
    position : relative;
}
.gallery-item {
    position: sticky;
    top     : 0;
    display : flex;
    padding : max(3rem,5vmin) max(1rem,5vmin) max(1rem,5vmin);
    background : var(--accent);
}
.gallery-item:not(:first-child) {
    box-shadow : 0px -25px 30px rgba(0,0,0,0.05)
}
.gallery-image {
    margin : auto;
    max-width: 100%;
    max-height: 100%;
    width: auto;
    object-fit : contain;
}
.gallery-item:first-child {
    background : linear-gradient(to top, var(--accent) , white);
}
.gallery-item:last-child {
    background : linear-gradient(to bottom, var(--accent) , white);
}/* The transition section */
.ending-transition {
    display         : grid;
    border          : none;
    aspect-ratio    : 1/2;
    background-image: var(--background);
    background-size : cover;
    position        : relative;
    padding         : 1rem;
}
.ending-transition::after {
    content : "";
    position: absolute;
    inset : 0;
    background: linear-gradient(to bottom, white, transparent , black);
    z-index: 1;
}
.ending-form-container {
    position   : relative;
    z-index    : 2;
    align-self : end;
    max-width: 30rem;
    margin : 0 auto;
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap : 0 1rem;
    align-items: start;
    align-content: start;
    padding-bottom : 15vh;
}
@media (width < 700px) {
    .ending-form-container {
        grid-template-columns: 1fr;
        gap : 1rem;
        padding-bottom : 0;
    }
    .ending-transition {
        aspect-ratio: 1/3;
    }
    .ending-transition::after {
        background: linear-gradient(to bottom, white, transparent , black 70%);
    }
}
.ending-form-title {
    font       : var(--text-big);
    margin-bottom : 1em;
    color : white;
    font-weight: bold;
    grid-column: 1 / -1;
}
.ending-form-text {
    font: var(--text-small);
    color : white;
    width : 100%;
}
.ending-form {
    display: grid;
    width  : 100%;
}
.ending-label {
    font: var(--text-verysmall);
    color: whitesmoke;
    margin-bottom: 0.25em;
}
.ending-label:not(:first-child) {
    margin-top : 1rem;
}
.ending-input {
    appearance: none;
    border    : none;
    font      : var(--text-verysmall);
    color     : white;
    max-width : 100%;
    resize    : vertical;
    background: rgba(255,255,255,0.25);
    box-shadow : 0px 25px 50px rgba(0,0,0,0.1);
    padding    : 0.3rem 0.25rem 0.2rem;
}
.ending-input:focus {
    background: rgba(255,255,255,1);
    color : var(--accent);
}
.ending-privacy {
    margin-top : 1rem;
    display: grid;
    grid-template-columns: 1rem 1fr;
    gap : 0.5rem;
    align-items: center;
}
#privacy {
    width : 1rem;
    height : 1rem;
    aspect-ratio: 1;
    appearance: none;
    background: rgba(255,255,255,0.25);
    box-shadow : 0px 25px 50px rgba(0,0,0,0.1);
    border : 1px solid rgba(255,255,255,0.4);
    cursor : pointer;
}
#privacy:hover {
     border : 1px solid rgba(255,255,255,0.75);
}
#privacy:checked {
    border : 1px solid var(--accent);
    background: white;
}
.ending-privacy label {
    font: var(--text-verysmall);
    color: whitesmoke;
    margin-top : 0.1rem;
}
.ending-privacy label a {
    font-weight: bold;
}
input[type="submit"] {
    margin-top : 1rem;
    appearance: none;
    border    : none;
    font      : var(--text-verysmall);
    color     : var(--accent);
    max-width : 100%;
    resize    : vertical;
    background: white;
    box-shadow : 0px 25px 50px rgba(0,0,0,0.1);
    padding    : 0.3rem 0.25rem 0.2rem;
    cursor : pointer;
}
input[type="submit"]:hover {
    background : var(--accent);
    color : white;
}/* Closing Section */
.ending {
    width      : 100%;
    position   : relative;
    background : black;
    border-top : 1px solid var(--accent);
}
.ending-content {
    display               : grid;
    grid-template-columns : auto auto auto;
    padding               : 1rem;
    gap                   : 1rem;
}
@media (width < 900px) {
    .ending-content {
        grid-template-columns : 1fr;
    }
}
.ending-content div {
    display: grid;
    justify-content: start;
}
.ending h3 {
    font           : var(--text-verysmall);
    text-transform : uppercase;
    opacity        : .75;
    color          : whitesmoke;
    margin-bottom : 0.25em;
}
.ending a {
    font : var(--text-small);
    color : white;
}
.ending a:hover {
    text-decoration: underline;
}/* Nothing to see here *//* Reusable Components *//* Nothing to see here */
.editor p:not(:first-child) {
    margin-top : 1em;
}
.editor strong {
    font-weight : 700;
}/* Default Image Styles */
img {
    display : block;
    width   : 100%;
    height  : auto;
}