/* Box sizing & spacing */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border: 0;
}
/* Document */
html {
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}
/* Body */
body {
  line-height: 1;
}
/* Lists */
ul,
ol {
  list-style: none;
  padding-left: 0;
  width: -moz-fit-content;
  width: fit-content;
}
li {
  width: -moz-fit-content;
  width: fit-content;
}
/* Links */
a {
  -webkit-text-decoration: none;
  text-decoration: none;
  color: inherit;
}
/* Media */
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
/* Forms */
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: none;
  cursor: pointer;
}
/* Tables */
table {
  border-collapse: collapse;
  border-spacing: 0;
}
.grecaptcha-badge {
    visibility: hidden !important;
}
html {
    scroll-behavior: smooth;
}
body {
    position: relative;
    overflow-x: hidden;
    scroll-behavior: smooth;
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-body);
}
.body-locked {
    overflow: hidden;
}
main {
    display: grid;
    overflow-x: hidden;
}
/* RESPONSIVE CLASSES */
body .desktop,
body .desktop-flex,
body .desktop-grid {
    display: none;
}
/* 1024px */
@media (min-width: 64rem) {

    body .desktop {
        display: block;
    }

    body .desktop-flex {
        display: flex;
    }

    body .desktop-grid {
        display: grid;
    }
    
    .mobile {
        display: none !important;
    }
    
}
/* 
Usage in HTML
----------------------
lg:block
lg:flex
lg:grid
lg:hidden 
*/
.lg\:block { display: none; }
.lg\:flex  { display: none; }
.lg\:grid  { display: none; }
@media (min-width: 64rem) {
  .lg\:block { display: block; }
  .lg\:flex  { display: flex; }
  .lg\:grid  { display: grid; }
  .lg\:hidden { display: none; }
}
/* ADDITIONAL */
img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
/* LOGO STYLES */
.logo {
    display: inline-flex;
}
.logo img {
    -o-object-fit: contain;
       object-fit: contain;
}
:root {
    --font-heading: 'Inter', Helvetica, sans-serif;
    --font-body: 'Inter', Helvetica, sans-serif;
    --font-accent: 'Inter', Helvetica, sans-serif;

    --text-regular: 0.88rem;
    @media (min-width: 35rem) {
    --text-regular: 1rem;
    }
}
/* GLOBAL FONT FAMILY */
h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-heading);
    line-height: 112%;
    text-transform: uppercase;
}
.headline__color {
    color: #bbbbbb;
    color: var(--clr-gray-200);
}
h1,
.h1,
.h1 .headline__cycle,
.h1 .headline__color {
    font-weight: 600;
    font-size: 3.25rem;
    line-height: 100%;
    letter-spacing: -1px;
}

h2,
.h2,
.h2 .headline__cycle,
.h2 .headline__color {
    font-weight: 600;
    font-size: 2.25rem;
    line-height: 100%;
    letter-spacing: -0.5px;
}
h3,
.h3,
.h3 .headline__cycle,
.h3 .headline__color {
    font-weight: 600;
    font-size: 1.25rem;
    line-height: 100%;
    letter-spacing: 0px;
}

@media (min-width: 56rem) {

h1,
.h1,
.h1 .headline__cycle,
.h1 .headline__color {
    font-weight: 600;
    font-size: 4.5rem;
    line-height: 100%;
    letter-spacing: -1px;
}

h2,
.h2,
.h2 .headline__cycle,
.h2 .headline__color {
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 100%;
    letter-spacing: -0.5px;
}
h3,
.h3,
.h3 .headline__cycle,
.h3 .headline__color {
    font-weight: 600;
    font-size: 1.75rem;
    line-height: 100%;
    letter-spacing: 0px;
}

}
.headline__cycle {
  display: block;
  transition: opacity 300ms ease, transform 300ms ease;
}
p,
a,
li,
span,
input,
details,
dialog,
summary,
label,
select,
textarea,
button,
datalist,
fieldset,
legend,
meter,
optgroup,
option,
output,
progress {
    font-size: 1rem;
    font-size: var(--text-regular);
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-body);
    line-height: 1.5rem;
    letter-spacing: 0.25px;
}
.content__title {
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-body);
    font-size: 1rem;
    font-size: var(--text-regular);
    font-weight: 400;
}
.content__headline {
    font-family: 'Inter', Helvetica, sans-serif;
    font-family: var(--font-heading);
}
.counter,
.counter span {
    font-size: 3rem;
    font-weight: 400;
    line-height: 100%;
}
.quote {
    font-weight: 400;
    font-size: 2rem;
    line-height: 112%;
}
.credit {
    font-weight: 700;
}
.link-list span,
footer h4 {
    font-weight: 700;
    font-size: 1rem;
}
.item-box--bold {
    font-size: 1rem;
    font-weight: 600;
}
.item-box__heading {
    font-size: 1.25rem;
}
.img-overlay__item-wrapper span {
    font-weight: 400;
    color: #fafafa;
    color: var(--clr-light);
}
/* Utility */
.--text-underline {
    -webkit-text-decoration: underline;
    text-decoration: underline;
}
.--text-uppercase {
    text-transform: uppercase;
}
.--text-italic {
    font-style: italic;
}
.--text-gray {
    color: #999999;
    color: var(--clr-gray-300);
}
/* CUSTOM PROPERTIES */
:root {
    /* COLORS */
    --clr-light: #fafafa;
    --clr-dark: #111111;

    --clr-bg-dark: #111111;
    --clr-bg-light: #fafafa;
    --clr-bg-color: #141414;

    --clr-text-1: #222222;
    --clr-text-2: #555555;

    /* COLOR SCALE EXAMPLE */
    --clr-gray-50: #e7e7e7; /* lightest shade */
    --clr-gray-100: #dddddd;
    --clr-gray-200: #bbbbbb;
    --clr-gray-300: #999999;
    --clr-gray-400: #777777; /* standard shade, typically used for primary elements */
    --clr-gray-500: #555555; /* primary color */
    --clr-gray-600: #444444;
    --clr-gray-700: #333333;
    --clr-gray-800: #222222;
    --clr-gray-900: #1f1f1f; /* darkest shade */

    --clr-success: #007e33;
    --clr-success-outline: #62af81;
    --clr-success-bg: #d9ece1;

    --clr-danger: #b61212;
    --clr-danger-outline: #bb2424;
    --clr-danger-bg: #f1d3d3;

    --clr-primary-400: #999999;
    --clr-primary-500: #777777;
    --clr-primary-600: #555555;

    --clr-secondary-400: ;
    --clr-secondary-500: ;
    --clr-secondary-600: ;

    --clr-tertiary-400: #555555;
    --clr-tertiary-500: ;
    --clr-tertiary-600: ;
    
    --clr-quaternary-400: ;
    --clr-quaternary-500: ;
    --clr-quaternary-600: ;

    /* MISCELLANEOUS */
    --soft-shadow: 0 0.75rem 1rem #eee;
    --gradient-generic: linear-gradient(
        45deg,
        #ddd,
        #444
    );
      --gradient-scroller: linear-gradient(
        90deg,
        #141414,
        #141414,
        rgba(20,20,20,0),
        rgba(20,20,20,0),
        #141414,
        #141414
    );

}
:root {

    /* 8PT GRID SPACING */
    --space4: 0.25rem;
    --space8: 0.5rem;
    --space12: 0.75rem;
    --space16: 1rem;
    --space24: 1.5rem;
    --space32: 2rem;
    --space40: 2.5rem;
    --space48: 3rem;
    --space56: 3.5rem;
    --space64: 4rem;
    --space72: 4.5rem;
    --space80: 5rem;
    --space88: 5.5rem;
    --space96: 6rem;
    --space104: 6.5rem; 
    --space112: 7rem;
    --space120: 7.5rem;
    --space128: 8rem;
    --space136: 8.5rem;
    --space144: 9rem;
    --space152: 9.5rem;
    --space160: 10rem;



    /* ROUNDED BORDERS */
    --rounded-corners: 0.5rem;
    --rounded: 25rem;
    --corners: 0rem;

}
body:has(> aside) main,
body:has(> aside) aside {
    outline: 4px solid red;
}
.aside,
aside {
    display: grid;
    z-index: 1;
}
body:has(> aside) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: center;
    padding-top: 6rem;
}
main:has(> .aside-layout-container) {
    display: grid;
}
body:has(> aside) main .container--fluid {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
body:has(> aside) main .section__container {
    align-items: start;
}
body:has(> aside) main section {
    padding-top: 4rem;
    padding-bottom: 4rem;
}
/* 1024px */
@media (min-width: 64rem) {

    body:has(> aside) {
        display: flex;
        flex-wrap: nowrap;
        padding-top: 0;
    }

    .aside,
    aside {
        flex: 0 0 max(200px, min(25vw, 400px));
        padding-top: 6rem;
        height: 100vh;
    }

    .aside-layout-container:has(> .aside) .main,
    body:has(> aside) main {
        flex: 1 1 0;
        padding-top: 6rem;
    }

    body:has(> aside) main .container--fluid {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }

    body:has(> aside) main .container--fluid {
        width: 100%;
    }

}
.aside-layout-container:has(> .aside) {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: space-between;
    /* padding-top: 6rem; */
    grid-row-gap: 1rem;
    row-gap: 1rem;
    grid-column-gap: 2rem;
    -moz-column-gap: 2rem;
         column-gap: 2rem;
}
/* 1024px */
@media (min-width: 64rem) {

    .aside-layout-container:has(> .aside) {
        display: flex;
        padding-top: 0;
    }

    .aside-layout-container .aside {
        flex: 0 0 max(240px, min(27vw, 400px));
        padding-top: 6rem;
        height: 100vh;
    }

}
/* fluid container size */
.container {
    min-width: 14rem;
    width: 90vw;
    max-width: 75rem;
    /* padding-inline: 2rem !important; */
    grid-column: 1 / -1;
    justify-self: center;
}
.aside-layout .container {
    width: 100%;
}
/* 1024px */
@media (min-width: 64rem) {

    .container {
        /* padding-inline: 4rem !important; */
    }

}
.section__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    row-gap: 4.5rem;
}
.cs .section__container {
    row-gap: 1rem;
    row-gap: var(--space16);
}
.aside__container {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}
.aside__container {
    width: 100%;
    grid-column: 1 / -1;
    padding-top: 4rem;
    padding-bottom: 4rem;
}
.columns__layout {
    display: flex;
    flex-direction: column; /* Stack by default */
    gap: 1rem;
    gap: var(--space16);    /* Spacing between columns */
    width: 100%;
}
.columns__layout.--3-col {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    gap: var(--space16);
    padding-top: 2rem;
}
.columns__layout .columns__layout:has(.vertical-list),
.columns__layout .columns__layout:has(.vertical-list--styled) {
    row-gap: 0.5rem;
    row-gap: var(--space8);
}
.columns__col,
.column--content-centered {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space24);
}
.columns__col--aside {
    position: relative;
    display: flex;
    flex-direction: column;
}
.column--content-centered,
.column--content-centered > div,
.column--content-centered .content-box > div {
    align-self: center;
    align-items: center;
    align-content: center;
    justify-content: center;
    text-align: center;
}
@media (min-width: 48rem) {
    .columns__layout .columns__layout:has(.vertical-list),
    .columns__layout .columns__layout:has(.vertical-list--styled) {
        flex-direction: row;
    }

    .accordion-wrapper .columns__col {
        max-width: 50%;
    }
}
@media (min-width: 64rem) {
    .columns__layout {
        flex-direction: row;   /* Horizontal layout */
        flex-wrap: wrap;       /* Allow items to wrap if needed */
        justify-content: space-between;
    }

    .columns__layout:has(.col--btn) {
        align-items: flex-end;
    }

    .columns__col {
        position: relative;
        flex: 1 1 280px;       /* Grow, shrink, and base width */
        min-width: 280px;      /* Prevent columns from collapsing too small */
        /* max-width: 560px;      Prevent columns from getting too big */
    }

    .cs__hero.columns__layout {
        display: grid;
        grid-template-columns: 1.25fr 0.75fr; 
    }

    .col--btn {
        flex-direction: row;
        justify-content: right;
    }

    .col--card {
        flex-direction: row;
        justify-content: right;
    }

    .col--lg {
        min-width: 560px;      /* Prevent columns from collapsing too small */
        max-width: 720px;      /* Prevent columns from getting too big */
    }

    .columns__col:only-child {
        max-width: 100%;
    }

    .columns__col:has(.img-container) {
        align-self: stretch;   /* image column stretches to row height (= content column height) */
    }

    .columns__col:has(.img-container--set-height) {
        align-self: auto;   /* undo stretch — image drives its own height */
    }

    .columns__layout.--reversed {
        flex-direction: row-reverse;
    }

    .column--content-centered {
        max-width: 50%;
    }

}
section {
    position: relative;
    display: grid;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
    grid-row-gap: 2rem;
    grid-row-gap: var(--space32);
    row-gap: 2rem;
    row-gap: var(--space32);
    background-color: #141414;
    background-color: var(--clr-bg-color);
    color: #fafafa;
    color: var(--clr-light);
}
.section--carousel,
.section--scroller {
    position: relative;
    display: grid;
    padding-top: 4rem;
    z-index: 1;
    grid-row-gap: 4rem;
    grid-row-gap: var(--space64);
    row-gap: 4rem;
    row-gap: var(--space64);
    background-color: #141414;
    background-color: var(--clr-bg-color);
    color: #fafafa;
    color: var(--clr-light);
}
section:has(> .container) {
    justify-content: center;
}
section:has(> .slideshow) {
    padding-top: 0 !important;
}
section:has(> .slideshow) {
    padding-bottom: 0;
}
.thin--slider {
    padding: 0 !important;
}
.thin--slider {
    position: relative;
    height: 70vh;
    width: 100%;
}
.thin--slider .slideshow {
    z-index: 1;
}
/* 1024px */
@media (min-width: 64rem) {

    .section--carousel,
    .section--scroller {
        padding-top: 8rem;
    }

    .thin--slider {
        padding: 0 !important;
    }

    .thin--slider {
        height: 60vh;
        width: 100%;
    }

}
/* created for scroller as it cannot function inside a normal section */
.section {
    position: relative;
    display: grid;
    justify-content: center;
    padding-top: 4rem;
    padding-bottom: 4rem;
    z-index: 1;
    grid-row-gap: 4rem;
    grid-row-gap: var(--space64);
    row-gap: 4rem;
    row-gap: var(--space64);
    scroll-margin-top: 4rem;
    scroll-margin-top: var(--space64);
    background-color: #141414;
    background-color: var(--clr-bg-color);
    color: #fafafa;
    color: var(--clr-light);
}
.section--thin {
    padding: 4rem 0 !important;
}
section .container:has(> .divider) section {
    padding: 0;
}
/* 1024px */
@media (min-width: 64rem) {
    
    section {
        grid-row-gap: 4rem;
        grid-row-gap: var(--space64);
        row-gap: 4rem;
        row-gap: var(--space64);
        padding-top: 5rem;
        padding-bottom: 5rem;
    }

    .section {
        padding-top: 5rem;
    }

}
.banner-image,
.banner-video {
    width: 100%;
    aspect-ratio: 2 / 1;
    overflow: hidden;
    padding: 0;
}
.banner-video {
    position: relative;

}
.banner-image {
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50),
        rgba(0,0,0,0.25)
        ), url('/assets/placeholders/placeholder-image.png');
    background-position: center;
    background-size: cover;
}
.banner-image img {
    position: absolute;
    -o-object-fit: cover;
       object-fit: cover;
    -o-object-position: center;
       object-position: center;
}
.--bg-video video,
.--bg-video iframe,
.banner-video video {
    position: absolute;
    height: 100%;
    width: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: -2;
    top: 0;
    left: 0;
}
/* 1024px */
@media (min-width: 64rem) {
    
    .banner-image,
    .banner-video {
        aspect-ratio: 4 / 1;
    }

}
.--bg-light {
    background-image: none;
    background-color: #fafafa;
    background-color: var(--clr-light);
    color: #111111;
    color: var(--clr-dark);
}
.--bg-color {
    background-image: none;
    background-color: #141414;
    background-color: var(--clr-bg-color);
    color: #fafafa;
    color: var(--clr-light);
}
.--bg-img,
.--bg-img--dark {
    color: #fafafa;
    color: var(--clr-light);
    /* background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.66),
        rgba(0,0,0,0.33)
        ), url('/assets/placeholders/placeholder-image.png'); */
    background-position: center;
    background-size: cover;
    padding-block: 0rem !important;
}
.--bg-img--light {
    color: #111111;
    color: var(--clr-dark);
    background-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0.66),
        rgba(255, 255, 255, 0.66)
        ), url('/assets/placeholders/placeholder-image.png');
    background-position: center;
    background-size: cover;
}
.grid--fluid {
    flex-direction: row !important;
    gap: 0.75rem !important;
    gap: var(--space12) !important;
}
.grid--fluid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
}
.grid--fluid .card--s {
    width: -moz-fit-content;
    width: fit-content;
}


