*, *::before, *::after {
    box-sizing:border-box;

}


/* Regular */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Regular.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Italic */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Italic.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Light.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Medium.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Semi-Bold */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-SemiBold.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-Bold.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Bold Italic */
@font-face {
  font-family: 'Poppins';
  src: url('../fonts/Poppins/Poppins-BoldItalic.woff2') format('woff2'),
       url('../fonts/Poppins/Poppins-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

:root {
    --ff-sans: 'Poppins', system-ui, sans-serif;
    --fs-base: 1.2rem;
    font-size:var(--fs-base);
    --ff-display: 'Bebas', sans-serif;
    /* Manrope-specific weights */
    --fw-extralight: 200;
    --fw-light: 300;
    --fw-normal: 400;
    --fw-medium: 500;
    --fw-semibold: 600;
    --fw-bold: 700;
    --fw-extrabold: 800;

    --desktop-content: 1280px;
    
    --clr-background: rgb(2,2,2);
    --clr-ink: rgb(240, 240, 240);
    /* --clr-primary: rgb(214, 109, 3); */
    --clr-primary: rgb(129, 184, 0); 

    --clr-grey: rgb(86, 86, 86);
    --clr-grey-dark: rgb(66, 65, 65);
    --clr-grey-light: rgb(200, 200, 200);
    --clr-success: rgba(88, 149, 80, 0.7);
    --clr-error: rgb(178, 58, 58, .7);
    --blur-sm: 8px;
    --blur-md: 12px;
    --blur-lg: 16px;
    --blur-2xl: 40px;

    --space-1: 0.25rem; /*  4px */
    --space-2: 0.5rem;  /*  8px */
    --space-3: 1rem;    /* 16px */
    --space-4: 1.5rem;  /* 24px */
    --space-5: 2rem;    /* 32px */
    --space-6: 3rem;    /* 48px */

    scrollbar-width: thin;
}


/* All Sides */
.m-1 { margin: var(--space-1); }
.m-2 { margin: var(--space-2); }
.m-3 { margin: var(--space-3); }
.m-4 { margin: var(--space-4); }
.m-5 { margin: var(--space-5); }
.m-6 { margin: var(--space-6); }
.m-auto { margin: auto; }

/* Top Only */
.mt-1 { margin-top: var(--space-1); }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }

/* Bottom Only */
.mb-1 { margin-bottom: var(--space-1); }
.mb-2 { margin-bottom: var(--space-2); }
.mb-3 { margin-bottom: var(--space-3); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

/* Left Only */
.ml-1 { margin-left: var(--space-1); }
.ml-2 { margin-left: var(--space-2); }
.ml-3 { margin-left: var(--space-3); }
.ml-4 { margin-left: var(--space-4); }
.ml-5 { margin-left: var(--space-5); }
.ml-6 { margin-left: var(--space-6); }

/* Right Only */
.mr-1 { margin-right: var(--space-1); }
.mr-2 { margin-right: var(--space-2); }
.mr-3 { margin-right: var(--space-3); }
.mr-4 { margin-right: var(--space-4); }
.mr-5 { margin-right: var(--space-5); }
.mr-6 { margin-right: var(--space-6); }

/* X-Axis (Left & Right) */
.mx-1 { margin-inline: var(--space-1); }
.mx-2 { margin-inline: var(--space-2); }
.mx-3 { margin-inline: var(--space-3); }
.mx-4 { margin-inline: var(--space-4); }
.mx-5 { margin-inline: var(--space-5); }
.mx-6 { margin-inline: var(--space-6); }
.mx-auto { margin-inline: auto; }

/* Y-Axis (Top & Bottom) */
.my-1 { margin-block: var(--space-1); }
.my-2 { margin-block: var(--space-2); }
.my-3 { margin-block: var(--space-3); }
.my-4 { margin-block: var(--space-4); }
.my-5 { margin-block: var(--space-5); }
.my-6 { margin-block: var(--space-6); }




/* All Sides */
.p-1 { padding: var(--space-1); }
.p-2 { padding: var(--space-2); }
.p-3 { padding: var(--space-3); }
.p-4 { padding: var(--space-4); }
.p-5 { padding: var(--space-5); }
.p-6 { padding: var(--space-6); }

/* Top Only */
.pt-1 { padding-top: var(--space-1); }
.pt-2 { padding-top: var(--space-2); }
.pt-3 { padding-top: var(--space-3); }
.pt-4 { padding-top: var(--space-4); }
.pt-5 { padding-top: var(--space-5); }
.pt-6 { padding-top: var(--space-6); }

/* Bottom Only */
.pb-1 { padding-bottom: var(--space-1); }
.pb-2 { padding-bottom: var(--space-2); }
.pb-3 { padding-bottom: var(--space-3); }
.pb-4 { padding-bottom: var(--space-4); }
.pb-5 { padding-bottom: var(--space-5); }
.pb-6 { padding-bottom: var(--space-6); }

/* Left Only */
.pl-1 { padding-left: var(--space-1); }
.pl-2 { padding-left: var(--space-2); }
.pl-3 { padding-left: var(--space-3); }
.pl-4 { padding-left: var(--space-4); }
.pl-5 { padding-left: var(--space-5); }
.pl-6 { padding-left: var(--space-6); }

/* Right Only */
.pr-1 { padding-right: var(--space-1); }
.pr-2 { padding-right: var(--space-2); }
.pr-3 { padding-right: var(--space-3); }
.pr-4 { padding-right: var(--space-4); }
.pr-5 { padding-right: var(--space-5); }
.pr-6 { padding-right: var(--space-6); }

/* X-Axis (Left & Right) */
.px-1 { padding-inline: var(--space-1); }
.px-2 { padding-inline: var(--space-2); }
.px-3 { padding-inline: var(--space-3); }
.px-4 { padding-inline: var(--space-4); }
.px-5 { padding-inline: var(--space-5); }
.px-6 { padding-inline: var(--space-6); }

/* Y-Axis (Top & Bottom) */
.py-1 { padding-block: var(--space-1); }
.py-2 { padding-block: var(--space-2); }
.py-3 { padding-block: var(--space-3); }
.py-4 { padding-block: var(--space-4); }
.py-5 { padding-block: var(--space-5); }
.py-6 { padding-block: var(--space-6); }

.g-1 {gap:var(--space-1);}
.g-2 {gap:var(--space-2);}
.g-3 {gap:var(--space-3);}
.g-4 {gap:var(--space-4);}
.g-5 {gap:var(--space-5);}
.g-6 {gap:var(--space-6);}

.cg-1 {column-gap:var(--space-1);}
.cg-2 {column-gap:var(--space-2);}
.cg-3 {column-gap:var(--space-3);}
.cg-4 {column-gap:var(--space-4);}
.cg-5 {column-gap:var(--space-5);}
.cg-6 {column-gap:var(--space-6);}

.rg-1 {row-gap:var(--space-1);}
.rg-2 {row-gap:var(--space-2);}
.rg-3 {row-gap:var(--space-3);}
.rg-4 {row-gap:var(--space-4);}
.rg-5 {row-gap:var(--space-5);}
.rg-6 {row-gap:var(--space-6);}



.z-0 {
    z-index: 0;
}

.z-1 {
    z-index: 1;
}
.z-2 {
    z-index: 2;
}

.z-6 {
    z-index: 6;
}

#preloader {
    position:fixed; 
    z-index:2000;
    top:0;left:0;bottom:0;right:0;
    opacity:1; 
    cursor:none;
    background-color: #000;
    display: grid;
    place-items: center;
    padding-bottom:4rem;
}


.preloader--loader {
    opacity:1; 
    transform: translateY(0);
    scale:1;
    transition: .7s .3s ease-out;
    animation: .9s 3.5s preFadeOut forwards;
    @starting-style {
        opacity:0; 
        transform: translateY(-10%);
        scale:0.8;
    }
}

@keyframes preFadeOut {
  from { opacity: 1; transform: translateY(0); }
  to { opacity: 0; transform: translateY(-50%);}
}

#preloader.fade-out {
  animation: preFadeOut 0.75s forwards;
  pointer-events: none; /* Prevent clicking through */
}


