/*
 * Additions on top of the Webflow export (public/webflow/css/*), which stays untouched.
 * Keep this file small: anything here is a deliberate difference from the Webflow site.
 */

/* Turnstile slot for flex-row forms (footer newsletter): out of the flow, under the form. */
.form-shield-overlay {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10;
  margin-top: 8px;
}

/* Bard (rich text editor) wraps list items in <p>; Webflow's rich text did not. */
.w-richtext li > p {
  margin-top: 0;
  margin-bottom: 0;
}

/* Service pages: testimonial logos are client logos (often square), not the template's
   wide wordmarks — cap their height like the home-page testimonials do. */
.image.card-service-testimonial {
  width: auto;
  max-height: 96px;
}

/* Services page: "Learn More" link under each card's bullets, to the service's own page
   (not in the Webflow design, which had no service pages). */
.card-service-v2-link {
  margin-top: 24px;
}

/* Header, restyled after the BRIX header design in Enginuity's colours (v0.3.0): the menu
   sits on the right, next to the button, in the muted neutral; the mobile menu's shadows
   lose the template's red and blue. Markup is unchanged:
   components/header-nav and components/button. */
.header .nav-link {
  color: var(--neutral-600);
  font-weight: 500;
}

.header .nav-link:hover,
.header .nav-link:focus-visible {
  color: var(--neutral-800);
}

/* Desktop menu: on hover a light rounded box (BRIX's) fades in behind the link and settles
   1px up. The links get its padding, so the gaps between items shrink to keep the words
   30px apart as before. */
@media screen and (min-width: 992px) {
  .header .nav-item-wrapper {
    margin-right: 14px;
  }

  .header .nav-link {
    position: relative;
    isolation: isolate;
    display: inline-block;
    padding: 8px 8px 10px;   /* Plus Jakarta's ink sits low in its line box: 1px more below than above */
    border-radius: 8px;
    outline: 0;
    transition: color .4s;
  }

  .header .nav-link::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--neutral-300);
    border-radius: inherit;
    background-color: var(--neutral-200);
    box-shadow: 0 1px 6px #2337800d;
    opacity: 0;
    transform: translate3d(0, 1px, 0);
    transition: opacity .4s, transform .4s;
    pointer-events: none;
  }

  .header .nav-link:hover::before,
  .header .nav-link:focus-visible::before {
    opacity: 1;
    transform: none;
  }
}

/* Buttons, site-wide — BRIX's button system in Enginuity's colours (v0.3.2). One size
   everywhere (56px tall: 16px bold, 18px × 32px padding, 1px border; full width on phones,
   as Webflow had it). Filled (`button-primary`): a top-lit gradient with a thin inner glow
   along the top edge; on hover a darker layer fades in (::after), a soft ring appears and
   it lifts 2px. Outlined (`button-secondary`, x-button variant="outline"): white with a grey
   edge and dark text; on hover a grey ring and a 3px lift. Arrows slide 4px on hover for
   both — in CSS, overriding webflow.js's own nudge (inline, filled buttons only) so the
   two variants move the same. */
.button-primary,
.button-secondary,
.button-primary.header-button,
.button-primary.header-button-mobile,
.button-primary.footer-newsletter,
.button-primary.blog-newsletter {
  padding: 17px 32px 19px;   /* 1px optical lift: Plus Jakarta's ink sits low in its line box */
  font-size: 16px;
  line-height: 1.1em;
}

.button-primary {
  --button-bg: var(--primary-1);
  --button-hover-bg: color-mix(in srgb, var(--primary-1) 90%, black);
  position: relative;
  isolation: isolate;
  border: 1px solid var(--button-bg);
  background-color: var(--button-bg);
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 88%, white) 0%, var(--button-bg) 100%);
  box-shadow: inset 0 1px 0 #ffffff33, 0 0 0 0 color-mix(in srgb, var(--button-bg) 0%, transparent), 0 4px 12px color-mix(in srgb, var(--button-bg) 18%, transparent);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), border-color 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms cubic-bezier(.2, .8, .2, 1), color 240ms cubic-bezier(.2, .8, .2, 1);
}

.button-primary::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-hover-bg) 90%, white) 0%, var(--button-hover-bg) 100%);
  opacity: 0;
  pointer-events: none;
  transition: opacity 240ms cubic-bezier(.2, .8, .2, 1);
}

.button-primary:hover,
.button-primary:focus-visible,
.button-primary:has(> [type="submit"]:focus-visible) {
  border-color: var(--button-hover-bg);
  background-color: var(--button-bg);
  box-shadow: inset 0 1px 0 #ffffff3d, 0 0 0 4px color-mix(in srgb, var(--button-bg) 10%, transparent), 0 10px 22px color-mix(in srgb, var(--button-bg) 18%, transparent);
  color: var(--neutral-100);
  transform: translate3d(0, -2px, .01px);
  outline: 0;
}

.button-primary:hover::after,
.button-primary:focus-visible::after,
.button-primary:has(> [type="submit"]:focus-visible)::after {
  opacity: 1;
}

/* The quote forms' button wrapper keeps its own height instead of stretching to its grid row. */
.button-primary.contact-form-button {
  align-self: start;
}

/* Submit buttons are <input>s, which can't have ::after — they swap the gradient instead. */
input.button-primary:hover,
input.button-primary:focus-visible {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-hover-bg) 90%, white) 0%, var(--button-hover-bg) 100%);
}

/* White button on the purple call-to-action band. */
.button-primary.button-white {
  border-color: var(--neutral-100);
  background-color: var(--neutral-100);
  background-image: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 0 #ffffff00, 0 4px 12px #ffffff1f;
  color: var(--primary-1);
}

.button-primary.button-white::after {
  content: none;
}

.button-primary.button-white:hover,
.button-primary.button-white:focus-visible {
  border-color: var(--neutral-100);
  background-image: linear-gradient(180deg, #fff 0%, #f8faff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 4px #ffffff1f, 0 10px 24px #19213d29;
  color: var(--primary-1);
}

.button-secondary {
  position: relative;
  border: 1px solid var(--neutral-400);
  background-color: var(--neutral-100);
  background-image: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 1px #ffffff99, 0 4px 12px #19213d0b;
  color: var(--neutral-800);
  font-weight: 700;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), border-color 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms cubic-bezier(.2, .8, .2, 1), color 240ms cubic-bezier(.2, .8, .2, 1);
}

.button-secondary:hover,
.button-secondary:focus-visible {
  border-color: color-mix(in srgb, var(--neutral-500) 45%, var(--neutral-400));
  background-color: var(--neutral-100);
  background-image: linear-gradient(180deg, #fff 0%, #f8faff 100%);
  box-shadow: inset 0 1px 0 #fff, 0 0 0 4px #19213d09, 0 10px 22px #19213d14;
  color: var(--neutral-800);
  transform: translate3d(0, -3px, .01px);
  outline: 0;
}

.button-primary .button-primary-arrow,
.button-primary .link-arrow,
.button-secondary .button-primary-arrow {
  opacity: .94;
  transform: translate3d(0, 0, .01px) !important;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), opacity 240ms cubic-bezier(.2, .8, .2, 1);
}

/* The arrow itself: a thin line arrow (BRIX's — Tabler's arrow-right, 1.5px at 18px) drawn in
   the text colour with a mask, instead of the icon font's glyph, which comes in one weight
   only. The glyph stays in the markup, at size 0. */
.button-primary .button-primary-arrow,
.button-primary .link-arrow,
.button-secondary .button-primary-arrow {
  flex: none;
  width: 18px;
  height: 18px;
  font-size: 0;
  line-height: 0;
  /* Negative margins so the 18px box doesn't make the button taller than its text line. */
  margin-top: -4px;
  margin-bottom: -4px;
  vertical-align: middle;
  top: -1px;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 18l6-6M13 6l6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

.button-primary:hover .button-primary-arrow,
.button-primary:hover .link-arrow,
.button-primary:focus-visible .button-primary-arrow,
.button-secondary:hover .button-primary-arrow,
.button-secondary:focus-visible .button-primary-arrow {
  opacity: 1;
  transform: translate3d(4px, 0, .01px) !important;
}

/* Phones: Webflow turns the blog's newsletter button white (it sits on the purple band). */
@media screen and (max-width: 479px) {
  .button-primary.blog-newsletter {
    border-color: var(--neutral-100);
    background-image: linear-gradient(180deg, #fff 0%, #fbfcff 100%);
    box-shadow: inset 0 1px 0 #fff, 0 0 0 0 #ffffff00, 0 4px 12px #ffffff1f;
    color: var(--primary-1);
  }

  .button-primary.blog-newsletter::after {
    content: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .button-primary,
  .button-primary::after,
  .button-secondary,
  .button-primary .button-primary-arrow,
  .button-primary .link-arrow,
  .button-secondary .button-primary-arrow {
    transition: none;
  }
}

@media screen and (min-width: 992px) {
  .header .nav-menu {
    margin-left: auto;
  }
}

@media screen and (max-width: 991px) {
  .header .menu-button {
    box-shadow: 0 8px 22px var(--shadow-button-primary);
  }

  .header .nav-menu {
    box-shadow: 0 4px 10px #9333ea2e;
  }

  /* The phone menu: the links at a size worth a thumb, the CTA button under them. */
  .header .nav-item-wrapper {
    align-items: center;
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .header .nav-item-wrapper .nav-link {   /* outranks the type block's 15px nav size */
    font-size: 26px;
    line-height: 1.2;
    padding: 6px 0;
  }

  .header .nav-item-wrapper.mobile {
    margin-top: 20px;
  }

  /* Services and Industries fold their lists out under the item (site.js toggles
     .is-expanded); the round toggle sits beside the link, which still opens the page. */
  .header .nav-item-has-menu {
    flex-wrap: wrap;
  }

  .header .nav-item-has-menu > .nav-link .nav-link-caret {
    display: none;
  }

  .nav-link-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    margin-left: 10px;
    padding: 0;
    border: 1px solid var(--neutral-300);
    border-radius: 50%;
    background-color: var(--neutral-100);
    color: var(--neutral-800);
    cursor: pointer;
  }

  .nav-link-toggle .nav-link-caret {
    margin: 0;
    transform: translateY(-2px) rotate(45deg);
  }

  .nav-item-has-menu.is-expanded .nav-link-toggle {
    border-color: var(--primary-1);
    color: var(--primary-1);
  }

  .nav-item-has-menu.is-expanded .nav-link-toggle .nav-link-caret {
    transform: translateY(3px) rotate(225deg);
  }

  .nav-item-has-menu .mega-menu {
    display: none;
    flex-basis: 100%;
    width: 100%;
    padding: 10px 0 4px;
  }

  .nav-item-has-menu.is-expanded .mega-menu {
    display: block;
  }

  .mega-menu-panel {
    display: block;
  }

  .mega-menu-intro {
    display: none;
  }

  .mega-menu-grid {
    display: grid;
    gap: 2px;
  }

  .mega-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 0;
    color: var(--neutral-800);
    text-decoration: none;
  }

  .mega-menu-item-icon img {
    display: block;
    width: 40px;
    height: 40px;
  }

  .mega-menu-item-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.25;
  }

  .mega-menu-item-tagline {
    display: none;
  }

  .mega-menu-badge {
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: 999px;
    background-color: var(--primary-1);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    vertical-align: middle;
  }

  .mega-menu-all {
    display: inline-flex;
    align-items: center;
    margin-top: 10px;
    padding: 6px 0;
    color: var(--primary-1);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
  }
}

@media screen and (min-width: 992px) {
  .nav-link-toggle {
    display: none;
  }
}

/* Footer, laid out after the BRIX footer in Enginuity's colours (v0.3.0) — replaces Webflow's
   footer (logo + tagline, newsletter, one "Company" row, contact tiles). Top row: logo, the
   main menu, a button; a divider with a round button that folds the columns away (<details>);
   columns: services (two columns), company, contact, newsletter; bottom row: copyright and
   legal links, tagline. Markup: resources/views/partials/footer.blade.php. */
.footer.footer-v2 {
  border-top: 0;
  background-color: var(--neutral-200);
  padding-top: 72px;
}

.footer-top-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px 40px;
}

