/* @font-face {
    font-family: JupiterMission;
    src: url(../fonts/JupiterMissionItalic.woff);
    font-style: italic;
}
@font-face {
    font-family: JupiterMission;
    src: url(../fonts/JupiterMissionRegular.woff);
} */
@font-face {
    font-family: leddot;
    src: url(../fonts/LED-Dot-Matrix.ttf);
}
@font-face {
    font-family: saga;
    src: url(../fonts/SEGA.TTF);
    font-weight: 400;
}
*{
    margin: 0;
    padding: 0;
    outline: 0;
    box-sizing: border-box;
}
body{
    background-color: #000000;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #ffffff;
    cursor: url('../image/cursor.png') 1 1, auto;
}
a{
    cursor: url('../image/cursor.png') 1 1, auto;
}
.preloader{
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: #000000;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 100000;
}
.preloader.opacity{
    z-index: 100000;
}
/* .preloader.hide{
    display: none;
}
.preloader .light{
    position: relative;
}
.preloader .light::before{
    content: '';
    width: 100px;
    height: 100px;
    position: absolute;
    transform: scale(2);
    border-radius: 100px;
    background: radial-gradient(#ffffff, #ffffff4c,#ffffff00, #ffffff00);
    animation: light 2s infinite;
    opacity: 0;
}
@keyframes light {
    0%{opacity: 0;}
    60%{opacity: 1;}
    100%{opacity: 0;}
} 
.preloader img{
    width: 100px;
    position: relative;
}
*/
.preloader svg{
    width: 200px;
}
.preloader .preloader-b{
    opacity: 0;
    animation: opacityflicker 3s linear infinite;
    /* was 1s: the B and D sit at opacity 0 until this fires, so the full "BAD"
       only read for the last ~1s of the 2s splash. */
    animation-delay: .3s;
}
.preloader .preloader-d{
    opacity: 0;
    animation: opacityflicker 3s linear infinite;
    /* was 1s: the B and D sit at opacity 0 until this fires, so the full "BAD"
       only read for the last ~1s of the 2s splash. */
    animation-delay: .3s;
}

@keyframes opacityflicker {
	0%, 19%, 22%, 62%, 64%, 70%, 100% {
		opacity: 0.99;
	}
	20%, 21%, 63%, 65%, 69.9% {
		opacity: 0.4;
		text-shadow: none;
	}
}