.flash-warning {

  border-radius: 6px;
  padding: 1.5rem 2rem;
  max-width: 900px;
  margin: 2rem auto 0;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  box-shadow: 0 0 30px rgba(179, 245, 11, 0.15);

}

.small-text a:any-link {
    color:var(--clr-primary);
}
.warning-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
  animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.2); }
}

.warning-text {
  color: #f3e8ff;
  font-size: 0.75rem;
  line-height:1.2;
}

.warning-text strong {
  display: block;
  color: #fbbf24;
  font-size: 0.95rem;
  margin-bottom: 0.25rem;
}

.warning-text a {
  color: var(--clr-primary);
  text-decoration: underline;
  cursor: pointer;
  transition: color.3s ease; 
}

.warning-text a:hover {
  color: #8b5cf6;
}

.warning-close {
  background: #f59e0b;
  color: #0f172a;
  border: none;
  padding: 0.5rem 1.5rem;
  border-radius: 40px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
  margin-top: 0.2rem;
}

.warning-close:hover {
  background: #d97706;
  transform: scale(1.05);
}

.warning-close:active {
  transform: scale(0.95);
}

@media (max-width: 640px) {
  .flash-warning {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1rem;
    margin: 1rem;
  }
  
  .warning-close {
    width: 100%;
  }
}



