/*


=================
Table of Contents
=================
01. GENERAL
    1.1 - Basics Styles
    1.2 - BrickWall Styles
    1.3 - Selection

02. TYPOGRAPHY
    2.1 - Basics Typography
    2.2 - Blockquote
    2.3 - Lists
    2.4 - Marked List
    2.5 - Headings
    2.6 - Alignment

03. FORMS AND FIELDS

04. HEADER
    4.1 - General Header
    4.2 - Main Menu
    4.3 - Sub-Menu
    4.4 - Mobile Menu Container

05. MAIN CONTAINER

06. FOOTER
    6.1 - General Footer
    6.2 - Footer Widgets
    6.3 - Footer Line
    6.4 - Socials List

07. HERO SECTIONS
    7.1 - Info Line
    7.2 - Layout 01
    7.3 - Layout 02
    7.4 - Layout 03
    7.5 - Layout 04
    7.6 - Layout 05
    7.7 - Layout 06
    7.8 - Layout 07
    7.9 - Layout 08

08. SCROLLING ELEMENTS
    8.1 - Smooth Scroll
    8.2 - Mask Fill Text
    8.3 - Expanded Section

09. ELEMENTS
    9.1 - Base Grid
    9.2 - Lazy Loader
    9.3 - Masked Block
    9.4 - Icons
    9.5 - Block Item
    9.6 - Tags List
    9.7 - Link with Arrow
    9.8 - Icon Link
    9.9 - Square Button
   9.10 - Price Card
   9.11 - Marquee List
   9.12 - Counter Block
   9.13 - Porftolio Grid Card
   9.14 - Portfolio Short List
   9.15 - Testimonials Grid Card
   9.16 - Carousel Card
   9.17 - List with Preview
   9.18 - Carousel (Swiper)
   9.19 - Detailed List
   9.20 - Image Box
   9.21 - Icon Box
   9.22 - Grid More Masked
   9.23 - Price Table Card
   9.24 - FAQ List
   9.25 - Toggles
   9.26 - Swiper Slider
   9.27 - Fullscreen Slider
   9.28 - Portfolio Next Post
   9.29 - Bento Grid Block
   9.30 - Meta List
   9.31 - Masked CTA
   9.32 - Member Contacts
   9.33 - Infinite List
   9.34 - Column Listing Item
   9.35 - Grid CTA
   9.36 - CTA with Image
   9.37 - Right Click Protection

10. PHOTOSWIPE

11. HOVER STATES

12. ANIMATIONS
    12.1 - Keyframes
    12.2 - Entrance Animations

====================================== */

