/*
Theme Name: Brdigelands
Description: Custom WordPress theme made by 52 Pick-up Inc.
Author: 52 Pick-up Inc.
Author URI: http://52pick-up.com
Version: 1.0.0
*/
/*-------------------------------
>>> VARIABLES:
-------------------------------*/
/*
  THE TWO GAPS EITHER SIDE OF THE REGISTER FIELDS - from the intro copy down to
  the first field, and from the consent box down to the Submit button. One number
  rather than two, because matching each other is the whole point of it: they were
  40 and 64 and the ask was to bring them together, the lower one to two thirds of
  what it was and the upper one up a little to meet it.

  It lives here rather than in forms.scss with the rest of the register tokens
  because the upper gap is set in sections.scss, which is imported first and cannot
  see them. Consumed in .contact-form there and in $register-footer-space in
  forms.scss - and note that one is spent as a margin net of the form grid's own
  row gap, so the two rules do not look alike even though the gap is the same.
*/
/*-------------------------------
>>> THEME SCSS:
-------------------------------*/
/*--------------------------------------------------------------
THEME / BOOTSTRAP
--------------------------------------------------------------*/
@import "css/bootstrap/bootstrap.min.css";
/*--------------------------------------------------------------
THEME / SPLIDE
--------------------------------------------------------------*/
@import "css/splide/splide-core.min.css";
/*--------------------------------------------------------------
THEME / MIXINS
--------------------------------------------------------------*/
/* --- THE BRIDGE ARC WIPE, SHARED BY EVERY BUTTON CARRYING THE ICON - THE TWO --- */
/* --- REGISTER BUTTONS AND THE LEARN MORE BUTTONS IN THE BUILDERS BLOCKS. --- */
/* --- COMES IN TWO HALVES: THE RESTING STROKE GOES ON THE BUTTON ITSELF, AND --- */
/* --- THE TRIGGER GOES INSIDE THAT BUTTON'S HOVER BLOCK. THE WIPE IS A STROKE --- */
/* --- LAID ALONG THE CENTRE LINE OF THE FILLED BAND RATHER THAN A MASK, SO IT --- */
/* --- NEEDS NO IDS AND CAN BE USED AS MANY TIMES ON A PAGE AS YOU LIKE - SEE --- */
/* --- $bridge-arc-length IN STYLE.SCSS FOR WHERE THE NUMBERS COME FROM --- */
/* --- THE BUILDER CARD'S REVEALED STATE. A MIXIN RATHER THAN ONE SELECTOR --- */
/* --- LIST BECAUSE ITS TWO TRIGGERS CANNOT SHARE A RULE - TAP AND KEYBOARD --- */
/* --- FOCUS APPLY EVERYWHERE, WHILE HOVER IS SHUT INSIDE A CAPABILITY QUERY --- */
/* --- AND THE TRIGGER. NO DELAY, SO THE ARC STARTS DRAWING WITH THE COLOUR --- */
/* --- RATHER THAN AFTER IT --- */
/*--------------------------------------------------------------
THEME / TYPOGRAPHY
--------------------------------------------------------------*/
h1, h2, h3, h4, h5, h6 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}
h1 *, h2 *, h3 *, h4 *, h5 *, h6 * {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
}

h1 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 64px;
  margin-bottom: 44px;
}
@media (max-width: 991.98px) {
  h1 {
    font-size: 52px;
  }
}
@media (max-width: 767.98px) {
  h1 {
    font-size: 44px;
  }
}
@media (max-width: 575.98px) {
  h1 {
    font-size: 36px;
  }
}
@media (max-width: 375px) {
  h1 {
    font-size: 32px;
  }
}
@media (max-width: 349px) {
  h1 {
    font-size: 28px;
  }
}

h2 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 36px;
  margin-bottom: 20px;
}
@media (max-width: 1199.98px) {
  h2 {
    font-size: 32px;
  }
}
@media (max-width: 991.98px) {
  h2 {
    font-size: 30px;
  }
}
@media (max-width: 575.98px) {
  h2 {
    font-size: 26px;
  }
}

h3 {
  font-size: 28px;
  margin-bottom: 20px;
}
@media (max-width: 1199.98px) {
  h3 {
    font-size: 25px;
  }
}
@media (max-width: 575.98px) {
  h3 {
    font-size: 22px;
  }
}

p, li {
  margin-bottom: 16px;
  font-size: 18px;
  line-height: 1.4;
}
p *, li * {
  font-size: 18px;
  line-height: 1.4;
}
p:last-child, li:last-child {
  margin-bottom: 0;
}

li {
  margin-bottom: 0;
}

strong {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}
strong * {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}

sup {
  top: -0.3em;
  font-size: 75% !important;
}

* {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  color: #000000;
}

/*--------------------------------------------------------------
THEME / ANIMATIONS
--------------------------------------------------------------*/
.animate, .animate-container {
  will-change: opacity;
}
.animate .animate.contained, .animate-container .animate.contained {
  opacity: 1;
}
.animate.active, .animate-container.active {
  opacity: 1;
}
.animate.sequence-up, .animate-container.sequence-up {
  transform: translateY(16px);
  opacity: 0;
  transition: all 1.6s cubic-bezier(0.56, 0, 0.24, 1);
}
.animate.sequence-up.active, .animate-container.sequence-up.active {
  opacity: 1;
  transform: translateY(0);
}
.animate.slide-image, .animate-container.slide-image {
  overflow: hidden;
  position: relative;
  opacity: 1;
}
.animate.slide-image div, .animate-container.slide-image div {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transform: translate(0%, 0%);
  background: #F3EEE9;
  -webkit-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
}
.animate.slide-image.active div, .animate-container.slide-image.active div {
  transform: translate(0%, -100%);
}
.animate.slide-image-right, .animate-container.slide-image-right {
  overflow: hidden;
  position: relative;
  opacity: 1;
}
.animate.slide-image-right div, .animate-container.slide-image-right div {
  position: absolute;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  transform: translate(0%, 0%);
  background: #F3EEE9;
  -webkit-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
  transition: transform 1.6s cubic-bezier(0.56, 0, 0.24, 1);
}
.animate.slide-image-right.active div, .animate-container.slide-image-right.active div {
  transform: translate(100%, 0%);
}
.animate.fadeUp, .animate-container.fadeUp {
  transform: translateY(200px);
  transition: opacity 1.5s ease, transform 2.5s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, transform;
}
.animate.fadeUp.active, .animate-container.fadeUp.active {
  transform: translateY(0);
}
.animate.fadeLeft, .animate-container.fadeLeft {
  transform: translateX(200px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  will-change: opacity, transform;
}
.animate.fadeLeft.active, .animate-container.fadeLeft.active {
  transform: translateX(0);
}
.animate.fadeRight, .animate-container.fadeRight {
  transform: translateX(-200px);
  transition: opacity 1.5s ease, transform 1.5s ease;
  will-change: opacity, transform;
}
.animate.fadeRight.active, .animate-container.fadeRight.active {
  transform: translateX(0);
}
.animate.scaleUp, .animate-container.scaleUp {
  transform: scale(0.5);
  transition: opacity 1.5s ease, transform 2.5s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: opacity, transform;
}
.animate.scaleUp.active, .animate-container.scaleUp.active {
  transform: scale(1);
}
.animate.bg-cover, .animate-container.bg-cover {
  position: relative;
  opacity: 1;
  overflow: hidden;
}
.animate.bg-cover:after, .animate-container.bg-cover:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #ffffff;
  transition: transform 3s cubic-bezier(0.19, 1, 0.22, 1);
  will-change: transform;
}
.animate.bg-cover.active:after, .animate-container.bg-cover.active:after {
  transform: translateX(100%);
}
.animate.delay1, .animate-container.delay1 {
  transition-delay: 0.8s;
}
.animate.delay2, .animate-container.delay2 {
  transition-delay: 1.6s;
}
.animate.delay3, .animate-container.delay3 {
  transition-delay: 2.4s;
}