.block {display:block;}
.relative {position:relative;}
.absolute {position:absolute;}
.object-cover {
    width:100%;
    height:100%; 
    position:absolute;
    top:0; left:0; 
    z-index:3;
    object-fit: cover;
}
.object-cover:fullscreen {
    position:relative; 
    height:unset; 
    object-fit: unset;
}

@keyframes sectionFadeIn {
    0%, 10%, 20% {
      opacity: 0;
      transform: translateX(-50px);
    }
    70%, 80% {
      opacity: 1;
      transform: translateX(0px);

    }
    90%, 100% {
      opacity: 0.5;
      transform: translateX(0px);

    }
  
}

@keyframes mBsectionFadeIn {
    0%, 10% {
      opacity: 0;
      transform: translateX(-10px);
    }
    15%, 40% {
      opacity: 1;
      transform: translateX(0px);

    }
    50%, 100% {
      opacity: 0;
      transform: translateX(0px);

    }
  
}




.btn {
    border-width:2px;
    border-style:solid; 
    text-align:center;
    background-color: inherit;
    border-style:solid;
    text-decoration: unset;
    font-weight:bold;
    
}
a.btn:any-link {
    border-color: unset;
    color:inherit;
}
.btn-block {
    display:block; 
    
}

.btn.disabled, .btn:disabled {
    opacity:0.3; 
    cursor:not-allowed;
}
.btn-md {
    padding:.75rem 1.25rem;
    border-radius:.25rem;
    font-size:.9rem;
}
.btn-lg {
    font-size:1.1rem;
    padding:1.25rem 3rem;
    border-radius:.5rem;


}


.affiliates {
    flex-wrap:nowrap;
}
.affiliates div {
    flex-shrink:0 ;
}
.affiliates img {
    filter: brightness(200%);
    
}

.btn-primary {
    background-color: transparent;
    color:var(--clr-ink);
    border-color:var(--clr-ink);
}
.btn-hilight {
    background-color:var(--clr-primary);
    border-color:var(--clr-primary) !important;
    color:#ffffff;
    
}
.btn-filled {
    background-color:var(--clr-ink);
    border-color:var(--clr-ink) !important;
    color:var(--clr-grey-dark) !important;
}

.display {
    text-transform: uppercase;
    line-height: 1;
    font-family: var(--ff-display);

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

}
.gold-text {
    color: var(--color-gold);

}
.x-large-text {
    font-size:5rem;
    max-width:10ch;
}
.large-text {
    font-size: 3.5rem;
    max-width: 33ch;
}
.average-text {
    font-size: 1.5rem
}
.demilarge-text {
    font-size:2rem;
}
.semilarge-text {
    font-size:3rem;
    max-width: 23ch;
}
.small-text {
    font-size:.8rem;
}
.spaced-text {
    letter-spacing: 0.125rem;
}
.spacedish-text {
    letter-spacing:0.025rem;
}
.caps {
    text-transform: uppercase;
}

.heavy-weight {
    font-weight: var(--fw-bold);
}
.welter-weight {
    font-weight: var(--fw-semibold);
}

.normal-weight {
    font-weight: var(--fw-normal);
}
.light-weight {
    font-weight: var(--fw-light);
}
.text-center {
    text-align: center;
}
.wrap-pretty {
    text-wrap: balance;
}

.display-text {
    font-weight:var(--fw-bold);
    font-size:5rem;
}

.footer-title {
    font-size:1.3rem;
}


.lh-1 {
    line-height: 1.3;
}
.lh-2 {
    line-height: 1.5;
}


.w-ch30 {
    max-width:30ch;
}
.w-ch50 {
    max-width:50ch;
}
.badge {
    display:inline-block; 
    border:2px solid var(--clr-primary);
    padding:.2rem .5rem;
}

.show-card, .service-card {
    border:1px solid #99999955;
}
.show-card {
    display:grid; 
    grid-template-columns: 1fr;
}

h1,h2,h3,h4,h5,h6,section, div, table, ul, li, p {
    margin:0;
    padding:0;
}

p {
    font-weight: var(--fw-light);
    line-height:2;
    font-size:1rem;
    max-width:60ch;
}

ul,
ol {
  list-style: none;
}

html:focus-within {
  scroll-behavior: smooth;
}

a:not([class]) {
  text-decoration-skip-ink: auto;
}

button {
    cursor:pointer;
}
img,
picture,
svg {
  max-width: 100%;
  display: block;
}






body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;

  color: var(--clr-ink);
  background-color: var(--clr-background);
  font-family: var(--ff-sans);
  font-weight: var(--fw-normal);
  -webkit-font-smoothing: antialiased;
  padding:0;
  margin:0;
}

