/*
Theme Name: Flowio
Author: KingsDesign
Author URI: kingsdesign.com.au
Description: A block-based WordPress theme designed to provide a great editing experience that minimises the visual gap between the frontend and backend. This theme also has a focus on consistent spacing & frontend performance.
Version: 0.3
Text Domain: flowio
*/

/* 
*  CSS TABLE OF CONTENTS
*   
*  1.0 - Reset
*  2.0 - Fonts
*  3.0 - Custom Properties
*  4.0 - General Typography
*  5.0 - Areas
*    5.1 - Header
*    5.2 - Entry Content
* 6.0 - Utilities
*  7.0 - Buttons
*  8.0 - Gutenberg Conditionals
*/

/* ------------------------------------------------- 
1.0 Reset
------------------------------------------------- */
html,
body {
  scroll-behavior: smooth;
}

/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
  scroll-padding: 10rem;
}

/* Add default focus style */
*:focus {
  outline: 2px solid var(--orange);
  outline-offset: 2px;
}

/* Remove default padding */
ul,
ol {
  padding: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0;
}

/* Make images easier to work with */
svg {
  display: block;
}

img {
  width: 100%;
  height: auto;
  display: block;
  background: var(--gray-100);
  object-position: var(--focus);
  object-fit: cover;
  opacity: 0;
  overflow: hidden;
  transition: opacity 0.95s, filter 1.2s, transform 0.3s;
}

img.loaded {
  opacity: 1;
}

/* Inherit fonts for inputs and buttons */
button {
  font: inherit;
}

input,
textarea,
select {
  font: inherit;
  padding: 0.5rem;
  margin: 0;
  width: 100%;
  border: 1px solid var(--black);
  border-radius: 0;
}

fieldset {
  display: grid;
  grid-auto-rows: 1fr;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
  padding: 1.25rem;
  border: 1px solid var(--stone);
}

fieldset input,
fieldset select {
  padding: 1.25rem 0.5rem;
  height: 100%;
}

button {
  padding: 0;
  cursor: pointer;
  border: none;
}

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------- 
End Reset 
------------------------------------------------- */

/* ------------------------------------------------- 
2.0 Font Imports 
------------------------------------------------- */
@font-face {
  font-family: "Agrandir";
  src: local("Agrandir Thin"), local("Agrandir-Thin"),
    url("/wp-content/themes/flowio/fonts/Agrandir-Thin.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agrandir";
  src: local("Agrandir Regular"), local("Agrandir-Regular"),
    url("/wp-content/themes/flowio/fonts/Agrandir-Regular.woff2")
      format("woff2");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Agrandir";
  src: local("Agrandir TextBold"), local("Agrandir-TextBold"),
    url("/wp-content/themes/flowio/fonts/Agrandir-TextBold.woff2")
      format("woff2");
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}
/* ------------------------------------------------- 
End Font Imports 
------------------------------------------------- */

/* ------------------------------------------------- 
3.0 Custom Properties
------------------------------------------------- */
:root {
  --heading-font: "Agrandir", sans-serif;
  --body-font: "Agrandir", sans-serif;
  --yellow: #ffd26f;
  --green: #417571;
  --blue: #bdc5db;
  --orange: #ff9d6e;
  --purple: #ad96cd;
  --stone: #e9ebed;
  --white: #fff;
  --black: #000;
  --content-width: 87%;
  --w-3xs: 22.5rem;
  --w-2xs: 30rem;
  --w-xs: 33.5rem;
  --w-sm: 40rem;
  --w-md: 48rem;
  --w-lg: 60rem;
  --w-xl: 72rem;
  --w-2xl: 80rem;
  --w-3xl: 96rem;
  --w-4xl: 120rem;
  --w-full: 100%;
  --entry-top-margin: 4rem;
  --entry-bottom-margin: 0;
  --spacing: 1rem;
  --s-3xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.25);
  --s-2xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.5);
  --s-xs: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 0.75);
  --s-sm: clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem);
  --s-md: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 1.5);
  --s-lg: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 2);
  --s-xl: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 2.5);
  --s-2xl: calc(clamp(0.875rem, 0.3rem + 2vh + 2vw, 2.25rem) * 3.5);
  --s-c1: clamp(3.5rem, 2vh + 6vw, 6.5rem);
  font-family: var(--body-font);
  font-weight: 300;
  overflow-wrap: break-word;
}
/* ------------------------------------------------- 
End Custom Properties
------------------------------------------------- */

/* ------------------------------------------------- 
4.0 General Typography
------------------------------------------------- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--heading-font);
  font-weight: 400;
  line-height: 1.3;
}

.fs-0,
h6 {
  font-size: clamp(0.75rem, 0.71rem + 0.18vw, 0.875rem);
}
.fs-1,
h5 {
  font-size: clamp(1rem, 0.96rem + 0.18vw, 1.125rem);
}

.fs-2,
h4 {
  font-size: clamp(1.125rem, 1.09rem + 0.18vw, 1.25rem);
}
.fs-3,
h3 {
  font-size: clamp(1.25rem, 1.11rem + 0.71vw, 1.75rem);
}
.fs-4,
h2 {
  font-size: clamp(1.5rem, 1.29rem + 1.07vw, 2.25rem);
}
.fs-5,
h1 {
  font-size: clamp(1.75rem, 1.39rem + 1.79vw, 3rem);
}
.fs-6 {
  font-size: clamp(2.25rem, 1.82rem + 2.14vw, 3.75rem);
}

p {
  line-height: 1.9;
}

.heading-font {
  font-family: var(--heading-font);
}

.body-font {
  font-family: var(--body-font);
}

/* style lists */
ul,
ol {
  padding-left: 2rem;
  line-height: 1.75;
}

.ttu {
  text-transform: uppercase;
}

/* ------------------------------------------------- 
End General Typography
------------------------------------------------- */

/* ------------------------------------------------- 
5.0 Areas
------------------------------------------------- */
/* --------
5.1 Header
-------- */
.sentinel {
  height: 1px;
  position: absolute;
  top: 1px;
  left: 0;
  right: 0;
  z-index: -999;
}

nav ul {
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  row-gap: 0.5rem;
  list-style: none;
  justify-content: end;
}

nav ul a {
  color: black;
  text-decoration: none;
  transition: all 0.5s;
  line-height: 1;
}

nav li a:focus {
  outline: none;
}

nav ul li {
  position: relative;
  line-height: 1;
}

nav ul a::after {
  content: " ";
  position: absolute;
  width: 0;
  height: 2px;
  display: block;
  background: var(--yellow);
  transition: width 0.3s ease;
}

nav ul a:hover::after,
nav ul a:focus-visible::after {
  opacity: 1;
  width: 100%;
  outline: none;
}

#curtain-menu nav ul a:hover::after,
#curtain-menu nav ul a:focus-visible::after {
  opacity: 1;
  width: 20%;
  outline: none;
}

#curtain-menu {
  visibility: hidden;
  position: fixed;
  z-index: 69421;
  background: white;
  color: black;
  height: 100vh;
  width: 0;
  transition: visibility, width 0.3s ease-out;
  overflow-y: scroll;
}