@-webkit-keyframes fadeOutDown {
  0% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
}
@-moz-keyframes fadeOutDown {
  0% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
}
@keyframes fadeOutDown {
  0% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
  100% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
}
@-webkit-keyframes fadeInUp {
  0% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  50% {
    -moz-transform: scale(1.2);
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    -webkit-opacity: 1.2;
    -moz-opacity: 1;
    opacity: 1;
  }
  100% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
}
@-moz-keyframes fadeInUp {
  0% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
}
@keyframes fadeInUp {
  0% {
    -moz-transform: scale(0);
    -webkit-transform: scale(0);
    transform: scale(0);
    -webkit-opacity: 0;
    -moz-opacity: 0;
    opacity: 0;
  }
  100% {
    -moz-transform: scale(1);
    -webkit-transform: scale(1);
    transform: scale(1);
    -webkit-opacity: 1;
    -moz-opacity: 1;
    opacity: 1;
  }
}
@-webkit-keyframes bounce {
  0% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  25% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  50% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  75% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  100% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@-moz-keyframes bounce {
  0% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  25% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  50% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  75% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  100% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@keyframes bounce {
  0% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  25% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  50% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
  75% {
    -moz-transform: translateY(50%);
    -webkit-transform: translateY(50%);
    transform: translateY(50%);
  }
  100% {
    -moz-transform: translateY(0%);
    -webkit-transform: translateY(0%);
    transform: translateY(0%);
  }
}
@-webkit-keyframes bounceHorz {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  25% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  50% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  75% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  100% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-moz-keyframes bounceHorz {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  25% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  50% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  75% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  100% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@keyframes bounceHorz {
  0% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  25% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  50% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  75% {
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
  }
  100% {
    -moz-transform: translateX(0%);
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
}
@-webkit-keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@-moz-keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    opacity: 1;
  }
}
/* --- HERO FLOWERS - A CONTINUOUS TURN ON THE SPOT. THE PIVOT ITSELF LIVES ON --- */
/* --- THE ELEMENT AS TRANSFORM-ORIGIN, SEE SECTIONS.SCSS. A PLAIN FULL TURN, --- */
/* --- SO FRAME ONE IS THE ARTWORK AT THE ANGLE IT WAS DRAWN AT --- */
@-webkit-keyframes flowersSpin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}
@keyframes flowersSpin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/*--------------------------------------------------------------
THEME / COMMON
--------------------------------------------------------------*/
/*
  Below lg every section takes the same 56px top and bottom. It used to step down
  100 / 80 / 60 / 44 (and 32 on one of the four), which meant a phone got a
  different rhythm at four different widths and no two sections agreed once the
  desktop overrides in sections.scss were in play. One number below the
  breakpoint is the whole point - if a section needs more room on a phone it
  should say so itself rather than the shared step being bent for it.

  md is 768 in this theme, so breakpoint-down(md) is everything up to 991.98 -
  tablet portrait included, which is what this is for.
*/
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.editor-content > *:last-child {
  margin-bottom: 0;
}
@media (max-width: 575.98px) {
  .editor-content h1 br, .editor-content h2 br, .editor-content h3 br, .editor-content h4 br, .editor-content h5 br, .editor-content h6 br {
    display: none;
  }
}
.editor-content h2 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 52px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  letter-spacing: -0.52px;
  margin-top: 40px;
  /*
    Tightened from 24 to the subhead under it, asked for on the section headings.
    Worth knowing what this number is and is not: line-height is normal, so each
    of these boxes carries half a line of leading below the glyphs, and the gap
    that is actually seen is this margin plus that leading. Measured on The Vision
    it was 46px of clear space for a 24px margin, and 16 brings that to 38 - about
    the cap height of the heading itself, which is what the design reads at.
    Measure the ink rather than the boxes if this is ever retuned.
  */
  margin-bottom: 16px;
  /*
    At the top of a block that margin stacks on the section's own padding. On
    desktop that is wanted - the 40 is part of how the headings land where the
    design puts them, and the column beside them is offset to match, see
    .heading-row in sections.scss. Below lg the padding is a flat 56 and the
    extra 40 made every top with a heading in it half as deep again as its own
    bottom, so it comes off there. h3 and h4 already do this with their own
    :not(:first-child); this is the same idea, just kept to the one breakpoint
    where it matters.
  */
}
@media (max-width: 991.98px) {
  .editor-content h2 {
    /* --- A QUARTER SMALLER ON THE SMALL SCREENS, AS ASKED. 52 IS A LOT OF --- */
    /* --- HEADING ON A PHONE - THE TRACKING GOES WITH IT, SINCE IT IS SET AT --- */
    /* --- -0.01EM OF THE SIZE AND WOULD OTHERWISE READ TIGHTER AT THE SMALLER --- */
    /* --- ONE --- */
    font-size: 39px;
    letter-spacing: -0.39px;
  }
  .editor-content h2:first-child {
    margin-top: 0;
  }
}
.editor-content h3 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-bottom: 20px;
}
.editor-content h3:not(:first-child) {
  margin-top: 40px;
}
.editor-content h4 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 20px;
}
.editor-content h4:not(:first-child) {
  margin-top: 32px;
}
.editor-content h5 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 20px;
}
.editor-content h5:not(:first-child) {
  margin-top: 32px;
}
.editor-content h6 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  font-size: 12px;
  font-weight: 600;
  margin-bottom: 20px;
}
.editor-content h6:not(:first-child) {
  margin-top: 32px;
}
.editor-content p {
  margin-bottom: 20px;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.24px;
}
.editor-content p:last-of-type {
  margin-bottom: 0;
}
.editor-content ol li {
  padding-right: 0;
  margin-bottom: 10px;
}
.editor-content ul {
  padding-left: 20px;
  margin-bottom: 16px;
  max-width: unset;
}
.editor-content ul:not(:last-child) {
  margin-bottom: 44px;
}
.editor-content ul li {
  font-size: 16px;
  margin-bottom: 8px;
  margin-bottom: 10px;
  background-position: top 6px left 0px;
}
.editor-content a {
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  .editor-content a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  .editor-content a:hover, .editor-content a:focus {
    color: #595959;
  }
}
.editor-content a {
  text-decoration: underline !important;
  display: inline;
}
.editor-content a.external {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  position: relative;
}
.editor-content a.external svg {
  position: relative;
  bottom: 2px;
  margin-left: 4px;
  width: 16px;
}
.editor-content a.external svg path {
  fill: #000000;
  -webkit-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 991.98px) {
  .editor-content a.external svg {
    width: 15px;
  }
}
@media (max-width: 575.98px) {
  .editor-content a.external svg {
    width: 13px;
    margin-left: 3px;
  }
}
@media (min-width: 768px) {
  .editor-content a.external:hover svg path, .editor-content a.external:focus svg path {
    fill: #595959;
  }
}
.editor-content a.external {
  display: inline;
}
.editor-content a.long-link {
  word-break: break-all;
}
@media (min-width: 768px) {
  .editor-content a:hover {
    color: #595959;
  }
}
.editor-content img {
  height: auto;
  width: auto;
  max-width: 100%;
}
.editor-content blockquote {
  margin-top: 50px;
  margin-bottom: 50px;
  border-left: 2px solid #595959;
  padding-left: 16px;
  padding-top: 10px;
  padding-bottom: 10px;
}
.editor-content blockquote p {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}
.editor-content blockquote cite {
  font-style: normal;
}
.editor-content .wrap {
  padding-bottom: 30px;
  display: inline-block;
  width: 100%;
}
@media (min-width: 992px) {
  .editor-content .wrap > ul {
    width: 50%;
    float: left;
  }
}
@media (max-width: 991.98px) {
  .editor-content .wrap > ul {
    width: 100%;
  }
}
.editor-content .wrap > ul > ul {
  width: 100%;
}
.editor-content .wp-block-columns .wp-block-column figure {
  margin: 0;
}
@media (min-width: 782px) {
  .editor-content .wp-block-columns .wp-block-column {
    padding-left: 10px;
    padding-right: 10px;
  }
  .editor-content .wp-block-columns .wp-block-column:first-child {
    padding-left: 0;
  }
  .editor-content .wp-block-columns .wp-block-column:last-child {
    padding-right: 0;
  }
  .editor-content .wp-block-columns .wp-block-column * {
    font-size: 18px;
  }
}
.editor-content .links {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-top: 60px;
}
@media (max-width: 991.98px) {
  .editor-content .links {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    margin-top: 44px;
  }
}
.editor-content .links .acf-link:not(:last-child) {
  margin-right: 20px;
}
@media (max-width: 991.98px) {
  .editor-content .links .acf-link:not(:last-child) {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
.editor-content .links .acf-link a {
  outline: none !important;
  text-decoration: none !important;
  display: inline-block;
  background: transparent;
  cursor: pointer;
  border: 1px solid #000000;
  color: #000000;
  border-radius: 4px;
  padding-left: 40px;
  padding-right: 40px;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  font-size: 12px;
  text-transform: uppercase;
}
.editor-content .links .acf-link a:focus {
  outline: none !important;
}
.editor-content .links .acf-link a:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
@media (min-width: 768px) {
  .editor-content .links .acf-link a {
    -webkit-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  .editor-content .links .acf-link a * {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  .editor-content .links .acf-link a:hover, .editor-content .links .acf-link a:focus {
    background: #000000;
    color: #ffffff;
  }
  .editor-content .links .acf-link a:hover *, .editor-content .links .acf-link a:focus * {
    color: #ffffff;
  }
}
.editor-content.small-content a.external svg {
  bottom: 2px;
  width: 14px;
}

.social-media .links {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
  -moz-box-align: end;
  -ms-flex-align: end;
  -webkit-align-items: flex-end;
  align-items: flex-end;
}
.social-media span {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
}
.social-media .links {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
.social-media .links .social-link {
  display: block;
  background-color: #232729;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  text-align: center;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  text-decoration: none !important;
  -webkit-transition: background-color 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -moz-transition: background-color 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -ms-transition: background-color 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -o-transition: background-color 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  transition: background-color 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
}
.social-media .links .social-link:not(:last-child) {
  margin-right: 15px;
}
.social-media .links .social-link svg {
  height: 20px;
  width: auto;
}
.social-media .links .social-link svg path {
  fill: #D6D6D6;
  -webkit-transition: fill 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -moz-transition: fill 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -ms-transition: fill 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  -o-transition: fill 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
  transition: fill 250ms cubic-bezier(0.64, 0.04, 0.32, 1);
}
@media (min-width: 768px) {
  .social-media .links .social-link:hover, .social-media .links .social-link:focus {
    background-color: #ffffff;
  }
  .social-media .links .social-link:hover svg path, .social-media .links .social-link:focus svg path {
    fill: #000000;
  }
}
.social-media.light .links .social-link {
  background-color: #ffffff;
}
.social-media.light .links .social-link svg path {
  fill: #A30700;
}
@media (min-width: 768px) {
  .social-media.light .links .social-link:hover, .social-media.light .links .social-link:focus {
    background-color: #A30700;
  }
  .social-media.light .links .social-link:hover svg path, .social-media.light .links .social-link:focus svg path {
    fill: #ffffff;
  }
}

.social-share {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
.social-share > span {
  font-size: 14px;
  margin-bottom: 4px;
}
.social-share a {
  text-decoration: none !important;
  padding: 2px;
}
.social-share a svg {
  width: 18px;
}
.social-share a svg path {
  -webkit-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: fill 250ms cubic-bezier(0.77, 0, 0.175, 1);
  fill: #000000;
}
.social-share a span {
  position: relative;
  top: 2px;
  margin-left: 3px;
  font-size: 14px;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  .social-share a:hover svg path {
    fill: #595959;
  }
  .social-share a:hover span {
    color: #595959;
  }
}

.accordion-items .items {
  padding: 0;
  margin: 0;
  list-style: none;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  left: 0;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
@media (max-width: 1199.98px) {
  .accordion-items .items {
    position: relative;
    width: 100%;
  }
}
@media (max-width: 991.98px) {
  .accordion-items .items {
    order: 1;
  }
}
.accordion-items .items .item {
  padding-bottom: 30px;
  margin-top: 30px;
  margin-bottom: 30px;
  border-bottom: 1px solid #c2c2c2;
}
.accordion-items .items .item > .label {
  margin-bottom: 0;
}
.accordion-items .items .item > .label button {
  position: relative;
  width: 100%;
  text-align: left;
}
.accordion-items .items .item > .label button:focus {
  outline: none !important;
}
.accordion-items .items .item > .label button:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
.accordion-items .items .item > .label button {
  padding: 0;
  border: none;
  background: none;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-transition: color 250ms ease;
  -moz-transition: color 250ms ease;
  -ms-transition: color 250ms ease;
  -o-transition: color 250ms ease;
  transition: color 250ms ease;
}
.accordion-items .items .item > .label button svg {
  -webkit-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 768px) {
  .accordion-items .items .item > .label button:hover {
    color: #000000;
  }
}
.accordion-items .items .item > .label.active button {
  color: #000000;
}
.accordion-items .items .item > .label.active button:before, .accordion-items .items .item > .label.active button:after {
  background-color: #000000;
}
.accordion-items .items .item > .label.active button svg {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
@media (min-width: 768px) {
  .accordion-items .items .item > .label:hover button:before, .accordion-items .items .item > .label:hover button:after {
    background-color: #000000;
  }
  .accordion-items .items .item > .label:hover button span.label-span {
    background: #000000;
    border: 1px solid #000000;
  }
}
.accordion-items .items .item .accordion-content {
  position: relative;
  overflow: hidden;
  height: 1px;
  -webkit-transition: height 500ms ease;
  -moz-transition: height 500ms ease;
  -ms-transition: height 500ms ease;
  -o-transition: height 500ms ease;
  transition: height 500ms ease;
}
.accordion-items .items .item .accordion-content .wrap {
  padding-bottom: 20px;
}
.accordion-items .items .item .accordion-content ul li {
  list-style: none;
}
.accordion-items .items .item .accordion-content ul li:before {
  color: #000000;
  display: inline-block;
  width: 1em;
  margin-left: -1em;
}
.accordion-items .items .item .accordion-content ul li > ul li {
  position: relative;
}
.accordion-items .items .item .accordion-content ul li > ul li:before {
  content: "";
  position: absolute;
  background-color: #000000;
  width: 8px;
  height: 1px;
  left: 0;
  top: 12px;
}
.accordion-items .items .item:first-of-type .label:after {
  content: none;
}
.accordion-items .items .item.alt-style {
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  position: relative;
}
.accordion-items .items .item.alt-style:after {
  content: "";
  position: absolute;
  background: #c2c2c2;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
.accordion-items .items .item.alt-style > .label {
  position: relative;
  padding-left: 0;
  padding-right: 0;
}
.accordion-items .items .item.alt-style > .label button {
  padding-top: 15px;
  padding-bottom: 15px;
}
.accordion-items .items .item.alt-style > .label:before, .accordion-items .items .item.alt-style > .label:after {
  content: "";
  position: absolute;
  top: 28px;
  right: 0;
  width: 16px;
  height: 1px;
  background-color: #000000;
}
.accordion-items .items .item.alt-style > .label:after {
  -ms-transform: rotate(90deg); /* IE 9 */
  -webkit-transform: rotate(90deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  transform: rotate(90deg);
  -webkit-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
.accordion-items .items .item.alt-style > .label svg {
  display: none;
}
.accordion-items .items .item.alt-style > .label.active:after {
  -ms-transform: rotate(0deg); /* IE 9 */
  -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  transform: rotate(0deg);
}
.accordion-items .items .item.alt-style .accordion-content {
  padding-left: 0;
  padding-right: 0;
}
.accordion-items .items .item.alt-style .accordion-content ul {
  padding-left: 13px;
}
.accordion-items .items .item.alt-style .accordion-content ul li {
  list-style: disc;
}

.bg-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: 50%;
  background-repeat: no-repeat;
}
.bg-image.bg-fade {
  opacity: 0 !important;
  -webkit-transition: opacity 250ms ease;
  -moz-transition: opacity 250ms ease;
  -ms-transition: opacity 250ms ease;
  -o-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}
.bg-image.bg-fade.active {
  opacity: 1 !important;
}

.youtube-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  max-width: 100%;
}
.youtube-embed iframe, .youtube-embed object, .youtube-embed embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.share-links p {
  font-size: 18px;
  margin-bottom: 24px;
}
.share-links nav {
  margin-bottom: 8px;
}
.share-links nav > div {
  margin-bottom: 4px;
}
.share-links nav > div .icon-link {
  position: relative;
  padding-left: 30px;
  text-decoration: none !important;
}
.share-links nav > div .icon-link svg {
  position: absolute;
  height: 20px;
  width: auto;
  left: 0;
}
.share-links nav > div .icon-link svg path {
  fill: #292929;
}
.share-links nav > div .icon-link span {
  color: #292929;
}

.notran {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}

/* --- VISUALLY HIDDEN, STILL READ OUT BY SCREEN READERS --- */
.screenreader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.post-info span {
  font-size: 14px;
}
.post-info span:nth-child(2) {
  position: relative;
  margin-left: 16px;
}
.post-info span:nth-child(2):before {
  content: "";
  position: absolute;
  background: #000000;
  width: 1px;
  height: 11px;
  top: 2px;
  left: -11px;
}

.post-block {
  -ms-flex: 0 0 33.3333333333%;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  margin-bottom: 30px;
}
@media (max-width: 1199.98px) {
  .post-block {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
  }
}
@media (max-width: 767.98px) {
  .post-block {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
  }
}
.post-block .inner {
  background-color: #F2F4F5;
  border: 4px solid #F2F4F5;
  border-radius: 16px;
  height: 100%;
  text-decoration: none !important;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 0px 0 rgba(0, 0, 0, 0);
  -webkit-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: all 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 768px) {
  .post-block .inner:hover {
    -webkit-box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.1);
    box-shadow: 6px 6px 16px 0 rgba(0, 0, 0, 0.1);
  }
}
.post-block .image {
  background-color: #ffffff;
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100/64;
  object-fit: cover;
  object-position: 50%;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.post-block .content {
  padding: 25px;
}
@media (max-width: 575.98px) {
  .post-block .content {
    padding: 20px;
  }
}
@media (max-width: 349px) {
  .post-block .content {
    padding: 15px;
  }
}
.post-block .content .title h2 {
  font-family: "sofia-pro", sans-serif;
  font-weight: 700;
  font-style: normal;
  font-size: 28px;
}
@media (max-width: 767.98px) {
  .post-block .content .title h2 {
    font-size: 26px;
  }
}
@media (max-width: 575.98px) {
  .post-block .content .title h2 {
    font-size: 24px;
  }
}
@media (max-width: 349px) {
  .post-block .content .title h2 {
    font-size: 22px;
  }
}
.post-block .content .title h2 {
  margin-bottom: 8px;
}
.post-block .content .preview p {
  font-size: 16px;
}
.post-block .content .post-info {
  margin-top: 20px;
}

button {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  outline: none !important;
}
button:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
button.scroll-down {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
button.scroll-down > div {
  background-color: rgba(255, 255, 255, 0.24);
  height: 44px;
  width: 1px;
  overflow: hidden;
  margin-right: 20px;
  position: relative;
}
button.scroll-down > div > div {
  animation-name: scrollDown;
  animation-duration: 2.4s;
  animation-iteration-count: infinite;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff);
  width: 1px;
  height: 24px;
}
button.scroll-down span {
  font-size: 14px;
}

img {
  width: 100%;
}

figcaption {
  margin-top: 10px;
  color: #595959;
  font-size: 13px;
}

hr {
  border-top: 1px solid #c2c2c2;
  margin-top: 30px;
  margin-bottom: 30px;
}

table, tr, td {
  border: 1px solid #b1b2b7;
}

td {
  padding: 5px 10px;
}

p img {
  max-width: 100%;
  width: auto;
  height: auto;
  margin-top: 20px;
  margin-bottom: 20px;
}
p.embed-p {
  max-width: 1080px;
  margin-top: 60px;
  margin-bottom: 60px;
}

a:focus {
  outline: none !important;
}
a:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
a {
  cursor: pointer;
}

/*
  Only applied by fadeInImages() to images the browser actually deferred, so an
  image that is already cached, or a page with no javascript, shows it straight
  away rather than sitting at zero opacity
*/
img.fade-in {
  -webkit-transition: opacity 350ms ease;
  -moz-transition: opacity 350ms ease;
  -ms-transition: opacity 350ms ease;
  -o-transition: opacity 350ms ease;
  transition: opacity 350ms ease;
  opacity: 0;
}
img.fade-in.is-loaded {
  opacity: 1;
}

/*
  Splide drops a spinner in while a slide loads. The slides are preloaded well
  ahead of being reached, so it would only ever flash
*/
.splide__spinner {
  display: none;
}

.splide .splide__arrow {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background-color: #ffffff;
  -webkit-transition: background-color 250ms ease, opacity 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 250ms ease, opacity 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 250ms ease, opacity 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 250ms ease, opacity 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 250ms ease, opacity 1600ms cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.125);
  -moz-box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.125);
  box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.125);
}
.splide .splide__arrow svg {
  width: 18px;
  height: auto;
}
@media (min-width: 768px) {
  .splide .splide__arrow:hover {
    background-color: #A30700;
  }
  .splide .splide__arrow:hover svg .stroke {
    stroke: #ffffff;
  }
}
.splide .splide__arrow {
  position: absolute;
  top: 50%;
  margin-top: -26px;
  z-index: 1;
}
.splide .splide__arrow--prev {
  left: 30px;
}
.splide .splide__arrow--prev svg {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
.splide .splide__arrow--next {
  right: 30px;
}
.splide .splide__arrow svg .stroke {
  stroke: #dc3545;
  -webkit-transition: stroke 250ms ease;
  -moz-transition: stroke 250ms ease;
  -ms-transition: stroke 250ms ease;
  -o-transition: stroke 250ms ease;
  transition: stroke 250ms ease;
}
.splide .splide__pagination {
  position: absolute;
  bottom: 40px;
  right: 30px;
  z-index: 1;
}
.splide .splide__pagination li:not(:last-child) {
  margin-right: 12px;
}
.splide .splide__pagination li button {
  background-color: #ffffff;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  opacity: 0.5;
  -webkit-transition: opacity 250ms ease, background-color 250ms ease;
  -moz-transition: opacity 250ms ease, background-color 250ms ease;
  -ms-transition: opacity 250ms ease, background-color 250ms ease;
  -o-transition: opacity 250ms ease, background-color 250ms ease;
  transition: opacity 250ms ease, background-color 250ms ease;
}
.splide .splide__pagination li button.is-active {
  opacity: 1;
}
@media (min-width: 768px) {
  .splide .splide__pagination li button:hover {
    opacity: 1;
    background-color: #A30700;
  }
}
.splide {
  /* --- THE STANDARD SLIDER TAKES BARS RATHER THAN DOTS AND SITS IN FROM THE LEFT --- */
  /* --- INSTEAD OF THE RIGHT. IT IS THE ONLY SLIDER WITH PAGINATION TURNED ON, SEE --- */
  /* --- THE SPLIDE SETUP IN SCRIPTS.JS - THE ROUND DOTS ABOVE STAY AS THE DEFAULT --- */
  /* --- ANY OTHER SLIDER WOULD GET IF ITS PAGINATION WERE SWITCHED BACK ON --- */
}
.splide.standard-slider .splide__pagination {
  /* --- RIGHT HAS TO BE UNSET, NOT JUST OVERRIDDEN, OR THE BAR STRIP IS PINNED --- */
  /* --- TO BOTH EDGES AND STRETCHES --- */
  right: auto;
  left: 48px;
  bottom: 48px;
  /*
    Gone below lg. Six 40px bars and their gaps come to 300px, which on a
    390px screen leaves 22px to the right edge against the 68 on the left -
    lopsided at best, and wrapping on anything narrower or on a slider with
    more slides than this one.

    Nothing is lost by taking them away: the slider is draggable at this
    breakpoint, so swiping still moves it.
  */
}
@media (max-width: 991.98px) {
  .splide.standard-slider .splide__pagination {
    display: none;
  }
}
.splide.standard-slider .splide__pagination {
  /* --- SPLIDE ZEROES THE MARGIN ON THIS LIST BUT NOT THE PADDING, SO THE --- */
  /* --- BROWSER'S OWN 40PX PADDING-INLINE-START WAS STILL ON IT AND THE BARS --- */
  /* --- LANDED AT 88 RATHER THAN 48. IT NEVER SHOWED WHILE THE STRIP WAS PINNED --- */
  /* --- RIGHT, BECAUSE PADDING ON THE LEFT OF A SHRINK TO FIT BOX ONLY GROWS IT --- */
  /* --- AWAY FROM THE EDGE IT IS ANCHORED TO --- */
  padding: 0;
}
.splide.standard-slider .splide__pagination li button {
  width: 40px;
  height: 5px;
  border-radius: 0;
  /* --- THE 40% IS CARRIED BY THE FILL, NOT BY THE ELEMENT OPACITY, SO THE --- */
  /* --- CURRENT SLIDE GOES SOLID WHITE ON A COLOUR SWAP ALONE. #1F2022 IS --- */
  /* --- THE SAME NEAR BLACK THE LOGO ARC IS DRAWN IN --- */
  opacity: 1;
  background-color: rgba(31, 32, 34, 0.4);
}
.splide.standard-slider .splide__pagination li button.is-active {
  background-color: #ffffff;
}
@media (min-width: 768px) {
  .splide.standard-slider .splide__pagination li button:hover {
    background-color: #ffffff;
  }
}
.splide .custom-pagination {
  position: absolute;
  text-align: center;
  bottom: 40px;
  width: 100%;
}
@media (max-width: 1199.98px) {
  .splide .custom-pagination {
    bottom: 32px;
  }
}
@media (max-width: 767.98px) {
  .splide .custom-pagination {
    bottom: 28px;
  }
}
@media (max-width: 575.98px) {
  .splide .custom-pagination {
    bottom: 25px;
  }
}
@media (max-width: 479px) {
  .splide .custom-pagination {
    bottom: 20px;
  }
}
.splide .custom-pagination span {
  color: #ffffff;
  font-size: 20px;
}
@media (max-width: 1199.98px) {
  .splide .custom-pagination span {
    font-size: 19px;
  }
}
@media (max-width: 767.98px) {
  .splide .custom-pagination span {
    font-size: 18px;
  }
}
@media (max-width: 575.98px) {
  .splide .custom-pagination span {
    font-size: 17px;
  }
}
@media (max-width: 479px) {
  .splide .custom-pagination span {
    font-size: 16px;
  }
}

/*--------------------------------------------------------------
THEME / LAYOUT
--------------------------------------------------------------*/
.container {
  max-width: 100% !important;
  padding-left: 15px;
}
@media (min-width: 350px) {
  .container {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  .container {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  .container {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  .container {
    padding-left: 60px;
  }
}
.container {
  padding-right: 15px;
}
@media (min-width: 350px) {
  .container {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  .container {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  .container {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  .container {
    padding-right: 60px;
  }
}

@media (min-width: 1480px) {
  .container {
    max-width: 1300px;
  }
}
@media (max-width: 479px) {
  .container {
    max-width: 460px;
  }
}
body {
  position: relative;
  /*
    Set here rather than per element because font-smoothing inherits, so the one
    declaration reaches every piece of copy on the site - headings, body, form
    fields and buttons alike.

    The two go together. -webkit-font-smoothing is Safari and Chrome, and
    -moz-osx-font-smoothing is Firefox's own name for the same thing; without the
    second, Firefox on a Mac keeps the heavier subpixel rendering and the two
    browsers disagree about how thick the type looks. Both are macOS only and do
    nothing on Windows, which is why the weight only ever looked wrong on some
    machines.
  */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
body.page-template-default .default-container {
  padding-top: 15px;
}
@media (min-width: 350px) {
  body.page-template-default .default-container {
    padding-top: 20px;
  }
}
@media (min-width: 576px) {
  body.page-template-default .default-container {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  body.page-template-default .default-container {
    padding-top: 40px;
  }
}
@media (min-width: 1480px) {
  body.page-template-default .default-container {
    padding-top: 60px;
  }
}
body.page-template-default .default-container {
  padding-bottom: 15px;
}
@media (min-width: 350px) {
  body.page-template-default .default-container {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.page-template-default .default-container {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.page-template-default .default-container {
    padding-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.page-template-default .default-container {
    padding-bottom: 60px;
  }
}
body.page-template-default .default-container > .row {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
body.page-template-default .default-container > .row > .col {
  -ms-flex: 0 0 58.3333333333%;
  flex: 0 0 58.3333333333%;
  max-width: 58.3333333333%;
}
@media (max-width: 1479px) {
  body.page-template-default .default-container > .row > .col {
    -ms-flex: 0 0 66.6666666667%;
    flex: 0 0 66.6666666667%;
    max-width: 66.6666666667%;
  }
}
@media (max-width: 1199.98px) {
  body.page-template-default .default-container > .row > .col {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
  }
}
@media (max-width: 991.98px) {
  body.page-template-default .default-container > .row > .col {
    -ms-flex: 0 0 91.6666666667%;
    flex: 0 0 91.6666666667%;
    max-width: 91.6666666667%;
  }
}
@media (max-width: 767.98px) {
  body.page-template-default .default-container > .row > .col {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
  }
}
body.blog, body.archive {
  margin-top: 74px;
}
@media (max-width: 991.98px) {
  body.blog, body.archive {
    margin-top: 64px;
  }
}
body.blog section.header, body.archive section.header {
  padding-top: 15px;
}
@media (min-width: 350px) {
  body.blog section.header, body.archive section.header {
    padding-top: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.header, body.archive section.header {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.header, body.archive section.header {
    padding-top: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.header, body.archive section.header {
    padding-top: 60px;
  }
}
body.blog section.header .categories a, body.archive section.header .categories a {
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  body.blog section.header .categories a, body.archive section.header .categories a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  body.blog section.header .categories a:hover, body.blog section.header .categories a:focus, body.archive section.header .categories a:hover, body.archive section.header .categories a:focus {
    color: #595959;
  }
}
body.blog section.header .categories a:not(:last-child), body.archive section.header .categories a:not(:last-child) {
  margin-right: 12px;
}
body.blog section.header .categories a.active, body.archive section.header .categories a.active {
  color: #595959;
}
body.blog section.posts, body.archive section.posts {
  margin-top: 15px;
}
@media (min-width: 350px) {
  body.blog section.posts, body.archive section.posts {
    margin-top: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.posts, body.archive section.posts {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.posts, body.archive section.posts {
    margin-top: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.posts, body.archive section.posts {
    margin-top: 60px;
  }
}
body.blog section.posts, body.archive section.posts {
  padding-bottom: 15px;
}
@media (min-width: 350px) {
  body.blog section.posts, body.archive section.posts {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.posts, body.archive section.posts {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.posts, body.archive section.posts {
    padding-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.posts, body.archive section.posts {
    padding-bottom: 60px;
  }
}
body.blog section.posts.is-paginated, body.archive section.posts.is-paginated {
  margin-bottom: 15px;
}
@media (min-width: 350px) {
  body.blog section.posts.is-paginated, body.archive section.posts.is-paginated {
    margin-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.posts.is-paginated, body.archive section.posts.is-paginated {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.posts.is-paginated, body.archive section.posts.is-paginated {
    margin-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.posts.is-paginated, body.archive section.posts.is-paginated {
    margin-bottom: 60px;
  }
}
body.blog section.load-more, body.archive section.load-more {
  padding-bottom: 15px;
}
@media (min-width: 350px) {
  body.blog section.load-more, body.archive section.load-more {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.load-more, body.archive section.load-more {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.load-more, body.archive section.load-more {
    padding-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.load-more, body.archive section.load-more {
    padding-bottom: 60px;
  }
}
body.blog section.load-more.pagination, body.archive section.load-more.pagination {
  text-align: center;
}
body.blog section.load-more.pagination a, body.archive section.load-more.pagination a {
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  body.blog section.load-more.pagination a, body.archive section.load-more.pagination a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  body.blog section.load-more.pagination a:hover, body.blog section.load-more.pagination a:focus, body.archive section.load-more.pagination a:hover, body.archive section.load-more.pagination a:focus {
    color: #595959;
  }
}
body.blog section.load-more.pagination a, body.archive section.load-more.pagination a {
  margin-left: 4px;
  margin-right: 4px;
}
body.blog section.load-more.pagination a svg, body.archive section.load-more.pagination a svg {
  position: relative;
  width: 18px;
  top: -2px;
}
body.blog section.load-more.pagination a svg .stroke, body.archive section.load-more.pagination a svg .stroke {
  stroke: #000000;
  -webkit-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
body.blog section.load-more.pagination a.prev, body.archive section.load-more.pagination a.prev {
  margin-right: 10px;
}
body.blog section.load-more.pagination a.prev svg, body.archive section.load-more.pagination a.prev svg {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
body.blog section.load-more.pagination a.next, body.archive section.load-more.pagination a.next {
  margin-left: 10px;
}
@media (min-width: 992px) {
  body.blog section.load-more.pagination a:hover .stroke, body.archive section.load-more.pagination a:hover .stroke {
    stroke: #595959;
  }
}
body.blog section.load-more.pagination span, body.archive section.load-more.pagination span {
  color: #595959;
}
body.blog section.no-posts, body.archive section.no-posts {
  position: relative;
  padding-left: 15px;
}
@media (min-width: 350px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-left: 60px;
  }
}
body.blog section.no-posts, body.archive section.no-posts {
  padding-right: 15px;
}
@media (min-width: 350px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  body.blog section.no-posts, body.archive section.no-posts {
    padding-right: 60px;
  }
}
body.blog section.no-posts, body.archive section.no-posts {
  height: -moz-calc(100vh - 80px);
  height: -webkit-calc(100vh - 80px);
  height: calc(100vh - 80px);
}
@media (max-width: 991.98px) {
  body.blog section.no-posts, body.archive section.no-posts {
    height: -moz-calc(100vh - 64px);
    height: -webkit-calc(100vh - 64px);
    height: calc(100vh - 64px);
  }
}
@media (max-width: 767.98px) {
  body.blog section.no-posts, body.archive section.no-posts {
    height: auto;
    min-height: 500px;
  }
}
body.blog section.no-posts .title, body.archive section.no-posts .title {
  position: relative;
  z-index: 1;
}
body.blog section.no-posts .message, body.archive section.no-posts .message {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
body.blog section.no-posts .message p, body.archive section.no-posts .message p {
  font-size: 20px;
}
@media (min-width: 992px) {
  body.blog .has-stripe-menu + main section.no-posts, body.archive .has-stripe-menu + main section.no-posts {
    height: -moz-calc(100vh - 132px);
    height: -webkit-calc(100vh - 132px);
    height: calc(100vh - 132px);
  }
}
body.single {
  margin-top: 74px;
}
@media (max-width: 991.98px) {
  body.single {
    margin-top: 64px;
  }
}
body.single section.main-content {
  padding-top: 15px;
}
@media (min-width: 350px) {
  body.single section.main-content {
    padding-top: 20px;
  }
}
@media (min-width: 576px) {
  body.single section.main-content {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  body.single section.main-content {
    padding-top: 40px;
  }
}
@media (min-width: 1480px) {
  body.single section.main-content {
    padding-top: 60px;
  }
}
body.single section.main-content {
  padding-bottom: 15px;
}
@media (min-width: 350px) {
  body.single section.main-content {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.single section.main-content {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.single section.main-content {
    padding-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.single section.main-content {
    padding-bottom: 60px;
  }
}
body.single section.main-content .col.aside {
  order: 1;
  -ms-flex: 0 0 16.6666666667%;
  flex: 0 0 16.6666666667%;
  max-width: 16.6666666667%;
}
body.single section.main-content .col.aside .back {
  margin-bottom: 10px;
}
body.single section.main-content .col.aside .back a {
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  body.single section.main-content .col.aside .back a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  body.single section.main-content .col.aside .back a:hover, body.single section.main-content .col.aside .back a:focus {
    color: #595959;
  }
}
body.single section.main-content .col.aside .post-info {
  margin-bottom: 10px;
}
body.single section.main-content .col.article {
  order: 2;
  -ms-flex: 0 0 83.3333333333%;
  flex: 0 0 83.3333333333%;
  max-width: 83.3333333333%;
}
body.single section.main-content .col.article .image {
  margin-top: 20px;
  margin-bottom: 20px;
}
body.single section.related-posts {
  margin-bottom: 15px;
}
@media (min-width: 350px) {
  body.single section.related-posts {
    margin-bottom: 20px;
  }
}
@media (min-width: 576px) {
  body.single section.related-posts {
    margin-bottom: 30px;
  }
}
@media (min-width: 992px) {
  body.single section.related-posts {
    margin-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  body.single section.related-posts {
    margin-bottom: 60px;
  }
}

#content-layout {
  overflow: hidden;
}
#content-layout > section:first-child:not(.hero) {
  margin-top: 74px;
}
@media (max-width: 991.98px) {
  #content-layout > section:first-child:not(.hero) {
    margin-top: 64px;
  }
}
#content-layout.menu-has-stripe > section:first-child:not(.hero) {
  margin-top: 74px;
}
@media (max-width: 991.98px) {
  #content-layout.menu-has-stripe > section:first-child:not(.hero) {
    margin-top: 64px;
  }
}
#content-layout.nav-hidden > section:first-child:not(.hero) {
  margin-top: 15px;
}
@media (min-width: 350px) {
  #content-layout.nav-hidden > section:first-child:not(.hero) {
    margin-top: 20px;
  }
}
@media (min-width: 576px) {
  #content-layout.nav-hidden > section:first-child:not(.hero) {
    margin-top: 30px;
  }
}
@media (min-width: 992px) {
  #content-layout.nav-hidden > section:first-child:not(.hero) {
    margin-top: 40px;
  }
}
@media (min-width: 1480px) {
  #content-layout.nav-hidden > section:first-child:not(.hero) {
    margin-top: 60px;
  }
}

footer {
  background-color: #F2F4F5;
  padding-top: 15px;
}
@media (min-width: 350px) {
  footer {
    padding-top: 20px;
  }
}
@media (min-width: 576px) {
  footer {
    padding-top: 30px;
  }
}
@media (min-width: 992px) {
  footer {
    padding-top: 40px;
  }
}
@media (min-width: 1480px) {
  footer {
    padding-top: 60px;
  }
}
footer {
  padding-bottom: 15px;
}
@media (min-width: 350px) {
  footer {
    padding-bottom: 20px;
  }
}
@media (min-width: 576px) {
  footer {
    padding-bottom: 30px;
  }
}
@media (min-width: 992px) {
  footer {
    padding-bottom: 40px;
  }
}
@media (min-width: 1480px) {
  footer {
    padding-bottom: 60px;
  }
}
footer {
  text-align: center;
}
footer .social-media {
  margin-bottom: 30px;
}
footer .social-media .links {
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
footer .legal * {
  font-size: 14px;
}
footer .legal a {
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  footer .legal a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  footer .legal a:hover, footer .legal a:focus {
    color: #595959;
  }
}

#cover {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ffffff;
  z-index: 1000;
  opacity: 1;
}
#cover.fade-out {
  opacity: 0;
  -webkit-transition: opacity 100ms ease;
  -moz-transition: opacity 100ms ease;
  -ms-transition: opacity 100ms ease;
  -o-transition: opacity 100ms ease;
  transition: opacity 100ms ease;
}

/*--------------------------------------------------------------
THEME / NAVIGATION
--------------------------------------------------------------*/
/* --- LIGHT TREATMENT FOR THE MOBILE MENU BUTTON, USED OVER THE HERO AND --- */
/* --- OVER THE GREEN PANEL WHEN THE MENU IS OPEN --- */
header #primary-nav {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  width: 100%;
  height: 74px;
  background-color: #ffffff;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
  -moz-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
  padding-left: 15px;
}
@media (min-width: 350px) {
  header #primary-nav {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  header #primary-nav {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  header #primary-nav {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  header #primary-nav {
    padding-left: 60px;
  }
}
header #primary-nav {
  padding-right: 15px;
}
@media (min-width: 350px) {
  header #primary-nav {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  header #primary-nav {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  header #primary-nav {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  header #primary-nav {
    padding-right: 60px;
  }
}
header #primary-nav {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  -webkit-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 400ms cubic-bezier(0.77, 0, 0.175, 1), background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), box-shadow 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 991.98px) {
  header #primary-nav {
    height: 64px;
  }
}
header #primary-nav {
  /* --- WHEN THE MARK IS SEEN, AND IN WHICH COLOUR. ON THE NAV RATHER THAN --- */
  /* --- INSIDE .logo, BECAUSE THE STATE CLASSES BEING TESTED ARE THE BAR'S --- */
}
@media (max-width: 991.98px) {
  header #primary-nav:not(.transparent) .logo .logo-mark {
    display: block;
    /* --- BLACK ON THE WHITE BAR, AS ASKED --- */
  }
  header #primary-nav:not(.transparent) .logo .logo-mark path.bridge-arc {
    fill: #000000;
  }
  header #primary-nav {
    /* --- AND THE BAR TURNS GREEN UNDER THE OPEN PANEL, SO THE MARK TURNS --- */
    /* --- WHITE WITH IT. MATCHED ON ITS OWN - OVER THE HERO THE BAR CARRIES --- */
    /* --- .transparent AND .menu-open TOGETHER AND THE GREEN WINS --- */
  }
  header #primary-nav.menu-open .logo .logo-mark {
    display: block;
    /* --- AND WHITE ON THE GREEN ONE, WHERE BLACK WOULD DISAPPEAR --- */
  }
  header #primary-nav.menu-open .logo .logo-mark path.bridge-arc {
    fill: #ffffff;
  }
}
header #primary-nav .logo {
  position: relative;
  /*
    Flex so the anchor inside is not an inline-block sitting on a text
    baseline. It was: the box came out 29px tall against the anchor's 23,
    the extra six being the descender space under the baseline, all of it
    below the mark. The bar centres this box, so the arch itself ended up
    three pixels high of the Menu button beside it.

    A flex item has no baseline strut under it, so the box is now the height
    of its contents and centring the box centres what you can see. Not
    scoped to the breakpoint - the same gap would sit under a desktop logo
    the day one is uploaded to the options page.
  */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /*
    THE MARK ON THE SMALL SCREENS. Off by default and only brought out below
    lg, where the bar has room for it and nothing else is identifying the
    site - the desktop bar keeps whatever the options page supplies.

    Never over the hero. There the bar is transparent and the full lockup is
    already on screen an inch underneath it, so a second one reads as a
    mistake. That is why this hangs off :not(.transparent) rather than the
    breakpoint alone.

    Two colours, because the bar has two states below lg: white while the
    menu is shut, green while it is open. .menu-open is matched on its own
    rather than under the :not(), since over the hero the bar carries both
    .transparent and .menu-open at once and the green wins.
  */
}
header #primary-nav .logo .logo-mark {
  display: none;
  /* --- THE ICON IS 35 x 17, SO A WIDTH IS ENOUGH AND THE HEIGHT FOLLOWS --- */
  width: 48px;
  height: auto;
  /* --- THE ICON SHIPS DIMMED AND SET TO MULTIPLY, WHICH IS WHAT IT WANTS --- */
  /* --- SITTING ON A COLOURED BUTTON. AS A LOGO IT IS A SOLID MARK, SO --- */
  /* --- BOTH ARE UNDONE HERE AND THE COLOUR IS SET BELOW --- */
}
header #primary-nav .logo .logo-mark path.bridge-arc {
  fill-opacity: 1;
  mix-blend-mode: normal;
}
header #primary-nav .logo .logo-mark {
  /* --- AND THE WIPE STROKE IS A HOVER TRICK FOR THE BUTTONS. THERE IS --- */
  /* --- NOTHING TO WIPE HERE, SO IT IS TAKEN OUT RATHER THAN LEFT SITTING --- */
  /* --- FULLY OFFSET AND WAITING TO BE DRAWN BY SOMETHING --- */
}
header #primary-nav .logo .logo-mark path.bridge-arc-wipe {
  display: none;
}
header #primary-nav .logo h1 {
  margin-bottom: 0;
}
header #primary-nav .logo a {
  display: inline-block;
  position: relative;
  z-index: 3;
}
header #primary-nav .logo a img {
  width: 170px;
  height: auto;
}
@media (max-width: 575.98px) {
  header #primary-nav .logo a img {
    width: 150px;
  }
}
header #primary-nav .logo a img:first-child {
  opacity: 1;
  -webkit-transition: opacity 250ms ease;
  -moz-transition: opacity 250ms ease;
  -ms-transition: opacity 250ms ease;
  -o-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}
header #primary-nav .nav {
  height: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: end;
  -moz-box-pack: end;
  -ms-flex-pack: end;
  -webkit-justify-content: flex-end;
  justify-content: flex-end;
}
header #primary-nav .nav .nav-main {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
}
@media (max-width: 991.98px) {
  header #primary-nav .nav .nav-main {
    display: none;
  }
}
header #primary-nav .nav .nav-main .menu {
  height: 100%;
  margin: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: start;
  -moz-box-pack: start;
  -ms-flex-pack: start;
  -webkit-justify-content: flex-start;
  justify-content: flex-start;
  padding-left: 15px;
}
@media (min-width: 350px) {
  header #primary-nav .nav .nav-main .menu {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  header #primary-nav .nav .nav-main .menu {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  header #primary-nav .nav .nav-main .menu {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  header #primary-nav .nav .nav-main .menu {
    padding-left: 60px;
  }
}
header #primary-nav .nav .nav-main .menu {
  padding-right: 15px;
}
@media (min-width: 350px) {
  header #primary-nav .nav .nav-main .menu {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  header #primary-nav .nav .nav-main .menu {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  header #primary-nav .nav .nav-main .menu {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  header #primary-nav .nav .nav-main .menu {
    padding-right: 60px;
  }
}
header #primary-nav .nav .nav-main .menu > .menu-item {
  position: relative;
}
header #primary-nav .nav .nav-main .menu > .menu-item button, header #primary-nav .nav .nav-main .menu > .menu-item a {
  position: relative;
  z-index: 3;
  border: none;
  outline: none !important;
  background: none;
  display: inline-block;
  position: relative;
  letter-spacing: unset;
  padding: 0;
  cursor: pointer;
  border: none;
  background: none;
  color: #000000;
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  header #primary-nav .nav .nav-main .menu > .menu-item button, header #primary-nav .nav .nav-main .menu > .menu-item a {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  header #primary-nav .nav .nav-main .menu > .menu-item button:hover, header #primary-nav .nav .nav-main .menu > .menu-item button:focus, header #primary-nav .nav .nav-main .menu > .menu-item a:hover, header #primary-nav .nav .nav-main .menu > .menu-item a:focus {
    color: #595959;
  }
}
header #primary-nav .nav .nav-main .menu > .menu-item button, header #primary-nav .nav .nav-main .menu > .menu-item a {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
header #primary-nav .nav .nav-main .menu > .menu-item button:focus, header #primary-nav .nav .nav-main .menu > .menu-item a:focus {
  outline: none !important;
}
header #primary-nav .nav .nav-main .menu > .menu-item button:focus-visible, header #primary-nav .nav .nav-main .menu > .menu-item a:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
header #primary-nav .nav .nav-main .menu > .menu-item button span, header #primary-nav .nav .nav-main .menu > .menu-item a span {
  color: #000000;
  /*
    The nav label's type lives here rather than inside .transparent,
    which is where it used to be. The solid bar had nothing of its
    own to fall back on, so the moment you scrolled past the hero the
    labels jumped from 16 to 18, lost their weight and lost their
    tracking - it was picking up the body size by inheritance. One
    spec for both states; all .transparent sets now is the colour.
  */
  font-size: 16px;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
  letter-spacing: -0.16px;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #primary-nav .nav .nav-main .menu > .menu-item button .arrow svg, header #primary-nav .nav .nav-main .menu > .menu-item a .arrow svg {
  -webkit-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: all 250ms cubic-bezier(0.77, 0, 0.175, 1);
  width: 16px;
  margin-left: 6px;
}
header #primary-nav .nav .nav-main .menu > .menu-item button .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item a .arrow svg .stroke {
  stroke: #000000;
  -webkit-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: stroke 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #primary-nav .nav .nav-main .menu > .menu-item:not(:first-child) {
  margin-left: 44px;
}
@media (max-width: 1479px) {
  header #primary-nav .nav .nav-main .menu > .menu-item:not(:first-child) {
    margin-left: 36px;
  }
}
@media (max-width: 1199.98px) {
  header #primary-nav .nav .nav-main .menu > .menu-item:not(:first-child) {
    margin-left: 28px;
  }
}
header #primary-nav .nav .nav-main .menu > .menu-item {
  /* --- REGISTER BUTTON - PUSHED TO THE RIGHT OF THE BAR --- */
}
header #primary-nav .nav .nav-main .menu > .menu-item.register {
  margin-left: auto;
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a {
  background-color: #4B5F32;
  border: 1px solid #4B5F32;
  border-radius: 6px;
  color: #ffffff;
  padding: 12px 21px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
  min-width: 150px;
  -webkit-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1), color 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a span {
  color: #ffffff;
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge svg {
  display: block;
  width: 35px;
  height: auto;
  /* --- .bridge-arc IS THE BAND ITSELF. CLASSED RATHER THAN A BARE --- */
  /* --- PATH SELECTOR BECAUSE THERE IS A SECOND PATH IN THERE NOW --- */
  /* --- AND FILLING IT WOULD PUT A SOLID WEDGE IN THE ICON --- */
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge svg path.bridge-arc {
  fill: #000000;
  fill-opacity: 0.1;
  mix-blend-mode: multiply;
  -webkit-transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1), fill-opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1), fill-opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1), fill-opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1), fill-opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: fill 400ms cubic-bezier(0.77, 0, 0.175, 1), fill-opacity 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge svg {
  /* --- AND THE WIPE - A WHITE STROKE ALONG THE BAND'S CENTRE LINE, --- */
  /* --- HELD OFF BY A FULL DASH OFFSET UNTIL HOVER, THEN WOUND BACK --- */
  /* --- TO 0 SO IT DRAWS ITSELF ROUND THE ARCH THE WAY THE HERO --- */
  /* --- RAINBOW DOES. IT COVERS THE BAND, SO WHAT YOU SEE ONCE IT --- */
  /* --- HAS RUN IS A WHITE ARCH --- */
}
header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge svg path.bridge-arc-wipe {
  stroke: #ffffff;
  stroke-width: 3.386;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a:hover, header #primary-nav .nav .nav-main .menu > .menu-item.register > a:focus {
    background-color: #F26845;
    border-color: #F26845;
    /* --- HELD WHITE. THE LI LEVEL HOVER RULE FURTHER DOWN GREYS EVERY --- */
    /* --- NAV LABEL, AND ON A COLOURED BUTTON THAT READS AS THE TEXT --- */
    /* --- DIMMING RATHER THAN THE BUTTON LIGHTING UP --- */
  }
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a:hover span, header #primary-nav .nav .nav-main .menu > .menu-item.register > a:focus span {
    color: #ffffff;
  }
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a:hover, header #primary-nav .nav .nav-main .menu > .menu-item.register > a:focus {
    /* --- THE WIPE STARTS WITH THE COLOUR, NOT AFTER IT - NO DELAY --- */
  }
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a:hover .bridge svg path.bridge-arc-wipe, header #primary-nav .nav .nav-main .menu > .menu-item.register > a:focus .bridge svg path.bridge-arc-wipe {
    stroke-dashoffset: 0;
  }
}
@media (max-width: 1199.98px) {
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a {
    min-width: 0;
    padding: 9px 15px;
  }
  header #primary-nav .nav .nav-main .menu > .menu-item.register > a .bridge {
    margin-left: 14px;
  }
}
header #primary-nav .nav .nav-main .menu > .menu-item.current-menu-item button span, header #primary-nav .nav .nav-main .menu > .menu-item.current-menu-item a span, header #primary-nav .nav .nav-main .menu > .menu-item.current_page_parent button span, header #primary-nav .nav .nav-main .menu > .menu-item.current_page_parent a span {
  color: #595959;
}
header #primary-nav .nav .nav-main .menu > .menu-item.current-menu-item button .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item.current-menu-item a .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item.current_page_parent button .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item.current_page_parent a .arrow svg .stroke {
  stroke: #595959;
}
header #primary-nav .nav .nav-main .menu > .menu-item {
  /* --- ORANGE HERE TOO, SO THE BAR ANSWERS THE MOUSE THE SAME WAY ONCE IT --- */
  /* --- HAS GONE SOLID AS IT DOES WHILE IT IS STILL OVER THE HERO. THE --- */
  /* --- CURRENT PAGE ABOVE KEEPS THE GREY, THAT IS A STATE RATHER THAN A --- */
  /* --- RESPONSE --- */
}
header #primary-nav .nav .nav-main .menu > .menu-item:hover button span, header #primary-nav .nav .nav-main .menu > .menu-item:hover a span, header #primary-nav .nav .nav-main .menu > .menu-item.opened button span, header #primary-nav .nav .nav-main .menu > .menu-item.opened a span {
  color: #F26845;
}
header #primary-nav .nav .nav-main .menu > .menu-item:hover button .arrow svg, header #primary-nav .nav .nav-main .menu > .menu-item:hover a .arrow svg, header #primary-nav .nav .nav-main .menu > .menu-item.opened button .arrow svg, header #primary-nav .nav .nav-main .menu > .menu-item.opened a .arrow svg {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
header #primary-nav .nav .nav-main .menu > .menu-item:hover button .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item:hover a .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item.opened button .arrow svg .stroke, header #primary-nav .nav .nav-main .menu > .menu-item.opened a .arrow svg .stroke {
  stroke: #F26845;
}
header #primary-nav .nav .nav-main .menu > .menu-item:hover button + .sub-menu-wrapper, header #primary-nav .nav .nav-main .menu > .menu-item:hover a + .sub-menu-wrapper, header #primary-nav .nav .nav-main .menu > .menu-item.opened button + .sub-menu-wrapper, header #primary-nav .nav .nav-main .menu > .menu-item.opened a + .sub-menu-wrapper {
  visibility: visible;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
