:root {
    --red: #c72417;
    --ink: #11120f;
    --paper: #ead5a6;
    --line: rgba(17, 18, 15, .28);
    --display: "Archivo Black", Impact, sans-serif;
    --sans: Inter, Arial, sans-serif
}

* {
    box-sizing: border-box
}

html {
    scroll-behavior: smooth
}

body {
    margin: 0;
    background: #12130f;
    color: var(--ink);
    font-family: var(--sans)
}

body:before,
.site-shell:after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 20;
    pointer-events: none;
    opacity: .17;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
    mix-blend-mode: multiply
}

a {
    color: inherit;
    text-decoration: none
}

.site-shell {
    max-width: 2560px;
    margin: auto;
    overflow: hidden;
    background: var(--paper)
}

.skip-link {
    position: fixed;
    z-index: 99;
    top: -4rem;
    left: 1rem;
    padding: 1rem;
    background: var(--red);
    color: #fff
}

.skip-link:focus {
    top: 1rem
}

.topbar {
    position: absolute;
    z-index: 5;
    top: 0;
    right: clamp(1rem, 4vw, 6rem);
    left: clamp(1rem, 4vw, 6rem);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: clamp(1.5rem, 3vw, 4rem);
    padding-top: clamp(1.3rem, 2.7vw, 3.2rem)
}

.brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-right: auto;
    font-family: var(--display);
    font-size: clamp(.65rem, 1vw, 1rem);
    line-height: .92
}

.brand img {
    width: clamp(3.2rem, 5vw, 5.5rem);
    height: clamp(2rem, 3vw, 3.3rem);
    object-fit: contain;
    filter: brightness(0)
}

.topbar nav {
    display: flex;
    gap: clamp(1rem, 2.7vw, 3.5rem);
    font-family: var(--display);
    font-size: clamp(.7rem, 1.05vw, 1.15rem);
    text-transform: uppercase
}

.topbar nav a:hover {
    color: var(--red)
}

.topbar-contact {
    padding: clamp(.8rem, 1.2vw, 1.2rem) clamp(1rem, 1.8vw, 2rem);
    background: var(--red);
    color: var(--paper);
    font-family: var(--display);
    font-size: clamp(.72rem, 1.05vw, 1.1rem);
    box-shadow: 5px 5px 0 var(--ink)
}

.topbar-contact b {
    font-size: 1.4em
}

.hero {
    position: relative;
    min-height: clamp(720px, 54vw, 1390px);
    padding: clamp(8rem, 13vw, 18rem) clamp(1.2rem, 8vw, 13rem) clamp(3rem, 4vw, 7rem);
    overflow: hidden;
    background: var(--paper)
}

.hero:before {
    content: "";
    position: absolute;
    inset: 0 92% 0 0;
    background: var(--red)
}

.hero-radiance {
    position: absolute;
    z-index: 0;
    right: -8%;
    bottom: -13%;
    width: 88%;
    height: 88%;
    background: repeating-conic-gradient(from 240deg at 100% 100%, transparent 0 8deg, var(--ink) 8.5deg 11deg, transparent 11.5deg 20deg);
    opacity: .95
}

.hero-architecture {
    position: absolute;
    right: -5%;
    bottom: -6%;
    width: 60%;
    height: 70%;
    background: linear-gradient(145deg, transparent 0 17%, var(--ink) 17.3% 20%, transparent 20.3% 100%), linear-gradient(20deg, var(--ink) 0 38%, transparent 38.3% 100%);
    border-left: 3px solid var(--ink);
    transform: skewY(-4deg)
}

.hero h1 {
    position: relative;
    z-index: 1;
    margin: 0;
    font-family: var(--display);
    font-size: clamp(4.4rem, 10.2vw, 16.2rem);
    line-height: .77;
    letter-spacing: -.095em
}

.hero h1 span {
    color: var(--red)
}

.hero-side {
    position: absolute;
    z-index: 2;
    bottom: 7%;
    left: clamp(1.1rem, 2.4vw, 4rem);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: clamp(.65rem, .85vw, 1rem);
    font-weight: 800;
    line-height: 1.3
}

.hero-cta {
    position: absolute;
    z-index: 3;
    right: clamp(4%, 11vw, 19%);
    bottom: clamp(3rem, 8vw, 12rem);
    padding: clamp(1rem, 1.8vw, 2.2rem);
    background: var(--paper);
    font-family: var(--display);
    font-size: clamp(1rem, 1.7vw, 2rem);
    line-height: .9;
    transform: rotate(-4deg);
    transition: transform .25s
}