.header.sticky{
    height: 110vh;
    position: relative;
    line-height: 0;
    z-index: 99995;
    background-color: #000;
}
/* Masks page content scrolling up behind the pinned logo / menu so nothing overlaps them */
body::before{
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 118px;
    background: linear-gradient(to bottom, #000 0, #000 84px, rgba(0,0,0,0) 118px);
    z-index: 99990;
    pointer-events: none;
}
.header.sticky .logo-wrapper{
    padding-top: calc(100vh - 304px);
    display: flex;
    justify-content: end;
    height: 100%;
    align-items: flex-start;
}
.header.sticky .logo{
    padding: 20px 40px;
    width: 670px;
    position: sticky;
    top: 0;
    color: #fff;
    display: block;
}
.header.sticky img{
    display: inline-block;
    width: 100%;
}
.header.sticky svg{
    width: 100%;
    /* filter: drop-shadow(0 0 10px #fff); */
    animation: flicker 3s linear infinite;
}
.header.sticky .logo.moved svg{
    animation: none;
}
.header.sticky .mobile-menu{
    display: none;
}

body{
    overflow-x: hidden;
}
.header.show-toggler,
.header:not(.sticky){
    padding: 20px 40px;
    display: flex;
    justify-content: space-between;
}
.header:not(.sticky) .logo{
    display: block;
    width: 140px;
    position: fixed;
    top: 18px;
    left: 40px;
    z-index: 99998;
}
/* reserve the space the now-fixed logo used to occupy */
.header:not(.sticky){
    min-height: 92px;
}
/* Homepage: once the intro logo animation finishes, pin it so the name stays visible */
.header.sticky.show-menu-toggler .logo{
    position: fixed;
    top: 0;
    z-index: 99998;
}
.header .mobile-menu{
    position: fixed;
    top: 25px;
    right: 40px;
    z-index: 99999;
    margin: 0;
}
.header .menu-toggler{
    position: relative;
    cursor: pointer;
    z-index: 99999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-evenly;
    width: 44px;
    height: 44px;
    padding: 0;
    border: none;
    background: none;
}
.header .menu-toggler .bar{
    display: block;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
                opacity 0.3s ease,
                box-shadow 0.3s ease;
    transform-origin: center;
}
.header .menu-toggler .bar:nth-child(1){
    background: #ffce1b;
    box-shadow: 0 0 6px #ffce1b, 0 0 14px rgba(255,206,27,0.6);
}
.header .menu-toggler .bar:nth-child(2){
    background: #ff1d0d;
    box-shadow: 0 0 6px #ff1d0d, 0 0 14px rgba(255,29,13,0.6);
}
.header .menu-toggler .bar:nth-child(3){
    background: #219ae5;
    box-shadow: 0 0 6px #219ae5, 0 0 14px rgba(33,154,229,0.6);
}
/* Hover: glows intensify */
.header .menu-toggler:hover .bar:nth-child(1){
    box-shadow: 0 0 10px #ffce1b, 0 0 24px rgba(255,206,27,0.9);
}
.header .menu-toggler:hover .bar:nth-child(2){
    box-shadow: 0 0 10px #ff1d0d, 0 0 24px rgba(255,29,13,0.9);
}
.header .menu-toggler:hover .bar:nth-child(3){
    box-shadow: 0 0 10px #219ae5, 0 0 24px rgba(33,154,229,0.9);
}
/* Open: top + bottom cross into X, middle fades */
.header .menu-toggler.toggle .bar:nth-child(1){
    transform: translateY(11px) rotate(45deg);
}
.header .menu-toggler.toggle .bar:nth-child(2){
    opacity: 0;
    transform: scaleX(0);
}
.header .menu-toggler.toggle .bar:nth-child(3){
    transform: translateY(-11px) rotate(-45deg);
}
.header .mobile-menu .menu{
    position: absolute;
    right: 0;
    background: #000000;
    margin-top: -65px;
    margin-right: -20px;
    padding: 85px 30px 30px;
    /* transform: translate(100%); */
    opacity: 0;
    pointer-events: none;
    transition: .3s;
    max-width: 100vw;
}
.header .mobile-menu .menu.show-menu{
    transform: translate(0);
    z-index: 9999;
    opacity: 1;
    pointer-events: all;
}
.header .mobile-menu .menu .links a{
    color: #fff;
    font-size: 30px;
    font-family: leddot;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    transition: .3s;
    white-space: nowrap;
    line-height: 1;
}
.header .mobile-menu .menu .link:nth-child(4n+1) a:hover { 
    background-color: #ffce1b; 
}   
.header .mobile-menu .menu .link:nth-child(4n+2) a:hover { 
    background-color: #ff1d0d; 
}   
.header .mobile-menu .menu .link:nth-child(4n+3) a:hover { 
    background-color: #219ae5; 
}  
.header .mobile-menu .menu .link:nth-child(4n+4) a:hover { 
    background-color: #7d67c2; 
}

.header.show-menu-toggler{
    display: flex;
    justify-content: space-between;
}
.header.show-menu-toggler .mobile-menu{
    display: block;
}
.header.show-menu-toggler .logo-wrapper{
    width: 100%;
    margin-right: -80px;
}

@keyframes flicker {
    0%, 19%, 22%, 62%, 64%, 70%, 100% {
        opacity: 0.99;
        filter: 
        /* drop-shadow(-1px -1px 0 rgba(255,255,255, 0.4)) */
        /* drop-shadow(1px -1px 0 rgba(255,255,255, 0.4)) */
        /* drop-shadow(-1px 1px 0 rgba(255,255,255, 0.4)) */
        /* drop-shadow(1px 1px 0 rgba(255,255,255, 0.4)) */
        drop-shadow(0 -2px 5px)
        /* drop-shadow(0 0 2px) */
        /* drop-shadow(0 0 5px #999) */
        drop-shadow(0 0 10px #e9e9e9)
        drop-shadow(0 2px 3px #000)
        ;
	}
	20%, 21%, 63%, 65%, 69.9% {
        opacity: 0.4;
		text-shadow: none;
	}
}

@media screen and (max-width:767px) {
    .header.sticky .logo-wrapper{
        padding-top: calc(100vh - 320px);
    }
    .header.sticky .logo{
        width: 320px;
        padding: 20px 25px 20px;
    }
    .header:not(.sticky){
        padding: 20px 25px;
        /* width: 190px; */
    }
    .header:not(.sticky) .logo{
        width: 140px;
    }
    .header .mobile-menu{
        top: 20px;
        right: 20px;
    }
    .header .mobile-menu .menu{
        width: 100vw;
    }
}


.about-us{
    padding: 50px 0;
}
.about-us .container{
    padding: 0 40px;
}
.about-us h2{
    color: #fff;
    font-size: 40px;
    margin-bottom: 10px;
    font-family: saga;
    font-weight: 400;
}
.about-us p{
    color: #fff;
    font-size: 40px;
    max-width: 600px;
    font-family: saga;
    font-weight: 400;
}

@media screen and (max-width:767px) {
    .about-us .container{
        padding: 0 25px;
    }
    .about-us h2{
        font-size: 25px;
    }
    .about-us p{
        font-size: 25px;
    }
}

.home-intro{
    padding: 60px 0 20px;
}
.home-intro .container{
    padding: 0 40px;
    perspective: 1200px;
}
/* Plain (non-3D) wrapper carries the sticky positioning + opaque backing.
   Kept as a SIBLING of .container (not nested inside it) — .container has
   `perspective` for the fold-in animation, and a sticky+opaque element merely
   being a descendant of a perspective ancestor is enough to break its paint
   order in some browsers, even with no transform of its own. Being a sibling
   avoids that entirely. */
.home-intro-title-wrap{
    position: sticky;
    top: 130px;
    /* low z-index values weren't reliably occluding scrolled content on this
       page (this stylesheet uses very high z-index elsewhere, e.g. the
       pinned header at 99995); its OWN sticky release already guarantees
       it moves fully out of the way before Featured Projects needs this
       space, so a static high value here is safe. */
    z-index: 99991;
    background-color: #000000;
    padding: 14px 40px;
    margin-bottom: 24px;
    /* own, separate perspective just for the title's fold-in — keeps the 3D
       look without sharing a scene with the scrolling content in .container */
    perspective: 1200px;
}
/* The pinned-logo mask band fades from solid to transparent between 84px and
   118px, and this band sits at 130px — so text emerging ABOVE the band was
   ghosting through that semi-transparent strip (visibly grey, not hidden).
   This block rides with the sticky band and keeps everything directly above
   it solid black. Scoped to this section: nothing global, nothing that can
   reach Featured Projects. */
.home-intro-title-wrap::before{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 140px;
    background-color: #000000;
    pointer-events: none;
}
.home-intro-title{
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
    font-size: 40px;
    text-align: center;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: rotateX(90deg) skewX(20deg);
    transition: transform 4.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Opening line */
.home-intro-lead{
    color: #ffffff;
    font-family: leddot;
    font-size: 26px;
    line-height: 1.45;
    max-width: 48ch;
    margin: 0 auto 42px;
    text-align: center;
    text-wrap: balance;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: rotateX(90deg) skewX(20deg);
    transition: transform 4.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: .35s;
}
/* Bullets — each folds up on its own, staggered like the Featured Projects list */
.home-intro-list{
    list-style: none;
    font-family: leddot;
    /* explicit px: a `ch` value here would resolve against the ul's own font,
       not leddot, and come out far too narrow */
    max-width: 820px;
    margin: 0 auto;
    text-align: left;
}
.home-intro-list li{
    position: relative;
    padding-left: 42px;
    margin-bottom: 22px;
    color: #ffffff;
    font-family: leddot;
    font-size: 22px;
    line-height: 1.45;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: rotateX(90deg) skewX(20deg);
    transition: transform 4.6s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Marker = the "A" (lampshade) from the BAD logo, used as a mask so each
   bullet keeps its own brand colour and glow. */
.home-intro-list li::before{
    content: "";
    position: absolute;
    left: 0;
    top: .30em;
    width: 22px;
    height: 22px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255.93 0 281.43 278.34'%3E%3Cpath d='M537.36,278.32H255.93L347.45,1.02l1.5-.54h90.3c3.6-.27,3.05,4.41,4.54,6.67l93.57,271.17Z'/%3E%3C/svg%3E") no-repeat center / contain;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='255.93 0 281.43 278.34'%3E%3Cpath d='M537.36,278.32H255.93L347.45,1.02l1.5-.54h90.3c3.6-.27,3.05,4.41,4.54,6.67l93.57,271.17Z'/%3E%3C/svg%3E") no-repeat center / contain;
}
/* tiny stagger only — each bullet now triggers as it scrolls into view */
.home-intro-list li:nth-child(2){ transition-delay:.10s; }
.home-intro-list li:nth-child(3){ transition-delay:.20s; }
.home-intro-list li:nth-child(4){ transition-delay:.30s; }
.home-intro-list li:nth-child(1)::before{ background-color:#ffce1b; filter:drop-shadow(0 0 7px rgba(255,206,27,.8)); }
.home-intro-list li:nth-child(2)::before{ background-color:#ff1d0d; filter:drop-shadow(0 0 7px rgba(255,29,13,.8)); }
.home-intro-list li:nth-child(3)::before{ background-color:#219ae5; filter:drop-shadow(0 0 7px rgba(33,154,229,.8)); }
.home-intro-list li:nth-child(4)::before{ background-color:#7d67c2; filter:drop-shadow(0 0 7px rgba(125,103,194,.8)); }
/* The button pins directly under the "Who We Are" band so it stays readable
   instead of being sliced in half behind it. Same pattern that fixed the
   title: a plain sticky wrapper OUTSIDE .container (which has `perspective`,
   where opaque backgrounds don't reliably occlude), with a solid backing.
   z-index sits just BELOW the title band, so when the section ends this
   slides up and disappears behind the heading. */
.home-intro-cta-wrap{
    position: sticky;
    top: 198px;            /* bottom edge of the .home-intro-title-wrap band */
    z-index: 99990;
    background-color: #000000;
    padding: 8px 40px 18px;
    perspective: 1200px;   /* keeps the button's fold-in 3D, as .container did */
}
/* The button's stick range lives in .home-intro-cta-zone and ENDS BEFORE the
   section does. That matters: the heading and button are both sticky in the
   same section, so without this they'd both get clamped to the section's
   bottom edge at the same moment — and the taller button gets shoved up
   overlapping the heading (button half-hidden behind the banner). Ending the
   button's range early lets it release first and scroll up out of frame
   behind the heading, like the last line of the section. */
.home-intro-cta-spacer{
    height: 15vh;
}
/* a little extra range for the heading alone, after the button has gone */
.home-intro-tail{
    height: 2vh;
}
.home-intro-cta{
    text-align: center;
    margin-top: 50px;
    transform-origin: bottom;
    transform-style: preserve-3d;
    transform: rotateX(90deg) skewX(20deg);
    transition: transform 4.6s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: 1.75s;
}
.home-intro.in-view .home-intro-title,
.home-intro.in-view .home-intro-lead,
.home-intro.in-view .home-intro-cta{
    transform: rotateX(0deg) skewX(0deg);
}
/* bullets unfold individually, as each one scrolls into view */
.home-intro-list li.in-view{
    transform: rotateX(0deg) skewX(0deg);
}
@media screen and (max-width:767px) {
    .home-intro .container{
        padding: 0 25px;
    }
    .home-intro-title-wrap{
        padding: 10px 25px;
    }
    /* the title band is shorter on mobile, so the button pins higher */
    .home-intro-cta-wrap{
        top: 180px;
        padding: 6px 25px 14px;
    }
    .home-intro-cta-spacer{
        height: 22vh;
    }
    .home-intro-tail{
        height: 8vh;
    }
    .home-intro-title{
        font-size: 25px;
    }
    .home-intro-lead{
        font-size: 19px;
        margin-bottom: 32px;
    }
    .home-intro-list li{
        font-size: 17px;
        padding-left: 26px;
        margin-bottom: 16px;
    }
    .home-intro-list li::before{
        width: 9px; height: 9px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .home-intro-title,
    .home-intro-lead,
    .home-intro-list li,
    .home-intro-cta{
        transition: none;
        transform: none;
    }
}


.featured-project {
    /* padding: 50vh 0 0; */
    padding: 10vh 0 0;
    background-image: url(../image/featured-projects-section-background-bad-lighting-design.svg);
    background-attachment: fixed;
}
.featured-project .container{
    padding: 0 40px;
}
.featured-project .section-title{
    position: sticky;
    top: 130px;
    margin-bottom: 40px;
}
.featured-project .title{
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
}
.featured-project .projects{
    padding-top: 100vh;
    display: flex;
}
.featured-project .project{
    padding-bottom: 80vh;
    position: relative;
    perspective: 900px;
    position: sticky;
}
.featured-project .project-group{
    width: 60%;
}
.featured-project .project-group::after{
    content: "";
    display: block;
    height: 100vh;
}
.featured-project .project-group .image{
    display: none;
}
.featured-project .project-group .image .image-inner{
    width: 100%;
    padding-bottom: 90%;
    position: relative;
}
.featured-project .project-group .image .image-inner img{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    object-fit: cover;
}
.featured-project .project-group-image{
    width: 40%;
}
.featured-project .project-group-image .image{
    position: sticky;
    top:100px;
    min-height: calc(80vh + 55px);
}
.featured-project .project-group-image .image .image-inner{
    padding-bottom: 90%;
    position: relative;
}
.featured-project .project-group-image .image .image-inner img{
    width: 100%;
    height: 100%;
    position: absolute;
    top:0;
    left: 0;
    object-fit: cover;
}
.featured-project .project-group-image .image img{
    width: 100%;
}
/* .featured-project .project:last-child{
    background-color: #000000;
} */
.featured-project .project:nth-last-child(2):empty{
    top: 0;
    background-color: #000000;
    z-index: 999;
    padding-bottom: 100vh;
}
.featured-project .project:last-child{
    padding-bottom: 80vh;
}
.featured-project .project a{
    color: #fff;
    font-size: 36px;
    font-family: leddot;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    transform-style: preserve-3d;
    transform: rotateX(90deg) skewX(20deg);
    transform-origin: bottom;
    border-radius: 5px;
}
.featured-project .project:nth-child(4n+1) a:hover { 
    background-color: #ffce1b; 
}   
.featured-project .project:nth-child(4n+2) a:hover { 
    background-color: #ff1d0d; 
}   
.featured-project .project:nth-child(4n+3) a:hover { 
    background-color: #219ae5; 
}  
.featured-project .project:nth-child(4n+4) a:hover { 
    background-color: #7d67c2; 
}
.featured-project .project:nth-child(1){
    top:190px;
}
.featured-project .project:nth-child(2){
    top:240px;
}
.featured-project .project:nth-child(3){
    top:290px;
}
.featured-project .project:nth-child(4){
    top:340px;
}
.featured-project .project:nth-child(5){
    top:390px;
}
.featured-project .project:nth-child(6){
    top:440px;
}
.featured-project .project:nth-child(7){
    top:490px;
}
.featured-project .project:nth-child(8){
    top:540px;
}
.featured-project .project:nth-child(9){
    top:590px;
}
.featured-project .project:nth-child(9):empty{
    width: 100vw;
    margin-left: -40px;
}
.featured-project .project:nth-child(10){
    top:640px;
}
.featured-project .project.active a{
    animation: sk 3s forwards;
}
@keyframes sk {
    0%{
        transform: rotateX(90deg) skewX(20deg); 
    }
    100%{
        transform: rotateX(0deg) skewX(0deg); 
    }
}

@media screen and (max-width:1025px) {
    .featured-project .project a{
        font-size: 25px;
    }
    .featured-project .project-group-image .image{
        min-height: calc(80vh + 43px);
    }
}
@media screen and (max-width:767px) {
    .featured-project .container{
        padding: 0 25px;
    }
    .featured-project .title{
        font-size: 25px;
    }
    .featured-project .project{
        background-color: #000;
    }
    .featured-project .project a{
        color: #fff;
        font-size: 22px;
    }
    .featured-project .project:nth-child(1){
        top:170px;
    }
    .featured-project .project:nth-child(2){
        top:210px;
    }
    .featured-project .project:nth-child(3){
        top:250px;
    }
    .featured-project .project:nth-child(4){
        top:290px;
    }
    .featured-project .project:nth-child(5){
        top:330px;
    }
    .featured-project .project:nth-child(6){
        top:370px;
    }
    .featured-project .project:nth-child(7){
        top:410px;
    }
    .featured-project .project:nth-child(8){
        top:450px;
    }
    .featured-project .project:nth-child(9){
        top:490px;
    }
    .featured-project .project:nth-child(9):empty{
        margin-left: -25px;
    }
    .featured-project .project:nth-child(10){
        top:530px;
    }
    .featured-project .project-group{
        width: 100%;
    }
    .featured-project .project-group::after{
        height: 60vh;
    }
    .featured-project .project-group .image{
        display: block;
    }
    .featured-project .project-group .image img{
        width: 100%;
    }
    .featured-project .project-group-image{
        display: none;
    }
}



.spaces .container{
    padding: 0 40px;
}
.spaces .section-title{
    margin-bottom: 30px;
}
.spaces .title{
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
}
.spaces .links{
    padding-bottom: 100px;
}
.spaces .links a{
    color: #fff;
    font-size: 40px;
    font-family: leddot;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
    border-radius: 5px;
    transition: .3s;
}
.spaces .link:nth-child(4n+1) a:hover { 
    background-color: #ffce1b; 
}   
.spaces .link:nth-child(4n+2) a:hover { 
    background-color: #ff1d0d; 
}   
.spaces .link:nth-child(4n+3) a:hover { 
    background-color: #219ae5; 
}  
.spaces .link:nth-child(4n+4) a:hover { 
    background-color: #7d67c2; 
}


@media screen and (max-width:767px) {
    .spaces .container{
        padding: 0 25px;
    }
    .spaces .title{
        font-size: 25px;
    }
    .spaces .links a{
        font-size: 25px;
    }
}


.footer{
    padding: 30px 0;
}
.footer .container{
    padding: 0 40px;
}
.footer .logo-wrap{
    max-width: 90%;
    margin: auto;
    width: 230px;
}
/* Footer tagline lockup (About page mockup — replaces the footer logo) */
.footer .footer-tagline-wrap{
    text-align: center;
}
.footer .footer-tagline{
    display: inline-block;
    font-family: leddot;
    font-size: clamp(20px, 2.9vw, 32px);
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
    transition: color .3s ease;
}
/* Below ~700px the line can't fit on one row at a readable size, so let it
   wrap rather than push the page sideways. .signoff-keep still binds the
   logo to "lighting", so it can only ever break after "with". */
@media screen and (max-width:700px){
    .footer .footer-tagline{
        font-size: 24px;
        white-space: normal;
        line-height: 1.3;
    }
}
.footer .footer-tagline:hover{
    color: #ffce1b;
}
.footer .footer-links{
    display: flex;
    justify-content: center;
    padding: 22px 10px ;
}
.footer .footer-links .link:not(:last-child){
    border-right: 2px solid #ffffff;
}
.footer .footer-links a{
    color: #fff;
    font-size: 15px;
    font-family: leddot;
    text-decoration: none;
    padding: 10px 0;
    display: inline-block;
    padding: 0 20px;
}
.footer .footer-links a:hover{
    color: #ffce1b;
}
.footer .copyright{
    font-size: 14px;
    color: #ffffff;
    font-family: "acumin-variable", sans-serif;
    text-align: center;
}

@media screen and (max-width:767px) {
    .footer .container{
        padding: 0 25px;
    }
    .footer .footer-links{
        flex-direction: column;
        padding-left: 0;
        padding-right: 0;
    }
    .footer .footer-links .link{
        text-align: center;
    }
    .footer .footer-links .link:not(:last-child){
        border-right: 0;
    }
    .footer .footer-links a{
        padding: 5px 0;
        text-align: center;
    }
    .footer .copyright{
        font-size: 12px;
    }
}


.gallery .container{
    padding: 0 40px;
}
.gallery .row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    grid-auto-flow: dense;
}
.gallery .row .col {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}
/* projects tagged .big take a 2x2 feature tile; the rest pack densely around them */
.gallery .row .col.big {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery .row .col a{
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    padding-top: 100%;
}
.gallery .row h4{
    position: absolute;
    top: 20px;
    left: 20px;
    color: #fff;
    font-family: leddot;
    font-size: 20px;
    opacity: 0;
    transition: .3s;
    z-index: 2;
}
.gallery .row a::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.4);
    left: 0;top: 0;
    opacity: 0;
    transition: .3s;
    z-index: 1;
}
.gallery .row a:hover::before{
    opacity: 1;
}
.gallery .row a:hover h4{
    opacity: 1;
}
.gallery .row .col a img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    left: 0;
    top: 0;
}
.gallery .filter .filter-items{
    display: flex;
    list-style: none;
    border: 1px solid #fff;
    border-radius: 10px;
    display: inline-flex;
    margin: 20px 0 30px;
    padding: 0 10px;
    position: relative;
}
.gallery .filter .item{
    padding: 10px 15px;
    font-size: 30px;
    font-family: leddot;
    border-radius: 10px;
    transition: .3s;
}
.gallery .filter .item.active{
    color: #ffce1b; 
}
.gallery .filter .item:nth-child(4n+1):hover { 
    color: #ffce1b; 
}   
.gallery .filter .item:nth-child(4n+2):hover { 
    color: #ff1d0d; 
}   
.gallery .filter .item:nth-child(4n+3):hover { 
    color: #219ae5; 
}  
.gallery .filter .item:nth-child(4n+4):hover { 
    color: #7d67c2; 
}
.gallery .filter .borderDesign{
    position: absolute;
    height: calc(100% + 4px);
    width: 58px;
    top:-2px;
    pointer-events: none;
    left: 25px;
    transition: .2s ease;
}
.gallery .filter .borderDesign::after,
.gallery .filter .borderDesign::before{
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    left: 0;
    background: linear-gradient(90deg, rgba(255,206,25,0) 0%, rgb(255, 206, 25) 10%, rgba(255,206,25,1) 90%, rgba(255,206,25,0) 100%); 
}
.gallery .filter .borderDesign::after{
    bottom: 0;
}
.gallery .filter .filter-mobile{
    display: none;
}

@media screen and (max-width:1200px) {
    .gallery .filter .item{
        padding: 10px;
        font-size: 20px;
    }
    .gallery .filter .filter-items{
        padding: 0 5px;
    }
    .gallery .filter .borderDesign{
        width: 39px;
        left: 15px;
    }
}
@media screen and (max-width:767px) {
    .gallery .container{
        padding: 0 25px;
    }
    .gallery .row {
        grid-template-columns: repeat(2, 1fr);
    }
    .gallery .col{
        grid-column: auto !important;
        grid-row: auto !important;
    }
    .gallery .row h4{
        font-size: 16px;
    }
    .gallery .filter {
        position: relative;
        margin-bottom: 30px;
        margin-top: 20px;
    }
    .gallery .filter .item{
        padding: 10px;
        font-size: 20px;
    }
    .gallery .filter .item.active{
        color: #ffce19;
    }
    .gallery .filter .filter-items{
        padding: 5px 5px;
        width: 100%;
        margin-top: 0;
        display: none;
        position: absolute;
        left: 0;
        top: 100%;
        z-index: 9;
        background: #000;
    }
    .gallery .filter .borderDesign{
        width: 29px;
        left: 15px;
        display: none;
    }
    .gallery .filter .borderDesign::after,
    .gallery .filter .borderDesign::before{
        background: linear-gradient(90deg, rgba(255,206,25,0) 0%, rgba(255,206,25,1) 15%, rgba(255,206,25,1) 85%, rgba(255,206,25,0) 100%); 
    }
    .gallery .filter .filter-mobile{
        display: block;
        font-size: 20px;
        font-family: leddot;  
        padding: 10px;
        border: 1px solid #fff;
        border-radius: 10px;      
        position: relative;
    }
    .gallery .filter .filter-mobile::after{
        content: "";
        position: absolute;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-top: 10px solid #fff;
        right: 15px;
        top: 16px;
    }
}
@media screen and (min-width:768px) {
    .gallery .filter-items{
        display: inline-flex !important;
    }
}



.project-gallery .container{
    padding: 0 40px;
}
.project-gallery .section-title{
    padding: 20px 0 20px;
    display: flex;
    justify-content: space-between;
}
.project-gallery .section-title h1{
    font-size: 40px;
    font-family: leddot;
    color: #219ae5;
}
.project-gallery .section-title h1{
    position: relative;
    z-index: 0;
    top: -2px;
}
.project-gallery .section-title h1 a{
    position: relative;
    z-index: 9;
    top: -2px;
}
.project-gallery .section-title h2{
    font-size: 30px;
    font-family:saga;
    font-weight: 400;
}
.project-gallery .row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: auto;
    gap: 10px;
    grid-auto-flow: dense;
}
.project-gallery .col:nth-child(6n + 1) { grid-column: 1 / span 2; grid-row: calc((var(--index) - 1) / 6 * 4 + 1) / span 2; }
.project-gallery .col:nth-child(6n + 2) { grid-column: 3; grid-row: calc((var(--index) - 2) / 6 * 4 + 1); }
.project-gallery .col:nth-child(6n + 3) { grid-column: 3; grid-row: calc((var(--index) - 3) / 6 * 4 + 2); }
.project-gallery .col:nth-child(6n + 4) { grid-column: 1; grid-row: calc((var(--index) - 2) / 6 * 4 + 2); }
.project-gallery .col:nth-child(6n + 5) { grid-column: 1; grid-row: calc((var(--index) - 3) / 6 * 4 + 3); }
.project-gallery .col:nth-child(6n + 6) { grid-column: 2 / span 2; grid-row: calc((var(--index) - 1) / 6 * 4) / span 2; }

/* The mosaic repeats every 6 tiles, where tiles 4 and 5 stack in column 1
   alongside the big tile 6 that fills columns 2-3. When a gallery ends on
   tile 5 that big tile never arrives, so 4 and 5 were left stacked against a
   tall empty gap. Sit the final tile beside its neighbour instead — `auto`
   row + dense packing drops it into the empty cell next to tile 4. */
.project-gallery .row .col:nth-child(6n + 5):last-child{
    grid-column: 2;
    grid-row: auto;
}
/* Same root cause, one tile earlier: a gallery ending on tile 4 leaves a lone
   small tile with two-thirds of the row empty beside it. Run it the full
   width as a closing shot — fills the row completely and reads deliberate.
   2:1 rather than the usual square so it stays a strip, not a huge block. */
.project-gallery .row .col:nth-child(6n + 4):last-child{
    grid-column: 1 / span 3;
    grid-row: auto;
    padding-top: 50%;
}
.project-gallery .row .col {
    width: 100%;
    height: 100%;
    object-fit: cover;
    padding-top: 100%;
    position: relative;
}
.project-gallery .row .col img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
/* Video tiles must fill the square the same way images do. A <video> is
   display:inline by default and was left in normal flow, so it rendered
   BELOW the col's `padding-top:100%` square instead of inside it — which
   is what produced the tall black gap on the Sterling Aspen page. */
.project-gallery .row .col video{
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
}
@media screen and (max-width:767px) {
    .project-gallery .container{
        padding: 0 25px;
    }
    .project-gallery .section-title {
        flex-direction: column;
    }
    .project-gallery .section-title h1{
        font-size: 25px;
        margin-bottom: 15px;
    }
    .project-gallery .section-title h1 img{
        width: 15px;
    }
    .project-gallery .section-title h1 a{
        top: 0;
    }
    .project-gallery .section-title h2{
        font-size: 20px;
    }
    .project-gallery .row {
        grid-template-columns: repeat(2, 1fr);
    }
    .project-gallery .col{
        grid-column: auto !important;
        grid-row: auto !important;
    }
    /* mobile drops to a uniform 2-column grid, so the full-width closing
       tile goes back to being an ordinary square like everything else */
    .project-gallery .row .col:nth-child(6n + 4):last-child{
        padding-top: 100%;
    }
}





/* contact us */

.contact-us{
padding: 0px 0 50px;
}

.contact-us .container{
    padding: 0 40px;
}
.contact-us .section-title{
    padding-top: 20px;
    margin-bottom: 35px;
    text-align: center;
}
.contact-us .title{
    font-size: 50px;
    color: #FFCE1B;
    font-family: saga;
    font-weight: 400;
    margin-bottom: 20px;
}
.contact-us .sub-title{
    font-size: 30px;
    color: #ffffff;
    font-family: "acumin-variable", sans-serif;
    font-weight: 200;
    margin-bottom: 25px;
    max-width: 550px;
}

.contact-us .row{
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    gap: 90px;
}
/* .contact-us .row .left-column{
    width: 65%;
}
.contact-us .row .right-column{
    width: 35%;
} */
.contact-us .locations{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-top: 0;
}
.contact-us .location{
    width: auto;
    max-width: 260px;
}
.contact-us .location:first-child{
    padding-right: 0;
}

.contact-us .location img{
    max-width: 105px;
    max-height: 95px;
    display: block;
    margin: auto;
    object-position: contain;
    margin-bottom: 12px;
}
.contact-us .location h2{
    color: #fff;
    font-size: 34px;
    font-family: leddot;
    padding: 6px 10px;
    font-weight: 400;
    text-align: center;
}
.contact-us .location a,
.contact-us .location p{
    font-size: 25px;
    font-family: leddot;
    padding: 10px;
    font-weight: 400;
    color: #FFCE1B;
    line-height: 1.2;
    letter-spacing: .02em;
    max-width: none;
    white-space: nowrap;
    margin: auto;
    text-align: center;
}
.contact-us .location a{
    text-decoration: none;
    padding: 0;
}
.contact-us .location a:hover{
    color: #fff;
}
.contact-us form{
    width: 440px;
    max-width: 100%;
    margin: 0;
    padding-top: 0;
}
/* Form confirmation — same leddot face as the job names. Hidden until there
   is actually something to say, then shown as a bordered, glowing panel so it
   reads as a real confirmation rather than a caption under the button.
   Copy avoids apostrophes and colons: leddot has no glyph for either and they
   fall back to a mismatched serif. */
#formStatus{
    display: none;
    font-family: leddot;
    text-align: center;
    margin-top: 22px;
    padding: 20px 22px;
    border: 2px solid currentColor;
    border-radius: 12px;
    line-height: 1.35;
}
#formStatus.is-visible{
    display: block;
}
/* sized to read like the "Texas" / "Aspen" headings (leddot 34px), a touch
   larger so a submitted message is unmistakable */
#formStatus .status-main{
    display: block;
    font-size: 40px;
    line-height: 1.15;
    letter-spacing: .02em;
}
#formStatus .status-sub{
    display: block;
    font-size: 22px;
    margin-top: 14px;
    opacity: .9;
}
/* once the message is away, the fields have nothing left to do — the
   confirmation takes their place so it is visible without scrolling */
.contact-us form.form-sent .field,
.contact-us form.form-sent button{
    display: none;
}
.contact-us form.form-sent #formStatus{
    margin-top: 0;
    padding: 40px 26px;
}
#formStatus.is-success{
    color: #ffffff;
    box-shadow: 0 0 22px rgba(255,255,255,.22);
    text-shadow: 0 0 12px rgba(255,255,255,.45);
}
#formStatus.is-error{
    color: #ff1d0d;
    box-shadow: 0 0 22px rgba(255,29,13,.28);
    text-shadow: 0 0 12px rgba(255,29,13,.55);
}
#formStatus.is-invalid{
    color: #219ae5;
    box-shadow: 0 0 22px rgba(33,154,229,.28);
    text-shadow: 0 0 12px rgba(33,154,229,.55);
}
@media screen and (max-width:767px){
    #formStatus{ padding: 22px 18px; }
    #formStatus .status-main{ font-size: 28px; }
    #formStatus .status-sub{ font-size: 17px; }
    .contact-us form.form-sent #formStatus{ padding: 30px 20px; }
}
.contact-us form input{
    display: block;
    width: 100%;
    padding: 22px 20px;
    margin-bottom: 16px;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    background-color: #7d67c2;
    outline: 0;
    border: 0 !important;
    font-family: "acumin-variable", sans-serif;
    font-weight: 200;
}
.contact-us form input[name="email"]{
    background-color: #219ae5;
}
.contact-us form textarea{
    display: block;
    width: 100%;
    margin-bottom: 16px;
    border-radius: 10px;
    text-align: center;
    font-size: 30px;
    color: #fff;
    background-color: #ff1d0d;
    outline: 0;
    border: 0 !important;
    min-height: 100px;
    resize: vertical;
    padding: 22px 20px;
    font-family: "acumin-variable", sans-serif;
    font-weight: 200;
}
/* Chrome paints autofilled fields with its own near-white background, which
   wiped out the coloured inputs the moment you picked a saved email. You can't
   override that with background-color — an inset box-shadow is the only way. */
