/* =========================================================
   KCRESAN WORK PAGE
   Page-specific visual system. HTML/CSS/vanilla JS only.
   ========================================================= */


/* =========================================
   WORK PAGE HERO
   ========================================= */

.work-hero {
   position: relative;
   width: 100%;
   min-height: 100vh;
   padding-top: 150px;
   padding-bottom: 100px;
   overflow: hidden;
   background: #08060B;
}


/* =========================================
   HERO TEXT
   ========================================= */

.work-hero-content {
   position: relative;
   z-index: 10;

   width: min(900px, 90%);
   margin: 0 auto 100px;

   text-align: center;
}

.work-hero-eyebrow {
   display: block;

   margin-bottom: 25px;

   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.18em;
   text-transform: uppercase;

   color: #9978B6;
}

.work-hero-title {
   margin: 0;

   font-size: clamp(55px, 8vw, 125px);
   font-weight: 700;
   line-height: 0.92;
   letter-spacing: -0.055em;

   color: #FFFFFF;
}

.work-hero-title span {
   color: #9978B6;
}

.work-hero-description {
   max-width: 600px;

   margin: 35px auto 0;

   font-size: 17px;
   line-height: 1.7;

   color: rgba(255, 255, 255, 0.58);
}


/* =========================================
   COLLAGE
   ========================================= */

.work-collage {
   position: relative;

   width: 100%;

   display: flex;
   flex-direction: column;
   gap: 22px;

   overflow: hidden;

   /* Fade the collage into the background */
   mask-image: linear-gradient(to right,
         transparent 0%,
         black 7%,
         black 93%,
         transparent 100%);
}


/* =========================================
   COLLAGE ROW
   ========================================= */

.collage-row {
   display: flex;
   align-items: center;

   width: max-content;

   gap: 22px;

   will-change: transform;
}


/* Different movement speeds */
.collage-row-1 {
   animation: collageMoveLeft 32s linear infinite;
}

.collage-row-2 {
   animation: collageMoveRight 38s linear infinite;
}

.collage-row-3 {
   animation: collageMoveLeft 42s linear infinite;
}


/* =========================================
   COLLAGE CARDS
   ========================================= */

.collage-card {
   position: relative;

   flex-shrink: 0;

   overflow: hidden;

   border: 1px solid rgba(153, 120, 182, 0.18);

   border-radius: 18px;

   background:
      linear-gradient(135deg,
         rgba(98, 74, 134, 0.25),
         rgba(58, 32, 89, 0.08));

   box-shadow:
      0 20px 60px rgba(0, 0, 0, 0.35);

   transition:
      transform 0.5s ease,
      border-color 0.5s ease;
}


/* Card sizes */

.collage-card-wide {
   width: 420px;
   height: 235px;
}

.collage-card-medium {
   width: 320px;
   height: 210px;
}

.collage-card-small {
   width: 240px;
   height: 180px;
}


/* =========================================
   PLACEHOLDER
   ========================================= */