#curtain-menu ul {
  justify-content: start;
  flex-direction: column;
  gap: 1rem;
}

.curtain-button-placer {
  max-width: var(--xxl);
  width: var(--content-width);
  position: relative;
  display: flex;
  justify-content: flex-end;
  margin: auto;
  z-index: 10002;
  top: 1.6em;
  right: 0.45rem;
}

#close-curtain-button {
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

#curtain-menu-container {
  opacity: 0;
  width: var(--content-width);
  max-width: var(--width-medium);
  margin: auto;
  padding: 3rem 0;
  transition: opacity 0.3s ease;
}

#curtain-menu-container ul {
  font-size: 1.25rem;
  padding-left: 0;
}

#curtain-menu-container ul > * + * {
  margin-block-start: 0.6rem;
}

.theme-header {
  background: white;
  transition: all 0.3s;
  font-size: 0.875rem;
  position: sticky;
  width: 100%;
  top: 0;
  z-index: 69240;
  border-bottom: 1px solid var(--stone);
}

.theme-header.enabled {
  box-shadow: rgb(50 50 93 / 35%) 0px 2px 10px 5px,
    rgb(0 0 0 / 35%) 0px 1px 6px 3px;
}

@media screen and (min-width: 31.25rem) {
  .theme-header.enabled {
    box-shadow: rgb(50 50 93 / 5%) 0px 2px 10px 5px,
      rgb(0 0 0 / 10%) 0px 1px 6px 3px;
  }
}

.fixed {
  position: fixed;
  z-index: 69420;
  width: 100%;
  top: 0;
}

.header-content {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  align-items: center;
  padding: 1.1rem 0;
}

.logo {
  transition: all 0.3s;
}

.logo:hover,
.logo:focus {
  opacity: 0.7;
}

.logo {
  height: 2.5rem;
  display: flex;
  gap: 1rem;
  align-items: center;
}

.logo > svg {
  height: 100%;
}

.logo > .logo-words {
  height: 36%;
}

.desktop-nav,
.nav-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: end;
  gap: 1rem;
}

.nav-buttons {
  min-width: max-content;
  gap: 0.5rem;
}

.desktop-nav {
  gap: 1.25rem;
  row-gap: 0;
  justify-content: end;
}

.desktop-nav,
.logo-words,
.nav-button,
#menu-primary_navigation-1,
#pitch-button,
#membership-button {
  display: none;
}

.account {
  display: none;
}
@media screen and (min-width: 38rem) {
  .desktop-nav,
  .account,
  #pitch-button,
  #membership-button {
    display: flex;
  }

  .header-sub-bar {
    display: none;
  }
}

@media screen and (min-width: 52rem) {
  .desktop-nav,
  #menu-primary_navigation-1 {
    display: flex;
  }
  #open-curtain-button {
    display: none;
  }
}

@media screen and (min-width: 62rem) {
  .logo-words {
    display: flex;
  }
}

@media screen and (min-width: 69rem) {
  .nav-button {
    display: flex;
  }
}

button {
  height: 2.5rem;
  display: flex;
  padding: 0.5rem;
}

button svg {
  height: 100%;
  margin: 0;
}

.header-sub-bar {
  transition: all 0.5s;
  height: 100vh;
  max-height: 3.75rem;
}

.header-sub-bar > div {
  display: flex;
  justify-content: space-between;
  padding-bottom: 1.1rem;
}

.theme-header.enabled .header-sub-bar > .w-content {
  opacity: 0;
  display: none;
  transition-delay: opacity 0.2s;
}

.theme-header.enabled .header-sub-bar {
  opacity: 0;
  visibility: hidden;
  max-height: 0;
}

/* --------
End Header
-------- */
/* --------
5.2 Entry Content
-------- */
div[class^="wp-block-lazy"] {
  width: 100%;
  max-width: 100%;
}

#page {
  overflow-x: clip;
}

.entry-content {
  padding: var(--entry-top-margin) 0 var(--entry-bottom-margin);
}

.entry-bottom-padding {
  --entry-bottom-margin: 6rem;
}

.auto-child-width > * {
  max-width: var(--auto-child-max-width, var(--w-sm));
  width: var(--auto-child-width, var(--content-width));
  margin-inline-start: auto;
  margin-inline-end: auto;
}

#page p a,
#page li > a,
#page h1 a,
#page h2 a,
#page h3 a,
#page h4 a {
  color: var(--primary-700);
  transition: all 0.3s;
}

#page p a:hover,
#page p a:focus,
#page h1:hover a,
#page h2:hover a,
#page h3:hover a,
#page h4:hover a,
#page h1:focus a,
#page h2:focus a,
#page h3:focus a,
#page h4:focus a,
#page li > a:hover,
#page li > a:focus {
  color: var(--primary-500);
  text-decoration: underline double;
}

.wp-block-flowio-section-block a,
footer a {
  color: inherit;
}

/* Ninja Forms */
.nf-form-layout .nf-before-form-content {
  border-bottom: 1px solid var(--primary-100);
  padding-bottom: 1rem;
}

.nf-form-layout .nf-form-content {
  padding: 0;
  margin-top: 1rem;
}

nf-fields-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/*** This is to select which elements should span multiple columns ***/
nf-fields-wrap nf-field:nth-child(5),
nf-fields-wrap nf-field:nth-child(6),
nf-fields-wrap nf-field:nth-child(7) {
  grid-column: span 2;
}
/* --------
End Entry Content
-------- */
/* --------
5.3 Footer
-------- */
.theme-footer p {
  max-width: max-content;
}

.theme-footer {
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.footer-content {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: space-between;
  align-items: center;
}

.footer-icons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  max-width: max-content;
  justify-content: end;
  align-items: center;
}

.theme-footer a.btn {
  height: 2.5rem;
  display: flex;
  --padding: 0.65rem;
  --hPadding: 0.65rem;
  --fPadding: 0.65rem;
  --aPadding: 0.65rem;
  aspect-ratio: 1;
  justify-content: center;
  align-items: center;
}

.theme-footer a.btn svg {
  height: 100%;
  margin: 0;
  fill: currentColor;
}
/* --------
Emd Footer
-------- */

/* ------------------------------------------------- 
End Areas
------------------------------------------------- */
/* ------------------------------------------------- 
6.0 Utilities
------------------------------------------------- */
/* Flow */
.flow > * + * {
  margin-block-start: var(--flow, 2rem);
}

.inner-flow > * + * {
  margin-block-start: var(--inner-flow, var(--flow, 2rem));
}

.flex-flow {
  display: flex;
  flex-direction: column;
  gap: var(--flow, 2rem);
}

.ff-final {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: end;
}

.flow-xs {
  --flow: 0.5rem;
}

.flow-sm {
  --flow: 1rem;
}

.flow-md {
  --flow: 1.5rem;
}

.flow-lg {
  --flow: 2rem;
}

.flow-xl {
  --flow: 2.5rem;
}

.flow-xxl {
  --flow: 3rem;
}

/* Margins */
.m-3xs {
  margin: var(--s-3xs);
}

