/* =========================================================

   DEVSID.IN — WORK PAGE

   ========================================================= */



:root {

    --ds-black: #090909;

    --ds-dark: #111111;

    --ds-paper: #f3f3ef;

    --ds-orange: #ff914d;

    --ds-grey: #8c8c86;

    --ds-line: rgba(9, 9, 9, .14);

    --ds-line-light: rgba(243, 243, 239, .16);

}



* {

    box-sizing: border-box;

}



html {

    scroll-behavior: smooth;

}



body.work-page {

    margin: 0;

    background: var(--ds-paper);

    color: var(--ds-black);

    font-family: "Manrope", sans-serif;

}



.work-page a {

    color: inherit;

    text-decoration: none;

}



.work-container {

    width: min(1240px, calc(100% - 80px));

    margin: 0 auto;

}



.work-kicker,

.section-number,

.case-meta,

.case-label,

.work-cta-label,

.capability > span,

.testimonial-person > span {

    font-family: "DM Mono", monospace;

    font-size: 10px;

    line-height: 1.3;

    letter-spacing: .05em;

    text-transform: uppercase;

}



.work-kicker b,

.section-number b,

.work-cta-label b {

    color: var(--ds-orange);

    font-weight: 500;

}





/* =========================================================

   HERO

   ========================================================= */



.work-hero {

    padding: 150px 0 125px;

    background: var(--ds-paper);

}



.work-kicker {

    display: flex;

    justify-content: space-between;

    gap: 30px;

    padding-bottom: 22px;

    border-bottom: 1px solid var(--ds-line);

}



.work-hero-grid {

    display: grid;

    grid-template-columns: minmax(0, 1.55fr) minmax(280px, .45fr);

    gap: 80px;

    padding-top: 55px;

}



.work-hero-heading h1 {

    margin: 0;

    font-size: clamp(70px, 9vw, 145px);

    line-height: .88;

    letter-spacing: -.075em;

    font-weight: 800;

}



.work-hero-heading h1 span {

    background: linear-gradient(

        45deg,

        #ff914d 0%,

        #a02d37 50%,

        #383838 100%

    );



    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    color: transparent;

}



.work-hero-copy {

    align-self: end;

    padding-bottom: 5px;

}



.work-hero-copy p {

    max-width: 350px;

    margin: 0 0 20px;

    font-size: 15px;

    line-height: 1.65;

}



.work-hero-copy p + p {

    color: #777771;

}



.work-scroll-link {

    display: inline-flex;

    align-items: center;

    gap: 28px;

    margin-top: 35px;

    padding-bottom: 8px;

    border-bottom: 1px solid var(--ds-black);

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;

    transition: gap .25s ease;

}



.work-scroll-link:hover {

    gap: 40px;

}





/* =========================================================

   SHARED SECTION INTRO

   ========================================================= */



.selected-work {

    padding: 0 0 130px;

}



.section-intro {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 50px;

    padding: 28px 0;

    border-top: 1px solid var(--ds-line);

}



.section-intro-copy {

    justify-self: end;

    max-width: 440px;

}



.section-intro-copy p {

    margin: 0;

    font-size: 14px;

    line-height: 1.65;

    color: #6f6f69;

}





/* =========================================================

   CASE STUDIES

   ========================================================= */



.case-study {

    margin-top: 110px;

}



.case-meta {

    display: grid;

    grid-template-columns: 55px 1fr 1fr;

    gap: 20px;

    padding-bottom: 17px;

    border-bottom: 1px solid var(--ds-line);

}



.case-meta span:last-child {

    justify-self: end;

    color: #777771;

}





/* Visuals */



.case-visual {

    position: relative;

    display: block;

    overflow: hidden;

    cursor: pointer;

}



.case-view {

    position: absolute;

    right: 24px;

    bottom: 22px;

    z-index: 5;



    display: flex;

    align-items: center;

    gap: 16px;



    padding: 10px 13px;



    background: rgba(9, 9, 9, .88);

    color: #fff;



    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;



    transform: translateY(8px);

    opacity: 0;



    transition:

        opacity .3s ease,

        transform .3s ease;

}



.case-visual:hover .case-view {

    opacity: 1;

    transform: translateY(0);

}





/* =========================================================

   LYNKTOWN

   ========================================================= */



.case-visual-lynktown {

    height: min(680px, 58vw);

    min-height: 480px;

    padding: 7vw 7vw 6vw;



    background:

        radial-gradient(circle at 78% 35%, rgba(255, 77, 25, .85), transparent 24%),

        linear-gradient(135deg, #202020 0%, #101010 48%, #2d2d2d 100%);

}



.lynk-browser {

    position: relative;

    width: 100%;

    height: 100%;

    background: #e9e9e5;

    box-shadow: 0 35px 80px rgba(0, 0, 0, .38);

    transform: rotate(-2deg);

    transition: transform .5s ease;

}



.case-visual-lynktown:hover .lynk-browser {

    transform: rotate(0deg) scale(1.015);

}



.browser-bar {

    height: 31px;

    display: flex;

    align-items: center;

    gap: 5px;

    padding: 0 12px;

    background: #111;

}



.browser-bar > span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #777;

}



.browser-bar small {

    margin-left: 12px;

    color: #888;

    font-family: "DM Mono", monospace;

    font-size: 7px;

}



.lynk-screen {

    position: relative;

    height: calc(100% - 31px);

    overflow: hidden;

    background: #e9e9e5;

}



.lynk-nav {

    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;

    padding: 18px 24px;

    font-family: "DM Mono", monospace;

}



.lynk-nav strong {

    margin-right: auto;

    font-family: "Manrope", sans-serif;

    font-size: 14px;

    letter-spacing: -.05em;

}



.lynk-nav strong span {

    color: var(--ds-orange);

}



.lynk-nav i {

    width: 28px;

    height: 1px;

    background: #111;

}



