html, body {
    margin:0;
    padding:0;
    box-sizing: border-box;
    color: var(--black-100);
    -webkit-font-smoothing: antialiased;
    font-smooth: antialiased;
    overflow-x: clip;
    scroll-behavior: auto;

}

* {box-sizing: inherit;}


:root {
    /* colors */
    --black-70: rgba(0,0,0,0.7);
    --black-100: #000000;
    --black-200: #161616;
    --orange-100: #FF4200;
    --smoke-100: #646662;
    --smoke-200: #9C9F97;
    --smoke-300: #E0E2DE;
    --smoke-400: #F1F2F3;
    --smoke-500: #EAECE9;
    --white: #FFFFFF;

    /* rem sizes */
    --rem-05: 0.125rem;
    --rem-1: 0.25rem;
    --rem-1-5: 0.375rem;
    --rem-2: 0.5rem;
    --rem-2-5: 0.625rem;
    --rem-3: 0.75rem;
    --rem-3-5: 0.875rem;
    --rem-4: 1rem;
    --rem-5: 1.25rem;
    --rem-6: 1.5rem;
    --rem-7: 1.75rem;
    --rem-8: 2rem;
    --rem-9: 2.25rem;
    --rem-10: 2.5rem;
    --rem-11: 2.75rem;
    --rem-12: 3rem;
    --rem-13: 3.25rem;
    --rem-14: 3.5rem;
    --rem-15: 3.75rem;
    --rem-16: 4rem;


    /* pixel sizes */
    --px-1: 4px;
    --px-1-5: 0.375rem;
    --px-2: 8px;
    --px-3: 12px;
    --px-4: 16px;
    --px-5: 20px;
    --px-6: 24px;
    --px-7: 28px;
    --px-8: 32px;
    --px-9: 36px;
    --px-10: 40px;
    --px-11: 44px;
    --px-12: 48px;
    --px-13: 52px;
    --px-14: 56px;
    --px-15: 60px;
    --px-16: 64px;


    /* Padding sizes */
    --pd-1: 0.25rem;
    --pd-1-5: 0.375rem;
    --pd-2: 0.5rem;
    --pd-3: 0.75rem;
    --pd-4: 1rem;
    --pd-5: 1.25rem;
    --pd-6: 1.5rem;
    --pd-7: 1.75rem;
    --pd-8: 2rem;
    --pd-9: 2.25rem;
    --pd-10: 2.5rem;
    --pd-11: 2.75rem;
    --pd-12: 3rem;
    --pd-13: 3.25rem;
    --pd-14: 3.5rem;
    --pd-15: 3.75rem;
    --pd-16: 4rem;


    /* Section padding */
    --section-pd-1: var(--pd-1);
    --section-pd-1-5: var(--pd-1-5);
    --section-pd-2: var(--pd-2);
    --section-pd-3: var(--pd-3);
    --section-pd-4: var(--pd-4);
    --section-pd-5: var(--pd-5);
    --section-pd-6: var(--pd-6);
    --section-pd-7: var(--pd-7);
    --section-pd-8: var(--pd-8);
    --section-pd-9: var(--pd-9);
    --section-pd-10: var(--pd-10);
    --section-pd-11: var(--pd-11);
    --section-pd-12: var(--pd-12);
    --section-pd-13: var(--pd-13);
    --section-pd-14: var(--pd-14);
    --section-pd-15: var(--pd-15);
    --section-pd-16: var(--pd-16);

    /* Screen sizes */
    --xxs: 24rem; /* 384px */
    --xs: 32rem; /* 512px */
    --sm: 48rem; /* 768px */
    --med: 64rem; /* 1024px */
    --lg: 80rem; /* 1280px */
    --xl: 90rem; /* 1440px */ 
    --xxl: 100rem; /* 1600px */
    --xxxl: 120rem; /* 1920px */
}



@media only screen and (max-width: 1024px) {
    .tablet-none {
        display: none !important;
    }
    .tablet-flex {
        display: flex !important;
    }
}