.contact-us form input:-webkit-autofill,
.contact-us form input:-webkit-autofill:hover,
.contact-us form input:-webkit-autofill:focus,
.contact-us form input:-webkit-autofill:active{
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #7d67c2 inset;
    box-shadow: 0 0 0 1000px #7d67c2 inset;
    transition: background-color 9999s ease-in-out 0s;
}
.contact-us form input[name="email"]:-webkit-autofill,
.contact-us form input[name="email"]:-webkit-autofill:hover,
.contact-us form input[name="email"]:-webkit-autofill:focus,
.contact-us form input[name="email"]:-webkit-autofill:active{
    -webkit-box-shadow: 0 0 0 1000px #219ae5 inset;
    box-shadow: 0 0 0 1000px #219ae5 inset;
}
.contact-us form textarea:-webkit-autofill,
.contact-us form textarea:-webkit-autofill:hover,
.contact-us form textarea:-webkit-autofill:focus{
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #ff1d0d inset;
    box-shadow: 0 0 0 1000px #ff1d0d inset;
}
/* Same guard using the standard selector, for browsers that don't answer to
   the -webkit- prefixed one (Firefox, and newer Chrome/Safari). */
.contact-us form input:autofill,
.contact-us form input:autofill:hover,
.contact-us form input:autofill:focus,
.contact-us form input:autofill:active{
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #7d67c2 inset;
    box-shadow: 0 0 0 1000px #7d67c2 inset;
    transition: background-color 9999s ease-in-out 0s;
}
.contact-us form input[name="email"]:autofill,
.contact-us form input[name="email"]:autofill:hover,
.contact-us form input[name="email"]:autofill:focus,
.contact-us form input[name="email"]:autofill:active{
    -webkit-box-shadow: 0 0 0 1000px #219ae5 inset;
    box-shadow: 0 0 0 1000px #219ae5 inset;
}
.contact-us form textarea:autofill,
.contact-us form textarea:autofill:hover,
.contact-us form textarea:autofill:focus{
    -webkit-text-fill-color: #ffffff;
    caret-color: #ffffff;
    -webkit-box-shadow: 0 0 0 1000px #ff1d0d inset;
    box-shadow: 0 0 0 1000px #ff1d0d inset;
}
.contact-us form input::placeholder,
.contact-us form textarea::placeholder{
    font-family: saga;  
    color: #000;
    line-height: 30px;
}
.contact-us form button{
    display: block;
    width: 100%;
    padding: 22px 20px;
    margin-bottom: 0;
    border-radius: 10px;
    text-align: center;
    font-size: 35px;
    color: #000;
    background-color: #FFCE1B;
    outline: 0;
    border: 0 !important;
    font-family: saga; 
    margin-top: 40px;
}
@media screen and (max-width:1200px) {
    .contact-us .location {
        max-width: 360px;
    }
    .contact-us .location h2{
        font-size: 30px;
    }
    .contact-us .location a,
    .contact-us .location p{
        font-size: 20px;
    }
}
@media screen and (max-width:991px) {
.contact-us .row .left-column{
    width: 100%;
}
.contact-us .row .right-column{
    width: 100%;
}
}
@media screen and (max-width:767px) {
    .contact-us .container{
        padding: 0 25px;
    }
    .contact-us .section-title{
        margin-bottom: 40px;
    }
    /* Phone: put the form first (above the locations) so the primary action is
       reachable without scrolling past both map graphics */
    .contact-us .row{
        flex-direction: column;
        align-items: center;
        gap: 55px;
    }
    .contact-us form{
        order: -1;
        width: 100%;
    }
    .contact-us .location img{
        max-width: 90px;
        max-height: 82px;
    }
    .contact-us .title{
        font-size: 25px;
    }
    .contact-us .sub-title{
        font-size: 20px;
        max-width: 400px;
    }
    .contact-us .locations{
        flex-direction: column;
        align-items: center;
    }
    .contact-us .location{
        width: 100%;
        padding-right: 0 !important;
        max-width: 250px;
    }
    .contact-us .location:first-child{
        margin-bottom: 30px;
    }
    .contact-us .location h2{
        font-size: 22px;
    }
    .contact-us .location a,
    .contact-us .location p{
        font-size: 18px;
    }
    .contact-us form{
        padding-top: 40px;
    }
    .contact-us form input{
        padding: 40px 20px 16px;
        margin-bottom: 20px;
        font-size: 20px;
    }
    .contact-us form textarea{
        margin-bottom: 20px;
        font-size: 20px;
        padding: 40px 20px 16px;
        min-height: 110px;
        height: auto;
    }
    .contact-us form .field label{
        top: 12px;
        font-size: 16px;
    }
    .contact-us form button{
        display: block;
        width: 100%;
        padding: 25px 20px 23px;
        margin-bottom: 30px;
        border-radius: 10px;
        text-align: center;
        font-size: 25px;
        margin-top: 30px;
    }
}

