/* ==========================================================================
   Soda — visual contract
   Figma page: test fede 2 (1808:2). Home 2058:1495 / 1502 / 1511 / 1520;
   Info 2058:1529 / 1548 / 1568 / 1589.
   ========================================================================== */

@font-face {
    font-family: "Times Now";
    src:
        url("../fonts/TimesNow-Light.woff2") format("woff2"),
        url("../fonts/TimesNow-Light.woff") format("woff");
    font-style: normal;
    font-weight: 300;
    font-display: swap;
}

:root {
    --soda-white: #ffffff;
    --soda-black: #1c1c1c;
    --edge: 15px;
    --media-inset: 4.1494252874vw;

    /* Figma style “General” resolves internally to the supplied Times Now Light. */
    --font-body: "Times Now", "General", "Times New Roman", Times, serif;
    --fs-body: 20px;
    --lh-ratio: 1.05;
    --lh-step: 21px;
    --tracking-body: -0.6px;

    --fade-ms: 600ms;
    --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --info-motion-ms: 850ms;
    --info-motion-ease: cubic-bezier(0.77, 0, 0.175, 1);
    --info-footer-height: 51px;
    --info-push: calc(100svh - var(--info-footer-height));

    --z-stage: 1;
    --z-header: 3;
    --z-info: 4;
    --z-cursor: 9;
}

/* ==========================================================================
   Reset
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}

body {
    overflow: hidden;
    background: var(--soda-white);
    color: var(--soda-black);
    font-family: var(--font-body);
    font-size: var(--fs-body);
    font-weight: 300;
    line-height: var(--lh-ratio);
    letter-spacing: var(--tracking-body);
    -webkit-font-smoothing: antialiased;
}

img,
video {
    display: block;
    max-width: 100%;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

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

ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

p {
    margin: 0;
}

.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

::selection {
    background: var(--soda-black);
    color: var(--soda-white);
}

::-moz-selection {
    background: var(--soda-black);
    color: var(--soda-white);
}

:focus-visible {
    outline: 1px solid var(--soda-black);
    outline-offset: 3px;
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: fixed;
    inset: var(--edge) var(--edge) auto var(--edge);
    z-index: var(--z-header);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.5rem;
    pointer-events: none;
    transition: transform var(--info-motion-ms) var(--info-motion-ease);
}

.site-header__title,
.site-header__info {
    position: relative;
    z-index: 1;
    pointer-events: auto;
    cursor: pointer;
}

.site-header__title,
.site-header__info {
    line-height: var(--lh-step);
}

.site-header__info {
    white-space: nowrap;
}

.site-header__project {
    position: fixed;
    top: var(--edge);
    left: calc(20.6383vw + 142.851px);
    display: flex;
    gap: 28px;
    max-width: calc(79.3617vw - 242.851px);
    line-height: var(--lh-step);
    transition: opacity 180ms var(--ease);
    white-space: nowrap;
    pointer-events: none;
}

.site-header__project[hidden] {
    display: none;
}

.site-header__project-count {
    font-variant-numeric: tabular-nums;
}

.site-header__project-title {
    overflow: hidden;
    text-overflow: ellipsis;
}

body.info-open .site-header,
body.info-open .stage {
    transform: translate3d(0, var(--info-push), 0);
}

body.info-open .site-header {
    z-index: calc(var(--z-info) + 1);
}

body.info-open .site-header::before {
    content: "";
    position: absolute;
    inset: calc(-1 * var(--edge));
    z-index: -1;
    background: var(--soda-white);
}

body.info-open .site-header__project,
body.info-open .site-header__info {
    opacity: 0;
    pointer-events: none;
}

/* ==========================================================================
   Stage
   ========================================================================== */

.stage {
    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    touch-action: pan-y;
    overscroll-behavior-x: contain;
    transition: transform var(--info-motion-ms) var(--info-motion-ease);
    will-change: transform;
}

.stage__viewport {
    position: absolute;
    inset: var(--media-inset);
    z-index: var(--z-stage);
}