/*---------------------------------------------- Utility Classes ----------------------------------------------------- */

/* Resets */

.text-center {
    text-align: center;
}

[data-parallax-image] {
    overflow: clip !important;
    position: relative !important;
}

[data-parallax-image] > * {
    scale: 1.3;
    translate: 0 -10%;
}

input, select, textarea {
    -webkit-appearance: none;
    -webkit-border-radius: 0;
    max-width: 100%;
    min-width: 0px;
    border-radius: 0;
    border: none;
    outline: none;
    background: none;
    padding: 0;
    margin: 0;
}

.e-con-boxed.e.con {
     
}

html, body {
    background-color: var(--smoke-500);
}
a {
    color: inherit;
    text-decoration: none;
}

.text-link {
    color: var(--smoke-200);
    transition: color 0.15s ease;
    line-height: 1.2
}

.text-link:hover {
    color: var(--white);
}

img {
    max-width: 100%;
    object-fit: cover;
    display: block;
}

details, summary {
    margin: 0; 
    padding: 0;
}

details > summary {
    list-style: none; /* Removes the default bullet/marker */
  }
  
  /* For modern browsers (Chrome, Edge, Firefox) */
  details > summary::marker {
    display: none;
  }
  
  /* For WebKit-based browsers (Safari) */
  details > summary::-webkit-details-marker {
    display: none;
  }

button {
    outline: 0;
    border: none;
    color: inherit;
    background: none;
    cursor: pointer;
}

/* Opacity */

.o-0 {
    opacity: 0;
}
.o-75 {
    opacity: 0.75;
}

.o-50 {
    opacity: 0.5;
}

.o-44 {
    opacity: 0.44;
}


/* Color */

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

/*---------------------------------------------- Layout Classes ----------------------------------------------------- */

.no-pointer-events {
    pointer-events: none;
}

.glitch-me {
    pointer-events: none;
    min-width: fit-content;
}

.static {
    position: static;
}

.slip-case--split-line {
    overflow-y: clip;
}

.nowrap {
    white-space: nowrap;
}

.slip-case--split-word {
    text-indent: 0;
}

.inline {
    display: inline;
}

.inline-flex {
    display: inline-flex;
}
.inline-grid {
    display: inline-grid;
}


.clip {
    overflow: clip;
}

.clip-y {
    overflow-y: clip;
}

.clip-x {
    overflow-x: clip;
}

.overflow-hidden {
    overflow: hidden;
}

.z-top {
    z-index: 9999;
}

.z-sub-top {
    z-index: 9998;
}

.grid {
    display: grid;
}


.block {
    display: block;
}

.flex {
    display: flex;
}

.hidden {
    display: none;
}

.flex-col {
    flex-direction: column;
}

.flex-row {
    flex-direction: row;
}


.flex-wrap {
    flex-wrap: wrap;
}

.flex-nowrap {
    flex-wrap: nowrap;
}

.flex-grow {
    flex-grow: 1;
}

.flex-shrink {
    flex-shrink: 1;
}

.flex-basis {
    flex-basis: 100%;
}

.flex-shrink-0 {
    flex-shrink: 0;
}

.flex-none {
    flex: none;
}

.items-center {
    align-items: center;
}

.items-start {
    align-items: flex-start;
}

.items-end {
    align-items: flex-end;
}

.items-stretch {
    align-items: stretch;
}

.items-baseline {
    align-items: baseline;
}

.content-center {
    justify-content: center;
}

.content-start {
    justify-content: flex-start;
}

.content-end {
    justify-content: flex-end;
}

.content-stretch {
    justify-content: stretch;
}

.content-baseline {
    justify-content: baseline;
}

.justify-center {
    justify-content: center;
}

.justify-start {
    justify-content: flex-start;
}

.justify-end {
    justify-content: flex-end;
}

.justify-stretch {
    justify-content: stretch;
}
.justify-around {
    justify-content: space-around;
}

.justify-between {
    justify-content: space-between;
}
.justify-baseline {
    justify-content: baseline;
}

.gap-1{
    gap: var(--rem-1);
}

