:root{
    --primary:#F37021;
    --accent:#4D4D4F;
    --bg-light:#f8fafc;
    --white:#fff;
    --black:#1a1a1a;
    --transition:all .6s cubic-bezier(.23,1,.32,1)
}
 *{
    box-sizing:border-box
}
body{
    margin:0;
    font-family:Montserrat,sans-serif;
    background:#fff;
    color:var(--accent);
    overflow-x:hidden;
    line-height:1.6
}
h1,h2,h3{
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:900
}
 #header{
    position:fixed;
    top:0;
    left:0;
    width:100%;
    padding:15px 10%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    z-index:1000;
    background:transparent;
    transition:var(--transition)
}
#header.scrolled,#header.internal-header{
    background:rgba(255,255,255,.98);
    padding:8px 10%;
    box-shadow:0 10px 30px rgba(0,0,0,.05)
}
.logo img{
    height:65px;
    width:auto;
    display:block;
    transition:var(--transition)
}
#header.scrolled .logo img,#header.internal-header .logo img{
    height:50px
}
.nav-links{
    display:flex;
    gap:25px;
    list-style:none;
    transform:translateY(-5px);
    margin:0 50px 0 0;
    padding:0;
    transition:var(--transition)
}
#header.scrolled .nav-links,#header.internal-header .nav-links{
    transform:translateY(0);
    margin-right:20px
}
.nav-links a{
    text-decoration:none;
    color:var(--accent);
    font-weight:600;
    font-size:.8rem;
    text-transform:uppercase;
    letter-spacing:1px;
    transition:.3s
}
.nav-links a:hover,.nav-links .current-menu-item>a,.nav-links .current-menu-ancestor>a,.nav-links .is-section-current>a{
    color:var(--primary)
}
 .nav-links li{
    position:relative
}
.nav-links .sub-menu{
    position:absolute;
    top:calc(100% + 18px);
    left:50%;
    min-width:220px;
    margin:0;
    padding: 0;
    list-style:none;
    background:#fff;
    box-shadow:0 24px 55px rgba(0,0,0,.12);
    border-top:4px solid var(--primary);
    opacity:0;
    visibility:hidden;
    transform:translate(-50%,12px);
    transition:.22s ease;
    z-index:1001
}
.nav-links .sub-menu:before{
    content:"";
    position:absolute;
    left:0;
    right:0;
    top:-22px;
    height:22px
}
.nav-links li:hover>.sub-menu,.nav-links li:focus-within>.sub-menu{
    opacity:1;
    visibility:visible;
    transform:translate(-50%,0)
}
.nav-links .sub-menu a{
    display:block;
    padding:12px 20px;
    color:var(--accent);
    white-space:nowrap;
    background:#fff
}
.nav-links .sub-menu a:hover,.nav-links .sub-menu .current-menu-item>a{
    color:#fff;
    background:var(--primary)
}
 .menu-toggle{
    display:none;
    width:42px;
    height:42px;
    border:0;
    background:var(--primary);
    align-items:center;
    justify-content:center;
    gap:4px;
    flex-direction:column
}
.menu-toggle span{
    display:block;
    width:20px;
    height:2px;
    background:#fff
}
 .hero{
    height:100vh;
    position:relative;
    background:var(--bg-light);
    overflow:hidden
}
.hero-slider,.slide{
    height:100%;
    width:100%
}
.slide{
    position:absolute;
    inset:0;
    display:flex;
    align-items:center;
    opacity:0;
    visibility:hidden;
    transition:opacity 1.2s ease-in-out
}
.slide.active{
    opacity:1;
    visibility:visible;
    z-index:10
}
.slide-image-side{
    width:55%;
    height:100%;
    position:relative;
    overflow:hidden
}
.slide-bg{
    position:absolute;
    inset:0;
    background-size:cover;
    background-position:center
}
.slide.active .slide-bg{
    animation:kenBurns 10s ease-in-out forwards
}
@keyframes kenBurns{
    from{
        transform:scale(1)
    }
    to{
        transform:scale(1.1)
    }
}
.slide-content-side{
    width:45%;
    height:100%;
    display:flex;
    align-items:center;
    position:relative;
    z-index:20
}
.hero-box{
    background:#fff;
    padding:80px;
    width:700px;
    margin-left:-150px;
    box-shadow:50px 50px 0 rgba(28,43,57,.05);
    position:relative;
    z-index:30;
    opacity:0;
    transform:translateX(50px);
    transition:1s cubic-bezier(.23,1,.32,1);
    transition-delay:.4s
}
.slide.active .hero-box{
    opacity:1;
    transform:translateX(0)
}
.hero-box h1{
    font-size: 3rem;
    margin:0 0 20px;
    line-height:1.1;
    color:var(--black)
}
.underline{
    height:8px;
    background:var(--black);
    width:100px;
    margin-bottom:30px
}
.hero-box p{
    font-size:1.1rem;
    color:#666;
    margin:0 0 40px;
    max-width:450px
}
.btn-outline{
    display:inline-block;
    padding:15px 40px;
    border:2px solid var(--black);
    color:var(--black);
    text-decoration:none;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.8rem;
    transition:.3s
}
.btn-outline:hover{
    background:var(--black);
    color:#fff
}
.btn-white{
    border-color:#fff!important;
    color:#fff!important
}
.btn-white:hover{
    background:#fff!important;
    color:var(--accent)!important
}
 .studio-block{
    display:flex;
    position:relative;
    background:linear-gradient(to bottom,var(--accent) 50%,var(--primary) 50%);
    padding:100px 10%
}
.studio-img{
    width:40%;
    height:600px;
    background:center/cover no-repeat;
    z-index:5;
    box-shadow:20px 20px 0 rgba(243,112,33,.3)
}
.studio-info{
    width:60%;
    padding-left:60px;
    padding-top:60px;
    color:#fff;
    display:flex;
    flex-direction:column
}
.studio-info h2{
    font-size:3rem;
    margin:0 0 30px;
    font-weight:100
}
.studio-info h2 span{
    font-weight:900;
    border-bottom:6px solid var(--primary);
    padding-bottom:5px
}
.studio-info p{
    font-weight:300;
    font-size:1.2rem;
    max-width:600px
}
.studio-button{
    align-self:flex-start;
    margin:8px 0 38px
}
.studio-services{
    background: rgb(255 255 255 / 45%);
    margin-top:auto;
    padding:40px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:20px;
    color:var(--accent);
    box-shadow:0 30px 60px rgba(0,0,0,.1)
}
.service-item{
    padding:30px;
    background:#f9f9f9;
    transition:.5s ease;
    display:flex;
    flex-direction:column;
    gap:15px;
    border:1px solid transparent
}
.service-item:hover{
    background:var(--accent);
    transform:translateY(-10px);
    box-shadow:0 20px 40px rgba(0,0,0,.2)
}
.service-item:hover h3,.service-item:hover p{
    color:#fff
}
.service-item i{
    font-size:2rem;
    color:var(--primary);
    transition:.3s
}
.service-item h3{
    font-size:1.1rem;
    margin:0;
    color:var(--accent);
    font-weight:700;
    opacity:.3
}
.service-item p{
    font-size:.85rem;
    color:#666;
    line-height:1.4;
    margin:0;
    transition:.3s
}
 @keyframes floating{
    0%,100%{
        transform:translateY(0)
    }
    50%{
        transform:translateY(-15px)
    }
}
.floating{
    animation:floating 4s ease-in-out infinite
}
.banner-arch{
    height:600px;
    background:center/cover no-repeat fixed;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    text-align:center;
    color:#fff;
    position:relative
}
.banner-arch:after{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(0,0,0,.4)
}
.banner-arch div{
    position:relative;
    z-index:5;
    max-width:980px;
    padding:0 20px
}
.banner-arch h2{
    font-size:4rem;
    font-weight:100;
    margin:0
}
.banner-arch h2 span{
    font-weight:900;
    border-bottom:8px solid var(--primary)
}
.banner-arch p{
    margin:20px 0 40px
}
 .london-services{
    display:flex;
    background:#fff;
    padding:120px 10%;
    align-items:center;
    position:relative;
    overflow:hidden
}
.london-img{
    width:60%;
    height:600px;
    margin-left:auto;
    background-size:cover;
    background-position:center;
    box-shadow:-20px 20px 0 rgba(0,0,0,.05)
}
.london-box{
    position:absolute;
    left:10%;
    width:45%;
    background:var(--accent);
    color:#fff;
    padding:80px 70px;
    z-index:5;
    box-shadow:30px 30px 0 var(--primary);
    opacity:0;
    transform:translateX(-150px)
}
.london-box h2,.london-box p,.london-box .btn-outline{
    opacity:0;
    transform:translateY(30px)
}
.london-box h2{
    font-size:2.5rem;
    margin:0 0 30px;
    line-height:1.1
}
.london-box p{
    font-size:1.1rem;
    margin:0 0 40px;
    font-weight:300
}
.stats-section{
    padding:120px 10%;
    background:var(--bg-light);
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:40px;
    text-align:center
}
.stat-item h3{
    font-size:4rem;
    color:var(--primary);
    margin:0 0 10px
}
.stat-item p{
    font-size:.9rem;
    text-transform:uppercase;
    letter-spacing:2px;
    font-weight:700
}
.grayscale-gallery{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:15px;
    padding:100px 10%;
    background:var(--bg-light)
}
.gallery-photo{
    position:relative;
    aspect-ratio:1/1;
    overflow:hidden;
    border-radius:4px;
    box-shadow:0 10px 20px rgba(0,0,0,.05);
    background:#eee
}
.gallery-photo img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:grayscale(1);
    transition:.8s cubic-bezier(.23,1,.32,1)
}
.gallery-photo:hover img{
    filter:grayscale(0);
    transform:scale(1.1)
}
 .footer-cta{
    display:flex;
    background:#fff;
    min-height:500px
}
.fcta-info{
    width:33.3%;
    padding:80px 5%;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:30px
}
.contact-row{
    display:flex;
    align-items:flex-start;
    gap:20px;
    color:var(--accent);
    font-size:.9rem;
    white-space:pre-line
}
.contact-row i{
    font-size:1.5rem;
    color:var(--primary)
}
.fcta-mid{
    width:33.3%;
    background:center/cover no-repeat;
    opacity:.8
}
.fcta-box{
    width:33.3%;
    background:var(--primary);
    position:relative;
    display:flex;
    align-items:center;
    z-index:10
}
.floating-touch{
    background:#fff;
    padding:60px;
    position:absolute;
    left:-100px;
    width:450px;
    box-shadow:0 40px 80px rgba(0,0,0,.2);
    z-index:9
}
.floating-touch h2{
    font-size:1.8rem;
    color:var(--accent);
    font-weight:100;
    margin:0
}
.floating-touch h2 b{
    font-weight:900;
    color:var(--primary)
}
.form-placeholder{
    margin-top:30px;
    padding:22px;
    border:2px dashed #ddd;
    color:#777;
    font-size:.85rem;
    text-align:center
}
.final-footer{
    background:var(--black);
    color:#fff;
    padding:40px 10%;
    text-align:center;
    font-size:.75rem;
    letter-spacing:1px
}
 .internal-header+main,.page-default{
    margin-top:90px
}
.internal-hero{
    height:60vh;
    background:center/cover no-repeat;
    display:flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    color:#fff
}
.internal-hero h1{
    font-size:4rem
}
.internal-hero h1 span{
    color:var(--primary)
}
.simple-page-hero{
    height:42vh;
    min-height:360px
}
.simple-page-section{
    padding:90px 10%;
    background:#fff
}
.simple-page-container{
    max-width:1180px;
    margin:0 auto
}
.simple-page-content{
    background:#fff;
    padding:0;
    font-size:1.05rem;
    color:#555
}
.simple-page-content>*:first-child{
    margin-top:0
}
.simple-page-content>*:last-child{
    margin-bottom:0
}
.simple-page-content p{
    margin:0 0 24px;
    line-height:1.9
}
.simple-page-content h2,.simple-page-content h3,.simple-page-content h4{
    color:var(--black);
    line-height:1.2;
    margin:36px 0 18px
}
.simple-page-content h2{
    font-size:2rem
}
.simple-page-content h3{
    font-size:1.45rem
}
.simple-page-content a{
    color:var(--primary);
    font-weight:700
}
.simple-page-content ul,.simple-page-content ol{
    margin:0 0 24px;
    padding-left:22px
}
.simple-page-content li{
    margin-bottom:10px
}
.simple-page-content img{
    max-width:100%;
    height:auto
}
.services-section{
    padding:100px 10%;
    display:flex;
    flex-direction:column;
    gap:140px
}
.service-row{
    display:flex;
    gap:80px;
    align-items:flex-start
}
.service-row.reverse{
    flex-direction:row-reverse
}
.service-title-side{
    width:40%;
    position:sticky;
    top:150px
}
.service-title-side h2{
    font-size:3rem;
    color:var(--black);
    line-height:1.1;
    margin:0
}
.service-title-side h2 span{
    color:var(--primary)
}
.service-title-side .underline{
    background:var(--primary);
    width:80px;
    margin-top:20px
}
.service-text-side{
    width:60%
}
.service-card{
    background:#fff;
    padding:60px;
    border-top:6px solid var(--primary);
    box-shadow:20px 20px 60px rgba(0,0,0,.04);
    transition:var(--transition)
}
.service-card.muted-border{
    border-top-color:var(--accent)
}
.service-card:hover{
    transform:translateY(-10px);
    box-shadow:30px 30px 80px rgba(0,0,0,.1)
}
.service-card .tagline{
    font-size:.9rem;
    color:var(--primary);
    font-weight:700;
    text-transform:uppercase;
    margin-bottom:15px;
    letter-spacing:1.5px
}
.service-card p{
    font-size:1.1rem;
    color:#555;
    margin:0 0 30px;
    line-height:1.7
}
.service-card ul{
    list-style:none;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:15px;
    margin:0;
    padding:0
}
.service-card li{
    font-size:.85rem;
    font-weight:700;
    text-transform:uppercase;
    color:var(--accent);
    display:flex;
    align-items:center;
    gap:12px
}
.service-card li:before{
    content:"";
    width:8px;
    height:8px;
    background:var(--primary);
    flex-shrink:0
}
 .diretorio-forminator{
    margin-top:30px
}
.diretorio-forminator input,.diretorio-forminator textarea,.diretorio-forminator select{
    width:100%!important;
    padding:15px!important;
    border:1px solid #ebebeb!important;
    background:#fdfdfd!important;
    font-family:Montserrat,sans-serif!important;
    box-shadow:none!important
}
.diretorio-forminator textarea{
    min-height:100px!important;
    resize:vertical
}
.diretorio-forminator button,.diretorio-forminator .forminator-button{
    background:var(--accent)!important;
    color:#fff!important;
    border:0!important;
    padding:18px!important;
    font-weight:900!important;
    text-transform:uppercase!important;
    letter-spacing:2px!important;
    width:100%!important
}
.diretorio-forminator button:hover,.diretorio-forminator .forminator-button:hover{
    background:var(--primary)!important
}
.forminator-module-edit-link,.diretorio-forminator small a{
    display:none!important
}
 .reveal{
    opacity:0;
    transform:translateY(40px);
    transition:1s cubic-bezier(.23,1,.32,1)
}
.reveal.active{
    opacity:1;
    transform:translateY(0)
}
 @media (max-width:1024px){
    #header,#header.scrolled,#header.internal-header{
        padding:10px 20px
    }
    .menu-toggle{
        display:flex
    }
    .main-nav{
        position:absolute;
        top:100%;
        left:0;
        right:0;
        background:#fff;
        box-shadow:0 20px 40px rgba(0,0,0,.08);
        display:none;
        max-height:calc(100vh - 70px);
        overflow:auto
    }
    .main-nav.is-open{
        display:block
    }
    .nav-links{
        display:flex;
        flex-direction:column;
        gap:0;
        margin:0!important;
        transform:none!important
    }
    .nav-links a{
        display:block;
        padding:16px 24px
    }
    .nav-links .sub-menu{
        position:static;
        min-width:0;
        padding:0 0 8px 18px;
        box-shadow:none;
        border-top:0;
        opacity:1;
        visibility:visible;
        transform:none!important
    }
    .nav-links .sub-menu a{
        padding:10px 24px;
        font-size:.75rem
    }
    .slide{
        position:relative;
        display:block;
        height:auto
    }
    .hero{
        height:auto
    }
    .slide:not(.active){
        display:none
    }
    .slide-image-side,.slide-content-side{
        width:100%;
        height:auto
    }
    .slide-image-side{
        height:50vh
    }
    .hero-box{
        margin:-60px 20px 40px;
        padding:40px;
        width:auto
    }
    .hero-box h1{
        font-size:2.5rem
    }
    .studio-block,.footer-cta,.london-services,.service-row,.service-row.reverse{
        flex-direction:column;
        height:auto
    }
    .studio-img,.studio-info,.fcta-info,.fcta-mid,.fcta-box,.london-img,.london-box,.service-title-side,.service-text-side{
        width:100%
    }
    .studio-info{
        padding:60px 0 0
    }
    .studio-services,.stats-section,.grayscale-gallery,.service-card ul{
        grid-template-columns:1fr
    }
    .london-box{
        position:static;
        padding:40px;
        margin-top:-60px;
        box-shadow:0 20px 40px rgba(0,0,0,.2)
    }
    .floating-touch{
        position:static;
        width:100%;
        left:0;
        margin-top:40px
    }
    .fcta-mid{
        min-height:320px
    }
    .service-title-side{
        position:static
    }
    .internal-hero h1,.banner-arch h2{
        font-size:2.5rem
    }
    .services-section{
        padding:70px 20px;
        gap:70px
    }
    .service-card{
        padding:40px 30px
    }
    .simple-page-section{
        padding:70px 20px
    }
}
 @media (max-width:640px){
    #header .logo img,#header.scrolled .logo img,#header.internal-header .logo img{
        height:42px
    }
    .menu-toggle{
        width:38px;
        height:38px
    }
    .hero-box{
        padding:28px;
        margin:-46px 16px 32px
    }
    .hero-box h1{
        font-size:1.4rem;
        line-height:1.08
    }
    .hero-box p{
        font-size:.95rem;
        margin-bottom:26px
    }
    .btn-outline{
        width:100%;
        padding:14px 18px;
        text-align:center;
        letter-spacing:1px
    }
    .studio-block,.london-services,.stats-section,.grayscale-gallery{
        padding:58px 16px
    }
    .studio-img,.london-img{
        height:360px
    }
    .studio-info h2{
        font-size:1.4rem;
        line-height:1.1
    }
    .studio-info p,.london-box p,.service-card p{
        font-size:1rem
    }
    .studio-services{
        padding:18px
    }
    .service-item{
        padding:22px
    }
    .banner-arch{
        height:260px;
        background-attachment:scroll
    }
    .banner-arch h2{
        font-size:1.4rem;
        line-height:1.12;
        overflow-wrap:anywhere
    }
    .internal-hero h1{
        font-size:1.6rem;
        line-height:1.12;
        overflow-wrap:anywhere
    }
    .london-box{
        padding:30px 24px;
        margin-top:-42px
    }
    .london-box h2{
        font-size:1.4rem
    }
    .stats-section{
        gap:24px
    }
    .stat-item h3{
        font-size:2.4rem
    }
    .footer-cta{
        display:block
    }
    .fcta-info,.fcta-box{
        padding:44px 20px
    }
    .floating-touch{
        padding:34px 24px
    }
    .floating-touch h2{
        font-size:1.4rem
    }
    .internal-header+main,.page-default{
        margin-top:70px
    }
    .internal-hero{
        height:160px
    }
    .simple-page-hero{
        min-height:180px
    }
    .simple-page-section{
        padding:40px 16px
    }
    .simple-page-content{
        font-size:1rem
    }
    .simple-page-content p{
        line-height:1.7
    }
    .simple-page-content h2{
        font-size:1.35rem
    }
    .simple-page-content h3{
        font-size:1.15rem
    }
    .services-section{
        padding:40px 16px;
        gap:44px
    }
    .service-row,.service-row.reverse{
        gap:20px
    }
    .service-title-side h2{
        font-size:1.4rem;
        overflow-wrap:anywhere
    }
    .service-card{
        padding:28px 22px
    }
    .contact-row{
        font-size:.85rem
    }
}