/* Matrix Mechanical — shared site stylesheet Source of truth: docs/design/webflow-token-layer/ Served from the Webflow CDN; loaded via the matrix_site_stylesheet head script. */ /* mx-global-utilities-v1 */ html[data-wf-page="648211d82b26705faa1e4b43"]{font-size:calc(100vw / 1440 * 10)}@media screen and (max-width:479px){html[data-wf-page="648211d82b26705faa1e4b43"]{font-size:calc(100vw / 360 * 10)}}.slider__pagination{width:4rem;height:4rem;display:flex;flex-shrink:0;justify-content:center;gap:.3rem;padding:0;font-size:1rem}.w-richtext>:not(div):first-child,.w-richtext>div:first-child>:first-child{margin-top:0!important}.w-richtext>:last-child,.w-richtext ol li:last-child,.w-richtext ul li:last-child{margin-bottom:0!important}.text-style-5lines,.text-style-4lines,.text-style-3lines,.text-style-2lines{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}.text-style-5lines{-webkit-line-clamp:5}.text-style-4lines{-webkit-line-clamp:4}.text-style-3lines{-webkit-line-clamp:3}.text-style-2lines{-webkit-line-clamp:2}.hide{display:none!important}.no-scrollbar{-ms-overflow-style:none;overflow:-moz-scrollbars-none}.no-scrollbar::-webkit-scrollbar{display:none}@media screen and (max-width:991px){.hide,.hide-tablet{display:none!important}}@media screen and (max-width:767px){.hide-mobile-landscape{display:none!important}}@media screen and (max-width:479px){.hide-mobile{display:none!important}} /* mx-site-system-v1 */ :root{--mx-red:#e31e24;--mx-red-wash:#fce9ea;--mx-rule-quiet:2px;--mx-rule-loud:8px;--mx-ink:#1a1a1a;--mx-charcoal:#2b2b2b;--mx-white:#fff;--mx-paper:#f2f2f2;--mx-paper-soft:#fafafa;--mx-line:#d0d0d0;--mx-muted:#606064;--mx-shell:1320px;--mx-gutter:24px;--mx-action-height:52px;--mx-action-control-height:44px;--mx-action-persistent-height:50px;--mx-action-padding-inline:18px;--mx-action-font-size:12px;--mx-action-control-font-size:11px;--mx-action-letter-spacing:.06em;--black:var(--mx-ink);--red:var(--mx-red);--white-smoke:var(--mx-paper);--dark:var(--mx-ink);--lavender:var(--mx-line);--dark-silver:var(--mx-muted);--mx-h-display:clamp(42px,5vw,66px);--mx-h-display-sm:clamp(36px,11vw,48px);--mx-h-display-split:clamp(48px,4vw,60px);--mx-h-display-tr:-.045em;--mx-h-headline:clamp(38px,4.4vw,62px);--mx-h-headline-tr:-.04em;--mx-h-title:clamp(30px,3vw,44px);--mx-h-eyebrow:clamp(21px,2vw,28px);--mx-h-eyebrow-tr:-.025em;}[data-mx-action]{--mx-action-min-height:var(--mx-action-height);--mx-action-current-font-size:var(--mx-action-font-size);--mx-action-current-letter-spacing:var(--mx-action-letter-spacing)}[data-mx-action="primary"]{--mx-action-color:var(--mx-white);--mx-action-background:var(--mx-red);--mx-action-border-color:var(--mx-red)}[data-mx-action="secondary"]{--mx-action-background:transparent;--mx-action-border-color:currentColor}[data-mx-action="utility"]{--mx-action-background:transparent;--mx-action-border-color:currentColor}[data-mx-action="control"]{--mx-action-min-height:var(--mx-action-control-height);--mx-action-current-font-size:var(--mx-action-control-font-size);--mx-action-current-letter-spacing:.04em}[data-mx-action-size="persistent"]{--mx-action-min-height:var(--mx-action-persistent-height);--mx-action-current-font-size:var(--mx-action-control-font-size)}html{font-size:62.5%}body{max-width:100%;overflow-x:clip;color:var(--mx-ink);background:#fff;font-family:Arial,Helvetica,sans-serif;font-size:16px;line-height:1.5}body *,body *::before,body *::after{box-sizing:border-box}img{max-width:100%}main{display:block}:where(h1,h2,h3,h4,h5,h6,.heading-1,.heading-2,.heading-3,.heading-4,.heading-big,.page-heading,.title-section,.service-title,.team-name){font-family:Inter,Arial,sans-serif}a,button,input,select,textarea{font-family:inherit}:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid var(--mx-red)!important;outline-offset:3px!important}input[type="file"]:focus-visible{outline-color:var(--mx-red)!important}.section:not(.footer){padding-top:76px;padding-bottom:76px}.section:not(.footer)>.webflow-container,.section:not(.footer)>.container,.section-page>.webflow-container,.section-hero>.webflow-container,.main-wrapper>.section>.container,.main-wrapper>.section>.w-layout-blockcontainer.container{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));max-width:none;margin-right:auto;margin-left:auto;padding-right:0;padding-left:0}:where(.button,.button-form,.mxb-primary,.mxb-secondary,.mxc-intent-button,.mxsd-button){min-height:var(--mx-action-min-height,var(--mx-action-height));border-radius:0!important;color:var(--mx-action-color,inherit);font-family:Inter,Arial,sans-serif!important;font-size:var(--mx-action-current-font-size,var(--mx-action-font-size));line-height:1.2;font-weight:800!important;letter-spacing:var(--mx-action-current-letter-spacing,var(--mx-action-letter-spacing));text-transform:uppercase}:where(.button:not(.secondary),.button-form,input[type="submit"].button){border:1px solid var(--mx-red)!important;color:#fff!important;background:var(--mx-red)!important}:where(.button:not(.secondary),.button-form,input[type="submit"].button):hover{border-color:var(--mx-ink)!important;background:var(--mx-ink)!important}.button.secondary{border:1px solid var(--mx-ink);color:var(--mx-ink);background:#fff}.button.secondary:hover{border-color:var(--mx-ink);color:#fff;background:var(--mx-ink)}:where(.text--label,.heading-style-h6,.date-time,.field-label-alternative,.mm-contact-route-v2__eyebrow){font-family:Inter,Arial,sans-serif;font-weight:800;letter-spacing:.12em;text-transform:uppercase}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top.section.hero,html:is([data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"]) #Top.section-hero.hero-page-section{width:100%;height:auto;min-height:0;display:block;padding:118px 0 54px;color:#fff;background:var(--mx-ink);border-top:1px solid #393939}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top .section-title{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));max-width:none;margin:0 auto;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-align:left}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top h1{width:fit-content;max-width:900px;margin:0;color:#fff;font-size:var(--mx-h-display);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-display-tr);text-align:left;text-wrap:balance;text-transform:uppercase}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top h1::after{content:"";display:block;width:100%;height:var(--mx-rule-quiet);margin-top:15px;background:var(--mx-red)}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top .square{display:none}html[data-wf-page="648211d82b26705faa1e4b48"] .section.gray,html[data-wf-page="648211d82b26705faa1e4b53"] .section.projects-page,html[data-wf-page="648211d82b26705faa1e4b4b"] .section.gray,html[data-wf-page="648211d82b26705faa1e4b54"] .section.gray{background:var(--mx-paper)}.collection-list-blog,.collection-list-projects,.collection-list-services{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px!important}.collection-list-blog>.w-dyn-item,.collection-list-projects>.w-dyn-item,.collection-list-services>.w-dyn-item{min-width:0;opacity:1!important;transform:none!important}.collection-list-services>.w-dyn-item>a.link-block{opacity:1!important;transform:none!important}.work-post-link,.work-post-link.blog{height:100%;display:flex;flex-direction:column;margin:0;overflow:hidden;color:var(--mx-ink);background:#fff;border:1px solid var(--mx-line)}.work-post-link:hover{border-color:var(--mx-ink)}.work-image-wrapper{width:100%;overflow:hidden}.work-post,.work-post.post,.work-post.big{position:relative;width:100%;height:auto;min-height:0;aspect-ratio:4/3;background-position:center;background-size:cover;filter:saturate(.84)}.mx-evidence-image{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}.card__image[data-mx-evidence-image],.service-image[data-mx-evidence-image],.image-blog[data-mx-evidence-image],.work-post[data-mx-evidence-image]{position:relative;overflow:hidden}.info-wrapper,.info-wrapper.post,.info-wrapper.team,.info-wrapper.project{position:static;inset:auto;width:100%;height:auto;display:flex;flex:1 1 auto;flex-direction:column;align-items:flex-start;margin:0;padding:20px;opacity:1!important;transform:none!important;background:#fff;border:0;border-top:1px solid var(--mx-line);box-shadow:none}.info-wrapper h3,.info-wrapper .heading-3{margin:10px 0 0;color:var(--mx-ink);font-size:var(--mx-h-eyebrow);line-height:1.05;font-weight:900;letter-spacing:var(--mx-h-eyebrow-tr);text-transform:uppercase}.info-wrapper p{margin:10px 0 0;color:var(--mx-muted);font-size:14px;line-height:1.5}html[data-wf-page="648211d82b26705faa1e4b53"] .info-wrapper p{display:-webkit-box;overflow:hidden;text-transform:none;-webkit-box-orient:vertical;-webkit-line-clamp:4}.info-wrapper .view-more{margin:auto 0 0;padding-top:18px;color:var(--mx-ink);font-family:Inter,Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase}.info-wrapper .view-more::after{content:" →";color:var(--mx-red)}html[data-wf-page="648211d82b26705faa1e4b53"] .projects-page__inner>.container{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));max-width:none;margin-inline:auto;padding-inline:0}html[data-wf-page="648211d82b26705faa1e4b53"] #Top>.container>.section-title,html[data-wf-page="6a7a559ce4674e1355d6e618"] #Top>.container>.section-title{width:100%;margin-inline:0}.mxc-intent-router{padding:58px var(--mx-gutter) 0;color:#fff;background:var(--mx-ink)}.mxc-intent-shell{max-width:var(--mx-shell)}.mxc-intent-title,.mxc-intent-card-title,.mxc-intent-kicker,.mxc-intent-reassurance-label,.mxc-intent-type,.mxc-intent-catalogue-kicker,.mxc-intent-reassurance-link,.mxc-intent-number,.mxc-intent-button,.mxc-intent-text-link,.mxc-intent-next-label,.mxc-intent-catalogue-title,.mxc-intent-catalogue-arrow{font-family:Inter,Arial,sans-serif!important}html[data-wf-page="648211d82b26705faa1e4b54"] .collection-list-services{grid-template-columns:repeat(4,minmax(0,1fr))}html[data-wf-page="648211d82b26705faa1e4b54"] a.link-block{height:100%;color:var(--mx-ink);text-decoration:none}html[data-wf-page="648211d82b26705faa1e4b54"] a.link-block .card--big{width:100%;height:100%;display:flex;flex-direction:column;padding:0;border:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b54"] .card__top,html[data-wf-page="648211d82b26705faa1e4b54"] .card__top.plus{width:100%;height:auto;margin:0;aspect-ratio:4/3}html[data-wf-page="648211d82b26705faa1e4b54"] .card__bottom-background.big{min-height:170px;flex:1 1 auto;padding:20px;background:#fff;border:0;border-top:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b54"] .w-dyn-bind-empty{display:none}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-hero.services{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));height:auto;min-height:0;margin:42px auto 0;padding:0;border-left:4px solid var(--mx-red)}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-hero.services .invisible-image-div,html[data-wf-page="648211d82b26705faa1e4b4e"] .service-image{width:100%;height:auto;min-height:0;aspect-ratio:16/7}html[data-wf-page="648211d82b26705faa1e4b4e"] .section.no-padding.gray{margin:0;padding:42px 0 76px;background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b4e"] .line-wrapper.top{width:100%;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,340px);gap:16px;align-items:start;margin:0;opacity:1!important;transform:none!important}html[data-wf-page="648211d82b26705faa1e4b4e"] .block-wrapper.services{padding:42px;background:#fff;border:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b4e"] .block-wrapper.color{padding:28px;color:#fff;background:var(--mx-ink)}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-title.services{text-align:left}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-title.services h1{margin:0;font-size:var(--mx-h-headline);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-headline-tr);text-align:left;text-transform:uppercase}.mxsd-kicker,.mxsd-title,.mxsd-type,.mxsd-card-title,.mxsd-button,.mxsd-text-link,.mxsd-next-label{font-family:Inter,Arial,sans-serif!important}.mxsd-type{color:#fff!important}.mxsd-button:hover{border-color:#fff;color:var(--mx-ink);background:#fff}.mxsd-focus-light:focus-visible{outline-color:#fff!important}html[data-wf-page="648211d82b26705faa1e4b4a"] .section-page.submit-section{padding:58px 0 76px;background:var(--mx-paper)}.mm-contact-routes-v2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;margin:0 0 24px;background:var(--mx-line);border:1px solid var(--mx-line)}.mm-contact-route-v2{min-height:170px;padding:25px;color:var(--mx-ink);background:#fff;border:0;text-decoration:none}.mm-contact-route-v2:hover{color:#fff;background:var(--mx-ink)}.mm-contact-route-v2__accent{background:var(--mx-red)!important}.mm-contact-route-v2__eyebrow{color:var(--mx-red)!important}.mm-contact-route-v2:hover .mm-contact-route-v2__eyebrow{color:#fff!important}.mm-contact-route-v2__title{font-family:Inter,Arial,sans-serif;font-size:24px;line-height:1.08;font-weight:900;text-transform:uppercase}html[data-wf-page="648211d82b26705faa1e4b4a"] .promo-block{display:grid;grid-template-columns:minmax(300px,.85fr) minmax(0,1.15fr);gap:1px;padding:1px;color:#fff;background:#424242}html[data-wf-page="648211d82b26705faa1e4b4a"] .promo-block>*{min-width:0;padding:38px;opacity:1!important;transform:none!important;background:var(--mx-ink)}html[data-wf-page="648211d82b26705faa1e4b4a"] .promo-block>:last-child{color:var(--mx-ink);background:#fff}html[data-wf-page="648211d82b26705faa1e4b4a"] .heading.white{font-size:var(--mx-h-headline);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-headline-tr);text-transform:uppercase}html[data-wf-page="648211d82b26705faa1e4b4a"] .text-field,html[data-wf-page="648211d82b26705faa1e4b4a"] .w-input,html[data-wf-page="648211d82b26705faa1e4b4a"] textarea{min-height:52px;padding:12px 14px;color:var(--mx-ink);background:#fff;border:1px solid #a8a8a3;border-radius:0}html[data-wf-page="648211d82b26705faa1e4b4a"] textarea{min-height:140px}html[data-wf-page="648211d82b26705faa1e4b4a"] .text-field:focus,html[data-wf-page="648211d82b26705faa1e4b4a"] .w-input:focus,html[data-wf-page="648211d82b26705faa1e4b4a"] textarea:focus{border-color:var(--mx-red);outline:3px solid var(--mx-red)!important;outline-offset:2px}#mm3-contact .mm3-eyebrow{color:var(--mx-red)!important}#mm3-contact .mm3-prep{background:var(--mx-paper)!important;border-left-color:var(--mx-red)!important}.mx-about-intro{padding:118px 0 72px;background:var(--mx-ink);border-bottom:4px solid var(--mx-red)}.mx-about-intro__shell{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));display:grid;grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);gap:clamp(48px,7vw,104px);align-items:end;margin:0 auto}.mx-about-intro__eyebrow{margin:0 0 24px;color:var(--mx-red);font-family:Inter,Arial,sans-serif;font-size:12px;line-height:1.2;font-weight:800;letter-spacing:.14em;text-transform:uppercase}.mx-about-intro h1{max-width:820px;margin:0;color:#fff;font-size:var(--mx-h-display);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-display-tr);text-wrap:balance;text-transform:uppercase}.mx-about-intro__lede{margin:28px 0 0;color:#d1d1d1;font-size:18px;line-height:1.62}.mx-about-intro__routes{border-top:1px solid #4a4a4a}.mx-about-intro__route{display:grid;grid-template-columns:34px 1fr auto;gap:16px;align-items:center;padding:22px 0;color:#fff;border-bottom:1px solid #4a4a4a;text-decoration:none}.mx-about-intro__number{color:var(--mx-red);font-family:Inter,Arial,sans-serif;font-size:11px;font-weight:800;letter-spacing:.1em}.mx-about-intro__label{display:block;font-family:Inter,Arial,sans-serif;font-size:17px;line-height:1.2;font-weight:800;text-transform:uppercase}.mx-about-intro__detail{display:block;margin-top:5px;color:#aaa;font-size:14px;line-height:1.35}.mx-about-intro__arrow{color:var(--mx-red);font-size:24px}html[data-wf-page="648211d82b26705faa1e4b47"] main>.section.gray:first-of-type,html[data-wf-page="648211d82b26705faa1e4b47"] body>.section.gray:first-of-type{padding:30px 0 42px;background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b47"] .grid-section-block.about{display:none!important}html[data-wf-page="648211d82b26705faa1e4b47"] .orange-stripe.top{display:none!important}html[data-wf-page="648211d82b26705faa1e4b47"] .team-grid,html[data-wf-page="648211d82b26705faa1e4b47"] .service__achivements{opacity:1!important;transform:none!important}html[data-wf-page="648211d82b26705faa1e4b47"] .service__achivements{margin-top:0;padding:0;border:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b47"] .achivements__grid{grid-template-columns:repeat(3,1fr)}html[data-wf-page="648211d82b26705faa1e4b47"] .achivement__item{min-height:138px;padding:24px;border-left:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b47"] .achivement__item:first-child{border-left:0}html[data-wf-page="648211d82b26705faa1e4b47"] .achivement__item .heading-2{font-size:var(--mx-h-title);line-height:1;font-weight:900}html[data-wf-page="648211d82b26705faa1e4b47"] .team-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}html[data-wf-page="648211d82b26705faa1e4b47"] .team-grid>.team-wrapper{width:100%;min-width:0}html[data-wf-page="648211d82b26705faa1e4b47"] .team-new-image{width:100%!important;max-width:100%!important;height:auto!important;min-height:0!important;aspect-ratio:4/3!important}html[data-wf-page="648211d82b26705faa1e4b47"] section.about-us{padding:76px 0;background:#fff}html[data-wf-page="648211d82b26705faa1e4b47"] section.about-us>.grid--main{width:min(var(--mx-shell),calc(100% - (2 * var(--mx-gutter))));grid-template-columns:.85fr 1.15fr;margin:0 auto}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__left,html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right{padding:40px}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__left{background:var(--mx-paper);border:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;background:var(--mx-ink)}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right .list-line{display:none}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right .list-item{padding:14px 0;border-top:1px solid #444}html[data-wf-page="648211d82b26705faa1e4b47"] section.hiring{padding:76px 0}html[data-wf-page="648211d82b26705faa1e4b4d"] .section.gray.less-padding-top{margin:0;padding:68px 0 76px;background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b4d"] .webflow-container.project{width:min(1000px,calc(100% - (2 * var(--mx-gutter))));max-width:none}html[data-wf-page="648211d82b26705faa1e4b4d"] .page-heading.center{margin:0;font-size:var(--mx-h-display);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-display-tr);text-align:left;text-transform:uppercase}html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project{margin:30px 0 20px;padding:0;border:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivements__grid{grid-template-columns:repeat(3,1fr)}html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivement__item{min-height:110px;padding:22px;border-left:1px solid var(--mx-line)}html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivement__item:first-child{border-left:0}html[data-wf-page="648211d82b26705faa1e4b4d"] .work-post.big{aspect-ratio:16/9}html[data-wf-page="648211d82b26705faa1e4b4d"] .info-wrapper.project{padding:34px}.mx-project-detail-note{margin:24px 0;padding:18px 20px;color:var(--mx-ink);background:var(--mx-paper);border-left:4px solid var(--mx-red)}html[data-wf-page="648211d82b26705faa1e4b4d"] .section-page.submit-section{padding:76px 0;color:#fff;background:var(--mx-ink)}html[data-wf-page="648211d82b26705faa1e4b4d"] .submit-section .promo-block{display:grid;grid-template-columns:.85fr 1.15fr;gap:1px;padding:1px;background:#424242}html[data-wf-page="648211d82b26705faa1e4b4d"] .submit-section .promo-block>*{min-width:0;padding:38px;opacity:1!important;transform:none!important;background:var(--mx-ink)}html[data-wf-page="648211d82b26705faa1e4b4d"] .submit-section .promo-block>:last-child{color:var(--mx-ink);background:#fff}[data-mx-project-inquiry="v2"] .heading.white,[data-mx-project-inquiry="v2"] label,[data-mx-project-inquiry="v2"] input[type="submit"]{font-family:Inter,Arial,sans-serif!important}[data-mx-project-inquiry="v2"]:focus-visible{outline-color:var(--mx-red)!important}html[data-wf-page="648211d82b26705faa1e4b4c"] .section.blog{padding:0;background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b4c"] .blog__inner{padding:68px 0 76px;background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b4c"] .blog__top{width:min(900px,100%);align-items:flex-start;margin:0 auto}html[data-wf-page="648211d82b26705faa1e4b4c"] .blog__top h1{margin:0;font-size:var(--mx-h-display);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-display-tr);text-align:left;text-transform:uppercase}html[data-wf-page="648211d82b26705faa1e4b4c"] .blog-title__description{align-items:flex-start}html[data-wf-page="648211d82b26705faa1e4b4c"] .image-blog-div{width:min(1000px,100%);margin:36px auto 0}html[data-wf-page="648211d82b26705faa1e4b4c"] .image-blog{width:100%;height:auto;min-height:0;aspect-ratio:16/9;border-left:4px solid var(--mx-red)}html[data-wf-page="648211d82b26705faa1e4b4c"] .line-wrapper.top.blog{width:min(760px,100%);margin:42px auto 0;opacity:1!important;transform:none!important}html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text{color:var(--mx-ink);font-size:17px;line-height:1.72}html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text h2,html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text h3,html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text h4{margin:42px 0 14px;color:var(--mx-ink);font-family:Inter,Arial,sans-serif;line-height:1.08;font-weight:800}html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text h4{font-size:26px}html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text figure{margin:34px 0}html[data-wf-page="648211d82b26705faa1e4b4c"] .text-rich-text img{width:100%;height:auto}html[data-wf-page="648211d82b26705faa1e4b4c"] .section.other-blog{padding:76px 0;background:#fff}html[data-wf-page="6a5bcd97134c3cc8c4f35f51"] .section.gray{padding:66px 0 76px;background:var(--mx-paper)}html[data-wf-page="6a5bcd97134c3cc8c4f35f51"] .section.gray>.webflow-container>div{max-width:780px;margin:0 auto}html[data-wf-page="6a5bcd97134c3cc8c4f35f51"] .section.gray h2{margin:36px 0 10px;padding-top:20px;border-top:1px solid var(--mx-line);font-size:27px;line-height:1.15;font-weight:800}html[data-wf-page="6a5bcd97134c3cc8c4f35f51"] .section.gray p{margin:0 0 18px;color:#3f3f42;font-size:16px;line-height:1.72}html[data-wf-page="66321162ae5731b9c342ac44"] .section.serv-hero{width:100%;padding:0;color:#fff;background:var(--mx-ink)}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_front{min-height:520px}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_inner{width:48%;padding:72px 48px 72px 0}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_title,html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_description,html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_cta{opacity:1!important;transform:none!important}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_title h1{margin:0;color:#fff;font-size:var(--mx-h-display);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-display-tr);text-transform:uppercase}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_description{padding:0;color:#d0d0d0;font-size:18px}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_bg-image{width:48%;height:100%;padding:0}html[data-wf-page="66321162ae5731b9c342ac44"] .section.reviews{padding:58px 0}html[data-wf-page="66321162ae5731b9c342ac44"] .reviews_main{min-height:0;opacity:1!important;transform:none!important}html[data-wf-page="66321162ae5731b9c342ac44"] .section.serv-category{padding:76px 0;background:var(--mx-paper)}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-category_main{opacity:1!important;transform:none!important}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-category_coll-items{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}html[data-wf-page="66321162ae5731b9c342ac44"] .card--xsmall{width:100%;height:100%}html[data-wf-page="66321162ae5731b9c342ac44"] .section.cta-s{padding:76px 0;background:#fff}html[data-wf-page="66321162ae5731b9c342ac44"] .cta_component{grid-template-columns:.9fr 1.1fr;padding:42px;opacity:1!important;transform:none!important;color:#fff;background:var(--mx-ink)}html[data-wf-page="66321162ae5731b9c342ac44"] .cta_component .cta_image-wrapper{display:none}html[data-wf-page="66321162ae5731b9c342ac44"] .cta_component .cta_iframe{height:auto;min-height:320px}html[data-wf-page="648211d82b26705faa1e4b46"] .utility-page-wrap,html[data-wf-page="648211d82b26705faa1e4b45"] .utility-page-wrap{min-height:calc(100vh - 72px);padding:48px 16px;color:var(--mx-ink);background:var(--mx-paper)}html[data-wf-page="648211d82b26705faa1e4b46"] .utility-page-content,html[data-wf-page="648211d82b26705faa1e4b45"] .utility-page-content{width:min(680px,100%);padding:42px;color:#fff;background:var(--mx-ink);border-top:4px solid var(--mx-red)}.mx-utility-title{margin:0;color:#fff;font-size:var(--mx-h-headline);line-height:.96;font-weight:900;letter-spacing:var(--mx-h-headline-tr);text-transform:uppercase}.mx-utility-copy{margin:18px 0 0;color:#d0d0d0}.mx-utility-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}.mx-utility-actions a{min-height:var(--mx-action-min-height,var(--mx-action-height));display:inline-flex;align-items:center;justify-content:center;padding:0 var(--mx-action-padding-inline);color:#fff;border:1px solid var(--mx-action-border-color,#777);background:var(--mx-action-background,transparent);font-family:Inter,Arial,sans-serif;font-size:var(--mx-action-current-font-size,var(--mx-action-font-size));line-height:1.2;font-weight:800;letter-spacing:var(--mx-action-current-letter-spacing,var(--mx-action-letter-spacing));text-decoration:none;text-transform:uppercase}.mx-utility-actions a[data-mx-action="primary"]{color:var(--mx-action-color,#fff)}.mx-empty-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}.mx-empty-actions a{min-height:var(--mx-action-min-height,var(--mx-action-height));display:inline-flex;align-items:center;justify-content:center;padding:0 var(--mx-action-padding-inline);color:var(--mx-ink);background:var(--mx-action-background,transparent);border:1px solid var(--mx-action-border-color,var(--mx-ink));font-family:Inter,Arial,sans-serif;font-size:var(--mx-action-current-font-size,var(--mx-action-font-size));line-height:1.2;font-weight:800;letter-spacing:var(--mx-action-current-letter-spacing,var(--mx-action-letter-spacing));text-decoration:none;text-transform:uppercase}.mx-empty-actions a[data-mx-action="primary"]{color:var(--mx-action-color,#fff)}#mx-continuity-band .mxct-kicker,#mx-continuity-band h2,#mx-continuity-band a{font-family:Inter,Arial,sans-serif!important}#mx-continuity-band .mxct-kicker{color:#fff!important}#mx-continuity-band a:focus-visible{outline-color:#fff!important}#mx-site-mobile-bar{display:none}@media (prefers-reduced-motion:reduce){.w-dyn-item,.info-wrapper,.line-wrapper.top,.grid-column-wrapper,.team-grid,.service__achivements,.serv-category_main,.serv-h_title,.serv-h_description,.serv-h_cta{opacity:1!important;transform:none!important;transition:none!important;animation:none!important}}@media screen and (max-width:991px){.mx-about-intro__shell{grid-template-columns:1fr;gap:42px;align-items:start}.collection-list-blog,.collection-list-projects,.collection-list-services,html[data-wf-page="648211d82b26705faa1e4b54"] .collection-list-services,html[data-wf-page="66321162ae5731b9c342ac44"] .serv-category_coll-items{grid-template-columns:repeat(2,minmax(0,1fr))}html[data-wf-page="648211d82b26705faa1e4b4e"] .line-wrapper.top{grid-template-columns:1fr}html[data-wf-page="648211d82b26705faa1e4b4a"] .promo-block,html[data-wf-page="648211d82b26705faa1e4b4d"] .submit-section .promo-block,html[data-wf-page="648211d82b26705faa1e4b47"] section.about-us>.grid--main{grid-template-columns:1fr}html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right{grid-template-columns:1fr}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_front{min-height:0;padding:62px 0 0}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_inner{width:100%;padding:0 0 42px}html[data-wf-page="66321162ae5731b9c342ac44"] .serv-h_bg-image{position:relative;inset:auto;width:100%;height:auto;aspect-ratio:16/9}html[data-wf-page="66321162ae5731b9c342ac44"] .cta_component{grid-template-columns:1fr}}@media screen and (max-width:767px){:root{--mx-gutter:16px}body.mx-site-actions-ready{padding-bottom:calc(64px + env(safe-area-inset-bottom))}.section:not(.footer){padding-top:58px;padding-bottom:58px}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top.section.hero,html:is([data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"]) #Top.section-hero.hero-page-section{padding:96px 0 38px}html:is([data-wf-page="648211d82b26705faa1e4b48"],[data-wf-page="648211d82b26705faa1e4b53"],[data-wf-page="648211d82b26705faa1e4b4a"],[data-wf-page="6a5bcd97134c3cc8c4f35f51"],[data-wf-page="648211d82b26705faa1e4b54"],[data-wf-page="648211d82b26705faa1e4b4b"],[data-wf-page="6a7a559ce4674e1355d6e618"]) #Top h1{font-size:var(--mx-h-display-sm)}.mx-about-intro{padding:96px 0 48px}.mx-about-intro h1{font-size:var(--mx-h-display-sm)}.mx-about-intro__lede{margin-top:22px;font-size:16px}.mx-about-intro__route{grid-template-columns:28px 1fr auto;gap:12px;padding:18px 0}.collection-list-blog,.collection-list-projects,.collection-list-services,html[data-wf-page="648211d82b26705faa1e4b54"] .collection-list-services,html[data-wf-page="66321162ae5731b9c342ac44"] .serv-category_coll-items{grid-template-columns:1fr}.mm-contact-routes-v2{grid-template-columns:1fr}html[data-wf-page="648211d82b26705faa1e4b4a"] .promo-block>*,html[data-wf-page="648211d82b26705faa1e4b4d"] .submit-section .promo-block>*,html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__left,html[data-wf-page="648211d82b26705faa1e4b47"] .about-us__right,html[data-wf-page="648211d82b26705faa1e4b4e"] .block-wrapper.services{padding:24px 20px}html[data-wf-page="648211d82b26705faa1e4b47"] .achivements__grid,html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivements__grid,html[data-wf-page="648211d82b26705faa1e4b47"] .team-grid{grid-template-columns:minmax(0,1fr)!important;grid-auto-columns:minmax(0,1fr)!important}html[data-wf-page="648211d82b26705faa1e4b47"] .achivements__grid>*,html[data-wf-page="648211d82b26705faa1e4b47"] .team-grid>*,html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivements__grid>*{grid-column:1!important;grid-row:auto!important;min-width:0!important;width:100%!important;max-width:100%!important;justify-self:stretch!important}html[data-wf-page="648211d82b26705faa1e4b47"] .achivement__item,html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivement__item{min-height:0;border-top:1px solid var(--mx-line);border-left:0}html[data-wf-page="648211d82b26705faa1e4b47"] .achivement__item:first-child,html[data-wf-page="648211d82b26705faa1e4b4d"] .service__achivements.project .achivement__item:first-child{border-top:0}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-hero.services{margin-top:24px}html[data-wf-page="648211d82b26705faa1e4b4e"] .section-hero.services .invisible-image-div,html[data-wf-page="648211d82b26705faa1e4b4e"] .service-image{aspect-ratio:16/10}#mx-site-mobile-bar{position:fixed;z-index:9998;inset:auto 0 0;display:grid;grid-template-columns:repeat(3,1fr);padding:6px 8px calc(6px + env(safe-area-inset-bottom));color:#fff;background:#111;border-top:1px solid #404040;box-shadow:0 -6px 18px rgba(0,0,0,.18)}#mx-site-mobile-bar a{min-height:var(--mx-action-min-height,var(--mx-action-persistent-height));display:flex;align-items:center;justify-content:center;padding:0 8px;color:#fff;border-right:1px solid #404040;font-family:Inter,Arial,sans-serif;font-size:var(--mx-action-current-font-size,var(--mx-action-control-font-size));font-weight:800;letter-spacing:var(--mx-action-current-letter-spacing,.05em);text-align:center;text-decoration:none;text-transform:uppercase}#mx-site-mobile-bar a[data-mx-action="primary"]{background:var(--mx-action-background,var(--mx-red))}#mx-site-mobile-bar a:last-child{border-right:0}#mx-site-mobile-bar a:focus-visible{outline-color:#fff!important;outline-offset:-4px!important}div[aria-label="Cookie notice"]{bottom:64px!important}} /* ══════════════════════════════════════════════════════════════════════════ PAGE HERO CONVERGENCE — added 2026-08-10 Home, Services and Contact author their hero heading in page-local blocks that predate the token layer. Retiring those blocks means rewriting 18KB of page custom code and re-registering a runtime script, which would move their cascade position — so until that is done, the canonical values are asserted here at deliberately matching specificity. Every rule names the exact legacy declaration it supersedes, so the pair can be deleted together later. Size rules are scoped to >=768px on purpose: each page has its own tuned mobile ramp (and Home's carries !important via mx-home-v5). Desktop is where the inconsistency was reported; mobile convergence is a separate pass. ══════════════════════════════════════════════════════════════════════════ */ /* Contact ships a parallel token set. Alias it to the shared one — this alone converges its paper, ink, line and red. Supersedes, in Contact page custom code: :root{--mm3-red:#e31e24;--mm3-ink:#202226;--mm3-paper:#f3f0ea;--mm3-line:#d7d1c8} */ html:root{ --mm3-red:var(--mx-red); --mm3-ink:var(--mx-ink); --mm3-paper:var(--mx-paper); --mm3-line:var(--mx-line); } /* Supersedes Contact page custom code: .mm3-shell{max-width:1120px} 1120 -> 1320 puts Contact on the same 96px gutter as every other page. */ html:root .mm3-shell{max-width:var(--mx-shell);} /* Supersedes Contact page custom code: #mm3-title{color:#17191d;font-weight:800;letter-spacing:-.04em} Case is intentionally NOT changed — sentence vs upper is editorial. */ html:root #mm3-title{ color:var(--mx-ink); font-weight:900; } @media screen and (min-width:768px){ /* Supersedes mx-homepage-v2-css: .mxh-hero-title{font-size:clamp(48px,4vw,60px)} */ /* Home's hero is a two-column split: the text column measures 620px at 1512w, and "ONE ACCOUNTABLE" needs 622px at 66px — it wraps, orphaning "ONE" onto its own line. --mx-h-display-split is the display step for constrained-column heroes. Same scale, correct step for the archetype. */ html:root .mxh-hero-title{ font-size:var(--mx-h-display-split); letter-spacing:var(--mx-h-display-tr); } /* Supersedes mx-services-discovery-style: html[data-mx-services-discovery="v1"] .mxc-intent-title{font-size:clamp(40px,4.5vw,66px)} */ html[data-mx-services-discovery="v1"]:root .mxc-intent-title{ font-size:var(--mx-h-display); letter-spacing:var(--mx-h-display-tr); } /* Supersedes Contact page custom code: #mm3-title{font-size:clamp(42px,5.5vw,64px)} */ html:root #mm3-title{ font-size:var(--mx-h-display); letter-spacing:var(--mx-h-display-tr); } } /* ══════════════════════════════════════════════════════════════════════════ PAGE ARCHETYPE CONVERGENCE — 2026-08-10 (operator decisions) · page opening = FULL HERO (dark band: kicker + headline + copy + actions) · headline case = UPPERCASE everywhere The embed cap no longer applies (CSS is CDN-hosted), so the spacing scale that was cut for budget in v2 lands here and is now actually consumed. ══════════════════════════════════════════════════════════════════════════ */ :root{ --mx-space-1:8px; --mx-space-2:16px; --mx-space-3:24px; --mx-space-4:32px; --mx-space-5:40px; --mx-space-6:56px; --mx-space-7:76px; --mx-space-8:96px; --mx-section-y:76px; --mx-hero-top:118px; /* 88px nav + 30 */ --mx-hero-bottom:56px; } /* ── Headline case ───────────────────────────────────────────────────────── Was UPPER on Home/Projects/About/Blog, sentence on Services/Contact. */ html:root .mxc-intent-title, html:root #mm3-title{ text-transform:uppercase; } /* ── One hero band spec ──────────────────────────────────────────────────── Was 118/96 top and 52/0/54/72 bottom, with the red closing rule on About only. That rule is the ink->paper transition device site-wide now. */ html:root .mxh-hero, html:root .mxc-intent-router.mxs-opener, html:root .section.hero, html:root .mx-about-intro{ padding-top:var(--mx-hero-top); padding-bottom:var(--mx-hero-bottom); border-bottom:4px solid var(--mx-red); } /* ── Contact: promote its header to the same dark band ───────────────────── It already carries kicker + h1 + intro copy; it simply was not on ink. Full-bleeds out of .mm3-shell; horizontal padding re-aligns to the shell so the headline keeps the shared 96px left edge. html/body carry overflow-x:clip site-wide, so the 100vw bleed cannot cause h-scroll. */ html:root .mm3-header{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); padding:var(--mx-hero-top) max(24px,calc(50vw - (var(--mx-shell) / 2))) var(--mx-hero-bottom); background:var(--mx-ink); border-bottom:4px solid var(--mx-red); } html:root .mm3-header #mm3-title, html:root .mm3-header .mm3-eyebrow{ color:#fff; } html:root .mm3-header .mm3-intro{ color:#d3d3d3; } /* ── Projects / Blog: close the dead gap under the band ──────────────────── .section.projects-page padding-top 76 + .projects-page__inner padding-top 26 stacked to 102px of empty paper, which read as a rendering fault. */ html:root .projects-page__inner{ padding-top:0; } /* ══════════════════════════════════════════════════════════════════════════ PROJECTS / BLOG — hoisted hero head (matrix_content_discovery 2.1.0) Those pages used to open with TWO headlines: the band's h1 plus an injected h2 ("See the work…"), separated by empty paper. 2.1.0 drops the injected h2 and moves the kicker / copy / CTA up into the band, so the page opens with the same full-hero stack as every other page. This restyles that content for ink — it was authored for a white card. ══════════════════════════════════════════════════════════════════════════ */ #Top .mxcd__head{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(260px,.55fr); gap:42px; align-items:end; margin:var(--mx-space-3) 0 0; padding:0; background:transparent; border:0; } #Top .mxcd__intro{ min-width:0; } /* Kicker goes WHITE, not brand red: red on ink tops out at 4.48:1 and an 11px kicker is not WCAG "large text", so red would fail AA. Every other page already uses white for the kicker on ink. */ #Top .mxcd__kicker{ margin:0 0 var(--mx-space-1); color:#fff; } #Top .mxcd__copy{ max-width:650px; margin:0; color:#d3d3d3; } #Top .mxcd__routes{ align-content:end; } @media screen and (max-width:991px){ #Top .mxcd__head{ grid-template-columns:1fr; gap:var(--mx-space-3); align-items:start; } } /* The band now carries real content, so it no longer needs the tall bottom pad that suited a title-only banner. */ html:root .section.hero{ padding-bottom:var(--mx-hero-bottom); } /* Services opener: was 96px top / 0 bottom against 118/56 everywhere else. */ html[data-mx-services-discovery="v1"]:root .mxc-intent-router.mxs-opener{ padding-top:var(--mx-hero-top); padding-bottom:var(--mx-hero-bottom); } /* The utility call link was authored for the white card — ink on ink once hoisted (contrast 1.0, invisible). Same failure mode as .mm3-eyebrow. */ #Top .mxcd__call{ color:#fff; } /* Blog's hero has no inner .container — its .section-title carries margin:0 96px, so hoisted siblings inherit no inset and run to the viewport edge. Re-apply the shell inset. Scoped with ">" so Projects, which hoists into a real .container, is unaffected. */ #Top > .mxcd__kicker, #Top > .mxcd__head{ width:min(var(--mx-shell), calc(100% - (var(--mx-gutter) * 2))); margin-left:auto; margin-right:auto; } /* ══════════════════════════════════════════════════════════════════════════ SECONDARY HEADINGS — 2026-08-10 The UPPERCASE decision was only applied to h1. Below h1 the site was still fragmented: h2 at 27/36/42/44/48/52px in weights 700/800/900, case mixed (UPPER on Home + Projects/Blog, sentence on Services/About/Contact); h3 at 21/28/32/38px in 700/900. Same treatment now applies to every page-chrome heading. Sizes are left per-role on purpose — only weight, case and tracking are unified, which is what reads as "different sites". Rich-text bodies are excluded: forcing caps on article prose hurts reading. ══════════════════════════════════════════════════════════════════════════ */ html:root h2:not(.w-richtext *):not(.w-richtext), html:root h3:not(.w-richtext *):not(.w-richtext){ font-family:Inter,Arial,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.03em; } /* ── Card language ───────────────────────────────────────────────────────── Contact was the only page using heavy floating-card shadows (0 18px 42px rgba(29,31,35,.16) / 0 18px 48px .12); About carried a lighter 0 10px 20px. Home, Services and Projects use flat 1px borders. Flat wins — it is the majority and matches the spec-sheet feel of the rest of the site. */ html:root .mm3-layout > *{ box-shadow:none; } html:root .achivement__item{ box-shadow:none; } /* ══════════════════════════════════════════════════════════════════════════ SERVICES — shrink the dark band to the hero, like every other page Band heights were Contact 272 / Blog 353 / Projects 410 / About 493 / Home 683 (image) / **Services 1044**. Services was not over-padded — it had an entire 12-card section living ON the ink: .mxc-intent-intro 337px <- the hero .mxc-intent-paths 281px <- 4 intent cards .mxc-intent-next 88px <- "what happens next" .mxc-intent-catalogue 126px <- "find a service" Ink now wraps only the intro; the rest sits on paper like every other page. ══════════════════════════════════════════════════════════════════════════ */ html:root .mxc-intent-router.mxs-opener, html[data-mx-services-discovery="v1"]:root .mxc-intent-router.mxs-opener{ padding-top:0; padding-bottom:var(--mx-section-y); background:var(--mx-paper); border-bottom:0; } /* full-bleed ink behind the hero only (same technique as Contact's .mm3-header) */ html:root .mxc-intent-intro{ margin-left:calc(50% - 50vw); margin-right:calc(50% - 50vw); margin-bottom:var(--mx-section-y); padding:var(--mx-hero-top) max(24px,calc(50vw - (var(--mx-shell) / 2))) var(--mx-hero-bottom); background:var(--mx-ink); border-bottom:4px solid var(--mx-red); } /* "Find a service" was white for the ink ground — it now sits on paper. */ html:root .mxc-intent-catalogue, html:root .mxc-intent-catalogue h2, html:root .mxc-intent-catalogue p, html:root .mxc-intent-catalogue span{ color:var(--mx-ink); } html:root .mxc-intent-catalogue .mxc-intent-catalogue-arrow, html:root .mxc-intent-catalogue [class*="arrow"]{ color:var(--mx-red); } /* ── About: section headings were centred; every other page is left-aligned ── */ html:root .title-section, html:root .section.gray h2, html:root .achivement__item{ text-align:left; } html:root .title-section{ margin-left:0; margin-right:0; } /* ══════════════════════════════════════════════════════════════════════════ HEADING CLASSES ON NON-HEADING TAGS — 2026-08-10 The phase-4 rule targeted h2/h3 TAGS. Webflow's template also uses .heading-1 / .heading-2 / .heading-3 / .title-section as CLASSES on
s, so every one of those was missed — e.g. About's "Since 1991" / "4 trades" / "3 licences" stat figures rendered sentence case beside uppercase headings. ══════════════════════════════════════════════════════════════════════════ */ html:root .heading-1:not(.w-richtext *), html:root .heading-2:not(.w-richtext *), html:root .heading-3:not(.w-richtext *), html:root .title-section:not(.w-richtext *), html:root .heading:not(.w-richtext *){ font-family:Inter,Arial,sans-serif; font-weight:900; text-transform:uppercase; letter-spacing:-.03em; } /* About centres its section headings through a FLEX PARENT (.section-title, align-items:center) — text-align on the heading itself is a no-op there. Scoped to About so the Projects/Blog hero use of .section-title is untouched. */ html[data-wf-page="648211d82b26705faa1e4b47"] .section-title{ align-items:flex-start; justify-content:flex-start; text-align:left; } /* ── About stat row: uniform cell borders ────────────────────────────────── Columns and gaps were already even (418/418/418, 32/32). The BORDERS were not: cell 1 had none, cell 2 (.with-border) had left+right, cell 3 had left only. The mismatched hairlines read as an extra narrow cell between "4 TRADES" and "3 LICENCES". All three now carry the same 1px box. */ html:root .achivements__grid > .achivement__item{ border:1px solid var(--mx-line); } /* ══════════════════════════════════════════════════════════════════════════ SERVICES — retire its private micro-palette (2026-08-10) Services was the last page carrying its own colours instead of the shared tokens — the same drift Contact had with --mm3-*: intent cards #F6F6F3 vs --mx-paper #F2F2F2 card 04 dark #242425 vs --mx-ink #1A1A1A card headings #181819 vs --mx-ink blush panels #FCE9EA used on NO other page (0 instances site-wide) It was also the only card row mixing treatments (3 light + 1 inverted); Home's equivalent intent row is all-light. ══════════════════════════════════════════════════════════════════════════ */ html:root .mxc-intent-card, html:root .mxc-intent-card.mxc-intent-card-dark{ background:var(--mx-paper); border:1px solid var(--mx-line); } html:root .mxc-intent-card h2, html:root .mxc-intent-card h3, html:root .mxc-intent-card p, html:root .mxc-intent-card-dark h2, html:root .mxc-intent-card-dark h3, html:root .mxc-intent-card-dark p{ color:var(--mx-ink); } /* Blush -> the aside treatment Contact already uses for the same job (--mx-paper with a 4px red left rule). .mxc-intent-next also carried color:#fff on that pink ground — a latent invisible-text bug. */ html:root .mxc-intent-reassurance, html:root .mxc-intent-next{ background:var(--mx-paper); border-left:4px solid var(--mx-red); color:var(--mx-ink); } html:root .mxc-intent-next strong, html:root .mxc-intent-next span, html:root .mxc-intent-reassurance p, html:root .mxc-intent-reassurance span{ color:var(--mx-ink); } /* Card 04's numeral ("04") and kicker ("Not sure") were still white from the inverted treatment — 1.12 contrast on paper. Cover every descendant, not just h2/h3/p. The red numeral box is a border colour, not text, so it survives. */ html:root .mxc-intent-card-dark, html:root .mxc-intent-card-dark *{ color:var(--mx-ink); } /* ══════════════════════════════════════════════════════════════════════════ MARKUP REVIEW — RED items (Matrix_Website_Markups, 2026-08-10) ══════════════════════════════════════════════════════════════════════════ */ /* P1 — Projects' header CTA is "Request an estimate" (195px) vs "Book service" (137px) elsewhere; the 58px delta shifts the whole nav left (first link 578 vs 635). The label difference is DELIBERATE conversion routing (matrix_customer_action_routing sets estimate-primary on projects-index), so the fix is to stop the geometry moving, not to flatten the routing: reserve the width of the longest label on every page. */ html:root .nav-buttons .button[data-mx-action="primary"]{ min-width:196px; } /* A3 — the three stat cards each carried a full border AND sat in a 32px column gap, so every join rendered as border + gap + border: the "double vertical separators" in the markup. Collapse to the single shared divider the .mxcd__proof strip already uses. */ html:root .achivements__grid{ column-gap:0; border:1px solid var(--mx-line); } html:root .achivements__grid > .achivement__item{ border:0; border-right:1px solid var(--mx-line); } html:root .achivements__grid > .achivement__item:last-child{ border-right:0; } /* S4 — the four situation cards each DO contain a real CTA (/book, ?request=estimate, tel:), so they are not dead; the affordance was just weak and there was no keyboard-focus treatment. Strengthen both. Not making the card itself a link — that would nest interactive elements. */ html:root .mxc-intent-card{ transition:border-color .18s ease, box-shadow .18s ease; } html:root .mxc-intent-card:hover{ border-color:var(--mx-ink); } html:root .mxc-intent-card:focus-within{ border-color:var(--mx-ink); box-shadow:0 0 0 3px var(--mx-red); } html:root .mxc-intent-button:focus-visible{ outline:3px solid var(--mx-red); outline-offset:3px; } @media (prefers-reduced-motion:reduce){ html:root .mxc-intent-card{ transition:none; } } /* C3 — Name / Email / Subject / Details already carry `required`; only the visible marker and post-interaction validation cue were missing, so the form's "Required fields are marked." was untrue. :user-invalid (not :invalid) so empty required fields are not flagged before interaction. */ html:root .w-form label.field-label-alternative:has(~ [required])::after{ content:" *"; color:var(--mx-red); font-weight:900; } html:root .w-form input:user-invalid, html:root .w-form textarea:user-invalid{ border-color:var(--mx-red); box-shadow:0 0 0 1px var(--mx-red); } /* ---- moved out of Home page custom code 2026-08-10 (was