/*
 * Brand marks newer than the FontAwesome bundled with this theme.
 *
 * The bundle is version 5 and predates X's rebrand, which is the only reason the old head
 * loaded kit.fontawesome.com on every page — a request to another company, before any consent,
 * for a single icon. Masked from an inline data URI instead: same markup, same size, nothing
 * leaves the server.
 */
.fa-x-twitter::before {
    content: "";
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: -0.125em;
    background-color: currentColor;
    -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzg5LjIgNDhoNzAuNkwzMDUuNiAyMjQuMiA0ODcgNDY0SDM0NUwyMzMuNyAzMTguNiAxMDYuNSA0NjRIMzUuOEwyMDAuNyAyNzUuNSAyNi44IDQ4SDE3Mi40TDI3Mi45IDE4MC45IDM4OS4yIDQ4ek0zNjQuNCA0MjEuOGgzOS4xTDE1MS4xIDg4aC00MkwzNjQuNCA0MjEuOHoiLz48L3N2Zz4=") center / contain no-repeat;
    mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48cGF0aCBkPSJNMzg5LjIgNDhoNzAuNkwzMDUuNiAyMjQuMiA0ODcgNDY0SDM0NUwyMzMuNyAzMTguNiAxMDYuNSA0NjRIMzUuOEwyMDAuNyAyNzUuNSAyNi44IDQ4SDE3Mi40TDI3Mi45IDE4MC45IDM4OS4yIDQ4ek0zNjQuNCA0MjEuOGgzOS4xTDE1MS4xIDg4aC00MkwzNjQuNCA0MjEuOHoiLz48L3N2Zz4=") center / contain no-repeat;
}

/*
 * The drawn map behind the contact heading, written into the page so it can read the accent.
 * Sized like the background image it replaces.
 */
/* Attribution for the drawn map. OpenStreetMap's licence asks for the credit to be visible,
   so it sits in the corner of the backdrop rather than in a comment nobody reads. */
.bg-credit {
    position: absolute;
    right: 12px;
    bottom: 8px;
    margin: 0;
    font-size: 11px;
    line-height: 1;
    letter-spacing: 0.02em;
    color: rgba(255, 255, 255, 0.28);
    z-index: 2;
}

.bg-credit a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
}

.bg-credit a:hover {
    color: rgba(255, 255, 255, 0.5);
}


/* A sentence under the title of an inner hero. The theme has a subtitle slot on these pages,
   but it is the absolutely-positioned bottom-left one the breadcrumb uses. */
.section.started.section-title .started-content .hero-note {
    margin: 28px auto 0;
    max-width: 620px;
    font-size: 20px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.55);
    text-align: center;
}

.section.started.section-title .started-content .hero-note p {
    margin: 0 0 12px;
    font-size: 20px;
    line-height: 1.6;
}

.section.started.section-title .started-content .hero-note p:last-child {
    margin-bottom: 0;
}

.section.started.section-title .started-content .hero-note a {
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
}

.section.started.section-title .started-content .hero-note a:hover {
    border-bottom-color: #fff;
}

/* One screen, nothing under it: the whole page is a number, two sentences and a way back. */
html:has(body.single-screen),
body.single-screen {
    overflow: hidden;
}

/* ---------------------------------------------------------------------------
   Project detail
   ---------------------------------------------------------------------------
   The theme has no single-project layout — the original site's project "page" was an iframe
   of the client's website. These are the pieces that page needed, written in the theme's own
   idiom: the accent comes from --primary-color like everything else, the logo swap is the one
   the client strip already does, and nothing here is a utility class.
   --------------------------------------------------------------------------- */

.section.project-bar {
    padding-top: 40px;
    padding-bottom: 0;
}

.project-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 24px 32px;
    padding: 22px 28px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.project-bar__client {
    display: flex;
    align-items: center;
    gap: 18px;
    min-width: 0;
}

/* The same fade the logo strip uses. Two images stacked, the colour one on top, revealed on
   hover — the marks are separate artwork, not one desaturated. */
.project-bar__logo {
    position: relative;
    display: block;
    flex: 0 0 auto;
    /* Alone in its corner of the bar now, so it can be the size a logo should be. */
    width: 168px;
    height: 52px;
}

.project-bar__logo img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left center;
    transition: opacity 0.3s ease;
}

.project-bar__logo .hover_img {
    opacity: 0;
}

.project-bar__inner:hover .project-bar__logo .hover_img {
    opacity: 1;
}

.project-bar__inner:hover .project-bar__logo img:first-child {
    opacity: 0;
}

.project-bar__name {
    display: block;
    min-width: 0;
}

.project-bar__name strong {
    font-size: 17px;
    font-weight: 500;
    color: #fff;
}

.project-bar__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.project-tag {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 100px;
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.6);
}

.project-tag--fin {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.project-tag i {
    font-size: 11px;
}

/* Pushed to the far end of the bar: it is the one thing on this page that leaves the site,
   and it should read as the deliberate exit rather than as another tag. */
.project-bar__out {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    padding: 13px 26px;
    border-radius: 100px;
    background: var(--primary-color);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    transition: transform 0.25s ease, filter 0.25s ease;
}

.project-bar__out:hover {
    color: #111;
    filter: brightness(1.12);
    transform: translateX(3px);
}

.project-text {
    /* The theme indents its section titles by 35px; the text under one lines up with it. */
    margin-left: 35px;
    max-width: 760px;
    font-size: 17px;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.65);
}

.project-text p {
    margin: 0 0 18px;
    font-size: 17px;
    line-height: 1.75;
}