input:not(input[type='checkbox']),
textarea,
select {
  font: inherit;
  width:100%;
  padding:.95rem; 

  color:var(--clr-ink);
  position:relative;
    background-color:transparent;
  border:.0125rem solid var(--clr-ink);
  color:var(--clr-ink);
  
  &::placeholder {
    color: var(--clr-grey);
  }
  &.disabled {
    opacity:.3;
    pointer-events: none;
    cursor: not-allowed;
  }
  &.floating-label ~ label {
    position:absolute; 
    top:.95rem;
    left:1rem;
    transition: .3s ease;
    pointer-events: none;
  }
  &.floating-label:focus  ~ label,
&.floating-label:user-valid ~ label,
&.floating-label:autofill ~ label
{
    top:.2rem;
    font-size:.7rem;
    left:1rem;
  }

}
.gallery-load-thumb {
    overflow:hidden;
}
.gallery-load-thumb img {
    opacity:1; 
    transition: .7s .4s ease-out;
    scale:1;
    @starting-style {
        opacity:0;
        scale:.95;
    }
}
.gallery-mount {
    width:100%;
    position:relative;
}

label {
    color:#777;
}
.custom-checkbox-tag label {
    display:block;
    border:1px solid #ffffff33;;
    border-radius: var(--space-3);
    display:flex; 
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    padding: .25rem .45rem;
    font-size:.65rem;
    font-weight:var(--fw-bold);
    transition:.3s ease-out;
}
.custom-checkbox-tag input[type='checkbox'] {
    visibility:hidden; 
    width:0; 
    height:0;
}

.custom-checkbox-tag label:has(input:checked) {
    border-color:var(--clr-primary);
    color:var(--clr-ink);
}

form:has(.floating-label) .form-control {
    position:relative;
    margin-top:.251rem;
}

input[type="date"] {
    color-scheme: dark;
}

/* input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.5);
} */

input[type='date'].floating-label ~ label {
    top:.2rem !important;
    font-size:.7rem !important;
    left:1rem !important;
}


button:disabled {
    opacity:.3;
}

@keyframes kf_dialogOpen {
    0% {
        scale:0.75;
        opacity:0
    } 
    80% {
        scale:1.02;
    }
    100% {
        scale:1;
        opacity:1;
    }
}

@keyframes kf_dialogClose {
    0% {
        scale:1;
        opacity:1;
    }
   
    100% {
        scale:0.75;
        opacity:0
    } 
}

dialog {
    transition: .45s allow-discrete;
    transform-origin: 50% 50%;
    animation: .45s ease-out kf_dialogClose;
    border-radius:.5rem;
    border:none;
    position: fixed;
    top:0;
    left:0;
    z-index:50000;
    margin:1rem; 
    padding:0;
    background-color: transparent;
}
dialog[open] {
    animation: .45s ease-out kf_dialogOpen;

    display:grid; 
    place-items: center;
    width:calc(100% - 2rem);
    height:calc(100% - 2rem);

}
dialog[open]::backdrop {
    background-color:rgba(0,0,0,0.5);
    backdrop-filter: blur(20px);
    transition:.5s;
    @starting-style {
        background-color: rgba(0, 0, 0, 0);
        backdrop-filter: blur(0px);
    }
}
.dialog-overlay {
    width:100%; 
    height:100%;
    z-index:10001;
    position:absolute;
    display:grid; 
    justify-content: center;
    align-items: start;
    padding-block:4rem;
    padding-inline:2rem;
    color:#ffffff;
    font-size:4rem;
    pointer-events: none;
}

footer a:any-link {
    color:inherit; 

}


header {
    position:fixed;
    z-index:1001;
    right:0;
    top:0;
    padding:1rem;
    width:100%;
    
    & ul, & nav {
        display:flex;
        gap:1.25rem;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        border:none;
        width:100%;

    }
    & svg {
        pointer-events: inherit;
    }
    & button {
        background-color:transparent;
        border:none;
        outline:none;
    }

}


.nav-link {
    text-decoration: none;
    text-transform: capitalize;
    color:var(--clr-grey);
    transition: .3s ease-in-out;
    white-space: nowrap;
    font-weight: 700;
    font-size:1.65rem;
    display:block;
    padding:.25rem 0 .25rem 1.75rem;
    transition: color .4s ease-in, scale .4s ease-in;
    transform-origin: left center;
    &:hover {
        color:var(--clr-ink);
        scale:1.05;
    }
    &.nav-link--active {
        color:var(--clr-primary);
        pointer-events:none;
    }

}
.nav-link:focus-within {
    outline-width: 0px 0px 2px 0px;
    outline-color: var(--clr-primary);

}
.nav-logo {
    padding-top:.5rem;
    max-width:70px;
}
header .nav-logo, .mobile-menu .nav-logo {
    filter: brightness(0) invert(1);
}