.gap-1-5 {
    gap: var(--rem-1-5);
}

.gap-2 {
    gap:var(--rem-2);
}

.gap-3 {
    gap:var(--rem-3);
}

.gap-4 {
    gap:var(--rem-4);
}

.gap-5 {
    gap:var(--rem-5);
}

.gap-6 {
    gap:var(--rem-6);
}

.gap-7 {
    gap:var(--rem-7);
}

.gap-8 {
    gap:var(--rem-8);
}

.gap-9 {
    gap:var(--rem-9);
}

.gap-10 {
    gap:var(--rem-10);
}

.gap-11 {
    gap:var(--rem-11);
}

.gap-12 {
    gap:var(--rem-12);
}

.gap-13 {
    gap:var(--rem-13);
}

.gap-14 {
    gap:var(--rem-14);
}

.gap-15 {
    gap:var(--rem-15);
}

.gap-16 {
    gap:var(--rem-16);
}

.h-full-vh {
    height: 100vh;
}

.h-full-svh{
    height: 100svh;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}  

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

.max-h-full {
    max-height: 100%;
}

.min-w-full {
    min-width: 100%;
}

.min-h-full {
    min-height: 100%;
}

.w-auto {
    width: auto;
}

.h-auto {
    height: auto;
}

.w-50 {
    width: 50%;
}

.h-50 {
    height: 50%;
}

.w-50vw {
    width: 50vw;
}


.p-1 {
    padding: var(--rem-1); 
}
.p-1-5 {
    padding: var(--rem-1-5);
}
.p-2 {
    padding: var(--rem-2);
}
.p-3 {
    padding: var(--rem-3);
}
.p-4 {
    padding: var(--rem-4);
}
.p-5 {
    padding: var(--rem-5);
}
.p-6 {
    padding: var(--rem-6);
}   
.p-7 {
    padding: var(--rem-7);
}
.p-8 {
    padding: var(--rem-8);
}
.p-9 {
    padding: var(--rem-9);
}
.p-10 {
    padding: var(--rem-10);
}
.p-11 {
    padding: var(--rem-11);
}
.p-12 {
    padding: var(--rem-12);
}
.p-13 {
    padding: var(--rem-13);
}
.p-14 {
    padding: var(--rem-14);
}
.p-15 {
    padding: var(--rem-15);
}
.p-16 {
    padding: var(--rem-16);
}


.px-1 {
    padding-left: var(--rem-1);
    padding-right: var(--rem-1);
}
.px-1-5 {
    padding-left: var(--rem-1-5);
    padding-right: var(--rem-1-5);
}
.px-2 {
    padding-left: var(--rem-2);
    padding-right: var(--rem-2);
}
.px-3 {
    padding-left: var(--rem-3);
    padding-right: var(--rem-3);
}

.px-3-5 {
    padding-left: var(--rem-3-5);
    padding-right: var(--rem-3-5);
}

.px-4 {
    padding-left: var(--rem-4);
    padding-right: var(--rem-4);
}
.px-5 {
    padding-left: var(--rem-5);
    padding-right: var(--rem-5);
}
.px-6 {
    padding-left: var(--rem-6);
    padding-right: var(--rem-6);
}
.px-7 {
    padding-left: var(--rem-7);
    padding-right: var(--rem-7);
}
.px-8 {
    padding-left: var(--rem-8);
    padding-right: var(--rem-8);
}
.px-9 {
    padding-left: var(--rem-9);
    padding-right: var(--rem-9);
}
.px-10 {
    padding-left: var(--rem-10);
    padding-right: var(--rem-10);
}
.px-11 {
    padding-left: var(--rem-11);
    padding-right: var(--rem-11);
}
.px-12 {
    padding-left: var(--rem-12);
    padding-right: var(--rem-12);
}
.px-13 {
    padding-left: var(--rem-13);
    padding-right: var(--rem-13);
}
.px-14 {
    padding-left: var(--rem-14);
    padding-right: var(--rem-14);
}
.px-15 {
    padding-left: var(--rem-15);
    padding-right: var(--rem-15);
}
.px-16 {
    padding-left: var(--rem-16);
    padding-right: var(--rem-16);
}