.footer-v2 .footer-logo-container {
  flex: none;
  margin-bottom: 0;
}

.footer-v2 .footer-logo {
  width: 230px;
  margin-left: 0;
}

.footer-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 34px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-menu li,
.footer-column-list li {
  margin: 0;
}

.footer-menu-link,
.footer-column-link,
.footer-legal-link {
  color: var(--neutral-700);   /* --neutral-600 is 4.4:1 on the footer's grey; this is 8.9:1 */
  text-decoration: none;
  transition: color .3s;
  padding-block: 4px;          /* v0.26.4: a 24px+ tap target (WCAG 2.2) without moving anything */
  margin-block: -4px;
}

.footer-menu-link {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.125em;
}

.footer-menu-link:hover,
.footer-column-link:hover,
.footer-legal-link:hover {
  color: var(--primary-1);
}

.footer-top-cta {
  display: flex;
  flex: none;
  align-items: center;
  gap: 16px;
}

.footer-invitation {
  margin: 0;
  color: var(--neutral-600);
  font-size: 16px;
  line-height: 1.25em;
}

.footer-v2 .footer-button {
  flex: none;
}

.footer-sitemap {
  margin-top: 56px;
  border-top: 1px solid var(--neutral-400);
}

.footer-sitemap-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -22px auto 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--neutral-400);
  border-radius: 50%;
  background-color: var(--neutral-100);
  box-shadow: 0 2px 6px var(--shadow-1);
  list-style: none;
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s;
}

.footer-sitemap-toggle:hover {
  border-color: var(--primary-1);
  box-shadow: 0 4px 12px var(--shadow-button-primary);
}

.footer-sitemap-toggle:focus-visible {
  outline: 2px solid var(--primary-1);
  outline-offset: 3px;
}

/* A minus while the columns are open; the second bar turns to make a plus once they fold
   (.is-closed, set by the Alpine component as the fold starts). */
.footer-sitemap-toggle-icon {
  position: relative;
  width: 16px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--neutral-800);
  transition: background-color .3s;
}

.footer-sitemap-toggle-icon::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: inherit;
  transform: rotate(90deg);
  transition: transform .3s;
}

.footer-sitemap:not(.is-closed) .footer-sitemap-toggle-icon::after {
  transform: rotate(0deg);
}

.footer-sitemap-toggle:hover .footer-sitemap-toggle-icon {
  background-color: var(--primary-1);
}

.footer-columns {
  display: flex;
  align-items: flex-start;
  gap: 40px 56px;
  padding-top: 56px;
  padding-bottom: 64px;
  /* The line above the bottom row belongs to the columns, so it folds away with them. */
  border-bottom: 1px solid var(--neutral-400);
}

/* The link lists take their natural width (two columns each, filled column by column); the
   aside — contact details over the newsletter — takes what is left. */
.footer-column {
  flex: 0 1 auto;
  min-width: 0;
}

.footer-column.footer-aside {
  display: grid;
  flex: 1 1 260px;
  align-content: start;
  gap: 36px;
  min-width: 260px;
  max-width: 340px;
  margin-left: auto;
}

.footer-column-title {
  margin-top: 0;
  margin-bottom: 26px;
  color: var(--neutral-800);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.footer-column-list {
  display: grid;
  gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Filled column by column, like the design: --rows is half the number of services. */
.footer-column-list.two-columns {
  grid-template-rows: repeat(var(--rows), auto);
  grid-auto-flow: column;
  justify-content: start;
  column-gap: 40px;
}

.footer-column-link {
  font-size: 15px;
  line-height: 1.3em;
  white-space: nowrap;
}

.footer-column-link.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}

.footer-column-icon {
  flex: none;
  width: 32px;
  height: 32px;
  border-radius: 10px;
}

.footer-aside .footer-column-title {
  margin-bottom: 18px;
}

.footer-v2 .footer-newsletter-form {
  flex-direction: column;
  align-items: stretch;
}

.footer-v2 .input.footer-newsletter {
  min-height: 60px;
  margin-bottom: 0;
  padding-left: 24px;
  padding-right: 24px;
}

.footer-v2 .button-primary.footer-newsletter {
  position: static;
  margin-top: 12px;
}

.footer-v2 .footer-bottom {
  gap: 12px 32px;
  padding-top: 28px;
}

.footer-bottom-left {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.footer-legal {
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-legal li {
  margin: 0;
}

.footer-legal li::before {
  content: "|";
  margin: 0 10px;
}

.footer-v2 .footer-small-print,
.footer-legal-link {
  font-size: 16px;
  line-height: 1.4em;
}

@media screen and (max-width: 991px) {
  .footer.footer-v2 {
    padding-top: 64px;
  }

  .footer-top-row {
    flex-wrap: wrap;
  }

  .footer-menu {
    order: 3;
    justify-content: flex-start;
    width: 100%;
  }

  .footer-v2 .footer-logo {
    width: 198px;
  }

  .footer-sitemap {
    margin-top: 48px;
  }

  .footer-columns {
    flex-wrap: wrap;
    justify-content: flex-start;
    column-gap: 64px;
  }

  .footer-column.footer-aside {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 64px;
    max-width: none;
    margin-left: 0;
  }

  .footer-aside-block.newsletter {
    max-width: 380px;
  }

  .footer-v2 .footer-bottom {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 767px) {
  .footer-top-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .footer-v2 .footer-logo {
    width: 180px;
  }

  .footer-menu {
    order: 0;
    gap: 12px 24px;
  }

  .footer-columns {
    padding-top: 48px;
    padding-bottom: 48px;
    row-gap: 40px;
  }

  .footer-column.services,
  .footer-column.industries {
    flex-basis: 100%;
  }

  .footer-column.footer-aside {
    grid-template-columns: minmax(0, 1fr);
  }

  .footer-column-link {
    white-space: normal;
  }

  /* The legal links get their own line, separated only from each other. */
  .footer-bottom-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .footer-legal li:first-child::before {
    content: none;
  }
}

@media screen and (max-width: 479px) {
  .footer-v2 .footer-button {
    align-self: stretch;
  }

  .footer-column-list.two-columns {          /* still two across, so the lists stay short; long names wrap */
    grid-template-rows: none;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-auto-flow: row;
    column-gap: 20px;
  }

  .footer-v2 .footer-small-print,
  .footer-legal-link {
    font-size: 14px;
  }
}

/* ---------------------------------------------------------------------------------------
   BRIX styling pass (v0.5.0) — measured on brixagency.com, in Enginuity's palette. Webflow's
   design stays the structure; these rules bring its proportions in line with the reference:
   a narrower container, a tighter vertical rhythm, smaller card corners with a fainter edge,
   uppercase eyebrows and lighter dividers.
   --------------------------------------------------------------------------------------- */

/* Container: 1228px, as BRIX (Webflow: 1290px). */
.container-default {
  max-width: 1228px;
}

@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;   /* v1.0.2: preloaded; a late font no longer shifts the page (service pages, CLS 0.12-0.15) */
  src: url('/fonts/figtree/figtree-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 300 700;
  font-display: optional;   /* v1.0.2: preloaded; a late font no longer shifts the page (service pages, CLS 0.12-0.15) */
  src: url('/fonts/figtree/figtree-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Type (v0.12.0) — BRIX's, measured off brixagency.com: Figtree (Google Fonts, OFL, self-hosted
   above as a variable font, 300–700), body 16px / 1.5 at weight 500 with no letter-spacing,
   headings 700 with no letter-spacing, display 58px down to 32px on phones, section titles
   42 → 28, card titles 24/34, nav links 15px, buttons 16px bold. Below desktop the steps are
   BRIX's own breakpoint values. The design brief's ranges (hero 56–72, body 17–18) are
   overridden here on purpose. */
body,
input,
button,
select,
textarea {
  font-family: Figtree, sans-serif;
}

body {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5em;
  letter-spacing: 0;
}

h1, h2, h3, h4, h5, h6 {
  letter-spacing: 0;
}

h1 {
  font-size: 58px;
  line-height: 1.2em;
}

h2 {
  font-size: 42px;
  line-height: 1.2em;
}

h3 {
  font-size: 24px;
  line-height: 34px;
}

h4 {
  font-size: 24px;
  line-height: 34px;
}

.header .nav-link {
  font-size: 15px;
  line-height: 1.1em;
}

.text-link,
.list-text,
.card-service-v2-list-wrapper div {
  font-size: 16px;
}

@media screen and (max-width: 991px) {
  h1 { font-size: 46px; line-height: 56px; }
  h2 { font-size: 40px; line-height: 50px; }
  h3, h4 { font-size: 22px; line-height: 32px; }
}

@media screen and (max-width: 767px) {
  body { line-height: 1.45em; }
  h1 { font-size: 36px; line-height: 46px; }
  h2 { font-size: 30px; line-height: 40px; }
  h3, h4 { font-size: 20px; line-height: 30px; }
}

@media screen and (max-width: 479px) {
  body { font-size: 14px; line-height: 1.55em; }
  h1 { font-size: 32px; line-height: 42px; }
  h2 { font-size: 28px; line-height: 38px; }
}

/* Eyebrows above headings: uppercase and letter-spaced, in the brand purple (BRIX's are
   uppercase in their brand red). */
.subtitle-wrapper > div:not(.subtitle-shape) {
  color: var(--primary-1);
  font-size: 16px;
  letter-spacing: .06em;
  text-transform: uppercase;
}

/* Cards: 24px corners, a faint edge and a soft shadow instead of Webflow's 28–50px corners. */
.card {
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
  box-shadow: 0 2px 14px 0 #14142b0f;
}

/* Dividers a step lighter. */
.divider {
  background-color: var(--neutral-300);
}

/* Section spacing — generated by `npm run brix:spacing` (scripts/scale-section-spacing.mjs):
   every Webflow section padding scaled by 0.6, so the base section lands on BRIX's 120px. */
.section {
  padding-top: 120px;
  padding-bottom: 120px;
}

.section.home-hero {
  padding-top: 51px;
}

.section.home-companies {
  padding-top: 0;
  padding-bottom: 0;
}

.section.home-services {
  padding-top: 144px;
  padding-bottom: 96px;
}

.section.home-advantage {
  padding-bottom: 144px;
}

.section.home-about {
  padding-top: 144px;
  padding-bottom: 144px;
}

.section.home-process, .section.home-testimonials {
  padding-top: 144px;
  padding-bottom: 144px;
}

.section.home-contact {
  padding-top: 96px;
  padding-bottom: 89px;
}

.section.about-hero {
  padding-top: 49px;
  padding-bottom: 72px;
}

.section.blog-post-newsletter {
  padding-top: 0;
  padding-bottom: 0;
}

.section.blog-post-latest-articles-section {
  padding-top: 117px;
  padding-bottom: 114px;
}

.section.blog-post {
  padding-top: 22px;
  padding-bottom: 84px;
}

.section.services-v2 {
  padding-top: 58px;
}

.section.service-hero {
  padding-top: 78px;
  padding-bottom: 144px;
}

.section.service-contact {
  padding-top: 90px;
  padding-bottom: 90px;
}

.section.team {
  padding-top: 40px;
}

.section.case-study-hero {
  padding-top: 58px;
  padding-bottom: 0;
}

.section.case-study-cta {
  padding-top: 0;
  padding-bottom: 0;
}

.section.more-case-studies {
  padding-top: 94px;
  padding-bottom: 94px;
}

.section.career {
  padding-top: 57px;
}

.section.contact {
  padding-top: 57px;
  padding-bottom: 143px;
}

.section.faqs {
  padding-bottom: 118px;
}

.section.blog-category {
  padding-top: 58px;
  padding-bottom: 96px;
}

.section.case-study {
  padding-top: 72px;
}

@media screen and (max-width: 991px) {
  .section {
    padding-top: 96px;
    padding-bottom: 96px;
  }
  
  .section.home-hero {
    padding-top: 41px;
    padding-bottom: 77px;
  }
  
  .section.home-services {
    padding-top: 115px;
    padding-bottom: 77px;
  }
  
  .section.home-advantage {
    padding-top: 77px;
    padding-bottom: 115px;
  }
  
  .section.home-about, .section.home-process, .section.home-testimonials {
    padding-top: 115px;
    padding-bottom: 115px;
  }
  
  .section.home-contact {
    padding-top: 77px;
    padding-bottom: 71px;
  }
  
  .section.about-hero {
    padding-top: 39px;
    padding-bottom: 58px;
  }
  
  .section.blog-post-latest-articles-section {
    padding-top: 94px;
    padding-bottom: 91px;
  }
  
  .section.blog-post {
    padding-bottom: 67px;
  }
  
  .section.services-v2 {
    padding-top: 46px;
  }
  
  .section.service-hero {
    padding-top: 62px;
    padding-bottom: 62px;
  }
  
  .section.service-contact {
    padding-top: 72px;
    padding-bottom: 72px;
  }
  
  .section.team {
    padding-top: 32px;
  }
  
  .section.case-study-hero {
    padding-top: 46px;
  }
  
  .section.more-case-studies {
    padding-top: 75px;
    padding-bottom: 75px;
  }
  
  .section.career {
    padding-top: 46px;
  }
  
  .section.contact {
    padding-top: 46px;
    padding-bottom: 115px;
  }
  
  .section.faqs {
    padding-bottom: 94px;
  }
  
  .section.blog-category {
    padding-top: 46px;
    padding-bottom: 77px;
  }
}

@media screen and (max-width: 767px) {
  .section {
    padding-top: 77px;
    padding-bottom: 77px;
  }
  
  .section.home-hero {
    padding-top: 32px;
    padding-bottom: 61px;
  }
  
  .section.home-services {
    padding-top: 92px;
    padding-bottom: 61px;
  }
  
  .section.home-advantage {
    padding-top: 61px;
    padding-bottom: 92px;
  }
  
  .section.home-about, .section.home-process, .section.home-testimonials {
    padding-top: 92px;
    padding-bottom: 92px;
  }
  
  .section.home-contact {
    padding-top: 61px;
    padding-bottom: 56px;
  }
  
  .section.about-hero {
    padding-top: 31px;
    padding-bottom: 46px;
  }
  
  .section.blog-post-latest-articles-section {
    padding-top: 75px;
    padding-bottom: 73px;
  }
  
  .section.blog-post {
    padding-top: 18px;
    padding-bottom: 54px;
  }
  
  .section.services-v2 {
    padding-top: 37px;
  }
  
  .section.service-hero {
    padding-top: 50px;
    padding-bottom: 50px;
  }
  
  .section.service-contact {
    padding-top: 58px;
    padding-bottom: 58px;
  }
  
  .section.team {
    padding-top: 25px;
  }
  
  .section.case-study-hero {
    padding-top: 37px;
  }
  
  .section.more-case-studies {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .section.career {
    padding-top: 37px;
  }
  
  .section.contact {
    padding-top: 37px;
    padding-bottom: 92px;
  }
  
  .section.faqs {
    padding-bottom: 75px;
  }
  
  .section.blog-category {
    padding-top: 37px;
    padding-bottom: 61px;
  }
}

@media screen and (max-width: 479px) {
  .section {
    padding-top: 60px;
    padding-bottom: 60px;
  }
  
  .section.home-hero {
    padding-top: 26px;
    padding-bottom: 49px;
  }
  
  .section.home-services {
    padding-top: 74px;
    padding-bottom: 49px;
  }
  
  .section.home-advantage {
    padding-top: 49px;
    padding-bottom: 74px;
  }
  
  .section.home-about, .section.home-process, .section.home-testimonials {
    padding-top: 74px;
    padding-bottom: 74px;
  }
  
  .section.home-contact {
    padding-top: 49px;
    padding-bottom: 46px;
  }
  
  .section.about-hero {
    padding-top: 25px;
    padding-bottom: 37px;
  }
  
  .section.blog-post-latest-articles-section {
    padding-top: 60px;
    padding-bottom: 58px;
  }
  
  .section.blog-post {
    padding-bottom: 43px;
  }
  
  .section.services-v2 {
    padding-top: 29px;
  }
  
  .section.service-hero {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  
  .section.service-contact {
    padding-top: 46px;
    padding-bottom: 46px;
  }
  
  .section.team {
    padding-top: 24px;
  }
  
  .section.case-study-hero {
    padding-top: 29px;
  }
  
  .section.more-case-studies {
    padding-top: 48px;
    padding-bottom: 48px;
  }
  
  .section.career {
    padding-top: 29px;
  }
  
  .section.contact {
    padding-top: 29px;
    padding-bottom: 73px;
  }
  
  .section.faqs {
    padding-bottom: 60px;
  }
  
  .section.blog-category {
    padding-top: 29px;
    padding-bottom: 49px;
  }
}

/* Service hero — the service's illustration (Illustration field) stands in for the template's
   two stacked images. The background shape and its interaction stay as they were. */
.service-hero-images-wrapper-illustration {
  display: flex;
  justify-content: center;
  align-items: center;
}
.image.service-hero-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 640px;
  height: auto;
}

/* Quote form (v0.12.0) — names and phone/email share rows; company, website, the service
   dropdown and the budget slider take the full width. Boxes keep the template's pill look. */
.contact-form .contact-form-full,
.contact-form .budget-field {
  grid-column: 1 / -1;
}

select.input {
  -webkit-appearance: none;
  appearance: none;
  height: auto;
  padding-right: 60px;
  background-color: var(--neutral-100);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%239333EA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 28px center;
  background-size: 14px 9px;
  cursor: pointer;
}

select.input.is-placeholder {
  color: var(--neutral-600);
}

select.input option {
  color: var(--neutral-800);
}

.budget-field {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  min-height: 66px;
  padding: 14px 21px 16px;   /* the inputs' own side padding, so the label lines up with their text */
  border: 1px solid var(--neutral-300);
  border-radius: 33px;
  background-color: var(--neutral-100);
  box-shadow: 0 2px 6px 0 var(--shadow-input);
}

.budget-field-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 18px;
  letter-spacing: .02em;
}

.budget-field-label {
  margin: 0;
  color: var(--neutral-600);
  font-weight: 400;
}

.budget-field-value {
  color: var(--primary-1);
  font-weight: 700;
}

.budget-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 26px;   /* v0.26.4: 24px+ tap target */
  margin: 0;
  background: transparent;
  cursor: pointer;
  --budget-fill: 21%;
}

.budget-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--primary-1) var(--budget-fill), var(--neutral-300) 0);
}

.budget-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary-1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-1) 40%, transparent);
}