.mobile-menu {
    border-top:1px solid var(--color-border-grey);
    background-color: var(--clr-background);
    color:var(--clr-ink);
    display:unset;
    width:min(50%, 350px);
    transition: translate .4s ease-out, opacity .4s ease-out;
    translate: 0 0;
    opacity:1;
    position: fixed;
    top:0;
    right:0;
    height:100%;
    max-height:100%;
    z-index:1002;
    padding-block:1rem;
    & button {
        border:none; 
        padding:1rem;
        background-color: transparent;
    }
    & .menu__body {
        display:grid; 
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        width:100%;
        height:100%;
        gap:1rem;
        justify-content: start;
        counter-reset: links 0;
        & li {
            position: relative;
            overflow:clip;
            & a {
                transform: translateY(0);
            transition: transform .45s .2s ease-out, opacity .45s .2s ease-out;

            }
        
            &::before {
                counter-increment: links;
                content: '0' counter(links) '.';
                position:absolute; 
                left:0; 
                top:1.15rem;
                font-weight:var(--fw-semibold);
                font-size:.8rem;
            }
        }
    }
    
}

.mobile-menu.hide {
    translate: 100% 0;
    opacity:0;
    transition: translate .4s .2s ease-out, opacity .4s .2s ease-out;
    & li a {
        transform: translateY(-100%);
        opacity:0;
        transition: transform .3s .0s ease-out, opacity .3s .0s ease-out;
    }


}

.mobile-menu.no-display {
    display:none;
    
}
.mobile-nav-toggle {
    border:none !important;
    outline:none !important;
}

.mobile-nav-toggle:focus {
    outline: 1px solid var(--color-gold);
    outline-offset: .5rem;
}





.grid {
    display:grid;
    
    
    &.full-height {
        height:100%;
    }
}
.bento-rows {
    grid-template-rows: 280px;
    grid-auto-flow: dense;
}
.bento-card {
    height:280px;
    border-radius:.75rem; 
    overflow:clip;
}
.bento-card:nth-of-type(1), .bento-card:nth-of-type(8n + 1) {
    grid-column: span 2;
}
.bento-card:nth-of-type(6n) {
    grid-column: span 2;
}
.bento-card:nth-of-type(8n) {
    grid-column:span 3;
}
.full-width {
    width:100%;
}
.flex {
    display: flex;

}
.wrap {
    flex-wrap:wrap;
}
.justify-center {
        justify-content: center;
    }
.justify-between {
    justify-content: space-between;
}
.align-center {
    align-items: center;
}
.align-start {
    align-items:start;
}
.align-end {
    align-items: end;
}
.grid.col-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid.col-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid.col-2--right {
    grid-template-columns: .45fr .65fr;

}
.grid.col-2--left {
    grid-template-columns: .65fr .45fr;

}
.grid.col-4 {
    grid-template-columns: repeat(4, 1fr);
}

.span-1 {
    grid-column: auto / span 1;

}
.span-2 {
    grid-column: auto / span 2;
}
.span-2-row {
    grid-row:span 2;
}

.section--grey {
    background-color: var(--clr-grey-dark);
}




@keyframes messageFadeOut {
    100% {
        opacity: 0;
        translate: 50% 0;
    }
}





.message-list {
    position: fixed;
    top:7rem;
    display:flex;
    flex-direction: column;
    gap:1rem;
    padding:1rem;
    z-index:999;
    
    & .message {
        padding:1rem;
        max-width:min(100%, 350px);
        font-size:.9rem;
        font-weight: var(--fw-semibold);
        color:var(--color-white);
        opacity:1;
        translate:0 0;
        transition: .3s ease-in;
        backdrop-filter: blur(var(--blur-2xl));
        border-radius: .5rem;
        &.message-success {
            background-color:var(--clr-success);
        }
        &.message-error {
            background-color: var(--clr-error);
        }
        &.fade-out {
            animation: messageFadeOut 1s 0s  forwards ease-out;
        }
        @starting-style {

            opacity:0;
            translate: -50% 0;
        }
        
    }
}



.coming-soon {
    position:relative; 
    width:100%;
    & img {
        width:100%;
        height:100%; 
        object-fit: cover;
        object-position: center center;
        z-index:0; 
        position:absolute;
        top:0; bottom:0; 
        overflow-x: clip;
        left:0; right:0;
    }
}
.overlay, .hero-overlay {
    position:absolute;
    z-index:5;
    width:100%;
    height:100%;
    top:0;left:0;
    &.lower-gradient {
        background:linear-gradient(to bottom, transparent, rgb(2,2,2))
    }
}

.hero-overlay {
    top:50%;
    height:50%;
    place-items: center;
    display:grid;
}

.hero-toggle-wrapper {
    position: absolute; 
    bottom:0; 
    left:0; 
    z-index:10;
    padding:1rem;
    display:flex; 
    gap: 3rem;
    & button {
        padding:.5rem;
        background-color: transparent;
        border: none;
    }
    & g {
        opacity:0;
        transition: opacity .3s ease;
    }
    & g.is-active {
        opacity:1;
    }

}