.lynk-main {

    position: relative;

    z-index: 2;

    padding: 7% 7%;

}



.lynk-kicker {

    font-family: "DM Mono", monospace;

    font-size: 7px;

    letter-spacing: .1em;

}



.lynk-title {

    margin-top: 14px;

    font-size: clamp(45px, 7vw, 100px);

    line-height: .82;

    letter-spacing: -.08em;

    font-weight: 800;

}



.lynk-title em {

    color: var(--ds-orange);

    font-style: normal;

}



.lynk-button {

    display: inline-block;

    margin-top: 28px;

    padding: 9px 13px;

    background: #111;

    color: #fff;

    font-family: "DM Mono", monospace;

    font-size: 7px;

}



.lynk-orb {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(9,9,9,.25);

}



.lynk-orb-one {

    width: 42vw;

    height: 42vw;

    max-width: 540px;

    max-height: 540px;

    right: -18%;

    top: -18%;

    background: rgba(255,255,255,.15);

}



.lynk-orb-two {

    width: 23vw;

    height: 23vw;

    max-width: 290px;

    max-height: 290px;

    right: 7%;

    bottom: -18%;

    background: var(--ds-orange);

    border: 0;

}



.lynk-footer-line {

    position: absolute;

    bottom: 15px;

    left: 24px;

    right: 24px;

    display: flex;

    justify-content: space-between;

    font-family: "DM Mono", monospace;

    font-size: 7px;

}





/* Case content */



.case-content {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 100px;

    padding: 65px 0 50px;

}



.case-title h2,

.case-split-copy h2,

.pixel-copy h2 {

    margin: 15px 0 0;

    font-size: clamp(42px, 5vw, 74px);

    line-height: .94;

    letter-spacing: -.065em;

    font-weight: 800;

}



.case-description {

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 45px;

}



.case-block p,

.case-split-copy p,

.pixel-copy > p {

    margin: 15px 0 0;

    font-size: 14px;

    line-height: 1.7;

    color: #62625d;

}



.case-results {

    display: grid;

    grid-template-columns: 1fr 1fr 1fr 1.2fr;

    border-top: 1px solid var(--ds-line);

    border-bottom: 1px solid var(--ds-line);

}



.result-item,

.result-link {

    min-height: 120px;

    padding: 22px 25px;

    border-right: 1px solid var(--ds-line);

}



.result-item strong {

    display: block;

    font-size: 48px;

    line-height: 1;

    letter-spacing: -.06em;

}



.result-item span {

    display: block;

    margin-top: 9px;

    font-family: "DM Mono", monospace;

    font-size: 9px;

    color: #777771;

    text-transform: uppercase;

}



.result-link {

    display: flex;

    align-items: center;

    justify-content: space-between;

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;

    border-right: 0;

    transition: *background* .25s ease;

}



.result-link:hover {

    background: var(--ds-orange);

}





/* =========================================================

   SPLIT CASE STUDIES

   ========================================================= */



.case-split-grid {

    display: grid;

    grid-template-columns: 1.08fr .92fr;

    gap: 80px;

    align-items: stretch;

    padding-top: 28px;

}



.case-study-reverse .case-split-grid {

    grid-template-columns: .92fr 1.08fr;

}



.case-study-reverse .case-visual {

    order: 2;

}



.case-study-reverse .case-split-copy {

    order: 1;

}



.case-visual-icor,

.case-visual-hitasha {

    min-height: 650px;

}





/* ICOR */



.case-visual-icor {

    background: #171717;

    color: #f3f3ef;

}



.icor-grid-pattern {

    position: absolute;

    inset: 0;

    opacity: .28;

    background-image:

        linear-gradient(rgba(243,243,239,.12) 1px, transparent 1px),

        linear-gradient(90deg, rgba(243,243,239,.12) 1px, transparent 1px);

    background-size: 65px 65px;

}



.icor-badge {

    position: absolute;

    top: 16%;

    left: 12%;

    width: 230px;

    height: 230px;

    border: 3px solid var(--ds-orange);

    border-radius: 50%;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    transform: rotate(-8deg);

}



.icor-badge:before,

.icor-badge:after {

    content: "";

    position: absolute;

    inset: 17px;

    border: 1px solid rgba(255,77,25,.5);

    border-radius: 50%;

}



.icor-badge:after {

    inset: 36px;

}



.icor-badge span {

    position: relative;

    z-index: 2;

    font-size: 48px;

    line-height: .9;

    font-weight: 800;

    letter-spacing: -.08em;

}



.icor-badge small {

    position: relative;

    z-index: 2;

    margin-top: 9px;

    font-family: "DM Mono", monospace;

    font-size: 9px;

    letter-spacing: .15em;

}



.icor-coordinate {

    position: absolute;

    top: 10%;

    right: 9%;

    font-family: "DM Mono", monospace;

    font-size: 8px;

    line-height: 1.7;

    text-align: right;

    color: #999;

}



.icor-rider {

    position: absolute;

    left: 12%;

    right: 12%;

    bottom: 12%;

    display: flex;

    justify-content: space-between;

    padding-top: 13px;

    border-top: 1px solid rgba(243,243,239,.25);

    font-family: "DM Mono", monospace;

    font-size: 8px;

}





/* HITASHA */