header #primary-nav .nav .nav-main .menu > .menu-item:hover button + .sub-menu-wrapper ul.sub-menu, header #primary-nav .nav .nav-main .menu > .menu-item:hover a + .sub-menu-wrapper ul.sub-menu, header #primary-nav .nav .nav-main .menu > .menu-item.opened button + .sub-menu-wrapper ul.sub-menu, header #primary-nav .nav .nav-main .menu > .menu-item.opened a + .sub-menu-wrapper ul.sub-menu {
  opacity: 1;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  top: 22.5px;
  text-align: left;
  padding: 0;
  visibility: hidden;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper ul {
  position: relative;
  padding: 0;
  margin: 0;
  padding-top: 30px;
  list-style: none;
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  -moz-transition: opacity 250ms ease;
  -ms-transition: opacity 250ms ease;
  -o-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper ul:before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  margin-left: -6px;
  width: 0px;
  height: 0px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #000000;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li {
  text-align: center;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a {
  width: 100%;
  background-color: #000000;
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: background-color 250ms ease;
  -moz-transition: background-color 250ms ease;
  -ms-transition: background-color 250ms ease;
  -o-transition: background-color 250ms ease;
  transition: background-color 250ms ease;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a span {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #ffffff !important;
  font-size: 16px;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a:hover, header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a:focus {
  background-color: #292929;
  outline: none !important;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a:focus-visible {
  background-color: #292929;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li a:focus-visible span {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li:first-child a {
  padding-top: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li:last-child a {
  padding-bottom: 12px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li:not(:last-child) {
  position: relative;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li:not(:last-child):after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li.current_page_item a, header #primary-nav .nav .nav-main .menu .sub-menu-wrapper li.current_page_parent a {
  background-color: #292929 !important;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper:hover {
  visibility: visible;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
header #primary-nav .nav .nav-main .menu .sub-menu-wrapper:hover ul {
  opacity: 1;
}
header #primary-nav .nav .menu-button button > div {
  width: 30px;
  height: 18px;
  position: relative;
}
header #primary-nav .nav .menu-button button > div span {
  display: block;
  position: absolute;
  float: right;
  background-color: #000000;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  top: 50%;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
header #primary-nav .nav .menu-button button > div:before, header #primary-nav .nav .menu-button button > div:after {
  content: "";
  position: absolute;
  background-color: #000000;
  width: 100%;
  height: 2px;
  right: 0;
  -webkit-transition: all 250ms ease;
  -moz-transition: all 250ms ease;
  -ms-transition: all 250ms ease;
  -o-transition: all 250ms ease;
  transition: all 250ms ease;
}
header #primary-nav .nav .menu-button button > div:before {
  top: 0;
}
header #primary-nav .nav .menu-button button > div:after {
  bottom: 0;
}
header #primary-nav .nav .menu-button button.full {
  background-color: #ffffff;
  position: relative;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  padding: 8px 16px;
  border: 1px solid #c2c2c2;
  border-radius: 8px;
  z-index: 2;
  -webkit-transition: background-color 250ms ease, border 250ms ease;
  -moz-transition: background-color 250ms ease, border 250ms ease;
  -ms-transition: background-color 250ms ease, border 250ms ease;
  -o-transition: background-color 250ms ease, border 250ms ease;
  transition: background-color 250ms ease, border 250ms ease;
}
header #primary-nav .nav .menu-button button.full > span {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  margin-right: 14px;
  -webkit-transition: color 250ms ease;
  -moz-transition: color 250ms ease;
  -ms-transition: color 250ms ease;
  -o-transition: color 250ms ease;
  transition: color 250ms ease;
}
header #primary-nav .nav .menu-button button.full > span.opened-text {
  display: none;
  position: absolute;
  top: 12px;
  left: 19px;
}
@media (min-width: 992px) {
  header #primary-nav .nav .menu-button button.full:hover {
    border: 1px solid #000000;
    background-color: #000000;
  }
  header #primary-nav .nav .menu-button button.full:hover > div span, header #primary-nav .nav .menu-button button.full:hover > div:before, header #primary-nav .nav .menu-button button.full:hover > div:after {
    background-color: #ffffff;
  }
  header #primary-nav .nav .menu-button button.full:hover span {
    color: #ffffff;
  }
}
header #primary-nav .nav .menu-button button.full.active > span.closed-text {
  visibility: hidden;
}
header #primary-nav .nav .menu-button button.full.active > span.opened-text {
  display: block;
}
header #primary-nav .nav .menu-button button.active > div span {
  opacity: 0;
}
header #primary-nav .nav .menu-button button.active > div:before {
  width: 100%;
  -ms-transform: rotate(-45deg); /* IE 9 */
  -webkit-transform: rotate(-45deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  transform: rotate(-45deg);
  top: 8px;
}
header #primary-nav .nav .menu-button button.active > div:after {
  -ms-transform: rotate(45deg); /* IE 9 */
  -webkit-transform: rotate(45deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  transform: rotate(45deg);
  bottom: 8px;
}
@media (max-width: 991.98px) {
  header #primary-nav .nav .menu-button button#menu-toggle {
    display: none;
  }
}
header #primary-nav .nav .menu-button button {
  /* --- MATCHES THE DESKTOP REGISTER BUTTON, HAMBURGER FOR THE ICON --- */
}
@media (min-width: 992px) {
  header #primary-nav .nav .menu-button button#menu-toggle-mobile {
    display: none;
  }
}
header #primary-nav .nav .menu-button button#menu-toggle-mobile.full {
  background-color: #4B5F32;
  border: 1px solid #4B5F32;
  border-radius: 6px;
  padding: 12px 20px;
  -webkit-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 400ms cubic-bezier(0.77, 0, 0.175, 1), border-color 400ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #primary-nav .nav .menu-button button#menu-toggle-mobile.full > span {
  color: #ffffff;
  margin-right: 20px;
}
header #primary-nav .nav .menu-button button#menu-toggle-mobile.full > div span, header #primary-nav .nav .menu-button button#menu-toggle-mobile.full > div:before, header #primary-nav .nav .menu-button button#menu-toggle-mobile.full > div:after {
  background-color: #ffffff;
}
header #primary-nav {
  /* --- TOP OF PAGE - TALLER, TRANSPARENT OVER THE HERO --- */
  /* --- KEPT LAST SO IT WINS THE TIES AGAINST THE HOVER STATES ABOVE --- */
}
header #primary-nav.transparent {
  height: 146px;
  background-color: transparent;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
}
@media (max-width: 991.98px) {
  header #primary-nav.transparent {
    height: 96px;
  }
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item button span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item a span {
  color: #ffffff;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item button .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item a .arrow svg .stroke {
  stroke: #ffffff;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item {
  /* --- THE CURRENT PAGE STILL READS AS A DIMMED LABEL --- */
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current-menu-item button span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current-menu-item a span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current_page_parent button span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current_page_parent a span {
  color: rgba(255, 255, 255, 0.72);
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current-menu-item button .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current-menu-item a .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current_page_parent button .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.current_page_parent a .arrow svg .stroke {
  stroke: rgba(255, 255, 255, 0.72);
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item {
  /* --- HOVER GOES ORANGE AT FULL STRENGTH RATHER THAN FADING THE WHITE --- */
  /* --- BACK TO 72%, WHICH READ AS THE LABEL DIMMING INSTEAD OF LIGHTING --- */
  /* --- UP. SAME ORANGE THE REGISTER BUTTON TAKES, SO THE WHOLE BAR --- */
  /* --- ANSWERS THE MOUSE THE SAME WAY --- */
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item:hover button span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item:hover a span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.opened button span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.opened a span {
  color: #F26845;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item:hover button .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item:hover a .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.opened button .arrow svg .stroke, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.opened a .arrow svg .stroke {
  stroke: #F26845;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a {
  background-color: transparent;
  border-color: #ffffff;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a span {
  color: #ffffff;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a {
  /* --- LIGHT ICON, THE BLACK MULTIPLY WOULD VANISH ON THE HERO --- */
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a .bridge svg path.bridge-arc {
  fill: #ffffff;
  fill-opacity: 0.3;
  mix-blend-mode: normal;
}
header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a {
  /* --- HOVER MATCHES THE SOLID NAV RATHER THAN INVERTING TO WHITE THE --- */
  /* --- WAY IT USED TO. IT HAS TO - THE WIPE IS A WHITE ARCH, AND ON A --- */
  /* --- WHITE BUTTON THERE WOULD BE NOTHING TO SEE --- */
}
@media (min-width: 992px) {
  header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:hover, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:focus {
    background-color: #F26845;
    border-color: #F26845;
    /* --- SAME AGAIN - THE TRANSPARENT STATE FADES LABELS TO 72% ON --- */
    /* --- HOVER, WHICH THIS BUTTON OPTS OUT OF --- */
  }
  header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:hover span, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:focus span {
    color: #ffffff;
  }
  header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:hover .bridge svg path.bridge-arc, header #primary-nav.transparent .nav .nav-main .menu > .menu-item.register > a:focus .bridge svg path.bridge-arc {
    fill: #000000;
    fill-opacity: 0.1;
    mix-blend-mode: multiply;
  }
}
header #primary-nav.transparent .nav .menu-button button#menu-toggle-mobile.full {
  background-color: transparent;
  border-color: #ffffff;
}
header #primary-nav.transparent .nav .menu-button button#menu-toggle-mobile.full > span {
  color: #ffffff;
}
header #primary-nav.transparent .nav .menu-button button#menu-toggle-mobile.full > div span, header #primary-nav.transparent .nav .menu-button button#menu-toggle-mobile.full > div:before, header #primary-nav.transparent .nav .menu-button button#menu-toggle-mobile.full > div:after {
  background-color: #ffffff;
}
header #primary-nav {
  /* --- MOBILE MENU OPEN, THE BAR GOES GREEN TO MEET THE PANEL --- */
  /* --- KEPT AFTER .transparent SO IT WINS WHEN BOTH ARE ON --- */
}
header #primary-nav.menu-open {
  background-color: #2E3D21;
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
}
header #primary-nav.menu-open .nav .menu-button button#menu-toggle-mobile.full {
  background-color: transparent;
  border-color: #ffffff;
}
header #primary-nav.menu-open .nav .menu-button button#menu-toggle-mobile.full > span {
  color: #ffffff;
}
header #primary-nav.menu-open .nav .menu-button button#menu-toggle-mobile.full > div span, header #primary-nav.menu-open .nav .menu-button button#menu-toggle-mobile.full > div:before, header #primary-nav.menu-open .nav .menu-button button#menu-toggle-mobile.full > div:after {
  background-color: #ffffff;
}
header #primary-nav.no-shadow {
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
}
header #primary-nav.notran {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
header #primary-nav.notran .nav-col .nav-outer ul.menu > li > a > span,
header #primary-nav.notran .nav-col .nav-outer ul.menu > li.menu-item-has-children > a:after {
  -webkit-transition: none !important;
  -moz-transition: none !important;
  -ms-transition: none !important;
  -o-transition: none !important;
  transition: none !important;
}
header #primary-nav.static {
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
}
header #secondary-nav {
  position: absolute;
  z-index: 3;
  overflow: hidden;
  left: 50%;
  width: 200px;
  margin-left: -100px;
  top: 22.5px;
  text-align: left;
  padding: 0;
  visibility: hidden;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 250ms;
  -moz-transition-delay: 250ms;
  -ms-transition-delay: 250ms;
  -o-transition-delay: 250ms;
  transition-delay: 250ms;
}
header #secondary-nav ul {
  position: relative;
  padding: 0;
  margin: 0;
  padding-top: 30px;
  list-style: none;
  opacity: 0;
  -webkit-transition: opacity 250ms ease;
  -moz-transition: opacity 250ms ease;
  -ms-transition: opacity 250ms ease;
  -o-transition: opacity 250ms ease;
  transition: opacity 250ms ease;
}
header #secondary-nav ul:before {
  content: "";
  position: absolute;
  top: 22px;
  left: 50%;
  margin-left: -6px;
  width: 0px;
  height: 0px;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 8px solid #000000;
}
header #secondary-nav li {
  text-align: center;
}
header #secondary-nav li a {
  width: 100%;
  background-color: #000000;
  display: block;
  padding-top: 6px;
  padding-bottom: 6px;
  padding-left: 25px;
  padding-right: 25px;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -webkit-transition: background-color 250ms ease;
  -moz-transition: background-color 250ms ease;
  -ms-transition: background-color 250ms ease;
  -o-transition: background-color 250ms ease;
  transition: background-color 250ms ease;
}
header #secondary-nav li a span {
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  color: #ffffff !important;
  font-size: 16px;
}
header #secondary-nav li a:hover, header #secondary-nav li a:focus {
  background-color: #292929;
  outline: none !important;
}
header #secondary-nav li a:focus-visible {
  background-color: #292929;
}
header #secondary-nav li a:focus-visible span {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
header #secondary-nav li:first-child a {
  padding-top: 12px;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
header #secondary-nav li:last-child a {
  padding-bottom: 12px;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}
header #secondary-nav li:not(:last-child) {
  position: relative;
}
header #secondary-nav li:not(:last-child):after {
  content: "";
  position: absolute;
  background-color: #ffffff;
  width: 100%;
  height: 1px;
  bottom: 0;
  left: 0;
}
header #secondary-nav li.current_page_item a, header #secondary-nav li.current_page_parent a {
  background-color: #292929 !important;
}
header #secondary-nav:hover {
  visibility: visible;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
header #secondary-nav:hover ul {
  opacity: 1;
}
header #secondary-nav {
  left: unset;
  right: 0;
  top: 66px;
}
header #secondary-nav ul {
  padding-top: 8px;
}
header #secondary-nav ul:before {
  top: 0;
}
header #secondary-nav.open {
  visibility: visible;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
header #secondary-nav.open ul {
  opacity: 1;
}
header #mobile-nav {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 99;
}
header #mobile-nav .nav-wrap {
  background-color: #2E3D21;
  position: fixed;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  left: 0;
  top: 0;
  /* --- THE PANEL HAS TO BE THE HEIGHT OF WHAT YOU CAN ACTUALLY SEE, NOT OF --- */
  /* --- THE LAYOUT VIEWPORT - THE REGISTER BUTTON IS PINNED TO ITS BOTTOM NOW, --- */
  /* --- AND ON IOS A PLAIN 100VH SITS UNDER THE TOOLBARS AND WOULD PUT THE --- */
  /* --- BUTTON OFF THE SCREEN. SAME THREE LINES THE HERO USES, SAME ORDER --- */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
  width: 100%;
  z-index: 100;
  text-align: center;
  max-width: 100% !important;
  overflow-x: hidden;
  opacity: 0;
  visibility: hidden;
  /* --- CLOSING: THE WHOLE PANEL FADES, AT HALF THE OPENING DURATION --- */
  -webkit-transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 300ms;
  -moz-transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 300ms;
  -ms-transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 300ms;
  -o-transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 300ms;
  transition: opacity 300ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 300ms;
}
header #mobile-nav .menu {
  position: relative;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
  padding-top: 136px;
  padding-bottom: 40px;
  padding-left: 15px;
}
@media (min-width: 350px) {
  header #mobile-nav .menu {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  header #mobile-nav .menu {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  header #mobile-nav .menu {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  header #mobile-nav .menu {
    padding-left: 60px;
  }
}
header #mobile-nav .menu {
  padding-right: 15px;
}
@media (min-width: 350px) {
  header #mobile-nav .menu {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  header #mobile-nav .menu {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  header #mobile-nav .menu {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  header #mobile-nav .menu {
    padding-right: 60px;
  }
}
header #mobile-nav .menu {
  /* --- A COLUMN THAT FILLS THE PANEL, WHICH IS WHAT GIVES THE REGISTER --- */
  /* --- BUTTON A BOTTOM TO BE PUSHED TO. MIN-HEIGHT RATHER THAN HEIGHT, SO A --- */
  /* --- MENU TOO LONG FOR THE SCREEN STILL GROWS AND SCROLLS INSTEAD OF --- */
  /* --- OVERLAPPING ITSELF --- */
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  min-height: 100%;
}
header #mobile-nav .menu > .menu-item {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
header #mobile-nav .menu > .menu-item:not(:last-child) {
  margin-bottom: 20px;
}
header #mobile-nav .menu > .menu-item a, header #mobile-nav .menu > .menu-item button {
  color: #ffffff;
  text-decoration: none !important;
}
header #mobile-nav .menu > .menu-item {
  /*
    Double the 18px these inherited. Not on .register - that is a button
    rather than a menu label, and its size is tied to the padding and the
    arch beside it, so doubling the text would blow the button up with it.
  */
}
header #mobile-nav .menu > .menu-item:not(.register) a, header #mobile-nav .menu > .menu-item:not(.register) button {
  font-size: 36px;
}
header #mobile-nav .menu > .menu-item button {
  position: relative;
}
header #mobile-nav .menu > .menu-item button .arrow {
  position: absolute;
  right: -24px;
  top: 0;
}
header #mobile-nav .menu > .menu-item button .arrow svg {
  -webkit-transition: all 350ms ease;
  -moz-transition: all 350ms ease;
  -ms-transition: all 350ms ease;
  -o-transition: all 350ms ease;
  transition: all 350ms ease;
  width: 16px;
  margin-left: 6px;
}
header #mobile-nav .menu > .menu-item button .arrow svg .stroke {
  stroke: #ffffff;
}
header #mobile-nav .menu > .menu-item.active button .arrow svg {
  -ms-transform: rotate(180deg); /* IE 9 */
  -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
  -o-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  transform: rotate(180deg);
}
header #mobile-nav .menu > .menu-item {
  /* --- REGISTER BUTTON, LIGHT TREATMENT TO SIT ON THE GREEN PANEL --- */
}
header #mobile-nav .menu > .menu-item.register {
  /* --- AUTO EATS WHATEVER SPACE IS GOING, WHICH PARKS THE BUTTON ON THE --- */
  /* --- BOTTOM EDGE AND LEAVES THE OTHER ITEMS WHERE THEY WERE. WHEN THERE --- */
  /* --- IS NO SPACE GOING IT COLLAPSES TO NOTHING AND THE BUTTON SIMPLY --- */
  /* --- FOLLOWS THE LAST ITEM, SO A LONG MENU STILL READS IN ORDER --- */
  margin-top: auto;
}
header #mobile-nav .menu > .menu-item.register a {
  background-color: transparent;
  border: 1px solid #ffffff;
  border-radius: 6px;
  color: #ffffff;
  padding: 11px 21px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
