/* Illustrated process: one clear sequence on Home and About. */
.visual-process{padding:clamp(44px,6vw,86px) 0;background:#f5f4f0;color:#151515}
.process-about{background:transparent;border-top:1px solid #ddd;margin-top:35px}
.process-heading{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:34px}
.process-heading h2{font-size:clamp(37px,4.3vw,64px);font-weight:850;line-height:1.02;letter-spacing:-.06em;margin:0;text-transform:none}
.process-heading h2 em{font-style:normal;color:#c9082c}
.process-kicker{font-size:11px;font-weight:800;letter-spacing:.15em;display:flex;align-items:center;gap:9px;margin:0 0 17px;color:#aa0827}
.process-kicker>span{width:8px;height:8px;background:#cd0a2e;border-radius:50%}
.process-heading>p{max-width:34ch;font-size:17px;color:#5b595d;line-height:1.6;margin:0 0 4px}
.visual-process-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.visual-process-card{background:white;border:1px solid #e1dfdb;border-radius:14px;position:relative;min-width:0}
.process-art{height:290px;position:relative;isolation:isolate;display:flex;align-items:center;justify-content:center;overflow:hidden;border-radius:13px 13px 0 0}
.process-art-chat{background-color:#f4e8e5;background-image:radial-gradient(#d9bfb780 .8px,transparent .8px);background-size:16px 16px}
.process-art-proof{background:#e9e9e1}
.process-art-delivery{background:#c9082c}
.art-orbit{position:absolute;border:1px solid #be9b8c55;border-radius:50%;width:260px;height:260px;left:calc(50% - 130px);top:35px}
.orbit-two{width:320px;height:320px;left:calc(50% - 160px);top:14px;border-color:#c0c2af}
.process-phone{width:214px;height:245px;border:5px solid #222226;border-radius:23px;background:#fff;transform:rotate(-5deg) translateY(7px);padding:12px 10px;box-shadow:9px 13px 0 #1a12120a;position:relative}
.phone-top{display:flex;gap:7px;align-items:center;border-bottom:1px solid #e8e7e5;padding-bottom:9px;color:#171717;font-size:10px;font-weight:850;letter-spacing:-.01em}
.phone-top small{display:block;font-size:8px;font-weight:500;color:#777;margin-top:2px}
.phone-avatar{width:27px;height:27px;border-radius:50%;background:#1a1b1b;color:white;display:grid;place-items:center}
.phone-avatar svg{width:17px;height:17px}
.chat-message{font-size:10px;line-height:1.35;border-radius:9px;padding:8px 11px;position:relative;width:max-content}
.chat-in{background:#edeeeb;margin:9px 0 6px}
.chat-reference{display:flex;align-items:center;gap:10px;font-size:9px;line-height:1.4;font-weight:700;background:#f5f1e9;width:138px;border-radius:8px;padding:5px;margin-bottom:5px}
.chat-reference img{width:45px;height:60px;object-fit:contain;display:block;mix-blend-mode:multiply}
.chat-out{background:#c9082c;color:white;margin-left:auto;padding-right:20px}
.chat-out svg{width:11px;height:11px;position:absolute;right:5px;bottom:7px}
.process-float{position:absolute;display:flex;align-items:center;justify-content:center;gap:7px;background:#fff;color:#181819;border:1px solid #e4dfd7;border-radius:100px;padding:10px 14px;font-size:10px;font-weight:750;box-shadow:0 6px 22px #00000010;white-space:nowrap;z-index:3}
.process-float svg{width:16px;height:16px;color:#c9082c}
.chat-float{right:13px;top:38px;transform:rotate(4deg)}
.process-proof{background:#fff;border:1px solid #ddd9cd;width:225px;transform:rotate(5deg);border-radius:5px;padding:11px;box-shadow:8px 11px 0 #2020200a;position:relative}
.proof-top{display:flex;align-items:center;gap:3px;font-size:7px;font-weight:800;letter-spacing:.07em;padding-bottom:9px;border-bottom:1px solid #e9e9e6}
.proof-top>span{margin-right:auto}.proof-top i{width:4px;height:4px;background:#bcbab4;border-radius:50%;display:block}
.proof-image{position:relative;height:170px;display:flex;align-items:center;justify-content:center;background:#f6f3ec;margin-top:8px;overflow:hidden}
.proof-image>img{width:120px;height:170px;object-fit:contain;mix-blend-mode:multiply}
.proof-callout{position:absolute;right:5px;top:50px;font-size:7px;font-weight:700;line-height:1.35;padding:6px;background:#fff;border:1px solid #ddd6c8;border-radius:4px;box-shadow:0 2px 3px #00000008}
.proof-callout svg{width:10px;height:10px;color:#b90629;display:block;margin-top:3px}
.proof-bottom{display:flex;align-items:center;gap:4px;margin-top:10px;font-size:7px;color:#757575}
.proof-bottom>span:last-child{margin-left:auto}.proof-swatch{width:12px;height:12px;border:1px solid #aaa;border-radius:50%}.proof-swatch.navy{background:#15253d}.proof-swatch.cream{background:#f3eee5}.proof-swatch.red{background:#c9092b}
.proof-float{left:12px;bottom:20px;transform:rotate(-4deg)}
.process-kit{position:absolute;top:31px;left:calc(50% - 128px);width:256px;height:175px;border:6px solid white;border-bottom-width:22px;transform:rotate(-6deg);box-shadow:5px 9px 0 #60051b33;background:white;overflow:hidden}
.process-kit img{width:100%;height:100%;object-fit:cover;display:block}
.process-parcel{position:absolute;width:140px;height:125px;bottom:27px;right:22px;transform:rotate(7deg)}
.process-parcel>svg{display:block;width:100%;height:100%;stroke:none;stroke-width:0}
.process-parcel>span{position:absolute;left:25px;top:64px;font-size:11px;font-weight:850;line-height:1.05;transform:rotate(25deg);color:#634c33}
.delivery-float{left:13px;bottom:20px;transform:rotate(-4deg)}
.delivery-route{position:absolute;width:250px;height:250px;border:1px dashed #ffffff50;border-radius:50%;top:80px;left:-36px}
.process-card-copy{padding:25px 24px 24px;position:relative}
.process-step{display:inline-grid;place-items:center;width:31px;height:31px;border:1px solid #dfddda;color:#bd072b;border-radius:50%;font-size:11px;font-weight:800;margin-bottom:14px}
.process-card-copy h3{font-size:clamp(21px,1.8vw,26px);letter-spacing:-.045em;line-height:1.12;margin:0 0 12px;font-weight:800}
.process-card-copy>p{font-size:14px;line-height:1.6;color:#5b595e;margin:0;min-height:68px}
.process-tags{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:19px 0 0}
.process-tags li{font-size:10px;line-height:1.2;padding:6px 9px;border-radius:4px;color:#686569;background:#f3f2ef}
.process-connector{position:absolute;top:128px;right:-29px;z-index:4;width:34px;height:34px;display:grid;place-items:center;background:#161617;border:4px solid #f5f4f0;border-radius:50%;color:white}
.process-connector svg{width:17px;height:17px}
.process-start{background:#161617;border-radius:10px;margin-top:24px;padding:23px 26px;display:flex;align-items:center;gap:18px;color:#fff}
.process-start-icon{width:43px;height:43px;display:grid;place-items:center;border:1px solid #525254;border-radius:50%;flex-shrink:0}.process-start-icon svg{width:23px;height:23px}
.process-start strong{font-size:18px;letter-spacing:-.025em}.process-start p{color:#c4c3c7;font-size:13px;margin:5px 0 0;line-height:1.45}
.process-start .btn{margin-left:auto;flex-shrink:0;font-size:13px}
@media(min-width:1600px){.process-art{height:320px}.process-phone{transform:rotate(-5deg) scale(1.08)}.process-proof{transform:rotate(5deg) scale(1.08)}.process-kit{top:45px}.process-parcel{bottom:36px}.process-connector{top:143px}}
@media(max-width:1000px) and (min-width:701px){.visual-process-grid{gap:13px}.process-art{height:250px}.process-phone{transform:rotate(-5deg) scale(.8)}.process-proof{transform:rotate(5deg) scale(.8)}.process-kit{transform:rotate(-6deg) scale(.8);top:20px}.process-parcel{transform:rotate(7deg) scale(.8);right:0;bottom:21px}.process-float{font-size:8px;padding:7px 9px}.chat-float{right:5px;top:30px}.proof-float,.delivery-float{left:5px;bottom:15px}.process-connector{right:-24px;top:108px}.process-card-copy{padding:20px 16px}.process-card-copy h3{font-size:21px}.process-card-copy>p{font-size:13px;min-height:84px}.process-tags{gap:4px}.process-tags li{font-size:9px;padding:5px 6px}.process-start{padding:20px}.process-start .btn{font-size:12px;padding:12px}}
@media(max-width:700px){.process-heading{display:block;margin-bottom:25px}.process-heading>p{margin:18px 0 0;font-size:15px;max-width:38ch}.process-heading h2{font-size:42px}.visual-process-grid{grid-template-columns:minmax(0,1fr);gap:23px}.visual-process-card{display:grid;grid-template-columns:.9fr 1.1fr;border-radius:12px;overflow:visible}.process-art{height:100%;min-height:280px;border-radius:11px 0 0 11px}.process-card-copy{padding:24px 20px}.process-card-copy>p{min-height:0;font-size:13px}.process-card-copy h3{font-size:23px}.process-phone{transform:rotate(-5deg) scale(.75)}.process-proof{transform:rotate(5deg) scale(.75)}.process-kit{transform:rotate(-6deg) scale(.68);left:calc(50% - 128px);top:25px}.process-parcel{transform:rotate(7deg) scale(.8);right:-2px;bottom:25px}.process-float{font-size:8px;padding:7px 9px}.chat-float{right:6px;top:31px}.proof-float,.delivery-float{left:6px;bottom:22px}.process-connector{top:auto;right:calc(50% - 17px);bottom:-29px;transform:rotate(90deg)}.process-start{gap:13px;flex-wrap:wrap;padding:22px}.process-start>div{flex:1;min-width:0}.process-start .btn{width:100%;margin:5px 0 0}.process-start strong{font-size:17px}}
@media(max-width:480px){.visual-process-card{display:block}.process-art{height:270px;min-height:0;border-radius:11px 11px 0 0}.process-phone{transform:rotate(-5deg) scale(.96)}.process-proof{transform:rotate(5deg) scale(.96)}.process-kit{transform:rotate(-6deg) scale(.94);top:26px}.process-parcel{transform:rotate(7deg) scale(.96);right:13px;bottom:22px}.process-float{font-size:10px;padding:9px 12px}.chat-float{right:10px;top:32px}.proof-float,.delivery-float{left:11px;bottom:17px}.process-card-copy{padding:21px 23px 23px}.process-card-copy h3{font-size:25px}.process-card-copy>p{font-size:14px}.process-step{margin-bottom:12px}.process-tags{margin-top:15px}.process-heading h2{font-size:40px}}
/* Browse original work without leaving the page. */
.work-toolbar{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:25px 0}
.work-filters{display:flex;flex-wrap:wrap;gap:8px}
.work-filters button{font:inherit;font-size:13px;font-weight:650;min-height:42px;padding:10px 15px;border:1px solid #d6d5d2;border-radius:100px;background:white;color:#3d3d42;cursor:pointer}
.work-filters button[aria-pressed=true]{color:white;background:#171718;border-color:#171718}
.work-filters button:hover{border-color:#b30727}.work-filters button:focus-visible{outline:3px solid #ce1137;outline-offset:3px}
.work-count{font-size:12px;color:#666;white-space:nowrap}
.work-photo a{position:relative}.work-photo a:after{content:'↗';position:absolute;right:12px;bottom:12px;display:grid;place-items:center;width:30px;height:30px;background:#fff;color:#222;border-radius:50%;box-shadow:0 2px 10px #0002;font-size:20px;opacity:.9}
.work-photo a:hover:after{background:#c9082c;color:#fff}.work-photo-category{display:block;font-size:10px;letter-spacing:.09em;text-transform:uppercase;color:#a40828;margin-bottom:7px}
.work-lightbox{max-width:min(1080px,calc(100% - 28px));padding:22px;background:#fff}
.work-lightbox .dialog-head{margin-bottom:14px}.work-lightbox .dialog-head h2{font-size:24px}
.work-lightbox-image{display:flex;justify-content:center;background:#f2f2ef;border-radius:5px;overflow:hidden}
.work-lightbox-image img{height:57vh;max-height:650px;width:100%;object-fit:contain;display:block}
.work-lightbox-caption{margin:12px 0 0;font-size:13px;color:#555;line-height:1.55}
.work-lightbox-nav{display:flex;align-items:center;gap:12px;margin-top:16px;flex-wrap:wrap}
.work-lightbox-nav button{height:42px;width:42px;border:1px solid #ddd;border-radius:50%;background:white;display:grid;place-items:center;cursor:pointer}.work-lightbox-nav button svg{width:18px;height:18px}
.work-lightbox-nav button:hover{border-color:#c9082c;color:#c9082c}.work-lightbox-nav>span{font-size:12px;color:#666;margin-right:auto}
.work-lightbox-nav>a:not(.btn){font-size:12px;color:#666;text-decoration:underline;text-underline-offset:3px}.work-lightbox-nav .btn{font-size:12px;min-height:42px;padding:10px 14px}
@media(max-width:700px){.work-toolbar{align-items:start;flex-direction:column;gap:12px}.work-filters{gap:6px}.work-filters button{font-size:12px;min-height:40px;padding:8px 12px}.work-lightbox{padding:17px}.work-lightbox .dialog-head h2{font-size:20px}.work-lightbox-image img{height:48vh}.work-lightbox-nav .btn{width:100%;margin-top:2px}.work-lightbox-nav>a:not(.btn){margin-left:auto}.work-lightbox-nav>span{margin-right:0}}