section.hero {
    min-height:100svh;
    position: relative;
    &.short {
        min-height:350px;
    }
    &.medium {
        min-height:75svh;
    }
}
.grey-bg {
    background-color: var(--clr-grey);
}
.bg-cover {
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
    object-fit: cover;
    width:100%;
    height:100%;

}
form {
    max-width:550px;
    margin-inline:auto;
}
form details {
  border:.0125rem solid var(--clr-ink);
  
  padding:.95rem; 

}
form summary {

}

.hero-content {
    display:grid; 
    grid-template-columns: 1fr;
    align-items: center;
    justify-content: center;
}
.split-section--left {
    background-color: var(--clr-ink);
    color:var(--clr-background);
}
.split-section-content {
    max-width: calc(var(--desktop-content) / 2);
    &.split-section-content--left {
        margin-left:auto;
        padding-right:2rem;

    }
    &.split-section-content--right {
        margin-right:auto;
        padding-left:2rem;
    }
}
@keyframes bannerAnim {
    from {
        transform: translateX(100%);
    } to {
        transform: translateX(-100%);
    }
}
.banner {
    z-index:7;
    background-color: #000;
    color:var(--clr-ink);
    font-weight:bold;
    position:sticky; 
    top:0; 
    width:100%; 
    padding:1rem 0;
    font-size:1rem;
    line-height: 1;
    overflow-x: clip;
    & span {
        display:block;
        animation: bannerAnim 20s linear  infinite both;
    }
}

.benefit-card {
    display:grid;
    grid-template-columns: 1;
    justify-content: center;
    text-align:center;
}


 /* --- Cookie Consent Banner (for demonstration) --- */
    .cookie-banner {
      position: fixed;
      bottom: 2rem;
      left: 50%;
      transform: translateX(-50%);
      max-width: 700px;
      width: 90%;
      background: #282b34;
      color: #e2e8f0;
      padding: 1.5rem 2rem;
      border-radius: 18px;
      box-shadow: 0 10px 40px rgba(111, 195, 42, 0.3);
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: 1rem;
      z-index: 1000;
      transition: opacity 0.4s ease, transform 0.4s ease;
      @starting-style {
        opacity:0;
      }
    }

    .cookie-banner.hidden {
      opacity: 0;
      transform: translateX(-50%) translateY(20px);
      pointer-events: none;
    }
    .cookie-banner p {
      color: #e2e8f0;
      margin: 0;
      font-size: 0.95rem;
      flex: 1;
      min-width: 200px;
    }
    .cookie-banner a {
      color: #a78bfa;
      text-decoration: underline;
    }
    .cookie-banner .btn-group {
      display: flex;
      gap: 0.75rem;
      flex-wrap: wrap;
    }
    .cookie-banner button {
      background-color: transparent;
      border: 1px solid #475569;
      color: #e2e8f0;
      padding: 0.5rem 1.5rem;
      border-radius: 40px;
      font-weight: 600;
      font-size: 0.9rem;
      cursor: pointer;
      transition: background-color 0.2s, border-color 0.2s;
    }
    .cookie-banner button:hover {
      background: #1e293b;
    }
    .cookie-banner .btn-accept {
      background-color: #8b5cf6;
      border-color: #8b5cf6;
      color: #fff;
    }
    .cookie-banner .btn-accept:hover {
      background-color: #7c3aed;
      border-color: #7c3aed;
    }

.poster-img {
    width:100%;
    aspect-ratio: 1/1;
    background:linear-gradient(45deg, var(--clr-primary), #ed4158);   
}

.card-thumb--horizontal {
    width:100%;
    aspect-ratio: 16/ 9;
    background:linear-gradient(45deg, var(--clr-primary), #ed4158);  
    position:relative; 
}

.seperator {
    width:100%; 
    height:1px;
    background-color: #99999955;
}

.window-tile {
    aspect-ratio: 5/4;
    padding:var(--space-5);
}
.window-tile-title {
    font-weight:var(--fw-semibold);
    font-size:1.75rem;
}




@keyframes scrollIndicator {
     0% {
    transform: translateY(0);
    opacity: 1;
  }
  10% {
    transform: translateY(6px);
  }
  25% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(0);
    opacity: 0.3;
  }
  55% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}


#scroll-indicator {
    animation: scrollIndicator 2.8s ease-in-out infinite;
    position:relative; 
    top:40px;
}