.collage-placeholder {
   position: relative;

   width: 100%;
   height: 100%;

   display: flex;
   align-items: flex-end;

   padding: 22px;

   background:
      radial-gradient(circle at 70% 30%,
         rgba(153, 120, 182, 0.30),
         transparent 40%),
      linear-gradient(135deg,
         #3A2059,
         #100C16 70%);
}

.collage-placeholder::before {
   content: "";

   position: absolute;

   width: 65%;
   height: 55%;

   top: 20%;
   left: 18%;

   border: 1px solid rgba(255, 255, 255, 0.12);

   border-radius: 8px;

   background: rgba(255, 255, 255, 0.04);

   transform: rotate(-3deg);
}

.collage-placeholder::after {
   content: "";

   position: absolute;

   width: 35%;
   height: 30%;

   right: 8%;
   bottom: 8%;

   border-radius: 8px;

   background: rgba(215, 172, 41, 0.12);

   border: 1px solid rgba(215, 172, 41, 0.2);
}

.collage-placeholder span {
   position: relative;
   z-index: 2;

   font-size: 11px;
   font-weight: 600;
   letter-spacing: 0.14em;

   color: rgba(255, 255, 255, 0.65);
}


/* =========================================
   HOVER
   ========================================= */

.work-collage:hover .collage-row {
   animation-play-state: paused;
}

.collage-card:hover {
   transform: translateY(-8px) scale(1.02);

   border-color: rgba(153, 120, 182, 0.5);
}


/* =========================================
   ANIMATIONS
   ========================================= */

/*
   The rows are intentionally translated by 50%.
   JS duplicates each row's content so the movement
   loops seamlessly without an empty gap.
*/

@keyframes collageMoveLeft {

   from {
      transform: translateX(0);
   }

   to {
      transform: translateX(-50%);
   }
}

@keyframes collageMoveRight {

   from {
      transform: translateX(-50%);
   }

   to {
      transform: translateX(0);
   }
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

   .work-hero {
      padding-top: 120px;
      padding-bottom: 70px;
   }

   .work-hero-content {
      margin-bottom: 70px;
   }

   .work-hero-title {
      font-size: clamp(48px, 13vw, 75px);
   }

   .work-hero-description {
      font-size: 15px;
   }

   .collage-row {
      gap: 14px;
   }

   .collage-card-wide {
      width: 300px;
      height: 170px;
   }

   .collage-card-medium {
      width: 240px;
      height: 160px;
   }

   .collage-card-small {
      width: 180px;
      height: 135px;
   }
}


/* =========================================
   REDUCED MOTION
   ========================================= */

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

   .collage-row {
      animation: none !important;
      transform: none !important;
   }

}


/* -------------------------
   Outcomes
   ------------------------- */
.outcomes-section {
   background: #0a080d
}

.outcomes-heading {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 40px;
   margin-top: 28px
}

.outcomes-heading p,
.ads-head>p,
.products-head p,
.experience-head p,
.systems-head p {
   max-width: 310px;
   color: var(--muted);
   font-size: 11px;
   line-height: 1.8;
   margin: 0 0 6px
}

.outcome-case {
   margin-top: 65px;
   display: grid;
   grid-template-columns: minmax(0, 1.5fr) minmax(280px, .7fr);
   gap: 55px;
   align-items: center
}

.outcome-visual {
   position: relative;
   min-height: 530px;
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 30px
}

.proof-browser {
   width: min(720px, 90%);
   aspect-ratio: 1.45;
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 18px;
   background: #0e0b13;
   box-shadow: 0 35px 100px rgba(0, 0, 0, .5);
   overflow: hidden;
   transform: rotate(-2deg)
}

.proof-top {
   height: 42px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 18px;
   font-size: 7px;
   letter-spacing: .1em;
   color: #6e6575
}

.proof-top b {
   color: #a9cfac;
   font-size: 6px
}

.proof-body {
   height: calc(100% - 42px);
   padding: 35px;
   display: grid;
   grid-template-columns: 1fr 1fr;
   background: radial-gradient(circle at 75% 20%, rgba(98, 74, 134, .35), transparent 45%), #100c15
}

.proof-copy small {
   font-size: 7px;
   letter-spacing: .14em;
   color: #a18cac
}

.proof-copy strong {
   display: block;
   font-size: clamp(28px, 4vw, 55px);
   line-height: .82;
   letter-spacing: -.07em;
   margin-top: 20px
}

.proof-copy em {
   color: #9978b6;
   font-style: italic
}

.proof-chart {
   display: flex;
   align-items: end;
   gap: 7px;
   height: 100%;
   padding: 35px 10px 10px
}

