@keyframes mb-caret{0%,49%{opacity:1} 50%,100%{opacity:0}} .mb-front-page .site-main{overflow:hidden} .mb-home-hero{border-bottom:1px solid var(--ab-line);background:var(--ab-surface)} .mb-home-hero__scene{position:relative;isolation:isolate;width:min(100%,2020px);aspect-ratio:2020 / 779;overflow:hidden;background:var(--ab-surface)} .mb-home-hero__media,.mb-home-hero__picture{position:absolute;inset:0;display:block} .mb-home-hero__content{position:absolute;z-index:6;top:11.5%;left:2.6%;width:44%;min-width:0} .mb-home-hero__background,.mb-home-hero__foreground{position:absolute;inset:0;display:block;width:100%;height:100%;pointer-events:none;user-select:none} .mb-home-hero__background{z-index:0;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:fill} .mb-home-hero__foreground{z-index:3;background-image:url("../images/hero-office.webp");background-position:100% 0;background-repeat:no-repeat;background-size:100% 100%} .mb-home-hero__foreground--monitor{clip-path:polygon(62.8% 42%,75.7% 42%,75.7% 64.8%,62.8% 64.8%)} .mb-home-hero__foreground--monitor-stand{display:none} .mb-home-hero__foreground--desk{clip-path:polygon(53.8% 60.8%,89.5% 60.8%,89.5% 68.3%,53.8% 68.3%)} .mb-command{margin:0 0 0.75rem;color:var(--ab-brand);font-family:var(--ab-font-mono);font-size:var(--ab-small);font-weight:700} .mb-typed{max-width:18ch;min-height:2.4em;margin-bottom:1rem} [data-mb-typed-ready] .mb-typed__text{visibility:hidden} [data-mb-typed-ready] .mb-typed.is-ready .mb-typed__text{visibility:visible} @media (prefers-reduced-motion:reduce){[data-mb-typed-ready] .mb-typed__text{visibility:visible}} .mb-typed__caret{display:inline-block;width:0.5em;height:1em;margin-left:0.08em;background:var(--ab-brand);vertical-align:-0.12em;animation:mb-caret 1s steps(1,end) infinite} .mb-home-lead{max-width:54ch;font-size:var(--ab-lead);line-height:1.55} .mb-home-actions{display:flex;flex-wrap:wrap;gap:0.85rem;margin:0 0 1.4rem} .mb-home-note{margin:0;color:var(--ab-muted);font-size:var(--ab-small)} .mb-office-pet{--mb-office-x:0px;position:absolute;z-index:2;top:31.5%;left:calc(70% - 20px);display:block;width:18.3%;max-width:none;aspect-ratio:1;margin:0;padding:0;border:0;background:transparent;box-shadow:none;-webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent;transform:translateX(var(--mb-office-x));transform-origin:50% 88%;cursor:pointer;filter:drop-shadow(0 0.4rem 0.35rem color-mix(in srgb,var(--ab-inverse) 20%,transparent));touch-action:manipulation;transition:transform 180ms cubic-bezier(0.2,0.8,0.2,1),filter 180ms ease} .mb-office-pet:hover,.mb-office-pet:focus-visible,.mb-office-pet:active{background:transparent;box-shadow:none;filter:drop-shadow(0 0.55rem 0.45rem color-mix(in srgb,var(--ab-inverse) 28%,transparent))} .mb-office-pet:focus-visible{outline:4px solid var(--ab-focus);outline-offset:0.2rem} .mb-office-pet__sprite,.mb-office-pet__face{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;image-rendering:pixelated;image-rendering:crisp-edges;pointer-events:none;user-select:none} .mb-office-pet__sprite{z-index:0} .mb-office-pet__face{z-index:1} .mb-office-pet.is-cheering{animation:mb-office-hop 820ms steps(6,end)} .mb-office-pet.is-waving-left{animation:mb-office-lean-left 1600ms steps(4,end)} .mb-office-pet.is-waving-right{animation:mb-office-lean-right 1600ms steps(4,end)} @keyframes mb-office-hop{0%,100%{transform:translateX(var(--mb-office-x)) translateY(0)} 20%{transform:translateX(var(--mb-office-x)) translateY(2px) scaleY(0.99)} 42%,58%{transform:translateX(var(--mb-office-x)) translateY(-0.9rem)} 76%{transform:translateX(var(--mb-office-x)) translateY(2px) scaleY(0.995)}} @keyframes mb-office-lean-left{0%,100%{transform:translateX(var(--mb-office-x)) rotate(0)} 32%,72%{transform:translateX(var(--mb-office-x)) rotate(-1deg)}} @keyframes mb-office-lean-right{0%,100%{transform:translateX(var(--mb-office-x)) rotate(0)} 32%,72%{transform:translateX(var(--mb-office-x)) rotate(1deg)}} .mb-home-section{padding-block:3.5rem;background:var(--ab-ground);scroll-margin-top:1rem} .mb-home-section--surface{background:var(--ab-surface)} .mb-services-stage{position:relative} .mb-services-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.5rem;margin-top:2rem} .mb-service-card,.mb-about-card,.mb-contact-card{position:relative;display:flex;min-width:0;flex-direction:column;padding:1.4rem;border:2px solid var(--ab-inverse);border-radius:var(--ab-radius-sm);background:var(--ab-ground);box-shadow:var(--mb-depth) var(--mb-depth) 0 var(--mb-card-shadow,color-mix(in srgb,var(--ab-brand) 30%,transparent));transition:transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease} .mb-service-card--brand,.mb-contact-card{--mb-card-shadow:color-mix(in srgb,var(--ab-brand) 30%,transparent)} .mb-service-card--light{--mb-card-shadow:color-mix(in srgb,var(--ab-brand-light) 45%,transparent)} .mb-service-card--teal,.mb-about-card{--mb-card-shadow:color-mix(in srgb,var(--mb-teal) 55%,transparent)} .mb-service-card:focus-within,.mb-about-card:focus-within,.mb-contact-card:focus-within{border-color:var(--ab-action);box-shadow:var(--mb-depth-hover) var(--mb-depth-hover) 0 var(--mb-card-shadow);transform:var(--mb-lift)} @supports selector(:has(:focus-visible)){.mb-service-card:focus-within,.mb-about-card:focus-within,.mb-contact-card:focus-within{border-color:var(--ab-inverse);box-shadow:var(--mb-depth) var(--mb-depth) 0 var(--mb-card-shadow,color-mix(in srgb,var(--ab-brand) 30%,transparent));transform:none} .mb-service-card:has(:focus-visible),.mb-about-card:has(:focus-visible),.mb-contact-card:has(:focus-visible){border-color:var(--ab-action);box-shadow:var(--mb-depth-hover) var(--mb-depth-hover) 0 var(--mb-card-shadow);transform:var(--mb-lift)}} @media (hover:hover){.mb-service-card:hover,.mb-about-card:hover,.mb-contact-card:hover{border-color:var(--ab-action);box-shadow:var(--mb-depth-hover) var(--mb-depth-hover) 0 var(--mb-card-shadow);transform:var(--mb-lift)}} .mb-card-mark{display:block;width:3rem;height:6px;flex:0 0 6px;margin-bottom:1rem;background:var(--ab-brand)} .mb-service-card--light .mb-card-mark{background:var(--ab-brand-light)} .mb-service-card--teal .mb-card-mark,.mb-about-card .mb-card-mark{background:var(--mb-teal)} .mb-service-card h3,.mb-about-card h2,.mb-contact-card h3{font-size:1.2rem;line-height:1.3} .mb-service-card__link{margin:auto 0 0;padding-top:1.1rem} .mb-service-card__link a{position:relative;z-index:8;font-weight:750} .mb-bit{position:absolute;z-index:6;top:0;left:0;display:block;width:72px;height:78px;image-rendering:pixelated;opacity:0;pointer-events:auto;cursor:pointer} .mb-process{display:grid;grid-template-columns:minmax(0,1fr) minmax(18rem,0.85fr);gap:4rem;align-items:center} .mb-process-list{display:grid;gap:1.6rem;margin:2rem 0 0;padding:0;list-style:none} .mb-process-list li{display:grid;grid-template-columns:3.5rem minmax(0,1fr);gap:0.15rem 1.25rem;align-items:center;margin:0} .mb-process-list__number{display:inline-flex;width:3.5rem;height:3.5rem;grid-row:1 / span 2;align-items:center;justify-content:center;border:0;border-radius:50%;background:var(--ab-brand);color:var(--ab-on-action);box-shadow:4px 4px 0 color-mix(in srgb,var(--ab-inverse) 16%,transparent);font-size:1.4rem;font-weight:800;transition:transform 160ms ease,box-shadow 160ms ease} .mb-process-list li:focus-within .mb-process-list__number{box-shadow:7px 7px 0 color-mix(in srgb,var(--ab-inverse) 22%,transparent);transform:translate(-2px,-2px)} @media (hover:hover){.mb-process-list li:hover .mb-process-list__number{box-shadow:7px 7px 0 color-mix(in srgb,var(--ab-inverse) 22%,transparent);transform:translate(-2px,-2px)}} .mb-process-list strong{color:var(--ab-ink);font-size:1.18rem;line-height:1.3} .mb-availability{align-self:flex-start;margin:0;padding:0.25rem 0.7rem;border:1px solid var(--mb-teal-ink);border-radius:var(--ab-radius-pill);background:color-mix(in srgb,var(--mb-teal) 14%,transparent);color:var(--mb-teal-ink);font-size:var(--ab-small);font-weight:700} .mb-contact{border-top:1px solid var(--ab-line)} .mb-contact__inner{display:grid;grid-template-columns:minmax(0,1fr) minmax(20rem,0.8fr);gap:3rem;align-items:center} .mb-contact-card__body{display:flex;gap:1rem;align-items:flex-end} .mb-contact-list{display:grid;min-width:0;flex:1 1 auto;gap:0.9rem;margin:0} .mb-contact-list dt{color:var(--ab-muted);font-size:var(--ab-small)} .mb-contact-list dd{margin:0;color:var(--ab-ink);font-weight:700;overflow-wrap:anywhere} @media (max-width:1050px){.mb-home-hero__content{top:8%;width:48%} .mb-services-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .mb-process{gap:2rem}} @media (max-width:800px){.mb-process,.mb-contact__inner{grid-template-columns:1fr} .mb-home-hero__scene{display:grid;width:100%;aspect-ratio:auto;padding-top:2.75rem} .mb-home-hero__content{position:relative;top:auto;left:auto;grid-row:1;width:min(100% - 3rem,var(--ab-wide));margin-inline:auto} .mb-home-hero__media{position:relative;inset:auto;grid-row:2;width:100%;aspect-ratio:970 / 779;margin-top:1.6rem;overflow:hidden} .mb-home-hero__picture,.mb-home-hero__background{position:absolute;inset:0;display:block;width:100%;height:100%} .mb-home-hero__background{object-fit:fill} .mb-home-hero__foreground{inset:0;width:100%;height:100%;background-image:url("../images/hero-office-mobile.webp");background-size:100% 100%} .mb-home-hero__foreground--monitor{clip-path:polygon(20.8% 42%,47.7% 42%,47.7% 64.8%,20.8% 64.8%)} .mb-home-hero__foreground--monitor-stand{display:none} .mb-home-hero__foreground--desk{clip-path:polygon(4% 60.8%,78.3% 60.8%,78.3% 68.3%,4% 68.3%)} .mb-office-pet{top:calc(35% - 3px);bottom:auto;left:42%;width:39%} .mb-process,.mb-contact__inner{gap:2rem} .mb-about-card,.mb-contact-card{max-width:40rem}} @media (max-width:620px){.mb-home-section{padding-block:3rem} .mb-services-grid{grid-template-columns:1fr;gap:1.25rem} .mb-service-card,.mb-about-card,.mb-contact-card{padding:1.2rem} .mb-process-list li{grid-template-columns:3rem minmax(0,1fr);column-gap:1rem} .mb-process-list__number{width:3rem;height:3rem} .mb-bit{display:none}} @media (max-width:460px){.mb-typed{min-height:3.6em;font-size:2rem} .mb-home-actions{display:grid} .mb-home-actions .mb-button,.mb-contact .mb-button{width:100%} .mb-contact-card__body{align-items:center}} @media (prefers-reduced-motion:reduce){.mb-typed__caret{animation:none;opacity:1} .mb-process-list__number,.mb-process-list li:hover .mb-process-list__number,.mb-process-list li:focus-within .mb-process-list__number{transition:none;transform:none} .mb-office-pet{animation:none;transition:none;transform:none}} @media (forced-colors:active){.mb-service-card,.mb-about-card,.mb-contact-card,.mb-process-list__number{border:2px solid CanvasText;box-shadow:none} .mb-bit,.mb-office-pet,.mb-home-hero__foreground{display:none}} @media print{.mb-office-pet,.mb-home-hero__foreground,.mb-bit,.mb-typed__caret{display:none !important} .mb-service-card,.mb-about-card,.mb-contact-card{break-inside:avoid;box-shadow:none}} [data-ab-reveal]{opacity:1;translate:0 0} [data-ab-reveal-ready] [data-ab-reveal]{opacity:0;will-change:opacity,translate} [data-ab-reveal-ready].ab-motion-calm [data-ab-reveal]{translate:0 0.5rem;transition:opacity 280ms cubic-bezier(0.2,0.7,0.2,1),translate 280ms cubic-bezier(0.2,0.7,0.2,1)} [data-ab-reveal-ready].ab-motion-staged [data-ab-reveal]{translate:0 1.5rem;transition:opacity 620ms cubic-bezier(0.2,0.7,0.2,1),translate 620ms cubic-bezier(0.2,0.7,0.2,1);transition-delay:var(--ab-reveal-delay,0ms)} [data-ab-reveal-ready].ab-motion-staged .mb-service-card[data-ab-reveal],[data-ab-reveal-ready].ab-motion-staged .mb-about-card[data-ab-reveal],[data-ab-reveal-ready].ab-motion-staged .mb-contact-card[data-ab-reveal]{transition:opacity 620ms cubic-bezier(0.2,0.7,0.2,1),translate 620ms cubic-bezier(0.2,0.7,0.2,1),transform 160ms ease,box-shadow 160ms ease,border-color 160ms ease;transition-delay:var(--ab-reveal-delay,0ms),var(--ab-reveal-delay,0ms),0ms,0ms,0ms} [data-ab-reveal-ready] [data-ab-reveal].is-revealed{opacity:1;translate:0 0} [data-ab-reveal-ready] [data-ab-reveal]:focus-within{opacity:1;translate:0 0;transition-delay:0ms} @media (prefers-reduced-motion:reduce){[data-ab-reveal],[data-ab-reveal-ready] [data-ab-reveal]{opacity:1;translate:0 0;transition:none;transition-delay:0ms !important}} @media print{[data-ab-reveal],[data-ab-reveal-ready] [data-ab-reveal]{opacity:1;translate:0 0}}