.hero-cta:hover {
    transform: rotate(0) scale(1.06)
}

.hero-cta b {
    font-size: 1.6em
}

.hero-letter {
    position: absolute;
    z-index: 1;
    right: 5%;
    bottom: -3%;
    width: clamp(17rem, 34vw, 48rem);
    opacity: .95;
    filter: brightness(0);
    transform: rotate(-4deg)
}

.ticker {
    overflow: hidden;
    background: var(--ink);
    color: var(--paper);
    white-space: nowrap
}

.ticker-track {
    display: inline-flex;
    gap: 1.8rem;
    align-items: center;
    min-width: max-content;
    padding: .85rem 0;
    font-family: var(--display);
    font-size: clamp(1rem, 1.45vw, 1.7rem);
    animation: ticker 25s linear infinite
}

.ticker b {
    color: var(--red)
}

@keyframes ticker {
    to {
        transform: translateX(-50%)
    }
}

.section {
    padding: clamp(4rem, 9vw, 13rem) clamp(1.2rem, 8vw, 13rem)
}

.section-head {
    display: grid;
    grid-template-columns: 1fr 1.5fr 1fr;
    gap: 2rem;
    align-items: end;
    margin-bottom: clamp(3rem, 7vw, 9rem)
}

.section p,
.section-head>span,
.about-copy>p {
    font-size: clamp(.72rem, .85vw, 1rem);
    line-height: 1.5
}

.section-head>p,
.manifesto>p,
.about-copy>p:first-child,
.services p,
.contact>p {
    font-weight: 800;
    letter-spacing: .08em
}

.section h2,
.about h2 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(3.7rem, 7.5vw, 12rem);
    line-height: .78;
    letter-spacing: -.1em
}

.section h2 i,
.about h2 i,
.manifesto h2 i,
.contact h2 i {
    color: var(--red);
    font-style: normal
}

.projects {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(1.3rem, 3vw, 4rem)
}

.project small {
    display: block;
    margin-bottom: .7rem;
    font-weight: 800
}

.poster {
    position: relative;
    min-height: clamp(330px, 31vw, 650px);
    overflow: hidden
}

.project h3 {
    display: flex;
    justify-content: space-between;
    margin: 1rem 0 .2rem;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3.2vw, 4.8rem);
    line-height: .8;
    letter-spacing: -.08em
}

.project h3 span {
    transition: transform .2s
}

.project:hover h3 span {
    transform: translate(5px, -5px)
}

.project>p {
    margin: 0;
    font-size: .65rem;
    font-weight: 800
}

.project--north .poster {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 1.5rem;
    background: var(--red)
}

.project--north .poster:before {
    content: "";
    position: absolute;
    width: 145%;
    height: 42%;
    top: 38%;
    left: -23%;
    background: var(--paper);
    transform: rotate(-27deg);
    box-shadow: 0 -26px var(--ink), 0 26px var(--ink)
}

.project--north strong,
.project--north em,
.project--north b {
    position: relative;
    z-index: 1
}

.project--north strong {
    font-family: var(--display);
    font-size: clamp(3rem, 5.5vw, 8rem);
    line-height: .75;
    letter-spacing: -.11em
}

.project--north em {
    align-self: end;
    font-size: clamp(1rem, 1.7vw, 2rem);
    font-weight: 800;
    text-align: right
}

.project--mera .poster {
    display: grid;
    place-items: center;
    background: var(--ink);
    color: var(--paper)
}

.project--mera .poster:before,
.project--mera .poster:after {
    content: "";
    position: absolute;
    width: 145%;
    border-top: 1px solid var(--paper);
    transform: rotate(45deg);
    opacity: .55
}

.project--mera .poster:after {
    transform: rotate(-45deg)
}

.project--mera .poster strong {
    position: relative;
    z-index: 1;
    font-family: var(--display);
    font-size: clamp(4rem, 7vw, 10rem);
    line-height: .7;
    letter-spacing: -.12em;
    transform: rotate(-90deg)
}

.project--mera .poster i {
    position: absolute;
    top: 12%;
    font-size: .68rem;
    font-style: normal;
    font-weight: 800;
    letter-spacing: .15em
}

.project--mera .poster span {
    position: absolute;
    right: 14%;
    bottom: 10%;
    width: 2px;
    height: 43%;
    background: var(--red);
    box-shadow: 10px 35px var(--red), 20px 10px var(--red), 30px 58px var(--red)
}