.py-1 {
    padding-top: var(--rem-1);
    padding-bottom: var(--rem-1);
}
.py-1-5 {
    padding-top: var(--rem-1-5);
    padding-bottom: var(--rem-1-5);
}

.py-2 {
    padding-top: var(--rem-2);
    padding-bottom: var(--rem-2);  
}
.py-3 {
    padding-top: var(--rem-3);
    padding-bottom: var(--rem-3);
}
.py-3-5 {
    padding-top: var(--rem-3-5);
    padding-bottom: var(--rem-3-5);
}
.py-4 {
    padding-top: var(--rem-4);
    padding-bottom: var(--rem-4);
}

.py-5 {
    padding-top: var(--rem-5);
    padding-bottom: var(--rem-5);
}
.py-6 {
    padding-top: var(--rem-6);
    padding-bottom: var(--rem-6);
}
.py-7 {
    padding-top: var(--rem-7);
    padding-bottom: var(--rem-7);
}
.py-8 {
    padding-top: var(--rem-8);
    padding-bottom: var(--rem-8);
}
.py-9 {
    padding-top: var(--rem-9);
    padding-bottom: var(--rem-9);
}
.py-10 {
    padding-top: var(--rem-10);
    padding-bottom: var(--rem-10);
}
.py-11 {
    padding-top: var(--rem-11);
    padding-bottom: var(--rem-11);
}
.py-12 {
    padding-top: var(--rem-12);
    padding-bottom: var(--rem-12);
}
.py-13 {
    padding-top: var(--rem-13);
    padding-bottom: var(--rem-13);
}
.py-14 {
    padding-top: var(--rem-14);
    padding-bottom: var(--rem-14);
}
.py-15 {
    padding-top: var(--rem-15);
    padding-bottom: var(--rem-15);
}
.py-16 {
    padding-top: var(--rem-16);
    padding-bottom: var(--rem-16);
}
.pl-1 {
    padding-left: var(--rem-1);
}
.pl-1-5 {
    padding-left: var(--rem-1-5);
}
.pl-2 {
    padding-left: var(--rem-2);
}
.pl-3 {
    padding-left: var(--rem-3);
}
.pl-4 {
    padding-left: var(--rem-4);
}
.pl-5 {
    padding-left: var(--rem-5);
}
.pl-6 {
    padding-left: var(--rem-6);
}
.pl-7 {
    padding-left: var(--rem-7);
}
.pl-8 {
    padding-left: var(--rem-8);
}
.pl-9 {
    padding-left: var(--rem-9);
}
.pl-10 {
    padding-left: var(--rem-10);
}
.pl-11 {
    padding-left: var(--rem-11);
}
.pl-12 {
    padding-left: var(--rem-12);
}
.pl-13 {
    padding-left: var(--rem-13);
}
.pl-14 {
    padding-left: var(--rem-14);
}
.pl-15 {
    padding-left: var(--rem-15);
}
.pl-16 {
    padding-left: var(--rem-16);
}

.pr-1 {
    padding-right: var(--rem-1);
}
.pr-1-5 {
    padding-right: var(--rem-1-5);
}
.pr-2 {
    padding-right: var(--rem-2);
}
.pr-3 {
    padding-right: var(--rem-3);
}   
.pr-4 {
    padding-right: var(--rem-4);
}
.pr-5 {
    padding-right: var(--rem-5);
}
.pr-6 {
    padding-right: var(--rem-6);
}
.pr-7 {
    padding-right: var(--rem-7);
}
.pr-8 {
    padding-right: var(--rem-8);
}
.pr-9 {
    padding-right: var(--rem-9);
}
.pr-10 {
    padding-right: var(--rem-10);
}
.pr-11 {
    padding-right: var(--rem-11);
}
.pr-12 {
    padding-right: var(--rem-12);
}
.pr-13 {
    padding-right: var(--rem-13);
}
.pr-14 {
    padding-right: var(--rem-14);
}
.pr-15 {
    padding-right: var(--rem-15);
}
.pr-16 {
    padding-right: var(--rem-16);
}