.m-2xs {
  margin: var(--s-2xs);
}

.m-xs {
  margin: var(--s-xs);
}

.m-sm {
  margin: var(--s-sm);
}

.m-md {
  margin: var(--s-md);
}

.m-lg {
  margin: var(--s-lg);
}

.m-xl {
  margin: var(--s-xl);
}

.m-2xl {
  margin: var(--s-2xl);
}

.m-c1 {
  margin: var(--s-c1);
}

.m-none {
  margin: 0;
}

.my-3xs {
  margin-block-start: var(--s-3xs);
  margin-block-end: var(--s-3xs);
}

.my-2xs {
  margin-block-start: var(--s-2xs);
  margin-block-end: var(--s-2xs);
}

.my-xs {
  margin-block-start: var(--s-xs);
  margin-block-end: var(--s-xs);
}

.my-sm {
  margin-block-start: var(--s-sm);
  margin-block-end: var(--s-sm);
}

.my-md {
  margin-block-start: var(--s-md);
  margin-block-end: var(--s-md);
}

.my-lg {
  margin-block-start: var(--s-lg);
  margin-block-end: var(--s-lg);
}

.my-xl {
  margin-block-start: var(--s-xl);
  margin-block-end: var(--s-xl);
}

.my-2xl {
  margin-block-start: var(--s-2xl);
  margin-block-end: var(--s-2xl);
}

.my-c1 {
  margin-block-start: var(--s-c1);
  margin-block-end: var(--s-c1);
}

.my-none {
  margin-block-start: 0;
  margin-block-end: 0;
}

.mx-3xs {
  margin-inline-start: var(--s-3xs);
  margin-inline-end: var(--s-3xs);
}

.mx-2xs {
  margin-inline-start: var(--s-2xs);
  margin-inline-end: var(--s-2xs);
}

.mx-xs {
  margin-inline-start: var(--s-xs);
  margin-inline-end: var(--s-xs);
}

.mx-sm {
  margin-inline-start: var(--s-sm);
  margin-inline-end: var(--s-sm);
}

.mx-md {
  margin-inline-start: var(--s-md);
  margin-inline-end: var(--s-md);
}

.mx-lg {
  margin-inline-start: var(--s-lg);
  margin-inline-end: var(--s-lg);
}

.mx-xl {
  margin-inline-start: var(--s-xl);
  margin-inline-end: var(--s-xl);
}

.mx-2xl {
  margin-inline-start: var(--s-2xl);
  margin-inline-end: var(--s-2xl);
}

.mx-c1 {
  margin-inline-start: var(--s-c1);
  margin-inline-end: var(--s-c1);
}