.project--ugol .poster {
    padding: 1.3rem;
    background: #d6c697
}

.project--ugol strong {
    font-family: var(--display);
    font-size: clamp(3rem, 5vw, 7rem);
    letter-spacing: -.1em
}

.project--ugol b,
.project--ugol em {
    position: absolute;
    display: flex;
    align-items: end;
    width: 48%;
    aspect-ratio: .72;
    padding: .8rem;
    background: var(--red);
    font-family: var(--display);
    font-size: clamp(1.6rem, 3vw, 4.2rem);
    font-style: normal;
    line-height: .78;
    letter-spacing: -.08em;
    transform: rotate(-8deg)
}

.project--ugol b {
    left: 8%;
    top: 33%
}

.project--ugol em {
    right: 7%;
    top: 38%;
    background: var(--ink);
    color: var(--paper);
    transform: rotate(8deg)
}

.manifesto {
    position: relative;
    min-height: clamp(650px, 54vw, 1200px);
    overflow: hidden;
    background: var(--ink);
    color: var(--paper)
}

.manifesto:after {
    content: "★";
    position: absolute;
    right: -8%;
    bottom: -19%;
    color: var(--red);
    font-size: clamp(24rem, 52vw, 72rem);
    line-height: .7
}

.manifesto h2 {
    position: relative;
    z-index: 1;
    margin-top: clamp(3rem, 8vw, 12rem);
    font-size: clamp(5rem, 13vw, 20rem)
}

.manifesto-copy {
    position: relative;
    z-index: 1;
    max-width: 370px;
    margin: clamp(2rem, 5vw, 7rem) 0 0 45%;
    font-size: clamp(.9rem, 1.1vw, 1.3rem);
    line-height: 1.5
}

.seal {
    position: absolute;
    z-index: 1;
    bottom: 12%;
    left: 14%;
    display: grid;
    place-content: center;
    width: clamp(6rem, 10vw, 12rem);
    height: clamp(6rem, 10vw, 12rem);
    border-radius: 50%;
    background: var(--paper);
    color: var(--ink);
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.5vw, 3rem);
    line-height: .7;
    text-align: center;
    transform: rotate(-13deg)
}

.seal small {
    font: 700 .38em var(--sans);
    letter-spacing: .08em
}

.about {
    display: grid;
    grid-template-columns: 1fr 1fr
}

.about-poster {
    display: grid;
    place-items: center;
    min-height: clamp(500px, 50vw, 1000px);
    padding: 2rem;
    overflow: hidden;
    background: var(--red);
    font-family: var(--display);
    font-size: clamp(4rem, 7.8vw, 12rem);
    line-height: .76;
    letter-spacing: -.1em
}

.about-poster:before {
    content: "";
    position: absolute;
    width: 90%;
    height: 125%;
    background: repeating-linear-gradient(90deg, transparent 0 24%, var(--ink) 24.5% 25%, transparent 25.5% 49%), repeating-linear-gradient(0deg, transparent 0 24%, var(--ink) 24.5% 25%, transparent 25.5% 49%);
    transform: rotate(28deg) scale(1.45)
}

.about-poster div {
    z-index: 1
}

.about-poster i {
    color: var(--paper);
    font-style: normal
}

.about-copy {
    padding: clamp(4rem, 10vw, 15rem) clamp(1.5rem, 7vw, 11rem)
}

.about-copy h2 {
    margin: clamp(2rem, 5vw, 6rem) 0 1.4rem;
    font-size: clamp(3.5rem, 6vw, 9rem)
}

.about-copy .lead {
    font-size: clamp(1rem, 1.25vw, 1.45rem);
    font-weight: 700
}

.about-copy dl {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
    margin: clamp(2rem, 5vw, 6rem) 0
}

.about-copy dl div {
    border-top: 2px solid var(--ink)
}

dt {
    padding-top: .5rem;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 4rem);
    letter-spacing: -.1em
}

dd {
    margin: .5rem 0;
    font-size: .62rem;
    font-weight: 800
}

.about-copy>a {
    border-bottom: 2px solid var(--ink);
    padding-bottom: .4rem;
    font-weight: 800
}

.services {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 4rem;
    border-top: 1px solid var(--line)
}

.services ol {
    margin: 0;
    padding: 0;
    list-style: none
}

.services li {
    display: grid;
    grid-template-columns: 10% 1fr 35%;
    gap: 1rem;
    align-items: baseline;
    padding: 1.4rem 0;
    border-top: 1px solid var(--ink)
}

