.fact {
    position: relative;
    aspect-ratio: 1/1;
    padding-left: 1rem;
    display: flex;
    flex-flow: column;
    gap: 0.5rem;
    padding-top: 2rem;
}

.fact > div, 
.fact > p {
    opacity: 0;
    transform: translateY(0.1rem);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.fact.visible > div,
.fact.visible > p {
    opacity: 1;
    transform: translateY(0);
}

.fact.visible .med-text { transition-delay: calc(inherit + 0.1s); }
.fact.visible p { transition-delay: calc(inherit + 0.2s); }

.fact.visible:nth-child(1) > * { transition-delay: 0.2s; }
.fact.visible:nth-child(2) > * { transition-delay: 0.4s; }
.fact.visible:nth-child(3) > * { transition-delay: 0.6s; }
.fact.visible:nth-child(4) > * { transition-delay: 0.8s; }

.fact::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: linear-gradient(
        to bottom, 
        #060606 0%,
        #fff 20%,
        #fff 80%,
        #060606 100%
    );
    pointer-events: none;
}

.fact:last-child::after {
  display: none;
}

.icon {
    width: 50px;
    height: 50px;
    margin-bottom: 0.5rem;
    z-index: 2;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.icon.weight {
    background-image: url(../images/icons/weight.webp);
}

.icon.weight.dark {
    background-image: url(../images/icons/weight-dark.webp);
}

.icon.cycle {
    background-image: url(../images/icons/cycle.webp);
}

.icon.steel {
    background-image: url(../images/icons/steel.webp);
}        

.icon.bend {
    background-image: url(../images/icons/bend.webp);
}

.icon.ruler {
    background-image: url(../images/icons/ruler-dark.webp);
}

.icon.boat {
    background-image: url(../images/icons/boat-dark.webp);
}

.icon.aesthetic {
    background-image: url(../images/icons/aesthetic-dark.webp);
}

.icon.tool {
    background-image: url(../images/icons/tool-dark.webp);
}

.icon.builder {
    background-image: url(../images/icons/builder-dark.webp);
}

.icon.roller {
    background-image: url(../images/icons/roller-dark.webp);
}

.icon.push {
    background-image: url(../images/icons/push.webp);
}

.icon.push.dark {
    background-image: url(../images/icons/push-dark.webp);
}

.icon.material {
    background-image: url(../images/icons/material.webp);
}

.icon.material.dark {
    background-image: url(../images/icons/material-dark.webp);
}

.icon.versatile {
    background-image: url(../images/icons/versatile.webp);
}

.icon.building {
    background-image: url(../images/icons/building.webp);
}

.icon.top-hung.dark {
    background-image: url(../images/icons/top-hung-dark.webp);
}

.icon.top-hung {
    background-image: url(../images/icons/top-hung.webp);
}

.icon.top-hung {
    background-image: url(../images/icons/top-hung.webp);
}

.icon.hidden {
    background-image: url(../images/icons/hidden.webp);
}

.icon.corner {
    background-image: url(../images/icons/corner.webp);
}

.icon.fold {
    background-image: url(../images/icons/fold.webp);
}

.icon.fold.dark {
    background-image: url(../images/icons/fold-dark.webp);
}

.icon.weather {
    background-image: url(../images/icons/weather.webp);
}

.icon.durable {
    background-image: url(../images/icons/durable.webp);
}
.icon.open.dark {
    background-image: url(../images/icons/open-dark.webp);
}
.icon.open {
    background-image: url(../images/icons/open.webp);
}

.icon.space.dark {
    background-image: url(../images/icons/space-dark.webp);
}
.icon.space {
    background-image: url(../images/icons/space.webp);
}

.icon.transition.dark {
    background-image: url(../images/icons/transition-dark.webp);
}
.icon.transition {
    background-image: url(../images/icons/transition.webp);
}

.icon.light.dark {
    background-image: url(../images/icons/light-dark.webp);
}
.icon.light {
    background-image: url(../images/icons/light.webp);
}

.icon.furniture.dark {
    background-image: url(../images/icons/furniture-dark.webp);
}
.icon.furniture {
    background-image: url(../images/icons/furniture.webp);
}

.icon.lock.dark {
    background-image: url(../images/icons/lock-dark.webp);
}
.icon.lock {
    background-image: url(../images/icons/lock.webp);
}

.icon.globe.dark {
    background-image: url(../images/icons/globe-dark.webp);
}
.icon.globe {
    background-image: url(../images/icons/globe.webp);
}

.icon.panoramic.dark {
    background-image: url(../images/icons/panoramic-dark.webp);
}
.icon.panoramic {
    background-image: url(../images/icons/panoramic.webp);
}
.icon.key {
    background-image: url(../images/icons/key.webp);
}
.icon.key.dark {
    background-image: url(../images/icons/key-dark.webp);
}
.icon.target {
    background-image: url(../images/icons/target.webp);
}
.icon.room {
    background-image: url(../images/icons/room.webp);
}

.point {
    display: flex;
    flex-flow: row;
    gap: 0.75rem;
    align-items: flex-start;
}

.point p {
    margin: 0;
    opacity: 0;
    transform: translateY(0.1rem);
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.point.visible p {
    opacity: 1;
    transform: translateY(0);
}

.point.visible:nth-child(1) p { transition-delay: 0.1s; }
.point.visible:nth-child(2) p { transition-delay: 0.2s; }
.point.visible:nth-child(3) p { transition-delay: 0.3s; }
.point.visible:nth-child(4) p { transition-delay: 0.4s; }

.point.col {
    flex-flow: column;
    align-items: center;
    text-align: center;
    justify-content: center;
}

.box {
    border: 1px solid #dadada;
    padding: 1rem;
    background-color: #eeeeee25;
    display: flex;
    aspect-ratio: 1/1;
    flex-flow: column;
    gap: 0.5rem;
}

.box.unset {
    aspect-ratio: unset;
}

.box.padding-2 {
    padding: 2rem;
}

.box .icon, 
.box h4, 
.box .para {
    opacity: 0;
    transform: translateY(0.1rem);
    transition: 
        opacity 0.8s ease-out, 
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.box.visible .icon,
.box.visible h4,
.box.visible .para {
    opacity: 1;
    transform: translateY(0);
}

.box:nth-child(1) { --delay: 0.1s; }
.box:nth-child(2) { --delay: 0.2s; }
.box:nth-child(3) { --delay: 0.3s; }
.box:nth-child(4) { --delay: 0.4s; }
.box:nth-child(5) { --delay: 0.5s; }
.box:nth-child(6) { --delay: 0.6s; }

.box.visible .icon { 
    transition-delay: var(--delay); 
}
.box.visible h4 { 
    transition-delay: calc(var(--delay) + 0.1s); 
}
.box.visible .para { 
    transition-delay: calc(var(--delay) + 0.2s); 
}

.box.rounded {
    border-radius: 2rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.box.white-bg {
    background-color: #ffffff;
}

.box.rounded.one {
    background-image: url(../images/hero/display1.webp);
}

.box.rounded.two {
    background-image: url(../images/hero/display2.webp);
}

.product {
    aspect-ratio: 4/3;
    background-size: 50%;
    background-position: center;
    background-repeat: no-repeat;
    border-top-right-radius: 6rem;
    background-color: #f0f0f080;
    border: 1px solid #f0f0f0;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    box-sizing: border-box;
    opacity: 0;
    transform: translateY(1.5rem);
    transition: 
        opacity 0.8s ease-out, 
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1),
        background-size 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}

.product.visible {
    opacity: 1;
    transform: translateY(0);
    background-size: 55%;
}

.product:nth-child(1) { --prod-delay: 0.1s; }
.product:nth-child(2) { --prod-delay: 0.2s; }
.product:nth-child(3) { --prod-delay: 0.3s; }
.product:nth-child(4) { --prod-delay: 0.4s; }
.product:nth-child(5) { --prod-delay: 0.5s; } /* this is last */
.product:nth-child(6) { --prod-delay: 0.6s; }

.product.visible {
    transition-delay: var(--prod-delay);
}

.product.visible:hover {
    background-size: 60%;
    background-color: #f0f0f0c0;
    cursor: pointer;
}

.product.empty:hover {
    background-color: transparent;
    cursor: pointer;
}

.product.top-pivot {
    background-image: url(../images/products/3904-072.webp);
}

.product.bottom-pivot {
    background-image: url(../images/products/3908-072.webp);
}

.product.twin-point {
    background-image: url(../images/products/5223.webp);
}

.product.centreline-hinge {
    background-image: url(../images/products/3910-073.webp);
}

.product.end-carrier {
    background-image: url(../images/products/3914-078.webp);
}

.product.empty {
    background-color: transparent;
    width: 100%;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    border: none;
}

.base.dark {
    background-color: #41414152;
    padding: 1rem 1rem 1rem 2rem;
    min-width: 8rem;
    text-align: right;
    width: fit-content;
}

.dark-grey {
    background-color: #535353;
    width: 100%;
    display: flex;
    align-self: center;
    padding: 4rem;
    padding-right: 2rem;
    justify-self: flex-end;
    text-align: right;
    justify-content: flex-end;
}

.right.dom-grid .sect-1,
.right.dom-grid .sect-2,
.left.dom-grid .sect-1,
.left.dom-grid .sect-2 {
    padding: 4rem;
    box-sizing: border-box;
    background-color: #9c9c9c;
    display: flex;
    flex-flow: column;
    gap: 1rem;
}

.left.dom-grid .sect-1,
.left.dom-grid .sect-2 {
    align-items: flex-end;
}

.drawings {
    border: 1px solid #d3d3d3;
    border-radius: 2rem;
    display: flex;
    flex-flow: column;
    gap: 2rem;
    padding: 2rem;
    box-sizing: border-box;
}

.view {
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: #d3d3d3;
    border-radius: 1rem;
    aspect-ratio: 16/9;
    padding: 2rem;
}

.view.aluminium {
    background-image: url(../images/drawings/alu.webp);
}

.view.timber {
    background-image: url(../images/drawings/timber.webp);
}

.projects .card {
    background-color: transparent;
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid #d3d3d357;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    overflow: hidden;
}

.projects .card.media {
    padding: 0;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    overflow: hidden;
    max-height: 500px;
}

.projects .card.media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.projects .card ul {
    padding-inline-start: 20px;
    gap: 1rem;
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
}

.view-card {
    min-height: 500px;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    position: relative;
    padding: 4rem;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.view-card > * {
    position: relative;
    z-index: 1;
}

.view-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(0deg, rgba(43, 43, 43, 0.637), rgba(65, 65, 65, 0.452));
    pointer-events: none;
}

.view-card.titan-sliders {
    background-image: url(../images/systems/titan-sliders.webp);
}

.view-card.titan-bifolds {
    background-image: url(../images/systems/titan-bifolds.webp);
}

.motion .content,
.form .content {
    padding: 4rem;
    box-sizing: border-box;
    height: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
}

.content.grey {
    background-color: #535353c9;
}

.content.dark-grey {
    background-color: #414141ce;
}

.product-cta {
    display: flex;
    flex-flow: column;
    position: relative;
    background-color: #d3d3d357;
    border-radius: 4rem;
    min-height: 450px;
    align-items: center;
    justify-content: center;
    box-shadow: 0px 8px 8px rgba(0, 0, 0, 0.25);
    color: #fff;    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 1;
}

.product-cta.t100 {
    background-image: url(../images/systems/about-titan-cta.webp);
}

.product-cta.a350{
    background-image: url(../images/systems/about-titan-cta.webp);
}

.product-cta.a100{
    background-image: url(../images/systems/about-titan-cta.webp);
}

.product-cta.design-inspo{
    background-image: url(../images/systems/design-inspo-cta.webp);
}

.product-cta.more-bifolds{
    background-image: url(../images/systems/more-bifolds.webp);
}

.product-cta.more-sliders{
    background-image: url(../images/systems/more-sliders.webp);
}

.product-cta > * {
    position: relative;
    z-index: 2;
}

.product-cta::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(8, 8, 8, 0.4);
    border-radius: 4rem;
    pointer-events: none;
    z-index: 1;
}

@media screen and (max-width: 1500px) {
    .dark-grey {
        justify-content: flex-end;
        width: 100%;
    }
    section.grey {
        justify-content: start;
        width: 100%;
        height: auto;
        padding: 2rem 0;
    }
    section.grey .dual-grid {
        padding: 2rem 4rem;
        width: auto;
    }
}

@media screen and (max-width: 1365px) {
  .fact {
    height: fit-content;
    aspect-ratio: unset;
    padding-bottom: 2rem;
  }
  .fact::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, #060606 0%, #fff 20%, #fff 80%, #060606 100%);
    pointer-events: none;
    }
    .fact:last-child::after {
    display: flex;
    }
}

@media screen and (max-width: 800px) {
    .drawings {
        gap: 1rem;
        padding: 0;
        border: none;
    }
}

@media screen and (max-width: 700px) {
    .info .dual-grid .square {
        order: -1;
    }
    .projects .card.media {
        max-height: 400px;
    }
    .fact::after {
    background: none;
    }
    .right.dom-grid .sect-1 {
    display: none;
    }
    .left.dom-grid .sect-2 {
        display: none;
    }
    .right.dom-grid .sect-2,
    .left.dom-grid .sect-1 {
        padding: 2.5rem;
        text-align: center;
        align-items: center;
    }
    section.grey .dual-grid {
        padding: 2rem;
        width: auto;
    }
    .product-cta {
        padding: 2rem;
        border-radius: 2rem;
    }
    .product-cta::before {
        border-radius: 2rem;
    }
    .motion .content,
    .form .content {
        padding: 4rem 2rem;
    }
}