.sub-title-about {
    color:#fff;
    padding-bottom: 15px;
    font-size: 40px;
    font-family: leddot;
    line-height: 1.2;
}

.title-about {
    font-family: leddot;
    color: #219ae5;
    font-size: 50px;
    font-weight: 400;
    padding-bottom: 10px;
}

.title-h1 {
    font-size: 50px;
    color: #FFCE1B;
    font-family: saga;
    font-weight: 400;
    margin-bottom: 40px;
}

@media (max-width: 767px) {
    .sub-title-about {
        font-size: 25px;
    }
}

.privacy-policy{
    .container{
        padding: 0 40px;
        font-family: "acumin-variable", sans-serif;
    }
    .section-title{
        padding-top: 40px;
        margin-bottom: 100px;
    }
    .title-privacy{
        font-family: leddot;
        color: #219ae5;
        font-size: 50px;
        font-weight: 400;
        padding-bottom: 10px;
    }
    .date{
        padding-bottom: 30px;
    }
    h2{
      font-size: 30px;  
      padding-top: 20px;
      padding-bottom: 15px;
    }
    .point {
        margin-left: 15px;
        padding-bottom: 10px;
    }
    .parragraph{
        margin-left: 36px;
    }
    ul li{
        margin-left: 65px;
    }
    ul{
        margin-bottom: 20px;
        margin-top: 10px;
    }
    
}