.rotating-word-wrapper {
            display: flex;
            justify-content: center;
            align-items: baseline;
            flex-wrap: wrap;
            gap: 0;
            text-align: center;
            padding-bottom:7.5rem;
        }

        /* the span that will contain dynamically built letters */
        .dynamic-word {
            display: inline-flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            text-align: center;
            gap: 0.08rem;
            font-weight: 800;
            font-size: clamp(2rem, 8vw, 3.2rem);
            letter-spacing: 0.02em;
            background-clip: text;
            -webkit-background-clip: text;
            color: #fff7f2;
            min-height: 6rem;
        }

        /* each letter span base styles */
        .dynamic-word span {
            display: inline-block;
            opacity: 0;            /* starts hidden, animation will reveal */
            transform: scale(0) rotateX(0deg); /* initial tiny & flat */
            transform-origin: center center;
            will-change: transform, opacity;
            animation: flipLetter3D 0.6s ease-in forwards;
            /* each letter will get custom animation-delay via JS inline style */
        }

        /* 3D horizontal axis flip + scale + opacity keyframes */
        @keyframes flipLetter3D {
            0% {
                opacity: 0.5;
                transform: scale(0.7) rotateX(-90deg);
                filter: blur(2px);
            }
           
           
            100% {
                opacity: 1;
                transform: scale(1) rotateX(0deg);
                filter: blur(0);
            }
        }


.content {
    max-width:var(--desktop-content);
    margin-inline:auto;
    padding-inline:1rem;
}

.content--left {
    max-width:calc(var(--desktop-content) / 2);
    margin-left:auto;

    
}

.collapse-grid__wrapper {
    padding:4rem 1rem;
    container-type: inline-size;
    container-name: collapse-grid;
}

.collapse-grid {
    display:grid; 
    
    /* Desktop default: 3 equal columns */
    grid-template-columns: repeat(3, 1fr);
    grid-template-areas: "a b c";
    align-items:center;
    gap:2rem;
}
.collapse-grid p {
    color: var(--clr-grey-light);
    font-size:.9rem;
}
.collapse-grid__title {
    grid-area: a;
}
.collapse-grid__mid {
    grid-area: b;
}
.collapse-grid__end {
    grid-area: c;
}



.scroll-sticky-item {
    position:sticky; top:10rem;
}
.scroll-section-img {
    width:100%; aspect-ratio:16/9; background-color:#222222; border-radius:2rem; transform-origin:50% 50%;  overflow:clip;
    transform:rotate(var(--rotate));

    & img, & div {
        border-radius:2rem;
    }
}


.scroll-text-section {
    height:150svh; display:grid; align-items:center; position:relative;
}


.overlay-section__text {
    margin-left:-50%;
    backdrop-filter: blur(5px);
    animation-timeline: view();
    animation-name: sectionFadeIn;
        padding-inline: var(--space-3);
        padding-block: var(--space-5);
    
}

.contact-socials {
    margin-top:4rem;
}

.contact-socials svg {
 width:38px;
 fill:#ffffff;
}

@container collapse-grid (max-width: 1023px) {
    .collapse-grid {
        grid-template-columns: repeat(2, 1fr);
        grid-template-areas:
            "a a"
            "b c";
    }
}

@container collapse-grid (max-width: 767px) {
    .collapse-grid {
        grid-template-columns: 1fr;
        grid-template-areas:
            "a"
            "b"
            "c";
    }
}


@media(min-width:1035px) {
    .lg-hide {
        display:none !important;
    }
    .lg-h-100vh {
        min-height:100vh;
    }
    .lg-max-h-100vh {
        max-height: 100vh;
    }

    .lg-pr-3 {
        padding-right:var(--space-3);
    }
}
@media (max-width:1024px) {
    .md-hide {
        display: none !important;
    }
    .md-show {
        display:unset;
    }
    .col-2.md-collapse,
    .grid.col-2--left.md-collapse,
    .grid.col-2--right.md-collapse,
    .grid.col-3.md-collapse {
        grid-template-columns: 1fr ;
    }
    .grid.md-col-2 {
        grid-template-columns: 1fr 1fr;
    }
    .content, header.content {
        max-width:980px !important;

    }
    .card-stack {
        justify-self: stretch;
        gap:2rem;
        padding-bottom:2rem;
    }
}