#item-2-next {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-rem-m.png');
}
#item-3-next {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-scg-m.png');
}
#item-4-next {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-progress-m.png');
}
#item-1-next {
background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-et-m.png');
}

/* DYNAMIC GRID
- Columns grow/shrink fluidly with the viewport
- New column added when column width would exceed 480px
- Column removed when column width would fall below 240px
- Uses: repeat(auto-fit, minmax(240px, 1fr)) */
/* ─── Dynamic Grid ───────────────────────────────────────────────
    auto-fit   : collapses empty tracks so items stretch to fill row
    minmax     : each column is min 240px, max 1fr

    Column count behavior:
        container <  480px → 1 column  (480 = 2 × 240)
        container <  720px → 2 columns (720 = 3 × 240)
        container < 960px  → 3 columns (960 = 4 × 240)
        ...and so on

    Column width behavior:
        Grows from 240px up to just under the next breakpoint (~479px)
        then snaps to 2 columns and shrinks back toward 240px
──────────────────────────────────────────────────────────────── */
.grid--dynamic {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-gap: 1rem;
    grid-gap: var(--space16);
    gap: 1rem;
    gap: var(--space16);
    width: 100%;
}
.--even-columns {
   grid-template-columns: repeat(auto-fit, minmax(256px, 1fr));
}
/* .col--lg .grid--dynamic {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
} */
/* demo styles only */
.grid--dynamic__item {
    display: flex;
    align-items: start;
    /* min-height: 120px; */
    width: 100%;
}
.grid--dynamic__item .item-box-wrapper,
.grid--dynamic__item .item-box {
    width: 100%;
    max-width: none;
}
@media (min-width: 48rem) {
    .--even-columns {
        grid-template-columns: repeat(1, minmax(320px, 1fr));
    }
    .--bg-img {
        padding-block: 2rem !important;
    }
    
    #item-2-next {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-rem.png');
    }
    #item-3-next {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-scg.png');
    }
    #item-4-next {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-progress.png');
    }
    #item-1-next {
    background-image: linear-gradient(to bottom,rgba(0,0,0,0.0), rgba(0,0,0,0.0)), url('/assets/next-et.png');
    }
    
}
@media (min-width: 64rem) {
    .col--lg .grid--dynamic {
        grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    }

    .--even-columns {
        grid-template-columns: repeat(2, minmax(440px, 1fr));
    }
    .--bg-img {
        padding-block: 4rem !important;
    }
}
@media (min-width: 75rem) {
    .--even-columns {
        grid-template-columns: repeat(2, minmax(256px, 1fr));
    }
}
/* MASONRY GRID  */
.grid--masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-auto-rows: 1rem;
    grid-gap: 1rem;
    grid-gap: var(--space16);
    gap: 1rem;
    gap: var(--space16);
}
.grid--masonry__item {
    grid-row-end: span 1;
}
.grid--masonry__item a {
    display: block;
    width: 100%;
}
.grid--masonry__item img {
    width: 100%;
    height: auto;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
@media (max-width: 768px) {
    .grid--masonry {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .grid--masonry {
        grid-template-columns: 1fr;
    }
}
header .--content-centered,
.--content-centered {
    justify-content: center;
}
header .--content-right,
.--content-right {
    justify-content: right;
}
header .--content-left,
.--content-left {
    justify-content: left;
}
header .--content-spaced,
.--content-spaced {
    justify-content: space-between;
}
header .--content-even,
.--content-even {
    justify-content: space-evenly !important;
}
/* unfinished */
.--align-center {
    align-items: center;
}
.--align-top {
    align-items: start;
}
.--align-bottom {
    align-items: end;
}
.--align-right {
    align-items: end;
}
.--justify-right {
    justify-self: end;
}
.--center-to-left {
    text-align: center;
}
.--left-to-center {
    text-align: left;
}
/* 560px */
@media (min-width: 35rem) {

    .--left-to-center {
        text-align: center;
        align-items: center;
    }

}
/* 768px */
@media (min-width: 48rem) {

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

}
.headline-accent,
.headline-accent--s,
.list--accent {
    height: 0.1875rem;
    background: #555555;
    background: var(--clr-tertiary-400);
}
.headline-accent {
    width: 5rem;
}
.headline-accent--s {
    width: 2rem;
}
.list--accent {
    width: 100%;
}
.divider {
    height: 1px;
    width: 100%;
    background-color: #555555;
    background-color: var(--clr-tertiary-400);
}
.accordion-wrapper {
    display: flex;
    flex-direction: column;
}
.accordion-group {
    display: flex;
    flex-direction: column;
}
.accordion {
    padding-bottom: 0.5rem !important;
    padding-top: 1rem !important;
}
.accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.accordion__title {
    position: relative;
    display: inline;
}
.accordion__intro {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    cursor: pointer;
}
.accordion__arrow,
.accordion__plus {
    height: 1.5rem;
    width: 1.5rem;
    position: relative;
}
.accordion__arrow:before {
    content: '';
    position: absolute;
    border-left: 2px solid #777777;
    border-left: 2px solid var(--clr-gray-400);
    border-top: 2px solid #777777;
    border-top: 2px solid var(--clr-gray-400);
    width: 1rem;
    height: 1rem;
    transform: rotate(-135deg);
    right: 3px;
    top: -4px;
    transition-duration: 200ms;
}
.accordion__active .accordion__arrow:before {
    transform: rotate(-225deg);
    right: 8px;
    top: 3px;
}
.accordion__plus:before {
    content: '';
    position: absolute;
    background-color: #777777;
    background-color: var(--clr-gray-400);
    width: 1.5rem;
    height: 2px;
    right: 0px;
    top: 9px;
    transition-duration: 200ms;
    border: none;
}
.accordion__plus:after {
    content: '';
    position: absolute;
    background-color: #777777;
    background-color: var(--clr-gray-400);
    width: 2px;
    height: 1.5rem;
    right: 10px;
    top: -2px;
    transition-duration: 200ms;
}
.accordion__active .accordion__plus:after {
    opacity: 0;
}
.accordion img {
    width: 100%;
    aspect-ratio: 1.5/1;
}
.accordion__images {
    position: relative;
    background-image: linear-gradient(
        to bottom,
        rgba(0,0,0,0.2),
        rgba(0,0,0,0.2)
        ), url('/assets/placeholder-image.png');
        background-position: center;
        background-size: cover;
}
@media (max-width: 768px) {
    .accordion__images {
        display: none;
    }
}
.accordion__images img {
    opacity: 0;
    transition: 0.3s;
    aspect-ratio: 1.5/1;
}
.accordion__images img:not(:first-child) {
    position: absolute;
    left: 0;
    top: 0;
}
.accordion__images img.active {
    opacity: 1;
}
.accordion__content {
    max-height: 0;
    overflow: hidden;
    will-change: max-height;
    transition: all 0.25s ease-out;
    opacity: 0;
}
.accordion__content p {
    padding-bottom: 1rem;
}
@media (min-width: 768px) {

    .accordion__content .accordion__image {
        display: none;
    }
}
@media (max-width: 768px) {
    .accordion__content .accordion__image {
        display: block;
        margin-bottom: 1rem;
    }
}
.accordion__active .accordion__content {
    opacity: 1;
}
/* 768px */
@media (min-width: 48rem) {

    .accordion-wrapper:has(> .accordion__images) .accordion-group {
        width: 50%;
    }

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

}
.alert-wrapper {
    /* position: absolute; */
}
.alert {
    position: relative;
    display: inline-flex;
    padding: 1rem 1.5rem;
    /* width: 100%; */
    visibility: hidden;
    transition-delay: 300ms;
}
.alert span {
    line-height: 1.5rem;
}
.alert--1r {
    align-items: start;
    gap: 1rem;
    gap: var(--space16);
    justify-content: space-between;
}
.alert-header {
    display: flex;
    justify-content: space-between;
}
.alert--2r {
    flex-direction: column;
    gap: 0.5rem;
    gap: var(--space8);
}
.alert span:nth-child(1) {
    font-weight: 600;
}
.success {
    /* color: var(--clr-light); */
    border: 1px solid #62af81;
    border: 1px solid var(--clr-success-outline);
    background-color: #d9ece1;
    background-color: var(--clr-success-bg);
}
.danger {
    /* color: var(--clr-light); */
    border: 1px solid #bb2424;
    border: 1px solid var(--clr-danger-outline);
    background-color: #f1d3d3;
    background-color: var(--clr-danger-bg);
}
.alert-close {
  color: #111111;
  color: var(--clr-dark);
  font-size: 1.5rem;
  line-height: 1.5rem;
  cursor: pointer;
}
.alert--1r .alert-close {
    margin-left: 1rem;
    margin-left: var(--space16);
}
.alert--2r .alert-close {
    position: absolute;
    right: calc(0% + 1.5rem);
    right: calc(0% + var(--space24));
}
.alert--active {
    visibility: visible;
    animation: alertFadeIn 200ms ease-out forwards;
}
@keyframes alertFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
@keyframes alertFadeOut {
    to {
        opacity: 0;
    }
}
.alert:not(.alert--active) {
    animation: alertFadeOut 200ms ease-in forwards;
}
@media (max-width: 25rem) {

    .alert--1r {
        flex-wrap: wrap;
    }

    .alert-close {
        position: absolute;
        right: calc(0% + 1.5rem);
        right: calc(0% + var(--space24));
    }

}
/* layout */
/* ------------------------------------------ */
.before-after-image__wrapper {

}
.before-after-image {
  position: relative;
  width: 100%;
  height: 25rem;
  overflow: hidden;
  cursor: ew-resize;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.side {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
.b-side {
    background-color: #111;
}
.a-side {
    overflow: hidden;
    border-right: 2.5px solid #fff;
}
.b-side__bg,
.a-side__bg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
.b-side__bg {
    width: 100%;
}
/* components */
/* ------------------------------------------ */
.handle {
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 3px solid #fff;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: ew-resize;
  z-index: 10;
}
.handle svg {
  width: 26px;
  height: 26px;
}
.label {
  position: absolute;
  top: 10px;
  font-size: 11px;
  font-weight: 500;
  color: #fff;
  background: rgba(0, 0, 0, 0.45);
  padding: 2px 7px;
  border-radius: 4px;
  pointer-events: none;
}
.label--before {
  left: 10px;
}
.caption {
  font-size: 11px;
  margin-top: 5px;
}
/* 
Syntax and order for button classes:
class="btn btn--hierarchy-level btn--style hover-effect" 
*/
/* Base Styling */
button {
    position: relative;
    cursor: pointer;
    background-color: transparent;
}
.btn-wrapper {
    position: relative; 
    width: -moz-fit-content; 
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.btn {
    position: relative; 
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    padding: 1rem 2rem;
    border: 1px solid transparent;
    transition: 400ms;
    overflow: hidden;
}
.btn img {
    width: 0.88rem;
    height: 0.88rem;
    -o-object-fit: contain !important;
       object-fit: contain !important;
}
#backToTop {
    display: none;
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 7;
  }
/* Button Hierarchy */
/* 
btn--primary
btn--secondary
btn--tertiary 

These classes exist to define hierarchy for semantic purposes. They hold no visual styles.
*/
.btn--primary { /* No visual styles here */ }
.btn--secondary { /* No visual styles here */ }
.btn--tertiary { /* No visual styles here */ }
/* Button Styling */
.btn--default {
    border-radius: 0rem;
    border-radius: var(--corners);
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    background-color: #777777;
    background-color: var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--default2 {
    color: #111111 !important;
    color: var(--clr-dark) !important;
}
.btn--default2 {
    border-radius: 0rem;
    border-radius: var(--corners);
    border: 1px solid #fafafa;
    border: 1px solid var(--clr-light);
    background-color: #fafafa;
    background-color: var(--clr-light);
}
.btn--outline {
    border-radius: 0rem;
    border-radius: var(--corners);
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    color: #111111;
    color: var(--clr-dark);
}
.btn--outline2 {
    border-radius: 0rem;
    border-radius: var(--corners);
    border: 1px solid #fafafa;
    border: 1px solid var(--clr-light);
    color: #fafafa;
    color: var(--clr-light);
}
.btn--link {
    padding: 0;
    overflow: visible;
}
/* 
A ghost button in this template is a button with padding that is transparent and is revealed on hover with a fill or outline.
*/
.btn--ghost { /* No visual styles here */ }
/* Icon Button Styles */
/* 
Remember to include aria-labels when creating icon buttons. Icon buttons exist outside the typical button hierarchy.
*/
.btn--icon {
    height: -moz-fit-content !important;
    height: fit-content !important;
    width: -moz-fit-content !important;
    width: fit-content !important;
}
.btn--icon {
    border-radius: 5rem;
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
}
.btn--icon.icon--xs {
    padding: 0.75rem;
}
.btn--icon.icon--s {
    padding: 1.125rem;
}
.btn--icon.icon--s2 {
    padding: 1.5rem;
}
.btn--icon.icon--xs img {
    width: 1rem;
    height: 1rem;
}
.btn--icon.icon--s img {
    width: 1.5rem;
    height: 1.5rem;
}
.btn--icon.icon--s2 img {
    width: 1.75rem;
    height: 1.75rem;
}
.btn-slider .btn--icon {
    padding: 0.75rem;
}
/* arrows w/ hover effects */
.arrow-img--right { /* default */ }
.arrow-img--left { 
    transform: rotate(180deg); 
}
.arrow-img--up { 
    transform: rotate(-90deg); 
}
.arrow-img--down { 
    transform: rotate(90deg); 
}
.arrow,
.arrow-right {
    height: 1rem;
    width: 1rem;
}
.arrow::after {
    display: inline-block;
    position: absolute;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
}
.right::after {
    transform: rotate(-45deg);
    top: 40%;
    right: 45%;
}
.left::after {
    transform: rotate(135deg);
    top: 40%;
    right: 35%;
}
.up::after {
    transform: rotate(-135deg);
    top: 46%;
    right: 38%;
}
.down::after {
    transform: rotate(45deg);
    top: 36%;
    right: 38%;
}
.arrow-right::after {
    display: inline-block;
    position: absolute;
    top: 42%;
    content: "";
    border: solid #111111;
    border: solid var(--clr-dark);
    border-width: 0 1px 1px 0;
    padding: 4px;
    transition: transform 0.3s ease-out;
    transform: rotate(-45deg);
}
.btn:hover .arrow-right::after,
.btn:focus .arrow-right::after {
    transform: translateX(0.25rem) rotate(-45deg);
}
.arrow-right-2::after {
    display: inline-block;
    content: "➞";
    transition: transform 0.3s ease-out;
}
.btn:hover .arrow-right-2::after,
.btn:focus .arrow-right-2::after {
    transform: translateX(0.5rem);
}
.btn--icon .arrow-right::after {
    top: 40%;
    right: 42%;
}
.btn--link .arrow-right {
    margin-right: 0.75rem;
}
.btn--link .arrow-right::after {
    top: 25%;
}
.arrow-right-3-d,
.arrow-right-3 {
    position: relative;
    width: 1.25rem;
    transition-duration: 250ms;
    padding-bottom: 5px;
}
.arrow-right-3-d:after,
.arrow-right-3:after {
    border: none;
}
.btn:hover .arrow-right-3-d,
.btn:hover .arrow-right-3-d div:first-child,
.btn:hover .arrow-right-3,
.btn:hover .arrow-right-3 div:first-child,
.card:hover .card__body .arrow-right-3,
.card:hover .card__body .arrow-right-3 div:first-child {
    width: 1.75rem;
}
/* line */
.arrow-right-3 div:first-child {
    margin-top: 4px;
    width: 1.25rem;
    background: #fafafa;
    background: var(--clr-light);
    height: 2px;
    float: left;
    transition-duration: 250ms;
}
.btn:hover .arrow-right-3 div:first-child {
    background-color: #fafafa;
    background-color: var(--clr-light);
}
/* point */
.arrow-right-3 div:last-child {
    position: absolute;
    width: 0.66rem;
    height: 0.66rem;
    border-bottom: 2px solid #fafafa;
    border-bottom: 2px solid var(--clr-light);
    border-right: 2px solid #fafafa;
    border-right: 2px solid var(--clr-light);
    transform: rotate(-45deg);
    right: 5%;
}
.btn:hover .arrow-right-3 div:last-child {
    border-bottom: 2px solid #fafafa;
    border-bottom: 2px solid var(--clr-light);
    border-right: 2px solid #fafafa;
    border-right: 2px solid var(--clr-light);
}
/* line */
.arrow-right-3-d div:first-child {
    margin-top: 4px;
    width: 1.25rem;
    background: #111111;
    background: var(--clr-dark);
    height: 2px;
    float: left;
    transition-duration: 250ms;
}
.btn:hover .arrow-right-3-d div:first-child {
    background-color: #111111;
    background-color: var(--clr-dark);
}
/* point */
.arrow-right-3-d div:last-child {
    position: absolute;
    width: 0.66rem;
    height: 0.66rem;
    border-bottom: 2px solid #111111;
    border-bottom: 2px solid var(--clr-dark);
    border-right: 2px solid #111111;
    border-right: 2px solid var(--clr-dark);
    transform: rotate(-45deg);
    right: 5%;
}
.btn:hover .arrow-right-3-d div:last-child {
    border-bottom: 2px solid #111111;
    border-bottom: 2px solid var(--clr-dark);
    border-right: 2px solid #111111;
    border-right: 2px solid var(--clr-dark);
}
.arrow-tilt {
    width: 24px !important; 
    height: 24px !important;
}
.arrow-tilt-lg {
    width: 64px !important; 
    height: 64px !important;
}
.arrow-tilt-lg,
.arrow-tilt {
    transform: rotate(-45deg);
    transition: 300ms;
}
.grid--dynamic__item:hover .arrow-tilt-lg,
.grid--dynamic__item:hover .arrow-tilt,
.btn:hover .arrow-tilt-lg,
.btn:hover .arrow-tilt {
    transform: rotate(0deg);
}
.card {
    display: inline-flex;
    border: 1px solid #777777;
    border: 1px solid var(--clr-gray-400);
}
.card--padded {
    padding: 3rem;
    gap: 1rem;
    gap: var(--space16);
    border-radius: 0.5rem;
    border-radius: var(--rounded-corners);
}
.card--m {
    padding-top: 2rem;
    padding-bottom: 2rem;
    padding-left: 3rem;
    padding-right: 3rem;
    border-radius: 0.5rem;
    border-radius: var(--rounded-corners);
}
.card--s {
    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 12px;
    border-radius: 0.5rem;
    border-radius: var(--rounded-corners);

}
.card--bg {
    background-color: #fafafa;
    background-color: var(--clr-bg-light);
}
.card--horizontal {
    flex-direction: row;
}
.card--vertical {
    flex-direction: column;
}
.card__body {
    display: inline-flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--space16);
}
.card__header,
.card__body,
.card__footer {
    padding: 1rem;
}
.card--padded .card__header,
.card--padded .card__body,
.card--padded .card__footer {
    padding: 0;
}
.card__img {
    width: 100%;
    /* height: 100%; */
}
.card__img img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.card--filled {
    background-color: #fafafa;
    background-color: var(--clr-light);
    color: #111111;
    color: var(--clr-dark);
}
/* layout */
/* ------------------------------------------------- */
.carousel__wrapper {
    width: 100%;
    overflow: hidden;
    padding-bottom: 4rem;
}
/* 1024px */
@media (min-width: 64rem) {
    
    .carousel__wrapper {
        padding-bottom: 8rem;
    }

}
.swiper.carousel__track {
    scrollbar-width: none;
    padding-top: 2rem;
    padding-bottom: 2rem;
}
.carousel__track::-webkit-scrollbar { 
    display: none; 
}
.carousel__track .swiper-slide {
    width: auto;
}
/* buttons */
/* ------------------------------------------------- */
.carousel__btn {
    background: none;
    border: 1px solid currentColor;
    color: inherit;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1rem;
    line-height: 1;
    transition: background 200ms ease, color 200ms ease;
}
.carousel__btn:hover {
    background: #e7e7e7;
    background: var(--clr-gray-50);
    color: var(--bg-color);
}
.carousel__btn.swiper-button-disabled {
    opacity: 0.3;
    cursor: default;
}
/* cards */
/* ------------------------------------------------- */
.card--carousel {
    flex-shrink: 0;
    width: 20rem;
    height: 25rem;
    overflow: hidden;
    background: center center / cover no-repeat;
    position: relative;
    cursor: pointer;
    display: flex;
    align-items: flex-end;
    transition: width 400ms ease, box-shadow 200ms ease;
}
.card--reveal::after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,1));
}
.card--reveal .item-box-wrapper {
    position: relative;
    z-index: 1;
    color: #fff;
    width: 100%;
    overflow: hidden;
    transform: translateY(calc(100% - 1.5rem));
    transition: transform 400ms ease;
}
.card--reveal:hover .item-box-wrapper,
.card--reveal.active .item-box-wrapper {
    transform: translateY(0);
}
.card--reveal .item-box-wrapper span {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.4s ease 0.2s, transform 0.4s ease 0.2s;
}
.card--reveal:hover .item-box-wrapper span,
.card--reveal.active .item-box-wrapper span {
    opacity: 1;
    transform: translateY(0);
}
@media (max-width: 48rem) {
    .card--carousel {
        width: 13rem;
    }
}
/* item box */
/* item boxes are meant for small pieces of content, max-width: 360px  */
.item-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
.grid--dynamic__item .item-box-wrapper {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
}
footer .item-box {
    white-space: nowrap;
}
.item-box {
    display: flex;
    max-width: 22.5rem;
}
.grid-col-3--grow .item-box,
.fluid-grid--grow .item-box {
    max-width: none;
}
.item-box img {
    -o-object-fit: contain;
       object-fit: contain;
}
.item-box-1r {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    gap: var(--space8);
}
.item-box-2r {
    flex-direction: row;
    align-items: start;
    gap: 1rem;
    gap: var(--space16);
}
.item-box-2r div,
.item-box-3r div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--space16);
}
header .item-box-2r div {
    gap: 0.25rem;
    gap: var(--space4);
}
.item-box-3r {
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space24);
}
/* .item-box--centered {
    align-items: center;
    text-align: center;
} */
/* content box */
/* content boxes are meant for larger pieces of content such as the text content in sections,  max-width: ~560px */
.content-box-wrapper {
    width: -moz-fit-content;
    width: fit-content;
}
.content-box {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    gap: var(--space32);
}
.cs__hero .content-box > div {
    max-width: none;
}
.content-box img {
    -o-object-fit: cover;
       object-fit: cover;
}
.content-box > div {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    gap: var(--space16);
    max-width: 35rem;
}
/* 
.content-box--centered {
    align-items: center;
    text-align: center;
} */
.item-box .star-rating--inline {
    display: flex;
    flex-direction: row;
    gap: 0.5rem;
    gap: var(--space8);
}
.counter-wrapper {
    display: flex;
    flex-direction: column;
    align-items: start;
    gap: 0.5rem;
    gap: var(--space8);
    width: -moz-fit-content;
    width: fit-content;
}
.counter-wrapper--centered {
    align-items: center;
}
.dropdown {
    position: relative;
}
.dropdown__menu {
    list-style: none;
}
.dropdown::after,
.dropdown__submenu::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 30%;
    transition: 100ms;
}
.dropdown__submenu::after {
    margin-right: 1rem;

}
.dropdown:hover::after,
.dropdown__submenu:hover::after {
    top: 40%;
}
.dropdown__item {
    padding: 1.125rem 1rem;
    padding-left: 0rem;
}
.dropdown__menu,
.dropdown__submenu .dropdown__menu {
    opacity: 0;
    position: absolute;
    display: none;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 10rem;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
}
.dropdown__submenu {
    position: relative;
}
.dropdown__submenu .dropdown__menu {
    position: absolute;
    transform: translateX(99%);
    top: 0%;
}
.dropdown__menu,
.dropdown__item {
    border-radius: 0.5rem;
}
.dropdown__menu .dropdown__item {
    display: block;
    padding: 0.75rem 1rem;
    transition-duration: 250ms;
    width: 10rem;
}
.dropdown__menu .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
.dropdown:hover > .dropdown__menu,
.dropdown:focus-within > .dropdown__menu,
.dropdown__submenu:hover > .dropdown__menu,
.dropdown__submenu:focus-within > .dropdown__menu  {
    display: grid;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
@keyframes dropdownopen  {
    from {opacity: 0}
    to {opacity: 1}
  }
/* mega menu */
.dropdown-mega,
.dropdown__mega-sub-nav {
    list-style: none;
}
.dropdown-mega {
    position: static !important;
}
.dropdown-mega__toggle {
    position: relative;
}
.dropdown-mega__toggle::after {
    position: absolute;
    content: '';
    height: 0.4rem;
    width: 0.4rem;
    border-bottom: 1px solid #111111;
    border-bottom: 1px solid var(--clr-dark);
    border-right: 1px solid #111111;
    border-right: 1px solid var(--clr-dark);
    transform: rotate(45deg);
    margin-left: 0.5rem;
    right: 0%;
    top: 43%;
    transition: 100ms;
}
.dropdown-mega__toggle:hover::after {
    top: 45%;
}
.dropdown__mega-menu {
    opacity: 0;
    position: absolute;
    display: none;
    justify-content: center;
    background-color: #fafafa;
    background-color: var(--clr-light);
    width: 100%;
    left: 0;
    z-index: 11;
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
    transition: 250ms;
    transform: translateY(1rem);
    padding: 2rem;
}
.dropdown__mega-content {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;    /* adjust on preference */
    flex-wrap: wrap;
    row-gap: 2rem;
}
.dropdown-mega:hover > .dropdown__mega-menu,
.dropdown-mega:focus-within > .dropdown__mega-menu {
    display: flex;
    opacity: 1;
    animation: dropdownopen;
    animation-duration: 250ms ;
}
.dropdown__mega-sub-nav {
    display: flex;
    flex-direction: column;
}
.dropdown__mega-sub-title {
    color: #111111;
    color: var(--clr-dark);
    font-weight: 600;
    padding: 0.75rem 1rem;
    padding-left: 0.65rem;
}
.dropdown__mega-sub-nav .dropdown__item {
    display: block;
    padding: 0.5rem 0.75rem;
    transition-duration: 250ms;
    min-width: 12rem;
}
.dropdown__mega-sub-nav .dropdown__item:hover {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
}
.dropdown__mega-sub-title,
.dropdown__mega-menu .dropdown__item {
    font-size: 0.875rem;
}
/* 1200px */
@media (min-width: 75rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 13rem;
    }
}
/* 1440px */
@media (min-width: 90rem) {

    .dropdown__mega-sub-nav .dropdown__item {
        min-width: 14rem;
    }
}
/* input[type="range"] */
select,
input,
textarea {
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    background-color: transparent;
    padding: 0.5rem;
    transition: 250ms;
    color: #111111;
    color: var(--clr-dark);
}
.input--textfield {
    -moz-appearance: textfield;
}
.input--textfield::-webkit-outer-spin-button,
.input--textfield::-webkit-inner-spin-button  {
    -webkit-appearance: none;
}
input::-moz-placeholder, textarea::-moz-placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
input::placeholder,
textarea::placeholder {
    color: #777777;
    color: var(--clr-gray-400);
}
textarea {
    width: 100%;
    height: 7.25rem;
    resize: none;
}
input[type="date"] {
    cursor: text;
}
select {
    cursor: pointer;
}
.form-supergroup {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    gap: var(--space32);
}
.form-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space24);
}
/* FORM GRID  */
/* ----------------------------------------- */
.form--inline {
    width: 100% !important;
}
.form--inline {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    gap: var(--space16);
    align-items: start;
    /* max-width: 25rem; */
}
.form--content-centered {
    align-items: center;
}
.form--inline .btn,
.form--inline input {
    height: 3rem;
}
.form--inline input {
    padding-left: 1rem;
    padding-right: 1rem;
    width: 100%;
}
.form--inline .input-group {
    width: 100%;
}
@media (max-width: 27.5rem) {
    .form--inline {
        flex-direction: column;
    }
}
.form--block,
.form__columns {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 1.5rem;
    gap: var(--space24);
}
.form__col {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space24);
}
@media (min-width: 35rem) {
    .form__columns {
        flex-direction: row;   /* Horizontal layout */
        flex-wrap: nowrap;
        justify-content: space-between;
        align-items: flex-start;
    }

    .form__col {
        position: relative;
        flex: 1 1 240px;       /* Grow, shrink, and base width */
        min-width: 240px;      /* Prevent columns from collapsing too small */
        max-width: 880px;      /* Prevent columns from getting too big */
    }

    .form__col:only-child {
        max-width: 100%;
    }

}
/* ----------------------------------------- */
.input-group,
.option-group {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    gap: var(--space8);
}
.check-option,
.radio-option {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    gap: var(--space8);
}
/* floating label */
.input-group--label-float,
.input-group--label-float-2 {
    position: relative;
}
.input-group--label-float input,
.input-group--label-float-2 input {
    width: 100%;
    color: #111111;
    color: var(--clr-dark);
    border: none;
    outline: none;
    background: transparent;
}
.input-group--label-float input {
    border-bottom: 1px solid #999999;
    border-bottom: 1px solid var(--clr-gray-300);
    padding: 0.5rem 0;
}
.input-group--label-float label,
.input-group--label-float-2 label {
    position: absolute;
    font-size: 1rem;
    color: #999999;
    color: var(--clr-gray-300);
    pointer-events: none;
    transition: 500ms;
}
.input-group--label-float label {
    top: 0;
    left: 0;
    padding: 0.5rem 0;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label,
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    color: #999999;
    color: var(--clr-gray-300);
    font-size: 0.75rem;
}
.input-group--label-float input:focus ~ label,
.input-group--label-float input:valid ~ label {
    top: -1.25rem;
    left: 0;
}
.input-group--label-float-2 input {
    border: 1px solid #999999;
    border: 1px solid var(--clr-gray-300);
    padding: 0.5rem;
}
.input-group--label-float-2 label {
    top: 0.5rem;
    left: 0.25rem;
    padding: 0rem 0.325rem;
    background-color: #fff;
}
.input-group--label-float-2 input:focus ~ label,
.input-group--label-float-2 input:valid ~ label {
    top: -0.5rem;
    left: 0.5rem;
}
/* custom radio button */
.custom-radio input[type="radio"] {
    box-sizing: border-box;
    width: 14px;
    height: 14px;
    padding: 0;
    border: 1px solid #111111;
    border: 1px solid var(--clr-dark);
    border-radius: 50%;
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    background-color: transparent;
    outline: none;
}
.custom-radio input[type="radio"]:checked {
    border-color: #111111;
    border-color: var(--clr-dark);
    background-color: #111111;
    background-color: var(--clr-dark);
    background-clip: content-box;
    padding: 2px;
    background-image: radial-gradient(
      circle,
      #111111 0%,
      #111111 50%,
      transparent 60%,
      transparent 100%
    );
    background-image: radial-gradient(
      circle,
      var(--clr-dark) 0%,
      var(--clr-dark) 50%,
      transparent 60%,
      transparent 100%
    );
}
/* switch toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 2.5rem;
    height: 1.25rem;
}
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.toggle-switch__slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: transparent;
    border: 2px solid #111111;
    border: 2px solid var(--clr-dark);
    transition: 400ms;
    border-radius: 2rem;
}
.toggle-switch__slider:before {
    position: absolute;
    content: "";
    height: 1rem;
    width: 1rem;
    left: 0;
    bottom: 0;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    transition: 400ms;
    border-radius: 50%;
}
input:checked + .toggle-switch__slider {
    background-color: #111111;
    background-color: var(--clr-dark);
}
input:checked + .toggle-switch__slider:before {
    transform: translateX(1.175rem);
}
/* pill style options */
.option-group--pill {
    display: flex;
    flex-direction: row;
    padding: 0.25rem;
    gap: 0.25rem;
    gap: var(--space4);
    border: 1px solid #bbbbbb;
    border: 1px solid var(--clr-gray-200);
    width: -moz-fit-content;
    width: fit-content;
}
.pill-option label { 
    display: inline-block; 
    padding: 0.5rem 1rem;
}
.pill-option input[type="radio"],
.pill-option input[type="checkbox"] { 
    display: none; 
}
.pill-option input[type="radio"]:checked + label,
.pill-option input[type="checkbox"]:checked + label  { 
    border: none;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
}
/* range inputs */
.range-number-input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 1rem 0;
    gap: 1rem;
    gap: var(--space16);
    max-width: 40rem;
}
.range-number-input__field {
    display: flex;
    align-items: center;
}
.range-number-input__field input {
    width: 100%;
    margin-left: 0.75rem;
    text-align: center;
}
.range-slider {
    height: 0.25rem;
    position: relative;
    background: #dddddd;
    background: var(--clr-gray-100);
    max-width: 40rem;

}
.range-slider__progress {
    height: 100%;
    left: 25%;
    right: 25%;
    position: absolute;
    background: #111111;
    background: var(--clr-dark);
}
.range-input {
    position: relative;
}
.range-input--1pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -20px;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
  }