.terms-use{
      .container{
        padding: 0 40px;
    }
    .section-title{
        padding-top: 40px;
        margin-bottom: 100px;
    }
    .title-terms{
        font-family: leddot;
        color: #219ae5;
        font-size: 50px;
        font-weight: 400;
        padding-bottom: 20px;
    }
    section{
        font-family: "acumin-variable", sans-serif;;
    }
    .date-terms{
        padding-bottom: 30px;
    }
    h2{
      font-size: 30px;  
      padding-top: 20px;
      padding-bottom: 10px;
    }
    .parragraph-term{
        color: white;
        text-decoration: none;
    }
    .parragraph-terms{
        margin-left: 36px;
    }
    .email-terms{
        color: #fff;
        text-decoration: none;
    }
}





.image-ticker {
    padding-top: 60px;
    padding-bottom: 100px;
    display: flex;
    /* translate(-50%) resolves against this element's OWN border-box width, not
       its content width. Without width:max-content the flex box is capped at the
       container (~1200px), so the marquee shifted only ~600px and snapped back
       after a handful of logos. Sizing to content makes 50% exactly one copy.
       Spacing lives on .logo-item margins (inside each copy) rather than a gap
       here, so the two copies stay flush and the loop lands seamlessly. */
    width: max-content;
    gap: 0;
    background-color: #000;
}
.image-ticker:hover{
    animation-play-state: paused;
}
.image-ticker .scrolling-bar {
    display: flex;
    gap: 0;
    align-items: center;
}
.image-ticker .imgWrapper {
    margin-left: 40px;
    margin-right: 40px;
    border-radius: 0 !important;
}
.image-ticker .logo-item{
    margin-left: 20px;
    margin-right: 20px;
}
.image-ticker .logo-item img{
    max-height: 40px;
    width: auto;
    max-width: 180px;

}
/* Rolex leads the strip and is given extra presence */
.image-ticker .logo-item--lg img{
    max-height: 64px;
    max-width: 260px;
}

