.agency-story, .agency-partnership { background: #f3faff; color: #112c5b; padding: 72px 30px; }
.agency-story-container { max-width: 1280px; margin-inline: auto; }
.agency-story-heading { text-align: center; max-width: 820px; margin: 0 auto 36px; }
.agency-story-heading > span, .partnership-heading > span { color: #158bd3; font-size: 13px; font-weight: 700; }
.agency-story-heading h2, .partnership-heading h2 { margin-top: 12px; font-size: clamp(28px, 3vw, 42px); line-height: 1.5; font-weight: 700; }
.agency-story-heading > p { margin-top: 12px; color: #52647a; font-size: 16px; line-height: 1.9; }
.agency-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: 350px 320px; gap: 18px; }
.agency-tile { position: relative; isolation: isolate; min-width: 0; overflow: hidden; border-radius: 24px; color: #fff; background: #071223; }
.agency-tile > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.agency-tile-team { grid-column: 2 / 4; grid-row: 1; }
.agency-tile-team > img { object-position: center 22%; }
.agency-tile-team::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(270deg, rgb(7 18 35 / 85%), rgb(7 18 35 / 26%) 75%); }
[dir="ltr"] .agency-tile-team::after { background: linear-gradient(90deg, rgb(7 18 35 / 85%), rgb(7 18 35 / 26%) 75%); }
.agency-tile-customer { grid-column: 1; grid-row: 1 / 3; }
.agency-tile-customer > img { object-position: center; }
.agency-tile-customer::after { content: ''; position: absolute; z-index: -1; inset: 0; background: linear-gradient(0deg, rgb(7 18 35 / 95%), rgb(7 18 35 / 8%) 80%); }
.agency-tile-copy { position: relative; padding: 28px 30px; }
.agency-tile-copy h3 { font-size: clamp(28px, 3.5vw, 48px); line-height: 1.4; font-weight: 700; }
.agency-tile-copy p { margin-top: 10px; font-size: 15px; line-height: 1.9; }
.agency-tile-team .agency-tile-copy { max-width: 450px; margin-inline-start: 0; }
.agency-tile-customer .agency-tile-copy { position: absolute; bottom: 12%; inset-inline: 0; }
.agency-tile-expertise { grid-column: 2; grid-row: 2; background: #42c5f5; color: #112c5b; }
.agency-tile-expertise h3 > span { font-size: 1.3em; }
.agency-chat-art { position: absolute; width: 68%; height: auto; bottom: -18px; inset-inline-end: 20px; }
.agency-tile-reach { grid-column: 3; grid-row: 2; background: radial-gradient(ellipse at 50% 0, #154879, #071223 75%); }
.agency-globe { position: absolute; width: 105%; top: -28%; left: -2.5%; opacity: .75; transform: rotate(-20deg); }
.agency-tile-reach .agency-tile-copy { position: absolute; inset-inline: 0; bottom: 0; background: linear-gradient(transparent, rgb(7 18 35 / 88%)); }
.agency-tile-reach h3 { font-size: 32px; }
.agency-partnership {
    --partnership-pattern-opacity: .28;
    --partnership-overlay-color: #ffffff;
    --partnership-overlay-opacity: .55; /* 0 = stronger background, 1 = solid overlay color. */
    position: relative;
    isolation: isolate;
    padding-top: 28px;
    padding-bottom: 88px;
    background: linear-gradient(155deg, #c9efff, #6bcff4);
}
.agency-partnership::before,
.agency-partnership::after { content: ''; position: absolute; inset: 0; pointer-events: none; }
.agency-partnership::before {
    z-index: -2;
    background: url('../images/app-showcase/dash-pattern.svg') 0 0 / 120px 96px repeat;
    opacity: var(--partnership-pattern-opacity);
}
.agency-partnership::after {
    z-index: -1;
    background: var(--partnership-overlay-color);
    opacity: var(--partnership-overlay-opacity);
}
.partnership-heading { text-align: center; margin-bottom: 44px; }
.partnership-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 60px; }
.partnership-content { min-width: 0; }
.partnership-copy[hidden], .partnership-controls[hidden] { display: none; }
.partnership-copy.is-active { animation: partnership-copy-in 450ms ease both; }
.partnership-copy h3 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 500; line-height: 1.8; }
.partnership-copy p { margin-top: 24px; font-size: 16px; line-height: 2; color: #52647a; }
.partnership-copy a { display: inline-flex; justify-content: center; align-items: center; margin-top: 30px; padding: 15px 24px; min-height: 56px; background: #1c5fba; color: #fff; border-radius: 9px; font-size: 16px; font-weight: 700; transition: background-color 180ms ease; }
.partnership-copy a:hover { background: #158bd3; }
.partnership-controls { display: flex; align-items: center; justify-content: space-between; margin-top: 28px; flex-direction: row-reverse; }
.partnership-arrows { display: flex; gap: 16px; }
.partnership-arrows button { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #112c5b; border: 1px solid #e4edf5; cursor: pointer; transition: background-color 180ms ease; }
.partnership-arrows .partnership-next { background: #18afe7; border-color: #18afe7; }
.partnership-arrows button:hover { background: #ddf3ff; }
.partnership-arrows svg { width: 23px; height: 23px; }
.partnership-copy a:focus-visible, .partnership-arrows button:focus-visible { outline: 3px solid #42c5f5; outline-offset: 4px; }
.partnership-status { font-size: 12px; letter-spacing: .1em; color: #69839f; }
.partnership-viewport { overflow: hidden; min-width: 0; touch-action: pan-y; }
.partnership-track { display: flex; gap: 20px; transition: transform 650ms cubic-bezier(.22, 1, .36, 1); }
.partnership-card { position: relative; flex: 0 0 calc(100% - 84px); min-width: 0; height: 450px; margin: 0; border-radius: 28px; overflow: hidden; background: #cce5f5; }
.partnership-card img { width: 100%; height: 100%; object-fit: cover; object-position: center; user-select: none; -webkit-user-drag: none; }
.partnership-card figcaption { position: absolute; top: 16px; left: 16px; max-width: calc(100% - 32px); padding: 10px 20px; border-radius: 999px; background: #ddf3ff; color: #112c5b; font-size: 13px; font-weight: 700; }
@media (min-width: 768px) {
    .agency-partnership { --partnership-edge: max(30px, calc((100vw - 1280px) / 2)); overflow: hidden; }
    .agency-partnership .partnership-viewport { width: calc(100% + var(--partnership-edge)); margin-left: calc(-1 * var(--partnership-edge)); }
    .agency-partnership .partnership-card { flex-basis: calc(100% - 84px - var(--partnership-edge)); }
    [dir="ltr"] .agency-partnership .partnership-viewport { margin-left: 0; margin-right: calc(-1 * var(--partnership-edge)); }
}
@keyframes partnership-copy-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
.dark .agency-story { background: #09182a; color: #eff9ff; }
.dark .agency-story-heading > p, .dark .partnership-copy p { color: #b5c8dd; }
.dark .agency-story-heading > span, .dark .partnership-heading > span { color: #7ed4fa; }
.dark .partnership-arrows button { background: #10253e; color: #ddf3ff; border-color: #29425e; }
.dark .partnership-arrows .partnership-next { background: #158bd3; }
.agency-partnership .partnership-heading > span,
.agency-partnership .partnership-copy p,
.agency-partnership .partnership-status { color: #112c5b; }
@media (max-width: 1023px) {
    .agency-bento { grid-template-rows: 310px 290px; gap: 14px; }
    .agency-tile-copy { padding: 24px; }
    .agency-tile-copy h3 { font-size: 32px; }
    .agency-tile-copy p { font-size: 13px; }
    .partnership-layout { gap: 30px; }
    .partnership-card { height: 420px; flex-basis: calc(100% - 48px); }
}
@media (max-width: 767px) {
    .agency-story, .agency-partnership { padding: 48px 20px; }
    .agency-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: auto; gap: 14px; }
    .agency-tile-team { grid-column: 1 / 3; grid-row: 1; height: 320px; }
    .agency-tile-customer { grid-column: 1 / 3; grid-row: 2; height: 440px; }
    .agency-tile-customer > img { object-position: center 30%; }
    .agency-tile-expertise { grid-column: 1; grid-row: 3; min-height: 280px; }
    .agency-tile-reach { grid-column: 2; grid-row: 3; min-height: 280px; }
    .agency-tile-copy { padding: 20px; }
    .agency-tile-expertise .agency-tile-copy, .agency-tile-reach .agency-tile-copy { padding: 18px 14px; }
    .agency-tile-expertise h3, .agency-tile-reach h3 { font-size: 24px; }
    .agency-chat-art { width: 90%; inset-inline-end: 4px; }
    .agency-globe { top: -8%; }
    .partnership-layout { display: flex; flex-direction: column-reverse; gap: 28px; }
    .partnership-viewport, .partnership-content { width: 100%; }
    .partnership-card { height: 340px; flex-basis: calc(100% - 42px); border-radius: 22px; }
    .partnership-heading { margin-bottom: 28px; }
    .partnership-copy h3 { font-size: 24px; }
    .partnership-copy p { margin-top: 14px; font-size: 15px; }
    .partnership-copy a { margin-top: 22px; font-size: 14px; }
    .partnership-arrows button { width: 48px; height: 48px; }
}
@media (max-width: 374px) {
    .agency-tile-expertise, .agency-tile-reach { grid-column: 1 / 3; min-height: 280px; }
    .agency-tile-reach { grid-row: 4; }
    .agency-chat-art { width: 65%; }
}
@media (prefers-reduced-motion: reduce) {
    .partnership-track, .partnership-copy.is-active { transition: none; animation: none; }
}