@media (max-width:768px) {
     .grid.md-hide {
        display: grid !important;
    }
    .gallery {
        min-height: 270px;
    }
    .x-large-text {
        font-size:3.7rem;
    }
    .large-text {
        font-size:2rem;
        text-wrap:balance;
    }
    .semilarge-text {
        font-size: 2rem;
    }
    .sm-hide {
        display:none !important;
    }
   /*  .grid.col-2, .grid.2.5remcol-2--left, .grid.col-2--right, .grid.col-3,
    .grid.col-3.md-col-2 {
        grid-template-columns : 1fr;
    } */
     .grid.sm-col-2 {
        grid-template-columns : 1fr 1fr;

     }
     .grid.sm-col-1 {
        grid-template-columns : 1fr !important;

     }

     
    .nav-logo {
    max-width: 100px;
    }
    .p-6.sm-p-3, .p-5.sm-p-3, .p-4.sm-p-3, .sm-p-3 {
    padding:var(--space-3) !important;
    }
    .py-6.sm-py-3, .py-5.sm-py-3, .py-4.sm-py-3, .sm-py-3 {
    padding-block:var(--space-3) !important;
    }

    .p-6.sm-p-0, .p-5.sm-p-0, .p-4.sm-p-0, .sm-p-0 {
    padding:0 !important;
    }
     .p-6.sm-p-2, .p-5.sm-p-2, .p-4.sm-p-2, .sm-p-2 {
    padding:var(--space-2) !important;
    }
    .shadow-4.sm-shadow-0 {
        box-shadow: none;
    }
    .my-6.sm-my-3 {
        margin-block:var(--space-3) !important;
    }
    .g-6.sm-g-3, .g-5.sm-g-3, .g-4.sm-g-3 {
        gap: var(--space-3) !important;
    }
    .g-6.sm-g-2, .g-5.sm-g-2, .g-4.sm-g-2 {
        gap: var(--space-2) !important;
    }
    .sm-text-center {
        text-align: center !important;
    }
    .sm-transparent {
        border:none;
        background-color: transparent !important;
    }
    .sm-span-1 {
        grid-column: span 1;
    }
    .card.sm-inline {
        display: grid; 
        grid-template-columns: repeat(2, 1fr);
        max-width:100%;
        & .card__image {
            aspect-ratio: unset;
        }
    }
    .text-section {
        padding-inline:.5rem;
    }

    .grid.col-4 {
        grid-template-columns: 1fr 1fr;
    }

    .hero__body p:not(.review) {
        padding-right:1.5rem;
    }
    .welcome {
        padding-top:1rem;
    }
    section .cta, form .cta {
        width:100%;
        max-width:350px; 
        margin-inline:auto;
    }
    section.hero {
        padding:0;
    }
    .hero__body {
        position: relative;
        height:100%;
    }
    .hero-content {
        padding:1rem;
    }
    .hero-actions {
        padding-top:2rem;
    }
    .short, .medium {
        padding-bottom:2rem;
    }
    .card-stack {
        margin-inline:auto;
    }
    form {
        padding-inline:1rem;
    }
    .coming-soon {
        min-height: calc(100svh - 3rem);
        padding-bottom:3rem; ;
    }
    .mobile-menu {
    width:min(80%, 350px);

    }

    .benefit-card {
        grid-template-columns: 100px 1fr;
        text-align:left;
    }

    .content--left h3, .content--left p {
        text-align: center;
        margin-inline:auto;
        padding-inline:var(--space-4) !important;
    }

    .content--left p {
        padding-inline:var(--space-5) !important;

    }

     .cookie-banner {
        padding: 1.2rem 1.2rem;
        bottom: 1rem;
        width: 95%;
        flex-direction: column;
        text-align: center;
      }
      .cookie-banner .btn-group {
        justify-content: center;
      }
    
   

    .overlay-section__text {
        margin-left: 0;
        animation-name: none;
        padding-inline: 0;
        padding-block: var(--space-1);
    }
    .window-tile {
        aspect-ratio: unset;
        padding:var(--space-3);
    }
    .window-tile-title {
        font-size:1rem;
    }
    .display-text {
        font-size:2rem;
    }

    .scroll-sticky-item {
    position:relative; top:0;
}

.scroll-text-section {
    height:60svh; padding:1rem; display:grid; align-items:center; position:relative;
    text-align:center;
    font-size:.9rem;
}

:root {
    --fs-base: 1.4rem;
}

.bento-card {
    height:280px;
    border-radius:.75rem; 
    overflow:clip;
}
.bento-card:nth-of-type(1), .bento-card:nth-of-type(8n + 1) {
    grid-column: span 2;
}
.bento-card:nth-of-type(6n) {
    grid-column: span 1;
}
.bento-card:nth-of-type(8n) {
    grid-column:span 2;
}


    
}

@media (max-width:480px) {

     .x-large-text {
        font-size:3.2rem;
    }
    .large-text {
        font-size:1.7rem;
        text-wrap:balance;
    }
    .semilarge-text {
        font-size: 1.5rem;
    }
    .demilarge-text {
        font-size:1.3rem;
    }

.scroll-section-img {
    border-radius: 1rem 1rem;
    transform: rotate(0deg);
    & img, & div {
        border-radius:1rem;
    }
}
form {
    padding-inline:0;
}
input:not(input[type='checkbox']),
textarea,
select { 
    padding:.85rem;
    font-size:.9rem;
}

.custom-checkbox-tag label {
    font-size:.65rem;
}
    
}