.mx-auto {
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.mt-3xs {
  margin-block-start: var(--s-3xs);
}

.mt-2xs {
  margin-block-start: var(--s-2xs);
}

.mt-xs {
  margin-block-start: var(--s-xs);
}

.mt-sm {
  margin-block-start: var(--s-sm);
}

.mt-md {
  margin-block-start: var(--s-md);
}

.mt-lg {
  margin-block-start: var(--s-lg);
}

.mt-xl {
  margin-block-start: var(--s-xl);
}

.mt-2xl {
  margin-block-start: var(--s-2xl);
}

.mt-c1 {
  margin-block-start: var(--s-c1);
}

.mt-none {
  margin-block-start: 0;
}

.mb-3xs {
  margin-block-end: var(--s-3xs);
}

.mb-2xs {
  margin-block-end: var(--s-2xs);
}

.mb-xs {
  margin-block-end: var(--s-xs);
}

.mb-sm {
  margin-block-end: var(--s-sm);
}

.mb-md {
  margin-block-end: var(--s-md);
}

.mb-lg {
  margin-block-end: var(--s-lg);
}

.mb-xl {
  margin-block-end: var(--s-xl);
}

.mb-2xl {
  margin-block-end: var(--s-2xl);
}

.mb-c1 {
  margin-block-end: var(--s-c1);
}

.mb-none {
  margin-block-end: 0;
}

.ml-3xs {
  margin-inline-start: var(--s-3xs);
}

.ml-2xs {
  margin-inline-start: var(--s-2xs);
}

.ml-xs {
  margin-inline-start: var(--s-xs);
}

.ml-sm {
  margin-inline-start: var(--s-sm);
}

.ml-md {
  margin-inline-start: var(--s-md);
}

.ml-lg {
  margin-inline-start: var(--s-lg);
}

.ml-xl {
  margin-inline-start: var(--s-xl);
}

.ml-2xl {
  margin-inline-start: var(--s-2xl);
}

.ml-c1 {
  margin-inline-start: var(--s-c1);
}

.ml-none {
  margin-inline-start: 0;
}

.mr-3xs {
  margin-inline-end: var(--s-3xs);
}

.mr-2xs {
  margin-inline-end: var(--s-2xs);
}

.mr-xs {
  margin-inline-end: var(--s-xs);
}

.mr-sm {
  margin-inline-end: var(--s-sm);
}

.mr-md {
  margin-inline-end: var(--s-md);
}

.mr-lg {
  margin-inline-end: var(--s-lg);
}

.mr-xl {
  margin-inline-end: var(--s-xl);
}

.mr-2xl {
  margin-inline-end: var(--s-2xl);
}

.mr-c1 {
  margin-inline-end: var(--s-c1);
}

.mr-none {
  margin-inline-end: 0;
}
/*Padding*/
.p-3xs {
  padding: var(--s-3xs);
}

.p-2xs {
  padding: var(--s-2xs);
}

.p-xs {
  padding: var(--s-xs);
}

.p-sm {
  padding: var(--s-sm);
}

.p-md {
  padding: var(--s-md);
}

.p-lg {
  padding: var(--s-lg);
}

.p-xl {
  padding: var(--s-xl);
}

.p-2xl {
  padding: var(--s-2xl);
}

.p-c1 {
  padding: var(--s-c1);
}

.p-none {
  padding: 0;
}

.py-3xs {
  padding-block-start: var(--s-3xs);
  padding-block-end: var(--s-3xs);
}

.py-2xs {
  padding-block-start: var(--s-2xs);
  padding-block-end: var(--s-2xs);
}

.py-xs {
  padding-block-start: var(--s-xs);
  padding-block-end: var(--s-xs);
}

.py-sm {
  padding-block-start: var(--s-sm);
  padding-block-end: var(--s-sm);
}

.py-md {
  padding-block-start: var(--s-md);
  padding-block-end: var(--s-md);
}

.py-lg {
  padding-block-start: var(--s-lg);
  padding-block-end: var(--s-lg);
}

.py-xl {
  padding-block-start: var(--s-xl);
  padding-block-end: var(--s-xl);
}

.py-2xl {
  padding-block-start: var(--s-2xl);
  padding-block-end: var(--s-2xl);
}

.py-c1 {
  padding-block-start: var(--s-c1);
  padding-block-end: var(--s-c1);
}

.py-none {
  padding-block-start: 0;
  padding-block-end: 0;
}

.px-3xs {
  padding-inline-start: var(--s-3xs);
  padding-inline-end: var(--s-3xs);
}

.px-2xs {
  padding-inline-start: var(--s-2xs);
  padding-inline-end: var(--s-2xs);
}

.px-xs {
  padding-inline-start: var(--s-xs);
  padding-inline-end: var(--s-xs);
}

.px-sm {
  padding-inline-start: var(--s-sm);
  padding-inline-end: var(--s-sm);
}

.px-md {
  padding-inline-start: var(--s-md);
  padding-inline-end: var(--s-md);
}

.px-lg {
  padding-inline-start: var(--s-lg);
  padding-inline-end: var(--s-lg);
}

.px-xl {
  padding-inline-start: var(--s-xl);
  padding-inline-end: var(--s-xl);
}

.px-2xl {
  padding-inline-start: var(--s-2xl);
  padding-inline-end: var(--s-2xl);
}

.px-c1 {
  padding-inline-start: var(--s-c1);
  padding-inline-end: var(--s-c1);
}

.px-auto {
  padding-inline-start: auto;
  padding-inline-end: auto;
}

.pt-3xs {
  padding-block-start: var(--s-3xs);
}

.pt-2xs {
  padding-block-start: var(--s-2xs);
}

.pt-xs {
  padding-block-start: var(--s-xs);
}

.pt-sm {
  padding-block-start: var(--s-sm);
}

.pt-md {
  padding-block-start: var(--s-md);
}

.pt-lg {
  padding-block-start: var(--s-lg);
}

.pt-xl {
  padding-block-start: var(--s-xl);
}

.pt-2xl {
  padding-block-start: var(--s-2xl);
}

.pt-c1 {
  padding-block-start: var(--s-c1);
}

.pt-none {
  padding-block-start: 0;
}

.pb-3xs {
  padding-block-end: var(--s-3xs);
}

.pb-2xs {
  padding-block-end: var(--s-2xs);
}

.pb-xs {
  padding-block-end: var(--s-xs);
}

.pb-sm {
  padding-block-end: var(--s-sm);
}

.pb-md {
  padding-block-end: var(--s-md);
}

.pb-lg {
  padding-block-end: var(--s-lg);
}

.pb-xl {
  padding-block-end: var(--s-xl);
}

.pb-2xl {
  padding-block-end: var(--s-2xl);
}

.pb-c1 {
  padding-block-end: var(--s-c1);
}

.pb-none {
  padding-block-end: 0;
}

.pl-3xs {
  padding-inline-start: var(--s-3xs);
}

.pl-2xs {
  padding-inline-start: var(--s-2xs);
}

.pl-xs {
  padding-inline-start: var(--s-xs);
}

.pl-sm {
  padding-inline-start: var(--s-sm);
}

.pl-md {
  padding-inline-start: var(--s-md);
}

.pl-lg {
  padding-inline-start: var(--s-lg);
}

.pl-xl {
  padding-inline-start: var(--s-xl);
}

.pl-2xl {
  padding-inline-start: var(--s-2xl);
}

.pl-c1 {
  padding-inline-start: var(--s-c1);
}

.pl-none {
  padding-inline-start: 0;
}

.pr-3xs {
  padding-inline-end: var(--s-3xs);
}

.pr-2xs {
  padding-inline-end: var(--s-2xs);
}

.pr-xs {
  padding-inline-end: var(--s-xs);
}

.pr-sm {
  padding-inline-end: var(--s-sm);
}

.pr-md {
  padding-inline-end: var(--s-md);
}

.pr-lg {
  padding-inline-end: var(--s-lg);
}

.pr-xl {
  padding-inline-end: var(--s-xl);
}

.pr-2xl {
  padding-inline-end: var(--s-2xl);
}

.pr-c1 {
  padding-inline-end: var(--s-c1);
}

.pr-none {
  padding-inline-end: 0;
}

/* Block Widths */
.mw-3xs {
  max-width: var(--w-3xs);
}

.mw-2xs {
  max-width: var(--w-2xs);
}

.mw-xs {
  max-width: var(--w-xs);
}

.mw-sm {
  max-width: var(--w-sm);
}

.mw-md {
  max-width: var(--w-md);
}

.mw-lg {
  max-width: var(--w-lg);
}

.mw-xl {
  max-width: var(--w-xl);
}

.mw-2xl {
  max-width: var(--w-2xl);
}

.mw-3xl {
  max-width: var(--w-3xl);
}

.mw-4xl {
  max-width: var(--w-4xl);
}

.mw-full {
  max-width: 100%;
}

.w-content {
  width: var(--content-width);
}

.w-full {
  width: 100%;
}

.cmw-3xs {
  --auto-child-max-width: var(--w-3xs);
}

.cmw-2xs {
  --auto-child-max-width: var(--w-2xs);
}

.cmw-xs {
  --auto-child-max-width: var(--w-xs);
}

.cmw-sm {
  --auto-child-max-width: var(--w-sm);
}

.cmw-md {
  --auto-child-max-width: var(--w-md);
}

.cmw-lg {
  --auto-child-max-width: var(--w-lg);
}

.cmw-xl {
  --auto-child-max-width: var(--w-xl);
}

.cmw-2xl {
  --auto-child-max-width: var(--w-2xl);
}

.cmw-3xl {
  --auto-child-max-width: var(--w-3xl);
}

.cmw-4xl {
  --auto-child-max-width: var(--w-4xl);
}

.cmw-full {
  --auto-child-max-width: 100%;
}

.cw-content {
  --auto-child-width: var(--content-width);
}

.cw-full {
  --auto-child-width: 100%;
}

/* Other Utilities */
.bt-none > div {
  border-top: none !important;
}

.bx-none > div {
  border-left: none !important;
  border-right: none !important;
}

.bl-none > div {
  border-left: none !important;
}

.ta-l,
.has-text-align-left {
  text-align: left;
}

.ta-c,
.has-text-align-center {
  text-align: center;
}

.ta-r,
.has-text-align-right {
  text-align: right;
}

.fw-1 {
  font-weight: 100;
}

.fw-2 {
  font-weight: 200;
}

.fw-3 {
  font-weight: 300;
}

.fw-4 {
  font-weight: 400;
}

.fw-5 {
  font-weight: 500;
}

.fw-6 {
  font-weight: 600;
}

.fw-7 {
  font-weight: 700;
}

.fw-8 {
  font-weight: 800;
}

.fw-9 {
  font-weight: 900;
}

.stack {
  display: grid;
  grid-template-areas: "stack";
  position: relative;
}

.stack > * {
  grid-area: stack;
  position: relative;
}

.stack > img {
  position: absolute;
  object-fit: cover;
  height: 100%;
}

.stack > .overlay {
  width: 100%;
  height: 100%;
  background: var(--overlay, rgba(0, 0, 0, 0.5));
}

/* Colour Utilities */
.col-yellow {
  color: var(--yellow);
}

.col-green {
  color: var(--green);
}

.col-blue {
  color: var(--blue);
}

.col-orange {
  color: var(--orange);
}

.col-purple {
  color: var(--purple);
}

.col-stone {
  color: var(--stone);
}

.col-white {
  color: var(--white);
}

.col-black {
  color: var(--black);
}

.bg-yellow {
  background-color: var(--yellow);
}

.bg-green {
  background-color: var(--green);
}

.bg-blue {
  background-color: var(--blue);
}

.bg-orange {
  background-color: var(--orange);
}

.bg-purple {
  background-color: var(--purple);
}

.bg-stone {
  background-color: var(--stone);
}

.bg-white {
  background-color: var(--white);
}

.bg-black {
  background-color: var(--black);
}

.flex-layout {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap, 2rem);
  row-gap: var(--row-gap, var(--gap, 2rem));
  justify-content: var(--justify);
  align-items: var(--align);
}
.flex-layout > * {
  flex: var(--flex-base, 17rem) var(--flex-grow, 1) var(--flex-shrink, 1);
  max-width: var(--flex-child-max-width);
  min-width: var(--flex-child-min-width);
}
.fb-2 {
  --flex-base: 2rem;
}
.fb-4 {
  --flex-base: 4rem;
}
.fb-6 {
  --flex-base: 6rem;
}
.fb-8 {
  --flex-base: 8rem;
}
.fb-10 {
  --flex-base: 10rem;
}
.fb-12 {
  --flex-base: 12rem;
}
.fb-14 {
  --flex-base: 14rem;
}
.fb-16 {
  --flex-base: 16rem;
}
.fb-18 {
  --flex-base: 18rem;
}
.fb-20 {
  --flex-base: 20rem;
}
.fb-24 {
  --flex-base: 24rem;
}
.fb-28 {
  --flex-base: 28rem;
}
.fb-32 {
  --flex-base: 32rem;
}
.fb-40 {
  --flex-base: 40rem;
}
.gap-none {
  --gap: 0;
}
.gap-2xs {
  --gap: 0.25rem;
}
.gap-xs {
  --gap: 0.5rem;
}
.gap-sm {
  --gap: 1rem;
}
.gap-md {
  --gap: 1.5rem;
}
.gap-lg {
  --gap: 2rem;
}
.gap-xl {
  --gap: 2.5rem;
}
.gap-2xl {
  --gap: 3rem;
}
.row-gap-none {
  --row-gap: 0;
}
.row-gap-2xs {
  --row-gap: 0.25rem;
}
.row-gap-xs {
  --row-gap: 0.5rem;
}
.row-gap-sm {
  --row-gap: 1rem;
}
.row-gap-md {
  --row-gap: 1.5rem;
}
.row-gap-lg {
  --row-gap: 2rem;
}
.row-gap-xl {
  --row-gap: 2.5rem;
}
.row-gap-2xl {
  --row-gap: 3rem;
}