.proof-chart span {
   width: 11%;
   height: 30%;
   background: linear-gradient(to top, #3a2059, #9978b6);
   border-radius: 3px 3px 0 0;
   animation: chart-pulse 3s ease-in-out infinite alternate
}

.proof-chart span:nth-child(2) {
   height: 43%;
   animation-delay: .1s
}

.proof-chart span:nth-child(3) {
   height: 35%;
   animation-delay: .2s
}

.proof-chart span:nth-child(4) {
   height: 60%;
   animation-delay: .3s
}

.proof-chart span:nth-child(5) {
   height: 52%;
   animation-delay: .4s
}

.proof-chart span:nth-child(6) {
   height: 77%;
   animation-delay: .5s
}

.proof-chart span:nth-child(7) {
   height: 91%;
   animation-delay: .6s
}

@keyframes chart-pulse {
   to {
      transform: scaleY(.82);
      opacity: .75
   }
}

.proof-float {
   position: absolute;
   background: rgba(11, 8, 15, .9);
   backdrop-filter: blur(12px);
   border: 1px solid rgba(255, 255, 255, .12);
   border-radius: 12px;
   padding: 14px 16px;
   min-width: 145px;
   box-shadow: 0 20px 50px rgba(0, 0, 0, .4);
   animation: float-card 5s ease-in-out infinite
}

.proof-float small {
   display: block;
   color: #766d7c;
   font-size: 6px;
   letter-spacing: .13em
}

.proof-float strong {
   display: block;
   font-size: 27px;
   line-height: 1;
   margin: 7px 0 4px;
   letter-spacing: -.05em
}

.proof-float span {
   font-size: 8px;
   color: #938b99
}

.pf-one {
   left: 0;
   top: 60px
}

.pf-two {
   right: 0;
   top: 115px;
   animation-delay: -1s
}

.pf-three {
   left: 8%;
   bottom: 45px;
   animation-delay: -2s
}

.pf-four {
   right: 4%;
   bottom: 25px;
   animation-delay: -3s
}

.outcome-info {
   border-left: 1px solid var(--line);
   padding-left: 34px
}

.outcome-client {
   display: flex;
   align-items: center;
   gap: 12px;
   margin-bottom: 24px
}

.outcome-client span {
   font-size: 12px;
   letter-spacing: .12em
}

.outcome-client small {
   color: #736b78;
   font-size: 8px
}

.outcome-info h3 {
   font-size: clamp(28px, 3vw, 45px);
   line-height: .98;
   letter-spacing: -.055em;
   margin: 0 0 22px
}

.outcome-info p {
   color: var(--muted);
   font-size: 11px;
   line-height: 1.85
}

.outcome-tags {
   display: flex;
   flex-wrap: wrap;
   gap: 7px;
   margin-top: 25px
}

.outcome-tags span {
   border: 1px solid var(--line);
   padding: 7px 10px;
   border-radius: 20px;
   color: #9b929f;
   font-size: 7px;
   letter-spacing: .08em;
   text-transform: uppercase
}

/* -------------------------
   Ads
   ------------------------- */

.ads-section {
    overflow: hidden;
}

.ads-head {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 50px;
}


/* =========================================
   INFINITE AD MARQUEE
   ========================================= */

.ad-marquee {
    position: relative;

    width: 100%;
    margin-top: 55px;

    overflow: hidden;

    mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );

    -webkit-mask-image: linear-gradient(
        to right,
        transparent 0%,
        #000 7%,
        #000 93%,
        transparent 100%
    );
}


/*
   The track contains TWO identical sets.

   JavaScript creates the second set automatically.

   [ SET 1 ][ SET 2 ]

   Animation moves exactly one set width,
   then instantly loops back to the beginning.
*/

.ad-marquee-track {
    display: flex;

    width: max-content;

    will-change: transform;

    animation: ads-infinite-loop 32s linear infinite;
}


/*
   Each set contains one complete collection
   of advertisements.
*/

.ad-marquee-set {
    display: flex;
    align-items: stretch;

    gap: 16px;

    flex-shrink: 0;
}


/*
   Move exactly 50% of the total track.

   Because both sets are identical in width,
   the second set perfectly replaces the first.
*/

@keyframes ads-infinite-loop {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}


/* =========================================
   AD CARDS
   ========================================= */

.ad-tile {
    width: 235px;
    height: 290px;

    flex: 0 0 235px;

    border-radius: 15px;

    padding: 20px;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow:
        0 18px 60px rgba(0, 0, 0, 0.25);
}

.ad-tile small {
    font-size: 7px;
    letter-spacing: 0.14em;
    opacity: 0.7;
}

