@font-face {
    font-family: "Roslindale Condensed";
    src: url('../fonts/roslindale-displayCondensedLight.woff');
}


@font-face {
    font-family: "neue-haas";
    src: url('../fonts/neueHaasDisplay.ttf');
    font-weight: 400;
}

@font-face {
    font-family: "neue-haas";
    src: url('../fonts/neueHaasDisplayMediu.ttf');
    font-weight: 500;
}

.atticsalt-pages {
    background-color: black;
    color: #f5f5f5;
    font-family: "neue-haas", sans-serif;
}

.atticsalt-container {
    max-width: 1920px;
    margin: 0 auto;
}

.atticsalt-main {
    padding: 10rem;
}

.atticsalt-header {
    margin-bottom: 3rem;
}

.atticsalt-title {
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: 1.5rem 0;
    cursor: pointer;
    border-bottom: 1px solid #ffffff80;
}

.atticsalt-pages :is(h1, h2, h3, h4) {
    font-family: "Roslindale Condensed", sans-serif;
}

.atticsalt-title h1 {
    margin: 0;
    font-size: 4rem;
    font-weight: 300;
    line-height: 1.05;
    font-family: "Roslindale Condensed", sans-serif;
}

.atticsalt-title .btn {
    border: 0;
    padding: 0;
    font-size: 1.2rem;
    color: white;
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    transition: 0.2s ease;
}

.atticsalt-title .btn svg {
    width: 1.3rem;
    transition: 0.2s ease;
}

.atticsalt-title .btn.active-btn svg {
    transform: rotate(45deg);
}

.atticsalt-title .btn:hover {
    opacity: 0.5;
}

.atticsalt-body {
    padding: 3rem 0;
    display: grid;
    grid-template-columns: 5fr 1fr;
    gap: 2rem 5rem;
    border-bottom: 1px solid #ffffff80;
}

.atticsalt-body-content {
    height: 0;
    transform-origin: top;
    transform: scaleY(0);
    overflow: hidden;
    transition: transform 0.5s ease, height 0.25s ease;
}

.atticsalt-body-content.active-content {
    height: 100%;
    transform: scaleY(1);
}

.atticsalt-body-text {
    width: 100%;
    max-width: 52rem;
}

.atticsalt-body h2 {
    font-size: 2.8rem;
    font-weight: 300;
    letter-spacing: 1px;
    line-height: 1.05;
    margin-bottom: 1rem;
}

.atticsalt-body-text p {
    letter-spacing: .3px;
    margin-bottom: 15px;
    padding-bottom: 0;
    font-size: 1.2rem;
    line-height: 1.6;
}

.atticsalt-body-scope p {
    text-transform: uppercase;
    margin-bottom: 0.5rem !important;
    font-weight: 500;
    letter-spacing: 1px;
}

.atticsalt-body-scope li+li {
    margin-top: 0.375rem;
}

.atticsalt-body-scope li {
    color: #f5f5f5;
    opacity: 0.5;
    font-size: .8rem;
    letter-spacing: 1px;
}

.text-size-tiny {
    font-size: .75rem;
    line-height: 1.6;
}

.atticsalt-hero {
    width: 100%;
    position: relative;
    color: white;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16 / 9;
}

.atticsalt-hero-video,
.atticsalt-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.atticsalt-hero-video {
    background-position: 50%;
    background-size: cover;
}

.freespade-hero-img .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content.jpg');
}

.freespade-hero-img .atticsalt-hero-video1 {
    background-image: url('../images/case-studies/freespade/hero-content1.jpg');
}

.atticsalt-main section+section {
    margin-top: 2rem;
}

.atticsalt-text {
    width: 100%;
    max-width: 48rem;
    margin: 0 auto;
    padding: 8vw 0;
}

.atticsalt-main p {
    margin-bottom: 15px;
}

.atticsalt-text-medium {
    letter-spacing: .2px;
    font-size: 2rem;
    font-weight: 400;
    line-height: 1.2;
}

.atticsalt-text-base {
    letter-spacing: .3px;
    font-size: 1.2rem;
    line-height: 1.6;
    margin: 0;
}

.freespade-row,
.freespade-row2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    flex-wrap: wrap;
    gap: 2rem;
}

.freespade-row2 {
    grid-template-columns: 1fr 1fr 1fr;
}

.freespade-col {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

.freespade-row2 .freespade-col {
    aspect-ratio: 1 / 1;
}

.freespade-col img,
.freespade-col video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background-position: 50%;
    background-size: cover;
}

.freespade-cta .freespade-col.freespade-cta-img:nth-child(1) video {
    background-image: url('../images/case-studies/freespade/hero-cta1.jpg');
}

.freespade-cta .freespade-col.freespade-cta-img:nth-child(2) video {
    background-image: url('../images/case-studies/freespade/hero-cta2.jpg');
}

.atticsalt-text2 {
    width: 100%;
    max-width: 48rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 8vw 6vw;
}

.freespade-cta1 .freespade-col:nth-child(2) video {
    background-image: url('../images/case-studies/freespade/hero-cta3.jpg');
}

.freespade-hero-img2 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content2.jpg');
}

.freespade-hero-img3 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content3.jpg');
}

.freespade-hero-img4 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content4.jpg');
}

.freespade-hero-img5 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content5.jpg');
}

.freespade-hero-img6 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content6.jpg');
}

.freespade-hero-img7 .atticsalt-hero-video {
    background-image: url('../images/case-studies/freespade/hero-content7.jpg');
}

.atticsalt-hero>img {
    object-fit: cover;
    height: 100%;
    width: 100%;
}

.freespade-row4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.freespade-row4 .freespade-col {
    aspect-ratio: 1 / 1;
}

.atticsalt-hero.h-auto {
    aspect-ratio: unset;
}

.freespade-col.h-auto {
    aspect-ratio: unset;
}

.freespade-col.h-auto>img {
    border-radius: inherit;
}