.mw-2 {
  max-width: 2rem;
}
.mw-4 {
  max-width: 4rem;
}
.mw-6 {
  max-width: 6rem;
}
.mw-8 {
  max-width: 8rem;
}
.mw-10 {
  max-width: 10rem;
}
.mw-12 {
  max-width: 12rem;
}
.mw-14 {
  max-width: 14rem;
}
.mw-16 {
  max-width: 16rem;
}
.mw-18 {
  max-width: 18rem;
}
.mw-20 {
  max-width: 20rem;
}
.mw-24 {
  max-width: 24rem;
}
.mw-28 {
  max-width: 28rem;
}
.mw-32 {
  max-width: 32rem;
}
.mw-40 {
  max-width: 40rem;
}

.fcmw-2 {
  --flex-child-max-width: 2rem;
}
.fcmw-4 {
  --flex-child-max-width: 4rem;
}
.fcmw-6 {
  --flex-child-max-width: 6rem;
}
.fcmw-8 {
  --flex-child-max-width: 8rem;
}
.fcmw-10 {
  --flex-child-max-width: 10rem;
}
.fcmw-12 {
  --flex-child-max-width: 12rem;
}
.fcmw-14 {
  --flex-child-max-width: 14rem;
}
.fcmw-16 {
  --flex-child-max-width: 16rem;
}
.fcmw-18 {
  --flex-child-max-width: 18rem;
}
.fcmw-20 {
  --flex-child-max-width: 20rem;
}
.fcmw-24 {
  --flex-child-max-width: 24rem;
}
.fcmw-28 {
  --flex-child-max-width: 28rem;
}
.fcmw-32 {
  --flex-child-max-width: 32rem;
}
.fcmw-40 {
  --flex-child-max-width: 40rem;
}

.h-full {
  height: 100%;
}
.grid-layout {
  display: grid;
  grid-template-columns: repeat(
    var(--col-fill, auto-fit),
    minmax(var(--col-min, 15rem), var(--col-max, 1fr))
  );
  grid-auto-rows: var(--grid-auto-rows, 1fr);
  gap: var(--gap, 2rem);
}
.justify-start {
  --justify: start;
}
.justify-center {
  --justify: center;
}
.justify-end {
  --justify: end;
}
.justify-around {
  --justify: space-around;
}
.justify-between {
  --justify: space-between;
}
.align-start {
  --align: start;
}
.align-center {
  --align: center;
}
.align-end {
  --align: end;
}
.align-around {
  --align: space-around;
}
.align-between {
  --align: space-between;
}
.as-start {
  align-self: start;
}
.as-center {
  align-self: center;
}
.as-end {
  align-self: end;
}
.js-start {
  justify-self: start;
}
.js-center {
  justify-self: center;
}
.js-end {
  justify-self: end;
}
/* ------------------------------------------------- 
End Utilities
------------------------------------------------- */
/* ------------------------------------------------- 
7.0 Buttons
------------------------------------------------- */
html .btn,
html input[type="submit"],
html .linkbtn > a,
html body input[id^="nf-"][type="button"] {
  color: var(--color, var(--white));
  background: var(--background, var(--black));
  border: var(--border, 1px solid var(--black));
  border-radius: var(--borderRadius, 0);
  padding: var(--padding, 0.5rem 1.25rem 0.25rem);
  transform: var(--transform, none);
  display: inline-flex;
  text-decoration: none;
  line-height: 1.95;
  text-transform: uppercase;
  font-weight: 900;
  gap: 0.25rem;
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  transition: background 0.55s, color 0.55s, border 0.55s;
}

html .btn:hover,
html input[type="submit"]:hover,
.linkbtn > a:hover,
html body input[id^="nf-"][type="button"]:hover {
  color: var(--hColor, var(--black));
  background: var(--hBackground, var(--yellow));
  border: var(--hBorder, 1px solid var(--black));
  border-radius: var(--hBorderRadius, 0);
  padding: var(--hPadding, 0.5rem 1.25rem 0.25rem);
  transform: var(--hTransform, none);
  cursor: pointer;
}

html .btn:focus,
html input[type="submit"]:focus,
.linkbtn > a:focus,
html body input[id^="nf-"][type="button"]:focus {
  color: var(--fColor, var(--black));
  background: var(--fBackground, var(--yellow));
  border: var(--fBorder, 1px solid var(--black));
  border-radius: var(--fBorderRadius, 0);
  padding: var(--fPadding, 0.5rem 1.25rem 0.25rem);
  transform: var(--fTransform, none);
  outline: none;
}