.range-input--2pt input {
    position: absolute;
    width: 100%;
    height: 4px;
    top: -28px;
    background: none;
    pointer-events: none;
    cursor: grab;
    -webkit-appearance: none;
    -moz-appearance: none;
    border: none;
    padding: 0;
    max-width: 40rem;
}
input[type="range"]::-webkit-slider-thumb {
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -webkit-appearance: none;
}
input[type="range"]::-moz-range-thumb {
    height: 1rem;
    width: 1rem;
    border: none;
    border-radius: 50%;
    background: #111111;
    background: var(--clr-dark);
    pointer-events: auto;
    -moz-appearance: none;
}
/* multi-step form styles */
.form-steps {
    display: inline-flex;
    flex-direction: row;
    gap: 1rem;
    gap: var(--space16); 
}
.step-wrapper {
    display: flex;
    gap: 0.5rem;
    gap: var(--space8);
    align-items: center;
}
/* required for each instance */
#step-1,
#step-2,
#step-3 {
    position: relative;
}
.step {
    position: relative;
    height: 1.25rem;
    width: 1.25rem;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    color: #111111;
    color: var(--clr-dark);
    border: none;
    border-radius: 50%;
    display: inline-block;
    z-index: 2;
}
.active-step span:last-child {
    color: #777777;
    color: var(--clr-gray-400);
}
.active-step .step {
    background-color: #bbbbbb;
    background-color: var(--clr-gray-200);
    border: 0.25rem solid #777777;
    border: 0.25rem solid var(--clr-gray-400);
}
/* REWORKED */
/* -------------------------------------------- */
.form--1i {
    display: flex;
    /* flex-direction: column; */
    flex-wrap: wrap;
    gap: 1rem;
    align-items: start;
}
.form--1i .btn,
.form--1i input {
    height: 3rem;
}
.form--1i input {
    padding-left: 1rem;
    padding-right: 1rem;
}
.form--1i input,
.form--1i .input-group {
    width: 100%;
    max-width: 22.5rem;
}
.icon--xs,
.img--xs {
    width: 1rem;
    height: 1rem;
    aspect-ratio: 1/1;
}
.icon--s,
.img--s {
    width: 1.5rem;
    height: 1.5rem;
    aspect-ratio: 1/1;
}
.icon--m,
.img--m {
    width: 2.5rem;
    height: 2.5rem;
    aspect-ratio: 1/1;
}
.icon--lg,
.img--lg {
    width: 3.5rem;
    height: 3.5rem;
    aspect-ratio: 1/1;

}
.icon--xl,
.img--xl {
    width: 5rem;
    height: 5rem;
    aspect-ratio: 1/1;
}
/* IFRAME STYLES */
iframe {
    width: 100%;
    height: 30rem;
}
footer iframe {
    width: 100%; 
    height: 19rem;
}
.img-container {
    width: 100%;
    display: flex;          /* inline-flex won't fill column width */  
    position: relative;
}
.img-wrapper {
    width: 100%;
    max-height: 400px;      /* your stacked cap — adjust as needed */  
    overflow: hidden;
    aspect-ratio: unset;
    border-radius: 0.5rem;
    border-radius: var(--rounded-corners);
}
.scroller .img-wrapper {
    border-radius: 0;
}
.img-wrapper img {
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    display: block;
}
/* img wrappers w/ overlays */
.grid--dynamic__item .img-wrapper {
    position: relative;
    display: inline-flex;
    max-height: none;
    /* change aspect ratio as necessary */
    aspect-ratio: 1.5/1;
}
.img-wrapper .img-overlay {
    position: absolute;
    display: grid;
    z-index: 1; 
    height: 100%;
    width: 100%;
    background: linear-gradient(
        to bottom,
        rgba(17,17,17,0.8),
        rgba(17,17,17,0.8));
    align-items: end;
    padding: 0.75rem 1.25rem;
    transition: 400ms;
    overflow: hidden;
    transform: translateY(100%);
}
.img-overlay__item-wrapper {
    position: absolute;
    display: grid;
    justify-content: left;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
    padding: 1.5rem;
}
.img-wrapper:hover .img-overlay {
    transform: translateY(0%);
}
.img-wrapper .img-overlay__item-wrapper .item-box {
    transform: translateY(85%);
    transition: 400ms;
}
.img-overlay__item-wrapper .img--s img,
.img-wrapper .img-overlay__item-wrapper .item-box span:nth-child(2) {
    opacity: 0;
    transition: 400ms;
}
.img-wrapper:hover .img-overlay__item-wrapper .img--s img,
.img-wrapper:hover .img-overlay__item-wrapper .item-box span:nth-child(2) {
    opacity: 1;
}
.img-wrapper:hover .img-overlay__item-wrapper .item-box {
    transform: translateY(0%);
}
/* clickable image hover effect */
.img-clickable {
    overflow: hidden;
}
.img-clickable img {
    transition-duration: 250ms;
}
.img-clickable:hover img {
    transform: scale(1.1);
}
@media (min-width: 64rem) {

    /* --- variant: matches content-box height --- */
    .col--img .img-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .col--img .img-wrapper {
        height: 100%;
        max-height: none;
    }

    .img-container--set-height {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        height: auto;
    }

    .img-container--set-height .img-wrapper {
        height: 400px;      /* adjust as needed */
    }

}
/* Swiper Lightbox */
.swiper-slide {
    display: grid !important;
}
.swiper-slide {
    align-self: center;
}
.swiper-lightbox img {
    justify-self: center;
}
/* Grid thumbnails */
.gallery-thumb {
  position: relative;
  display: inline-block;
  cursor: pointer;
  width: 100%;
  overflow: hidden;
}
.gallery-thumb img {
  width: 100%;
  aspect-ratio: 1.5/1;
  -o-object-fit: cover;
     object-fit: cover;
}
.gallery-image__overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 2rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* Swiper Lightbox overlay */
.swiper-lightbox {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.75);
  display: flex;
  visibility: hidden;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
  z-index: 999;
}
.swiper-lightbox.active {
  visibility: visible;
}
.swiper-lightbox img {
  max-width: 90vw;
  max-height: 90vh;
  -o-object-fit: contain;
     object-fit: contain;
}
/* Close button */
.swiper-lightbox-close {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  font-size: 2.5rem;
  color: white;
  cursor: pointer;
  z-index: 10000;
  transition: transform 0.2s ease;
}
.swiper-lightbox-close:hover {
  transform: scale(1.2);
}
.swiper-button-next,
.swiper-button-prev {
  color: #fff !important;
}
.swiper-button-next,
.swiper-button-prev {         /* arrow color */
  width: 50px;            /* button hit area */
  height: 50px;
  padding: 2rem;
  /* border-radius: 50%; */
  transition: background 0.3s ease;
}
.swiper-button-next {
 padding-left: 2.25rem;
 padding-right: 1.75rem;
}
.swiper-button-prev {
  padding-left: 1.75rem;
  padding-right: 2.25rem;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
  background: rgba(0,0,0,0.5);
}
/* Move arrows closer to the center */
.swiper-button-prev {
  left: 20px;
}
.swiper-button-next {
  right: 20px;
}
/* Style dots */
.swiper-pagination-bullet {
  background: #bbb;     /* inactive color */
  opacity: 1;
}
.swiper-pagination-bullet-active {
  background: #fff !important;
}
.swiper-pagination-bullet-active {  /* active color */
  transform: scale(1.3);
}
.vertical-list {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--space4);
}
.vertical-list--styled {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    gap: var(--space4);
    padding-left: 1rem;
    list-style: disc;
}
.link-list,
.link-list ul {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    gap: var(--space8);
}
.link-list:has(.list--accent) {
    gap: 1rem;
    gap: var(--space16);
}
.sm-list {
    display: flex;
    gap: 1rem;
    gap: var(--space16);
}
.sm-list--vertical {
    display: flex;
    flex-direction: column;
}
.sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 2rem */
    height: 1.5rem;
    width: 1.5rem;
    -o-object-fit: contain;
       object-fit: contain;
}
.link-list--horizontal {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 2rem;
    gap: var(--space32);
}
/* ------------------------ Default Menu Button and Animation */
.menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    height: 3rem;
    width: 3.15rem;
    padding: 0.5rem;
}
.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: #111111;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0), opacity 550ms ease;
}
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
.menu-toggle.active span {
    opacity: 1;
    transform: rotate(-45deg) translate(0.1rem, 0);
    background: #111111;
    background: var(--clr-dark);
}
.menu-toggle.active span:nth-last-child(3) {
    transform: rotate(45deg) translate(-0.1rem, -0.425rem);
}
.menu-toggle.active span:nth-last-child(2) {
    opacity: 0;
    transform: rotate(0deg) scale(0.2, 0.2);
}
/* ------------------------ v2 Menu Button and Animation */
/* .menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    width: 50%;
    transform-origin: right;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
    width: 50%;
    align-self: flex-end;
    transform-origin: left;
    transition: transform 300ms cubic-bezier(0.52, -0.8, 0.52, 0.52);
}

.menu-toggle.active {
    transform: rotate(-45deg);
}
   
.menu-toggle.active span:first-child {
    transform: rotate(-90deg) translateX(1px);
}
   
.menu-toggle.active span:last-child {
    transform: rotate(-90deg) translateX(-1px);
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* ------------------------ v4 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    background-color 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}


.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background-color: transparent;
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) translate(0px, 0px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) translate(0px, 0px);
    transition-delay: 500ms;
} */
/* ------------------------ v5 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0),
    opacity 550ms ease;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
    transition-delay: 500ms;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(2):before,
.menu-toggle span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: var(--clr-dark);
    transition-duration: 500ms;
    transition-delay: 0ms;
    left: 0;
    transform: scaleX(0.5);
}

.menu-toggle span:last-child {
    margin-bottom: 0;
    transition-delay: 500ms;
}

.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: translateY(8px);
    opacity: 0;
    transition-delay: 0ms;
}
  
.menu-toggle.active span:last-child {
    transform: translateY(-8px);
    opacity: 0;
    transition-delay: 0ms;
}

.menu-toggle.active span:nth-last-child(2):before {
    transform: rotateZ(45deg) scaleX(0.5) translate(-6px, 11px);
    transition-delay: 500ms;
}

.menu-toggle.active span:nth-last-child(2):after {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-6px, -11px);
    transition-delay: 500ms;
} */
/* ------------------------ v3 Menu Button and Animation */
/* .menu-toggle {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
    transition: transform 300ms ease-out;
    transform: rotate(180deg)
}

.menu-toggle span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 300ms ease-out;
}
   
.menu-toggle span:first-child {
    transform-origin: 0% 0%;
}
   
.menu-toggle span:nth-last-child(2) {
    transform-origin: 0% 100%;
}

.menu-toggle span:nth-last-child(1) {
    margin-bottom: 0;
}

.menu-toggle.active {
    transform: rotate(0deg)
}
   
.menu-toggle.active span {
    opacity: 1;
    background: var(--clr-dark);
}
   
.menu-toggle.active span:first-child {
    transform: rotateZ(-45deg) scaleX(0.5) translate(-14px, 5px);
}
  
.menu-toggle.active span:last-child {
    transform: rotateZ(45deg) scaleX(0.5) translate(-14px, -3px);
} */
/* BASE STYLES */
/* classic full screen mobile menu */
.mobile-menu {
    display: grid;
    position: fixed;
    align-content: start;
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding-top: 5rem;
    top: 0;
    right: 0;
    list-style: none;
    background: #dddddd;
    background: var(--clr-gray-100);
    -webkit-font-smoothing: antialiased;
    z-index: -1;
    pointer-events: none;
    justify-content: center;
    visibility: hidden;
    opacity: 1;
    transform: translateX(100%);
    animation-duration: 300ms; 
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0), visibility 0s linear 250ms;
    /* transition: opacity 500ms ease, visibility 100ms linear 100ms;
    opacity: 0; */
}
.mobile-menu.active {
    transform: translateX(0);
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
    /* transition: opacity 500ms ease, visibility 100ms linear; */
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0) 250ms, visibility 0s linear 250ms;
}
.header--bar .mobile-menu {
    top: -1rem;
    right: -5vw;
}
/* ------------------------------------------------------- */
/* small mobile menu */
/* .mobile-menu {
    display: grid;
    position: fixed;
    top: 6rem;
    left: 0;
    width: 100%;
    background: var(--clr-gray-100);
    -webkit-font-smoothing: antialiased;
    max-height: 60vh; 
    overflow-y: auto;
    background-color: #fff;
    z-index: -1;
    box-shadow: 0 10px 15px rgba(0,0,0,0.1);
    opacity: 0;
    visibility: hidden;
    justify-content: center;
    transition-duration: 300ms;
}

.mobile-menu.active {
    visibility: visible;
    opacity: 1;
}

.header--bar .mobile-menu {
    top: 4rem;
} */
/* ------------------------------------------------------- */
.mobile-menu .container {
    max-width: 90%;
}
.mobile-menu li,
.mobile-menu .mobile-menu__item-group {
    margin-left: 5%;
}
.mobile-menu__accordion-group li:has(> .mobile-menu__subitem) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
}
.mobile-menu li .item-box {
    gap: 1rem;
    gap: var(--space16);
}
.mobile-menu li {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    font-size: 1.5rem;
}
.mobile-menu__item-group,
.mobile-menu__accordion-group {
    list-style: none;
}
.mobile-menu__accordion-group {
    padding-left: 1.25rem;
}
.mobile-menu__item-group li,
.mobile-menu__accordion-group li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1.25rem;
    font-size: 1.25rem;
}
.mobile-menu__accordion-group li {
    padding-left: 0rem;
}
/* mobile menu accordion */
.mobile-menu__accordion {
    padding-bottom: 0.5rem !important;
}
.mobile-menu__accordion {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.mobile-menu__accordion label {
    position: relative;
    display: block;
    width: 100%;
    max-width: 25rem;
}
.mobile-menu__accordion-group {
    visibility: hidden;
    opacity: 0;
    height: 0;
}
.accordion-toggle {
    width: 100%;
    max-width: 25rem;
    display: none;
}
/* REFINE ::BEFORE ANIMATION DELAY */
.mobile-menu__accordion label::before {
    content: '';
    position: absolute;
    border-left: 2px solid #777777;
    border-left: 2px solid var(--clr-gray-400);
    border-top: 2px solid #777777;
    border-top: 2px solid var(--clr-gray-400);
    width: 1rem;
    height: 1rem;
    right: 0%;
    transform: rotate(-135deg);
    opacity: 0;

    /* Default transition for CLOSING (make it fast, no delay) */
    transition: opacity 200ms ease, transform 200ms ease;
}
.mobile-menu__accordion label:has(.slide-up)::before {
    opacity: 1;
    transform: rotate(-135deg) translateY(0);

    /* Transition for OPENING (the delayed fade you want) */
    transition: opacity 1000ms ease, transform 200ms ease;
}
.accordion-toggle:checked ~ .mobile-menu__accordion-group {
    visibility: visible;
    opacity: 1;
    height: auto;
}
.accordion-toggle:checked ~ label:before {
    transform: rotate(-225deg);
    right: 1%;
}
.mobile-menu__accordion-group li:has(> .mobile-menu__subitem) {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    width: 100%;
}
.modal {
    position: fixed;
    height: 100vh;
    width: 100%;
    background-color: rgba(62,62,62,0.33);
    z-index: 30;
    display: flex;
    justify-content: center;
    align-items: center;
    top: 0%;
    left: 0%;
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95); /* slightly smaller initially */
    transition: opacity 0.3s ease, transform 0.3s ease;
}
/* Active state: modal visible */
.modal.active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1); /* grow to normal size */
}
.modal__content-wrapper {
    position: relative;
    display: flex;
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    border: 1px solid #777777;
    border: 1px solid var(--clr-gray-400);
    overflow: hidden;
    width: 90%;
    max-width: 40rem;
}
.modal__content {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
    justify-content: start;
}
.modal__header,
.modal__body,
.modal__footer {
    padding: 1rem
}
.modal__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
}
.modal__body {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
}
/* .modal-close {
    color: var(--clr-dark);
    font-size: 2rem;
    line-height: 2rem;
    cursor: pointer;
} */
.modal__footer {
    display: flex;
    justify-content: start;
    align-items: center;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    height: -moz-fit-content;
    height: fit-content;
    width: 100%;
}
.modal-close {
    display: block;
    z-index: 3;
    -webkit-user-select: none;
    -moz-user-select: none;
         user-select: none;
    height: 3rem;
    width: 3rem;
    padding: 0.5rem;
}
.modal-close span {
    display: block;
    width: 2.0625rem;
    height: 0.125rem;
    margin-bottom: 0.35rem;
    position: relative;
    background: #111111;
    background: var(--clr-dark);
    border-radius: 0.25rem;
    z-index: 1;
    transform-origin: 0.25rem 0;
    transition: transform 500ms cubic-bezier(0.77,0.2,0.05,1.0), background-color 550ms ease;
}
.modal-close span:first-child {
    transform-origin: 0% 0%;
}
.modal-close span:nth-last-child(2) {
    transform-origin: 0% 100%;
}
.modal-close span:nth-last-child(2):before,
.modal-close span:nth-last-child(2):after {
    content: "";
    position: absolute;
    width: 2.0625rem;
    height: 0.125rem;
    background: #111111;
    background: var(--clr-dark);
    left: 0;
}
.modal-close span:last-child {
    margin-bottom: 0;
}
.modal-close span {
    opacity: 1;
    background-color: transparent;
}
.modal-close span:first-child {
    transform: translateY(8px);
}
.modal-close span:last-child {
    transform: translateY(-8px);
}
.modal-close span:nth-last-child(2):before {
    transform: rotateZ(45deg) translate(0px, 0px);
}
.modal-close span:nth-last-child(2):after {
    transform: rotateZ(-45deg) translate(0px, 0px);
}
.header__nav__options li {
    position: relative;
}
@media (min-width: 64rem) {
    
    .header__nav__options {
        display: flex;
        gap: 2rem;
    }
}
/* active-item styling */
.header__nav__options .active::before {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    left: 0;
    bottom: -0.75rem;
    opacity: 0;
    animation: activeslideup 1000ms forwards;
    z-index: 2;
}
.header__nav__options .dropdown .active::before,
.header__nav__options .dropdown-mega .active::before {
    bottom: 0.25rem;
}
@keyframes activeslideup {
  from {
    opacity: 0;
    transform: translateY(15%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
/* page navigation styles */
.page__nav__wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9;
}
.page__nav {
  position: relative;
  display: grid;
  padding-top: 2rem;
  padding-bottom: 2rem;
  z-index: 2;
  grid-gap: 2rem;
  gap: 2rem;
}
.page__nav__bg {
  position: absolute;
  height: 100%;
  width: 100%;
  background-color: #999999;
  background-color: var(--clr-primary-400);
  opacity: 0.8;
  z-index: 0;
}
.page__nav__options {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  list-style: none;
  justify-content: center;
}
.page__nav a {
  color: #fafafa;
  color: var(--clr-light);
}
.page__nav .grid--fluid {
    justify-content: center;
    align-items: center;
    row-gap: 2rem;
    -moz-column-gap: 4rem;
         column-gap: 4rem;
    width: 100%;
}
.scroller__wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding-bottom: 4rem;
    background-color: #141414;
    background-color: var(--clr-bg-color);
    color: #fafafa;
    color: var(--clr-light);
    display: grid;
    justify-items: center;
}
.scroller__wrapper .overlay {
    position: absolute;
    background: linear-gradient(
        90deg,
        #141414,
        #141414,
        rgba(20,20,20,0),
        rgba(20,20,20,0),
        #141414,
        #141414
    );
    background: var(--gradient-scroller);
    height: 100%;
    width: 100%;
    z-index: 5;
}
/* 1024px */
@media (min-width: 64rem) {
    
    .scroller__wrapper {
        padding-top: 2rem;
        padding-bottom: 5rem;
    }

}
.scroller {
    width: 100%;
    overflow: hidden;
    max-width: 1400px
}
.scroller__inner {
    display: flex;
    flex-direction: row;
    justify-content: left;
    gap: 1.5rem;
    padding: 0.5rem;
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
    flex-wrap: nowrap;
    width: -moz-max-content;
    width: max-content; /* expands to fit all slides naturally */
}
.scroller__inner {
    animation: scroll 50000ms forwards linear infinite;
    animation: scroll 50000ms var(--_scroll-direction, forwards) linear infinite;
}
@keyframes scroll {
    to { transform: translateX(calc(-1 * var(--scroll-width))); }
}
/* .scroller__inner:hover,
.scroller__inner:focus-within {
    animation-play-state: paused;
} */
/* .scroller__inner:has(> .slide--240) {
    animation: scroller240 25000ms var(--_scroll-direction, forwards) linear infinite;
}

@keyframes scroller240 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-18.2% - 5.25rem));
    }
}

.scroller__inner:has(> .slide--280) {
    animation: scroller280 25000ms var(--_scroll-direction, forwards) linear infinite;
}

@keyframes scroller280 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-21% - 5.25rem));
    }
}

.scroller__inner:has(> .slide--320) {
    animation: scroller320 25000ms var(--_scroll-direction, forwards) linear infinite;
}

@keyframes scroller320 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-23.8% - 5.25rem));
    }
}

.scroller__inner:has(> .slide--348) {
    animation: scroller348 25000ms var(--_scroll-direction, forwards) linear infinite;
}

@keyframes scroller348 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-25.75% - 5.25rem));
    }
}

.scroller__inner:has(> .slide--360) {
    animation: scroller360 25000ms var(--_scroll-direction, forwards) linear infinite;
}

@keyframes scroller360 {
    from {
        transform: translatex(0);
    }
    to {
        transform: translatex(calc(-26.60% - 5.25rem));
    }
} */
/* scroller slides */
.slide--240 img {
    width: 240px; 
    height: 160px;
}
.slide--280 img {
    height: 3rem;
}
.slide--320 img {
    width: 320px; 
    height: 192px;
}
.slide--348 img {
    width: 348px; 
    height: 208px;
}
.slide--360 img {
    width: 360px; 
    height: 208px;
}
.slideshow {
  display: flex;
  position: relative;
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.section--slideshow .slideshow {
  height: 100vh;
}
.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
  align-items: center;
  justify-content: center;
  /* box-shadow: 1px 1px 10px 0px rgba(0, 0, 0, 0.3); */
}
.section--slideshow .slide {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
}
.slide__bg {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 0;
}
/* Overlay gradient moves here, applied over the img */
.slide::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,0.50),
        rgba(0,0,0,0.25)
    );
    z-index: 1;
}
.columns__col .slideshow {
  aspect-ratio: 1.5/1;
  min-height: 25rem;
  height: 100%;
}
/* Content must sit above the overlay */
.slide .container {
    position: relative;
    z-index: 2;
}
.active-slide {
  display: flex;
  /* box-shadow: 1px 1px 5px 0px rgba(0, 0, 0, 0.5); */
  z-index: 10;
  /* animation: blurIn 800ms cubic-bezier(0.7, 0, 0.3, 1) forwards; */
  animation: slideInRight 1250ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.prev-slide {
  display: flex;
  z-index: 9;
  /* animation: blurOut 800ms ease-in forwards; */
  animation: slideOutLeft 1750ms cubic-bezier(0.7, 0, 0.3, 1) forwards;
}
.dot-nav {
  position: absolute;
  z-index: 11;
  bottom: 1.5rem;
  width: 100px;
  height: 1.25rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  /* background: rgba(0, 0, 0, 0.5); */
  border-radius: 10px;
}
.dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.5);
}
.dot:hover {
  cursor: pointer;
  background: #fafafa;
  background: var(--clr-light);
}
.active-dot {
  background: #fafafa;
  background: var(--clr-light);
  animation: dotfade 1000ms cubic-bezier(0.7, 0, 0.3, 1) 0s 1 forwards;
}
.slideshow .btn-slider {
  position: absolute;
  z-index: 11;
}
.slideshow .btn-slider .btn--icon {
  color: #fafafa;
  color: var(--clr-light);
  border: 1px solid #e7e7e7;
  border: 1px solid var(--clr-gray-50);
  background-color: #e7e7e7;
  background-color: var(--clr-gray-50);
}
.slideshow .btn-slider .btn--icon:hover {
  opacity: 0.75;
}
.slideshow .btn-slider:nth-last-child(2) {
  left: 8px;
}
.slideshow .btn-slider:last-child {
  right: 8px;
}
@keyframes slideIn {
  0% {
    transform: translate(-100vw, 0);
  }
  100% {
    transform: translate(0, 0);
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes blurIn {
  0% {
    opacity: 0;
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes blurOut {
    from {
        opacity: 1;
        filter: blur(0);
    }
    to {
        opacity: 0;
        filter: blur(10px);
    }
}
@keyframes dotfade {
  0% {
    background: rgba(255, 255, 255, 0.5);
  }
  100% {
    background: #fafafa;
    background: var(--clr-light);
  }
}
@keyframes slideInRight {
    0% {
        transform: translateX(100%);
    }
    100% {
        transform: translateX(0%);
    }
}
@keyframes slideOutLeft {
    0% {
        opacity: 1;
        transform: translateX(0%);
    }
    100% {
        opacity: 0;
        transform: translateX(-100%);
    }
}
.table--simple-1 {
    margin: 1rem 0;
    min-width: 17.5rem;
}
.table--simple-1 tr {
      border-bottom: 1px solid #999999;
      border-bottom: 1px solid var(--clr-primary-400);
}
.table--simple-1 th {
    display: none;
    border-bottom: 1px solid #999999;
    border-bottom: 1px solid var(--clr-primary-400);
    padding: 0.5rem 0;
}
.table--simple-1 td {
    display: flex;
    border-bottom: 1px solid #999999;
    border-bottom: 1px solid var(--clr-primary-400);
    padding: 0.5rem 0;
    justify-content: space-between;
}
.table--simple-1 td:first-child {
    padding-top: 1rem;
    justify-content: center;
}
.table--simple-1 td {
     padding-bottom: 1rem;
}
.table--simple-1 td:before {
    content: attr(data-th);
    font-weight: bold;
    /* width: 6.5rem; */
    display: inline-block;
    text-align: left;
}
.table--simple-1 th,
.table--simple-1 td {
    text-align: right;
}
.table--simple-1 td:first-child {
     text-align: left;
}
.table--simple-1 {
    border-radius: 0.4rem;
    overflow: hidden;
}
.table--simple-1 tr {
     border-color: #46637f;
}
.table--simple-1 th,
.table--simple-1 td {
    margin: 0.5rem 1rem;
}
@media (min-width: 480px) {
  .table--simple-1 td:before {
        display: none;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        text-align: left;
  }

  .table--simple-1 td {
        min-width: 6.5rem;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        display: table-cell;
        padding: 0.5rem 0;
  }
  .table--simple-1 th:first-child,
  .table--simple-1 td:first-child {
        padding-left: 0;
  }
  .table--simple-1 th:last-child,
  .table--simple-1 td:last-child {
        padding-right: 0;
  }

  .table--simple-1 th,
  .table--simple-1 td {
        padding: 1rem 0;
  }
}
.tabs-wrapper {
    display: flex;
    flex-direction: column;
}
.tabs__nav {
    display: flex;
    flex-direction: row;
    gap: 0;
    border-bottom: 2px solid #777777;
    border-bottom: 2px solid var(--clr-gray-400);
}
/* Base trigger styles shared by all versions */
.tabs__trigger {
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    border: none;
    background: none;
    font-size: inherit;
    position: relative;
    color: #777777;
    color: var(--clr-gray-400);
    transition: color 200ms;
}
/* --- Underline version --- */
.tabs__nav--underline {
    border-bottom: 2px solid #777777;
    border-bottom: 2px solid var(--clr-gray-400);
}
.tabs__nav--underline .tabs__trigger::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: currentColor;
    transform: scaleX(0);
    transition: transform 200ms;
}
.tabs__nav--underline .tabs__trigger.tabs__active {
    color: #111111;
    color: var(--clr-dark);
}
.tabs__nav--underline .tabs__trigger.tabs__active::after {
    transform: scaleX(1);
}
/* --- Pill version --- */
.tabs__nav--pill {
    gap: 0.5rem;
    gap: var(--space8);
    padding: 0.25rem;
    width: -moz-fit-content;
    width: fit-content;
}
.tabs__nav--pill .tabs__trigger {
    border-radius: 0.5rem;
    border-radius: var(--rounded-corners);
    padding: 0.5rem 1.25rem;
    transition: color 200ms, background-color 200ms;
}
.tabs__nav--pill .tabs__trigger.tabs__active {
    background-color: #dddddd;
    background-color: var(--clr-gray-100);
    color: #111111;
    color: var(--clr-dark);
}
.tabs__panels {
    position: relative;
}
.tabs__panel {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: opacity 0.25s ease-out;
}
.tabs__panel.tabs__active {
    opacity: 1;
    max-height: none;
    padding-top: 1rem;
}
/* ---- Base timeline ---- */
.timeline {
    position: relative;
    list-style: none;
    padding: 0;
    margin: 0;
}
/* ---- Vertical ---- */
.timeline--vertical {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.timeline--vertical .timeline__item {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-gap: 0 1.5rem;
    gap: 0 1.5rem;
    position: relative;
}
.timeline--vertical .timeline__marker-col {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.timeline--vertical .timeline__line {
    width: 2px;
    flex: 1;
    background-color: #999999;
    background-color: var(--clr-gray-300);
    min-height: 1.5rem;
}
.timeline--vertical .timeline__item:last-child .timeline__line {
    display: none;
}
.timeline--vertical .timeline__content {
    padding-bottom: 2rem;
}
/* ---- Markers ---- */
.timeline__marker {
    position: relative;
    z-index: 1;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--clr-white);
    border: 2px solid #999999;
    border: 2px solid var(--clr-gray-300);
    transition: border-color 300ms, background-color 300ms;
}
/* Dot */
.timeline--dot .timeline__marker {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}
/* Numbered */
.timeline--numbered .timeline__marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-weight: 600;
    font-size: 0.9rem;
    color: #777777;
    color: var(--clr-gray-400);
    transition: color 300ms, border-color 300ms, background-color 300ms;
}
/* Icon */
.timeline--icon .timeline__marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    font-size: 1rem;
}
/* No marker */
.timeline--no-marker .timeline__marker {
    display: none;
}
.timeline--no-marker.timeline--vertical .timeline__line {
    margin-left: 0;
}
.timeline__item.timeline__active .timeline__line {
    background-color: var(--clr-primary);
}
/* ---- Content ---- */
.timeline__title {
    font-weight: 600;
    margin-bottom: 0.25rem;
}
.timeline__label {
    font-size: 0.8rem;
    color: #777777;
    color: var(--clr-gray-400);
    margin-bottom: 0.5rem;
}
.timeline__body {
    font-size: 0.95rem;
}
/* ---- Animated version ---- */
.timeline--animated .timeline__item {
    opacity: 0;
    transform: translateY(1rem);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}
.timeline--animated .timeline__item.timeline__visible {
    opacity: 1;
    transform: translateY(0);
}
.timeline--animated .timeline__marker {
    transform: scale(0.5);
    transition: transform 0.3s ease-out, border-color 300ms, background-color 300ms, color 300ms;
}
.timeline--animated .timeline__item.timeline__visible .timeline__marker {
    transform: scale(1);
}
.timeline--animated .timeline__line {
    transform-origin: left;
    transform: scaleX(0);
    transition: transform 0.4s ease-out;
}
.timeline--vertical.timeline--animated .timeline__line {
    transform-origin: top;
    transform: scaleY(0);
}
.timeline--animated .timeline__item.timeline__visible .timeline__line {
    transform: scaleX(1);
}
.timeline--vertical.timeline--animated .timeline__item.timeline__visible .timeline__line {
    transform: scaleY(1);
}
/* INCOMPLETE */
/* ---------------------------------------------------------- */
.timeline--horizontal.timeline--animated .timeline__item {
    transform: translateX(1rem);
}
.timeline--horizontal.timeline--animated .timeline__item.timeline__visible {
    transform: translateX(0);
}
/* ---- Horizontal ---- */
.timeline--horizontal {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    overflow-x: auto;
}
.timeline--horizontal .timeline__item {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 8rem;
    position: relative;
}
.timeline--horizontal .timeline__marker-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
}
.timeline--horizontal .timeline__line {
    flex: 1;
    height: 2px;
    background-color: #999999;
    background-color: var(--clr-gray-300);
}
.timeline--horizontal .timeline__item:last-child .timeline__line {
    display: none;
}
.timeline--horizontal .timeline__content {
    padding: 1rem 0.5rem 0;
    text-align: center;
}
/* ---- Active state ---- */
.timeline__item.timeline__active .timeline__marker {
    border-color: var(--clr-primary);
    background-color: var(--clr-primary);
    color: var(--clr-white);
}
/* BASE STYLES & FOOTER TYPES */
footer {
    display: grid;
    align-content: center;
    width: 100%;
    background-color: #fafafa;
    background-color: var(--clr-light);
    transition-duration: 250ms;
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
    padding-bottom: 3rem;
    grid-gap: 3rem;
    grid-gap: var(--space48);
    gap: 3rem;
    gap: var(--space48);
}
.footer__top-level,
.footer__bottom-level {
    display: grid;
    justify-content: center;
}
.footer__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.footer__bottom-level .footer__container {
    flex-wrap: wrap;
    gap: 1.5rem;
    gap: var(--space24);
}

footer .logo {
    max-width: 33%;
}

footer .logo img {
    height: 100%;
    max-width: 100%;
}
footer .grid--fluid {
    gap: 3rem;
    gap: var(--space48);
}
footer .content-box-wrapper {
    width: auto;
}
/* FOOTER COLUMN & GRID LAYOUTS */
footer .complex__grid {
    display: flex;
    flex-direction: column;
    /* justify-content: space-between; */
    gap: 2rem;
    gap: var(--space32);
    width: 100%;
}
.complex__grid-col,
.complex__grid-col--m,
.complex__grid-col--xl {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    gap: var(--space24);
}
.columns__layout.--multi-row {
    gap: 3rem;
    gap: var(--space48);
}
.footer--simple .columns__col:has(.logo) {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 22.5rem;
}
@media (min-width: 48rem) {

    .complex__grid-col--m {
        flex-direction: row;
    }

}
@media (min-width: 64rem) {

    .form--1i {
        flex-wrap: nowrap;
    }

    footer .form--1i input,
    footer .form--1i .input-group {
        width: 100%;
        max-width: none;
    }

    footer .columns__col:has(.--content-left-to-right) .columns__col {
        display: flex;
    }


    footer .columns__col .--content-left-to-right {
        display: flex;
        justify-content: right;
    }

}
/* 1200px */
@media (min-width: 75rem) {

    footer .complex__grid {
        flex-direction: row;
    }

    .complex__grid-col--xl {
        width: 50%;
    }

    .complex__grid-col--xl .iframe,
    .complex__grid-col--xl iframe {
        max-width: 32rem;
    }
}
/* OTHER LAYOUTS */
/* --------------------------------- */
.footer--basic-1 .footer-top .footer__container {
    flex-direction: row;
}
.footer--contact-1 .footer__content-wrapper-1 {
    row-gap: 1.5rem !important;
    row-gap: var(--space24) !important;
    -moz-column-gap: 3rem !important;
         column-gap: 3rem !important;
    -moz-column-gap: var(--space48) !important;
         column-gap: var(--space48) !important;
}
.footer--contact-1 .footer__content-wrapper-1 {
    flex-direction: row;
    flex-wrap: wrap;
}
.footer--contact-1 .footer__link-list {
    width: -moz-fit-content;
    width: fit-content;
}
.footer__gallery {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.footer__gallery-item-wrapper {
    width: -moz-fit-content;
    width: fit-content;
    height: -moz-fit-content;
    height: fit-content;
}
.footer__gallery-item {
    position: relative;
    height: 6rem;
    width: 6rem;
}
.footer__gallery-item .overlay {
    position: absolute;
    display: grid;
    justify-content: center;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-color: rgba(17,17,17,0.46667);
    opacity: 0;
    transition: opacity 250ms;
}
.footer__gallery-item .overlay-text {
    display: grid;
    justify-content: center;
    align-content: center;
    text-align: center;
}
.footer__gallery-item:hover .overlay {
    opacity: 1;
}
.footer-top span {
    max-width: 40rem;
}
/* 400px */
@media (min-width: 25rem) {

    .footer__gallery {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .footer--simple .footer__content-wrapper {
        flex-direction: row;
        width: 100%;
        flex-wrap: wrap;
        white-space: none;
    }

}
/* 560px */
@media (min-width: 35rem) {
    
    .footer--contact-1 .footer__content-wrapper {
        flex-direction: row;
    }

    footer .logo img {
        max-width: 20rem;
        max-width: 15rem;
    }

}
/* 680px */
@media (min-width: 42.5rem) {

    .footer--contact-1 .footer__content-wrapper {
        flex-direction: row;
    }

}
/* 768px */
@media (min-width: 48rem) {

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

    footer .logo img {
        max-width: 15rem;
        max-width: 10rem;
    }
    
}
/* 896px */
@media (min-width: 56rem) {

    .footer--simple .footer__container {
        flex-direction: row;
    }

    .footer--simple .footer__content-wrapper {
        width: auto;
    }

}
footer .--content-centered {
    justify-content: center;
}
footer .--content-right {
    justify-content: right;
}
footer .--content-left {
    justify-content: left;
}
footer .--content-spaced {
    justify-content: space-between;
}
.sm-list.--content-left-to-right {
    justify-content: left;
}
/* 400px */
@media (min-width: 25rem) {

    .sm-list.--content-left-to-right {
        justify-content: right;
    }

}
/* BASE STYLES & HEADER TYPES */
header {
    position: absolute;
    display: grid;
    align-content: center;
    width: 100%;
    background-color: #141414;
    background-color: var(--clr-bg-color);
    z-index: 10;
    transition-duration: 250ms;
    padding-top: 6.5rem;
    padding-bottom: 6.5rem;
    padding-bottom: 3rem;
}
.header--bar {
    padding-top: 1rem;
    padding-bottom: 1rem;
    border: none;
}
.header--bar .header__container {
    padding: 0.5rem 1.75rem;
    -webkit-backdrop-filter: blur(25px);
            backdrop-filter: blur(25px);
    background-color: rgba(180, 180, 180, 0.388);
    /* border-radius: var(--rounded); */
}
.header--transparent {
    background-color: rgba(0,0,0,0.00392);
}
.header--fixed {
    position: fixed;
    top: 0;
}
.header--relative {
    position: relative;
}
header .logo img {
    height: 3.5rem;
    max-width: 7.5rem;
    transition-duration: 250ms;
}
.header--bar .logo img {
    height: 2.5rem;
    max-width: 17rem;
}
.header__container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
}
.header__sm-list img {
    aspect-ratio: 1/1;
    /* min size should be 1rem */
    /* max size should be 1.5rem */
    height: 1.5rem;
    width: 1.5rem;
    -o-object-fit: contain;
       object-fit: contain;
}
/* HEADER COLUMN LAYOUTS */
.header__columns__layout {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 2rem;
    gap: var(--space32);
    width: 100%;
}
.header__columns__col {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    min-width: auto;
    max-width: none;
    flex: none;
    justify-content: space-between;
    gap: 2rem;
    gap: var(--space32);
}
.header__columns__col:has(.logo) {
    flex: 0 1 auto;
    min-width: 0;
}
.header__columns__col:has(> .logo):has(> nav) {
    width: 100%;
}
/* 1024px */
@media (min-width: 64rem) {
    .header__columns__col,
    .header__columns__col:has(> .logo):has(> nav) {
        width: -moz-fit-content;
        width: fit-content;
    }

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

    .header__sm-list {
        display: flex;
        gap: 1.5rem;
        gap: var(--space24);
    }
}
/* MULTI_LEVEL HEADER STYLES */
.header--multi-level {
    padding-top: 0;
    padding-bottom: 0;
}
.header__main-level,
.header__thin-level {
    display: grid;
    align-content: center;
}
.header__main-level {
    padding-top: 1rem;
    padding-bottom: 1rem;
}
header .--bg-dark {
    background-color: #e7e7e7;
    background-color: var(--clr-gray-50);
    color: #fafafa;
    color: var(--clr-light);
}
header .--bg-light {
    background-color: #fafafa;
    background-color: var(--clr-light);
    color: #111111;
    color: var(--clr-dark);
}
/* 1024px */
@media (min-width: 64rem) {

    .header__main-level {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    .header__thin-level {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }

    .header--shrink .logo img {
        height: 1.75rem;
    }

    .header--shrink .header__main-level {
        padding-top: 1.5rem;
        padding-bottom: 1.5rem;
    }
}
.hidden {
  opacity: 0;
  visibility: hidden;
}
.accent-fill {
  width: 0;
  animation: accent-fill 500ms forwards;
}
@keyframes accent-fill {
  from {
    width: 0;
  }
  to {
    width: 5rem;
  }
}
.accent-fill--s {
  width: 0;
  animation: accent-fill--s 500ms forwards;
}
@keyframes accent-fill--s {
  from {
    width: 0;
  }
  to {
    width: 2rem;
  }
}
.fade {
  opacity: 1;
  transition-duration: 1000ms;
}
.slide-up {
  opacity: 0;
  animation: loadslideup 1000ms forwards;
}
@keyframes loadslideup {
  from {
    opacity: 0;
    transform: translateY(25%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.slide-right {
  opacity: 0;
  animation: loadslideright 1000ms forwards;
}
@keyframes loadslideright {
  from {
    opacity: 0;
    transform: translateX(-25%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}
.slide-left {
  opacity: 0;
  animation: loadslideleft 1000ms forwards;
}
@keyframes loadslideleft {
  from {
    opacity: 0;
    transform: translateX(25%);
  }
  to {
    opacity: 1;
    transform: translateX(0%);
  }
}
.slide-down {
  opacity: 0;
  animation: loadslidedown 1000ms forwards;
}
@keyframes loadslidedown {
  from {
    opacity: 0;
    transform: translateY(-25%);
  }
  to {
    opacity: 1;
    transform: translateY(0%);
  }
}
.zoom-in {
  opacity: 0;
  animation: zoomin 1000ms forwards;
}
@keyframes zoomin {
  from {
    opacity: 0;
    transform: scale(0.75);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.blur-in {
  opacity: 0;
  animation: blurin 1000ms forwards;
}
@keyframes blurin {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}
.clip-in {
  opacity: 0;
  animation: clip-in 800ms forwards;
}
@keyframes clip-in {
  from {
    opacity: 1;
    -webkit-clip-path: inset(0 100% 0 0);
            clip-path: inset(0 100% 0 0);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0 0% 0 0);
            clip-path: inset(0 0% 0 0);
  }
}
.flip-in {
  opacity: 0;
  animation: flip-in 800ms forwards;
  transform-style: preserve-3d;
}
@keyframes flip-in {
  from {
    opacity: 0;
    transform: perspective(600px) rotateY(90deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateY(0deg);
  }
}
.pop {
  opacity: 0;
  animation: pop 600ms cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
}
@keyframes pop {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
  80% {
    opacity: 1;
    transform: scale(1.1);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.swing-in {
  opacity: 0;
  animation: swing-in 700ms ease-out forwards;
  transform-origin: top center;
  transform-style: preserve-3d;
}
@keyframes swing-in {
  from {
    opacity: 0;
    transform: perspective(600px) rotateX(-90deg);
  }
  to {
    opacity: 1;
    transform: perspective(600px) rotateX(0deg);
  }
}
.expand {
  opacity: 0;
  animation: expand 600ms ease-out forwards;
  transform-origin: top left;
}
@keyframes expand {
  from {
    opacity: 0;
    transform: scale(0);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
.sharpen-in {
  opacity: 0;
  animation: sharpen-in 900ms ease-out forwards;
}
@keyframes sharpen-in {
  from {
    opacity: 0;
    filter: contrast(0) saturate(0);
  }
  to {
    opacity: 1;
    filter: contrast(1) saturate(1);
  }
}
.glitch-in {
  opacity: 0;
  animation: glitch-in 700ms steps(1) forwards;
}
@keyframes glitch-in {
  0% {
    opacity: 0;
    transform: translateX(0);
  }
  10% {
    opacity: 1;
    transform: translateX(-8px);
  }
  20% {
    opacity: 0;
    transform: translateX(6px);
  }
  30% {
    opacity: 1;
    transform: translateX(-4px);
  }
  40% {
    opacity: 0;
    transform: translateX(3px);
  }
  50% {
    opacity: 1;
    transform: translateX(-2px);
  }
  65% {
    opacity: 1;
    transform: translateX(1px);
  }
  80% {
    opacity: 1;
    transform: translateX(0);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.typewriter {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typewriter 1200ms steps(30) forwards;
}
@keyframes typewriter {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}
.typewriter-cursor {
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  animation: typewriter 1200ms steps(30) forwards;
}
.typewriter-cursor::after {
  content: '|';
  margin-left: 2px;
  opacity: 1;
  animation: cursor-blink-delayed 1s step-start infinite;
  animation-delay: 1200ms;
}
@keyframes cursor-blink-delayed {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* ─── Word-pop ─────────────────────────────────────────────
Staggered slide-up for sequential children (words/items).
Apply to a wrapper; each direct child gets its own delay.
Requires: .word-pop > * { display:inline-block }         */
.word-pop > * {
  opacity: 0;
  display: inline-block;
  animation: word-pop 600ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.word-pop > *:nth-child(1) {
  animation-delay: 0ms;
}
.word-pop > *:nth-child(2) {
  animation-delay: 80ms;
}
.word-pop > *:nth-child(3) {
  animation-delay: 160ms;
}
.word-pop > *:nth-child(4) {
  animation-delay: 240ms;
}
.word-pop > *:nth-child(5) {
  animation-delay: 320ms;
}
.word-pop > *:nth-child(6) {
  animation-delay: 400ms;
}
.word-pop > *:nth-child(7) {
  animation-delay: 480ms;
}
.word-pop > *:nth-child(8) {
  animation-delay: 560ms;
}
.word-pop > *:nth-child(9) {
  animation-delay: 640ms;
}
.word-pop > *:nth-child(10) {
  animation-delay: 720ms;
}
@keyframes word-pop {
  from {
    opacity: 0;
    transform: translateY(40%);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.tilt-in {
  opacity: 0;
  animation: tilt-in 700ms ease-out forwards;
}
@keyframes tilt-in {
  from {
    opacity: 0;
    transform: rotate(-8deg) scale(0.92);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
.wipe-up {
  opacity: 0;
  animation: wipe-up 700ms ease-out forwards;
}
@keyframes wipe-up {
  from {
    opacity: 1;
    -webkit-clip-path: inset(100% 0 0 0);
            clip-path: inset(100% 0 0 0);
  }
  to {
    opacity: 1;
    -webkit-clip-path: inset(0% 0 0 0);
            clip-path: inset(0% 0 0 0);
  }
}
/* ─── Elastic-x ────────────────────────────────────────────
Slides in from the left with a pronounced elastic bounce  */
.elastic-x {
  opacity: 0;
  animation: elastic-x 900ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
@keyframes elastic-x {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/*
  ─── Loading Animations ──────────────────────────────────────
  Four systems:

  1. Full page loader     — covers the page, exits via JS trigger
  2. Intro sequence       — branded one-shot entrance animation
  3. Progress-based loader — bar that reflects real load progress
  4. Skeleton screens     — pulsing placeholder blocks

  All systems are driven by small companion JS in loading-animations.js
  ─────────────────────────────────────────────────────────── */
/* ═══════════════════════════════════════════════════════════
   1. FULL PAGE LOADER
   A fixed overlay that sits above all content until dismissed.

   Usage:
   <div class="page-loader" data-loader-exit="fade">
     <div class="page-loader__spinner"></div>
   </div>

   Exit styles set via data-loader-exit:
     fade  | slide-up | scale-away

   JS calls window.dismissLoader() when ready.
   ═══════════════════════════════════════════════════════════ */
.page-loader {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  background: var(--clr-light);
  transition: none;
  pointer-events: all;
}
/* Dismissed state — class added by JS */
.page-loader.is-dismissed {
  pointer-events: none;
}
/* ── Exit: fade ── */
.page-loader[data-loader-exit="fade"].is-dismissed {
  animation: loader-fade-out 500ms ease-in-out forwards;
}
@keyframes loader-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; visibility: hidden; }
}
/* ── Exit: slide-up ── */
.page-loader[data-loader-exit="slide-up"].is-dismissed {
  animation: loader-slide-up 600ms cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
@keyframes loader-slide-up {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-100%); opacity: 1; }
}
/* ── Exit: scale-away ── */
.page-loader[data-loader-exit="scale-away"].is-dismissed {
  animation: loader-scale-away 500ms ease-in forwards;
  transform-origin: center center;
}
@keyframes loader-scale-away {
  from { transform: scale(1);   opacity: 1; }
  to   { transform: scale(1.1); opacity: 0; }
}
/* ── Spinner ── */
.page-loader__spinner {
  width: 36px;
  height: 36px;
  border: 2.5px solid #f1d3d3;
  border: 2.5px solid var(--clr-danger-bg);
  border-top-color: #b61212;
  border-top-color: var(--clr-danger);
  border-radius: 50%;
  animation: loader-spin 700ms linear infinite;
}
@keyframes loader-spin {
  to { transform: rotate(360deg); }
}
/* ── Optional label beneath spinner ── */
.page-loader__label {
  position: absolute;
  bottom: calc(50% - 48px);
  font-size: 13px;
  color: #777777;
  color: var(--clr-primary-500);
  letter-spacing: 0.04em;
}
/* ═══════════════════════════════════════════════════════════
   2. INTRO / SPLASH SEQUENCE
   A one-shot branded entrance that plays once, then exits.
   Generic and neutral — customise the inner content freely.

   Usage:
   <div class="intro-sequence">
     <div class="intro-sequence__content">
       <!-- your logo, wordmark, or any content -->
     </div>
   </div>

   The sequence plays automatically on load.
   JS removes the element from the DOM after it completes.
   ═══════════════════════════════════════════════════════════ */
.intro-sequence {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
  background: var(--clr-light);
  animation: intro-exit 500ms ease-in-out forwards;
  animation-delay: 2200ms;
  animation-play-state: paused;
  pointer-events: all;
}
/* JS adds .is-playing to start the sequence */
.intro-sequence.is-playing {
  animation-play-state: running;
}
.intro-sequence.is-done {
  display: none;
}
@keyframes intro-exit {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(1.04); pointer-events: none; }
}
/* ── Content wrapper — enters first ── */
.intro-sequence__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  animation: intro-content-in 700ms ease-out forwards;
  animation-delay: 200ms;
  animation-play-state: paused;
}
.intro-sequence.is-playing .intro-sequence__content {
  animation-play-state: running;
}
@keyframes intro-content-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ── Accent bar beneath content ── */
.intro-sequence__bar {
  width: 0;
  height: 2px;
  background: #111111;
  background: var(--clr-dark);
  animation: intro-bar-fill 600ms ease-out forwards;
  animation-delay: 700ms;
  animation-play-state: paused;
}
.intro-sequence.is-playing .intro-sequence__bar {
  animation-play-state: running;
}
@keyframes intro-bar-fill {
  from { width: 0; }
  to   { width: 3rem; }
}
/* ═══════════════════════════════════════════════════════════
   3. SKELETON SCREENS
   Generic pulsing placeholder blocks.
   Compose them freely to match any layout.

   Base element:    .skeleton
   Modifiers:       .skeleton--text
                    .skeleton--text-sm
                    .skeleton--heading
                    .skeleton--avatar
                    .skeleton--avatar-sm
                    .skeleton--thumb
                    .skeleton--button
                    .skeleton--full (100% width)

   Wrapper:         .skeleton-block (adds spacing between rows)
   ═══════════════════════════════════════════════════════════ */
/* ── Shimmer keyframe ── */
@keyframes skeleton-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
/* ── Base ── */
.skeleton {
  display: inline-block;
  border-radius: 4px;
  background-color: #b61212;
  background-color: var(--clr-danger);
  background-image: linear-gradient(
    90deg,
    #b61212 25%,
    #f1d3d3  50%,
    #b61212 75%
  );
  background-image: linear-gradient(
    90deg,
    var(--clr-danger) 25%,
    var(--clr-danger-bg)  50%,
    var(--clr-danger) 75%
  );
  background-size: 800px 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
}
/* ── Text lines ── */
.skeleton--text {
  height: 14px;
  width: 100%;
  border-radius: 3px;
}
.skeleton--text-sm {
  height: 12px;
  width: 70%;
  border-radius: 3px;
}
.skeleton--heading {
  height: 22px;
  width: 55%;
  border-radius: 4px;
}
/* ── Circular avatars ── */
.skeleton--avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  flex-shrink: 0;
}
.skeleton--avatar-sm {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  flex-shrink: 0;
}
/* ── Thumbnail / image block ── */
.skeleton--thumb {
  width: 100%;
  height: 180px;
  border-radius: 8px;
}
/* ── Button placeholder ── */
.skeleton--button {
  height: 36px;
  width: 100px;
  border-radius: 6px;
}
/* ── Full width override ── */
.skeleton--full {
  width: 100% !important;
}
/* ── Row wrapper ── */
.skeleton-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
/* ── Inline row (avatar + text side by side) ── */
.skeleton-row {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.skeleton-row .skeleton-block {
  flex: 1;
}
/* Underline Hover Effects */
/* 
Can be used for list options and btn-links.
For buttons, be sure to wrap inner text with a <span> element to assign hover effect class. 
*/
.underline-ltr::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #fafafa;
    background: var(--clr-light);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-ltr:hover::after,
.underline-ltr:focus-within::after {
    width: 100%;
}
.underline-ltr-d::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #111111;
    background: var(--clr-dark);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-ltr-d:hover::after,
.underline-ltr-d:focus-within::after {
    width: 100%;
}
.underline-ltr-2::after {
    content: "";
    height: 0.75rem;
    width: 0;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    left: 0;
    bottom: -0.7rem;
    transition: 250ms;
}
.underline-ltr-2:hover::after,
.underline-ltr-2:focus-within::after {
    bottom: -0.5rem;
    height: 0.1875rem;
    width: 100%;
}
.underline-rtl::after {
    content: "";
    height: 0.1875rem;
    width: 0;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    right: 0;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-rtl:hover::after,
.underline-rtl:focus-within::after {
    width: 100%;
}
.underline-middle-expand::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -0.5rem;
    transition: 250ms;
}
.underline-middle-expand:hover::after,
.underline-middle-expand:focus-within::after {
    width: 100%;
    left: 0;
}
.underline-fade::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    left: 0;
    bottom: -0.5rem;
    transition: 250ms;
    opacity: 0;
}
.underline-fade:hover::after,
.underline-fade:focus-within::after {
    opacity: 1;
}
.underline-up::after {
    content: "";
    height: 0.1875rem;
    width: 100%;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    left: 0;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-up:hover::after,
.underline-up:focus-within::after {
    opacity: 1;
    bottom: -0.5rem;
}
.underline-expand-up::after {
    content: "";
    height: 0.1875rem;
    width: 0%;
    background: #777777;
    background: var(--clr-primary-500);
    position: absolute;
    display: flex;
    align-content: center;
    left: 50%;
    bottom: -1rem;
    transition: 250ms;
    opacity: 0;
}
.underline-expand-up:hover::after,
.underline-expand-up:focus-within::after {
    width: 100%;
    left: 0;
    bottom: -0.5rem;
    opacity: 1;
}
/* Button Hover Effects */
/* Round Corners */
.round-corners:hover,
.round-corners:focus {
    border: 1px solid #999999;
    border: 1px solid var(--clr-primary-400);
    border-radius: 1.5rem;
}
/* Lighten */
.lighten:hover,
.lighten:focus {
    border: 1px solid #999999;
    border: 1px solid var(--clr-primary-400);
    background-color: #999999;
    background-color: var(--clr-primary-400);
}
/* Darken */
.darken:hover,
.darken:focus {
    border: 1px solid #555555;
    border: 1px solid var(--clr-primary-600);
    background-color: #555555;
    background-color: var(--clr-primary-600);
}
/* Unfill Basic */
.unfill-fade:hover,
.unfill-fade:focus {
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    background-color: transparent;
}
/* Fill Fade */
.fill-fade:hover,
.fill-fade:focus {
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    background-color: #777777;
    background-color: var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right */
.fill-right:hover,
.fill-right:focus {
    color: #111111;
    box-shadow: inset 14rem 0 0 0 #777777;
    box-shadow: inset 14rem 0 0 0 var(--clr-primary-500);
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right Bezier*/
.fill-right-bez {
    transition: 1000ms cubic-bezier(0.77,0.2,0.05,1.0);
}
.fill-right-bez:hover,
.fill-right-bez:focus {
    color: #111111;
    box-shadow: inset 13rem 0 0 0 #777777;
    box-shadow: inset 13rem 0 0 0 var(--clr-primary-500);
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Right Diagonal*/
.fill-right-diag:hover,
.fill-right-diag:focus {
    color: #fafafa;
    color: var(--clr-light);
}
.fill-right-diag:before {
    content: "";
    position: absolute;
    top: 0;
    right: -50px;
    bottom: 0;
    left: 0;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #777777;
    border-bottom: 80px solid var(--clr-primary-500);
    transform: translateX(-100%);
    transition-duration: 500ms;
    z-index: -1;
}
.fill-right-diag:hover:before,
.fill-right-diag:focus:before {
    transform: translateX(0);
}
/* Fill Inward */
.fill-in:hover,
.fill-in:focus {
    color: #111111;
    box-shadow: inset 0 0 0 2rem #777777;
    box-shadow: inset 0 0 0 2rem var(--clr-primary-500);
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
/* Fill Up */
.fill-up:hover,
.fill-up:focus {
  box-shadow: inset 0 -4rem 0 0 #777777;
  box-shadow: inset 0 -4rem 0 0 var(--clr-primary-500);
  color: #fafafa;
  color: var(--clr-light);
}
/* Fill Up 2 */
.fill-up-2 {
    backface-visibility: hidden;
    box-shadow: inset 0 0 0 1px #777777;
    box-shadow: inset 0 0 0 1px var(--clr-primary-500);
    transform: translateZ(0);
}
.fill-up-2:hover,
.fill-up-2:focus {
    border: 1px solid #777777;
    border: 1px solid var(--clr-primary-500);
    color: #fafafa;
    color: var(--clr-light);
}
.fill-up-2::before {
    content: "";
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    height: 120%;
    width: 120%;
    border-radius: 20%;
    background-color: #777777;
    background-color: var(--clr-primary-500);
    scale: 0 0;
    translate: 0 140%;
    transition: scale 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), translate 0.4s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.fill-up-2:hover::before,
.fill-up-2:focus::before {
    scale: 1.5 1.5;
    translate: 0 0;
    border-radius: 50%;
}
/* Fill Aware */
/* 
Ensure <span> element is inside designated buttons. Link btn-aware.js file to HTML.
*/
.fill-aware span {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-radius: 50%;
    background-color: #777777;
    background-color: var(--clr-primary-500);
    transition: width 0.3s ease-in-out, height 0.3s ease-in-out;
    transform: translate(-50%, -50%);
    z-index: -1;
}
.fill-aware:hover span {
    width: 225%;
    height: 562.5px;
}
.fill-aware:hover {
    color: #fafafa;
    color: var(--clr-light);
}
/* Close */
.close:hover,
.close:focus {
  box-shadow: inset -7rem 0 0 0 #777777, inset 7rem 0 0 0 #777777;
  box-shadow: inset -7rem 0 0 0 var(--clr-primary-500), inset 7rem 0 0 0 var(--clr-primary-500);
  color: #fafafa;
  color: var(--clr-light);

}
/* Diagonal Close */
.close-diag:before, 
.close-diag:after {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    transition-duration: 500ms;
}
.close-diag:before {
    right: -50px;
    border-right: 50px solid transparent;
    border-bottom: 80px solid #777777;
    border-bottom: 80px solid var(--clr-primary-500);
    transform: translateX(-100%);
}
.close-diag:after {
    left: -50px;
    border-left: 50px solid transparent;
    border-top: 80px solid #777777;
    border-top: 80px solid var(--clr-primary-500);
    transform: translateX(100%);
}
.close-diag:hover:before,
.close-diag:focus:before {
    transform: translateX(-49%);
}
.close-diag:hover:after,
.close-diag:focus:after {
    transform: translateX(49%);
}
.close-diag:hover,
.close-diag:focus { 
    color: #fafafa; 
    color: var(--clr-light);
}
/* Glow */
.glow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.glow:hover,
.glow:focus {
    box-shadow: 0 0 8px #777777;
    box-shadow: 0 0 8px var(--clr-primary-500);
}
/* Shadow */
.shadow {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.shadow:hover,
.shadow:focus {
    box-shadow: 0 4px 4px #777777;
    box-shadow: 0 4px 4px var(--clr-primary-500);
}
/* Outline Inset */
.outline-inset {
    transition-duration: 0.3s;
    transition-property: box-shadow;
}
.outline-inset:hover,
.outline-inset:focus {
    box-shadow: inset 0 0 0 4px #999999, 0 0 1px transparent;
    box-shadow: inset 0 0 0 4px var(--clr-primary-400), 0 0 1px transparent;
}
/* Outline Change */
.outline-change:hover,
.outline-change:focus {
    border: 1px solid #e7e7e7;
    border: 1px solid var(--clr-gray-50);
}
/* Outline Outward */
.outline-outward {
    overflow: visible;
}
.outline-outward:before {
    content: '';
    position: absolute;
    border: #777777 solid 4px;
    border: var(--clr-primary-500) solid 4px;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-outward:hover:before,
.outline-outward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
}
/* Outline Inward */
.outline-inward {
    overflow: visible;
}
.outline-inward:before {
    content: '';
    position: absolute;
    border: #777777 solid 4px;
    border: var(--clr-primary-500) solid 4px;
    top: -16px;
    right: -16px;
    bottom: -16px;
    left: -16px;
    opacity: 0;
    transition-duration: .3s;
    transition-property: top right bottom left;
}
.outline-inward:hover:before,
.outline-inward:focus:before {
    top: -8px;
    right: -8px;
    bottom: -8px;
    left: -8px;
    opacity: 1;
}
/* Lift */
.lift {
    transition-duration: 0.3s;
    transition-property: transform;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
    box-shadow: 0 0 1px transparent;
}
.lift:hover,
.lift:focus {
    transform: translateY(-5px);
}
/* Float */
.float {
    transition-property: transform, box-shadow;
}
.float:hover,
.float:focus {
    box-shadow: 0 0.5em 0.75rem -0.5rem #777777;
    box-shadow: 0 0.5em 0.75rem -0.5rem var(--clr-primary-500);
    transform: translateY(-0.25rem);
}
/* Pulse */
.pulse:hover,
.pulse:focus {
    animation: pulse 750ms;
    box-shadow: 0 0 0 2rem transparent;
}
@keyframes pulse {
    0% { box-shadow: 0 0 0 0 #555555; box-shadow: 0 0 0 0 var(--clr-primary-600); }
}
/* Corners */
.corners {
    border: none;
}
.corners::after,
.corners::before {
  content: '';
  display: block;
  position: absolute;
  width: 20%;
  height: 50%;
  border: 1px solid;
  transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
  border-radius: 2px;
}
.corners::after {
  bottom: 0;
  right: 0;
  border-top-color: transparent;
  border-left-color: transparent;
  border-bottom-color: #999999;
  border-bottom-color: var(--clr-primary-400);
  border-right-color: #999999;
  border-right-color: var(--clr-primary-400);
}
.corners::before {
  top: 0;
  left: 0;
  border-bottom-color: transparent;
  border-right-color: transparent;
  border-top-color: #999999;
  border-top-color: var(--clr-primary-400);
  border-left-color: #999999;
  border-left-color: var(--clr-primary-400);
}
.corners:hover:after,
.corners:hover:before,
.corners:focus:after,
.corners:focus:before {
  width: 100%;
  height: 100%;
}
.corners:hover,
.corbers:focus {
    border: none;
}
/* Overlapping Outlines */
.overlap {
    overflow: visible;
    border: none;
}
.overlap::after,
.overlap::before {
      content: '';
      display: block;
      position: absolute;
      width: 20%;
      height: 50%;
      border: 1px solid;
      transition: all 750ms cubic-bezier(0.77,0.2,0.05,1.0);
      border-radius: 2px;
}
.overlap::after {
      bottom: 0;
      right: 0;
      border-top-color: transparent;
      border-left-color: transparent;
      border-bottom-color: #999999;
      border-bottom-color: var(--clr-primary-400);
      border-right-color: #999999;
      border-right-color: var(--clr-primary-400);
}
.overlap::before {
      top: 0;
      left: 0;
      border-bottom-color: transparent;
      border-right-color: transparent;
      border-top-color: #999999;
      border-top-color: var(--clr-primary-400);
      border-left-color: #999999;
      border-left-color: var(--clr-primary-400);
}
.overlap:hover:after,
.overlap:hover:before,
.overlap:focus:after,
.overlap:focus:before {
      border-bottom-color: #999999;
      border-bottom-color: var(--clr-primary-400);
      border-right-color: #999999;
      border-right-color: var(--clr-primary-400);
      border-top-color: #999999;
      border-top-color: var(--clr-primary-400);
      border-left-color: #999999;
      border-left-color: var(--clr-primary-400);
      width: 102%;
      height: 104%;
}
.overlap:hover,
.overlap:focus {
    border: none;
}
/* Infinite Bounce */
.bounce {
    animation: .7s down infinite alternate;
    -webkit-animation: .7s down infinite alternate;
}
@keyframes down {
    0% {
        transform: translateY(0px)
    }

    100% {
        transform: translateY(20px)
    }
}
.float {
  animation: float 4s ease-in-out infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}
.drift {
  animation: drift 8s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0); }
  25%       { transform: translate(6px, -4px); }
  50%       { transform: translate(3px, -8px); }
  75%       { transform: translate(-4px, -3px); }
}
/* ─── Sway ─────────────────────────────────────────────────
   Side-to-side pendulum, anchored at the top               */
.sway {
  animation: sway 3s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes sway {
  0%, 100% { transform: rotate(-4deg); }
  50%       { transform: rotate(4deg); }
}
/* ─── Rock ─────────────────────────────────────────────────
   Small back-and-forth tilt, like resting on a curved base  */
.rock {
  animation: rock 2.5s ease-in-out infinite;
  transform-origin: bottom center;
}
@keyframes rock {
  0%, 100% { transform: rotate(-3deg); }
  50%       { transform: rotate(3deg); }
}
.spin-slow {
  animation: spin-slow 8s linear infinite;
}
@keyframes spin-slow {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.pulse {
  animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.06); }
}
.breath {
  animation: throb 3s ease-in-out infinite;
}
@keyframes throb {
  0%, 100% { transform: scale(1);    opacity: 1; }
  50%       { transform: scale(1.07); opacity: 0.7; }
}
.blink {
  animation: blink 2.4s ease-in-out infinite;
}
@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.15; }
}
.shimmer {
  animation: shimmer 2.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%, 100% { filter: brightness(1); }
  50%       { filter: brightness(1.35); }
}
.jitter {
  animation: jitter 0.5s steps(2) infinite;
}
@keyframes jitter {
  0%   { transform: translate(0, 0); }
  25%  { transform: translate(1px, -1px); }
  50%  { transform: translate(-1px, 1px); }
  75%  { transform: translate(1px, 1px); }
  100% { transform: translate(0, 0); }
}
.nudge {
  animation: nudge 2s ease-in-out infinite;
}
@keyframes nudge {
  0%, 100%  { transform: translateX(0); }
  10%        { transform: translateX(5px); }
  20%        { transform: translateX(0); }
  30%        { transform: translateX(5px); }
  40%, 90%  { transform: translateX(0); }
}
/* ─── Cursor-blink ─────────────────────────────────────────
   Appends a blinking text cursor via ::after pseudo-element.
   Works on any inline or block text element.               */
.cursor-blink::after {
  content: '|';
  margin-left: 2px;
  animation: cursor-blink 1s step-start infinite;
  opacity: 1;
}
@keyframes cursor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
/* ─── Tilt-parallax ────────────────────────────────────────
   Autonomous slow tilt cycle alternating rotateX and rotateY,
   simulating a card drifting in 3D space.
   Requires perspective on a parent element:
   .parent { perspective: 800px; }                          */
.tilt-parallax {
  animation: tilt-parallax 6s ease-in-out infinite;
  transform-style: preserve-3d;
}
@keyframes tilt-parallax {
  0%   { transform: rotateX(0deg)   rotateY(0deg); }
  25%  { transform: rotateX(4deg)   rotateY(-5deg); }
  50%  { transform: rotateX(-3deg)  rotateY(5deg); }
  75%  { transform: rotateX(3deg)   rotateY(3deg); }
  100% { transform: rotateX(0deg)   rotateY(0deg); }
}
/* ─── Headline Cycle ──────────────────────────────────────── */
.headline__cycle.is-leaving {
  opacity: 0;
  transform: translateY(-0.5rem);
}
.headline__cycle.is-entering {
  opacity: 0;
  transform: translateY(0.5rem);
}
/*
  ─── CSS Scroll-Driven Animations ────────────────────────────
  Uses animation-timeline (Chrome 115+, Firefox 110+, Safari 18+).
  No JavaScript required.

  Two timeline types used here:
    scroll() — progress tied to the root scroller (full page scroll)
    view()   — progress tied to an element's position in the viewport

  animation-range controls which portion of the scroll/view
  timeline the animation plays across.
  ─────────────────────────────────────────────────────────── */
/* ─── Scroll progress bar ──────────────────────────────────
   A fixed bar at the top of the page that fills as the user
   scrolls from top to bottom.

   Usage: <div class="scroll-progress"></div>
   Place as the first child of <body>.                       */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 1000;

  animation: scroll-progress-fill linear forwards;
  animation-timeline: scroll(root block);
}
@keyframes scroll-progress-fill {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* ─── Scrub fade ───────────────────────────────────────────
   Element fades in as it enters the viewport and fades out
   as it leaves. Progress scrubs forward and backward with
   scroll position.                                          */
.scrub-fade {
  animation: scrub-fade linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes scrub-fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
/* ─── Scrub slide-up ───────────────────────────────────────
   Element rises into view as it enters the viewport.
   Reverses if the user scrolls back up.                     */
.scrub-slide-up {
  animation: scrub-slide-up linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes scrub-slide-up {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ─── Scrub scale ──────────────────────────────────────────
   Element scales up from slightly small as it scrolls into
   view. Scales back down when scrolling back up.            */
.scrub-scale {
  animation: scrub-scale linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 50%;
}
@keyframes scrub-scale {
  from {
    opacity: 0;
    transform: scale(0.85);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}
/* ─── Scrub slide-right ────────────────────────────────────
   Element slides in from the left, tied to scroll position. */
.scrub-slide-right {
  animation: scrub-slide-right linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes scrub-slide-right {
  from {
    opacity: 0;
    transform: translateX(-60px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}
/* ─── Scrub rotate ─────────────────────────────────────────
   Element rotates in from a slight tilt as it enters view.  */
.scrub-rotate {
  animation: scrub-rotate linear both;
  animation-timeline: view();
  animation-range: entry 0% cover 40%;
}
@keyframes scrub-rotate {
  from {
    opacity: 0;
    transform: rotate(-6deg) scale(0.95);
  }
  to {
    opacity: 1;
    transform: rotate(0deg) scale(1);
  }
}
/* ─── Sticky progress ──────────────────────────────────────
   For a sticky section that uses its own scroll range as a
   progress indicator — e.g. a step-by-step walkthrough.

   Usage:
   <section class="sticky-section">
     <div class="sticky-progress-bar"></div>
     ...content...
   </section>

   The bar fills as the user scrolls through the section.    */
.sticky-section {
  position: relative;
}
.sticky-progress-bar {
  position: sticky;
  top: 0;
  height: 3px;
  width: 100%;
  background: currentColor;
  transform-origin: left center;
  transform: scaleX(0);

  animation: scroll-progress-fill linear both;
  animation-timeline: scroll(nearest block);
}
/*
  ─── JS Scroll Animations — CSS Side ────────────────────────
  These classes work in tandem with the Intersection Observer
  script below. Elements start hidden via [data-scroll] and
  receive an active class when they enter the viewport.
 
  Supports all your existing animation classes as values:
    data-scroll="slide-up"
    data-scroll="fade"
    data-scroll="blur-in"
    data-scroll="zoom-in"
    ... any class from your animation library
 
  Optional attributes:
    data-scroll-delay="200"   — delay in ms before animating
    data-scroll-threshold="0.2" — how much of element must be
                                  visible before triggering (0–1)
  ─────────────────────────────────────────────────────────── */
/* Elements waiting to animate in */
[data-scroll] {
  opacity: 0;
}
/* Element has entered the viewport — animation class applied by JS */
[data-scroll].is-visible {
  opacity: 1;
}
/* ─── Scroll progress bar ──────────────────────────────────
   Standalone progress bar driven by a scroll event listener.
   Usage: <div class="js-scroll-progress"></div>            */
.js-scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0%;
  background: currentColor;
  z-index: 1000;
  transition: width 50ms linear;
}