.ad-tile strong {
    font-size: 31px;
    line-height: 0.84;
    letter-spacing: -0.065em;
}

.ad-tile span {
    font-size: 7px;
    letter-spacing: 0.1em;
}


/* =========================================
   AD STYLES
   ========================================= */

.tile-purple {
    background: linear-gradient(
        145deg,
        #3A2059,
        #624A86
    );
}

.tile-dark {
    background: #111016;
}

.tile-light {
    background: #E8E2EA;
    color: #23192D;
}

.tile-gold {
    background: #D7AC29;
    color: #1A1305;
}


/* =========================================
   HOVER / PAUSE
   ========================================= */

.ad-marquee:hover .ad-marquee-track {
    animation-play-state: paused;
}


/* =========================================
   AD PILL ROW
   ========================================= */

.ad-pill-row {
    display: flex;
    justify-content: center;
    align-items: center;

    gap: 16px;

    margin-top: 38px;

    color: #8D8492;

    font-size: 7px;
    letter-spacing: 0.13em;
}

.ad-pill-row i {
    color: #624A86;
    font-style: normal;
}


/* =========================================
   MOBILE
   ========================================= */

@media (max-width: 767px) {

    .ad-tile {
        width: 195px;
        height: 245px;

        flex-basis: 195px;
    }

    .ad-tile strong {
        font-size: 27px;
    }

}

/* -------------------------
   Products
   ------------------------- */
.products-section {
   background: #0a080d
}

.products-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 40px;
   margin-top: 28px
}

.product-showcase {
   margin-top: 60px
}

.product-window {
   position: relative;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 20px;
   overflow: hidden;
   background: #0e0b12;
   box-shadow: 0 35px 100px rgba(0, 0, 0, .4)
}

.product-window-top {
   height: 48px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 0 20px;
   color: #6e6674;
   font-size: 7px;
   letter-spacing: .12em
}

.product-window-top span:last-child {
   color: #d7ac29
}

.product-window-body {
   display: grid;
   grid-template-columns: 170px 1fr;
   min-height: 430px
}

.product-window-body aside {
   border-right: 1px solid rgba(255, 255, 255, .07);
   padding: 28px 22px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   color: #6e6674;
   font-size: 8px
}

.product-window-body aside b {
   color: #9978b6;
   font-size: 7px;
   letter-spacing: .1em
}

.product-dashboard {
   padding: 55px;
   background: radial-gradient(circle at 80% 10%, rgba(98, 74, 134, .3), transparent 40%), #100c15
}

.pd-title small {
   display: block;
   font-size: 7px;
   letter-spacing: .14em;
   color: #8d8394
}

.pd-title strong {
   display: block;
   font-size: clamp(30px, 4vw, 56px);
   line-height: .9;
   letter-spacing: -.06em;
   margin-top: 12px
}

.pd-metrics {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   gap: 12px;
   margin-top: 42px
}

.pd-metrics div {
   padding: 18px;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 10px;
   background: rgba(255, 255, 255, .02)
}

.pd-metrics small {
   display: block;
   color: #716977;
   font-size: 6px;
   letter-spacing: .1em
}

.pd-metrics b {
   font-size: 23px;
   display: block;
   margin-top: 8px
}

.pd-chart {
   height: 110px;
   margin-top: 35px;
   display: flex;
   align-items: end;
   gap: 5px;
   border-bottom: 1px solid #27202c
}

.pd-chart i {
   display: block;
   flex: 1;
   background: linear-gradient(to top, #3a2059, #9978b6);
   border-radius: 3px 3px 0 0;
   animation: bars 2.8s ease-in-out infinite alternate
}

.pd-chart i:nth-child(1) {
   height: 30%
}

.pd-chart i:nth-child(2) {
   height: 45%
}

.pd-chart i:nth-child(3) {
   height: 38%
}

.pd-chart i:nth-child(4) {
   height: 52%
}

.pd-chart i:nth-child(5) {
   height: 60%
}

.pd-chart i:nth-child(6) {
   height: 48%
}

.pd-chart i:nth-child(7) {
   height: 68%
}

.pd-chart i:nth-child(8) {
   height: 74%
}

.pd-chart i:nth-child(9) {
   height: 64%
}

.pd-chart i:nth-child(10) {
   height: 82%
}

.pd-chart i:nth-child(11) {
   height: 76%
}

.pd-chart i:nth-child(12) {
   height: 94%
}

@keyframes bars {
   to {
      transform: scaleY(.84);
      transform-origin: bottom
   }
}

.product-mini-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   margin-top: 18px;
   gap: 18px
}