.services li:last-child {
    border-bottom: 1px solid var(--ink)
}

.services li span {
    font-weight: 800
}

.services h3 {
    margin: 0;
    font-family: var(--display);
    font-size: clamp(1.8rem, 3vw, 4.5rem);
    line-height: .85;
    letter-spacing: -.08em
}

.services li p {
    margin: 0;
    font-size: .75rem;
    letter-spacing: 0
}

.contact {
    background: var(--red)
}

.contact h2 {
    margin-top: clamp(2rem, 7vw, 10rem);
    font-size: clamp(4.5rem, 12vw, 19rem)
}

.contact h2 i {
    color: var(--paper)
}

.telegram {
    display: inline-block;
    margin-top: clamp(2rem, 5vw, 7rem);
    border-bottom: 3px solid var(--ink);
    padding-bottom: .4rem;
    font-family: var(--display);
    font-size: clamp(1.2rem, 3vw, 4rem);
    letter-spacing: -.06em
}

.contact>div {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(4rem, 9vw, 12rem);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .06em
}

.contact a:hover {
    color: var(--paper)
}

footer {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: 1.2rem clamp(1.2rem, 8vw, 13rem);
    background: var(--ink);
    color: var(--paper);
    font-size: .6rem;
    font-weight: 700;
    letter-spacing: .04em
}

footer a:hover {
    color: var(--red)
}

html.js .reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: .7s cubic-bezier(.2, .7, .2, 1)
}

html.js .is-visible {
    opacity: 1;
    transform: none
}

@media(max-width:800px) {
    .topbar {
        align-items: flex-start
    }

    .topbar nav {
        display: none
    }

    .topbar-contact {
        margin-top: .2rem
    }

    .hero {
        min-height: 680px
    }

    .hero:before {
        right: 82%
    }

    .hero-side {
        display: none
    }

    .hero h1 {
        font-size: clamp(4rem, 18vw, 7rem)
    }

    .hero-radiance {
        width: 130%;
        height: 70%
    }

    .hero-architecture {
        width: 85%;
        height: 48%
    }

    .hero-cta {
        right: 9%;
        bottom: 13%;
        font-size: .9rem
    }

    .hero-letter {
        width: 65%;
        right: -5%
    }

    .section-head {
        grid-template-columns: 1fr;
        gap: 1.2rem
    }

    .projects {
        grid-template-columns: 1fr;
        gap: 3rem
    }

    .poster {
        min-height: 420px
    }

    .manifesto-copy {
        margin-left: 17%;
        max-width: 280px
    }

    .seal {
        left: 7%;
        bottom: 7%
    }

    .about {
        grid-template-columns: 1fr
    }

    .about-poster {
        min-height: 460px
    }

    .services {
        grid-template-columns: 1fr;
        gap: 2rem
    }

    .services li {
        grid-template-columns: 12% 1fr
    }

    .services li p {
        grid-column: 2
    }

    .contact>div,
    footer {
        flex-direction: column
    }

    .contact>div {
        gap: 1rem
    }

    .ticker-track {
        animation-duration: 18s
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior: auto
    }

    .ticker-track {
        animation: none
    }

    html.js .reveal {
        opacity: 1;
        transform: none;
        transition: none
    }
}

:root {
    --hero-image: 1
}

.hero:before {
    z-index: 1;
    mix-blend-mode: multiply
}

.hero-image {
    position: absolute;
    z-index: 0;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center
}

.hero h1 {
    z-index: 2
}

.process {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    background: var(--red)
}

.process ol {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    padding: 0;
    list-style: none;
    border-top: 2px solid var(--ink);
    border-left: 2px solid var(--ink)
}

.process li {
    min-height: clamp(12rem, 18vw, 22rem);
    padding: 1.2rem;
    border-right: 2px solid var(--ink);
    border-bottom: 2px solid var(--ink)
}

.process li b {
    font-family: var(--display);
    font-size: clamp(2rem, 4vw, 5rem);
    letter-spacing: -.1em
}

.process li h3 {
    margin: clamp(2rem, 4vw, 5rem) 0 .4rem;
    font-family: var(--display);
    font-size: clamp(1.5rem, 2.6vw, 3.5rem);
    line-height: .8;
    letter-spacing: -.08em
}

.process li p {
    margin: 0;
    letter-spacing: 0
}

@media(max-width:800px) {
    .hero-image {
        object-position: 60% center
    }

    .process {
        grid-template-columns: 1fr;
        gap: 2rem
    }
}