.pb-1 {
    padding-bottom: var(--rem-1);
}
.pb-1-5 {
    padding-bottom: var(--rem-1-5);
}
.pb-2 {
    padding-bottom: var(--rem-2);
}
.pb-3 {
    padding-bottom: var(--rem-3);
}

.pb-4 {
    padding-bottom: var(--rem-4);
}
.pb-5 {
    padding-bottom: var(--rem-5);
}
.pb-6 {
    padding-bottom: var(--rem-6);
}
.pb-7 {
    padding-bottom: var(--rem-7);
}
.pb-8 {
    padding-bottom: var(--rem-8);
}
.pb-9 {
    padding-bottom: var(--rem-9);
}
.pb-10 {
    padding-bottom: var(--rem-10);
}
.pb-11 {
    padding-bottom: var(--rem-11);
}
.pb-12 {
    padding-bottom: var(--rem-12);
}
.pb-13 {
    padding-bottom: var(--rem-13);
}
.pb-14 {
    padding-bottom: var(--rem-14);
}
.pb-15 {
    padding-bottom: var(--rem-15);
}
.pb-16 {
    padding-bottom: var(--rem-16);
}

.pt-1 {
    padding-top: var(--rem-1);
}
.pt-1-5 {
    padding-top: var(--rem-1-5);
}
.pt-2 {
    padding-top: var(--rem-2);
}
.pt-3 {
    padding-top: var(--rem-3);
}
.pt-4 {
    padding-top: var(--rem-4);
}
.pt-5 {
    padding-top: var(--rem-5);
}
.pt-6 {
    padding-top: var(--rem-6);
}
.pt-7 {
    padding-top: var(--rem-7);
}
.pt-8 {
    padding-top: var(--rem-8);
}
.pt-9 {
    padding-top: var(--rem-9);
}
.pt-10 {
    padding-top: var(--rem-10);
}
.pt-11 {
    padding-top: var(--rem-11);
}
.pt-12 {
    padding-top: var(--rem-12);
}
.pt-13 {
    padding-top: var(--rem-13);
}
.pt-14 {
    padding-top: var(--rem-14);
}
.pt-15 {
    padding-top: var(--rem-15);
}
.pt-16 {
    padding-top: var(--rem-16);
}

/* make container */

.make-con {
    container-type: inline-size;
}

/* Typography */

.tight {
    letter-spacing: -0.033em;
}

.geist {
    font-family: 'Geist', sans-serif;
}

.geist-mono {
    font-family: 'Geist Mono', monospace;
    text-transform: uppercase;
    font-weight: 500;
}

.arizona {
    font-family: 'Arizona', serif;
}

.big-heading {
    line-height: 0.85;
}

.uppercase {
    text-transform: uppercase;
}

.ws-nowrap {
    white-space: nowrap;
}

p {
    line-height: 1.4;
}

.c-black-70 {
    color: var(--black-70);
}

.c-black-100 {
    color: var(--black-100);
}

.c-black-200 {
    color: var(--black-200);
}

.c-orange-100 {
    color: var(--orange-100);
}

.c-smoke-100 {
    color: var(--smoke-100);
}

.c-smoke-200 {
    color: var(--smoke-200);
}

.c-smoke-300 {
    color: var(--smoke-300);
}

.c-smoke-400 {
    color: var(--smoke-400);
}

.c-smoke-500 {
    color: var(--smoke-500);
}

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

.fw-100 {
    font-weight: 100;
}
.fw-200 {
    font-weight: 200;
}
.fw-300 {
    font-weight: 300;
}
.fw-400 {
    font-weight: 400;
}
.fw-500 {
    font-weight: 500;
}
.fw-600 {
    font-weight: 600;
}
.fw-700 {
    font-weight: 700;
}
.fw-800 {
    font-weight: 800;
}
.fw-900 {
    font-weight: 900;
}