.product-mini-grid>div {
   padding: 30px;
   border: 1px solid var(--line);
   background: #0e0b12;
   border-radius: 14px
}

.product-mini-grid small {
   font-size: 7px;
   color: #806d8f;
   letter-spacing: .13em
}

.product-mini-grid h3 {
   font-size: 27px;
   letter-spacing: -.05em;
   margin: 15px 0 25px
}

.product-mini-grid span {
   font-size: 8px;
   color: #8d8492
}

/* -------------------------
   Experience / branding
   ------------------------- */
.experience-head {
   display: flex;
   justify-content: space-between;
   align-items: end;
   gap: 40px
}

.experience-collage {
   height: 560px;
   margin-top: 60px;
   position: relative
}

.experience-frame {
   position: absolute;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 15px;
   overflow: hidden;
   box-shadow: 0 30px 80px rgba(0, 0, 0, .35)
}

.frame-main {
   width: 66%;
   height: 73%;
   left: 0;
   top: 4%;
   transform: rotate(-2deg);
   z-index: 2
}

.frame-brand {
   width: 42%;
   height: 65%;
   right: 0;
   top: 0;
   transform: rotate(3deg);
   z-index: 3
}

.frame-small {
   width: 40%;
   height: 44%;
   left: 27%;
   bottom: 0;
   transform: rotate(1deg);
   z-index: 4
}

.exp-browser {
   height: 100%;
   background: #0e0b12
}

.exp-browser>span {
   display: block;
   padding: 12px 15px;
   border-bottom: 1px solid rgba(255, 255, 255, .08);
   font-size: 7px;
   letter-spacing: .12em;
   color: #716878
}