html .btn:active,
html input[type="submit"]:active,
.linkbtn > a:active,
html body input[id^="nf-"][type="button"]:active {
  color: var(--aColor, var(--black));
  background: var(--aBackground, var(--yellow));
  border: var(--aBorder, 1px solid var(--black));
  border-radius: var(--aBorderRadius, 0);
  padding: var(--aPadding, 0.5rem 1.25rem 0.25rem);
  transform: var(--aTransform, none);
}

.btn-icon {
  height: 1rem;
  position: relative;
  top: 2px;
}

.header-button {
  --color: var(--white);
  --hColor: var(--white);
  --fColor: var(--white);
  --aColor: var(--primary-300);
  --background: var(--primary-600);
  --hBackground: var(--primary-700);
  --fBackground: var(--primary-700);
  --aBackground: var(--primary-700);
  --border: none;
  --hBorder: none;
  --fBorder: none;
  --aBorder: none;
  --padding: 0.5rem;
  --hPadding: 0.5rem;
  --fPadding: 0.5rem;
  --aPadding: 0.5rem;
}

.sm-btn-padding {
  --padding: 0.4rem 0.6rem 0.25rem;
  --hPadding: 0.4rem 0.6rem 0.25rem;
  --fPadding: 0.4rem 0.6rem 0.25rem;
  --aPadding: 0.4rem 0.6rem 0.25rem;
}

.outline-button {
  --color: var(--black);
  --hColor: var(--black);
  --fColor: var(--black);
  --aColor: var(--black);
  --background: none;
  --hBackground: var(--yellow);
  --fBackground: var(--yellow);
  --aBackground: var(--yellow);
  --border: 1px solid var(--black);
  --hBorder: 1px solid var(--black);
  --fBorder: 1px solid var(--black);
  --aBorder: 1px solid var(--black);
}

.outline-button-white {
  --color: var(--white);
  --hColor: var(--white);
  --fColor: var(--white);
  --aColor: var(--white);
  --background: none;
  --hBackground: var(--yellow);
  --fBackground: var(--yellow);
  --aBackground: var(--yellow);
  --border: 1px solid var(--white);
  --hBorder: 1px solid var(--white);
  --fBorder: 1px solid var(--white);
  --aBorder: 1px solid var(--white);
}

.black-outline-fill {
  --color: var(--black);
  --hColor: var(--white);
  --fColor: var(--white);
  --aColor: var(--white);
  --background: none;
  --hBackground: var(--black);
  --fBackground: var(--black);
  --aBackground: var(--black);
  --border: 1px solid var(--black);
  --hBorder: 1px solid var(--black);
  --fBorder: 1px solid var(--black);
  --aBorder: 1px solid var(--black);
}

.white-outline-fill {
  --color: var(--white);
  --hColor: var(--white);
  --fColor: var(--white);
  --aColor: var(--white);
  --background: none;
  --hBackground: var(--black);
  --fBackground: var(--black);
  --aBackground: var(--black);
  --border: 1px solid var(--white);
  --hBorder: 1px solid var(--black);
  --fBorder: 1px solid var(--black);
  --aBorder: 1px solid var(--black);
}

.black-outline-white-fill {
  --color: var(--black);
  --hColor: var(--black);
  --fColor: var(--black);
  --aColor: var(--black);
  --background: none;
  --hBackground: var(--white);
  --fBackground: var(--white);
  --aBackground: var(--white);
  --border: 1px solid var(--black);
  --hBorder: 1px solid var(--white);
  --fBorder: 1px solid var(--white);
  --aBorder: 1px solid var(--white);
}

.white-outline-white-fill {
  --color: var(--white);
  --hColor: var(--black);
  --fColor: var(--black);
  --aColor: var(--black);
  --background: none;
  --hBackground: var(--white);
  --fBackground: var(--white);
  --aBackground: var(--white);
  --border: 1px solid var(--white);
  --hBorder: 1px solid var(--white);
  --fBorder: 1px solid var(--white);
  --aBorder: 1px solid var(--white);
}
.yellow-fill-black-outline {
  --color: var(--black);
  --hColor: var(--white);
  --fColor: var(--white);
  --aColor: var(--white);
  --background: var(--yellow);
  --hBackground: var(--black);
  --fBackground: var(--black);
  --aBackground: var(--black);
  --border: 1px solid var(--black);
  --hBorder: 1px solid var(--black);
  --fBorder: 1px solid var(--black);
  --aBorder: 1px solid var(--black);
}
.yellow-fill-white-fill {
  --color: var(--black);
  --hColor: var(--black);
  --fColor: var(--black);
  --aColor: var(--black);
  --background: var(--yellow);
  --hBackground: var(--white);
  --fBackground: var(--white);
  --aBackground: var(--white);
  --border: 1px solid var(--yellow);
  --hBorder: 1px solid var(--white);
  --fBorder: 1px solid var(--white);
  --aBorder: 1px solid var(--white);
}
.magnifying::after {
  content: "";
  width: 1.375rem;
  height: 100%;
  background-size: cover;
  background-image: url("data:image/svg+xml, %3Csvg stroke='currentColor' fill='none' stroke-width='0' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z' /%3E%3C/svg%3E");
}

.btn:hover path,
.canopy-hover-parent path,
.summit-hover-parent path,
.horizon-hover-parent path,
.aurora-hover-parent path,
.logo-icon {
  animation: none;
}

.canopy-hover-parent:hover .canopy .canopy-path-1 {
  animation: canopy_draw1 800ms ease-in-out 0ms forwards !important;
}

.canopy-hover-parent:hover .canopy .canopy-path-2 {
  animation: canopy_draw2 800ms ease-in-out 0ms forwards !important;
}

.canopy-hover-parent:hover .canopy .canopy-path-3 {
  animation: canopy_draw3 800ms ease-in-out 0ms forwards !important;
}

.canopy-hover-parent:hover .canopy .canopy-path-4 {
  animation: canopy_draw4 800ms ease-in-out 0ms forwards !important;
}