@media (max-width: 767px) {
    .image-ticker .logo-item {
        margin-left: 10px;
        margin-right: 10px;
    }
    .image-ticker .imgWrapper {
        margin-left: 10px;
        margin-right: 10px;
        padding-right: 40px;
    }
}
@keyframes marquee{
    0% {
        transform: translate(0);
    }
    100% {
        transform: translate(-50%);
    }
}
.ticker {
    overflow: hidden;
}
.image-ticker {
    /* Held until the strip scrolls into view (see main.js), so visitors always
       enter the loop at the top rather than partway through. Without this the
       animation runs from page load and Rolex is long gone by the time anyone
       scrolls down here. */
    animation: marquee 90s linear infinite paused;
}
.image-ticker.ticker-in-view{
    animation-play-state: running;
}
.image-ticker.ticker-in-view:hover{
    animation-play-state: paused;
}
.clients-ticker.home-clients-ticker{
    padding-top: 50px;
}
.clients-ticker .container,
.partners-ticker .container {
    padding: 0 40px;
}
.clients-ticker .title,
.partners-ticker .title {
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
    text-align: center;
}
@media screen and (max-width: 767px) {
    .clients-ticker .title,
    .partners-ticker .title {
        font-size: 25px;
    }
    .clients-ticker .container,
    .partners-ticker .container {
        padding: 0 25px;
    }
}

