/* Shared blue palette and component finishes. Keep Webflow interactions intact. */
:root {
  --site-hover-duration:300ms;
  --site-hover-easing:ease;
  --site-blue:#146fb8;
  --site-blue-hover:#105d9c;
  --site-ink:#152332;
  --site-muted:#4b5563;
  --site-surface:#f3f6fa;
  --site-border:#e4e9ef;
  --site-radius:12px;
  --site-body-size:18px;
  --site-body-leading:1.65;
  --site-heading-size:clamp(44px,4.5vw,64px);
  --site-section-heading-size:clamp(36px,3.5vw,48px);
  --site-button-size:18px;
  --site-button-leading:1.5;
  --site-button-radius:999px;
}
body {color:var(--site-ink);}
/* One trust-list style for the homepage and service hero introductions. */
body .hero-trust-list {display:grid;gap:8px;margin:24px 0 0;padding:0;list-style:none;color:var(--site-ink);font:400 15px/1.5 'Barlow',Arial,sans-serif;}
body .hero-trust-list li {display:grid;grid-template-columns:20px minmax(0,1fr);align-items:start;gap:10px;min-width:0;}
body .hero-trust-icon {display:block;width:20px;height:20px;margin-top:1px;color:var(--site-blue);pointer-events:none;}
body .hero-trust-list strong {font-weight:600;}
body .navigation {background:#fff;border-bottom:1px solid var(--site-border);}
body .footer {background:#fff;}
body .nav-toggle:hover,body .nav-toggle.w--open {color:var(--site-blue);background:#e7f0f8;}
body .nav-toggle {transition:color var(--site-hover-duration) var(--site-hover-easing),background-color var(--site-hover-duration) var(--site-hover-easing);}
body .nav-link-icon {transition:color var(--site-hover-duration) var(--site-hover-easing),background-color var(--site-hover-duration) var(--site-hover-easing);}
body .nav-link-text,body .meu-text,body .text-block-3.header,
body .footer-text-link,body .link,body .button-ghost {transition:color var(--site-hover-duration) var(--site-hover-easing),text-decoration-color var(--site-hover-duration) var(--site-hover-easing);}
body .nav-link-icon:hover {color:var(--site-blue);}
body .navigation .nav-link-icon {border-radius:var(--site-radius);}
/* Shared service-icon tiles keep their shape beside multiline labels. */
body .navigation .nav-icon-s,
body.service-page .service-related-icon,
body .project-service-icon {
  box-sizing:border-box;
  flex:0 0 32px;
  align-self:center;
  width:32px;
  height:32px;
  background-color:var(--site-surface);
}
body .nav-link-text,body .meu-text,body .text-block-3.header {color:var(--site-ink);}
body .nav-link-icon:hover .nav-link-text,body .text-block-3.header:hover,
body .footer-text-link:hover {color:var(--site-blue);}
body .nav-toggle:hover .meu-text,body .nav-toggle.w--open .meu-text {color:var(--site-blue);}
/* One dropdown surface; the inner layout must not draw a second frame. */
body .nav-dropdown-base-c {border-color:var(--site-border);border-radius:var(--site-radius);box-shadow:0 8px 26px #15233212;}
/* Replace the removed 1px border with padding to retain the content geometry. */
body .nav-inner {border:0;border-radius:0;box-shadow:none;padding:17px;}
body .nav-menu-button {color:var(--site-blue);background:#e7f0f8;}
body .nav-menu-button.w--open {color:#fff;background:var(--site-blue);}
body .span-primary {color:var(--site-blue);}
body .link:hover,body .footer-text-link:hover {color:var(--site-blue);text-decoration:underline;text-underline-offset:3px;}
/* Keep an invisible underline at rest so it can fade in and out continuously. */
body .link,body .footer-text-link {text-decoration:underline;text-decoration-color:transparent;text-underline-offset:3px;}
body .link:hover,body .footer-text-link:hover {text-decoration-color:currentColor;}
body .gradient-arrow-button,
body .gradient-arrow-button-2,
body .gradient-arrow-button-2.mob,
body .content-button-primary,
body .submit-button-karma,
body .button-primary-s,
body .section-header-large .hero-contact-button,
body.home-page .home-company .button-ghost,
body .utility-return-button {
  box-sizing:border-box;
  justify-content:center;
  align-items:center;
  gap:12px;
  min-height:56px;
  max-width:100%;
  padding:14px 24px;
  font-family:'Barlow',Arial,sans-serif;
  font-size:var(--site-button-size);
  font-weight:600;
  line-height:var(--site-button-leading);
  letter-spacing:0;
  text-align:center;
  text-transform:none;
  text-decoration:none;
  white-space:normal;
  overflow-wrap:break-word;
  color:#fff;
  background-color:var(--site-blue);
  background-image:none;
  border:1px solid var(--site-blue);
  border-radius:var(--site-button-radius);
  box-shadow:none;
  transition:background-color var(--site-hover-duration) var(--site-hover-easing),border-color var(--site-hover-duration) var(--site-hover-easing),color var(--site-hover-duration) var(--site-hover-easing);
}
body .gradient-arrow-button:hover,
body .gradient-arrow-button-2:hover,
body .gradient-arrow-button-2.mob:hover,
body .content-button-primary:hover,
body .submit-button-karma:hover,
body .button-primary-s:hover,
body .section-header-large .hero-contact-button:hover,
body.home-page .home-company .button-ghost:hover,
body .utility-return-button:hover {
  color:#fff;background-color:var(--site-blue-hover);background-image:none;
  border-color:var(--site-blue-hover);
  text-decoration:none;
  transform:none;
  box-shadow:none;
}
/* Match the disclosure button's pill geometry and keyboard ring. The white
   focus halo is an accessibility cue, separate from decorative shadows. */
body .gradient-arrow-button:focus-visible,
body .gradient-arrow-button-2:focus-visible,
body .gradient-arrow-button-2.mob:focus-visible,
body .content-button-primary:focus-visible,
body .content-button-primary.project-quote-cta:focus-visible,
body .submit-button-karma:focus-visible,
body .button-primary-s:focus-visible,
body .section-header-large .hero-contact-button:focus-visible,
body.home-page .home-company .button-ghost:focus-visible,
body .utility-return-button:focus-visible {
  outline:3px solid var(--site-blue);
  outline-offset:4px;
  border-radius:var(--site-button-radius);
  box-shadow:0 0 0 3px #fff;
}
/* Both header CTA variants keep their original responsive display switches. */
body .content-button-primary,
body .button-primary-s,
body.home-page .home-company .button-ghost,
body .utility-return-button {display:inline-flex;}
body .gradient-arrow-button > div,
body .gradient-arrow-button-2 > div,
body .content-button-primary > div,
body.home-page .home-company .button-ghost > .text-block-2 {
  min-width:0;
  color:inherit;
  font:inherit;
  letter-spacing:inherit;
  text-transform:inherit;
  white-space:normal;
}
body .gradient-arrow-button .button-icon-right,
body .gradient-arrow-button-2 .button-icon-right {
  flex:none;width:16px;height:16px;object-fit:contain;margin-left:0;
}
/* Retain the company's original animated Webflow icon wrapper. Its glyph
   uses the same arrow asset as the header, without changing its target ID. */
body.home-page .home-company .button-ghost > .icon-regular {
  flex:none;width:16px;height:16px;
  background:url('/media/arrow-white-brix-templates.bc0967996c1a3b89.svg') center/contain no-repeat;
}
body.home-page .home-company .button-ghost > .icon-regular svg {
  width:16px;height:16px;opacity:0;
}
/* The recovered service CTAs contain no icon element. A decorative CSS
   arrow gives them the shared appearance while preserving their HTML. */
body .service-intro-contact::after,
body .content-button-primary::after,
body .utility-return-button:not(.content-button-primary)::after {
  content:'';flex:none;width:16px;height:16px;
  background:url('/media/arrow-white-brix-templates.bc0967996c1a3b89.svg') center/contain no-repeat;
  transition:transform var(--site-hover-duration) var(--site-hover-easing);
}
body .service-intro-contact:hover::after,
body .service-intro-contact:focus-visible::after,
body .content-button-primary:hover::after,
body .content-button-primary:focus-visible::after,
body .utility-return-button:hover::after,
body .utility-return-button:focus-visible::after {transform:translateX(4px);}
/* Buttons without a Webflow interaction get the same 4px arrow motion in
   CSS. Existing header/company Webflow arrow animations retain control. */
body .gradient-arrow-button:not([data-w-id]) .button-icon-right {transition:transform var(--site-hover-duration) var(--site-hover-easing);}
body .gradient-arrow-button:not([data-w-id]):hover .button-icon-right,
body .gradient-arrow-button:not([data-w-id]):focus-visible .button-icon-right {transform:translateX(4px);}
body .gradient-arrow-button[data-w-id]:focus-visible:not(:hover) .button-icon-right,
body .gradient-arrow-button-2[data-w-id]:focus-visible:not(:hover) .button-icon-right,
body.home-page .home-company .button-ghost:focus-visible:not(:hover) > .icon-regular {translate:4px 0;}
body .button-ghost {color:var(--site-blue);}
body .button-ghost:hover {color:var(--site-blue-hover);text-decoration:underline;text-underline-offset:3px;}
body .footer .footer-text-link,body .footer .footnote {color:var(--site-muted);}
body .footer .footer-text-link:hover {color:var(--site-blue);}
body .section-legal {background:#fff;border-top:1px solid var(--site-border);}
body svg [fill='#6173E5'],body svg [fill='#6173e5'] {fill:var(--site-blue);}
/* A lighter blue preserves readable link contrast on the existing dark banner. */
body .banner .span-yellow {color:#b9dcfa;}
body .banner svg [fill='#6173E5'],body .banner svg [fill='#6173e5'] {fill:#b9dcfa;}
body :is(a,button,input,select,textarea,[tabindex]):focus-visible {
  outline-color:var(--site-blue);
}
/* Shared text roles, scoped to actual reading content. Navigation, labels,
   summaries, card descriptions and legal draft notes keep their own roles. */
body.home-page .header-block > .paragraph-regular-4,
body.home-page .home-company .paragraph-large,
body.home-page .home-gallery-heading p,
body.service-page .paragraph-regular-3,
body.contact-page .title-wrap-karma .paragraph-regular-3,
body.privacy-page .privacy-content,
body.thank-you-page .content-card-detail .paragraph-regular-3,
body.utility-page .utility-page-message {
  font-size:var(--site-body-size);
  line-height:var(--site-body-leading);
}
body.home-page h1.hero-heading,
body.service-page h1.content-heading,
body.contact-page h1.display-heading,
body.privacy-page h1.content-heading {
  font-size:var(--site-heading-size);
  line-height:1.1;
  letter-spacing:0;
}
body.home-page .home-services h2.h3-heading,
body.home-page .home-company h2.h6-heading,
body.home-page .home-gallery-heading h2 {
  font-size:var(--site-section-heading-size);
  line-height:1.1;
  letter-spacing:0;
}
body.home-page .home-service-title,
body.home-page .home-gallery-caption h3 {font-size:22px;line-height:1.25;letter-spacing:0;}
body.service-page .service-content-section .h6-heading,
body.privacy-page .privacy-section .h6-heading {
  font-size:24px;font-weight:600;line-height:1.3;letter-spacing:0;
}
/* A compact state page is a deliberate heading variant of the same family. */
body .utility-state-heading {color:var(--site-ink);font-size:44px;line-height:1.1;letter-spacing:0;}
body.utility-page .utility-page-wrap {height:auto;min-height:100svh;padding:32px 5%;}
body.utility-page .utility-page-content {width:min(440px,100%);align-items:center;gap:20px;}
body.utility-page .utility-page-content > img {width:128px;max-width:100%;}
body.utility-page .utility-page-heading {margin:0;}
body.utility-page .utility-page-message {color:var(--site-muted);}
@media (max-width:991px) {
  body .nav-menu {background:#fff;border:1px solid var(--site-border);box-shadow:0 8px 26px #15233212;}
  body .nav-dropdown-base-c {box-shadow:none;}
}
@media (max-width:767px) {
  body .navigation .nav-logo-link {width:144px;flex-shrink:0;}
}
@media (max-width:599px) {
  :root {--site-body-size:17px;--site-heading-size:clamp(36px,9.5vw,40px);}
  body.service-page .service-content-section .h6-heading,
  body.privacy-page .privacy-section .h6-heading {font-size:22px;}
  body .utility-state-heading {font-size:36px;}
  body.home-page .home-service-title,
  body.home-page .home-gallery-caption h3 {font-size:23px;}
}
@media (prefers-reduced-motion:reduce) {
  :root {--site-hover-duration:0ms;}
  body .gradient-arrow-button,
  body .gradient-arrow-button-2,
  body .gradient-arrow-button-2.mob,
  body .content-button-primary,
  body .submit-button-karma,
  body .button-primary-s,
  body.home-page .home-company .button-ghost,
  body .utility-return-button,
  body .service-intro-contact::after,
  body .content-button-primary::after,
  body .utility-return-button::after,
  body .gradient-arrow-button:not([data-w-id]) .button-icon-right {transition:none;}
  body .gradient-arrow-button:hover,
  body .gradient-arrow-button-2:hover,
  body .gradient-arrow-button-2.mob:hover,
  body .content-button-primary:hover,
  body .submit-button-karma:hover,
  body .button-primary-s:hover,
  body.home-page .home-company .button-ghost:hover,
  body .utility-return-button:hover,
  body .service-intro-contact:hover::after,
  body .service-intro-contact:focus-visible::after,
  body .content-button-primary:hover::after,
  body .content-button-primary:focus-visible::after,
  body .utility-return-button:hover::after,
  body .utility-return-button:focus-visible::after,
  body .gradient-arrow-button:not([data-w-id]):hover .button-icon-right,
  body .gradient-arrow-button:not([data-w-id]):focus-visible .button-icon-right {transform:none;}
  body .gradient-arrow-button[data-w-id]:focus-visible:not(:hover) .button-icon-right,
  body .gradient-arrow-button-2[data-w-id]:focus-visible:not(:hover) .button-icon-right,
  body.home-page .home-company .button-ghost:focus-visible:not(:hover) > .icon-regular {translate:none;}
}