header #mobile-nav .menu > .menu-item.register a .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
header #mobile-nav .menu > .menu-item.register a .bridge svg {
  display: block;
  width: 35px;
  height: auto;
  /* --- SCOPED TO THE BAND. A BARE PATH SELECTOR WOULD ALSO CATCH THE --- */
  /* --- WIPE STROKE THAT SITS BESIDE IT AND FILL IT IN, PUTTING A SOLID --- */
  /* --- WEDGE UNDER THE ARCH. THERE IS NO HOVER ON MOBILE, SO THE WIPE --- */
  /* --- ITSELF JUST STAYS OFFSET AND OUT OF THE WAY --- */
}
header #mobile-nav .menu > .menu-item.register a .bridge svg path.bridge-arc {
  fill: #ffffff;
  fill-opacity: 0.3;
  mix-blend-mode: normal;
}
header #mobile-nav .sub-menu-wrap {
  overflow: hidden;
  height: 0;
  -webkit-transition: height 350ms ease;
  -moz-transition: height 350ms ease;
  -ms-transition: height 350ms ease;
  -o-transition: height 350ms ease;
  transition: height 350ms ease;
}
header #mobile-nav .sub-menu-wrap .sub-menu {
  display: inline-block;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  padding-left: 0;
  position: relative;
  padding-left: 20px;
  padding-right: 20px;
}
header #mobile-nav .sub-menu-wrap .sub-menu a {
  color: #ffffff;
}
header #mobile-nav .sub-menu-wrap .sub-menu .menu-item:not(:last-child) {
  margin-bottom: 12px;
}
header #mobile-nav .sub-menu-wrap .sub-menu .menu-item:first-child {
  margin-top: 20px;
}
header #mobile-nav .sub-menu-wrap .sub-menu .menu-item:last-child {
  margin-bottom: 20px;
}
header #mobile-nav {
  /* --- OPENING: SLOW FADE ON THE PANEL, THEN THE ITEMS IN QUICK SUCCESSION --- */
}
header #mobile-nav.open .nav-wrap {
  opacity: 1;
  visibility: visible;
  -webkit-transition: opacity 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 0ms;
  -moz-transition: opacity 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 0ms;
  -ms-transition: opacity 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 0ms;
  -o-transition: opacity 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 0ms;
  transition: opacity 600ms cubic-bezier(0.77, 0, 0.175, 1), visibility 0ms linear 0ms;
}
header #mobile-nav.open .menu > .menu-item {
  opacity: 1;
}
header #mobile-nav.open .menu > .menu-item:nth-child(1) {
  -webkit-transition-delay: 200ms;
  -moz-transition-delay: 200ms;
  -ms-transition-delay: 200ms;
  -o-transition-delay: 200ms;
  transition-delay: 200ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(2) {
  -webkit-transition-delay: 270ms;
  -moz-transition-delay: 270ms;
  -ms-transition-delay: 270ms;
  -o-transition-delay: 270ms;
  transition-delay: 270ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(3) {
  -webkit-transition-delay: 340ms;
  -moz-transition-delay: 340ms;
  -ms-transition-delay: 340ms;
  -o-transition-delay: 340ms;
  transition-delay: 340ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(4) {
  -webkit-transition-delay: 410ms;
  -moz-transition-delay: 410ms;
  -ms-transition-delay: 410ms;
  -o-transition-delay: 410ms;
  transition-delay: 410ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(5) {
  -webkit-transition-delay: 480ms;
  -moz-transition-delay: 480ms;
  -ms-transition-delay: 480ms;
  -o-transition-delay: 480ms;
  transition-delay: 480ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(6) {
  -webkit-transition-delay: 550ms;
  -moz-transition-delay: 550ms;
  -ms-transition-delay: 550ms;
  -o-transition-delay: 550ms;
  transition-delay: 550ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(7) {
  -webkit-transition-delay: 620ms;
  -moz-transition-delay: 620ms;
  -ms-transition-delay: 620ms;
  -o-transition-delay: 620ms;
  transition-delay: 620ms;
}
header #mobile-nav.open .menu > .menu-item:nth-child(8) {
  -webkit-transition-delay: 690ms;
  -moz-transition-delay: 690ms;
  -ms-transition-delay: 690ms;
  -o-transition-delay: 690ms;
  transition-delay: 690ms;
}
header #mobile-nav {
  /* --- CLOSING: ITEMS HELD IN PLACE WHILE THE PANEL FADES OUT AROUND THEM --- */
}
header #mobile-nav.closing .menu > .menu-item {
  opacity: 1;
  -webkit-transition: none;
  -moz-transition: none;
  -ms-transition: none;
  -o-transition: none;
  transition: none;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
header .stripe-menu {
  background-color: #F2F4F5;
  position: fixed;
  height: 52px;
  top: 74px;
  left: 0;
  width: 100%;
  z-index: 99;
  padding-left: 15px;
}
@media (min-width: 350px) {
  header .stripe-menu {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  header .stripe-menu {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  header .stripe-menu {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  header .stripe-menu {
    padding-left: 60px;
  }
}
header .stripe-menu {
  padding-right: 15px;
}
@media (min-width: 350px) {
  header .stripe-menu {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  header .stripe-menu {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  header .stripe-menu {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  header .stripe-menu {
    padding-right: 60px;
  }
}
header .stripe-menu {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: all 500ms ease;
  -moz-transition: all 500ms ease;
  -ms-transition: all 500ms ease;
  -o-transition: all 500ms ease;
  transition: all 500ms ease;
}
@media (max-width: 991.98px) {
  header .stripe-menu {
    display: none;
  }
}
header .stripe-menu ul {
  list-style: none;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
  padding: 0;
}
header .stripe-menu ul li:not(:last-child) {
  margin-right: 60px;
}
@media (max-width: 1199.98px) {
  header .stripe-menu ul li:not(:last-child) {
    margin-right: 40px;
  }
}
header .stripe-menu ul li a {
  font-size: 16px;
  color: #000000;
  text-decoration: none !important;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 1199.98px) {
  header .stripe-menu ul li a {
    font-size: 15px;
  }
}
header .stripe-menu ul li a.active {
  color: #595959;
}
header .stripe-menu ul li a:hover {
  color: #595959 !important;
}
header #skip-link-wrap {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  z-index: 99999;
}
header #skip-link-wrap div {
  height: 0;
}
header #skip-link-wrap #skip-link {
  position: relative;
  display: block;
  overflow: hidden;
  height: 50px;
  width: 200px;
  /* --- IT CARRIES .screenreader-text BUT HIDES ITSELF OFF THE TOP --- */
  /* --- INSTEAD, SO THE CLIPPING UTILITY HAS TO BE UNDONE HERE --- */
  clip: auto;
  margin: 0;
  white-space: normal;
  background: #ffffff;
  color: #000000;
  text-align: center;
  text-decoration: underline !important;
  padding-top: 14px;
  top: -50px;
  -webkit-transition: top 250ms ease;
  -moz-transition: top 250ms ease;
  -ms-transition: top 250ms ease;
  -o-transition: top 250ms ease;
  transition: top 250ms ease;
}
header #skip-link-wrap #skip-link:focus {
  top: 0;
}
header.has-stripe-menu .site-nav#primary-nav {
  -webkit-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  -moz-box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0);
}
@media (min-width: 992px) {
  header.has-stripe-menu + main {
    margin-top: 126px;
  }
}
@media (max-width: 991.98px) {
  header.has-stripe-menu + main {
    margin-top: 64px;
  }
}

/*--------------------------------------------------------------
THEME / SECTIONS
--------------------------------------------------------------*/
section {
  /*--------------------------------------------------------------
  HERO
  --------------------------------------------------------------*/
}
section.hero {
  position: relative;
  overflow: hidden;
  background-color: #2E3D21;
  padding-top: 146px;
  padding-bottom: 40px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  /* --- FULL VIEWPORT HEIGHT --- */
  /* --- 1. VH EVERYWHERE, IT SITS UNDER THE IOS TOOLBARS --- */
  /* --- 2. THE JS MEASURED CUSTOM PROPERTY FIXES OLDER IOS SAFARI --- */
  /* --- 3. SVH TAKES OVER WHERE SUPPORTED, NO JS AND NO SCROLL JUMP --- */
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  height: 100svh;
}
@media (max-width: 991.98px) {
  section.hero {
    padding-top: 96px;
    /*
      Matched to the top rather than left at 30. The copy is centred in what is
      left between the two paddings, so while the top reserved 96 for the nav
      and the bottom only 30 plus the banner, the whole block sat 19px low -
      half the difference between them. Squaring them up centres it against the
      section itself.

      The banner comes out of the flow just below so it is not part of that sum
      - otherwise its height would be, and it would have to be counted here and
      recounted the moment its text wrapped to two lines.
    */
    padding-bottom: 96px;
  }
}
section.hero .artwork {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* --- OWN STACKING CONTEXT, SO THE TWO HALVES ORDER AGAINST EACH OTHER --- */
  /* --- RATHER THAN AGAINST THE COPY, WHICH STAYS ABOVE ON Z-INDEX 2 --- */
  z-index: 1;
  /* --- THE BOUNCE OVERSHOOTS, SO THE CIRCLES RIDE UP PAST WHERE THEY FINISH. --- */
  /* --- WITH THEIR BOTTOMS FLUSH TO THE SECTION EDGE THAT LIFTED THE BARE --- */
  /* --- BACKGROUND INTO VIEW UNDERNEATH THEM ON THE WAY IN. SO THEY NOW REST --- */
  /* --- A LITTLE BELOW THE EDGE WITH THE SPARE HELD OFF SCREEN, AND ARE GROWN --- */
  /* --- TO MATCH. THE BOTTOM STAYS COVERED FOR THE WHOLE MOVE. --- */
  /* --- 12% CLEARS THE 9.78% PEAK WITH A BIT TO SPARE, AND 114% IS --- */
  /* --- 1/(1 - 0.12), SO WHAT IS LEFT ON SCREEN IS THE SIZE IT ALWAYS WAS --- */
  /* --- ANCHORED INTO THE BOTTOM CORNERS, HALF THE SECTION WIDTH AT MOST --- */
}
section.hero .artwork .half-circle {
  position: absolute;
  bottom: 0;
  /* --- OVERRIDES THE GLOBAL IMG WIDTH 100%. WITH THE LEFT/RIGHT ANCHORS --- */
  /* --- BELOW, EACH CIRCLE GROWS OUT OF ITS OWN BOTTOM CORNER, SO THEY --- */
  /* --- STAY IN THEIR CORNERS INSTEAD OF DRIFTING TOWARDS THE MIDDLE --- */
  width: 114%;
  height: auto;
  /* --- PARKED A FULL HEIGHT BELOW THE EDGE, THE SECTION CLIPS IT --- */
  transform: translateY(112%);
  /* --- THE BOUNCE IS THE EASING, NOT KEYFRAMES - THIS CURVE PEAKS AT --- */
  /* --- 1.0978, SO IT RIDES 9.8% PAST THE FINAL SPOT THEN SETTLES BACK INTO IT --- */
  transition: transform 1.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
section.hero .artwork .half-circle.left {
  left: 0;
  z-index: 1;
}
section.hero .artwork .half-circle.right {
  right: 0;
  z-index: 2;
}
section.hero .artwork {
  /*
    Barely held back at all. These used to wait out the whole 1.8s rainbow draw
    and start as it finished, which is what made the hero read as a queue -
    logo, then hills, then flowers. They now come up alongside it and land just
    inside it, so the arch drawing and the ground arriving are one moment.

    The hero plays once per load and never winds back out, see heroReveal in
    scripts.js, so these delays only ever run forwards.
  */
}
section.hero .artwork.revealed .half-circle {
  transform: translateY(12%);
  transition-delay: 0.2s;
}
section.hero .artwork {
  /*
    Where every crop goes and what it turns on. The flower files used to be
    full bleed canvases with the bloom already in place, so a layer needed no
    geometry at all - but that made every layer the size of the section, and
    23 of them at about 20MB of GPU texture each is what kept the entrance
    flickering. They are now trimmed to their own bloom, 193 megapixels down
    to 1.2, and the placement that used to be baked into the file lives here
    instead.

    Each entry is (left top width origin-x origin-y), all percentages of the
    .blooms box, which is the old artboard put back as an empty container.
    Generated by measuring the alpha of the uncropped originals - still in
    img/misc - and the reassembled artwork was diffed against the old full
    bleed stack and came back pixel identical. Do not hand edit: re-derive
    them if the artwork is re-exported.

    The origins land on about 50% 50% for anything that is one bloom in the
    middle of its own crop, which is most of them. The two lilies are the
    exception at 28% and 71%, because each is drawn cut off by the edge it
    sits against, so the middle of the flower is outside the crop entirely.
  */
  /* --- THE ORDER OF THE MAP ABOVE IS ALSO THE ORDER THEY OPEN IN - THE WHITES AND --- */
  /* --- THE SCATTERS FILL IN FIRST, THEN THE YELLOWS, THEN THE TWO LILIES. THE --- */
  /* --- STAGGER CLOCK FURTHER DOWN WALKS IT IN THAT ORDER, SO REORDERING THE MAP --- */
  /* --- RESEQUENCES THE ENTRANCE --- */
  /* --- THE ENTRANCE. GROWS FROM 80% AND TURNS 80DEG INTO ITS FINAL ANGLE, THEN --- */
  /* --- IT IS DONE. HELD BACK BEHIND THE HALF CIRCLES SO IT READS AS THE BLOOMS --- */
  /* --- OPENING ONCE THE DISC HAS SETTLED UNDER THEM --- */
  /* --- THE SCATTERS COME IN FROM FURTHER BACK AND DO NOT TURN AT ALL, SO THEY --- */
  /* --- READ AS SETTLING IN RATHER THAN AS ONE MORE THING SPINNING --- */
  /* --- THE TWO BIG LILIES ARE DRAWN CUT OFF BY THE EDGE THEY SIT ON - THE PETALS --- */
  /* --- BEYOND IT DO NOT EXIST IN THE FILE. AT REST THAT CUT LINES UP EXACTLY WITH --- */
  /* --- THE EDGE OF THE SCREEN, WHICH IS WHY IT READS AS CARRYING ON OFF SCREEN. --- */
  /* --- TURN IT AND THE CUT TURNS TOO, AND YOU SEE THE FLOWER SLICED FLAT. THE ONLY --- */
  /* --- CURE SHORT OF REDRAWING THE FLOWER WHOLE IS TO KEEP THE CUT OFF SCREEN, SO --- */
  /* --- THESE TWO TURN LESS THAN THE REST AND SIT FURTHER OUT WHILE THEY DO IT. --- */
  /* --- THE PAIRING COMES FROM TRACKING THE CUT PIXELS THEMSELVES ALONG THE WHOLE --- */
  /* --- PATH, AND THE TWO GO TOGETHER - CHANGE ONE AND THE OTHER HAS TO FOLLOW OR --- */
  /* --- THE SLICE IS BACK. 80DEG NEEDS 10%, 60DEG 7.75%, 45DEG 6%, 30DEG 4.25%, --- */
  /* --- 20DEG 3%. THE COST OF A BIG SLIDE IS THAT THE FLOWER STARTS MOSTLY OFF --- */
  /* --- SCREEN AND SWEEPS IN, SO LESS OF THE GROWING IS ACTUALLY WATCHED - AT 45DEG --- */
  /* --- AND 6% ABOUT A QUARTER OF IT IS ON SCREEN WHEN IT STARTS --- */
  /*
    How long one bloom takes, how far it trails the one before it, and when the
    first one starts.

    The stagger and the delay were a memory dial while the artwork was full
    bleed - how many 20MB layers were in flight at once had to be kept down,
    which is why the entrance used to be spread over nearly five seconds and
    parked behind the logo. Cropping took that away: all 25 moving together is
    about 3MB, so these are now chosen on look alone, and the look asked for is
    the flowers opening while the logo is still arriving rather than after it.

    So the delay dropped from 2s to 1s, which puts the first bloom halfway
    through the rainbow draw and just as the hills settle under it, and the
    stagger from 70ms to 34ms, which pulls the whole set into under a second
    instead of nearly three. 34 is about two frames at 60Hz - the one thing the
    stagger still has to do is keep two blooms out of the same frame, which is
    the half of the old stutter that CSS can fix. Do not take it below ~20ms.

    The clock is walked further down; the whole entrance now finishes around
    2.6s where it used to run to 4.8s.
  */
  /* --- A BEAT IN FRONT OF THE YELLOWS AND AGAIN IN FRONT OF THE LILIES, SO THOSE --- */
  /* --- TWO STILL READ AS ARRIVING RATHER THAN AS MORE OF THE SAME RUN. CUT BACK --- */
  /* --- WITH THE STAGGER - AT THE OLD 220 THESE TWO GAPS ALONE WERE MORE THAN THE --- */
  /* --- WHOLE RUN OF 25 BLOOMS IS NOW --- */
  /* --- THE FADE KEEPS ITS SHARE OF THE MOVE, ABOUT A THIRD, SO A BLOOM STILL --- */
  /* --- ARRIVES ALREADY GROWING AND IS FULLY UP EARLY ENOUGH THAT THE REST OF THE --- */
  /* --- MOVE IS WATCHED RATHER THAN MISSED --- */
  /* --- THE ARTBOARD, PUT BACK AS AN EMPTY BOX FOR THE CROPS TO SIT IN. AS WIDE AS --- */
  /* --- THE SECTION AND LOCKED TO THE 3456x2234 THE ARTWORK WAS DRAWN AT, SO EVERY --- */
  /* --- PERCENTAGE BELOW MEANS WHAT IT MEANT ON THE ARTBOARD. HEIGHT COMES FROM --- */
  /* --- PADDING RATHER THAN ASPECT-RATIO BECAUSE AN ABSOLUTE CHILD RESOLVES ITS --- */
  /* --- PERCENTAGES AGAINST THE PADDING BOX, AND IT WORKS EVERYWHERE. THE 20PX --- */
  /* --- LIFT THE WHOLE SET USED TO CARRY INDIVIDUALLY NOW LIVES HERE, ONCE --- */
}
section.hero .artwork .blooms {
  position: absolute;
  left: 0;
  bottom: 20px;
  width: 100%;
  height: 0;
  padding-bottom: 64.6412037037%;
  /* --- OVER BOTH DISCS. THEY TOP OUT AT 2 AND THE ARTWORK IS ITS OWN --- */
  /* --- STACKING CONTEXT, SO 3 KEEPS THE FLOWERS CLEAR WITHOUT REACHING THE COPY --- */
  z-index: 3;
  pointer-events: none;
}
section.hero .artwork {
  /* --- A CROP IS PLACED, NOT PINNED - THE GEOMETRY PER FILE IS BELOW. WIDTH IS THE --- */
  /* --- ONLY DIMENSION SET, HEIGHT FOLLOWS FROM THE IMAGE SO NOTHING IS SQUASHED --- */
}
section.hero .artwork .bloom {
  position: absolute;
  height: auto;
}
section.hero .artwork {
  /* --- LEFT, TOP, WIDTH AND PIVOT, ONE RULE PER FILE, STRAIGHT OFF THE MEASURED --- */
  /* --- GEOMETRY. THE CLASS IS THE FILENAME, SO A MISSING ENTRY IS A MISSING RULE --- */
  /* --- AND THE CROP SIMPLY WILL NOT BE POSITIONED - LOUD RATHER THAN SUBTLE --- */
}
section.hero .artwork .bloom.right-small-flowers-1 {
  left: 79.311%;
  top: 84.736%;
  width: 3.038%;
  transform-origin: 49.99% 49.99%;
}
section.hero .artwork .bloom.right-small-flowers-2 {
  left: 78.009%;
  top: 80.618%;
  width: 3.038%;
  transform-origin: 50.05% 49.95%;
}
section.hero .artwork .bloom.right-small-flowers-3 {
  left: 76.649%;
  top: 77.619%;
  width: 3.038%;
  transform-origin: 50.05% 49.93%;
}
section.hero .artwork .bloom.right-small-flowers-4 {
  left: 74.855%;
  top: 80.573%;
  width: 3.038%;
  transform-origin: 49.85% 50.05%;
}
section.hero .artwork .bloom.right-small-flowers-5 {
  left: 83.796%;
  top: 82.766%;
  width: 3.038%;
  transform-origin: 50.15% 49.98%;
}
section.hero .artwork .bloom.right-small-flowers-6 {
  left: 82.494%;
  top: 78.603%;
  width: 3.038%;
  transform-origin: 49.89% 50.04%;
}
section.hero .artwork .bloom.right-small-flowers-7 {
  left: 79.34%;
  top: 78.559%;
  width: 3.038%;
  transform-origin: 50.02% 49.93%;
}
section.hero .artwork .bloom.right-small-flowers-8 {
  left: 86.545%;
  top: 77.216%;
  width: 3.038%;
  transform-origin: 49.86% 49.99%;
}
section.hero .artwork .bloom.left-small-flowers-1 {
  left: 16.175%;
  top: 81.871%;
  width: 3.125%;
  transform-origin: 50.09% 49.98%;
}
section.hero .artwork .bloom.left-small-flowers-2 {
  left: 18.113%;
  top: 78.335%;
  width: 3.154%;
  transform-origin: 49.99% 49.9%;
}
section.hero .artwork .bloom.left-small-flowers-3 {
  left: 19.907%;
  top: 75.962%;
  width: 3.154%;
  transform-origin: 49.86% 49.95%;
}
section.hero .artwork .bloom.left-small-flowers-4 {
  left: 21.181%;
  top: 79.543%;
  width: 3.154%;
  transform-origin: 50.08% 49.98%;
}
section.hero .artwork .bloom.left-small-flowers-5 {
  left: 12.124%;
  top: 78.201%;
  width: 3.125%;
  transform-origin: 50.12% 50.04%;
}
section.hero .artwork .bloom.left-small-flowers-6 {
  left: 14.062%;
  top: 74.664%;
  width: 3.154%;
  transform-origin: 50.02% 49.96%;
}
section.hero .artwork .bloom.left-small-flowers-7 {
  left: 17.13%;
  top: 75.828%;
  width: 3.154%;
  transform-origin: 50.11% 50.04%;
}
section.hero .artwork .bloom.left-small-flowers-8 {
  left: 10.33%;
  top: 71.71%;
  width: 3.154%;
  transform-origin: 50.1% 50%;
}
section.hero .artwork .bloom.extra-small-flowers-1 {
  left: 0%;
  top: 58.774%;
  width: 12.963%;
  transform-origin: 49.68% 50.02%;
}
section.hero .artwork .bloom.extra-small-flowers-2 {
  left: 23.148%;
  top: 81.289%;
  width: 10.764%;
  transform-origin: 50% 49.98%;
}
section.hero .artwork .bloom.extra-small-flowers-3 {
  left: 69.184%;
  top: 86.482%;
  width: 11.111%;
  transform-origin: 50% 50.36%;
}
section.hero .artwork .bloom.extra-small-flowers-4 {
  left: 82.002%;
  top: 49.687%;
  width: 10.706%;
  transform-origin: 50.04% 49.97%;
}
section.hero .artwork .bloom.medium-flower-1 {
  left: 93.258%;
  top: 83.169%;
  width: 4.282%;
  transform-origin: 50.02% 50.05%;
}
section.hero .artwork .bloom.medium-flower-2 {
  left: 79.89%;
  top: 58.102%;
  width: 4.282%;
  transform-origin: 49.97% 50%;
}
section.hero .artwork .bloom.medium-flower-3 {
  left: 10.503%;
  top: 59.714%;
  width: 4.282%;
  transform-origin: 49.89% 49.98%;
}
section.hero .artwork .bloom.large-flower-1 {
  left: 0%;
  top: 70.188%;
  width: 11.372%;
  transform-origin: 28.14% 51.59%;
}
section.hero .artwork .bloom.large-flower-2 {
  left: 88.368%;
  top: 39.123%;
  width: 11.632%;
  transform-origin: 70.77% 50.75%;
}
section.hero .artwork {
  /* --- BEHAVIOUR ONE - THE CONTINUOUS TURN, SAME ON EVERY BLOOM THAT HAS IT --- */
}
section.hero .artwork .bloom.flowers {
  -webkit-animation: flowersSpin 5s linear infinite;
  -moz-animation: flowersSpin 5s linear infinite;
  -ms-animation: flowersSpin 5s linear infinite;
  -o-animation: flowersSpin 5s linear infinite;
  animation: flowersSpin 5s linear infinite;
}
section.hero .artwork {
  /* --- BEHAVIOUR TWO - THE ONE SHOT ENTRANCE. A TRANSITION RATHER THAN KEYFRAMES, --- */
  /* --- LIKE THE HALF CIRCLES AND THE LOGO ARC, SO IT SETTLES AND STAYS SETTLED --- */
}
section.hero .artwork .bloom.grow-in {
  /* --- HOW FAR BACK IT STARTS AND WHICH WAY IT SWINGS IN FROM. CUSTOM --- */
  /* --- PROPERTIES, NOT A TRANSFORM PER INDEX, SO THAT TRANSFORM IS ONLY EVER --- */
  /* --- DECLARED IN THE TWO RULES HERE - THE PER SET OVERRIDES BELOW CANNOT THEN --- */
  /* --- OUTWEIGH THE REVEALED STATE, AND A SET VARIES ITS ENTRANCE BY SETTING --- */
  /* --- THESE TWO VALUES RATHER THAN BY NEEDING A BEHAVIOUR CLASS OF ITS OWN --- */
  --grow-from: 0.8;
  --turn: 80deg;
  /* --- OUTWARD SHOVE, ONLY THE EDGE LILIES WANT ONE. OUTERMOST IN THE LIST SO --- */
  /* --- IT IS A PLAIN SHIFT OF THE ALREADY TURNED AND SCALED FLOWER, NOT --- */
  /* --- SOMETHING THE ROTATION SWINGS AROUND --- */
  --slide: 0%;
  /* --- HOW BIG IT SITS WHEN IT IS DONE. 1 EVERYWHERE EXCEPT THE PHONE, WHERE --- */
  /* --- THE WHOLE SET IS SCALED UP - SEE THE MD-DOWN BLOCK AT THE END OF THE --- */
  /* --- ARTWORK. A SCALE ABOUT EACH BLOOM'S OWN PIVOT RATHER THAN A BIGGER BOX --- */
  /* --- FOR THEM ALL TO SIT IN, BECAUSE THE ARTBOARD PUTS SEVERAL PIECES HARD --- */
  /* --- AGAINST AN EDGE AND SCALING THE BOX WOULD CARRY THEM STRAIGHT OFF IT --- */
  --rest: 1;
  /* --- NOT SHOWN AT ALL UNTIL IT STARTS MOVING --- */
  opacity: 0;
  transform: translateX(var(--slide)) scale(calc(var(--grow-from) * var(--rest))) rotate(var(--turn));
  -webkit-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  /* --- BACK ON NOW THE ARTWORK IS CROPPED. IT WAS TAKEN OUT WHEN EVERY BLOOM --- */
  /* --- WAS A FULL BLEED LAYER, BECAUSE PROMOTING 23 OF THEM AT LOAD PARKED HALF --- */
  /* --- A GIGABYTE ON THE COMPOSITOR AND IT EVICTED AND REBUILT LAYERS EVERY --- */
  /* --- FRAME. A CROPPED BLOOM IS A FEW HUNDRED KB AT MOST, SO ALL 23 PROMOTED --- */
  /* --- COMES TO ABOUT 3MB - AND PROMOTING EARLY MEANS THE RASTERISATION IS NOT --- */
  /* --- SITTING IN THE CRITICAL PATH AT THE MOMENT EACH ONE STARTS MOVING --- */
  will-change: opacity, transform;
}
section.hero .artwork {
  /* --- HALF OF THE SINGLE BLOOMS COME IN THE OTHER WAY. ALTERNATING BY INDEX, SO --- */
  /* --- THE TWO DIRECTIONS END UP MIXED THROUGH A CLUSTER RATHER THAN SPLIT --- */
  /* --- ACROSS IT --- */
  /* --- AND THE SCATTERS JUST GROW - NO TURN, AND FROM FURTHER BACK. A WHOLE --- */
  /* --- SCATTER SWINGING WOULD DRAG ITS OUTER BLOOMS THROUGH A BIG ARC, SINCE --- */
  /* --- THEY SIT WELL OUT FROM THE PIVOT, WHICH IS NOT WHAT THESE WANT. BOTH CASES --- */
  /* --- RIDE THE SAME LOOP SO THE COUNTS COME OFF THE GEOMETRY AND CANNOT GO STALE --- */
}
section.hero .artwork .bloom.grow-in.right-small-flowers-2 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.right-small-flowers-4 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.right-small-flowers-6 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.right-small-flowers-8 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.left-small-flowers-2 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.left-small-flowers-4 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.left-small-flowers-6 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.left-small-flowers-8 {
  --turn: -80deg;
}
section.hero .artwork .bloom.grow-in.extra-small-flowers-1 {
  --grow-from: 0.7;
  --turn: 0deg;
}
section.hero .artwork .bloom.grow-in.extra-small-flowers-2 {
  --grow-from: 0.7;
  --turn: 0deg;
}
section.hero .artwork .bloom.grow-in.extra-small-flowers-3 {
  --grow-from: 0.7;
  --turn: 0deg;
}
section.hero .artwork .bloom.grow-in.extra-small-flowers-4 {
  --grow-from: 0.7;
  --turn: 0deg;
}
section.hero .artwork .bloom.grow-in.medium-flower-2 {
  --turn: -80deg;
}
section.hero .artwork {
  /* --- AND THE TWO EDGE LILIES, SET ONE BY ONE RATHER THAN ALTERNATED, SINCE EACH --- */
  /* --- TURNS OUT OF THE EDGE IT IS TIED TO. --turn IS THE ANGLE IT STARTS AT AND --- */
  /* --- UNWINDS TO NOTHING, SO A NEGATIVE START MEANS IT TURNS CLOCKWISE ON THE WAY --- */
  /* --- IN, AND A POSITIVE ONE ANTICLOCKWISE. EACH SLIDES OUT TOWARDS ITS OWN EDGE. --- */
  /* --- THE SLIDE IS A PERCENTAGE OF THE ELEMENT, AND THE ELEMENT IS NOW THE CROP --- */
  /* --- RATHER THAN THE WHOLE ARTBOARD, SO THE OLD 6% HAD TO BE RESCALED. IT STILL --- */
  /* --- HAS TO COME OUT AT 6% OF THE SECTION WIDTH, WHICH ON A CROP 11.372% WIDE IS --- */
  /* --- 6/11.372 = 52.8%, AND ON ONE 11.632% WIDE IS 51.6% --- */
}
section.hero .artwork .bloom.grow-in.large-flower-1 {
  --turn: -45deg;
  --slide: -52.8%;
}
section.hero .artwork .bloom.grow-in.large-flower-2 {
  --turn: 45deg;
  --slide: 51.6%;
}
section.hero .artwork {
  /* --- THE DELAY SITS ONLY HERE, SAME AS THE HALF CIRCLES --- */
}
section.hero .artwork.revealed .bloom.grow-in {
  opacity: 1;
  transform: scale(var(--rest));
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
section.hero .artwork {
  /* --- AND THEN OFFSET ONE BLOOM FROM THE NEXT. THIS IS TWO THINGS AT ONCE - THE --- */
  /* --- SIXTEEN LAYERS NO LONGER ALL LAND IN THE SAME FRAME, WHICH IS THE HALF OF --- */
  /* --- THE STUTTER CSS CAN FIX, AND A CLUSTER THAT OPENS BLOOM BY BLOOM READS AS --- */
  /* --- GROWING RATHER THAN AS ONE OBJECT BEING SCALED. SET THE STAGGER TO 0MS TO --- */
  /* --- PUT THEM BACK IN LOCKSTEP --- */
  /* --- A RUNNING CLOCK THROUGH EVERY SET IN THE ORDER THEY ARE LISTED, RATHER THAN --- */
  /* --- AN INDEX PER SET. PER SET, EVERY SET FIRED ITS FIRST BLOOM ON THE SAME --- */
  /* --- FRAME AND THE WHOLE LOT WAS AIRBORNE AT ONCE. ONE CLOCK ALSO MEANS THE --- */
  /* --- GROUP GAP CAN JUST BE ADDED TO IT WHERE A SET WANTS SETTING APART --- */
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-1 {
  -webkit-transition-delay: 1s;
  -moz-transition-delay: 1s;
  -ms-transition-delay: 1s;
  -o-transition-delay: 1s;
  transition-delay: 1s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-2 {
  -webkit-transition-delay: 1.034s;
  -moz-transition-delay: 1.034s;
  -ms-transition-delay: 1.034s;
  -o-transition-delay: 1.034s;
  transition-delay: 1.034s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-3 {
  -webkit-transition-delay: 1.068s;
  -moz-transition-delay: 1.068s;
  -ms-transition-delay: 1.068s;
  -o-transition-delay: 1.068s;
  transition-delay: 1.068s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-4 {
  -webkit-transition-delay: 1.102s;
  -moz-transition-delay: 1.102s;
  -ms-transition-delay: 1.102s;
  -o-transition-delay: 1.102s;
  transition-delay: 1.102s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-5 {
  -webkit-transition-delay: 1.136s;
  -moz-transition-delay: 1.136s;
  -ms-transition-delay: 1.136s;
  -o-transition-delay: 1.136s;
  transition-delay: 1.136s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-6 {
  -webkit-transition-delay: 1.17s;
  -moz-transition-delay: 1.17s;
  -ms-transition-delay: 1.17s;
  -o-transition-delay: 1.17s;
  transition-delay: 1.17s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-7 {
  -webkit-transition-delay: 1.204s;
  -moz-transition-delay: 1.204s;
  -ms-transition-delay: 1.204s;
  -o-transition-delay: 1.204s;
  transition-delay: 1.204s;
}
section.hero .artwork.revealed .bloom.grow-in.right-small-flowers-8 {
  -webkit-transition-delay: 1.238s;
  -moz-transition-delay: 1.238s;
  -ms-transition-delay: 1.238s;
  -o-transition-delay: 1.238s;
  transition-delay: 1.238s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-1 {
  -webkit-transition-delay: 1.272s;
  -moz-transition-delay: 1.272s;
  -ms-transition-delay: 1.272s;
  -o-transition-delay: 1.272s;
  transition-delay: 1.272s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-2 {
  -webkit-transition-delay: 1.306s;
  -moz-transition-delay: 1.306s;
  -ms-transition-delay: 1.306s;
  -o-transition-delay: 1.306s;
  transition-delay: 1.306s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-3 {
  -webkit-transition-delay: 1.34s;
  -moz-transition-delay: 1.34s;
  -ms-transition-delay: 1.34s;
  -o-transition-delay: 1.34s;
  transition-delay: 1.34s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-4 {
  -webkit-transition-delay: 1.374s;
  -moz-transition-delay: 1.374s;
  -ms-transition-delay: 1.374s;
  -o-transition-delay: 1.374s;
  transition-delay: 1.374s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-5 {
  -webkit-transition-delay: 1.408s;
  -moz-transition-delay: 1.408s;
  -ms-transition-delay: 1.408s;
  -o-transition-delay: 1.408s;
  transition-delay: 1.408s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-6 {
  -webkit-transition-delay: 1.442s;
  -moz-transition-delay: 1.442s;
  -ms-transition-delay: 1.442s;
  -o-transition-delay: 1.442s;
  transition-delay: 1.442s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-7 {
  -webkit-transition-delay: 1.476s;
  -moz-transition-delay: 1.476s;
  -ms-transition-delay: 1.476s;
  -o-transition-delay: 1.476s;
  transition-delay: 1.476s;
}
section.hero .artwork.revealed .bloom.grow-in.left-small-flowers-8 {
  -webkit-transition-delay: 1.51s;
  -moz-transition-delay: 1.51s;
  -ms-transition-delay: 1.51s;
  -o-transition-delay: 1.51s;
  transition-delay: 1.51s;
}
section.hero .artwork.revealed .bloom.grow-in.extra-small-flowers-1 {
  -webkit-transition-delay: 1.544s;
  -moz-transition-delay: 1.544s;
  -ms-transition-delay: 1.544s;
  -o-transition-delay: 1.544s;
  transition-delay: 1.544s;
}
section.hero .artwork.revealed .bloom.grow-in.extra-small-flowers-2 {
  -webkit-transition-delay: 1.578s;
  -moz-transition-delay: 1.578s;
  -ms-transition-delay: 1.578s;
  -o-transition-delay: 1.578s;
  transition-delay: 1.578s;
}
section.hero .artwork.revealed .bloom.grow-in.extra-small-flowers-3 {
  -webkit-transition-delay: 1.612s;
  -moz-transition-delay: 1.612s;
  -ms-transition-delay: 1.612s;
  -o-transition-delay: 1.612s;
  transition-delay: 1.612s;
}
section.hero .artwork.revealed .bloom.grow-in.extra-small-flowers-4 {
  -webkit-transition-delay: 1.646s;
  -moz-transition-delay: 1.646s;
  -ms-transition-delay: 1.646s;
  -o-transition-delay: 1.646s;
  transition-delay: 1.646s;
}
section.hero .artwork.revealed .bloom.grow-in.medium-flower-1 {
  -webkit-transition-delay: 1.77s;
  -moz-transition-delay: 1.77s;
  -ms-transition-delay: 1.77s;
  -o-transition-delay: 1.77s;
  transition-delay: 1.77s;
}
section.hero .artwork.revealed .bloom.grow-in.medium-flower-2 {
  -webkit-transition-delay: 1.804s;
  -moz-transition-delay: 1.804s;
  -ms-transition-delay: 1.804s;
  -o-transition-delay: 1.804s;
  transition-delay: 1.804s;
}
section.hero .artwork.revealed .bloom.grow-in.medium-flower-3 {
  -webkit-transition-delay: 1.838s;
  -moz-transition-delay: 1.838s;
  -ms-transition-delay: 1.838s;
  -o-transition-delay: 1.838s;
  transition-delay: 1.838s;
}
section.hero .artwork.revealed .bloom.grow-in.large-flower-1 {
  -webkit-transition-delay: 1.962s;
  -moz-transition-delay: 1.962s;
  -ms-transition-delay: 1.962s;
  -o-transition-delay: 1.962s;
  transition-delay: 1.962s;
}
section.hero .artwork.revealed .bloom.grow-in.large-flower-2 {
  -webkit-transition-delay: 1.996s;
  -moz-transition-delay: 1.996s;
  -ms-transition-delay: 1.996s;
  -o-transition-delay: 1.996s;
  transition-delay: 1.996s;
}
@media (prefers-reduced-motion: reduce) {
  section.hero .artwork .half-circle {
    transform: translateY(12%);
    transition: none;
  }
  section.hero .artwork {
    /* --- THE FLOWERS KEEP THEIR PLACE AND THEIR LIFT, THEY JUST STOP TURNING --- */
  }
  section.hero .artwork .bloom.flowers {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
  }
  section.hero .artwork {
    /* --- AND THE ONES THAT GROW IN ARE SIMPLY ALREADY OPEN, VISIBLE AT FULL SIZE --- */
    /* --- AND THEIR FINAL ANGLE, WHETHER OR NOT THE REVEAL EVER RUNS --- */
  }
  section.hero .artwork .bloom.grow-in {
    opacity: 1;
    transform: scale(var(--rest));
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section.hero .artwork {
  /*
    THE PHONE. Everything above is the landscape artboard the illustration was
    drawn on, 3456 x 2234, mapped to the width of the screen. On a phone that
    leaves it a 64%-of-the-width strip along the bottom - the whole scene squashed
    into the bottom quarter with the two lilies barely readable, which is what the
    design feedback was about.

    Three dials, all of them the same idea: fill more of the screen with the same
    pieces, and change nothing about where they sit relative to each other.

    The discs are the whole of the bottom half in the design and by far the biggest
    mass, so they carry most of it. 198% is measured rather than picked: a disc is
    0.646 as tall as it is wide and rests with 12% of itself below the section
    edge, so its top sits 0.88 x 0.646 x width above the bottom. The design puts
    that line at about 56% of the screen, which needs 774px on a 390 phone.

    The blooms then grow in place and the set is lifted, which between them get the
    lower flowers up off the bottom edge and readable at something like the size
    they are drawn at in the design.

    Phones only, and that is measured too rather than assumed. The artwork is
    sized off the section's width while the screen it has to fill is a height, so
    how squashed it looks is really a matter of how tall the screen is against how
    wide - and it is only narrow portrait screens where it goes wrong. A tablet at
    768 already carries the discs up to 51% of its screen with no help at all, so
    it is left alone; a blanket md-down here would have thrown them up to 15% of it.

    What this is not is the design's own mobile layout. That is a portrait
    composition rather than this one scaled - its lilies are drawn at a different
    aspect entirely and the piece sizes it implies disagree with each other, 1.6x
    on the lilies against 1.9x on the clusters and 2.7x on where they sit. Getting
    it exact needs the mobile artwork and a geometry map of its own, the same way
    $bloom-geometry was derived for the desktop artboard.
  */
  /*
    The min-height is not belt and braces, it is the same lesson as the discs one
    more time. Everything here is sized off the screen's height, so the only thing
    left that can go wrong is there not being enough of it: on a 568 tall phone the
    copy runs to four full width lines and the enlarged flowers came up through it.
    Above 700 there is room for both. Under it the artwork stays as it was, which is
    smaller and lower but perfectly clear, and that is the better of the two.
  */
}
@media (max-width: 575.98px) and (min-height: 700px) {
  section.hero .artwork .half-circle {
    /*
      Off the height of the screen rather than the width of the section, which
      is the whole point - the line these have to reach is a fraction of the
      screen. A disc is 0.646 as tall as it is wide and rests with 12% of
      itself below the bottom edge, so its top lands 0.88 x 0.646 x width above
      the bottom: at 83vh that is 47.2vh up, putting the line at 52.8% of the
      screen. The design draws it at about 56 and this is deliberately a little
      above that, asked for after seeing it. Holds at any phone size instead of
      being right at one width and wrong at the next.

      Three declarations for one value, the same ladder the section's own height
      uses: plain vh, then the measured custom property for the older iOS
      Safaris where vh sits under the toolbars, then svh where it is supported.

      The floor is the width the pair needs to still meet in the middle. It only
      binds on a short, wide screen - a landscape phone - where a height driven
      width would leave a wedge of bare gradient between the two discs.
    */
    width: 83vh;
    width: calc(var(--vh, 1vh) * 83);
    width: 83svh;
    min-width: 114%;
  }
  section.hero .artwork .blooms {
    /*
      Off the height as well, and for the same reason. This box gets its height
      from a padding percentage, which resolves against the width - so on a
      phone the taller the screen got the lower down it the artwork sat, and a
      575 wide one 700 tall would have put the top of it at a tenth of the
      screen. A height in vh holds the whole set at the same fraction of any
      phone: 45 and 8 land it where 390x844 wanted it, and every other size
      now agrees with that instead of drifting.

      Same ladder as above for the older iOS Safaris. padding-bottom back to
      zero, or it would be added to the height rather than standing in for it.
    */
    bottom: 8vh;
    bottom: calc(var(--vh, 1vh) * 8);
    bottom: 8svh;
    height: 45vh;
    height: calc(var(--vh, 1vh) * 45);
    height: 45svh;
    padding-bottom: 0;
  }
  section.hero .artwork .bloom.grow-in {
    --rest: 1.5;
  }
}
section.hero {
  /* --- THE IDLE FILM. IT REPLACES THE ARTWORK, NOT THE HERO - THE LOGO AND THE --- */
  /* --- COPY STAY WHERE THEY ARE AND THE FILM COMES UP BEHIND THEM, SO IT HAS TO --- */
  /* --- SLOT BETWEEN THE TWO. ARTWORK 1, FILM 2, COPY AND BANNER 3. THE COPY --- */
  /* --- SITTING ABOVE IS THE WHOLE POINT AND IS NOT LEFT TO SOURCE ORDER TO --- */
  /* --- DECIDE, HENCE 3 ON THEM RATHER THAN LEAVING THEM ON 2 ALONGSIDE THIS. --- */
  /* --- POINTER-EVENTS NONE SO IT NEVER SWALLOWS A CLICK MEANT FOR THE COPY --- */
}
section.hero .hero-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* --- 16:9 FILM IN A VIEWPORT HEIGHT SECTION, SO IT HAS TO CROP RATHER THAN --- */
  /* --- LETTERBOX --- */
  object-fit: cover;
  object-position: center;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transition: opacity 800ms cubic-bezier(0.56, 0, 0.24, 1);
}
section.hero {
  /* --- HELD BACK BEHIND THE START OF THE WIND OUT, SO THE INTRO IS SEEN LEAVING --- */
  /* --- RATHER THAN BEING PAINTED OVER WHERE IT STANDS. COMING BACK HAS NO DELAY --- */
  /* --- ON IT - A MOUSE MOVE SHOULD CLEAR THE FILM AT ONCE --- */
}
section.hero.idle .hero-video {
  opacity: 1;
  transition-delay: 600ms;
}
section.hero .container {
  position: relative;
  /* --- ABOVE THE IDLE FILM, WHICH SITS ON 2 --- */
  z-index: 3;
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex-grow: 1;
  -ms-flex: 1;
  flex-grow: 1;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  /*
    The container's content box plus the gutters the row's own negative
    margins take straight back out of it.

    This was a flat 100%, and 100% of a flex item is the container's content
    box - 350px inside a 390 phone. The row's -15px margins then pulled it
    15px to the left without handing the width back, so the whole block sat
    15px left of centre: 20px of air down the left and 50 down the right. It
    showed up on the logo first, being the widest thing in there, but the copy
    was every bit as off. Every other section's container is a plain block,
    where those margins widen the row symmetrically and none of this arises -
    it is being a flex item that makes the width definite.
  */
}
section.hero .container > .row {
  width: calc(100% + 30px);
}
section.hero .inner {
  text-align: center;
}
section.hero {
  /*
    THE OPENING, ALL IN ONE BREATH. The arch draws itself on and everything else
    fades up while it does, rather than waiting for it to finish - asked for off
    the designer's Hero.mov. Only the arch used to move at all: the wordmark, the
    tagline, the copy and the banner were simply there from the first paint, so
    the hero read as one thing happening and then a second thing happening.

    The fades are stepped a little apart rather than fired together, so it reads
    as the logo assembling downwards - letters, tagline, copy, banner - instead
    of four things blinking on at once. The last of them still lands inside the
    arch's own draw, which is what holds it together as a single move: at 180ms a
    step the banner starts at 540 and is done at 1740, just inside the 1800 the
    arch takes. Both numbers are here, so retiming the arch means checking that
    the last step still lands before it.
  */
}
section.hero .logo {
  width: 100%;
  max-width: 790px;
  margin: 0 auto;
}
@media (max-width: 991.98px) {
  section.hero .logo {
    max-width: 420px;
  }
}
section.hero .logo img, section.hero .logo svg {
  display: block;
  width: 100%;
  height: auto;
}
section.hero .logo {
  /* --- THE HALF MOON RAINBOW DRAWS ITSELF ALONG ITS OWN CURVE --- */
  /* --- 304 IS THE LENGTH OF THE MASK STROKE, SEE THE SVG --- */
  /* --- A TRANSITION RATHER THAN KEYFRAMES SO LEAVING THE HERO JUST TAKES --- */
  /* --- THE CLASS BACK OFF AND THE DRAW UNWINDS THE WAY IT CAME --- */
}
section.hero .logo .logo-arc-wipe {
  stroke-dashoffset: 304;
  transition: stroke-dashoffset 1.8s cubic-bezier(0.56, 0, 0.24, 1);
}
section.hero .logo {
  /* --- THE TWO GROUPS INSIDE THE SVG, WHICH ARE THE LETTERS AND THE LINE --- */
  /* --- UNDER THEM. FADED HERE RATHER THAN ON .logo, SO THE ARCH IS LEFT OUT --- */
  /* --- OF IT - IT HAS ITS OWN WAY IN AND FADING THE LOT WOULD PUT A SECOND --- */
  /* --- MOVE ON TOP OF THE DRAW --- */
}
section.hero .logo .logo-wordmark, section.hero .logo .logo-tagline {
  opacity: 0;
  transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
}
section.hero .logo .logo-tagline {
  -webkit-transition-delay: 180ms;
  -moz-transition-delay: 180ms;
  -ms-transition-delay: 180ms;
  -o-transition-delay: 180ms;
  transition-delay: 180ms;
}
section.hero .logo.revealed .logo-arc-wipe {
  stroke-dashoffset: 0;
}
section.hero .logo.revealed .logo-wordmark, section.hero .logo.revealed .logo-tagline {
  opacity: 1;
}
section.hero .logo {
  /* --- LEAVE IT DRAWN, DO NOT WIND IT IN AND OUT ON EVERY SCROLL PASS --- */
}
@media (prefers-reduced-motion: reduce) {
  section.hero .logo .logo-arc-wipe {
    stroke-dashoffset: 0;
    transition: none;
  }
  section.hero .logo .logo-wordmark, section.hero .logo .logo-tagline {
    opacity: 1;
    transition: none;
  }
}
section.hero .content {
  max-width: 620px;
  /* --- THIRD IN, BEHIND THE TAGLINE. THE CLASS COMES FROM heroReveal, WHICH --- */
  /* --- HANDS IT TO THE COPY AND THE BANNER AS WELL AS THE LOGO --- */
  opacity: 0;
  -webkit-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -webkit-transition-delay: 360ms;
  -moz-transition-delay: 360ms;
  -ms-transition-delay: 360ms;
  -o-transition-delay: 360ms;
  transition-delay: 360ms;
}
section.hero .content.revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  section.hero .content {
    opacity: 1;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section.hero .content {
  /* --- 75 RATHER THAN 32. MEASURED OFF THE STATIC DESIGN IN IMG/MISC - THE GAP --- */
  /* --- FROM THE BOTTOM OF "WHERE YOU BELONG." TO THE FIRST LINE OF COPY IS 85PX --- */
  /* --- THERE AND WAS 42PX HERE, AND THE LOGO NOW CARRIES THE TAGLINE SO IT NEEDS --- */
  /* --- THE ROOM. HELD BACK ON SMALL SCREENS, WHERE THE HERO IS VIEWPORT HEIGHT --- */
  /* --- AND HAS NONE TO SPARE --- */
  margin: 75px auto 0;
}
@media (max-width: 991.98px) {
  section.hero .content {
    margin-top: 32px;
  }
}
section.hero .content * {
  color: #ffffff;
}
section.hero .content h2 {
  margin-bottom: 80px;
}
@media (max-width: 991.98px) {
  section.hero .content h2 {
    margin-bottom: 48px;
  }
}
section.hero .content p {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.24px;
}
section.hero .content {
  /*
    The design's mobile hero holds this copy well in from the edges and breaks it
    over three lines, and these two numbers are what hold that break - they are
    not a look picked at one screen size.

    A measure in px rather than the vw it started as, which is the whole point. At
    20px the first line of the design's break, "A new master-planned destination",
    is 274px, and the next word after it takes the line to 306. So the break holds
    for any measure from 274 to 305 and changes outside it - and a vw measure walks
    straight across that window as the screen changes width. 66vw is 238px on a 360
    phone and 282 on a 428, so the same declaration gave four lines on one and
    three on the other. 290px is in the window for every phone instead: checked at
    360, 375, 390, 393, 412, 428 and 540 and the wrap is identical at all seven,
    with 16px of room either side of it.

    No height gate on this one, unlike the artwork above. Three lines at 20px is a
    shorter block than the four at 24px it replaces, so the short screens that are
    held back from the artwork boost have room for this and read better with it.
  */
}
@media (max-width: 575.98px) {
  section.hero .content {
    max-width: 290px;
  }
  section.hero .content p {
    font-size: 20px;
  }
}
section.hero .content {
  /* --- AND IT SITS DOWN HERE RATHER THAN UP WITH THE OTHER MAX-WIDTH ON --- */
  /* --- PURPOSE. A MEDIA QUERY CARRIES NO EXTRA SPECIFICITY, SO ABOVE THE P --- */
  /* --- RULE THE 24PX SIMPLY WON AND THE COPY STAYED ON FOUR LINES --- */
}
section.hero .banner {
  position: relative;
  /* --- ABOVE THE IDLE FILM, WHICH SITS ON 2 --- */
  z-index: 3;
  text-align: center;
  /* --- LAST IN, AND THE FURTHEST DOWN THE HERO --- */
  opacity: 0;
  -webkit-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 1.2s cubic-bezier(0.56, 0, 0.24, 1);
  -webkit-transition-delay: 540ms;
  -moz-transition-delay: 540ms;
  -ms-transition-delay: 540ms;
  -o-transition-delay: 540ms;
  transition-delay: 540ms;
}
section.hero .banner.revealed {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  section.hero .banner {
    opacity: 1;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section.hero .banner {
  /* --- OUT OF THE FLOW BELOW LG, SO ITS HEIGHT IS NOT PART OF WHAT THE COPY --- */
  /* --- ABOVE IS CENTRED WITHIN. IT SITS WHERE THE OLD 30PX PADDING PUT IT --- */
}
@media (max-width: 991.98px) {
  section.hero .banner {
    position: absolute;
    left: 0;
    bottom: 30px;
    width: 100%;
  }
}
section.hero .banner span {
  color: #ffffff;
  font-size: 14px;
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.2px;
}
section {
  /*--------------------------------------------------------------
  INTRO
  --------------------------------------------------------------*/
}
section.intro {
  background-color: #F0D3C6;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.intro {
    padding-top: 56px;
  }
}
section.intro {
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.intro {
    padding-bottom: 56px;
  }
}
section.intro > .container > .row {
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
section.intro {
  /*
    The illustration is one file per piece, every file the whole artboard with
    its piece already drawn in place. So a piece is just the whole canvas laid
    over the column - nothing here places an individual leaf or flower, and
    the pieces cannot drift out of register with each other.

    One piece stays in flow and gives the column its height, the rest are laid
    over it. All of them are positioned, so what stacks them is document order
    alone - see $intro_pieces in inc/sections/intro.php, which is back to
    front and was read off the original artwork.

    The two widths are not a fudge. Butterfly-1 exports at the full artboard,
    1624 x 1360, and the other 22 come out 1600 wide with 24px missing off
    their left edge - checked against illustration-intro.png, which lines up
    to within antialiasing at that offset and nowhere else. So they are set
    24/1624 in and 1600/1624 wide. Percentages, not px, so it holds at any
    column width.
  */
}
section.intro .illustration {
  position: relative;
  /*
    The video route. The file is 1800 x 2160, so it is taller than it is wide
    where the still artwork was wider than tall, and at full column width it
    makes the section far taller than the design.

    So it is held in from the sides. The width is worked back from the design
    rather than guessed: the illustration sits in an 800 x 680 box there, and
    at the video's 1800/2160 aspect a 680 tall frame is 567 wide, which is
    71% of 800. Inset on the video itself and not as padding on the column,
    because .col-lg-6 gets its gutter from the bootstrap css this theme
    loads separately, and setting padding here would wipe it out.

    Left full width below lg, where it stacks above the copy and has nothing
    to compete with for space.
  */
}
section.intro .illustration .illustration-video {
  display: block;
  width: 100%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}
@media (min-width: 992px) {
  section.intro .illustration .illustration-video {
    width: 71%;
  }
}
section.intro .illustration .piece {
  position: absolute;
  top: 0;
  left: 1.4778325123%;
  width: 98.5221674877%;
  height: auto;
}
section.intro .illustration {
  /* --- IN FLOW, SO THE COLUMN TAKES ITS HEIGHT FROM THE ARTBOARD ASPECT --- */
}
section.intro .illustration .piece-base {
  position: relative;
  left: 0;
  width: 100%;
}
section.intro .inner {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media (min-width: 992px) {
  section.intro .inner {
    padding-left: 60px;
  }
}
@media (max-width: 991.98px) {
  section.intro .inner {
    margin-top: 40px;
  }
}
section.intro ul.logos {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  list-style: none;
  margin: 0 0 48px;
  padding: 0;
}
@media (max-width: 991.98px) {
  section.intro ul.logos {
    margin-bottom: 32px;
  }
}
section.intro ul.logos {
  /* --- THE THREE FIT ON ONE LINE DOWN TO ABOUT 520PX AND THEN WRAP TWO AND --- */
  /* --- ONE, WHICH READS AS A MISTAKE RATHER THAN A LAYOUT. SO BELOW THE --- */
  /* --- BREAKPOINT ABOVE THAT THEY GO ONE PER LINE INSTEAD - ALL THREE --- */
  /* --- TOGETHER OR ALL THREE APART, NEVER THE SPLIT. THE ROW IS LEFT ALIGNED --- */
  /* --- ALREADY, SO STACKED THEY KEEP THE SAME EDGE AS THE COPY UNDER THEM --- */
}
@media (max-width: 575.98px) {
  section.intro ul.logos {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
  }
}
section.intro ul.logos li:not(:last-child) {
  margin-right: 44px;
}
@media (max-width: 1199.98px) {
  section.intro ul.logos li:not(:last-child) {
    margin-right: 32px;
  }
}
section.intro ul.logos li:not(:last-child) {
  /* --- STACKED, THE GAP HAS TO CHANGE AXIS WITH THEM --- */
}
@media (max-width: 575.98px) {
  section.intro ul.logos li:not(:last-child) {
    margin-right: 0;
    margin-bottom: 20px;
  }
}
section.intro ul.logos li {
  /* --- HEIGHT COMES FROM THE LOGO HEIGHT SUB FIELD, INLINE ON THE SVG --- */
}
section.intro ul.logos li svg, section.intro ul.logos li img {
  display: block;
  max-width: 100%;
}
section.intro .content {
  max-width: 560px;
}
section.intro .content p {
  font-size: 24px;
  /* --- 24 IS TOO MUCH LEAD PARAGRAPH ONCE THE COLUMN NARROWS --- */
}
@media (max-width: 991.98px) {
  section.intro .content p {
    font-size: 20px;
  }
}
section.intro .acf-link {
  margin-top: 48px;
}
@media (max-width: 991.98px) {
  section.intro .acf-link {
    margin-top: 32px;
  }
}
section.intro .acf-link a {
  background-color: #6A2A2A;
  border-radius: 6px;
  color: #ffffff;
  padding: 12px 21px;
  /* --- INLINE FLEX SO THE BUTTON SHRINK WRAPS ITS TEXT --- */
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-decoration: none !important;
  -webkit-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
section.intro .acf-link a span {
  color: #ffffff;
}
section.intro .acf-link a .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
section.intro .acf-link a .bridge svg {
  display: block;
  width: 35px;
  height: auto;
}
section.intro .acf-link a {
  /* --- THE WHITE ARCH WIPES ON AS THE COLOUR FADES, SEE MIXINS.SCSS --- */
}
section.intro .acf-link a .bridge svg path.bridge-arc-wipe {
  stroke: #ffffff;
  stroke-width: 3.386;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  section.intro .acf-link a:hover, section.intro .acf-link a:focus {
    background-color: #F26845;
  }
  section.intro .acf-link a:hover .bridge svg path.bridge-arc-wipe, section.intro .acf-link a:focus .bridge svg path.bridge-arc-wipe {
    stroke-dashoffset: 0;
  }
}
section {
  /*--------------------------------------------------------------
  MAP
  --------------------------------------------------------------*/
}
section.map {
  background-color: #F0D3C6;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.map {
    padding-top: 56px;
  }
}
section.map {
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.map {
    padding-bottom: 56px;
  }
}
section.map {
  /* --- DOUBLE THE SHARED BOTTOM, ASKED FOR SO THE MAP HAS ROOM UNDER IT. --- */
  /* --- AFTER THE MIXIN, NOT BEFORE - A MEDIA QUERY CARRIES NO EXTRA --- */
  /* --- SPECIFICITY, SO THE MIXIN'S OWN 100 WOULD SIMPLY WIN IF THIS CAME --- */
  /* --- FIRST --- */
}
@media (min-width: 992px) {
  section.map {
    padding-bottom: 200px;
  }
}
section.map {
  /*
    And the same lopsided shape on the small screens, asked for separately:
    half the shared 56 above and double it below, so the map has room under it
    the way it does on desktop.

    This is the one section that steps outside the flat 56 every other section
    keeps below lg. Deliberate, and only because the map wants the weight
    underneath it - anything else added here should still take the shared step.
  */
}
@media (max-width: 991.98px) {
  section.map {
    padding-top: 28px;
    padding-bottom: 112px;
  }
}
section.map .inner {
  text-align: center;
}
section.map .map-image {
  margin-top: 40px;
}
@media (min-width: 992px) {
  section.map .map-image {
    max-width: 80%;
    margin-left: auto;
    margin-right: auto;
  }
}
@media (min-width: 1200px) {
  section.map .map-image {
    max-width: 70%;
  }
}
section.map .map-image {
  /* --- WIDTH ON THE SVG TOO, THE GLOBAL IMG RULE DOES NOT REACH IT, AND WITHOUT --- */
  /* --- IT THE INLINED MAP WOULD SIT AT ITS OWN 1160 RATHER THAN FILLING --- */
}
section.map .map-image img, section.map .map-image svg {
  display: block;
  width: 100%;
  max-width: 100%;
  height: auto;
}
section.map .map-image {
  /*
    The parcel opens the way the hero does. The orange block and the logo
    sitting on it are two separate elements - the roads are drawn between
    them and have to stay between them - so rather than wrapping the pair in
    a group and moving the logo up the stacking order, both carry .map-grow
    and take the same transform. Same origin in the same viewBox means they
    scale as one piece and stay registered.

    Origin is the middle of the parcel, measured off its path - it spans
    425.767,28.1987 to 739.443,392.292 in the 1160 x 660 viewBox, so the
    centre is 582.6,210.2.

    The arc then wipes on behind that, delayed until the block has landed.
  */
  /* --- CLOSE TO THE GROW ON PURPOSE, SO THE TWO LAND TOGETHER AND READ AS ONE --- */
  /* --- MOVE. $ease2 STARTS SLOWLY, SO A LONGER DRAW IS BARELY UNDER WAY BY THE --- */
  /* --- TIME THE BLOCK HAS FADED UP AND IT GOES BACK TO LOOKING LIKE TWO STEPS - --- */
  /* --- AT 1.4S IT WAS 11% DRAWN WHEN THE FADE FINISHED, AT 1S IT IS 29%, AND IT --- */
  /* --- IS 97% DONE AS THE BLOCK SETTLES --- */
  /* --- BARELY BEHIND THE GROW RATHER THAN AFTER IT, SO THE ARC IS ALREADY --- */
  /* --- DRAWING WHILE THE BLOCK IS STILL COMING UP. IT IS INSIDE THE GROWING --- */
  /* --- GROUP, SO IT SCALES AS IT DRAWS --- */
}
section.map .map-image .map-grow {
  transform-box: view-box;
  transform-origin: 582.6px 210.2px;
  opacity: 0;
  transform: scale(0.8);
  -webkit-transition: opacity 450ms cubic-bezier(0.56, 0, 0.24, 1), transform 900ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 450ms cubic-bezier(0.56, 0, 0.24, 1), transform 900ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 450ms cubic-bezier(0.56, 0, 0.24, 1), transform 900ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 450ms cubic-bezier(0.56, 0, 0.24, 1), transform 900ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 450ms cubic-bezier(0.56, 0, 0.24, 1), transform 900ms cubic-bezier(0.56, 0, 0.24, 1);
}
section.map .map-image {
  /* --- 92 IS THE LENGTH OF THE MASK STROKE, SEE THE SVG --- */
  /* --- A TRANSITION RATHER THAN KEYFRAMES SO LEAVING THE SECTION JUST TAKES --- */
  /* --- THE CLASS BACK OFF AND THE DRAW UNWINDS THE WAY IT CAME --- */
}
section.map .map-image .map-arc-wipe {
  stroke-dashoffset: 92;
  -webkit-transition: stroke-dashoffset 1s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 1s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 1s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 1s cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 1s cubic-bezier(0.56, 0, 0.24, 1);
}
section.map .map-image.revealed .map-grow {
  opacity: 1;
  transform: none;
}
section.map .map-image.revealed {
  /* --- THE DELAY IS ONLY ON THIS RULE, SO SCROLLING AWAY UNWINDS IT ALL --- */
  /* --- STRAIGHT AWAY INSTEAD OF WAITING THE DELAY OUT FIRST --- */
}
section.map .map-image.revealed .map-arc-wipe {
  stroke-dashoffset: 0;
  -webkit-transition-delay: 100ms;
  -moz-transition-delay: 100ms;
  -ms-transition-delay: 100ms;
  -o-transition-delay: 100ms;
  transition-delay: 100ms;
}
section.map .map-image {
  /* --- ALREADY OPEN AND ALREADY DRAWN, WHETHER OR NOT THE REVEAL EVER RUNS --- */
}
@media (prefers-reduced-motion: reduce) {
  section.map .map-image .map-grow {
    opacity: 1;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
  section.map .map-image .map-arc-wipe {
    stroke-dashoffset: 0;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section {
  /*--------------------------------------------------------------
  CONTENT AND IMAGE
  --------------------------------------------------------------*/
}
section.content-and-image {
  background-color: #EDEBE2;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.content-and-image {
    padding-top: 56px;
  }
}
section.content-and-image {
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.content-and-image {
    padding-bottom: 56px;
  }
}
section.content-and-image {
  /* --- DOUBLE THE SHARED BOTTOM, ASKED FOR SO THE CAROUSEL HAS ROOM UNDER IT. --- */
  /* --- AFTER THE MIXIN, NOT BEFORE - A MEDIA QUERY CARRIES NO EXTRA --- */
  /* --- SPECIFICITY, SO THE MIXIN'S OWN 100 WOULD SIMPLY WIN IF THIS CAME --- */
  /* --- FIRST... --- */
  /* --- ...AND ONLY FROM XL UP. AT LG THIS CAUGHT TABLETS TOO - AN IPAD IN --- */
  /* --- LANDSCAPE IS 1024 - SO A TABLET GOT THE DOUBLED BOTTOM AGAINST A --- */
  /* --- SINGLE TOP, WHICH IS THE MISMATCH THAT WAS REPORTED. BETWEEN 992 AND --- */
  /* --- 1199 IT NOW FALLS BACK TO THE SHARED 100 AND THE TWO MATCH --- */
}
@media (min-width: 1200px) {
  section.content-and-image {
    padding-bottom: 200px;
  }
}
section.content-and-image .heading p {
  font-size: 24px;
}
section.content-and-image {
  /* --- BOTH COLUMNS START LEVEL, BUT THE HEADING'S H2 CARRIES A 40PX TOP MARGIN --- */
  /* --- (SEE .editor-content H2 IN COMMON.SCSS) AND THE PARAGRAPH BESIDE IT HAS --- */
  /* --- NONE, SO THE PARAGRAPH SAT HALF A LINE ABOVE THE TITLE - 53PX ABOVE IT, --- */
  /* --- MEASURED. THE DESIGN HAS THE TWO LEVEL, SO THE SECOND COLUMN TAKES THE --- */
  /* --- SAME OFFSET. TAKING IT OFF THE H2 INSTEAD WOULD LEVEL THEM TOO, BUT THAT --- */
  /* --- MARGIN IS ALSO WHAT GIVES THE SECTION ITS TOP SPACING, WHICH ALREADY --- */
  /* --- MATCHES. ONLY WHILE THEY ARE SIDE BY SIDE - BELOW LG THEY STACK --- */
}
@media (min-width: 992px) {
  section.content-and-image .heading-row > .content {
    margin-top: 40px;
  }
}
section.content-and-image .heading-row > .content {
  /* --- ONCE THE TWO COLUMNS STACK, THE PARAGRAPH RAN STRAIGHT ON FROM --- */
  /* --- "A NEW KIND OF NEIGHBOURHOOD." WITH NOTHING BETWEEN THEM. THE --- */
  /* --- BUILDERS SECTION ALREADY PUTS 24PX THERE - SEE ITS .heading-row --- */
  /* --- >.inner - AND THIS IS THE SAME GAP, SO THE TWO STACK ALIKE --- */
}
@media (max-width: 991.98px) {
  section.content-and-image .heading-row > .content {
    margin-top: 24px;
  }
}
section.content-and-image .slider-row {
  margin-top: 60px;
}
@media (max-width: 991.98px) {
  section.content-and-image .slider-row {
    margin-top: 40px;
  }
}
section.content-and-image .slider-row .image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 100/42;
  object-fit: cover;
  object-position: center;
}
@media (max-width: 991.98px) {
  section.content-and-image .slider-row .image {
    aspect-ratio: 100/70;
  }
}
section {
  /*--------------------------------------------------------------
  CONTENT AND SLIDER
  --------------------------------------------------------------*/
}
section.content-and-slider {
  position: relative;
  overflow: hidden;
  /* --- THE DESIGNER'S ARTWORK IS MULTIPLIED ONTO A FLAT GREEN AND CANNOT BE --- */
  /* --- EXPORTED OFF IT CLEANLY, SO THE THREE CORNER PIECES WERE KEYED OUT OF --- */
  /* --- IT INSTEAD - ANY PIXEL WITHIN REACH OF THIS EXACT COLOUR WAS TAKEN TO --- */
  /* --- BE BACKGROUND AND MADE TRANSPARENT. THAT MAKES THIS COLOUR PART OF THE --- */
  /* --- CROPS RATHER THAN A FREE CHOICE - THE SOFT SHADOW UNDER THE BOTTOM --- */
  /* --- LEFT LEAF SITS CLOSE ENOUGH TO IT TO HAVE BEEN PARTLY KEYED AWAY, AND --- */
  /* --- ONLY READS RIGHT BACK ON THE SAME GREEN. CHANGE IT AND THE PIECES HAVE --- */
  /* --- TO BE RE-CUT FROM IMG/MISC/LIFESTYLE/THE LIFESTYLE SECTION.PNG --- */
  background-color: #3A4930;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.content-and-slider {
    padding-top: 56px;
  }
}
section.content-and-slider {
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.content-and-slider {
    padding-bottom: 56px;
  }
}
section.content-and-slider {
  /* --- THE DESIGN LEAVES 172PX UNDER THE IMAGE STRIP WHERE THE SHARED 100 LEFT --- */
  /* --- 101... --- */
  /* --- ...AND ONLY FROM XL UP. AT LG THIS CAUGHT TABLETS TOO - AN IPAD IN --- */
  /* --- LANDSCAPE IS 1024 - SO A TABLET GOT THE DOUBLED BOTTOM AGAINST A --- */
  /* --- SINGLE TOP, WHICH IS THE MISMATCH THAT WAS REPORTED. BETWEEN 992 AND --- */
  /* --- 1199 IT NOW FALLS BACK TO THE SHARED 100 AND THE TWO MATCH --- */
}
@media (min-width: 1200px) {
  section.content-and-slider {
    padding-bottom: 170px;
  }
}
section.content-and-slider .heading p {
  font-size: 24px;
}
section.content-and-slider .artwork {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* --- ONE BELOW THE HEADING AND THE SLIDER, WHICH BOTH SIT ON 2 --- */
  z-index: 1;
  /* --- EACH PIECE IS PINNED TO THE CORNER IT BELONGS TO AND RUNS OFF THE --- */
  /* --- EDGES FROM THERE, SO THERE IS NO ARTBOARD TO PUT BACK THE WAY THE --- */
  /* --- HERO AND THE FOOTER NEED - CORNER, WIDTH, DONE. THE WIDTHS ARE --- */
  /* --- PERCENTAGES OF THE SECTION SO THE SET SCALES WITH IT. --- */
  /* --- VERTICAL ANCHOR, HORIZONTAL ANCHOR, WIDTH, THEN HOW FAR OFF THAT --- */
  /* --- VERTICAL EDGE IT SITS. TWO OF THE THREE RUN INTO THEIR CORNER AND --- */
  /* --- NEED NO OFFSET AT ALL - ONLY THE SMALL BOTTOM RIGHT SPRIG STOPS --- */
  /* --- SHORT, 87PX ABOVE THE EDGE ON THE 3456 WIDE ORIGINAL. THAT IS A --- */
  /* --- MARGIN RATHER THAN A BOTTOM VALUE ON PURPOSE - A MARGIN PERCENTAGE --- */
  /* --- RESOLVES AGAINST THE WIDTH, SO IT SCALES WITH THE ARTWORK, WHERE --- */
  /* --- BOTTOM WOULD RESOLVE AGAINST THE SECTION HEIGHT AND DRIFT AS THE --- */
  /* --- SLIDER GREW. IT ALSO LEAVES TRANSFORM FREE FOR ANIMATING THESE --- */
  /* --- EVERY WIDTH IS THE CROP'S OWN PIXEL WIDTH OVER THE 3456 IT WAS CUT --- */
  /* --- FROM, WHICH IS HOW TO GET THE NUMBER FOR ANYTHING ADDED LATER --- */
}
section.content-and-slider .artwork .piece {
  position: absolute;
  /* --- OVERRIDES THE GLOBAL IMG WIDTH 100%, THE MAP SETS THE REAL ONE --- */
  height: auto;
}
section.content-and-slider .artwork {
  /*
    THE ENTRANCE. The bottom left leaf turns anticlockwise into place and
    lifts as it goes, so it starts turned the other way and sitting a little
    low. Hinged on its own bottom left corner, which is the section's bottom
    left corner too, so that corner never moves.

    The slide is what keeps the left edge clean. Turning clockwise about that
    pivot swings the leaf's left edge inwards, away from the section's edge,
    and the gradient would show down the side. The leaf reaches the left edge
    from 83px down its own 506px height, so the point that has to be covered
    sits 423px above the pivot - a lever of 0.681 of its width - and a turn of
    t moves it inwards by 0.681 * sin(t) * width. At 20deg that is 23.3%, and
    the shove has to lead it the whole way in rather than only at the end, so
    24% covers every step with a little to spare. The bottom edge needs
    nothing: the same turn swings it downwards, off the section, and the lift
    starts it lower still.

    No scale on this one - the growth the footer pieces have would pull both
    edges inwards and want compensating twice over, and the brief was a turn.
  */
  /*
    THE VINES. The line is a png shown through a mask whose stroke runs down
    the vine's own centre line, so winding the dashoffset back to 0 walks the
    reveal from the top of the squiggle to its end - the hero logo's rainbow
    does the same thing. The dasharray is set per vine in the markup, because
    each path has its own length; all that is set here is the wind.

    The sprigs are their own images, sitting exactly where they were cut from,
    and they simply fade. What makes it read as the vine growing is the delay:
    --at is how far along the line each sprig sits, 0 to 1, so multiplying the
    draw time by it holds the fade until the line has arrived there.

    Which is why the draw is linear and the sprigs are not. That multiplication
    is only true if the line covers ground at a steady rate - on an ease the
    two come apart, because being 83% of the way along is not the same as being
    83% of the way through the time. On $ease2 the far sprig sat 0.6s behind
    its own line, which reads as the vine going past and the leaves catching up
    afterwards. Linear keeps the sum honest at any duration, and the fade
    itself still eases.
  */
  /*
    Both of these are the original 2.6s and 0.5s over three, by request, and
    they have to be divided together rather than the draw alone. The sprig
    delay below is a fraction of the draw time, so the line landing sooner
    pulls the delays in with it but leaves the fade itself the length it was -
    at three times the speed the far sprig would still be fading 0.35s after
    the line had arrived, which is exactly the lag that was tuned out of this.
    Dividing both keeps the two in the same relation at any speed.
  */
}
section.content-and-slider .artwork .piece.vine {
  /* --- THE SVG STANDS IN FOR WHAT WAS AN IMG, SO IT TAKES THE SAME SIZING --- */
  display: block;
  overflow: visible;
}
section.content-and-slider .artwork .vine-draw {
  stroke-dashoffset: var(--vine-length, 1400);
  transition: stroke-dashoffset 0.87s linear;
}
section.content-and-slider .artwork .vine-sprig {
  opacity: 0;
  transition: opacity 0.17s cubic-bezier(0.56, 0, 0.24, 1);
}
section.content-and-slider .artwork.revealed .vine-draw {
  stroke-dashoffset: 0;
}
section.content-and-slider .artwork.revealed .vine-sprig {
  opacity: 1;
  /* --- CALC RATHER THAN A PER SPRIG RULE, SO A VINE CAN GAIN OR LOSE --- */
  /* --- SPRIGS WITHOUT ANYTHING HERE CHANGING --- */
  transition-delay: calc(var(--at) * 0.87s);
}
section.content-and-slider .artwork {
  /* --- NOTHING DRAWS. THE VINES ARE SIMPLY ALREADY THERE --- */
}
@media (prefers-reduced-motion: reduce) {
  section.content-and-slider .artwork .vine-draw {
    stroke-dashoffset: 0;
    transition: none;
  }
  section.content-and-slider .artwork .vine-sprig {
    opacity: 1;
    transition: none;
  }
}
section.content-and-slider .artwork .piece.leaf-bottom-left {
  transform-origin: 0 100%;
  opacity: 0;
  transform: translate(-24%, 8%) rotate(20deg);
  -webkit-transition: opacity 0.35s cubic-bezier(0.56, 0, 0.24, 1), transform 0.9s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 0.35s cubic-bezier(0.56, 0, 0.24, 1), transform 0.9s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 0.35s cubic-bezier(0.56, 0, 0.24, 1), transform 0.9s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 0.35s cubic-bezier(0.56, 0, 0.24, 1), transform 0.9s cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 0.35s cubic-bezier(0.56, 0, 0.24, 1), transform 0.9s cubic-bezier(0.56, 0, 0.24, 1);
  will-change: opacity, transform;
}
section.content-and-slider .artwork.revealed .piece.leaf-bottom-left {
  opacity: 1;
  transform: none;
}
section.content-and-slider .artwork {
  /* --- NOTHING TURNS. THE LEAF IS SIMPLY ALREADY IN PLACE --- */
}
@media (prefers-reduced-motion: reduce) {
  section.content-and-slider .artwork .piece.leaf-bottom-left {
    opacity: 1;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section.content-and-slider .artwork .piece.vine-top-right {
  top: 0;
  right: 0;
  width: 30.498%;
  margin-top: 0;
}
section.content-and-slider .artwork .piece.vine-bottom-right {
  bottom: 0;
  right: 0;
  width: 9.606%;
  margin-bottom: 2.517%;
}
section.content-and-slider .artwork .piece.leaf-bottom-left {
  bottom: 0;
  left: 0;
  width: 17.969%;
  margin-bottom: 0;
}
section.content-and-slider .container {
  position: relative;
  z-index: 2;
}
section.content-and-slider .heading * {
  color: #ffffff;
}
section.content-and-slider .gallery-slider {
  position: relative;
  z-index: 2;
  margin-top: 60px;
}
@media (max-width: 991.98px) {
  section.content-and-slider .gallery-slider {
    margin-top: 40px;
  }
}
section.content-and-slider .gallery-slider {
  /* --- SPLIDE'S OWN CSS PUTS HEIGHT 100% ON THE LIST, AND THE TRACK IT IS --- */
  /* --- MEASURING AGAINST HAS NO HEIGHT OF ITS OWN - THE TRACK TAKES ITS --- */
  /* --- HEIGHT FROM THE LIST. THAT IS A CIRCLE, AND A BROWSER BREAKS IT WITH --- */
  /* --- WHATEVER THE LIST HAPPENED TO MEASURE ON AN EARLIER PASS, WHICH HERE --- */
  /* --- IS THE PASS BEFORE SPLIDE HAD SIZED THE SLIDES. THAT LEFT THE TRACK --- */
  /* --- 279PX TALLER THAN THE IMAGES IN IT, AND THE STALE NUMBER GOT --- */
  /* --- RE-RESOLVED EVERY TIME A LAYOUT WAS TOUCHED - WHICH UNDER A TICKER --- */
  /* --- THAT IS CONSTANTLY, SO THE WHOLE STRIP FLICKED ITS HEIGHT AND --- */
  /* --- RECOVERED. AUTO BREAKS THE CIRCLE AND THE STRIP IS SIMPLY THE HEIGHT --- */
  /* --- OF ITS OWN SLIDES --- */
}
section.content-and-slider .gallery-slider .splide__list {
  height: auto;
}
section.content-and-slider .gallery-slider .image {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 4/5;
  object-fit: cover;
  object-position: center;
}
section {
  /*--------------------------------------------------------------
  BUILDERS
  --------------------------------------------------------------*/
}
section.builders {
  background-color: #F0D3C6;
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.builders {
    padding-top: 56px;
  }
}
section.builders {
  padding-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.builders {
    padding-bottom: 56px;
  }
}
section.builders {
  /* --- THE DESIGN LEAVES 161PX UNDER THE BUILDER TILES WHERE THE SHARED 100 LEFT --- */
  /* --- 101. ONLY THE DESKTOP CASE IS OVERRIDDEN - THE MIXIN'S SMALLER STEPS --- */
  /* --- BELOW LG ARE LEFT ALONE --- */
}
@media (min-width: 992px) {
  section.builders {
    padding-bottom: 160px;
  }
}
section.builders .heading p {
  font-size: 24px;
}
section.builders .heading-row > .inner {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: start;
  -moz-box-align: start;
  -ms-flex-align: start;
  -webkit-align-items: flex-start;
  align-items: flex-start;
  /* --- LEVELS WITH THE TITLE THE SAME WAY THE VISION DOES, SEE THE NOTE THERE --- */
}
@media (min-width: 992px) {
  section.builders .heading-row > .inner {
    margin-top: 40px;
  }
}
@media (max-width: 991.98px) {
  section.builders .heading-row > .inner {
    margin-top: 24px;
  }
}
section.builders .heading-row > .inner .acf-link {
  margin-top: 32px;
}
section.builders .heading-row > .inner .acf-link a {
  background-color: #4B5F32;
  border-radius: 6px;
  color: #ffffff;
  padding: 12px 21px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-decoration: none !important;
  -webkit-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
section.builders .heading-row > .inner .acf-link a span {
  color: #ffffff;
}
section.builders .heading-row > .inner .acf-link a .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
section.builders .heading-row > .inner .acf-link a .bridge svg {
  display: block;
  width: 35px;
  height: auto;
}
section.builders .heading-row > .inner .acf-link a {
  /* --- THE WHITE ARCH WIPES ON AS THE COLOUR FADES, SEE MIXINS.SCSS --- */
}
section.builders .heading-row > .inner .acf-link a .bridge svg path.bridge-arc-wipe {
  stroke: #ffffff;
  stroke-width: 3.386;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  section.builders .heading-row > .inner .acf-link a:hover, section.builders .heading-row > .inner .acf-link a:focus {
    background-color: #F26845;
  }
  section.builders .heading-row > .inner .acf-link a:hover .bridge svg path.bridge-arc-wipe, section.builders .heading-row > .inner .acf-link a:focus .bridge svg path.bridge-arc-wipe {
    stroke-dashoffset: 0;
  }
}
section.builders .blocks {
  margin-top: 60px;
}
@media (max-width: 991.98px) {
  section.builders .blocks {
    margin-top: 40px;
  }
}
section.builders .blocks .block {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
}
@media (max-width: 991.98px) {
  section.builders .blocks .block:not(:last-child) {
    margin-bottom: 20px;
  }
}
section.builders .blocks .block {
  /*
    The cards open slower than everything else hovers, by request, so this
    is local rather than the shared $hover-timing - that one is on the nav
    links and every button on the site, and the ask was for these cards.
    It drives all three parts of the swap below, which have to stay on one
    number: the box changing colour, the logo going, and the copy arriving
    are one movement, and any of them out of step reads as a stutter.
    The Learn More inside the card keeps the shared timing - that is its
    own hover, not the card's, and it matches the other buttons.
  */
  /*
    Every shape a wordmark can be drawn with, because targeting path alone was
    not enough. Illustrator exports each glyph as whichever shape suits it - the
    Arista logo comes out as five paths, two polygons and a rect - and the file
    carries its own fill in a <style> block inside itself. Recolouring only the
    paths left the two triangles and the T crossbar at the file's near black,
    which on the maroon card reads as missing letters rather than as a colour
    being wrong. The theme's selector easily outweighs the file's own class, so
    all it had to do was reach the rest of the shapes.
  */
}
section.builders .blocks .block .inner {
  position: relative;
  width: 100%;
  background-color: #6A2A2A;
  padding: 48px 40px;
  min-height: 400px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-transition: background-color 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (max-width: 1199.98px) {
  section.builders .blocks .block .inner {
    padding: 40px 24px;
  }
}
section.builders .blocks .block .inner .logo svg, section.builders .blocks .block .inner .logo img {
  display: block;
  max-width: 100%;
}
section.builders .blocks .block .inner {
  /*
    The default logo floats over the middle of the box while the reveal
    sits in the flow, so the box is always tall enough for the revealed
    copy no matter how long it runs.
  */
}
section.builders .blocks .block .inner .logo-default {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  -webkit-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
section.builders .blocks .block .inner .logo-default svg path, section.builders .blocks .block .inner .logo-default svg polygon, section.builders .blocks .block .inner .logo-default svg rect, section.builders .blocks .block .inner .logo-default svg circle, section.builders .blocks .block .inner .logo-default svg ellipse, section.builders .blocks .block .inner .logo-default svg line, section.builders .blocks .block .inner .logo-default svg polyline {
  fill: #E9E2D6;
}
section.builders .blocks .block .inner .reveal {
  width: 100%;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
  opacity: 0;
  /* --- INVISIBLE IS NOT THE SAME AS GONE. AT ZERO OPACITY THE LEARN --- */
  /* --- MORE INSIDE THIS WAS STILL A LIVE LINK, SO ON A PHONE THE FIRST --- */
  /* --- TAP ON A CARD COULD FOLLOW IT INSTEAD OF OPENING THE CARD - AND --- */
  /* --- NOW THAT TAP IS THE WAY IN, THAT IS THE TAP THAT MATTERS --- */
  pointer-events: none;
  -webkit-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: opacity 500ms cubic-bezier(0.77, 0, 0.175, 1);
}
section.builders .blocks .block .inner .reveal .logo-revealed svg path, section.builders .blocks .block .inner .reveal .logo-revealed svg polygon, section.builders .blocks .block .inner .reveal .logo-revealed svg rect, section.builders .blocks .block .inner .reveal .logo-revealed svg circle, section.builders .blocks .block .inner .reveal .logo-revealed svg ellipse, section.builders .blocks .block .inner .reveal .logo-revealed svg line, section.builders .blocks .block .inner .reveal .logo-revealed svg polyline {
  fill: #141414;
}
section.builders .blocks .block .inner .reveal .content {
  margin-top: 32px;
  font-size: 18px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  letter-spacing: -0.18px;
}
section.builders .blocks .block .inner .reveal .acf-link {
  margin-top: 32px;
}
section.builders .blocks .block .inner .reveal .acf-link a {
  background-color: #6A2A2A;
  border-radius: 6px;
  color: #ffffff;
  padding: 11px 18px;
  display: -webkit-inline-box;
  display: -moz-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-decoration: none !important;
  -webkit-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
section.builders .blocks .block .inner .reveal .acf-link a span {
  color: #ffffff;
}
section.builders .blocks .block .inner .reveal .acf-link a .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
section.builders .blocks .block .inner .reveal .acf-link a .bridge svg {
  display: block;
  width: 35px;
  height: auto;
}
section.builders .blocks .block .inner .reveal .acf-link a {
  /* --- THE WHITE ARCH WIPES ON AS THE COLOUR FADES, SEE MIXINS.SCSS --- */
}
section.builders .blocks .block .inner .reveal .acf-link a .bridge svg path.bridge-arc-wipe {
  stroke: #ffffff;
  stroke-width: 3.386;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  section.builders .blocks .block .inner .reveal .acf-link a:hover, section.builders .blocks .block .inner .reveal .acf-link a:focus {
    background-color: #F26845;
  }
  section.builders .blocks .block .inner .reveal .acf-link a:hover .bridge svg path.bridge-arc-wipe, section.builders .blocks .block .inner .reveal .acf-link a:focus .bridge svg path.bridge-arc-wipe {
    stroke-dashoffset: 0;
  }
}
section.builders .blocks .block {
  /*
    THE REVEAL, AND WHAT OPENS IT. Tap and keyboard focus open it on any
    device; hover only opens it on a device that can really hover.

    The guard is a capability query rather than a width one on purpose. A
    tablet in landscape is usually wider than the lg breakpoint - an iPad
    Pro is 1024 - so gating on width would have left the very devices this
    is meant to fix still hovering. (hover: hover) asks the device instead
    of guessing from its width.
  */
}
section.builders .blocks .block:focus-within .inner, section.builders .blocks .block.active .inner {
  background-color: #E9E2D6;
}
section.builders .blocks .block:focus-within .inner .logo-default, section.builders .blocks .block.active .inner .logo-default {
  opacity: 0;
}
section.builders .blocks .block:focus-within .inner .reveal, section.builders .blocks .block.active .inner .reveal {
  opacity: 1;
  /* --- AND ONLY NOW IS THE LEARN MORE INSIDE IT REACHABLE --- */
  pointer-events: auto;
}
@media (hover: hover) and (pointer: fine) {
  section.builders .blocks .block:hover .inner {
    background-color: #E9E2D6;
  }
  section.builders .blocks .block:hover .inner .logo-default {
    opacity: 0;
  }
  section.builders .blocks .block:hover .inner .reveal {
    opacity: 1;
    /* --- AND ONLY NOW IS THE LEARN MORE INSIDE IT REACHABLE --- */
    pointer-events: auto;
  }
}
section {
  /*--------------------------------------------------------------
  FORM
  --------------------------------------------------------------*/
}
section.form {
  position: relative;
  overflow: hidden;
  /*
    ONCE THE FORM HAS BEEN SENT. The class goes on from formConfirmation in
    scripts.js, which also swaps the heading for the one in the section's
    data-submitted-heading - text cannot be changed from css, and a second
    heading sitting hidden in the markup would take :first-child off the real
    one and move the h2 margin about on the small screens.

    The intro line goes because it is asking for something that has just been
    done - the confirmation message says the same thing back. Everything else in
    the block stays.
  */
}
section.form.submitted .content p {
  display: none;
}
section.form {
  background: #3A472C; /* Old browsers */
  background: -moz-linear-gradient(top, #3A472C 0%, #2E3D21 50%, #191C13 100%); /* FF3.6+ */
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3A472C), color-stop(50%, #2E3D21), color-stop(100%, #191C13)); /* Chrome,Safari4+ */
  background: -webkit-linear-gradient(top, #3A472C 0%, #2E3D21 50%, #191C13 100%); /* Chrome10+,Safari5.1+ */
  background: -o-linear-gradient(top, #3A472C 0%, #2E3D21 50%, #191C13 100%); /* Opera 11.10+ */
  background: -ms-linear-gradient(top, #3A472C 0%, #2E3D21 50%, #191C13 100%); /* IE10+ */
  background: linear-gradient(to bottom, #3A472C 0%, #2E3D21 50%, #191C13 100%); /* W3C */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='$start', endColorstr='$stop',GradientType=0 ); /* IE6-9 */
  padding-top: 100px;
}
@media (max-width: 991.98px) {
  section.form {
    padding-top: 56px;
  }
}
section.form {
  /* --- THE DESIGN OPENS "REGISTER" 250PX DOWN THE SECTION WHERE THE SHARED 100 --- */
  /* --- PUT IT AT 161. DESKTOP ONLY, AS ABOVE --- */
}
@media (min-width: 992px) {
  section.form {
    padding-top: 190px;
  }
}
section.form .artwork {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* --- ONE BELOW THE COPY, THE FORM AND THE FOOTER, WHICH ALL SIT ON 2, SO --- */
  /* --- THE SET ORDERS AGAINST ITSELF RATHER THAN AGAINST THEM --- */
  z-index: 1;
  /* --- HOW MUCH OF THE SECTION ONE CORNER GROUP TAKES. THE ARTWORK IS TWO --- */
  /* --- CORNERS, NOT A FULL WIDTH PICTURE - TURN THIS UP AND BOTH GROW INWARDS --- */
  /* --- TOWARDS EACH OTHER, TURN IT DOWN AND THEY SHRINK BACK INTO THEIR --- */
  /* --- CORNERS. IT IS THE ONLY NUMBER TO TOUCH TO RESIZE THEM, EVERYTHING IN --- */
  /* --- THE MAPS IS RELATIVE TO IT --- */
  /* --- THE ARTBOARD, HANDED BACK. THE PIECES WERE EXPORTED 1:1 OFF A 1200 x 900 --- */
  /* --- BOARD - EVERY CROP'S OWN PIXEL WIDTH OVER 1200 IS THE WIDTH PERCENTAGE --- */
  /* --- IN THE MAPS BELOW, WHICH IS HOW THOSE NUMBERS WERE GOT AND HOW TO GET --- */
  /* --- THEM FOR ANYTHING ADDED LATER --- */
}
section.form .artwork .pieces {
  position: absolute;
  top: 0;
  width: 36%;
  height: 0;
  /* --- A PERCENTAGE PADDING RESOLVES AGAINST THE PARENT'S WIDTH, NOT OUR OWN, --- */
  /* --- AND THE PARENT IS THE FULL SECTION - SO THE BOARD RATIO HAS TO BE --- */
  /* --- MULTIPLIED THROUGH BY THE GROUP WIDTH TO LAND ON 900/1200 OF *THIS* --- */
  /* --- BOX. GET THIS WRONG AND EVERY TOP IN THE MAPS STRETCHES --- */
  padding-bottom: 27%;
}
section.form .artwork .pieces.left {
  left: 0;
}
section.form .artwork .pieces.right {
  right: 0;
}
section.form .artwork {
  /*
    THE ENTRANCE. The same shape as the hero's blooms - every piece is parked
    small, turned and at zero opacity, and .revealed unwinds all three at
    once. Transitions rather than keyframes so it settles and stays settled,
    and so the whole set is one class rather than 24 animations to keep in
    step.

    Three behaviours, and which one a piece gets is read off its filename,
    because the class on the tag is the filename:
      shapes  - the leaf, the triangle and the half moon. Hinged on the top
                corner of the group they belong to, so they swing into place
                rather than growing out of their own middle
      scatter - no turn at all. A scatter is a spread of small blooms, and
                turning the group drags its outermost ones through a big arc
      blooms  - turn on their own centre the way the hero's do, alternating
                direction by index so a cluster does not swing as one lump

    Only the two rules directly below ever declare transform. The per piece
    overrides set custom properties and nothing else, exactly as in the hero,
    so they cannot outweigh the revealed state however specific they get.
  */
  /*
    The outward shove, and only the two half moons want one. They are the
    only pieces that run all the way to the section's own left and right
    edges, and shrinking a piece pulls that edge inwards - 20% of its width
    at the widest, which is exactly the amount it is being shrunk by. So the
    slide is the same 20%, spent pushing the edge back out, and it unwinds in
    step with the scale.

    Worth knowing that the turn does not add to this. At the section's top
    row the outer edge sits at width * (1 - scale / cos(turn)), and dividing
    by cos only ever makes that smaller - so a slide that covers the shrink
    covers the turn with it, at every point of the way in.
  */
}
section.form .artwork .piece {
  position: absolute;
  /* --- OVERRIDES THE GLOBAL IMG WIDTH 100%, THE MAPS SET THE REAL ONE --- */
  height: auto;
  --grow-from: 0.8;
  --turn: 0deg;
  --slide: 0%;
  /* --- NOT SHOWN AT ALL UNTIL IT STARTS MOVING --- */
  opacity: 0;
  /* --- THE SLIDE IS OUTERMOST, SO IT IS A PLAIN SHIFT OF THE ALREADY --- */
  /* --- TURNED AND SCALED PIECE RATHER THAN SOMETHING THE ROTATION SWINGS --- */
  /* --- AROUND. SAME ORDER THE HERO'S BLOOMS USE --- */
  transform: translateX(var(--slide)) scale(var(--grow-from)) rotate(var(--turn));
  -webkit-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 0.25s cubic-bezier(0.56, 0, 0.24, 1), transform 0.7s cubic-bezier(0.56, 0, 0.24, 1);
  will-change: opacity, transform;
}
section.form .artwork.revealed .piece {
  opacity: 1;
  transform: none;
}
section.form .artwork {
  /* --- LEFT, TOP, WIDTH - ALL THREE OFF THE ARTBOARD, NOT THE SECTION, SO A --- */
  /* --- GROUP HOLDS ITS SHAPE AT ANY WIDTH. THE KEYS ARE THE FILENAMES AND THE --- */
  /* --- CLASSES ON THE TAGS, SEE $form_pieces IN FORM.PHP. BOTH GROUPS RUN OFF --- */
  /* --- THEIR OWN OUTER EDGE AND OFF THE TOP, WHICH IS WHY SOME BLOOMS ARE --- */
  /* --- CROPPED SHORTER THAN THE REST - THOSE ARE THE ONES ON TOP 0 --- */
  /*
    The shapes hang from their inboard top corner and fall into place - the
    left group off its top right, the right group off its top left, mirror
    images of each other.

    Which corner is not a free choice, it is what keeps the top edge clean.
    These crops start at the artwork's topmost pixel and sit on top: 0, so
    there is no spare image above them to cover a tilt. Hinge on the outer
    corner and the far end of the piece swings down below the section's top
    edge, and the gradient shows through above it. Hinge on the inboard one
    and that same end starts above the edge instead, where the section's
    overflow clips it, and the turn brings it down rather than up. Same
    swing to look at, no gap.

    So the corner and the sign go together: turning the other way about
    these pivots would put the gap straight back.
  */
}
section.form .artwork .pieces.left .piece.group17-half-moon {
  left: 0%;
  top: 0%;
  width: 63.75%;
  --turn: 20deg;
  transform-origin: 100% 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
  --slide: -20%;
}
section.form .artwork .pieces.left .piece.group-small-triangle-left {
  left: 50%;
  top: 0%;
  width: 38.167%;
  --turn: 20deg;
  transform-origin: 100% 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
}
section.form .artwork .pieces.left .piece.group-leaf {
  left: 21.75%;
  top: 0%;
  width: 22.667%;
  --turn: 20deg;
  transform-origin: 100% 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
}
section.form .artwork .pieces.left .piece.group-small-flowers-left {
  left: 59.7%;
  top: 0.33%;
  width: 18.667%;
  --turn: 0deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-1 {
  left: 10.21%;
  top: 10.47%;
  width: 6.333%;
  --turn: 80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-2 {
  left: 10.47%;
  top: 3.49%;
  width: 6.333%;
  --turn: -80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-3 {
  left: 22.25%;
  top: 0%;
  width: 6.333%;
  --turn: 80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-4 {
  left: 17.28%;
  top: 0%;
  width: 6.333%;
  --turn: -80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-5 {
  left: 20.42%;
  top: 10.47%;
  width: 6.333%;
  --turn: 80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-6 {
  left: 21.73%;
  top: 3.84%;
  width: 6.333%;
  --turn: -80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-7 {
  left: 28.53%;
  top: 0%;
  width: 6.333%;
  --turn: 80deg;
}
section.form .artwork .pieces.left .piece.medium-flowers-1-8 {
  left: 1.57%;
  top: 3.49%;
  width: 6.333%;
  --turn: -80deg;
}
section.form .artwork {
  /*
    The shapes hang from their inboard top corner and fall into place - the
    left group off its top right, the right group off its top left, mirror
    images of each other.

    Which corner is not a free choice, it is what keeps the top edge clean.
    These crops start at the artwork's topmost pixel and sit on top: 0, so
    there is no spare image above them to cover a tilt. Hinge on the outer
    corner and the far end of the piece swings down below the section's top
    edge, and the gradient shows through above it. Hinge on the inboard one
    and that same end starts above the edge instead, where the section's
    overflow clips it, and the turn brings it down rather than up. Same
    swing to look at, no gap.

    So the corner and the sign go together: turning the other way about
    these pivots would put the gap straight back.
  */
}
section.form .artwork .pieces.right .piece.half-moon {
  left: 46.333%;
  top: 0%;
  width: 53.667%;
  --turn: -20deg;
  transform-origin: 0 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
  --slide: 20%;
}
section.form .artwork .pieces.right .piece.group14-triangle {
  left: 31.3%;
  top: 0%;
  width: 39.333%;
  --turn: -20deg;
  transform-origin: 0 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
}
section.form .artwork .pieces.right .piece.front-leaf {
  left: 66.3%;
  top: 0%;
  width: 18.5%;
  --turn: -20deg;
  transform-origin: 0 0;
  /* --- ONLY THE PIECE THAT REACHES THE SECTION'S OUTER EDGE NEEDS --- */
  /* --- SHOVING BACK OUT, AND WHETHER IT DOES IS READ OFF ITS OWN --- */
  /* --- GEOMETRY RATHER THAN ITS NAME - FLUSH LEFT ON THE LEFT, OR --- */
  /* --- REACHING 100% ON THE RIGHT --- */
}
section.form .artwork .pieces.right .piece.group-small-flowers-right {
  left: 86.5%;
  top: 0%;
  width: 13.833%;
  --turn: 0deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-1 {
  left: 23.4%;
  top: 1.6%;
  width: 6.5%;
  --turn: 80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-2 {
  left: 29.6%;
  top: 3.2%;
  width: 6.5%;
  --turn: -80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-3 {
  left: 28.1%;
  top: 0%;
  width: 6.5%;
  --turn: 80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-4 {
  left: 33.2%;
  top: 0%;
  width: 6.5%;
  --turn: -80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-5 {
  left: 30.7%;
  top: 10%;
  width: 6.5%;
  --turn: 80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-6 {
  left: 39%;
  top: 2.6%;
  width: 6.5%;
  --turn: -80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-7 {
  left: 39.7%;
  top: 9.5%;
  width: 6.5%;
  --turn: 80deg;
}
section.form .artwork .pieces.right .piece.medium-flowers-2-8 {
  left: 46.9%;
  top: 2.6%;
  width: 6.583%;
  --turn: -80deg;
}
section.form .artwork {
  /* --- THE STAGGER. THE MAPS ARE ORDERED BACK TO FRONT, SO THE DARK SHAPES --- */
  /* --- SETTLE FIRST AND THE BLOOMS OPEN OVER THEM. BOTH SIDES RUN THEIR OWN --- */
  /* --- CLOCK FROM ZERO, SO THE TWO CORNERS COME IN TOGETHER RATHER THAN ONE --- */
  /* --- CHASING THE OTHER. DELAYS SIT ONLY ON THE REVEALED SIDE, SAME AS THE --- */
  /* --- HERO, SO NOTHING IS HELD BACK IF THE CLASS EVER COMES OFF AGAIN --- */
}
section.form .artwork.revealed .pieces.left .piece.group17-half-moon {
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
section.form .artwork.revealed .pieces.left .piece.group-small-triangle-left {
  -webkit-transition-delay: 70ms;
  -moz-transition-delay: 70ms;
  -ms-transition-delay: 70ms;
  -o-transition-delay: 70ms;
  transition-delay: 70ms;
}
section.form .artwork.revealed .pieces.left .piece.group-leaf {
  -webkit-transition-delay: 140ms;
  -moz-transition-delay: 140ms;
  -ms-transition-delay: 140ms;
  -o-transition-delay: 140ms;
  transition-delay: 140ms;
}
section.form .artwork.revealed .pieces.left .piece.group-small-flowers-left {
  -webkit-transition-delay: 210ms;
  -moz-transition-delay: 210ms;
  -ms-transition-delay: 210ms;
  -o-transition-delay: 210ms;
  transition-delay: 210ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-1 {
  -webkit-transition-delay: 280ms;
  -moz-transition-delay: 280ms;
  -ms-transition-delay: 280ms;
  -o-transition-delay: 280ms;
  transition-delay: 280ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-2 {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-3 {
  -webkit-transition-delay: 420ms;
  -moz-transition-delay: 420ms;
  -ms-transition-delay: 420ms;
  -o-transition-delay: 420ms;
  transition-delay: 420ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-4 {
  -webkit-transition-delay: 490ms;
  -moz-transition-delay: 490ms;
  -ms-transition-delay: 490ms;
  -o-transition-delay: 490ms;
  transition-delay: 490ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-5 {
  -webkit-transition-delay: 560ms;
  -moz-transition-delay: 560ms;
  -ms-transition-delay: 560ms;
  -o-transition-delay: 560ms;
  transition-delay: 560ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-6 {
  -webkit-transition-delay: 630ms;
  -moz-transition-delay: 630ms;
  -ms-transition-delay: 630ms;
  -o-transition-delay: 630ms;
  transition-delay: 630ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-7 {
  -webkit-transition-delay: 700ms;
  -moz-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  transition-delay: 700ms;
}
section.form .artwork.revealed .pieces.left .piece.medium-flowers-1-8 {
  -webkit-transition-delay: 770ms;
  -moz-transition-delay: 770ms;
  -ms-transition-delay: 770ms;
  -o-transition-delay: 770ms;
  transition-delay: 770ms;
}
section.form .artwork.revealed .pieces.right .piece.half-moon {
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
section.form .artwork.revealed .pieces.right .piece.group14-triangle {
  -webkit-transition-delay: 70ms;
  -moz-transition-delay: 70ms;
  -ms-transition-delay: 70ms;
  -o-transition-delay: 70ms;
  transition-delay: 70ms;
}
section.form .artwork.revealed .pieces.right .piece.front-leaf {
  -webkit-transition-delay: 140ms;
  -moz-transition-delay: 140ms;
  -ms-transition-delay: 140ms;
  -o-transition-delay: 140ms;
  transition-delay: 140ms;
}
section.form .artwork.revealed .pieces.right .piece.group-small-flowers-right {
  -webkit-transition-delay: 210ms;
  -moz-transition-delay: 210ms;
  -ms-transition-delay: 210ms;
  -o-transition-delay: 210ms;
  transition-delay: 210ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-1 {
  -webkit-transition-delay: 280ms;
  -moz-transition-delay: 280ms;
  -ms-transition-delay: 280ms;
  -o-transition-delay: 280ms;
  transition-delay: 280ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-2 {
  -webkit-transition-delay: 350ms;
  -moz-transition-delay: 350ms;
  -ms-transition-delay: 350ms;
  -o-transition-delay: 350ms;
  transition-delay: 350ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-3 {
  -webkit-transition-delay: 420ms;
  -moz-transition-delay: 420ms;
  -ms-transition-delay: 420ms;
  -o-transition-delay: 420ms;
  transition-delay: 420ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-4 {
  -webkit-transition-delay: 490ms;
  -moz-transition-delay: 490ms;
  -ms-transition-delay: 490ms;
  -o-transition-delay: 490ms;
  transition-delay: 490ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-5 {
  -webkit-transition-delay: 560ms;
  -moz-transition-delay: 560ms;
  -ms-transition-delay: 560ms;
  -o-transition-delay: 560ms;
  transition-delay: 560ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-6 {
  -webkit-transition-delay: 630ms;
  -moz-transition-delay: 630ms;
  -ms-transition-delay: 630ms;
  -o-transition-delay: 630ms;
  transition-delay: 630ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-7 {
  -webkit-transition-delay: 700ms;
  -moz-transition-delay: 700ms;
  -ms-transition-delay: 700ms;
  -o-transition-delay: 700ms;
  transition-delay: 700ms;
}
section.form .artwork.revealed .pieces.right .piece.medium-flowers-2-8 {
  -webkit-transition-delay: 770ms;
  -moz-transition-delay: 770ms;
  -ms-transition-delay: 770ms;
  -o-transition-delay: 770ms;
  transition-delay: 770ms;
}
section.form .artwork {
  /* --- NOTHING SWINGS OR GROWS. THE ARTWORK IS SIMPLY ALREADY IN PLACE, --- */
  /* --- WHETHER OR NOT THE REVEAL EVER RUNS --- */
}
@media (prefers-reduced-motion: reduce) {
  section.form .artwork .piece {
    opacity: 1;
    transform: none;
    -webkit-transition: none;
    -moz-transition: none;
    -ms-transition: none;
    -o-transition: none;
    transition: none;
  }
}
section.form .container {
  position: relative;
  z-index: 2;
}
section.form .content {
  text-align: center;
}
section.form .content * {
  color: #ffffff;
}
section.form .content {
  /* --- THE INTRO LINE RAN THE FULL WIDTH OF THE SECTION AS ONE LONG LINE. THE --- */
  /* --- DESIGN BREAKS IT OVER TWO, SO IT IS GIVEN THE WIDTH THAT DOES THAT AND --- */
  /* --- RECENTRED - THE HEADINGS ABOVE IT ARE SHORT ENOUGH TO BE UNAFFECTED --- */
}
section.form .content p {
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}
section.form .content {
  /*
    The three lines are set closer here than the shared editor rhythm sets
    them. Measured off the static design: 72px from the top of "Register" to
    the top of the line under it, and 68px from there to the paragraph. The
    shared rules gave 100 and 51.

    Both halves of the first gap have to come down, not just one - h2's
    margin-bottom and h3's margin-top are adjacent so they collapse to the
    larger of the two, and leaving either at its old value would hold the gap
    open on its own. Scoped to this section on purpose: .editor-content h3
    carries that 40px everywhere, and loosening it globally would move every
    heading on the site.
  */
}
section.form .content h2 {
  margin-bottom: 12px;
}
section.form .content h3 {
  margin-top: 0;
  margin-bottom: 36px;
}
section.form .contact-form {
  /* --- MATCHED TO THE GAP UNDER THE CONSENT BOX, SEE $form-block-space --- */
  margin-top: 43px;
  max-width: 960px;
  margin-left: auto;
  margin-right: auto;
}
section.form {
  /* --- HOLDS THE FORM LAYOUT UNTIL THE GRAVITY FORM IS BUILT --- */
}
section.form .contact-form-placeholder {
  min-height: 480px;
}
@media (max-width: 991.98px) {
  section.form .contact-form-placeholder {
    min-height: 640px;
  }
}
section.form .footer {
  position: relative;
  z-index: 2;
  margin-top: 60px;
}
@media (max-width: 991.98px) {
  section.form .footer {
    margin-top: 40px;
  }
}
section.form .footer {
  /* --- A VIDEO NOW RATHER THAN A PNG, TRANSPARENT AND PLAYED WHEN THE FOOTER --- */
  /* --- COMES INTO VIEW, SEE footerVideo IN SCRIPTS.JS. THE IMG SELECTOR IS KEPT --- */
  /* --- ALONGSIDE IT SO THE SIZING IS THE SAME EITHER WAY IF ONE EVER GOES BACK --- */
}
section.form .footer .illustration {
  text-align: center;
}
section.form .footer .illustration img, section.form .footer .illustration video {
  display: inline-block;
  width: 100%;
  max-width: 600px;
  height: auto;
}
@media (max-width: 991.98px) {
  section.form .footer .illustration img, section.form .footer .illustration video {
    max-width: 340px;
  }
}
section.form .footer .logo {
  margin-top: 40px;
  padding-left: 15px;
}
@media (min-width: 350px) {
  section.form .footer .logo {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  section.form .footer .logo {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  section.form .footer .logo {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  section.form .footer .logo {
    padding-left: 60px;
  }
}
section.form .footer .logo {
  padding-right: 15px;
}
@media (min-width: 350px) {
  section.form .footer .logo {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  section.form .footer .logo {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  section.form .footer .logo {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  section.form .footer .logo {
    padding-right: 60px;
  }
}
@media (max-width: 991.98px) {
  section.form .footer .logo {
    margin-top: 24px;
  }
}
section.form .footer .logo img {
  display: block;
  width: 100%;
  height: auto;
}
section.form .footer .legal {
  padding-top: 30px;
  padding-bottom: 30px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: justify;
  -moz-box-pack: justify;
  -ms-flex-pack: justify;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
@media (max-width: 991.98px) {
  section.form .footer .legal {
    -webkit-box-direction: normal;
    -webkit-box-orient: vertical;
    -moz-box-direction: normal;
    -moz-box-orient: vertical;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -moz-box-align: start;
    -ms-flex-align: start;
    -webkit-align-items: flex-start;
    align-items: flex-start;
    padding-top: 24px;
    padding-bottom: 24px;
  }
}
section.form .footer .legal span {
  color: #ffffff;
  font-size: 14px;
}
section.form .footer .legal {
  /* --- ONCE THE ROW STACKS, EVERY LINE BUT THE LAST NEEDS THE GAP. DIRECT --- */
  /* --- CHILDREN ONLY - THE COPYRIGHT NOW SITS INSIDE .rights ALONGSIDE THE --- */
  /* --- PRIVACY LINK, AND A DESCENDANT RULE WOULD PUSH THOSE TWO APART --- */
}
@media (max-width: 991.98px) {
  section.form .footer .legal > *:not(:last-child) {
    margin-bottom: 8px;
  }
}
section.form .footer .legal .rights {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
}
section.form .footer .legal {
  /* --- SAME COLOUR AND SIZE AS THE TEXT IT SITS NEXT TO, AND IT PICKS UP THE --- */
  /* --- SAME ORANGE THE BUTTONS DO ON HOVER --- */
}
section.form .footer .legal .privacy {
  color: #ffffff;
  font-size: 14px;
  margin-left: 20px;
  text-decoration: none !important;
  -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
@media (min-width: 768px) {
  section.form .footer .legal .privacy:hover, section.form .footer .legal .privacy:focus {
    color: #F26845;
  }
}
section {
  /*--------------------------------------------------------------
  DEFAULTS
  --------------------------------------------------------------*/
}
section.register {
  margin-top: 100px;
}
@media (max-width: 991.98px) {
  section.register {
    margin-top: 56px;
  }
}
section.register {
  margin-bottom: 100px;
}
@media (max-width: 991.98px) {
  section.register {
    margin-bottom: 56px;
  }
}
section.register {
  padding-left: 15px;
}
@media (min-width: 350px) {
  section.register {
    padding-left: 20px;
  }
}
@media (min-width: 576px) {
  section.register {
    padding-left: 30px;
  }
}
@media (min-width: 992px) {
  section.register {
    padding-left: 40px;
  }
}
@media (min-width: 1480px) {
  section.register {
    padding-left: 60px;
  }
}
section.register {
  padding-right: 15px;
}
@media (min-width: 350px) {
  section.register {
    padding-right: 20px;
  }
}
@media (min-width: 576px) {
  section.register {
    padding-right: 30px;
  }
}
@media (min-width: 992px) {
  section.register {
    padding-right: 40px;
  }
}
@media (min-width: 1480px) {
  section.register {
    padding-right: 60px;
  }
}
section.register {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-left: -10px;
  margin-right: -10px;
}
section.coming-soon, section.error-404 {
  height: 100vh;
  height: -moz-calc(100vh -  74px);
  height: -webkit-calc(100vh -  74px);
  height: calc(100vh -  74px);
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  margin-top: 74px;
  text-align: center;
}
@media (max-width: 991.98px) {
  section.coming-soon, section.error-404 {
    height: -moz-calc(100vh -  64px);
    height: -webkit-calc(100vh -  64px);
    height: calc(100vh -  64px);
    margin-top: 64px;
  }
}
section.coming-soon *, section.error-404 * {
  color: #000000;
}
section.coming-soon h1, section.error-404 h1 {
  margin-bottom: 30px;
}

/*--------------------------------------------------------------
THEME / FORMS
--------------------------------------------------------------*/
form {
  max-width: 600px;
  width: 100%;
  text-align: left;
}
form .form-field.text-field, form .form-field.select-field {
  position: relative;
  width: 100%;
  float: left;
  margin-bottom: 30px;
}
@media (max-width: 575.98px) {
  form .form-field.text-field, form .form-field.select-field {
    width: 100%;
  }
}
form .form-field.text-field label, form .form-field.select-field label {
  display: block;
  margin-bottom: 0;
}
form .form-field.text-field {
  position: relative;
}
form .form-field.text-field input {
  background: none;
  border: 1px solid #c2c2c2;
  color: #000000;
  border-radius: 0;
  top: 0;
  right: 0;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  height: 48px;
  box-shadow: none !important;
}
form .form-field.text-field input:focus {
  outline: none !important;
}
form .form-field.text-field input:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.text-field input {
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.text-field.conditional {
  overflow: hidden;
  height: 0;
  width: 100%;
  margin-bottom: 0;
  -webkit-transition: height 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: height 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: height 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: height 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: height 250ms cubic-bezier(0.77, 0, 0.175, 1);
}
form .form-field.text-field.conditional label {
  position: relative;
  height: 48px;
}
form .form-field.text-field.conditional .placeholder {
  left: 16px;
}
form .form-field.text-field.conditional .cond-holder {
  padding-bottom: 20px;
}
form .form-field.select-field .select-wrap {
  position: relative;
}
form .form-field.select-field .placeholder {
  left: 16px;
}
form .form-field.select-field select {
  background: none;
  border: 1px solid #c2c2c2;
  color: #000000;
  border-radius: 0;
  top: 0;
  right: 0;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  height: 48px;
  box-shadow: none !important;
}
form .form-field.select-field select:focus {
  outline: none !important;
}
form .form-field.select-field select:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.select-field select {
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  background-image: url(img/icons/chevron.svg);
  background-position: top 20px right 15px;
  background-repeat: no-repeat;
  box-shadow: none !important;
}
form .form-field.select-field select:focus {
  outline: none !important;
}
form .form-field.select-field select:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.select-field select {
  color: transparent;
  -webkit-appearance: none;
}
form .form-field.select-field .placeholder-wrap-select.not-empty .placeholder {
  display: none;
}
form .form-field.select-field .placeholder-wrap-select.not-empty select {
  color: #000000;
}
form .form-field.select-field select::-ms-expand {
  display: none;
}
form .form-field.textarea-field textarea {
  background: none;
  border: 1px solid #c2c2c2;
  color: #000000;
  border-radius: 0;
  top: 0;
  right: 0;
  width: 100%;
  padding-top: 5px;
  padding-bottom: 5px;
  padding-left: 15px;
  padding-right: 15px;
  height: 48px;
  box-shadow: none !important;
}
form .form-field.textarea-field textarea:focus {
  outline: none !important;
}
form .form-field.textarea-field textarea:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.textarea-field textarea {
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  height: unset;
  padding-top: 10px;
}
form .form-field.textarea-field textarea::placeholder {
  color: #595959;
}
form .form-field.radio-field, form .form-field.check-field {
  display: inline-block;
  width: 100%;
  margin-bottom: 40px;
}
form .form-field.radio-field .form-label, form .form-field.check-field .form-label {
  margin-bottom: 0;
  font-size: 16px;
  margin-bottom: 20px;
}
form .form-field.radio-field .fields, form .form-field.check-field .fields {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}
form .form-field.radio-field .fields label, form .form-field.check-field .fields label {
  -ms-flex: 0 0 33.3333333333%;
  flex: 0 0 33.3333333333%;
  max-width: 33.3333333333%;
  margin-bottom: 15px;
}
form .form-field.radio-field .fields label {
  position: relative;
}
form .form-field.radio-field .fields label > span {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  padding-top: 2px;
}
form .form-field.radio-field .fields label > span:before, form .form-field.radio-field .fields label > span:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  border-radius: 50%;
  display: block;
}
form .form-field.radio-field .fields label > span a {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  color: #ffffff;
  text-decoration: underline;
  -webkit-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  form .form-field.radio-field .fields label > span a:hover {
    color: #dc3545;
  }
}
form .form-field.radio-field .fields label > span:before {
  background: none;
  border: 1px solid #c2c2c2;
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.radio-field .fields label > span:after {
  background-color: #000000;
  width: 10px;
  height: 10px;
  position: absolute;
  top: 5px;
  left: 5px;
  border-radius: 50%;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.radio-field .fields label .req-star {
  color: #dc3545;
}
form .form-field.radio-field .fields label input {
  position: absolute;
  top: 0;
  left: 100%;
  width: 100%;
  height: 0;
  opacity: 0;
  font-size: 0;
  z-index: 1;
}
form .form-field.radio-field .fields label input:focus-visible + span:before {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.radio-field .fields label input:checked + span:after {
  opacity: 1 !important;
}
form .form-field.radio-field .fields label input:checked + span:before {
  border: 1px solid #c2c2c2 !important;
}
form .form-field.radio-field .fields label input:checked .invalid-feedback {
  visibility: hidden;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
form .form-field.radio-field .fields label input:checked .invalid-feedback span {
  opacity: 0;
}
form .form-field.radio-field .fields label.invalid + span:before {
  border: 1px solid #B30000;
}
form .form-field.radio-field .fields label.invalid .invalid-feedback {
  visibility: visible;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
form .form-field.radio-field .fields label.invalid .invalid-feedback span {
  opacity: 1;
}
form .form-field.check-field .fields label {
  position: relative;
}
form .form-field.check-field .fields label > span {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  padding-top: 2px;
}
form .form-field.check-field .fields label > span:before, form .form-field.check-field .fields label > span:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  border-radius: 0;
  display: block;
}
form .form-field.check-field .fields label > span a {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  color: #ffffff;
  text-decoration: underline;
  -webkit-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  form .form-field.check-field .fields label > span a:hover {
    color: #dc3545;
  }
}
form .form-field.check-field .fields label > span:before {
  background: none;
  border: 1px solid #c2c2c2;
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.check-field .fields label > span:after {
  background-image: url("img/icons/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.check-field .fields label .req-star {
  color: #dc3545;
}
form .form-field.check-field .fields label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  font-size: 0;
}
form .form-field.check-field .fields label input:focus-visible + span:before {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.check-field .fields label input:checked + span:after {
  opacity: 1 !important;
}
form .form-field.check-field .fields label input:checked + span:before {
  border: 1px solid #c2c2c2 !important;
}
form .form-field.check-field .fields label input:checked .invalid-feedback {
  visibility: hidden;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
form .form-field.check-field .fields label input:checked .invalid-feedback span {
  opacity: 0;
}
form .form-field.check-field .fields label.invalid + span:before {
  border: 1px solid #B30000;
}
form .form-field.check-field .fields label.invalid .invalid-feedback {
  visibility: visible;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
form .form-field.check-field .fields label.invalid .invalid-feedback span {
  opacity: 1;
}
form .form-field.consent-field {
  width: 100%;
  display: inline-block;
  margin-top: 20px;
  margin-bottom: 32px;
  position: relative;
}
form .form-field.consent-field label {
  position: relative;
  display: inline-block;
  float: none;
  margin-bottom: 0;
  cursor: pointer;
  position: relative;
}
form .form-field.consent-field label > span {
  position: relative;
  display: inline-block;
  padding-left: 28px;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  padding-top: 2px;
}
form .form-field.consent-field label > span:before, form .form-field.consent-field label > span:after {
  content: "";
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0;
  top: 0;
  border-radius: 0;
  display: block;
}
form .form-field.consent-field label > span a {
  font-family: "sofia-pro", sans-serif;
  font-weight: 400;
  font-weight: normal;
  font-style: normal;
  color: #ffffff;
  text-decoration: underline;
  -webkit-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: color 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
@media (min-width: 992px) {
  form .form-field.consent-field label > span a:hover {
    color: #dc3545;
  }
}
form .form-field.consent-field label > span:before {
  background: none;
  border: 1px solid #c2c2c2;
  -webkit-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: border 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.consent-field label > span:after {
  background-image: url("img/icons/check.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 12px;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .form-field.consent-field label .req-star {
  color: #dc3545;
}
form .form-field.consent-field label input {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  opacity: 0;
  font-size: 0;
}
form .form-field.consent-field label input:focus-visible + span:before {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
form .form-field.consent-field label input:checked + span:after {
  opacity: 1 !important;
}
form .form-field.consent-field label input:checked + span:before {
  border: 1px solid #c2c2c2 !important;
}
form .form-field.consent-field label input:checked .invalid-feedback {
  visibility: hidden;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
form .form-field.consent-field label input:checked .invalid-feedback span {
  opacity: 0;
}
form .form-field.consent-field label.invalid + span:before {
  border: 1px solid #B30000;
}
form .form-field.consent-field label.invalid .invalid-feedback {
  visibility: visible;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
form .form-field.consent-field label.invalid .invalid-feedback span {
  opacity: 1;
}
form .form-field.consent-field .invalid-feedback {
  bottom: -20px;
}
form .form-field.submit-field {
  margin-top: 20px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  -moz-box-direction: normal;
  -moz-box-orient: vertical;
  -webkit-flex-direction: column;
  -ms-flex-direction: column;
  flex-direction: column;
}
form .form-field.submit-field .pet-name {
  position: absolute;
  top: -100000px;
  left: -100000px;
}
form .form-field.submit-field .req {
  order: 2;
  font-size: 12px;
  font-family: Arial, sans-serif;
  font-weight: normal;
  font-style: normal;
  margin-top: 16px;
}
@media (max-width: 399px) {
  form .form-field.submit-field .req {
    display: block;
    margin-right: 0;
    margin-bottom: 12px;
  }
}
form .form-field.submit-field .button {
  order: 1;
}
form .form-field.submit-field .button input[type=submit] {
  outline: none !important;
  text-decoration: none !important;
  display: inline-block;
  background: transparent;
  cursor: pointer;
  border: 1px solid #000000;
  color: #000000;
  border-radius: 4px;
  padding-left: 40px;
  padding-right: 40px;
  height: 44px;
  line-height: 44px;
  border-radius: 22px;
  font-size: 12px;
  text-transform: uppercase;
}
form .form-field.submit-field .button input[type=submit]:focus {
  outline: none !important;
}
form .form-field.submit-field .button input[type=submit]:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
@media (min-width: 768px) {
  form .form-field.submit-field .button input[type=submit] {
    -webkit-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: background 250ms cubic-bezier(0.77, 0, 0.175, 1), color 250ms cubic-bezier(0.77, 0, 0.175, 1), opacity 1000ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  form .form-field.submit-field .button input[type=submit] * {
    -webkit-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -moz-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -ms-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    -o-transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
    transition: color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  }
  form .form-field.submit-field .button input[type=submit]:hover, form .form-field.submit-field .button input[type=submit]:focus {
    background: #000000;
    color: #ffffff;
  }
  form .form-field.submit-field .button input[type=submit]:hover *, form .form-field.submit-field .button input[type=submit]:focus * {
    color: #ffffff;
  }
}
@media (min-width: 576px) {
  form .form-field.half-field {
    width: 50%;
  }
}
form .placeholder {
  position: absolute;
  height: 100%;
  left: 26px;
  top: 0;
  font-size: 16px;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  color: #595959;
  pointer-events: none;
}
form .placeholder .req-star {
  margin-left: 2px;
}
form .placeholder.not-empty {
  display: none !important;
}
form .invalid-feedback {
  pointer-events: none;
  position: absolute;
  bottom: -20px;
  font-size: 12px;
  display: block;
  visibility: hidden;
  -webkit-transition: visibility 0ms ease;
  -moz-transition: visibility 0ms ease;
  -ms-transition: visibility 0ms ease;
  -o-transition: visibility 0ms ease;
  transition: visibility 0ms ease;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
form .invalid-feedback span {
  color: #B30000;
  opacity: 0;
  -webkit-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: opacity 250ms cubic-bezier(0.56, 0, 0.24, 1);
}
form .req-star {
  color: #B30000;
}
form > * {
  padding-left: 10px;
  padding-right: 10px;
}
form.was-validated .custom-select:invalid, form.was-validated .custom-select.is-invalid {
  border-color: #B30000 !important;
}
form.was-validated .custom-select:invalid + .invalid-feedback, form.was-validated .custom-select.is-invalid + .invalid-feedback {
  visibility: visible;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
form.was-validated .custom-select:invalid + .invalid-feedback span, form.was-validated .custom-select.is-invalid + .invalid-feedback span {
  opacity: 1;
}
form.was-validated .form-control:invalid, form.was-validated .form-control.is-invalid {
  border-color: #B30000 !important;
}
form.was-validated .form-control:invalid + .invalid-feedback, form.was-validated .form-control.is-invalid + .invalid-feedback {
  visibility: visible;
  -webkit-transition-delay: 0ms;
  -moz-transition-delay: 0ms;
  -ms-transition-delay: 0ms;
  -o-transition-delay: 0ms;
  transition-delay: 0ms;
}
form.was-validated .form-control:invalid + .invalid-feedback span, form.was-validated .form-control.is-invalid + .invalid-feedback span {
  opacity: 1;
}
form.was-validated .form-control:valid {
  border-color: #c2c2c2 !important;
}
form.was-validated .form-control:valid + .invalid-feedback {
  visibility: hidden;
  -webkit-transition-delay: 500ms;
  -moz-transition-delay: 500ms;
  -ms-transition-delay: 500ms;
  -o-transition-delay: 500ms;
  transition-delay: 500ms;
}
form.was-validated .form-control:valid + .invalid-feedback span {
  opacity: 0;
}

/*--------------------------------------------------------------
GRAVITY FORMS / REGISTER
--------------------------------------------------------------*/
/* --- THE REGISTER FORM IS SCOPED TO .register-form_wrapper, WHICH GRAVITY BUILDS --- */
/* --- BY APPENDING _wrapper TO THE CSS CLASS SET IN THE FORM SETTINGS (CURRENTLY --- */
/* --- register-form). RENAME THAT FIELD AND EVERY RULE BELOW STOPS APPLYING. --- */
/* --- THE FORM ONLY EVER SITS ON THE DARK GREEN OF THE FORM SECTION, SO IT IS --- */
/* --- DRAWN LIGHT ON DARK THROUGHOUT - DROP IT ON A PALE BACKGROUND AND THE --- */
/* --- LABELS AND BORDERS WILL VANISH --- */
/* --- EVERY MEASUREMENT OFF THE DESIGN LIVES HERE. THESE ARE THE ONLY NUMBERS TO --- */
/* --- TOUCH TO RETUNE THE FORM - THE RULES BELOW ARE ALL RELATIVE TO THEM --- */
/* --- THE COLUMN GUTTER IS WIDE BY DESIGN - THE THREE FIELDS ARE MEANT TO READ AS --- */
/* --- THREE SEPARATE COLUMNS RATHER THAN ONE BANDED ROW --- */
/* --- HOW FAR '* REQUIRED FIELDS' SITS UNDER THE SUBMIT BUTTON, ON EVERY SCREEN. --- */
/* --- MEASURED OFF THE DESIGNER'S SCREENSHOT BY SCALING IT AGAINST THE SUBMIT --- */
/* --- BUTTON, WHICH IS 52PX TALL ON THE PAGE AND 68 IN THE IMAGE --- */
/* --- THE CONSENT BLOCK, THE BUTTON AND THE NOTE ARE ALL CENTRED ON A NARROWER --- */
/* --- MEASURE THAN THE FIELDS ABOVE THEM --- */
/*
  THE GAP FROM THE CONSENT ROW DOWN TO THE SUBMIT BUTTON, written as the gap that
  is actually seen rather than as the margin that produces it. The footer is a grid
  item, so the grid's own row-gap already sits between it and the consent row and
  the margin only has to make up the difference - which is why these are consumed
  below as a subtraction. Set as a plain margin it read 56 here and measured 92 on
  the screen, and that 92 is what the designer asked to tighten. Same arrangement as
  $register-note-space above, and for the same reason: the number written here is
  the number on the screen, and retuning a row gap cannot quietly move the button.

  The desktop one is $form-block-space in style.scss, shared with the gap above the
  fields so the two stay equal - that was the ask. It was 64 here, itself down from
  92. The two smaller ones are what the small screens already showed - they were not
  part of the note and are only written out so all three read the same way.
*/
.gform_wrapper.register-form_wrapper {
  /* --- GRAVITY'S THEME FRAMEWORK DRAWS EVERY CONTROL OUT OF CUSTOM PROPERTIES, --- */
  /* --- AND PRINTS ITS OWN DEFAULTS IN A <style> BLOCK INSIDE THE FORM KEYED TO --- */
  /* --- THE WRAPPER *ID*. AN ID BEATS ANY CLASS WE CAN WRITE HERE, WHICH IS WHY --- */
  /* --- EVERY TOKEN BELOW IS MARKED IMPORTANT - THEY ARE OVERRIDING AN ID, NOT --- */
  /* --- EACH OTHER. SETTING A TOKEN IS ALWAYS PREFERABLE TO CHASING THE RULE THAT --- */
  /* --- CONSUMES IT, SO TRY HERE FIRST WHEN SOMETHING NEEDS RECOLOURING OR --- */
  /* --- RESIZING - ALMOST THE WHOLE FORM IS PAINTED FROM THIS ONE BLOCK --- */
  --gf-color-danger: #F26845 !important;
  /* --- CONTROLS: TRANSPARENT ON THE GREEN, HAIRLINE CREAM BORDER THAT BRIGHTENS --- */
  /* --- ON HOVER AND FOCUS --- */
  --gf-ctrl-bg-color: transparent !important;
  --gf-ctrl-bg-color-hover: transparent !important;
  --gf-ctrl-bg-color-focus: transparent !important;
  --gf-ctrl-bg-color-error: transparent !important;
  --gf-ctrl-color: #EDEBE2 !important;
  --gf-ctrl-color-hover: #EDEBE2 !important;
  --gf-ctrl-color-focus: #EDEBE2 !important;
  --gf-ctrl-border-color: rgba(237, 235, 226, 0.5) !important;
  --gf-ctrl-border-color-hover: #EDEBE2 !important;
  --gf-ctrl-border-color-focus: #EDEBE2 !important;
  --gf-ctrl-border-width: 1px !important;
  --gf-ctrl-radius: 4px !important;
  --gf-ctrl-size: 52px !important;
  --gf-ctrl-padding-x: 24px !important;
  --gf-ctrl-font-family: "sofia-pro", sans-serif !important;
  --gf-ctrl-font-size: 16px !important;
  --gf-ctrl-shadow: none !important;
  --gf-ctrl-placeholder-color: rgba(237, 235, 226, 0.45) !important;
  --gf-ctrl-placeholder-font-family: "sofia-pro", sans-serif !important;
  --gf-ctrl-placeholder-font-size: 16px !important;
  --gf-ctrl-placeholder-opacity: 1 !important;
  /* --- LABELS. THE ASTERISK IS SET TO THE LABEL COLOUR RATHER THAN THE DANGER --- */
  /* --- COLOUR - IN THE DESIGN IT READS AS PART OF THE LABEL, NOT AS A WARNING --- */
  --gf-ctrl-label-color-primary: #EDEBE2 !important;
  --gf-ctrl-label-color-req: #EDEBE2 !important;
  --gf-ctrl-label-font-family-primary: "sofia-pro", sans-serif !important;
  --gf-ctrl-label-font-family-req: "sofia-pro", sans-serif !important;
  --gf-ctrl-label-font-size-primary: 16px !important;
  --gf-ctrl-label-font-size-req: 16px !important;
  --gf-ctrl-label-font-weight-primary: 400 !important;
  --gf-label-space-primary: 12px !important;
  /* --- SECONDARY IS THE INLINE LABEL BESIDE A CHOICE, IE THE CONSENT COPY --- */
  --gf-ctrl-label-color-secondary: #EDEBE2 !important;
  --gf-ctrl-label-font-family-secondary: "sofia-pro", sans-serif !important;
  --gf-ctrl-label-font-size-secondary: 14px !important;
  --gf-ctrl-label-font-weight-secondary: 400 !important;
  /* --- THE CONSENT BOX: A SQUARE CREAM OUTLINE WITH A CREAM TICK, NOT THE ROUNDED --- */
  /* --- FILLED BOX GRAVITY SHIPS --- */
  --gf-ctrl-choice-size: 20px !important;
  --gf-ctrl-checkbox-check-radius: 0 !important;
  --gf-ctrl-checkbox-check-size: 13px !important;
  --gf-ctrl-choice-check-color: #EDEBE2 !important;
  --gf-ctrl-accent-color: #EDEBE2 !important;
  /* --- THE SELECT CHEVRON IS BAKED INTO A TOKEN AS A DATA URI, SO RECOLOURING IT --- */
  /* --- MEANS REPLACING THE WHOLE ICON. THIS IS GRAVITY'S OWN CHEVRON WITH THE --- */
  /* --- FILL SWAPPED TO CREAM - img/icons/chevron.svg IS BLACK AND CANNOT BE --- */
  /* --- RECOLOURED FROM CSS, WHICH IS WHY IT IS NOT USED HERE --- */
  --gf-icon-ctrl-select: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M0.292893 0.292893C0.683417 -0.097631 1.31658 -0.097631 1.70711 0.292893L5 3.58579L8.29289 0.292893C8.68342 -0.0976311 9.31658 -0.0976311 9.70711 0.292893C10.0976 0.683417 10.0976 1.31658 9.70711 1.70711L5.70711 5.70711C5.31658 6.09763 4.68342 6.09763 4.29289 5.70711L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893Z' fill='%23EDEBE2'/%3E%3C/svg%3E") !important;
  --gf-ctrl-select-icon-size: 12px !important;
  /* --- SPACING --- */
  --gf-form-gap-x: 56px !important;
  --gf-form-gap-y: 36px !important;
  /* --- MEASURED AS NOT ACTUALLY DRIVING THE FOOTER - THE RULE FURTHER DOWN IS --- */
  /* --- WHAT PAINTS IT - BUT KEPT IN STEP WITH IT SO THE TWO CANNOT DISAGREE IF --- */
  /* --- GRAVITY EVER CHANGES WHICH ONE WINS --- */
  --gf-form-footer-margin-y-start: 7px !important;
  /* --- VALIDATION. THE STOCK RED IS ALL BUT INVISIBLE ON THE DARK GREEN, SO THE --- */
  /* --- BRAND ORANGE CARRIES THE ERROR STATE INSTEAD --- */
  --gf-ctrl-desc-color-error: #F26845 !important;
  --gf-form-validation-color: #F26845 !important;
  --gf-form-validation-heading-color: #F26845 !important;
  --gf-form-validation-summary-color: #F26845 !important;
  --gf-form-validation-bg-color: transparent !important;
  --gf-form-validation-border-color: #F26845 !important;
  /* --- GRAVITY PRINTS ITS OWN '"*" INDICATES REQUIRED FIELDS' LINE ABOVE THE --- */
  /* --- FORM. THE DESIGN PUTS THAT NOTE UNDER THE BUTTON INSTEAD, WHICH IS THE --- */
  /* --- HTML FIELD AT THE END OF THE FORM, SO GRAVITY'S COPY IS DROPPED HERE --- */
}
.gform_wrapper.register-form_wrapper .gform_heading {
  display: none;
}
.gform_wrapper.register-form_wrapper {
  /* --- THE LEGACY form BLOCK AT THE TOP OF THIS FILE CAPS EVERY FORM ON THE SITE --- */
  /* --- AT 600px AND PADS ITS CHILDREN BY 10px. BOTH ARE UNDONE HERE RATHER THAN --- */
  /* --- NARROWED THERE, SO THE ACF FORMS THAT STILL RELY ON THEM ARE LEFT ALONE --- */
}
.gform_wrapper.register-form_wrapper form {
  max-width: none;
  width: 100%;
  /* --- ONE GRID FOR THE WHOLE FORM, NOT ONE PER SECTION. GRAVITY NESTS THE --- */
  /* --- FIELDS IN .gform_body > .gform_fields AND PUTS THE SUBMIT BUTTON IN A --- */
  /* --- FOOTER *OUTSIDE* THAT, SO THE "* REQUIRED FIELDS" HTML FIELD WOULD --- */
  /* --- ALWAYS LAND ABOVE THE BUTTON INSTEAD OF BELOW IT AS DRAWN. --- */
  /* --- display: contents ON THE TWO WRAPPERS DISSOLVES THEM, WHICH MAKES THE --- */
  /* --- FIELDS AND THE FOOTER SIBLINGS IN THIS ONE GRID - AND ONCE THEY ARE --- */
  /* --- SIBLINGS, order CAN PUT THE FOOTER BETWEEN THE CONSENT AND THE NOTE. --- */
  /* --- MOVE THE GRID BACK ONTO .gform_fields AND THE NOTE JUMPS BACK UP --- */
  display: grid;
  /* --- TWELVE TRACKS ONLY ON DESKTOP. THE GUTTER IS COUNTED ELEVEN TIMES --- */
  /* --- WHATEVER THE FIELDS SPAN, SO TWELVE TRACKS AT A USABLE GUTTER CANNOT FIT --- */
  /* --- A PHONE - THE COLUMN COUNT ITSELF HAS TO COME DOWN WITH THE BREAKPOINTS, --- */
  /* --- NOT JUST THE SPANS. minmax(0, 1fr) STOPS A LONG UNBROKEN VALUE IN ONE --- */
  /* --- FIELD FROM WIDENING ITS TRACK AND PUSHING THE ROW OUT OF THE CONTAINER --- */
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 56px;
  row-gap: 36px;
}
.gform_wrapper.register-form_wrapper form > * {
  padding-left: 0;
  padding-right: 0;
}
@media (max-width: 991.98px) {
  .gform_wrapper.register-form_wrapper form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 32px;
    row-gap: 28px;
  }
}
@media (max-width: 575.98px) {
  .gform_wrapper.register-form_wrapper form {
    grid-template-columns: minmax(0, 1fr);
    column-gap: 0;
    row-gap: 24px;
  }
}
.gform_wrapper.register-form_wrapper .gform_body, .gform_wrapper.register-form_wrapper .gform_fields {
  display: contents;
}
.gform_wrapper.register-form_wrapper {
  /* --- GRAVITY SIZES FIELDS IN TWELFTHS AND THE IMPORT SETS THIRDS ON THE FIVE --- */
  /* --- TOP FIELDS. THEY PAIR UP ON TABLET AND STACK ON PHONE, WHICH MEANS EVERY --- */
  /* --- SPAN HAS TO BE RESTATED PER BREAKPOINT - A LEFTOVER span 4 ON A TWO TRACK --- */
  /* --- GRID WOULD SILENTLY CONJURE IMPLICIT COLUMNS RATHER THAN WRAP --- */
}
.gform_wrapper.register-form_wrapper .gfield {
  /* --- ANYTHING WITHOUT A WIDTH SET IN THE FORM EDITOR RUNS THE FULL ROW --- */
  grid-column: 1/-1;
  min-width: 0;
}
.gform_wrapper.register-form_wrapper .gfield.gfield--width-third {
  grid-column: span 4;
}
.gform_wrapper.register-form_wrapper .gfield.gfield--width-half {
  grid-column: span 6;
}
.gform_wrapper.register-form_wrapper .gfield.gfield--width-full {
  grid-column: 1/-1;
}
@media (max-width: 991.98px) {
  .gform_wrapper.register-form_wrapper .gfield.gfield--width-third, .gform_wrapper.register-form_wrapper .gfield.gfield--width-half {
    grid-column: span 1;
  }
}
@media (max-width: 575.98px) {
  .gform_wrapper.register-form_wrapper .gfield.gfield--width-third, .gform_wrapper.register-form_wrapper .gfield.gfield--width-half {
    grid-column: 1/-1;
  }
}
.gform_wrapper.register-form_wrapper {
  /* --- THE FIELDS THEMSELVES - BORDERS, HEIGHTS, LABEL AND PLACEHOLDER COLOURS - --- */
  /* --- ARE ALL DRIVEN BY THE TOKENS ABOVE AND DELIBERATELY NOT REPEATED HERE. --- */
  /* --- WHAT IS LEFT IN THIS FILE IS ONLY WHAT NO TOKEN CAN EXPRESS. --- */
  /* --- ANYTHING ADDED BELOW THAT GRAVITY ALSO SETS ON A CONTROL NEEDS !important: --- */
  /* --- THE FRAMEWORK'S SELECTORS REACH FIVE CLASSES PLUS AN ATTRIBUTE NEGATION --- */
  /* --- AND ITS STYLESHEET IS ENQUEUED AFTER THIS ONE, SO IT WINS BOTH THE --- */
  /* --- SPECIFICITY AND THE ORDER TIE-BREAK. IT ALSO SIZES CONTROLS IN LOGICAL --- */
  /* --- PROPERTIES (padding-inline, inline-size), WHICH BEAT THEIR PHYSICAL --- */
  /* --- EQUIVALENTS ON SOURCE ORDER NO MATTER HOW SPECIFIC THE SELECTOR IS --- */
  /* --- THE OPEN OPTION LIST IS DRAWN BY THE BROWSER OFF THE SELECT, AND CREAM ON --- */
  /* --- TRANSPARENT WOULD BE UNREADABLE - SO THE OPTIONS CARRY THEIR OWN GROUND --- */
}
.gform_wrapper.register-form_wrapper select option {
  background-color: #2E3D21;
  color: #EDEBE2;
}
.gform_wrapper.register-form_wrapper select option.gf_placeholder {
  color: rgba(237, 235, 226, 0.45);
}
.gform_wrapper.register-form_wrapper select {
  /* --- CHROME TAKES THE CLOSED CONTROL'S COLOUR FROM THE SELECTED OPTION, --- */
  /* --- FIREFOX FROM THE SELECT - THIS IS THE FIREFOX HALF, SO THE UNANSWERED --- */
  /* --- SELECT READS AS A PLACEHOLDER IN BOTH RATHER THAN AS AN ANSWER --- */
}
.gform_wrapper.register-form_wrapper select:has(option.gf_placeholder:checked) {
  color: rgba(237, 235, 226, 0.45) !important;
}
.gform_wrapper.register-form_wrapper {
  /* --- CHROME PAINTS AUTOFILLED FIELDS SOLID WHITE, WHICH WOULD PUNCH FIVE WHITE --- */
  /* --- BOXES INTO THE GREEN. THERE IS NO PROPERTY TO TURN THAT OFF, BUT IT IS --- */
  /* --- APPLIED AS A TRANSITIONABLE BACKGROUND, SO A TRANSITION LONGER THAN ANY --- */
  /* --- SESSION NEVER LETS IT ARRIVE. THE TEXT COLOUR IS SET SEPARATELY BECAUSE --- */
  /* --- AUTOFILL IGNORES color --- */
}
.gform_wrapper.register-form_wrapper input:-webkit-autofill, .gform_wrapper.register-form_wrapper input:-webkit-autofill:hover, .gform_wrapper.register-form_wrapper input:-webkit-autofill:focus {
  -webkit-text-fill-color: #EDEBE2 !important;
  caret-color: #EDEBE2;
  -webkit-transition: background-color 600000s 0s, color 600000s 0s !important;
  transition: background-color 600000s 0s, color 600000s 0s !important;
}
.gform_wrapper.register-form_wrapper {
  /* --- CONSENT. CENTRED ON A NARROWER MEASURE THAN THE FIELDS, WITH EXTRA AIR --- */
  /* --- ABOVE IT ON TOP OF THE ROW GAP --- */
}
.gform_wrapper.register-form_wrapper .gfield--type-consent {
  max-width: 720px;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 44px;
  border: 0;
  padding: 0;
  min-width: 0;
}
@media (max-width: 991.98px) {
  .gform_wrapper.register-form_wrapper .gfield--type-consent {
    margin-top: 20px;
  }
}
.gform_wrapper.register-form_wrapper .gfield--type-consent {
  /* --- THE BOX AND THE TICK COME OFF THE CHOICE TOKENS ABOVE, BUT THE GUTTER --- */
  /* --- BESIDE THE BOX DOES NOT - GRAVITY SETS THE COLUMN GAP TO A HARD 0 AND --- */
  /* --- LETS THE CHOICE LABEL CARRY ITS OWN OFFSET, WHICH THE CONSENT LABEL DOES --- */
  /* --- NOT DO. align-items KEEPS THE BOX ON THE FIRST LINE OF A PARAGRAPH THAT --- */
  /* --- RUNS TO THREE --- */
}
.gform_wrapper.register-form_wrapper .gfield--type-consent .ginput_container_consent {
  align-items: start;
  column-gap: 24px;
}
@media (max-width: 767.98px) {
  .gform_wrapper.register-form_wrapper .gfield--type-consent .ginput_container_consent {
    column-gap: 16px;
  }
}
.gform_wrapper.register-form_wrapper .gfield--type-consent .gfield_consent_label {
  line-height: 1.5;
  margin: 0;
  cursor: pointer;
  /* --- THE CONSENT COPY IS NOT ASTERISKED IN THE DESIGN - THE BOX BEING --- */
  /* --- REQUIRED IS CARRIED BY THE VALIDATION MESSAGE INSTEAD --- */
}
.gform_wrapper.register-form_wrapper .gfield--type-consent .gfield_consent_label .gfield_required {
  display: none;
}
.gform_wrapper.register-form_wrapper {
  /* --- THE SUBMIT BUTTON. ORDER 1 PUTS IT AFTER EVERY FIELD BUT BEFORE THE NOTE, --- */
  /* --- WHICH ONLY WORKS BECAUSE OF THE display: contents ABOVE --- */
}
.gform_wrapper.register-form_wrapper .gform_footer {
  grid-column: 1/-1;
  order: 1;
  /* --- THE GRID'S ROW GAP IS ALREADY ABOVE THIS, SO ONLY THE REMAINDER IS --- */
  /* --- ADDED. SEE $register-footer-space --- */
  margin-top: 7px;
  margin-bottom: 0;
  padding: 0;
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
}
@media (max-width: 991.98px) {
  .gform_wrapper.register-form_wrapper .gform_footer {
    margin-top: 32px;
  }
}
@media (max-width: 575.98px) {
  .gform_wrapper.register-form_wrapper .gform_footer {
    margin-top: 32px;
  }
}
.gform_wrapper.register-form_wrapper .gform_footer {
  /* --- THE BUTTON IS THE ONE PLACE GRAVITY FIGHTS HARDEST - IT CARRIES THE --- */
  /* --- FRAMEWORK'S .button STYLING, WHOSE SELECTOR OUTWEIGHS ANYTHING SANE WE --- */
  /* --- CAN WRITE AND WHOSE SIZING IS IN LOGICAL PROPERTIES - SO THIS BLOCK IS --- */
  /* --- IMPORTANT THROUGHOUT. THE TOKENS ABOVE DELIBERATELY DO NOT TOUCH IT: --- */
  /* --- --gf-ctrl-btn-* WOULD ALSO REPAINT THE FILE UPLOAD AND PAGINATION --- */
  /* --- BUTTONS IF EITHER IS EVER ADDED TO A FORM --- */
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button {
  background-color: #EDEBE2 !important;
  border: 0 !important;
  border-radius: 6px !important;
  color: #191C13 !important;
  cursor: pointer;
  font-size: 16px !important;
  line-height: 20px !important;
  width: auto !important;
  min-height: 52px !important;
  padding: 12px 21px !important;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button:focus {
  outline: none !important;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button:focus-visible {
  outline: 1px dotted !important;
  outline: 5px auto -webkit-focus-ring-color !important;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button {
  /* --- INLINE FLEX SO THE BUTTON SHRINK WRAPS ITS TEXT AND THE ARC SITS --- */
  /* --- BESIDE IT, THE SAME LOCKUP AS THE REGISTER AND LEARN MORE LINKS. --- */
  /* --- WRITTEN OUT RATHER THAN TAKEN FROM THE inline-flex MIXIN BECAUSE THE --- */
  /* --- FRAMEWORK SETS display ON THIS BUTTON AND ONLY !important CLEARS IT --- */
  display: inline-flex !important;
  -webkit-box-align: center;
  -moz-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  -webkit-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -moz-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -ms-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  -o-transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  transition: background-color 250ms cubic-bezier(0.77, 0, 0.175, 1);
  /* --- THE TEXT IS WRAPPED IN A SPAN BY THE gform_submit_button FILTER IN --- */
  /* --- FUNCTIONS.PHP, AND THE GLOBAL * RULE IN TYPOGRAPHY WOULD OTHERWISE --- */
  /* --- PAINT THAT SPAN BLACK RATHER THAN LET IT INHERIT --- */
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button .text {
  color: #191C13;
  font-size: inherit;
  line-height: inherit;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button {
  /* --- THE BRIDGE ARC, THE SAME ICON AND THE SAME 35px BY 20px LOCKUP THE --- */
  /* --- OTHER BUTTONS USE. IT IS INLINE SVG, NOT A BACKGROUND, BECAUSE THE --- */
  /* --- WIPE IS A STROKE ON ONE OF ITS PATHS --- */
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button .bridge {
  display: -webkit-box;
  display: -moz-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  margin-left: 16px;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button .bridge svg {
  display: block;
  width: 35px;
  height: auto;
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button {
  /* --- THE ARC WIPES ON AS THE BACKGROUND FADES, SEE MIXINS.SCSS. THE OTHER --- */
  /* --- BUTTONS DRAW IT WHITE ON MAROON - THIS ONE IS DARK ON CREAM, SO THE --- */
  /* --- STROKE IS RESTATED AFTER THE MIXIN RATHER THAN THE MIXIN BEING --- */
  /* --- CHANGED FOR EVERY BUTTON THAT SHARES IT --- */
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button .bridge svg path.bridge-arc-wipe {
  stroke: #ffffff;
  stroke-width: 3.386;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  -webkit-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -moz-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -ms-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  -o-transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
  transition: stroke-dashoffset 520ms cubic-bezier(0.56, 0, 0.24, 1);
}
.gform_wrapper.register-form_wrapper .gform_footer button.gform_button .bridge svg path.bridge-arc-wipe {
  stroke: #191C13;
}
@media (min-width: 992px) {
  .gform_wrapper.register-form_wrapper .gform_footer button.gform_button:hover, .gform_wrapper.register-form_wrapper .gform_footer button.gform_button:focus {
    background-color: #E9E2D6 !important;
  }
  .gform_wrapper.register-form_wrapper .gform_footer button.gform_button:hover .bridge svg path.bridge-arc-wipe, .gform_wrapper.register-form_wrapper .gform_footer button.gform_button:focus .bridge svg path.bridge-arc-wipe {
    stroke-dashoffset: 0;
  }
}
.gform_wrapper.register-form_wrapper {
  /* --- '* REQUIRED FIELDS'. AN HTML FIELD IN THE FORM, ORDERED LAST SO IT SITS --- */
  /* --- UNDER THE BUTTON --- */
}
.gform_wrapper.register-form_wrapper .register-form__required-note {
  grid-column: 1/-1;
  order: 2;
  text-align: center;
  /*
    $register-note-space under the button, the same on every screen.

    The note is its own grid row, so the grid's row-gap is already sitting
    between it and the button before any margin is added - 36px on desktop, 28
    on tablet, 24 on a phone. The margin is therefore the difference, not the
    space itself, which is why it is written against the gap variables rather
    than as three numbers. Retuning a row-gap then moves this margin with it
    instead of quietly reopening the space.
  */
  margin-top: 4px;
}
@media (max-width: 991.98px) {
  .gform_wrapper.register-form_wrapper .register-form__required-note {
    margin-top: 12px;
  }
}
@media (max-width: 575.98px) {
  .gform_wrapper.register-form_wrapper .register-form__required-note {
    margin-top: 16px;
  }
}
.gform_wrapper.register-form_wrapper .register-form__required-note .register-form__required-note-text {
  color: #EDEBE2;
  font-size: 14px;
  margin-bottom: 0;
}
.gform_wrapper.register-form_wrapper {
  /* --- VALIDATION. THE ORANGE COMES OFF THE TOKENS ABOVE - ALL THAT IS LEFT IS --- */
  /* --- PUTTING THE SUMMARY BACK AT THE TOP OF THE GRID, SINCE GRAVITY PRINTS IT --- */
  /* --- INSIDE THE FORM AND EVERY CHILD OF THE FORM IS NOW A GRID ITEM --- */
}
.gform_wrapper.register-form_wrapper .gform_validation_errors {
  grid-column: 1/-1;
  order: -1;
  margin-bottom: 0;
}
.gform_wrapper.register-form_wrapper {
  /* --- THE MESSAGE THAT REPLACES THE FORM AFTER A SUBMISSION. WHAT IT LOOKS LIKE --- */
  /* --- IS SET ONCE BELOW, IN THE SECTION SCOPED RULE, BECAUSE THIS SELECTOR ONLY --- */
  /* --- REACHES ONE OF THE TWO WAYS GRAVITY PRINTS IT --- */
}
.gform_wrapper.register-form_wrapper.gform_confirmation_wrapper {
  text-align: center;
}

/*
  AND THE CONFIRMATION ITSELF. Gravity prints this two different ways and only one
  of them was ever styled, which is why it was coming out in the body's near black
  on the green gradient.

  Submitted over ajax, the message is swapped in where the form was and keeps the
  form's wrapper, so it lands inside .gform_wrapper.gform_confirmation_wrapper and
  the rule above could reach it. Submitted with a page reload, Gravity prints the
  message on its own - a bare <div class="gform_confirmation_message_1
  gform_confirmation_message"> with no wrapper anywhere around it - and a rule that
  leans on the wrapper cannot touch it. This one asks for nothing but the message's
  own class, so it holds either way.

  Scoped to the section rather than left loose, so it only ever recolours a message
  that is actually sitting on the green. And it is the only place the colour and
  size are set now - the wrapper rule above deliberately no longer sets them, so
  the two ways of printing it cannot drift apart.
*/
section.form .gform_confirmation_message {
  color: #ffffff;
  font-size: 24px;
  text-align: center;
  /*
    The message is written in an editor field, so it can arrive as bare text or
    wrapped in a p, and it may carry a link. Neither takes the colour from the div
    on its own, and a p brings its own size with it - the section's own 18px, which
    is what it came out at before this was here. So both are set again on whatever
    is inside rather than left to inherit.
  */
}
section.form .gform_confirmation_message * {
  color: #ffffff;
  font-size: 24px;
}

.acf-success {
  opacity: 0;
  display: none;
  left: 0;
  -webkit-transition: opacity 1000ms ease;
  -moz-transition: opacity 1000ms ease;
  -ms-transition: opacity 1000ms ease;
  -o-transition: opacity 1000ms ease;
  transition: opacity 1000ms ease;
}
.acf-success.active {
  opacity: 1;
  position: relative;
}
.acf-success h2 {
  padding-top: 40px;
}
.acf-success .msg {
  display: none;
}
.acf-success .response {
  color: red;
  display: none;
}
.acf-success * {
  color: #000000;
}

/*# sourceMappingURL=style.css.map */