@property --count {
  syntax: "<integer>";
  initial-value: 0;
  inherits: false;
}
body {
  background-color: white;
}

navigation-bar {
  --accent-colour: white;
}

body > header {
  --header-padding-bottom:0;
  --header-padding-top:var(--spacer0);
  place-items: start;
}
body > header.grid\:no-wrap {
  row-gap: 0px;
}
body > header .heading {
  font-size: 1.0625em;
  line-height: 1.6;
  font-weight: 700;
  color: #888888;
}
body > header .heading br {
  display: none;
}
body > header .sub-heading {
  font-size: 1.8rem;
}
body > header .header-contents {
  grid-column: 1/-1;
  display: flex;
  flex-direction: column;
  padding-bottom: var(--spacer1);
}
body > header #hero {
  grid-column: 1/-1;
  display: flex;
  position: relative;
  flex-direction: column;
  isolation: isolate;
  width: calc(100% + clamp(0%, 2vw, 20%));
  justify-self: center;
  align-self: end;
  margin-bottom: var(--spacer0-);
  max-width: 400px;
}
body > header #hero img {
  height: auto;
  width: auto;
}
body > header #hero svg {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: -10%;
  z-index: -1;
}
body > header #hero svg circle {
  transform-origin: center center;
  scale: 1.4;
  fill: url(#fade);
}
body > header .carers-online {
  display: flex;
  flex-direction: column;
  outline: 1px solid white;
  outline-offset: -0.5em;
  gap: 0;
  aspect-ratio: 1/1;
  border-radius: 50%;
  width: 10em;
  height: 10em;
  white-space: wrap;
  text-align: center;
  word-break: normal;
  line-height: 1.2;
  order: -1;
  font-size: clamp(1rem, 1.2vw, 1.7rem);
  align-self: flex-end;
  margin-bottom: -4em;
  transition: background var(--transition), color var(--transition);
}
body > header .carers-online span, body > header .carers-online::before {
  font-size: 2.8em;
  line-height: 1;
  font-weight: 200;
}
body > header .carers-online span {
  display: none;
}
body > header .carers-online::before {
  animation: counter 3s ease-in-out;
  animation-fill-mode: forwards;
  counter-reset: num var(--count);
  content: counter(num);
}
@keyframes counter {
  from {
    --count: 0;
  }
  to {
    --count: var(--count-value);
  }
}
body > header .additional-content {
  display: flex;
  z-index: 2;
  gap: var(--gutter1);
  margin-top: var(--gutter2);
}
body > header .additional-content .find-care-and-cta {
  grid-gap: var(--gutter1);
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  cursor: auto;
}
body > header .additional-content .find-care-and-cta .cta\:care-estimator .heading {
  font-size: 1.6rem;
  font-weight: 700;
}
body > header .additional-content .find-care-and-cta .cta\:care-estimator p {
  font-size: 1.6rem;
  text-wrap: balance;
}
body > header .additional-content .find-care-and-cta .cta\:care-estimator p a {
  color: var(--primary, #ff2871);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
@media (min-width: 901px) {
  body > header .header-contents {
    grid-column: 1/span 4;
    grid-row: 1;
  }
  body > header #hero {
    grid-column: 5/-1;
    grid-row: 1;
    max-width: none;
    justify-self: end;
  }
}

#introduction {
  position: relative;
  padding-bottom: var(--spacer0);
  margin-bottom: var(--spacer0);
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--spacer1) var(--spacer1);
}
@media (min-width: 739px) {
  #introduction carousel-slider {
    position: relative;
  }
  #introduction carousel-slider::before {
    content: "";
    position: absolute;
    top: 0;
    right: calc(var(--spacer1-) / 2);
    width: 1px;
    height: 100%;
    opacity: 0.5;
    border-left: 1px solid white;
  }
}
#introduction.background-bar\:brand-gradient {
  background: linear-gradient(var(--gradient-angle, 270deg), #ff715c var(--gradient-offset, 33%), #ff2871);
}
#introduction .content-wrapper {
  display: grid;
  gap: var(--gutter1);
  flex-direction: row;
  grid-template-columns: 2fr 1fr;
}
@media (max-width: 1300px) {
  #introduction .content-wrapper {
    grid-template-columns: 1fr;
  }
}
#introduction .content-wrapper {
  align-items: start;
}
#introduction .content-wrapper .rich-text {
  flex-basis: 500px;
}
#introduction .content-wrapper ul li {
  flex-basis: 240px;
}
#introduction > div {
  display: grid;
  grid-gap: var(--gutter1);
  align-items: start;
  height: -moz-fit-content;
  height: fit-content;
}
#introduction > div > div {
  display: flex;
  flex-direction: column;
  gap: var(--gutter1);
}
#introduction > div .heading {
  font-size: 2em;
  line-height: 1.3;
}
#introduction > div ul {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  gap: var(--gutter1) var(--gutter1);
  display: flex;
  flex-wrap: wrap;
}
body:not(.feature\:flexbox-gap) #introduction > div ul {
  gap: initial;
  margin-top: calc(-1 * var(--gutter1));
  margin-bottom: calc(-1 * var(--gutter1));
  left: calc(-1 * var(--gutter1));
  width: calc(100% + (var(--gutter1)));
}
body:not(.feature\:flexbox-gap) #introduction > div ul > * {
  margin: calc(var(--gutter1) / 2) calc(var(--gutter1) / 2);
}