/** ===========
    01. GENERAL
    =========== */
    @import url("stg.css");

    * {
       box-sizing: border-box;
       outline: none;
    }
    :root {
        --synthos-border-mask: linear-gradient(#000, #000) content-box content-box, linear-gradient(#000, #000);
    }
    body,
    html {
       padding: 0;
       margin: 0;
       min-height: 100%;
       max-width: 100vw;
       height: 100%;
    }
    body {
        overflow-x: hidden;
        position: relative;
        -webkit-tap-highlight-color: transparent;
        font-family: var(--synthos-t-content-ff);
        font-size: var(--synthos-t-content-fs);
        line-height: var(--synthos-t-content-lh);
        letter-spacing: var(--synthos-t-content-ls);
        font-weight: var(--synthos-t-content-fw);
        color: var(--synthos-s-text);
        background: var(--synthos-s-body-bg);
    }
    body.is-unloading {
        pointer-events: none;
    }
    body.synthos-fullscreen-page {
        overflow: hidden;
    }
    body.synthos-fullscreen-page {
        height: 100svh;
    }
    body.is-loaded {
        opacity: 1;
    }
    body.is-unloaded {
        mask-position: 175%;
        transition: mask-position 0.75s;
    }
    iframe {
        max-width: 100%;
        border-radius: var(--synthos-default-br);
    }
    iframe.synthos-google-map {
        border-radius: var(--synthos-small-br);
    }
    img,
    video {
        display: block;
        max-width: 100%;
        height: auto;
    }
    img,
    video {
        border-radius: var(--synthos-default-br);
    }
    header img,
    header video,
    footer video,
    footer img,
    .synthos-logo img {
        border-radius: unset;
    }
    .synthos-parallax-media:not([class*='synthos-grid']),
    .synthos-parallax-media .st-lazy-wrapper,
    .synthos-parallax-image {
        overflow: hidden;
        border-radius: var(--synthos-default-br);
    }
    .pswp {
        display: none;
    }
    .pswp.pswp--open {
        display: block;
    }
    
    [data-bg-src] {
        background: var(--synthos-s-container-bg) no-repeat center;
        background-size: cover;
        position: relative;
    }
    .synthos-grid-item-link {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        z-index: 7;
        border-radius: inherit;
    }
    
    /* === BrickWall Styles === */
    .brickwall-grid {
        position: relative;
    }
    .brickwall-grid > div {
        position: absolute;
        left: 0;
        top: 0;
    }
    .brickwall-grid > div.is-appended,
    .brickwall-grid > div.is-prepended {
        transform: scale(0);
    }
    .brickwall-grid:not(.animation--none) > div.brickwall-item {
        transition: transform 0.4s, opacity 0.4s;
        will-change: transform, opacity;
    }
    .brickwall-grid.animation--slow > div.brickwall-item {
        transition: transform 0.8s, opacity 0.8s;
        will-change: transform, opacity;
    }
    
    /* === Selection === */
    ::selection {
        color: var(--synthos-s-heading);
        background-color: var(--synthos-s-accent);
    }
    img,
    a img,
    .synthos-counter,
    header#synthos-header,
    .swiper,
    .disable-selection {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -khtml-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /** ==============
        02. TYPOGRAPHY
        ============== */
    .synthos-highlight {
        color: var(--synthos-s-heading);
    }
    strong {
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-heading);
    }
    p {
        margin: 0 0 var(--synthos-t-content-lh) 0;
    }
    .synthos-large-text {
        font-size: var(--synthos-t-large-fs);
        line-height: var(--synthos-t-content-lh);
        color: var(--synthos-s-heading);
    }
    p:last-child {
        margin: 0;
    }
    p:empty {
        display: none;
    }
    a {
        position: relative;
    }
    
    a,
    a:focus,
    a:visited {
        text-decoration: none;
        color: var(--synthos-s-text-accent);
    }
    a {
        transition: color 0.3s;
    }
    address {
        margin: 0 0 28px 0;
    }
    ins,
    tt,
    kbd,
    code,
    pre {
        padding: 7px 15px 8px 15px;
        display: inline-block;
        margin: 10px 0;
        max-width: 100%;
    }
    tt,
    kbd,
    code {
        margin: 0 5px;
    }
    abbr {
        text-transform: uppercase;
    }
    ins, acronym, abbr {
        text-decoration: none;
    }
    kbd,
    code {
        margin: 10px 5px;
        font-family: monospace;
    }
    pre {
        white-space: pre-wrap;
        margin-bottom: 1.65em;
    }
    hr {
        border: none;
        width: 100%;
        height: 1px;
        background: var(--synthos-c-border-gradient);
        margin: 1.65em 0;
    }
    hr:first-child {
        margin-top: 0;
    }
    hr:first-child {
        margin-bottom: 0;
    }
    label,
    blockquote cite,
    .synthos-label {
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-meta-fw);
        letter-spacing: var(--synthos-t-meta-ls);
        color: var(--synthos-s-heading-fade);
        text-transform: uppercase;
        margin-bottom: 4px;
    }
    sup {
        font-size: 0.6em;
        margin-right: 2px;
        display: inline-block;
        transform: translateY(0.05em);
    }
    
    .synthos-title-with-label h1 {
        margin-bottom: 0;
    }
    .synthos-title-with-label .synthos-label:first-child {
        display: block;
        margin-bottom: var(--stg-xs-gap);
    }
    .synthos-title-with-label .synthos-label:last-child {
        display: block;
        margin-top: 4px;
        margin-bottom: 0;
    }
    
    .is-dropcap::first-letter {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        line-height: var(--synthos-t-h2-lh);
        color: var(--synthos-s-heading);
        font-size: var(--synthos-t-h2-fs);
        letter-spacing: var(--synthos-t-h2-ls);
        display: block;
        float: left;
        margin: -6px 16px -8px 0;
    }
    
    /* Blockquote */
    blockquote cite {
        opacity: 1;
        position: relative;
    }
    blockquote cite::before {
        content: '';
        width: 8px;
        height: 2px;
        background-color: var(--synthos-s-heading);
        display: inline-block;
        margin-right: 8px;
        vertical-align: middle;
        transform: translateY(-1px);
    }
    cite {
        text-align: right;
        display: block;
        font-style: normal;
    }
    
    /* === Lists === */
    ol,
    ul {
        padding: 0;
        margin: 0;
    }
    ol:last-child,
    ul:last-child {
        margin: 0;
    }
    ol li,
    ul li {
        padding: 0;
        margin: 0;
        list-style: disc;
    }
    
    /* === Marked List === */
    .synthos-marked-list {
        padding: 0;
        margin: 0;
    }
    .synthos-marked-list li {
        list-style: none;
        padding: 0 0 0 28px;
        margin: 0 0 1.5em 0;
        position: relative;
    }
    .synthos-marked-list li:last-child {
        margin: 0;
    }
    .synthos-marked-list:not(:last-child) {
        margin: 0 0 1.5em 0;
    }
    .synthos-marked-list li::before {
        content: '';
        width: 16px;
        height: 12px;
        display: block;
        position: absolute;
        left: 0;
        top: 5px;
        background: var(--synthos-s-heading);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        -webkit-mask-image: var(--icon-check);
        mask-image: var(--icon-check);
    }
    
    /* === Headings === */
    h1, h2, h3, h4, h5, h6 {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-heading);
    }
    h1, h2, h3 {
        margin: 0 0 var(--stg-gap) 0;
    }
    h4, h5, h6 {
        margin: 0 0 var(--stg-small-gap) 0;
    }
    h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child {
        margin-bottom: 0;
    }
    h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
        color: var(--synthos-s-heading);
    }
    h1 sup, h2 sup, h3 sup, h4 sup, h5 sup, h6 sup {
        opacity: 0.25;
    }
    .synthos-accent {
        color: var(--synthos-s-text-accent);
    }
    .is-accented .synthos-accent {
        color: var(--synthos-s-accented-text);
    }
    
    .synthos-page-title {
        display: block;
        width: 100%;
    }
    .synthos-post-title {
        margin-bottom: 0;
    }
    .synthos-post-title:not(:last-child),
    .synthos-page-title:not(:last-child) {
        margin-bottom: var(--stg-gap);
    }
    .synthos-title-with-meta span:first-child {
        margin-bottom: 4px;
        display: block;
    }
    .synthos-title-with-meta span:last-child {
        margin-top: 4px;
        display: block;
    }
    h1.synthos-page-title {
        margin-bottom: calc( -1 * var(--stg-small-gap) );
    }
    .synthos-section-title {
        margin-bottom: var(--stg-large-gap);
    }
    .synthos-section-title p.is-short {
        max-width: calc(0.5 * var(--stg-container-width));
        margin: 0 auto;
    }
    .synthos-page-title.is-large {
        font-size: calc(1.2 * var(--synthos-t-h1-fs));
        line-height: calc(1.2 * var(--synthos-t-h1-lh));
    }
    h1 {
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
        margin: var(--synthos-t-h1-margin);
    }
    h2 {
        font-size: var(--synthos-t-h2-fs);
        letter-spacing: var(--synthos-t-h2-ls);
        line-height: var(--synthos-t-h2-lh);
        margin: var(--synthos-t-h2-margin);
    }
    h3 {
        font-size: var(--synthos-t-h3-fs);
        letter-spacing: var(--synthos-t-h3-ls);
        line-height: var(--synthos-t-h3-lh);
        margin: var(--synthos-t-h3-margin);
    }
    h4 {
        font-size: var(--synthos-t-h4-fs);
        letter-spacing: var(--synthos-t-h4-ls);
        line-height: var(--synthos-t-h4-lh);
        margin: var(--synthos-t-h4-margin);
    }
    .synthos-block h4 {
        margin-bottom: var(--stg-gap);
    }
    h5 {
        font-size: var(--synthos-t-h5-fs);
        letter-spacing: var(--synthos-t-h5-ls);
        line-height: var(--synthos-t-h5-lh);
        margin: var(--synthos-t-h5-margin);
    }
    h6 {
        font-size: var(--synthos-t-h6-fs);
        letter-spacing: var(--synthos-t-h6-ls);
        line-height: var(--synthos-t-h6-lh);
        margin: var(--synthos-t-h6-margin);
    }
    .stg-vertical-space-between > h1,
    .stg-vertical-space-between > h2,
    .stg-vertical-space-between > h3,
    .stg-vertical-space-between > h4,
    .stg-vertical-space-between > h5,
    .stg-vertical-space-between > h6 {
        margin-bottom: 0;
    }
    .align-center h1,
    .align-center h2,
    .align-center h3,
    .align-center h4,
    .align-center h5,
    .align-center h6 {
        margin-left: auto;
        margin-right: auto;
    }
    .synthos-meta {
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-heading-fw);
        font-family: var(--synthos-t-heading-ff);
        letter-spacing: var(--synthos-t-meta-ls);
        text-transform: uppercase;
        color: var(--synthos-s-heading-fade);
        margin-bottom: calc(0.5 * var(--stg-xs-gap));
    }
    .synthos-meta.synthos-highlight {
        color: var(--synthos-s-heading);
    }
    .synthos-meta > a,
    .synthos-meta > span {
        color: var(--synthos-s-heading);
    }
    
    /* === Alignment === */
    .align-left {
        text-align: left;
    }
    .align-center {
        text-align: center;
    }
    .align-right {
        text-align: right;
    }
    .align-center img {
        margin-left: auto;
        margin-right: auto;
    }
    .align-right img {
        margin-left: auto;
    }
    
    /** ====================
        03. FORMS AND FIELDS
        ==================== */
    label {
        transition: opacity 0.2s;
        display: block;
        margin-bottom: 8px;
    }
    label.in-focus {
        opacity: 1;
    }
    input,
    textarea {
        width: 100%;
        display: block;
        font-family: var(--synthos-t-content-ff);
        font-weight: var(--synthos-t-content-fw);
        font-size: var(--synthos-t-input-fs);
        line-height: 1em;
        letter-spacing: var(--synthos-t-content-ls);
        border: 1px solid var(--synthos-s-border);
        border-radius: var(--synthos-input-br);
        background: var(--synthos-s-container-bg);
        padding: var(--synthos-input-spacing);
        color: var(--synthos-s-text);
        transition: color 0.3s, border-color 0.3s, box-shadow 0.3s;
        box-shadow: 0 0 8px transparent;
    }
    input:focus,
    textarea:focus {
        border-color: var(--synthos-s-accent);
        color: var(--synthos-s-heading);
        box-shadow: 0 8px 16px var(--synthos-s-box-shadow);
    }
    input:not(:last-child),
    textarea:not(:last-child) {
        margin-bottom: var(--synthos-input-gap);
    }
    textarea {
        line-height: var(--synthos-t-input-lh);
        height: 191px;
        resize: vertical;
    }
    input[type="button"],
    input[type="reset"],
    input[type="submit"],
    button:not([class*='pswp']),
    a.synthos-button {
        font-family: var(--synthos-t-content-ff);
        font-weight: var(--synthos-t-content-fw);
        font-size: var(--synthos-t-button-fs);
        line-height: 1;
        padding: var(--synthos-button-spacing);
        display: inline-block;
        color: var(--synthos-s-accented-text);
        background: var(--synthos-s-accent);
        border-radius: var(--synthos-button-br);
        border: 1px solid var(--synthos-s-border-accent);
        transition: background-color 0.3s;
        cursor: pointer;
    }
    a.synthos-button.is-secondary,
    .synthos-square-button.is-secondary {
        background: transparent;
        transition: background-color 0.3s, border-color 0.3s;
        border-color: var(--synthos-s-heading);
    }
    input[type="button"].is-fullwidth,
    input[type="reset"].is-fullwidth,
    input[type="submit"].is-fullwidth,
    button.is-fullwidth,
    .synthos-button.is-fullwidth {
        width: 100%;
        display: block;
        text-align: center;
    }
    
    /* === Contact Form === */
    form.synthos-contact-form {
        box-shadow: 0 8px 16px var(--synthos-s-box-shadow);
        width: 100%;
        transition: transform 0.3s;
        will-change: transform;
    }
    .synthos-form-content {
        transition: opacity 0.3s;
    }
    form.synthos-contact-form.is-busy .synthos-form-content {
        opacity: 0.5;
    }
    .synthos-contact-form:not(.is-short) [type="submit"] {
        margin-bottom: 0;
        width: 100%;
    }
    .synthos-form-spinner {
        width: 48px;
        height: 48px;
        border: 2px solid var(--synthos-s-border-mute);
        border-top-color: var(--synthos-s-heading);
        border-radius: 50%;
        animation: sta_spin 1s infinite linear;
        pointer-events: none;
        position: absolute;
        z-index: 15;
        top: calc(50% - 24px);
        left: calc(50% - 24px);
        display: block;
        will-change: transform, opacity;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .synthos-contact-form.is-busy .synthos-form-spinner {
        opacity: 1;
    }
    .synthos-contact-form.is-busy {
        transform: scale(0.95);
        pointer-events: none;
    }
    .synthos-contact-form.is-error {
        animation: sta_shake 0.3s linear;
    }
    .synthos-contact-form__response {
        padding-top: var(--stg-gap);
        text-align: center;
        position: static;
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-meta-fw);
        letter-spacing: var(--synthos-t-meta-ls);
        color: var(--synthos-s-heading);
        text-transform: uppercase;
        width: 100%;
        display: none;
    }
    .is-short .synthos-contact-form__response {
        position: absolute;
        top: 100%;
        left: 0;
    }
    .synthos-masked-cta .synthos-contact-form__response {
        top: auto;
        left: var(--stg-large-gap);
        bottom: calc( 0.5 * (var(--stg-large-gap) - var(--synthos-t-content-lh)) );
    }
    
    /** ==========
        04. HEADER
        ========== */
    #synthos-header {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        z-index: 111;
        background: var(--synthos-s-nav);
    }
    #synthos-header.is-sticky {
        position: fixed;
    }
    #synthos-header.is-frosted {
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }
    #synthos-header::after {
        content: '';
        width: 100%;
        height: 1px;
        display: block;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        bottom: 0;
        left: 0;
    }
    #synthos-header::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient( 0deg, transparent 25%, var(--synthos-s-body-bg) 100%);
        display: block;
    }
    .no-header-border #synthos-header::after {
        display: none;
    }
    .synthos-header-inner {
        padding: var(--synthos-header-spacing) 0;
        min-height: 44px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: var(--stg-container-width);
        margin: 0 auto;
        position: relative;
        z-index: 5;
    }
    .synthos-mobile-header-inner {
        display: none;
    }
    
    /* === Main Menu === */
    .synthos-active-menu-ind {
        position: absolute;
        width: calc(var(--active-width) - 0.5 * var(--synthos-menu-gap));
        height: 2px;
        background-color: var(--synthos-c-menu-active);
        border-radius: 1px;
        left: calc(var(--active-left) + 0.25 * var(--synthos-menu-gap));
        bottom: 0;
        z-index: 2;
    }
    .synthos-active-menu-ind::before {
        content: '';
        height: var(--st-header-height);
        width: 200%;
        background: radial-gradient(ellipse at center bottom, var(--synthos-c-menu-active) 10%, transparent 60%) no-repeat bottom center;
        display: block;
        position: absolute;
        bottom: 100%;
        left: -50%;
        opacity: 0.1;
    }
    nav.synthos-nav ul.main-menu {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: calc(0.5 * var(--synthos-menu-gap));
        --stea-move: var(--stg-small-gap);
    }
    ul.main-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
        font-family: var(--synthos-t-menu-ff);
        font-weight: var(--synthos-t-menu-fw);
        font-size: var(--synthos-t-menu-fs);
        line-height: var(--synthos-t-menu-lh);
        position: relative;
    }
    ul.sub-menu li {
        font-family: var(--synthos-t-submenu-ff);
        font-weight: var(--synthos-t-submenu-fw);
        font-size: var(--synthos-t-submenu-fs);
        line-height: var(--synthos-t-submenu-lh);
    }
    ul.main-menu li.synthos-menu-divider {
        position: relative;
        padding: 12px 0;
        height: 1px;
        pointer-events: none;
    }
    ul.main-menu li.synthos-menu-divider::after {
        content: '';
        width: 100%;
        height: 1px;
        display: block;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        left: 0;
        top: 12px;
        opacity: 0.5;
    }
    nav.synthos-nav ul.main-menu > li > a {
        padding: calc(0.25 * var(--synthos-menu-gap));
    }
    ul.main-menu a {
        color: var(--synthos-c-menu);
        display: block;
        transition: color 0.3s;
    }
    ul.main-menu li.current-menu-parent > a,
    ul.main-menu li.current-menu-item > a,
    ul.main-menu li.current-menu-ancestor > a {
        color: var(--synthos-c-menu-active);
        font-weight: var(--synthos-t-heading-fw);
    }
    #synthos-header ul.sub-menu > li.current-menu-item a::after,
    #synthos-header ul.sub-menu > li.current-menu-parent a::after {
        content: '';
        position: absolute;
        width: 2px;
        height: calc(100% - 16px);
        left: -8px;
        top: 8px;
        background: var(--synthos-c-menu-active);
        border-radius: 1px;
    }
    ul.main-menu li.menu-item-has-children > a::after {
        content: '';
        width: var(--synthos-t-menu-fs);
        height: var(--synthos-t-menu-fs);
        background: var(--synthos-c-menu);
        transition: background-color 0.3s;
        display: inline-block;
        margin-left: 8px;
        vertical-align: middle;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        -webkit-mask-size: contain;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        -webkit-mask-image: var(--icon-chevron-down);
        mask-image: var(--icon-chevron-down);
        transform: scale(1.5) translateY(-1px);
    }
    ul.main-menu li.menu-item-has-children.current-menu-parent > a::after,
    ul.main-menu li.menu-item-has-children.current-menu-item > a::after,
    ul.main-menu li.menu-item-has-children.current-menu-ancestor > a::after {
        background-color: var(--synthos-c-menu-active);
    }
    
    /* Sub-Menu */
    nav.synthos-nav ul.sub-menu {
        display: block;
        position: absolute;
        top: 100%;
        left: -16px;
        width: var(--synthos-sub-menu-width);
        background: var(--synthos-s-container-bg) radial-gradient(circle at center bottom, var(--synthos-s-backlight) 0%, transparent) no-repeat;
        z-index: 222;
        border-radius: var(--synthos-small-br);
        padding: 8px;
        transition: opacity 0.2s, transform 0.2s;
        will-change: opacity, transform;
        pointer-events: none;
        opacity: 0;
        transform: scale(1, 0);
        transform-origin: 50% 0%;
    }
    nav.synthos-nav ul.sub-menu ul.sub-menu {
        top: -8px;
        left: calc(100% + 16px);
        z-index: 223;
        transform: scale(0, 1);
        transform-origin: 0% 50%;
    }
    nav.synthos-nav ul.sub-menu::before,
    nav.synthos-nav ul.sub-menu ul.sub-menu::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        user-select: none;
    }
    nav.synthos-nav ul.sub-menu::before {
        right: 0;
        bottom: 0;
        inset: 0px;
        padding: 1px;
        background: linear-gradient( 0deg, var(--synthos-s-border), var(--synthos-s-backlight) );
        mask: var(--synthos-border-mask);
        -webkit-mask: var(--synthos-border-mask);
        border-radius: var(--synthos-small-br);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
    }
    nav.synthos-nav ul.sub-menu ul.sub-menu::after {
        width: 32px;
        height: 100%;
        top: 0;
        left: -24px;
        background: transparent;
    }
    nav.synthos-nav ul.sub-menu li {
        position: relative;
        z-index: 3;
    }
    nav.synthos-nav ul.sub-menu li::before {
        content: '';
        background: var(--synthos-s-backlight);
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: var(--synthos-xs-br);
        transition: opacity 0.3s;
        will-change: opacity;
        opacity: 0;
    }
    nav.synthos-nav ul.sub-menu li a {
        padding: 12px;
        position: relative;
        z-index: 4;
    }
    nav.synthos-nav ul.sub-menu li.menu-item-has-children > a::after {
        position: absolute;
        right: 8px;
        top: calc(50% - calc(0.5 * var(--synthos-t-menu-fs)));
        mask-image: var(--icon-menu-chevron);
        -webkit-mask-image: var(--icon-menu-chevron);
        transform: scale(1.5) translateX(0px);
    }
    
    /* Show Sub-Menu Event */
    nav.synthos-nav li.menu-item-has-children:hover > ul.sub-menu {
        opacity: 1;
        transform: scale(1);
        pointer-events: all;
    }
    
    /* Mobile Menu Container */
    .synthos-mobile-nav {
        position: fixed;
        right: 0;
        top: var(--st-header-height);
        width: 100%;
        height: calc(100% - var(--st-header-height));
        max-width: 390px;
        z-index: 88;
        background: var(--synthos-s-nav);
        contain: paint;
        overflow-y: scroll;
        scrollbar-width: none;
        pointer-events: none;
        transform: translateX(100%);
        transition: transform 0.3s;
        will-change: transform;
        display: none;
    }
    .synthos-mobile-nav.is-frosted {
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }
    
    /** ==================
        05. MAIN CONTAINER
        ================== */
    main#synthos-main {
        position: relative;
        z-index: 5;
        contain: paint;
        padding-top: var(--st-header-height);
        transition: opacity 0.5s;
        will-change: opacity;
    }
    body:not(.is-loaded) main#synthos-main {
        opacity: 0;
    }
    body.synthos-fullscreen-page main#synthos-main {
        transition: opacity 0.5s, transform 0.8s;
        will-change: transform, opacity;
    }
    body.synthos-fullscreen-page:not(.is-loaded) main#synthos-main {
        transform: scale(1.05);
    }
    #synthos-main.synthos-min-content {
        display: flex;
        width: 100%;
        height: 100%;
        align-items: center;
        padding: 0 0 var(--st-footer-height) 0;
        min-height: calc(100svh - var(--st-footer-height));
    }
    body.synthos-fullscreen-page main#synthos-main {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        width: 100%;
        height: 100svh;
        padding-top: 0;
    }
    section {
        padding: var(--synthos-section-gap) 0;
        position: relative;
    }
    section > div {
        position: relative;
        z-index: 5;
    }
    section[data-padding="none"] {
        padding-top: 0;
        padding-bottom: 0;
    }
    section[data-padding="top"] {
        padding-bottom: 0;
    }
    section[data-padding="bottom"] {
        padding-top: 0;
    }
    section[data-padding="small"] {
        padding: calc(0.5 * var(--synthos-section-gap)) 0;
    }
    section.is-fullwidth {
        max-width: 100svw;
        --synthos-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width)));
        margin-left: calc(-1 * var(--synthos-fw-spacing));
        margin-right: calc(-1 * var(--synthos-fw-spacing));
        padding-left: var(--synthos-fw-spacing);
        padding-right: var(--synthos-fw-spacing);
    }
    section.is-fullwidth.is-stretched {
        padding-left: 0;
        padding-right: 0;
    }
    section.is-fullwidth.is-stretched > .is-boxed {
        --synthos-fw-spacing: calc(0.5 * (100vw - var(--stg-container-width)));
        padding-left: var(--synthos-fw-spacing);
        padding-right: var(--synthos-fw-spacing);
    }
    section.backlight-top::before,
    section.backlight-bottom::after,
    section.backlight-both::before,
    section.backlight-both::after,
    section.divider-both::before,
    section.divider-both::after,
    section.divider-top::before,
    section.divider-bottom::after {
        content: '';
        position: absolute;
        z-index: 1;
        left: calc(-0.5 * (100vw - var(--stg-container-width)));
        pointer-events: none;
    }
    .stg-container.is-fullwidth section.backlight-top::before,
    .stg-container.is-fullwidth section.backlight-bottom::after,
    .stg-container.is-fullwidth section.backlight-both::before,
    .stg-container.is-fullwidth section.backlight-both::after,
    .stg-container.is-fullwidth section.divider-both::before,
    .stg-container.is-fullwidth section.divider-both::after,
    .stg-container.is-fullwidth section.divider-top::before,
    .stg-container.is-fullwidth section.divider-bottom::after,
    section.is-fullwidth.backlight-top::before,
    section.is-fullwidth.backlight-bottom::after,
    section.is-fullwidth.backlight-both::before,
    section.is-fullwidth.backlight-both::after,
    section.is-fullwidth.divider-both::before,
    section.is-fullwidth.divider-both::after,
    section.is-fullwidth.divider-top::before,
    section.is-fullwidth.divider-bottom::after {
        left: 0;
    }
    section.backlight-top::before,
    section.backlight-bottom::after,
    section.backlight-both::before,
    section.backlight-both::after {
        width: 100vw;
        height: 50vw;
    }
    section.backlight-top::before,
    section.backlight-both::before {
        background: radial-gradient( 100vw circle at 50vw 0%, var(--synthos-s-backlight), transparent 50% );
    }
    section.backlight-bottom::after,
    section.backlight-both::after {
        background: radial-gradient( 100vw circle at 50vw 100%, var(--synthos-s-backlight), transparent 50% );
    }
    section.backlight-top::before,
    section.backlight-both::before {
        top: 0;
    }
    section.backlight-bottom::after,
    section.backlight-both::after {
        bottom: 0;
    }
    section.divider-both::before,
    section.divider-both::after,
    section.divider-top::before,
    section.divider-bottom::after {
        width: 100vw;
        height: 1px;
        display: block;
        background: var(--synthos-c-border-gradient);
    }
    section.divider-both::before,
    section.divider-top::before {
        top: 0;
    }
    section.divider-both::after,
    section.divider-bottom::after {
        bottom: 0;
    }
    section.backlight-top:last-child::before {
        height: 100%;
    }
    
    /* Mouse Cursor Backlight */
    .synthos-backlight {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: radial-gradient( 50vw circle at var(--mouse-x) var(--mouse-y), var(--synthos-s-cursor-light), transparent 50% );
        opacity: 0.75;
        z-index: 1;
    }
    
    /** ==========
        06. FOOTER
        ========== */
    #synthos-footer {
        position: relative;
        z-index: 22;
    }
    #synthos-footer.is-sticky,
    .synthos-fullscreen-page #synthos-footer {
        position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        background: var(--synthos-s-nav);
    }
    #synthos-footer.is-frosted,
    .synthos-fullscreen-page #synthos-footer.is-frosted {
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }
    #synthos-footer a {
        color: var(--synthos-s-heading);
    }
    
    /* === Footer Widgets === */
    .synthos-footer-line::before,
    .synthos-footer-widgets::before {
        content: '';
        width: 100%;
        height: 1px;
        display: block;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        top: 0;
        left: 0;
    }
    .synthos-footer-widgets::before {
        opacity: 0.5;
    }
    .synthos-footer-widgets {
        padding: var(--stg-large-gap) 0;
        position: relative;
    }
    .synthos-footer-widgets::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        background: var(--synthos-s-backlight) radial-gradient( 100vw circle at 50vw 35vw, var(--synthos-s-backlight), transparent 50% );
        opacity: 0.5;
        pointer-events: none;
    }
    .synthos-footer-widgets .stg-container {
        position: relative;
        z-index: 3;
    }
    .synthos-footer-widgets h6 {
        margin-bottom: var(--stg-gap);
    }
    .synthos-widget ul {
        margin: 0;
        padding: 0;
    }
    .synthos-widget ul li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    
    /* Widget: Info */
    .synthos-info-widget {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
    }
    .synthos-info-widget .synthos-logo {
        margin: 0 0 var(--stg-gap) 0;
    }
    .synthos-info-description {
        margin-bottom: 28px;
    }
    .synthos-info-widget .synthos-label {
        margin-bottom: var(--stg-xs-gap);
        color: var(--synthos-s-heading);
    }
    
    /* Widget: Contacts */
    .synthos-contacts-widget ul li:not(:last-child) {
        margin-bottom: 16px;
    }
    .synthos-contacts-widget .synthos-label {
        display: block;
    }
    
    /* Widget: Menu */
    .synthos-menu-widget ul li {
        margin: 0 -8px;
        position: relative;
    }
    .synthos-menu-widget a {
        display: block;
        padding: 8px;
        position: relative;
        z-index: 3;
        opacity: 0.7;
        transition: opacity 0.3s;
    }
    .synthos-menu-widget ul {
        margin: -8px 0;
    }
    .synthos-menu-widget ul li::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--synthos-xs-br);
        background: var(--synthos-s-backlight);
        z-index: 1;
        opacity: 0;
        transform-origin: 0 50%;
        will-change: opacity;
        transition: opacity 0.2s;
    }
    
    /* === Footer Line === */
    .no-footer-border .synthos-footer-line::before {
        display: none;
    }
    .synthos-footer-line {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--stg-gap) 0;
        position: relative;
        font-size: var(--synthos-t-footer-fs);
        line-height: var(--synthos-t-footer-lh);
    }
    .synthos-footer-line:has(.align-center) {
        justify-content: center;
    }
    .synthos-footer-divider {
        margin: 0 8px;
    }
    
    /* === Socials List === */
    ul.synthos-socials-list {
        display: flex;
        gap: var(--synthos-socials-gap);
    }
    ul.synthos-socials-list.stg-xs-gap {
        gap: var(--stg-xs-gap);
    }
    ul.synthos-socials-list.stg-small-gap {
        gap: var(--stg-small-gap);
    }
    ul.synthos-socials-list.stg-large-gap {
        gap: var(--stg-large-gap);
    }
    ul.synthos-socials-list.stg-xl-gap {
        gap: var(--stg-xl-gap);
    }
    .synthos-footer-line ul.synthos-socials-list {
        margin: -8px 0;
    }
    .synthos-socials-list li {
        list-style: none;
        padding: 0;
        display: block;
    }
    .synthos-socials-list a {
        position: relative;
        width: calc(var(--synthos-socials-size) + 24px);
        height: calc(var(--synthos-socials-size) + 24px);
        padding: 8px;
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: var(--synthos-xs-br);
        transition: transform 0.1s, background-color 0.3s;
        will-change: transform;
    }
    .synthos-socials-list a::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        bottom: 0;
        right: 0;
        top: 0;
        border-radius: inherit;
        border: 1px solid var(--synthos-s-heading);
        transition: opacity 0.3s;
        will-change: opacity;
    }
    .synthos-socials-list i {
        width: var(--synthos-socials-size);
        height: var(--synthos-socials-size);
        background-color: var(--synthos-s-heading);
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        display: block;
        z-index: 3;
        transition: background-color 0.3s;
    }
    .synthos-socials-500px i {
        -webkit-mask-image: var(--icon-social-500px);
        mask-image: var(--icon-social-500px);
    }
    .synthos-socials-behance i {
        -webkit-mask-image: var(--icon-social-behance);
        mask-image: var(--icon-social-behance);
    }
    .synthos-socials-dribbble i {
        -webkit-mask-image: var(--icon-social-dribbble);
        mask-image: var(--icon-social-dribbble);
    }
    .synthos-socials-facebook i {
        -webkit-mask-image: var(--icon-social-facebook);
        mask-image: var(--icon-social-facebook);
    }
    .synthos-socials-flickr i {
        -webkit-mask-image: var(--icon-social-flickr);
        mask-image: var(--icon-social-flickr);
    }
    .synthos-socials-instagram i {
        -webkit-mask-image: var(--icon-social-instagram);
        mask-image: var(--icon-social-instagram);
    }
    .synthos-socials-linkedin i {
        -webkit-mask-image: var(--icon-social-linkedin);
        mask-image: var(--icon-social-linkedin);
    }
    .synthos-socials-patreon i {
        -webkit-mask-image: var(--icon-social-patreon);
        mask-image: var(--icon-social-patreon);
    }
    .synthos-socials-pinterest i {
        -webkit-mask-image: var(--icon-social-pinterest);
        mask-image: var(--icon-social-pinterest);
    }
    .synthos-socials-tiktok i {
        -webkit-mask-image: var(--icon-social-tiktok);
        mask-image: var(--icon-social-tiktok);
    }
    .synthos-socials-tumblr i {
        -webkit-mask-image: var(--icon-social-tumblr);
        mask-image: var(--icon-social-tumblr);
    }
    .synthos-socials-vimeo i {
        -webkit-mask-image: var(--icon-social-vimeo);
        mask-image: var(--icon-social-vimeo);
    }
    .synthos-socials-x i {
        -webkit-mask-image: var(--icon-social-x);
        mask-image: var(--icon-social-x);
    }
    .synthos-socials-xing i {
        -webkit-mask-image: var(--icon-social-xing);
        mask-image: var(--icon-social-xing);
    }
    .synthos-socials-youtube i {
        -webkit-mask-image: var(--icon-social-youtube);
        mask-image: var(--icon-social-youtube);
    }
    /* Framed Socials */
    .synthos-socials-list.synthos-framed-socials {
        flex-wrap: wrap;
        gap: var(--stg-small-gap);
    }
    
    /** =================
        07. HERO SECTIONS
        ================= */
    .synthos-hero-block .synthos-page-title {
        margin-bottom: 0;
    }
    /* Info Line */
    .synthos-hero-info-line {
        display: flex;
        justify-content: space-between;
        --stea-move: var(--stg-gap);
    }
    .synthos-hero-info-line .synthos-meta {
        margin: 0;
    }
    .synthos-hero-info-line > div {
        width: 33.33%;
    }
    .synthos-hero-info-line > div:nth-child(2) {
        text-align: center;
    }
    .synthos-hero-info-line > div:nth-child(3) {
        text-align: right;
    }
    
    /* === Layout 01 === */
    .synthos-hero-type01 .synthos-masked-block {
        --masked-inner-radius: var(--synthos-large-br);
    }
    .synthos-hero-type01 .synthos-masked-content {
        width: 128px;
        height: 128px;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .synthos-hero-type01 .synthos-masked-content a.synthos-square-button {
        width: 112px;
        height: 112px;
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type01 .synthos-masked-content a span {
        width: 32px;
        height: 32px;
    }
    
    /* Social Proof */
    .synthos-hero-type01 .synthos-hero-social-proof {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        padding-top: var(--stg-small-gap);
    }
    .synthos-hero-type01 .synthos-hero-social-proof > div {
        display: flex;
        justify-content: flex-end;
        margin-right: -4px;
        margin-bottom: 20px;
    }
    .synthos-hero-type01 .synthos-hero-social-proof p {
        text-align: right;
        text-transform: uppercase;
        color: var(--synthos-s-heading);
        max-width: 110px;
    }
    .synthos-hero-type01 .synthos-hero-social-proof img,
    .synthos-hero-type01 .synthos-hero-social-proof a {
        display: flex;
        width: 64px;
        height: 64px;
        border-radius: 50%;
        margin-left: -32px;
        border: 4px solid var(--synthos-s-body-bg);
    }
    .synthos-hero-type01 .synthos-hero-social-proof a {
        justify-content: center;
        align-items: center;
        text-align: center;
        color: var(--synthos-s-accented-text);
        background: var(--synthos-s-accent);
    }
    
    /* === Layout 02 === */
    .synthos-hero-type02 .synthos-page-title {
        padding-right: var(--stg-gap);
        margin-bottom: var(--stg-large-gap);
        padding-bottom: 0;
    }
    .stg-row.synthos-hero02-row {
        padding-bottom: var(--stg-large-gap);
        width: calc(var(--stg-container-width) + var(--stg-gap));
    }
    
    /* === Layout 03 === */
    .synthos-hero-type03 .synthos-hero-title-wrap {
        display: flex;
        width: 100%;
        justify-content: space-between;
        margin-bottom: var(--stg-gap);
    }
    .synthos-hero-type03 .synthos-hero-title-wrap h1 {
        max-width: 70%;
        margin-bottom: 0;
    }
    .synthos-hero-type03 .synthos-hero-title-wrap > div {
        max-width: 25%;
        height: auto;
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type03 .synthos-hero-media {
        aspect-ratio: 2/1;
    }
    .synthos-hero-type03 .synthos-hero-media video,
    .synthos-hero-type03 .synthos-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .synthos-hero-type03 .synthos-hero-media-content {
        max-width: 25%;
        width: max-content;
        text-align: right;
    }
    .synthos-hero-type03 .synthos-hero-media-content-inner {
        padding: 0 0 calc(var(--stg-small-gap) + 4px) var(--stg-small-gap);
    }
    .synthos-hero-type03 svg {
        position: absolute;
        pointer-events: none;
        left: 0;
        top: 0;
        opacity: 0;
    }
    .synthos-hero-type03 .synthos-tags-list {
        position: absolute;
        left: var(--stg-small-gap);
        bottom: var(--stg-small-gap);
        max-width: 33%;
    }
    .synthos-tags-list li[data-appear] {
        --stea-move: var(--stg-small-gap);
    }
    
    /* === Layout 04 === */
    .synthos-hero-type04 .synthos-large-text {
        max-width: 50%;
        margin: 0 auto;
    }
    .synthos-hero-type04 .synthos-hero-info-line {
        margin-bottom: var(--stg-gap);
    }
    
    /* === Layout 05 === */
    .synthos-hero-type05 .synthos-title-block {
        aspect-ratio: 1/1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-start;
        margin-bottom: var(--stg-gap);
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type05 .synthos-title-block .synthos-large-text {
        max-width: 425px;
    }
    .synthos-hero-type05 .synthos-hero-media-wrap {
        position: relative;
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type05 .synthos-hero-media-wrap img {
        position: absolute;
        width: calc(100% - 2 * var(--stg-large-gap));
        height: auto;
        top: var(--stg-large-gap);
        left: var(--stg-large-gap);
        display: block;
        box-shadow: 0 8px 16px var(--synthos-s-box-shadow);
    }
    .synthos-hero-type05 .synthos-square-button {
        width: 100%;
        height: 100%;
        display: flex;
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type05 a.synthos-square-button span.synthos-icon {
        width: 64px;
        height: 64px;
    }
    
    /* === Layout 06 === */
    .synthos-hero-type06 .is-large .synthos-bento-hero-media p {
        max-width: 320px;
    }
    .synthos-bento-hero-media {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        padding: var(--stg-gap);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: inherit;
    }
    .synthos-bento-hero-media .synthos-page-title,
    .synthos-bento-hero-media .synthos-highlight {
        color: var(--synthos-s-accented-text);
    }
    .synthos-hero-type06 .synthos-masked-block {
        --masked-inner-radius: var(--synthos-large-br);
    }
    .synthos-hero-type06 .synthos-masked-content.at-bottom-right {
        width: 128px;
        height: 128px;
    }
    .synthos-hero-type06 .synthos-masked-content.at-bottom-right a.synthos-square-button {
        margin: calc(1.5 * var(--stg-small-gap)) 0 0 calc(1.5 * var(--stg-small-gap));
    }
    .synthos-hero-type06 .synthos-square-button {
        width: calc(100% - 1.5 * var(--stg-small-gap));
        height: calc(100% - 1.5 * var(--stg-small-gap));
        border-radius: var(--synthos-default-br);
    }
    .synthos-hero-type06 .synthos-square-button span.synthos-icon {
        width: 32px;
        height: 32px;
    }
    
    /* === Layout 07 === */
    .synthos-hero-type07 .synthos-hero-info-line {
        margin: var(--stg-gap) 0 var(--stg-large-gap) 0;
    }
    /* Social Proof */
    .synthos-hero-type07 .synthos-hero-social-proof {
        margin-top: calc(-1 * var(--stg-xs-gap));
    }
    .synthos-hero-type07 .synthos-hero-social-proof > div {
        display: flex;
        justify-content: flex-end;
        gap: var(--stg-xs-gap);
    }
    .synthos-hero-type07 .synthos-hero-social-proof a,
    .synthos-hero-type07 .synthos-hero-social-proof img {
        width: 128px;
        height: 128px;
        display: block;
        border-radius: var(--synthos-small-br);
    }
    .synthos-hero-type07 .synthos-hero-social-proof a {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .synthos-hero-type07 .synthos-hero-social-proof a span {
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-meta-fw);
        letter-spacing: var(--synthos-t-meta-ls);
        color: var(--synthos-s-accented-text);
        text-transform: uppercase;
        display: block;
        height: auto;
        width: 100%;
    }
    .synthos-hero-type07 .synthos-hero-social-proof a h5 {
        margin: 0 0 4px 0;
        color: var(--synthos-s-accented-text);
    }
    
    /* === Layout 08 === */
    .synthos-hero-form {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        gap: var(--stg-small-gap);
        width: 100%;
        padding-bottom: var(--stg-xs-gap);
    }
    .synthos-hero-form input {
        width: 100%;
    }
    .synthos-hero-form button {
        padding-right: var(--stg-gap);
        padding-left: var(--stg-gap);
    }
    .synthos-hero-form input,
    .synthos-hero-form button {
        margin: 0;
    }
    .synthos-hero-form button .synthos-icon {
        background: var(--synthos-s-accented-text);
    }
    .synthos-partners span {
        display: block;
    }
    .synthos-partners .synthos-block {
        padding: 0;
        border-radius: var(--synthos-xs-br);
    }
    
    /** ======================
        08. SCROLLING ELEMENTS
        ====================== */
    .st-expandable-wrap {
        overflow: hidden;
    }
    /* === Smooth Scroll === */
    .stss-wrap {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 4;
        overflow: hidden;
    }
    .stss-wrap.is-ready {
        position: fixed;
    }
    .stss-container {
        width: 100%;
        min-height: 100%;
        height: auto;
        will-change: transform;
    }
    
    /* === Mask Fill Text === */
    .synthos-text-fill-mask {
        background: linear-gradient(var(--synthos-s-heading), var(--synthos-s-heading)) left top no-repeat;
        -webkit-background-clip: text;
        -webkit-text-fill-color: var(--synthos-s-heading-fade);
    }
    
    /* === Expanded Section === */
    .synthos-expand-on-scroll {
        --st-eos-init-scale: 1.25;
        --st-eos-init-clip: 0.5;
        --st-eos-br: var(--synthos-default-br);
        transform-origin: 50% 0;
    }
    .synthos-expand-on-scroll img,
    .synthos-expand-on-scroll video {
        border-radius: 0;
    }
    .synthos-expand-on-scroll > * {
        width: 100%;
        height: auto;
        display: block;
    }
    .synthos-expand-on-scroll iframe {
        aspect-ratio: 16/9;
    }
    
    /** ============
        09. ELEMENTS
        ============ */
    [class*='synthos-grid'] {
        display: grid;
        grid-column-gap: var(--stg-gap);
        grid-row-gap: var(--stg-gap);
    }
    .synthos-grid-1col {
        grid-template-columns: repeat(1, 1fr);
    }
    .synthos-grid-2cols {
        grid-template-columns: repeat(2, 1fr);
    }
    .synthos-grid-3cols {
        grid-template-columns: repeat(3, 1fr);
    }
    .synthos-grid-4cols {
        grid-template-columns: repeat(4, 1fr);
    }
    .synthos-grid-5cols {
        grid-template-columns: repeat(5, 1fr);
    }
    .synthos-grid-6cols {
        grid-template-columns: repeat(6, 1fr);
    }
    .synthos-subgrid-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
    }
    
    /* === Lazy Loader === */
    .st-lazy-wrapper {
        position: relative;
        display: block;
        border-radius: inherit;
    }
    .st-lazy-wrapper:has(img[data-speed]) {
        border-radius: var(--synthos-default-br);
    }
    .st-lazy-wrapper::before,
    .st-lazy-wrapper::after {
        content: '';
        position: absolute;
        display: block;
        transition: opacity 0.3s;
        will-change: opacity;
        transition-delay: 0.05s;
    }
    .st-lazy-wrapper::before {
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: var(--synthos-s-container-bg);
        z-index: 4;
        border-radius: var(--synthos-default-br);
    }
    .st-lazy-wrapper.is-loaded::before {
        opacity: 0;
    }
    .st-lazy-wrapper::after {
        z-index: 5;
        width: 40px;
        height: 40px;
        border: 2px solid var(--synthos-s-border);
        border-top-color: var(--synthos-s-heading);
        animation: sta_spin 1s linear infinite;
        border-radius: 50%;
        left: calc(50% - 22px);
        top: calc(50% - 22px);
    }
    .st-lazy-wrapper.is-loaded::after {
        opacity: 0;
    }
    .st-lazy-wrapper.stop-anim::after {
        opacity: 0;
        animation: unset;
    }
    
    /* === Masked Block === */
    .synthos-masked-block {
        position: relative;
        --masked-border-radius: var(--synthos-default-br);
    }
    
    .synthos-masked-content,
    .synthos-masked-content.at-top-left {
        position: absolute;
        top: 0;
        left: 0;
        bottom: auto;
        right: auto;
    }
    .synthos-masked-content.at-top-right {
        top: 0;
        left: auto;
        bottom: auto;
        right: 0;
    }
    .synthos-masked-content.at-bottom-left {
        top: auto;
        left: 0;
        bottom: 0;
        right: auto;
    }
    .synthos-masked-content.at-bottom-right {
        top: auto;
        left: auto;
        bottom: 0;
        right: 0;
    }
    .synthos-masked-content.at-middle-right,
    .synthos-masked-content.at-middle-left {
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    .synthos-masked-content.at-middle-right {
        right: 0;
        left: auto;
    }
    .synthos-masked-content.at-middle-left {
        left: 0;
        right: auto;
    }
    .synthos-masked-content.at-top-center,
    .synthos-masked-content.at-bottom-center {
        left: 50%;
        right: auto;
        transform: translateX(-50%);
    }
    .synthos-masked-content.at-top-center {
        top: 0;
        bottom: auto;
    }
    .synthos-masked-content.at-bottom-center {
        bottom: 0;
        top: auto;
    }
    
    /* Square Button */
    .synthos-masked-content .synthos-square-button,
    .synthos-masked-content.at-top-left .synthos-square-button {
        margin: 0 var(--stg-small-gap) var(--stg-small-gap) 0;
    }
    .synthos-masked-content.at-top-right .synthos-square-button {
        margin: 0 0 var(--stg-small-gap) var(--stg-small-gap);
    }
    .synthos-masked-content.at-bottom-left .synthos-square-button {
        margin: var(--stg-small-gap) var(--stg-small-gap) 0 0;
    }
    .synthos-masked-content.at-bottom-right .synthos-square-button {
        margin: var(--stg-small-gap) 0 0 var(--stg-small-gap);
    }
    .synthos-masked-content.at-top-center .synthos-square-button {
        margin: 0 var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap);
    }
    .synthos-masked-content.at-bottom-center .synthos-square-button {
        margin: var(--stg-small-gap) var(--stg-small-gap) 0 var(--stg-small-gap);
    }
    .synthos-masked-content.at-middle-left .synthos-square-button {
        margin: var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap) 0;
    }
    .synthos-masked-content.at-middle-right .synthos-square-button {
        margin: var(--stg-small-gap) 0 var(--stg-small-gap) var(--stg-small-gap);
    }
    
    /* Content Padding */
    .synthos-masked-content > div,
    .synthos-masked-content.at-top-left > div {
        padding: 0 var(--stg-small-gap) var(--stg-small-gap) 0;
    }
    .synthos-masked-content.at-top-right > div {
        padding: 0 0 var(--stg-small-gap) var(--stg-small-gap);
    }
    .synthos-masked-content.at-bottom-left > div {
        padding: var(--stg-small-gap) var(--stg-small-gap) 0 0;
    }
    .synthos-masked-content.at-bottom-right > div {
        padding: var(--stg-small-gap) 0 0 var(--stg-small-gap);
    }
    .synthos-masked-content.at-top-center > div {
        padding: 0 var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap);
    }
    .synthos-masked-content.at-bottom-center > div {
        padding: var(--stg-small-gap) var(--stg-small-gap) 0 var(--stg-small-gap);
    }
    .synthos-masked-content.at-middle-left > div {
        padding: var(--stg-small-gap) var(--stg-small-gap) var(--stg-small-gap) 0;
    }
    .synthos-masked-content.at-middle-right > div {
        padding: var(--stg-small-gap) 0 var(--stg-small-gap) var(--stg-small-gap);
    }
    
    /* === Icons === */
    .synthos-icon {
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        background: var(--synthos-s-heading);
        display: block;
        width: 24px;
        height: 24px;
    }
    .synthos-button .synthos-icon,
    .synthos-square-button:not(.is-secondary) .synthos-icon,
    .is-accented .synthos-icon {
        background: var(--synthos-s-accented-text);
    }
    .synthos-icon-explore {
        -webkit-mask-image: var(--icon-arrow-explore);
        mask-image: var(--icon-arrow-explore);
    }
    .synthos-icon-arrow-down {
        -webkit-mask-image: var(--icon-arrow-down);
        mask-image: var(--icon-arrow-down);
    }
    .synthos-icon-arrow-left {
        -webkit-mask-image: var(--icon-arrow-left);
        mask-image: var(--icon-arrow-left);
    }
    .synthos-icon-arrow-right {
        -webkit-mask-image: var(--icon-arrow-right);
        mask-image: var(--icon-arrow-right);
    }
    .synthos-icon-arrow-submit {
        -webkit-mask-image: var(--icon-arrow-submit);
        mask-image: var(--icon-arrow-submit);
    }
    .synthos-icon-creativity {
        -webkit-mask-image: var(--icon-creativity);
        mask-image: var(--icon-creativity);
    }
    .synthos-icon-collab {
        -webkit-mask-image: var(--icon-collab);
        mask-image: var(--icon-collab);
    }
    .synthos-icon-impact {
        -webkit-mask-image: var(--icon-impact);
        mask-image: var(--icon-impact);
    }
    .synthos-icon-innovation {
        -webkit-mask-image: var(--icon-innovation);
        mask-image: var(--icon-innovation);
    }
    .synthos-icon-chevron-left {
        -webkit-mask-image: var(--icon-chevron-left);
        mask-image: var(--icon-chevron-left);
    }
    .synthos-icon-chevron-right {
        -webkit-mask-image: var(--icon-chevron-right);
        mask-image: var(--icon-chevron-right);
    }
    
    /* === Block Item === */
    .synthos-block {
        border-radius: var(--synthos-small-br);
        background-color: var(--synthos-s-container-bg);
        padding: var(--stg-gap);
        padding-bottom: calc(var(--stg-gap) - 3px);
        position: relative;
        --mouse-x: 50%;
        --mouse-y: 0;
    }
    .synthos-block.stg-valign-middle {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
    .synthos-block.is-frosted {
        background: var(--synthos-s-container-frosted);
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
    }
    [class*='stg-col'].synthos-block {
        border-radius: var(--synthos-default-br);
    }
    .synthos-block::before,
    .synthos-block::after {
        content: '';
        border-radius: inherit;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        pointer-events: none;
    }
    .synthos-block::before {
        inset: 0px;
        padding: 1px;
        background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--synthos-s-border-highlight), var(--synthos-s-border-mute) 40% );
        mask: var(--synthos-border-mask);
        -webkit-mask: var(--synthos-border-mask);
        mask-composite: exclude;
        -webkit-mask-composite: xor;
        transition: opacity 0.4s;
        will-change: opacity;
        opacity: 0.75;
    }
    .synthos-block.is-accented {
        background: var(--synthos-s-accent) bottom right no-repeat;
        color: var(--synthos-s-accented-text);
    }
    .is-accented p,
    .is-accented h1,
    .is-accented h2,
    .is-accented h3,
    .is-accented h4,
    .is-accented h5,
    .is-accented h6,
    .is-accented span,
    .is-accented .synthos-counter-number,
    .is-accented p.synthos-large-text {
        color: var(--synthos-s-accented-text);
    }
    .synthos-block.is-accented::before {
        background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--synthos-s-text-accent), var(--synthos-s-border-accent) 40% );
    }
    .synthos-block::after {
        opacity: 0;
        transition: opacity 0.4s;
        will-change: opacity;
        width: 100%;
        background: radial-gradient( 800px circle at var(--mouse-x) var(--mouse-y), var(--synthos-s-backlight), transparent 40% );
        z-index: 5;
    }
    
    /* === Tags List === */
    .synthos-tags-list {
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        flex-wrap: wrap;
        gap: var(--stg-xs-gap);
        padding: 0;
        margin: 0;
    }
    .synthos-tags-list li {
        margin: 0;
        padding: 0;
        list-style: none;
        display: block;
    }
    .synthos-tags-list li a {
        border-radius: var(--synthos-xs-br);
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-meta-fw);
        letter-spacing: var(--synthos-t-meta-ls);
        color: var(--synthos-s-heading);
        text-transform: uppercase;
        padding: calc(0.75 * var(--stg-xs-gap)) calc(1.5 * var(--stg-xs-gap));
        background: var(--synthos-s-nav);
        -webkit-backdrop-filter: saturate(150%) blur(12px);
        backdrop-filter: saturate(150%) blur(12px);
        display: block;
        border: 1px solid var(--synthos-s-border);
        transition: background-color 0.3s, border-color 0.3s, color 0.3s;
    }
    
    /* === Link with Arrow === */
    .synthos-arrow-link,
    a.synthos-arrow-link {
        display: inline-block;
        position: relative;
        font-size: var(--synthos-t-meta-fs);
        font-weight: var(--synthos-t-meta-fw);
        letter-spacing: var(--synthos-t-meta-ls);
        color: var(--synthos-s-heading);
        text-transform: uppercase;
        padding: 0 24px 2px 0;
        margin-top: -5px;
    }
    .synthos-arrow-link::before,
    .synthos-arrow-link::after {
        content: '';
        position: absolute;
        background: var(--synthos-s-heading);
        transition: transform 0.3s;
    }
    .synthos-arrow-link::before {
        width: calc(100% - 24px);
        height: 2px;
        bottom: 0;
        transform-origin: 0 50%;
    }
    .synthos-arrow-link::after {
        content: '';
        width: 16px;
        height: 16px;
        background: var(--synthos-s-heading);
        display: block;
        right: 0;
        top: 6px;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        -webkit-mask-image: var(--icon-arrow-explore);
        mask-image: var(--icon-arrow-explore);
        transform-origin: 0% 100%;
    }
    
    /* === Icon Link === */
    .synthos-icon-link {
        display: inline-flex;
        align-items: center;
        gap: 16px;
    }
    .synthos-icon-link .synthos-icon-link-content {
        transition: transform 0.3s;
        will-change: transform;
        margin-top: 4px;
        text-align: left;
    }
    .synthos-icon-link .synthos-icon-link-content:first-child {
        text-align: right;
    }
    .synthos-icon-link h6 {
        margin: 0;
    }
    .synthos-icon-link .synthos-label {
        margin: 6px 0 0 0;
        display: block;
    }
    .synthos-icon-link .synthos-icon-wrap {
        width: 80px;
        height: 80px;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
        background-color: transparent;
        border-radius: var(--synthos-small-br);
    }
    .synthos-icon-wrap::before {
        content: '';
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border: 2px solid var(--synthos-s-heading);
        border-radius: inherit;
        position: absolute;
        display: block;
        transition: opacity 0.3s;
        will-change: opacity;
    }
    .synthos-icon-link i {
        transition: transform 0.3s, background-color 0.3s;
    }
    
    /* === Square Button === */
    .synthos-square-button {
        aspect-ratio: 1/1;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        color: var(--synthos-s-accented-text);
        background: var(--synthos-s-accent);
        border-radius: var(--synthos-small-br);
        border: 1px solid var(--synthos-s-border-accent);
        transition: background-color 0.3s;
        cursor: pointer;
        width: 80px;
        height: 80px;
    }
    .synthos-square-button span.synthos-icon {
        width: 24px;
        height: 24px;
        transition: transform 0.2s, background-color 0.3s;
        will-change: transform;
    }
    
    /* === Price Card === */
    .synthos-price-card-item {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: var(--stg-large-gap);
        position: relative;
    }
    .synthos-price {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-heading);
        font-size: var(--synthos-t-h3-fs);
        font-size: var(--synthos-t-h3-fs);
        letter-spacing: var(--synthos-t-h3-ls);
        line-height: var(--synthos-t-h3-lh);
        margin: -10px 0 26px -3px;
    }
    
    /* === Marquee === */
    .synthos-marquee {
        background: var(--synthos-s-accent);
        min-width: 100%;
        overflow: hidden;
        max-width: max-content;
    }
    .synthos-marquee a,
    .synthos-marquee p,
    .synthos-marquee h1,
    .synthos-marquee h2,
    .synthos-marquee h3,
    .synthos-marquee h4,
    .synthos-marquee h5,
    .synthos-marquee h6,
    .synthos-marquee span {
        color: var(--synthos-s-accented-text);
    }
    .synthos-marquee-inner {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        width: max-content;
        will-change: transform;
    }
    .synthos-marquee.is-init .synthos-marquee-inner {
        animation: marquee_scroll 5s infinite linear;
    }
    .synthos-marquee-inner-wrap {
        display: flex;
        justify-content: flex-start;
        flex-wrap: nowrap;
        width: max-content;
    }
    .synthos-marquee-list {
        padding: 0;
        margin: 0;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        flex-wrap: nowrap;
        width: max-content;
    }
    .synthos-marquee-list li {
        list-style: none;
        margin: 0;
        padding: 0;
        white-space: nowrap;
        display: flex;
        align-items: center;
    }
    .synthos-marquee-list li::before {
        content: '';
        width: 8px;
        height: 8px;
        display: block;
        margin: var(--stg-large-gap);
        border-radius: 2px;
        outline: 4px solid var(--synthos-s-accented-text);;
        transform: translateY(-2px) rotate(45deg);
    }
    
    /* === Counter Block === */
    .synthos-counter {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: var(--stg-small-gap);
        position: relative;
        text-align: center;
        padding: var(--stg-large-gap) var(--stg-small-gap);
    }
    .synthos-counter-number {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
        color: var(--synthos-s-heading);
    }
    .synthos-counter-number::before {
        content: attr(data-prefix);
    }
    .synthos-counter-number::after {
        content: attr(data-suffix);
    }
    
    /* Small Style */
    .synthos-counter.synthos-small-counter {
        padding: 0;
        text-align: left;
        row-gap: 2px;
    }
    .synthos-small-counter .synthos-counter-number {
        font-size: var(--synthos-t-h3-fs);
        font-size: var(--synthos-t-h3-fs);
        letter-spacing: var(--synthos-t-h3-ls);
        line-height: var(--synthos-t-h3-lh);
    }
    
    /* === Porftolio Grid Card === */
    .synthos-portfolio-card {
        padding: var(--stg-small-gap);
        border-radius: var(--synthos-default-br);
    }
    .synthos-portfolio-card-image {
        transition: transform 0.3s;
        will-change: transform;
        contain: paint;
        aspect-ratio: 1/1;
        border-radius: var(--synthos-small-br);
    }
    .synthos-portfolio-card-image .st-lazy-wrapper {
        border-radius: var(--synthos-small-br);
    }
    .synthos-portfolio-card-image img,
    .synthos-portfolio-card-image video {
        border-radius: unset;
        object-fit: cover;
        width: 100%;
        height: 100%;
    }
    .synthos-portfolio-card-footer {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: var(--stg-small-gap) 0 9px 0;
    }
    .synthos-portfolio-card-title {
        min-height: 24px;
        align-self: flex-end;
    }
    .synthos-portfolio-card-title h6 {
        margin: 0;
    }
    .synthos-portfolio-card .synthos-icon {
        transform-origin: 0% 100%;
        width: 24px;
        height: 24px;
        transition: transform 0.3s;
        margin-right: var(--stg-xs-gap);
        margin-top: var(--stg-xs-gap);
    }
    .synthos-portfolio-card > a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        border-radius: var(--synthos-small-br);
    }
    
    /* === Portfolio Short List === */
    .synthos-portfolio-short-item {
        position: relative;
        padding: var(--stg-xs-gap);
        border-radius: var(--synthos-small-br);
        display: flex;
        align-items: center;
        justify-content: flex-start;
    }
    .synthos-portfolio-thmb {
        width: 88px;
        height: 88px;
        border-radius: var(--synthos-xs-br);
        overflow: hidden;
        margin-right: var(--stg-gap);
        box-shadow: 0 4px 8px var(--synthos-s-box-shadow);
    }
    .synthos-portfolio-thmb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 0;
    }
    .synthos-portfolio-short-item .synthos-icon {
        position: absolute;
        top: calc(50% - 12px);
        right: var(--stg-gap);
        width: 24px;
        height: 24px;
        transform-origin: 0 100%;
        transition: transform 0.3s;
        will-change: transform;
    }
    .synthos-portfolio-short-item a {
        position: absolute;
        border-radius: inherit;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .synthos-portfolio-short-more {
        position: relative;
        padding: var(--stg-gap);
        border-radius: var(--synthos-small-br);
        color: var(--synthos-s-accented-text);
        background: var(--synthos-s-accent);
        border: 1px solid var(--synthos-s-border-accent);
    }
    .synthos-portfolio-short-item span.synthos-meta,
    .synthos-portfolio-short-more .synthos-label {
        display: block;
        margin-bottom: 4px;
        margin-top: -4px;
    }
    .synthos-portfolio-short-more {
        --synthos-s-heading-fade: var(--synthos-s-accented-text);
        --synthos-s-heading: var(--synthos-s-accented-text);
    }
    .synthos-portfolio-short-more .synthos-label {
        opacity: 0.75;
    }
    
    /* === Testimonials Grid Card === */
    .synthos-tetimonials-card {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: var(--stg-gap);
    }
    .synthos-tetimonials-card-descr {
        margin-top: -4px;
    }
    .synthos-tetimonials-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: -4px;
    }
    .synthos-tetimonials-card-name h6 {
        margin: 0;
    }
    [class*='synthos-tetimonials-stars'] {
        display: block;
        position: relative;
        width: 76px;
        height: 12px;
        opacity: 0.5;
        margin-bottom: 8px;
    }
    [class*='synthos-tetimonials-stars']::before,
    [class*='synthos-tetimonials-stars']::after {
        content: '';
        height: 12px;
        background: var(--synthos-s-heading);
        -webkit-mask-repeat: repeat-x;
        -webkit-mask-size: contain;
        -webkit-mask-position: left;
        mask-repeat: repeat-x;
        mask-size: contain;
        mask-position: left;
        position: absolute;
        left: 0;
        top: 0;
    }
    [class*='synthos-tetimonials-stars']::before {
        -webkit-mask-image: var(--icon-star-empty);
        mask-image: var(--icon-star-empty);
        z-index: 1;
        width: 100%;
    }
    [class*='synthos-tetimonials-stars']::after {
        -webkit-mask-image: var(--icon-star-full);
        mask-image: var(--icon-star-full);
        z-index: 3;
    }
    .synthos-tetimonials-stars1::after {
        width: 20%;
    }
    .synthos-tetimonials-stars2::after {
        width: 40%;
    }
    .synthos-tetimonials-stars3::after {
        width: 60%;
    }
    .synthos-tetimonials-stars4::after {
        width: 80%;
    }
    .synthos-tetimonials-stars5::after {
        width: 100%;
    }
    
    /* === Carousel Card === */
    .synthos-carousel {
        border-radius: var(--synthos-xs-br);
    }
    .synthos-fullscreen-page .synthos-carousel-wrapper {
        position: relative;
        height: calc(100svh - var(--st-header-height) - var(--st-footer-height));
    }
    .synthos-fullscreen-page .synthos-carousel {
        top: 50%;
        transform: translateY(-50%);
    }
    .synthos-fullscreen-page .synthos-carousel.swiper {
        overflow: visible;
    }
    .synthos-carousel-card {
        padding: var(--stg-small-gap);
    }
    .synthos-carousel-card-image {
        width: 100%;
        height: 400px;
        border-radius: var(--synthos-xs-br);
        overflow: hidden;
        transition: transform 0.3s;
    }
    
    .synthos-carousel-card-image img,
    .synthos-carousel-card-image video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* .synthos-carousel-card-image {
        transition: transform 0.3s;
        will-change: transform;
        contain: paint;
        border-radius: var(--synthos-xs-br);
        aspect-ratio: 2/3;
        overflow: hidden;
    }
    .synthos-carousel-card-image img,
    .synthos-carousel-card-image video {
        border-radius: unset;
        width: 100%;
        height: 100%;
        object-fit: cover;
    } */
    .synthos-carousel-card-footer {
        display: flex;
        width: 100%;
        justify-content: space-between;
        align-items: center;
        padding: var(--stg-small-gap) 0 9px 0;
    }
    .synthos-carousel-card-title {
        min-height: 24px;
        align-self: flex-end;
    }
    .synthos-carousel-card-title h6 {
        margin: 0;
    }
    .synthos-carousel-card .synthos-icon {
        transform-origin: 0% 100%;
        width: 24px;
        height: 24px;
        transition: transform 0.3s;
        margin-right: var(--stg-xs-gap);
        margin-top: var(--stg-xs-gap);
    }
    .synthos-carousel-card > a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        display: block;
        border-radius: var(--synthos-small-br);
    }
    
    /* === List with Preview === */
    .synthos-list-with-preview {
        display: flex;
        justify-content: space-between;
        gap: var(--stg-gap);
    }
    .synthos-list-with-preview[data-preview-position="right"] {
        flex-direction: row-reverse;
    }
    .synthos-list-with-preview > div {
        width: 50%;
    }
    .synthos-lwp-media {
        position: relative;
        overflow: hidden;
        border-radius: var(--synthos-default-br);
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        width: 100%;
    }
    .synthos-lwp-media img,
    .synthos-lwp-media video {
        width: 100%;
        height: auto;
        min-width: 100%;
        object-position: center;
    }
    .synthos-lwp-media img,
    .synthos-lwp-media video {
        transition: clip-path 0.3s;
        position: relative;
        border-radius: unset;
    }
    .synthos-lwp-media img.is-active,
    .synthos-lwp-media video.is-active {
        animation: lwp_active 0.3s ease-in-out;
    }
    .synthos-lwp-roster {
        display: flex;
        flex-direction: column;
        gap: var(--stg-gap);
    }
    .synthos-lwp-item {
        transition: background-color 0.2s, border-color 0.2s;
        position: relative;
        border-radius: var(--synthos-default-br);
    }
    .synthos-lwp-item .synthos-accent {
        transition: color 0.2s;
    }
    .synthos-lwp-item a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
    }
    .synthos-lwp-roster img {
        display: none;
    }
    .synthos-list-with-preview[data-preview-position="right"] .synthos-lwp-media img.is-active,
    .synthos-list-with-preview[data-preview-position="right"] .synthos-lwp-media video.is-active {
        animation: lwp_active_r 0.3s ease-in-out;
    }
    
    /* === Carousel (Swiper) === */
    .synthos-carousel {
        --swiper-gap: var(--stg-gap);
    }
    .synthos-dots .swiper-pagination-bullet {
        background: var(--synthos-s-heading);
    }
    .synthos-dots .swiper-pagination-bullet-active {
        background: var(--synthos-s-heading);
    }
    .synthos-dots.swiper-pagination {
        position: static;
        bottom: auto;
        left: auto;
        margin: var(--stg-gap) auto 0 auto;
        transform: none!important;
        height: 12px;
    }
    .synthos-dots .swiper-pagination-bullet {
        width: 12px;
        height: 12px;
    }
    
    /* === Detailed List === */
    .synthos-detailed-list {
        margin: 0;
        padding: 0;
        position: relative;
    }
    .synthos-detailed-list li {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
        padding: var(--stg-gap) 0 calc(1px + var(--stg-gap)) 0;
        position: relative;
        margin: 0 calc(-0.5 * var(--stg-gap));
    }
    .synthos-detailed-list::before,
    .synthos-detailed-list li::before,
    .synthos-detailed-list li::after {
        content: '';
        position: absolute;
        width: 100%;
        display: block;
    }
    .synthos-detailed-list::before,
    .synthos-detailed-list li::after {
        left: calc(-0.5 * (100vw - var(--stg-container-width)));
        bottom: 0;
        height: 1px;
        background: var(--synthos-c-border-gradient);
        width: 100vw;
    }
    .synthos-detailed-list::before {
        bottom: auto;
        top: 0;
    }
    .synthos-detailed-list li::before {
        height: 100%;
        background: radial-gradient(ellipse, var(--synthos-s-heading) 0%, transparent 75%) no-repeat bottom center;
        background-size: 100% 200%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.3s;
        will-change: opacity;
    }
    .synthos-detailed-list li > div {
        margin: 0 calc(0.5 * var(--stg-gap));
    }
    .synthos-detailed-list li a {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        display: block;
    }
    .synthos-detailed-list-title {
        min-width: calc(33.333% - var(--stg-gap));
        max-width: calc(33.333% - var(--stg-gap));
    }
    .synthos-detailed-list-title > * {
        margin-top: 0;
    }
    .synthos-detailed-list-description {
        min-width: calc(66.666% - 2 * var(--stg-gap) - 80px);
        max-width: calc(66.666% - 2 * var(--stg-gap) - 80px);
    }
    .synthos-detailed-list-button {
        width: 80px;
        height: 80px;
        border: 2px solid var(--synthos-s-heading);
        border-radius: var(--synthos-small-br);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s, border-color 0.3s;
    }
    .synthos-detailed-list-button span.synthos-icon {
        width: 24px;
        height: 24px;
        transition: background-color 0.3s;
    }
    
    /* === Image Box === */
    .synthos-image-box:not(:last-child) {
        margin-bottom: var(--stg-large-gap);
    }
    .synthos-image-box-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: var(--stg-small-gap);
    }
    .synthos-image-box-head img {
        max-width: 80px;
        height: auto;
        display: block;
        border-radius: var(--synthos-xs-br);
    }
    
    /* === Icon Box === */
    .synthos-icon-box {
        display: grid;
        grid-template-rows: subgrid;
        grid-row: span 2;
        row-gap: var(--stg-xl-gap);
        position: relative;
    }
    .synthos-icon-box .synthos-box-icon {
        width: 64px;
        height: 64px;
        border-radius: var(--synthos-small-br);
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: var(--stg-gap);
        top: var(--stg-gap);
    }
    .synthos-icon-box i {
        width: 32px;
        height: 32px;
    }
    .synthos-icon-box .synthos-box-icon::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border: 2px solid var(--synthos-s-heading);
        border-radius: inherit;
        background-color: transparent;
    }
    .synthos-icon-box h4 {
        padding-right: calc(64px + var(--stg-gap));
        margin: 0;
    }
    .synthos-icon-box .synthos-large-text {
        margin: 0;
    }
    
    /* === Grid More Masked === */
    .synthos-grid-more-masked {
        --masked-border-radius: var(--synthos-small-br);
        --masked-inner-radius: var(--synthos-default-br);
        position: relative;
    }
    .synthos-grid-more-masked a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--synthos-small-br);
    }
    .synthos-grid-more-masked .synthos-masked-media p {
        padding-right: 96px;
    }
    
    /* === Price Table Card === */
    .synthos-price-table h6,
    .synthos-price-table > p {
        margin-bottom: var(--stg-gap);
    }
    .synthos-price-wrapper {
        background: radial-gradient(ellipse at center top, var(--synthos-s-backlight) 0%, transparent) no-repeat;
        margin: 0 calc(-1 * var(--stg-gap)) var(--stg-gap) calc(-1 * var(--stg-gap));
        padding: var(--stg-gap);
        width: calc(100% + 2 * var(--stg-gap));
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .synthos-price-wrapper::before,
    .synthos-price-table ul.synthos-marked-list::after,
    .synthos-price-wrapper::after {
        content: '';
        width: 100%;
        height: 1px;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        left: 0;
    }
    .synthos-price-wrapper::before {
        top: 0;
    }
    .synthos-price-table ul.synthos-marked-list::after,
    .synthos-price-wrapper::after {
        bottom: 0;
    }
    .synthos-price-wrapper > .synthos-label {
        margin-bottom: 5px;
    }
    .synthos-price-wrapper > h2 {
        margin-bottom: -4px;
    }
    .synthos-price-table > .synthos-label {
        color: var(--synthos-s-heading);
        opacity: 1;
        margin-bottom: var(--stg-small-gap);
    }
    .synthos-price-table ul.synthos-marked-list {
        margin-bottom: var(--stg-gap);
        padding-bottom: var(--stg-gap);
        position: relative;
    }
    .synthos-price-table ul.synthos-marked-list li:last-child {
        margin: 0;
    }
    
    /* === FAQ List === */
    .synthos-faq-list {
        display: flex;
        flex-direction: column;
        gap: var(--stg-gap);
    }
    .synthos-faq-list hr {
        margin-top: 0;
        margin-bottom: 0;
    }
    
    /* === Toggles === */
    .synthos-toggles-item {
        cursor: pointer;
    }
    .synthos-toggles-item--title {
        display: block;
        position: relative;
    }
    .synthos-toggles-item--title .synthos-label {
        margin: -4px 0 8px 0;
        display: block;
    }
    .synthos-toggles-item--title sup {
        display: inline-block;
        margin: 0 2px;
        transform: translateY(-6px);
    }
    .synthos-toggles-item--title h4 {
        margin-bottom: 4px;
        padding-right: 64px;
        display: flex;
        justify-content: flex-start;
        gap: 8px;
        align-items: flex-start;
    }
    .synthos-toggles-item--title i.synthos-icon {
        position: absolute;
        right: 0;
        top: calc(50% - 16px);
        margin: 0;
        width: 32px;
        height: 32px;
        transform: rotate(-90deg);
        transition: transform 0.3s;
        will-change: transform;
    }
    .is-active .synthos-toggles-item--title .synthos-icon {
        transform: rotate(0deg) translate(0, 12px);
    }
    .synthos-toggles-item--content {
        padding-top: calc(2 * var(--stg-gap));
        position: relative;
        cursor: default;
    }
    .synthos-toggles-item--content::after {
        content: '';
        width: 100%;
        height: 1px;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        left: 0;
        top: var(--stg-gap);
    }
    .synthos-toggles-item--content span {
        margin-bottom: var(--stg-small-gap);
        display: block;
    }
    
    /* === Swiper Slider === */
    .synthos-slider-wrapper {
        position: relative;
    }
    .synthos-slider-wrapper svg {
        position: absolute;
        left: 0;
        top: 0;
        width: 0;
        height: 0;
        pointer-events: none;
        opacity: 0;
    }
    .synthos-slider {
        border-radius: var(--synthos-default-br);
        position: relative;
    }
    .synthos-slider-wrapper .synthos-slider {
        border-radius: 0;
    }
    .synthos-slider:not([data-effect="coverflow"]) img,
    .synthos-slider:not([data-effect="coverflow"]) video {
        border-radius: 0;
    }
    .synthos-slider-nav {
        position: absolute;
        z-index: 22;
    }
    
    /* Masked Block Navigation */
    .synthos-slider-nav.synthos-masked-content {
        display: flex;
        width: 160px;
        height: 80px;
    }
    .synthos-slider-nav.synthos-masked-content a {
        width: 64px;
        height: 64px;
        margin: 16px 0 0 16px;
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
        border-radius: var(--synthos-small-br);
        transition: background-color 0.3s;
    }
    .synthos-slider-nav.synthos-masked-content a::before {
        content: '';
        display: block;
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: inherit;
        border: 2px solid var(--synthos-s-heading);
        z-index: 3;
        transition: opacity 0.3s;
        will-change: opacity;
    }
    .synthos-slider-nav.synthos-masked-content span.synthos-icon {
        width: 16px;
        height: 16px;
        position: relative;
        z-index: 5;
        transition: transform 0.3s, background-color 0.3s;
        will-change: transform;
    }
    
    /* Side by Side Navigation */
    .synthos-slider-nav.on-sides {
        pointer-events: none;
        left: 0;
        width: 100%;
        top: calc(50% - 48px);
        display: flex;
        justify-content: space-between;
        --masked-border-radius: var(--synthos-default-br);
        --masked-inner-radius: var(--synthos-xl-br);
    }
    .synthos-slider-nav.on-sides a {
        pointer-events: all;
        width: 64px;
        height: 96px;
        display: block;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .synthos-slider-nav.on-sides a span.synthos-icon {
        width: 24px;
        height: 24px;
        background: var(--synthos-s-heading);
        transition: transform 0.3s;
        will-change: transform;
    }
    
    /* Content */
    .synthos-slider .swiper-slide.has-content {
        --masked-border-radius: var(--synthos-default-br);
        --masked-inner-radius: var(--synthos-large-br);
    }
    .synthos-slider .synthos-slide-content {
        position: absolute;
        bottom: 0;
    }
    .synthos-slider .synthos-slide-content-inner {
        padding: var(--stg-gap) var(--stg-large-gap);
        transition: transform 0.3s;
        will-change: transform;
    }
    .synthos-slide-content > a {
        position: absolute;
        display: block;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    .synthos-slide-post-title {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
    }
    .synthos-slide-post-title .synthos-meta {
        opacity: 0.5;
        margin-bottom: var(--stg-xs-gap);
    }
    
    /* === Fullscreen Slider === */
    .synthos-fullscreen-page .synthos-slider-wrapper {
        top: var(--st-header-height);
        width: calc(100% - 2 * var(--stg-small-gap));
        height: calc(100svh - var(--st-header-height) - var(--st-footer-height));
        margin: 0 var(--stg-small-gap);
        overflow: hidden;
    }
    .synthos-fullscreen-page .synthos-slider-media .st-lazy-wrapper {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .synthos-fullscreen-page .synthos-slider {
        width: 100%;
        height: inherit
    }
    .synthos-fullscreen-page .synthos-slider img,
    .synthos-fullscreen-page .synthos-slider video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
    }
    .synthos-fullscreen-page .synthos-slider .swiper-slide {
        height: 100%;
        position: relative;
    }
    .synthos-fullscreen-page .synthos-slider-media {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
    }
    
    /* === Portfolio Next Post === */
    .synthos-next-post.synthos-icon-link {
        gap: var(--stg-gap);
    }
    .synthos-next-post h2 {
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
        margin: var(--synthos-t-h1-margin);
        margin-bottom: 0;
    }
    .synthos-next-post h6 {
        opacity: 0.75;
        margin: 0 0 var(--stg-xs-gap) 0;
    }
    .synthos-next-post .synthos-icon-link-content {
        text-align: right;
    }
    .synthos-next-post.synthos-icon-link .synthos-icon-wrap {
        width: 160px;
        height: 160px;
        border-radius: var(--synthos-large-br);
    }
    .synthos-next-post .synthos-icon {
        width: 48px;
        height: 48px;
    }
    .synthos-next-post .synthos-icon-wrap::before {
        border: 4px solid var(--synthos-s-heading);
    }
    
    /* === Bento Grid Block === */
    .synthos-bento-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(2, 1fr);
        grid-gap: var(--stg-gap);
        grid-auto-columns: 1fr;
        grid-auto-rows: 1fr;
        grid-auto-flow: column;
        max-width: 100%;
    }
    .synthos-bento-grid img {
        max-width: 100%;
        height: auto;
    }
    .synthos-bento-grid .is-medium {
        overflow: hidden;
    }
    .synthos-bento-grid .is-small {
        aspect-ratio: 1;
    }
    /* Type 01 */
    .synthos-bento-grid .is-large:first-child {
        grid-area: 1 / 1 / 3 / 3;
    }
    .synthos-bento-grid .is-medium:nth-child(2) {
        grid-area: 1 / 3 / 1 / 5;
    }
    /* Type 02 */
    .synthos-bento-grid .is-medium:last-child {
        grid-area: 2 / 3 / 2 / 5;
    }
    /* Type 03 */
    .synthos-bento-grid .is-medium:first-child {
        grid-area: 1 / 1 / 2 / 3;
    }
    .synthos-bento-grid .is-large:last-child {
        grid-area: 1 / 3 / 3 / 5;
    }
    /* Type 04 */
    .synthos-bento-grid .is-medium:nth-child(3) {
        grid-area: 2 / 1 / 3 / 3;
    }
    
    /* Inner Elements */
    .synthos-bento-grid > div {
        position: relative;
    }
    .synthos-bento-grid > div,
    .synthos-bento-grid .synthos-block {
        border-radius: var(--synthos-default-br);
    }
    .synthos-bento-grid div:has(img) {
        padding: 0;
        contain: paint;
    }
    .synthos-bento-grid img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: inherit;
    }
    .synthos-bento-grid h1,
    .synthos-bento-grid h2 {
        margin-bottom: 0;
    }
    .synthos-bento-grid > div > ul {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: space-between;
    }
    .synthos-bento-grid .synthos-marked-list {
        margin: 0
    }
    
    /* === Meta List === */
    .synthos-meta-list {
        display: flex;
        flex-direction: column;
        min-height: 100%;
        justify-content: space-between;
        align-items: flex-start;
        padding: 0;
        margin: 0;
    }
    .synthos-meta-list li {
        padding: 0;
        margin: 0;
        list-style: none;
    }
    .synthos-meta-list li span {
        display: block;
    }
    /* Hack for Safari */
    @supports (-webkit-appearance:none) and (stroke-color:transparent) {
        .synthos-meta-list {
            min-height: calc(100% - 2 * var(--stg-gap));
        }
    }
    
    /* === Masked CTA === */
    .synthos-masked-cta .synthos-cta-form {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        gap: var(--stg-gap);
        padding: var(--stg-large-gap);
        background: var(--synthos-s-accent);
    }
    .synthos-masked-cta .synthos-cta-form {
        --synthos-s-heading: var(--synthos-s-accented-text);
    }
    .synthos-masked-cta button {
        background: var(--synthos-s-heading);
        border-color: var(--synthos-s-heading);
        border-radius: var(--synthos-default-br);
        padding: calc(1.5 * var(--stg-gap)) calc(1.5 * var(--stg-large-gap));
    }
    .synthos-masked-cta button span {
        background: var(--synthos-s-accent);
        width: 32px;
        height: 32px;
    }
    .synthos-cta-title {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
        color: var(--synthos-s-heading);
        margin-bottom: var(--stg-large-gap);
    }
    .synthos-masked-cta input {
        background: var(--synthos-s-border);
        color: var(--synthos-s-heading);
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        font-size: var(--synthos-t-h2-fs);
        letter-spacing: var(--synthos-t-h2-ls);
        line-height: 1;
        border-radius: var(--synthos-default-br);
        padding: var(--stg-gap);
        padding-top: calc(var(--stg-gap) - 4px);
    }
    .synthos-masked-cta input:focus {
        border-color: var(--synthos-s-border);
    }
    .synthos-masked-cta input::-webkit-input-placeholder {
        opacity: 1;
        color: var(--synthos-s-heading);
    }
    .synthos-masked-cta input::-moz-placeholder {
        opacity: 1;
        color: var(--synthos-s-heading);
    }
    .synthos-masked-cta input::-ms-input-placeholder {
        opacity: 1;
        color: var(--synthos-s-heading);
    }
    .synthos-masked-cta-content {
        text-align: right;
        width: 350px;
    }
    .synthos-masked-cta-content p {
        display: block;
        padding: 0 0 var(--stg-d-gap) var(--stg-d-gap);
    }
    
    /* === Member Contacts === */
    .synthos-member-contacts-list {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        gap: var(--stg-small-gap);
    }
    .synthos-member-contacts-list a {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-heading);
        font-size: var(--synthos-t-h6-fs);
        letter-spacing: var(--synthos-t-h6-ls);
        line-height: var(--synthos-t-h6-lh);
    }
    .synthos-member-contacts .synthos-socials-list {
        margin-top: var(--stg-gap);
    }
    .synthos-member-contacts .synthos-socials-list a {
        width: 80px;
        height: 80px;
        border-radius: var(--synthos-small-br);
    }
    .synthos-member-contacts .synthos-socials-list a::before {
        border: 2px solid var(--synthos-s-heading);
    }
    .synthos-member-contacts .synthos-socials-list a i {
        width: 40px;
        height: 40px;
    }
    
    /* === Infinite List === */
    body:has(.synthos-infinite-list) .synthos-backlight {
        display: none;
    }
    .synthos-infinite-list-wrap {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 11;
        width: 100%;
        height: 100%;
        overflow: hidden;
        cursor: grab;
    }
    .synthos-infinite-list-wrap.is-grabbed {
        cursor: grabbing;
    }
    .synthos-infinite-list {
        opacity: 0;
        position: absolute;
        left: 0;
        top: 0;
        pointer-events: none;
    }
    .synthos-infinite-scroll {
        width: var(--stg-container-width);
        margin: 0 auto;
        position: relative;
        z-index: 15;
    }
    .synthos-infinite-list-item {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        padding: 30px 0 35px 0;
        transition: opacity 0.3s;
    }
    .synthos-infinite-list-item::before {
        content: '';
        position: absolute;
        width: 100%;
        display: block;
        height: 100%;
        background: radial-gradient(ellipse, var(--synthos-s-heading) 0%, transparent 75%) no-repeat bottom center;
        background-size: 100% 200%;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity 0.3s;
        will-change: opacity;
    }
    .synthos-infinite-list-item::after {
        content: '';
        width: 100vw;
        height: 1px;
        display: block;
        background: var(--synthos-c-border-gradient);
        position: absolute;
        bottom: 0;
        left: calc(-0.5 * (100vw - var(--stg-container-width)));
    }
    .synthos-infinite-list-item a {
        position: absolute;
        left: -65px;
        top: 0;
        width: calc(100% + 130px);
        height: 100%;
        z-index: 5;
        display: block;
    }
    .synthos-infinite-list-title {
        transition: transform 0.3s;
        will-change: transform;
    }
    .synthos-infinite-list-item .synthos-meta {
        display: block;
        margin-bottom: 7px;
    }
    .synthos-infinite-list-preview {
        position: absolute;
        width: 96px;
        height: 96px;
        border-radius: var(--synthos-small-br);
        right: calc(100% + 28px);
        top: calc(50% - 48px);
        background: no-repeat center;
        background-size: cover;
        pointer-events: none;
        opacity: 0;
        transition: opacity 0.3s;
    }
    .synthos-infinite-list-preview video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
        border-radius: 50%;
    }
    .synthos-infinite-list-icon {
        width: 80px;
        height: 80px;
        display: block;
        border-radius: var(--synthos-small-br);
        display: flex;
        justify-content: center;
        align-items: center;
        position: relative;
    }
    .synthos-infinite-list-icon span {
        position: relative;
        z-index: 5;
        transition: transform 0.3s, background-color 0.3s;
    }
    .synthos-infinite-list-icon::before,
    .synthos-infinite-list-icon::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border-radius: inherit;
        will-change: opacity;
        transition: opacity 0.3s;
    }
    .synthos-infinite-list-icon::before {
        z-index: 3;
        border: 2px solid var(--synthos-s-heading);
        opacity: 1;
    }
    .synthos-infinite-list-icon::after {
        background: var(--synthos-s-accent);
        opacity: 0;
    }
    .synthos-infinite-list-bgs {
        pointer-events: none;
        opacity: 0.15;
    }
    .synthos-infinite-list-bgs,
    .synthos-infinite-list-bgs > div {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 0;
        overflow: hidden;
    }
    .synthos-infinite-list-bgs > div {
        background: no-repeat center;
        background-size: cover;
        will-change: opacity, transform;
        transition: opacity 0.5s, transform 0.5s;
        transform: scale(1.05);
        opacity: 0;
        z-index: 1;
    }
    .synthos-infinite-list-bgs > div.is-active {
        opacity: 1;
        transform: scale(1);
        z-index: 2;
    }
    .synthos-infinite-list-bgs > div video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    
    /* === Column Listing Item === */
    .synthos-column-item:not(:last-child) {
        margin-bottom: var(--stg-large-gap);
    }
    .synthos-column-item.synthos-masked-block {
        --masked-inner-radius: var(--synthos-large-br);
    }
    .synthos-column-item-content {
        padding: var(--stg-gap) var(--stg-gap) 0 0;
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        min-width: calc(0.33 * var(--stg-container-width));
    }
    .synthos-column-item-title {
        padding-left: var(--stg-small-gap);
        margin-right: var(--stg-gap);
        transform: translateY(-4px);
        transition: transform 0.3s;
    }
    .synthos-column-item-title span {
        margin-bottom: 8px;
        display: block;
        transition: transform 0.3s;
    }
    .synthos-column-item-title h4 {
        margin-bottom: 0;
        transition: transform 0.3s;
    }
    .synthos-column-item-content .synthos-icon-wrap {
        position: relative;
        width: 80px;
        height: 80px;
        border-radius: var(--synthos-small-br);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    .synthos-column-item-content .synthos-icon-wrap::before {
        transition: opacity 0.3s;
        will-change: opacity;
    }
    
    .synthos-column-item a {
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        border-radius: var(--synthos-default-br);
        z-index: 7;
    }
    
    /* === Grid CTA === */
    .synthos-masked-content {
        max-width: 35%;
        position: absolute;
        bottom: 0;
        right: 0;
    }
    .synthos-masked-content:has(.synthos-square-button) {
        max-width: 50%;
    }
    .synthos-grid-cta-media {
        padding: var(--stg-large-gap);
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
    }
    .synthos-masked-cta-content p {
        padding: 0 0 var(--stg-d-gap) var(--stg-d-gap);
        display: block;
        text-align: right;
    }
    .synthos-bento-grid .synthos-masked-content p {
        padding: var(--stg-d-gap) 0 0 var(--stg-d-gap);
    }
    .synthos-bento-grid div[data-bg-src] p,
    .synthos-bento-grid div[data-bg-src] h1,
    .synthos-bento-grid div[data-bg-src] h2,
    .synthos-bento-grid div[data-bg-src] h3,
    .synthos-bento-grid div[data-bg-src] h4,
    .synthos-bento-grid div[data-bg-src] h5,
    .synthos-bento-grid div[data-bg-src] h6,
    .synthos-bento-grid div[data-bg-src] p.synthos-large-text {
        color: var(--synthos-s-accented-text);
    }
    .synthos-grid-cta .is-medium {
        display: flex;
        align-items: center;
        text-align: center;
        justify-content: center;
    }
    .synthos-grid-cta .synthos-square-button {
        width: 100%;
        height: 100%;
        border-radius: var(--synthos-default-br);
    }
    .synthos-grid-cta .synthos-square-button span {
        width: 80px;
        height: 80px;
    }
    .synthos-grid-cta-heading {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-accented-text);
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
        margin: var(--synthos-t-h1-margin);
    }
    
    /* === CTA with Image === */
    .stg-cta-with-image {
        --this-spacing: var(--synthos-section-gap);
        padding: var(--this-spacing) 0;
    }
    .stg-cta-with-image > div {
        position: relative;
    }
    [class*='stg-col-'] > div.synthos-offset-image {
        --this-offset: calc(-0.5 * (100vw - var(--stg-container-width)));
        width: calc(50% - var(--this-offset));
        top: calc(-1 * var(--this-spacing));
        bottom: calc(-1 * var(--this-spacing));
        position: absolute;
        background-position: right;
    }
    [class*='stg-col-']:first-child > div.synthos-offset-image {
        left: var(--this-offset);
        border-radius: 0 var(--synthos-default-br) var(--synthos-default-br) 0;
    }
    [class*='stg-col-']:last-child > div.synthos-offset-image {
        right: var(--this-offset);
        border-radius: var(--synthos-default-br) 0 0 var(--synthos-default-br);
    }
    .synthos-cta-form-title {
        font-family: var(--synthos-t-heading-ff);
        font-weight: var(--synthos-t-heading-fw);
        color: var(--synthos-s-heading);
        font-size: var(--synthos-t-h1-fs);
        letter-spacing: var(--synthos-t-h1-ls);
        line-height: var(--synthos-t-h1-lh);
    }
    .synthos-cta-text {
        padding: calc(var(--stg-gap) + var(--stg-large-gap)) 0;
    }
    .synthos-cta-icon {
        position: relative;
    }
    .synthos-cta-icon,
    .synthos-cta-icon::before,
    .synthos-cta-icon::after {
        background-color: var(--synthos-s-text-accent);
        border-radius: 4px;
        width: 8px;
        height: 64px;
        display: block;
    }
    .synthos-cta-icon::before,
    .synthos-cta-icon::after {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
    }
    .synthos-cta-icon::before {
        transform: rotate(120deg);
    }
    .synthos-cta-icon::after {
        transform: rotate(240deg);
    }
    
    /* === Right Click Protection === */
    .synthos-rcp-wrap,
    .synthos-rcp-overlay {
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 333;
    }
    .synthos-rcp-wrap {
        transition: opacity 0.3s;
        will-change: opacity;
        pointer-events: none;
        opacity: 0;
    }
    .rcp-show .synthos-rcp-wrap {
        pointer-events: all;
        opacity: 1;
    }
    .synthos-rcp-overlay {
        z-index: 3;
        background-color: var(--synthos-s-body-bg);
        opacity: 0.9;
    }
    .synthos-rcp-container {
        z-index: 5;
        position: absolute;
        left: calc(50% - 0.5 * var(--stg-container-width));
        top: 50%;
        width: var(--stg-container-width);
        text-align: center;
        transition: transform 0.3s;
        will-change: transform;
        transform: translateY(0%);
        pointer-events: none;
    }
    .rcp-show .synthos-rcp-container {
        transform: translateY(-50%);
    }
    
    /** ==============
        10. PHOTOSWIPE
        ============== */
    .pswp__img {
        border-radius: var(--synthos-default-br);
    }
    .pswp__ui {
        width: 100%;
        height: 100%;
        position: relative;
        pointer-events: none;
    }
    .pswp--open .pswp__ui button {
        pointer-events: all;
    }
    .pswp__button,
    .pswp__ui--fit .pswp__top-bar button.pswp__button {
        width: 60px;
        height: 60px;
        border-radius: var(--synthos-small-br);
        background: var(--synthos-s-nav);
        display: flex;
        justify-content: center;
        align-items: center;
        transition: background-color 0.3s;
    }
    .pswp__button::before,
    .pswp__ui--fit .pswp__top-bar button.pswp__button::before,
    .pswp__button::after,
    .pswp__ui--fit .pswp__top-bar button.pswp__button::after {
        content: '';
        position: absolute;
        display: block;
    }
    .pswp__button::before,
    .pswp__ui--fit .pswp__top-bar button.pswp__button::before {
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        right: 0;
        border: 2px solid var(--synthos-s-heading);
        border-radius: inherit;
        transition: opacity 0.3s;
    }
    .pswp__button::after,
    .pswp__ui--fit .pswp__top-bar button.pswp__button::after {
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-size: contain;
        -webkit-mask-position: center;
        mask-repeat: no-repeat;
        mask-size: contain;
        mask-position: center;
        background: var(--synthos-s-heading);
        width: 16px;
        height: 16px;
        transition: transform 0.3s;
    }
    button.pswp__button.pswp__button--close,
    .pswp__top-bar button.pswp__button,
    .pswp__ui--fit .pswp__top-bar button.pswp__button {
        right: 64px;
        top: 48px;
        position: absolute;
    }
    button.pswp__button.pswp__button--close::after,
    .pswp__ui--fit .pswp__top-bar button.pswp__button::after {
        -webkit-mask-image: var(--icon-cross);
        mask-image: var(--icon-cross);
        width: 14px;
        height: 14px;
    }
    .synthos-pswp-prev,
    .synthos-pswp-next {
        position: absolute;
        top: calc(50% - 20px);
    }
    .synthos-pswp-prev {
        left: 64px;
    }
    button.pswp__button.synthos-pswp-prev::after {
        -webkit-mask-image: var(--icon-chevron-left);
        mask-image: var(--icon-chevron-left);
    }
    button.pswp__button.synthos-pswp-next::after {
        -webkit-mask-image: var(--icon-chevron-right);
        mask-image: var(--icon-chevron-right);
    }
    .synthos-pswp-next {
        right: 64px;
    }
    .pswp__preloader {
        top: calc(50% - 22px);
    }
    .synthos-pswp-media--video {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        pointer-events: all;
    }
    .synthos-pswp-media--video video {
        width: 100%;
        height: auto;
        border-radius: var(--synthos-default-br);
    }
    
    /** ================
        11. HOVER STATES
        ================ */
    @media (hover:hover) {
        a:hover {
            color: var(--synthos-s-heading);
        }
    
        /* --- PSWP Lightbox --- */
        .pswp__button:hover::after {
            transform: scale(1.2);
        }
        .pswp__button:hover::before,
        .pswp__ui--fit .pswp__top-bar button.pswp__button:hover::before {
            opacity: 0.15;
        }
        .pswp__button:hover,
        .pswp__ui--fit .pswp__top-bar button.pswp__button:hover {
            background-color: var(--synthos-s-accent);
        }
        .synthos-lightbox-link > .st-lazy-wrapper,
        .synthos-lightbox-link > img {
            transition: scale 0.3s;
        }
        .synthos-lightbox-link:hover > .st-lazy-wrapper,
        .synthos-lightbox-link:hover > img {
            scale: 1.02;
        }
    
        /* --- Forms and Fields --- */
        input[type="button"]:hover,
        input[type="reset"]:hover,
        input[type="submit"]:hover,
        button:not([class*='pswp']):hover,
        a.synthos-button:hover {
            color: var(--synthos-s-accented-text);
            background-color: var(--synthos-button-hover-bg);
        }
        a.synthos-button.is-secondary:hover,
        .synthos-square-button.is-secondary:hover {
            background: var(--synthos-s-accent);
            border-color: var(--synthos-s-border-accent);
        }
        a.synthos-button.is-secondary:hover {
            background: var(--synthos-s-border);
        }
    
        /* --- Main Menu --- */
        ul.main-menu li:hover > a {
            color: var(--synthos-c-menu-hover);
        }
        ul.main-menu li.menu-item-has-children:hover > a::after {
            background-color: var(--synthos-c-menu-hover);
        }
        ul.sub-menu li:hover::before {
            opacity: 1;
        }
        nav.synthos-nav ul.sub-menu li:hover::before {
            opacity: 1;
        }
    
        /* --- Footer --- */
        #synthos-footer .synthos-menu-widget a:hover,
        .synthos-menu-widget ul li:hover::before {
            opacity: 1;
        }
        .synthos-socials-list a:hover {
            background-color: var(--synthos-s-accent);
        }
        .synthos-socials-list a:hover i {
            background-color: var(--synthos-s-accented-text);
        }
        .synthos-socials-list a:hover::before {
            opacity: 0.15;
        }
    
        /* --- Block --- */
        .synthos-block:hover::after {
            opacity: 0.75;
        }
        .synthos-block:hover::before {
            opacity: 1;
        }
    
        /* --- Links --- */
        .synthos-tags-list li a:hover {
            background-color: var(--synthos-s-accent);
            border-color: var(--synthos-s-border-accent);
            color: var(--synthos-s-accented-text);
        }
        .synthos-arrow-link:hover::before {
            transform: scale(0, 1);
        }
        .synthos-arrow-link:hover::after {
            transform: scale(1.2, 1.2);
        }
    
        /* --- Icon Link --- */
        .synthos-icon-link:hover i {
            transform: scale(1.2);
            background-color: var(--synthos-s-accented-text);
        }
        .synthos-icon-link:hover .synthos-icon-wrap {
            background-color: var(--synthos-s-accent);
        }
        .synthos-icon-link:hover .synthos-icon-wrap::before {
            opacity: 0.15;
        }
        .synthos-icon-link:hover .synthos-icon-link-content:first-child {
            transform: translateX(calc(-1 * var(--stg-xs-gap)));
        }
        .synthos-icon-link:hover .synthos-icon-link-content:last-child {
            transform: translateX(var(--stg-xs-gap));
        }
    
        .synthos-square-button:hover span.synthos-icon {
            transform: scale(1.2);
            background-color: var(--synthos-s-accented-text);
        }
    
        /* --- Portfolio --- */
        .synthos-portfolio-card:hover .synthos-icon {
            transform: scale(1.2, 1.2);
        }
        .synthos-portfolio-card:hover .synthos-portfolio-card-image {
            transform: scale(1.01);
        }
        .synthos-portfolio-short-item:hover .synthos-icon {
            transform: scale(1.2);
        }
    
        .synthos-carousel-card:hover .synthos-icon {
            transform: scale(1.2, 1.2);
        }
        .synthos-carousel-card:hover .synthos-carousel-card-image {
            transform: scale(1.01);
        }
        .synthos-detailed-list li:hover::before {
            opacity: 0.05;
        }
        .synthos-detailed-list li:has(a):hover .synthos-detailed-list-button {
            background: var(--synthos-s-accent);
            border-color: var(--synthos-s-border-accent);
        }
        .synthos-detailed-list li:has(a):hover .synthos-detailed-list-button .synthos-icon {
            background-color: var(--synthos-s-accented-text);
        }
        .synthos-grid-more-masked:hover .synthos-square-button.is-secondary {
            background: var(--synthos-s-accent);
            border-color: var(--synthos-s-border-accent);
        }
        .synthos-grid-more-masked:hover .synthos-square-button span.synthos-icon {
            transform: scale(1.2);
            background-color: var(--synthos-s-accented-text);
        }
    
        /* --- Slider --- */
        .synthos-slider-nav.synthos-masked-content a:hover span.synthos-icon {
            transform: scale(1.2);
            background-color: var(--synthos-s-accented-text);
        }
        .synthos-slider-nav.synthos-masked-content a:hover {
            background-color: var(--synthos-s-accent);
        }
        .synthos-slider-nav.synthos-masked-content a:hover::before {
            opacity: 0.15;
        }
        .synthos-slider-nav.on-sides a.synthos-slider-next:hover span.synthos-icon {
            transform: translateX(10px)
        }
        .synthos-slider-nav.on-sides a.synthos-slider-prev:hover span.synthos-icon {
            transform: translateX(-10px)
        }
        .synthos-slide-content:has(a):hover .synthos-slide-content-inner {
            transform: scale(1.1);
        }
    
        .synthos-masked-cta button:hover {
            background: var(--synthos-s-heading-fade);
        }
    
        /* --- Infinite List --- */
        .synthos-infinite-list-item:hover::before {
            opacity: 0.05;
        }
        .synthos-infinite-list-item:hover .synthos-infinite-list-preview {
            opacity: 1;
        }
        .synthos-infinite-list-item:hover .synthos-infinite-list-icon::before {
            opacity: 0.15;
        }
        .synthos-infinite-list-item:hover .synthos-infinite-list-icon::after {
            opacity: 1;
        }
        .synthos-infinite-list-item:hover .synthos-infinite-list-icon span {
            transform: scale(1.1);
            background-color: var(--synthos-s-accented-text);
        }
    
        /* --- Column List --- */
        .synthos-column-item-content:hover .synthos-icon-wrap {
            background-color: var(--synthos-s-accent);
        }
        .synthos-column-item-content:hover .synthos-icon-wrap::before {
            opacity: 0.15;
        }
        .synthos-column-item-content:hover .synthos-icon-wrap span.synthos-icon {
            transform: scale(1.2);
        }
        .synthos-column-item-content:hover .synthos-column-item-title span {
            transform: translateX(calc(-1 * var(--stg-xs-gap)));
        }
        .synthos-column-item-content:hover .synthos-column-item-title h4 {
            transform: translateX(var(--stg-xs-gap));
        }
    }
    @media (hover:none) {
        .synthos-backlight {
            display: none;
        }
        .synthos-block::before {
            opacity: 0.5;
        }
        .synthos-block::after {
            opacity: 0.75;
        }
        .synthos-toggles-item:not(.is-active)::after {
            opacity: 0;
        }
        .synthos-infinite-list-bgs {
            display: none;
        }
        .synthos-infinite-list-item {
            padding-left: calc(96px + var(--stg-gap));
        }
        .synthos-infinite-list-preview {
            opacity: 1;
            right: auto;
            left: 0;
        }
    }
    
    /** ==============
        12. ANIMATIONS
        ============== */
    @keyframes sta_spin {
        0% {
            transform: rotate(0);
        }
        100% {
            transform: rotate(360deg);
        }
    }
    
    @keyframes sta_shake {
        0% {
            transform: translateX(0);
        }
        10% {
            transform: translateX(-10px);
        }
        30% {
            transform: translateX(10px);
        }
        50% {
            transform: translateX(-10px);
        }
        70% {
            transform: translateX(10px);
        }
        90% {
            transform: translateX(-10px);
        }
        100% {
            transform: translateX(0);
        }
    }
    
    /* === Marquee === */
    @keyframes marquee_scroll {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
    }
    
    /* === List with Preview === */
    @keyframes lwp_active {
        0% {
            clip-path: inset(0% 0% 0% 100% round var(--synthos-default-br));
        }
        100% {
            clip-path: inset(0% 0% 0% 0% round var(--synthos-default-br));
        }
    }
    @keyframes lwp_active_r {
        0% {
            clip-path: inset(0% 100% 0% 0% round var(--synthos-default-br));
        }
        100% {
            clip-path: inset(0% 0% 0% 0% round var(--synthos-default-br));
        }
    }
    
    /* === Entrance Animations === */
    :root {
        --stea-move: var(--stg-gap);
        --stea-zoom-in: 0.9;
        --stea-zoom-out: 1.1;
        --stea-duration: 0.5s;
    }
    [data-split-appear] {
        --stea-move: 0.5cap;
    }
    [data-split-appear].synthos-line-overflow:not(.is-done) .line {
        overflow: hidden;
    }
    [data-split-appear].setting-up [data-appear] {
        transition: unset!important;
    }
    [data-unload*='fade-'].is-unloading,
    [data-unload*='zoom-'].is-unloading,
    [data-appear*='fade-']:not(.setting-up),
    [data-appear*='zoom-']:not(.setting-up) {
        transition: opacity var(--stea-duration), transform var(--stea-duration);
        will-change: opacity, transform;
    }
    [data-unload*='fade-'].is-unloading,
    [data-unload*='zoom-'].is-unloading,
    [data-appear*='fade-'],
    [data-appear*='zoom-'] {
        opacity: 0;
    }
    [data-appear*="zoom-"].in-view,
    [data-appear*="fade-"].in-view {
        opacity: 1;
        transform: scale(1) translate(0,0);
    }
    [data-unload="zoom-out"].is-unloading,
    [data-appear="zoom-in"],
    [data-appear="fade-zoom"] {
        transform: scale(var(--stea-zoom-in));
    }
    [data-unload="fade-down"].is-unloading,
    [data-appear="fade-up"] {
        transform: translateY(var(--stea-move));
    }
    [data-unload="fade-up"].is-unloading,
    [data-appear="fade-down"] {
        transform: translateY(calc(-1 * var(--stea-move)));
    }
    [data-unload="fade-right"].is-unloading,
    [data-appear="fade-left"] {
        transform: translateX(var(--stea-move));
    }
    [data-unload="fade-left"].is-unloading,
    [data-appear="fade-right"] {
        transform: translateX(calc(-1 * var(--stea-move)));
    }
    [data-unload="fade-down-right"].is-unloading,
    [data-appear="fade-up-left"] {
        transform: translate(var(--stea-move), var(--stea-move));
    }
    [data-unload="fade-down-left"].is-unloading,
    [data-appear="fade-up-right"] {
        transform: translate(calc(-1 * var(--stea-move)), var(--stea-move));
    }
    [data-unload="fade-up-right"].is-unloading,
    [data-appear="fade-down-left"] {
        transform: translate(var(--stea-move), calc(-1 * var(--stea-move)));
    }
    [data-unload="fade-up-left"].is-unloading,
    [data-appear="fade-down-right"] {
        transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move)));
    }
    [data-unload="zoom-out-down"].is-unloading,
    [data-appear="zoom-in-up"] {
        transform: translateY(var(--stea-move)) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-up"].is-unloading,
    [data-appear="zoom-in-down"] {
        transform: translateY(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-right"].is-unloading,
    [data-appear="zoom-in-left"] {
        transform: translateX(var(--stea-move)) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-left"].is-unloading,
    [data-appear="zoom-in-right"] {
        transform: translateX(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-down-right"].is-unloading,
    [data-appear="zoom-in-up-left"] {
        transform: translate(var(--stea-move), var(--stea-move)) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-down-left"].is-unloading,
    [data-appear="zoom-in-up-right"] {
        transform: translate(calc(-1 * var(--stea-move)), var(--stea-move)) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-up-right"].is-unloading,
    [data-appear="zoom-in-down-left"] {
        transform: translate(var(--stea-move), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in));
    }
    [data-unload="zoom-out-up-left"].is-unloading,
    [data-appear="zoom-in-down-right"] {
        transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-in));
    }
    [data-unload="fade-zoom"].is-unloading,
    [data-unload="zoom-in"].is-unloading,
    [data-appear="zoom-out"] {
        transform: scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-down"].is-unloading,
    [data-appear="zoom-out-up"] {
        transform: translateY(var(--stea-move)) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-up"].is-unloading,
    [data-appear="zoom-out-down"] {
        transform: translateY(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-right"].is-unloading,
    [data-appear="zoom-out-left"] {
        transform: translateX(var(--stea-move)) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-left"].is-unloading,
    [data-appear="zoom-out-right"] {
        transform: translateX(calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-down-right"].is-unloading,
    [data-appear="zoom-out-up-left"] {
        transform: translate(var(--stea-move), var(--stea-move)) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-down-left"].is-unloading,
    [data-appear="zoom-out-up-right"] {
        transform: translate(calc(-1 * var(--stea-move)), var(--stea-move)) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-up-right"].is-unloading,
    [data-appear="zoom-out-down-left"] {
        transform: translate(var(--stea-move), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out));
    }
    [data-unload="zoom-in-up-left"].is-unloading,
    [data-appear="zoom-out-down-right"] {
        transform: translate(calc(-1 * var(--stea-move)), calc(-1 * var(--stea-move))) scale(var(--stea-zoom-out));
    }