.fs-0-75 {
    font-size: 0.75rem;
}


.fs-1 {
    font-size: var(--rem-1);   
}
.fs-2 {
    font-size: var(--rem-2);
}
.fs-3 {
    font-size: var(--rem-3);
}

.fs-3-5 {
    font-size: var(--rem-3-5);
}
.fs-4 {
    font-size: var(--rem-4);
}
.fs-5 {
    font-size: var(--rem-5);
}
.fs-6 {
    font-size: var(--rem-6);
}
.fs-7 {
    font-size: var(--rem-7);
}
.fs-8 {
    font-size: var(--rem-8);
}
.fs-9 {
    font-size: var(--rem-9);
}
.fs-10 {
    font-size: var(--rem-10);
}
.fs-11 {
    font-size: var(--rem-11);
}
.fs-12 {
    font-size: var(--rem-12);
}
.fs-13 {
    font-size: var(--rem-13);
}
.fs-14 {
    font-size: var(--rem-14);
}
.fs-15 {
    font-size: var(--rem-15);
}
.fs-16 {
    font-size: var(--rem-16);
}

.lh-0-8 {
    line-height: 0.8;
}

.lh-1 {
    line-height: 1;
}

.lh-1-2 {
    line-height: 1.2;
}

.lh-1-4 {
    line-height: 1.4;
}

.lh-1-5 {
    line-height: 1.5;
}

.lh-1-6 {
    line-height: 1.6;
}

.lh-1-7 {
    line-height: 1.7;
}

.lh-1-8 {
    line-height: 1.8;
}

.lh-1-9 {
    line-height: 1.9;
}

.lh-2 {
    line-height: 2;
}

/* Positioning */

.rel {
    position: relative;
}
.abs {
    position: absolute;
}
.fixed {
    position: fixed;
}
.sticky {
    position: sticky;
}

/* inset */
.top-0 {
    top: 0;
}

.top-100 {
    top: 100%;
}

.bottom-0 {
    bottom: 0;
}

.right-0 {
    right: 0;
}

.bottom-100 {
    bottom: 100%;
}

.left-0 {
    left: 0;
}

.e-con-boxed.e-con {
    padding: 0;
}


.e-con {
    --padding-inline-start:0;
    --padding-inline-end:0;
    --padding-block-start:0;
    --padding-block-end:0;
    
}

.e-con-inner {
    --content-width: 100%;
    --padding-top: 0;
    --padding-right: 0;
    --padding-bottom: 0;
    --padding-left: 0;
    --gap: 0;
}

.e-con>.e-con-inner {
    gap: 0 !important;
    padding:0 !important;
}

.e-con-boxed.e-con {
    --display: block !important;
}





/*---------------------------------------------- Component Classes ----------------------------------------------------- */

/* Lil' tick marks */


.tick {
    width: var(--rem-4);
    height: var(--rem-4);
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}
.tick .arm-v {
    width: 1px;
    height: 100%;
    position: absolute;
    background-color: currentColor;
}

.tick .arm-h {
    width: 100%;
    height: 1px;
    position: absolute;
    background-color: currentColor;
}


.tick.thick .arm-v {
    width: 1.5px;
}

.tick.thick .arm-h {
    height: 1.5px;
}
/* Buttons */

.pyro-button-arrow {
    width: var(--rem-6);
    height: var(--rem-6);
    border-radius: var(--rem-05);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--rem-4);
    font-weight: 350;
    line-height: 0; 
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    text-align: center;
    position: relative;
    /* padding-top: 3px; */
    /* padding-top: var(--rem-05); */
}


.pyro-button-arrow.orange {
    background-color: var(--orange-100);
    color: var(--white);
}

.pyro-button-arrow.black {
    background-color: var(--black-100);
    color: var(--white);
}

.pyro-button-arrow.outline.black {
    border: 1.5px solid var(--black-100);
    color: var(--black-100);
    background-color: transparent;
}
.pyro-button-arrow.outline.orange {
    border: 1.5px solid var(--orange-100);
    color: var(--orange-100);
    background-color: transparent;
}
.pyro-button-arrow.outline.smoke {
    border: 1.5px solid var(--smoke-200);
    color: var(--smoke-200);
    background-color: transparent;
}

