/* Blurry palette and logo sizing. */
:root {
  --blurry-purple: #6a56cf;
  --blurry-yellow: #f1d95f;
  --blurry-yellow-light: #eee2a1;
  --blurry-paper: #f0eeeb;
  --blurry-ink: #30264c;
}

/* Stable, responsive FAQ answers without synchronous height measurements. */
.faq button.faq__header {
  display: block;
  width: 100%;
  border: 0;
  background: transparent;
  color: inherit;
  font-family: inherit;
  font-weight: inherit;
  text-align: left;
  appearance: none;
}
.faq button.faq__header:focus-visible {
  outline: 2px solid var(--blurry-purple);
  outline-offset: -5px;
  border-radius: inherit;
}
.faq .accordion__content {
  display: grid;
  grid-template-rows: 0fr;
  height: auto !important;
  transition: grid-template-rows .25s ease;
}
.faq.accordion--expanded .accordion__content {
  grid-template-rows: 1fr;
}
.faq .accordion__inner {
  min-height: 0;
  overflow: hidden;
  padding: 0;
}
.faq .faq__content .body {
  box-sizing: content-box;
  padding: .5rem 9.5rem 3.5rem;
}
/* Expanding an answer should not trigger a sideways entrance. */
.faqs__marketing,
.faqs__marketing .marketingCta {
  transform: none !important;
  transition: none !important;
}
@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .faq button.faq__header {
    display: flex;
    height: auto;
    min-height: 9.5rem;
  }
  .faq .faq__content .body {
    box-sizing: border-box;
    padding: 0 4.5rem 3rem;
  }
}
@media (prefers-reduced-motion: reduce) {
  .faq .accordion__content,
  .faq__arrow::after {
    transition: none !important;
  }
}

/* The floating Website Builds shortcut is a desktop navigation item. */
@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .nav .nav__pageToggle {
    display: none !important;
  }
}

/* Carry Blurry's palette through the desktop and mobile comparison icons. */
.products .products__feature div span.tick {
  background-image: url(/assets/homepage-v37/images/blurry-tick.svg);
}

.products .products__feature div span.cross {
  background-image: url(/assets/homepage-v37/images/blurry-cross.svg);
}

.products__featureCols > div {
  background-color: var(--blurry-paper);
}

.products__featureCols > div:first-child {
  background-color: #fff;
}

.products .products__feature > div {
  border-bottom-color: rgba(106, 86, 207, .15);
}

/* Equal service cards: full-width headings and one shared card treatment. */
.products .products__productHeader h3 {
  width: auto;
}

.products__stickyInner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
}

.products__stickyInner > .products__productHeader {
  display: flex;
  flex-direction: column;
  min-width: 0;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  background-color: #fff;
}

.products__stickyInner > .products__productHeader + .products__productHeader {
  border-left: 1px solid var(--blurry-purple);
}

.products__stickyInner .products__productHeader h3 {
  line-height: 1;
  min-height: 1em;
  white-space: nowrap;
}

.products__stickyInner .products__productHeader .button {
  align-self: flex-start;
}

/* Industry artwork fits the existing portrait slots without cropping. */
.testimonial__image--industry img {
  display: block;
  object-fit: contain;
  padding: 1.2rem;
  border-radius: .5rem;
  background-color: #f7f3e8;
}

@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .testimonial__image--industry img {
    padding: .45rem;
  }

  .testimonial__author > span:first-child > span {
    display: block;
    margin: .45rem 0;
    line-height: 1.35;
    white-space: nowrap;
  }

  .testimonial__result p:first-child {
    font-size: 4rem;
    line-height: 1.1;
    white-space: nowrap;
  }

  .testimonial__result p:first-child span {
    font-size: inherit;
  }

  .people__bottom {
    display: grid;
    grid-template-rows: repeat(2, 7rem);
    gap: 1rem;
    height: 15rem;
    overflow: hidden;
  }

  .people__bottom > .people__clients {
    min-height: 7rem;
    height: 7rem;
    margin: 0 !important;
  }
}

.button,
.button__inner,
.button input,
.button--ai .button__inner,
.HB .hs-submit input,
.HB .hs-submit__inner {
  color: var(--blurry-ink);
}

.button--ai {
  background: linear-gradient(90deg, var(--blurry-yellow), var(--blurry-yellow-light));
}

@media (hover: hover) {
  .button:not(.button--black):hover .button__inner {
    color: #fff;
  }
}

.subscribe .hs-input {
  border-color: #746398;
}

/* Recolor existing monochrome interface icons; artwork and image files stay intact. */
img[src$="arrow-thin-blue.svg"],
img[src$="arrow-blue-down.svg"],
img[src$="arrow-blue.svg"],
img[src$="icon-step-1.svg"],
img[src$="icon-step-2.svg"],
img[src$="icon-step-3.svg"] {
  filter: brightness(0) saturate(100%) invert(40%) sepia(33%) saturate(1812%) hue-rotate(216deg) brightness(92%) contrast(92%);
}

/* Give the stacked wordmark the same visual presence as the navigation controls. */
.nav__logo {
  top: 0;
  height: 4.6rem;
}

.nav__logo svg {
  width: 16rem;
  height: 100%;
}

/* Centre the larger footer wordmark within its existing card. */
.footer__logo {
  width: calc(100% + 4rem);
  margin-left: -2rem;
}

.footer__mainLogo {
  width: 100%;
  height: 100%;
}

/* Let the transparent character animation sit directly on the hero grid. */
.homeHeader__image {
  background: transparent;
}

/* Keep the leaking bucket visible during the first process step. */
.steps[data-car-active="0"] .steps__bucket {
  transform: none;
}