.case-visual-hitasha {

    background:

        radial-gradient(circle at 55% 46%, rgba(255, 225, 197, .95), transparent 22%),

        linear-gradient(145deg, #d5ddd3, #ecdfd0);

    color: #17201c;

}



.hitasha-sun {

    position: absolute;

    width: 310px;

    height: 310px;

    left: 50%;

    top: 45%;

    transform: translate(-50%, -50%);

    border-radius: 50%;

    border: 2px solid #e7784b;

    box-shadow:

        0 0 0 20px rgba(231,120,75,.08),

        0 0 0 42px rgba(231,120,75,.05);

}



.hitasha-sun:before,

.hitasha-sun:after {

    content: "";

    position: absolute;

    left: 50%;

    top: 50%;

    width: 430px;

    height: 1px;

    background: rgba(231,120,75,.32);

    transform: translate(-50%, -50%);

}



.hitasha-sun:after {

    transform: translate(-50%, -50%) rotate(90deg);

}



.hitasha-cross {

    position: absolute;

    left: 50%;

    top: 45%;

    transform: translate(-50%, -50%);

    font-size: 75px;

    line-height: 1;

    color: #e7784b;

    font-weight: 300;

}



.hitasha-wordmark {

    position: absolute;

    left: 9%;

    bottom: 10%;

    display: flex;

    flex-direction: column;

}



.hitasha-wordmark small,

.hitasha-wordmark span {

    font-family: "DM Mono", monospace;

    font-size: 8px;

    letter-spacing: .09em;

}



.hitasha-wordmark strong {

    margin: 3px 0 6px;

    font-size: 36px;

    letter-spacing: -.07em;

}



.hitasha-side-note {

    position: absolute;

    right: 8%;

    top: 9%;

    writing-mode: vertical-rl;

    font-family: "DM Mono", monospace;

    font-size: 8px;

    letter-spacing: .12em;

}





/* Split copy */



.case-split-copy {

    align-self: center;

    padding: 20px 0;

}



.case-lead {

    max-width: 500px;

    margin-top: 32px !important;

    font-size: 17px !important;

    line-height: 1.65 !important;

    color: #33332f !important;

}



.case-detail {

    max-width: 470px;

    margin-top: 48px;

    padding-top: 20px;

    border-top: 1px solid var(--ds-line);

}



.case-inline-result {

    display: flex;

    align-items: baseline;

    gap: 13px;

    margin-top: 45px;

}



.case-inline-result strong {

    font-size: 48px;

    line-height: 1;

    letter-spacing: -.06em;

}



.case-inline-result span,

.case-inline-results span {

    font-family: "DM Mono", monospace;

    font-size: 9px;

    color: #777771;

    text-transform: uppercase;

}



.case-inline-results {

    display: flex;

    gap: 50px;

    margin-top: 43px;

}



.case-inline-results > div {

    display: flex;

    flex-direction: column;

    gap: 7px;

}



.case-inline-results strong {

    font-size: 44px;

    line-height: 1;

    letter-spacing: -.06em;

}

strong{

    color:var(--ds-orange);

}



.text-link {

    display: inline-flex;

    align-items: center;

    gap: 18px;

    margin-top: 45px;

    padding-bottom: 7px;

    border-bottom: 1px solid var(--ds-black);

    font-family: "DM Mono", monospace;

    font-size: 9px;

    text-transform: uppercase;

    transition: gap .25s ease;

}



.text-link:hover {

    gap: 28px;

}





/* =========================================================

   PIXEL CRASH

   ========================================================= */



.case-study-pixel {

    padding-bottom: 30px;

}



.pixel-layout {

    display: grid;

    grid-template-columns: .85fr 1.15fr;

    gap: 90px;

    align-items: center;

    padding-top: 35px;

}



.pixel-copy {

    max-width: 500px;

}



.pixel-copy > p {

    margin-top: 30px;

    font-size: 16px;

    line-height: 1.7;

}



.case-visual-pixel {

    min-height: 520px;

    display: flex;

    align-items: center;

    justify-content: center;

    background: #161616;

}



.pixel-window {

    width: 76%;

    background: #f3f3ef;

    color: #111;

    box-shadow: 0 30px 80px rgba(0,0,0,.35);

    transform: rotate(2deg);

    transition: transform .45s ease;

}



.case-visual-pixel:hover .pixel-window {

    transform: rotate(0deg) scale(1.025);

}



.pixel-window-top {

    display: flex;

    gap: 5px;

    padding: 11px 14px;

    background: #292929;

}



.pixel-window-top span {

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #888;

}



.pixel-window-body {

    min-height: 320px;

    padding: 45px;

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    background:

        linear-gradient(rgba(9,9,9,.06) 1px, transparent 1px),

        linear-gradient(90deg, rgba(9,9,9,.06) 1px, transparent 1px);

    background-size: 24px 24px;

}



.pixel-code {

    display: flex;

    flex-direction: column;

    gap: 9px;

    font-family: "DM Mono", monospace;

    font-size: 14px;

}



.pixel-code span:nth-child(2) {

    padding-left: 18px;

    color: var(--ds-orange);

}



.pixel-code span:nth-child(3) {

    padding-left: 36px;

}



.pixel-code span:nth-child(4) {

    padding-left: 54px;

}



.pixel-cursor {

    font-family: "DM Mono", monospace;

    font-size: 24px;

    animation: pixelBlink 1s steps(2, start) infinite;

}



@keyframes pixelBlink {

    50% { opacity: 0; }

}



.pixel-status {

    display: flex;

    justify-content: space-between;

    padding: 12px 16px;

    border-top: 1px solid #ccc;

    font-family: "DM Mono", monospace;

    font-size: 8px;

}





/* =========================================================

   CAPABILITIES

   ========================================================= */



.work-capabilities {

    padding: 125px 0 135px;

    background: var(--ds-dark);

    color: var(--ds-paper);

}



.section-intro-light {

    border-color: var(--ds-line-light);

}



.section-intro-light .section-intro-copy p {

    color: #999993;

}



.capability-grid {

    display: grid;

    grid-template-columns: repeat(5, 1fr);

    margin-top: 80px;

    border-top: 1px solid var(--ds-line-light);

    border-bottom: 1px solid var(--ds-line-light);

}



.capability {

    min-height: 260px;

    padding: 22px;

    border-right: 1px solid var(--ds-line-light);

}



.capability:last-child {

    border-right: 0;

}



.capability > span {

    color: #777;

}



.capability h3 {

    margin: 90px 0 15px;

    font-size: 23px;

    line-height: 1;

    letter-spacing: -.04em;

    color: var(--ds-orange);

}



.capability p {

    margin: 0;

    font-size: 12px;

    line-height: 1.6;

    color: #85857f;

}





/* =========================================================

   TESTIMONIALS

   ========================================================= */



.work-testimonials {

    padding: 125px 0;

    background: var(--ds-paper);

}



.testimonial-feature {

    position: relative;

    min-height: 430px;

    display: grid;

    grid-template-columns: 100px 1fr;

    gap: 45px;

    padding: 55px 0 35px;

    border-bottom: 1px solid var(--ds-line);

}



.testimonial-mark {

    font-size: 120px;

    line-height: .65;

    color: var(--ds-orange);

    font-weight: 800;

    letter-spacing: -.1em;

}



.testimonial-content {

    max-width: 880px;

}



.testimonial-content blockquote {

    margin: 0;

    font-size: clamp(35px, 4.7vw, 70px);

    line-height: 1.02;

    letter-spacing: -.065em;

    font-weight: 700;

}



.testimonial-person {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 30px;

    margin-top: 55px;

}



.testimonial-person > div {

    display: flex;

    flex-direction: column;

    gap: 6px;

}



.testimonial-person strong {

    font-size: 14px;

}



.testimonial-person span {

    color: #777771;

}



.testimonial-person > span {

    color: #777771;

}



.testimonial-controls {

    position: absolute;

    right: 0;

    bottom: 35px;

    display: flex;

    align-items: center;

    gap: 13px;

}



.testimonial-arrow {

    width: 38px;

    height: 38px;

    border: 1px solid var(--ds-line);

    border-radius: 50%;

    background: transparent;

    cursor: pointer;

    font-size: 15px;

    transition:

        *background* .2s ease,

        color .2s ease;

}



.testimonial-arrow:hover {

    background: var(--ds-black);

    color: var(--ds-paper);

}



.testimonial-dots {

    display: flex;

    gap: 5px;

}



.testimonial-dot {

    width: 5px;

    height: 5px;

    border-radius: 50%;

    background: #bbb;

    border: 0;

    padding: 0;

}



.testimonial-dot.active {

    background: var(--ds-orange);

}





/* =========================================================

   CTA

   ========================================================= */



.work-cta {

    padding: 105px 0 120px;

    background: var(--ds-orange);

    color: var(--ds-black);

}



.work-cta-content {

    display: flex;

    align-items: end;

    justify-content: space-between;

    gap: 70px;

    padding-top: 70px;

}



.work-cta h2 {

    margin: 0;

    font-size: clamp(60px, 8vw, 125px);

    line-height: .86;

    letter-spacing: -.08em;

    font-weight: 800;

}



.work-cta h2 span {

    color: var(--ds-paper);

}



.work-cta-button {

    flex: 0 0 auto;

    display: inline-flex;

    align-items: center;

    gap: 45px;

    padding: 17px 19px;

    border: 1px solid var(--ds-black);

    font-family: "DM Mono", monospace;

    font-size: 10px;

    text-transform: uppercase;

    transition:

        *background* .25s ease,

        color .25s ease,

        gap .25s ease;

}



.work-cta-button:hover {

    background: var(--ds-black);

    color: var(--ds-paper);

    gap: 60px;

}





/* =========================================================

   REVEAL

   ========================================================= */



.reveal {

    opacity: 0;

    transform: translateY(35px);

    transition:

        opacity .7s ease,

        transform .7s ease;

}



.reveal.is-visible {

    opacity: 1;

    transform: translateY(0);

}





/* =========================================================

   RESPONSIVE

   ========================================================= */



@media (max-width: 1000px) {



    .work-hero-grid {

        grid-template-columns: 1fr;

        gap: 50px;

    }



    .work-hero-copy {

        max-width: 500px;

    }



    .case-content {

        gap: 50px;

    }



    .case-split-grid,

    .case-study-reverse .case-split-grid,

    .pixel-layout {

        grid-template-columns: 1fr;

        gap: 55px;

    }



    .case-study-reverse .case-visual,

    .case-study-reverse .case-split-copy {

        order: initial;

    }



    .case-visual-icor,

    .case-visual-hitasha {

        min-height: 560px;

    }



    .capability-grid {

        grid-template-columns: repeat(3, 1fr);

    }



    .capability:nth-child(3) {

        border-right: 0;

    }



    .capability:nth-child(n+4) {

        border-top: 1px solid var(--ds-line-light);

    }



    .work-cta-content {

        align-items: flex-start;

        flex-direction: column;

    }

}





@media (max-width: 700px) {



    .work-container {

        width: calc(100% - 30px);

    }



    .work-hero {

        padding: 120px 0 85px;

    }



    .work-kicker {

        flex-direction: column;

        gap: 8px;

    }



    .work-hero-grid {

        padding-top: 38px;

    }



    .work-hero-heading h1 {

        font-size: clamp(58px, 16vw, 95px);

    }



    .work-hero-copy p {

        font-size: 14px;

    }



    .section-intro {

        grid-template-columns: 1fr;

        gap: 25px;

    }



    .section-intro-copy {

        justify-self: start;

    }



    .case-study {

        margin-top: 75px;

    }



    .case-meta {

        grid-template-columns: 35px 1fr;

        row-gap: 7px;

    }



    .case-meta span:last-child {

        grid-column: 2;

        justify-self: start;

        color: #777771;

    }



    .case-visual-lynktown {

        height: 78vw;

        min-height: 310px;

        padding: 9vw 6vw;

    }



    .case-content {

        grid-template-columns: 1fr;

        gap: 45px;

        padding: 45px 0;

    }



    .case-description {

        grid-template-columns: 1fr;

        gap: 35px;

    }



    .case-title h2,

    .case-split-copy h2,

    .pixel-copy h2 {

        font-size: clamp(42px, 12vw, 65px);

    }



    .case-results {

        grid-template-columns: 1fr 1fr;

    }



    .result-item,

    .result-link {

        min-height: 100px;

        padding: 18px;

    }



    .result-item:nth-child(2) {

        border-right: 0;

    }



    .result-item:nth-child(n+3),

    .result-link {

        border-top: 1px solid var(--ds-line);

    }



    .result-link {

        grid-column: 1 / -1;

        min-height: 75px;

    }



    .case-visual-icor,

    .case-visual-hitasha {

        min-height: 430px;

    }



    .icor-badge {

        width: 180px;

        height: 180px;

    }



    .icor-badge span {

        font-size: 38px;

    }



    .hitasha-sun {

        width: 240px;

        height: 240px;

    }



    .case-lead {

        font-size: 15px !important;

    }



    .case-inline-results {

        gap: 25px;

    }



    .case-inline-results strong {

        font-size: 38px;

    }



    .case-visual-pixel {

        min-height: 370px;

    }



    .pixel-window {

        width: 88%;

    }



    .pixel-window-body {

        min-height: 220px;

        padding: 30px;

    }



    .pixel-code {

        font-size: 11px;

    }



    .capability-grid {

        grid-template-columns: 1fr 1fr;

        margin-top: 55px;

    }



    .capability {

        min-height: 220px;

    }



    .capability:nth-child(2),

    .capability:nth-child(4) {

        border-right: 0;

    }



    .capability:nth-child(3) {

        border-right: 1px solid var(--ds-line-light);

    }



    .capability h3 {

        margin-top: 70px;

        font-size: 18px;

    }



    .testimonial-feature {

        grid-template-columns: 45px 1fr;

        gap: 15px;

        min-height: 480px;

        padding-top: 40px;

    }



    .testimonial-mark {

        font-size: 70px;

    }



    .testimonial-content blockquote {

        font-size: clamp(30px, 8vw, 46px);

    }



    .testimonial-person {

        align-items: flex-start;

        flex-direction: column;

        gap: 20px;

    }



    .testimonial-controls {

        left: 60px;

        right: auto;

    }



    .work-cta {

        padding: 80px 0 90px;

    }



    .work-cta-content {

        padding-top: 45px;

        gap: 45px;

    }



    .work-cta h2 {

        font-size: clamp(55px, 15vw, 85px);

    }

}





@media (prefers-reduced-motion: reduce) {



    html {

        scroll-behavior: auto;

    }



    \*,

    \*::before,

    \*::after {

        animation-duration: .01ms !important;

        animation-iteration-count: 1 !important;

        transition-duration: .01ms !important;

    }



    .reveal {

        opacity: 1;

        transform: none;

    }

}





/* Portfolio case-study card artwork */

.case-visual-safehub360,.case-visual-luven,.case-visual-aureka,.case-visual-raswala,.case-visual-trueoats,.case-visual-gavrano{position:relative;overflow:hidden;isolation:isolate;min-height:390px;display:flex;align-items:center;justify-content:center;text-decoration:none;color:inherit}

        .case-visual-safehub360{background:#101c20;color:#eaf3ef}

        .safehub360-backdrop{width:100%;height:100%;min-height:390px;padding:28px;display:flex;flex-direction:column;justify-content:space-between;background:radial-gradient(ellipse at 80% 25%,rgba(83,171,142,.25),transparent 42%),linear-gradient(135deg,#101c20,#172a2d)}

        .safehub360-topline,.safehub360-dashboard-head{display:flex;justify-content:space-between;gap:16px;font:10px 'DM Mono',monospace;letter-spacing:.12em;color:#b4c8c0}

        .safehub360-hero{padding:24px 0;position:relative;z-index:1}.safehub360-kicker,.luven-overline,.aureka-overline{display:block;font:10px 'DM Mono',monospace;letter-spacing:.15em;margin-bottom:18px}

        .safehub360-hero strong{display:block;font-size:clamp(42px,6vw,76px);line-height:.88;letter-spacing:-.07em}.safehub360-hero strong em{font-style:normal;color:#8ad1b1}.safehub360-subtitle{display:block;max-width:280px;margin-top:18px;font-size:13px;line-height:1.6;color:#c5d3ce}

        .safehub360-dashboard{border:1px solid #ffffff25;background:#ffffff09;padding:14px}.safehub360-dashboard-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.safehub360-dashboard-grid>div{padding:12px;background:#ffffff08;border:1px solid #ffffff12}.safehub360-dashboard-grid small,.safehub360-dashboard-grid strong{display:block}.safehub360-dashboard-grid small{font:9px 'DM Mono',monospace;color:#9fb9ae}.safehub360-dashboard-grid strong{font-size:12px;margin-top:8px}

        .case-visual-luven{background:#dfe7d4;color:#253126}.luven-art,.aureka-art,.raswala-art,.trueoats-art,.gavrano-art{position:relative;width:100%;height:100%;min-height:390px;padding:34px;display:flex;flex-direction:column;justify-content:center;overflow:hidden}

        .luven-art{background:linear-gradient(135deg,#e7ecdf,#bdcdb5)}.luven-art strong{font-size:clamp(44px,6vw,78px);line-height:.9;letter-spacing:-.07em;position:relative;z-index:1}.luven-art strong em{font-family:Georgia,serif;font-weight:400}.luven-wordmark{font-size:30px;font-weight:800;letter-spacing:-.08em;margin-top:30px}.luven-caption{font:9px 'DM Mono',monospace;letter-spacing:.13em;margin-top:8px}

        .case-visual-aureka{background:#191919;color:#f2efe8}.aureka-art strong{font-size:clamp(42px,6vw,74px);letter-spacing:.06em}.aureka-art>span:last-of-type{font:10px 'DM Mono',monospace;letter-spacing:.12em;margin-top:14px}.aureka-art i{position:absolute;width:240px;height:240px;border:1px solid #ff914d65;border-radius:50%;right:-45px;top:30px;box-shadow:0 0 0 35px #ff914d0d,0 0 0 70px #ff914d0a}

        .case-visual-raswala{background:#efc64c;color:#512e1e}.raswala-art>span,.trueoats-art>span,.gavrano-art>span{font:10px 'DM Mono',monospace;letter-spacing:.15em}.raswala-art strong{font-size:clamp(60px,9vw,110px);line-height:.72;letter-spacing:-.09em;margin:22px 0}.raswala-art small,.trueoats-art small,.gavrano-art small{font:10px 'DM Mono',monospace;letter-spacing:.12em}

        .case-visual-trueoats{background:#f2e8d1;color:#34533f}.trueoats-art strong{font-size:clamp(54px,8vw,100px);line-height:.75;letter-spacing:-.09em;margin:20px 0}.trueoats-art strong em{font-family:Georgia,serif;font-weight:400}.trueoats-art:after{content:"";position:absolute;width:240px;height:240px;border:1px solid #34533f55;border-radius:50%;right:-40px;bottom:-60px;box-shadow:0 0 0 22px #34533f08,0 0 0 45px #34533f08}

        .case-visual-gavrano{background:#252522;color:#f0e8d7}.gavrano-art strong{font-size:clamp(32px,5vw,66px);letter-spacing:.08em;margin:24px 0;position:relative;z-index:1}.gavrano-art i{position:absolute;width:230px;height:230px;right:-30px;top:40px;border:1px solid #c6a97299;border-radius:50%;box-shadow:0 0 0 20px #c6a9720b,0 0 0 45px #c6a9720b}.gavrano-art small{position:relative;z-index:1}

        .case-project-tags{display:flex;flex-wrap:wrap;gap:8px;margin:22px 0}.case-project-tags span{border:1px solid currentColor;padding:7px 10px;font:10px 'DM Mono',monospace;letter-spacing:.04em;opacity:.8}

        .case-results-services .result-link{align-self:center}.case-visual-safehub360 .case-view,.case-visual-luven .case-view,.case-visual-aureka .case-view,.case-visual-raswala .case-view,.case-visual-trueoats .case-view,.case-visual-gavrano .case-view{position:absolute;right:18px;bottom:18px;z-index:3}

        @media(max-width:700px){.safehub360-backdrop,.luven-art,.aureka-art,.raswala-art,.trueoats-art,.gavrano-art{padding:22px;min-height:340px}.case-visual-safehub360,.case-visual-luven,.case-visual-aureka,.case-visual-raswala,.case-visual-trueoats,.case-visual-gavrano{min-height:340px}.safehub360-topline{font-size:8px}.safehub360-dashboard-grid{grid-template-columns:1fr}.safehub360-dashboard-grid>div{display:flex;justify-content:space-between;align-items:center}.safehub360-dashboard-grid strong{margin-top:0}}


/* =========================================================
   WORK PAGE LAYOUT FIXES — original devsid.in brand preserved
   ========================================================= */
.work-page main { width:100%; overflow:clip; }
.work-container { width:min(100% - 64px, 1240px); margin-inline:auto; }
.selected-work, .work-capabilities, .work-testimonials, .work-hero { width:100%; }
.case-study { display:block; width:100%; min-width:0; margin:0 0 clamp(64px,8vw,112px); }
.case-meta { display:grid; grid-template-columns:48px minmax(150px, .8fr) minmax(180px, 1fr); align-items:start; gap:16px; width:100%; margin-bottom:18px; }
.case-meta > * { min-width:0; }
.case-visual { position:relative; display:block; width:100%; min-width:0; min-height:390px; overflow:hidden; text-decoration:none; }
.case-split-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch; gap:clamp(28px,4vw,64px); width:100%; }
.case-study-reverse .case-split-grid { direction:rtl; }
.case-study-reverse .case-split-grid > * { direction:ltr; }
.case-split-grid > .case-visual { aspect-ratio:1 / 1; min-height:0; height:auto; }
.case-split-copy { min-width:0; width:100%; align-self:center; overflow-wrap:anywhere; }
.case-split-copy h2, .case-title h2 { max-width:100%; text-wrap:balance; }
.case-split-copy p, .case-description p { max-width:62ch; }
.case-study-featured > .case-visual { min-height:420px; }
.case-content { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:clamp(28px,5vw,76px); }
.case-results { display:flex; align-items:center; gap:clamp(14px,3vw,36px); flex-wrap:wrap; }
.case-results > * { min-width:0; }
.case-study-pixel .pixel-layout { display:grid; grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); gap:clamp(28px,4vw,64px); align-items:center; }
.case-study-pixel .case-visual { min-height:360px; }
.case-study-pixel .pixel-window { max-width:100%; }
.case-study > a.case-study { display:block; }
.work-more-label { display:flex; justify-content:space-between; align-items:baseline; gap:24px; padding:24px 0; margin:24px 0 36px; border-top:1px solid var(--ds-line); border-bottom:1px solid var(--ds-line); }
.work-more-label span { font:500 11px 'DM Mono',monospace; letter-spacing:.14em; }
.work-more-label p { margin:0; max-width:50%; }
.case-visual-lynktown { background:var(--ds-paper); color:var(--ds-black); }
.lynktown-art { position:relative; min-height:390px; height:100%; padding:clamp(24px,4vw,48px); display:flex; flex-direction:column; justify-content:center; overflow:hidden; background:linear-gradient(135deg,#f3f3ef 0%,#e5e5dc 100%); }
.lynktown-art:after { content:""; position:absolute; width:220px; height:220px; right:-40px; bottom:-60px; border:1px solid var(--ds-orange); border-radius:50%; box-shadow:0 0 0 24px #ff914d12,0 0 0 48px #ff914d0a; }
.lynktown-art > span,.lynktown-art small { font:10px 'DM Mono',monospace; letter-spacing:.12em; }
.lynktown-art strong { position:relative; z-index:1; font-size:clamp(48px,7vw,86px); line-height:.82; letter-spacing:-.08em; margin:22px 0; }
.lynktown-art strong em { color:var(--ds-orange); font-style:normal; }
.case-view { z-index:4; }
img, video, iframe { max-width:100%; }
@media (max-width:1000px) {
 .work-container { width:min(100% - 48px, 900px); }
 .case-split-grid { gap:28px; }
 .case-visual, .case-split-grid > .case-visual { min-height:320px; }
 .case-study-featured > .case-visual { min-height:360px; }
 .case-content { gap:28px; }
}
@media (max-width:700px) {
 .work-container { width:calc(100% - 36px); }
 .work-hero { padding-block:44px 52px; }
 .work-hero-grid { grid-template-columns:1fr; gap:24px; }
 .work-kicker { gap:12px; flex-wrap:wrap; }
 .section-intro { grid-template-columns:1fr; gap:16px; }
 .case-study { margin-bottom:64px; }
 .case-meta { grid-template-columns:32px minmax(0,1fr); gap:8px 12px; }
 .case-meta > :last-child { grid-column:2; }
 .case-split-grid, .case-study-reverse .case-split-grid, .case-study-pixel .pixel-layout, .case-content { grid-template-columns:minmax(0,1fr); direction:ltr; }
 .case-split-grid > .case-visual, .case-visual { width:100%; aspect-ratio:1 / .88; min-height:280px; }
 .case-study-featured > .case-visual { min-height:340px; }
 .case-split-copy { padding-top:6px; }
 .case-content { gap:24px; }
 .case-results { align-items:flex-start; }
 .safehub360-backdrop { min-height:340px; }
 .work-more-label { align-items:flex-start; flex-direction:column; gap:8px; }
 .work-more-label p { max-width:100%; }
 .lynktown-art { min-height:280px; }
}
@media (prefers-reduced-motion:reduce) { .work-page *, .work-page *::before, .work-page *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; } }


/* Selected work wrapper correction: keep every case study inside the same centered column. */
.selected-work > .work-container {
    width: min(1240px, calc(100% - 80px));
    max-width: 100%;
    margin-inline: auto;
}
.selected-work > .work-container > .case-study,
.selected-work > .work-container > .work-more-label {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}
.selected-work .case-study,
.selected-work .case-split-grid,
.selected-work .case-split-copy,
.selected-work .case-visual {
    min-width: 0;
}
@media (max-width: 1000px) {
    .selected-work > .work-container {
        width: min(900px, calc(100% - 48px));
    }
}
@media (max-width: 700px) {
    .selected-work > .work-container {
        width: calc(100% - 36px);
    }
}
/* MORE PROJECTS TOGGLE */

.work-more-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    padding: 13px 18px;
    border: 1px solid var(--ds-black);
    background: transparent;
    color: var(--ds-black);
    font-family: "DM Mono", monospace;
    font-size: 10px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background .25s ease, color .25s ease;
}

.work-more-toggle:hover {
    background: var(--ds-orange);
    border-color: var(--ds-orange);
    color: var(--ds-black);
}

.work-more-toggle-icon {
    font-size: 18px;
    line-height: 1;
}

.work-more-projects[hidden] {
    display: none !important;
}

.work-more-projects:not([hidden]) {
    animation: moreProjectsReveal .35s ease both;
}

@keyframes moreProjectsReveal {
    from {
        opacity: 0;
        transform: translateY(15px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* NEXDOM VISUAL */

.case-visual-nexdom {
    min-height: 390px;
    background: var(--ds-dark);
    color: var(--ds-paper);
}

.nexdom-art {
    position: relative;
    min-height: 390px;
    height: 100%;
    padding: clamp(25px, 5vw, 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 80% 30%, rgba(255,145,77,.2), transparent 30%),
        linear-gradient(135deg, #111 0%, #090909 100%);
}

.nexdom-art::after {
    content: "";
    position: absolute;
    width: 240px;
    height: 240px;
    right: -50px;
    bottom: -70px;
    border: 1px solid var(--ds-orange);
    border-radius: 50%;
    box-shadow:
        0 0 0 25px rgba(255,145,77,.08),
        0 0 0 50px rgba(255,145,77,.04);
}

.nexdom-art > span,
.nexdom-art small {
    font-family: "DM Mono", monospace;
    font-size: 9px;
    letter-spacing: .12em;
}

.nexdom-art strong {
    position: relative;
    z-index: 1;
    margin: 25px 0;
    font-size: clamp(45px, 7vw, 90px);
    line-height: .9;
    letter-spacing: -.08em;
    color: var(--ds-paper);
}

.nexdom-art small {
    color: var(--ds-orange);
}

@media (max-width: 700px) {
    .work-more-label {
        align-items: flex-start;
        flex-direction: column;
        gap: 18px;
    }

    .work-more-toggle {
        width: 100%;
        justify-content: space-between;
    }

    .nexdom-art {
        min-height: 280px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .work-more-projects:not([hidden]) {
        animation: none;
    }
}
/* =========================================================
   PORTFOLIO CASE STUDY ARTWORK BACKGROUNDS
   Keep all brand images on inner *-art elements, never on
   the outer .case-visual link.
   ========================================================= */

/* Existing artwork elements */
.luven-art {
    background-image: url('/public/luven-brand.png');
}

.aureka-art {
    background-image: url('/public/aureka-brand.png');
}

.gavrano-art {
    background-image: url('/public/gavrano-brand.png');
}

.raswala-art {
    background-image: url('/public/raswala-brand.png');
}

.safehub360-backdrop {
    background-image: url('/public/safehub360-brand.png');
}

.hitasha-art {
    background-image: url('/public/hitasha-brand.png');
}

.trueoats-art {
    background-image: url('/public/trueoats-brand.png');
}

.icor-art {
    background-image: url('/public/icor-brand.png');
}

.lynktown-art {
    background-image: url('/public/lynktown-brand.png');
}

.nexdom-art {
    background-image: url('/public/nexdom-brand.png');
}

/* Additional case studies that were missing their artwork images */
.pixel-art {
    background-image: url('/public/pixel-crash-brand.png');
}

.mysurfacesolution-art {
    background-image: url('/public/mysurfacesolution-brand.png');
}

/* Other existing portfolio artwork assets */
.yellow-maple-art {
    background-image: url('/public/yellow-maple-brand.png');
}

.golzee-art {
    background-image: url('/public/Golzee-toothpaste.png');
}
.agrimore-art {
    background-image: url('/public/agrimore-brand.png');
}

.agrimor-art {
    background-image: url('/public/agrimor-brand.png');
}

/* Shared image treatment */
.luven-art,
.aureka-art,
.gavrano-art,
.raswala-art,
.safehub360-backdrop,
.hitasha-art,
.trueoats-art,
.icor-art,
.lynktown-art,
.nexdom-art,
.pixel-art,
.mysurfacesolution-art,
.yellow-maple-art,
.golzee-art,
.agrimore-art,
.agrimor-art {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Wrappers added to case studies whose artwork did not have an inner
   *-art element in the supplied PHP markup. */
.hitasha-art,
.icor-art,
.pixel-art,
.mysurfacesolution-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: inherit;
    overflow: hidden;
}

.hitasha-art,
.icor-art {
    flex: 1 1 auto;
}

.pixel-art {
    min-height: 520px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.mysurfacesolution-art {
    min-height: 390px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 34px;
}

@media (max-width: 700px) {
    .hitasha-art,
    .icor-art,
    .pixel-art,
    .mysurfacesolution-art {
        min-height: 280px;
    }

    .pixel-art,
    .mysurfacesolution-art {
        padding: 22px;
    }
}


/* Additional project artwork wrappers */
.agrimore-art,
.agrimor-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 390px;
    padding: 34px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

@media (max-width: 700px) {
    .agrimore-art,
    .agrimor-art {
        min-height: 280px;
        padding: 22px;
    }
}


/* =========================================================
   AGRIMORE / AGRIMOR / GOLZEE — PORTFOLIO CASE STUDIES
   Images belong to the inner artwork elements.
   ========================================================= */

.case-visual-agrimore {
    background: #18251d;
    color: #f3f3ef;
}

.case-visual-agrimor {
    background: #20231d;
    color: #f3f3ef;
}

.case-visual-golzee {
    background: #f2eadf;
    color: #24221e;
}

.agrimore-art,
.agrimor-art,
.golzee-art {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 390px;
    padding: clamp(24px, 4vw, 48px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.agrimore-art {
    background-image: url('/public/agrimore-brand.png');
}

.agrimor-art {
    background-image: url('/public/agrimor-brand.png');
}

.golzee-art {
    background-image: url('/public/Golzee-toothpaste.png');
}

.portfolio-art-kicker,
.agrimore-art small,
.agrimor-art small,
.golzee-art small {
    position: relative;
    z-index: 1;
    font: 9px "DM Mono", monospace;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.agrimore-art strong,
.agrimor-art strong,
.golzee-art strong {
    position: relative;
    z-index: 1;
    margin: 22px 0 12px;
    font-size: clamp(42px, 6vw, 82px);
    line-height: .9;
    letter-spacing: -.075em;
}

.agrimore-art small,
.agrimor-art small,
.golzee-art small {
    margin-top: 4px;
}

.case-visual-agrimore .case-view,
.case-visual-agrimor .case-view,
.case-visual-golzee .case-view {
    z-index: 5;
}

@media (max-width: 700px) {
    .agrimore-art,
    .agrimor-art,
    .golzee-art {
        min-height: 280px;
        padding: 22px;
    }
}
/* =========================================================
   CASE STUDY IMAGE HOVER ANIMATION
   ========================================================= */

/* Smooth image zoom */
.case-visual[class*="case-visual-"] > div:not(.case-view) {

    transition:
        transform .7s cubic-bezier(.2,.7,.2,1),
        filter .7s ease;
    will-change: transform;
}

/* Zoom artwork on hover */
.case-visual[class*="case-visual-"]:hover > div:not(.case-view) {
    transform: scale(1.045);
    filter: brightness(1.08);
}
.case-visual strong,.case-visual span, .case-visual small{
    display:none;
}
/* Slight image movement for depth */
.case-visual[class*="case-visual-"] {
    overflow: hidden;
}

/* Keep view button above artwork */
.case-visual .case-view {
    z-index: 10;
}

/* Smooth transition for background artwork */
.case-visual .luven-art,
.case-visual .aureka-art,
.case-visual .gavrano-art,
.case-visual .raswala-art,
.case-visual .safehub360-backdrop,
.case-visual .hitasha-art,
.case-visual .trueoats-art,
.case-visual .icor-art,
.case-visual .lynktown-art,
.case-visual .nexdom-art,
.case-visual .pixel-art,
.case-visual .mysurfacesolution-art,
.case-visual .agrimore-art,
.case-visual .agrimor-art,
.case-visual .golzee-art,
.case-visual .yellow-maple-art {
    transform-origin: center;
}

/* Reduced motion accessibility */
@media (prefers-reduced-motion: reduce) {
    .case-visual[class*="case-visual-"] > div:not(.case-view) {
        transition: none !important;
    }

    .case-visual[class*="case-visual-"]:hover > div:not(.case-view) {
        transform: none !important;
        filter: none !important;
    }
}