/* Novatech unified buttons (dev, 27 Oct 2026).
   Every button uses the homepage .h26-btn shape. Only the gradient changes.
   A variant sets --nb-a / --nb-b (gradient start / end), --nb-fg (text) and --nb-ring (outline).
   Gradient ends follow the reference step: hue +3.4deg, lightness x0.68.
   Previous version: /home/novatech/private-dev-20261016/buttons-unify-backup-20261027-201911/shared-buttons.css */

:root{
 --nb-blue-a:#0054a4;--nb-blue-b:#003370;
 --nb-sky-a:#00acee;--nb-sky-b:#006ca3;
 --nb-green-a:#75bd44;--nb-green-b:#4b822e;
 --nb-red-a:#cd123d;--nb-red-b:#8c0c22;
 --nb-orange-a:#f7941d;--nb-orange-b:#b67006;
 --nb-purple-a:#a82c97;--nb-purple-b:#731e62;
 --nb-charcoal-a:#4a4a4f;--nb-charcoal-b:#333336;
 --nb-white-a:#ffffff;--nb-white-b:#d6e0ea;
 --nb-font:12px;
}
@media (max-width:860px){:root{--nb-font:13px}}

/* 1. Shape (the :not(#nb-x) adds ID weight so legacy !important colour rules can't win) */
html body :is(a.btn,button.btn,input.btn,.h26-btn,.nsvc-button,.approach__cta-btn,.pillars__contact-btn,.pillars__card-btn,.mits-industries__btn,.lets-chat-new__btn,.login-btn,.itt-btn,.ts__btn,.na-btn-green,.na-slide-btn,.home-hero__ctaBtn,.directions-button,.gform_button,.gform_next_button,.gform_previous_button,.gform_wrapper [type=submit],input[type=submit].wpcf7-submit,a.button,button.button,.wp-block-button__link,.h26-footer__pill):not(.btn--reset):not(.btn--text):not(.h26-value-card__link):not(.head-btn-red):not(.h26-header__cta):not(.product_button):not(.btn-brands):not(.nsvc-tabs__tab):not(:is(.gheader,.h26-header,.header-mobile-btns,.menu-btn) *):not(#nb-x){display:inline-flex!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;height:auto!important;min-height:44px!important;padding:8px 22px!important;border:0!important;border-radius:22px!important;background:linear-gradient(90deg,var(--nb-a,var(--nb-blue-a)) 0%,var(--nb-b,var(--nb-blue-b)) 100%)!important;color:var(--nb-fg,#fff)!important;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif!important;font-size:var(--nb-font)!important;font-weight:600!important;font-style:normal!important;line-height:1.15!important;letter-spacing:.2px!important;text-transform:none!important;text-decoration:none!important;text-shadow:none!important;text-align:center!important;white-space:normal!important;box-shadow:var(--nb-ring,none)!important;opacity:1!important;filter:none!important;transform:none!important;cursor:pointer;max-width:100%;transition:filter .18s ease,transform .18s ease!important}
html body :is(a.btn,button.btn,input.btn,.h26-btn,.nsvc-button,.approach__cta-btn,.pillars__contact-btn,.pillars__card-btn,.mits-industries__btn,.lets-chat-new__btn,.login-btn,.itt-btn,.ts__btn,.na-btn-green,.na-slide-btn,.home-hero__ctaBtn,.directions-button,.gform_button,.gform_next_button,.gform_previous_button,.gform_wrapper [type=submit],input[type=submit].wpcf7-submit,a.button,button.button,.wp-block-button__link,.h26-footer__pill):not(.btn--reset):not(.btn--text):not(.h26-value-card__link):not(.head-btn-red):not(.h26-header__cta):not(.product_button):not(.btn-brands):not(.nsvc-tabs__tab):not(:is(.gheader,.h26-header,.header-mobile-btns,.menu-btn) *):not(#nb-x):hover{filter:brightness(1.22)!important;transform:translateY(-1px)!important;color:var(--nb-fg,#fff)!important}
html body :is(a.btn,button.btn,input.btn,.h26-btn,.nsvc-button,.approach__cta-btn,.pillars__contact-btn,.pillars__card-btn,.mits-industries__btn,.lets-chat-new__btn,.login-btn,.itt-btn,.ts__btn,.na-btn-green,.na-slide-btn,.home-hero__ctaBtn,.directions-button,.gform_button,.gform_next_button,.gform_previous_button,.gform_wrapper [type=submit],input[type=submit].wpcf7-submit,a.button,button.button,.wp-block-button__link,.h26-footer__pill):not(.btn--reset):not(.btn--text):not(.h26-value-card__link):not(.head-btn-red):not(.h26-header__cta):not(.product_button):not(.btn-brands):not(.nsvc-tabs__tab):not(:is(.gheader,.h26-header,.header-mobile-btns,.menu-btn) *):not(#nb-x):focus-visible{outline:3px solid #00acee!important;outline-offset:3px!important}
html body .h26-btn.h26-btn--wide:not(#nb-x):not(#nb-y){padding-left:30px!important;padding-right:30px!important}
@media(prefers-reduced-motion:reduce){html body :is(a.btn,button.btn,input.btn,.h26-btn,.nsvc-button,.approach__cta-btn,.pillars__contact-btn,.pillars__card-btn,.mits-industries__btn,.lets-chat-new__btn,.login-btn,.itt-btn,.ts__btn,.na-btn-green,.na-slide-btn,.home-hero__ctaBtn,.directions-button,.gform_button,.gform_next_button,.gform_previous_button,.gform_wrapper [type=submit],input[type=submit].wpcf7-submit,a.button,button.button,.wp-block-button__link,.h26-footer__pill):not(.btn--reset):not(.btn--text):not(.h26-value-card__link):not(.head-btn-red):not(.h26-header__cta):not(.product_button):not(.btn-brands):not(.nsvc-tabs__tab):not(:is(.gheader,.h26-header,.header-mobile-btns,.menu-btn) *):not(#nb-x){transition:none!important}html body :is(a.btn,button.btn,input.btn,.h26-btn,.nsvc-button,.approach__cta-btn,.pillars__contact-btn,.pillars__card-btn,.mits-industries__btn,.lets-chat-new__btn,.login-btn,.itt-btn,.ts__btn,.na-btn-green,.na-slide-btn,.home-hero__ctaBtn,.directions-button,.gform_button,.gform_next_button,.gform_previous_button,.gform_wrapper [type=submit],input[type=submit].wpcf7-submit,a.button,button.button,.wp-block-button__link,.h26-footer__pill):not(.btn--reset):not(.btn--text):not(.h26-value-card__link):not(.head-btn-red):not(.h26-header__cta):not(.product_button):not(.btn-brands):not(.nsvc-tabs__tab):not(:is(.gheader,.h26-header,.header-mobile-btns,.menu-btn) *):not(#nb-x):hover{transform:none!important}}

/* 2. Colours */
html body :is(.nsvc-button--primary,.mits-industries__btn,.na-slide-btn,.pillars__card--2 .pillars__card-btn){--nb-a:var(--nb-sky-a);--nb-b:var(--nb-sky-b)}
html body :is(.approach__cta-btn,.na-btn-green,.nsight-btn,.pillars__card--1 .pillars__card-btn){--nb-a:var(--nb-green-a);--nb-b:var(--nb-green-b)}
html body :is(.btn--red,.nsvc-button--secondary){--nb-a:var(--nb-red-a);--nb-b:var(--nb-red-b)}
html body :is(.gfooter .btn--red,.home-hero__ctaBtn,.pillars__card--3 .pillars__card-btn){--nb-a:var(--nb-orange-a);--nb-b:var(--nb-orange-b)}
html body .pillars__card--4 .pillars__card-btn{--nb-a:var(--nb-purple-a);--nb-b:var(--nb-purple-b)}
html body :is(.itt-btn,.btn--ghost){--nb-a:var(--nb-charcoal-a);--nb-b:var(--nb-charcoal-b)}
html body :is(.btn--white,.directions-button,.gform_previous_button,.two-column-dark .darkbtn:first-child){--nb-a:var(--nb-white-a);--nb-b:var(--nb-white-b);--nb-fg:#003370}
html body :is(.btn--white,.directions-button,.gform_previous_button,.two-column-dark .darkbtn:first-child):hover{filter:brightness(1.04)!important}

/* Ghost: same shape, transparent with a 1px ring */
html body :is(.btn--outline,.pillars__contact-btn,.nsvc-button:not(.nsvc-button--primary):not(.nsvc-button--secondary)){--nb-a:transparent;--nb-b:transparent;--nb-fg:#fff;--nb-ring:inset 0 0 0 1px rgba(255,255,255,.75)}
html body :is(.btn--outline-blue){--nb-fg:#0054a4;--nb-ring:inset 0 0 0 1px #0054a4}
html body :is(.btn--outline,.pillars__contact-btn,.nsvc-button:not(.nsvc-button--primary):not(.nsvc-button--secondary)):hover{--nb-a:rgba(255,255,255,.12);--nb-b:rgba(255,255,255,.04)}
html body .btn--outline-blue:hover{--nb-a:rgba(0,84,164,.08);--nb-b:rgba(0,84,164,.02)}

/* Page heroes keep their colour by position: 1st sky, 2nd green, the rest white */
html body .hero .hero-content__buttons > .btn:nth-child(1){--nb-a:var(--nb-sky-a);--nb-b:var(--nb-sky-b);--nb-fg:#fff;--nb-ring:none}
html body .hero .hero-content__buttons > .btn:nth-child(2){--nb-a:var(--nb-green-a);--nb-b:var(--nb-green-b);--nb-fg:#fff;--nb-ring:none}
html body .hero .hero-content__buttons > .btn:nth-child(n+3){--nb-a:var(--nb-white-a);--nb-b:var(--nb-white-b);--nb-fg:#003370;--nb-ring:none}
html body .hero .hero-content__buttons > .btn:nth-child(n+3):hover{filter:brightness(1.04)!important}

/* Hero button rows: flex row with a 16px gap (desktop hero was display:block, so buttons sat ~4px apart) */
html body .hero-content__buttons{display:flex!important;flex-wrap:wrap!important;align-items:center!important;gap:16px!important}
html body .hero-content__buttons > .btn:not(#nb-x):not(#nb-y){margin:0!important;white-space:nowrap!important;flex:0 0 auto!important}
@media(max-width:767px){html body .hero-content__buttons{justify-content:center!important}}

/* Footers: both use the same pair, 12px apart (was ~34px from grid gap + margins) */
html body .gfooter .footer-panel__ctas{gap:12px!important}
html body .gfooter .footer-panel__ctas > .btn:not(#nb-x):not(#nb-y){margin:0!important}
html body .h26-footer__aside .h26-footer__pill:not(#nb-x):not(#nb-y){display:flex!important;width:100%!important;margin:0 0 12px!important}
html body .h26-footer__aside .h26-footer__pill:nth-of-type(1){--nb-a:transparent;--nb-b:transparent;--nb-fg:#fff;--nb-ring:inset 0 0 0 1px rgba(255,255,255,.75)}
html body .h26-footer__aside .h26-footer__pill:nth-of-type(1):hover{--nb-a:rgba(255,255,255,.12);--nb-b:rgba(255,255,255,.04)}
html body .h26-footer__aside .h26-footer__pill:nth-of-type(2){--nb-a:var(--nb-orange-a);--nb-b:var(--nb-orange-b)}

/* Pillar cards: full-width buttons so every card's button is the same size */
html body .pillars__card-footer .pillars__card-btn:not(#nb-x):not(#nb-y){width:100%!important;min-height:58px!important;gap:8px;text-wrap:balance}
html body .pillars__card-footer .pillars__card-btn .pillars__card-btn-arrow{display:none!important}

/* Service cards with named links (section class "cards-link-titles"): links sit at the card bottom, same size */
html body .cards-link-titles .service-card{display:flex!important;flex-direction:column!important}
html body .cards-link-titles .service-card .link{display:block!important;margin-top:auto!important;padding-top:18px;min-height:calc(3 * 1.4em + 18px);width:100%;text-align:center!important;line-height:1.4!important;text-wrap:balance}
html body .cards-link-titles .service-card .link .svg-icon{display:inline-block!important;position:relative!important;width:18px!important;height:14px!important;margin-left:6px!important;vertical-align:middle;overflow:visible}
html body .cards-link-titles .service-card .link .svg-icon .positioner{position:static!important;display:block!important;width:100%!important;height:100%!important;transform:none!important}
html body .cards-link-titles .service-card .link .svg-icon svg{display:block!important;width:18px!important;height:14px!important;position:static!important}

/* 3. Header: all header buttons keep their own size (excluded above). Red CTA stays the compact outline. */
html body.h26 .gheader.gheader--sitewide-custom .menu-btn a.head-btn-red,html body .gheader a.head-btn-red,html body .h26-header a.h26-header__cta{display:inline-flex;align-items:center!important;justify-content:center!important;box-sizing:border-box!important;min-height:24px!important;height:24px!important;padding:0 14px!important;border:1px solid #c20430!important;border-radius:12px!important;background:transparent!important;font-family:Montserrat,"Helvetica Neue",Arial,sans-serif!important;font-weight:600!important;font-size:10px!important;line-height:12px!important;letter-spacing:.2px!important;text-transform:none!important;text-decoration:none!important;color:#fff!important;box-shadow:none!important;filter:none!important;white-space:nowrap!important;transition:background-color .18s ease}
html body.h26 .gheader.gheader--sitewide-custom .menu-btn a.head-btn-red:hover,html body .gheader a.head-btn-red:hover,html body .h26-header a.h26-header__cta:hover{background:#c20430!important;filter:none!important}

/* Pillar cards: roomier layout (icon inside the card, top-left; more padding and wider gaps) */
html body [data-pillars] .pillars__grid{gap:40px}
html body [data-pillars] .pillars__card{padding:44px 30px 32px;border-radius:16px}
html body [data-pillars] .pillars__card-icon{position:static;transform:none;left:auto;top:auto;width:72px;height:72px;margin:0 0 32px;flex:0 0 auto;box-shadow:none}
html body [data-pillars] .pillars__card-icon img{width:38px}
html body [data-pillars] .pillars__card-title{margin-bottom:24px}
html body [data-pillars] .pillars__card-features{margin-bottom:32px}
@media(max-width:1100px){html body [data-pillars] .pillars__grid{gap:32px}}
@media(max-width:767px){html body [data-pillars] .pillars__grid{gap:24px}html body [data-pillars] .pillars__card{padding:36px 24px 28px}}