.budget-range::-moz-range-track {
  height: 6px;
  border-radius: 3px;
  background: var(--neutral-300);
}

.budget-range::-moz-range-progress {
  height: 6px;
  border-radius: 3px;
  background: var(--primary-1);
}

.budget-range::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--primary-1);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--primary-1) 40%, transparent);
}

.budget-range:focus-visible {
  outline: 2px solid var(--primary-1);
  outline-offset: 4px;
  border-radius: 4px;
}

/* A short tag beside a card title ("New"), set per card in the CP. */
.card-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 3px 10px 4px;
  border-radius: 999px;
  background-color: var(--primary-1);
  color: var(--neutral-100);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

/* Home hero — the illustration (Illustration field) in place of the template's team scene. */
.home-hero-images-wrapper-illustration {
  align-items: center;
  justify-content: center;
}
@media screen and (min-width: 992px) {
  .home-hero-images-wrapper-illustration {
    max-width: 58%; /* v0.21.1: a touch wider than Webflow's 54% for the Figma hero (desktop only) */
  }
}
.image.home-hero-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Clients — a marquee of logo tiles across the page instead of the template's three-up
   slider. Tiles are white with the site's card shadow; logos sit grey until hovered. The strip
   pauses on hover; with reduced motion it becomes a centred wrap. */
.home-companies-wrapper-marquee {
  display: block;
  padding: 72px 0 64px;
  border-radius: 0;
  background-color: transparent;
  box-shadow: none;
}
.home-companies-wrapper-marquee .paragraph.home-companies {
  max-width: none;
  margin: 0 0 36px;
  color: var(--neutral-600);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.home-companies .home-companies-shape {
  display: none;
}
/* No background under the strip: the page is white behind it anyway, and a background here
   (the template splits this section white over grey) would paint over the hero's glow, which
   sits behind everything and fades out through the strip (v0.14.1). */
.section.home-companies {
  background-color: transparent;
  background-image: none;
  padding-top: 0;
  padding-bottom: 0;
}
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
  animation: logo-marquee 48s linear infinite;
}
.logo-marquee:hover .logo-marquee-track {
  animation-play-state: paused;
}
.logo-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 104px;
  padding: 0 40px;
  margin-right: 24px;
  border: 1px solid var(--neutral-300);
  border-radius: 24px;
  background-color: var(--neutral-100);
  box-shadow: 0 2px 14px 0 rgba(20, 20, 43, .06);
}
.logo-tile img {
  /* A definite height: an SVG logo with only a viewBox has no intrinsic width, and in a
     max-content track with max-height alone it collapses to nothing. */
  display: block;
  height: 48px;
  width: auto;
  max-width: 170px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: .72;
  transition: filter 300ms cubic-bezier(.2, .8, .2, 1), opacity 300ms cubic-bezier(.2, .8, .2, 1);
}
.logo-tile:hover img {
  filter: none;
  opacity: 1;
}
/* v0.22.0: a light or hairline logo (the client's "Darken in the logo strip" toggle) turns
   almost white in plain grey — darken it to the same weight as its neighbours. */