.clients-details{
    padding-top: 60px;
    padding-bottom: 60px;
}
.clients-details .container{
    padding: 0 40px;
}
.clients-details .title{
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
    margin-bottom: 40px;
}
.clients-details p{
    color: #fff;
    font-size: 40px;
    font-family: leddot;
    line-height: 1.2;
}
@media screen and (max-width: 767px) {
    .clients-details .title {
        font-size: 25px;
    }
    .clients-details p{
        font-size: 25px;
    }
}


.partners-details{
    padding-top: 60px;
    padding-bottom: 60px;
}
.partners-details .container{
    padding: 0 40px;
}
.partners-details .title{
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
    margin-bottom: 40px;
}
.partners-details p{
    color: #fff;
    font-size: 40px;
    font-family: leddot;
    line-height: 1.2;
}
@media screen and (max-width: 767px) {
    .partners-details .title {
        font-size: 25px;
    }
    .partners-details p{
        font-size: 25px;
    }
}
/* ===== Redesigned lower half: Spaces grid + Contact CTA ===== */
.spaces-grid{
    padding: 40px 0 80px;
}
.spaces-grid .container{
    padding: 0 40px;
}
.spaces-grid .section-title{
    margin-bottom: 30px;
}
.spaces-grid .title{
    font-size: 40px;
    color: #ffffff;
    font-family: saga;
    font-weight: 400;
}
.spaces-grid .grid{
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
.spaces-grid .tile{
    position: relative;
    display: block;
    aspect-ratio: 3 / 4;
    overflow: hidden;
    border-radius: 6px;
    text-decoration: none;
}
.spaces-grid .tile img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.spaces-grid .tile:hover img{
    transform: scale(1.06);
}
.spaces-grid .tile .label{
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 20px;
    font-family: leddot;
    font-size: 30px;
    color: #ffffff;
    background: linear-gradient(transparent, rgba(0,0,0,.75));
    transition: color .3s ease, text-shadow .3s ease;
}
.spaces-grid .tile:nth-child(1):hover .label{ color:#ffce1b; text-shadow:0 0 12px rgba(255,206,27,.85); }
.spaces-grid .tile:nth-child(2):hover .label{ color:#ff1d0d; text-shadow:0 0 12px rgba(255,29,13,.85); }
.spaces-grid .tile:nth-child(3):hover .label{ color:#219ae5; text-shadow:0 0 12px rgba(33,154,229,.85); }
.spaces-grid .tile:nth-child(4):hover .label{ color:#7d67c2; text-shadow:0 0 12px rgba(125,103,194,.85); }
.spaces-grid .tile:nth-child(5):hover .label{ color:#ffce1b; text-shadow:0 0 12px rgba(255,206,27,.85); }

.cta{
    padding: 30px 0 4px;
    text-align: center;
}
.cta .container{
    padding: 0 40px;
}
.cta-title{
    font-family: saga;
    font-weight: 400;
    font-size: 40px;
    color: #ffffff;
    line-height: 1.1;
    margin-bottom: 32px;
}
.cta .spaces-links{
    margin-top: 0;
    gap: 4px;
}
/* tighten the gap between the logo ticker and the closing statement */
.home-clients-ticker .image-ticker{
    padding-bottom: 45px;
}
.cta-btn{
    display: inline-block;
    font-family: leddot;
    font-size: 26px;
    color: #000000;
    background: #ffffff;
    padding: 16px 44px;
    border-radius: 6px;
    text-decoration: none;
    transition: background .3s ease, box-shadow .3s ease, color .3s ease;
}
.cta-btn:hover{
    background: #ffce1b;
    box-shadow: 0 0 24px rgba(255,206,27,.6);
}
@media screen and (max-width:900px){
    .spaces-grid .grid{ grid-template-columns: repeat(2, 1fr); }
}
@media screen and (max-width:767px){
    .spaces-grid .container{ padding:0 25px; }
    .spaces-grid .title{ font-size:25px; }
    .spaces-grid .grid{ grid-template-columns: repeat(2, 1fr); gap:10px; }
    .spaces-grid .tile .label{ font-size:22px; padding:14px; }
    .cta-title{ font-size:30px; }
    .cta-btn{ font-size:22px; padding:14px 32px; }
}

/* Restored quick-nav links under the Spaces grid */
.spaces-links{
    margin-top: 45px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.spaces-links a{
    font-family: leddot;
    font-size: 30px;
    color: #ffffff;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 5px;
    transition: .3s;
}
/* each link gets its own brand colour, with a soft neon glow */
.spaces-links a:nth-child(1){ color:#ffce1b; text-shadow:0 0 14px rgba(255,206,27,.45); }
.spaces-links a:nth-child(2){ color:#ff1d0d; text-shadow:0 0 14px rgba(255,29,13,.45); }
.spaces-links a:nth-child(3){ color:#219ae5; text-shadow:0 0 14px rgba(33,154,229,.45); }
/* hover: fill with that colour, text flips for contrast */
.spaces-links a:nth-child(1):hover{ background:#ffce1b; color:#000; text-shadow:none; }
.spaces-links a:nth-child(2):hover{ background:#ff1d0d; color:#fff; text-shadow:none; }
.spaces-links a:nth-child(3):hover{ background:#219ae5; color:#fff; text-shadow:none; }
@media screen and (max-width:767px){
    .spaces-links a{ font-size:22px; padding:8px 12px; }
}

/* Nav links row (moved under the partners+clients banner) */
.nav-links-row{
    padding-bottom: 70px;
}
.nav-links-row .container{
    padding: 0 40px;
}
.nav-links-row .spaces-links{
    margin-top: 0;
}
@media screen and (max-width:767px){
    .nav-links-row .container{ padding: 0 25px; }
}

/* Ampersand: the custom display fonts have no "&" glyph, so it falls back to a
   mismatched serif. Set it in the site's sans at a light weight so it reads as
   a deliberate choice and matches the weight of the LED letterforms. */
.amp{
    font-family: "acumin-variable", sans-serif;
    font-weight: 200;
    /* the substitute font has taller metrics than leddot and would grow the line
       box (adding ~13px of stray vertical space); zero line-height stops that */
    line-height: 0;
    vertical-align: baseline;
}

/* ===== Contact form: persistent top labels + focus feedback ===== */
/* Labels sit at the top of each box and stay put (a placeholder would vanish as
   soon as you type), so it's clear you fill in underneath. Same `saga` face as
   the SUBMIT button, just smaller. */
.contact-us form .field{
    position: relative;
}
.contact-us form .field label{
    position: absolute;
    top: 14px;
    left: 0;
    right: 0;
    text-align: center;
    font-family: saga;
    font-size: 19px;
    line-height: 1;
    color: #000;
    pointer-events: none;
    /* the focus style uses filter:, which creates a stacking context and would
       paint the field over this label — keep the label on top */
    z-index: 2;
}
/* extra top padding gives the label its own space above the typed text */
.contact-us form input,
.contact-us form textarea{
    padding: 46px 20px 18px;
}
.contact-us form textarea{
    min-height: 120px;
}
/* Visible focus state — `outline:0` removed the browser default and nothing
   replaced it, so clicking into a field gave no feedback at all. */
.contact-us form input,
.contact-us form textarea{
    caret-color: #fff;
    box-shadow: 0 0 0 0 rgba(255,255,255,0);
    transition: box-shadow .2s ease, filter .2s ease;
}
.contact-us form input:focus,
.contact-us form textarea:focus{
    outline: 0;
    box-shadow: 0 0 0 3px #000, 0 0 0 6px currentColor, 0 0 22px rgba(255,255,255,.25);
    filter: brightness(1.08);
}
.contact-us form input:focus::placeholder,
.contact-us form textarea:focus::placeholder{
    color: rgba(0,0,0,.4);
}
/* Selected text stays legible on the coloured fields */
.contact-us form input::selection,
.contact-us form textarea::selection{
    background: #000;
    color: #fff;
}
.contact-us form button{
    cursor: pointer;
    transition: filter .2s ease, box-shadow .2s ease;
}
.contact-us form button:hover{
    filter: brightness(1.08);
}
.contact-us form button:focus-visible{
    outline: 0;
    box-shadow: 0 0 0 3px #000, 0 0 0 6px #ffce1b;
}

/* ===== About page: branded headings, readable body ===== */
.about-page{
    padding: 30px 0 20px;
}
.about-page .container{
    padding: 0 40px;
    max-width: 900px;
    margin: 0 auto;
}
.about-eyebrow{
    display: block;
    font-family: leddot;
    color: #219ae5;
    font-size: 26px;
    text-shadow: 0 0 14px rgba(33,154,229,.5);
    margin-bottom: 8px;
}
.about-title{
    font-family: saga;
    color: #FFCE1B;
    font-size: 56px;
    font-weight: 400;
    line-height: 1.05;
    margin-bottom: 42px;
}
.about-body p{
    font-family: leddot;
    color: #ffffff;
    font-size: 24px;
    line-height: 1.6;
    max-width: 860px;
    margin-bottom: 28px;
}
.about-body p:last-child{ margin-bottom: 0; }
.about-body p.about-signoff{
    font-size: clamp(20px, 3.4vw, 30px);
    margin-top: 90px;
    text-align: center;
    white-space: nowrap;
}
.about-founders{
    color: #ffce1b;
}
/* Blake And Dru = BAD, with the logo letterforms as the initials */
.founders-mark{
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0 22px;
    font-family: leddot;
    font-size: 40px;
    line-height: 1.35;
    margin-bottom: 34px;
}
.founders-name{
    display: inline-flex;
    align-items: baseline;
    color: #ffffff;
}
.founders-name .logo-letter{
    height: .78em;
    width: auto;
    margin-right: .04em;
}
.founders-rest{
    color: #ffffff;
}
.logo-inline{
    height: .86em;
    width: auto;
    color: #ffffff;
    /* right side trimmed: the D's round bowl reads looser than the B's flat stem */
    margin: 0 .02em 0 .08em;
}
.founders-eq{
    font-family: Arial, Helvetica, sans-serif;
    font-size: .82em;
    color: #ffffff;
    position: relative;
    top: -.1em;
}
.founders-logo{
    height: .84em;
    width: auto;
    color: #ffffff;
    filter: drop-shadow(0 0 16px rgba(255,255,255,.3));
}
.about-body p.about-signature{
    font-size: 26px;
    margin-top: 44px;
    text-align: right;
}
.about-signature .logo-letter{
    height: .78em;
    width: auto;
    margin-right: .04em;
}
.about-cta{
    margin-top: 46px;
    text-align: center;
}
@media screen and (max-width:767px){
    .about-page .container{ padding: 0 25px; }
    .about-eyebrow{ font-size: 20px; }
    .about-title{ font-size: 34px; margin-bottom: 26px; }
    .about-body p{ font-size: 18px; line-height: 1.55; margin-bottom: 22px; }
    .founders-mark{ font-size: 26px; gap: 0 14px; margin-bottom: 26px; }
    .about-body p.about-signoff{ font-size: 22px; margin-top: 60px; white-space: normal; }
    .signoff-keep{ white-space: nowrap; }
    .about-body p.about-signature{ font-size: 20px; margin-top: 32px; }
    .about-cta{ margin-top: 24px; }
}