.mkb-scene{position:absolute;inset:0;overflow:hidden;font-family:Arial,Helvetica,sans-serif;color:#172330;isolation:isolate}
.mkb-scene *{box-sizing:border-box}
.mkb-study{position:absolute;z-index:6;top:16px;left:20px;padding:5px 8px;border:1px solid currentColor;border-radius:2px;color:#4e5966;font-size:8px;font-weight:600;letter-spacing:.09em;line-height:1;text-transform:uppercase;background:rgba(255,255,255,.56)}
.mkb-study-dark{color:rgba(255,255,255,.85);background:rgba(30,23,15,.12);border-color:rgba(255,255,255,.35)}
.mkb-kicker{display:block;font-size:7px;line-height:1.4;font-weight:700;letter-spacing:.16em}
.mkb-browserbar{height:26px;padding:0 12px;display:flex;align-items:center;justify-content:space-between;background:#f8faff;border-bottom:1px solid #e5eaf3}
.mkb-browserdots{display:flex;gap:4px}
.mkb-browserdots i{display:block;width:4px;height:4px;border-radius:50%;background:#cbd3dd}
.mkb-browserurl{font-size:7px;letter-spacing:.035em;color:#85909f}
.mkb-browsermark{font-size:10px;color:#85909f}

/* GetIRNow: product-led browser on a cool blue field. */
.mkb-getirnow{background:linear-gradient(140deg,#eef3ff 0%,#dbe7ff 63%,#b5d0ff 100%)}
.mkb-ir-orbit{position:absolute;border:1px solid rgba(32,103,242,.14);border-radius:50%;width:460px;height:460px}
.mkb-ir-orbit-one{right:-180px;top:50px}
.mkb-ir-orbit-two{right:-125px;top:105px}
.mkb-ir-heading{position:absolute;top:56px;left:32px;color:#172338}
.mkb-ir-heading .mkb-kicker{color:#5176ba}
.mkb-ir-title{display:block;margin-top:8px;font-size:31px;font-weight:700;letter-spacing:-1.25px;line-height:1}
.mkb-ir-browser{position:absolute;top:126px;left:32px;width:calc(100% - 64px);height:313px;border:1px solid rgba(49,90,145,.16);border-radius:8px 8px 0 0;background:#f7f8fa;box-shadow:0 16px 42px rgba(28,60,112,.17);overflow:hidden;transform:rotate(-2deg);transform-origin:50% 50%}
.mkb-ir-product{height:calc(100% - 26px);overflow:hidden;background:#f7f8fa}
.mkb-ir-screen{display:block;width:100%;height:auto}
.mkb-ir-brand{position:absolute;z-index:4;right:25px;top:64px;display:flex;align-items:flex-end;flex-direction:column;gap:7px}
.mkb-ir-brand img{display:block;width:100px;height:24px;object-fit:contain}
.mkb-ir-brand span{font-size:7px;color:#547197}

/* Holistic Magnified: the supplied homepage with a complementary mobile study. */
.hm2-scene{position:absolute;inset:0;overflow:hidden;isolation:isolate;container-type:inline-size;container-name:holistic;font-family:Arial,Helvetica,sans-serif;color:#342f23;background:linear-gradient(135deg,#e9e5da,#d9d1c0 75%,#c8c0aa)}
.hm2-scene *{box-sizing:border-box}
.hm2-heading{position:absolute;left:29px;top:29px;z-index:2}
.hm2-heading>span{display:block;font-size:8px;font-weight:700;letter-spacing:1.8px;color:#7e735b}
.hm2-heading>p{margin:9px 0 0;font-family:Georgia,'Times New Roman',serif;font-size:30px;line-height:1.1;letter-spacing:-.8px;font-weight:400}
.hm2-heading em{font-weight:400;color:#8a7040}
.hm2-category{position:absolute;right:28px;top:32px;font-size:7px;line-height:1.7;letter-spacing:1.1px;text-align:right;color:#8b806b}
.hm2-sheet{position:absolute;left:8%;top:119px;width:77%;height:270px;background:#f2eee4;border:1px solid #faf6ee;transform:rotate(2deg);box-shadow:0 12px 35px #6c573017}
.hm2-browser{position:absolute;left:4.5%;top:119px;width:85%;border-radius:8px;overflow:hidden;background:#efe9e5;border:1px solid #faf7ed;box-shadow:0 20px 35px #55472c2e;transform:rotate(-3deg);transform-origin:center center;z-index:2}
.hm2-browserbar{display:flex;align-items:center;justify-content:space-between;gap:12px;height:25px;padding:0 11px;background:#f8f6ef;border-bottom:1px solid #ded8cb;color:#8b816e;font-size:6px;letter-spacing:.2px}
.hm2-browserbar>i{font-size:9px;font-style:normal}
.hm2-dots{display:flex;gap:4px}
.hm2-dots i{width:4px;height:4px;background:#c6bead;border-radius:50%}
.hm2-home{display:block;width:100%;height:auto}
.hm2-phone{position:absolute;top:145px;right:3.5%;width:130px;height:265px;padding:5px;border:1px solid #b4a587;border-radius:24px;background:linear-gradient(100deg,#d5c9b0,#fff9e9 12%,#e2d4b5 92%,#a7987a);box-shadow:-8px 18px 25px #5b4b3033,1px 1px 0 #fff7de inset;transform:rotate(5deg);z-index:4}
.hm2-phone-screen{height:100%;overflow:hidden;border:1px solid #d8cbb4;border-radius:19px;background:#f2eee7;position:relative}
.hm2-phone-top{height:16px;display:flex;justify-content:center;padding-top:4px;background:#ebe5e0}
.hm2-phone-top i{width:36px;height:8px;background:#26231d;border-radius:12px}
.hm2-phone-brand{height:29px;display:flex;justify-content:center;align-items:center;background:#ebe5e0;overflow:hidden}
.hm2-logo-crop{width:104px;height:24px;background-image:url('assets/portfolio/holistic-home.webp');background-repeat:no-repeat;background-size:648.66px auto;background-position:-272.26px -6.43px}
.hm2-anatomy{height:106px;position:relative;background-image:url('assets/portfolio/holistic-home.webp');background-size:auto 162px;background-repeat:no-repeat;background-position:right -10px}
.hm2-anatomy::after{content:"";position:absolute;inset:65% 0 0;background:linear-gradient(transparent,#f2eee7)}
.hm2-phone-copy{position:relative;padding:2px 11px 14px;background:#f2eee7}
.hm2-phone-copy>span{font-size:4.5px;letter-spacing:.7px;color:#8d7d62;display:block}
.hm2-phone-copy>p{font-family:Georgia,'Times New Roman',serif;font-size:17px;line-height:1.06;letter-spacing:-.3px;font-weight:400;margin:6px 0 8px}
.hm2-phone-copy>p em{color:#a17c30;font-weight:400}
.hm2-phone-copy>div{display:flex;justify-content:space-between;align-items:center;gap:4px;background:#dfc379;border-radius:12px;padding:6px 7px;font-size:5px;color:#403522}
.hm2-phone-copy b{font-size:7px;font-weight:400}
.hm2-phone-home{position:absolute;width:35px;height:3px;bottom:5px;left:50%;transform:translateX(-50%);border-radius:3px;background:#c6bcaa}
.hm2-caption{position:absolute;left:29px;right:180px;bottom:24px;display:grid;gap:8px;color:#776b53;z-index:3}
.hm2-caption>span:first-child{font-size:6px;font-weight:700;letter-spacing:1.2px}
.hm2-caption>span:last-child{font-size:7px;color:#8e826c}
@container holistic (min-width:720px){.hm2-browser{top:99px;width:78%;max-width:640px}.hm2-sheet{top:112px;height:300px}.hm2-heading{top:23px}.hm2-phone{width:137px;height:280px;top:136px;right:3%}.hm2-anatomy{height:113px}.hm2-phone-copy>p{font-size:18px}.hm2-caption{top:82px;bottom:auto}.hm2-caption>span:first-child{display:none}}
@container holistic (max-width:430px){.hm2-heading{left:22px;top:29px}.hm2-heading>span{font-size:7px;letter-spacing:1.4px}.hm2-heading>p{font-size:26px;margin-top:10px}.hm2-category{display:none}.hm2-browser{left:16px;top:129px;width:400px;transform:rotate(-4deg)}.hm2-sheet{left:23px;top:129px;width:340px;height:254px;transform:rotate(2deg)}.hm2-browserbar{height:23px}.hm2-phone{top:168px;right:15px;width:125px;height:253px;transform:rotate(5deg)}.hm2-phone-copy{padding-left:9px;padding-right:9px}.hm2-phone-copy>p{font-size:16px}.hm2-anatomy{height:97px}.hm2-caption{left:23px;bottom:22px;right:155px;gap:8px}.hm2-caption>span:first-child{font-size:5px;letter-spacing:1px;line-height:1.6;max-width:135px}.hm2-caption>span:last-child{font-size:6px;line-height:1.6;max-width:120px}}
@container holistic (max-width:310px){.hm2-heading>p{font-size:23px}.hm2-heading{left:20px}.hm2-browser{left:10px;width:362px;top:135px}.hm2-phone{right:12px;top:174px;width:116px;height:247px}.hm2-logo-crop{transform:scale(.94)}.hm2-anatomy{height:94px}.hm2-caption{left:20px;right:142px}.hm2-caption>span:first-child{letter-spacing:.65px}.hm2-phone-copy>p{font-size:15px}.hm2-phone-copy>div{font-size:4.5px}}


/* Aether: an actual homepage image in an elegant corporate composition. */
.mkb-aether{background:#e9dfcc;color:#3c2b20}
.mkb-aether-ring{position:absolute;right:-72px;top:-150px;width:340px;height:340px;border:48px solid rgba(200,154,43,.12);border-radius:50%}
.mkb-aether-caption{position:absolute;right:23px;top:24px;font-size:6px;letter-spacing:.15em;color:#856d48}
.mkb-aether-browser{position:absolute;left:29px;right:29px;top:76px;border:1px solid rgba(98,73,46,.2);border-radius:5px;background:#f8f3e8;box-shadow:0 18px 30px rgba(76,58,31,.12);overflow:hidden;transform:rotate(1.5deg);transform-origin:center center}
.mkb-aether-bar{height:23px;background:#f3ecde;border-color:#e7ddcc}
.mkb-aether-bar .mkb-browserdots i{background:#c9bcaa}
.mkb-aether-bar .mkb-browserurl,.mkb-aether-bar .mkb-browsermark{color:#9b8a71}
.mkb-aether-home{display:block;width:100%;height:auto}
.mkb-aether-footer{position:absolute;z-index:3;bottom:0;left:0;right:0;height:72px;padding:0 32px;display:flex;align-items:center;gap:30px;background:#2f281e;color:#e7deca}
.mkb-aether-footer img{display:block;width:86px;height:35px;object-fit:contain}
.mkb-aether-footer>span:not(.mkb-aether-plus){font-size:10px;line-height:1.4;letter-spacing:-.1px}
.mkb-aether-plus{margin-left:auto;color:#c5ad78;font-size:26px;font-weight:300}

/* Ehave: an explicitly marked concept, using abstract connected-data shapes. */
.mkb-ehave{background:#1e727b;color:#1b5258}
.mkb-ehave-contour{position:absolute;width:450px;height:450px;border:1px solid rgba(181,230,228,.14);border-radius:50%;right:-130px;top:-230px}
.mkb-ehave-contour-two{width:520px;height:520px;right:-165px;top:-265px}
.mkb-ehave-site{position:absolute;top:58px;left:25px;right:25px;background:#fcfdfb;box-shadow:0 20px 34px rgba(6,43,48,.25);border-radius:5px;overflow:hidden;transform:rotate(-1deg)}
.mkb-ehave-header{height:56px;display:flex;align-items:center;justify-content:space-between;padding:0 23px;border-bottom:1px solid #edf0eb;color:#728084}
.mkb-ehave-header img{display:block;width:74px;height:23px;object-fit:contain}
.mkb-ehave-header>span{font-size:7px}
.mkb-ehave-header>i{font-style:normal;font-size:13px;color:#3c8f97}
.mkb-ehave-hero{position:relative;height:256px;overflow:hidden;display:grid;grid-template-columns:1.06fr 1fr}
.mkb-ehave-copy{padding:35px 0 25px 23px;position:relative;z-index:2}
.mkb-ehave-copy .mkb-kicker{font-size:6px;color:#6c9a98;letter-spacing:.12em}
.mkb-ehave-title{display:block;font-size:27px;line-height:1.09;letter-spacing:-1.1px;font-weight:700;margin-top:14px;color:#184d52}
.mkb-ehave-body{display:block;font-size:8px;line-height:1.6;color:#839293;margin-top:12px}
.mkb-ehave-textlink{display:flex;align-items:center;justify-content:space-between;width:91px;margin-top:19px;padding-bottom:6px;border-bottom:1px solid #a5c4c1;font-size:7px;color:#397878}
.mkb-ehave-textlink b{font-size:11px;font-weight:400}
.mkb-ehave-art{position:relative;background:linear-gradient(135deg,#175d67,#348e96);margin:14px 14px 14px 0;border-radius:50% 50% 44% 46%;isolation:isolate}
.mkb-ehave-network{position:absolute;inset:0;width:100%;height:100%;color:#d3efed}
.mkb-ehave-chip{position:absolute;display:flex;align-items:center;gap:5px;white-space:nowrap;background:rgba(255,255,255,.94);padding:8px 10px;color:#376e73;font-size:7px;box-shadow:0 8px 16px rgba(6,58,65,.15);border:1px solid #edf2ec;border-radius:4px}
.mkb-ehave-chip>i{width:5px;height:5px;border-radius:50%;background:#57b2b5;display:block}
.mkb-ehave-chip-one{top:37px;left:-18px}
.mkb-ehave-chip-two{bottom:26px;right:0}
.mkb-ehave-lower{height:47px;background:#f0f5ef;display:flex;align-items:center;justify-content:space-around;border-top:1px solid #e4ece3}
.mkb-ehave-lower>span{font-size:6px;color:#738e87;display:flex;gap:5px;align-items:center}
.mkb-ehave-lower i{display:block;width:4px;height:4px;background:#99b8a4;border-radius:1px}

@media(max-width:700px){
 .mkb-study{top:13px;left:15px;font-size:7px;padding:4px 6px}
 .mkb-ir-heading{top:65px;left:20px}
 .mkb-ir-heading .mkb-kicker{font-size:6px;max-width:155px}
 .mkb-ir-title{font-size:28px;margin-top:10px}
 .mkb-ir-brand{top:59px;right:17px}
 .mkb-ir-brand img{width:73px;height:22px}
 .mkb-ir-brand span{display:none}
 .mkb-ir-browser{left:16px;width:calc(100% - 32px);top:137px;height:301px}
 .mkb-ir-screen{width:calc(100% + 57px);max-width:none}
 .mkb-browserurl{font-size:6px}
 .mkb-aether-caption{top:53px;right:18px;font-size:5px;letter-spacing:.13em}
 .mkb-aether-browser{left:17px;right:17px;top:100px}
 .mkb-aether-home{width:160%;max-width:none;margin-left:-30%}
 .mkb-aether-bar{height:23px}
 .mkb-aether-footer{height:79px;padding:0 20px;gap:22px}
 .mkb-aether-footer img{width:79px;height:33px}
 .mkb-aether-footer>span:not(.mkb-aether-plus){font-size:9px}
 .mkb-aether-plus{font-size:22px}
 .mkb-ehave-site{left:16px;right:16px;top:59px}
 .mkb-ehave-header{height:53px;padding:0 16px}
 .mkb-ehave-header img{width:63px;height:21px}
 .mkb-ehave-header>span{font-size:6px}
 .mkb-ehave-header>i{font-size:12px}
 .mkb-ehave-hero{height:263px;grid-template-columns:1.1fr 1fr}
 .mkb-ehave-copy{padding:35px 0 20px 15px}
 .mkb-ehave-copy .mkb-kicker{font-size:5px;max-width:120px}
 .mkb-ehave-title{font-size:22px;letter-spacing:-.9px;line-height:1.12;margin-top:15px}
 .mkb-ehave-body{font-size:7px;margin-top:12px}
 .mkb-ehave-textlink{font-size:6px;width:79px}
 .mkb-ehave-art{margin:25px 7px 33px -8px;border-radius:50%}
 .mkb-ehave-chip{font-size:5px;padding:7px 5px;gap:3px}
 .mkb-ehave-chip>i{width:4px;height:4px}
 .mkb-ehave-chip-one{left:-7px;top:33px}
 .mkb-ehave-chip-two{right:0;bottom:20px}
 .mkb-ehave-lower{height:44px;gap:5px;padding:0 9px}
 .mkb-ehave-lower>span{font-size:5px;line-height:1.3}
}