.logo-tile-darken img {
  filter: grayscale(1) brightness(.42) contrast(1.35);
  opacity: .9;
}
.logo-tile-darken:hover img {
  filter: none;
}
@keyframes logo-marquee {
  to { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee { -webkit-mask-image: none; mask-image: none; }
  .logo-marquee-track { width: auto; flex-wrap: wrap; justify-content: center; row-gap: 24px; animation: none; }
  .logo-tile[aria-hidden="true"] { display: none; }
}

/* The input icons (person, phone, envelope, building) sit a fixed 22px from the right edge —
   the template places them at 90% of the box, which drifts inward on a full-width box. The
   focus rules re-declare the position, so they are covered too. */
.input.name, .input.name:focus,
.input.email, .input.email:focus,
.input.phone, .input.phone:focus,
.input.company, .input.company:focus {
  background-position: right 22px center;
}
select.input {
  background-position: right 22px center;
}

/* Home "why us" and "about" — one illustration each (Illustration fields), like the hero. */
.home-section-illustration-wrapper {
  align-items: center;
  justify-content: center;
}
.image.home-section-illustration {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
}

/* Testimonials (v0.13.1) — quote cards in a scroll-snap carousel, three across; arrows and
   dots from the Alpine component. Beside a title (service and industry pages) the same cards
   stack in one column without the controls. */
.testimonial-slider {
  --testimonial-gap: 24px;
  --testimonial-per-view: 3;
  margin-bottom: 56px;
}
.home-testimonials .testimonial-slider {
  margin-top: 48px;   /* the template's title had no room below it; its slider carried its own */
}
.testimonial-track {
  display: flex;
  gap: var(--testimonial-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scroll-padding-inline: 4px;   /* v0.26.2: no 4px snap on load (Chrome counts it as a scroll and stops LCP) */
  padding: 8px 4px 24px;
  margin: -8px -4px 0;
  scrollbar-width: none;
}
.testimonial-track::-webkit-scrollbar { display: none; }
.testimonial-card {
  flex: 0 0 calc((100% - var(--testimonial-gap) * (var(--testimonial-per-view) - 1)) / var(--testimonial-per-view));
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 0;
  scroll-snap-align: start;
  text-align: left;   /* the home section centres its text */
  padding: 32px 32px 28px;
  border: 1px solid var(--neutral-300);
  border-radius: 28px;
  background: linear-gradient(180deg, #FFFFFF 0%, var(--surface-glow) 100%);
  box-shadow: 0 2px 14px 0 rgba(20, 20, 43, .06);
  transition: box-shadow 300ms cubic-bezier(.2, .8, .2, 1), transform 300ms cubic-bezier(.2, .8, .2, 1);
}
.testimonial-card:hover {
  box-shadow: 0 18px 40px rgba(20, 20, 43, .10);
  transform: translate3d(0, -3px, 0);
}
.testimonial-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.testimonial-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  padding: 0 10px; /* v0.19.1: was 16px — square marks sat in a pill that was mostly padding */
  border: 1px solid var(--line-1);
  border-radius: 16px;
  background-color: var(--surface-2);
}
.testimonial-logo img {
  display: block;
  height: 40px; /* v0.19.1: was 32px; wide marks are still capped by max-width and letterbox inside */
  width: auto;
  max-width: 132px;
  object-fit: contain;
}
.testimonial-logo:has(img[src=""]) { display: none; }
.testimonial-quote-mark {
  flex: none;
  width: 36px;
  height: 27px;
  fill: var(--tint-primary);
}
.testimonial-lead {
  margin: 4px 0 0;
  color: var(--neutral-800);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.3;
}
.testimonial-quote {
  /* Webflow's global blockquote (a blue bar, heavy padding, a card shadow) must not apply. */
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  box-shadow: none;
  font-size: 16px;
  line-height: 1.65;
}
.testimonial-quote p {
  margin: 0;
  color: var(--neutral-600);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.65;
}
.testimonial-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: auto;
  text-align: left;   /* Webflow centres every figcaption */
  padding-top: 20px;
  border-top: 1px solid var(--neutral-300);
}
.testimonial-avatar {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-1) 0%, #F7409D 100%);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
}
.testimonial-name {
  display: block;
  color: var(--neutral-800);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
}
.testimonial-role {
  display: block;
  color: var(--primary-1);
  font-size: 14px;
  line-height: 1.35;
}
.testimonial-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-top: 4px;
}
.testimonial-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--neutral-300);
  border-radius: 50%;
  background-color: var(--neutral-100);
  color: var(--neutral-800);
  font-family: 'Icons Marketing Template', sans-serif;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  transition: border-color .3s, box-shadow .3s, color .3s, opacity .3s;
}
.testimonial-arrow:hover {
  border-color: var(--primary-1);
  color: var(--primary-1);
  box-shadow: 0 4px 12px var(--shadow-button-primary);
}
.testimonial-arrow:disabled {
  opacity: .35;
  cursor: default;
  box-shadow: none;
  border-color: var(--neutral-300);
  color: var(--neutral-800);
}
.testimonial-dots {
  display: flex;
  gap: 8px;
}
.testimonial-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--neutral-400);
  cursor: pointer;
  transition: background-color .3s, transform .3s;
}
.testimonial-dot.is-active {
  background-color: var(--primary-1);
  transform: scale(1.25);
}
[x-cloak] { display: none !important; }
.testimonial-slider-stacked {
  margin-bottom: 0;
}
.testimonial-slider-stacked .testimonial-track {
  flex-direction: column;
  overflow: visible;
  scroll-snap-type: none;
  padding: 0;
  margin: 0;
}
.testimonial-slider-stacked .testimonial-card {
  flex: none;
}
@media screen and (max-width: 991px) {
  .testimonial-slider { --testimonial-per-view: 2; }
}
@media screen and (max-width: 767px) {
  .testimonial-slider { --testimonial-per-view: 1; --testimonial-gap: 16px; }
  .testimonial-card { flex-basis: 86%; padding: 26px 24px 22px; }
  .testimonial-lead { font-size: 19px; }
}
@media (prefers-reduced-motion: reduce) {
  .testimonial-track { scroll-behavior: auto; }
  .testimonial-card { transition: none; }
}

/* List ticks are the rendered disc (icons/check-list.svg): a little larger than the template's
   30px glyph, and without the template's coloured halo. */
.image.list-icon,
.image.list-icon.red-shadow,
.image.list-icon.purple-shadow,
.image.list-icon.yellow-shadow {
  width: 36px;
  min-width: 36px;
  min-height: 36px;
  border-radius: 0;
  box-shadow: none;
}

/* Process cards — the step's scene has a transparent background, so the wrapper drops the
   template's clipping radius and lets the scene's own shadows show. */
.image-wrapper.home-process.image-wrapper-home-process-scene {
  border-radius: 0;
  overflow: visible;
}


/* Header entrance (v0.12.0) — BRIX's: each item starts faded, blurred and 20px low, and eases
   in over 620ms, 70ms after the one before (`--reveal` is its place in the row). Only the
   desktop row animates; the phone menu is closed at load. */
@media screen and (min-width: 992px) {
  .header .brand,
  .header .nav-link,
  .header .header-button {
    animation: header-reveal 620ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--reveal, 0) * 70ms);
  }
}
@keyframes header-reveal {
  from { opacity: 0; filter: blur(10px); transform: translate3d(0, 20px, 0); }
  to   { opacity: 1; filter: blur(0);    transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .header .brand, .header .nav-link, .header .header-button { animation: none; }
}

/* Services mega-menu (v0.12.0) — a panel under the header: a card linking to the Services
   page, and every live service with its thumbnail and tagline. Opens on hover and on focus
   (site.js sets `is-open`); below 992px the item is a plain link. */
.nav-link-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-left: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
}
@media screen and (min-width: 992px) {
  .nav-item-has-menu.is-open .nav-link-caret {
    transform: translateY(1px) rotate(225deg);
  }
}
.mega-menu {
  display: none;
}
@media screen and (min-width: 992px) {
  .header .header-wrapper {
    position: relative;
  }
  .header .nav-item-has-menu {
    position: static;
  }
  .header .nav-item-has-menu .nav-link::before {   /* keep the pill on while the panel is open */
    transition-delay: 0s;
  }
  .header .nav-item-has-menu.is-open .nav-link::before {
    opacity: 1;
    transform: none;
  }
  .mega-menu {
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    z-index: 20;
    padding-top: 18px;                   /* a bridge, so the pointer can travel down into it */
    opacity: 0;
    visibility: hidden;
    transform: translate3d(0, 8px, 0);
    transition: opacity 220ms cubic-bezier(.2, .8, .2, 1), transform 220ms cubic-bezier(.2, .8, .2, 1), visibility 0s linear 220ms;
  }
  .nav-item-has-menu.is-open .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  .mega-menu-panel {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 24px;
    padding: 24px;
    border: 1px solid var(--neutral-300);
    border-radius: 28px;
    background-color: var(--neutral-100);
    box-shadow: 0 24px 64px rgba(20, 20, 43, .14), 0 2px 14px rgba(20, 20, 43, .06);
  }
  .mega-menu-panel::before {              /* the little pointer under the link */
    content: "";
    position: absolute;
    top: 10px;
    left: var(--pointer-left, 50%);
    width: 16px;
    height: 16px;
    border-left: 1px solid var(--neutral-300);
    border-top: 1px solid var(--neutral-300);
    border-radius: 3px 0 0 0;
    background-color: var(--neutral-100);
    transform: translateX(-50%) rotate(45deg);
  }
  .mega-menu-intro {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
    min-height: 220px;
    padding: 28px;
    border: 1px solid var(--neutral-300);
    border-radius: 22px;
    background: linear-gradient(180deg, #fff 0%, var(--neutral-200) 100%);
    color: var(--neutral-800);
    text-decoration: none;
    transition: box-shadow 240ms cubic-bezier(.2, .8, .2, 1), transform 240ms cubic-bezier(.2, .8, .2, 1);
  }
  .mega-menu-intro:hover,
  .mega-menu-intro:focus-visible {
    box-shadow: 0 10px 28px rgba(20, 20, 43, .1);
    transform: translate3d(0, -2px, 0);
    outline: 0;
  }
  .mega-menu-intro-arrow {
    position: absolute;
    top: 22px;
    right: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--neutral-300);
    border-radius: 50%;
    background-color: var(--neutral-100);
    color: var(--primary-1);
    font-family: Icons Marketing Template, sans-serif;   /* the site's own arrow glyph, as .text-link-arrow uses */
    font-size: 14px;
  }
  .mega-menu-intro-title {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
  }
  .mega-menu-intro-text {
    color: var(--neutral-600);
    font-size: 15px;
    line-height: 1.5;
  }
  .mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 4px 16px;
    align-content: start;
  }
  .mega-menu-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 10px 12px;
    border-radius: 16px;
    color: var(--neutral-800);
    text-decoration: none;
    transition: background-color 200ms cubic-bezier(.2, .8, .2, 1);
  }
  .mega-menu-item:hover,
  .mega-menu-item:focus-visible {
    background-color: var(--neutral-200);
    outline: 0;
  }
  .mega-menu-item-icon {
    flex: none;
    width: 52px;
    height: 52px;
  }
  .mega-menu-item-icon img {
    display: block;
    width: 100%;
    height: 100%;
  }
  .mega-menu-item-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .mega-menu-item-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.25;
  }
  .mega-menu-item-tagline {
    color: var(--neutral-600);
    font-size: 14px;
    line-height: 1.35;
  }
  .mega-menu-badge {
    display: inline-block;
    vertical-align: middle;
    margin-left: 6px;
    padding: 2px 8px 3px;
    border-radius: 999px;
    background-color: var(--primary-1);
    color: var(--neutral-100);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    line-height: 1.2;
    text-transform: uppercase;
  }
  .mega-menu-all {
    grid-column: 1 / -1;
    justify-self: start;
    margin: 8px 12px 4px;
    color: var(--primary-1);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .mega-menu-all .button-primary-arrow {
    display: inline-block;
    transition: transform 240ms cubic-bezier(.2, .8, .2, 1);
  }
  .mega-menu-all:hover .button-primary-arrow {
    transform: translate3d(4px, 0, 0);
  }
}