#introduction > div ul li {
  display: flex;
  align-items: center;
}
#introduction > div ul li svg {
  background-color: #21B755;
  border-radius: 50%;
  margin-right: 1ch;
  width: 1.6em;
  height: 1.6em;
  min-width: 1.6em;
  min-height: 1.6em;
}
#introduction > div ul li svg use {
  transform: scale(0.6);
  transform-origin: center;
}
#introduction::after {
  content: "";
  clip-path: ellipse(55% 50% at 50% 0%);
  position: absolute;
  background: linear-gradient(var(--gradient-angle, 270deg), #ff715c var(--gradient-offset, 33%), #ff2871);
  top: 100%;
  height: 100px;
  width: 100%;
  left: 0;
  z-index: -1;
  display: block;
}

#trusted-by {
  position: relative;
  margin-top: var(--spacer1-);
  padding-top: var(--spacer2);
  padding-bottom: calc(var(--spacer1) + var(--gutter2));
  z-index: -2;
}
#trusted-by::after {
  content: "";
  clip-path: ellipse(55% 50% at 50% 100%);
  position: absolute;
  background-color: white;
  bottom: 0%;
  height: 100px;
  width: 100%;
  left: 0;
  z-index: -1;
  display: block;
}

[id|=trusted-by] .heading {
  font-size: 1.5625em;
  line-height: 1.4;
}
[id|=trusted-by] .sub-heading {
  font-size: 1.0625em;
  line-height: 1.6;
}

#trusted-by-we-build .illustration {
  max-width: 300px;
  justify-self: center;
  align-self: center;
  margin-bottom: var(--spacer0);
}
#trusted-by-we-build::after {
  content: "";
  clip-path: ellipse(55% 50% at 50% 100%);
  position: absolute;
  background: linear-gradient(180deg, #dddddd, transparent);
  top: 0%;
  height: 300px;
  width: 100%;
  -webkit-mask: linear-gradient(90deg, transparent, black, black, transparent);
          mask: linear-gradient(90deg, transparent, black, black, transparent);
  left: 0;
  z-index: -1;
  display: block;
}

#types-of-care {
  row-gap: var(--spacer0);
  margin-top: var(--spacer1-);
  margin-bottom: var(--spacer2-);
  background: linear-gradient(180deg, white, #F7F7F7);
}
#types-of-care article {
  display: grid;
  grid-gap: 0 var(--gutter1);
  grid-template-areas: "header    header" "subheader subheader" "image     list" "image     button";
}
#types-of-care article .heading {
  grid-area: header;
  font-size: 1.5625em;
  line-height: 1.4;
  text-align: center;
}
#types-of-care article .sub-heading {
  grid-area: subheader;
  text-align: center;
  margin-bottom: var(--gutter1);
}
#types-of-care article figure {
  isolation: isolate;
  grid-area: image;
  position: relative;
  display: flex;
  place-content: center;
  place-items: center;
  margin-top: var(--gutter0);
  --aspect-ratio: 1/1;
  aspect-ratio: var(--aspect-ratio);
}
@supports not (aspect-ratio: 1/1) {
  #types-of-care article figure {
    aspect-ratio: initial;
  }
  #types-of-care article figure::before {
    content: "";
    float: left;
    height: 0;
    padding-top: calc(1 / 1 * 100%);
  }
}
#types-of-care article figure::before {
  content: "";
  min-width: 400px;
  width: 100%;
  border-radius: 50%;
  position: absolute;
  aspect-ratio: 1/1;
  top: 0;
  left: 50%;
  z-index: -1;
  background: linear-gradient(var(--background-orb-colour, #EBF1FA), transparent 50%);
  transform: translate(-50%);
}
#types-of-care article figure img {
  margin: auto;
  height: 100%;
  -o-object-position: 50% 50%;
     object-position: 50% 50%;
}
#types-of-care article figure img[src*=elderly-man-using-a-zimmer-frame-with-a-carer-carrying-his-grocery-shopping] {
  max-width: 180px;
}
#types-of-care article ul {
  grid-area: list;
  align-self: center;
  display: grid;
  grid-template-rows: repeat(3, 1fr);
  --icon-size: 1.2em;
}
#types-of-care article .button {
  grid-area: button;
}
#types-of-care article.care-at-home {
  --list-style-colour: #0F72C0;
  --background-orb-colour: #E4EAF1;
}
#types-of-care article.care-homes {
  --list-style-colour: #0C9B9A;
  --background-orb-colour: #E8F0F1;
}
@media (max-width: 1080px) {
  #types-of-care article figure {
    aspect-ratio: initial;
    margin-top: var(--gutter1);
  }
  #types-of-care article figure img {
    height: 200px;
  }
  #types-of-care article figure::before {
    min-width: initial;
    left: 0;
    transform: initial;
    opacity: 0.5;
  }
}
@media (max-width: 480px) {
  #types-of-care article figure::before {
    width: calc(100vw - var(--scroll-bar-width, 0px) - var(--gutter1));
  }
}
#types-of-care ul {
  display: flex;
  flex-direction: column;
  list-style-type: none;
  flex-wrap: wrap;
  gap: var(--gutter0) var(--gutter0);
  display: flex;
  flex-wrap: wrap;
}
body:not(.feature\:flexbox-gap) #types-of-care ul {
  gap: initial;
  margin-top: calc(-1 * var(--gutter0));
  margin-bottom: calc(-1 * var(--gutter0));
  left: calc(-1 * var(--gutter0));
  width: calc(100% + (var(--gutter0)));
}
body:not(.feature\:flexbox-gap) #types-of-care ul > * {
  margin: calc(var(--gutter0) / 2) calc(var(--gutter0) / 2);
}