.slide {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--fade-ms) var(--ease), visibility 0s linear var(--fade-ms);
}

.slide.is-active {
    opacity: 1;
    visibility: visible;
    transition: opacity var(--fade-ms) var(--ease), visibility 0s;
}

.slide__media {
    width: 100%;
    height: 100%;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    -webkit-user-drag: none;
}

@media (min-width: 1025px) {
    .slide__media {
        max-width: var(--slide-media-max-width, 100%);
        max-height: var(--slide-media-max-height, 100%);
    }

    .slide[data-slide-key="home"] .slide__media {
        max-height: min(
            var(--slide-media-max-height, 100%),
            calc(29.7872vw + 134.724px)
        );
    }
}

.stage__empty,
.stage__noscript {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* ==========================================================================
   Custom cursor — exact Figma Resources arrow, rotated across the midpoint
   ========================================================================== */

.soda-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: var(--z-cursor);
    width: 25.575px;
    height: 8.5px;
    pointer-events: none;
    opacity: 0;
    transform: translate3d(-100px, -100px, 0);
    transition: opacity 180ms var(--ease);
    will-change: transform;
}

.soda-cursor.is-visible {
    opacity: 1;
}

.soda-cursor__arrow {
    width: 25.575px;
    height: 8.5px;
    max-width: none;
    transform: translate(-50%, -50%) rotate(0deg);
    transform-origin: 50% 50%;
    transition: transform 320ms var(--ease);
}

.soda-cursor.is-left .soda-cursor__arrow {
    transform: translate(-50%, -50%) rotate(180deg);
}

body.has-custom-cursor,
body.has-custom-cursor .stage,
body.has-custom-cursor .stage * {
    cursor: none;
}

body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor [data-native-cursor] {
    cursor: pointer;
}

body.has-custom-cursor.info-open,
body.has-custom-cursor.info-open .info {
    cursor: auto;
}

body.info-open .soda-cursor {
    opacity: 0;
}

/* ==========================================================================
   Info overlay — desktop default (1280 and 2048 source frames)
   ========================================================================== */

.info {
    position: fixed;
    inset: 0;
    z-index: var(--z-info);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--soda-white);
    opacity: 1;
    transform: translate3d(0, -100%, 0);
    visibility: hidden;
    transition:
        transform var(--info-motion-ms) var(--info-motion-ease),
        visibility 0s linear var(--info-motion-ms);
    will-change: transform;
}

.info.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
    transition:
        transform var(--info-motion-ms) var(--info-motion-ease),
        visibility 0s;
}

.info[hidden] {
    display: block;
}

.info__inner {
    position: relative;
    min-height: 100%;
}

.info__header {
    position: absolute;
    top: 18px;
    right: 18px;
    left: var(--edge);
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
}

.info__description,
.info__label,
.info__list,
.info__text {
    line-height: var(--lh-step);
}

.info__close {
    width: 22px;
    height: 22px;
    cursor: pointer;
}

.info__close img {
    width: 22px;
    height: 22px;
    max-width: none;
}

.info__description {
    position: absolute;
    top: var(--edge);
    left: var(--edge);
    width: clamp(937px, calc(67.1875vw + 77px), 1453px);
}

.info__contact {
    position: absolute;
    top: var(--edge);
    right: 5.47vw;
    z-index: 1;
    width: clamp(100px, 6.15vw, 126px);
}

.info__bottom {
    position: absolute;
    top: clamp(204px, calc(3.3854vw + 160.667px), 230px);
    right: var(--edge);
    bottom: auto;
    left: var(--edge);
    display: grid;
    grid-template-columns:
        calc(30.9896vw - 23.667px)
        calc(29.4271vw - 50.667px)
        calc(30.8594vw - 1px)
        minmax(0, 1fr);
    align-items: start;
    height: auto;
}

.info__column {
    align-self: start;
}

.info__column--location {
    width: clamp(239px, 14.26vw, 292px);
}

.info__label {
    margin-bottom: var(--lh-step);
}

.info__column--services .info__list,
.info__column--clients .info__list,
.info__contact .info__list {
    white-space: nowrap;
}