/* Home services — pinned horizontal scroll (v0.12.0). The section grows to
   100vh + the row's overflow (site.js sets --scroll-amount); the camera sticks to the top for
   that distance while the track slides left, on phones too (the small viewport unit keeps the
   camera inside the screen while the browser chrome is showing). Cards share one height, the
   link at the bottom. Reduced motion gets a plain horizontal scroller instead. */
.section.home-services-pinned {
  padding: 0;
  overflow: visible;                       /* the template's overflow:hidden would break sticky */
}
.horizontal-track-wrapper {
  margin-top: 56px;
}
.horizontal-track {
  display: flex;
  align-items: stretch;
  gap: 28px;
  will-change: transform;
}
.horizontal-track .card.service-slide {
  flex: none;
  display: flex;
  flex-direction: column;
  width: 520px;
  max-width: 82vw;
  padding: 40px;
}
.horizontal-track .card-service-slide-content {
  display: flex;
  flex-direction: column;
  flex: 1;
  max-width: none;
}
.horizontal-track .card-service-slide-content .text-link {
  margin-top: auto;
  padding-top: 20px;
}
@media (prefers-reduced-motion: no-preference) {
  .section.home-services-pinned {
    height: calc(100vh + var(--scroll-amount, 0px));
    height: calc(100svh + var(--scroll-amount, 0px));
  }
  .horizontal-camera {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    height: 100svh;
    overflow: hidden;
  }
  .horizontal-camera > .container-default {
    flex: 0 0 auto;                        /* the template grows containers; this one must not fill the camera */
    width: 100%;                           /* its auto margins would otherwise size it to the track */
  }
  .horizontal-track {
    transform: translate3d(calc(var(--progress, 0) * var(--scroll-amount, 0px) * -1), 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .section.home-services-pinned {
    padding: 100px 0;
  }
  .horizontal-track-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding: 8px 24px 32px;
    margin-left: -24px;
    margin-right: -24px;
    scrollbar-width: none;
  }
  .horizontal-track-wrapper::-webkit-scrollbar { display: none; }
  .horizontal-track .card.service-slide {
    scroll-snap-align: start;
  }
}
@media screen and (max-width: 767px) {
  .horizontal-track-wrapper {
    margin-top: 32px;
  }
  .horizontal-track {
    gap: 16px;
  }
  .horizontal-track .card.service-slide {
    max-width: calc(100vw - 48px);
    padding: 28px;
  }
}

/* Services page — every card in a row the same height, the link at the bottom. */
.services-v2-grid .w-dyn-item {
  display: flex;
}
.services-v2-grid .card.service-v2 {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.services-v2-grid .card-service-v2-content {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.services-v2-grid .card-service-v2-link {
  margin-top: auto;
  padding-top: 24px;
}

/* Industry pages (v0.12.0). The listing's intro paragraph; a service grid under a heading; the
   clients we work with as a centred row of logo tiles (the home page's tiles, in colour),
   with their testimonials underneath. */
.paragraph.industries-intro {
  max-width: 620px;
  margin: 18px auto 0;
  color: var(--neutral-600);
}
.section.industry-services {
  padding-bottom: 0;
}
.section.industry-services .services-v2-wrapper {
  margin-top: 8px;
}
@media screen and (min-width: 992px) {
  .industry-services .services-v2-grid {          /* four services read as one row, not three and an orphan */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    grid-column-gap: 24px;
  }
  .industry-services .services-v2-grid .card.service-v2 {
    padding: 32px 28px;
  }
}
.industry-clients-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px;
}
.industry-clients-row .logo-tile {
  margin-right: 0;
}
.industry-clients-row .logo-tile img {
  filter: none;
  opacity: 1;
}
.industry-clients .testimonial-grid {
  margin-top: 56px;
}
/* v0.23.1: room between the title, the logo row and the testimonials. The title wrapper had no
   bottom margin on desktop (100px on phones), and the testimonials became a slider, which the
   grid's top margin above no longer reached — the cards sat 8px inside the logo row. */
.industry-clients .services-section-title-wrapper {
  margin-bottom: 48px;
}
.industry-clients .industry-clients-row + .testimonial-slider {
  margin-top: 64px;
}
@media screen and (max-width: 767px) {
  .industry-clients .services-section-title-wrapper { margin-bottom: 32px; }
  .industry-clients .industry-clients-row + .testimonial-slider { margin-top: 48px; }
}

/* Illustrations as layer stacks (v0.13.0): the base, then each prop and chip, on one box
   (aspect-ratio from the scene). site.js moves the layers with GSAP — parallax on scroll,
   a lean towards the pointer — and this idle float keeps props and chips breathing. The
   float is on the <img>, GSAP's transforms on the layer, so they never fight. */
.illustration {
  position: relative;
  display: block;
  width: 100%;
}
.illustration-layer {
  position: absolute;
  inset: 0;
  will-change: transform;
}
.illustration-layer-base {
  position: relative;
}
.illustration-layer img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes illustration-float {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50% { transform: translate3d(0, -1.2%, 0); }
}
.illustration-layer-prop img,
.illustration-layer-chip img {
  animation: illustration-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite;
}
@media (prefers-reduced-motion: reduce) {
  .illustration-layer img { animation: none; }
}

/* Header over the hero (v0.13.2), and the heroes' rhythm (v0.14.0, tightened in v0.14.1).
   The header keeps its place in the flow but paints no background, and the two illustrated
   heroes start underneath it (pulled up by the header's height, which their top padding gets
   back). The heroes clip only sideways (overflow-x: clip keeps the 160%-wide rotating glow off
   the page's width); vertically they overflow, so the glow rises behind the menu and fades out
   under the next section instead of stopping dead at either edge. The glow images are
   transparent (scripts/recolour-template-art.py lifts the template's white paper off them),
   and sit at z-index -1: under the header (z-index 1000), under the hero's text and
   illustration, under whatever follows. --header-height is the header's rendered height per
   breakpoint: 28px above and below the 230px logo (65.75px tall), then 22px around the 54px
   round menu button, then 20px around the 48px one.
   Rhythm: the gap from the menu row down to the hero text (95px, the same on every page — see
   the block below) matches the gap from the buttons down to the next section's first line. The illustration wrappers lose
   the template's min-height (628/675px of air around a shorter illustration), a tall scene is
   capped at 440px so it doesn't push the text down (the stack's width follows its --aspect),
   and the section after a hero starts 80px in instead of its 120px. Below 992px the heroes
   stack and the template's paddings (62/50/40, home 41/32/26) stay on top; the bottom is
   24/16/8. */
:root {
  --header-height: 122px;
}
@media screen and (max-width: 767px) {
  :root { --header-height: 98px; }
}
@media screen and (max-width: 479px) {
  :root { --header-height: 88px; }
}
.header {
  background-color: transparent;
}
.section.home-hero,
.section.service-hero {
  margin-top: calc(-1 * var(--header-height));
  overflow: clip visible;
}
.bg.service-hero {
  z-index: -1;
}
/* The glow must sit under everything it reaches — the hero's words, the next section's words
   and cards — so its z-index -1 has to count in the page's own stacking context. The template
   gives the image wrappers `perspective: 1000px` for its tilting photos, which makes each a
   stacking context of its own and would carry the glow above the neighbours' text; our
   illustrations don't tilt, so the wrappers lose it. The template's decorative rotating white
   square in the industry "what we handle" section (`img.bg.service-process`) would then be the
   one thing painting over the haze, edge and all — it is invisible on that white section
   anyway, so it goes. */
.home-hero-images-wrapper-illustration,
.service-hero-images-wrapper-illustration {
  perspective: none;
}
.industry-needs .bg.service-process {
  display: none;
}
.home-hero-images-wrapper-illustration,
.service-hero-images-wrapper-illustration {
  min-height: 0;
}
@media screen and (min-width: 992px) {
  .illustration.service-hero-illustration {
    width: min(100%, calc(440px * var(--aspect, 1.6)));
  }
  img.service-hero-illustration {
    width: auto;
    max-width: 100%;
    max-height: 440px;
  }
}
.section.home-hero { padding-top: calc(57px + var(--header-height)); padding-bottom: 0; }
.section.service-hero { padding-top: calc(67px + var(--header-height)); padding-bottom: 0; }
.section.service-hero + .section { padding-top: 80px; }
/* One gap on every page (v0.14.1): 95px from the menu row to the first line — 28px of header
   padding plus 67px of section padding. The hero rows align their text to the top and centre
   the illustration on it (align-self), so a taller scene (Answer Engine Optimization,
   Artificial Intelligence) no longer pushes the text down; the contact page's text likewise
   sits at the top of its row rather than centred on the tall form. The listings
   (services-v2), About and Contact get the same 67px. Desktop only: below 992px the rows
   stack and the template's own spacing stays. */
@media screen and (min-width: 992px) {
  .home-hero-wrapper,
  .service-hero-wrapper,
  .contact-wrapper {
    align-items: flex-start;
  }
  .home-hero-images-wrapper,
  .service-hero-images-wrapper {
    align-self: center;
  }
  .section.home-hero { padding-top: calc(67px + var(--header-height)); }
  .section.services-v2 { padding-top: 67px; }
  .section.about-hero { padding-top: 52px; }   /* its subtitle sits 15px into the wrapper */
  .section.contact { padding-top: 67px; }
}
@media screen and (max-width: 991px) {
  .section.home-hero { padding-top: calc(41px + var(--header-height)); padding-bottom: 24px; }
  .section.service-hero { padding-top: calc(62px + var(--header-height)); padding-bottom: 24px; }
  .section.service-hero + .section { padding-top: 96px; }
}
@media screen and (max-width: 767px) {
  .section.home-hero { padding-top: calc(32px + var(--header-height)); padding-bottom: 16px; }
  .section.service-hero { padding-top: calc(50px + var(--header-height)); padding-bottom: 16px; }
  .section.service-hero + .section { padding-top: 77px; }
}
@media screen and (max-width: 479px) {
  .section.home-hero { padding-top: calc(26px + var(--header-height)); padding-bottom: 8px; }
  .section.service-hero { padding-top: calc(40px + var(--header-height)); padding-bottom: 8px; }
  .section.service-hero + .section { padding-top: 60px; }
}

/* Careers — the hero is a layered scene like the service heroes (v0.23.0, public/assets/careers/
   illustration.svg), and the perks' icons are Glass & Volume icons (public/images/perks) that
   bring their own panels, so no tile behind them. */
.image.careers-hero-image {
  width: 100%;
  max-width: 1040px;
  height: auto;
  display: block;
  margin: 0 auto;
}
.image.card-perk-icon {
  width: 112px;
  height: 112px;
  padding: 0;
  object-fit: contain;
  background: none;
}
@media screen and (max-width: 767px) {
  .image.careers-hero-image { max-width: 100%; }
}

/* ---------------------------------------------------------------------------
   Blog pages: template hover colour + related grid (v0.19.0)
   The Agencypro template's IX2 hover interactions live in webflow.js (read-only) and
   colour the author card's name and the post's author link the template's red
   (#FF3951) as inline styles. Override both states with !important — the mouse-out
   action writes the dark colour inline too — and hover in the brand purple instead.
   The related-articles grid had no row gap on desktop (Webflow only sets one on
   phones); match the column gap.
   --------------------------------------------------------------------------- */
.title.card-about-author-name,
.blog-post-author-link {
  color: var(--neutral-800) !important;
  transition: color .3s ease;
}

.card.about-author:hover .title.card-about-author-name,
.blog-post-author-link:hover {
  color: var(--primary-1) !important;
}

.blog-post-latest-articles-grid {
  grid-row-gap: 30px;
}

@media screen and (max-width: 991px) {
  .blog-post-latest-articles-grid {
    grid-row-gap: 20px;
  }
}

/* Service card icons (v0.20.1) — raster icons (PNG) carry their pixel size as width/height
   attributes; the tile's width rule alone left the attribute height in force and stretched
   them. Keep them proportional. */
.image-wrapper.card-service-v2 .image,
.image-wrapper.card-service-slide .image,
.image-wrapper.card-service-v2 img,
.image-wrapper.card-service-slide img {
  height: auto;
}

/* Vertical rhythm (v0.14.2). One scale for every section, after the generated BRIX spacing
   block scattered 0/80/89/90/96/120/143/144px paddings across the pages:
     --section-pad            120px  the standard section, top and bottom
     --section-pad-after-hero  96px  the section right after a hero — the hero's own bottom
                                     padding carries part of the space
     --hero-pad-bottom         80px  the illustrated heroes and the About hero, so the artwork
                                     never touches the next section's edge (grey or white)
     --home-hero-pad-bottom    32px  the home hero, whose logo strip is part of the hero
   Each steps down at the template's breakpoints in the same 0.8 / 0.64 / 0.5 ratios the
   spacing block uses. Heroes keep their top (67px under the header: the 95px menu gap).
   Two inner quirks go with it: the testimonial slider's 56px bottom margin (meant for the
   home page's button under it) is dropped where the slider ends a section, and the industry
   services grid gets the section's padding instead of its own 48px margin. */
:root {
  --section-pad: 120px;
  --section-pad-after-hero: 96px;
  --hero-pad-bottom: 80px;
  --home-hero-pad-bottom: 32px;
}
@media screen and (max-width: 991px) {
  :root { --section-pad: 96px; --section-pad-after-hero: 77px; --hero-pad-bottom: 64px; --home-hero-pad-bottom: 24px; }
}
@media screen and (max-width: 767px) {
  :root { --section-pad: 77px; --section-pad-after-hero: 61px; --hero-pad-bottom: 51px; --home-hero-pad-bottom: 16px; }
}
@media screen and (max-width: 479px) {
  :root { --section-pad: 60px; --section-pad-after-hero: 48px; --hero-pad-bottom: 40px; --home-hero-pad-bottom: 8px; }
}
.section.home-advantage,
.section.home-about,
.section.home-process,
.section.home-testimonials,
.section.home-contact,
.section.about-mission,
.section.about-story,
.section.about-values,
.section.about-explore,
.section.faqs,
.section.services-section,
.section.service-process,
.section.service-testimonials,
.section.service-contact,
.section.industry-clients {
  padding-top: var(--section-pad);
  padding-bottom: var(--section-pad);
}
.section.services-v2,
.section.contact {
  padding-bottom: var(--section-pad);
}
.section.service-hero,
.section.about-hero {
  padding-bottom: var(--hero-pad-bottom);
}
.section.home-hero {
  padding-bottom: var(--home-hero-pad-bottom);
}
.section.service-hero + .section,
.section.about-hero + .section {
  padding-top: var(--section-pad-after-hero);
}
.industry-clients .testimonial-slider,
.service-testimonials .testimonial-slider {
  margin-bottom: 0;
}
.industry-services .services-v2-grid {
  margin-bottom: 0;
}

/* Accessibility and delivery (v0.15.0) — what the audit found, fixed in one place.
   - Surface tints as tokens (they were literal in four places).
   - .visually-hidden: for the form labels (the placeholders stay the visual), read by screen
     readers only. .skip-link: the first tab stop, jumps past the header; visible only on focus.
   - The quote and newsletter buttons are Webflow's pattern of a styled pill around a transparent
     submit input; the input was 18px tall, so most of the pill did nothing when tapped. Now the
     input fills the pill invisibly (still the focusable, named control; forms.js keeps its
     value and the pill's label in step) and the pill paints the label from data-label.
   - Testimonial dots: 8px dots inside 24px targets (padding, background-clip keeps the dot).
   - Footer text on the grey footer in --neutral-700 (see above), and 15px body text on phones
     (the template's 14px paragraphs were the smallest text on the site). */
:root {
  --surface-2: #F7F8FC;
  --surface-glow: #FCFBFF;
  --line-1: #EEF1F7;
  --tint-primary: #E9DAFB;
}
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2000;
  padding: 12px 20px;
  border-radius: 999px;
  background-color: var(--neutral-800);
  color: var(--neutral-100);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
  opacity: 0;
}
.skip-link:focus-visible {
  transform: none;
  opacity: 1;
  outline: 3px solid var(--primary-1);
  outline-offset: 2px;
}
.button-primary.contact-form-button {
  position: relative;
}
.button-primary.blog-newsletter {
  position: relative;   /* v0.26.4: the whole pill submits, as in the footer */
}
.button-primary.contact-form-button::before,
.button-primary.footer-newsletter::before,
.button-primary.blog-newsletter::before {
  content: attr(data-label);
}
.contact-form-link,
.footer-newsletter-link,
.blog-newsletter-link {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: pointer;
}
.testimonial-dots {
  gap: 0;
}
.testimonial-dot {
  width: 24px;
  height: 24px;
  padding: 8px;
  background-clip: content-box;
  transition: background-color .3s;
}
.testimonial-dot.is-active {
  padding: 7px;      /* the dot grows to 10px inside the same 24px target — no transform, so neighbours keep their spacing */
  transform: none;
}
.footer-invitation,
.footer-small-print {
  color: var(--neutral-700);
}
@media screen and (max-width: 479px) {
  body {
    font-size: 15px;
  }
}

/* Motion (v0.15.0) — three jobs, each with a reduced-motion path.
   Arrival: a layered scene assembles the first time it is in view (site.js adds .is-arriving):
   the base panel settles first, then each prop, then the chips, 90ms apart, each easing out of
   a 28px rise; then the idle float and the scroll parallax take over. The animation rides on the
   layer's <img> next to the float so it never fights GSAP's transform on the layer itself, and
   fills backwards only, so nothing is pinned once it has landed. Until a scene arrives its
   layers are hidden — behind the w-mod-js guard, so a page without scripts shows them.
   Continuity: same-origin navigations cross-fade (View Transitions; the old page leaves faster
   than the new one lands) instead of cutting.
   Feedback: buttons give a 90ms press; while a form sends, a light sweeps across its pill under
   the "please wait" label; the success and error messages rise in. */
/* v0.21.3: the arrival animates the individual `translate`/`scale` properties, not `transform`,
   so it composes with the idle float (which owns `transform`) instead of replacing it — when the
   arrival ended, the float's mid-cycle offset used to snap in by a few pixels. */
@keyframes layer-arrive {
  from { opacity: 0; translate: 0 28px; scale: .96; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}
@keyframes layer-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
html.w-mod-js .illustration[data-parallax]:not(.is-arriving) .illustration-layer img {
  opacity: 0;
}
.illustration.is-arriving .illustration-layer-base img {
  animation: layer-arrive 640ms cubic-bezier(.16, 1, .3, 1) backwards;
}
.illustration.is-arriving .illustration-layer-prop img,
.illustration.is-arriving .illustration-layer-chip img {
  animation:
    illustration-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite,
    layer-arrive 720ms cubic-bezier(.16, 1, .3, 1) min(calc(var(--enter, 0) * 90ms), 640ms) backwards;
}
@media (prefers-reduced-motion: reduce) {
  .illustration.is-arriving .illustration-layer img {
    animation: layer-fade 320ms ease-out backwards;
  }
}
/* v0.26.2: the first screen's scene doesn't wait for site.js (it loads after jQuery and webflow.js,
   which held the hero art — the page's largest image — back to ~5s on a slow phone). It assembles
   with the same CSS animations from the first paint; site.js adding .is-arriving later changes
   nothing, because the animation lists are identical. */
html.w-mod-js main > .section:first-of-type .illustration[data-parallax]:not(.is-arriving) .illustration-layer img {
  opacity: 1;
}
/* v0.26.5: …and it is painted whole at the first paint. Every layer is a full-scene image, so a
   layer fading in from invisible, or growing, counted as a new, later "largest paint" (LCP 0.7–1.4s
   later on a slow phone). The base panel stands still; the props and chips rise into it fully
   visible, then float — the motion stays, only the fade from nothing goes. */
@keyframes layer-rise {
  from { translate: 0 28px; }
  to   { translate: 0 0; }
}
main > .section:first-of-type .illustration[data-parallax] .illustration-layer-base img {
  animation: none;
}
main > .section:first-of-type .illustration[data-parallax] .illustration-layer-prop img,
main > .section:first-of-type .illustration[data-parallax] .illustration-layer-chip img {
  animation:
    illustration-float var(--float-duration, 6s) ease-in-out var(--float-delay, 0s) infinite,
    layer-rise 720ms cubic-bezier(.16, 1, .3, 1) min(calc(var(--enter, 0) * 90ms), 640ms) backwards;
}
@media (prefers-reduced-motion: reduce) {
  main > .section:first-of-type .illustration[data-parallax] .illustration-layer img {
    animation: none;
  }
}

@view-transition {
  navigation: auto;
}
::view-transition-old(root) {
  animation-duration: 160ms;
  animation-timing-function: ease-in;
}
::view-transition-new(root) {
  animation-duration: 240ms;
  animation-timing-function: cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
  .mega-menu {
    transform: none;
  }
}

.button-primary:active,
.button-secondary:active {
  transform: translate3d(0, 0, 0) scale(.985);
  transition-duration: 90ms;
}
@keyframes pill-sweep {
  from { background-position: 120% 0, 0 0; }
  to   { background-position: -120% 0, 0 0; }
}
.button-primary.is-sending {
  background-image:
    linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .28) 50%, transparent 65%),
    linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 88%, white) 0%, var(--button-bg) 100%);
  background-size: 220% 100%, 100% 100%;
  animation: pill-sweep 1.1s linear infinite;
  cursor: progress;
}
@keyframes message-in {
  from { opacity: 0; transform: translate3d(0, 12px, 0); }
  to   { opacity: 1; transform: none; }
}
.success-message.w-form-done,
.error-message.w-form-fail {
  animation: message-in 420ms cubic-bezier(.16, 1, .3, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .button-primary:active,
  .button-secondary:active { transform: none; }
  .button-primary.is-sending { animation: none; background-image: linear-gradient(180deg, color-mix(in srgb, var(--button-bg) 88%, white) 0%, var(--button-bg) 100%); }
  .success-message.w-form-done,
  .error-message.w-form-fail { animation: layer-fade 200ms ease-out both; }
}

/* ---------------------------------------------------------------------------
   Form + text splits (v0.15.1)
   Webflow sets the copy beside the contact card at 42% of the row with a 20px
   margin; next to the 660px card that leaves 24px between them at 1440. One real
   gutter, and the copy takes what is left (never below 360px: the card yields).
   Tablet and phone stack the two, so this only applies at desktop.
   --------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .home-contact-wrapper,
  .service-contact-wrapper {
    column-gap: 80px;
  }
  .split-content.home-contact-content,
  .split-content.service-contact-content {
    flex: 1 1 360px;
    min-width: 360px;
    max-width: 460px;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ---------------------------------------------------------------------------
   About — "Where to go next" (v0.16.0)
   The listing pages' cards, one per page of the site, from the explore navigation.
   --------------------------------------------------------------------------- */
.section.about-explore {
  overflow: hidden;
}
.about-explore-grid {
  margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   About dropdown (v0.17.0)
   A navigation item with child pages (About → Our team, Careers, Blog) reuses the
   mega-menu behaviour and panel, as a compact list centred under the link; on phones
   the generic fold-out rules apply unchanged.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .header .nav-item-has-list {
    position: relative;
  }
  .nav-item-has-list .mega-menu {
    left: 50%;
    right: auto;
    width: max-content;
    min-width: 220px;
    transform: translate3d(-50%, 8px, 0);
  }
  .nav-item-has-list.is-open .mega-menu {
    transform: translate3d(-50%, 0, 0);
  }
  .nav-item-has-list .mega-menu-panel {
    grid-template-columns: minmax(0, 1fr);
    gap: 0;
    padding: 12px;
    border-radius: 20px;
  }
  .nav-item-has-list .mega-menu-panel::before {
    left: 50%;
  }
  .nav-item-has-list .mega-menu-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 2px;
  }
  .nav-item-has-list .mega-menu-item {
    padding: 10px 16px;
    border-radius: 12px;
  }
}
@media (prefers-reduced-motion: reduce) and (min-width: 992px) {
  .nav-item-has-list .mega-menu,
  .nav-item-has-list.is-open .mega-menu {
    transform: translate3d(-50%, 0, 0);
  }
}