.exp-browser>div {
   height: calc(100% - 35px);
   background: radial-gradient(circle at 75% 30%, rgba(153, 120, 182, .4), transparent 40%), linear-gradient(135deg, #0f0c14, #2b1b40)
}

.exp-browser b,
.exp-browser em {
   display: block;
   font-size: clamp(50px, 7vw, 110px);
   line-height: .75;
   letter-spacing: -.09em
}

.exp-browser em {
   color: #bda8ca;
   font-style: italic;
   font-weight: 400
}

.exp-browser i {
   display: block;
   width: 80px;
   height: 80px;
   border-radius: 50%;
   border: 1px solid #d7ac29;
   margin: 35px 0 0 auto
}

.brand-board {
   height: 100%;
   background: #e8e2ea;
   color: #2c1d36
}

.brand-board small {
   font-size: 7px;
   letter-spacing: .14em
}

.brand-board strong {
   display: block;
   font-size: clamp(40px, 5vw, 80px);
   line-height: .8;
   letter-spacing: -.08em;
   margin-top: 30px
}

.brand-board span {
   display: block;
   margin-top: 40px;
   font-size: 10px;
   letter-spacing: .1em
}

.small-site {
   height: 100%;
   padding: 25px;
   background: linear-gradient(135deg, #241733, #100d14)
}

.small-site small {
   font-size: 7px;
   color: #9b8ba4;
   letter-spacing: .13em
}

.small-site strong {
   display: block;
   font-size: clamp(30px, 4vw, 55px);
   line-height: .8;
   letter-spacing: -.07em;
   margin-top: 35px
}

.experience-cta {
   border-top: 1px solid var(--line);
   padding-top: 24px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 30px
}

.experience-cta p {
   margin: 0;
   color: #7e7684;
   font-size: 10px
}

.experience-cta a {
   color: white;
   font-size: 9px;
   letter-spacing: .06em;
   text-transform: uppercase
}

.experience-cta a span {
   color: var(--gold);
   margin-left: 7px
}

/* -------------------------
   Systems
   ------------------------- */
.systems-section {
   position: relative;
   overflow: hidden;
   background: #09070d
}

.systems-glow {
   position: absolute;
   width: 600px;
   height: 600px;
   left: 50%;
   top: 45%;
   transform: translate(-50%, -50%);
   background: radial-gradient(circle, rgba(98, 74, 134, .25), transparent 65%);
   filter: blur(20px)
}

.systems-head {
   display: flex;
   align-items: end;
   justify-content: space-between;
   gap: 50px;
   margin-top: 28px
}

.automation-stage {
   height: 520px;
   margin-top: 45px;
   position: relative;
   border: 1px solid rgba(255, 255, 255, .07);
   border-radius: 20px;
   background: radial-gradient(circle at center, rgba(98, 74, 134, .13), transparent 38%), #0c0910;
   overflow: hidden
}

.automation-stage:before {
   content: "";
   position: absolute;
   inset: 0;
   background-image: linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
   background-size: 50px 50px;
   mask-image: radial-gradient(circle at center, #000, transparent 80%)
}

.automation-core {
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
   width: 120px;
   height: 120px;
   border: 1px solid rgba(153, 120, 182, .55);
   border-radius: 50%;
   display: grid;
   place-items: center;
   text-align: center;
   font-size: 23px;
   line-height: .8;
   font-weight: 700;
   letter-spacing: -.06em;
   background: rgba(12, 9, 16, .85);
   box-shadow: 0 0 80px rgba(98, 74, 134, .22);
   z-index: 3
}

.automation-core span {
   font-size: 6px;
   letter-spacing: .15em;
   color: #8c8192;
   font-weight: 400
}

.automation-node {
   position: absolute;
   width: 125px;
   height: 75px;
   border: 1px solid rgba(255, 255, 255, .1);
   border-radius: 10px;
   background: rgba(14, 11, 18, .92);
   backdrop-filter: blur(10px);
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 0 14px;
   z-index: 4;
   animation: node-float 5s ease-in-out infinite
}

.automation-node small {
   font-size: 6px;
   letter-spacing: .12em;
   color: #746a7b
}

.automation-node strong {
   font-size: 13px;
   margin-top: 5px
}

.node-start {
   left: 9%;
   top: 20%
}

.node-ai {
   left: 30%;
   top: 7%;
   animation-delay: -1s
}

.node-crm {
   right: 10%;
   top: 22%;
   animation-delay: -2s
}

.node-notify {
   left: 16%;
   bottom: 18%;
   animation-delay: -3s
}

.node-follow {
   right: 20%;
   bottom: 12%;
   animation-delay: -4s
}

@keyframes node-float {
   50% {
      transform: translateY(-8px)
   }
}

.automation-line {
   position: absolute;
   height: 1px;
   background: linear-gradient(90deg, transparent, rgba(153, 120, 182, .75), transparent);
   transform-origin: left center;
   z-index: 2;
   animation: flowline 2.5s linear infinite
}

.line-a {
   width: 280px;
   left: 18%;
   top: 29%;
   transform: rotate(-18deg)
}

.line-b {
   width: 300px;
   left: 42%;
   top: 24%;
   transform: rotate(28deg);
   animation-delay: -.6s
}

.line-c {
   width: 300px;
   left: 18%;
   top: 70%;
   transform: rotate(12deg);
   animation-delay: -1.2s
}

.line-d {
   width: 290px;
   left: 48%;
   top: 70%;
   transform: rotate(-20deg);
   animation-delay: -1.8s
}

@keyframes flowline {
   0% {
      opacity: .15
   }

   45% {
      opacity: 1
   }

   100% {
      opacity: .15
   }
}

/* -------------------------
   CTA
   ------------------------- */
.work-cta-section {
   position: relative;
   overflow: hidden;
   padding: 145px 0 130px;
   background: #0a080d
}

.work-cta-orb {
   position: absolute;
   width: 600px;
   height: 600px;
   right: -180px;
   top: 50%;
   transform: translateY(-50%);
   background: radial-gradient(circle, rgba(98, 74, 134, .3), transparent 65%);
   filter: blur(25px)
}

/* -------------------------
   Responsive
   ------------------------- */
@media (max-width:991px) {
   .work-hero {
      padding-top: 130px
   }

   .work-collage {
      height: 420px
   }

   .outcome-case {
      grid-template-columns: 1fr;
      gap: 25px
   }

   .outcome-info {
      border-left: 0;
      border-top: 1px solid var(--line);
      padding: 28px 0 0
   }

   .outcome-visual {
      min-height: 500px
   }

   .products-head,
   .experience-head,
   .systems-head,
   .ads-head,
   .outcomes-heading {
      align-items: start;
      flex-direction: column
   }

   .product-window-body {
      grid-template-columns: 120px 1fr
   }

   .experience-collage {
      height: 500px
   }

   .automation-stage {
      height: 460px
   }
}

@media (max-width:767px) {
   .work-hero {
      min-height: auto;
      padding: 120px 0 70px
   }

   .work-hero-title {
      font-size: clamp(49px, 14vw, 80px)
   }

   .work-hero-copy p {
      font-size: 11px
   }

   .work-collage {
      height: 390px;
      margin-top: 50px
   }

   .collage-card {
      width: 250px;
      height: 150px
   }

   .track-one {
      top: 25px
   }

   .track-two {
      top: 160px
   }

   .track-three {
      top: 300px
   }

   .proof-browser {
      width: 100%;
      transform: none
   }

   .outcome-visual {
      min-height: 530px;
      padding: 10px
   }

   .proof-float {
      min-width: 110px;
      padding: 10px 11px
   }

   .proof-float strong {
      font-size: 22px
   }

   .pf-one {
      left: -5px;
      top: 35px
   }

   .pf-two {
      right: -5px;
      top: 115px
   }

   .pf-three {
      left: 0;
      bottom: 70px
   }

   .pf-four {
      right: 0;
      bottom: 18px
   }

   .proof-body {
      padding: 20px;
      grid-template-columns: 1fr
   }

   .proof-chart {
      display: none
   }

   .proof-copy strong {
      font-size: 42px
   }

   .ad-tile {
      width: 195px;
      height: 245px
   }

   .product-window-body {
      grid-template-columns: 1fr
   }

   .product-window-body aside {
      display: none
   }

   .product-dashboard {
      padding: 28px
   }

   .pd-metrics {
      grid-template-columns: 1fr
   }

   .pd-chart {
      height: 80px
   }

   .product-mini-grid {
      grid-template-columns: 1fr
   }

   .experience-collage {
      height: 430px
   }

   .frame-main {
      width: 92%;
      height: 62%;
      left: 0
   }

   .frame-brand {
      width: 62%;
      height: 55%;
      right: 0;
      top: 4%
   }

   .frame-small {
      width: 62%;
      height: 35%;
      left: 17%;
      bottom: 0
   }

   .experience-cta {
      align-items: start;
      flex-direction: column
   }

   .automation-stage {
      height: 440px
   }

   .automation-core {
      width: 95px;
      height: 95px
   }

   .automation-node {
      width: 105px;
      height: 67px
   }

   .node-start {
      left: 5%;
      top: 16%
   }

   .node-ai {
      left: 31%;
      top: 5%
   }

   .node-crm {
      right: 4%;
      top: 20%
   }

   .node-notify {
      left: 7%;
      bottom: 13%
   }

   .node-follow {
      right: 7%;
      bottom: 7%
   }

   .line-a {
      width: 170px;
      left: 20%;
      top: 27%
   }

   .line-b {
      width: 180px;
      left: 48%;
      top: 25%
   }

   .line-c {
      width: 180px;
      left: 17%;
      top: 70%
   }

   .line-d {
      width: 175px;
      left: 48%;
      top: 70%
   }

   .work-cta-section {
      padding: 110px 0 100px
   }
}

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

   .collage-track,
   .ad-marquee-track,
   .proof-float,
   .proof-chart span,
   .pd-chart i,
   .automation-node,
   .automation-line {
      animation: none !important
   }

   .work-scroll-cue i:after {
      animation: none
   }
}