/* Let the graph callout grow with the complete traffic percentage. */
.stats__graphBubble {
  width: max-content;
  min-width: 9rem;
  background-size: 100% 100%;
}

.stats__graphBubble > span:first-child {
  display: flex;
  align-items: baseline;
  justify-content: center;
  padding: 0 1rem 0 .65rem;
  font-size: 2rem;
  line-height: 3.3rem;
  white-space: nowrap;
}

@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .stats__graphBubble {
    min-width: 7rem;
  }

  .stats__bottom .dollars {
    margin-bottom: 4.2rem;
  }

  .stats__graphBubble > span:first-child {
    padding: 0 .85rem 0 .45rem;
    font-size: 1.6rem;
    line-height: 2.8rem;
  }

  .stats__graphBubble > span:last-child {
    top: auto;
    bottom: calc(100% + .6rem);
    left: 50%;
    width: max-content;
    transform: translateX(-50%);
    font-size: max(1rem, 11px);
    line-height: 1.25;
    text-align: center;
    white-space: nowrap;
  }
}

/* Fit the four-digit traffic result and percent sign within the stats panel. */
.stats__number {
  display: flex;
  align-items: center;
  gap: 1rem;
  right: 7.94rem;
  top: 40rem;
  font-size: 30rem;
  letter-spacing: 0;
  white-space: nowrap;
}

.stats__number .plus {
  font-size: 16rem;
  line-height: 1;
  padding-bottom: 0;
}

@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .stats__number {
    position: static;
    gap: .4rem;
    font-size: 14rem;
    letter-spacing: -.02em;
  }

  .stats__number .plus {
    font-size: 7rem;
  }
}

@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-height: 600px) {
  .nav__logo {
    top: .25rem;
    height: 3.5rem;
  }

  .nav__logo svg {
    width: 12.4rem;
  }

  .footer__logo {
    width: auto;
    margin-left: 0;
  }

  .footer__mainLogo {
    width: 30rem;
    max-width: 100%;
  }
}

/* Authentic Blurry client logos, calibrated to the existing carousel cards. */
.people__client--blurry img {
  width: var(--client-logo-width);
  height: var(--client-logo-height);
  max-width: calc(100% - 48px);
  max-height: calc(100% - 30px);
  object-fit: contain;
  opacity: .55;
  filter: none;
}

.people__client--blurry[data-client-logo="petstra-gardens"] {
  --client-logo-width: 221.17px;
  --client-logo-height: 51.5px;
}

.people__client--blurry[data-client-logo="betta-agency"] {
  --client-logo-width: 143.08px;
  --client-logo-height: 61.87px;
}

.people__client--blurry[data-client-logo="capita-hq"] {
  --client-logo-width: 230.27px;
  --client-logo-height: 76.75px;
}

.people__client--blurry[data-client-logo="happy-matcha"] {
  --client-logo-width: 204.53px;
  --client-logo-height: 54.27px;
}

.people__client--blurry[data-client-logo="moochy-lou"] {
  --client-logo-width: 247.37px;
  --client-logo-height: 83.14px;
}

.people__client--blurry[data-client-logo="tradeo"] {
  --client-logo-width: 202.16px;
  --client-logo-height: 56.23px;
}

.people__client--blurry[data-client-logo="valubuild"] {
  --client-logo-width: 270px;
  --client-logo-height: 59.36px;
}

.people__client--blurry[data-client-logo="melbourne-decking-and-landscaping"] {
  --client-logo-width: 158.9px;
  --client-logo-height: 65.93px;
}

.people__client--blurry[data-client-logo="lavendersun"] {
  --client-logo-width: 259.85px;
  --client-logo-height: 49.12px;
}

.people__client--blurry[data-client-logo="govisually"] {
  --client-logo-width: 266.4px;
  --client-logo-height: 61.85px;
}

.people__client--blurry[data-client-logo="sleeping-puppy"] {
  --client-logo-width: 183.58px;
  --client-logo-height: 55.08px;
}

.people__client--blurry[data-client-logo="325-consulting"] {
  --client-logo-width: 224.08px;
  --client-logo-height: 71.42px;
}

.people__client--blurry[data-client-logo="crane-reliability"] {
  --client-logo-width: 155.9px;
  --client-logo-height: 77.96px;
}

.people__client--blurry[data-client-logo="specialist-hr"] {
  --client-logo-width: 177.01px;
  --client-logo-height: 43.65px;
}

.people__client--blurry[data-client-logo="plc-world"] {
  --client-logo-width: 232.47px;
  --client-logo-height: 38.47px;
}

.people__client--blurry[data-client-logo="id-fitouts"] {
  --client-logo-width: 167.18px;
  --client-logo-height: 45.7px;
}

.people__client--blurry[data-client-logo="essentials-for-health"] {
  --client-logo-width: 266.4px;
  --client-logo-height: 35.51px;
}
/* Mobile process cards share one content-sized track, with room below the copy. */
@media screen and (orientation: portrait) and (max-width: 800px),
       screen and (orientation: landscape) and (max-width: 1200px) and (max-height: 600px) {
  .steps .block {
    height: auto;
  }

  .steps__slides {
    display: grid;
    height: auto;
  }

  .steps__slide {
    position: relative;
    grid-area: 1 / 1;
    height: auto;
  }

  .steps__slide .mid span:last-child {
    display: flex;
    align-items: center;
  }

  .steps__slide .bottom {
    height: auto;
    padding-bottom: 2.5rem;
  }
}

/* Inline heart artwork is available on the first visible frame. */
.heart>svg{display:block;width:100%;height:auto}