button.pyro-button {
    border: none;
    outline: none;
    background: none;
}

.pyro-button-inner {
    font-size: var(--rem-4);
    display: flex; 
    align-items: center;
    padding: 0 var(--rem-2); 
    border-radius: var(--rem-05);
    font-family: 'Geist Mono', monospace;
    font-size: var(--rem-3);
    text-transform: uppercase;
    height: var(--rem-6);
}

.pyro-button .pyro-button-inner {
    border: 1px solid var(--smoke-200);
    /* color: var(--smoke-200); */
}

.pyro-button.no-border .pyro-button-inner {
    padding: 0;
    border: none;
    font-size: 0.875rem;
}

.pyro-button.white-text .pyro-button-inner {
    color: var(--white);
}

.pyro-button.black .pyro-button-inner {
    color: var(--black-100);
    border-color: var(--black-100);
}


/* Stack Heading Styles */

pyro-stack-heading {
    font-family: 'Geist Mono', monospace;
    font-size: var(--rem-3-5);
}

.stack-heading-bullet{
    width: var(--rem-2-5);
    height: var(--rem-2-5);
    color: inherit;
    background-color: currentColor;
}

pyro-stack .pyro-stack-long-text {
    font-size: var(--rem-6);
    line-height: 1.2;
    font-weight: 500;
    text-indent: 3em;
    text-wrap: pretty;
    /* color: var(--black-100); */
    letter-spacing: -0.025em;
    max-width: 100%;
}
pyro-stack .pyro-stack-long-text * {
    text-indent: 0;
}
pyro-stack .pyro-stack-long-text .slip-case--subheading--line-parent:nth-child(1) {
    padding-left: 3em;
}

.slip-case--subheading--line-parent {
    overflow: clip;
}

@media only screen and (max-width: 48rem) {
    pyro-stack .pyro-stack-long-text {
        font-size: 1.25rem;
    }

    pyro-stack-heading {
        font-size: 0.75rem;
    }
}




/* hamburger */
hamburger {

    color: black; 
}




/*---------------------------------------------- TESTING CSS ------------------------------------------------------------ */

.query-widget {
    display:flex;
    flex-direction: column;
    gap: 10px;
    align-items: stretch;
}

.query-widget .titan-card {
    background-color: #f0f0f0;
    padding: 20px;
    border-radius: 10px;
    display:flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
}

.query-widget h2 {
    color: blue;
}

.query-widget .good-guy {
    background-color: green;
    color: white;
    padding: 10px;
    border-radius: 5px;
}

.query-widget .bad-guy {
    background-color: red;
    color: white;
    padding: 10px;
    border-radius: 5px;
}


.picture-wrapper {
    position: relative;
    overflow: clip;
}


/* Transition Scrim */
#transition-scrim {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    background-color: var(--orange-100);
    
    scale: 1;
}


@keyframes loading-rotate {
    0% {
        rotate: 0deg;
    }
    100% {
        rotate: 360deg;
    }
}

@keyframes loading-opacity {
    0% {
        visibility: hidden;
    }
    25% {
        visibility: hidden;
    }

    50% {
        visibility: hidden;
    }


    100% {
        visibility: visible;
    }
}

@keyframes loading-opacity-delay {
    0% {
        visibility: hidden;
    }

    25% {
        visibility: hidden;
    }

    50% {
        visibility: visible;
    }


    100% {
        visibility: hidden;
    }
    
}

#loading-fx path:nth-child(1) {
    visibility: hidden;
    animation: loading-opacity 1.5s forwards steps(4) infinite;
}

#loading-fx path:nth-child(3) {
    visibility: hidden;
    animation: loading-opacity-delay 1.5s forwards steps(4) infinite;
}


#loading-fireworks {
    animation: loading-rotate 4s forwards steps(8) infinite;
}

