/* One continuous handoff from the studio into an eight-step creative journey. */
.studio-scene{position:relative;z-index:2}
.hero-story.story-enabled:not(.story-static)+.studio-scene{margin-top:-100svh}
.studio-scene>.approach{margin-top:0;min-height:100svh}
.process-enhanced .studio-scene{height:calc(var(--studio-height) + 100svh)}
.process-enhanced .studio-scene>.approach{position:sticky;top:var(--studio-pin-top,0px)}
.studio-exit-shade{position:absolute;inset:0;z-index:5;background:#080d19;opacity:var(--studio-shade,0);pointer-events:none;border-radius:inherit}
.agency-process{position:relative;z-index:3;background:#101c38;color:#edf3ff;border-radius:28px 28px 0 0}
.process-enhanced .agency-process{margin-top:-100svh}
.agency-stage{padding:112px var(--gutter) 28px;display:grid;gap:24px}
.process-enhanced .agency-process>.agency-stage{position:sticky;top:0;height:100svh;grid-template-rows:auto minmax(0,1fr) auto;overflow:clip;border-radius:inherit}
.agency-heading{display:grid;grid-template-columns:1.2fr 1fr;align-items:end;gap:60px}
.agency-heading .studio-eyebrow{color:#a8beff;margin-bottom:14px}
.agency-heading .studio-eyebrow-mark::before{border-color:#8eabff66;background:#315bff22}
.agency-heading .studio-eyebrow-line{background:linear-gradient(90deg,#8eabff,transparent)}
.agency-heading h2{font-size:clamp(34px,3.6vw,56px);letter-spacing:-.04em;line-height:1.06;font-weight:500}
.agency-heading>p{max-width:46ch;color:#b6c7e8;font-size:15px;line-height:1.65;padding-bottom:4px}
.agency-window{min-width:0;overflow-x:auto;scrollbar-color:#8ba9ff #182a4f;scrollbar-width:thin;outline-offset:6px}
.process-enhanced .agency-process .agency-window{overflow:clip;scroll-snap-type:none}
.agency-track{display:flex;gap:24px;align-items:stretch;width:max-content;height:100%}
.agency-step{width:min(680px,65vw);min-height:330px;padding:24px 28px;background:#f1f5fd;color:#14203a;display:flex;flex-direction:column;flex-shrink:0;border:1px solid #bacce8;border-radius:4px 24px 4px 24px}
.process-enhanced .agency-step{min-height:0}
.agency-step:nth-child(4){background:#315bff;border-color:#315bff;color:#fff}
.agency-step-meta{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:11px;letter-spacing:.1em;color:#48618a;font-weight:600}
.agency-step-meta>svg{width:24px;height:24px;color:#315bff}
.agency-step-art{width:100%;height:clamp(70px,13svh,140px);flex:1 1 90px;min-height:46px;max-height:140px;margin:12px 0;color:#91a4c5;stroke-width:1.6}
.agency-step-art .art-accent{stroke:#315bff;stroke-width:2.4}
.agency-step-art .art-dot{fill:#315bff;stroke:#315bff}
.agency-step h3{font-size:clamp(25px,2.3vw,34px);font-weight:500;line-height:1.12;letter-spacing:-.035em;margin:0 0 12px}
.agency-step-copy>p{font-size:14px;line-height:1.65;color:#4b5d7b;max-width:46ch}
.agency-step-outcome{display:flex;gap:12px;align-items:baseline;margin-top:auto;padding-top:18px;font-size:12px;color:#3a5279}
.agency-step-outcome>span{font-size:10px;text-transform:uppercase;letter-spacing:.1em;color:#315bff}
.agency-step:nth-child(4) .agency-step-meta,.agency-step:nth-child(4) .agency-step-copy>p,.agency-step:nth-child(4) .agency-step-outcome{color:#e1eaff}
.agency-step:nth-child(4) .agency-step-meta>svg,.agency-step:nth-child(4) .agency-step-outcome>span{color:#fff}
.agency-step:nth-child(4) .art-accent{stroke:#fff}
.agency-controls{display:flex;align-items:center;justify-content:space-between;gap:20px}
.agency-scroll-hint{font-size:12px;color:#b6c7e8}
.agency-step-dots{display:flex;gap:5px}
.agency-step-dots button{width:25px;height:36px;background:none;border:0;padding:14px 4px}
.agency-step-dots span{display:block;height:3px;background:#526589;transition:background .2s}
.agency-step-dots [aria-current] span{background:#95b1ff}
.agency-paging{display:flex;align-items:center;gap:16px;font-size:12px;font-variant-numeric:tabular-nums}
.agency-paging button{display:grid;place-items:center;width:38px;height:38px;border:1px solid #8197bd70;background:transparent;color:#dce7ff}
.agency-paging button:hover{background:#315bff;color:#fff}
.agency-paging button:disabled{opacity:.3;cursor:default}
.agency-paging svg{width:16px;height:16px;transform:rotate(45deg)}
.agency-paging button:first-child svg{transform:rotate(-135deg)}
.agency-process :focus-visible{outline:2px solid #a7bfff;outline-offset:4px}
@media(max-width:760px){.agency-stage{padding:100px 24px 24px;gap:18px}.agency-heading{grid-template-columns:1fr;gap:14px}.agency-heading h2{font-size:34px}.agency-heading>p{font-size:13px;line-height:1.5;max-width:48ch}.agency-heading .studio-eyebrow{margin-bottom:12px}.agency-step{width:calc(100vw - 70px);padding:20px;min-height:340px}.agency-step-art{margin:6px 0}.agency-step-copy>p{font-size:13px}.agency-step-outcome{font-size:11px;padding-top:14px}.agency-scroll-hint{display:none}.agency-controls{gap:10px}.agency-step-dots{gap:0}.agency-step-dots button{width:18px}.agency-paging{gap:9px}}
@media(prefers-reduced-motion:reduce){.agency-step-dots span{transition:none}}
/* A light editorial surface rises over the final process step. */
.agency-stage{background:inherit}
.process-exit-shade{position:absolute;inset:0;z-index:5;background:#030813;opacity:var(--process-shade,0);pointer-events:none;border-radius:inherit}
.testimonials{position:relative;z-index:4;background:#e8eef9;color:#14203a;border-radius:28px 28px 0 0}
.testimonials-enhanced .testimonials{margin-top:-100svh}
.testimonials-enhanced .testimonials>.agency-stage{position:sticky;top:0;height:100svh;grid-template-rows:auto minmax(0,1fr) auto;overflow:clip;border-radius:inherit}
.testimonials-enhanced .testimonials .agency-window{overflow:clip}
.testimonials .agency-heading .studio-eyebrow{color:#315bff}
.testimonials .agency-heading>p,.testimonials .agency-scroll-hint{color:#4b5d7b}
.testimonial-card{width:min(690px,66vw);min-height:350px;flex-shrink:0;display:flex;flex-direction:column;padding:32px;background:#f9fbff;border:1px solid #bacce8;border-radius:4px 24px 4px 24px}
.testimonials-enhanced .testimonial-card{min-height:0}
.testimonial-top{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:12px;color:#315bff}
.testimonial-top svg{width:28px;height:28px;flex-shrink:0}
.testimonial-card blockquote{margin:24px 0 28px;max-width:36ch;font-size:clamp(22px,2.1vw,31px);line-height:1.4;letter-spacing:-.025em;font-weight:500}
.testimonial-person{display:flex;align-items:center;gap:18px;margin-top:auto}
.testimonial-person img{width:88px;height:88px;object-fit:cover;border-radius:3px 18px 3px 18px;filter:saturate(.65);flex-shrink:0}
.testimonial-person h3{font-size:16px;line-height:1.4;font-weight:600;margin:0 0 4px}
.testimonial-person p{font-size:12px;color:#4b5d7b}
.testimonial-person span{display:block;font-size:17px;letter-spacing:-.03em;font-weight:700;margin-top:6px}
.testimonials .agency-step-dots span{background:#a1afc9}
.testimonials .agency-step-dots [aria-current] span{background:#315bff}
.testimonials .agency-paging button{border-color:#8197bd;color:#315bff}
.testimonials .agency-paging button:hover{color:#fff}
.testimonials :focus-visible{outline:2px solid #315bff;outline-offset:4px}
@media(max-width:760px){.testimonial-card{width:calc(100vw - 70px);padding:24px;min-height:370px}.testimonial-card blockquote{font-size:21px;margin:20px 0 26px}.testimonial-person{gap:12px}.testimonial-person img{width:68px;height:68px}.testimonial-person h3{font-size:14px}}
/* Let the illustration own the free space; keep the complete reading block below. */
.agency-step{display:grid;grid-template-rows:auto minmax(90px,1fr) auto;row-gap:20px;min-height:450px}
.agency-art-space{position:relative;min-height:90px}
.agency-art-space>.agency-step-art{position:absolute;inset:0;display:block;width:100%;height:100%;min-height:0;max-height:none;margin:0;overflow:visible}
.agency-step-copy{min-width:0}
.agency-step-copy>p{font-size:14px;line-height:1.65;color:#4b5d7b;max-width:46ch}
.agency-step-copy .agency-step-outcome{margin-top:0;padding-top:20px;flex-wrap:wrap;column-gap:12px;row-gap:4px}
.agency-step:nth-child(4) .agency-step-copy>p{color:#edf2ff}
.agency-step-art path[pathLength]{animation:process-draw 5s cubic-bezier(.4,0,.2,1) infinite;stroke-dasharray:1;stroke-dashoffset:0}
.agency-step:nth-child(2) .agency-step-art>circle:not(.art-dot){animation:process-explore 6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.agency-step:nth-child(2) .agency-step-art>circle:nth-child(2){animation-direction:reverse}
.agency-step:nth-child(4) .agency-step-art>path{stroke-dasharray:none;animation:process-concept 7s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.agency-step:nth-child(5) .agency-step-art>rect{animation:process-produce 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.agency-step:nth-child(6) .agency-step-art>circle,.agency-step:nth-child(8) .agency-step-art>.art-dot{animation:process-node 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
.agency-step:nth-child(6) .agency-step-art>circle:last-child{animation-delay:-2s}
.agency-step:nth-child(7) .agency-step-art>.art-accent{stroke-dasharray:none;animation:process-launch 5s ease-in-out infinite}
.agency-step-art>*{animation-play-state:paused!important}
.agency-step.art-visible .agency-step-art>*{animation-play-state:running!important}
.agency-stage[inert] .agency-step-art>*,.agency-process.art-paused .agency-step-art>*{animation-play-state:paused!important}
@keyframes process-draw{0%,55%,100%{stroke-dashoffset:0}70%{stroke-dashoffset:1}92%{stroke-dashoffset:0}}
@keyframes process-explore{0%,100%{transform:translateX(-4px)}50%{transform:translateX(4px)}}
@keyframes process-concept{0%,100%{transform:rotate(-4deg) scale(.96)}50%{transform:rotate(4deg) scale(1.04)}}
@keyframes process-produce{0%,100%{transform:translateY(3px)}50%{transform:translateY(-3px)}}
@keyframes process-node{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.12);opacity:.65}}
@keyframes process-launch{0%,100%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}}
@media(max-width:760px){.agency-step{min-height:460px;row-gap:16px}.agency-step-copy>p{font-size:13px}.agency-step-copy .agency-step-outcome{padding-top:16px}}
@media(prefers-reduced-motion:reduce){.agency-step-art>*{animation:none!important;stroke-dasharray:none!important}}
.motion-off .agency-step-art>*{animation:none!important;stroke-dasharray:none!important}