.info__contact a {
    opacity: 1;
    transition: opacity 180ms var(--ease);
}

.info__contact a:hover,
.info__contact a:focus-visible {
    opacity: 0.45;
}

.info__pending {
    opacity: 0.45;
}

.info__clock {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ==========================================================================
   Tablet — exact source frame is 800×682
   ========================================================================== */

@media (max-width: 1024px) {
    .slide__media {
        max-width: 73.125vw;
    }

    .site-header__project {
        left: 47vw;
        max-width: calc(53vw - 100px);
    }

    .info__description {
        top: var(--edge);
        width: min(911px, calc(100vw - 113px));
    }

    .info__contact {
        top: 167px;
        right: var(--edge);
        width: calc((100vw - 232px) / 3);
    }

    .info__bottom {
        top: 167px;
        right: var(--edge);
        bottom: auto;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        grid-template-rows: auto auto;
        column-gap: 101px;
        row-gap: 59px;
        height: auto;
    }

    .info__column--services {
        grid-column: 1;
        grid-row: 1;
    }

    .info__column--clients {
        grid-column: 2;
        grid-row: 1;
    }

    .info__column--location {
        grid-column: 1;
        grid-row: 2;
        width: calc((100vw - 208px) / 3);
    }

    .info__column--time {
        grid-column: 3;
        grid-row: 2;
    }
}

/* ==========================================================================
   Mobile — Home 375×682; Info 375×1177
   ========================================================================== */

@media (max-width: 600px) {
    .site-header {
        right: var(--edge);
        gap: 0;
    }

    .site-header__title {
        position: fixed;
        top: 22px;
        left: 50%;
        max-width: calc(100vw - 30px);
        line-height: 16px;
        letter-spacing: -0.4px;
        transform: translateX(-50%);
        white-space: nowrap;
    }

    .site-header__info {
        position: fixed;
        right: var(--edge);
        bottom: var(--edge);
        line-height: 16px;
        letter-spacing: -0.4px;
    }

    .site-header__project {
        top: auto;
        right: auto;
        bottom: 13px;
        left: 17px;
        gap: 24px;
        max-width: calc(100vw - 90px);
        line-height: 18px;
        letter-spacing: -0.4px;
    }

    .stage__viewport {
        inset: 0 var(--edge);
    }

    .slide__media {
        max-width: 100%;
        max-height: 100%;
    }

    .info__inner {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        padding-bottom: var(--edge);
    }

    .info__header {
        position: sticky;
        top: 0;
        right: 0;
        left: 0;
        height: 66px;
        padding: 18px 18px 0 var(--edge);
        background: var(--soda-white);
    }

    .info__description {
        position: static;
        order: 1;
        width: auto;
        margin: 18px var(--edge) 0;
    }

    .info__contact {
        position: static;
        order: 3;
        width: auto;
        margin: 50px var(--edge) 0;
    }

    .info__bottom {
        position: static;
        order: 2;
        display: flex;
        flex-direction: column;
        gap: 50px;
        margin: 35px var(--edge) 0;
    }

    .info__column {
        position: static;
    }

    .info__column--location {
        width: 239px;
    }

    .info__column--location,
    .info__column--time {
        margin-top: 0;
    }

    .soda-cursor {
        display: none;
    }

    body.info-open .site-header {
        transform: none;
    }

    body.info-open .site-header::before {
        content: none;
    }

    body.info-open .site-header__title {
        top: var(--edge);
        left: var(--edge);
        line-height: var(--lh-step);
        letter-spacing: var(--tracking-body);
        transform: none;
    }
}

@media (hover: none), (pointer: coarse) {
    .soda-cursor {
        display: none;
    }

    body.has-custom-cursor,
    body.has-custom-cursor .stage {
        cursor: auto;
    }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    :root {
        --fade-ms: 1ms;
    }

    .slide,
    .slide.is-active,
    .site-header,
    .stage,
    .info,
    .soda-cursor,
    .soda-cursor__arrow,
    .info__contact a {
        transition-duration: 1ms;
    }
}