.project-text p:last-child {
    margin-bottom: 0;
}

.project-text strong {
    color: #fff;
    font-weight: 500;
}

/* Wide shot and phone side by side, in the proportions they were taken at. */
.project-shots {
    margin-left: 35px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 24px;
}

.project-shot {
    position: relative;
    display: block;
    flex: 1 1 520px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    line-height: 0;
}

.project-shot--phone {
    flex: 0 1 260px;
}

.project-shot img {
    width: 100%;
    height: auto;
    transition: transform 0.5s ease, opacity 0.3s ease;
}

.project-shot:hover img {
    transform: scale(1.03);
    opacity: 0.75;
}

.project-shot__zoom {
    position: absolute;
    right: 16px;
    bottom: 16px;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    color: #111;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.project-shot:hover .project-shot__zoom {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .project-bar__inner {
        padding: 20px;
    }

    .project-bar__out {
        margin-left: 0;
        width: 100%;
        justify-content: center;
    }

    .project-shot,
    .project-shot--phone {
        flex: 1 1 100%;
    }

    /* The 35px that lines text up with a section title is width worth having on a phone. */
    .project-text,
    .project-shots {
        margin-left: 0;
    }
}

/* A project's backdrop is a screenshot of somebody else's website — their header included,
   and it lands directly behind ours, so the hero showed two menus stacked on each other.
   Blurred, it becomes what it should have been all along: the colour and the mood of the
   client's brand behind the title, with the site itself shown properly in the gallery below.
   The scale keeps the blur from bleeding a soft edge in. */
.project-page .video-bg.jarallax {
    transform: scale(1.08);
    filter: blur(14px) saturate(1.15);
}

/* Darkest where our own text sits — the menu at the top, the breadcrumb at the bottom — and
   lightest across the middle, where the client's colours are the point. A flat mask either
   washed the backdrop out or left their header competing with ours. */
.project-page .video-bg-mask {
    opacity: 1;
    background: linear-gradient(
        180deg,
        rgba(16, 16, 16, 0.93) 0%,
        rgba(16, 16, 16, 0.62) 34%,
        rgba(16, 16, 16, 0.66) 66%,
        rgba(16, 16, 16, 0.88) 100%
    );
}

/* The gallery carousel: the site's key screens, with the phone beside them. */
.project-gallery {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 26px;
    margin-left: 35px;
}

.project-carousel {
    position: relative;
    flex: 1 1 620px;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
}

.project-carousel .swiper-slide {
    line-height: 0;
}

.project-carousel img {
    width: 100%;
    height: auto;
}

.project-carousel__prev,
.project-carousel__next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    margin-top: -22px;
    border-radius: 50%;
    background: rgba(16, 16, 16, 0.72);
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.3s ease;
}

.project-carousel__prev { left: 16px; }
.project-carousel__next { right: 16px; }

.project-carousel:hover .project-carousel__prev,
.project-carousel:hover .project-carousel__next {
    opacity: 1;
}

.project-carousel__prev:hover,
.project-carousel__next:hover {
    background: var(--primary-color);
    color: #111;
}

.project-carousel .swiper-pagination {
    position: absolute;
    bottom: 14px;
    left: 0;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.project-carousel .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    margin: 0 4px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}

.project-carousel .swiper-pagination-bullet-active {
    width: 22px;
    border-radius: 4px;
    background: var(--primary-color);
}

/* The phone beside the carousel, at the carousel's height — one frame, because the phone is a
   different question about the same site and one look answers it.
   
   The image is taken out of the flow so the phone contributes no height of its own: stacked
   normally it is twice as tall as the thing it sits next to, and whichever of the two is
   taller decides the row. The carousel should decide it. */
.project-phones {
    position: relative;
    /* The width the phone needs to be exactly as tall as the carousel beside it: the wide
       frames are 1440x900 and the phone is 390x844, so the phone is 0.289 of the carousel's
       width, which is 22.4% of the pair. Anything else leaves dead space under one of them. */
    flex: 0 0 22.4%;
    align-self: stretch;
}

.project-phone-carousel {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.02);
}

.project-phone-carousel .swiper-wrapper,
.project-phone-carousel .swiper-slide {
    height: 100%;
}

.project-phone {
    display: block;
    height: 100%;
    line-height: 0;
}

.project-phone-carousel .swiper-pagination {
    position: absolute;
    bottom: 12px;
    left: 0;
    z-index: 3;
    width: 100%;
    text-align: center;
}

.project-phone-carousel .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    margin: 0 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
    opacity: 1;
    cursor: pointer;
    transition: background 0.25s ease, width 0.25s ease;
}

.project-phone-carousel .swiper-pagination-bullet-active {
    width: 18px;
    border-radius: 4px;
    background: var(--primary-color);
}

.project-phone img {
    width: 100%;
    height: 100%;
    /* contain, not cover: a cropped phone screenshot reads as a zoomed desktop, which is the
       opposite of what it is here to show. The column is 210px against a carousel that lands
       near 470px tall, which is the 390x844 frame almost exactly. */
    object-fit: contain;
    object-position: top center;
    transition: opacity 0.3s ease;
}

.project-phone:hover img {
    opacity: 0.72;
}

@media (max-width: 1024px) {
    .project-phones {
        flex: 0 0 26%;
    }
}

@media (max-width: 767px) {
    .project-gallery {
        margin-left: 0;
        gap: 16px;
    }

    /* No phone frame on a phone: the reader is holding the answer. */
    .project-phones {
        display: none;
    }

    .project-carousel__prev,
    .project-carousel__next {
        opacity: 1;
    }
}