#loading-drones {
    animation: loading-rotate 4s forwards steps(8) infinite;
}


/* HS Form styles */



form.hs-form.stacked {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;

}

@media only screen and (max-width: 48rem) {
    form.hs-form.stacked {
       display: flex;
       flex-direction: column;
       gap: 1.5rem;
    }
}

.hs-form-field {
    position: relative;
}

form.hs-form.stacked .hs-fieldtype-booleancheckbox {
    grid-column: span 2;
}

form.hs-form.stacked .hs_company.hs-form-field {
    grid-column: span 2;
}

form input:not([type="checkbox"], [type="submit"]), form select {
    border: none;
    outline: none;
    background-color: transparent;
    width: 100%;
    border-bottom: 1.5px solid currentColor;
    padding-bottom: 0.5rem;
}

form.hs-form.stacked .hs-input, 
form.hs-form.stacked .hs-input::placeholder,
form.hs-form.stacked select 
{
    font-family: 'Geist Mono', monospace;
    font-weight: 550;
    text-transform: uppercase;
    color: inherit;
    position: relative;
} 


form.hs-form.stacked input[type="radio"],
form.hs-form.stacked input[type="checkbox"] {
    all: unset;
    width: 1rem;
    height: 1rem;
    border: 1px solid currentColor; 
    outline: none;
    accent-color: var(--orange-100);
    border-radius: 0.25rem; 
    position: relative;
    flex: none;


}

.hs-form-booleancheckbox > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

form.hs-form.stacked input[type="radio"] {
    border-radius: 100%;
}



form.hs-form.stacked input[type="radio"]:checked::after {
    content: '';
    width: 60%;
    height: 60%;
    position: absolute;
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-color: var(--orange-100);
    border-radius: 100px;
}
form.hs-form.stacked input[type="checkbox"]:has(::after) {
    color: red !important;
}

form.hs-form.stacked input[type="checkbox"]:checked::after {
    content: "\2713";
    font-family: "Inter", monospace;
    width: 100%;
    height: 100%;
    position: absolute;
    display: flex;
    align-items:center;
    justify-content: center;
    color: var(--white);
    top: 50%;
    left: 50%;
    translate: -50% -50%;
    background-color: var(--orange-100);
    border-radius: 0.2rem;
    border: 1px solid var(--orange-100) !important;
}

.hs_event_date .hs-input {
    font-family: 'Geist Mono', monospace;
}


.hs_venue label  {
    display: none;
}
.hs_event_date label  {
    display: none;
}

.hs-error-msg {
    font-family: 'Geist Mono', monospace;
    font-weight: 550;
    text-transform: uppercase;
    color: var(--orange-100);
    font-size: 0.75rem;
    position: absolute;
    right: 0;
    top: calc(100% + 0.25rem);
}

.hs-fieldtype-booleancheckbox.field.hs-form-field {
    padding-top: 0.5rem;
    font-family: 'Geist Mono', monospace;
    font-size: 0.85rem;
    text-wrap: pretty;
    line-height: 1.2;
    text-transform: uppercase;
    font-weight: 550;
}

.hs-submit {
    display: flex;
    justify-content: flex-end;
    grid-column: span 2;
}

form .hs-submit input[type="submit"] {
    background: var(--orange-100);
    color: white;
    font-family: 'Geist Mono', monospace !important;
    font-weight: 550;
    text-transform: uppercase;
    padding: 0.5rem 1rem;
    border-radius: 0.25rem;
    border: none;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease;
}
form .hs-submit input[type="submit"]:hover {
    background-color: white;
    color: var(--orange-100);
}


form .hs_error_rollup {
    /* background: var(--orange-100); */
    border: 1px solid var(--orange-100);
    color: var(--orange-100) ;

    font-family: 'Geist Mono', monospace;
    font-weight: 550;
    text-transform: uppercase;
    grid-column: span 2;
    padding: 0.5rem 1rem !important;
    font-size: 0.85rem;
    text-align: center;
    border-radius: 0.25rem;
    outline: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}