.canopy-hover-parent:hover .canopy .canopy-path-5 {
  animation: canopy_draw5 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-1 {
  animation: summit_draw1 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-2 {
  animation: summit_draw2 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-3 {
  animation: summit_draw3 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-4 {
  animation: summit_draw4 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-5 {
  animation: summit_draw5 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-6 {
  animation: summit_draw6 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-7 {
  animation: summit_draw7 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-8 {
  animation: summit_draw8 800ms ease-in-out 0ms forwards !important;
}

.summit-hover-parent:hover .summit .summit-path-9 {
  animation: summit_draw9 800ms ease-in-out 0ms forwards !important;
}

.horizon-hover-parent:hover .horizon .horizon-path-1 {
  animation: horizon_draw1 800ms ease-in-out 0ms forwards !important;
}

.horizon-hover-parent:hover .horizon .horizon-path-2 {
  animation: horizon_draw2 800ms ease-in-out 0ms forwards !important;
}

.horizon-hover-parent:hover .horizon .horizon-path-3 {
  animation: horizon_draw3 800ms ease-in-out 0ms forwards !important;
}

.horizon-hover-parent:hover .horizon .horizon-path-4 {
  animation: horizon_draw4 800ms ease-in-out 0ms forwards !important;
}

.horizon-hover-parent:hover .horizon .horizon-path-5 {
  animation: horizon_draw5 800ms ease-in-out 0ms forwards !important;
}

.aurora-hover-parent:hover .aurora .aurora-path-1 {
  animation: aurora_draw1 800ms ease-in-out 0ms forwards !important;
}

.aurora-hover-parent:hover .aurora .aurora-path-2 {
  animation: aurora_draw2 800ms ease-in-out 0ms forwards !important;
}

.aurora-hover-parent:hover .aurora .aurora-path-3 {
  animation: aurora_draw3 800ms ease-in-out 0ms forwards !important;
}

.aurora-hover-parent:hover .aurora .aurora-path-4 {
  animation: aurora_draw4 800ms ease-in-out 0ms forwards !important;
}

.aurora-hover-parent:hover .aurora .aurora-path-5 {
  animation: aurora_draw5 800ms ease-in-out 0ms forwards !important;
}

.btn:hover .canopy path,
.btn:hover .summit path,
.btn:hover .horizon path,
.btn:hover .aurora path,
.canopy-hover-parent:hover .canopy path,
.summit-hover-parent:hover .summit path,
.horizon-hover-parent:hover .horizon path,
.aurora-hover-parent:hover .aurora path,
header .logo:hover .logo-icon path {
  animation: draw 800ms ease-in-out 0ms forwards !important;
}

@keyframes draw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes canopy_draw1 {
  from {
    stroke-dashoffset: 242;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes canopy_draw2 {
  from {
    stroke-dashoffset: 231;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes canopy_draw3 {
  from {
    stroke-dashoffset: 154;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes canopy_draw4 {
  from {
    stroke-dashoffset: 236;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes canopy_draw5 {
  from {
    stroke-dashoffset: 690;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw1 {
  from {
    stroke-dashoffset: 229;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw2 {
  from {
    stroke-dashoffset: 215;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw3 {
  from {
    stroke-dashoffset: 231;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw4 {
  from {
    stroke-dashoffset: 109;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw5 {
  from {
    stroke-dashoffset: 78;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw6 {
  from {
    stroke-dashoffset: 110;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw7 {
  from {
    stroke-dashoffset: 107;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw8 {
  from {
    stroke-dashoffset: 236;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes summit_draw9 {
  from {
    stroke-dashoffset: 690;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes horizon_draw1 {
  from {
    stroke-dashoffset: 242;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes horizon_draw2 {
  from {
    stroke-dashoffset: 231;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes horizon_draw3 {
  from {
    stroke-dashoffset: 362;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes horizon_draw4 {
  from {
    stroke-dashoffset: 236;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes horizon_draw5 {
  from {
    stroke-dashoffset: 690;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aurora_draw1 {
  from {
    stroke-dashoffset: 232;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aurora_draw2 {
  from {
    stroke-dashoffset: 242;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aurora_draw3 {
  from {
    stroke-dashoffset: 318;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aurora_draw4 {
  from {
    stroke-dashoffset: 236;
  }
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes aurora_draw5 {
  from {
    stroke-dashoffset: 690;
  }
  to {
    stroke-dashoffset: 0;
  }
}

/* ------------------------------------------------- 
End Buttons
------------------------------------------------- */
/* ------------------------------------------------- 
8.0 Gutenberg Conditionals
------------------------------------------------- */
/* Top of Page Blocks */
.entry-content > .first-block-negative-margin:first-child {
  margin-block-start: calc(-1 * var(--entry-top-margin));
}

html .entry-content div.wp-block-lazyblock-post-list {
  width: 100vw;
}
/* ------------------------------------------------- 
End Gutenberg Conditionals
------------------------------------------------- */
.blurbg {
  overflow: hidden;
}

.blurbg > img {
  filter: blur(4px);
  transform: scale(1.15);
}

html div.autorows-remove > div.flowio-layout-inner {
  grid-auto-rows: unset;
}

@media screen and (max-width: 46.875rem) {
  .simple-order-fix > div > div:nth-of-type(1) {
    order: 2;
  }
  .simple-order-fix > div > div:nth-of-type(2) {
    order: 1;
  }
}

.preheading {
  font-size: 0.875rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.25;
}

.img-box {
  display: flex;
  padding: 0.5rem;
  border: 1px solid black;
  border-bottom: none;
}

.text-lockup > div.flowio-layout-inner {
  --gap: 8rem;
  --fljustify: start;
  row-gap: 2rem;
}

.text-lockup .inner-flow:first-of-type {
  --flex-base: 30rem;
}

.text-lockup .inner-flow:last-of-type {
  max-width: max-content;
}

/* Accent Shapes */
.as,
.bs {
  position: relative;
}

.bs::before {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  width: 10%;
  aspect-ratio: 1;
  background: var(--bsColor, var(--yellow));
}

.as::after {
  content: "";
  display: block;
  position: absolute;
  z-index: 5;
  width: 10%;
  aspect-ratio: 1;
  background: var(--asColor, var(--yellow));
}

.bs-wide::before,
.as-wide::after {
  aspect-ratio: 2;
}

.bs-tall::before,
.as-wide::after {
  aspect-ratio: 0.5;
}

.bs-sm::before,
.as-sm::after {
  width: 5%;
}

.bs-xs::before,
.as-xs::after {
  width: 2.5%;
}

.bs-lg::before,
.as-lg::after {
  width: 15%;
}

.bs-xl::before,
.as-xl::after {
  width: 20%;
}

.bs-tl::before,
.as-tl::after {
  top: -1px;
  left: -1px;
}

.bs-tr::before,
.as-tr::after {
  top: -1px;
  right: -1px;
}

.bs-bl::before,
.as-bl::after {
  bottom: -1px;
  left: -1px;
}

.bs-br::before,
.as-br::after {
  bottom: -1px;
  right: -1px;
}

.as-yellow {
  --asColor: var(--yellow);
}

.as-green {
  --asColor: var(--green);
}

.as-blue {
  --asColor: var(--blue);
}

.as-orange {
  --asColor: var(--orange);
}

.as-purple {
  --asColor: var(--purple);
}

.as-stone {
  --asColor: var(--stone);
}

.as-black {
  --asColor: var(--black);
}

.as-white {
  --asColor: var(--white);
}

.bs-yellow {
  --bsColor: var(--yellow);
}

.bs-green {
  --bsColor: var(--green);
}

.bs-blue {
  --bsColor: var(--blue);
}

.bs-orange {
  --bsColor: var(--orange);
}

.bs-purple {
  --bsColor: var(--purple);
}

.bs-stone {
  --bsColor: var(--stone);
}

.bs-black {
  --bsColor: var(--black);
}

.bs-white {
  --bsColor: var(--white);
}

.bs-ss-t::before,
.as-ss-t::after {
  clip-path: circle(50% at 50% 0);
}

.bs-ss-b::before,
.as-ss-b::after {
  clip-path: circle(50% at 50% 100%);
}

.bs-ss-l::before,
.as-ss-l::after {
  clip-path: circle(50% at 0 50%);
}

.bs-ss-r::before,
.as-ss-r::after {
  clip-path: circle(50% at 100% 50%);
}

.bs-tr-tl::before,
.as-tr-tl::after {
  clip-path: polygon(100% 0, 0% 100%, 0 0);
}

.bs-tr-tr::before,
.as-tr-tr::after {
  clip-path: polygon(100% 100%, 100% 0, 0 0);
}

.bs-tr-bl::before,
.as-tr-bl::after {
  clip-path: polygon(100% 100%, 0% 100%, 0 0);
}

.bs-tr-br::before,
.as-tr-br::after {
  clip-path: polygon(100% 0, 0% 100%, 100% 100%);
}

/* qses */
.bs-qs-tl::before,
.as-qs-tl::after {
  clip-path: circle(99.9% at 0 0);
}

.bs-qs-tr::before,
.as-qs-tr::after {
  clip-path: circle(99.9% at 100% 0);
}

.bs-qs-bl::before,
.as-qs-bl::after {
  clip-path: circle(99.9% at 0 100%);
}

.bs-qs-br::before,
.as-qs-br::after {
  clip-path: circle(99.9% at 100% 100%);
}

/* transforms */
.bs-o-r::before {
  transform: translate(calc(var(--bsxOffset, 1) * 100%), 0);
}

.bs-o-l::before {
  transform: translate(calc(calc(var(--bsxOffset, 1) * 100%) * -1), 0);
}

.bs-o-t::before {
  transform: translate(0, calc(var(--bsyOffset, 1) * 100%));
}

.bs-o-b::before {
  transform: translate(0, calc(calc(var(--bsyOffset, 1) * 100%) * -1));
}

.bs-ox-sm {
  --bsxOffset: 0.5;
}

.bs-ox-xs {
  --bsxOffset: 0.25;
}

.bs-ox-lg {
  --bsxOffset: 1.5;
}

.bs-ox-xl {
  --bsxOffset: 2;
}

.bs-oy-sm {
  --bsyOffset: 0.5;
}

.bs-oy-xs {
  --bsyOffset: 0.25;
}

.bs-oy-lg {
  --bsyOffset: 1.5;
}

.bs-oy-xl {
  --bsyOffset: 2;
}

.as-o-r::after {
  transform: translate(calc(var(--asxOffset, 1) * 100%), 0);
}

.as-o-l::after {
  transform: translate(calc(calc(var(--asxOffset, 1) * 100%) * -1), 0);
}

.as-o-t::after {
  transform: translate(0, calc(var(--asyOffset, 1) * 100%));
}

.as-o-b::after {
  transform: translate(0, calc(calc(var(--asyOffset, 1) * 100%) * -1));
}

.as-ox-sm {
  --asxOffset: 0.5;
}

.as-ox-xs {
  --asxOffset: 0.25;
}

.as-ox-lg {
  --asxOffset: 1.5;
}

.as-ox-xl {
  --asxOffset: 2;
}

.as-oy-sm {
  --asyOffset: 0.5;
}

.as-oy-xs {
  --asyOffset: 0.25;
}

.as-oy-lg {
  --asyOffset: 1.5;
}

.as-oy-xl {
  --asyOffset: 2;
}

.podcast-layout > .flowio-layout-inner {
  --gap: 0;
}

.podcast-layout > .flowio-layout-inner > .inner-flow:first-child {
  --flex-child-max-width: 20rem;
  border: 1px solid;
  padding: 1.5rem;
}

.podcast-layout > .flowio-layout-inner > .inner-flow:nth-child(2) {
  border: 1px solid;
  padding: 1.5rem;
  position: relative;
  bottom: 1px;
  width: var(--content-width);
}

@media screen and (min-width: 30rem) {
  .podcast-layout > .flowio-layout-inner > .inner-flow:nth-child(2) {
    left: -1px;
    bottom: 0px;
  }
}

@media screen and (min-width: 52rem) {
  .podcast-layout > .flowio-layout-inner > .inner-flow:first-child {
    position: sticky;
    top: 6rem;
  }
}

.event-layout > .flowio-layout-inner {
  --gap: 0;
}

.event-layout > .flowio-layout-inner > .inner-flow:first-child {
  --flex-child-max-width: 25rem;
  border: 1px solid;
  padding: 1.5rem;
}

.event-layout > .flowio-layout-inner > .inner-flow:nth-child(2) {
  border: 1px solid;
  padding: 1.5rem;
  position: relative;
  bottom: 1px;
  width: var(--content-width);
}

@media screen and (min-width: 30rem) {
  .event-layout > .flowio-layout-inner > .inner-flow:nth-child(2) {
    left: -1px;
    bottom: 0px;
  }
}

@media screen and (min-width: 52rem) {
  .event-layout > .flowio-layout-inner > .inner-flow:first-child {
    position: sticky;
    top: 6rem;
  }
}

.wp-block-image figcaption {
  margin-top: 1rem;
  padding-left: 1rem;
  border-left: 4px solid var(--yellow);
  padding-top: 0.35rem;
}

.center-placer {
  place-items: center;
}

.center-placer > div.flow {
  height: fit-content;
}

.icons-block {
  width: fit-content;
  margin: auto;
}

.icon-block-icon {
  max-width: 5rem;
  width: 100%;
}

.icons-block.sm-icon .icon-block-icon {
  max-width: 3rem;
}

.imghover > img {
  transition: transform 0.5s ease-out;
}

.imghover:hover > img {
  transform: scale(1.06);
}

.post-password-form {
  height: calc(100vh - 112px - 76px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  /*     background: var(--yellow); */
  background: #000;
  margin-top: -4rem;
  max-width: 100%;
  width: 100%;
  background-image: url(http://innovationbay.com/wp-content/uploads/2023/03/CLDS1284-2.jpg);
  background-position: center;
  position: relative;
  background-blend-mode: luminosity;
}
.post-password-form:after {
  content: "";
  background: rgba(57, 46, 17, 0.48);
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: block;
  z-index: 1;
}
.post-password-form p {
  max-width: var(--w-xs);
  width: var(--content-width);
  z-index: 9;
  color: #fff;
}
.post-password-form p:last-child {
  display: grid;
  /* flex-direction: column; */
  gap: 1rem;
  grid-template-columns: 2fr 1fr;
  align-items: end;
}
.post-password-form p:last-child input[type="submit"] {
  height: 48.4px;
  text-align: center;
  display: block;
}
.small-video .youtube-block {
  width: auto !important;
  height: 100%;
  aspect-ratio: 1;
}
.small-video .youtube-block iframe {
  width: auto !important;
  height: 100%;
  display: block;
  margin: 0 auto;
}

/* newsletter */
.newsletter-grid {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8rem;
  row-gap: 2rem;
  justify-content: start;
}
.newsletter-grid div:first-of-type {
  --flex-base: 30rem;
  flex: 30rem 1 1;
}
.newsletter-grid div:last-of-type {
  max-width: max-content;
}


.snug {
	line-height: 1.2;
}