.illustrated-hero{height:500px}.illustrated-hero:before{background:none}.hero-illustration{position:absolute;inset:-5px -25px 15px -20px;display:flex;align-items:center;justify-content:center;mix-blend-mode:multiply}.hero-illustration img{display:block;width:100%;height:100%;object-fit:contain}.illustration-tag{position:absolute;top:5px;left:4px;border:1px solid var(--ink);background:white;font-size:11px;font-weight:700;padding:8px 13px;transform:rotate(-3deg);z-index:2}.illustration-tag i{font:700 10px Arial;font-style:normal;background:var(--yellow);padding:4px;margin-right:7px}.illustrated-hero .hero-result{bottom:9px;right:-5px;padding:15px 18px;transform:rotate(3deg)}.illustrated-hero .hero-result strong{font-size:22px}.illustrated-hero .hero-result span{font-size:9px}.reference-grid{display:grid;gap:45px 30px}.web-reference-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.print-reference-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}.reference-card{min-width:0}.reference-card .work-open{width:100%;display:block}.reference-visual{padding:0;height:auto;aspect-ratio:1.5;box-shadow:0 9px 25px #111f300c;border:1px solid #d8deda;overflow:hidden;background:#efefeb;position:relative;border-radius:4px}.reference-visual img{width:100%;height:calc(100% - 24px);display:block;object-fit:cover;object-position:top;transition:transform .3s}.reference-open:hover .reference-visual img{transform:scale(1.025)}.reference-open:hover .reference-visual{background:#efefeb}.ref-browserbar{height:24px;display:flex;align-items:center;gap:4px;background:#fafbf9;border-bottom:1px solid #d8deda;padding:0 10px;position:relative;z-index:1}.ref-browserbar>i{width:5px;height:5px;background:#cbd0d1;border-radius:50%}.ref-browserbar span{font:500 7px Arial;letter-spacing:.12em;color:#7c868e;margin-left:auto}.reference-card .zoom-label{font-size:11px;padding:13px 0}.reference-card .work-meta{padding-top:19px}.reference-card .work-meta small{font-size:10px;letter-spacing:.08em}.reference-card .work-meta h3{font-size:23px;line-height:1.6;letter-spacing:-.03em;margin:10px 0}.reference-card .work-meta p{font-size:12px;max-width:460px}.print-visual{height:320px;aspect-ratio:auto;padding:20px;background:#f3f2ed;border:0;display:flex;align-items:center;justify-content:center}.print-visual img{height:100%;object-fit:cover;object-position:top;box-shadow:0 12px 25px #111f3025}.print-reference-grid .reference-card .work-meta h3{font-size:19px}.print-reference-grid .reference-card:nth-child(1) .print-visual img{object-fit:contain}.print-reference-grid .reference-card:nth-child(2) .print-visual img{width:92%;object-fit:cover}.print-reference-grid .reference-card:nth-child(3) .print-visual img{width:95%;object-fit:cover}.banner-reference{display:grid;grid-template-columns:.8fr 1.4fr;gap:35px;align-items:center;margin-top:50px;padding-top:35px;border-top:1px solid var(--line)}.banner-reference h3{font-size:23px;line-height:1.6;margin:13px 0}.banner-reference>div>p:not(.eyebrow){font-size:12px;max-width:330px}.banner-reference .eyebrow{font-size:9px;margin-bottom:10px}.banner-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;align-items:center}.banner-strip img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;box-shadow:0 8px 20px #111f3015}.banner-strip img:nth-child(1){transform:rotate(-4deg)}.banner-strip img:nth-child(2){transform:translateY(-12px) rotate(2deg)}.banner-strip img:nth-child(3){transform:rotate(-1deg)}.collaboration-photo{background:#f5f4ed}.collaboration-photo img{object-fit:contain;mix-blend-mode:multiply}.collaboration-photo small{background:#ffffffb5;color:var(--ink)}.contact-image{background:#f5f4ed}.contact-image img{object-fit:contain}.portfolio-detail{margin:0}.portfolio-detail>img{width:100%;height:auto;display:block;border:1px solid #e2e3df}.dialog-header{position:sticky;top:-34px;background:white;z-index:3;margin:0 -4px;padding:6px 4px 20px}.dialog-header h2{font-size:22px;white-space:normal}.dialog-content{margin-top:10px}#example-dialog{max-width:900px}.dialog-close{box-shadow:0 3px 10px #111f3010}.sheet>b{word-break:break-word}
@media(max-width:1000px){.illustrated-hero{height:460px}.hero-illustration{inset:0 -15px 15px -15px}.illustration-tag{font-size:9px;padding:7px 10px}.illustrated-hero .hero-result{right:0}.illustrated-hero .hero-result strong{font-size:20px}.reference-card .work-meta h3{font-size:21px}.print-reference-grid .reference-card .work-meta h3{font-size:17px}.print-visual{height:280px;padding:14px}.banner-reference{gap:25px}}
@media(max-width:720px){.illustrated-hero{height:315px;margin-top:16px}.hero-illustration{inset:5px -18px 12px -18px}.illustration-tag{top:-2px;left:0;font-size:9px;padding:6px 9px}.illustration-tag i{font-size:8px;padding:3px;margin-right:5px}.illustrated-hero .hero-result{bottom:0;right:0;padding:10px 13px;max-width:190px;box-shadow:3px 3px var(--ink)}.illustrated-hero .hero-result strong{font-size:18px}.illustrated-hero .hero-result span{font-size:8px}.reference-grid,.web-reference-grid,.print-reference-grid{grid-template-columns:1fr;gap:33px}.reference-visual{aspect-ratio:1.45;border-radius:3px}.ref-browserbar{height:20px;padding:0 8px}.ref-browserbar>i{height:4px;width:4px}.ref-browserbar span{font-size:6px}.reference-visual img{height:calc(100% - 20px)}.reference-card .zoom-label{font-size:10px;padding:10px 0}.reference-card .work-meta{padding-top:14px}.reference-card .work-meta h3{font-size:21px;line-height:1.6;margin:8px 0}.reference-card .work-meta p{font-size:12px}.reference-card .work-meta small{font-size:9px}.print-visual{height:330px;aspect-ratio:auto;padding:20px}.print-visual img{height:100%}.print-reference-grid .reference-card .work-meta h3{font-size:21px}.banner-reference{grid-template-columns:1fr;gap:30px;margin-top:35px;padding-top:25px}.banner-reference h3{font-size:23px}.banner-reference>div>p:not(.eyebrow){font-size:12px}.banner-strip{gap:8px}.banner-strip img:nth-child(2){transform:translateY(-8px) rotate(2deg)}.dialog-header{top:-20px;padding-top:4px;padding-bottom:15px}.dialog-header h2{font-size:18px}.portfolio-detail>img{width:100%}.contact-image{height:190px}.collaboration-photo{height:235px}}
/* Show the illustration immediately after the headline on phones. */
@media(max-width:720px){.visual-hero .wrap{display:flex;flex-direction:column;gap:0;padding-top:28px}.hero-copy{display:contents}.hero-copy>.eyebrow{order:1;margin-bottom:14px}.hero-copy>.service-label{order:2;margin-bottom:11px}.hero-copy>h1{order:3}.visual-hero .illustrated-hero{order:4;width:100%;height:255px;margin:15px 0 6px;flex-shrink:0}.hero-copy>.intro{order:5;margin:14px 0 13px}.hero-copy>.empathy-tags{order:6;margin-bottom:15px}.hero-copy>.btn{order:7}.hero-copy>.micro{order:8;margin-top:9px}.illustrated-hero .hero-result{padding:8px 11px;bottom:0}.illustrated-hero .hero-result strong{font-size:16px}.illustrated-hero .hero-result span{font-size:7px}.illustration-tag{font-size:8px}.hero-illustration{inset:0 -15px 10px -15px}}