:root{--purple:#6225dc;--paper:#f5f3ef;--ink:#211a2c;--line:#d6cfdf;--lav:#e8ddfc}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button{font:inherit;cursor:pointer}a:focus-visible,button:focus-visible{outline:3px solid #a586df;outline-offset:4px}header{margin:0 5%;height:88px;display:flex;align-items:center;justify-content:space-between}.word{font-size:27px;font-weight:800;letter-spacing:-1.9px;line-height:.86;color:var(--purple)}nav{display:flex;gap:24px;font-size:11px;align-items:center}nav a:last-child{background:var(--ink);color:white;padding:12px 17px;border-radius:24px}section{padding:34px 5%}.eyebrow{font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase}.location{font-size:10px;font-weight:600;display:flex;justify-content:center;gap:20px}.hero{text-align:center;padding-top:22px;padding-bottom:0}.hero h1{font-size:65px;line-height:1.02;letter-spacing:-.064em;margin:20px auto 15px;font-weight:800;max-width:850px}.hero em{font-style:normal;color:var(--purple)}.intro{font-size:12px;line-height:1.7;max-width:425px;margin:0 auto 18px}.button{display:inline-flex;gap:25px;align-items:center;background:var(--purple);color:white;padding:13px 18px;font-size:11px;border-radius:4px}.group{display:block;width:640px;max-width:100%;height:263px;object-fit:cover;object-position:50% 45%;margin:20px auto 0;mix-blend-mode:multiply}.section-head{display:flex;align-items:end;justify-content:space-between;gap:30px;margin-bottom:24px}h2{font-size:35px;line-height:1.05;letter-spacing:-.055em;margin:8px 0 0;font-weight:800}h3{margin:0;font-size:16px;letter-spacing:-.03em}.section-head>p{font-size:11px;line-height:1.7;max-width:375px;margin:0}.team{border-top:1px solid var(--line)}.people{display:grid;grid-template-columns:repeat(5,1fr);gap:18px}.person{text-align:center}.person svg{width:88px;height:88px;display:block;margin:0 auto 10px;mix-blend-mode:multiply}.person h3{font-size:15px}.person p{font-size:9px;line-height:1.5;margin:5px auto 0;max-width:155px}.services{background:var(--lav)}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0 25px}.service-grid article{display:flex;gap:12px;align-items:start;border-top:1px solid #bfb0d4;padding:18px 0}.number{font-size:9px;padding-top:3px;color:var(--purple)}.service-grid h3{font-size:15px}.service-grid p{font-size:10px;margin:7px 0 0}.arr{margin-left:auto;font-size:15px}.works .section-head a{font-size:11px;text-decoration:underline;text-underline-offset:4px}.project-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:17px}.project-grid img{width:100%;height:156px;object-fit:cover;display:block}.project-meta{padding-top:12px}.project-meta small{font-size:8px;text-transform:uppercase;letter-spacing:.03em}.project-meta h3{font-size:21px;display:flex;justify-content:space-between;margin:5px 0}.project-meta h3 span{font-size:15px}.project-meta p{font-size:10px;line-height:1.6;margin:7px 0 0;max-width:300px}.contact{background:var(--ink);color:white;display:flex;align-items:center;justify-content:space-between;padding-top:32px;padding-bottom:32px}.contact h2{font-size:38px}.contact p{font-size:11px;line-height:1.5;margin-bottom:0}.contact .button{background:var(--lav);color:var(--ink)}footer{display:flex;justify-content:space-between;padding:17px 5%;font-size:9px}.note{font-size:10px;color:#665a74;border-top:1px solid var(--line);padding:14px 5%;line-height:1.5}.work-tabs{display:none}
/* B: a playful composition and blocks of colour. */
.b header{border-bottom:1px solid var(--line)}.b .hero{display:grid;grid-template-columns:1fr 1fr;text-align:left;align-items:center;padding:25px 5% 30px;background:#e8ddfc;position:relative;overflow:hidden}.b .location{grid-column:1/-1;justify-content:flex-start;margin-bottom:20px}.b .hero h1{font-size:56px;margin:0 0 18px}.b .hero .intro{margin-left:0;max-width:330px}.b .group{width:560px;height:340px;object-fit:contain;max-width:none;margin:0 0 0 -45px;transform:rotate(-3deg)}.b .team{padding-top:25px;padding-bottom:27px}.b .team .section-head{margin-bottom:18px}.b .team h2{font-size:30px}.b .person:nth-child(even){transform:translateY(12px)}.b .person svg{border-radius:45%;background:#e8ddfc;width:76px;height:76px}.b .people{padding-bottom:12px}.b .services{background:var(--ink);color:white}.b .services h2{color:#e6d5ff}.b .service-grid{gap:12px}.b .service-grid article{padding:18px 14px;min-height:87px;border:1px solid #62536f;background:#34263e;border-radius:3px}.b .number{color:#ceaffa}.b .arr{color:#ceaffa}.b .works{background:#e8ddfc}.b .project-grid{grid-template-columns:1.3fr 1fr 1fr;gap:14px;align-items:start}.b .project-grid article{background:var(--paper);padding:9px 9px 13px;box-shadow:3px 3px 0 #c2acd9}.b .project-grid article:first-child{transform:rotate(-1.5deg)}.b .project-grid article:nth-child(2){transform:rotate(1.5deg);margin-top:17px}.b .project-grid article:nth-child(3){transform:rotate(-1deg)}.b .project-grid img{height:145px}.b .project-grid article:first-child img{height:171px}.b .project-meta{padding:8px 4px 0}.b .contact{background:var(--purple)}
/* C: controlled density, horizontal information and one project viewer. */
.c header{height:78px;border-bottom:1px solid var(--line)}.c .hero{padding-top:24px}.c .hero h1{font-size:58px;max-width:800px}.c .group{width:590px;height:218px;object-fit:cover;object-position:50% 42%;margin-top:12px}.c .hero .intro{display:none}.c .team{padding-top:23px;padding-bottom:25px;background:white}.c .team .section-head{margin-bottom:20px}.c .team h2{font-size:26px}.c .team .section-head>p{max-width:470px}.c .people{gap:12px}.c .person{text-align:left;display:flex;align-items:center;gap:9px}.c .person svg{width:56px;height:64px;flex-shrink:0;margin:0}.c .person h3{font-size:12px}.c .person p{font-size:8px;max-width:115px}.c .services{display:grid;grid-template-columns:.75fr 1.6fr;gap:30px;background:var(--paper);border-bottom:1px solid var(--line)}.c .services .section-head{display:block}.c .services h2{font-size:33px}.c .service-grid{grid-template-columns:1fr 1fr;gap:0 20px}.c .service-grid article{padding:15px 0}.c .service-grid h3{font-size:14px}.c .works{padding-top:28px}.c .work-tabs{display:flex;gap:8px}.c .work-tabs button{border:1px solid var(--line);padding:9px 13px;font-size:10px;background:transparent;border-radius:20px}.c .work-tabs button[aria-pressed=true]{background:var(--purple);border-color:var(--purple);color:white}.c .project-grid{display:block}.c .project-grid article{display:none;grid-template-columns:1.8fr 1fr;gap:28px;background:#e8ddfc;padding:16px}.c .project-grid article.active{display:grid}.c .project-grid img{height:220px}.c .project-meta{align-self:center;padding:15px}.c .project-meta h3{font-size:30px;margin-top:14px}.c .project-meta p{font-size:12px;line-height:1.7}.c .contact h2{font-size:32px}.c .contact{padding-top:26px;padding-bottom:26px}
@media(max-width:650px){header{height:72px}nav{gap:10px;font-size:10px}nav a:nth-child(2){display:none}.word{font-size:23px}section{padding:28px 5%}.hero h1{font-size:40px}.location{font-size:8px;gap:7px;flex-wrap:wrap}.group{width:100%;height:190px}.people{grid-template-columns:repeat(3,1fr);row-gap:20px}.person svg{width:70px;height:70px}.section-head{display:block}.section-head>p{margin-top:15px}.service-grid{grid-template-columns:1fr 1fr;gap:0 16px}.service-grid h3{font-size:13px}.project-grid{grid-template-columns:1fr}.project-grid article{display:grid;grid-template-columns:1fr 1fr;gap:14px}.project-grid img{height:140px}.contact{display:block}.contact .button{margin-top:20px}.contact h2{font-size:32px}.b .hero{display:block}.b .hero h1{font-size:42px}.b .group{max-width:100%;height:230px;margin:0;transform:none}.b .hero .intro{margin-bottom:15px}.b .project-grid{grid-template-columns:1fr}.b .project-grid article{transform:none!important;margin:0!important}.b .project-grid article:first-child img{height:145px}.c .hero h1{font-size:39px}.c .group{width:100%;height:180px}.c .people{grid-template-columns:1fr 1fr}.c .services{display:block}.c .work-tabs{margin-top:15px}.c .project-grid article.active{display:block}.c .project-grid img{height:180px}}
/* Keep every head visible in the new close group study. */
.hero .group{object-fit:contain;object-position:bottom}

/* Selected combination: A's structure with B's dark service treatment. */
.services{background:var(--ink);color:#fff;padding-top:36px;padding-bottom:36px}
.services h2{color:#e6d5ff}
.services .eyebrow{color:#d7c2f5}
.service-grid{gap:12px}
.service-grid article{padding:18px 16px;min-height:87px;border:1px solid #62536f;background:#34263e;border-radius:3px}
.service-grid .number{color:#ceaffa}
.service-grid p{color:#e4dbe9}
.works{background:#eee7f7}
.contact{background:var(--ink)}
.clients{background:#ece6f4;padding:19px 5% 17px;border-top:1px solid #d9cfe3;border-bottom:1px solid #d9cfe3;overflow:hidden}
.client-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:13px}
.clients h2{font-size:10px;font-weight:600;letter-spacing:0;line-height:1.5;margin:0;color:#5b4c68}
#client-motion{font-size:9px;padding:5px 8px;border:1px solid #b7a8c4;background:transparent;border-radius:20px;color:#503c63}
.logo-window{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.logo-track{display:flex;width:200%;animation:client-slide 22s linear infinite}
.logo-set{list-style:none;display:flex;align-items:center;justify-content:space-around;gap:32px;flex:0 0 50%;margin:0;padding:8px 24px}
.logo-set li{font-size:27px;line-height:1.3;font-weight:800;letter-spacing:-1px;white-space:nowrap;color:#51405f}
@keyframes client-slide{to{transform:translateX(-50%)}}
.clients.paused .logo-track,.clients:hover .logo-track,.clients:focus-within .logo-track{animation-play-state:paused}
@media(prefers-reduced-motion:reduce){.logo-track{animation:none;width:100%}.logo-set{flex-basis:100%}.logo-set[aria-hidden]{display:none}#client-motion{display:none}}
@media(max-width:650px){.clients{padding-top:15px;padding-bottom:15px}.client-heading{gap:8px}.clients h2{font-size:9px}.logo-set{gap:22px;padding:8px 18px}.logo-set li{font-size:18px;letter-spacing:-.7px}.service-grid{gap:10px}.service-grid article{padding:15px 10px;gap:8px}.services h2{font-size:32px}}
.portfolio-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:26px 20px}.prototype-note{font-size:10px;font-weight:500;color:#6b557c}.mockup-wrap{height:220px;position:relative;padding:38px 19px 20px;background:#d8d4cd;overflow:hidden}.sample-label{position:absolute;top:14px;left:19px;font-size:8px;letter-spacing:.06em;text-transform:uppercase;color:#534958}.browser-mock{width:100%;background:white;box-shadow:0 9px 20px #211a2c24;border-radius:5px;overflow:hidden;border:1px solid #ffffff66;height:163px}.browser-bar{height:16px;display:flex;align-items:center;gap:3px;background:#f7f7f7;padding:0 7px;border-bottom:1px solid #e7e7e7}.browser-bar i{width:3px;height:3px;background:#bbb;border-radius:50%}.browser-bar>span{font-size:4px;color:#888;margin:auto}.mini-site{height:147px;background:#f6f2e9;color:#252a28}.mini-nav{display:flex;justify-content:space-between;align-items:center;padding:8px 10px;gap:5px}.mini-nav b{font-size:6px;letter-spacing:-.2px}.mini-nav>span{font-size:3px}.mini-hero{display:grid;grid-template-columns:1.05fr 1fr;gap:6px;padding:8px 10px;height:92px;overflow:hidden}.mini-copy small{font-size:4px;display:block;margin-bottom:5px}.mini-copy strong{display:block;font-size:15px;line-height:1.05;letter-spacing:-.5px}.mini-button{display:inline-block;font-size:4px;margin-top:8px;border:1px solid currentColor;padding:3px 5px}.mini-art{position:relative;overflow:hidden;background:#8b9582;min-width:0}.mini-art span{position:absolute;display:block}.mini-bottom{display:flex;gap:8px;margin:8px 10px}.mini-bottom span{height:8px;background:currentColor;opacity:.12;flex:1}.construction{background:#d0d3d1}.construction .mini-site{background:#232b2c;color:#edf3ee}.construction .mini-art{background:linear-gradient(140deg,#707e77,#283c3b)}.construction .mini-art span{background:#bbc6bf;transform:skewY(-12deg);bottom:-5px;width:23%;height:70%;left:8%}.construction .mini-art span:nth-child(2){left:36%;height:95%;background:#829d92}.construction .mini-art span:nth-child(3){left:64%;height:55%;background:#e1bd63}.shop{background:#ecd8c4}.shop .mini-art{background:#e3caa9}.shop .mini-art span{width:60%;height:60%;border-radius:45% 45% 20% 20%;background:#f5f0df;bottom:10%;left:20%;border:3px solid #b6a38b}.shop .mini-art span:nth-child(2){width:26%;height:35%;border-radius:50% 50% 35% 35%;background:#947861;left:38%;bottom:40%;border:0}.shop .mini-art span:nth-child(3){display:none}.shop .mini-copy strong{font-family:Georgia,serif;font-weight:500}.events{background:#cbacc3}.events .mini-site{background:#56254c;color:#fff1df}.events .mini-copy strong{font-size:16px}.events .mini-art{background:#bd779d}.events .mini-art span{height:57%;width:27%;border-radius:5% 5% 45% 45%;background:#e6c96c;left:13%;top:9%;transform:rotate(-13deg)}.events .mini-art span:nth-child(2){left:58%;top:29%;background:#eccad0;transform:rotate(14deg)}.events .mini-art span:nth-child(3){width:30%;height:30%;border-radius:50%;left:56%;top:8%;background:#a5ad64}.practice{background:#becbda}.practice .mini-site{background:#e9f0f5;color:#203b56}.practice .mini-copy strong{font-family:Georgia,serif;font-weight:400}.practice .mini-art{background:#728ca4;border-radius:60% 60% 0 0}.practice .mini-art span{width:70%;height:120%;border:12px solid #c3d3dc;border-radius:50%;left:45%;top:-10%}.product{background:#d5d8b7}.product .mini-site{background:#f8f7ed;color:#46472a}.product .mini-copy strong{font-family:Georgia,serif;font-weight:400}.product .mini-art{background:#d9d9c0}.product .mini-art span{width:40%;height:65%;border-radius:35% 35% 10% 10%;background:#858666;left:14%;bottom:9%}.product .mini-art span:nth-child(2){width:27%;height:43%;left:59%;background:#efefdf}.stay{background:#d9c4b4}.stay .mini-site{background:#f0e9dd;color:#503e2f}.stay .mini-copy strong{font-family:Georgia,serif;font-weight:400}.stay .mini-art{background:linear-gradient(#b8c7c0 50%,#a4a17f 50%)}.stay .mini-art span{width:55%;height:170%;background:#656e56;transform:rotate(38deg);top:18%;left:9%;border-radius:45%}.stay .mini-art span:nth-child(2){left:70%;top:28%;background:#d2b68d}.portfolio-card .project-meta{padding-top:11px}.portfolio-card .project-meta h3{font-size:18px;line-height:1.3;margin:0}.portfolio-card .project-meta p{font-size:10px;margin-top:4px;color:#675571}.work-foot{display:flex;justify-content:space-between;gap:20px;border-top:1px solid #cec0d9;margin-top:24px;padding-top:15px;font-size:10px;color:#675571}@media(min-width:1300px){.mockup-wrap{height:270px;padding-top:43px}.browser-mock{height:207px}.mini-site{height:191px}.mini-hero{height:128px}.mini-copy strong{font-size:22px}.events .mini-copy strong{font-size:22px}.mini-nav b{font-size:8px}.mini-nav>span{font-size:5px}.mini-copy small{font-size:6px}.mini-button{font-size:6px}}
@media(max-width:800px){.portfolio-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.mockup-wrap{padding-left:13px;padding-right:13px}.mini-copy strong{font-size:14px}.events .mini-copy strong{font-size:14px}}@media(max-width:480px){.portfolio-grid{grid-template-columns:1fr;gap:24px}.mockup-wrap{height:232px;padding:35px 22px 22px}.browser-mock{height:175px}.mini-site{height:159px}.mini-hero{height:103px}.mini-copy strong,.events .mini-copy strong{font-size:20px}.mini-nav b{font-size:8px}.mini-nav>span{font-size:4px}.mini-copy small{font-size:5px}.mini-button{font-size:5px}.work-foot{flex-direction:column;gap:8px}}