/* ---------------------------------------------------------------------------
   Footer columns, cleaned up (v0.17.0)
   Five link columns plus the aside no longer fit a 1180px row without the two-column
   lists shrinking into each other (nowrap links overflowed into the next column). Now:
   the link columns keep their natural width, Services stays two across, Industries is a
   single column, and below 1200px the contact/newsletter aside drops under the lists.
   --------------------------------------------------------------------------- */
@media screen and (min-width: 992px) {
  .footer-column.services,
  .footer-column.industries,
  .footer-column.company {
    flex: 0 0 auto;
  }
  .footer-column.industries .footer-column-list.two-columns {
    grid-template-rows: none;
    grid-auto-flow: row;
    column-gap: 0;
  }
  .footer-column-list.two-columns {
    column-gap: 32px;
  }
  .footer-columns {
    column-gap: 48px;
  }
}
@media screen and (min-width: 992px) and (max-width: 1199px) {
  .footer-columns {
    flex-wrap: wrap;
  }
  .footer-column.footer-aside {
    flex: 1 1 100%;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px 64px;
    max-width: none;
    margin-left: 0;
  }
}

/* ---------------------------------------------------------------------------
   Blog post body (v0.18.0)
   Figures with captions and simple tables inside the Bard content. Webflow's rich-text
   rule caps a figure at 60% of the column; the articles' illustrations are full width.
   --------------------------------------------------------------------------- */
