/* 01. Editorial web-to-app transition */
.agency-widget--hero,
.agency-widget--hero *,
.agency-widget--hero *::before,
.agency-widget--hero *::after {box-sizing: border-box;}

.agency-widget--hero {
    position: relative;
    padding: 140px 0 126px;
    overflow: hidden;
    color: var(--agency-ink, #191f28);
    background: linear-gradient(180deg, var(--agency-paper, #fff) 0%, #f8fbff 100%);
}

.agency-widget--hero::before {
    position: absolute;
    top: 84px;
    right: max(-124px, calc((100vw - var(--agency-content-width, 1200px)) / 2 - 96px));
    width: min(50vw, 640px);
    height: 470px;
    background: #edf6ff;
    content: '';
    pointer-events: none;
}

.agency-widget--hero h1,
.agency-widget--hero p,
.agency-widget--hero figure {margin: 0;}
.agency-widget--hero .agency-shell {width: min(var(--agency-content-width, 1200px), calc(100% - 48px)); margin: 0 auto;}
.agency-widget--hero .agency-hero__grid {position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.03fr) minmax(420px, .97fr); align-items: center; gap: clamp(52px, 6.5vw, 108px);}
.agency-widget--hero .agency-hero__content {max-width: 680px;}

.agency-widget--hero h1 {
    max-width: 770px;
    color: var(--agency-ink, #191f28);
    font-size: clamp(49px, 5.08vw, 72px);
    font-weight: 800;
    letter-spacing: -.078em;
    line-height: 1.1;
    word-break: keep-all;
}

.agency-widget--hero h1 em {color: var(--agency-primary, #2167ff); font-style: normal;}
.agency-widget--hero .agency-hero__copy {max-width: 650px; margin-top: 28px; color: var(--agency-ink-soft, #4e5968); font-size: 17px; font-weight: 500; letter-spacing: -.035em; line-height: 1.76; word-break: keep-all;}
.agency-widget--hero .agency-hero__actions {display: flex; align-items: center; flex-wrap: wrap; gap: 19px; margin-top: 37px;}

.agency-widget--hero .agency-hero__proof {
    display: flex;
    flex-wrap: wrap;
    gap: 9px 20px;
    margin: 27px 0 0;
    padding: 0;
    color: var(--agency-ink-soft, #4e5968);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: -.025em;
    line-height: 1.45;
    list-style: none;
}

.agency-widget--hero .agency-hero__proof li {display: inline-flex; align-items: center; gap: 6px;}
.agency-widget--hero .agency-hero__proof .ti {display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: 50%; background: #e4f1ff; color: var(--agency-primary, #2167ff); font-size: 11px; line-height: 1;}

.agency-widget--hero .agency-hero__art {
    --agency-web-x: 0px;
    --agency-web-y: 0px;
    --agency-app-x: 0px;
    --agency-app-y: 0px;
    position: relative;
    width: min(520px, 100%);
    min-height: 493px;
    padding: 20px 0 45px;
    isolation: isolate;
}

.agency-widget--hero .agency-hero__art::before {
    position: absolute;
    z-index: -1;
    top: 0;
    right: 7%;
    bottom: 29px;
    left: 15%;
    border: 1px solid rgba(33, 103, 255, .14);
    content: '';
}

.agency-widget--hero .agency-hero__web-plane {
    position: relative;
    z-index: 1;
    width: 77%;
    min-height: 403px;
    padding: 25px 26px 23px;
    overflow: hidden;
    background: var(--agency-ink, #191f28);
    box-shadow: 0 20px 38px rgba(25, 31, 40, .16);
    color: #fff;
    transform: translate3d(var(--agency-web-x), var(--agency-web-y), 0);
    transition: transform .28s ease-out;
}

.agency-widget--hero .agency-hero__web-plane::before {
    position: absolute;
    right: -82px;
    bottom: -82px;
    width: 204px;
    height: 204px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 50%;
    box-shadow: 0 0 0 31px rgba(255, 255, 255, .035);
    content: '';
}

.agency-widget--hero .agency-hero__art-meta {position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .72); font-size: 9px; font-weight: 800; letter-spacing: .09em; line-height: 1;}
.agency-widget--hero .agency-hero__art-meta span:first-child {color: #a9d3ff;}
.agency-widget--hero .agency-hero__web-copy {position: relative; z-index: 1; margin-top: 52px;}
.agency-widget--hero .agency-hero__web-copy small {display: block; color: #91c5ff; font-size: 10px; font-weight: 800; letter-spacing: .1em; line-height: 1;}
.agency-widget--hero .agency-hero__web-copy strong {display: block; margin-top: 15px; color: #fff; font-size: clamp(48px, 5.4vw, 72px); font-weight: 800; letter-spacing: -.105em; line-height: .86;}
.agency-widget--hero .agency-hero__web-footer {position: absolute; z-index: 1; right: 26px; bottom: 23px; left: 26px; display: flex; flex-wrap: wrap; gap: 7px 14px; padding-top: 13px; border-top: 1px solid rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .55); font-size: 8px; font-weight: 800; letter-spacing: .075em; line-height: 1.2;}

.agency-widget--hero .agency-hero__art-route {position: absolute; z-index: 2; top: 54%; left: 59%; display: flex; align-items: center; width: 30%; height: 25px; color: var(--agency-primary, #2167ff); transform: rotate(-12deg); transform-origin: left center;}
.agency-widget--hero .agency-hero__art-route span {display: block; flex: 1 1 auto; height: 1px; background: currentColor; transform: scaleX(1); transform-origin: left center;}
.agency-widget--hero .agency-hero__art-route .ti {flex: 0 0 auto; margin-left: -1px; font-size: 17px; line-height: 1;}

.agency-widget--hero .agency-hero__app-plane {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 43px;
    width: 184px;
    aspect-ratio: .495;
    overflow: hidden;
    border: 7px solid var(--agency-ink, #191f28);
    border-radius: 32px;
    background: #fff;
    box-shadow: 0 22px 35px rgba(25, 31, 40, .22);
    transform: translate3d(var(--agency-app-x), var(--agency-app-y), 0);
    transition: transform .28s ease-out;
}

.agency-widget--hero .agency-hero__app-notch {position: absolute; z-index: 2; top: 9px; left: 50%; width: 43%; height: 8px; border-radius: 99px; background: var(--agency-ink, #191f28); transform: translateX(-50%);}
.agency-widget--hero .agency-hero__app-content {position: absolute; top: 40px; right: 17px; bottom: 17px; left: 17px;}
.agency-widget--hero .agency-hero__app-content small {display: block; color: var(--agency-primary, #2167ff); font-size: 8px; font-weight: 800; letter-spacing: .095em; line-height: 1;}
.agency-widget--hero .agency-hero__app-content strong {display: block; margin-top: 14px; color: var(--agency-ink, #191f28); font-size: 27px; font-weight: 800; letter-spacing: -.09em; line-height: .91;}
.agency-widget--hero .agency-hero__app-content > span {position: absolute; top: 97px; right: 0; left: 0; height: 39%; background: var(--agency-primary, #2167ff);}
.agency-widget--hero .agency-hero__app-content > span::after {position: absolute; right: 12px; bottom: 12px; width: 34px; height: 34px; border: 1px solid rgba(255, 255, 255, .45); border-radius: 50%; content: '';}
.agency-widget--hero .agency-hero__app-content em {position: absolute; right: 0; bottom: 0; left: 0; padding-top: 10px; border-top: 1px solid #e3e8ed; color: #758295; font-size: 7px; font-style: normal; font-weight: 800; letter-spacing: .065em; line-height: 1;}
.agency-widget--hero .agency-hero__art figcaption {position: absolute; right: 0; bottom: 0; left: 0; color: #718097; font-size: 9px; font-weight: 800; letter-spacing: .09em; line-height: 1;}

.agency-widget--hero.is-motion-ready .agency-reveal {opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.75,.2,1);}
.agency-widget--hero.is-motion-ready .agency-reveal.is-inview {opacity: 1; transform: translateY(0);}
.agency-widget--hero.is-motion-ready .agency-hero__art .agency-hero__art-route span {transform: scaleX(0); transition: transform .66s cubic-bezier(.2,.75,.2,1) .28s;}
.agency-widget--hero.is-motion-ready .agency-hero__art .agency-hero__art-route .ti {opacity: 0; transform: translateX(-7px); transition: opacity .2s ease .78s, transform .3s ease .78s;}
.agency-widget--hero.is-motion-ready .agency-hero__art.is-inview .agency-hero__art-route span {transform: scaleX(1);}
.agency-widget--hero.is-motion-ready .agency-hero__art.is-inview .agency-hero__art-route .ti {opacity: 1; transform: translateX(0);}

@media (hover: hover) and (pointer: fine) {
    .agency-widget--hero .agency-hero__proof li:hover {color: var(--agency-primary, #2167ff);}
}

@media (max-width: 1024px) {
    .agency-widget--hero {padding: 105px 0 99px;}
    .agency-widget--hero::before {top: auto; right: 50%; bottom: -132px; width: min(760px, 108vw); height: 500px; transform: translateX(50%);}
    .agency-widget--hero .agency-hero__grid {grid-template-columns: 1fr; gap: 56px;}
    .agency-widget--hero .agency-hero__content {max-width: 760px;}
    .agency-widget--hero .agency-hero__art {justify-self: center; width: min(520px, 100%);}
}

@media (max-width: 640px) {
    .agency-widget--hero {padding: 78px 0 79px;}
    .agency-widget--hero .agency-shell {width: min(100% - 40px, 520px);}
    .agency-widget--hero::before {bottom: -110px; width: 590px; height: 430px;}
    .agency-widget--hero .agency-hero__grid {gap: 43px;}
    .agency-widget--hero .agency-desktop-break {display: none;}
    .agency-widget--hero h1 {font-size: clamp(40px, 10.8vw, 50px); line-height: 1.12;}
    .agency-widget--hero .agency-hero__copy {margin-top: 22px; font-size: 15px; line-height: 1.72;}
    .agency-widget--hero .agency-hero__actions {align-items: flex-start; flex-direction: column; gap: 10px; margin-top: 29px;}
    .agency-widget--hero .agency-hero__proof {display: grid; gap: 8px; margin-top: 24px; font-size: 11px;}
    .agency-widget--hero .agency-hero__art {min-height: 388px; padding-top: 16px; padding-bottom: 35px;}
    .agency-widget--hero .agency-hero__art::before {right: 5%; bottom: 22px; left: 12%;}
    .agency-widget--hero .agency-hero__web-plane {width: 78%; min-height: 319px; padding: 19px 19px 17px;}
    .agency-widget--hero .agency-hero__art-meta {padding-bottom: 10px; font-size: 7px;}
    .agency-widget--hero .agency-hero__web-copy {margin-top: 42px;}
    .agency-widget--hero .agency-hero__web-copy small {font-size: 8px;}
    .agency-widget--hero .agency-hero__web-copy strong {margin-top: 11px; font-size: clamp(42px, 12vw, 57px);}
    .agency-widget--hero .agency-hero__web-footer {right: 19px; bottom: 17px; left: 19px; gap: 5px 9px; padding-top: 10px; font-size: 6px;}
    .agency-widget--hero .agency-hero__art-route {top: 52%; left: 58%; width: 31%; transform: rotate(-13deg);}
    .agency-widget--hero .agency-hero__art-route .ti {font-size: 14px;}
    .agency-widget--hero .agency-hero__app-plane {right: 0; bottom: 34px; width: min(137px, 37%); border-width: 5px; border-radius: 24px;}
    .agency-widget--hero .agency-hero__app-notch {top: 6px; height: 6px;}
    .agency-widget--hero .agency-hero__app-content {top: 31px; right: 11px; bottom: 11px; left: 11px;}
    .agency-widget--hero .agency-hero__app-content small {font-size: 6px;}
    .agency-widget--hero .agency-hero__app-content strong {margin-top: 10px; font-size: 20px;}
    .agency-widget--hero .agency-hero__app-content > span {top: 72px;}
    .agency-widget--hero .agency-hero__app-content em {padding-top: 7px; font-size: 5px;}
    .agency-widget--hero .agency-hero__art figcaption {font-size: 7px;}
}

@media (max-width: 370px) {
    .agency-widget--hero .agency-hero__art {min-height: 353px;}
    .agency-widget--hero .agency-hero__web-plane {min-height: 290px;}
    .agency-widget--hero .agency-hero__web-copy {margin-top: 35px;}
    .agency-widget--hero .agency-hero__app-plane {width: 118px;}
}

@media (prefers-reduced-motion: reduce) {
    .agency-widget--hero *,
    .agency-widget--hero *::before,
    .agency-widget--hero *::after {scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important;}
}