#types-of-care ul li {
  display: flex;
  align-items: center;
  font-weight: 600;
}

#specialist-care .heading {
  font-size: 1.5625em;
  line-height: 1.4;
}
#specialist-care .sub-heading {
  font-size: 1.0625em;
  line-height: 1.6;
  margin-top: 0.8em;
}
#specialist-care ul {
  grid-auto-rows: 1fr;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
@media (max-width: 480px) {
  #specialist-care ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
#specialist-care[class*=background-bar] {
  background: linear-gradient(180deg, #F7F7F7 60%, transparent);
}

#statistics {
  display: grid;
  margin-bottom: var(--spacer1-);
  padding-top: var(--spacer1);
}
#statistics ul {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  align-items: center;
  gap: var(--gutter4);
  justify-self: center;
  max-width: 1000px;
}
@media (max-width: 960px) {
  #statistics ul {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 480px) {
  #statistics ul {
    grid-template-columns: 1fr;
  }
}
#statistics ul li {
  list-style-type: none;
  text-align: center;
  position: relative;
}
#statistics ul li.is\:inview .number::before {
  animation: stat-count 1s cubic-bezier(0.33, 1, 0.68, 1) forwards;
}
#statistics ul li .number {
  font-size: clamp(3rem, 4vw, 5rem);
  display: block;
  color: var(--primary, #ff2871);
  line-height: 1;
  font-family: "Open Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
}
#statistics ul li .number::before {
  counter-reset: num var(--count);
  font-variant-numeric: tabular-nums;
  content: var(--counter-prefix, "")counter(num)var(--counter-suffix, "");
}
@keyframes stat-count {
  0% {
    --count: 0;
  }
  100% {
    --count: var(--count-value);
  }
}
#statistics ul li .number[data-count-prefix] {
  --counter-prefix: attr(data-count-prefix);
}
#statistics ul li .number[data-count-suffix] {
  --counter-suffix: attr(data-count-suffix);
}
#statistics ul li .description {
  font-size: 1.6rem;
  margin-top: 0.5em;
}
@media (min-width: 961px) {
  #statistics ul li + li::before {
    content: "";
    position: absolute;
    top: -20%;
    left: calc(-1 * var(--gutter1) * 1.2);
    height: 140%;
    width: 1px;
    border-left: 1px solid #dddddd;
  }
}

#keeping-you-informed {
  padding-top: var(--spacer1);
}
#keeping-you-informed > .heading {
  text-align: center;
  color: #333333;
  font-size: 1.5625em;
  line-height: 1.4;
}
#keeping-you-informed > .sub-heading {
  text-align: center;
  font-size: 1.0625em;
  line-height: 1.6;
  margin-top: 0.8em;
}
#keeping-you-informed > .button {
  margin: 0 auto;
}
#keeping-you-informed article-list {
  margin-top: var(--spacer1);
  width: 100%;
  margin-inline: auto;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
}
#keeping-you-informed article-list article {
  background-color: #F7F7F7;
  padding-bottom: var(--gutter1);
  border-radius: var(--border-radius);
}
#keeping-you-informed article-list article .heading {
  font-size: clamp(1.2rem, 4vw, 2rem);
}
#keeping-you-informed article-list article > *:not(.image-container) {
  padding-inline: var(--gutter1);
}
@media (min-width: 480px) and (max-width: 960px) {
  #keeping-you-informed article-list article {
    --image-height:150px;
  }
}
@media (max-width: 480px) {
  #keeping-you-informed article-list {
    row-gap: var(--spacer0);
  }
  #keeping-you-informed article-list .article {
    --image-height:150px;
  }
}
/*# sourceMappingURL=../sourcemaps/pages/home.css.map */