.rich-text figure,
.w-richtext figure {
  display: block;
  width: 100%;
  max-width: 100%;
  margin: 40px 0 48px;
}
.rich-text figure img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 30px;
}
.rich-text figcaption {                    /* the template floats captions as a card over the image */
  position: static;
  display: block;
  width: auto;
  max-width: none;
  margin: 14px 0 0;
  padding: 0;
  background: none;
  box-shadow: none;
  border: 0;
  border-radius: 0;
  color: var(--neutral-600);
  font-size: 15px;
  line-height: 1.5;
  text-align: center;
}
.rich-text table {
  width: 100%;
  margin: 32px 0 40px;
  border-collapse: collapse;
  font-size: 16px;
  line-height: 1.5;
}
.rich-text th,
.rich-text td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--neutral-300);
  text-align: left;
  vertical-align: top;
}
.rich-text th {
  color: var(--neutral-800);
  font-weight: 700;
  border-bottom-color: var(--neutral-400);
}
.rich-text tr:last-child td {
  border-bottom: 0;
}
/* One column (v0.23.1): Webflow caps the text at 730px, centred inside the 858px column that
   the figures and tables fill, so the text looked narrower than everything around it. In blog
   posts every block runs the full column, and table text lines up with the paragraphs. */
.rich-text.blog-post-body > p,
.rich-text.blog-post-body > h2,
.rich-text.blog-post-body > h3,
.rich-text.blog-post-body > h4,
.rich-text.blog-post-body > h5,
.rich-text.blog-post-body > h6,
.rich-text.blog-post-body > ul,
.rich-text.blog-post-body > ol,
.rich-text.blog-post-body > blockquote {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.rich-text.blog-post-body th:first-child,
.rich-text.blog-post-body td:first-child {
  padding-left: 0;
}
.rich-text.blog-post-body th:last-child,
.rich-text.blog-post-body td:last-child {
  padding-right: 0;
}
@media screen and (max-width: 767px) {
  .rich-text table {
    display: block;
    overflow-x: auto;
    font-size: 15px;
  }
  .rich-text figure {
    margin: 32px 0 36px;
  }
}

/* v0.23.2: a little more room in every category pill (Webflow: 16px 24px, cards 13px 16px). */
.blog-category-item-link,
.blog-post-category {
  padding: 19px 30px 19px 28px;
}
.blog-post-item-v1-category,
.blog-post-item-v2-category,
.blog-featured-v1-item-category {
  padding: 16px 22px 16px 22px;
}

/* Blog category chips (v0.23.0): the icon is the category's Glass & Volume icon (Artur's
   service set — megaphone, code, magnifier), a little taller than the pill's text line and
   overhanging its left edge on a white disc, instead of a flat white line icon. */
.image.blog-category-item-icon,
.image.blog-post-category-icon,
.image.blog-post-item-v1-category-icon,
.image.blog-post-item-v2-category-icon,
.image.blog-featured-v1-item-category-icon {
  width: 2.4em;
  height: 2.4em;
  padding: 0.38em;              /* v0.23.2: the square icon sits inside the circle, corners uncut */
  margin: -0.6em 0.5em -0.6em -0.8em;
  object-fit: contain;
  background: #FFFFFF;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(20, 20, 43, 0.12);
}

/* ---------------------------------------------------------------------------
   First screen without waiting for scripts (v0.24.0)
   Webflow's interactions start every page's first section at opacity 0 and only show it
   once jQuery + webflow.js have run — seconds on a phone, and never in a render that skips
   the scroll triggers. The first section is now visible from the first paint (the IX2 start
   state is overridden while it still says opacity 0; later sections keep their reveals), with
   a short CSS rise that needs no JavaScript. `translate` is separate from `transform`, so it
   never fights the interaction's own inline transform.
   --------------------------------------------------------------------------- */
main > .section:first-of-type[style*="opacity"],
main > .section:first-of-type [data-w-id][style*="opacity"],
main > .section:first-of-type [data-reveal] {
  opacity: 1 !important;
  transform: none !important;
}
main > .section:first-of-type [data-w-id][style*="opacity"],
main > .section:first-of-type [data-reveal] {
  animation: first-screen-rise 700ms cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes first-screen-rise {
  from { translate: 0 14px; }
  to   { translate: 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  main > .section:first-of-type [data-w-id][style*="opacity"],
  main > .section:first-of-type [data-reveal] { animation: none; }
}

/* Off Webflow's CDN (v0.24.0): the case-study card placeholder came from d3e54v103j8qbb.cloudfront.net. */
.image-wrapper.card-service-case-study-item.service-single {
  background-image: url('/images/webflow-local/background-image.svg');
}

/* v0.26.4: the v2 card's image fills the card. Its top block is a flex column aligned to the start,
   so the wrapper shrank to the image: 0 wide until it loaded (layout shift on /blog), then 380px
   inside a 525px card. */
.image-wrapper.blog-post-item-v2 {
  width: 100%;
}

/* v0.24.0: blog images carry width/height (so the browser reserves a 16:9 box before they load);
   height follows the rendered width. */
.image.blog-post-item-v1,
.image.blog-post-item-v2,
.image.blog-featured-v1-item,
.image.blog-post,
.blog-post-author-link-image img,
.rich-text.blog-post-body figure img {
  height: auto;
}

/* v0.24.0 — search headings on service and industry pages. The service/industry name above the
   large line is now the page's H1 (keyword first); it keeps the eyebrow's look. The large line
   (the slogan) keeps the H1's look as a paragraph. */
.subtitle-wrapper h1.hero-eyebrow-h1 {
  margin: 0;
  font: inherit;
  color: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
p.hero-slogan {
  color: var(--neutral-800);
  font-size: 58px;
  font-weight: 700;
  line-height: 1.2em;
  letter-spacing: 0;
  margin-top: 0;
}
@media screen and (max-width: 991px) { p.hero-slogan { font-size: 46px; line-height: 56px; } }
@media screen and (max-width: 767px) { p.hero-slogan { font-size: 36px; line-height: 46px; } }
@media screen and (max-width: 479px) { p.hero-slogan { font-size: 32px; line-height: 42px; } }

/* Related guides on service and industry pages (v0.24.0): the blog's v1 cards in a row. */
.section.related-guides {
  padding-top: var(--section-pad);
  padding-bottom: 0;
}
.title.related-guides {
  margin-bottom: 40px;
}
.related-guides-grid {
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

/* Blog category intro line (v0.24.0). */
.paragraph.blog-category-intro {
  max-width: 680px;
  margin: 16px 0 0;
  color: var(--neutral-600);
}

/* ---------------------------------------------------------------------------
   About (v0.25.0) — the stock photos give way to the site's own scenes, the story becomes a
   timeline, and the principles use the Glass & Volume icons.
   --------------------------------------------------------------------------- */
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 56px;
  position: relative;
  z-index: 1;
}
.about-hero-grid .about-hero-content { max-width: 540px; }
.about-hero-illustration-wrapper,
.about-mission-illustration-wrapper {
  position: relative;
  width: 100%;
}
.illustration.about-hero-illustration,
.illustration.about-mission-illustration {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 720px;
  margin-left: auto;
}
.about-mission-illustration-wrapper .bg.about-mission { z-index: 0; }
@media screen and (max-width: 991px) {
  .about-hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-hero-grid .about-hero-content { max-width: 640px; }
  .illustration.about-hero-illustration,
  .illustration.about-mission-illustration { margin: 0 auto; }
}

/* Timeline */
.about-timeline {
  position: relative;
  margin-top: 64px;
}
.about-timeline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
  position: relative;
}
.about-timeline-line {
  position: absolute;
  left: 12.5%;
  right: 12.5%;
  top: 26px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, #F7409D 0%, #9333EA 35%, #3F80FD 68%, #FFAD2A 100%);
  opacity: .55;
}
.about-timeline-item { --accent: #9333EA; display: flex; flex-direction: column; color: var(--neutral-600); }
.about-timeline-item.accent-red { --accent: #F7409D; }       /* brand pink, purple, blue, amber (the theme's accent */
.about-timeline-item.accent-purple { --accent: #9333EA; }    /* variables were remapped in the recolour and no  */
.about-timeline-item.accent-blue { --accent: #3F80FD; }      /* longer match their names — see README)          */
.about-timeline-item.accent-yellow { --accent: #FFAD2A; }
.about-timeline-item .title { color: var(--neutral-800); }
.about-timeline-marker {
  position: relative;
  z-index: 1;
  width: 56px;
  height: 56px;
  margin: 0 auto 28px;
  border-radius: 50%;
  background: #FFFFFF;
  box-shadow: 0 12px 30px rgba(39, 57, 111, .14), inset 0 0 0 4px var(--accent);
  display: grid;
  place-items: center;
}
.about-timeline-marker span {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--accent) 18%, transparent);
}
.card.about-timeline-card {
  position: relative;
  flex: 1;
  overflow: hidden;
  padding: 36px 30px 34px;
  border-radius: 28px;
  border: 1px solid #EFE8FB;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
  box-shadow: 0 18px 44px rgba(39, 57, 111, .08);
  transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s;
}
.card.about-timeline-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 5px;
  background: var(--accent);
}
.card.about-timeline-card::after {       /* a soft glow of the milestone's colour in the corner */
  content: "";
  position: absolute;
  right: -60px;
  bottom: -60px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--accent) 16%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.card.about-timeline-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 56px rgba(39, 57, 111, .12);
}
.about-timeline-year {
  margin-bottom: 18px;
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.01em;
  background: linear-gradient(135deg, var(--accent) 0%, #6D28D9 120%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.about-timeline-card .card-about-story { margin-bottom: 10px; }
@media screen and (max-width: 991px) {
  .about-timeline-list { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
  .about-timeline-line { display: none; }
}
@media screen and (max-width: 767px) {
  .about-timeline { margin-top: 44px; }
  .about-timeline-line {
    display: block;
    left: 26px;
    right: auto;
    top: 28px;
    bottom: 28px;
    width: 4px;
    height: auto;
    background: linear-gradient(180deg, #F7409D 0%, #9333EA 35%, #3F80FD 68%, #FFAD2A 100%);
  }
  .about-timeline-list { grid-template-columns: 1fr; row-gap: 24px; }
  .about-timeline-item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 18px; align-items: start; }
  .about-timeline-marker { margin: 22px 0 0; }
  .card.about-timeline-card { padding: 28px 24px; }
  .about-timeline-year { font-size: 38px; }
}

/* Principles: the Glass & Volume icons bring their own panels. */
.image-wrapper.card-about-value {
  background: none;
  padding: 0;
  min-width: 96px;
}
.image.card-about-value {
  width: 96px;
  height: 96px;
  max-width: none;
}

/* The hero's grey band now sits behind the results only (it used to cut through the photos). */
.section.about-hero { overflow: hidden; }
.section.about-hero .bg.about-hero { display: none; }
.about-hero-results-wrapper { position: relative; }
.about-hero-results-wrapper::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: -100vw;
  right: -100vw;
  top: -64px;
  bottom: -100vh;
  background-color: var(--neutral-200);
}
.about-hero-results-wrapper { margin-top: 112px; }
.about-hero-results-wrapper::before { top: -56px; }
@media screen and (max-width: 767px) { .about-hero-results-wrapper { margin-top: 72px; } .about-hero-results-wrapper::before { top: -40px; } }
.card-about-hero-result-number .accent-yellow { color: #FFAD2A; }   /* the theme's "yellow" is a pale #FFFD9A */

/* HTML sitemap (v0.26.0): every published page in groups, articles by category. */
.section.html-sitemap { padding-top: var(--section-pad-after-hero, 96px); padding-bottom: var(--section-pad); }
.html-sitemap-head { max-width: 720px; margin-bottom: 56px; }
.paragraph.html-sitemap { margin-top: 12px; }
.html-sitemap-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
}
.html-sitemap-group {
  padding: 30px 30px 26px;
  border: 1px solid #EFE8FB;
  border-radius: 24px;
  background: linear-gradient(180deg, #FFFFFF 0%, #FBF8FF 100%);
  box-shadow: 0 14px 36px rgba(39, 57, 111, .06);
}
.html-sitemap-heading {
  margin: 0 0 16px;
  font-size: 22px;
  line-height: 1.3;
}
.html-sitemap-subheading { margin: 0 0 12px; font-size: 18px; line-height: 1.35; }
.html-sitemap-subheading a { color: var(--neutral-800); text-decoration: none; }
.html-sitemap-subheading a:hover { color: #9333EA; }
.html-sitemap-list { list-style: none; margin: 0; padding: 0; }
.html-sitemap-list li { padding: 7px 0; border-top: 1px solid #F1ECF9; line-height: 1.45; }
.html-sitemap-list li:first-child { border-top: 0; }
.html-sitemap-list a { color: var(--neutral-700, #4a4a68); text-decoration: none; font-size: 16px; }
.html-sitemap-list a:hover { color: #9333EA; }
.html-sitemap-meta { display: block; font-size: 13px; color: var(--neutral-600); }
.html-sitemap-articles { margin-top: 72px; }
.html-sitemap-articles > .html-sitemap-heading { font-size: 30px; margin-bottom: 24px; }
@media screen and (max-width: 991px) { .html-sitemap-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { .html-sitemap-grid { grid-template-columns: 1fr; } .html-sitemap-group { padding: 24px; } }

/* v0.26.1: a category's heading ("Software Articles") and a team member's "About Ahmed" are one
   heading each; the wrappers became the <h1>/<h2>, so they keep the wrappers' spacing. */
h1.category-title-wrapper { margin-bottom: 0; }

/* v0.26.4: the industries that use a service, on each service page — a row of pill links with the
   industry's glass icon. And a team member's articles reuse the related-guides row. */
.section.service-industries {
  padding-top: var(--section-pad);
  padding-bottom: 0;
}
.title.service-industries {
  margin-bottom: 32px;
}
.service-industries-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.service-industry-link {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  padding: 8px 22px 8px 8px;
  border: 1px solid var(--neutral-300);
  border-radius: 999px;
  background: var(--neutral-100);
  color: var(--neutral-800);
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.service-industry-link:hover,
.service-industry-link:focus-visible {
  border-color: var(--primary-1);
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 20, 43, .08);
}
.service-industry-link img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: contain;
  background: #fff;
}
.section.member-articles {
  padding-bottom: var(--section-pad);
}

/* v0.26.5: service and industry pages' questions (partials/page-faqs) — the Contact FAQ cards,
   opened by Alpine (faqItem). The answer stays in the page; only with JavaScript running
   (html.w-mod-js) is it folded, with a grid-rows transition. The heading's button carries the
   question for keyboards and screen readers. */
.page-faqs .content-top.faqs {
  margin-bottom: 48px;
}
.faq-toggle {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.faq-toggle:focus-visible {
  outline: 3px solid var(--primary-1);
  outline-offset: 6px;
  border-radius: 8px;
}
.page-faqs .title.faq {
  margin: 0;
}
.page-faqs .faq-icon {
  position: relative;
  flex: none;
}
.page-faqs .faq-icon-1 {
  transition: transform .3s ease;
}
.page-faqs .card.faq.is-open .faq-icon-1 {
  transform: rotate(90deg);
}
html.w-mod-js .faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .35s ease;
}
html.w-mod-js .card.faq.is-open .faq-panel {
  grid-template-rows: 1fr;
}
.faq-panel-inner {
  min-height: 0;
  overflow: hidden;
}
.page-faqs .faqs-grid {
  align-items: start;
}
@media (prefers-reduced-motion: reduce) {
  html.w-mod-js .faq-panel,
  .page-faqs .faq-icon-1 { transition: none; }
}

/* v0.26.7: team social icons centred. The template's rows have three fixed columns (Facebook, X,
   LinkedIn); with only LinkedIn filled in, the two empty columns still took their gaps and pushed
   the icon 24px off centre. One column per icon that's actually there. */
.w-layout-grid.card-team-section-item-social-media-grid,
.w-layout-grid.card-about-author-social-media-grid,
.w-layout-grid.team-social-media-grid {   /* two classes: template-pages.css loads after this file */
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: auto;
}

/* v0.26.10: a way back from each member page and each opening — "Meet the rest of the team" under
   the bio, "See all open positions" next to "Apply now" (labels: Team / Careers page). */
._2-buttons.member-back {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
._2-buttons.card-career-about-button-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 0;
}

/* v1.0.4: a post's category, title, summary and author come before its illustration. They sat in a
   card under a 660px image, so on a laptop the headline started a screen down (H1 at y≈990).
   Webflow's markup is unchanged; the card only swaps places with the image. */
.blog-post-top-content > .card.blog-post-main-content {
  order: -1;
  margin-top: 0;
  margin-bottom: 40px;
}
@media screen and (max-width: 767px) {
  .blog-post-top-content > .card.blog-post-main-content { margin-bottom: 24px; }
}

/* v1.0.4: the "All articles" button under the home page's latest guides. */
.related-guides-more { margin-top: 48px; }
@media screen and (max-width: 767px) { .related-guides-more { margin-top: 32px; } }

/* v1.3.1: the home page's industries row ends its own section — on service pages the next section
   brings the gap, on Home a grey band follows directly. */
.section.service-industries.home-industries {
  padding-bottom: var(--section-pad);
}

/* v1.3.1: the cookie banner in the site's style. The add-on maps its four configured colours
   (config/cookie-consent.php) onto the library's variables; shape, type and buttons follow the site
   here. `html #cc-main` outranks the add-on's own `#cc-main` block, which loads later in <body>. */
html #cc-main {
  --cc-font-family: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --cc-modal-border-radius: 24px;
  --cc-btn-border-radius: 999px;
  --cc-btn-primary-hover-bg: color-mix(in srgb, var(--primary-1) 90%, black);
  --cc-btn-primary-hover-border-color: color-mix(in srgb, var(--primary-1) 90%, black);
  --cc-btn-primary-hover-color: #fff;
  --cc-btn-secondary-bg: #fff;
  --cc-btn-secondary-color: var(--neutral-800);
  --cc-btn-secondary-border-color: var(--neutral-400);
  --cc-btn-secondary-hover-bg: #fbfcff;
  --cc-btn-secondary-hover-color: var(--primary-1);
  --cc-btn-secondary-hover-border-color: color-mix(in srgb, var(--primary-1) 35%, var(--neutral-400));
  --cc-secondary-color: var(--neutral-600, #4e4b66);
  --cc-link-color: var(--primary-1);
  --cc-cookie-category-block-bg: #faf8ff;
  --cc-cookie-category-block-border: #f1ebfc;
  --cc-cookie-category-block-hover-bg: #f5f0ff;
  --cc-cookie-category-block-hover-border: #ebe1fb;
  --cc-cookie-category-expanded-block-hover-bg: #f1eafe;
  --cc-separator-border-color: #eff0f6;
  --cc-footer-border-color: #eff0f6;
  font-family: var(--cc-font-family);
}
html #cc-main .cm,
html #cc-main .pm {
  border: 1px solid #eff0f6;
  box-shadow: 0 24px 60px -18px rgba(25, 33, 61, .22), 0 2px 8px rgba(25, 33, 61, .04);
}
html #cc-main .cm__title,
html #cc-main .pm__title {
  color: var(--neutral-800);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.01em;
}
html #cc-main .cm__desc,
html #cc-main .pm__section-desc {
  color: #4e4b66;
  line-height: 1.55;
}
html #cc-main .cm__btn,
html #cc-main .pm__btn {
  font-weight: 700;
  min-height: 44px;
  transition: transform 240ms cubic-bezier(.2, .8, .2, 1), box-shadow 240ms cubic-bezier(.2, .8, .2, 1), background-color 240ms, border-color 240ms, color 240ms;
}
html #cc-main .cm__btn:not(.cm__btn--secondary),
html #cc-main .pm__btn:not(.pm__btn--secondary) {
  background-image: linear-gradient(180deg, color-mix(in srgb, var(--primary-1) 88%, white) 0%, var(--primary-1) 100%);
  box-shadow: inset 0 1px 0 #ffffff33, 0 4px 12px color-mix(in srgb, var(--primary-1) 18%, transparent);
}
html #cc-main .cm__btn--secondary,
html #cc-main .pm__btn--secondary {
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #19213d0b;
}
html #cc-main .cm__btn:hover,
html #cc-main .pm__btn:hover {
  transform: translate3d(0, -1px, 0);
}
@media (prefers-reduced-motion: reduce) {
  html #cc-main .cm__btn:hover,
  html #cc-main .pm__btn:hover { transform: none; }
}