/* Inter Tight — weights used on the site: 400, 500, 600, 700, and 500 italic.
   Files live in /fonts/inter-tight/ (upload that folder with this stylesheet). */
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-italic-500-latin-ext.woff2") format("woff2");
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }
@font-face{ 
    font-family: "Inter Tight";
    font-style: italic;
    font-weight: 500;
    font-display: swap;
    src: url("/wp-content/uploads/fonts/inter-tight-italic-500-latin.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

/* reset WP block margins that are likely pushing the nav down */
html,
body {
    margin: 0;
    padding: 0;
}


/* Define navbar height variable for consistent spacing */
:root {
    --nav-h: 0px;
}

@media (min-width: 769px) {
    body.home {
        --nav-h: 80px;
    }
}

/* Portfolio/project singles only — blog overrides this in blog detail CSS */
body.single-post:not(.category-blog):not(.markaworks-blog-post-page) {
    --nav-h: -24px !important;
}

/* Project detail pages: no brand-green (or white) fill behind content */
html:has(.project-hero-section),
html:has(.project-content-section),
body:has(.project-hero-section),
body:has(.project-content-section),
body.single-post:not(.category-blog):not(.markaworks-blog-post-page):has(.project-hero-section),
body.single-post:not(.category-blog):not(.markaworks-blog-post-page):has(.project-content-section) {
    background: transparent;
}



/* Default navbar height (content + padding) */

@media (max-width: 768px) {
    :root {
        --nav-h: 70px;
        /* Slightly smaller on tablet */
    }
}

@media (max-width: 480px) {
    :root {
        --nav-h: 58px;
        /* Smaller padding on mobile */
    }
}

/* Mobile hero styles moved to after desktop styles for proper override */

/* Global responsive constraints */
html {
    font-size: 16px;
    scroll-behavior: smooth;
}

body {
    min-width: 320px;
    overflow-x: hidden;
    position: relative;
    background: #053333;
    /* Ensure any seam shows brand background, not white */
}

/* Ensure all sections respect viewport width */
*:before,
*:after {
    box-sizing: border-box;
}

/* Ensure sections follow normal document flow */
section {
    position: relative;
    display: block;
}

/* Force partners section to appear after about section */
.markaworks-about+.markaworks-partners {
    position: static !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
}

/* Additional fix to prevent excessive gaps */
.markaworks-about {
    contain: layout style;
}

.markaworks-partners {
    clear: both;
    position: relative !important;
}

/* Responsive font scaling for large screens */
@media (min-width: 1920px) {
    html {
        font-size: 18px;
    }
}

@media (min-width: 2560px) {
    html {
        font-size: 20px;
    }
}

@media (min-width: 3840px) {
    html {
        font-size: 24px;
    }
}

/* Remove WordPress layout flow margin causing empty space */
:root :where(.is-layout-flow)>*,
.is-layout-flow>* {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Kill WP theme root padding under the footer only */
.wp-site-blocks {
    padding-bottom: 0 !important;
    padding-block-end: 0 !important;
}

/* Neutralize default WP block theme spacing on blog singles (detail styles set real spacing) */
body.markaworks-blog-post-page .wp-site-blocks,
body.single-post.category-blog .wp-site-blocks {
    margin: 0 !important;
}

body.markaworks-blog-post-page .is-layout-flow > :where(:not(.mw-blog-article):not(.mw-blog-content-block):not(.mw-blog-image-block):not(.mw-blog-featured-image):not(.mw-blog-tags):not(.mw-blog-stream):not(.mw-blog-header)),
body.single-post.category-blog .is-layout-flow > :where(:not(.mw-blog-article):not(.mw-blog-content-block):not(.mw-blog-image-block):not(.mw-blog-featured-image):not(.mw-blog-tags):not(.mw-blog-stream):not(.mw-blog-header)) {
    margin-block-start: 0 !important;
    margin-block-end: 0 !important;
}

/* Hide empty WP paragraphs that create dead space above article */
body.markaworks-blog-post-page .entry-content > p:empty,
body.markaworks-blog-post-page .wp-block-post-content > p:empty,
body.single-post.category-blog .entry-content > p:empty,
body.single-post.category-blog .wp-block-post-content > p:empty {
    display: none !important;
}

/* REMOVE ALL GAPS BETWEEN SECTIONS - PROJECTS AND ABOUT PAGES */

/* Projects Page - Remove all section gaps */
.markaworks-projects-section {
    margin: 0 !important;
    padding-top: 120px !important;
    padding-bottom: 0 !important;
}

.markaworks-testimonials {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Intentional breathing room below testimonials on Projects page */
body.markaworks-dark-page .markaworks-testimonials {
    margin-bottom: 0 !important;
    padding-bottom: clamp(120px, 15vw, 240px) !important;
}

@media (max-width: 768px) {
    body.markaworks-dark-page .markaworks-testimonials {
        padding-bottom: clamp(80px, 15vw, 160px) !important;
    }
}

@media (max-width: 480px) {
    body.markaworks-dark-page .markaworks-testimonials {
        padding-bottom: clamp(60px, 18vw, 120px) !important;
    }
}

/* About Page - Remove all section gaps */
.markaworks-about-stats {
    margin: 0 !important;
    padding-top: 120px !important;
    padding-bottom: 0 !important;
}

.markaworks-partners {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.markaworks-about-quote {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

.markaworks-about-team {
    margin: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* Ensure navbar connects seamlessly to first section (except hero which needs offset) */
.markaworks-navbar+section:not(.markaworks-hero):not(.project-hero-section),
.markaworks-navbar+.markaworks-projects-section,
.markaworks-navbar+.markaworks-about-stats,
.markaworks-overlay+section:not(.markaworks-hero):not(.project-hero-section) {
    margin-top: 0 !important;
}

/* Fixed navbar overlays the hero — do not offset with --nav-h (that created a tall teal band) */
.markaworks-hero,
.project-hero-section,
.contact-hero-section,
.contact-page-booking {
    margin-top: 0 !important;
    position: relative !important;
    display: block !important;
}

/* Remove gaps between consecutive sections */
section+section,
.markaworks-projects-section+.markaworks-testimonials,
.markaworks-about-stats+.markaworks-partners,
.markaworks-partners+.markaworks-about-quote,
.markaworks-about-quote+.markaworks-about-team {
    margin-top: 0 !important;
}

/* Ensure hero always connects to about with no gap */
.markaworks-hero+.markaworks-about {
    margin-top: 0 !important;
}

/* Override all responsive padding rules to maintain no gaps */
@media (max-width: 1024px) {

    .markaworks-projects-section,
    .markaworks-testimonials,
    .markaworks-about-stats,
    .markaworks-partners,
    .markaworks-about-quote,
    .markaworks-about-team {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .markaworks-projects-section {
        padding-top: calc(var(--nav-h, 80px) + 16px) !important;
    }
}

@media (max-width: 768px) {

    .markaworks-projects-section,
    .markaworks-testimonials,
    .markaworks-about-stats,
    .markaworks-partners,
    .markaworks-about-quote,
    .markaworks-about-team {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .markaworks-projects-section {
        padding-top: calc(var(--nav-h, 80px) + 12px) !important;
    }
}

@media (max-width: 480px) {

    .markaworks-projects-section,
    .markaworks-testimonials,
    .markaworks-about-stats,
    .markaworks-partners,
    .markaworks-about-quote,
    .markaworks-about-team {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    .markaworks-projects-section {
        padding-top: calc(var(--nav-h, 80px) + 12px) !important;
    }
}


/* MarkaWorks Navigation Styles - Completely Scoped */

/* Reset only for markaworks.components */
.markaworks-navbar,
.markaworks-navbar *,
.markaworks-overlay {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Main Navigation Bar */
.markaworks-navbar {
    background: #053333;
    padding: clamp(12px, 1.2vw, 16px) 40px;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 1000;
    box-shadow: none;
    animation: markaworks-slide-down 0.6s ease-out;
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    transition: transform 0.3s ease-in-out;
}

.markaworks-navbar.landing-page-navbar {
    background: transparent !important;
    background-color: transparent !important;
}

.markaworks-navbar.landing-page-navbar.landing-page-navbar--solid {
    background: #053333 !important;
    background-color: #053333 !important;
}

/* Hidden state for navbar on scroll down */
.markaworks-navbar.markaworks-nav-hidden {
    transform: translateY(-100%) !important;
}

/* WordPress Compatibility - Ensure navbar works with admin bar */
.admin-bar .markaworks-navbar {
    top: 32px;
}

@media screen and (max-width: 782px) {
    .admin-bar .markaworks-navbar {
        top: 46px;
    }
}

/* WordPress - Force navbar to work in WordPress environment */
body.wp-admin .markaworks-navbar,
body.logged-in .markaworks-navbar,
.wp-site-blocks .markaworks-navbar {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
}

/* WordPress logged-in admin bar adjustment */
body.logged-in.admin-bar .markaworks-navbar {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    body.logged-in.admin-bar .markaworks-navbar {
        top: 46px !important;
    }
}

@keyframes markaworks-slide-down {
    from {
        transform: translateY(-100%);
        opacity: 0;
    }

    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Container */
.markaworks-nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    max-width: 1400px !important;
    margin: 0 auto;
    position: relative;
    width: 100%;
    padding: 0 clamp(20px, 4vw, 40px);
}

/* Center the navigation links - Desktop only */
@media (min-width: 769px) {
    .markaworks-nav-links {
        position: absolute !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
}

/* Logo Container */
.markaworks-logo {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    text-decoration: none;
    overflow: hidden;
}

.markaworks-logo-svg,
.markaworks-logo-img,
.markaworks-logo svg,
.markaworks-logo img {
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    max-width: 200px !important;
    display: block !important;
    outline: none !important;
    border: none !important;
    background: transparent !important;
    object-fit: contain !important;
}

/* Hide placeholder objects */
.markaworks-logo object,
.markaworks-logo embed {
    display: none !important;
}

/* Force override any inline SVG styles */
.markaworks-logo svg[style],
.markaworks-logo-svg[style] {
    width: auto !important;
    height: 42px !important;
    max-height: 42px !important;
    max-width: 200px !important;
    object-fit: contain !important;
}

/* Prevent SVG scaling issues */
.markaworks-logo svg {
    transform: none !important;
    transform-origin: left center !important;
    flex-shrink: 0 !important;
}

/* Navigation Links */
.markaworks-nav-links {
    display: flex !important;
    align-items: center !important;
    gap: 8px;
    list-style: none;
    animation: markaworks-fade-in-centered 1s ease-out 0.3s backwards;
    margin: 0;
    padding: 0;
}

@keyframes markaworks-fade-in {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes markaworks-fade-in-centered {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.markaworks-nav-item {
    position: relative;
}

.markaworks-nav-link {
    display: block;
    padding: 12px 16px;
    color: #F4F5F5;
    text-decoration: none;
    font-size: 16px;
    font-weight: 400;
    transition: all 0.3s ease;
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}

.markaworks-nav-link::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #B8D432;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transform: translateX(-50%);
}

.markaworks-nav-link:hover::before,
.markaworks-nav-link.active::before {
    width: 80%;
}

.markaworks-nav-link.active {
    color: #B8D432;
    font-weight: 600;
}

.markaworks-nav-link:hover {
    color: #B8D432;
    background: rgba(184, 212, 50, 0.1);
    transform: translateY(-2px);
}

/* Team login sits in the mobile menu. On desktop the centered menu copy is hidden
   and a smaller link is shown beside the project button. */
.markaworks-team-login-link {
    display: block;
    padding: 12px 16px;
    color: rgba(244, 245, 245, 0.55);
    font-size: 14px;
    font-weight: 400;
    text-decoration: none;
}

.markaworks-team-login-link:hover {
    color: #F4F5F5;
}

.markaworks-team-login-desktop {
    display: none;
}

@media (min-width: 769px) {
    .markaworks-team-login-menu {
        display: none !important;
    }

    .markaworks-team-login-desktop {
        display: inline-block;
        margin-left: auto;
        margin-right: 12px;
        position: relative;
        z-index: 2;
        color: rgba(244, 245, 245, 0.55);
        font-size: 13px;
        font-weight: 400;
        line-height: 1;
        text-decoration: none;
        white-space: nowrap;
    }

    .markaworks-team-login-desktop:hover {
        color: #F4F5F5;
    }
}

/* CTA Button with animated conic-gradient border */
.markaworks-cta-button {
    background: #B8D432;
    color: #053333;
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    border: solid 3px transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    position: relative;
    overflow: visible;
    z-index: 1;
    animation: markaworks-fade-in-right 0.8s ease-out;
    display: inline-block;
}

/* Ensure inner content sits above decorative layers */
.markaworks-cta-button>* {
    position: relative;
    z-index: 1;
}

@keyframes markaworks-fade-in-right {
    from {
        transform: translateX(30px);
        opacity: 0;
    }

    to {
        transform: translateX(0);
        opacity: 1;
    }
}

.markaworks-cta-button::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(5, 51, 51, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    /* Place ripple between background and text */
    z-index: 0;
    pointer-events: none;
}

.markaworks-cta-button:hover::before {
    width: 0;
    height: 0;
}

.markaworks-cta-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 8px 25px rgba(184, 212, 50, 0.5);
    opacity: 1;
}

.markaworks-cta-button:hover::after {
    animation-duration: 2s;
}

.markaworks-cta-button:active {
    transform: translateY(-1px) scale(1.02);
    opacity: 1;
}

.markaworks-cta-button:active::after {
    animation-duration: 1.5s;
}

/* Extra safety for CTA visibility across states */
.markaworks-cta-button,
.markaworks-cta-button:focus,
.markaworks-cta-button:focus-visible {
    opacity: 1;
}

/* Animated border using pseudo-element */
.markaworks-cta-button::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 100px;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

/* Apply the same subtle looping border to large CTA by default (hover unchanged) */
.markaworks-cta-button-large::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 100px;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: 0;
}

/* CSS Custom Property for animated border */
@property --border-angle {
    syntax: "<angle>";
    inherits: true;
    initial-value: 0turn;
}

@keyframes mw-border-spin {
    to {
        --border-angle: 1turn;
    }
}

/* Mobile Menu Button */
.markaworks-mobile-menu-btn {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

.markaworks-menu-bar {
    width: 28px;
    height: 3px;
    background: #B8D432;
    transition: all 0.3s ease;
    border-radius: 3px;
}

.markaworks-mobile-menu-btn.markaworks-active .markaworks-menu-bar:nth-child(1) {
    transform: rotate(45deg) translate(8px, 8px);
}

.markaworks-mobile-menu-btn.markaworks-active .markaworks-menu-bar:nth-child(2) {
    opacity: 0;
}

.markaworks-mobile-menu-btn.markaworks-active .markaworks-menu-bar:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -7px);
}

/* Overlay */
.markaworks-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 999;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.markaworks-overlay.markaworks-active {
    display: block;
    opacity: 1;
}

/* Show/Hide Desktop CTA */
.markaworks-desktop-cta {
    display: inline-block;
}

.markaworks-mobile-cta-wrapper {
    display: none;
}

/* Responsive Design - Tablet and Mobile */
@media (max-width: 768px) {
    .markaworks-navbar {
        padding: 16px 20px;
    }

    .markaworks-mobile-menu-btn {
        display: flex;
    }

    .markaworks-desktop-cta {
        display: none;
    }

    .markaworks-mobile-cta-wrapper {
        display: block;
        width: 100%;
    }

    .markaworks-nav-links {
        position: fixed;
        top: 0;
        right: -100%;
        left: auto;
        transform: none;
        width: 70%;
        max-width: 300px;
        height: 100vh;
        background: #053333;
        flex-direction: column;
        padding: 80px 20px 20px;
        gap: 0;
        box-shadow: -5px 0 20px rgba(0, 0, 0, 0.3);
        transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        animation: none;
    }

    .markaworks-nav-links.markaworks-active {
        right: 0;
    }

    .markaworks-nav-item {
        width: 100%;
        opacity: 0;
        transform: translateX(20px);
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item {
        animation: markaworks-slide-in-right 0.4s ease forwards;
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item:nth-child(1) {
        animation-delay: 0.1s;
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item:nth-child(2) {
        animation-delay: 0.15s;
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item:nth-child(3) {
        animation-delay: 0.2s;
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item:nth-child(4) {
        animation-delay: 0.25s;
    }

    .markaworks-nav-links.markaworks-active .markaworks-nav-item:nth-child(5) {
        animation-delay: 0.3s;
    }

    @keyframes markaworks-slide-in-right {
        to {
            opacity: 1;
            transform: translateX(0);
        }
    }

    .markaworks-navbar .markaworks-logo,
    .markaworks-logo {
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .markaworks-navbar .markaworks-logo-svg,
    .markaworks-navbar .markaworks-logo-img,
    .markaworks-logo-svg,
    .markaworks-logo-img,
    .markaworks-logo svg,
    .markaworks-logo img,
    .markaworks-logo svg[style],
    .markaworks-logo-svg[style] {
        height: 38px !important;
        max-height: 38px !important;
        width: auto !important;
        max-width: 190px !important;
        object-fit: contain !important;
    }
}

/* Small Mobile Devices */
@media (max-width: 480px) {
    .markaworks-navbar {
        padding: 12px 0px;
    }

    .markaworks-navbar .markaworks-logo,
    .markaworks-logo {
        height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .markaworks-navbar .markaworks-logo-svg,
    .markaworks-navbar .markaworks-logo-img,
    .markaworks-logo-svg,
    .markaworks-logo-img,
    .markaworks-logo svg,
    .markaworks-logo img,
    .markaworks-logo svg[style],
    .markaworks-logo-svg[style] {
        height: 34px !important;
        max-height: 34px !important;
        width: auto !important;
        max-width: 170px !important;
        object-fit: contain !important;
    }

    .markaworks-cta-button {
        padding: 12px 24px;
        font-size: 16px;
    }

    .markaworks-nav-links {
        width: 80%;
    }
}

/* ============================================
     MarkaWorks Logo Responsive Breakpoints - WordPress Compatible
     ============================================ */

/* Standardized header height for all Desktop and Tablet screens (769px+) */
@media (min-width: 769px) {

    .markaworks-navbar .markaworks-logo,
    .markaworks-logo {
        height: clamp(38px, 3.5vw, 48px) !important;
        max-height: clamp(38px, 3.5vw, 48px) !important;
        width: auto !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .markaworks-navbar .markaworks-logo-svg,
    .markaworks-navbar .markaworks-logo-img,
    .markaworks-logo-svg,
    .markaworks-logo-img,
    .markaworks-logo svg,
    .markaworks-logo img,
    .markaworks-logo svg[style],
    .markaworks-logo-svg[style] {
        height: clamp(38px, 3.5vw, 48px) !important;
        max-height: clamp(38px, 3.5vw, 48px) !important;
        width: auto !important;
        max-width: 240px !important;
        object-fit: contain !important;
    }

    .markaworks-navbar {
        padding: clamp(12px, 1.2vw, 16px) 40px !important;
    }
}

/* Ultra Small Mobile (≤320px) */
@media (max-width: 320px) {

    .markaworks-navbar .markaworks-logo,
    .markaworks-logo {
        height: 30px !important;
        max-height: 30px !important;
        width: auto !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .markaworks-navbar .markaworks-logo-svg,
    .markaworks-navbar .markaworks-logo-img,
    .markaworks-logo-svg,
    .markaworks-logo-img,
    .markaworks-logo svg,
    .markaworks-logo img,
    .markaworks-logo svg[style],
    .markaworks-logo-svg[style] {
        height: 30px !important;
        max-height: 30px !important;
        width: auto !important;
        max-width: 150px !important;
        object-fit: contain !important;
    }
}

/* ============================================
     WordPress Override - Force Logo Responsive Behavior
     ============================================ */

/* Keep logo height capped — height:auto/max-height:none was inflating the navbar */
body .markaworks-navbar .markaworks-logo,
body .markaworks-logo,
.wp-site-blocks .markaworks-navbar .markaworks-logo,
.wp-site-blocks .markaworks-logo {
    height: clamp(38px, 3.5vw, 48px) !important;
    max-height: clamp(38px, 3.5vw, 48px) !important;
    overflow: hidden !important;
}

body .markaworks-navbar .markaworks-logo-svg,
body .markaworks-navbar .markaworks-logo-img,
body .markaworks-logo-svg,
body .markaworks-logo-img,
body .markaworks-logo svg,
body .markaworks-logo img,
.wp-site-blocks .markaworks-navbar .markaworks-logo-svg,
.wp-site-blocks .markaworks-navbar .markaworks-logo-img,
.wp-site-blocks .markaworks-logo-svg,
.wp-site-blocks .markaworks-logo-img,
.wp-site-blocks .markaworks-logo svg,
.wp-site-blocks .markaworks-logo img {
    height: clamp(38px, 3.5vw, 48px) !important;
    max-height: clamp(38px, 3.5vw, 48px) !important;
    width: auto !important;
}

/* Hero Section Styles */
.markaworks-hero {
    position: relative;
    /* Increased slightly to 55vw for a better visual balance */
    height: 54.5vw;
    min-height: 450px;
    /* Removed restrictive max-height to allow hero to grow on 2k/3k screens */
    width: 100%;
    max-width: 100vw;
    /* Prevent horizontal overflow */
    margin-top: 0;
    /* Handled by the global !important rule above */
    /* Push section below fixed navbar */
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: #053333;
    /* Fallback background under video */
    box-sizing: border-box;
    /* Ensure padding is included in height calculation */

}

/* Seam overlay to eliminate subpixel gaps at the join */
.markaworks-hero::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* remove negative offset to avoid rounding seams */
    height: 1px;
    bottom: -1px;
    height: 2px;
    background: #053333;
    pointer-events: none;
    z-index: 2;
}

.markaworks-hero-video,
.hero-video-container {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    max-width: 100%;
    /* Prevent width overflow */
    overflow: hidden;
    /* ensure any over-scale is clipped */
    z-index: 1;
}

@media (max-width: 768px) {

    .markaworks-hero-video,
    .hero-video-container {
        top: 0;
        height: 100%;
    }
}

/* Fallback poster image */
.hero-video-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    z-index: 1;
}

.markaworks-hero-video-element {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
    /* prevent inline whitespace issues */
    background: #053333;
    /* match brand background while loading */
    pointer-events: none;
    z-index: 2;
    /* layer above poster so opacity transition covers it cleanly */
}

/* Fallback for browsers that don't support object-fit on video */
@supports not (object-fit: cover) {
    .markaworks-hero-video-element {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* Ensure poster image doesn't affect video sizing */
.hero-video-container video:not(.hero-video-media) {
    max-width: 100%;
    max-height: 100%;
}

/* Vimeo hero — oversized cover viewport (iframe sits directly in container) */
.hero-vimeo-iframe,
#vimeoHero {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.05);
    transform-origin: center center;
    pointer-events: none;
    z-index: 1;
    border: none;
    max-width: none;
    max-height: none;
    background: #053333;
}

.hero-vimeo-poster,
#heroPoster.hero-vimeo-poster {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: #053333 url('/wp-content/uploads/2025/11/image-6.png') no-repeat center center;
    background-size: cover;
    transition: opacity 0.8s ease;
}

/* Native video frame — oversized cover viewport (Bunny / MP4 fallback) */
.hero-video-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100vw;
    height: 56.25vw;
    min-height: 100%;
    min-width: 177.77vh;
    transform: translate(-50%, -50%) scale(1.05);
    transform-origin: center center;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
    max-width: none;
    max-height: none;
    background: #053333;
}

/*
 * Bunny Stream player uses object-fit: contain for playback (video is 1366x650, not 16:9).
 * Cover here was cropping differently than the iframe embed.
 */
.hero-video-frame .hero-video-media,
.hero-video-frame iframe.hero-video-media {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    pointer-events: none;
    border: none;
    max-width: none;
    max-height: none;
    background: #053333;
}

.hero-video-frame .hero-video-poster-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    pointer-events: none;
    background: #053333 url('/wp-content/uploads/2025/11/image-6.png') no-repeat center center;
    background-size: contain;
    transition: opacity 0.8s ease;
}

.hero-video-frame .hero-video-media::-webkit-media-controls {
    display: none !important;
}

.hero-video-frame .hero-video-media::-webkit-media-controls-enclosure {
    display: none !important;
}


.markaworks-hero-content {
    position: relative;
    width: 100%;
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 80px 40px;
    /* Spacing moved from hero container */
    box-sizing: border-box;
    z-index: 3;
}

.markaworks-hero-cta {
    position: absolute;
    top: 50%;
    right: 2%;
    /* Positioned very close to the right edge */
    transform: translate(calc(var(--dx, 0px)), calc(var(--dy, 0px) - 50%));
    width: 160px;
    height: 160px;
    background: #B8D432;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: #053333;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    box-shadow: 0 10px 30px rgba(184, 212, 50, 0.3);
    will-change: transform;
}

/* Ensure hero CTA never becomes invisible due to cascading state rules */
.markaworks-hero-cta,
.markaworks-hero-cta:hover,
.markaworks-hero-cta:focus,
.markaworks-hero-cta:active {
    opacity: 1 !important;
}

.markaworks-hero-cta-text {
    transition: transform 0.3s ease;
}

.markaworks-hero-cta:hover {
    transform: translate(calc(var(--dx, 0px)), calc(var(--dy, 0px) - 50%)) scale(1.1);
    box-shadow: 0 15px 40px rgba(184, 212, 50, 0.5);
}

/* Desktop-wide tightening to avoid whitespace on tall/wide screens */
@media (max-width: 1440px) {
    .markaworks-hero {
        /* Balanced height for laptops, still using rem minimum for zoom */
        height: max(50rem, 56.25vw);
        min-height: 400px;
        /* Removed max-height cap */
        margin-top: 0;
        padding-top: 0;
        margin-bottom: -1px;
        /* fix rounding gap */
    }

    .markaworks-hero-content {
        padding: 64px 32px;
        /* reduced from 80px 40px */
    }

    .markaworks-about {
        margin-top: 0;
        /* remove negative overlap under 1440 */
        padding-top: 56px;
        /* reduce top padding to tighten seam */
    }
}

/* Responsive adjustments for the button and hero between 1200px-992px */
@media (max-width: 1200px) {
    .markaworks-hero {
        height: max(42rem, 56.25vw);
        min-height: 400px;
        /* Removed max-height cap */
        margin-top: 0;
        padding-top: 0;
        margin-bottom: -1px;
        /* ensure tight join */
    }

    .markaworks-hero-content {
        padding: 52px 24px;
    }

    .markaworks-hero-cta {
        right: 2%;
        width: 140px;
        height: 140px;
        font-size: 16px;
    }

    .markaworks-about {
        margin-top: 0;
        /* cancel desktop negative margin in this range */
        padding-top: 48px;
    }
}

@media (max-width: 992px) {
    .markaworks-hero {
        height: max(35rem, 56.25vw);
        min-height: 400px;
        /* Removed max-height cap */
        margin-top: 0;
        padding-top: 0;
        margin-bottom: -1px;
        /* tighten section join */
    }

    .markaworks-hero-content {
        padding: 40px 24px;
    }

    .markaworks-hero-cta {
        right: 2%;
        width: 120px;
        height: 120px;
        font-size: 14px;
    }

    .markaworks-about {
        margin-top: 0;
        /* cancel desktop negative overlap in tablet range */
        padding-top: 40px;
    }
}

/* Mobile Hero Section Optimization - Placed after desktop styles for proper override */
@media (max-width: 768px) {
    .markaworks-hero {
        height: calc(100vw * 0.5625) !important;
        /* 16:9 aspect ratio */
        min-height: 280px !important;
        max-height: 432px !important;
        /* 768 * 0.5625 */
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: -1px !important;
        /* nudge next section up by 1px to remove rounding gap */
        padding-bottom: 0 !important;
    }

    .markaworks-hero-content {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 20px 16px;
        z-index: 3;
    }

    .markaworks-hero-cta {
        display: none !important;
        /* Hide the start a project button on mobile */
    }

    .markaworks-hero-cta:hover {
        transform: translateY(-2px) scale(1.05) !important;
        box-shadow: 0 8px 30px rgba(184, 212, 50, 0.4) !important;
    }

    .markaworks-about {
        margin-top: 0 !important;
        padding-top: 36px !important;
    }
}

@media (max-width: 480px) {
    .markaworks-hero {
        height: calc(100vw * 0.5625) !important;
        /* 16:9 aspect ratio */
        min-height: 200px !important;
        max-height: 270px !important;
        /* 480 * 0.5625 */
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: -1px !important;
    }

    .markaworks-hero-content {
        padding: 14px 12px !important;
    }

    .markaworks-hero-cta {
        display: none !important;
        /* Hide the start a project button on small mobile */
    }

    .markaworks-about {
        padding-top: 28px !important;
    }
}

@media (max-width: 320px) {
    .markaworks-hero {
        height: calc(100vw * 0.5625) !important;
        /* 16:9 aspect ratio */
        min-height: 150px !important;
        max-height: 180px !important;
        /* 320 * 0.5625 */
        margin-top: 0 !important;
        padding-top: 0 !important;
        margin-bottom: -1px !important;
    }

    .markaworks-hero-content {
        padding: 10px 8px !important;
    }

    .markaworks-hero-cta {
        display: none !important;
        /* Hide the start a project button on ultra-small mobile */
    }

    .markaworks-about {
        padding-top: 22px !important;
    }
}

/* About Section */
.markaworks-about {
    background: #053333;
    padding: clamp(60px, 8vw, 120px) clamp(20px, 4vw, 40px) 0 clamp(20px, 4vw, 40px);
    position: relative;
    z-index: 1;
    overflow: hidden;
    /* Remove base negative overlap to prevent inconsistent seams */
    margin-top: 0;
    margin-bottom: 0;
    /* Fixed height to prevent excessive gaps */
    min-height: auto;
    max-height: none;
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    isolation: isolate;
    /* avoid blending artifacts at seam */
}

/* Prevent first-child margins from creating perceived top gap */
.markaworks-about>*:first-child,
.markaworks-about-container>*:first-child {
    margin-top: 0 !important;
}

.markaworks-about-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    gap: clamp(20px, 3vw, 30px);
    position: relative;
    /* Ensure container doesn't expand beyond intended bounds */
    height: auto;
    overflow: hidden;
}

/* Main Content Layout */
.markaworks-about-main {
    display: flex;
    align-items: flex-start;
    gap: clamp(20px, 5vw, 70px);
    width: 100%;
}

.markaworks-about-left {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Spacing handled by line-height */
    max-width: 1400px;
}

/* Prevent line wrapping in about section headings */
.markaworks-about-left .markaworks-about-heading {
    white-space: nowrap;
}

.markaworks-about-right {
    flex: 0 1 326px;
    min-width: 280px;
    max-width: 326px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    height: 100%;
    min-height: 200px;
    gap: clamp(30px, 4vw, 60px);
    padding-top: 0;
    /* Align with Hello text at the top */
}

/* Hello Section */
.markaworks-hello {
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    min-height: clamp(2.7rem, 6.6vw, 4.8rem);
    min-width: clamp(120px, 15vw, 300px);
    /* Fixed height and stable width to prevent layout shift during typing */
    margin: 0;
    /* Spacing handled by line-height */
}

.markaworks-hello.markaworks-animate-in {
    animation: markaworks-fade-in-up 0.6s ease-out 0.1s forwards;
}

.markaworks-hello-text {
    color: #F4F5F5;
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 600;
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    width: auto;
    display: inline-block;
}

/* Multilingual typing animation */
.markaworks-hello-text.markaworks-multilingual-typing {
    border-right: 2px solid #B8D432;
    animation: markaworks-blink-caret 1s step-end infinite;
}

/* Blinking cursor for multilingual typing */
@keyframes markaworks-blink-caret {

    from,
    to {
        border-color: transparent;
    }

    50% {
        border-color: #B8D432;
    }
}

/* Typing effect classes for different word lengths */
.markaworks-typing-short {
    animation: markaworks-type-short 1s steps(5, end) forwards;
}

.markaworks-typing-medium {
    animation: markaworks-type-medium 1.2s steps(7, end) forwards;
}

.markaworks-typing-long {
    animation: markaworks-type-long 1.5s steps(10, end) forwards;
}

/* Erasing animation */
.markaworks-erasing {
    animation: markaworks-erase 0.8s steps(10, end) forwards;
}

@keyframes markaworks-type-short {
    from {
        width: 0;
    }

    to {
        width: 5ch;
    }
}

@keyframes markaworks-type-medium {
    from {
        width: 0;
    }

    to {
        width: 7ch;
    }
}

@keyframes markaworks-type-long {
    from {
        width: 0;
    }

    to {
        width: 10ch;
    }
}

@keyframes markaworks-erase {
    from {
        width: 10ch;
    }

    to {
        width: 0;
    }
}


/* Main Heading */
.markaworks-about-heading {
    font-size: clamp(2.2rem, 5.5vw, 4rem);
    font-weight: 600;
    line-height: 1.2;
    color: #F4F5F5;
    margin: 0;
    /* Spacing handled by line-height */
    opacity: 0;
    transition: opacity 0.5s ease;
    max-width: 600px;
    /* Increased width to prevent 3-line break */
}

/* Desktop-specific styling for proper line breaks */
@media (min-width: 1024px) {
    .markaworks-about-heading {
        max-width: 1000px;
        /* More generous width for desktop 2-line layout */
        line-height: 1.1;
        /* Tighter line height for better control */
    }
}

.markaworks-about-heading.markaworks-animate-in {
    opacity: 1;
}

/* Single-run typewriter animation for First impression sentence */
.markaworks-about-heading.markaworks-typewriter {
    overflow: hidden;
    white-space: normal;
    width: auto;
    border-right: 2px solid #B8D432;
    animation: markaworks-typewriter 3s steps(40, end) forwards,
        markaworks-blink-caret 1s step-end 0.5s 4;
}

.markaworks-about-heading.markaworks-typewriter-complete {
    border-right: none;
    animation: none;
    width: auto;
    white-space: normal;
    overflow: visible;
}

@keyframes markaworks-typewriter-single {
    from {
        width: 0;
    }

    to {
        width: 100%;
    }
}

.markaworks-text-white {
    color: #F4F5F5;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.markaworks-text-white.markaworks-animate-in {
    opacity: 1;
}

/* About section colored text - restore original styles */
.markaworks-about .markaworks-text-blue {
    color: #94CDD9;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.markaworks-about .markaworks-text-blue.markaworks-animate-in {
    opacity: 1;
}

.markaworks-about .markaworks-text-blue:hover {
    color: #94CDD9;
    text-shadow: 0 0 20px #94CDD9;
    transform: scale(1.05);
}

.markaworks-about .markaworks-text-purple {
    color: #BFB1D7;
    opacity: 0;
    transition: all 0.3s ease;
    cursor: pointer;
}

.markaworks-about .markaworks-text-purple.markaworks-animate-in {
    opacity: 1;
}

.markaworks-about .markaworks-text-purple:hover {
    color: #BFB1D7;
    text-shadow: 0 0 20px #BFB1D7;
    transform: scale(1.05);
}

/* Portfolio section colored words - inline with fade-in */
.markaworks-portfolio-showcase .markaworks-text-blue {
    color: #94CDD9;
    opacity: 1;
    transition: all 0.4s ease;
    cursor: pointer;
    display: inline;
}

.markaworks-portfolio-showcase .markaworks-text-blue.markaworks-animate-in {
    opacity: 1;
}

/* White text in portfolio section */
.markaworks-portfolio-showcase .markaworks-text-white {
    color: #F4F5F5;
    opacity: 1;
    transition: all 0.4s ease;
    display: inline;
}

.markaworks-portfolio-showcase .markaworks-text-white.markaworks-animate-in {
    opacity: 1;
}

.markaworks-portfolio-showcase .markaworks-text-blue:hover {
    color: #94CDD9;
    text-shadow: 0 0 10px #94CDD9, 0 0 20px rgba(148, 205, 217, 0.5);
    transform: none;
    filter: drop-shadow(0 0 8px rgba(148, 205, 217, 0.6));
    transition: all 0.4s ease;
}

.markaworks-portfolio-showcase .markaworks-text-purple {
    color: #BFB1D7;
    opacity: 1;
    transition: all 0.4s ease;
    cursor: pointer;
    display: inline;
}

.markaworks-portfolio-showcase .markaworks-text-purple.markaworks-animate-in {
    opacity: 1;
}

.markaworks-portfolio-showcase .markaworks-text-purple:hover {
    color: #BFB1D7;
    text-shadow: 0 0 10px #BFB1D7, 0 0 20px rgba(191, 177, 215, 0.5);
    transform: none;
    filter: drop-shadow(0 0 8px rgba(191, 177, 215, 0.6));
    transition: all 0.4s ease;
}

/* Special styling for "visually" - lime green */
.markaworks-portfolio-showcase .markaworks-text-green {
    color: #B8D432;
    opacity: 1;
    transition: all 0.4s ease;
    cursor: pointer;
    display: inline;
}

.markaworks-portfolio-showcase .markaworks-text-green.markaworks-animate-in {
    opacity: 1;
}

.markaworks-portfolio-showcase .markaworks-text-green:hover {
    color: #B8D432;
    text-shadow: 0 0 10px #B8D432, 0 0 20px rgba(184, 212, 50, 0.5);
    transform: none;
    filter: drop-shadow(0 0 8px rgba(184, 212, 50, 0.6));
    transition: all 0.4s ease;
}

/* Fast fade-in animation for colored text */
@keyframes markaworks-fast-fade-in {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Description and CTA */
.markaworks-about-description {
    color: #F4F5F5;
    font-size: clamp(0.75rem, 1.6vw, 1rem);
    /* Smaller font size for better visual balance */
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.markaworks-about-description.markaworks-animate-in {
    opacity: 1;
}

/* CTA Button in About Section (index.html) */
.markaworks-about .markaworks-about-cta {
    background: #B8D432;
    color: #0B4444;
    padding: 20px 32px;
    border-radius: 100px;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
    text-decoration: none;
    text-align: center;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 8px 25px rgba(184, 212, 50, 0.3);
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(40px) scale(0.9);
    display: inline-block;
}

.markaworks-about .markaworks-about-cta.markaworks-animate-in {
    animation: markaworks-bounce-in 1.2s cubic-bezier(0.4, 0, 0.2, 1) 2.5s forwards;
}

/* Removed slide-in animations - using simple fade-in only */

/* Bounce in animation for CTA */
@keyframes markaworks-bounce-in {
    0% {
        opacity: 0;
        transform: translateY(40px) scale(0.9);
    }

    50% {
        opacity: 0.8;
        transform: translateY(-10px) scale(1.05);
    }

    70% {
        opacity: 1;
        transform: translateY(5px) scale(0.98);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.markaworks-about .markaworks-about-cta::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(11, 68, 68, 0.1);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
}

.markaworks-about .markaworks-about-cta:hover::before {
    width: 300px;
    height: 300px;
}

.markaworks-about .markaworks-about-cta:hover {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 15px 40px rgba(184, 212, 50, 0.5);
}

/* Portfolio Gallery Wrapper with Navigation */
.markaworks-portfolio-gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
}

/* Gallery Navigation Buttons */
.markaworks-gallery-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: #B8D432;
    border: 1px solid #B8D432;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    opacity: 0.9;
}

.markaworks-gallery-nav:hover {
    background: #c9e33d;
    border-color: #c9e33d;
    color: #fff;
    opacity: 1;
    transform: translateY(-50%) scale(1.08);
    box-shadow: 0 0 30px rgba(255, 255, 255, 0.5);
}

.markaworks-gallery-nav:active {
    transform: translateY(-50%) scale(0.95);
}

.markaworks-gallery-nav svg {
    width: 24px;
    height: 24px;
    transition: transform 0.2s ease;
}

.markaworks-gallery-nav-left {
    left: 20px;
}

.markaworks-gallery-nav-left:hover svg {
    transform: translateX(-2px);
}

.markaworks-gallery-nav-right {
    right: 20px;
}

.markaworks-gallery-nav-right:hover svg {
    transform: translateX(2px);
}

/* Portfolio Gallery - Infinite Loop Carousel */
.markaworks-portfolio-gallery {
    position: relative;
    width: 100%;
    overflow: visible;
    cursor: none;
    padding: 40px 0 60px 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Use responsive height instead of fixed min-height */
    min-height: clamp(400px, 30vh, 500px);
    max-height: 600px;
    /* Prevent excessive height on large screens */
    mask: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
    -webkit-mask: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
}

.markaworks-portfolio-track {
    display: flex;
    gap: 30px;
    animation: markaworks-infinite-scroll var(--portfolio-scroll-duration, 40s) linear infinite;
    will-change: transform;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

/* Keep animation running on hover - edge acceleration handled by JS */
.markaworks-portfolio-gallery:hover .markaworks-portfolio-track {
    animation-play-state: running;
}

/* Infinite Scroll animation */
@keyframes markaworks-infinite-scroll {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    100% {
        transform: translateY(-50%) translateX(calc(-100% - 30px));
    }
}

.markaworks-portfolio-item {
    width: 325px !important;
    height: 400px !important;
    border-radius: 20px;
    overflow: hidden !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    cursor: none;
    /* Hide default cursor on portfolio items */
    flex-shrink: 0;
    display: block !important;
    text-decoration: none;
    color: inherit;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box !important;
}

a.markaworks-portfolio-item {
    text-decoration: none;
    color: inherit;
}

a.markaworks-portfolio-item:visited,
a.markaworks-portfolio-item:active {
    color: inherit;
    text-decoration: none;
}

/* Solid border effect - no gradients */
.markaworks-portfolio-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 3px solid #B8D432;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.markaworks-portfolio-item:hover::before {
    opacity: 1;
    border-color: #B8D432;
}

/* Removed portfolio item animations to prevent spacing issues */

.markaworks-portfolio-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: none;
    /* Hide default cursor on images */
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

/* Frame-cycle cover — quick looping GIF-like effect */
.markaworks-frame-cycle {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.markaworks-frame-cycle__frame {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    opacity: 0;
    animation: markaworks-frame-cycle 2s steps(1, end) infinite;
}

.markaworks-frame-cycle__frame:nth-child(1) {
    animation-delay: 0s;
}

.markaworks-frame-cycle__frame:nth-child(2) {
    animation-delay: -1.5s;
}

.markaworks-frame-cycle__frame:nth-child(3) {
    animation-delay: -1s;
}

.markaworks-frame-cycle__frame:nth-child(4) {
    animation-delay: -0.5s;
}

@keyframes markaworks-frame-cycle {
    0%,
    24.999% {
        opacity: 1;
    }

    25%,
    100% {
        opacity: 0;
    }
}

.markaworks-portfolio-item .markaworks-frame-cycle,
.markaworks-services-gallery-item .markaworks-frame-cycle,
.markaworks-portfolio-image-container .markaworks-frame-cycle,
.markaworks-project-image-container .markaworks-frame-cycle {
    position: absolute;
    inset: 0;
}

.markaworks-portfolio-item:hover .markaworks-frame-cycle__frame,
.markaworks-services-gallery-item:hover .markaworks-frame-cycle__frame,
.markaworks-portfolio-card:hover .markaworks-frame-cycle__frame,
.markaworks-project-card:hover .markaworks-frame-cycle__frame {
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.05);
}

.markaworks-frame-cycle .markaworks-portfolio-image,
.markaworks-frame-cycle .markaworks-project-image {
    position: absolute;
    inset: 0;
    min-height: 100% !important;
    height: 100% !important;
}

/* Vivvira cover — zoom to fill gallery card */
.markaworks-portfolio-item.markaworks-portfolio-item-vivira img {
    object-fit: cover !important;
    object-position: center center !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    margin-left: 0 !important;
    transform: scale(1.12);
    transform-origin: center center;
}

.markaworks-portfolio-item.markaworks-portfolio-item-vivira:hover img {
    transform: scale(1.16);
    filter: brightness(1.1) contrast(1.05);
}

.markaworks-portfolio-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(184, 212, 50, 0.15);
    z-index: 10;
}

.markaworks-portfolio-item:hover img {
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.05);
}

/* Enhanced hover effect for infinite scroll */
.markaworks-portfolio-track:hover .markaworks-portfolio-item:not(:hover) {
    opacity: 0.7;
    transform: scale(0.98);
}

/* Custom Cursor View Button - Solid Colors Design */
.markaworks-view-button {
    position: fixed;
    top: 0;
    left: 0;
    transform: translate(-50%, -50%);
    width: 140px;
    height: 140px;
    transition: opacity 0.2s ease;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    will-change: transform, left, top;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F4F5F5;
    /* Solid white background */
    border-radius: 50%;
    box-shadow:
        0 8px 32px rgba(5, 51, 51, 0.15),
        0 4px 16px rgba(5, 51, 51, 0.1);
    border: 3px solid #B8D432;
    /* Solid lime green border */
    text-transform: lowercase;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.markaworks-view-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    z-index: 2;
    position: relative;
    transition: all 0.2s ease;
    letter-spacing: 0.5px;
}

.markaworks-view-ring {
    position: absolute;
    top: -20px;
    left: -20px;
    right: -20px;
    bottom: -20px;
    border: 3px solid #B8D432;
    /* Lime green border - no blue */
    border-radius: 50%;
    background: transparent;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.markaworks-view-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    background: #B8D432;
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(0);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 20px rgba(184, 212, 50, 0.6);
}

/* Hover States */
.markaworks-view-button:hover {
    transform: translate(-50%, -50%) scale(1.1);
    background: #B8D432;
    /* Solid lime green background */
    border-color: #F4F5F5;
    /* White border on hover */
    box-shadow:
        0 12px 48px rgba(184, 212, 50, 0.4),
        0 6px 20px rgba(184, 212, 50, 0.2);
}

.markaworks-view-button:hover .markaworks-view-text {
    color: #053333;
    transform: scale(1.05);
    text-shadow: 0 2px 8px rgba(5, 51, 51, 0.2);
}

.markaworks-view-button:hover .markaworks-view-ring {
    opacity: 1;
    transform: scale(1);
    border-color: #053333;
    /* Dark teal ring on hover - color reversal */
    animation: markaworks-ring-pulse 2s ease-in-out infinite;
}

.markaworks-view-button:hover .markaworks-view-dot {
    transform: translate(-50%, -50%) scale(1);
    animation: markaworks-dot-pulse 1.5s ease-in-out infinite;
}

/* Active State */
.markaworks-view-button.markaworks-cursor-active {
    opacity: 1;
    pointer-events: none;
}

.markaworks-view-button.markaworks-cursor-active .markaworks-view-ring {
    opacity: 0.8;
    transform: scale(1);
    border-color: #B8D432;
    /* Lime green when active - no blue */
}

/* Animations */
@keyframes markaworks-ring-pulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.8;
    }
}

@keyframes markaworks-dot-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 20px rgba(184, 212, 50, 0.6);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 30px rgba(184, 212, 50, 0.8);
    }
}

/* Click Animation */
.markaworks-view-button.markaworks-click-effect {
    transform: translate(-50%, -50%) scale(0.9);
}

.markaworks-view-button.markaworks-click-effect .markaworks-view-text {
    transform: scale(0.95);
}

.markaworks-view-button.markaworks-click-effect .markaworks-view-ring {
    transform: scale(1.2);
    opacity: 0.3;
}

.markaworks-view-button.markaworks-click-effect .markaworks-view-dot {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 40px rgba(184, 212, 50, 1);
}

/* Scroll-triggered animations */
@keyframes markaworks-fade-in-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Design for About Section */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .markaworks-about-container {
        max-width: 1600px;
        padding: 5 5px;
    }

    .markaworks-stats-container {
        max-width: 1600px;
        padding: 0 60px;
    }

    .markaworks-portfolio-container {
        max-width: 1600px;
        padding: 0 40px;
        /* keep 40px to fit 1510px row width centrally */
    }

    .markaworks-branding-container {
        max-width: 1600px;
        padding: 0 60px;
    }

    .markaworks-testimonials-container {
        max-width: 1600px;
        padding: 40px 60px 0;
    }

    .markaworks-cta-container {
        max-width: 1600px;
        padding: 0 60px;
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-about-container {
        padding: 0 30px;
    }

    .markaworks-stats-container {
        padding: 0 30px;
    }

    .markaworks-portfolio-container {
        padding: 0 30px;
    }

    .markaworks-branding-container {
        padding: 0 30px;
    }

    .markaworks-testimonials-container {
        padding: 40px 30px 0;
    }

    .markaworks-cta-container {
        padding: 0 30px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .markaworks-about-container {
        padding: 0 20px;
    }

    .markaworks-stats-container {
        padding: 0 20px;
    }

    .markaworks-portfolio-container {
        padding: 0 20px;
    }

    .markaworks-branding-container {
        padding: 0 20px;
    }

    .markaworks-testimonials-container {
        padding: 40px 20px 0;
    }

    .markaworks-cta-container {
        padding: 0 20px;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .markaworks-about-container {
        padding: 0 16px;
    }

    .markaworks-stats-container {
        padding: 0 16px;
    }

    .markaworks-portfolio-container {
        padding: 0 16px;
    }

    .markaworks-branding-container {
        padding: 0 16px;
    }

    .markaworks-testimonials-container {
        padding: 40px 16px 0;
    }

    .markaworks-cta-container {
        padding: 0 16px;
    }
}

@media (max-width: 1200px) {
    .markaworks-about-container {
        gap: 25px;
    }

    .markaworks-about-heading {
        font-size: 60px;
        line-height: 66px;
    }

    .markaworks-portfolio-item {
        width: 280px;
        height: 350px;
    }

    .markaworks-view-button {
        width: 120px;
        height: 120px;
    }

    .markaworks-view-text {
        font-size: 16px;
    }
}

@media (max-width: 992px) {
    .markaworks-about {
        padding: 60px 30px;
        /* Adjust height constraints for tablets */
        min-height: calc(80vh - 150px);
        max-height: calc(120vh);
    }

    .markaworks-about-main {
        flex-direction: column;
        gap: 40px;
    }

    .markaworks-about-right {
        width: 100%;
        max-width: 500px;
    }

    .markaworks-about-heading {
        font-size: 48px;
        line-height: 52px;
    }

    .markaworks-hello {
        min-height: 2.5rem;
    }

    .markaworks-hello-text {
        font-size: 48px;
        line-height: 52px;
    }

    .markaworks-about-description {
        font-size: 20px;
        line-height: 28px;
    }

    .markaworks-about .markaworks-about-cta {
        font-size: 20px;
        padding: 16px 28px;
    }

    .markaworks-portfolio-track {
        gap: 20px;
        animation-duration: 35s;
        /* Slightly faster on tablets */
    }

    .markaworks-portfolio-item {
        width: 250px;
        height: 300px;
        flex-shrink: 0;
    }

    .markaworks-view-button {
        width: 100px;
        height: 100px;
    }

    .markaworks-view-text {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .markaworks-about {
        padding: 40px 20px;
        margin-top: -60px;
        /* Disable height constraints on mobile for better flexibility */
        min-height: auto;
        max-height: none;
    }

    .markaworks-about-container {
        gap: 20px;
    }

    .markaworks-about-heading {
        font-size: 36px;
        line-height: 40px;
    }

    .markaworks-hello {
        min-height: 2.2rem;
    }

    .markaworks-hello-text {
        font-size: 36px;
        line-height: 40px;
    }

    .markaworks-about-description {
        font-size: 18px;
        line-height: 25px;
    }

    .markaworks-about .markaworks-about-cta {
        font-size: 18px;
        padding: 14px 24px;
        width: 100%;
        text-align: center;
    }

    .markaworks-portfolio-gallery {
        gap: 10px;
        padding: 30px 0 40px 0;
        margin: 0 auto;
        min-height: 380px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Mobile navigation buttons - smaller and positioned at edges */
    .markaworks-gallery-nav {
        width: 44px;
        height: 44px;
        opacity: 0.85;
    }

    .markaworks-gallery-nav-left {
        left: 8px;
    }

    .markaworks-gallery-nav-right {
        right: 8px;
    }

    .markaworks-gallery-nav svg {
        width: 20px;
        height: 20px;
    }

    .markaworks-portfolio-item {
        width: 220px;
        height: 320px;
    }

    .markaworks-portfolio-item img {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .markaworks-portfolio-item.markaworks-portfolio-item-vivira img {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        transform: scale(1.12);
    }

    .markaworks-view-button {
        width: 80px;
        height: 80px;
    }

    .markaworks-view-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .markaworks-about {
        padding: 30px 16px;
        margin-top: -40px;
    }

    .markaworks-about-container {
        gap: 15px;
    }

    .markaworks-about-heading {
        font-size: 28px;
        line-height: 32px;
    }

    .markaworks-hello {
        min-height: 42px;
        min-width: 80px;
    }

    .markaworks-hello-text {
        font-size: 28px;
        line-height: 32px;
    }

    .markaworks-about-description {
        font-size: 16px;
        line-height: 22px;
    }

    .markaworks-about .markaworks-about-cta {
        font-size: 16px;
        padding: 12px 20px;
    }

    .markaworks-portfolio-track {
        gap: 15px;
        animation-duration: 30s;
        /* Faster on mobile */
        padding: 0;
        margin: 0;
    }

    .markaworks-portfolio-item {
        width: 180px;
        height: 280px;
    }

    .markaworks-portfolio-item img {
        padding: 0 !important;
        margin: 0 !important;
        border-radius: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .markaworks-portfolio-item.markaworks-portfolio-item-vivira img {
        object-fit: cover !important;
        object-position: center center !important;
        width: 100% !important;
        min-width: 100% !important;
        max-width: none !important;
        margin-left: 0 !important;
        transform: scale(1.12);
    }

    .markaworks-view-button {
        width: 70px;
        height: 70px;
    }

    .markaworks-view-text {
        font-size: 12px;
    }
}

/* ============================================================
     PARTNERS/TECH STACK SECTION
     ============================================================ */

.markaworks-partners {
    background: #EAE5E3;
    padding: 0 !important;
    /* NO GAPS - removed all padding */
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0;
    z-index: 3;
    clear: both;
    display: block;
}

.markaworks-partners-container {
    width: 100%;
    text-align: center;
    padding: 40px 0;
    /* Add minimal vertical padding for content spacing */
}

.markaworks-partners-title {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 600;
    color: #2C5F5F;
    margin: 0 0 50px 0;
    letter-spacing: -0.01em;
    padding: 0 40px;
    text-transform: none;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    line-height: 1.2;
}

.markaworks-partners-title.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-partners-track {
    display: flex;
    gap: 60px;
    will-change: transform;
    /* Animation controlled by JavaScript scroll */
}

.markaworks-partner-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px 30px;
    transition: all 0.3s ease;
    min-height: 60px;
    min-width: 120px;
    flex-shrink: 0;
}

.markaworks-partner-item img {
    max-width: 100%;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    /* Make logos black by default */
    filter: brightness(0) saturate(100%) opacity(0.8);
    transition: all 0.3s ease;
}

.markaworks-partner-item:hover img {
    /* Reveal original colors on hover */
    filter: brightness(1) saturate(100%) opacity(1);
    transform: scale(1.05);
}

.markaworks-partner-item:hover {
    background: rgba(184, 212, 50, 0.05);
}

/* Global rule for tech logos - apply site-wide where reused */
.markaworks-tech-logo,
.markaworks-partner-logo,
.markaworks-brand-logo {
    filter: brightness(0) saturate(100%) opacity(0.8);
    transition: all 0.3s ease;
}

.markaworks-tech-logo:hover,
.markaworks-partner-logo:hover,
.markaworks-brand-logo:hover {
    filter: brightness(1) saturate(100%) opacity(1);
    transform: scale(1.05);
}

/* Pause animation on hover */
.markaworks-partners:hover .markaworks-partners-track {
    animation-play-state: paused;
}

/* Partners infinite scroll animation */
@keyframes markaworks-partners-scroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(calc(-100% - 60px));
    }
}

/* Responsive Design for Partners Section */
@media (max-width: 768px) {
    .markaworks-partners {
        padding: 40px 0;
    }

    .markaworks-partners-title {
        font-size: clamp(1.25rem, 2.5vw, 1.75rem);
        margin-bottom: 35px;
        padding: 0 20px;
    }

    .markaworks-partners-track {
        gap: 40px;
        animation-duration: 50s;
    }

    .markaworks-partner-item {
        min-width: 100px;
        padding: 10px 20px;
    }

    .markaworks-partner-item img {
        max-height: 35px;
    }
}

@media (max-width: 480px) {
    .markaworks-partners {
        padding: 30px 0;
    }

    .markaworks-partners-title {
        font-size: clamp(1.1rem, 2vw, 1.5rem);
        padding: 0 16px;
        margin-bottom: 30px;
    }

    .markaworks-partners-track {
        gap: 30px;
        animation-duration: 40s;
    }

    .markaworks-partner-item {
        min-width: 80px;
        padding: 8px 15px;
    }

    .markaworks-partner-item img {
        max-height: 30px;
    }
}

/* ============================================================
     STATISTICS SECTION - MODERN DESIGN WITH ANIMATIONS
     ============================================================ */

.markaworks-stats {
    background: #EAE5E3;
    padding: 120px 40px;
    position: relative;
    overflow-x: hidden;
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    z-index: 4;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
}

.markaworks-stats-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 2;
    width: 100%;
    box-sizing: border-box;
}

/* Header Section */
.markaworks-stats-header {
    margin-bottom: 80px;
    opacity: 0;
    transform: translateY(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.markaworks-stats-header.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-stats-title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 600;
    line-height: 1.1;
    color: #0B4444;
    margin: 0;
    max-width: 1130px;
    word-wrap: break-word;
    position: relative;
}

/* Typing cursor animation for "Everyone designs..." heading */
.markaworks-stats-title span[style*="color: rgb(184, 212, 50)"] {
    font-weight: 400;
    font-size: 1em;
    line-height: inherit;
    animation: markaworks-blink-caret 1s step-end infinite;
    margin-left: 2px;
}

/* Premium Paint Brush Text Styling */
.markaworks-stats-title .markaworks-highlight-word {
    position: relative;
    display: inline-block;
    color: #0B4444;
    font-weight: 700;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --underline-scale: 0;
    /* Default value for scroll-driven animation */
}

.markaworks-stats-title .markaworks-highlight-word::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -12px;
    right: -12px;
    height: 20px;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(184, 212, 50, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 30%, rgba(184, 212, 50, 1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(184, 212, 50, 0.8) 0%, transparent 50%),
        linear-gradient(90deg,
            rgba(184, 212, 50, 0.7) 0%,
            rgba(184, 212, 50, 1) 20%,
            rgba(184, 212, 50, 0.95) 40%,
            rgba(184, 212, 50, 1) 60%,
            rgba(184, 212, 50, 0.8) 80%,
            rgba(184, 212, 50, 0.6) 100%);
    clip-path: polygon(0% 20%, 5% 10%, 15% 30%, 25% 15%, 35% 40%,
            45% 20%, 55% 35%, 65% 10%, 75% 45%, 85% 25%,
            95% 40%, 100% 30%, 100% 80%, 95% 90%, 85% 70%,
            75% 85%, 65% 60%, 55% 80%, 45% 65%, 35% 85%,
            25% 70%, 15% 90%, 5% 75%, 0% 85%);
    /* Scroll-driven: use CSS variable set by JS */
    transform: scaleX(var(--underline-scale, 0));
    transform-origin: left;
    z-index: -1;
    opacity: var(--underline-scale, 0);
    transition: none;
    /* No transition - controlled by scroll */
}

.markaworks-stats-title .markaworks-highlight-word::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: -6px;
    right: -6px;
    height: 12px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(184, 212, 50, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(184, 212, 50, 0.5) 0%, transparent 50%),
        linear-gradient(90deg,
            rgba(184, 212, 50, 0.3) 0%,
            rgba(184, 212, 50, 0.6) 30%,
            rgba(184, 212, 50, 0.4) 70%,
            rgba(184, 212, 50, 0.2) 100%);
    clip-path: polygon(0% 30%, 10% 20%, 20% 40%, 30% 25%, 40% 45%,
            50% 30%, 60% 50%, 70% 20%, 80% 40%, 90% 25%,
            100% 35%, 100% 70%, 90% 80%, 80% 60%, 70% 85%,
            60% 65%, 50% 80%, 40% 70%, 30% 85%, 20% 65%,
            10% 75%, 0% 60%);
    /* Scroll-driven: use CSS variable set by JS */
    transform: scaleX(var(--underline-scale, 0));
    transform-origin: left;
    z-index: -1;
    opacity: var(--underline-scale, 0);
    transition: none;
    /* No transition - controlled by scroll */
}

/* Scroll-driven animation - no legacy triggers needed */

/* Description Section */
.markaworks-stats-description {
    margin-bottom: 80px;
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    transform: translateX(50px);
    transition: all 1s cubic-bezier(0.4, 0, 0.2, 1) 0.3s;
    position: relative;
}

.markaworks-stats-description.markaworks-animate-in {
    opacity: 1;
    transform: translateX(0);
}

.markaworks-stats-description p {
    font-size: clamp(1.25rem, 2.5vw, 2.5rem);
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    margin: 0;
    max-width: 1015px;
    text-align: left;
}

/* Statistics Grid */
.markaworks-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 24px;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.markaworks-stats-row {
    display: flex;
    gap: 20px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 10px 0;
}

.markaworks-stats-row:first-child {
    justify-content: flex-end;
}

.markaworks-stats-row:last-child {
    justify-content: flex-start;
}

.markaworks-stats-row-bottom {
    position: relative;
}

/* Stat Cards */
.markaworks-stat-card {
    padding: 40px;
    border-radius: 20px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 400px;
    opacity: 0;
    transform: translateY(60px) scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-sizing: border-box;
    max-width: 100%;
}

.markaworks-stat-card.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Card Sizes */
.markaworks-stat-card-small {
    width: 325px;
    flex-shrink: 0;
    max-width: 100%;
    background: rgba(244, 245, 245, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(5, 51, 51, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.markaworks-stat-card-large {
    background: rgba(244, 245, 245, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow:
        0 8px 32px rgba(5, 51, 51, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Card Content */
.markaworks-stat-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 10;
    position: relative;
}

.markaworks-stat-number {
    font-size: 100px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.3s ease;
}

.markaworks-stat-number {
    color: #0B4444;
}

.markaworks-stat-label {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    color: #0B4444;
    transition: all 0.3s ease;
}

.markaworks-stat-description {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    z-index: 10;
    position: relative;
    transition: all 0.3s ease;
}

/* Background Elements in Cards */
.markaworks-stat-bg-element {
    position: absolute;
    width: 200px;
    height: 200px;
    opacity: 0.01;
    z-index: -2;
    transition: all 0.5s ease;
    border-radius: 50%;
    pointer-events: none;
}

.markaworks-bg-element-1,
.markaworks-bg-element-3,
.markaworks-bg-element-4,
.markaworks-bg-element-5,
.markaworks-bg-element-6 {
    background: radial-gradient(circle, #0B4444 0%, transparent 70%);
    right: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    animation: markaworks-rotate-slow 20s linear infinite;
}

.markaworks-bg-element-2 {
    background: radial-gradient(circle, #B8D432 0%, transparent 70%);
    right: -50px;
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    animation: markaworks-rotate-slow 25s linear infinite reverse;
}

/* Solid Animated Border Effects */
.markaworks-stat-card::before {
    content: '';
    position: absolute;
    top: -3px;
    left: -3px;
    right: -3px;
    bottom: -3px;
    border-radius: 23px;
    border: 3px solid transparent;
    opacity: 0;
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-stat-card::before {
    border-color: #B8D432;
}

.markaworks-stat-card:hover::before {
    opacity: 1;
    transform: scale(1.02);
    animation: markaworks-border-pulse 2s ease-in-out infinite;
}

/* Hover Effects - All Cards Same Style (Green Card Style) */
.markaworks-stat-card:hover {
    transform: translateY(-3px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    background: rgba(5, 51, 51, 0.95);
    border-color: rgba(184, 212, 50, 0.3);
    z-index: 10;
}

.markaworks-stat-card:hover .markaworks-stat-number,
.markaworks-stat-card:hover .markaworks-stat-label {
    color: #B8D432;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-stat-card:hover .markaworks-stat-description {
    color: #F4F5F5;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-stat-card:hover .markaworks-stat-number {
    transform: scale(1.03);
    transition: transform 0.3s ease;
}

.markaworks-stat-card:hover .markaworks-stat-bg-element {
    opacity: 0.03;
    transform: translateY(-50%) rotate(45deg) scale(1.1);
}

/* Floating Background Elements */
.markaworks-floating-bg {
    position: absolute;
    z-index: -1;
    opacity: 0.7;
    transition: opacity 0.3s ease;
    border-radius: 20px;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
}

.markaworks-floating-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    pointer-events: none;
}

.markaworks-floating-bg-1 {
    position: absolute;
    width: 350px;
    height: 350px;
    right: -60px;
    top: -70px;
    transform-origin: center center;
    z-index: -1;
}

.markaworks-floating-bg-2 {
    position: absolute;
    width: 380px;
    height: 375px;
    left: -100px;
    top: 50%;
    transform-origin: center center;
    will-change: transform;
    z-index: -1;
}

.markaworks-floating-bg-3 {
    position: absolute;
    width: 320px;
    height: 315px;
    right: -80px;
    top: 50%;
    transform-origin: center center;
    z-index: -1;
    will-change: transform;
}

/* Animations */
@keyframes markaworks-rotate-slow {
    from {
        transform: translateY(-50%) rotate(0deg);
    }

    to {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes markaworks-float-rotate {
    0% {
        transform: rotate(0deg) translateY(0px);
    }

    25% {
        transform: rotate(90deg) translateY(-5px);
    }

    50% {
        transform: rotate(180deg) translateY(0px);
    }

    75% {
        transform: rotate(270deg) translateY(5px);
    }

    100% {
        transform: rotate(360deg) translateY(0px);
    }
}

@keyframes markaworks-float-rotate-reverse {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    25% {
        transform: translateY(-50%) rotate(-90deg);
    }

    50% {
        transform: translateY(-50%) rotate(-180deg);
    }

    75% {
        transform: translateY(-50%) rotate(-270deg);
    }

    100% {
        transform: translateY(-50%) rotate(-360deg);
    }
}

@keyframes markaworks-float-pulse {

    0%,
    100% {
        transform: translateY(-50%) rotate(-6deg) scale(1);
        opacity: 0.7;
    }

    50% {
        transform: translateY(-50%) rotate(-6deg) scale(1.05);
        opacity: 0.9;
    }
}

@keyframes markaworks-float-rotate-3 {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    25% {
        transform: translateY(-50%) rotate(90deg);
    }

    50% {
        transform: translateY(-50%) rotate(180deg);
    }

    75% {
        transform: translateY(-50%) rotate(270deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

/* Paint Brush Animation Keyframes - No Glow Effects */
@keyframes markaworks-paint-drip {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    30% {
        transform: scaleX(1) scaleY(1.1);
    }

    60% {
        transform: scaleX(1) scaleY(0.95);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

@keyframes markaworks-paint-texture {
    0% {
        transform: scaleX(1) scaleY(1);
    }

    25% {
        transform: scaleX(1) scaleY(1.05);
    }

    50% {
        transform: scaleX(1) scaleY(0.98);
    }

    75% {
        transform: scaleX(1) scaleY(1.02);
    }

    100% {
        transform: scaleX(1) scaleY(1);
    }
}

/* Typing Letter Animation - Only when triggered */
.markaworks-typing-animation .markaworks-letter {
    opacity: 0;
    transform: translateY(20px);
    /* No animation by default */
}

.markaworks-typing-animation .markaworks-space {
    opacity: 0;
    /* No animation by default */
}

/* Animation only starts when viewport trigger is active */
.markaworks-typing-animation.markaworks-animate-typing .markaworks-letter {
    animation: markaworks-letter-appear 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

.markaworks-typing-animation.markaworks-animate-typing .markaworks-space {
    animation: markaworks-letter-appear 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes markaworks-letter-appear {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.8);
    }

    50% {
        opacity: 0.7;
        transform: translateY(-5px) scale(1.1);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Border Pulse Animation */
@keyframes markaworks-border-pulse {

    0%,
    100% {
        border-width: 3px;
        opacity: 1;
    }

    50% {
        border-width: 4px;
        opacity: 0.8;
    }
}

/* Counter Animation - No Shadow */
@keyframes markaworks-counter-scale {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

.markaworks-stat-number.markaworks-counting {
    animation: markaworks-counter-scale 2s ease-in-out;
}

/* Responsive Design - Fully Optimized */
@media (max-width: 1400px) {
    .markaworks-floating-bg-1 {
        width: 220px;
        height: 220px;
        right: -30px;
        top: -40px;
    }

    .markaworks-floating-bg-2 {
        width: 240px;
        height: 235px;
        left: -50px;
    }

    .markaworks-floating-bg-3 {
        width: 200px;
        height: 195px;
        right: -25px;
    }
}

@media (max-width: 1200px) {
    .markaworks-stats {
        padding: 100px 30px;
    }

    .markaworks-stats-container {
        padding: 0 10px;
    }

    .markaworks-stats-title {
        font-size: clamp(2rem, 4vw, 3.5rem);
    }

    .markaworks-stats-description p {
        font-size: clamp(1.1rem, 2vw, 2rem);
    }

    .markaworks-stat-number {
        font-size: 80px;
    }

    .markaworks-stat-label {
        font-size: 28px;
    }

    .markaworks-floating-bg-1 {
        width: 280px;
        height: 280px;
        right: -50px;
        top: -60px;
    }

    .markaworks-floating-bg-2 {
        width: 300px;
        height: 293px;
        left: -80px;
    }

    .markaworks-floating-bg-3 {
        width: 250px;
        height: 245px;
        right: -30px;
    }
}

@media (max-width: 992px) {
    .markaworks-stats {
        padding: 80px 20px;
        overflow-x: hidden;
    }

    .markaworks-stats-container {
        padding: 0 5px;
        max-width: 100%;
    }

    .markaworks-stats-row {
        flex-direction: column;
        gap: 15px;
        width: 100%;
    }

    .markaworks-stats-row:first-child,
    .markaworks-stats-row:last-child {
        justify-content: center;
        align-items: center;
    }

    .markaworks-stat-card-small,
    .markaworks-stat-card-large {
        width: 100%;
        max-width: 100%;
        height: 350px;
        margin: 0 auto;
    }

    .markaworks-stat-number {
        font-size: 70px;
    }

    .markaworks-stat-label {
        font-size: 24px;
    }

    /* Smaller floating elements for tablets */
    .markaworks-floating-bg-1 {
        width: 200px;
        height: 200px;
        right: -30px;
        top: -40px;
    }

    .markaworks-floating-bg-2 {
        width: 220px;
        height: 215px;
        left: -50px;
    }

    .markaworks-floating-bg-3 {
        width: 180px;
        height: 175px;
        right: -20px;
    }

    /* Optimize text animations for smaller screens */
    .markaworks-stats-title .markaworks-highlight-word::after {
        height: 2px;
        bottom: -2px;
    }
}

@media (max-width: 768px) {
    .markaworks-stats {
        padding: 60px 20px;
    }

    .markaworks-stats-header {
        margin-bottom: 50px;
    }

    .markaworks-stats-description {
        margin-bottom: 50px;
        justify-content: center;
    }

    .markaworks-stats-description p {
        font-size: clamp(1rem, 1.8vw, 1.5rem);
        text-align: center;
    }

    .markaworks-stat-card {
        height: 300px;
        padding: 30px;
    }

    .markaworks-stat-number {
        font-size: 60px;
    }

    .markaworks-stat-label {
        font-size: 20px;
        color: #0B4444 !important;
    }

    .markaworks-stat-description {
        font-size: 14px;
    }

    /* Optimize floating elements for mobile instead of hiding */
    .markaworks-floating-bg {
        opacity: 0.3;
    }

    .markaworks-floating-bg-1 {
        width: 120px;
        height: 120px;
        right: -40px;
        top: -30px;
    }

    .markaworks-floating-bg-2 {
        width: 140px;
        height: 137px;
        left: -60px;
        top: 40%;
    }

    .markaworks-floating-bg-3 {
        width: 100px;
        height: 98px;
        right: -30px;
        top: 60%;
    }

    /* Simplify text animations on mobile */
    .markaworks-stats-title::before {
        display: none;
    }

    .markaworks-stats-title .markaworks-highlight-word {
        animation-duration: 4s;
    }
}

@media (max-width: 480px) {
    .markaworks-stats {
        padding: 40px 16px;
    }

    .markaworks-stats-title {
        font-size: clamp(1.8rem, 3.5vw, 2.5rem);
    }

    .markaworks-stats-description p {
        font-size: clamp(0.9rem, 1.5vw, 1.2rem);
    }

    .markaworks-stat-card {
        height: 280px;
        padding: 25px;
    }

    .markaworks-stat-number {
        font-size: 50px;
    }

    .markaworks-stat-label {
        font-size: 18px;
        color: #0B4444 !important;
    }

    .markaworks-stat-description {
        font-size: 13px;
    }
}

/* ============================================
     PORTFOLIO SHOWCASE SECTION STYLES
     ============================================ */

.markaworks-portfolio-showcase {
    position: relative;
    background: #053333;
    padding: 60px 0px 80px 0px;
    min-height: 110vh;
    overflow: hidden;
}

.markaworks-portfolio-container {
    max-width: 1730px;
    margin: 0 auto;
    padding: 0;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.markaworks-portfolio-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 40px;
    gap: 40px;
}

/* 1920-ish desktop */
@media (min-width: 1600px) and (max-width: 1950px) {
    .markaworks-portfolio-header {
        padding-left: clamp(20px, 6vw, 140px);
        padding-right: clamp(20px, 6vw, 140px);
    }
}

/* Smaller desktop only */
@media (min-width: 1025px) and (max-width: 1599px) {
    .markaworks-portfolio-header {
        padding-left: clamp(20px, 3vw, 140px);
        padding-right: clamp(20px, 3vw, 140px);
    }
}

/* Bigger desktop */
@media (min-width: 1951px) {
    .markaworks-portfolio-header {
        padding-left: clamp(20px, 5vw, 140px);
        padding-right: clamp(20px, 5vw, 140px);
    }
}

.markaworks-portfolio-title-container {
    flex: 1;
    min-width: 0;
    max-width: 1130px;
}

/* Dynamic Service Text Styling */
.markaworks-portfolio-service-text {
    margin-top: 30px;
    max-width: 600px;
}

.markaworks-service-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 28px;
    font-weight: 600;
    color: #B8D432;
    margin: 0 0 12px 0;
    line-height: 1.3;
    transition: opacity 0.3s ease;
}

.markaworks-service-subtitle {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 400;
    color: #F4F5F5;
    margin: 0;
    line-height: 1.5;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.markaworks-portfolio-main-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    word-wrap: break-word;
    overflow: visible;
    white-space: normal;
    opacity: 1;
    transform: translateY(20px);
    transition: all 0.6s ease;
}

.markaworks-portfolio-main-title.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Simple fade-in text animation - Keep all text inline */
.markaworks-portfolio-main-title span {
    display: inline;
    white-space: normal;
}

/* Disable all complex animations */
.markaworks-portfolio-main-title span::before,
.markaworks-portfolio-main-title span::after {
    display: none !important;
}

/* Removed all complex animation rules - using simple fade-in only */

/* View All / Categories Button */
.markaworks-portfolio-view-all-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 100px;
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: transparent;
    z-index: 10;
}

.markaworks-portfolio-view-all-btn.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 0.3s;
}

.markaworks-portfolio-view-all-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #B8D432;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.markaworks-portfolio-view-all-btn:hover::before,
.markaworks-portfolio-view-all-btn[aria-expanded="true"]::before {
    transform: scaleX(1);
    transform-origin: left;
}

.markaworks-portfolio-view-all-btn:hover,
.markaworks-portfolio-view-all-btn[aria-expanded="true"] {
    background: transparent;
    color: #053333;
    transform: translateY(-2px);
    border-color: #B8D432;
}

.markaworks-categories-icon {
    transition: transform 0.3s ease;
}

.markaworks-portfolio-view-all-btn[aria-expanded="true"] .markaworks-categories-icon {
    transform: rotate(180deg);
}

/* Portfolio Buttons Container - Stack View All above Categories */
.markaworks-portfolio-buttons-container {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

.markaworks-project-search {
    --search-border: rgba(255, 255, 255, 0.2);
    --search-text: #F4F5F5;
    --search-bg: rgba(244, 245, 245, 0.04);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    width: min(100%, 320px);
    min-height: 52px;
    border: 1px solid var(--search-border);
    border-radius: 999px;
    background: var(--search-bg);
    backdrop-filter: blur(14px);
    overflow: hidden;
    transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1),
        border-color 0.3s ease,
        background 0.3s ease,
        box-shadow 0.3s ease,
        transform 0.3s ease;
}

.markaworks-project-search:hover,
.markaworks-project-search.is-expanded {
    border-color: rgba(184, 212, 50, 0.55);
    box-shadow: 0 14px 32px rgba(5, 51, 51, 0.18);
    transform: translateY(-2px);
}

.markaworks-project-search-toggle {
    width: 52px;
    height: 52px;
    border: none;
    background: transparent;
    color: var(--search-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: color 0.3s ease, background 0.3s ease;
}

.markaworks-project-search-toggle:hover,
.markaworks-project-search.is-expanded .markaworks-project-search-toggle {
    color: #B8D432;
}

.markaworks-project-search-field {
    display: flex;
    align-items: center;
    width: 0;
    opacity: 0;
    pointer-events: none;
    transition: width 0.45s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.2s ease;
}

.markaworks-project-search.is-expanded .markaworks-project-search-field {
    width: calc(100% - 52px);
    opacity: 1;
    pointer-events: auto;
}

.markaworks-project-search-input {
    width: 100%;
    border: none;
    outline: none;
    background: transparent;
    color: var(--search-text);
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 500;
    padding: 0 18px 0 0;
}

.markaworks-project-search-input::placeholder {
    color: rgba(244, 245, 245, 0.55);
}

.markaworks-project-search-input::-webkit-search-cancel-button {
    filter: invert(1);
    cursor: pointer;
}

.markaworks-project-search-bar {
    flex: 1;
    max-width: 1400px;
    min-height: 60px;
    margin: 0;
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 18px 40px rgba(5, 51, 51, 0.08);
}

.markaworks-portfolio-controls {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1530px;
    margin: 0px 60px 60px 40px;
    padding: 0 clamp(20px, 3vw, 60px);
}

.markaworks-project-search-bar .markaworks-project-search-toggle {
    width: 60px;
    height: 60px;
    color: #B8D432;
}

.markaworks-project-search-bar .markaworks-project-search-field,
.markaworks-project-search-bar.is-expanded .markaworks-project-search-field {
    width: calc(100% - 60px);
    opacity: 1;
    pointer-events: auto;
}

.markaworks-project-search-bar .markaworks-project-search-input {
    font-size: 16px;
    padding: 0 22px 0 0;
}

.markaworks-project-search-bar .markaworks-project-search-input::placeholder {
    color: rgba(244, 245, 245, 0.62);
}

.markaworks-project-search-light {
    --search-border: rgba(5, 51, 51, 0.18);
    --search-text: #053333;
    --search-bg: rgba(255, 255, 255, 0.55);
}

.markaworks-project-search-light .markaworks-project-search-input::placeholder {
    color: rgba(5, 51, 51, 0.5);
}

.markaworks-project-search-light .markaworks-project-search-input::-webkit-search-cancel-button {
    filter: none;
}

.markaworks-project-search-light.markaworks-project-search-bar {
    background: rgba(255, 255, 255, 0.75);
    box-shadow: 0 18px 40px rgba(5, 51, 51, 0.06);
}

.markaworks-projects-container>.markaworks-project-search-bar {
    width: calc(100% - 40px);
    max-width: 1400px;
    margin-left: 20px;
    margin-right: auto;
}

.markaworks-project-search-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.markaworks-portfolio-search-empty {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: clamp(28px, 4vw, 48px);
    border-radius: 24px;
    border: 1px solid rgba(244, 245, 245, 0.14);
    background: rgba(244, 245, 245, 0.04);
    color: #F4F5F5;
}

.markaworks-portfolio-search-empty strong {
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 600;
}

.markaworks-portfolio-search-empty p {
    margin: 0;
    color: rgba(244, 245, 245, 0.72);
    font-size: 16px;
    line-height: 1.55;
}

/* Categories Menu */
.markaworks-portfolio-categories-wrapper {
    position: relative;
    /* We allow overflow so the menu can be seen descending, 
       but we will clip it internally to match the button's roundedness */
}

/* Ensure the toggle button stays ABOVE the sliding menu */
.markaworks-portfolio-categories-wrapper .markaworks-portfolio-view-all-btn {
    position: relative;
    z-index: 105;
}

.markaworks-portfolio-categories-menu {
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0;
    background: #053333;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 8px;
    min-width: 220px;
    opacity: 1;

    /* Start State: Tucked slightly up, clipped relative to the button bottom */
    transform: translateY(-20px);
    clip-path: inset(0 0 100% 0 round 100px);

    pointer-events: none;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        clip-path 1s cubic-bezier(0.19, 1, 0.22, 1);

    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 100;
}

/* Opening State */
.markaworks-portfolio-categories-menu.markaworks-menu-active {
    opacity: 1;
    transform: translateY(12px);
    clip-path: inset(0 0 0 0 round 16px);
    pointer-events: all;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        clip-path 1s cubic-bezier(0.19, 1, 0.22, 1);
}

/* Closing State (Structural Retraction) */
/* Forcefully slide back UP into the button while clipping from the bottom */
.markaworks-portfolio-categories-menu.markaworks-menu-closing {
    transform: translateY(-20px) !important;
    clip-path: inset(0 0 100% 0 round 100px) !important;
    transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1),
        clip-path 1s cubic-bezier(0.19, 1, 0.22, 1) !important;
    pointer-events: none;
}

.markaworks-category-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 14px;
    border-radius: 8px;
    transition: all 0.2s ease;
    background: transparent;
    border: none;
    width: 100%;
    text-align: left;
    cursor: pointer;
    font-family: 'Inter Tight', sans-serif;
}

.markaworks-category-item:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
}

.markaworks-category-item.active {
    background: #B8D432;
    color: #053333;
    font-weight: 500;
}

.markaworks-category-count {
    font-size: 12px;
    opacity: 0.6;
}

.markaworks-category-item.active .markaworks-category-count {
    opacity: 1;
}

@media (max-width: 968px) {
    .markaworks-portfolio-controls {
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 40px;
    }

    .markaworks-project-search-bar {
        width: 100%;
        flex: 1;
    }

    .markaworks-portfolio-buttons-container {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .markaworks-portfolio-categories-wrapper {
        width: 100%;
    }

    .markaworks-portfolio-view-all-btn {
        width: 100%;
    }

    .markaworks-portfolio-categories-menu {
        right: 0;
        left: 0;
        width: 100%;
    }
}

/* Portfolio Grid - CSS Grid Layout for Perfect 2-Card Rows */
.markaworks-portfolio-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(16px, 2.5vw, 40px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 clamp(20px, 3vw, 60px);
}

/* Hide the original row structure - we'll use CSS Grid instead */
.markaworks-portfolio-row {
    display: contents;
    /* This makes the row wrapper invisible to the grid */
}

.markaworks-portfolio-row-first {
    display: contents;
}

.markaworks-portfolio-row-second {
    display: contents;
}

/* Portfolio Groups - Make them invisible to the grid */
.markaworks-portfolio-left-group,
.markaworks-portfolio-right-group {
    display: contents;
    /* This makes the group wrappers invisible to the grid */
}

/* Portfolio Cards */
.markaworks-portfolio-card {
    background: transparent;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: none;
    /* Hide default cursor */
    position: relative;
    transform-origin: center;
    padding: 0;
    /* Remove padding to align with header */
    margin: 0;
    /* Remove margin to align with header */
    text-decoration: none;
    color: inherit;
    display: block;
}

a.markaworks-portfolio-card {
    text-decoration: none;
    color: inherit;
}

a.markaworks-portfolio-card:visited {
    color: inherit;
}

a.markaworks-portfolio-card:active {
    color: inherit;
}

.markaworks-portfolio-card-small,
.markaworks-portfolio-card-large {
    width: 100%;
    /* Take full grid cell width */
    min-width: 280px;
    max-width: none;
    /* Remove max-width to allow grid to control sizing */
}

.markaworks-portfolio-card:hover {
    transform: translateY(-8px);
    background: #F5F1E8;
    /* Cream background on hover */
    box-shadow:
        0 20px 40px rgba(5, 51, 51, 0.2),
        0 0 0 3px #B8D432;
    /* Solid lime green border */
}

/* Image Container */
.markaworks-portfolio-image-container {
    position: relative;
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
    border-radius: 20px;
    overflow: hidden;
    background: rgba(5, 51, 51, 0.05);
}

.markaworks-portfolio-image {
    width: 100% !important;
    height: 100% !important;
    min-height: 600px !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1) saturate(1);
    display: block !important;
}

.markaworks-portfolio-card:hover .markaworks-portfolio-image {
    transform: scale(1.15);
    /* Increased zoom effect from 1.02 to 1.15 */
    filter: brightness(1.05) contrast(1.08);
}

/* Overlay Effect - Solid Colors Only */
.markaworks-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 51, 51, 0.85);
    /* Solid dark teal with transparency */
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
}

.markaworks-portfolio-card:hover .markaworks-portfolio-overlay {
    opacity: 0;
    /* Keep overlay hidden on hover */
}

.markaworks-portfolio-overlay-content {
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.markaworks-portfolio-card:hover .markaworks-portfolio-overlay-content {
    transform: translateY(0);
}

.markaworks-portfolio-card:hover .markaworks-portfolio-overlay-text {
    transform: translateY(0) scale(1.05);
    background: #F4F5F5;
    /* White background on hover */
    color: #053333;
    border-color: #F4F5F5;
    box-shadow: 0 6px 20px rgba(244, 245, 245, 0.4);
}

.markaworks-portfolio-overlay-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px 24px;
    background: #B8D432;
    /* Solid lime green background */
    border: 2px solid #B8D432;
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    transform: translateY(10px);
}

/* Portfolio Content */
.markaworks-portfolio-content {
    padding: 24px 0 20px 20px;
    /* Added left padding for text and tags */
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.markaworks-portfolio-project-title {
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    transition: color 0.4s ease;
}

a.markaworks-portfolio-card .markaworks-portfolio-project-title {
    color: #F4F5F5;
}

a.markaworks-portfolio-card:visited .markaworks-portfolio-project-title {
    color: #F4F5F5;
}

a.markaworks-portfolio-card:hover .markaworks-portfolio-project-title,
.markaworks-portfolio-card:hover .markaworks-portfolio-project-title {
    color: #053333;
}

/* Portfolio Tags - Green Color Scheme Only */
.markaworks-portfolio-tags {
    display: flex;
    flex-wrap: wrap;
    /* Allow wrapping for multiple rows */
    gap: 8px;
    /* Reduced gap */
    align-items: flex-start;
    padding: 0 4px;
    /* Add side padding to prevent cropping */
    width: 100%;
    overflow: visible;
}

.markaworks-portfolio-tag {
    padding: 6px 12px;
    /* Reduced padding */
    border: 2px solid #B8D432;
    /* Lime green border */
    border-radius: 100px;
    background: transparent;
    color: #B8D432;
    /* Lime green text */
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    flex-shrink: 0;
    display: inline-block;
    margin: 2px;
    /* Add margin to prevent cropping */
    text-transform: capitalize;
}

a.markaworks-portfolio-card .markaworks-portfolio-tag {
    color: #B8D432;
    border-color: #B8D432;
}

a.markaworks-portfolio-card:visited .markaworks-portfolio-tag {
    color: #B8D432;
    border-color: #B8D432;
}

a.markaworks-portfolio-card:hover .markaworks-portfolio-tag,
.markaworks-portfolio-card:hover .markaworks-portfolio-tag {
    background: #B8D432;
    /* Lime green background on card hover - color reversal */
    color: #053333;
    /* Dark text on light background */
    border-color: #B8D432;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
}

.markaworks-portfolio-tag:hover {
    background: #053333;
    /* Dark background on individual tag hover - color reversal */
    color: #B8D432;
    /* Light green text on dark background */
    border-color: #053333;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 15px rgba(5, 51, 51, 0.4);
}

/* Staggered Animation for Cards */
.markaworks-portfolio-card {
    opacity: 0;
    transform: translateY(60px);
    animation: markaworks-fade-in-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.markaworks-portfolio-card:nth-child(1) {
    animation-delay: 0.1s;
}

.markaworks-portfolio-card:nth-child(2) {
    animation-delay: 0.2s;
}

.markaworks-portfolio-card:nth-child(3) {
    animation-delay: 0.3s;
}

.markaworks-portfolio-row:nth-child(2) .markaworks-portfolio-card:nth-child(1) {
    animation-delay: 0.4s;
}

.markaworks-portfolio-row:nth-child(2) .markaworks-portfolio-card:nth-child(2) {
    animation-delay: 0.5s;
}

.markaworks-portfolio-row:nth-child(2) .markaworks-portfolio-card:nth-child(3) {
    animation-delay: 0.6s;
}

.markaworks-portfolio-card.markaworks-visible-project:not(.markaworks-hidden-project) {
    opacity: 1;
    transform: translateY(0);
}

/* Removed complex text reveal animations - using simple fade-in only */

/* Smooth fade-up used for the green word */
@keyframes markaworks-fade-up {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Pure fade-only animation (no movement) */
@keyframes markaworks-fade-only {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes markaworks-button-entrance {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes markaworks-fade-in-up {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes markaworks-floating-btn-entrance {
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes markaworks-pulse-ring {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.3;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.6;
    }
}

/* Fluid Responsive Design - Works on ALL screen sizes */

/* Portfolio Title Fluid Sizing */
.markaworks-portfolio-main-title {
    font-size: clamp(28px, 8vw, 72px);
}

/* Portfolio Showcase Fluid Padding */
.markaworks-portfolio-showcase {
    padding: clamp(20px, 5vh, 60px) 0 clamp(40px, 8vh, 80px) 0;
}

/* Portfolio Header Responsive */
.markaworks-portfolio-header {
    gap: clamp(20px, 4vw, 40px);
    margin-bottom: clamp(40px, 8vw, 80px);
    flex-direction: column;
}

/* Portfolio Grid Fluid Spacing */
.markaworks-portfolio-grid {
    gap: clamp(20px, 5vw, 48px);
}

/* Portfolio Floating Button Responsive */
.markaworks-portfolio-floating-btn {
    width: clamp(100px, 12vw, 140px);
    height: clamp(100px, 12vw, 140px);
}

.markaworks-portfolio-floating-text {
    font-size: clamp(16px, 2vw, 22px);
}

/* Large screens - side-by-side header */
@media (min-width: 969px) {
    .markaworks-portfolio-header {
        flex-direction: row;
        align-items: flex-start;
    }
}

/* Large Desktop - Optimal 2-card layout (Up to 1920px) */
@media (min-width: 1201px) and (max-width: 1920px) {
    .markaworks-portfolio-grid {
        max-width: 1430px;
        gap: clamp(30px, 3vw, 40px);
    }
}

/* Ultra-wide Desktop - Larger width with increased gap to preserve card size */
@media (min-width: 1921px) {
    .markaworks-portfolio-grid {
        max-width: 1510px;
        gap: 120px;
    }
}

/* Tablet Landscape - Maintain 2-card layout */
@media (max-width: 1200px) and (min-width: 1025px) {
    .markaworks-portfolio-grid {
        max-width: 1100px;
        gap: clamp(20px, 2.5vw, 30px);
        padding: 0 clamp(20px, 3vw, 40px);
    }
}

/* Tablet Portrait - Ensure 2-card layout */
@media (max-width: 1024px) and (min-width: 901px) {
    .markaworks-portfolio-grid {
        max-width: 880px;
        gap: clamp(16px, 2vw, 20px);
    }
}

/* Small Tablet - Still maintain 2-card layout */
@media (max-width: 900px) and (min-width: 769px) {
    .markaworks-portfolio-grid {
        max-width: 800px;
        gap: clamp(14px, 1.8vw, 18px);
    }
}

/* Single Column Layout for Mobile Screens */
@media (max-width: 768px) {
    .markaworks-portfolio-grid {
        grid-template-columns: 1fr;
        /* Single column on mobile */
        gap: clamp(20px, 5vw, 32px);
        max-width: 450px;
    }

    .markaworks-portfolio-card-small,
    .markaworks-portfolio-card-large {
        width: 100%;
        max-width: 450px;
        min-height: auto !important;
        height: auto !important;
    }

    .markaworks-portfolio-image-container {
        height: 380px !important;
        min-height: 380px !important;
        max-height: 380px !important;
    }

    .markaworks-portfolio-image {
        height: 100% !important;
        min-height: 380px !important;
    }

    .markaworks-portfolio-floating-btn {
        display: none;
        /* Hide cursor effect on mobile */
    }

    .markaworks-portfolio-project-title {
        font-size: clamp(20px, 5vw, 28px);
        line-height: 1.3;
    }

    .markaworks-portfolio-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .markaworks-portfolio-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
    }

    .markaworks-portfolio-content {
        padding: 16px 0 16px 12px !important;
        gap: 12px !important;
        min-height: auto !important;
        display: flex;
        flex-direction: column;
    }

    .markaworks-portfolio-overlay-text {
        font-size: clamp(16px, 4vw, 22px);
        padding: clamp(8px, 2vw, 12px) clamp(12px, 3vw, 20px);
    }
}

/* Extra Small Mobile Screens */
@media (max-width: 480px) {
    .markaworks-portfolio-showcase {
        padding: clamp(20px, 5vh, 40px) 0 clamp(30px, 6vh, 60px) 0;
    }

    .markaworks-portfolio-grid {
        gap: 20px;
        padding: 0 16px;
    }

    .markaworks-portfolio-image-container {
        height: 300px !important;
        min-height: 300px !important;
        max-height: 300px !important;
    }

    .markaworks-portfolio-image {
        height: 100% !important;
        min-height: 300px !important;
    }

    .markaworks-portfolio-project-title {
        font-size: 20px !important;
        line-height: 1.3;
    }

    .markaworks-portfolio-tag {
        font-size: 9px !important;
        padding: 3px 8px !important;
    }

    .markaworks-portfolio-content {
        padding: 12px 0 12px 8px !important;
        gap: 10px !important;
    }

    .markaworks-portfolio-main-title {
        font-size: 28px !important;
    }

    .markaworks-portfolio-header {
        margin-bottom: 40px;
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* High-resolution display optimizations */
@media (min-width: 1920px) {
    .markaworks-portfolio-main-title {
        font-size: 84px;
    }

    .markaworks-portfolio-project-title {
        font-size: 36px;
    }

    .markaworks-portfolio-tag {
        font-size: 13px;
        padding: 7px 14px;
    }

    .markaworks-portfolio-floating-btn {
        width: 180px;
        height: 180px;
    }

    .markaworks-portfolio-floating-text {
        font-size: 28px;
    }
}

/* Dark mode and accessibility improvements — homepage portfolio grid */
@media (prefers-reduced-motion: reduce) {

    .markaworks-portfolio-card,
    .markaworks-portfolio-image:not(.markaworks-frame-cycle__frame),
    .markaworks-portfolio-overlay,
    .markaworks-portfolio-tag,
    .markaworks-portfolio-floating-btn {
        transition: none;
        animation: none;
    }

    .markaworks-portfolio-grid .markaworks-portfolio-card:not(.markaworks-hidden-project),
    .markaworks-portfolio-card.markaworks-visible-project:not(.markaworks-hidden-project) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .markaworks-portfolio-card:hover {
        opacity: 1 !important;
        transform: translateY(-8px) !important;
        background: #F5F1E8;
        box-shadow:
            0 20px 40px rgba(5, 51, 51, 0.2),
            0 0 0 3px #B8D432;
    }

    .markaworks-portfolio-card:hover .markaworks-portfolio-overlay {
        opacity: 1;
    }

    .markaworks-portfolio-card:hover .markaworks-portfolio-overlay-content {
        transform: translateY(0);
    }

    .markaworks-portfolio-card:hover .markaworks-portfolio-image {
        transform: scale(1.15);
    }
}

/* ============================================
     CTA SECTION STYLES
     ============================================ */

.markaworks-cta-section {
    background: #EAE5E3;
    padding: 80px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    overflow: hidden;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
}

/* Remove gap between portfolio-showcase and CTA section on index page */
.markaworks-portfolio-showcase+.markaworks-cta-section {
    margin-top: 0 !important;
}

/* Remove bottom padding from portfolio-showcase when followed by CTA */
body.home .markaworks-portfolio-showcase {
    padding-bottom: 80px !important;
}

.markaworks-cta-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
}

.markaworks-cta-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 48px;
    width: 100%;
}

.markaworks-cta-text-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    width: 100%;
}

.markaworks-cta-subtitle {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 44.8px;
    text-align: center;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-cta-subtitle.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-cta-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 79.2px;
    text-align: center;
    margin: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.markaworks-cta-title.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-cta-button-large {
    height: 64px;
    padding: 20px 32px;
    background: #B8D432;
    border-radius: 100px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    /* Clip internal ripple within pill shape */
    overflow: hidden;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 0;
    transform: scale(0.9);
    z-index: 0;
}

.markaworks-cta-button-large.markaworks-animate-in {
    animation: markaworks-cta-button-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.4s forwards;
}

@keyframes markaworks-cta-button-pop {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }

    60% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.markaworks-cta-button-large span {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
    text-align: center;
    position: relative;
    z-index: 1;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-cta-button-large::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(5, 51, 51, 0.12);
    transform: translate(-50%, -50%);
    transition: width 0.6s ease, height 0.6s ease;
    /* Keep ripple under content */
    z-index: 0;
    pointer-events: none;
}

.markaworks-cta-button-large:hover::before {
    width: 300px;
    height: 300px;
}

.markaworks-cta-button-large:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(184, 212, 50, 0.4);
}

.markaworks-cta-button-large:hover span {
    color: #B8D432;
}

.markaworks-cta-button-large:active {
    transform: translateY(-1px) scale(1.02);
}

/* White Outlined Animation System */
.markaworks-cta-button-large::after {
    content: '';
    position: absolute;
    /* Render outline inside bounds so overflow hidden doesn't clip */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid #F4F5F5;
    border-radius: 100px;
    /* Hidden by default; appears on hover only */
    opacity: 0;
    transform: scale(1);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    pointer-events: none;
    /* Layer above ripple but below text */
    z-index: 1;
    /* No animation by default */
}

@keyframes markaworks-outline-pulse-inset {

    0%,
    100% {
        box-shadow:
            inset 0 0 0 2px rgba(244, 245, 245, 0.85),
            inset 0 0 0 6px rgba(244, 245, 245, 0.12);
    }

    50% {
        box-shadow:
            inset 0 0 0 3px rgba(244, 245, 245, 0.95),
            inset 0 0 0 8px rgba(244, 245, 245, 0.16);
    }
}

/* Enhanced hover state with white outline */
.markaworks-cta-button:hover::after {
    opacity: 1;
    transform: scale(1.06);
    border-width: 3px;
    box-shadow:
        0 0 0 2px rgba(244, 245, 245, 0.9),
        0 0 0 6px rgba(244, 245, 245, 0.3),
        0 0 20px rgba(244, 245, 245, 0.5);
    animation: markaworks-white-outline-pulse 2s ease-in-out infinite;
}

@keyframes markaworks-white-outline-pulse {

    0%,
    100% {
        box-shadow:
            0 0 0 2px rgba(244, 245, 245, 0.9),
            0 0 0 6px rgba(244, 245, 245, 0.3),
            0 0 20px rgba(244, 245, 245, 0.5);
    }

    50% {
        box-shadow:
            0 0 0 3px rgba(244, 245, 245, 1),
            0 0 0 10px rgba(244, 245, 245, 0.4),
            0 0 30px rgba(244, 245, 245, 0.7);
    }
}

.markaworks-cta-button-large:hover {
    transform: translateY(-3px) scale(1.04);
    /* Dark green hover background as requested */
    background: #053333;
    /* Keep a simple drop shadow; no outer rings */
    box-shadow: 0 16px 40px rgba(184, 212, 50, 0.35);
}

/* Active state enhancement */
.markaworks-cta-button-large:active {
    transform: translateY(-1px) scale(1.02);
    animation: none;
    box-shadow:
        0 0 0 2px rgba(244, 245, 245, 0.8),
        0 0 0 6px rgba(244, 245, 245, 0.4),
        0 8px 25px rgba(184, 212, 50, 0.3);
}

.markaworks-cta-button-large:active::after {
    transform: scale(1.05);
    border-width: 2px;
    opacity: 0.8;
}

/* Focus state for accessibility */
.markaworks-cta-button-large:focus {
    outline: none;
    box-shadow:
        0 0 0 3px rgba(244, 245, 245, 0.6),
        0 0 0 6px rgba(184, 212, 50, 0.3),
        0 12px 30px rgba(184, 212, 50, 0.2);
}

.markaworks-cta-button-large:focus::after {
    opacity: 1;
    transform: scale(1.08);
    border-color: #B8D432;
}

/* Visibility guards: prevent opacity from dropping on final CTA in any state */
.markaworks-cta-button-large,
.markaworks-cta-button-large:hover,
.markaworks-cta-button-large:focus,
.markaworks-cta-button-large:active {
    opacity: 1 !important;
}

/* CTA Responsive */
@media (max-width: 1200px) {
    .markaworks-cta-section {
        padding: 60px 0;
    }

    .markaworks-cta-title {
        font-size: 52px;
    }
}

@media (max-width: 768px) {
    .markaworks-cta-section {
        padding: 60px 0;
    }

    .markaworks-cta-title {
        font-size: 40px;
        line-height: 1.2;
    }

    .markaworks-cta-subtitle {
        font-size: 18px;
    }

    .markaworks-cta-button-large {
        padding: 16px 32px;
        font-size: 18px;
    }
}

@media (max-width: 480px) {
    .markaworks-cta-section {
        padding: 40px 0;
    }

    .markaworks-cta-subtitle {
        font-size: 20px;
        line-height: 28px;
    }

    .markaworks-cta-title {
        font-size: 32px;
        line-height: 40px;
    }
}

/* ============================================
     BRANDING STRATEGY SECTION STYLES
     ============================================ */

.markaworks-branding-strategy {
    background: #EAE5E3;
    padding: 160px 40px 120px 40px;
    /* Increased top and bottom padding for more spacing */
    position: relative;
    overflow: visible;
    isolation: isolate;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.markaworks-branding-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    position: relative;
    z-index: 1;
}

.markaworks-branding-main-card {
    background: #053333;
    border-radius: 20px;
    padding: 60px 60px 60px 60px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 60px;
    position: relative;
    overflow: visible;
    min-height: 500px;
    opacity: 0;
    transform: translateY(60px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.markaworks-branding-main-card.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Background Pattern - DISABLED to remove whitish overlay */
.markaworks-branding-pattern {
    display: none;
}

.markaworks-pattern-bar {
    display: none;
}

/* Left Content */
.markaworks-branding-left {
    width: 516px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    z-index: 2;
}

.markaworks-branding-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 410px;
}

.markaworks-branding-title {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 78px;
    margin: 0 0 16px 0;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.2s, opacity 0.3s ease;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-branding-title {
    opacity: 1;
    transform: translateX(0);
}

.markaworks-branding-description {
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s, opacity 0.3s ease;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-branding-description {
    opacity: 1;
    transform: translateX(0);
}

/* Progress Indicators & Controls */
.markaworks-branding-controls {
    display: flex;
    align-items: center;
    gap: 24px;
    width: 100%;
}

.markaworks-branding-progress {
    display: flex;
    gap: 8px;
    align-items: center;
    flex: 1;
}

.markaworks-progress-bar {
    flex: 1;
    height: 8px;
    background: #B8D432;
    border-radius: 8px;
    opacity: 0.2;
    transition: all 0.4s ease;
    transform: scaleX(0);
    transform-origin: left;
}

.markaworks-progress-bar.active {
    opacity: 1;
}

/* Navigation Arrows */
.markaworks-branding-nav {
    display: flex;
    gap: 12px;
    align-items: center;
}

.markaworks-branding-arrow {
    width: 56px;
    height: 56px;
    background: #B8D432;
    border: 2px solid #B8D432;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.markaworks-branding-arrow svg {
    width: 24px;
    height: 24px;
    color: #053333;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.markaworks-branding-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #053333;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.markaworks-branding-arrow:hover::before {
    width: 100px;
    height: 100px;
}

.markaworks-branding-arrow:hover {
    transform: scale(1.1);
    box-shadow: 0 8px 20px rgba(184, 212, 50, 0.4);
}

.markaworks-branding-arrow:hover svg {
    color: #B8D432;
    transform: scale(1.1);
}

.markaworks-branding-arrow:active {
    transform: scale(0.95);
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar {
    animation: markaworks-progress-fill 0.6s ease-out forwards;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar:nth-child(1) {
    animation-delay: 0.6s;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar:nth-child(2) {
    animation-delay: 0.7s;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar:nth-child(3) {
    animation-delay: 0.8s;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar:nth-child(4) {
    animation-delay: 0.9s;
}

.markaworks-branding-main-card.markaworks-animate-in .markaworks-progress-bar:nth-child(5) {
    animation-delay: 1s;
}

@keyframes markaworks-progress-fill {
    to {
        transform: scaleX(1);
    }
}

/* Right Content - Service Cards */
.markaworks-branding-right {
    width: 580px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    z-index: 2;
}

/* Cards Carousel Container */
.markaworks-cards-carousel {
    position: relative;
    width: 100%;
    height: 600px;
    overflow: visible;

}

.markaworks-service-card {
    background: #F4F5F5;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0px 11px 23px rgba(18, 75, 87, 0.03);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    position: absolute;
    top: 50%;
    left: 15px;
    width: calc(100% - 45px);
    height: auto;
    transform: translateY(-50%);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
    border: 3px solid transparent;
    overflow: visible;
}

.markaworks-service-card.active {
    opacity: 1;
    transform: translateY(-50%);
    pointer-events: auto;
    position: absolute;
    z-index: 2;
}

.markaworks-service-card[data-card="0"] {
    padding: 15px 35px;
    gap: 8px;
}

.markaworks-service-card[data-card="1"],
.markaworks-service-card[data-card="2"],
.markaworks-service-card[data-card="3"],
.markaworks-service-card[data-card="4"] {
    padding: 15px 30px;
    gap: 8px;
}

/* Solid Border Effect - No Gradients */
.markaworks-service-card::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    border-radius: 28px;
    border: 4px solid #B8D432;
    opacity: 0;
    z-index: -1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    animation: markaworks-border-pulse-solid 2s ease-in-out infinite;
}

.markaworks-service-card:hover::before {
    opacity: 1;
    border-color: #053333;
    transform: scale(1.02);
}

@keyframes markaworks-border-pulse-solid {

    0%,
    100% {
        border-color: #B8D432;
        opacity: 0.3;
    }

    33% {
        border-color: #94CDD9;
        opacity: 0.5;
    }

    66% {
        border-color: #BFB1D7;
        opacity: 0.4;
    }
}

.markaworks-service-card:hover {
    transform: translateY(calc(-50% - 6px));
    box-shadow:
        0px 25px 50px rgba(18, 75, 87, 0.2),
        0 0 30px rgba(5, 51, 51, 0.3),
        0 0 0 3px #053333;
    border-color: transparent;
    background: rgba(244, 245, 245, 0.98);
}

.markaworks-service-card.active:hover {
    transform: translateY(calc(-50% - 6px));
}

/* Service Items */
.markaworks-service-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    position: relative;
    transition: padding-left 0.3s ease;
}

.markaworks-service-item span {
    color: #6B6B6B;
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px !important;
    font-weight: 600;
    line-height: 26px !important;
    transition: color 0.3s ease, transform 0.3s ease;
    display: inline-block;
}

/* Hide check icons by default */
.markaworks-service-item .markaworks-check-icon {
    opacity: 0;
    transform: scale(0);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    position: absolute;
    left: 0;
}

/* Show check icon ONLY on hover */
.markaworks-service-item.clickable:hover .markaworks-check-icon {
    opacity: 1;
    transform: scale(1);
}

/* Adjust text position when check icon appears */
.markaworks-service-item.clickable:hover {
    padding-left: 64px;
}

.markaworks-service-card[data-card="0"] .markaworks-service-item span,
.markaworks-service-card[data-card="1"] .markaworks-service-item span,
.markaworks-service-card[data-card="2"] .markaworks-service-item span,
.markaworks-service-card[data-card="3"] .markaworks-service-item span,
.markaworks-service-card[data-card="4"] .markaworks-service-item span {
    font-size: 24px !important;
    line-height: 28px !important;
}

.markaworks-service-item.clickable {
    cursor: pointer;
    position: relative;
}

.markaworks-service-item.clickable::after {
    display: none;
}

.markaworks-service-item.clickable:hover::after {
    display: none;
}

.markaworks-service-item.clickable:hover span {
    color: #053333;
    transform: translateX(5px);
    text-shadow: none;
}

/* Service Description Styles */
.markaworks-service-description-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, opacity 0.3s ease-out, margin 0.3s ease-out;
    opacity: 0;
    margin: 0;
}

.markaworks-service-item.expanded+.markaworks-service-description-wrapper {
    max-height: 500px;
    opacity: 1;
    margin: 8px 0 16px 0;
}

.markaworks-service-description-content {
    color: #4A4A4A;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    line-height: 22px;
    font-weight: 400;
    padding: 12px 0 12px 64px;
    transition: all 0.3s ease;
}

/* Check Icon */
.markaworks-check-icon {
    width: 48px;
    height: 48px;
    position: relative;
    flex-shrink: 0;
}

.markaworks-check-mark {
    width: 24px;
    height: 24px;
    position: absolute;
    left: 12px;
    top: 12px;
    transition: all 0.3s ease;
}

.markaworks-check-mark svg {
    width: 100%;
    height: 100%;
    stroke: #053333;
    stroke-width: 3;
    fill: none;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.markaworks-service-card[data-card="1"] .markaworks-check-mark svg,
.markaworks-service-card[data-card="2"] .markaworks-check-mark svg,
.markaworks-service-card[data-card="3"] .markaworks-check-mark svg,
.markaworks-service-card[data-card="4"] .markaworks-check-mark svg {
    stroke: #161616;
}

.markaworks-service-item.clickable:hover .markaworks-check-mark svg {
    stroke: #053333;
    transform: scale(1.15);
}

/* Floating Decorative Element - In Front */
.markaworks-branding-float-element {
    position: absolute;
    width: 369px;
    height: 369px;
    left: -10px;
    top: -200px;
    z-index: 999;
    opacity: 0;
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    transform-origin: center center;
    will-change: transform;
}

.markaworks-branding-float-element.markaworks-animate-in {
    opacity: 1;
}

.markaworks-branding-float-element img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: relative;
    z-index: 999;
}

@keyframes markaworks-float-rotate-branding {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    25% {
        transform: translateY(-15px) rotate(90deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }

    75% {
        transform: translateY(-15px) rotate(270deg);
    }

    100% {
        transform: translateY(0) rotate(360deg);
    }
}

/* Progress Bar Hover Effects */
.markaworks-progress-bar {
    cursor: pointer;
    position: relative;
}

.markaworks-progress-bar::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: rgba(184, 212, 50, 0.2);
    border-radius: 12px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.markaworks-progress-bar:hover::before {
    opacity: 1;
}

.markaworks-progress-bar:hover {
    opacity: 0.8;
    transform: scaleY(1.2);
}

/* Branding Strategy Responsive */
@media (max-width: 1400px) {
    .markaworks-branding-float-element {
        width: 300px;
        height: 300px;
        left: 250px;
        top: -80px;
    }
}

/* Tablet Optimization for Branding Strategy */
@media (max-width: 1024px) and (min-width: 769px) {
    .markaworks-branding-strategy {
        padding: 40px 24px 60px 24px;
        /* Reduced top padding */
    }

    .markaworks-branding-main-card {
        padding: 40px 32px;
        gap: 40px;
    }

    .markaworks-branding-title {
        font-size: 48px;
        line-height: 54px;
    }

    .markaworks-branding-description {
        font-size: 20px;
        line-height: 28px;
    }

    .markaworks-service-item span {
        font-size: 19px;
        line-height: 23px;
    }

    .markaworks-service-card[data-card="0"] .markaworks-service-item span,
    .markaworks-service-card[data-card="1"] .markaworks-service-item span,
    .markaworks-service-card[data-card="2"] .markaworks-service-item span,
    .markaworks-service-card[data-card="3"] .markaworks-service-item span,
    .markaworks-service-card[data-card="4"] .markaworks-service-item span {
        font-size: 21px !important;
        line-height: 25px !important;
    }

    .markaworks-branding-float-element {
        width: 200px;
        height: 200px;
    }
}

@media (max-width: 1200px) {
    .markaworks-branding-main-card {
        flex-direction: column;
        align-items: flex-start;
        gap: 60px;
    }

    .markaworks-branding-left,
    .markaworks-branding-right {
        width: 100%;
    }

    .markaworks-cards-carousel {
        height: auto;
        min-height: 450px;
    }

    .markaworks-branding-title {
        font-size: 56px;
        line-height: 62px;
    }

    .markaworks-branding-arrow {
        width: 48px;
        height: 48px;
    }

    .markaworks-branding-arrow svg {
        width: 20px;
        height: 20px;
    }

    .markaworks-service-item span {
        font-size: 20px;
        line-height: 24px;
    }

    .markaworks-service-card[data-card="0"] .markaworks-service-item span,
    .markaworks-service-card[data-card="1"] .markaworks-service-item span,
    .markaworks-service-card[data-card="2"] .markaworks-service-item span,
    .markaworks-service-card[data-card="3"] .markaworks-service-item span,
    .markaworks-service-card[data-card="4"] .markaworks-service-item span {
        font-size: 22px !important;
        line-height: 26px !important;
    }

    .markaworks-branding-float-element {
        width: 250px;
        height: 250px;
        left: 50%;
        margin-left: -125px;
        top: -30px;
    }

    .markaworks-branding-float-element.markaworks-animate-in {
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .markaworks-branding-strategy {
        padding: 30px 16px 50px 16px;
        /* Reduced top padding */
    }

    .markaworks-branding-main-card {
        padding: 24px 16px;
        min-height: auto;
        gap: 32px;
        border-radius: 16px;
    }

    .markaworks-branding-left {
        gap: 24px;
    }

    .markaworks-branding-header {
        gap: 12px;
        max-width: 100%;
    }

    .markaworks-cards-carousel {
        height: auto;
        min-height: 0;
        /* reduce extra space on mobile */
        position: relative;
        margin-top: 4px;
    }

    .markaworks-branding-title {
        font-size: 36px !important;
        line-height: 44px !important;
    }

    .markaworks-branding-description {
        font-size: 20px !important;
        line-height: 28px !important;
    }

    .markaworks-branding-controls {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
        margin: 0;
        padding: 0;
    }

    .markaworks-branding-progress {
        display: none;
    }

    .markaworks-progress-bar {
        height: 4px;
        border-radius: 4px;
    }

    .markaworks-branding-nav {
        width: 100%;
        justify-content: center;
        order: 1;
    }

    .markaworks-branding-arrow {
        width: 44px;
        height: 44px;
    }

    .markaworks-branding-arrow svg {
        width: 18px;
        height: 18px;
    }

    .markaworks-service-card {
        padding: 20px 16px;
        position: relative;
        /* flow with content to remove big empty area */
        border-radius: 16px;
        /* rounded corners on mobile */
        min-height: auto;
        max-height: none;
        left: 0;
        right: 0;
        width: 100%;
        top: auto;
        transform: none;
        margin: 0;
    }

    .markaworks-service-card:hover,
    .markaworks-service-card:focus,
    .markaworks-service-card:active {
        transform: none !important;
        box-shadow: none !important;
        background: #F4F5F5 !important;
    }

    .markaworks-service-card.active {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        position: relative;
        z-index: 2;
    }

    .markaworks-service-item {
        gap: 6px;
    }

    .markaworks-service-item span {
        font-size: 11px !important;
        line-height: 15px !important;
        color: #6B6B6B !important;
    }

    .markaworks-service-card[data-card="0"] .markaworks-service-item span,
    .markaworks-service-card[data-card="1"] .markaworks-service-item span,
    .markaworks-service-card[data-card="2"] .markaworks-service-item span,
    .markaworks-service-card[data-card="3"] .markaworks-service-item span,
    .markaworks-service-card[data-card="4"] .markaworks-service-item span {
        font-size: 12px !important;
        line-height: 16px !important;
        color: #6B6B6B !important;
    }

    .markaworks-service-item.clickable:hover {
        padding-left: 44px;
    }

    .markaworks-service-description-content {
        font-size: 10px;
        line-height: 16px;
        padding: 8px 0 8px 44px;
    }

    .markaworks-check-icon {
        width: 32px;
        height: 32px;
    }

    .markaworks-check-mark {
        width: 16px;
        height: 16px;
        left: 8px;
        top: 8px;
    }

    .markaworks-branding-float-element {
        width: 120px;
        height: 120px;
        right: 10px;
        left: auto;
        margin-left: 0;
        top: -15px;
    }

    .markaworks-branding-float-element.markaworks-animate-in {
        opacity: 1;
    }
}

@media (max-width: 480px) {
    .markaworks-branding-strategy {
        padding: 24px 12px 40px 12px;
        /* Reduced top padding */
    }

    .markaworks-branding-main-card {
        padding: 20px 12px;
        gap: 24px;
        border-radius: 12px;
    }

    .markaworks-branding-left {
        gap: 20px;
    }

    .markaworks-branding-header {
        gap: 8px;
    }

    .markaworks-branding-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }

    .markaworks-branding-description {
        font-size: 18px !important;
        line-height: 26px !important;
    }

    .markaworks-branding-controls {
        gap: 12px;
        margin: 0;
        padding: 0;
    }

    .markaworks-branding-progress {
        display: none;
    }

    .markaworks-progress-bar {
        height: 3px;
        border-radius: 3px;
    }

    .markaworks-branding-arrow {
        width: 40px;
        height: 40px;
    }

    .markaworks-branding-arrow svg {
        width: 16px;
        height: 16px;
    }

    .markaworks-cards-carousel {
        min-height: 0;
        /* collapse extra green space */
        position: relative;
        margin-top: 4px;
    }

    .markaworks-service-card {
        padding: 16px 12px;
        border-radius: 14px;
        /* slightly rounder on small screens */
        min-height: auto;
        max-height: none;
        left: 0;
        right: 0;
        width: 100%;
        gap: 10px;
        position: relative;
        /* stop absolute centering */
        top: auto;
        transform: none;
        margin: 0;
    }

    .markaworks-service-card:hover,
    .markaworks-service-card:focus,
    .markaworks-service-card:active {
        transform: none !important;
        box-shadow: none !important;
        background: #F4F5F5 !important;
    }

    .markaworks-service-card.active {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        position: relative;
        z-index: 2;
    }

    .markaworks-service-item {
        gap: 4px;
    }

    .markaworks-service-item span {
        font-size: 10px !important;
        line-height: 14px !important;
        color: #6B6B6B !important;
    }

    .markaworks-service-card[data-card="0"] .markaworks-service-item span,
    .markaworks-service-card[data-card="1"] .markaworks-service-item span,
    .markaworks-service-card[data-card="2"] .markaworks-service-item span,
    .markaworks-service-card[data-card="3"] .markaworks-service-item span,
    .markaworks-service-card[data-card="4"] .markaworks-service-item span {
        font-size: 11px !important;
        line-height: 15px !important;
        color: #6B6B6B !important;
    }

    .markaworks-service-item.clickable:hover {
        padding-left: 36px;
    }

    .markaworks-service-description-content {
        font-size: 9px;
        line-height: 14px;
        padding: 6px 0 6px 36px;
    }

    .markaworks-check-icon {
        width: 28px;
        height: 28px;
    }

    .markaworks-check-mark {
        width: 14px;
        height: 14px;
        left: 7px;
        top: 7px;
    }

    .markaworks-branding-float-element {
        width: 100px;
        height: 100px;
        right: 5px;
        left: auto;
        top: -10px;
    }
}

/* ============================================
     TESTIMONIALS SECTION STYLES
     ============================================ */

.markaworks-testimonials {
    background: #EAE5E3;
    padding: 0 40px !important;
    /* NO GAPS - removed vertical padding */
    position: relative;
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
}

.markaworks-testimonials.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-testimonials-container {
    max-width: 1600px;
    padding: 40px 40px 0;
    /* Vertical and horizontal padding */
    margin: 0 auto;
    position: relative;
}

/* Testimonials Header */
.markaworks-testimonials-header {
    text-align: center;
    margin-bottom: 80px;
}

.markaworks-testimonials-title {
    font-size: 64px;
    font-weight: 600;
    color: #1a4d3a;
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    line-height: 1.1;
    opacity: 0;
    animation: fadeInTitle 1.2s ease-out 0.5s forwards;
}

.markaworks-testimonials-carousel {
    position: relative;
    width: 100%;
    min-height: 716px;
    overflow: hidden;
}

.markaworks-testimonial-card {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 1;
    visibility: hidden;
    box-sizing: border-box;
}

.markaworks-testimonial-card.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
    z-index: 2;
    transition-delay: 0.2s;
    visibility: visible;
}

.markaworks-testimonial-card.markaworks-animate-in {
    opacity: 1;
    transform: translateX(0);
    visibility: visible;
}

/* Exiting testimonial */
.markaworks-testimonial-card.exiting {
    opacity: 0;
    transform: translateX(-100px);
    pointer-events: none;
    z-index: 1;
    visibility: visible;
    position: absolute;
}

/* Left Content */
.markaworks-testimonial-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    padding-right: 20px;
}

.markaworks-testimonial-content {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.markaworks-testimonial-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.markaworks-testimonial-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    margin: 0;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
    position: relative;
    cursor: pointer;
}

/* Title hover animation with background */
.markaworks-testimonial-title::before {
    content: '';
    position: absolute;
    top: -8px;
    left: -12px;
    right: -12px;
    bottom: -8px;
    background: #053333;
    border-radius: 8px;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: all 0.4s ease;
    z-index: -1;
}

.markaworks-testimonial-title:hover {
    color: #B8D432;
    transform: translateX(-25px);
    z-index: 1;
}

.markaworks-testimonial-title:hover::before {
    opacity: 1;
    transform: scaleX(1);
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-testimonial-title {
    opacity: 1;
    transform: translateX(0);
}

.markaworks-testimonial-quote {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-testimonial-quote {
    opacity: 1;
    transform: translateX(0);
}

/* Stats */
.markaworks-testimonial-stats {
    display: flex;
    gap: 20px;
    position: relative;
}

/* Stats container hover effect */
.markaworks-testimonial-stats:hover {
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.markaworks-stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-right: 20px;
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    padding: 16px;
    border-radius: 12px;
    position: relative;
}

/* Stat item hover effects */
.markaworks-stat-item:hover {
    transform: translateY(-2px);
    background: #B8D432;
    color: #053333;
}

.markaworks-stat-item:hover .markaworks-stat-number {
    color: #053333;
}

.markaworks-stat-item:hover .markaworks-stat-label {
    color: #053333;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-stat-item:nth-child(1) {
    animation: markaworks-stat-fade-in 0.6s ease-out 0.6s forwards;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-stat-item:nth-child(2) {
    animation: markaworks-stat-fade-in 0.6s ease-out 0.8s forwards;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-stat-item:nth-child(3) {
    animation: markaworks-stat-fade-in 0.6s ease-out 1s forwards;
}

@keyframes markaworks-stat-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-stat-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    margin: 0;
    transition: all 0.3s ease;
}

/* Counter animation */
.markaworks-stat-number.counting {
    animation: markaworks-number-count 2s ease-out;
}

@keyframes markaworks-number-count {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-stat-number.purple {
    color: #BFB1D7;
}

.markaworks-stat-number.green {
    color: #B8D432;
}

.markaworks-stat-number.blue {
    color: #94CDD9;
}

.markaworks-stat-item:hover .markaworks-stat-number {
    transform: scale(1.05);
}

.markaworks-stat-label {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
}

/* Author Info */
.markaworks-testimonial-author {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    opacity: 0;
    transform: translateX(-30px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-testimonial-author {
    opacity: 1;
    transform: translateX(0);
}

.markaworks-author-info {
    display: flex;
    gap: 24px;
    align-items: center;
    opacity: 0;
    transform: translateX(-20px);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1) 1.2s;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-author-info {
    opacity: 1;
    transform: translateX(0);
}

.markaworks-author-avatar {
    width: 160px;
    height: 160px;
    border-radius: 20px;
    object-fit: cover;
    transition: all 0.4s ease;
}

.markaworks-author-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.markaworks-author-avatar:hover {
    transform: scale(1.05);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.markaworks-author-details {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 8px;
}

.markaworks-author-name {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 500;
    line-height: 56px;
    margin: 0;
}

.markaworks-author-position {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 42px;
    margin: 0;
    opacity: 0.7;
}

.markaworks-author-website {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    text-decoration: none;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
    opacity: 0.7;
    transition: all 0.3s ease;
}

.markaworks-author-website:hover {
    color: #B8D432;
    opacity: 1;
}

.markaworks-testimonial-nav {
    display: flex;
    gap: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 1.4s;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-testimonial-nav {
    opacity: 1;
    transform: scale(1);
}

.markaworks-nav-arrow {
    width: 64px;
    height: 64px;
    padding: 16px;
    background: #F4F5F5;
    border: 2px solid transparent;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.markaworks-nav-arrow svg {
    width: 32px;
    height: 32px;
    color: #000;
    transition: all 0.3s ease;
    position: relative;
    z-index: 1;
}

.markaworks-nav-arrow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #053333;
    transform: translate(-50%, -50%);
    transition: width 0.4s ease, height 0.4s ease;
}

.markaworks-nav-arrow:hover::before {
    width: 100px;
    height: 100px;
}

.markaworks-nav-arrow:hover {
    border-color: #B8D432;
    transform: scale(1.1);
}

.markaworks-nav-arrow:hover svg {
    color: #B8D432;
    transform: scale(1.1);
}

.markaworks-nav-arrow:active {
    transform: scale(0.95);
}

/* Right Image */
.markaworks-testimonial-right {
    width: 555px;
    height: 656px;
    flex-shrink: 0;
    opacity: 0;
    transform: scale(0.9);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s;
    position: relative;
    padding: 6px;
}

/* Product image border - always visible */
.markaworks-testimonial-right::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 26px;
    background: #B8D432;
    opacity: 1;
    z-index: 0;
}

.markaworks-testimonial-right:hover::before {
    background: #94CDD9;
    transition: background 0.3s ease;
}

.markaworks-testimonial-card.markaworks-animate-in .markaworks-testimonial-right {
    opacity: 1;
    transform: scale(1);
}

.markaworks-testimonial-image {
    width: calc(100% - 12px);
    height: calc(100% - 12px);
    border-radius: 20px;
    object-fit: cover;
    position: relative;
    z-index: 1;
    margin: 6px;
}




/* Tablet Optimization for Testimonials */
@media (max-width: 1024px) and (min-width: 769px) {
    .markaworks-testimonials {
        padding: 100px 24px;
    }

    .markaworks-testimonials-carousel {
        min-height: 800px;
    }

    .markaworks-testimonial-card {
        flex-direction: column;
        gap: 32px;
    }

    .markaworks-testimonial-left {
        padding-right: 0;
        gap: 32px;
    }

    .markaworks-testimonial-right {
        width: 100%;
        height: 450px;
    }

    .markaworks-testimonial-title {
        font-size: 36px;
        line-height: 44px;
    }

    .markaworks-testimonial-quote {
        font-size: 22px;
        line-height: 30px;
    }

    .markaworks-testimonial-stats {
        gap: 16px;
    }

    .markaworks-stat-number {
        font-size: 36px;
        line-height: 44px;
    }

    .markaworks-stat-label {
        font-size: 20px;
        line-height: 28px;
        color: #0B4444 !important;
    }

    .markaworks-author-name {
        font-size: 36px;
        line-height: 44px;
    }

    .markaworks-author-position {
        font-size: 26px;
        line-height: 34px;
    }

    .markaworks-author-website {
        font-size: 22px;
        line-height: 30px;
    }

    .markaworks-author-avatar {
        width: 140px;
        height: 140px;
    }
}

/* Testimonials Responsive */
@media (max-width: 1200px) {
    .markaworks-testimonials-carousel {
        min-height: 900px;
    }

    .markaworks-testimonial-card {
        flex-direction: column;
    }

    .markaworks-testimonial-left {
        padding-right: 0;
    }

    .markaworks-testimonial-right {
        width: 100%;
        height: 500px;
    }

    .markaworks-testimonial-title {
        font-size: 32px;
        line-height: 40px;
    }

    .markaworks-author-name {
        font-size: 32px;
        line-height: 40px;
    }

    .markaworks-author-position {
        font-size: 24px;
        line-height: 32px;
    }
}

@media (max-width: 768px) {
    .markaworks-testimonials {
        padding: 60px 16px;
    }

    .markaworks-testimonials-carousel {
        min-height: 420px;
    }

    .markaworks-testimonial-card {
        gap: 16px;
        flex-direction: row;
        align-items: stretch;
        background: #053333;
        border-radius: 20px;
        padding: 20px;
        margin: 0 auto;
        max-width: 100%;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
    }

    .markaworks-testimonial-card.active {
        position: relative;
        height: auto;
        min-height: 160px;
    }

    .markaworks-testimonial-left {
        gap: 16px;
        order: 1;
        flex: 1;
        z-index: 2;
    }

    .markaworks-testimonial-content {
        gap: 12px;
    }

    .markaworks-testimonial-right {
        order: 2;
        width: 120px;
        height: 100%;
        min-height: 120px;
        flex-shrink: 0;
        margin: 0;
        border-radius: 16px;
        overflow: hidden;
        position: relative;
        align-self: stretch;
    }

    .markaworks-testimonial-text-wrapper {
        gap: 12px;
    }

    .markaworks-testimonial-title {
        font-size: 18px;
        line-height: 24px;
        color: #B8D432;
        margin-bottom: 8px;
    }

    .markaworks-testimonial-quote {
        font-size: 14px;
        line-height: 20px;
        color: #F4F5F5;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .markaworks-testimonial-stats {
        display: flex;
        gap: 8px;
        flex-wrap: wrap;
    }

    .markaworks-stat-item {
        padding: 6px 8px;
        background: rgba(184, 212, 50, 0.1);
        border-radius: 12px;
        border: 1px solid rgba(184, 212, 50, 0.3);
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .markaworks-stat-number {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
    }

    .markaworks-stat-label {
        font-size: 10px;
        line-height: 14px;
        color: #0B4444 !important;
        opacity: 0.9;
    }

    .markaworks-testimonial-author {
        gap: 8px;
        flex-direction: column;
        align-items: flex-start;
        margin-top: auto;
    }

    .markaworks-author-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
        width: 100%;
    }

    .markaworks-author-avatar {
        display: none;
    }

    .markaworks-author-details {
        gap: 4px;
    }

    .markaworks-author-name {
        font-size: 14px;
        line-height: 18px;
        color: #F4F5F5;
        font-weight: 600;
    }

    .markaworks-author-position {
        font-size: 12px;
        line-height: 16px;
        color: #94CDD9;
        opacity: 0.8;
    }

    .markaworks-author-website {
        font-size: 10px;
        line-height: 14px;
        color: #BFB1D7;
        opacity: 0.7;
    }

    .markaworks-testimonial-nav {
        position: absolute;
        bottom: 16px;
        right: 16px;
        gap: 4px;
        z-index: 3;
    }

    .markaworks-nav-arrow {
        width: 32px;
        height: 32px;
        padding: 6px;
        background: rgba(184, 212, 50, 0.2);
        border: 1px solid rgba(184, 212, 50, 0.4);
        backdrop-filter: blur(10px);
    }

    .markaworks-nav-arrow svg {
        width: 16px;
        height: 16px;
        color: #B8D432;
    }

    .markaworks-testimonial-right {
        height: 120px;
        padding: 0;
        width: 120px;
    }

    .markaworks-testimonial-right::before {
        background: linear-gradient(135deg, #B8D432, #94CDD9);
        border-radius: 16px;
    }


    .markaworks-testimonial-image {
        border-radius: 14px;
        margin: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        object-fit: cover;
        position: absolute;
        top: 2px;
        left: 2px;
    }
}

@media (max-width: 480px) {
    .markaworks-testimonials {
        padding: 40px 12px;
    }

    .markaworks-testimonials-carousel {
        min-height: 380px;
    }

    .markaworks-testimonial-card {
        gap: 12px;
        flex-direction: row;
        align-items: stretch;
        background: #053333;
        border-radius: 16px;
        padding: 16px;
        margin: 0 auto;
        max-width: 100%;
        position: absolute;
        overflow: hidden;
        box-sizing: border-box;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
    }

    .markaworks-testimonial-card.active {
        position: relative;
        height: auto;
        min-height: 140px;
    }

    .markaworks-testimonial-left {
        gap: 12px;
        order: 1;
        flex: 1;
        z-index: 2;
    }

    .markaworks-testimonial-content {
        gap: 12px;
    }

    .markaworks-testimonial-text-wrapper {
        gap: 8px;
    }

    .markaworks-testimonial-title {
        font-size: 16px;
        line-height: 22px;
        color: #B8D432;
        margin-bottom: 6px;
    }

    .markaworks-testimonial-quote {
        font-size: 12px;
        line-height: 18px;
        color: #F4F5F5;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .markaworks-testimonial-stats {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .markaworks-stat-item:last-child {
        grid-column: 1 / -1;
    }

    .markaworks-stat-item {
        padding: 8px;
        border-radius: 6px;
    }

    .markaworks-stat-number {
        font-size: 24px;
        line-height: 30px;
    }

    .markaworks-stat-label {
        font-size: 14px;
        line-height: 20px;
        color: #0B4444 !important;
    }

    .markaworks-testimonial-author {
        gap: 12px;
    }

    .markaworks-author-info {
        gap: 12px;
    }

    .markaworks-author-avatar {
        width: 60px;
        height: 60px;
        border-radius: 8px;
    }

    .markaworks-author-details {
        gap: 2px;
    }

    .markaworks-author-name {
        font-size: 16px;
        line-height: 22px;
    }

    .markaworks-author-position {
        font-size: 14px;
        line-height: 20px;
    }

    .markaworks-author-website {
        font-size: 12px;
        line-height: 18px;
    }

    .markaworks-nav-arrow {
        width: 28px;
        height: 28px;
        padding: 4px;
        background: rgba(184, 212, 50, 0.2);
        border: 1px solid rgba(184, 212, 50, 0.4);
        backdrop-filter: blur(10px);
    }

    .markaworks-nav-arrow svg {
        width: 14px;
        height: 14px;
        color: #B8D432;
    }

    .markaworks-testimonial-right {
        order: 2;
        width: 100px;
        height: 100%;
        min-height: 100px;
        flex-shrink: 0;
        margin: 0;
        border-radius: 12px;
        overflow: hidden;
        position: relative;
        padding: 0;
        align-self: stretch;
    }

    .markaworks-testimonial-right::before {
        background: linear-gradient(135deg, #B8D432, #94CDD9);
        border-radius: 12px;
    }

    .markaworks-testimonial-image {
        border-radius: 10px;
        margin: 2px;
        width: calc(100% - 4px);
        height: calc(100% - 4px);
        object-fit: cover;
        position: absolute;
        top: 2px;
        left: 2px;
    }

    .markaworks-testimonial-nav {
        position: absolute;
        bottom: 12px;
        right: 12px;
        gap: 3px;
        z-index: 3;
    }

    .markaworks-testimonial-author {
        gap: 6px;
        flex-direction: column;
        align-items: flex-start;
        margin-top: auto;
    }

    .markaworks-author-info {
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        width: 100%;
    }

    .markaworks-author-avatar {
        display: none;
    }

    .markaworks-author-name {
        font-size: 12px;
        line-height: 16px;
        color: #F4F5F5;
        font-weight: 600;
    }

    .markaworks-author-position {
        font-size: 10px;
        line-height: 14px;
        color: #94CDD9;
        opacity: 0.8;
    }

    .markaworks-author-website {
        font-size: 9px;
        line-height: 12px;
        color: #BFB1D7;
        opacity: 0.7;
    }

    .markaworks-stat-item {
        padding: 4px 6px;
        background: rgba(184, 212, 50, 0.1);
        border-radius: 8px;
        border: 1px solid rgba(184, 212, 50, 0.3);
        flex: 1;
        min-width: 0;
        text-align: center;
    }

    .markaworks-stat-number {
        font-size: 14px;
        line-height: 18px;
        font-weight: 600;
    }

    .markaworks-stat-label {
        font-size: 9px;
        line-height: 12px;
        color: #0B4444 !important;
        opacity: 0.9;
    }
}

/* ============================================
     ADDITIONAL MOBILE OPTIMIZATIONS
     ============================================ */

/* Enhanced Touch Targets for Mobile */
@media (max-width: 768px) {

    /* Ensure all clickable elements have minimum 44px touch target */
    .markaworks-branding-arrow,
    .markaworks-nav-arrow,
    .markaworks-progress-bar {
        min-height: 44px;
        min-width: 44px;
    }

    /* Improve text readability on mobile */
    .markaworks-service-item span,
    .markaworks-testimonial-quote,
    .markaworks-stat-label {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }

    /* Reduce motion for users who prefer it */
    @media (prefers-reduced-motion: reduce) {

        .markaworks-branding-main-card,
        .markaworks-testimonial-card,
        .markaworks-service-card,
        .markaworks-branding-float-element {
            animation: none;
            transition: none;
        }
    }

    /* Improve focus visibility for keyboard navigation */
    .markaworks-branding-arrow:focus,
    .markaworks-nav-arrow:focus,
    .markaworks-progress-bar:focus {
        outline: 2px solid #B8D432;
        outline-offset: 2px;
    }
}

/* Ultra-wide mobile screens (landscape) */
@media (max-width: 768px) and (orientation: landscape) {
    .markaworks-branding-strategy {
        padding: 24px 16px 40px 16px;
        /* Reduced top padding */
    }

    .markaworks-testimonials {
        padding: 40px 16px;
    }

    .markaworks-testimonials-carousel {
        min-height: 600px;
    }

    .markaworks-testimonial-right {
        height: 200px;
    }
}

/* ============================================
     FINAL CTA SECTION STYLES
     Figma artboard: 3412.28 × 918.30 — sizes via cqw on .markaworks-final-cta-card
     ============================================ */

.markaworks-final-cta {
    background: #EAE5E3;
    padding: 80px 40px !important;
    position: relative;
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0;
}

.markaworks-final-cta.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-final-cta-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
}

.markaworks-final-cta-card {
    container-type: inline-size;
    container-name: mw-final-cta;
    background: #053333;
    border-radius: clamp(16px, 1.471cqw, 24px);
    padding: clamp(24px, 2.942cqw, 44px);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
    min-height: auto;
    --mw-final-cta-watermark: url('/wp-content/uploads/2026/05/MW.svg');
    --mw-final-cta-watermark-left: 60px;
    --mw-final-cta-watermark-width: 484px;
    --mw-final-cta-watermark-height: 168px;
}

/* Final CTA MW watermark — Figma base + ~15% scale, fill #F4F5F5, behind headline */
.markaworks-final-cta-card::after {
    content: '';
    position: absolute;
    top: 0;
    left: var(--mw-final-cta-watermark-left);
    width: var(--mw-final-cta-watermark-width);
    height: var(--mw-final-cta-watermark-height);
    z-index: 0;
    pointer-events: none;
    background-color: #F4F5F5;
    -webkit-mask-image: var(--mw-final-cta-watermark);
    mask-image: var(--mw-final-cta-watermark);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left top;
    mask-position: left top;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    opacity: 1;
}

.markaworks-final-cta-card:has(.markaworks-final-cta-watermark)::after {
    display: none;
}

.markaworks-final-cta-watermark {
    position: absolute;
    top: 0;
    left: var(--mw-final-cta-watermark-left);
    width: var(--mw-final-cta-watermark-width);
    height: var(--mw-final-cta-watermark-height);
    z-index: 0;
    pointer-events: none;
    overflow: visible;
}

.markaworks-final-cta-watermark img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: fill;
    object-position: left top;
    opacity: 1;
    /* SVG asset is dark — recolor to Figma #F4F5F5 at full strength */
    filter: brightness(0) saturate(100%) invert(98%) sepia(4%) saturate(147%) hue-rotate(169deg) brightness(104%) contrast(96%);
}

.markaworks-final-cta.markaworks-animate-in .markaworks-final-cta-card {
    opacity: 1;
    transform: scale(1);
}

/* Left column: headline + pill button (Figma Frame 2147226089) */
.markaworks-final-cta-content {
    flex: 0 1 47.5%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(28px, 3.5cqw, 47px);
    z-index: 2;
    position: relative;
    align-self: flex-start;
    min-width: 0;
    max-width: 47.5%;
}

.markaworks-final-cta-title {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(34px, 5.294cqw, 81px);
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    max-width: calc(100% - 30px);
    letter-spacing: -0.02em;
}

.markaworks-final-cta.markaworks-animate-in .markaworks-final-cta-title {
    opacity: 1;
    transform: translateX(0);
    animation: markaworks-final-cta-title-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes markaworks-final-cta-title-in {
    from {
        opacity: 0;
        transform: translateX(-28px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.markaworks-final-cta-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    background: #B8D432;
    color: #0B4444;
    height: clamp(44px, 4.707cqw, 75px);
    min-height: unset;
    padding: 0 clamp(24px, 2.354cqw, 38px);
    border: 1px solid transparent;
    border-radius: 999px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
    flex-shrink: 0;
    margin-top: 0;
}

.markaworks-final-cta.markaworks-animate-in .markaworks-final-cta-link {
    opacity: 1;
    transform: translateY(0);
    animation: markaworks-final-cta-btn-in 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

@keyframes markaworks-final-cta-btn-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-final-cta-link::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #053333;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    border-radius: inherit;
}

.markaworks-final-cta-link:hover::before {
    transform: scaleX(1);
}

.markaworks-final-cta-link:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: #B8D432;
    box-shadow: 0 12px 32px rgba(184, 212, 50, 0.35);
}

.markaworks-final-cta-link:hover .markaworks-final-cta-text {
    color: #B8D432;
}

.markaworks-final-cta-link,
.markaworks-final-cta-link:hover,
.markaworks-final-cta-link:focus,
.markaworks-final-cta-link:active {
    opacity: 1 !important;
}

.markaworks-final-cta-text {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(16px, 1.765cqw, 27px);
    font-weight: 600;
    line-height: 1.2;
    position: relative;
    z-index: 1;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

/* Right column (Figma Frame 2147240174) */
.markaworks-final-cta-team {
    flex: 0 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: clamp(16px, 2.1cqw, 28px);
    z-index: 2;
    position: relative;
    align-self: flex-start;
    padding-top: clamp(10px, 1.176cqw, 19px);
    padding-bottom: clamp(4px, 0.441cqw, 7px);
    min-width: 0;
    max-width: 48%;
}

.markaworks-final-cta-avatars {
    display: block;
    width: 100%;
    max-width: 100%;
    line-height: 0;
}

.markaworks-final-cta-team-strip {
    display: block;
    width: auto;
    max-width: 100%;
    height: clamp(52px, 7.059cqw, 113px);
    object-fit: contain;
    object-position: left top;
    opacity: 1;
    transform: none;
    transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        filter 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.markaworks-final-cta.markaworks-animate-in .markaworks-final-cta-team-strip {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
    animation: markaworks-final-cta-strip-in 0.75s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

@keyframes markaworks-final-cta-strip-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.markaworks-final-cta-team-strip:hover {
    transform: translateY(-4px) scale(1.01);
    filter: drop-shadow(0 10px 24px rgba(0, 0, 0, 0.28));
}

/* Legacy per-avatar markup — hide if old HTML remains */
.markaworks-final-cta-avatar:not(.markaworks-final-cta-team-strip),
.markaworks-final-cta-avatar-more {
    display: none !important;
}

.markaworks-final-cta-team-text {
    margin: 0;
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(18px, 2.354cqw, 36px);
    font-weight: 400;
    line-height: 1.4;
    max-width: 100%;
    opacity: 1;
    transform: none;
}

.markaworks-final-cta.markaworks-animate-in .markaworks-final-cta-team-text {
    opacity: 0;
    transform: translateY(16px);
    animation: markaworks-final-cta-team-text-in 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

@keyframes markaworks-final-cta-team-text-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-final-cta-stat {
    font-weight: 700;
    line-height: 1.4;
}

.markaworks-final-cta-stat-team {
    color: #94CDD9;
    font-size: clamp(22px, 2.941cqw, 45px);
}

.markaworks-final-cta-stat-talent {
    color: #C2E022;
    font-size: clamp(22px, 2.941cqw, 45px);
}

.markaworks-final-cta-team-br {
    display: none;
}

@container mw-final-cta (min-width: 700px) {
    .markaworks-final-cta-team-br {
        display: block;
    }
}

/* Fallback when container queries unsupported */
@supports not (container-type: inline-size) {
    .markaworks-final-cta-title {
        font-size: clamp(34px, 5.2vw, 81px);
    }

    .markaworks-final-cta-text {
        font-size: clamp(16px, 1.75vw, 27px);
    }

    .markaworks-final-cta-team-strip {
        height: clamp(52px, 7vw, 113px);
    }

    .markaworks-final-cta-team-text {
        font-size: clamp(18px, 2.35vw, 36px);
    }

    .markaworks-final-cta-stat-team,
    .markaworks-final-cta-stat-talent {
        font-size: clamp(22px, 2.94vw, 45px);
    }

    .markaworks-final-cta-card {
        padding: clamp(24px, 2.94vw, 44px);
        border-radius: clamp(16px, 1.47vw, 24px);
    }

    .markaworks-final-cta-link {
        height: clamp(44px, 4.7vw, 75px);
        min-height: unset;
        padding: 0 clamp(24px, 2.35vw, 38px);
    }
}

/* Desktop — Figma px values (3412 artboard × 0.469 scale) */
@media (min-width: 1201px) {
    .markaworks-final-cta-card {
        padding: 47px;
    }

    .markaworks-final-cta-content {
        gap: 47px;
    }

    .markaworks-final-cta-title {
        max-width: calc(100% - 30px);
        font-size: 81px;
    }

    .markaworks-final-cta-link {
        height: 75px;
        padding: 0 38px;
    }

    .markaworks-final-cta-text {
        font-size: 27px;
        line-height: 1.2;
    }

    .markaworks-final-cta-team {
        padding-top: 19px;
        padding-bottom: 7px;
        gap: 28px;
    }

    .markaworks-final-cta-team-strip {
        height: 113px;
    }

    .markaworks-final-cta-team-text {
        font-size: 36px;
    }

    .markaworks-final-cta-stat-team,
    .markaworks-final-cta-stat-talent {
        font-size: 45px;
    }

    .markaworks-final-cta-card::after,
    .markaworks-final-cta-watermark {
        left: 60px;
        width: 484px;
        height: 168px;
    }
}

/* Legacy markup (old rectangular images) — hidden if still present */
.markaworks-final-cta-images,
.markaworks-final-cta-pattern,
.markaworks-final-cta-arrow {
    display: none !important;
}

/* Final CTA Responsive */
@media (max-width: 1200px) {
    .markaworks-final-cta-card {
        flex-direction: column;
        align-items: stretch;
        min-height: auto;
        gap: clamp(28px, 4vw, 40px);
    }

    .markaworks-final-cta-content {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .markaworks-final-cta-title {
        max-width: 100%;
        font-size: clamp(32px, 6.5vw, 56px);
    }

    .markaworks-final-cta-team {
        flex: none;
        width: 100%;
        max-width: 100%;
        padding-top: 0;
    }

    .markaworks-final-cta-team-strip {
        height: clamp(48px, 12vw, 88px);
    }

    .markaworks-final-cta-team-text {
        font-size: clamp(18px, 3.2vw, 28px);
    }

    .markaworks-final-cta-stat-team,
    .markaworks-final-cta-stat-talent {
        font-size: clamp(20px, 3.8vw, 34px);
    }
}

@media (max-width: 768px) {
    .markaworks-final-cta {
        padding: 50px 20px !important;
    }

    .markaworks-final-cta-card {
        padding: 28px 20px;
        gap: 28px;
        border-radius: 16px;
    }

    .markaworks-final-cta-content {
        gap: 24px;
    }

    .markaworks-final-cta-link {
        padding: 14px 28px;
        min-height: 52px;
    }

    .markaworks-final-cta-team {
        gap: 24px;
    }

    .markaworks-final-cta-team-strip {
        max-height: 64px;
    }
}

@media (max-width: 480px) {
    .markaworks-final-cta {
        padding: 40px 16px !important;
    }

    .markaworks-final-cta-card {
        padding: 24px 16px;
        gap: 20px;
        border-radius: 12px;
    }

    .markaworks-final-cta-content {
        gap: 20px;
    }

    .markaworks-final-cta-link {
        padding: 12px 22px;
        min-height: 48px;
        width: 100%;
        max-width: 100%;
    }

    .markaworks-final-cta-text {
        white-space: normal;
        text-align: center;
    }

    .markaworks-final-cta-avatars {
        max-width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .markaworks-final-cta-avatars::-webkit-scrollbar {
        display: none;
    }

    .markaworks-final-cta-team-strip {
        max-width: none;
        width: auto;
        min-width: 280px;
        max-height: 52px;
    }
}

@media (max-width: 360px) {
    .markaworks-final-cta {
        padding: 32px 12px !important;
    }

    .markaworks-final-cta-card {
        padding: 20px 12px;
    }

    .markaworks-final-cta-team-strip {
        min-width: 240px;
        max-height: 46px;
    }
}

@media (prefers-reduced-motion: reduce) {

    .markaworks-final-cta-title,
    .markaworks-final-cta-link,
    .markaworks-final-cta-team-strip,
    .markaworks-final-cta-team-text {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ============================================
     WHAT WE DO SECTION STYLES
     ============================================ */

.markaworks-what-we-do {
    background: #EAE5E3;
    padding: 80px 40px 120px 40px;
    position: relative;
    overflow: hidden;
    overflow-x: clip;
}

.markaworks-what-we-do-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}

/* Decorative Shapes - match homepage floating animation system */
.markaworks-what-shape {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.markaworks-what-shape-left {
    width: 382px;
    height: 382px;
    left: -40px;
    top: 184px;
    opacity: 0.8;
    /* Animation controlled by JavaScript scroll */
    transform-origin: center center;
}

.markaworks-what-shape-right {
    width: 269px;
    height: 269px;
    right: 0;
    bottom: -36px;
    opacity: 0.8;
    /* Animation controlled by JavaScript scroll */
    transform-origin: center center;
}

/* Header Section */
.markaworks-what-header {
    position: relative;
    z-index: 2;
}

.markaworks-what-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    color: #0B4444;
}

.markaworks-what-title-dark {
    color: #0B4444;
}

.markaworks-what-title-green {
    color: #9BB814;
}

/* Description Section */
.markaworks-what-description {
    display: flex;
    justify-content: flex-end;
    position: relative;
    z-index: 2;
}

.markaworks-what-description p {
    max-width: 1015px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    margin: 0;
}

/* Cards Wrapper */
.markaworks-what-cards-wrapper {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 2;
    max-width: 100%;
    overflow: visible;
}

.markaworks-what-cards-row {
    display: flex;
    gap: 20px;
    width: 100%;
    max-width: 100%;
    align-items: stretch;
    overflow: visible;
}

/* When any card is active, prevent other cards from stretching */
.markaworks-what-cards-row:has(.markaworks-what-card.active) {
    align-items: flex-start;
}

/* Both rows align from the right side */
.markaworks-what-cards-row:first-child {
    justify-content: flex-end;
}

.markaworks-what-cards-row:last-child {
    justify-content: flex-end;
}

/* When card is active in first row, switch to flex-start to prevent overflow */
.markaworks-what-cards-row:first-child:has(.markaworks-what-card.active) {
    justify-content: flex-start;
}

/* Card Styles - All cards same width by default */
.markaworks-what-card {
    background: #F4F5F5;
    border-radius: 20px;
    padding: 40px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    flex: 0 0 auto;
    width: min(520px, calc((100% - 40px) / 3));
    max-width: calc((100% - 40px) / 3);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 32px;
    -webkit-tap-highlight-color: transparent;
    backface-visibility: hidden;
    transform: translateZ(0);
}

/* Active State - First row: expand active card while maintaining layout */
.markaworks-what-cards-row:first-child .markaworks-what-card.active {
    background: #053333;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Active State - Second row cards only expand height (no width change) */
.markaworks-what-cards-row:last-child .markaworks-what-card.active {
    background: #053333;
    width: min(520px, calc((100% - 40px) / 3));
    max-width: calc((100% - 40px) / 3);
    transition: all 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}


/* Hover State - Same colors as active state */
.markaworks-what-card:hover:not(.active) {
    background: #053333;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(5, 51, 51, 0.15);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Hover state text colors */
.markaworks-what-card:hover:not(.active) .markaworks-what-card-title {
    color: #B8D432;
}

.markaworks-what-card:hover:not(.active) .markaworks-what-card-subtitle {
    color: #B8D432;
}

/* Focus style (accessibility) */
.markaworks-what-card:focus {
    outline: 2px solid #B8D432;
    outline-offset: 2px;
}

.markaworks-what-card:focus-visible {
    outline: 2px solid #B8D432;
    outline-offset: 2px;
}

.markaworks-what-card:active {
    outline: none;
}

/* Card Header */
.markaworks-what-card-header {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.markaworks-what-card-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    color: #0B4444;
    margin: 0;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-what-card.active .markaworks-what-card-title {
    color: #B8D432;
}

.markaworks-what-card-subtitle {
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #0B4444;
    margin: 0;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-what-card.active .markaworks-what-card-subtitle {
    color: #B8D432;
}

/* Card Content - Hidden by Default */
.markaworks-what-card-content {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 1.2s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.markaworks-what-card.active .markaworks-what-card-content {
    max-height: 600px;
    opacity: 1;
}

.markaworks-what-card-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.markaworks-what-card-list li {
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #F4F5F5;
    position: relative;
    padding-left: 0;
}

/* Background Pattern */
.markaworks-what-card-bg {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    opacity: 0 !important;
    /* prevent white rectangle flash */
    transition: none;
    background: none !important;
    pointer-events: none;
}

.markaworks-what-card.active .markaworks-what-card-bg {
    opacity: 0 !important;
    background: none !important;
}

.markaworks-what-card:hover:not(.active) .markaworks-what-card-content {
    opacity: 0.5;
    transition: opacity 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Footer Section */
.markaworks-what-footer {
    display: flex;
    justify-content: flex-start;
    position: relative;
    z-index: 2;
}

.markaworks-what-footer p {
    max-width: 1015px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    margin: 0;
}

/* ========================================
     RESPONSIVE DESIGN - WHAT WE DO SECTION
     ======================================== */

/* Ultra Large Desktop (1920px+) - Maximum expansion */
@media (min-width: 1920px) {
    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        width: min(1400px, 100%);
        max-width: 100%;
    }

    .markaworks-what-card {
        width: min(520px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }

    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: min(520px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }
}

/* Extra Large Desktop (1600px - 1919px) */
@media (min-width: 1600px) and (max-width: 1919px) {
    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        width: min(1300px, 100%);
        max-width: 100%;
    }

    .markaworks-what-card {
        width: min(500px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }

    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: min(500px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }
}

/* Large Desktop (1400px - 1599px) */
@media (min-width: 1400px) and (max-width: 1599px) {
    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        width: min(1200px, 100%);
        max-width: 100%;
    }

    .markaworks-what-card {
        width: min(440px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }

    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: min(440px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }
}

/* Standard Desktop (1200px - 1399px) */
@media (min-width: 1200px) and (max-width: 1399px) {
    .markaworks-what-we-do-container {
        max-width: 1600px;
    }

    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        width: min(1100px, 100%);
        max-width: 100%;
    }

    .markaworks-what-card {
        width: min(380px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }

    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: min(380px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }
}

/* Medium Desktop (1025px - 1199px) */
@media (min-width: 1025px) and (max-width: 1199px) {
    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        width: min(950px, 100%);
        max-width: 100%;
    }

    .markaworks-what-card {
        width: min(320px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }

    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: min(320px, calc((100% - 40px) / 3));
        max-width: calc((100% - 40px) / 3);
    }
}

/* Tablet & Small Desktop (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-what-we-do {
        padding: 60px 30px 100px;
    }

    .markaworks-what-we-do-container {
        gap: 60px;
    }

    .markaworks-what-title {
        font-size: 56px;
    }

    .markaworks-what-description p,
    .markaworks-what-footer p {
        font-size: 32px;
    }

    /* Tablet: two-up grid per row, wrap to avoid overflow */
    .markaworks-what-cards-row {
        flex-wrap: wrap;
        justify-content: flex-end;
    }

    .markaworks-what-card {
        padding: 28px;
        gap: 22px;
        flex: 0 0 calc((100% - 20px) / 2);
        width: calc((100% - 20px) / 2);
    }

    /* When a first-row card is active on tablet, let it span full row width */
    .markaworks-what-cards-row:first-child .markaworks-what-card.active {
        flex: 0 0 100%;
        width: 100%;
    }

    .markaworks-what-card-title {
        font-size: 32px;
    }

    .markaworks-what-card-subtitle {
        font-size: 20px;
    }

    .markaworks-what-card-list li {
        font-size: 20px;
    }

    .markaworks-what-shape-left {
        width: 300px;
        height: 300px;
        left: -30px;
        top: 150px;
    }

    .markaworks-what-shape-right {
        width: 220px;
        height: 220px;
        right: -20px;
    }

    .markaworks-what-cards-row:last-child {
        justify-content: flex-end;
    }
}

/* Mobile & Tablet (≤768px) */
@media (max-width: 768px) {
    .markaworks-what-we-do {
        padding: 40px 20px 80px;
    }

    .markaworks-what-we-do-container {
        gap: 40px;
    }

    .markaworks-what-title {
        font-size: 36px;
    }

    .markaworks-what-description {
        justify-content: flex-start;
    }

    .markaworks-what-description p,
    .markaworks-what-footer p {
        font-size: 20px;
        max-width: 100%;
    }

    .markaworks-what-cards-wrapper {
        gap: 16px;
    }

    .markaworks-what-cards-row {
        flex-direction: column;
        gap: 16px;
        justify-content: flex-start !important;
        align-items: stretch;
    }

    .markaworks-what-card {
        padding: 24px;
        gap: 20px;
        border-radius: 16px;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
        box-sizing: border-box;
    }

    .markaworks-what-cards-row:first-child .markaworks-what-card.active,
    .markaworks-what-cards-row:last-child .markaworks-what-card.active {
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .markaworks-what-card-title {
        font-size: 24px;
    }

    .markaworks-what-card-subtitle {
        font-size: 16px;
    }

    .markaworks-what-card-list li {
        font-size: 16px;
    }

    .markaworks-what-card.active .markaworks-what-card-content {
        max-height: 800px;
    }

    .markaworks-what-cards-row:last-child {
        justify-content: flex-start;
    }

    /* Tame decorative shapes on small screens to avoid overlap/cropping */
    .markaworks-what-shape-left,
    .markaworks-what-shape-right {
        width: 140px;
        height: 140px;
        opacity: 0.4;
        filter: blur(0.2px);
    }

    .markaworks-what-shape-left {
        left: -60px;
        top: 80px;
    }

    .markaworks-what-shape-right {
        right: -40px;
        bottom: -20px;
    }

    /* Prevent body horizontal scroll; avoid inner scrollbars */
    .markaworks-what-we-do {
        overflow-x: clip;
    }

    .markaworks-what-we-do-container,
    .markaworks-what-cards-wrapper,
    .markaworks-what-cards-row,
    .markaworks-what-card {
        overflow: visible;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .markaworks-what-we-do {
        padding: 30px 16px 60px;
    }

    .markaworks-what-we-do-container {
        gap: 32px;
    }

    .markaworks-what-title {
        font-size: 28px;
    }

    .markaworks-what-description p,
    .markaworks-what-footer p {
        font-size: 18px;
    }

    .markaworks-what-card {
        padding: 20px;
        gap: 16px;
        width: 100% !important;
        max-width: 100% !important;
        flex: 1 1 100% !important;
    }

    .markaworks-what-card-title {
        font-size: 20px;
    }

    .markaworks-what-card-subtitle {
        font-size: 14px;
    }

    .markaworks-what-card-list li {
        font-size: 14px;
    }

    .markaworks-what-cards-row:last-child {
        justify-content: flex-start;
    }

    .markaworks-what-shape-left {
        width: 150px;
        height: 150px;
        left: -60px;
        top: 80px;
    }

    .markaworks-what-shape-right {
        width: 120px;
        height: 120px;
        right: -40px;
    }
}

/* Ultra Small (≤320px) */
@media (max-width: 320px) {
    .markaworks-what-title {
        font-size: 24px;
    }

    .markaworks-what-description p,
    .markaworks-what-footer p {
        font-size: 16px;
    }

    .markaworks-what-card {
        padding: 16px;
        width: 100%;
    }

    .markaworks-what-card-title {
        font-size: 18px;
    }

    .markaworks-what-card-subtitle {
        font-size: 13px;
    }

    .markaworks-what-card-list li {
        font-size: 13px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .markaworks-what-card,
    .markaworks-what-card-content,
    .markaworks-what-card-title,
    .markaworks-what-card-subtitle,
    .markaworks-what-card-bg,
    .markaworks-what-shape {
        transition: none;
        animation: none;
    }
}

/* Touch Device Optimizations */
@media (hover: none) and (pointer: coarse) {
    .markaworks-what-card {
        min-height: 44px;
    }

    .markaworks-what-card:active:not(.active) {
        transform: scale(0.98);
    }
}

/* ============================================
     FAQ SECTION STYLES
     ============================================ */

.markaworks-faq {
    background: #EAE5E3;
    padding: 120px 40px 120px 40px;
    position: relative;
    margin: 0;
    margin-top: 0;
    margin-bottom: 0;
    overflow: hidden;
}

.markaworks-faq.markaworks-animate-in {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-faq-container {
    max-width: 1600px;
    margin: 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 80px;
}

.markaworks-faq-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    text-align: center;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-title {
    opacity: 1;
    transform: translateY(0);
}

.markaworks-faq-list {
    width: 100%;
    max-width: 1000px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.markaworks-faq-item {
    background: rgba(244, 245, 245, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(5, 51, 51, 0.1);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item {
    animation: markaworks-faq-fade-in 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(1) {
    animation-delay: 0.4s;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(2) {
    animation-delay: 0.5s;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(3) {
    animation-delay: 0.6s;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(4) {
    animation-delay: 0.7s;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(5) {
    animation-delay: 0.8s;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-item:nth-child(6) {
    animation-delay: 0.9s;
}

@keyframes markaworks-faq-fade-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-faq-item:hover {
    transform: translateX(8px);
    box-shadow: 0 10px 30px rgba(11, 68, 68, 0.1);
}

.markaworks-faq-item-open {
    background: rgba(244, 245, 245, 0.98);
    border: 1px solid rgba(184, 212, 50, 0.3);
    box-shadow: 0 12px 40px rgba(184, 212, 50, 0.1);
}

.markaworks-faq-question {
    width: 100% !important;
    padding: 24px !important;
    background: #F4F5F5 !important;
    border: none !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 24px !important;
    cursor: pointer !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left !important;
    position: relative !important;
    /* overflow: hidden !important; */ overflow: auto !important;
    border-radius: 20px !important;
    box-sizing: border-box !important;
}

.markaworks-faq-question::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #053333;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
}

.markaworks-faq-question:hover::before {
    width: 100%;
}

.markaworks-faq-question:hover .markaworks-faq-question-text {
    color: #B8D432;
}

.markaworks-faq-question:hover .markaworks-faq-icon svg {
    color: #B8D432;
}

.markaworks-faq-item-open .markaworks-faq-question {
    background: #053333;
}

.markaworks-faq-item-open .markaworks-faq-question::before {
    width: 100%;
}

.markaworks-faq-question-text {
    flex: 1;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 31px;
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.markaworks-faq-item-open .markaworks-faq-question-text {
    color: #B8D432;
}

.markaworks-faq-icon {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 10;
}

.markaworks-faq-icon svg {
    width: 18px;
    height: 18px;
    color: #161616;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.markaworks-faq-item-open .markaworks-faq-icon {
    transform: rotate(45deg) !important;
    background: #B8D432 !important;
    border-radius: 50% !important;
    padding: 6px !important;
    box-shadow: 0 2px 8px rgba(184, 212, 50, 0.4) !important;
}

.markaworks-faq-item-open .markaworks-faq-icon svg {
    color: #053333 !important;
    stroke-width: 2.5 !important;
}

/* Additional specificity for active state */
.markaworks-faq-item.markaworks-faq-item-open .markaworks-faq-question .markaworks-faq-icon {
    transform: rotate(45deg) !important;
    background: #B8D432 !important;
    border-radius: 50% !important;
    padding: 6px !important;
    box-shadow: 0 2px 8px rgba(184, 212, 50, 0.4) !important;
}

.markaworks-faq-item.markaworks-faq-item-open .markaworks-faq-question .markaworks-faq-icon svg {
    color: #053333 !important;
    stroke-width: 2.5 !important;
}

.markaworks-faq-question:hover .markaworks-faq-icon {
    transform: scale(1.1);
}

.markaworks-faq-item-open .markaworks-faq-question:hover .markaworks-faq-icon {
    transform: rotate(45deg) scale(1.1);
}

.markaworks-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-faq-item-open .markaworks-faq-answer {
    max-height: 500px;
}

.markaworks-faq-answer-content {
    padding: 16px 24px 24px 24px !important;
    margin-top: 12px !important;
    margin-bottom: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent !important;
    border-radius: 0 !important;
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    pointer-events: auto;
}

.markaworks-faq-answer-content p {
    color: #161616;
    margin: 0;
}

.markaworks-faq-item-open .markaworks-faq-answer-content p {
    color: #161616;
}

.markaworks-faq-item-open .markaworks-faq-answer-content {
    opacity: 1;
    transform: translateY(0);
    animation: markaworks-answer-slide-in 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-faq-item-open .markaworks-faq-question {
    border-radius: 0;
    background: transparent !important;
}

@keyframes markaworks-answer-slide-in {
    0% {
        opacity: 0;
        transform: translateX(-20px) translateY(-10px);
    }

    100% {
        opacity: 1;
        transform: translateX(0) translateY(0);
    }
}

.markaworks-faq-answer-content p {
    color: #053333 !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.markaworks-faq-decoration {
    position: absolute;
    pointer-events: none;
    object-fit: contain;
    will-change: transform;
}

.markaworks-faq-decoration-left {
    width: 415px;
    height: 407px;
    left: -50px;
    top: 55%;
    transform-origin: center center;
}

.markaworks-faq-decoration-right {
    width: 365px;
    height: 358px;
    right: -30px;
    top: 55%;
    transform-origin: center center;
}

/* Mobile optimization for FAQ decorations */
@media (max-width: 768px) {
    .markaworks-faq-decoration-left {
        width: 70px !important;
        height: 68px !important;
        left: -35px !important;
        top: 10% !important;
        opacity: 0.25 !important;
    }

    .markaworks-faq-decoration-right {
        width: 60px !important;
        height: 58px !important;
        right: -30px !important;
        bottom: 10% !important;
        top: auto !important;
        opacity: 0.25 !important;
    }
}

@media (max-width: 480px) {
    .markaworks-faq-decoration-left {
        width: 50px !important;
        height: 48px !important;
        left: -25px !important;
        top: 5% !important;
        opacity: 0.15 !important;
    }

    .markaworks-faq-decoration-right {
        width: 45px !important;
        height: 43px !important;
        right: -22px !important;
        bottom: 5% !important;
        opacity: 0.15 !important;
    }
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-decoration-left {
    opacity: 1;
}

.markaworks-faq.markaworks-animate-in .markaworks-faq-decoration-right {
    opacity: 1;
}

@keyframes markaworks-rotate-left {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(360deg);
    }
}

@keyframes markaworks-rotate-right {
    0% {
        transform: translateY(-50%) rotate(0deg);
    }

    100% {
        transform: translateY(-50%) rotate(-360deg);
    }
}

/* FAQ Responsive */
@media (max-width: 1400px) {
    .markaworks-faq-title {
        font-size: 56px;
    }

    .markaworks-faq-question-text {
        font-size: 28px;
    }

    .markaworks-faq-answer-content p {
        font-size: 20px;
    }

    .markaworks-faq-decoration-left {
        width: 300px;
        height: 294px;
        left: -40px;
        top: 55%;
    }

    .markaworks-faq-decoration-right {
        width: 280px;
        height: 274px;
        right: -20px;
        top: 55%;
    }
}

/* Remove the display:none for tablets - let mobile styles handle it */
@media (max-width: 1200px) and (min-width: 769px) {
    .markaworks-faq-decoration-left {
        width: 250px;
        height: 245px;
        left: -50px;
        opacity: 0.5;
    }

    .markaworks-faq-decoration-right {
        width: 230px;
        height: 225px;
        right: -40px;
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .markaworks-faq {
        padding: 80px 20px;
    }

    .markaworks-faq-container {
        gap: 60px;
    }

    .markaworks-faq-title {
        font-size: 40px;
    }

    .markaworks-faq-list {
        max-width: 100%;
    }

    .markaworks-faq-question {
        padding: 20px;
        gap: 16px;
    }

    .markaworks-faq-question-text {
        font-size: 20px;
    }

    .markaworks-faq-icon {
        width: 28px;
        height: 28px;
    }

    .markaworks-faq-icon svg {
        width: 16px;
        height: 16px;
    }

    .markaworks-faq-answer-content {
        padding: 14px 18px 18px 18px !important;
        margin-top: 10px !important;
        border-radius: 0 0 20px 20px !important;
    }

    .markaworks-faq-answer-content p {
        font-size: 15px !important;
        line-height: 1.5 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .markaworks-faq-item:hover {
        transform: translateX(4px);
    }
}

@media (max-width: 480px) {
    .markaworks-faq {
        padding: 60px 16px;
    }

    .markaworks-faq-container {
        gap: 40px;
    }

    .markaworks-faq-title {
        font-size: 32px;
    }

    .markaworks-faq-question {
        padding: 16px;
        gap: 12px;
    }

    .markaworks-faq-question-text {
        font-size: 18px;
    }

    .markaworks-faq-icon {
        width: 24px;
        height: 24px;
    }

    .markaworks-faq-icon svg {
        width: 14px;
        height: 14px;
    }

    .markaworks-faq-answer-content {
        padding: 12px 16px 16px 16px !important;
        margin-top: 8px !important;
        border-radius: 0 0 16px 16px !important;
    }

    .markaworks-faq-answer-content p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    .markaworks-faq-item {
        border-radius: 16px;
    }
}

/* Ensure no margins between sections */
.markaworks-cta-section,
.markaworks-branding-strategy,
.markaworks-testimonials,
.markaworks-faq {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

.markaworks-final-cta {
    margin: 0 !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

/* WordPress Fallback - Ensure sections are visible even without animation */
body .markaworks-final-cta,
body .markaworks-faq {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

/* WordPress Override - Force visibility */
.entry-content .markaworks-final-cta,
.entry-content .markaworks-faq,
.wp-block-post-content .markaworks-final-cta,
.wp-block-post-content .markaworks-faq,
article .markaworks-final-cta,
article .markaworks-faq {
    opacity: 1 !important;
    transform: none !important;
    visibility: visible !important;
    display: block !important;
}

/* Very small screens (320px and below) */
@media (max-width: 320px) {
    .markaworks-branding-strategy {
        padding: 20px 8px 32px 8px;
        /* Reduced top padding */
    }

    .markaworks-testimonials {
        padding: 32px 8px;
    }

    .markaworks-testimonials-carousel {
        min-height: 500px;
    }

    .markaworks-branding-main-card {
        padding: 16px 8px;
    }

    .markaworks-branding-title {
        font-size: 28px !important;
        line-height: 36px !important;
    }

    .markaworks-testimonial-title {
        font-size: 18px;
        line-height: 24px;
    }

    .markaworks-testimonial-right {
        height: 120px;
        max-width: 200px;
    }

    .markaworks-service-item span {
        font-size: 9px !important;
        line-height: 13px !important;
        color: #6B6B6B !important;
    }
}

/* Fix for mobile service card positioning */
@media (max-width: 768px) {
    .markaworks-service-card {
        box-sizing: border-box;
    }

    .markaworks-service-card:not(.active) {
        display: none;
    }
}

/* ============================================
     ABOUT PAGE STYLES
     ============================================ */

/* About Stats Section */
.markaworks-about-stats {
    background: #EAE5E3;
    padding: 120px 40px 0 40px !important;
    /* Header spacing + horizontal padding */
    position: relative;
    overflow: hidden;
    margin-top: 0;
}

/* About page floating shapes - controlled by JavaScript scroll */
.markaworks-about-floating {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.markaworks-about-floating img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.markaworks-about-floating-1 {
    width: 300px;
    height: 293px;
    right: -50px;
    top: 61px;
    opacity: 0.8;
}

.markaworks-about-floating-2 {
    width: 385px;
    height: 377px;
    left: -100px;
    top: 368px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .markaworks-about-floating {
        display: none;
    }
}

@keyframes markaworks-float-rotate-right {
    0% {
        transform: rotate(0deg) translateY(0px);
    }

    50% {
        transform: rotate(180deg) translateY(-20px);
    }

    100% {
        transform: rotate(360deg) translateY(0px);
    }
}

@keyframes markaworks-float-rotate-left {
    0% {
        transform: rotate(0deg) translateY(0px);
    }

    50% {
        transform: rotate(-180deg) translateY(20px);
    }

    100% {
        transform: rotate(-360deg) translateY(0px);
    }
}

@keyframes markaworks-revolve-clockwise {
    0% {
        transform: rotate(0deg) translateX(30px) rotate(0deg);
    }

    100% {
        transform: rotate(360deg) translateX(30px) rotate(-360deg);
    }
}

@keyframes markaworks-fade-in-element {
    to {
        opacity: 1;
    }
}

.markaworks-about-stats-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
    /* Add minimal vertical padding for content spacing */
    display: flex;
    flex-direction: column;
    gap: 80px;
    position: relative;
    z-index: 2;
}

.markaworks-about-stats-header {
    display: flex;
    justify-content: flex-start;
    opacity: 0;
    animation: markaworks-slide-up 0.8s ease-out 0.2s forwards;
    padding-top: 60px;
    /* Moved heading down */
}

@keyframes markaworks-slide-up {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.markaworks-about-stats-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    max-width: 1130px;
    margin: 0;
}

/* Typing cursor animation for About page heading */
.markaworks-about-stats-title span[style*="color: rgb(184, 212, 50)"] {
    font-weight: 400;
    font-size: 1em;
    line-height: inherit;
    animation: markaworks-blink-caret 1s step-end infinite;
    margin-left: 2px;
}

.markaworks-about-stats-description {
    display: flex;
    justify-content: flex-end;
    opacity: 0;
    animation: markaworks-slide-up 0.8s ease-out 0.4s forwards;
}

.markaworks-about-stats-description p {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 1015px;
    margin: 0;
}

.markaworks-about-stats-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    opacity: 0;
    animation: markaworks-slide-up 0.8s ease-out 0.6s forwards;
}

.markaworks-about-stats-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.markaworks-about-stats-left {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    grid-template-rows: auto auto;
}

.markaworks-about-stats-left .markaworks-about-stat-card:nth-child(3) {
    grid-column: 1 / -1;
}

.markaworks-about-stats-row-2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.markaworks-about-stat-card {
    padding: 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    overflow: hidden;
    background: #F4F5F5;
    border: 1px solid transparent;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.markaworks-about-stat-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 20px 60px rgba(5, 51, 51, 0.15);
    border-color: rgba(184, 212, 50, 0.4);
    background: #053333;
}

.markaworks-about-stat-card:hover .markaworks-about-stat-number,
.markaworks-about-stat-card:hover .markaworks-about-stat-label,
.markaworks-about-stat-card:hover .markaworks-about-stat-desc {
    color: #B8D432;
}

.markaworks-about-stat-white {
    background: #F4F5F5;
    border: 1px solid transparent;
}

.markaworks-about-stat-white:hover {
    border-color: rgba(184, 212, 50, 0.4);
    background: #053333;
}

.markaworks-about-stat-white:hover .markaworks-about-stat-number,
.markaworks-about-stat-white:hover .markaworks-about-stat-label,
.markaworks-about-stat-white:hover .markaworks-about-stat-desc {
    color: #B8D432;
}

.markaworks-about-stat-green {
    background: #053333;
    border: 1px solid transparent;
}

.markaworks-about-stat-green:hover {
    border-color: rgba(184, 212, 50, 0.4);
    background: #053333;
}

.markaworks-about-stat-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    z-index: 1;
}

.markaworks-about-stat-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: 100px;
    font-weight: 600;
    line-height: 1;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-stat-white .markaworks-about-stat-number {
    color: #0B4444;
}

.markaworks-about-stat-green .markaworks-about-stat-number {
    color: #B8D432;
}

.markaworks-about-stat-label {
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    color: #0B4444;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-stat-white .markaworks-about-stat-label {
    color: #0B4444;
}

.markaworks-about-stat-green .markaworks-about-stat-label {
    color: #B8D432;
}

.markaworks-about-stat-desc {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.4;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* About Page Highlight Word Styling - Same as Home Page */
.markaworks-about-stats-title .markaworks-highlight-word {
    position: relative;
    display: inline-block;
    color: #0B4444;
    font-weight: 700;
    transition: color 1.0s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --underline-scale: 0;
    /* Default value for scroll-driven animation */
}

.markaworks-about-stats-title .markaworks-highlight-word::before {
    content: '';
    position: absolute;
    bottom: -4px;
    left: -12px;
    right: -12px;
    height: 20px;
    background:
        radial-gradient(ellipse at 20% 50%, rgba(184, 212, 50, 0.9) 0%, transparent 70%),
        radial-gradient(ellipse at 50% 30%, rgba(184, 212, 50, 1) 0%, transparent 60%),
        radial-gradient(ellipse at 80% 70%, rgba(184, 212, 50, 0.8) 0%, transparent 50%),
        linear-gradient(90deg,
            rgba(184, 212, 50, 0.7) 0%,
            rgba(184, 212, 50, 1) 20%,
            rgba(184, 212, 50, 0.95) 40%,
            rgba(184, 212, 50, 1) 60%,
            rgba(184, 212, 50, 0.8) 80%,
            rgba(184, 212, 50, 0.6) 100%);
    clip-path: polygon(0% 20%, 5% 10%, 15% 30%, 25% 15%, 35% 40%,
            45% 20%, 55% 35%, 65% 10%, 75% 45%, 85% 25%,
            95% 40%, 100% 30%, 100% 80%, 95% 90%, 85% 70%,
            75% 85%, 65% 60%, 55% 80%, 45% 65%, 35% 85%,
            25% 70%, 15% 90%, 5% 75%, 0% 85%);
    /* Scroll-driven: use CSS variable set by JS */
    transform: scaleX(var(--underline-scale, 0));
    transform-origin: left;
    z-index: -1;
    opacity: var(--underline-scale, 0);
    transition: none;
    /* No transition - controlled by scroll */
}

.markaworks-about-stats-title .markaworks-highlight-word::after {
    content: '';
    position: absolute;
    bottom: 0px;
    left: -6px;
    right: -6px;
    height: 12px;
    background:
        radial-gradient(ellipse at 30% 40%, rgba(184, 212, 50, 0.4) 0%, transparent 60%),
        radial-gradient(ellipse at 70% 60%, rgba(184, 212, 50, 0.5) 0%, transparent 50%),
        linear-gradient(90deg,
            rgba(184, 212, 50, 0.3) 0%,
            rgba(184, 212, 50, 0.6) 30%,
            rgba(184, 212, 50, 0.4) 70%,
            rgba(184, 212, 50, 0.2) 100%);
    clip-path: polygon(0% 30%, 10% 20%, 20% 40%, 30% 25%, 40% 45%,
            50% 30%, 60% 50%, 70% 20%, 80% 40%, 90% 25%,
            100% 35%, 100% 70%, 90% 80%, 80% 60%, 70% 85%,
            60% 65%, 50% 80%, 40% 70%, 30% 85%, 20% 65%,
            10% 75%, 0% 60%);
    /* Scroll-driven: use CSS variable set by JS */
    transform: scaleX(var(--underline-scale, 0));
    transform-origin: left;
    z-index: -1;
    opacity: var(--underline-scale, 0);
    transition: none;
    /* No transition - controlled by scroll */
}

@keyframes markaworks-typing-pulse {

    0%,
    100% {
        transform: scale(1);
        color: #0B4444;
    }

    50% {
        transform: scale(1.02);
        color: #B8D432;
    }
}

/* LinkedIn Link Styling */
.markaworks-linkedin-link {
    color: inherit;
    text-decoration: none;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-linkedin-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: #B8D432;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-linkedin-link:hover {
    color: #B8D432;
    transform: translateY(-1px);
}

.markaworks-linkedin-link:hover::after {
    width: 100%;
}

/* LinkedIn Icon Styling */
.markaworks-about-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* LinkedIn icon uses currentColor in SVG; set to light green */
.markaworks-linkedin-icon {
    color: #B8D432;
}

.markaworks-linkedin-icon:hover {
    color: #9BB814;
}

.markaworks-linkedin-icon {
    color: #94CDD9;
    opacity: 0.7;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(148, 205, 217, 0.1);
}

.markaworks-linkedin-icon:hover {
    opacity: 1;
    color: #B8D432;
    background: rgba(184, 212, 50, 0.1);
    transform: translateY(-2px);
}

/* Enforce light green color */
.markaworks-linkedin-icon {
    color: #B8D432 !important;
}

.markaworks-linkedin-icon:hover {
    color: #9BB814 !important;
}

/* Inline title + LinkedIn icon row (About quote author) */
.markaworks-about-quote-author-title-row {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

/* Small inline LinkedIn icon variant to sit next to title text */
.markaworks-linkedin-icon--small {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    background: transparent !important;
    /* keep clean next to text */
    opacity: 1;
    /* readable next to text */
    padding: 0;
}

.markaworks-linkedin-icon--small:hover {
    background: transparent !important;
    transform: translateY(-1px);
}

/* Mobile adjustments */
@media (max-width: 480px) {
    .markaworks-about-quote-author-title-row {
        gap: 8px;
    }

    .markaworks-linkedin-icon--small {
        width: 18px;
        height: 18px;
        min-width: 18px;
        min-height: 18px;
    }
}

.markaworks-about-stat-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 700;
    line-height: 0.9;
    margin: 0;
    color: #0B4444;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-stat-white .markaworks-about-stat-desc {
    color: #161616;
}

.markaworks-about-stat-green .markaworks-about-stat-desc {
    color: #F4F5F5;
}

.markaworks-about-stats-image {
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-stats-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(184, 212, 50, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
}

.markaworks-about-stats-image:hover::after {
    opacity: 1;
}

.markaworks-about-stats-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-stats-image:hover img {
    transform: scale(1.05);
}

/* Quote Section */
.markaworks-about-quote {
    background: #053333;
    padding: 0 40px !important;
    /* NO GAPS - removed vertical padding */
    overflow: hidden;
    position: relative;
}


.markaworks-about-quote-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 40px 0;
    /* Add minimal vertical padding for content spacing */
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 520px);
    gap: 28px;
    align-items: flex-start;
    position: relative;
    z-index: 1;
}

.markaworks-about-quote-content {
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-right: 40px;
    opacity: 0;
    animation: markaworks-slide-up 0.8s ease-out 0.3s forwards;
}

.markaworks-about-quote-icon {
    display: flex;
    justify-content: flex-end;
    animation: markaworks-float-gentle 3s ease-in-out infinite;
}

@keyframes markaworks-float-gentle {

    0%,
    100% {
        transform: translateY(0px);
    }

    50% {
        transform: translateY(-10px);
    }
}

.markaworks-about-quote-icon svg {
    filter: drop-shadow(0 4px 20px rgba(184, 212, 50, 0.3));
}

.markaworks-about-quote-text-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.markaworks-about-quote-title {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.markaworks-about-quote-description {
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

.markaworks-about-quote-author {
    display: flex;
    align-items: center;
    gap: 16px;
}

.markaworks-about-quote-author-info {
    display: flex;
    flex-direction: column;
}

.markaworks-about-quote-author-name {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 400;
    line-height: 1.4;
}

.markaworks-about-quote-author-title {
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.7;
}

.markaworks-about-quote-image {
    border-radius: 20px;
    overflow: hidden;
    padding: 40px;
    opacity: 0;
    animation: markaworks-slide-up 0.8s ease-out 0.5s forwards;
    position: relative;
}

.markaworks-about-quote-image::before {
    content: '';
    position: absolute;
    inset: 40px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(184, 212, 50, 0.2) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.5s ease;
    pointer-events: none;
    z-index: 1;
}

.markaworks-about-quote-image:hover::before {
    opacity: 1;
}

.markaworks-about-quote-image img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 20px;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
}

.markaworks-about-quote-image:hover img {
    transform: scale(1.03);
}

/* Team Section */
.markaworks-about-team {
    background: #F4F5F5;
    padding: 0 !important;
    /* NO GAPS - removed all padding */
    overflow: hidden;
}

.markaworks-about-team-container {
    display: flex;
    flex-direction: column;
    gap: 48px;
    padding: 40px 0;
    /* Add minimal vertical padding for content spacing */
}

.markaworks-about-team-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    margin: 0;
    padding: 0 40px;
}

.markaworks-about-team-grid {
    display: flex;
    gap: 20px;
    animation: markaworks-scroll-loop 40s linear infinite;
    width: max-content;
}

.markaworks-about-team-grid:hover {
    animation-play-state: paused;
}

@keyframes markaworks-scroll-loop {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.markaworks-team-card {
    display: flex;
    flex-direction: column;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    width: 200px;
    height: 265px;
    /* Fixed height to prevent jumping */
    background: transparent;
    border-radius: 20px;
    padding: 16px;
    border: 2px solid transparent;
    overflow: hidden;
}

.markaworks-team-card:hover {
    background: white;
    box-shadow: 0 15px 50px rgba(5, 51, 51, 0.2);
    border-color: #053333;
    transform: translateY(-5px) scale(1.02);
}

.markaworks-team-image {
    width: 168px;
    /* Adjusted for padding */
    height: 168px;
    overflow: hidden;
    border-radius: 8px;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: absolute;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.markaworks-team-card:hover .markaworks-team-image {
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) scale(0.8);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-team-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.markaworks-team-info {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 2;
}

.markaworks-team-card:hover .markaworks-team-info {
    justify-content: flex-start;
}

.markaworks-team-default-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: center;
    padding: 16px;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
    transform: translateY(0);
}

.markaworks-team-card:hover .markaworks-team-default-info {
    opacity: 0;
    transform: translateY(20px);
    pointer-events: none;
}

.markaworks-team-hover-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    justify-content: flex-start;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s;
}

.markaworks-team-card:hover .markaworks-team-hover-content {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.markaworks-team-hover-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.markaworks-team-hover-avatar {
    width: 72px;
    /* Increased from 56px */
    height: 72px;
    /* Increased from 56px */
    flex-shrink: 0;
}

.markaworks-team-hover-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* Increased from 8px */
    text-align: left;
    /* Align text to the left/right of avatar */
    flex: 1;
    /* Take remaining space */
}

.markaworks-team-name {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 22px;
    /* Increased from 20px */
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.markaworks-team-default-info .markaworks-team-name {
    font-size: 20px;
    text-align: center;
}

.markaworks-team-hover-info .markaworks-team-name {
    font-size: 16px;
    text-transform: uppercase;
}

.markaworks-team-role {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.6;
    margin: 0;
}

.markaworks-team-default-info .markaworks-team-role {
    text-align: center;
    display: block;
    /* Changed from none to block to show role by default */
}

.markaworks-team-role {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    /* Increased from 16px */
    font-weight: 400;
    line-height: 1.2;
    margin: 0;
}

.markaworks-team-desc {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 17px;
    /* Increased from 16px */
    font-weight: 400;
    line-height: 1.6;
    /* Increased from 1.4 */
    margin: 0;
    text-align: left;
}

.markaworks-team-hover-content .markaworks-team-desc {
    display: block;
}

/* Team Card Hover State */
.markaworks-team-card-hover {
    background: white;
    border-radius: 20px;
    padding: 16px;
    height: 265px;
    justify-content: space-between;
    box-shadow: 0 15px 50px rgba(5, 51, 51, 0.2);
    animation: markaworks-card-pop 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes markaworks-card-pop {
    0% {
        opacity: 0;
        transform: scale(0.95);
    }

    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.markaworks-team-hover-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 100%;
}

.markaworks-team-hover-header {
    display: flex;
    align-items: center;
    gap: 12px;
}

.markaworks-team-hover-avatar {
    width: 56px;
    height: 56px;
    border-radius: 100px;
    overflow: hidden;
    flex-shrink: 0;
}

.markaworks-team-hover-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.markaworks-team-hover-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.markaworks-team-hover-name {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}

.markaworks-team-hover-role {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.2;
    opacity: 0.6;
    margin: 0;
}

.markaworks-team-hover-desc {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Process Section */
.markaworks-about-process {
    background: #EAE5E3;
    padding: 60px 40px;
    position: relative;
    overflow: hidden;
}

/* Process section floating shapes - controlled by JavaScript scroll */
.markaworks-process-floating {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.markaworks-process-floating img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.markaworks-process-floating-1 {
    width: 382px;
    height: 382px;
    left: -93px;
    bottom: 200px;
    opacity: 0.8;
}

.markaworks-process-floating-2 {
    width: 345px;
    height: 345px;
    right: 100px;
    top: 112px;
    opacity: 0.8;
}

@media (max-width: 768px) {
    .markaworks-process-floating {
        display: none;
    }
}

.markaworks-about-process-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 50px;
    position: relative;
    z-index: 2;
}

.markaworks-about-process-header {
    display: flex;
    justify-content: flex-start;
}

.markaworks-about-process-title {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    max-width: 1130px;
    margin: 0;
}

.markaworks-about-process-description {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0 60px;
    width: 100%;
    overflow: hidden;
}

.markaworks-about-process-description p {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.6;
    max-width: 1100px;
    width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

/* Modified text alignment - only first line has left spacing */
.markaworks-stairway-line {
    display: block;
    transition: transform 0.3s ease;
}

.markaworks-stairway-line-1 {
    padding-left: 120px;
}

.markaworks-stairway-line-2 {
    padding-left: 0;
}

.markaworks-stairway-line-3 {
    padding-left: 0;
}

.markaworks-about-process-grid {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
}

.markaworks-about-process-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    align-items: start;
}

.markaworks-about-process-row:first-child {
    justify-items: start;
}

.markaworks-about-process-row:last-child {
    justify-items: end;
    padding-left: 200px;
}

.markaworks-process-card {
    padding: 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: auto;
    position: relative;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
}

.markaworks-process-card:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 60px rgba(5, 51, 51, 0.2);
}

.markaworks-process-white {
    background: #F4F5F5;
    border: 1px solid transparent;
}

.markaworks-process-white:hover {
    background: #053333;
    border-color: rgba(184, 212, 50, 0.4);
}

.markaworks-process-white:hover .markaworks-process-number,
.markaworks-process-white:hover .markaworks-process-title,
.markaworks-process-white:hover .markaworks-process-desc {
    color: #B8D432;
}

.markaworks-process-dark {
    background: #F4F5F5;
    border: 1px solid transparent;
}

.markaworks-process-dark:hover {
    background: #053333;
    border-color: rgba(184, 212, 50, 0.4);
}

.markaworks-process-small {
    max-width: 440px;
    grid-column: 2;
}

.markaworks-about-process-row:last-child .markaworks-process-card:first-child {
    grid-column: 1;
}

.markaworks-process-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: 80px;
    font-weight: 600;
    line-height: 1;
    text-align: right;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 0 0 32px 0;
    align-self: flex-end;
}

.markaworks-process-white .markaworks-process-number {
    color: #0B4444;
}

.markaworks-process-dark .markaworks-process-number {
    color: #0B4444;
}

.markaworks-process-dark:hover .markaworks-process-number {
    color: #B8D432;
}

.markaworks-process-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    text-align: left;
    margin: 0 0 4px 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start;
}

.markaworks-process-white .markaworks-process-title {
    color: #0B4444;
}

.markaworks-process-dark .markaworks-process-title {
    color: #0B4444;
}

.markaworks-process-dark:hover .markaworks-process-title {
    color: #B8D432;
}

.markaworks-process-desc {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    text-align: left;
    margin: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    align-self: flex-start;
}

.markaworks-process-gif-inline {
    width: 158px !important;
    max-width: 158px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-self: center;
    line-height: 0;
}

.markaworks-process-white .markaworks-process-desc {
    color: #161616;
}

.markaworks-process-dark .markaworks-process-desc {
    color: #161616;
}

.markaworks-process-dark:hover .markaworks-process-desc {
    color: #F4F5F5;
}

/* CTA Section */
.markaworks-about-cta {
    background: #EAE5E3;
    padding: 80px 40px;
}

.markaworks-about-cta-container {
    max-width: 1440px;
    margin: 0 auto;
}

.markaworks-about-cta-card {
    background: #053333;
    border-radius: 20px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
    min-height: 360px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    border: 2px solid transparent;
}

.markaworks-about-cta-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 25px 70px rgba(5, 51, 51, 0.3);
    border-color: rgba(184, 212, 50, 0.3);
}

.markaworks-about-cta-content {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 280px;
    z-index: 1;
}

.markaworks-about-cta-title {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    max-width: 647px;
    margin: 0;
}

.markaworks-about-cta-link {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.markaworks-about-cta-link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background: #B8D432;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-cta-link:hover {
    transform: translateX(10px);
    color: #94CDD9;
}

.markaworks-about-cta-link:hover::after {
    width: calc(100% - 60px);
}

.markaworks-about-cta-link svg {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-about-cta-link:hover svg {
    transform: rotate(-45deg) scale(1.1);
}

.markaworks-about-cta-link:hover svg circle {
    stroke: #94CDD9;
}

.markaworks-about-cta-link:hover svg path {
    stroke: #94CDD9;
}

.markaworks-about-cta-images {
    display: flex;
    gap: 24px;
    z-index: 1;
}

.markaworks-about-cta-images img {
    width: 240px;
    height: 280px;
    object-fit: cover;
    border-radius: 14px;
    padding: 12px;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(0.9);
}

.markaworks-about-cta-images img:hover {
    transform: translateY(-10px) scale(1.05);
    filter: brightness(1.1);
    box-shadow: 0 15px 40px rgba(184, 212, 50, 0.3);
}

/* Responsive Styles for About Page */
@media (max-width: 1200px) {

    .markaworks-about-stats-title,
    .markaworks-about-process-title {
        font-size: 56px;
    }

    .markaworks-about-stats-description p,
    .markaworks-about-process-description p {
        font-size: 32px;
    }

    /* Reduce stairway indent on tablets - only first line */
    .markaworks-stairway-line-1 {
        padding-left: 80px;
    }

    .markaworks-stairway-line-2,
    .markaworks-stairway-line-3 {
        padding-left: 0;
    }

    .markaworks-about-cta-title {
        font-size: 56px;
    }
}

@media (max-width: 1024px) {
    .markaworks-about-stat-number {
        font-size: 84px;
    }

    .markaworks-about-stat-label {
        font-size: 26px;
    }

    .markaworks-about-stat-desc {
        font-size: 14px;
    }

    .markaworks-team-name {
        font-size: 18px;
    }

    .markaworks-team-default-info .markaworks-team-name {
        font-size: 18px;
    }

    .markaworks-team-hover-info .markaworks-team-name {
        font-size: 15px;
    }

    .markaworks-team-role {
        font-size: 13px;
    }

    .markaworks-team-desc {
        font-size: 17px;
        /* Increased to match desktop */
        line-height: 1.6;
        /* Increased line height */
    }
}

@media (max-width: 768px) {
    .markaworks-about-stat-number {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    .markaworks-about-stat-label {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .markaworks-about-stat-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .markaworks-team-name {
        font-size: 15px !important;
    }

    .markaworks-team-default-info .markaworks-team-name {
        font-size: 15px !important;
    }

    .markaworks-team-hover-info .markaworks-team-name {
        font-size: 12px !important;
    }

    .markaworks-team-role {
        font-size: 11px !important;
    }

    .markaworks-team-desc {
        font-size: 14px !important;
        /* Increased from 13px */
        line-height: 1.5 !important;
        /* Increased from 1.3 */
    }
}

@media (max-width: 1200px) {
    .markaworks-about-stats-row {
        grid-template-columns: 1fr;
    }

    .markaworks-about-quote-container {
        grid-template-columns: 1fr;
    }

    .markaworks-about-quote-content {
        padding-right: 0;
    }

    .markaworks-about-process-grid {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .markaworks-about-process-row {
        display: grid;
        grid-template-columns: 1fr;
        gap: 16px;
        padding-left: 0;
    }

    .markaworks-about-process-row:last-child {
        padding-left: 0;
    }

    .markaworks-process-small {
        max-width: 100%;
    }

    /* Adjust card layout for tablets */
    .markaworks-process-card {
        padding: 24px;
        justify-content: space-between;
        height: auto;
    }

    .markaworks-process-number {
        font-size: 64px;
        margin-bottom: 24px;
    }

    .markaworks-process-gif-inline {
        width: 135px !important;
        max-width: 135px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0;
    }

    .markaworks-process-title {
        font-size: 28px;
    }

    .markaworks-process-desc {
        font-size: 16px;
    }
}

@media (max-width: 768px) {

    .markaworks-about-stats,
    .markaworks-about-quote {
        padding: 80px 20px;
    }

    .markaworks-about-process {
        padding: 50px 20px;
    }

    /* Optimize process section background shapes for mobile */
    .markaworks-about-process::before {
        width: 80px;
        height: 80px;
        right: -40px;
        top: 10px;
        opacity: 0.15;
    }

    .markaworks-about-process::after {
        width: 90px;
        height: 90px;
        left: -45px;
        bottom: 30px;
        opacity: 0.15;
    }

    .markaworks-about-team,
    .markaworks-about-cta {
        padding: 40px 20px;
    }

    .markaworks-about-stats-title,
    .markaworks-about-process-title {
        font-size: 40px;
    }

    .markaworks-about-stats-description p,
    .markaworks-about-process-description p {
        font-size: 24px;
    }

    .markaworks-about-stats-title {
        font-size: 28px !important;
        line-height: 1.2 !important;
        margin-bottom: 12px !important;
    }

    .markaworks-about-stats-description p {
        font-size: 26px !important;
        line-height: 1.6 !important;
        margin-top: 0 !important;
    }

    .markaworks-about-stat-card {
        padding: 24px 18px !important;
        min-height: auto !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    .markaworks-about-stat-content {
        gap: 8px !important;
    }

    .markaworks-about-stat-desc {
        margin-top: 8px !important;
    }

    /* Optimize about stats section background shapes for mobile */
    .markaworks-about-stats::before {
        width: 120px !important;
        height: 117px !important;
        right: -60px !important;
        top: 30px !important;
        opacity: 0.3 !important;
    }

    .markaworks-about-stats::after {
        width: 150px !important;
        height: 147px !important;
        left: -75px !important;
        top: 200px !important;
        opacity: 0.3 !important;
    }

    .markaworks-about-process-description {
        padding: 0 20px;
        text-align: center;
    }

    .markaworks-about-process-description p {
        font-size: 20px;
        line-height: 1.5;
        gap: 0;
        align-items: center;
        text-align: center;
    }

    .markaworks-about-stats-left {
        grid-template-columns: 1fr;
        /* stack cards on mobile */
        grid-template-rows: auto;
        gap: 16px;
    }

    /* Remove stairway effect on mobile - make it normal */
    .markaworks-stairway-line {
        display: inline;
        width: auto;
        padding-left: 0 !important;
    }

    .markaworks-stairway-line-1::after {
        content: ' ';
    }

    .markaworks-stairway-line-2::after {
        content: ' ';
    }

    /* Mobile card adjustments - 2 per row with better sizing */
    .markaworks-about-process-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        max-width: 100%;
    }

    .markaworks-about-process-row {
        display: contents;
    }

    .markaworks-process-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 8px;
        padding: 16px 12px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    .markaworks-process-number {
        font-size: 28px;
        text-align: left;
        margin-bottom: 8px;
    }

    .markaworks-process-gif-inline {
        width: 90px !important;
        max-width: 90px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0;
    }

    .markaworks-process-title {
        font-size: 16px;
        line-height: 1.2;
        margin-bottom: 3px;
    }

    .markaworks-process-desc {
        font-size: 12px;
        line-height: 1.3;
    }

    .markaworks-about-stats-row-2 {
        grid-template-columns: 1fr;
    }

    .markaworks-about-stats-number {
        font-size: 36px !important;
        line-height: 1.1 !important;
    }

    .markaworks-about-stat-label {
        font-size: 13px !important;
        line-height: 1.3 !important;
    }

    .markaworks-about-stat-desc {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }

    .markaworks-about-quote-title {
        font-size: 32px;
    }

    .markaworks-about-quote-description {
        font-size: 24px;
    }

    .markaworks-about-quote-author-name {
        font-size: 24px;
    }

    .markaworks-about-quote-author-title {
        font-size: 18px;
    }

    .markaworks-about-quote-image img {
        height: 400px;
    }

    .markaworks-about-team-grid {
        animation: none;
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        width: 100%;
    }

    /* Adjust hover effects for mobile - smooth transitions */
    .markaworks-team-card {
        width: 100%;
        max-width: 200px;
        height: 240px;
        padding: 12px;
    }

    .markaworks-team-card:hover {
        background: white;
        box-shadow: 0 10px 30px rgba(5, 51, 51, 0.15);
        border-color: #053333;
        transform: translateY(-3px) scale(1.01);
    }

    .markaworks-team-image {
        width: 176px;
        height: 150px;
        top: 12px;
    }

    .markaworks-team-card:hover .markaworks-team-image {
        opacity: 0;
        visibility: hidden;
        transform: scale(0.8);
    }

    .markaworks-team-info {
        padding: 12px;
    }

    .markaworks-team-card:hover .markaworks-team-info {
        justify-content: flex-start;
    }

    .markaworks-team-default-info {
        padding: 12px;
    }

    .markaworks-team-card:hover .markaworks-team-default-info {
        opacity: 0;
        transform: translateY(15px);
        pointer-events: none;
    }

    .markaworks-team-card:hover .markaworks-team-hover-content {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .markaworks-team-hover-avatar {
        width: 60px;
        /* Increased from 48px */
        height: 60px;
        /* Increased from 48px */
    }

    .markaworks-team-hover-info .markaworks-team-name {
        font-size: 16px !important;
        /* Increased from 12px */
    }

    .markaworks-team-hover-info .markaworks-team-role {
        font-size: 14px !important;
        /* Increased from 11px */
    }

    .markaworks-team-desc {
        font-size: 14px !important;
        /* Increased from 13px */
        line-height: 1.5;
        /* Increased from 1.3 */
    }

    .markaworks-team-image {
        width: 100%;
        height: auto;
        aspect-ratio: 1;
        max-width: 200px;
        margin: 0 auto;
    }

    .markaworks-about-team-title {
        font-size: 24px;
        padding: 0 20px;
    }

    .markaworks-team-card {
        max-width: 200px;
        margin: 0 auto;
    }

    .markaworks-team-name {
        font-size: 15px !important;
    }

    .markaworks-team-role {
        font-size: 11px !important;
    }

    .markaworks-process-card {
        padding: 24px;
        justify-content: space-between;
        height: auto;
    }

    .markaworks-process-number {
        font-size: 72px;
        margin-bottom: 28px;
    }

    .markaworks-process-gif-inline {
        width: 144px !important;
        max-width: 144px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0;
    }

    .markaworks-process-title {
        font-size: 32px;
    }

    .markaworks-process-desc {
        font-size: 18px;
    }

    .markaworks-about-cta-card {
        flex-direction: column;
        gap: 40px;
        padding: 24px;
    }

    .markaworks-about-cta-title {
        font-size: 40px;
    }

    .markaworks-about-cta-link {
        font-size: 24px;
    }

    .markaworks-about-cta-images {
        width: 100%;
        justify-content: center;
    }

    .markaworks-about-cta-images img {
        width: 180px;
        height: 210px;
    }
}

@media (max-width: 480px) {

    .markaworks-about-stats-title,
    .markaworks-about-process-title {
        font-size: 32px;
    }

    .markaworks-about-stats-description p,
    .markaworks-about-process-description p {
        font-size: 18px;
    }

    .markaworks-about-stats-title {
        font-size: 22px !important;
        line-height: 1.25 !important;
        margin-bottom: 10px !important;
    }

    .markaworks-about-stats-description p {
        font-size: 20px !important;
        line-height: 1.6 !important;
        margin-top: 0 !important;
    }

    .markaworks-about-stat-card {
        padding: 20px 16px !important;
        gap: 12px !important;
    }

    .markaworks-about-stat-content {
        gap: 7px !important;
    }

    .markaworks-about-stat-desc {
        margin-top: 6px !important;
    }

    /* Further reduce about stats section background shapes on small mobile */
    .markaworks-about-stats::before {
        width: 80px !important;
        height: 78px !important;
        right: -40px !important;
        top: 20px !important;
        opacity: 0.2 !important;
    }

    .markaworks-about-stats::after {
        width: 100px !important;
        height: 98px !important;
        left: -50px !important;
        top: 150px !important;
        opacity: 0.2 !important;
    }

    .markaworks-about-process-description {
        padding: 0 16px;
        text-align: center;
    }

    .markaworks-about-process-description p {
        font-size: 16px;
        line-height: 1.4;
        gap: 0;
        text-align: center;
        align-items: center;
    }

    /* Remove stairway effect on small mobile - normal text */
    .markaworks-stairway-line {
        display: inline;
        width: auto;
        padding-left: 0 !important;
    }

    .markaworks-about-process {
        padding: 40px 16px;
    }

    .markaworks-about-process-container {
        gap: 30px;
    }

    /* Small mobile card adjustments - 2 per row with tighter spacing */
    .markaworks-about-process-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        max-width: 100%;
    }

    .markaworks-about-process-row {
        display: contents;
    }

    .markaworks-process-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        gap: 6px;
        padding: 12px 8px;
        width: 100%;
        box-sizing: border-box;
        height: auto;
    }

    .markaworks-process-number {
        font-size: 24px;
        text-align: left;
        margin-bottom: 6px;
    }

    .markaworks-process-gif-inline {
        width: 68px !important;
        max-width: 68px !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 0;
    }

    .markaworks-process-title {
        font-size: 14px;
        line-height: 1.2;
        margin-bottom: 2px;
    }

    .markaworks-process-desc {
        font-size: 11px;
        line-height: 1.3;
    }

    /* Further reduce background shapes on small mobile */
    .markaworks-about-process::before {
        width: 60px;
        height: 60px;
        right: -30px;
        top: 5px;
        opacity: 0.1;
    }

    .markaworks-about-process::after {
        width: 70px;
        height: 70px;
        left: -35px;
        bottom: 20px;
        opacity: 0.1;
    }

    .markaworks-about-team-grid {
        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
        gap: 12px;
    }

    .markaworks-about-cta-images {
        flex-direction: column;
        align-items: center;
    }

    .markaworks-about-cta-images img {
        width: 100%;
        max-width: 240px;
    }
}

/* ===== PROJECTS SECTION STYLES ===== */

/* Projects Section Container */
.markaworks-projects-section {
    padding: 80px 0 120px 0;
    background: #EAE5E3;
    position: relative;
    overflow: visible;
    margin: 0;
}

.markaworks-projects-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
    /* Horizontal padding only */
}

/* Projects Header */
.markaworks-projects-header {
    text-align: left;
    margin-bottom: 80px;
    position: relative;
    padding-top: 60px;
    /* Moved heading down */
    padding-left: clamp(20px, 3vw, 0px);
    padding-right: clamp(20px, 3vw, 0px);
    z-index: 2;
}

.markaworks-projects-title {
    max-width: 1100px;
    margin: 0 auto 0;
    /* reset h2 default margins */
    line-height: 1.1;
    position: relative;
    z-index: 2;
}

.markaworks-projects-title {
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    font-family: 'Inter Tight', sans-serif;
    color: #053333;
    opacity: 0;
    transform: translateY(50px);
    animation: fadeInTitle 1.4s cubic-bezier(0.34, 1.56, 0.64, 1) 0.2s forwards;
}

/* Smooth fade-in animation for projects title */
@keyframes fadeInTitle {
    0% {
        opacity: 0;
        transform: translateY(50px) scale(0.95);
        filter: blur(10px);
    }

    60% {
        opacity: 1;
        filter: blur(0);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

.markaworks-text-white {
    color: #F4F5F5;
}

/* Projects page specific text colors - always visible */
.markaworks-projects-section .markaworks-text-white,
.markaworks-projects-title .markaworks-text-white {
    color: #053333 !important;
    opacity: 1 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline !important;
}

.markaworks-projects-section .markaworks-text-blue,
.markaworks-projects-title .markaworks-text-blue {
    color: #94CDD9 !important;
    opacity: 1 !important;
    display: inline !important;
}

.markaworks-projects-section .markaworks-text-green,
.markaworks-projects-title .markaworks-text-green {
    color: #B8D432 !important;
    opacity: 1 !important;
    display: inline !important;
}

.markaworks-projects-section .markaworks-text-purple,
.markaworks-projects-title .markaworks-text-purple {
    color: #BFB1D7 !important;
    opacity: 1 !important;
    display: inline !important;
}

.markaworks-text-blue {
    color: #94CDD9;
}

.markaworks-text-green {
    color: #B8D432;
}

.markaworks-text-purple {
    color: #BFB1D7;
}

/* Filter Buttons - Redesigned for many filters */
.markaworks-projects-filters {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    margin-bottom: 60px;
    flex-wrap: wrap;
    max-width: 1400px;
    margin-left: 0;
    margin-right: auto;
    padding: 0 20px;
    /* Animation handled by JavaScript for staggered effect */
}

.markaworks-filter-btn {
    height: 44px;
    padding: 10px 20px 10px 20px;
    /* Equal left and right padding */
    background: #F4F5F5;
    border: 2px solid transparent;
    border-radius: 100px;
    cursor: pointer;
    /* Transition and transform controlled by JavaScript for entrance animation */
    position: relative;
    overflow: hidden;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.4;
    color: #053333;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Center text in button */
    white-space: nowrap;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.markaworks-filter-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(5, 51, 51, 0.15);
    background: #053333;
    color: #B8D432;
    border: 2px solid #B8D432;
}

.markaworks-filter-btn.active {
    background: #B8D432;
    color: #053333;
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    font-weight: 600;
}

.markaworks-filter-btn.active:hover {
    background: #B8D432;
    transform: translateY(-4px);
    box-shadow: 0 8px 25px rgba(184, 212, 50, 0.4);
}

/* Projects Masonry Grid */

/* Grid-based layout for equal heights */
.markaworks-projects-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 60px;
    animation: fadeInUp 0.8s ease-out 0.4s both;
}



/* Ensure only masonry is visible on projects page (hide legacy rows if present) */
.markaworks-projects-section .markaworks-projects-row {
    display: none;
}

/* Project Cards */
.markaworks-project-card {
    background: transparent;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: none;
    position: relative;
    transform-origin: center;
    padding: 0;
    margin: 0;
}

.markaworks-project-link,
.markaworks-portfolio-link {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    width: 100% !important;
    flex: 1 1 auto !important;
    text-decoration: none !important;
    color: inherit !important;
    background: transparent !important;
}

.markaworks-project-link:focus-visible,
.markaworks-portfolio-link:focus-visible {
    outline: 2px solid #B8D432;
    outline-offset: 4px;
    border-radius: 16px;
}

/* Staggered Animation for Cards - Exact Portfolio Match */
.markaworks-project-card {
    opacity: 0;
    transform: translateY(60px);
    animation: markaworks-fade-in-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Projects page grid: instant batch reveal, no staggered fade */
.markaworks-projects-masonry > .markaworks-project-card {
    opacity: 1;
    transform: none;
    animation: none !important;
}

.markaworks-projects-masonry > .markaworks-project-card.markaworks-visible-project {
    opacity: 1;
    transform: none;
    animation: none !important;
}

.markaworks-project-card:nth-child(1) {
    animation-delay: 0.1s;
}

.markaworks-project-card:nth-child(2) {
    animation-delay: 0.2s;
}

.markaworks-project-card:nth-child(3) {
    animation-delay: 0.3s;
}

.markaworks-project-card:nth-child(4) {
    animation-delay: 0.4s;
}

.markaworks-project-card:nth-child(5) {
    animation-delay: 0.5s;
}

.markaworks-project-card:nth-child(6) {
    animation-delay: 0.6s;
}

/* JS-managed visibility — must win when entrance animation is disabled */
.markaworks-project-card.markaworks-visible-project:not(.markaworks-hidden-project) {
    opacity: 1;
    transform: translateY(0);
}

/* Portfolio detail pages — static related cards, not JS-rendered */
.related-projects-section .markaworks-project-card {
    opacity: 1;
    transform: none;
    animation: none;
}

.markaworks-project-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(5, 51, 51, 0.2),
        0 0 0 3px #B8D432;
    background: #053333;
    z-index: 10;
}


.markaworks-project-card.filtering-out {
    opacity: 0 !important;
    transform: translateY(40px) scale(0.95) !important;
    pointer-events: none !important;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

.markaworks-project-card.filtering-in {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    pointer-events: auto !important;
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}

/* Project Image Container */
.markaworks-project-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 0;
    background: rgba(5, 51, 51, 0.05);
}



.markaworks-project-image-container {
    height: 490px !important;
    /* Increased from 350px - more image space */
    overflow: hidden;
}

.markaworks-project-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    /* Cover the entire container */
}

.markaworks-cover-deferred {
    background: linear-gradient(135deg, rgba(5, 51, 51, 0.08), rgba(184, 212, 50, 0.06));
    min-height: 100%;
}

.markaworks-portfolio-image.markaworks-cover-deferred,
.markaworks-project-image.markaworks-cover-deferred {
    opacity: 0;
    transition: opacity 0.35s ease;
}

.markaworks-cover-deferred[data-cover-loaded="true"],
img.markaworks-cover-deferred:not([data-src]) {
    opacity: 1;
}

.markaworks-project-image-container img[src]:not(.markaworks-cover-deferred),
.markaworks-portfolio-image-container img[src]:not(.markaworks-cover-deferred) {
    opacity: 1;
}

/* Remove inner margins inside masonry to avoid extra empty space */
.markaworks-projects-masonry .markaworks-project-image-container {
    margin: 0;
}

/* Override any conflicting masonry styles */
.markaworks-projects-masonry .markaworks-project-card {
    min-height: 620px;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    break-inside: avoid;
    border-radius: 20px;
    overflow: hidden;
    margin: 0 0 24px;
    text-decoration: none;
    color: inherit;
}

.markaworks-projects-masonry .markaworks-portfolio-search-empty {
    border-color: rgba(5, 51, 51, 0.12);
    background: rgba(255, 255, 255, 0.58);
    color: #053333;
    box-shadow: 0 18px 40px rgba(5, 51, 51, 0.08);
}

.markaworks-projects-masonry .markaworks-portfolio-search-empty p {
    color: rgba(5, 51, 51, 0.68);
}

/* Hidden projects for load more functionality */
.markaworks-project-card.markaworks-hidden-project {
    display: none !important;
}

.markaworks-projects-section .markaworks-project-card {
    border: none;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

.markaworks-projects-section .markaworks-project-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(5, 51, 51, 0.2);
    background: #053333;
}

a.markaworks-project-card {
    text-decoration: none;
    color: inherit;
    display: block;
}

a.markaworks-project-card:visited {
    color: inherit;
}

a.markaworks-project-card:active {
    color: inherit;
}

.markaworks-projects-section .markaworks-project-image-container {
    margin: 0 !important;
}

.markaworks-project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1) saturate(1);
}

.markaworks-project-card:hover .markaworks-project-image {
    transform: scale(1.02);
    filter: brightness(1.02) contrast(1.05);
}

/* Project Overlay - Exact Portfolio Match */
.markaworks-project-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 51, 51, 0.85);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
}

.markaworks-project-card:hover .markaworks-project-overlay {
    opacity: 1;
}

.markaworks-project-overlay-content {
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.markaworks-project-card:hover .markaworks-project-overlay-content {
    transform: translateY(0);
}

.markaworks-project-card:hover .markaworks-project-overlay-text {
    transform: translateY(0) scale(1.05);
    background: #F4F5F5;
    color: #053333;
    border-color: #F4F5F5;
    box-shadow: 0 6px 20px rgba(244, 245, 245, 0.4);
}

.markaworks-project-overlay-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px 24px;
    background: #B8D432;
    border: 2px solid #B8D432;
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    transform: translateY(10px);
}

/* Project Content */
/* Portfolio Content - Exact Match */
.markaworks-project-content {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
    flex: 1;
}

.markaworks-project-title {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    transition: color 0.4s ease;
}

a.markaworks-project-card .markaworks-project-title {
    color: #053333;
}

a.markaworks-project-card:hover .markaworks-project-title,
.markaworks-project-card:hover .markaworks-project-title {
    color: #B8D432;
}

a.markaworks-project-card:visited .markaworks-project-title {
    color: #053333;
}

a.markaworks-project-card:visited:hover .markaworks-project-title {
    color: #B8D432;
}

/* Project Tags - Exact Portfolio Match */
.markaworks-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 4px;
    align-items: flex-start;
    justify-content: flex-start;
}

.markaworks-project-tag {
    padding: 6px 12px;
    border: 2px solid #053333;
    border-radius: 100px;
    color: #053333;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    text-transform: capitalize;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    text-align: center;
    line-height: 1.2;
}

a.markaworks-project-card .markaworks-project-tag {
    color: #053333;
    border-color: #053333;
}

a.markaworks-project-card:visited .markaworks-project-tag {
    color: #053333;
    border-color: #053333;
}

a.markaworks-project-card:hover .markaworks-project-tag,
.markaworks-project-card:hover .markaworks-project-tag {
    background: #B8D432;
    color: #053333;
    border-color: #B8D432;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
}

.markaworks-project-tag:hover {
    background: #053333;
    color: #B8D432;
    border-color: #053333;
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 6px 15px rgba(5, 51, 51, 0.4);
}

/* Load More Button - Filter animations */
.markaworks-filter-btn {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInButton 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.markaworks-filter-btn:nth-child(1) {
    animation-delay: 0.3s;
}

.markaworks-filter-btn:nth-child(2) {
    animation-delay: 0.35s;
}

.markaworks-filter-btn:nth-child(3) {
    animation-delay: 0.4s;
}

.markaworks-filter-btn:nth-child(4) {
    animation-delay: 0.45s;
}

.markaworks-filter-btn:nth-child(5) {
    animation-delay: 0.5s;
}

.markaworks-filter-btn:nth-child(6) {
    animation-delay: 0.55s;
}

.markaworks-filter-btn:nth-child(7) {
    animation-delay: 0.6s;
}

.markaworks-filter-btn:nth-child(8) {
    animation-delay: 0.65s;
}

.markaworks-filter-btn:nth-child(9) {
    animation-delay: 0.7s;
}

.markaworks-filter-btn:nth-child(10) {
    animation-delay: 0.75s;
}

.markaworks-filter-btn:nth-child(11) {
    animation-delay: 0.8s;
}

.markaworks-filter-btn:nth-child(12) {
    animation-delay: 0.85s;
}

.markaworks-filter-btn:nth-child(13) {
    animation-delay: 0.9s;
}

.markaworks-filter-btn:nth-child(14) {
    animation-delay: 0.95s;
}

.markaworks-filter-btn:nth-child(15) {
    animation-delay: 1.0s;
}

.markaworks-filter-btn:nth-child(16) {
    animation-delay: 1.05s;
}

.markaworks-filter-btn:nth-child(17) {
    animation-delay: 1.1s;
}

.markaworks-filter-btn:nth-child(18) {
    animation-delay: 1.15s;
}

@keyframes fadeInButton {
    0% {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }

    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Ensure buttons are visible after animation */
.markaworks-filter-btn:nth-child(n) {
    animation-fill-mode: forwards;
}

.markaworks-load-more-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 40px;
    background: #B8D432;
    color: #053333;
    border: none;
    border-radius: 100px;
    font-size: 18px;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    transform: translateY(0);
    box-shadow: 0 6px 25px rgba(184, 212, 50, 0.3);
}

.markaworks-load-more-btn:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 35px rgba(184, 212, 50, 0.4);
    background: #94CDD9;
}

.markaworks-load-more-icon {
    transition: transform 0.3s ease;
}

/* =============================================
   LOAD MORE SYSTEM
   ============================================= */

.markaworks-loadmore-container {
    width: 100%;
    max-width: 1400px;
    margin: 60px auto 0;
    padding: 0 20px;
    display: flex !important;
    flex-direction: column;
    gap: 30px;
    align-items: center;
    visibility: visible !important;
    opacity: 1 !important;
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active {
    position: relative;
    padding-bottom: 28px;
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active .markaworks-loadmore-btn {
    display: none !important;
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active::after {
    content: 'Scroll to load more projects';
    color: rgba(5, 51, 51, 0.68);
    font-size: 14px;
    font-weight: 500;
    font-family: 'Inter Tight', sans-serif;
    letter-spacing: 0.02em;
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active[data-scroll-state="loading"]::after {
    content: 'Loading more projects...';
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active[data-scroll-state="complete"]::after {
    content: 'You have reached the end of the projects';
}

.markaworks-loadmore-container.markaworks-infinite-scroll-active[data-scroll-state="empty"]::after {
    content: 'No matching projects to load';
}

/* Projects Info */
.markaworks-projects-info {
    width: 100%;
    text-align: center;
    color: #053333;
    font-size: 16px;
    font-weight: 500;
    font-family: 'Inter Tight', sans-serif;
    opacity: 0.8;
}

.markaworks-projects-info strong {
    color: #B8D432;
    font-weight: 700;
}

/* Load More Button - Clean & Minimal Design */
.markaworks-loadmore-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 36px;
    background: transparent;
    color: #053333;
    border: 2px solid #053333;
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(5, 51, 51, 0.1);
}

.markaworks-loadmore-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #053333;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.markaworks-loadmore-btn:hover::before {
    transform: scaleX(1);
}

.markaworks-loadmore-btn:hover {
    color: #F5F2E8;
    border-color: #053333;
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(5, 51, 51, 0.2);
}

.markaworks-loadmore-text {
    position: relative;
    z-index: 1;
}

.markaworks-loadmore-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.markaworks-loadmore-btn:hover svg {
    transform: translateY(3px);
    animation: bounce-arrow 0.6s ease infinite;
}

@keyframes bounce-arrow {

    0%,
    100% {
        transform: translateY(3px);
    }

    50% {
        transform: translateY(6px);
    }
}

.markaworks-loadmore-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    border-color: #999;
    color: #999;
}

.markaworks-loadmore-btn:disabled:hover {
    transform: none;
    color: #999;
    box-shadow: 0 2px 8px rgba(5, 51, 51, 0.1);
}

.markaworks-loadmore-btn:disabled::before {
    transform: scaleX(0);
}

.markaworks-loadmore-btn:disabled svg {
    animation: none;
}

/* Responsive Load More */
@media (max-width: 768px) {
    .markaworks-loadmore-container {
        gap: 20px;
        margin: 50px auto 0;
    }

    .markaworks-loadmore-container.markaworks-infinite-scroll-active::after {
        font-size: 13px;
    }

    .markaworks-loadmore-btn {
        padding: 12px 28px;
        font-size: 14px;
    }

    .markaworks-loadmore-btn svg {
        width: 18px;
        height: 18px;
    }

    .markaworks-projects-info {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .markaworks-loadmore-container {
        margin: 40px auto 0;
    }

    .markaworks-loadmore-container.markaworks-infinite-scroll-active::after {
        font-size: 12px;
    }

    .markaworks-loadmore-btn {
        padding: 11px 24px;
        font-size: 13px;
    }

    .markaworks-projects-info {
        font-size: 13px;
    }
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes projectCardFadeIn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== RESPONSIVE DESIGN FOR PROJECTS ===== */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .markaworks-projects-container {
        max-width: 1600px;
        padding: 0 60px;
    }

    .markaworks-projects-title {
        font-size: 84px;
    }
}

/* Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
    .markaworks-projects-container {
        max-width: 1600px;
        padding: 0 40px;
    }

    .markaworks-projects-title {
        font-size: 64px;
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-projects-section {
        padding: 60px 0 100px 0;
        margin: 0;
    }

    .markaworks-projects-container {
        padding: 0 30px;
    }

    .markaworks-projects-title {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .markaworks-projects-filters {
        margin-bottom: 50px;
        gap: 8px;
        padding: 0 30px;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .markaworks-projects-container>.markaworks-project-search-bar {
        margin-left: 30px;
        width: calc(100% - 60px);
        max-width: 1400px;
        margin-right: auto;
    }

    .markaworks-filter-btn {
        height: 40px;
        font-size: 14px;
        padding: 8px 18px;
    }

    /* Grid: 2 columns on tablet */
    .markaworks-projects-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .markaworks-project-card {
        min-height: 470px !important;
        height: auto !important;
    }

    .markaworks-project-image-container {
        height: 350px !important;
        flex-shrink: 0;
    }

    .markaworks-project-content {
        min-height: 120px !important;
        height: auto !important;
        padding: 16px 16px 20px;
    }

    .markaworks-project-title {
        font-size: 24px;
    }

    .markaworks-project-tag {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .markaworks-projects-section {
        padding: 50px 0 80px 0;
        margin: 0;
    }

    .markaworks-projects-container {
        padding: 0 20px;
    }

    .markaworks-projects-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 40px;
    }

    .markaworks-projects-filters {
        margin-bottom: 40px;
        gap: 8px;
        padding: 0 16px;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .markaworks-projects-container>.markaworks-project-search-bar {
        margin-left: 16px;
        width: calc(100% - 32px);
        max-width: 100%;
        margin-right: auto;
    }

    .markaworks-filter-btn {
        height: 36px;
        font-size: 12px;
        padding: 8px 14px;
    }

    .markaworks-projects-grid {
        gap: 32px;
    }

    /* Grid: 1 column on mobile */
    .markaworks-projects-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .markaworks-project-card {
        min-height: 450px !important;
        height: auto !important;
    }

    .markaworks-project-image-container {
        height: 330px !important;
        flex-shrink: 0;
    }

    .markaworks-project-content {
        min-height: 120px !important;
        height: auto !important;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .markaworks-project-image-container {
        height: 280px;
        margin: 0;
    }

    .markaworks-project-title {
        font-size: 24px;
        line-height: 1.3;
    }

    .markaworks-project-content {
        padding: 16px 16px 20px;
    }

    .markaworks-project-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .markaworks-project-tag {
        font-size: 11px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }

    .markaworks-projects-load-more {
        margin-top: 60px;
    }

    .markaworks-load-more-btn {
        padding: 16px 32px;
        font-size: 16px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .markaworks-projects-section {
        padding: 40px 0 70px 0;
        margin: 0;
    }

    .markaworks-projects-container {
        padding: 0 16px;
    }

    .markaworks-projects-title {
        font-size: 24px;
        margin-bottom: 32px;
    }

    .markaworks-project-search {
        min-height: 48px;
    }

    .markaworks-project-search-toggle {
        width: 48px;
        height: 48px;
    }

    .markaworks-project-search-field,
    .markaworks-project-search.is-expanded .markaworks-project-search-field {
        width: calc(100% - 48px);
    }

    .markaworks-project-search-bar {
        min-height: 52px;
        margin-bottom: 24px;
        border-radius: 18px;
    }

    .markaworks-project-search-bar .markaworks-project-search-toggle {
        width: 52px;
        height: 52px;
    }

    .markaworks-project-search-bar .markaworks-project-search-field,
    .markaworks-project-search-bar.is-expanded .markaworks-project-search-field {
        width: calc(100% - 52px);
    }

    .markaworks-projects-filters {
        margin-bottom: 28px;
        gap: 6px;
        padding: 0 16px;
        justify-content: center;
        flex-wrap: wrap;
        max-width: 100%;
        width: 100%;
        box-sizing: border-box;
    }

    .markaworks-filter-btn {
        height: 32px;
        font-size: 11px;
        padding: 6px 12px;
    }

    .markaworks-projects-masonry {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .markaworks-project-card {
        min-height: 400px !important;
        height: auto !important;
    }

    .markaworks-project-image-container {
        height: 280px !important;
        flex-shrink: 0;
    }

    .markaworks-project-content {
        min-height: 120px !important;
        height: auto !important;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .markaworks-project-title {
        font-size: 20px;
        line-height: 1.3;
    }

    .markaworks-project-tags {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        width: 100% !important;
        overflow: visible !important;
    }

    .markaworks-project-tag {
        font-size: 10px !important;
        padding: 4px 10px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        line-height: 1.2 !important;
    }

    .markaworks-loadmore-btn {
        padding: 14px 32px;
        font-size: 14px;
    }

    /* Dark page wrapper - projects page uses beige background */
    .markaworks-dark-page {
        background: #EAE5E3 !important;
        color: #053333;
        min-height: 100vh;
    }

    /* Projects page specific background - beige for entire page */
    body.markaworks-dark-page {
        background: #EAE5E3 !important;
    }

    /* Projects section background */
    .markaworks-projects-section {
        background: #EAE5E3 !important;
    }

    /* Testimonials section on projects page should also be beige with custom padding */
    .markaworks-dark-page .markaworks-testimonials {
        background: #EAE5E3 !important;
    }

    .markaworks-dark-page .markaworks-testimonials.markaworks-animate-in {
        min-height: clamp(800px, 120vh, 1200px) !important;
        padding-bottom: clamp(120px, 15vw, 240px) !important;
    }

    /* Spacer after testimonials to separate from footer (robust even if margins/padding are overridden) */
    .markaworks-dark-page .markaworks-testimonials.markaworks-animate-in::after {
        content: "";
        display: block;
        height: clamp(120px, 15vw, 240px);
    }

    @media (max-width: 768px) {
        .markaworks-dark-page .markaworks-testimonials.markaworks-animate-in {
            min-height: clamp(700px, 100vh, 1000px) !important;
            padding-bottom: clamp(80px, 15vw, 160px) !important;
        }
    }

    @media (max-width: 480px) {
        .markaworks-dark-page .markaworks-testimonials.markaworks-animate-in {
            min-height: clamp(600px, 90vh, 800px) !important;
            padding-bottom: clamp(60px, 18vw, 120px) !important;
        }
    }

    /* Ensure all projects page sections use beige background */
    .markaworks-dark-page .markaworks-projects-section,
    .markaworks-dark-page .markaworks-projects-container,
    .markaworks-dark-page .markaworks-projects-header {
        background: #EAE5E3 !important;
    }

    /* Footer on projects page - no margin, use padding only */
    body.markaworks-dark-page .markaworks-footer {
        margin-top: 0 !important;
        padding-top: clamp(120px, 15vw, 240px) !important;
    }

    body.markaworks-dark-page footer.markaworks-footer {
        margin-top: 0 !important;
    }

    @media (max-width: 768px) {
        body.markaworks-dark-page .markaworks-footer {
            margin-top: 0 !important;
            padding-top: clamp(80px, 15vw, 160px) !important;
        }
    }

    @media (max-width: 480px) {
        body.markaworks-dark-page .markaworks-footer {
            margin-top: 0 !important;
            padding-top: clamp(60px, 18vw, 120px) !important;
        }
    }

    .markaworks-project-image-container {
        height: 240px;
        margin: 12px;
    }

    .markaworks-project-title {
        font-size: 20px;
    }

    .markaworks-project-content {
        padding: 0 12px 12px;
    }

    .markaworks-project-tag {
        font-size: 12px;
        padding: 3px 8px;
    }

    .markaworks-load-more-btn {
        padding: 14px 28px;
        font-size: 14px;
    }
}

/* Ultra Small (≤320px) */
@media (max-width: 320px) {
    .markaworks-projects-title {
        font-size: 24px;
    }

    .markaworks-filter-btn {
        height: 40px;
        font-size: 12px;
        padding: 8px 12px;
        min-width: 60px;
    }

    .markaworks-project-image-container {
        height: 200px;
        margin: 10px;
    }

    .markaworks-project-title {
        font-size: 18px;
    }
}

/* Ripple Animation for Buttons */
@keyframes ripple {
    to {
        transform: scale(4);
        opacity: 0;
    }
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }

    to {
        transform: rotate(360deg);
    }
}

/* ===== PROJECTS CUSTOM CURSOR STYLES ===== */

/* Projects View Button - Matching Portfolio Style */
.markaworks-projects-section .markaworks-view-button {
    position: fixed;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    background: rgba(244, 245, 245, 0.95);
    border: 2px solid #B8D432;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999999;
    pointer-events: none;
    opacity: 0;
    user-select: none;
    transform: translate(-50%, -50%);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(10px);
    box-shadow:
        0 8px 32px rgba(5, 51, 51, 0.15),
        0 4px 16px rgba(184, 212, 50, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.markaworks-projects-section .markaworks-view-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #053333;
    text-transform: lowercase;
    letter-spacing: 0.5px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
}

.markaworks-projects-section .markaworks-view-ring {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 180px;
    height: 180px;
    border: 3px solid transparent;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}

.markaworks-projects-section .markaworks-view-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(5, 51, 51, 0.2);
}

.markaworks-projects-section .markaworks-view-button:hover .markaworks-view-ring {
    opacity: 1;
    transform: scale(1);
    border-color: #053333;
    animation: markaworks-ring-pulse 2s ease-in-out infinite;
}

.markaworks-projects-section .markaworks-view-button:hover .markaworks-view-dot {
    transform: translate(-50%, -50%) scale(0);
    animation: none;
    opacity: 0;
}

/* Active State for Projects */
.markaworks-projects-section .markaworks-view-button.markaworks-cursor-active {
    opacity: 1;
    pointer-events: none;
}

.markaworks-projects-section .markaworks-view-button.markaworks-cursor-active .markaworks-view-ring {
    opacity: 0.8;
    transform: scale(1);
    border-color: #B8D432;
}

/* Click Animation for Projects */
.markaworks-projects-section .markaworks-view-button.markaworks-click-effect {
    transform: translate(-50%, -50%) scale(0.9);
}

.markaworks-projects-section .markaworks-view-button.markaworks-click-effect .markaworks-view-text {
    transform: scale(0.95);
}

.markaworks-projects-section .markaworks-view-button.markaworks-click-effect .markaworks-view-ring {
    transform: scale(1.2);
    opacity: 0.3;
}

.markaworks-projects-section .markaworks-view-button.markaworks-click-effect .markaworks-view-dot {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 40px rgba(184, 212, 50, 1);
}

/* Ring Pulse Animation */
@keyframes markaworks-ring-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.8;
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
        opacity: 1;
    }
}

/* Dot Pulse Animation */
@keyframes markaworks-dot-pulse {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 20px rgba(191, 177, 215, 0.6);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.2);
        box-shadow: 0 0 30px rgba(191, 177, 215, 0.8);
    }
}

/* Project Ripple Animation */
@keyframes projectRipple {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 1;
    }

    100% {
        transform: translate(-50%, -50%) scale(2);
        opacity: 0;
    }
}

/* Responsive Sizes for Projects Cursor */
@media (max-width: 1024px) {
    .markaworks-projects-section .markaworks-view-button {
        width: 120px;
        height: 120px;
    }

    .markaworks-projects-section .markaworks-view-ring {
        width: 160px;
        height: 160px;
    }

    .markaworks-projects-section .markaworks-view-text {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .markaworks-projects-section .markaworks-view-button {
        width: 100px;
        height: 100px;
    }

    .markaworks-projects-section .markaworks-view-ring {
        width: 140px;
        height: 140px;
    }

    .markaworks-projects-section .markaworks-view-text {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .markaworks-projects-section .markaworks-view-button {
        width: 80px;
        height: 80px;
    }

    .markaworks-projects-section .markaworks-view-ring {
        width: 120px;
        height: 120px;
    }

    .markaworks-projects-section .markaworks-view-text {
        font-size: 12px;
    }
}

@media (max-width: 320px) {
    .markaworks-projects-section .markaworks-view-button {
        width: 70px;
        height: 70px;
    }

    .markaworks-projects-section .markaworks-view-ring {
        width: 100px;
        height: 100px;
    }
}

/* Reduced Motion Support — projects page grid */
@media (prefers-reduced-motion: reduce) {

    .markaworks-project-card,
    .markaworks-filter-btn,
    .markaworks-load-more-btn,
    .markaworks-project-image:not(.markaworks-frame-cycle__frame),
    .markaworks-project-overlay,
    .markaworks-project-overlay-content,
    .markaworks-project-overlay-icon,
    .markaworks-load-more-icon {
        transition: none;
        animation: none;
    }

    .markaworks-projects-masonry .markaworks-project-card:not(.markaworks-hidden-project),
    .markaworks-project-card.markaworks-visible-project:not(.markaworks-hidden-project) {
        opacity: 1 !important;
        transform: none !important;
        filter: none !important;
    }

    .markaworks-project-card:hover,
    .markaworks-projects-section .markaworks-project-card:hover {
        opacity: 1 !important;
        transform: translateY(-8px) !important;
        background: #053333;
        box-shadow:
            0 20px 40px rgba(5, 51, 51, 0.2),
            0 0 0 3px #B8D432;
        z-index: 10;
    }

    .markaworks-project-card:hover .markaworks-project-overlay {
        opacity: 1;
    }

    .markaworks-project-card:hover .markaworks-project-overlay-content {
        transform: translateY(0);
    }

    .markaworks-project-card:hover .markaworks-project-overlay-text {
        transform: translateY(0) scale(1);
    }

    .markaworks-project-card:hover .markaworks-project-image {
        transform: scale(1.02);
    }

    .markaworks-filter-btn {
        opacity: 1 !important;
        transform: none !important;
    }

    .related-projects-section .markaworks-project-card,
    .related-projects-section .markaworks-project-card:hover {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        filter: none !important;
    }

    .related-projects-section .markaworks-project-card:hover {
        transform: translateY(-8px) !important;
        background: #053333;
        box-shadow:
            0 20px 40px rgba(5, 51, 51, 0.2),
            0 0 0 3px #B8D432;
        z-index: 10;
    }

    .related-projects-section .markaworks-project-card:hover .markaworks-project-title {
        color: #B8D432;
    }

    .related-projects-section .markaworks-project-card:hover .markaworks-project-tag {
        background: #B8D432;
        color: #053333;
        border-color: #B8D432;
    }

    .related-projects-section .markaworks-project-image:not(.markaworks-frame-cycle__frame) {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .markaworks-projects-title,
    .markaworks-projects-filters,
    .markaworks-projects-grid,
    .markaworks-projects-load-more,
    .markaworks-loadmore-container {
        animation: none;
        opacity: 1;
        transform: none;
    }
}

/* ===== BLOGS SECTION STYLES ===== */

/* Blogs Section Container */
.markaworks-blogs-section {
    padding: 80px 0 120px 0;
    background: #EAE5E3;
    position: relative;
    overflow: hidden;
    margin: 0;
}

.markaworks-blogs-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 40px;
}

/* Blogs Header */
.markaworks-blogs-header {
    text-align: left;
    margin-bottom: 80px;
    position: relative;
    animation: fadeInUp 0.8s ease-out;
    opacity: 1;
    z-index: 2;
}

.markaworks-blogs-title {
    max-width: 1100px;
    margin: 0 auto 0;
    line-height: 1.1;
    position: relative;
    z-index: 2;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    color: #053333;
}

/* Blogs page specific text colors */
.markaworks-blogs-section .markaworks-text-white,
.markaworks-blogs-title .markaworks-text-white {
    color: #053333 !important;
    opacity: 1 !important;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline !important;
}

.markaworks-blogs-section .markaworks-text-blue,
.markaworks-blogs-title .markaworks-text-blue {
    color: #94CDD9 !important;
    opacity: 1 !important;
    display: inline !important;
}

.markaworks-blogs-section .markaworks-text-green,
.markaworks-blogs-title .markaworks-text-green {
    color: #B8D432 !important;
    opacity: 1 !important;
    display: inline !important;
}

.markaworks-blogs-section .markaworks-text-purple,
.markaworks-blogs-title .markaworks-text-purple {
    color: #BFB1D7 !important;
    opacity: 1 !important;
    display: inline !important;
}

/* Filter Buttons */
.markaworks-blogs-filters {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 80px;
    flex-wrap: wrap;
    animation: fadeInUp 0.8s ease-out 0.2s;
    opacity: 1;
}

/* Blogs Masonry Grid */
.markaworks-blogs-masonry {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 60px;
    animation: fadeInUp 0.8s ease-out 0.4s;
    opacity: 1;
}

/* Blog Cards - Matching Project Cards Exactly */
.markaworks-blog-card {
    background: transparent;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: none;
    position: relative;
    transform-origin: center;
    padding: 0;
    margin: 0;
    display: flex !important;
    flex-direction: column !important;
    min-height: 620px;
    height: auto !important;
    width: 100%;
    text-decoration: none;
    color: inherit;
}

.markaworks-blog-card:hover {
    transform: translateY(-8px);
    box-shadow:
        0 20px 40px rgba(5, 51, 51, 0.2),
        0 0 0 3px #B8D432;
    background: #053333;
    z-index: 10;
}

/* Blog Image Container - Matching Project */
.markaworks-blog-image-container {
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    margin: 0;
    background: rgba(5, 51, 51, 0.05);
    height: 490px !important;
}

.markaworks-blog-image {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    filter: brightness(1) saturate(1);
}

.markaworks-blog-card:hover .markaworks-blog-image {
    transform: scale(1.02);
    filter: brightness(1.02) contrast(1.05);
}

/* Blog Overlay - Same as Project Overlay */
.markaworks-blog-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(5, 51, 51, 0.85);
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
    padding: 30px;
}

.markaworks-blog-card:hover .markaworks-blog-overlay {
    opacity: 1;
}

.markaworks-blog-overlay-content {
    transform: translateY(20px);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s;
}

.markaworks-blog-card:hover .markaworks-blog-overlay-content {
    transform: translateY(0);
}

.markaworks-blog-overlay-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    padding: 12px 24px;
    background: #B8D432;
    border: 2px solid #B8D432;
    border-radius: 100px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    transform: translateY(10px);
}

.markaworks-blog-card:hover .markaworks-blog-overlay-text {
    transform: translateY(0) scale(1.05);
    background: #F4F5F5;
    color: #053333;
    border-color: #F4F5F5;
    box-shadow: 0 6px 20px rgba(244, 245, 245, 0.4);
}

/* Blog Content - Matching Project Content */
.markaworks-blog-content {
    padding: 24px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 120px;
    flex: 1;
}

.markaworks-blog-title {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    transition: color 0.4s ease;
}

.markaworks-blog-card:hover .markaworks-blog-title {
    color: #B8D432;
}

/* Blog Tags - Matching Project Tags */
.markaworks-blog-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 4px;
    align-items: flex-start;
    justify-content: flex-start;
}

.markaworks-blog-tags:empty {
    display: none;
}

.markaworks-blog-category,
.markaworks-blog-tag {
    padding: 6px 12px;
    border: 2px solid #053333;
    border-radius: 100px;
    color: #053333;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: 'Inter Tight', sans-serif;
    text-transform: lowercase;
    white-space: nowrap;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
    text-align: center;
    line-height: 1.2;
}

.markaworks-blog-card:hover .markaworks-blog-category,
.markaworks-blog-card:hover .markaworks-blog-tag {
    background: #B8D432;
    color: #053333;
    border-color: #B8D432;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
}

/* Blog CTA Button - Shows by default */
.markaworks-blog-cta {
    margin-top: auto;
    padding-top: 12px;
}

.markaworks-blog-read-btn {
    display: inline-block;
    padding: 12px 24px;
    background: #B8D432;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 600;
    border-radius: 100px;
    border: 2px solid #B8D432;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.3);
    cursor: pointer;
}

.markaworks-blog-card:hover .markaworks-blog-read-btn {
    background: #F4F5F5;
    color: #053333;
    border-color: #F4F5F5;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(244, 245, 245, 0.4);
}

/* Blog Meta */
.markaworks-blog-meta {
    display: flex;
    align-items: center;
    gap: 16px;
    font-size: 13px;
    color: #053333;
    opacity: 0.6;
    margin-top: 8px;
    font-family: 'Inter Tight', sans-serif;
    transition: all 0.3s ease;
}

.markaworks-blog-card:hover .markaworks-blog-meta {
    opacity: 0.8;
    color: #B8D432;
}

.markaworks-blog-date,
.markaworks-blog-reading-time {
    display: flex;
    align-items: center;
    gap: 6px;
}

.markaworks-blog-date svg,
.markaworks-blog-reading-time svg {
    opacity: 0.7;
}

/* Loading State */
.markaworks-blogs-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 80px 20px;
    gap: 20px;
}

.markaworks-spinner {
    width: 50px;
    height: 50px;
    border: 4px solid rgba(5, 51, 51, 0.1);
    border-top-color: #B8D432;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

.markaworks-blogs-loading p {
    color: #053333;
    font-size: 18px;
    font-weight: 500;
}

/* Blogs Info */
.markaworks-blogs-info {
    width: 100%;
    text-align: center;
    color: #053333;
    font-size: 16px;
    margin-bottom: 24px;
    font-weight: 500;
    opacity: 0.8;
}

.markaworks-blogs-info strong {
    color: #B8D432;
    font-weight: 700;
}

/* Hidden Blog Cards */
.markaworks-hidden-blog {
    display: none !important;
}

/* Blogs Custom Cursor - Use Same as Projects
   (also when JS moves #blogsFloatingBtn onto <body>) */
.markaworks-blogs-section .markaworks-view-button,
#blogsFloatingBtn.markaworks-blogs-cursor,
#blogsFloatingBtn {
    position: fixed;
    top: 0;
    left: 0;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: #053333;
    border: 2px solid #F4F5F5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 999999;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, -50%);
    transition: opacity 0.2s ease, transform 0.25s ease, visibility 0.2s;
    box-shadow: 0 10px 40px rgba(5, 51, 51, 0.3),
        0 0 0 1px rgba(184, 212, 50, 0.2);
}

.markaworks-blogs-section .markaworks-view-text,
#blogsFloatingBtn .markaworks-view-text {
    color: #B8D432;
    font-size: 18px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.markaworks-blogs-section .markaworks-view-ring,
#blogsFloatingBtn .markaworks-view-ring {
    position: absolute;
    top: -20px;
    left: -20px;
    width: 180px;
    height: 180px;
    border: 3px solid transparent;
    border-radius: 50%;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 2;
}

.markaworks-blogs-section .markaworks-view-dot,
#blogsFloatingBtn .markaworks-view-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 8px;
    height: 8px;
    background: transparent;
    border-radius: 50%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: 3;
    text-shadow: 0 2px 8px rgba(5, 51, 51, 0.2);
}

/* Active State for Blogs - only when JS adds this class on card hover */
.markaworks-blogs-section .markaworks-view-button.markaworks-cursor-active,
#blogsFloatingBtn.markaworks-cursor-active {
    opacity: 1;
    visibility: visible;
    pointer-events: none;
}

.markaworks-blogs-section .markaworks-view-button.markaworks-cursor-active .markaworks-view-ring,
#blogsFloatingBtn.markaworks-cursor-active .markaworks-view-ring {
    opacity: 0.8;
    transform: scale(1);
    border-color: #B8D432;
}

/* Click Animation for Blogs - Same as Projects */
.markaworks-blogs-section .markaworks-view-button.markaworks-click-effect,
#blogsFloatingBtn.markaworks-click-effect {
    transform: translate(-50%, -50%) scale(0.9);
}

.markaworks-blogs-section .markaworks-view-button.markaworks-click-effect .markaworks-view-text,
#blogsFloatingBtn.markaworks-click-effect .markaworks-view-text {
    transform: scale(0.95);
}

.markaworks-blogs-section .markaworks-view-button.markaworks-click-effect .markaworks-view-ring,
#blogsFloatingBtn.markaworks-click-effect .markaworks-view-ring {
    transform: scale(1.2);
    opacity: 0.3;
}

.markaworks-blogs-section .markaworks-view-button.markaworks-click-effect .markaworks-view-dot {
    transform: translate(-50%, -50%) scale(1.5);
    box-shadow: 0 0 40px rgba(184, 212, 50, 1);
}

/* Responsive Styles for Blogs */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .markaworks-blogs-container {
        max-width: 1600px;
        padding: 0 60px;
    }

    .markaworks-blogs-title {
        font-size: 84px;
    }
}

/* Desktop (1024px - 1199px) */
@media (max-width: 1199px) {
    .markaworks-blogs-container {
        max-width: 1600px;
        padding: 0 40px;
    }

    .markaworks-blogs-title {
        font-size: 64px;
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-blogs-section {
        padding: 60px 0 100px 0;
        margin: 0;
    }

    .markaworks-blogs-container {
        padding: 0 30px;
    }

    .markaworks-blogs-title {
        font-size: 48px;
        margin-bottom: 60px;
    }

    .markaworks-blogs-filters {
        margin-bottom: 60px;
        gap: 8px;
    }

    .markaworks-blogs-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .markaworks-blog-card {
        min-height: 480px;
    }

    .markaworks-blogs-section .markaworks-view-button {
        width: 120px;
        height: 120px;
    }

    .markaworks-blogs-section .markaworks-view-ring {
        width: 160px;
        height: 160px;
    }
}

/* Mobile Large (481px - 768px) */
@media (max-width: 768px) {
    .markaworks-blogs-section {
        padding: 50px 0 80px 0;
        margin: 0;
    }

    .markaworks-blogs-container {
        padding: 0 20px;
    }

    .markaworks-blogs-title {
        font-size: 36px;
        line-height: 1.2;
        margin-bottom: 40px;
    }

    .markaworks-blogs-filters {
        margin-bottom: 40px;
        gap: 6px;
    }

    .markaworks-blogs-masonry {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }

    .markaworks-blog-card {
        min-height: 420px;
    }

    .markaworks-blog-image-container {
        height: 200px;
    }

    .markaworks-blog-title {
        font-size: 20px;
    }

    .markaworks-blog-excerpt {
        font-size: 14px;
    }

    .markaworks-blogs-section .markaworks-view-button {
        width: 100px;
        height: 100px;
    }

    .markaworks-blogs-section .markaworks-view-ring {
        width: 140px;
        height: 140px;
    }
}

/* Mobile Small (320px - 480px) */
@media (max-width: 480px) {
    .markaworks-blogs-section {
        padding: 40px 0 60px 0;
    }

    .markaworks-blogs-title {
        font-size: 28px;
    }

    .markaworks-blogs-masonry {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .markaworks-blog-card {
        min-height: 400px;
    }

    .markaworks-blogs-section .markaworks-view-button {
        width: 80px;
        height: 80px;
    }

    .markaworks-blogs-section .markaworks-view-text {
        font-size: 14px;
    }

    .markaworks-blogs-section .markaworks-view-ring {
        width: 120px;
        height: 120px;
    }
}

@media (max-width: 320px) {
    .markaworks-blogs-section .markaworks-view-button {
        width: 70px;
        height: 70px;
    }

    .markaworks-blogs-section .markaworks-view-ring {
        width: 100px;
        height: 100px;
    }

    .markaworks-blogs-section .markaworks-view-text {
        font-size: 12px;
    }
}

/* Hide custom floating cursor on mobile */
@media (max-width: 768px) {
    #blogsFloatingBtn {
        display: none !important;
    }
}

/* Reduced Motion Support for Blogs */
@media (prefers-reduced-motion: reduce) {

    .markaworks-blog-card,
    .markaworks-blog-image,
    .markaworks-spinner {
        transition: none;
        animation: none;
    }
}

/* ========================================
   SERVICES PAGE SECTIONS
   ======================================== */

/* Services Intro Section */
.markaworks-services-intro {
    background: #EAE5E3;
    /* match second section */
    padding: 120px 40px 40px;
    position: relative;
    margin: 0;
    margin-top: 0;
}

.markaworks-services-intro-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.markaworks-services-header {
    width: 100%;
    animation: fadeInUp 0.8s ease-out;
    opacity: 1;
}

.markaworks-services-main-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.markaworks-text-dark {
    color: #053333;
}

.markaworks-text-green {
    color: #B8D432;
}

.markaworks-services-description {
    display: flex;
    justify-content: flex-end;
    animation: fadeInUp 0.8s ease-out 0.2s;
    opacity: 1;
}

.markaworks-services-description p {
    max-width: 1015px;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Services Gallery Wrapper with Navigation */
.markaworks-services-gallery-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 0;
}

/* Services Gallery Navigation Buttons */
.markaworks-services-nav-left,
.markaworks-services-nav-right {
    z-index: 200;
    pointer-events: auto;
}

.markaworks-services-nav-left {
    left: 20px;
}

.markaworks-services-nav-left:hover svg {
    transform: translateX(-2px);
}

.markaworks-services-nav-right {
    right: 20px;
}

.markaworks-services-nav-right:hover svg {
    transform: translateX(2px);
}

/* Services Gallery - Infinite Loop */
.markaworks-services-gallery {
    position: relative;
    width: 100%;
    overflow: visible;
    cursor: none;
    padding: 40px 0 60px 0;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: clamp(400px, 30vh, 500px);
    max-height: 600px;
    /* Keep services page background color with mask fade */
    mask: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
    -webkit-mask: linear-gradient(90deg,
            transparent 0%,
            black 8%,
            black 92%,
            transparent 100%);
}

.markaworks-services-gallery-track {
    display: flex;
    gap: 30px;
    animation: markaworks-services-scroll var(--services-scroll-duration, 40s) linear infinite;
    will-change: transform;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
}

/* Keep animation running on hover - edge acceleration handled by JS */
.markaworks-services-gallery:hover .markaworks-services-gallery-track {
    animation-play-state: running;
}

/* Infinite Scroll animation for services */
@keyframes markaworks-services-scroll {
    0% {
        transform: translateY(-50%) translateX(0);
    }

    100% {
        transform: translateY(-50%) translateX(calc(-100% - 30px));
    }
}

/* Generic reveal animations (used via JS) */
.mw-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 600ms cubic-bezier(0.4, 0, 0.2, 1),
        transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: opacity, transform;
}

.mw-reveal.in-view {
    opacity: 1;
    transform: none;
}

.markaworks-services-gallery-item {
    width: 325px !important;
    height: 400px !important;
    border-radius: 20px;
    /* overflow: hidden !important; */ overflow: auto !important;
    position: relative;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    opacity: 1;
    cursor: none;
    flex-shrink: 0;
    display: block !important;
    text-decoration: none;
    color: inherit;
    padding: 0 !important;
    margin: 0;
    box-sizing: border-box !important;
}

a.markaworks-services-gallery-item {
    text-decoration: none;
    color: inherit;
}

a.markaworks-services-gallery-item:visited,
a.markaworks-services-gallery-item:active {
    color: inherit;
    text-decoration: none;
}

/* Solid border effect on hover */
.markaworks-services-gallery-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 20px;
    border: 3px solid #B8D432;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 1;
    pointer-events: none;
}

.markaworks-services-gallery-item:hover::before {
    opacity: 1;
    border-color: #B8D432;
}

.markaworks-services-gallery-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: none;
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 100% !important;
    min-height: 100% !important;
}

.markaworks-services-gallery-item:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow:
        0 15px 30px rgba(0, 0, 0, 0.25),
        0 0 20px rgba(184, 212, 50, 0.15);
    z-index: 10;
}

.markaworks-services-gallery-item:hover img {
    transform: scale(1.02);
    filter: brightness(1.1) contrast(1.05);
}

/* Enhanced hover effect for infinite scroll */
.markaworks-services-gallery-track:hover .markaworks-services-gallery-item:not(:hover) {
    opacity: 0.7;
    transform: scale(0.98);
}

/* Services View Button - Custom Cursor */
.markaworks-services-view-button {
    position: fixed;
    width: 160px;
    height: 160px;
    background: #F4F5F5;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 1000;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 10px 30px rgba(5, 51, 51, 0.2);
}

.markaworks-services-view-button.active {
    opacity: 1;
    transform: scale(1);
}

.markaworks-services-view-button.hover {
    transform: scale(1.15);
}

.markaworks-view-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    z-index: 3;
    position: relative;
}

.markaworks-view-ring {
    position: absolute;
    width: 180px;
    height: 180px;
    border: 2px solid #B8D432;
    border-radius: 50%;
    animation: pulse-ring 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
    opacity: 0.6;
}

.markaworks-view-dot {
    position: absolute;
    width: 8px;
    height: 8px;
    background: #B8D432;
    border-radius: 50%;
    animation: pulse-dot 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse-ring {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.6;
    }

    50% {
        transform: scale(1.1);
        opacity: 0.3;
    }
}

@keyframes pulse-dot {

    0%,
    100% {
        transform: scale(1);
        opacity: 1;
    }

    50% {
        transform: scale(1.5);
        opacity: 0.5;
    }
}

/* ========================================
   RESPONSIVE DESIGN - SERVICES SECTIONS
   ======================================== */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .markaworks-services-intro-container {
        max-width: 1600px;
    }
}

/* Tablet & Small Desktop (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-services-intro {
        padding: 60px 30px;
    }

    .markaworks-services-intro-container {
        gap: 60px;
    }

    .markaworks-services-main-title {
        font-size: 56px;
    }

    .markaworks-services-description p {
        font-size: 32px;
    }

    .markaworks-services-gallery-item {
        width: 280px;
        height: 350px;
    }

    .markaworks-services-view-button {
        width: 140px;
        height: 140px;
    }

    .markaworks-view-text {
        font-size: 20px;
    }
}

/* Mobile & Tablet (≤768px) */
@media (max-width: 768px) {
    .markaworks-services-intro {
        padding: 100px 20px 40px;
    }

    .markaworks-services-intro-container {
        gap: 40px;
    }

    .markaworks-services-main-title {
        font-size: 36px;
    }

    .markaworks-services-description {
        justify-content: flex-start;
    }

    .markaworks-services-description p {
        font-size: 20px;
        max-width: 100%;
    }

    .markaworks-services-gallery {
        padding: 20px 0;
    }

    .markaworks-services-gallery-track {
        gap: 16px;
        animation-duration: 30s;
    }

    .markaworks-services-gallery-item {
        width: 220px;
        height: 280px;
        border-radius: 16px;
    }

    /* Mobile navigation buttons for services gallery */
    .markaworks-services-nav-left,
    .markaworks-services-nav-right {
        width: 44px;
        height: 44px;
        opacity: 0.85;
    }

    .markaworks-services-nav-left {
        left: 8px;
    }

    .markaworks-services-nav-right {
        right: 8px;
    }

    .markaworks-services-view-button {
        width: 100px;
        height: 100px;
    }

    .markaworks-view-text {
        font-size: 16px;
    }

    .markaworks-view-ring {
        width: 120px;
        height: 120px;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .markaworks-services-intro {
        padding: 30px 16px;
    }

    .markaworks-services-main-title {
        font-size: 28px;
    }

    .markaworks-services-description p {
        font-size: 18px;
    }

    .markaworks-services-gallery-item {
        width: 180px;
        height: 240px;
    }

    .markaworks-services-view-button {
        width: 80px;
        height: 80px;
    }

    .markaworks-view-text {
        font-size: 14px;
    }

    .markaworks-view-ring {
        width: 100px;
        height: 100px;
    }
}

/* Ultra Small (≤320px) */
@media (max-width: 320px) {
    .markaworks-services-main-title {
        font-size: 24px;
    }

    .markaworks-services-description p {
        font-size: 16px;
    }

    .markaworks-services-gallery-item {
        width: 160px;
        height: 220px;
    }

    .markaworks-services-view-button {
        width: 70px;
        height: 70px;
    }

    .markaworks-view-text {
        font-size: 12px;
    }
}

/* Reduced Motion Support for Services */
@media (prefers-reduced-motion: reduce) {

    .markaworks-services-gallery-track,
    .markaworks-services-gallery-item,
    .markaworks-services-view-button {
        animation: none;
        transition: none;
    }
}

/* ===================================
   FOOTER SECTION
   =================================== */

/* Footer Styles */
.markaworks-footer {
    background: #053333;
    padding: 80px 40px 40px;
    position: relative;
    margin-top: 0;
    overflow: hidden;
}

.markaworks-footer-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

/* Contact Row - Full Width at Top */
.markaworks-contact-row {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* Two-Column Main Grid - Calendly Left, Locations Right */
.markaworks-footer-main-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
}

.markaworks-footer-calendly-column {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.markaworks-footer-locations-column {
    display: flex;
    flex-direction: column;
}

.markaworks-contact-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.markaworks-contact-title {
    color: #F4F5F5;
    font-size: 72px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    cursor: default;
}

.markaworks-contact-title:hover {
    color: #B8D432;
    text-shadow: 0 0 30px rgba(184, 212, 50, 0.3);
}

.markaworks-contact-phone {
    color: #BFB1D7;
    font-size: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    position: relative;
    padding: 8px 0;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

/* Simple underline for phone */
.markaworks-contact-phone::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #B8D432;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-contact-phone::before {
    display: none;
}

.markaworks-contact-phone:hover {
    color: #F4F5F5;
    transform: translateY(-4px) scale(1.02);
    text-shadow: 0 8px 25px rgba(191, 177, 215, 0.4);
}

.markaworks-contact-phone:hover::after,
.markaworks-contact-phone:focus::after {
    transform: scaleX(1);
}

.markaworks-contact-email {
    color: #94CDD9;
    font-size: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    word-break: break-all;
    position: relative;
    padding: 8px 0;
    overflow: hidden;
    width: fit-content;
    max-width: 100%;
}

/* Simple underline for email */
.markaworks-contact-email::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 0;
    right: 0;
    height: 2px;
    background: #B8D432;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-contact-email::before {
    display: none;
}

.markaworks-contact-email:hover {
    color: #F4F5F5;
    transform: translateY(-4px) scale(1.02);
    text-shadow: 0 8px 25px rgba(148, 205, 217, 0.4);
}

.markaworks-contact-email:hover::after,
.markaworks-contact-email:focus::after {
    transform: scaleX(1);
}

/* Calendly Section */
.markaworks-calendly-section {
    padding: 0;
    position: relative;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.markaworks-calendly-background {
    background: #B8D432;
    border-radius: 16px;
    padding: 0;
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: stretch;
    align-items: stretch;
    flex: 1;
    min-height: 1000px;
    height: 1000px;
}

.markaworks-calendly-pattern {
    display: none;
}

.markaworks-pattern-element {
    display: none;
}

.markaworks-calendly-container {
    width: 100%;
    max-width: 100%;
    min-height: 1000px;
    height: 1000px;
    background: #B8D432;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    z-index: 2;
    border: none;
    box-shadow: none;
    display: block;
}

.markaworks-calendly-container::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.markaworks-calendly-container:hover {
    transform: none;
    box-shadow: none;
}

.calendly-inline-widget {
    width: 100% !important;
    min-width: 100% !important;
    min-height: 1000px !important;
    height: 1000px !important;
    max-height: 1000px !important;
    border-radius: 16px;
    /* overflow: hidden !important; */ overflow: auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

.calendly-inline-widget iframe {
    max-width: 100% !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    border-radius: 16px;
}

/* Hide iframe scrollbar completely */
.calendly-inline-widget iframe {
    /* overflow: hidden !important; */ overflow: auto !important;
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

.calendly-inline-widget iframe::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
}

/* Override grey sections to green with maximum specificity */
.calendly-inline-widget,
.calendly-inline-widget *,
.calendly-inline-widget iframe,
.calendly-inline-widget iframe * {
    --colorBackgroundSecondary: #B8D432 !important;
    --coreColorNeutral100: #B8D432 !important;
    --colorNeutral100: #B8D432 !important;
    --colorNeutral200: #B8D432 !important;
}

/* Hide all scrollbars completely */
.calendly-inline-widget *::-webkit-scrollbar {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.calendly-inline-widget * {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

/* Target all possible grey background selectors */
.calendly-inline-widget .lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg,
.lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg,
html .lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg,
body .lmtWIHO_gkbTeeyuvoJC.mOUYF5ZmuNL6I7t0mSFg,
.calendly-inline-widget [style*="background-color: rgb(230, 230, 230)"],
.calendly-inline-widget [style*="background-color:#e6e6e6"],
.calendly-inline-widget [style*="background: rgb(230, 230, 230)"],
.calendly-inline-widget [style*="background:#e6e6e6"] {
    background-color: #B8D432 !important;
    background: #B8D432 !important;
}

/* Office Locations */
.markaworks-footer-locations {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 20px;
    row-gap: 20px;
}

.markaworks-location-card {
    background: #0B4444;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(244, 245, 245, 0.06);
}

.markaworks-location-card::before,
.markaworks-location-card::after {
    display: none;
}

.markaworks-location-card:hover {
    background: #0E4C4C;
    border-color: rgba(184, 212, 50, 0.38);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
    transform: none;
}

.markaworks-location-card:active {
    transform: none;
}

.markaworks-location-icon {
    width: 160px;
    height: 160px;
    position: relative;
    z-index: 2;
    transition: none;
    overflow: hidden;
    border-radius: 12px;
}

.markaworks-location-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: filter 0.25s ease;
    filter: brightness(0.92);
}

.markaworks-location-card:hover .markaworks-location-icon {
    transform: none;
}

.markaworks-location-card:hover .markaworks-location-image {
    transform: none;
    filter: brightness(1);
}

.markaworks-location-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 2;
}

.markaworks-location-title {
    color: #F4F5F5;
    font-size: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 1.2;
    margin: 0 0 8px 0;
    transition: color 0.25s ease;
}

.markaworks-location-card:hover .markaworks-location-title {
    color: #B8D432;
}

.markaworks-location-subtitle {
    color: #F4F5F5;
    font-size: 14px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 12px 0;
    opacity: 0.8;
}

.markaworks-location-city-highlight {
    color: #B8D432;
    font-weight: 600;
}

.markaworks-location-address {
    color: #F4F5F5;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
    opacity: 0.9;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-location-card:hover .markaworks-location-address {
    opacity: 1;
}

/* Footer Blogs Section */
.markaworks-footer-blogs {
    margin-top: 60px;
    margin-bottom: 40px;
}

.markaworks-footer-section-title {
    color: #F4F5F5;
    font-size: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 48px;
    margin: 0 0 40px 0;
    text-align: left;
}

.markaworks-footer-blogs-columns {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 350px;
    row-gap: 16px;
    align-items: flex-start;
}

.markaworks-footer-blog-column:first-child {
    grid-column: 1 / 3;
}

.markaworks-footer-blog-column:last-child {
    grid-column: 3 / 5;
}

.markaworks-footer-blogs-loading {
    grid-column: 1 / -1;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 40px;
}

.markaworks-footer-blog-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.markaworks-footer-blog-link {
    color: #F4F5F5;
    font-size: 24px;
    font-family: 'ABeeZee', sans-serif;
    font-weight: 400;
    line-height: 33.6px;
    text-decoration: underline;
    transition: all 0.3s ease;
    display: block;
}

.markaworks-footer-blog-link:hover {
    color: #B8D432;
    text-decoration: underline;
}

/* Footer Bottom */
.markaworks-footer-bottom {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.markaworks-footer-divider {
    height: 1px;
    background: rgba(244, 245, 245, 0.4);
    width: 100%;
}

.markaworks-footer-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.markaworks-footer-brand {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
    flex: 1;
}

.markaworks-footer-logo {
    height: 40px;
}

.markaworks-footer-logo-img {
    height: 100%;
    width: auto;
}

.markaworks-footer-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
    flex: 1;
}

.markaworks-footer-link {
    color: #F4F5F5;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: none;
    padding: 8px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.markaworks-footer-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 8px;
    right: 8px;
    height: 2px;
    background: #B8D432;
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-footer-link:hover {
    color: #B8D432;
}

.markaworks-footer-link:hover::after {
    transform: scaleX(1);
}

.markaworks-footer-social {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.markaworks-social-group {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

.markaworks-social-link {
    width: 48px;
    height: 48px;
    background: #F4F5F5;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    padding: 8px;
}

.markaworks-social-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-social-icon path {
    fill: #053333;
}

.markaworks-social-icon path.markaworks-social-icon-behance-bg {
    fill: #053333;
}

.markaworks-social-icon path.markaworks-social-icon-behance-mark {
    fill: #F4F5F5;
}

.markaworks-social-link:hover .markaworks-social-icon {
    animation: pulse 1s ease-in-out infinite;
    transform: scale(1.1);
}

.markaworks-social-link:hover .markaworks-social-icon path {
    fill: #B8D432;
}

.markaworks-social-link:hover .markaworks-social-icon path.markaworks-social-icon-behance-bg {
    fill: #B8D432;
}

.markaworks-social-link:hover .markaworks-social-icon path.markaworks-social-icon-behance-mark {
    fill: #053333;
}

.markaworks-footer-cta {
    width: 48px;
    height: 48px;
    background: #B8D432;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    text-decoration: none;
    padding: 8px;
}

.markaworks-cta-icon {
    width: 32px;
    height: 32px;
    object-fit: contain;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-footer-cta:hover .markaworks-cta-icon {
    animation: pulse 1s ease-in-out infinite;
}

.markaworks-footer-legal {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
}

.markaworks-footer-legal-start {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
    min-width: 0;
}

.markaworks-payment-marks {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
}

.markaworks-payment-mark {
    display: block;
    width: 46px;
    height: 29px;
    flex: 0 0 auto;
}

.markaworks-copyright {
    color: #F4F5F5;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.4;
}

.markaworks-legal-links {
    display: flex;
    gap: 24px;
}

.markaworks-legal-link {
    color: #F4F5F5;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 1.4;
    text-decoration: underline;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.markaworks-legal-link:hover {
    color: #94CDD9;
    text-decoration-color: #94CDD9;
}

/* ===================================
   FOOTER RESPONSIVE DESIGN
   =================================== */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .markaworks-footer {
        padding: 100px 60px 60px;
    }

    .markaworks-contact-title {
        font-size: 84px;
    }

    .markaworks-contact-phone,
    .markaworks-contact-email {
        font-size: 48px;
    }

    .markaworks-calendly-background {
        min-height: 1000px;
        height: 1000px;
    }

    .markaworks-calendly-container {
        max-width: 1100px;
        height: 1000px;
        min-height: 1000px;
    }

    .calendly-inline-widget {
        height: 1000px !important;
        min-height: 1000px !important;
        max-height: 1000px !important;
    }


}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .markaworks-footer {
        padding: 60px 32px 32px;
    }

    .markaworks-footer-container {
        gap: 60px;
    }

    .markaworks-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .markaworks-contact-title {
        font-size: 56px;
    }

    .markaworks-contact-phone,
    .markaworks-contact-email {
        font-size: 32px;
    }

    .markaworks-calendly-background {
        min-height: 700px;
        height: 700px;
    }

    .markaworks-calendly-container {
        height: 700px;
        min-height: 700px;
    }

    .calendly-inline-widget {
        height: 700px !important;
        min-height: 700px !important;
        max-height: 700px !important;
    }



    .markaworks-footer-locations {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 16px;
        row-gap: 16px;
    }

    .markaworks-footer-blogs-columns {
        grid-template-columns: repeat(2, 1fr);
        column-gap: 20px;
        row-gap: 16px;
    }

    .markaworks-footer-blog-column:first-child,
    .markaworks-footer-blog-column:last-child {
        grid-column: span 1;
    }

    .markaworks-footer-section-title {
        font-size: 32px;
        line-height: 40px;
        margin-bottom: 24px;
    }

    .markaworks-footer-blog-link {
        font-size: 20px;
        line-height: 28px;
    }

    .markaworks-location-title {
        font-size: 32px;
    }

    .markaworks-location-icon {
        width: 120px;
        height: 120px;
    }

    .markaworks-footer-main {
        flex-direction: row;
        gap: 24px;
        align-items: center;
    }

    .markaworks-footer-brand {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        justify-content: flex-start;
    }

    .markaworks-footer-nav {
        gap: 18px;
        justify-content: center;
        flex: 1;
    }

    .markaworks-footer-social {
        gap: 18px;
        justify-content: flex-end;
    }

    .markaworks-social-group {
        gap: 16px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .markaworks-footer {
        padding: 40px 20px 20px;
    }

    .markaworks-footer-container {
        gap: 40px;
    }

    .markaworks-footer-main-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .markaworks-contact-row {
        flex-direction: column;
        gap: 32px;
    }

    .markaworks-contact-title {
        font-size: 36px;
    }

    .markaworks-contact-phone,
    .markaworks-contact-email {
        font-size: 24px;
    }

    .markaworks-calendly-background {
        min-height: 700px;
        height: 700px;
    }

    .markaworks-calendly-container {
        height: 700px;
        min-height: 700px;
    }

    .calendly-inline-widget {
        min-width: 280px !important;
        height: 700px !important;
        min-height: 700px !important;
        max-height: 700px !important;
    }

    .markaworks-footer-locations {
        grid-template-columns: 1fr;
        column-gap: 12px;
        row-gap: 12px;
    }

    .markaworks-footer-blogs-columns {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 16px;
    }

    .markaworks-footer-blog-column:first-child,
    .markaworks-footer-blog-column:last-child {
        grid-column: 1 / -1;
    }

    .markaworks-footer-section-title {
        font-size: 28px;
        line-height: 36px;
        margin-bottom: 28px;
    }

    .markaworks-footer-blog-link {
        font-size: 18px;
        line-height: 26px;
    }

    .markaworks-location-card {
        padding: 20px;
    }

    .markaworks-location-title {
        font-size: 28px;
    }

    .markaworks-location-icon {
        width: 100px;
        height: 100px;
    }

    .markaworks-location-address {
        font-size: 14px;
    }

    .markaworks-footer-main {
        flex-direction: column;
        gap: 32px;
        align-items: center;
    }

    .markaworks-footer-brand {
        flex-direction: column;
        align-items: center;
        gap: 20px;
        width: 100%;
        justify-content: center;
    }

    .markaworks-footer-nav {
        flex-wrap: wrap;
        gap: 20px;
        justify-content: center;
    }

    .markaworks-footer-social {
        gap: 20px;
        width: 100%;
        justify-content: center;
    }

    .markaworks-social-group {
        gap: 20px;
        justify-content: center;
    }

    .markaworks-footer-legal {
        flex-direction: column;
        gap: 16px;
        align-items: flex-start;
    }

    .markaworks-footer-legal-start {
        gap: 12px;
    }

    .markaworks-legal-links {
        flex-wrap: wrap;
        gap: 16px;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .markaworks-footer {
        padding: 32px 16px 16px;
    }

    .markaworks-contact-title {
        font-size: 28px;
    }

    .markaworks-contact-phone,
    .markaworks-contact-email {
        font-size: 20px;
    }

    .markaworks-calendly-background {
        padding: 24px 16px;
        min-height: 400px;
    }

    .markaworks-calendly-container {
        height: 350px;
    }



    .markaworks-location-card {
        padding: 16px;
    }

    .markaworks-location-title {
        font-size: 24px;
    }

    .markaworks-location-icon {
        width: 80px;
        height: 80px;
    }

    .markaworks-footer-nav {
        gap: 16px;
        justify-content: center;
    }

    .markaworks-footer-link {
        font-size: 14px;
        padding: 8px;
    }

    .markaworks-social-link,
    .markaworks-footer-cta {
        width: 44px;
        height: 44px;
    }

    .markaworks-social-icon {
        width: 28px;
        height: 28px;
    }

    .markaworks-cta-icon {
        width: 28px;
        height: 28px;
    }

    .markaworks-footer-main {
        flex-direction: column;
        gap: 24px;
        align-items: center;
    }

    .markaworks-footer-brand {
        flex-direction: column;
        align-items: center;
        gap: 16px;
        justify-content: center;
    }

    .markaworks-footer-social {
        justify-content: center;
        gap: 16px;
    }

    .markaworks-social-group {
        gap: 16px;
        justify-content: center;
    }

    .markaworks-copyright,
    .markaworks-legal-link {
        font-size: 14px;
    }
}

/* Ultra Small (≤320px) */
@media (max-width: 320px) {
    .markaworks-footer {
        padding: 24px 12px 12px;
    }

    .markaworks-contact-title {
        font-size: 24px;
    }

    .markaworks-contact-phone,
    .markaworks-contact-email {
        font-size: 18px;
    }

    .markaworks-calendly-background {
        padding: 20px 12px;
        min-height: 350px;
    }

    .markaworks-calendly-container {
        height: 300px;
    }



    .markaworks-location-title {
        font-size: 20px;
    }

    .markaworks-location-address {
        font-size: 12px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

    .markaworks-footer *,
    .markaworks-footer *::before,
    .markaworks-footer *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .markaworks-footer {
        background: #000000;
    }

    .markaworks-contact-title,
    .markaworks-location-title,
    .markaworks-location-address,
    .markaworks-footer-link,
    .markaworks-copyright {
        color: #FFFFFF;
    }

    .markaworks-contact-phone {
        color: #FFFF00;
    }

    .markaworks-contact-email {
        color: #00FFFF;
    }

    .markaworks-location-card {
        background: #333333;
        border: 2px solid #FFFFFF;
    }
}

/* ===================================
   FOOTER V2 — stacked city rows
   =================================== */

.markaworks-footer-v2,
.markaworks-footer-v2 * {
    box-sizing: border-box;
}

.markaworks-footer-v2 .markaworks-footer-container {
    gap: 80px;
    width: 100%;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    min-width: 0;
    box-sizing: border-box;
}

.markaworks-footer.markaworks-footer-v2 {
    overflow-x: hidden;
    overflow-y: visible;
    padding-left: clamp(20px, 4vw, 60px);
    padding-right: clamp(20px, 4vw, 60px);
}

.markaworks-footer-v2 .markaworks-footer-stage {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.markaworks-footer-watermark {
    position: absolute;
    left: -12%;
    bottom: -8%;
    width: min(1360px, 118%);
    height: auto;
    opacity: 0.02;
    pointer-events: none;
    z-index: 0;
}

.markaworks-footer-watermark-img {
    display: block;
    width: 100%;
    height: auto;
}

.markaworks-footer-v2 .markaworks-footer-main-grid {
    display: grid;
    position: relative;
    z-index: 1;
    align-items: stretch;
    gap: 48px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.markaworks-footer-v2 .markaworks-footer-calendly-column,
.markaworks-footer-v2 .markaworks-calendly-section {
    position: relative;
    z-index: 8;
    min-height: 0;
    pointer-events: auto;
}

.markaworks-footer-v2 .markaworks-calendly-pattern {
    pointer-events: none !important;
}

.markaworks-footer-v2 .markaworks-footer-locations-column {
    position: relative;
    z-index: 1;
}

.markaworks-footer-v2 .markaworks-calendly-background,
.markaworks-footer-v2 .markaworks-calendly-container {
    min-height: 820px;
    height: 100%;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    contain: none;
    overflow: hidden;
    padding: 0;
    align-items: stretch;
    justify-content: stretch;
    pointer-events: auto !important;
}

.markaworks-footer-v2 .markaworks-calendly-container::before {
    display: none !important;
}

.markaworks-footer-v2 .calendly-inline-widget {
    display: block !important;
    position: relative;
    z-index: 9;
    width: 100% !important;
    min-width: 320px !important;
    height: 100% !important;
    min-height: 700px !important;
    max-height: none !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    overflow: hidden !important;
    pointer-events: auto !important;
    touch-action: auto !important;
}

.markaworks-footer-v2 .calendly-inline-widget iframe {
    display: block !important;
    position: relative;
    z-index: 10;
    width: 100% !important;
    height: 100% !important;
    min-height: 700px !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    pointer-events: auto !important;
    touch-action: auto !important;
}

.markaworks-footer-v2 .markaworks-footer-locations,
.markaworks-footer-locations-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
    grid-template-columns: none;
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.markaworks-footer-v2 .markaworks-footer-calendly-column,
.markaworks-footer-v2 .markaworks-footer-locations-column {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

.markaworks-footer-v2 .markaworks-location-card {
    flex-direction: row;
    align-items: flex-start;
    padding: 24px;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

.markaworks-footer-v2 .markaworks-location-icon {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
}

.markaworks-footer-v2 .markaworks-location-content {
    gap: 8px;
    min-width: 0;
}

.markaworks-footer-v2 .markaworks-location-title {
    font-size: 24px;
    line-height: 1.2;
    margin: 0;
}

.markaworks-footer-v2 .markaworks-location-address {
    font-size: 16px;
    line-height: 1.4;
}

.markaworks-footer-v2 .markaworks-location-address br {
    display: unset;
    margin-bottom: 0;
}

.markaworks-footer-v2 .markaworks-location-card[data-location="antalya"] .markaworks-location-content {
    flex: 1 1 auto;
    min-width: 0;
}

.markaworks-footer-v2 .markaworks-location-card[data-location="antalya"] .markaworks-location-address {
    white-space: normal;
    overflow-wrap: normal;
    word-break: normal;
}

.markaworks-footer-v2 .markaworks-location-card:hover {
    transform: none;
    background: #0E4C4C;
    border-color: rgba(184, 212, 50, 0.38);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
}

.markaworks-footer-v2 .markaworks-location-card:hover .markaworks-location-icon {
    transform: none;
}

.markaworks-footer-v2 .markaworks-location-card[data-location="florida"] .markaworks-location-image {
    object-fit: contain;
}

.markaworks-footer-v2 .markaworks-footer-blogs {
    margin-top: 0;
    margin-bottom: 0;
}

@media (max-width: 1024px) {
    .markaworks-footer-v2 .markaworks-footer-locations,
    .markaworks-footer-locations-stack {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
    }

    .markaworks-footer-v2 .markaworks-footer-container {
        gap: 48px;
    }

    .markaworks-footer-v2 .markaworks-footer-main-grid {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        width: 100%;
        min-width: 0;
    }

    .markaworks-footer-v2 .markaworks-footer-main-grid,
    .markaworks-footer-v2 .markaworks-footer-calendly-column,
    .markaworks-footer-v2 .markaworks-calendly-section {
        height: auto;
        align-items: stretch;
        min-width: 0;
        max-width: 100%;
    }

    .markaworks-footer-watermark {
        left: -20%;
        width: 140%;
        bottom: 8%;
    }

    .markaworks-footer-v2 .markaworks-location-icon {
        width: 96px;
        height: 96px;
    }

    .markaworks-footer-v2 .markaworks-calendly-background,
    .markaworks-footer-v2 .markaworks-calendly-container {
        height: 720px;
        min-height: 720px;
        max-height: none;
        width: 100%;
        max-width: 100%;
        padding: 0;
        contain: none;
        overflow: hidden;
    }

    .markaworks-footer-v2 .calendly-inline-widget,
    .markaworks-footer-v2 .calendly-inline-widget iframe {
        height: 720px !important;
        min-height: 720px !important;
        max-height: none !important;
        max-width: 100% !important;
    }
}

@media (max-width: 768px) {
    .markaworks-footer.markaworks-footer-v2 {
        width: 100%;
        max-width: 100%;
        padding: 40px 16px 24px;
        overflow-x: hidden;
        box-sizing: border-box;
    }

    .markaworks-footer-v2 .markaworks-footer-container,
    .markaworks-footer-v2 .markaworks-footer-stage,
    .markaworks-footer-v2 .markaworks-footer-main-grid,
    .markaworks-footer-v2 .markaworks-footer-calendly-column,
    .markaworks-footer-v2 .markaworks-footer-locations-column,
    .markaworks-footer-v2 .markaworks-calendly-section,
    .markaworks-footer-v2 .markaworks-footer-locations,
    .markaworks-footer-v2 .markaworks-footer-locations-stack {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
        transform: none !important;
    }

    .markaworks-footer-v2 .markaworks-footer-locations,
    .markaworks-footer-locations-stack {
        gap: 12px;
        grid-template-columns: none;
    }

    .markaworks-footer-v2 .markaworks-footer-container {
        gap: 36px;
    }

    .markaworks-footer-v2 .markaworks-contact-row {
        flex-direction: column;
        gap: 24px;
        width: 100%;
        min-width: 0;
    }

    .markaworks-footer-v2 .markaworks-contact-title {
        font-size: 32px;
        line-height: 1.1;
    }

    .markaworks-footer-v2 .markaworks-contact-phone,
    .markaworks-footer-v2 .markaworks-contact-email {
        font-size: 20px;
        line-height: 1.25;
        overflow-wrap: anywhere;
    }

    .markaworks-footer-v2 .markaworks-location-card {
        display: flex;
        flex-direction: row;
        align-items: flex-start;
        padding: 14px;
        gap: 12px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin: 0;
        transform: none !important;
    }

    .markaworks-footer-v2 .markaworks-location-icon {
        width: 56px;
        height: 56px;
        flex: 0 0 56px;
    }

    .markaworks-footer-v2 .markaworks-location-content {
        min-width: 0;
        flex: 1 1 auto;
        overflow: hidden;
    }

    .markaworks-footer-v2 .markaworks-location-title {
        font-size: 20px;
    }

    .markaworks-footer-v2 .markaworks-location-address {
        font-size: 13px;
        white-space: normal !important;
        overflow-wrap: anywhere;
        word-break: break-word;
    }

    .markaworks-footer-v2 .markaworks-calendly-background,
    .markaworks-footer-v2 .markaworks-calendly-container {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        height: 680px;
        min-height: 680px;
        padding: 0;
        contain: none;
        overflow: hidden;
    }

    .markaworks-footer-v2 .calendly-inline-widget,
    .markaworks-footer-v2 .calendly-inline-widget iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 680px !important;
        min-height: 680px !important;
        max-height: none !important;
    }

    .markaworks-footer-watermark {
        display: none;
    }
}

@media (max-width: 480px) {
    .markaworks-footer.markaworks-footer-v2 {
        padding: 32px 16px 20px;
    }

    .markaworks-footer-v2 .markaworks-calendly-background,
    .markaworks-footer-v2 .markaworks-calendly-container {
        padding: 0;
        height: 640px;
        min-height: 640px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: hidden;
    }

    .markaworks-footer-v2 .calendly-inline-widget,
    .markaworks-footer-v2 .calendly-inline-widget iframe {
        height: 640px !important;
        min-height: 640px !important;
        max-height: none !important;
    }

    .markaworks-footer-v2 .markaworks-location-icon {
        width: 56px;
        height: 56px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .markaworks-footer-v2 .markaworks-location-card:hover {
        transform: none;
    }
}

/* ==============================
   Mobile Overflow & Layout Fixes
   ============================== */

/* Global guard to prevent horizontal scrolling */
html,
body {
    overflow-x: hidden;
}

/* Make sure all images/videos scale inside their containers */
[class^="markaworks-"] img,
[class^="markaworks-"] video {
    max-width: 100%;
}

/* Hide floating decorative elements on small screens to avoid overflow */
@media (max-width: 768px) {

    .markaworks-floating-bg,
    .markaworks-branding-float-element,
    .markaworks-what-shape,
    .markaworks-faq-decoration {
        display: none !important;
    }
}

/* Hide custom floating cursor/buttons on mobile (prevents clipping and scroll) */
@media (max-width: 768px) {

    .markaworks-view-button,
    #portfolioFloatingBtn,
    #projectsFloatingBtn,
    .markaworks-services-view-button {
        display: none !important;
    }
}

/* ------------------------------
   Portfolio Gallery (About section)
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-about-container {
        padding: 48px 16px;
    }

    .markaworks-about-main {
        display: block;
    }

    .markaworks-about-left,
    .markaworks-about-right {
        width: 100%;
    }

    .markaworks-about-right {
        margin-top: 16px;
        overflow: visible;
    }

    /* Responsive CTA */
    .markaworks-about-cta {
        display: block;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        padding: 12px 16px;
        font-size: 16px;
        line-height: 1.2;
        border-radius: 12px;
        margin: 12px 0 0 0;
        white-space: normal;
        transform: none !important;
        box-shadow: none !important;
        filter: none !important;
    }

    .markaworks-portfolio-gallery {
        overflow: hidden;
        padding: 30px 0 40px 0;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .markaworks-portfolio-track {
        display: flex;
        gap: 12px;
        padding: 8px 0;
    }

    .markaworks-portfolio-item {
        flex: 0 0 auto;
        width: 72vw;
        max-width: 360px;
    }

    .markaworks-portfolio-item img {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

@media (max-width: 480px) {
    .markaworks-portfolio-item {
        width: 80vw;
    }

    .markaworks-about-cta {
        padding: 12px 14px;
        font-size: 15px;
        border-radius: 10px;
    }
}

/* ------------------------------
   Portfolio Showcase - Fluid Grid System
   ------------------------------ */
/* This section is now handled by the main fluid responsive design above */

/* ------------------------------
   Partners/Tech stack track
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-partners-container {
        padding: 32px 16px;
    }

    .markaworks-partners-track {
        overflow: hidden;
    }
}

/* ------------------------------
   Statistics section floats safety
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-stats-container {
        padding: 48px 16px;
    }
}

/* Stats section - stronger mobile hierarchy */
@media (max-width: 768px) {

    /* Heading sizing */
    .markaworks-stats-title {
        font-size: 26px;
        line-height: 1.3;
    }

    /* Single column layout with consistent spacing */
    .markaworks-stats-grid {
        display: grid;
        grid-template-columns: 1fr;
        gap: 12px !important;
    }

    .markaworks-stats-row {
        display: contents;
    }

    /* Card padding and radius */
    .markaworks-stat-card {
        padding: 16px 12px !important;
        border-radius: 16px;
        min-height: auto !important;
        gap: 8px !important;
    }

    .markaworks-stat-card-small,
    .markaworks-stat-card-large {
        width: 100%;
        height: auto !important;
    }

    /* Hierarchy: big number, compact label, readable desc */
    .markaworks-stat-number {
        font-size: 28px !important;
        line-height: 1.05 !important;
        font-weight: 700;
    }

    .markaworks-stat-label {
        font-size: 12px !important;
        line-height: 1.25 !important;
        letter-spacing: 0.2px;
        margin-top: 0 !important;
        opacity: 0.9;
        color: #0B4444 !important;
    }

    .markaworks-stat-description {
        font-size: 13px !important;
        line-height: 1.45 !important;
        margin-top: 4px !important;
    }

    .markaworks-stat-content {
        gap: 4px !important;
    }

    /* Background elements subdued to avoid clutter */
    .markaworks-stat-bg-element {
        opacity: 0.04;
    }
}

/* ------------------------------
   Branding Strategy (Homepage)
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-branding-container {
        padding: 48px 16px;
    }

    .markaworks-branding-main-card {
        padding: 16px;
    }

    .markaworks-branding-left,
    .markaworks-branding-right {
        width: 100%;
    }

    .markaworks-branding-right {
        margin-top: 16px;
    }

    .markaworks-cards-carousel {
        overflow: visible;
    }

    .markaworks-service-card {
        width: 100%;
    }

    .markaworks-branding-nav button {
        min-width: 44px;
        min-height: 44px;
    }
}

/* Branding Strategy - tighter, fully-contained mobile layout */
@media (max-width: 768px) {
    .markaworks-branding-container {
        padding: 32px 16px;
    }

    .markaworks-branding-main-card {
        padding: 16px;
        border-radius: 16px;
        max-width: 100%;
        margin: 0;
        overflow: hidden;
        box-sizing: border-box;
    }

    .markaworks-branding-header {
        margin-bottom: 12px;
    }

    .markaworks-branding-title {
        font-size: 22px;
        line-height: 1.25;
        margin: 0 0 6px;
    }

    .markaworks-branding-description {
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }

    /* Stack columns and add spacing */
    .markaworks-branding-left,
    .markaworks-branding-right {
        width: 100%;
    }

    .markaworks-branding-right {
        margin-top: 14px;
    }

    /* Controls bar: progress + arrows, wrapped safely */
    .markaworks-branding-controls {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
        margin-top: 0;
        padding: 0;
    }

    .markaworks-branding-progress {
        display: none;
    }

    .markaworks-progress-bar {
        flex: 1 1 auto;
        height: 4px;
        border-radius: 4px;
        min-width: 0;
    }

    .markaworks-branding-nav {
        display: flex;
        gap: 8px;
    }

    .markaworks-branding-arrow {
        width: 44px;
        height: 44px;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Service cards - contained and readable */
    .markaworks-cards-carousel {
        overflow: hidden;
        margin-top: 6px;
    }

    .markaworks-service-card {
        width: 100%;
        padding: 16px;
        border-radius: 18px;
        box-sizing: border-box;
    }

    .markaworks-service-card:hover,
    .markaworks-service-card:focus,
    .markaworks-service-card:active {
        transform: none !important;
        box-shadow: none !important;
        background: #F4F5F5 !important;
    }

    .markaworks-service-item {
        padding: 10px 8px;
        font-size: 16px;
    }
}

@media (max-width: 480px) {
    .markaworks-service-card {
        border-radius: 20px;
    }

    .markaworks-service-card:hover,
    .markaworks-service-card:focus,
    .markaworks-service-card:active {
        transform: none !important;
        box-shadow: none !important;
        background: #F4F5F5 !important;
    }
}

/* ------------------------------
   Testimonials (Projects page section)
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-testimonials-container {
        padding: 48px 16px;
    }

    .markaworks-testimonial-card {
        display: flex;
        flex-direction: column;
        gap: 16px;
    }

    .markaworks-testimonial-left,
    .markaworks-testimonial-right {
        width: 100%;
    }

    .markaworks-testimonial-image {
        width: 100%;
        height: auto;
    }

    .markaworks-nav-arrow {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ------------------------------
   Services page intro gallery safety
   ------------------------------ */
@media (max-width: 768px) {
    .markaworks-services-intro-container {
        padding: 48px 16px;
    }

    .markaworks-services-gallery {
        overflow: hidden;
    }

    .markaworks-services-gallery-track {
        display: flex;
        gap: 12px;
    }

    .markaworks-services-gallery-item {
        flex: 0 0 auto;
        width: 72vw;
        max-width: 360px;
    }
}

/* Footer logo scaling fix on mobile/Android */
@media (max-width: 768px) {
    .markaworks-footer-logo {
        max-width: 160px;
        flex: 0 0 auto;
    }

    .markaworks-footer-logo-img {
        width: 100%;
        height: auto;
        display: block;
    }
}

/* Extra-small tuning */
@media (max-width: 480px) {
    .markaworks-about-cta {
        width: 100%;
        justify-content: center;
    }
}

/* ---------------------------------
   Testimonials - shared mobile UI
   --------------------------------- */
@media (max-width: 768px) {
    .markaworks-testimonials {
        background: #EAE5E3 !important;
        padding: 40px 16px 48px !important;
    }

    .markaworks-testimonials-container {
        padding: 0 !important;
    }

    .markaworks-testimonials-carousel {
        min-height: 980px !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .markaworks-testimonial-card {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 32px !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        margin: 0 auto !important;
        background: transparent !important;
        border-radius: 0 !important;
        overflow: visible !important;
        box-sizing: border-box !important;
    }

    .markaworks-testimonial-card.active {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .markaworks-testimonial-card.exiting {
        position: relative !important;
        height: auto !important;
        min-height: 0 !important;
    }

    .markaworks-testimonial-left {
        order: 1 !important;
        width: 100% !important;
        padding-right: 0 !important;
        gap: 32px !important;
    }

    .markaworks-testimonial-content {
        gap: 28px !important;
    }

    .markaworks-testimonial-text-wrapper {
        gap: 14px !important;
    }

    .markaworks-testimonial-title {
        color: #053333 !important;
        font-size: 24px !important;
        font-weight: 600 !important;
        line-height: 1.15 !important;
        margin: 0 !important;
    }

    .markaworks-testimonial-quote {
        color: #161616 !important;
        display: block !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        margin: 0 !important;
        overflow: visible !important;
        text-overflow: clip !important;
        -webkit-line-clamp: unset !important;
        line-clamp: unset !important;
        -webkit-box-orient: initial !important;
    }

    .markaworks-testimonial-stats {
        display: grid !important;
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 20px !important;
        margin: 0 !important;
    }

    .markaworks-testimonial-stats .markaworks-stat-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
        min-width: 0 !important;
        padding: 0 !important;
        background: transparent !important;
        border: 0 !important;
        border-radius: 0 !important;
        text-align: left !important;
    }

    .markaworks-testimonial-card .markaworks-testimonial-stats .markaworks-stat-item:nth-child(3) {
        grid-column: auto !important;
    }

    .markaworks-testimonial-stats .markaworks-stat-number {
        font-size: 40px !important;
        font-weight: 600 !important;
        line-height: 1.2 !important;
    }

    .markaworks-testimonial-stats .markaworks-stat-label {
        color: #161616 !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
        opacity: 1 !important;
    }

    .markaworks-testimonial-author {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 16px !important;
        margin-top: 0 !important;
    }

    .markaworks-author-info {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
        width: auto !important;
    }

    .markaworks-author-avatar {
        display: block !important;
        width: 69px !important;
        height: 69px !important;
        border-radius: 10px !important;
        object-fit: cover !important;
    }

    .markaworks-author-details {
        gap: 2px !important;
    }

    .markaworks-author-name {
        color: #053333 !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        line-height: 1.25 !important;
    }

    .markaworks-author-position,
    .markaworks-author-website {
        color: #161616 !important;
        font-size: 13px !important;
        line-height: 1.35 !important;
        opacity: 0.72 !important;
    }

    .markaworks-testimonial-nav {
        position: static !important;
        display: flex !important;
        gap: 8px !important;
        margin-top: 0 !important;
        opacity: 1 !important;
        transform: none !important;
        z-index: 3 !important;
    }

    .markaworks-nav-arrow {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 12px !important;
        border-radius: 999px !important;
        background: #F4F5F5 !important;
        border: 0 !important;
        backdrop-filter: none !important;
    }

    .markaworks-nav-arrow svg {
        width: 22px !important;
        height: 22px !important;
        color: #053333 !important;
    }

    .markaworks-testimonial-right {
        display: block !important;
        order: 2 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 7.5px !important;
        align-self: stretch !important;
        border-radius: 16px !important;
        /* overflow: hidden !important; */ overflow: auto !important;
        background: #B8D432 !important;
        position: relative !important;
        box-sizing: border-box !important;
    }

    .markaworks-testimonial-right::before {
        display: none !important;
    }

    .markaworks-testimonial-image {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 342 / 350 !important;
        margin: 0 !important;
        border-radius: 12.5px !important;
        object-fit: cover !important;
    }
}

@media (max-width: 480px) {
    .markaworks-testimonials-carousel {
        min-height: 900px !important;
    }
}

/* ============================================
   CONTACT PAGE STYLES - FULLY RESPONSIVE
   ============================================ */

/* Base contact page optimizations */
.contact-hero-section,
.contact-locations-section {
    position: relative;
    overflow: hidden;
}

/* Ensure smooth scrolling between sections */
html {
    scroll-padding-top: 80px;
}

@media (max-width: 768px) {
    html {
        scroll-padding-top: 60px;
    }
}

/* Hero Image Section */
.contact-hero-section {
    width: 100vw;
    background: #EAE5E3;
    padding: 40px 0 0 0;
    margin: 0 calc(50% - 50vw);
    overflow: hidden;
}

.contact-hero-image-container {
    width: 100%;
    margin: 0;
    padding: 0;
    animation: fadeInUp 0.8s ease-out;
    overflow: hidden;
    box-sizing: border-box;
}

.contact-hero-image {
    width: 100%;
    height: clamp(234px, 39vh, 416px);
    aspect-ratio: 16 / 6.5;
    display: block;
    border-radius: 0;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-hero-image:hover {
    transform: scale(1.02);
}

/* Contact Options Section */
.contact-options-section {
    background: #EAE5E3;
    padding: 100px 40px 40px;
    position: relative;
    overflow-y: visible;
    border-radius: 0;
    z-index: 40 !important;
}

/* Floating Background Shapes - Removed for cleaner design */

.contact-options-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: 0 20px;
}

/* Contact Header */
.contact-header {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 80px;
    gap: 100px;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-title-wrapper {
    flex: 0 0 calc(50% - 50px);
}

.contact-main-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 43px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-title-white {
    color: #053333;
    display: inline-block;
    font-size: 0.6em;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-title-green {
    color: #B8D432;
    display: inline-block;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-title-dark {
    color: #053333;
    display: inline-block;
    font-size: 0.5em;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-info-cards {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    opacity: 1;
}

.contact-info-card:hover {
    transform: translateX(8px);
}

.contact-info-card:hover .contact-icon-wrapper {
    background: #B8D432;
    transform: scale(1.1) rotate(5deg);
}

.contact-info-card:hover .contact-icon-wrapper svg {
    stroke: #053333;
}

.contact-icon-wrapper {
    width: 48px;
    height: 48px;
    background: #053333;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.contact-icon-wrapper svg {
    stroke: #F4F5F5;
    transition: stroke 0.3s ease;
}

.contact-info-text {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    transition: color 0.3s ease;
}

.contact-info-card:hover .contact-info-text {
    color: #B8D432;
}

/* Two Column Layout */
.contact-two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 110px;
    width: 100%;
    box-sizing: border-box;
    overflow: visible;
    min-height: 950px;
    padding-bottom: 20px;
    opacity: 1;
}

.contact-column {
    display: flex;
    flex-direction: column;
    gap: 48px;
    position: relative;

    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    overflow: visible;
}

.contact-column-left {
    position: static !important;
}

.contact-column-left {
    min-height: auto;
}

.contact-option-title {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 16px 0;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

.contact-option-description {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0 0 32px 0;
    opacity: 0;
    animation: fadeInUp 0.35s ease-out forwards;
}

/* Calendly Widget - Direct Styling */

.calendly-inline-widget {
    min-width: 320px;
    flex: 0 0 auto;
    margin: 0 auto;
    border-radius: 16px;
    overflow: hidden;
    position: static !important;
    width: 100%;
    max-width: 100%;
    height: 760px;
    /* explicit height to prevent cropping */
    background: transparent;
    /* blend with section background */
    box-sizing: border-box;
}

/* Contact Form */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 40;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    margin-bottom: 32px;
    position: relative;
}

.form-group:last-of-type {
    margin-bottom: 0;

}

.form-label {
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.form-input,
.form-textarea,
.form-select {
    width: 100%;
    max-width: 100%;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;
    box-sizing: border-box;
    overflow: hidden;
    word-wrap: break-word;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
    border-color: #B8D432;
    background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23B8D432' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 20px center;
    background-size: 20px 20px;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.2);
}

.form-input::placeholder,
.form-textarea::placeholder {
    color: rgba(22, 22, 22, 0.5);
}

.form-textarea {
    resize: vertical;
    min-height: 180px;
}

.form-select {
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 20px center;
    background-size: 20px 20px;
    padding-right: 56px;
    border-image: none !important;
}

.form-select option {
    padding: 14px 20px;
    background: #FFFFFF;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    border: none;
}

.form-select option:hover {
    background: #F4F5F5;
}

.form-select option:checked {
    background: #B8D432;
    color: #053333;
    font-weight: 600;
}

.form-select::-ms-expand {
    display: none;
}

.form-select::-webkit-scrollbar {
    width: 8px;
}

.form-select::-webkit-scrollbar-track {
    background: #F4F5F5;
    border-radius: 4px;
}

.form-select::-webkit-scrollbar-thumb {
    background: #B8D432;
    border-radius: 4px;
}

.form-select::-webkit-scrollbar-thumb:hover {
    background: #9BB814;
}

/* Phone Input Wrapper */
.phone-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: stretch;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.phone-country-code {
    width: 120px;
    padding: 16px 16px;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 18px 18px;
    border: 2px solid transparent;
    border-radius: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.4;
    color: #161616;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;
    cursor: pointer;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    padding-right: 40px;
    flex-shrink: 0;
    border-image: none !important;
}

.phone-country-code:focus {
    border-color: #B8D432;
    background: #FAFAFA url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23B8D432' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 12px center;
    background-size: 18px 18px;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.2);
}

.phone-country-code::-ms-expand {
    display: none;
}

.phone-country-code option {
    padding: 14px 20px;
    background: #FFFFFF;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    line-height: 1.5;
    border: none;
}

.phone-country-code option:hover {
    background: #F4F5F5;
}

.phone-country-code option:checked {
    background: #B8D432;
    color: #053333;
    font-weight: 600;
}

.phone-input-field {
    flex: 1;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;
}

.phone-input-field:focus {
    border-color: #B8D432;
    background: #FAFAFA;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.2);
}

.phone-input-field::placeholder {
    color: rgba(22, 22, 22, 0.5);
}

/* ============================================
   Custom Dropdown Component
   ============================================ */
.custom-dropdown {
    position: relative;
    width: 100%;
    max-width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: visible;
}

.custom-dropdown.is-open {
    z-index: 999998;
}

.phone-dropdown {
    position: relative;
    width: 170px;
    max-width: 170px;
    background: transparent;
    z-index: 10;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* Country flag and code styling */
.country-flag {
    font-size: 24px;
    line-height: 1;
    display: inline-block;
    margin-right: 6px;
}

.country-code {
    font-size: 16px;
    font-weight: 600;
    color: #053333;
    white-space: nowrap;
}

.phone-dropdown .custom-dropdown-toggle {
    padding: 14px 12px;
    font-size: 16px;
}

.phone-dropdown .custom-dropdown-label {
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    overflow: hidden;
}

.phone-dropdown .custom-dropdown-list {
    min-width: 320px;
    max-height: 380px;
    overflow-y: auto;
}

.country-name-list {
    font-size: 15px;
    font-weight: 500;
    color: #053333;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-right: 8px;
}

/* Country Search Input Styles */
.country-search-wrapper {
    display: block;
    padding: 8px;
    background: #FFFFFF;
    border-bottom: 1px solid rgba(184, 212, 50, 0.3);
    position: sticky;
    top: 0;
    z-index: 10;
    list-style: none;
}

.country-search-input {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid #E0E0E0;
    border-radius: 8px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    color: #161616;
    background: #F8F8F8;
    outline: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

.country-search-input:focus {
    border-color: #B8D432;
    background: #FFFFFF;
    box-shadow: 0 0 0 2px rgba(184, 212, 50, 0.15);
}

.country-search-input::placeholder {
    color: #999;
    font-size: 12px;
}

.custom-dropdown-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 24px;
    padding-right: 50px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 500;
    line-height: 1.4;
    color: #161616;
    cursor: pointer;
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    outline: none;
}

.custom-dropdown-toggle::after {
    content: '';
    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23053333' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
    transition: transform 0.35s ease;
}

.custom-dropdown.is-open .custom-dropdown-toggle::after,
.phone-dropdown.is-open .custom-dropdown-toggle::after {
    transform: rotate(180deg);
}

.custom-dropdown-toggle:hover {
    border-color: rgba(184, 212, 50, 0.6);
    transform: translateY(-2px);
    box-shadow: 0 12px 30px rgba(5, 51, 51, 0.12);
}

.custom-dropdown.is-open .custom-dropdown-toggle,
.phone-dropdown.is-open .custom-dropdown-toggle {
    border-color: #B8D432;
    box-shadow: 0 18px 40px rgba(184, 212, 50, 0.28);
    background: #FAFAFA;
}

.custom-dropdown-label {
    flex: 1;
    text-align: left;
    text-transform: none;
    color: inherit;
}

.custom-dropdown-list {
    position: absolute;
    list-style: none;
    margin: 0;
    padding: 14px;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 2px solid #B8D432;
    border-radius: 20px;
    box-shadow: 0 20px 50px rgba(5, 51, 51, 0.15);
    backdrop-filter: blur(20px);
    opacity: 0;
    pointer-events: none;
    transform: scale(0.95);
    transition: all 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 999999;
    max-height: 320px;
    overflow: hidden;
}

.custom-dropdown.is-open .custom-dropdown-list,
.phone-dropdown.is-open .custom-dropdown-list {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
    max-height: 340px;
    overflow-y: auto;
}

/* Ensure dropdown doesn't affect parent container height */
.custom-dropdown.is-open {
    overflow: visible;
}

.custom-dropdown.is-open .custom-dropdown-list {
    position: absolute;
    z-index: 999999;
}

.custom-dropdown-option {
    padding: 14px 18px;
    border-radius: 14px;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    font-weight: 500;
    transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
    cursor: pointer;
    position: relative;
    margin: 0;
}

.custom-dropdown-option+.custom-dropdown-option {
    margin-top: 4px;
}

.custom-dropdown-option:hover {
    background: #B8D432;
    color: #053333;
    transform: translateX(4px);
}

.custom-dropdown-option.is-active,
.custom-dropdown-option[aria-selected="true"] {
    background: #B8D432;
    color: #053333;
    font-weight: 600;
}

.phone-dropdown .custom-dropdown-option {
    font-size: 16px;
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.custom-dropdown-list::-webkit-scrollbar {
    width: 8px;
}

.custom-dropdown-list::-webkit-scrollbar-track {
    background: #F4F5F5;
    border-radius: 12px;
}

.custom-dropdown-list::-webkit-scrollbar-thumb {
    background: rgba(184, 212, 50, 0.4);
    border-radius: 12px;
}

.custom-dropdown-list::-webkit-scrollbar-thumb:hover {
    background: rgba(184, 212, 50, 0.6);
}

.custom-dropdown[data-disabled="true"] .custom-dropdown-toggle {
    cursor: not-allowed;
    opacity: 0.4;
    pointer-events: none;
}

.custom-dropdown[data-error="true"] .custom-dropdown-toggle {
    border-color: #ff6b6b;
    box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.15);
}

.custom-dropdown[data-error="true"] .custom-dropdown-toggle::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23ff6b6b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
}

.custom-dropdown.is-open .custom-dropdown-toggle,
.phone-dropdown.is-open .custom-dropdown-toggle {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}

.custom-dropdown.is-open .custom-dropdown-list,
.phone-dropdown.is-open .custom-dropdown-list {
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
}

.custom-dropdown.is-open .custom-dropdown-list::before,
.phone-dropdown.is-open .custom-dropdown-list::before {
    content: '';
    position: absolute;
    top: -10px;
    left: 40px;
    width: 18px;
    height: 10px;
    background: #FFFFFF;
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
    z-index: 1;
}

.phone-dropdown.is-open .custom-dropdown-list::before {
    left: 70px;
}

.custom-dropdown-toggle:focus-visible {
    border-color: #B8D432;
    box-shadow: 0 0 0 4px rgba(184, 212, 50, 0.28);
}

.custom-dropdown-option:focus,
.custom-dropdown-option:focus-visible {
    outline: none;
    background: #B8D432;
    color: #053333;
}

@media (max-width: 1024px) {
    .custom-dropdown-toggle {
        padding: 14px 20px;
        font-size: 20px;
        border-radius: 18px;
    }

    .custom-dropdown-list {
        border-radius: 18px;
    }

    .custom-dropdown-option {
        font-size: 18px;
        padding: 12px 16px;
    }

    .phone-dropdown {
        width: 160px;
        max-width: 160px;
        flex-shrink: 0;
    }

    .phone-dropdown .custom-dropdown-toggle {
        padding: 12px 10px;
        font-size: 15px;
    }

    .phone-dropdown .custom-dropdown-option {
        font-size: 15px;
        padding: 10px 12px;
    }

    .country-flag {
        font-size: 22px;
    }

    .country-code {
        font-size: 15px;
    }
}

@media (max-width: 768px) {
    .custom-dropdown-toggle {
        padding: 12px 18px;
        font-size: 18px;
        border-radius: 16px;
    }

    .custom-dropdown-list {
        padding: 10px;
        border-radius: 16px;
    }

    .custom-dropdown-option {
        font-size: 16px;
        padding: 10px 14px;
    }

    .phone-dropdown .custom-dropdown-list {
        min-width: 180px;
    }
}

@media (max-width: 480px) {
    .custom-dropdown-toggle {
        font-size: 16px;
        padding: 12px 16px;
        border-radius: 14px;
    }

    .phone-dropdown {
        width: 160px;
        max-width: 160px;
        flex-shrink: 0;
    }

    .phone-dropdown .custom-dropdown-toggle {
        padding: 14px 8px;
        font-size: 14px;
    }

    .country-flag {
        font-size: 20px;
    }

    .country-code {
        font-size: 14px;
    }

    .phone-dropdown .custom-dropdown-list {
        min-width: 170px;
    }

    .custom-dropdown-option {
        font-size: 15px;
        padding: 9px 12px;
    }

    .custom-dropdown.is-open .custom-dropdown-list,
    .phone-dropdown.is-open .custom-dropdown-list {
        max-height: 260px;
    }
}

@media (max-width: 320px) {
    .custom-dropdown-toggle {
        font-size: 15px;
        border-radius: 12px;
    }

    .phone-dropdown {
        width: 160px;
        max-width: 160px;
        flex-shrink: 0;
    }

    .phone-dropdown .custom-dropdown-toggle {
        padding: 12px 6px;
        font-size: 13px;
    }

    .country-flag {
        font-size: 18px;
    }

    .country-code {
        font-size: 13px;
    }

    .phone-dropdown .custom-dropdown-list {
        min-width: 160px;
    }

    .phone-dropdown .custom-dropdown-toggle {
        padding: 12px 6px;
        font-size: 15px;
    }

    .custom-dropdown-option {
        font-size: 14px;
    }

    /* Hide country names in small mobile, show only codes */
    .phone-dropdown .custom-dropdown-option {
        font-size: 0;
        /* Hide the text content */
    }

    .phone-dropdown .custom-dropdown-option::before {
        content: attr(data-value);
        font-size: 14px;
        color: #053333;
        font-weight: 500;
    }
}

/* Checkbox and Radio Pills */
.form-checkbox-grid,
.form-radio-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.form-checkbox-pill,
.form-radio-pill {
    position: relative;
    cursor: pointer;
}

.form-checkbox-pill input,
.form-radio-pill input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.form-checkbox-pill span,
.form-radio-pill span {
    display: block;
    padding: 16px 24px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 100px;
    text-align: center;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    user-select: none;
}

.form-checkbox-pill:hover span,
.form-radio-pill:hover span {
    background: #FAFAFA;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-checkbox-pill input:checked+span,
.form-radio-pill input:checked+span {
    background: #B8D432;
    color: #053333;
    font-weight: 600;
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(184, 212, 50, 0.3);
}

/* Submit Button */
.form-submit-btn {
    width: 100%;
    padding: 20px 32px;
    background: #B8D432;
    margin-top: 24px;
    border: none;
    border-radius: 100px;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
    overflow: hidden;
}

.form-submit-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(5, 51, 51, 0.15);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.form-submit-btn:hover {
    background: #9BB814;
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(184, 212, 50, 0.5);
}

.form-submit-btn:hover::before {
    width: 300px;
    height: 300px;
}

.form-submit-btn:active {
    transform: translateY(-2px);
}

/* Global Presence Section */
.contact-locations-section {
    background: #053333;
    padding: clamp(90px, 12vw, 140px) clamp(20px, 5vw, 60px);
    position: relative;
    overflow: hidden;
}

/* Floating Shapes in Locations Section */
.contact-locations-container {
    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    padding: 0 clamp(16px, 3vw, 32px);
    z-index: 1;
}

.contact-locations-container::before,
.contact-locations-container::after {
    content: '';
    position: absolute;
    pointer-events: none;
    background-size: contain;
    background-repeat: no-repeat;
    z-index: 0;
}

/* Contact page floating shapes - controlled by JavaScript scroll */
.markaworks-contact-floating {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    will-change: transform;
}

.markaworks-contact-floating img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.markaworks-contact-floating-1 {
    width: clamp(150px, 18vw, 280px);
    height: clamp(150px, 18vw, 280px);
    top: clamp(40px, 8vw, 150px);
    right: clamp(20px, 5vw, 80px);
    opacity: 0.75;
}

.markaworks-contact-floating-2 {
    width: clamp(130px, 14vw, 250px);
    height: clamp(130px, 14vw, 250px);
    bottom: clamp(40px, 8vw, 120px);
    left: clamp(20px, 5vw, 80px);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .markaworks-contact-floating {
        display: none;
    }
}

.contact-locations-header,
.contact-locations-grid,
.contact-cta-section {
    position: relative;
    z-index: 2;
}

.contact-locations-header {
    margin-bottom: 80px;
    animation: fadeInUp 0.8s ease-out;
}

.contact-locations-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: 72px;
    font-weight: 600;
    line-height: 1.1;
    margin: 0;
}

.locations-title-white {
    color: #F4F5F5;
}

.locations-title-green {
    color: #B8D432;
}

/* Locations Grid */
.contact-locations-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 80px;
}

.location-card {
    background: #F4F5F5;
    border-radius: 20px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation: fadeInUp 0.8s ease-out both;
    cursor: pointer;
}

.location-card:nth-child(1) {
    animation-delay: 0.1s;
}

.location-card:nth-child(2) {
    animation-delay: 0.2s;
}

.location-card:nth-child(3) {
    animation-delay: 0.3s;
}

.location-card:nth-child(4) {
    animation-delay: 0.4s;
}

.location-card:nth-child(5) {
    animation-delay: 0.5s;
}

.location-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(184, 212, 50, 0.2);
    background: #FFFFFF;
}

.location-icon {
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.location-card:hover .location-icon {
    transform: scale(1.1) rotate(5deg);
}

.location-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.location-content {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.location-title {
    color: #92cedd;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    transition: color 0.3s ease;
}

.location-card:hover .location-title {
    color: #B8D432;
}

/* Istanbul, Antalya, and Florida titles share the same muted lilac */
.location-card[data-location="istanbul"] .location-title,
.location-card[data-location="antalya"] .location-title,
.location-card[data-location="florida"] .location-title {
    color: #beb2d8;
}

.location-card[data-location="istanbul"]:hover .location-title,
.location-card[data-location="antalya"]:hover .location-title,
.location-card[data-location="florida"]:hover .location-title {
    color: #beb2d8;
}

.location-card[data-location="florida"] .location-image {
    object-fit: contain;
}

@media (max-width: 1199px) {
    .contact-locations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

.location-address {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    margin: 0;
}

/* Contact CTA Section */
.contact-cta-section {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    animation: fadeInUp 0.8s ease-out 0.5s both;
}

.contact-cta-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 60px;
    width: 100%;
    max-width: 800px;
}

.contact-cta-title {
    color: #B8D432;
    font-family: 'Inter Tight', sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
}

.contact-cta-button {
    padding: 20px 32px;
    background: #B8D432;
    border-radius: 100px;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
}

.contact-cta-button:hover {
    background: #9BB814;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 12px 32px rgba(184, 212, 50, 0.5);
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes floatRotate {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(30px, -30px) rotate(5deg);
    }

    50% {
        transform: translate(0, -50px) rotate(10deg);
    }

    75% {
        transform: translate(-30px, -30px) rotate(5deg);
    }
}

@keyframes floatRotateReverse {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
    }

    25% {
        transform: translate(-30px, 30px) rotate(-5deg);
    }

    50% {
        transform: translate(0, 50px) rotate(-10deg);
    }

    75% {
        transform: translate(30px, 30px) rotate(-5deg);
    }
}

/* ============================================
   RESPONSIVE DESIGN - CONTACT PAGE
   ============================================ */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {

    .contact-locations-section {
        padding: 140px 60px;
    }

    .contact-main-title {
        font-size: 50px;
    }

    .contact-info-text {
        font-size: 48px;
    }

    .contact-option-title {
        font-size: 48px;
    }

    .contact-option-description {
        font-size: 28px;
    }

    .contact-locations-title {
        font-size: 84px;
    }

    .contact-locations-grid .location-icon {
        width: 120px;
        height: 120px;
    }

    .location-title {
        font-size: 32px;
    }

    .contact-cta-title {
        font-size: 48px;
    }
}

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .contact-hero-image {
        height: 390px;
    }
}

/* Desktop to Large Tablet (992px-1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .contact-hero-image {
        height: 358px;
    }
}

/* Tablet (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .contact-hero-image {
        height: 312px;
    }

    .contact-options-section {
        padding: 60px clamp(24px, 4vw, 32px) 200px;
        overflow-x: hidden;
    }

    .contact-main-title {
        font-size: 38px;
    }

    .contact-info-text {
        font-size: 36px;
    }

    .contact-icon-wrapper {
        width: 52px;
        height: 52px;
    }

    .contact-icon-wrapper svg {
        width: 28px;
        height: 28px;
    }

    .contact-two-column {
        gap: 80px;
        min-height: 900px;
        padding-bottom: 140px;
    }

    .contact-option-title {
        font-size: 40px;
    }

    .contact-option-description {
        font-size: 22px;
        margin-bottom: 40px;
    }

    .contact-locations-section {
        padding: 100px 32px;
    }

    .contact-locations-title {
        font-size: 64px;
    }

    .contact-locations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        margin-bottom: 80px;
    }

    .contact-locations-grid .location-card:nth-child(5) {
        grid-column: 1 / -1;
        width: 100%;
        max-width: calc(50% - 10px);
        justify-self: center;
    }

    .location-card {
        padding: 28px;
    }

    .location-icon {
        width: 140px;
        height: 140px;
    }

    .location-title {
        font-size: 36px;
    }

    .location-address {
        font-size: 16px;
    }

    .contact-cta-title {
        font-size: 36px;
    }

    .contact-cta-button {
        font-size: 22px;
        padding: 18px 32px;
    }

    /* Form optimizations for tablet */
    .form-label {
        font-size: 22px;
    }

    .form-input,
    .form-textarea,
    .form-select {
        font-size: 20px;
        padding: 16px 20px;
    }

    .phone-country-code {
        font-size: 20px;
        width: 110px;
    }

    .phone-input-field {
        font-size: 20px;
    }

    .form-checkbox-pill span,
    .form-radio-pill span {
        font-size: 20px;
        padding: 16px 24px;
    }

    .form-submit-btn {
        font-size: 22px;
        padding: 20px 32px;
        margin-top: 20px;
    }

    /* Calendly height for tablet */
    .calendly-inline-widget {
        height: 720px;
    }

    /* Enhanced touch targets for tablet */
    .contact-info-card {
        padding: 8px;
        border-radius: 12px;
        min-height: 60px;
    }

    .custom-dropdown-toggle {
        min-height: 56px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .contact-hero-image-container {
        padding: 0;
    }

    .contact-hero-image {
        height: 260px;
        border-radius: 0;
    }

    .contact-options-section {
        padding: 60px 16px 90px;
        overflow-x: hidden;
    }

    .contact-options-container {
        max-width: 100%;
        padding: 0 8px;
    }

    .contact-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 32px;
        margin-bottom: 50px;
    }

    .contact-title-wrapper {
        flex: 0 0 100%;
        width: 100%;
    }

    .contact-main-title {
        font-size: 25px;
        line-height: 1.1;
    }

    .contact-info-cards {
        width: 100%;
        max-width: 100%;
        gap: 20px;
        box-sizing: border-box;
    }

    .contact-info-card {
        flex-direction: row;
        width: 100%;
        max-width: 100%;
        padding: 12px 12px;
        border-radius: 16px;
        background: rgba(255, 255, 255, 0.8);
        backdrop-filter: blur(10px);
        min-height: 60px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        box-sizing: border-box;
        overflow: hidden;
    }

    .contact-info-card:hover {
        background: rgba(255, 255, 255, 0.95);
        transform: translateY(-2px);
        box-shadow: 0 8px 24px rgba(5, 51, 51, 0.15);
    }

    .contact-icon-wrapper {
        width: 48px;
        height: 48px;
        flex-shrink: 0;
    }

    .contact-icon-wrapper svg {
        width: 24px;
        height: 24px;
    }

    .contact-info-text {
        font-size: 22px;
        font-weight: 500;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .contact-two-column {
        grid-template-columns: 1fr;
        gap: 50px;
        width: 100%;
        max-width: 100%;
        min-height: 700px;
        padding-bottom: 100px;
    }

    .contact-option-title {
        font-size: 28px;
        margin-bottom: 12px;
    }

    .contact-option-description {
        font-size: 17px;
        line-height: 1.5;
        margin-bottom: 28px;
    }

    .contact-column {
        gap: 32px;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        overflow: visible;
    }

    .contact-column-left {
        min-height: auto;
        order: 1;
    }

    .contact-column-right {
        order: 2;
    }

    /* Calendly optimizations for mobile */
    .calendly-inline-widget {
        height: 650px !important;
        min-height: 650px;
        border-radius: 20px;
        box-shadow: 0 8px 32px rgba(5, 51, 51, 0.15);
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Background shapes removed for cleaner design */

    /* Enhanced form styling for mobile */
    .form-group {
        gap: 10px;
        margin-bottom: 28px;
    }

    .form-group:last-of-type {
        margin-bottom: 0;
    }

    .form-label {
        font-size: 19px;
        font-weight: 600;
    }

    .form-input,
    .form-textarea,
    .form-select {
        font-size: 17px;
        padding: 16px 16px;
        border-radius: 18px;
        min-height: 52px;
        transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-input:focus,
    .form-textarea:focus,
    .form-select:focus {
        transform: translateY(-1px);
        box-shadow: 0 8px 24px rgba(184, 212, 50, 0.25);
    }

    .phone-input-wrapper {
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .phone-country-code {
        font-size: 17px;
        padding: 16px 8px;
        padding-right: 32px;
        width: 85px;
        max-width: 85px;
        border-radius: 18px;
        min-height: 52px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .phone-input-field {
        font-size: 17px;
        padding: 16px 16px;
        border-radius: 18px;
        min-height: 52px;
        flex: 1;
        min-width: 0;
        box-sizing: border-box;
    }

    .form-textarea {
        min-height: 140px;
        resize: vertical;
    }

    .form-checkbox-grid,
    .form-radio-grid {
        gap: 12px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .form-checkbox-pill span,
    .form-radio-pill span {
        font-size: 17px;
        padding: 16px 20px;
        min-height: 52px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-submit-btn {
        font-size: 19px;
        padding: 20px 24px;
        min-height: 60px;
        margin-top: 18px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Locations section mobile optimization */
    .contact-locations-section {
        padding: 70px 20px;
    }

    /* Location section background shapes removed for cleaner design */

    .contact-locations-header {
        margin-bottom: 50px;
    }

    .contact-locations-title {
        font-size: 42px;
        line-height: 1.1;
    }

    .contact-locations-grid {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-bottom: 50px;
    }

    .location-card {
        padding: 24px;
        border-radius: 20px;
        transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .location-card:hover {
        transform: translateY(-4px);
        box-shadow: 0 12px 40px rgba(184, 212, 50, 0.2);
    }

    .location-icon {
        width: 100px;
        height: 100px;
    }

    .location-title {
        font-size: 28px;
    }

    .location-address {
        font-size: 15px;
        line-height: 1.4;
    }

    .contact-cta-section {
        justify-content: center;
    }

    .contact-cta-content {
        flex-direction: column;
        gap: 28px;
        text-align: center;
        max-width: 100%;
    }

    .contact-cta-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .contact-cta-button {
        font-size: 19px;
        padding: 20px 32px;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    /* Custom dropdown mobile optimization */
    .custom-dropdown-toggle {
        min-height: 52px;
        padding: 16px 20px;
        border-radius: 18px;
    }

    .custom-dropdown-list {
        border-radius: 18px;
        max-height: 280px;
    }

    .custom-dropdown-option {
        padding: 14px 18px;
        border-radius: 14px;
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .contact-hero-image-container {
        padding: 0;
    }

    .contact-hero-image {
        height: 208px;
        border-radius: 0;
    }

    .contact-options-section {
        padding: 50px 16px 80px;
    }

    .contact-header {
        gap: 28px;
        margin-bottom: 40px;
    }

    .contact-main-title {
        font-size: 20px;
        line-height: 1.1;
    }

    .contact-info-cards {
        gap: 16px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-info-card {
        padding: 10px 10px;
        border-radius: 14px;
        min-height: 56px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .contact-icon-wrapper {
        width: 44px;
        height: 44px;
    }

    .contact-icon-wrapper svg {
        width: 22px;
        height: 22px;
    }

    .contact-info-text {
        font-size: 19px;
        font-weight: 500;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .contact-two-column {
        gap: 40px;
        min-height: 650px;
        padding-bottom: 80px;
    }

    .contact-option-title {
        font-size: 26px;
        margin-bottom: 10px;
    }

    .contact-option-description {
        font-size: 15px;
        line-height: 1.5;
        margin-bottom: 24px;
    }

    .contact-column {
        gap: 28px;
    }

    .contact-column-left {
        min-height: auto;
    }

    /* Calendly optimizations for small mobile */
    .calendly-inline-widget {
        height: clamp(550px, 147vw, 610px) !important;
        min-height: clamp(550px, 147vw, 610px);
        max-height: none !important;
        border-radius: 18px;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Background shapes removed for cleaner design */

    /* Enhanced form styling for small mobile */
    .form-group {
        gap: 8px;
        margin-bottom: 24px;
    }

    .form-group:last-of-type {
        margin-bottom: 0;
    }

    .form-label {
        font-size: 17px;
        font-weight: 600;
    }

    .form-input,
    .form-textarea,
    .form-select {
        font-size: 16px;
        padding: 14px 18px;
        border-radius: 16px;
        min-height: 48px;
    }

    .phone-input-wrapper {
        gap: 8px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .phone-country-code {
        font-size: 16px;
        padding: 14px 8px;
        padding-right: 32px;
        width: 80px;
        max-width: 80px;
        border-radius: 16px;
        min-height: 48px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .phone-input-field {
        font-size: 16px;
        padding: 14px 18px;
        border-radius: 16px;
        min-height: 48px;
    }

    .form-textarea {
        min-height: 120px;
    }

    .form-checkbox-grid,
    .form-radio-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .form-checkbox-pill span,
    .form-radio-pill span {
        font-size: 16px;
        padding: 14px 18px;
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .form-submit-btn {
        font-size: 18px;
        padding: 18px 28px;
        min-height: 56px;
        margin-top: 16px;
    }

    /* Locations section small mobile optimization */
    .contact-locations-section {
        padding: 60px 16px;
    }

    /* Location section background shapes removed for cleaner design */

    .contact-locations-header {
        margin-bottom: 40px;
    }

    .contact-locations-title {
        font-size: 34px;
        line-height: 1.1;
    }

    .contact-locations-grid {
        gap: 14px;
        margin-bottom: 40px;
    }

    .location-card {
        padding: 20px;
        border-radius: 18px;
    }

    .location-icon {
        width: 90px;
        height: 90px;
    }

    .location-title {
        font-size: 26px;
    }

    .location-address {
        font-size: 14px;
        line-height: 1.4;
    }

    .contact-cta-content {
        gap: 24px;
    }

    .contact-cta-title {
        font-size: 26px;
        line-height: 1.2;
    }

    .contact-cta-button {
        font-size: 18px;
        padding: 18px 28px;
        max-width: 280px;
    }

    /* Custom dropdown small mobile optimization */
    .custom-dropdown-toggle {
        min-height: 48px;
        padding: 14px 18px;
        border-radius: 16px;
        font-size: 16px;
    }

    .custom-dropdown-list {
        border-radius: 16px;
        max-height: 240px;
        padding: 8px;
    }

    .custom-dropdown-option {
        padding: 12px 16px;
        border-radius: 12px;
        min-height: 44px;
        font-size: 15px;
    }
}

/* Ultra Small (≤320px) */
@media (max-width: 320px) {
    .contact-hero-image-container {
        padding: 0;
    }

    .contact-hero-image {
        height: 182px;
        border-radius: 0;
    }

    .contact-options-section {
        padding: 40px 12px 70px;
    }

    .contact-header {
        gap: 24px;
        margin-bottom: 36px;
    }

    .contact-main-title {
        font-size: 18px;
        line-height: 1.1;
    }

    .contact-info-cards {
        gap: 14px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .contact-info-card {
        padding: 8px 8px;
        min-height: 52px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        overflow: hidden;
    }

    .contact-icon-wrapper {
        width: 40px;
        height: 40px;
    }

    .contact-icon-wrapper svg {
        width: 20px;
        height: 20px;
    }

    .contact-info-text {
        font-size: 17px;
        flex: 1;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .contact-two-column {
        gap: 36px;
        min-height: 600px;
        padding-bottom: 60px;
    }

    .contact-option-title {
        font-size: 22px;
        margin-bottom: 8px;
    }

    .contact-option-description {
        font-size: 14px;
        margin-bottom: 20px;
    }

    .contact-column {
        gap: 24px;
    }

    /* Calendly ultra small optimization */
    .calendly-inline-widget {
        height: 520px !important;
        min-height: 520px;
        border-radius: 16px;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Background shapes ultra small */
    .contact-options-section::before {
        width: 140px;
        height: 140px;
        right: -30px;
        opacity: 0.4;
    }

    .contact-options-section::after {
        width: 120px;
        height: 120px;
        left: -20px;
        opacity: 0.3;
    }

    /* Form ultra small optimization */
    .form-label {
        font-size: 16px;
    }

    .form-input,
    .form-textarea,
    .form-select {
        font-size: 15px;
        padding: 12px 16px;
        border-radius: 14px;
        min-height: 44px;
    }

    .phone-input-wrapper {
        gap: 6px;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .phone-country-code {
        font-size: 15px;
        padding: 12px 6px;
        padding-right: 28px;
        width: 75px;
        max-width: 75px;
        border-radius: 14px;
        min-height: 44px;
        flex-shrink: 0;
        box-sizing: border-box;
    }

    .phone-input-field {
        font-size: 15px;
        padding: 12px 16px;
        border-radius: 14px;
        min-height: 44px;
    }

    .phone-dropdown {
        width: 90px;
        max-width: 90px;
        flex-shrink: 0;
    }

    .phone-dropdown .custom-dropdown-toggle {
        padding: 12px 4px;
        font-size: 14px;
    }

    /* Hide country names in ultra small mobile, show only codes */
    .phone-dropdown .custom-dropdown-option {
        font-size: 0;
        /* Hide the text content */
    }

    .phone-dropdown .custom-dropdown-option::before {
        content: attr(data-value);
        font-size: 13px;
        color: #053333;
        font-weight: 500;
    }

    .form-textarea {
        min-height: 100px;
    }

    .form-checkbox-pill span,
    .form-radio-pill span {
        font-size: 15px;
        padding: 12px 16px;
        min-height: 44px;
    }

    .form-submit-btn {
        font-size: 17px;
        padding: 16px 24px;
        min-height: 52px;
        margin-top: 14px;
    }

    /* Locations ultra small */
    .contact-locations-section {
        padding: 50px 12px;
    }

    .contact-locations-section::before {
        width: 140px;
        height: 140px;
        right: -20px;
        opacity: 0.5;
    }

    .contact-locations-section::after {
        width: 120px;
        height: 120px;
        left: 5px;
        opacity: 0.4;
    }

    .contact-locations-header {
        margin-bottom: 36px;
    }

    .contact-locations-title {
        font-size: 30px;
        line-height: 1.1;
    }

    .contact-locations-grid {
        gap: 12px;
        margin-bottom: 36px;
    }

    .location-card {
        padding: 16px;
        border-radius: 16px;
    }

    .location-icon {
        width: 80px;
        height: 80px;
    }

    .location-title {
        font-size: 22px;
    }

    .location-address {
        font-size: 13px;
    }

    .contact-cta-content {
        gap: 20px;
    }

    .contact-cta-title {
        font-size: 22px;
    }

    .contact-cta-button {
        font-size: 17px;
        padding: 16px 24px;
        max-width: 260px;
    }

    /* Custom dropdown ultra small */
    .custom-dropdown-toggle {
        min-height: 44px;
        padding: 12px 16px;
        border-radius: 14px;
        font-size: 15px;
    }

    .custom-dropdown-list {
        border-radius: 14px;
        max-height: 200px;
        padding: 6px;
    }

    .custom-dropdown-option {
        padding: 10px 14px;
        border-radius: 10px;
        min-height: 40px;
        font-size: 14px;
    }
}

/* Accessibility & Performance */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /* Keep portfolio grids functional after the global motion reset above */
    .markaworks-projects-masonry .markaworks-project-card:not(.markaworks-hidden-project),
    .markaworks-portfolio-grid .markaworks-portfolio-card:not(.markaworks-hidden-project) {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .markaworks-projects-masonry .markaworks-project-card:hover,
    .markaworks-portfolio-grid .markaworks-portfolio-card:hover {
        opacity: 1 !important;
    }

    .related-projects-section .markaworks-project-card {
        opacity: 1 !important;
        visibility: visible !important;
        animation: none !important;
        transform: none !important;
    }

    /* P01 frame-cycle covers — keep product slideshow in reduced motion */
    .markaworks-frame-cycle .markaworks-frame-cycle__frame {
        animation-name: markaworks-frame-cycle !important;
        animation-duration: 2s !important;
        animation-timing-function: steps(1, end) !important;
        animation-iteration-count: infinite !important;
        animation-fill-mode: both !important;
    }

    .markaworks-frame-cycle .markaworks-frame-cycle__frame:nth-child(1) {
        animation-delay: 0s !important;
    }

    .markaworks-frame-cycle .markaworks-frame-cycle__frame:nth-child(2) {
        animation-delay: -1.5s !important;
    }

    .markaworks-frame-cycle .markaworks-frame-cycle__frame:nth-child(3) {
        animation-delay: -1s !important;
    }

    .markaworks-frame-cycle .markaworks-frame-cycle__frame:nth-child(4) {
        animation-delay: -0.5s !important;
    }

    .contact-options-section::before,
    .contact-options-section::after,
    .contact-locations-section::before,
    .contact-locations-section::after {
        animation: none !important;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {

    .contact-info-card,
    .location-card,
    .form-input,
    .form-textarea,
    .form-select,
    .custom-dropdown-toggle {
        border: 2px solid currentColor !important;
    }

    .contact-options-section::before,
    .contact-options-section::after,
    .contact-locations-section::before,
    .contact-locations-section::after {
        opacity: 0.2 !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    .contact-info-card:hover,
    .location-card:hover,
    .form-submit-btn:hover,
    .contact-cta-button:hover,
    .form-checkbox-pill:hover span,
    .form-radio-pill:hover span {
        transform: none;
    }

    .contact-info-card:active {
        transform: scale(0.98);
        background: rgba(255, 255, 255, 0.9);
    }

    .location-card:active {
        transform: scale(0.98);
    }

    .form-submit-btn:active,
    .contact-cta-button:active {
        transform: scale(0.98);
    }

    .form-checkbox-pill:active span,
    .form-radio-pill:active span {
        transform: scale(0.98);
    }

    /* Enhanced touch targets */
    .contact-info-card,
    .location-card,
    .form-input,
    .form-textarea,
    .form-select,
    .phone-country-code,
    .phone-input-field,
    .custom-dropdown-toggle,
    .form-checkbox-pill span,
    .form-radio-pill span,
    .form-submit-btn,
    .contact-cta-button {
        min-height: 44px;
    }
}

/* Focus management for better accessibility */
.contact-info-card:focus-visible,
.location-card:focus-visible,
.form-input:focus-visible,
.form-textarea:focus-visible,
.form-select:focus-visible,
.phone-country-code:focus-visible,
.phone-input-field:focus-visible,
.custom-dropdown-toggle:focus-visible,
.form-submit-btn:focus-visible,
.contact-cta-button:focus-visible {
    outline: 3px solid #B8D432;
    outline-offset: 2px;
    border-color: #B8D432;
}

/* Landscape orientation optimizations for mobile */
@media (max-width: 768px) and (orientation: landscape) {
    .contact-main-title {
        font-size: 22px;
    }

    .contact-locations-title {
        font-size: 36px;
    }

    .contact-header {
        margin-bottom: 40px;
    }

    .contact-locations-header {
        margin-bottom: 40px;
    }

    .calendly-inline-widget {
        height: 480px;
    }
}

/* Print styles */
@media print {

    .contact-options-section::before,
    .contact-options-section::after,
    .contact-locations-section::before,
    .contact-locations-section::after {
        display: none;
    }

    .calendly-inline-widget {
        display: none;
    }

    .contact-info-card,
    .location-card {
        break-inside: avoid;
    }
}

/* Additional mobile-first enhancements */
@media (max-width: 1024px) {

    /* Ensure proper spacing between sections */
    .contact-options-section {
        position: relative;
        z-index: 1;
    }

    .contact-locations-section {
        position: relative;
        z-index: 1;
    }

    /* Optimize background shapes for performance */
    .contact-options-section::before,
    .contact-options-section::after,
    .contact-locations-section::before,
    .contact-locations-section::after {
        will-change: transform;
        backface-visibility: hidden;
    }
}

/* ============================================
   MarkaWorks Brand Signature Overlay (MW.png)
   ============================================ */
:root {
    --mw-overlay-image: url('/wp-content/uploads/2025/10/MW.png');
}

/* 1) Homepage Branding Strategy - visible by default behind text */
.markaworks-branding-main-card {
    position: relative;
    overflow: hidden;
}

.markaworks-branding-main-card::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 80%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: auto 100%;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18)) brightness(1.08) contrast(1.04);
}

/* 2) Final CTA — watermark in main FINAL CTA block (.markaworks-final-cta-card::after + .markaworks-final-cta-watermark) */

/* 3) Portfolio Cards - show overlay when overlay layer is visible (hover) */
.markaworks-portfolio-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.markaworks-portfolio-overlay::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(180px, 28vw, 520px);
    height: clamp(180px, 28vw, 520px);
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    /* hidden until hover */
    pointer-events: none;
    z-index: 3;
    /* above overlay background */
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18)) brightness(1.12) contrast(1.06);
}

.markaworks-portfolio-card:hover .markaworks-portfolio-overlay::after {
    opacity: 1;
}

.markaworks-portfolio-overlay-content {
    position: relative;
    z-index: 4;
}

/* Portfolio fallback watermark on image container (homepage) - DISABLED */
.markaworks-portfolio-image-container {
    position: relative;
}

.markaworks-portfolio-image-container::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(180px, 28vw, 520px);
    height: clamp(180px, 28vw, 520px);
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    /* hidden until hover */
    pointer-events: none;
    z-index: 3;
    /* above image */
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18)) brightness(1.12) contrast(1.06);
}

.markaworks-portfolio-card:hover .markaworks-portfolio-image-container::after {
    opacity: 0;
    /* Keep MW watermark hidden */
}

/* 4) Projects Cards - show overlay when overlay layer is visible (hover) */
.markaworks-project-overlay::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(140px, 24vw, 420px);
    height: clamp(140px, 24vw, 420px);
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 0;
    /* hidden until hover */
    pointer-events: none;
    z-index: 0;
}

.markaworks-project-card:hover .markaworks-project-overlay::after {
    opacity: 1;
}

.markaworks-project-overlay-content {
    position: relative;
    z-index: 1;
}

/* 5) Homepage Stats - large statistic cards */
.markaworks-stat-card {
    position: relative;
    overflow: hidden;
}

.markaworks-stat-card:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% auto;
    /* full width, auto height */
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18)) brightness(1.1) contrast(1.05);
}

/* 6) Testimonial mini stats - chips that go green on hover */
.markaworks-stat-item {
    position: relative;
    overflow: hidden;
}

.markaworks-stat-item:hover::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(64px, 18vw, 160px);
    height: clamp(64px, 18vw, 160px);
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
}

/* 7b) Homepage Branding - service cards: show on hover and when active */
.markaworks-service-card {
    position: relative;
    overflow: hidden;
}

.markaworks-service-card:hover::after,
.markaworks-service-card.active::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: clamp(120px, 20vw, 360px);
    height: clamp(120px, 20vw, 360px);
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    opacity: 1;
    /* overlay for service cards */
    pointer-events: none;
    z-index: 1;
    /* above background */
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18)) brightness(1.08) contrast(1.05);
}

/* About page stats cards */
.markaworks-about-stat-card {
    position: relative;
    overflow: hidden;
}

.markaworks-about-stat-card:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% auto;
    /* full width, auto height */
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18));
}


/* About page CTA and Process cards watermark */
.markaworks-about-cta-card {
    position: relative;
    overflow: hidden;
}

.markaworks-about-cta-card:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18));
}

.markaworks-process-card {
    position: relative;
    overflow: hidden;
}

.markaworks-process-card:hover::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 0;
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18));
}

/* Services What We Do - overlay stacking fixes */
.markaworks-what-card {
    position: relative;
}

.markaworks-what-card-header,
.markaworks-what-card-content {
    position: relative;
    z-index: 2;
}

.markaworks-what-card:hover:not(.active)::after,
.markaworks-what-card.active::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    height: 100%;
    background-image: var(--mw-overlay-image);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center;
    opacity: 1;
    pointer-events: none;
    z-index: 1;
    /* under text */
    filter: drop-shadow(0 0 10px rgba(5, 51, 51, 0.18));
}

.markaworks-what-card-bg {
    z-index: 0;
}

/* Responsive positioning tweaks for small devices */
@media (max-width: 768px) {
    .markaworks-branding-main-card::after {
        left: 50%;
        top: 50%;
        bottom: auto;
        transform: translate(-50%, -50%);
        width: clamp(140px, 44vw, 260px);
        height: clamp(140px, 44vw, 260px);
        opacity: 1;
    }

    .markaworks-final-cta-card::after,
    .markaworks-final-cta-watermark {
        left: clamp(24px, 5vw, 60px);
        width: min(484px, 92vw);
        height: clamp(100px, 26vw, 168px);
        transform: none;
        opacity: 1;
    }
}

/* Ensure FAQ section is properly spaced after contact sections */
.contact-locations-section+.markaworks-faq {
    margin-top: 0;
    padding-top: 80px;
}

@media (max-width: 768px) {
    .contact-locations-section+.markaworks-faq {
        padding-top: 60px;
    }
}

@media (max-width: 480px) {
    .contact-locations-section+.markaworks-faq {
        padding-top: 50px;
    }
}

/* ============================================
   PROJECT DETAIL PAGE STYLES
   ============================================ */

/* Project Hero Section */
.project-hero-section {
    background: transparent;
    padding-top: 0 !important;
    padding-bottom: 80px;
    overflow: hidden;
}

.project-hero-container {
    max-width: 1920px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 40px;
    align-items: center;
    box-sizing: border-box;
}

.project-hero-image {
    width: 100% !important;
    max-width: 100% !important;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    max-height: 70vh !important;
    min-height: 450px !important;
    object-fit: cover !important;
    object-position: center center !important;
    padding: 0 !important;
    margin-top: 39px !important;
    border-radius: 0 !important;
    display: block !important;
    transition: transform 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        box-shadow 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.7s ease;
    will-change: transform;
    box-shadow: 0 8px 32px rgba(5, 51, 51, 0.08);
    cursor: pointer;
}

.project-hero-image:hover {
    transform: scale(1.01) translateY(-4px);
    box-shadow: 0 24px 64px rgba(5, 51, 51, 0.12);
    filter: brightness(1.03) saturate(1.05);
}

.project-hero-content {
    max-width: 100%;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    box-sizing: border-box;
}

.project-hero-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 40px;
    min-height: 200px;
}

.project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: flex-start;
}

.project-tag {
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(244, 245, 245, 0.3);
    color: #F4F5F5;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 19.2px;
    opacity: 0.7;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: default;
    background: transparent;
}

.project-tag:hover {
    opacity: 1;
    border-color: rgba(184, 212, 50, 0.6);
    background: rgba(184, 212, 50, 0.1);
    color: #B8D432;
    transform: translateY(-1px);
}

.project-title-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-main-title {
    color: #053333 !important;

    font-size: 72px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 79.2px;
    margin: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-subtitle {
    color: #B8D432;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 19.2px;
    margin: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.1s backwards;
}

.project-hero-right {
    max-width: 785px;
    flex-shrink: 1;
    flex: 1;
}

.project-intro-text {
    font-size: 24px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.2s backwards;
}

/* Project Content Section */
.project-content-section,
.project-images-section {
    background: transparent;
    overflow: hidden;
}

.project-content-section {
    margin-top: 30px !important;
}

/* Beat per-page white !important so the text block stays transparent */
body:has(.project-hero-section) .project-hero-section,
body:has(.project-content-section) .project-content-section,
body:has(.project-images-section) .project-images-section,
html body .project-hero-section,
html body .project-content-section,
html body .project-images-section {
    background: transparent !important;
    background-color: transparent !important;
}

html body .project-hero-section {
    padding-top: 0 !important;
}

html body .project-hero-image {
    margin-top: 39px !important;
}

.project-content-container {
    max-width: 1600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 80px;
    box-sizing: border-box;
}

.project-image-stack {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.project-stack-image {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease;
    will-change: transform;
}

.project-stack-image:hover {
    transform: scale(1.01);
}

.project-image-stack-final {
    border-radius: 0px;
    overflow: hidden;
}

.project-text-block {
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 60px;
    box-sizing: border-box;
}

.project-section-title {
    color: #053333 !important;
    max-width: 440px;
    flex-shrink: 1;
    flex: 0 1 440px;
    font-size: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 48px;
    margin: 0;
    transition: color 0.3s ease;
}

.project-section-description {
    max-width: 785px;
    flex-shrink: 1;
    flex: 1;
    color: #F4F5F5;
    font-size: 24px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    line-height: 33.6px;
    margin: 0;
}

/* Ensure all project containers handle padding correctly to prevent overflow on zoom */
/* Using !important to override inline styles in individual portfolio HTML files */
.project-hero-container,
.project-hero-content,
.project-content-container,
.project-content-article,
.project-images-container,
.project-text-block,
.related-projects-container {
    box-sizing: border-box !important;
}

/* Prevent overflow by ensuring containers can shrink */
.project-hero-content {
    max-width: 100% !important;
}

.project-hero-right,
.project-section-description {
    flex-shrink: 1 !important;
}

/* Related Projects Section */
.related-projects-section {
    background: #EAE5E3;
    padding: 80px 60px 120px;
}

.related-projects-container {
    max-width: 1600px;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 80px;
}

.related-projects-title {
    color: #0B4444;
    font-size: 72px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 79.2px;
    margin: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.related-projects-grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(2, 1fr) 1.42fr;
    gap: 20px;
    max-width: 1600px;
}

.related-project-card {
    display: flex;
    flex-direction: column;
    gap: 24px;
    transition: transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    position: relative;
}

.related-project-card::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 24px;
    background: linear-gradient(135deg, rgba(184, 212, 50, 0.05), rgba(148, 205, 217, 0.05));
    opacity: 0;
    transition: opacity 0.5s ease;
    z-index: -1;
}

.related-project-card:hover::before {
    opacity: 1;
}

.related-project-card:hover {
    transform: translateY(-6px);
}

.related-project-card:hover .related-project-image {
    transform: scale(1.03);
    filter: brightness(1.02);
}

.related-project-card-large {
    grid-column: 3;
    grid-row: 1;
}

.related-project-image-wrapper {
    width: 100%;
    height: 450px;
    border-radius: 20px;
    overflow: hidden;
    background: #F4F5F5;
    padding: 24px;
    transition: box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    position: relative;
}

.related-project-image-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    border: 1px solid rgba(184, 212, 50, 0);
    transition: border-color 0.5s ease;
}

.related-project-card:hover .related-project-image-wrapper {
    box-shadow: 0 16px 48px rgba(5, 51, 51, 0.1);
}

.related-project-card:hover .related-project-image-wrapper::before {
    border-color: rgba(184, 212, 50, 0.2);
}

.related-project-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 12px;
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        filter 0.6s ease;
}

.related-project-info {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.related-project-name {
    color: #161616;
    font-size: 32px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 38.4px;
    margin: 0;
    transition: color 0.4s ease, transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.related-project-card:hover .related-project-name {
    color: #B8D432;
    transform: translateX(4px);
}

.related-project-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.related-project-tag {
    padding: 6px 12px;
    border-radius: 100px;
    border: 1px solid rgba(22, 22, 22, 0.3);
    color: #161616;
    font-size: 16px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    text-transform: uppercase;
    line-height: 19.2px;
    opacity: 0.7;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    background: transparent;
}

.related-project-card:hover .related-project-tag {
    opacity: 1;
    border-color: rgba(184, 212, 50, 0.5);
    background: rgba(184, 212, 50, 0.08);
    color: #053333;
}

/* Floating View Button - Modern & Minimal */
.related-projects-view-button {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    background: #F4F5F5;
    border-radius: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 24px;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    box-shadow: 0 8px 24px rgba(5, 51, 51, 0.1);
    z-index: 10;
    pointer-events: auto;
    border: 2px solid transparent;
}

/* Subtle ring effect */
.related-projects-view-button::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 100px;
    border: 1px solid rgba(184, 212, 50, 0);
    transition: border-color 0.5s ease;
    z-index: -1;
}

.related-projects-view-button:hover::before {
    border-color: rgba(184, 212, 50, 0.3);
}

.related-projects-view-button:hover {
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 16px 48px rgba(5, 51, 51, 0.15);
    border-color: rgba(184, 212, 50, 0.2);
    background: #FAFAFA;
}

.related-projects-view-button:active {
    transform: translate(-50%, -50%) scale(1.02);
    transition-duration: 0.15s;
}

.related-projects-view-text {
    color: #053333;
    font-size: 24px;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 600;
    line-height: 28.8px;
    text-align: center;
}

/* Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scroll Animations - Initial State */
/* PERFORMANCE FIX: Project images now visible immediately for better Speed Index */
/* Images load instantly without waiting for viewport-based JavaScript animations */
.project-stack-image {
    /* Immediate visibility - no scroll animations */
    opacity: 1;
    /* Hover effects setup */
    position: relative;
    overflow: visible;
    cursor: pointer;
    /* Hover transition only - not for initial load animation */
    /* Explicitly NOT transitioning opacity to ensure immediate visibility */
    transition: transform 0.4s cubic-bezier(0.19, 1, 0.22, 1),
        filter 0.4s cubic-bezier(0.19, 1, 0.22, 1),
        box-shadow 0.4s cubic-bezier(0.19, 1, 0.22, 1);
    filter: grayscale(0);
}

/* Text blocks and related cards still use subtle scroll animations */
.project-text-block,
.related-project-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Animated State - Applied via JavaScript */
.project-text-block.animate-in,
.related-project-card.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered Animation Delays - Only for non-image elements */
.related-project-card.animate-in {
    transition-delay: calc(var(--stagger-delay, 0) * 0.08s);
}

/* Glow effect on hover */
.project-stack-image::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: #B8D432;
    opacity: 0;
    z-index: -1;
    transition: opacity 0.7s cubic-bezier(0.19, 1, 0.22, 1);
    pointer-events: none;
}

/* Subtle vignette overlay */
.project-stack-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at center, transparent 40%, rgba(5, 51, 51, 0.15) 100%);
    opacity: 0;
    transition: opacity 0.7s ease;
    pointer-events: none;
    z-index: 1;
}

.project-stack-image:hover::before {
    opacity: 0.15;
}

.project-stack-image:hover::after {
    opacity: 0.6;
}

.project-stack-image:hover {
    transform: scale(1.015);
    filter: grayscale(0) brightness(1.05) contrast(1.03);
    box-shadow: 0 20px 60px rgba(184, 212, 50, 0.12),
        0 8px 24px rgba(5, 51, 51, 0.08);
}

/* Text Block Hover Effects - Elegant & Minimal */
.project-text-block {
    position: relative;
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    padding: 0 40px;
}

.project-section-title {
    position: relative;
    display: inline-block;
    transition: color 0.4s ease;
}

/* Elegant left border accent */
.project-text-block::before {
    content: '';
    position: absolute;
    left: 40px;
    top: 0;
    bottom: 0;
    width: 0;
    background: #B8D432;
    transition: width 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-text-block:hover::before {
    width: 4px;
}

.project-text-block:hover .project-section-title {
    color: #B8D432;
    transform: translateX(12px);
}

.project-text-block:hover .project-section-description {
    transform: translateX(12px);
    opacity: 0.9;
}

.project-section-description {
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Responsive Design */

/* Large Desktop (1200px+) */
@media (min-width: 1200px) {
    .project-hero-container {
        padding: 0 40px;
    }

    .project-main-title {
        font-size: 80px;
        line-height: 88px;
    }

    .related-projects-title {
        font-size: 80px;
        line-height: 88px;
    }
}

/* Tablet (769px - 1024px) */
@media (max-width: 1024px) {
    .related-projects-section {
        padding: 60px 40px 100px;
    }

    .project-hero-content {
        flex-direction: column;
        gap: 40px;
    }

    .project-hero-left {
        width: 100%;
        min-height: auto;
    }

    .project-hero-right {
        width: 100%;
    }

    .project-main-title {
        font-size: 56px;
        line-height: 61.6px;
    }

    .project-intro-text {
        font-size: 20px;
        line-height: 28px;
    }

    .project-text-block {
        flex-direction: column;
        gap: 30px;
    }

    .project-section-title {
        width: 100%;
        font-size: 36px;
        line-height: 43.2px;
    }

    .project-section-description {
        width: 100%;
        font-size: 20px;
        line-height: 28px;
    }

    .related-projects-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }

    .related-project-card-large {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .related-projects-title {
        font-size: 56px;
        line-height: 61.6px;
    }

    .related-projects-view-button {
        width: 140px;
        height: 140px;
    }
}

/* Mobile (≤768px) */
@media (max-width: 768px) {
    .project-hero-section {
        padding-bottom: 60px;
    }

    .project-hero-container {
        gap: 30px;
    }

    .project-hero-image {
        aspect-ratio: 4 / 3 !important;
        height: auto !important;
        padding: 0;
    }

    .project-hero-content {
        padding: 0 24px;
        gap: 30px;
    }

    .project-hero-left {
        gap: 30px;
    }

    .project-main-title {
        font-size: 48px;
        line-height: 52.8px;
    }

    .project-subtitle {
        font-size: 14px;
        line-height: 16.8px;
    }

    .project-intro-text {
        font-size: 18px;
        line-height: 25.2px;
    }

    .project-tag {
        font-size: 14px;
        padding: 5px 10px;
    }

    .project-content-container {
        gap: 60px;
    }

    .project-text-block {
        padding: 0 24px;
        gap: 24px;
    }

    .project-section-title {
        font-size: 32px;
        line-height: 38.4px;
    }

    .project-section-description {
        font-size: 18px;
        line-height: 25.2px;
    }

    .related-projects-section {
        padding: 60px 24px 100px;
    }

    .related-projects-container {
        gap: 60px;
    }

    .related-projects-title {
        font-size: 48px;
        line-height: 52.8px;
    }

    .related-projects-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }

    .related-project-card-large {
        grid-column: 1;
    }

    .related-project-image-wrapper {
        height: 350px;
        padding: 20px;
    }

    .related-project-name {
        font-size: 28px;
        line-height: 33.6px;
    }

    .related-project-tag {
        font-size: 14px;
    }

    .related-projects-view-button {
        width: 120px;
        height: 120px;
        font-size: 20px;
    }

    .related-projects-view-text {
        font-size: 20px;
        line-height: 24px;
    }
}

/* Small Mobile (≤480px) */
@media (max-width: 480px) {
    .project-hero-section {
        padding-bottom: 50px;
    }

    .project-hero-container {
        gap: 24px;
    }

    .project-hero-image {
        aspect-ratio: 1 / 1 !important;
        height: auto !important;
        padding: 0;
    }

    .project-hero-content {
        padding: 0 20px;
        gap: 24px;
    }

    .project-hero-left {
        gap: 24px;
    }

    .project-main-title {
        font-size: 36px;
        line-height: 39.6px;
    }

    .project-subtitle {
        font-size: 12px;
        line-height: 14.4px;
    }

    .project-intro-text {
        font-size: 16px;
        line-height: 22.4px;
    }

    .project-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .project-content-container {
        gap: 50px;
    }

    .project-text-block {
        padding: 0 20px;
        gap: 20px;
    }

    .project-section-title {
        font-size: 28px;
        line-height: 33.6px;
    }

    .project-section-description {
        font-size: 16px;
        line-height: 22.4px;
    }

    .related-projects-section {
        padding: 50px 20px 80px;
    }

    .related-projects-container {
        gap: 50px;
    }

    .related-projects-title {
        font-size: 36px;
        line-height: 39.6px;
    }

    .related-projects-grid {
        gap: 24px;
    }

    .related-project-image-wrapper {
        height: 300px;
        padding: 16px;
    }

    .related-project-name {
        font-size: 24px;
        line-height: 28.8px;
    }

    .related-project-tag {
        font-size: 12px;
        padding: 4px 8px;
    }

    .related-projects-view-button {
        width: 100px;
        height: 100px;
    }

    .related-projects-view-text {
        font-size: 18px;
        line-height: 21.6px;
    }
}

/* Ultra Small Mobile (≤320px) */
@media (max-width: 320px) {
    .project-hero-image {
        height: 200px;
        padding: 8px;
    }

    .project-hero-content {
        padding: 0 16px;
    }

    .project-main-title {
        font-size: 32px;
        line-height: 35.2px;
    }

    .project-intro-text {
        font-size: 14px;
        line-height: 19.6px;
    }

    .project-text-block {
        padding: 0 16px;
    }

    .project-section-title {
        font-size: 24px;
        line-height: 28.8px;
    }

    .project-section-description {
        font-size: 14px;
        line-height: 19.6px;
    }

    .related-projects-section {
        padding: 40px 16px 60px;
    }

    .related-projects-title {
        font-size: 32px;
        line-height: 35.2px;
    }

    .related-project-image-wrapper {
        height: 250px;
        padding: 12px;
    }

    .related-projects-view-button {
        width: 90px;
        height: 90px;
    }

    .related-projects-view-text {
        font-size: 16px;
        line-height: 19.2px;
    }
}

/* Accessibility & Performance */
@media (prefers-reduced-motion: reduce) {

    .project-hero-image,
    .project-stack-image,
    .related-project-card,
    .related-projects-view-button,
    .related-projects-section .markaworks-project-card,
    .related-projects-section .markaworks-project-image:not(.markaworks-frame-cycle__frame) {
        transition: none;
        animation: none;
        opacity: 1 !important;
        transform: none !important;
    }

    .related-projects-section .markaworks-project-card:hover {
        transform: translateY(-8px) !important;
    }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {

    .project-tag:hover,
    .related-project-tag:hover {
        transform: none;
    }

    .related-project-card {
        transition: transform 0.2s ease;
    }

    .related-projects-view-button {
        width: 140px;
        height: 140px;
    }
}

/* ============================================================
   CONTACT FORM MESSAGES & ANIMATIONS
   ============================================================ */

.markaworks-form-message {
    animation: slideIn 0.3s ease;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-10px);
    }
}

/* Contact form submit button states */
.form-submit-btn:disabled {
    cursor: not-allowed;
    opacity: 0.6 !important;
}

/* ================================================
   MarkaWorks BLOG DETAIL — Editorial layout
   Beige page (#EAE5E3), dark teal text (#053333)
   Structure: overlapping hero + TOC | article | share
   Scoped to single blog posts only
   ================================================ */

@keyframes mwBlogFadeUp {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ---------- Page shell (beige) ---------- */
body.single-post.category-blog,
body.markaworks-blog-post-page,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-featured-image),
body.single-post:not(.post-template-full-wdith):has(.mw-blog-content-block),
body.single-post:not(.post-template-full-wdith):has(.mw-blog-article) {
    --nav-h: 80px !important;
    --mw-blog-bg: #EAE5E3;
    --mw-blog-ink: #053333;
    --mw-blog-ink-soft: rgba(5, 51, 51, 0.68);
    --mw-blog-ink-mute: rgba(5, 51, 51, 0.48);
    --mw-blog-accent: #B8D432;
    --mw-blog-panel: #053333;
    --mw-blog-panel-ink: #F4F5F5;
    --mw-blog-surface: rgba(255, 255, 255, 0.55);
    --mw-blog-line: rgba(5, 51, 51, 0.12);
    background: var(--mw-blog-bg) !important;
    color: var(--mw-blog-ink) !important;
    /* overflow-x:hidden on global body kills position:sticky — use clip on blog singles */
    overflow-x: clip !important;
    overflow-y: visible !important;
}

/* Mobile menu must beat blog stacking + overflow clip on singles */
body.single-post.category-blog.markaworks-nav-open,
body.markaworks-blog-post-page.markaworks-nav-open,
body.single-post:has(.mw-blog-article).markaworks-nav-open {
    overflow: hidden !important;
}

body.single-post.category-blog .markaworks-navbar,
body.markaworks-blog-post-page .markaworks-navbar,
body.single-post:has(.mw-blog-article) .markaworks-navbar {
    z-index: 10050 !important;
}

body.single-post.category-blog .markaworks-overlay,
body.markaworks-blog-post-page .markaworks-overlay,
body.single-post:has(.mw-blog-article) .markaworks-overlay {
    z-index: 10040 !important;
}

@media (max-width: 768px) {
    body.single-post.category-blog .markaworks-nav-links,
    body.markaworks-blog-post-page .markaworks-nav-links,
    body.single-post:has(.mw-blog-article) .markaworks-nav-links {
        position: fixed !important;
        top: 0 !important;
        right: -100% !important;
        left: auto !important;
        transform: none !important;
        z-index: 10060 !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #053333 !important;
    }

    body.single-post.category-blog .markaworks-nav-links.markaworks-active,
    body.markaworks-blog-post-page .markaworks-nav-links.markaworks-active,
    body.single-post:has(.mw-blog-article) .markaworks-nav-links.markaworks-active {
        right: 0 !important;
    }

    body.single-post.category-blog .markaworks-mobile-menu-btn,
    body.markaworks-blog-post-page .markaworks-mobile-menu-btn,
    body.single-post:has(.mw-blog-article) .markaworks-mobile-menu-btn {
        display: flex !important;
        position: relative;
        z-index: 10070 !important;
        pointer-events: auto !important;
    }
}

@media (max-width: 768px) {
    body.single-post.category-blog,
    body.markaworks-blog-post-page,
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-featured-image),
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-content-block),
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-article) {
        --nav-h: 70px !important;
    }
}

@media (max-width: 480px) {
    body.single-post.category-blog,
    body.markaworks-blog-post-page,
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-featured-image),
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-content-block),
    body.single-post:not(.post-template-full-wdith):has(.mw-blog-article) {
        --nav-h: 58px !important;
    }
}

body.single-post.category-blog .wp-site-blocks,
body.markaworks-blog-post-page .wp-site-blocks,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-featured-image) .wp-site-blocks,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-content-block) .wp-site-blocks,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-article) .wp-site-blocks {
    background: var(--mw-blog-bg) !important;
    min-height: 100vh !important;
    padding: 0 !important;
    overflow: visible !important;
}

body.single-post.category-blog main.wp-block-group,
body.markaworks-blog-post-page main.wp-block-group,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-featured-image) main.wp-block-group,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-content-block) main.wp-block-group,
body.single-post:not(.post-template-full-wdith):has(.mw-blog-article) main.wp-block-group,
body.single-post.category-blog main,
body.markaworks-blog-post-page main,
body.single-post:has(.mw-blog-featured-image) main,
body.single-post:has(.mw-blog-content-block) main,
body.single-post:has(.mw-blog-article) main {
    background: var(--mw-blog-bg) !important;
    padding: calc(var(--nav-h, 80px) + 36px) 0 100px 0 !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
    color: var(--mw-blog-ink) !important;
    overflow: visible !important;
}

body.single-post.category-blog article,
body.single-post.category-blog main .wp-block-group,
body.markaworks-blog-post-page article,
body.single-post.category-blog .entry-content,
body.single-post.category-blog .wp-block-post-content,
body.markaworks-blog-post-page .entry-content,
body.markaworks-blog-post-page .wp-block-post-content {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--mw-blog-ink) !important;
}

/* Hide default WP title shell once JS relocates it into the hero */
body.single-post.category-blog .wp-block-group.has-global-padding:has(.wp-block-post-title):not(.mw-blog-keep),
body.markaworks-blog-post-page .wp-block-group.has-global-padding:has(.wp-block-post-title):not(.mw-blog-keep) {
    display: none !important;
}

body.single-post.category-blog h1.wp-block-post-title:not(.mw-blog-hero-title),
body.markaworks-blog-post-page h1.wp-block-post-title:not(.mw-blog-hero-title) {
    /* fallback if JS has not run yet */
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(32px, 4.2vw, 52px) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.03em !important;
    max-width: 1400px;
    margin: 0 auto 24px !important;
    padding: 0 clamp(20px, 4vw, 40px) !important;
}

/* ---------- Layout root ---------- */
.mw-blog-layout {
    width: min(1400px, calc(100% - 48px));
    max-width: 1400px;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
    animation: mwBlogFadeUp 0.65s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}

@media (max-width: 768px) {
    .mw-blog-layout {
        width: min(100%, calc(100% - 28px));
    }

    body.single-post.category-blog main.wp-block-group,
    body.markaworks-blog-post-page main.wp-block-group,
    body.single-post.category-blog main,
    body.markaworks-blog-post-page main,
    body.single-post:has(.mw-blog-article) main {
        padding: calc(var(--nav-h, 70px) + 20px) 0 80px 0 !important;
    }
}

/* ---------- Overlapping hero ---------- */
/*
 * Reference layout:
 * - Wide 16:9 image on the right
 * - Title card overlaps only the MIDDLE-LEFT of the image
 * - Image corners stay visible above + below the title card
 * - Author sits under the title card on the left
 */
.mw-blog-hero {
    display: grid;
    grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.55fr);
    grid-template-areas:
        "panel media"
        "author .";
    column-gap: 0;
    row-gap: 16px;
    align-items: center;
    margin: 0 0 56px 0;
    position: relative;
    width: 100%;
}

.mw-blog-hero-panel {
    grid-area: panel;
    position: relative;
    z-index: 2;
    align-self: center;
    background: var(--mw-blog-panel);
    color: var(--mw-blog-panel-ink);
    border-radius: 28px;
    padding: clamp(28px, 3.5vw, 44px) clamp(24px, 3vw, 40px);
    /* Push into the image — notch overlap, not full cover */
    margin-right: clamp(-120px, -12vw, -72px);
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(5, 51, 51, 0.14);
}

.mw-blog-hero-readtime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(244, 245, 245, 0.72);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.02em;
    margin: 0 0 16px 0;
}

.mw-blog-hero-readtime::before {
    content: "";
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--mw-blog-accent);
    flex-shrink: 0;
}

.mw-blog-hero-title,
.mw-blog-hero-panel h1.wp-block-post-title,
.mw-blog-hero-panel h1.mw-blog-hero-title {
    color: var(--mw-blog-panel-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(28px, 3.6vw, 48px) !important;
    font-weight: 600 !important;
    line-height: 1.12 !important;
    letter-spacing: -0.035em !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: none !important;
    text-align: left !important;
    text-shadow: none !important;
    transform: none !important;
    display: block !important;
}

.mw-blog-hero-subtitle {
    margin: 14px 0 0 0;
    color: rgba(244, 245, 245, 0.72);
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(14px, 1.2vw, 16px);
    font-weight: 500;
    line-height: 1.45;
}

.mw-blog-hero-media {
    grid-area: media;
    position: relative;
    z-index: 1;
    align-self: stretch;
    border-radius: 28px;
    overflow: hidden;
    background: rgba(5, 51, 51, 0.06);
    width: 100%;
    aspect-ratio: 16 / 9;
    min-height: 0;
    /* Let image sit under the overlapping title card */
    margin-left: 0;
}

.mw-blog-hero-media img,
.mw-blog-hero-media .mw-blog-featured-image,
.mw-blog-hero-media .mw-blog-featured-image img {
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    max-height: none !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    border: none !important;
    border-radius: 0 !important;
    margin: 0 !important;
}

.mw-blog-hero-author {
    grid-area: author;
    display: flex;
    align-items: center;
    gap: 14px;
    align-self: start;
    z-index: 2;
    width: auto;
    max-width: 100%;
    padding-right: clamp(72px, 12vw, 120px);
    margin-top: 2px;
}

.mw-blog-hero-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    object-fit: cover;
    background: rgba(5, 51, 51, 0.08);
    flex-shrink: 0;
}

.mw-blog-hero-avatar-fallback {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--mw-blog-panel);
    color: var(--mw-blog-accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 700;
    font-size: 18px;
    flex-shrink: 0;
}

.mw-blog-hero-author-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.mw-blog-hero-author-by {
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 600;
    color: var(--mw-blog-ink);
    line-height: 1.35;
}

.mw-blog-hero-author-role {
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 500;
    color: var(--mw-blog-ink-mute);
    line-height: 1.35;
}

@media (max-width: 1024px) {
    .mw-blog-hero {
        grid-template-columns: 1fr;
        grid-template-areas:
            "media"
            "panel"
            "author";
        align-items: stretch;
        gap: 0;
        margin-bottom: 36px;
    }

    .mw-blog-hero-panel {
        width: calc(100% - 20px);
        max-width: none;
        margin: -48px 0 0 0;
        align-self: start;
    }

    .mw-blog-hero-author {
        width: 100%;
        max-width: none;
        padding-right: 0;
        margin-top: 16px;
    }

    .mw-blog-hero-media {
        aspect-ratio: 16 / 9;
        width: 100%;
    }

    .mw-blog-hero-title,
    .mw-blog-hero-panel h1.wp-block-post-title,
    .mw-blog-hero-panel h1.mw-blog-hero-title {
        font-size: clamp(26px, 6.2vw, 40px) !important;
    }
}

@media (max-width: 640px) {
    .mw-blog-hero {
        margin-bottom: 28px;
    }

    .mw-blog-hero-panel {
        width: 100%;
        margin: -36px 0 0 0;
        border-radius: 20px;
        padding: 20px 18px;
        box-shadow: 0 12px 28px rgba(5, 51, 51, 0.12);
    }

    .mw-blog-hero-media {
        border-radius: 20px;
        aspect-ratio: 16 / 9;
    }

    .mw-blog-hero-readtime {
        font-size: 12px;
        margin-bottom: 12px;
    }

    .mw-blog-hero-title,
    .mw-blog-hero-panel h1.wp-block-post-title,
    .mw-blog-hero-panel h1.mw-blog-hero-title {
        font-size: clamp(24px, 7vw, 32px) !important;
        line-height: 1.15 !important;
    }

    .mw-blog-hero-subtitle {
        font-size: 14px;
        margin-top: 10px;
    }

    .mw-blog-hero-author {
        gap: 12px;
    }

    .mw-blog-hero-avatar,
    .mw-blog-hero-avatar-fallback {
        width: 44px;
        height: 44px;
        border-radius: 12px;
    }

    .mw-blog-hero-author-by {
        font-size: 13px;
    }

    .mw-blog-hero-author-role {
        font-size: 12px;
    }
}

/* ---------- Three-column body ---------- */
.mw-blog-layout,
.mw-blog-body,
.mw-blog-main,
.mw-blog-article,
.mw-blog-stream {
    overflow: visible !important;
}

.mw-blog-body {
    display: grid;
    grid-template-columns: minmax(180px, 230px) minmax(0, 1fr) 64px;
    column-gap: clamp(28px, 4vw, 56px);
    align-items: start;
}

.mw-blog-toc {
    position: sticky !important;
    top: calc(var(--nav-h, 80px) + 20px) !important;
    align-self: start !important;
    z-index: 5;
    max-height: calc(100vh - var(--nav-h, 80px) - 40px);
    overflow-x: visible;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.mw-blog-toc-box {
    background: var(--mw-blog-surface);
    border: 1px solid var(--mw-blog-line);
    border-radius: 18px;
    padding: 18px 18px 14px;
    backdrop-filter: blur(8px);
}

.mw-blog-toc-label {
    margin: 0 0 12px 0;
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-blog-ink-mute);
}

/* Mobile dropdown trigger — hidden on desktop */
.mw-blog-toc-toggle {
    display: none;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--mw-blog-ink);
    cursor: pointer;
    text-align: left;
    font: inherit;
}

.mw-blog-toc-toggle-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}

.mw-blog-toc-toggle-kicker {
    font-family: 'Inter Tight', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mw-blog-ink-mute);
}

.mw-blog-toc-toggle-current {
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    color: var(--mw-blog-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mw-blog-toc-chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: var(--mw-blog-ink);
    transition: transform 0.2s ease;
}

.mw-blog-toc-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mw-blog-toc-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mw-blog-toc-list li::before {
    content: none !important;
    display: none !important;
}

.mw-blog-toc-link {
    display: block;
    padding: 8px 10px 8px 14px;
    border-left: 2px solid transparent;
    color: var(--mw-blog-ink-soft) !important;
    text-decoration: none !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    line-height: 1.4 !important;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.mw-blog-toc-link:hover {
    color: var(--mw-blog-ink) !important;
}

.mw-blog-toc-link.is-active {
    color: var(--mw-blog-ink) !important;
    border-left-color: var(--mw-blog-ink);
    font-weight: 600 !important;
}

.mw-blog-progress {
    margin: 16px 2px 10px;
    height: 3px;
    border-radius: 999px;
    background: rgba(5, 51, 51, 0.1);
    overflow: hidden;
}

.mw-blog-progress-bar {
    display: block;
    height: 100%;
    width: 0%;
    background: var(--mw-blog-accent);
    border-radius: inherit;
    transition: width 0.15s linear;
}

.mw-blog-toc-readtime {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 2px;
    color: var(--mw-blog-ink-mute);
    font-family: 'Inter Tight', sans-serif;
    font-size: 12.5px;
    font-weight: 500;
}

.mw-blog-toc-readtime svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    stroke: currentColor;
    fill: none;
}

.mw-blog-main {
    min-width: 0;
}

.mw-blog-updated {
    margin: 0 0 22px 0;
    color: var(--mw-blog-ink-mute);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
}

.mw-blog-updated time {
    color: inherit;
}

.mw-blog-share {
    position: sticky !important;
    top: calc(var(--nav-h, 80px) + 28px) !important;
    align-self: start !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    z-index: 5;
}

.mw-blog-share-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'Inter Tight', sans-serif;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--mw-blog-ink-mute);
}

.mw-blog-share-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mw-blog-share-list li {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.mw-blog-share-list li::before {
    content: none !important;
    display: none !important;
}

.mw-blog-share-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--mw-blog-accent);
    color: var(--mw-blog-ink);
    border: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    text-decoration: none !important;
    transition: transform 0.2s ease, filter 0.2s ease;
    box-shadow: 0 6px 16px rgba(5, 51, 51, 0.1);
}

.mw-blog-share-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.03);
}

.mw-blog-share-btn svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.mw-blog-share-btn.is-copied {
    background: var(--mw-blog-ink);
    color: var(--mw-blog-accent);
}

@media (max-width: 1100px) {
    .mw-blog-body {
        grid-template-columns: minmax(170px, 210px) minmax(0, 1fr);
        column-gap: 32px;
    }

    .mw-blog-share {
        position: static !important;
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        margin-top: 28px;
        gap: 14px;
    }

    .mw-blog-share-label {
        writing-mode: horizontal-tb;
        transform: none;
    }

    .mw-blog-share-list {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 860px) {
    /* minmax(0, …): a long section title in the Contents dropdown must not widen the page */
    .mw-blog-body {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 22px;
    }

    /* Mobile: Contents as a compact dropdown (not sticky chips) */
    .mw-blog-toc {
        order: -1;
        min-width: 0;
        position: relative !important;
        top: auto !important;
        z-index: 5;
        max-height: none;
        overflow: visible;
        background: none;
        padding: 0;
        margin: 0;
    }

    .mw-blog-toc-box {
        padding: 14px 14px 12px;
        border-radius: 16px;
        background: #fff;
        border: 1px solid var(--mw-blog-line);
        box-shadow: 0 8px 24px rgba(5, 51, 51, 0.06);
    }

    .mw-blog-toc-label {
        display: none;
    }

    .mw-blog-toc-toggle {
        display: flex;
    }

    .mw-blog-toc-box.is-open .mw-blog-toc-chevron {
        transform: rotate(180deg);
    }

    .mw-blog-toc-list {
        display: none !important;
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 2px !important;
        margin-top: 12px !important;
        padding-top: 10px !important;
        border-top: 1px solid var(--mw-blog-line);
        overflow: visible;
        max-height: min(52vh, 360px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    .mw-blog-toc-box.is-open .mw-blog-toc-list {
        display: flex !important;
    }

    .mw-blog-toc-list li {
        flex: none !important;
        width: 100%;
    }

    .mw-blog-toc-link {
        white-space: normal !important;
        border: 0 !important;
        border-left: 2px solid transparent !important;
        border-radius: 0 !important;
        padding: 10px 10px 10px 12px !important;
        font-size: 14px !important;
        line-height: 1.35 !important;
        background: transparent;
        max-width: none;
        overflow: visible;
        text-overflow: unset;
    }

    .mw-blog-toc-link.is-active {
        background: transparent !important;
        color: var(--mw-blog-ink) !important;
        border-left-color: var(--mw-blog-ink) !important;
        font-weight: 600 !important;
    }

    .mw-blog-progress {
        margin: 10px 2px 8px;
        height: 2px;
    }

    .mw-blog-toc-readtime {
        font-size: 11.5px;
    }

    .mw-blog-updated {
        margin-bottom: 16px;
        font-size: 12px;
    }

    .mw-blog-share {
        justify-content: space-between;
        width: 100%;
        margin-top: 8px;
        padding-top: 8px;
    }

    .mw-blog-share-btn {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
    }

    .mw-blog-content-block p,
    .mw-blog-content-block li,
    .mw-blog-main p,
    .mw-blog-main li {
        font-size: 16px !important;
        line-height: 1.7 !important;
    }

    .mw-blog-content-block h2,
    .mw-blog-main h2,
    .mw-blog-point-heading {
        font-size: clamp(22px, 6vw, 28px) !important;
        margin-top: 1.8em !important;
        scroll-margin-top: calc(var(--nav-h, 70px) + 16px);
    }

    .mw-blog-content-block h3,
    .mw-blog-main h3,
    .mw-blog-section-label {
        font-size: clamp(18px, 5vw, 22px) !important;
        scroll-margin-top: calc(var(--nav-h, 70px) + 16px);
    }

    .mw-blog-image-block {
        margin: 28px 0 !important;
        border-radius: 14px !important;
    }

    .mw-blog-image-block img,
    .mw-blog-image-block img.mw-blog-photo-img {
        border-radius: 14px !important;
    }
}

@media (max-width: 560px) {
    .mw-blog-layout {
        width: min(100%, calc(100% - 24px));
    }

    .mw-blog-share {
        flex-wrap: wrap;
        gap: 12px;
    }

    .mw-blog-share-label {
        width: 100%;
        letter-spacing: 0.08em;
    }

    .mw-blog-pointer-line,
    .mw-blog-pointer-item,
    .mw-blog-content-block ol.mw-blog-pointer-list > li.mw-blog-pointer-item {
        gap: 16px !important;
    }

    .mw-blog-content-block ol:not(.mw-blog-pointer-list) > li,
    .mw-blog-article ol:not(.mw-blog-pointer-list) > li {
        padding-left: 3.1em !important;
    }
}

/* Meta row — keep 2-col feel on tablet; stack only on small phones */
@media (max-width: 768px) {
    body.single-post.category-blog .mw-blog-meta-row,
    body.markaworks-blog-post-page .mw-blog-meta-row {
        width: 100% !important;
        margin: 36px 0 0 0 !important;
        gap: 18px !important;
    }
}

@media (max-width: 560px) {
    body.single-post.category-blog .mw-blog-meta-row,
    body.markaworks-blog-post-page .mw-blog-meta-row {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 16px !important;
    }

    body.single-post.category-blog .mw-blog-meta-right,
    body.markaworks-blog-post-page .mw-blog-meta-right {
        align-items: flex-start !important;
        text-align: left !important;
        margin-left: 0 !important;
    }

    body.single-post.category-blog .mw-blog-meta-tags,
    body.markaworks-blog-post-page .mw-blog-meta-tags {
        justify-content: flex-start !important;
    }

    body.single-post.category-blog .mw-blog-meta-posted .mw-blog-meta-pill,
    body.markaworks-blog-post-page .mw-blog-meta-posted .mw-blog-meta-pill {
        display: inline-flex !important;
        margin-top: 6px !important;
        margin-left: 0 !important;
    }

    body.single-post.category-blog #mw-blog-final-cta,
    body.markaworks-blog-post-page #mw-blog-final-cta {
        padding: 36px 16px 56px !important;
    }

    body.single-post.category-blog .wp-block-comments,
    body.markaworks-blog-post-page .wp-block-comments {
        width: min(100%, calc(100% - 28px)) !important;
        margin-top: 40px !important;
    }
}

@media (max-width: 480px) {
    body.single-post.category-blog main.wp-block-group,
    body.markaworks-blog-post-page main.wp-block-group,
    body.single-post.category-blog main,
    body.markaworks-blog-post-page main,
    body.single-post:has(.mw-blog-article) main {
        padding: calc(var(--nav-h, 58px) + 16px) 0 72px 0 !important;
    }

    .mw-blog-hero-panel {
        padding: 18px 16px;
        border-radius: 18px;
        margin-top: -32px;
    }

    .mw-blog-hero-media {
        border-radius: 18px;
        aspect-ratio: 16 / 9;
        min-height: 0;
    }

    /* Keep sticky project CTA from colliding with share chips awkwardly */
    body.single-post.category-blog .project-cta-bar,
    body.markaworks-blog-post-page .project-cta-bar {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

/* ---------- Article content (beige-safe ink) ---------- */
.mw-blog-article {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    color: var(--mw-blog-ink) !important;
}

.mw-blog-header,
.mw-blog-subtitle,
h2.mw-blog-subtitle {
    display: none !important; /* moved into hero panel */
}

.mw-blog-featured-image {
    display: none !important; /* moved into hero media */
}

.mw-blog-layout .mw-blog-hero-media .mw-blog-featured-image {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    overflow: hidden !important;
    box-shadow: none !important;
    animation: none !important;
}

.mw-blog-stream {
    display: flex;
    flex-direction: column;
    gap: 0;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.mw-blog-content-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 0 22px 0 !important;
    padding: 0 !important;
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.mw-blog-content-block p,
.mw-blog-content-block li,
.mw-blog-main p,
.mw-blog-main li {
    color: var(--mw-blog-ink-soft) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(16px, 1.15vw, 18px) !important;
    font-weight: 400 !important;
    line-height: 1.75 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 1.05em 0 !important;
}

.mw-blog-content-block p:last-child,
.mw-blog-content-block li:last-child {
    margin-bottom: 0 !important;
}

.mw-blog-content-block a,
.mw-blog-main a:not(.mw-blog-share-btn):not(.mw-blog-toc-link) {
    color: var(--mw-blog-ink) !important;
    text-decoration: underline !important;
    text-underline-offset: 3px !important;
    text-decoration-thickness: 1px !important;
}

.mw-blog-content-block a:hover,
.mw-blog-main a:not(.mw-blog-share-btn):not(.mw-blog-toc-link):hover {
    color: #0B4444 !important;
}

.mw-blog-content-block h1,
.mw-blog-content-block h2,
.mw-blog-content-block h3,
.mw-blog-content-block h4,
.mw-blog-article .mw-blog-stream > h2,
.mw-blog-article .mw-blog-stream > h3,
.mw-blog-main h2,
.mw-blog-main h3 {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    letter-spacing: -0.025em !important;
    line-height: 1.25 !important;
    margin: 2.1em 0 0.7em 0 !important;
    padding: 0 !important;
    border: none !important;
    scroll-margin-top: calc(var(--nav-h, 80px) + 24px);
}

.mw-blog-content-block h1,
.mw-blog-content-block h2,
.mw-blog-main h2 {
    font-size: clamp(24px, 2.4vw, 34px) !important;
}

.mw-blog-content-block h3,
.mw-blog-main h3 {
    font-size: clamp(18px, 1.7vw, 22px) !important;
    color: #0B4444 !important;
}

.mw-blog-section-label {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(22px, 2.2vw, 28px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 2.2em 0 0.75em 0 !important;
    padding: 0 !important;
    scroll-margin-top: calc(var(--nav-h, 80px) + 24px);
}

.mw-blog-point-heading {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(24px, 2.5vw, 34px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    line-height: 1.25 !important;
    margin: 2.4em 0 0.85em 0 !important;
    padding: 0 !important;
    border: none !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.35em !important;
    scroll-margin-top: calc(var(--nav-h, 80px) + 24px);
}

.mw-blog-point-num {
    color: #9BB814 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums;
}

.mw-blog-point-title {
    color: var(--mw-blog-ink) !important;
    font-weight: 600 !important;
}

.mw-blog-quote,
.mw-blog-content-block .mw-blog-quote {
    color: #0B4444 !important;
    font-style: italic !important;
    font-weight: 500 !important;
}

.mw-blog-quote-block {
    color: #0B4444 !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(18px, 1.5vw, 22px) !important;
    font-style: italic !important;
    font-weight: 500 !important;
    line-height: 1.55 !important;
    margin: 1.75em 0 !important;
    padding: 0 0 0 18px !important;
    border-left: 2px solid var(--mw-blog-accent) !important;
    background: transparent !important;
}

.mw-blog-callout {
    margin: 1.75em 0 !important;
    padding: 16px 18px !important;
    border-left: 2px solid var(--mw-blog-accent) !important;
    background: rgba(184, 212, 50, 0.14) !important;
    color: var(--mw-blog-ink) !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.6 !important;
}

.mw-blog-callout-icon {
    margin-right: 4px;
}

.mw-blog-callout-label {
    color: #0B4444 !important;
    font-weight: 700 !important;
}

.mw-blog-bullet-line {
    display: flex !important;
    gap: 10px !important;
    align-items: flex-start !important;
    margin: 0.35em 0 !important;
    color: var(--mw-blog-ink-soft) !important;
}

.mw-blog-bullet-mark {
    color: #9BB814 !important;
    font-weight: 700 !important;
    line-height: 1.7 !important;
    flex-shrink: 0;
}

.mw-blog-bullet-text {
    color: var(--mw-blog-ink-soft) !important;
}

.mw-blog-bullet-list {
    list-style: none !important;
    margin: 1em 0 1.5em 0 !important;
    padding: 0 !important;
}

.mw-blog-bullet-item {
    position: relative !important;
    padding: 0.35em 0 0.35em 1.25em !important;
    color: var(--mw-blog-ink-soft) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.65 !important;
}

.mw-blog-bullet-item::before {
    content: "\2022" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.35em !important;
    color: #9BB814 !important;
    font-weight: 700 !important;
    line-height: 1.65 !important;
}

.mw-blog-pointer-line,
.mw-blog-pointer-item,
.mw-blog-content-block ol.mw-blog-pointer-list > li.mw-blog-pointer-item,
.mw-blog-article ol.mw-blog-pointer-list > li.mw-blog-pointer-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 28px !important;
    margin: 0.45em 0 !important;
    padding: 0 !important;
    color: var(--mw-blog-ink-soft) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(16px, 1.2vw, 18px) !important;
    line-height: 1.7 !important;
    list-style: none !important;
    position: relative !important;
    counter-increment: none !important;
}

.mw-blog-pointer-num {
    flex: 0 0 auto !important;
    min-width: 1.75em !important;
    margin-right: 4px !important;
    color: #9BB814 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    letter-spacing: 0.02em !important;
    line-height: 1.7 !important;
    position: static !important;
}

.mw-blog-pointer-text {
    flex: 1 1 auto !important;
    color: var(--mw-blog-ink-soft) !important;
    min-width: 0 !important;
    padding-left: 0 !important;
}

.mw-blog-pointer-list {
    list-style: none !important;
    margin: 1em 0 1.5em 0 !important;
    padding: 0 !important;
    counter-reset: none !important;
}

.mw-blog-pointer-list .mw-blog-pointer-item::before,
.mw-blog-pointer-line::before,
.mw-blog-content-block ol.mw-blog-pointer-list > li::before,
.mw-blog-article ol.mw-blog-pointer-list > li::before {
    content: none !important;
    display: none !important;
    width: 0 !important;
}

.mw-blog-content-block ol:not(.mw-blog-pointer-list),
.mw-blog-article ol:not(.mw-blog-pointer-list) {
    list-style: none !important;
    margin: 1em 0 1.5em 0 !important;
    padding: 0 !important;
    counter-reset: mw-ol !important;
}

.mw-blog-content-block ol:not(.mw-blog-pointer-list) > li,
.mw-blog-article ol:not(.mw-blog-pointer-list) > li {
    position: relative !important;
    display: block !important;
    padding: 0.35em 0 0.35em 3.75em !important;
    margin: 0.35em 0 !important;
    counter-increment: mw-ol !important;
    list-style: none !important;
    color: var(--mw-blog-ink-soft) !important;
}

.mw-blog-content-block ol:not(.mw-blog-pointer-list) > li::before,
.mw-blog-article ol:not(.mw-blog-pointer-list) > li::before {
    content: counter(mw-ol, decimal-leading-zero) !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.35em !important;
    width: 2.5em !important;
    color: #9BB814 !important;
    font-weight: 700 !important;
    font-variant-numeric: tabular-nums !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

.mw-blog-content-block ul:not(.mw-blog-bullet-list):not(.mw-blog-pointer-list) {
    list-style: none !important;
    margin: 1em 0 1.5em 0 !important;
    padding: 0 !important;
}

.mw-blog-content-block ul:not(.mw-blog-bullet-list):not(.mw-blog-pointer-list) > li {
    position: relative !important;
    padding: 0.35em 0 0.35em 1.25em !important;
    margin: 0.35em 0 !important;
    color: var(--mw-blog-ink-soft) !important;
}

.mw-blog-content-block ul:not(.mw-blog-bullet-list):not(.mw-blog-pointer-list) > li::before {
    content: "\2022" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0.35em !important;
    color: #9BB814 !important;
    font-weight: 700 !important;
}

.mw-blog-formula {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: clamp(18px, 1.6vw, 24px) !important;
    font-weight: 600 !important;
    letter-spacing: -0.02em !important;
    margin: 1.5em 0 !important;
    padding: 14px 0 !important;
    border-top: 1px solid var(--mw-blog-line) !important;
    border-bottom: 1px solid var(--mw-blog-line) !important;
    text-align: left !important;
}

.mw-blog-content-block blockquote {
    margin: 1.5em 0 !important;
    padding: 0 0 0 18px !important;
    border-left: 2px solid var(--mw-blog-accent) !important;
    background: transparent !important;
    color: var(--mw-blog-ink) !important;
    font-size: clamp(17px, 1.35vw, 20px) !important;
    line-height: 1.55 !important;
    font-weight: 500 !important;
}

.mw-blog-content-block strong {
    color: var(--mw-blog-ink) !important;
    font-weight: 600 !important;
}

.mw-blog-image-block {
    width: 100% !important;
    max-width: 100% !important;
    margin: 36px 0 !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 18px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.mw-blog-image-block img {
    width: auto !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
}

.mw-blog-content-block img {
    max-width: 140px !important;
    width: auto !important;
    height: auto !important;
    max-height: 140px !important;
    object-fit: contain !important;
    display: inline-block !important;
    margin: 12px 0 !important;
    vertical-align: middle;
}

body.single-post .mw-blog-icon-img,
body.markaworks-blog-post-page .mw-blog-icon-img,
.mw-blog-image-block img.mw-blog-icon-img,
.mw-blog-content-block img.mw-blog-icon-img,
.entry-content img.mw-blog-icon-img,
.wp-block-post-content img.mw-blog-icon-img {
    max-width: 120px !important;
    width: 120px !important;
    height: auto !important;
    max-height: 120px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 20px 0 !important;
}

body.single-post .mw-blog-image-block img.mw-blog-photo-img,
.mw-blog-image-block img.mw-blog-photo-img {
    max-width: 100% !important;
    width: 100% !important;
    max-height: none !important;
    border-radius: 18px !important;
}

body.single-post img.emoji,
body.single-post img.wp-smiley,
body.markaworks-blog-post-page img.emoji,
body.markaworks-blog-post-page img.wp-smiley {
    width: 1.25em !important;
    height: 1.25em !important;
    max-width: 1.25em !important;
    max-height: 1.25em !important;
    margin: 0 0.15em !important;
    display: inline !important;
    vertical-align: -0.1em !important;
}

/* Hide legacy in-content tag pills — tags live in WP meta */
body.single-post.category-blog .mw-blog-tags,
body.markaworks-blog-post-page .mw-blog-tags,
body.single-post:has(.mw-blog-article) .mw-blog-tags,
.mw-blog-article .mw-blog-tags {
    display: none !important;
}

/* WP meta row under article */
body.single-post.category-blog .wp-block-post-date,
body.single-post.category-blog .wp-block-post-author,
body.single-post.category-blog .wp-block-post-terms,
body.single-post.category-blog .wp-block-template-part:not(footer):not(header),
body.markaworks-blog-post-page .wp-block-post-date,
body.markaworks-blog-post-page .wp-block-post-author,
body.markaworks-blog-post-page .wp-block-post-terms {
    background: transparent !important;
    color: var(--mw-blog-ink-mute) !important;
}

body.single-post.category-blog .wp-block-post-terms a,
body.markaworks-blog-post-page .wp-block-post-terms a,
body.single-post:has(.mw-blog-article) .wp-block-post-terms a {
    background: transparent !important;
    color: var(--mw-blog-ink-soft) !important;
    border: 1px solid rgba(5, 51, 51, 0.22) !important;
    padding: 8px 16px !important;
    border-radius: 100px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    font-family: 'Inter Tight', sans-serif !important;
    text-transform: uppercase !important;
    letter-spacing: 0.04em !important;
    display: inline-block !important;
    text-decoration: none !important;
    margin: 4px 6px 4px 0 !important;
    transition: color 0.3s ease, border-color 0.3s ease, background 0.3s ease !important;
}

body.single-post.category-blog .wp-block-post-terms a:hover,
body.markaworks-blog-post-page .wp-block-post-terms a:hover,
body.single-post:has(.mw-blog-article) .wp-block-post-terms a:hover {
    color: var(--mw-blog-ink) !important;
    border-color: rgba(184, 212, 50, 0.7) !important;
    background: rgba(184, 212, 50, 0.18) !important;
}

body.single-post.category-blog .wp-block-post-date time,
body.markaworks-blog-post-page .wp-block-post-date time,
body.single-post.category-blog .wp-block-post-author__name,
body.markaworks-blog-post-page .wp-block-post-author__name {
    color: var(--mw-blog-ink-mute) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 12px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    text-transform: uppercase !important;
    letter-spacing: 0.06em !important;
}

body.single-post.category-blog .wp-block-separator,
body.markaworks-blog-post-page .wp-block-separator,
body.single-post.category-blog hr.wp-block-separator,
body.markaworks-blog-post-page hr.wp-block-separator {
    max-width: 100% !important;
    margin: 28px 0 36px !important;
    border: 0 !important;
    border-top: 1px solid var(--mw-blog-line) !important;
    background: transparent !important;
    height: 1px !important;
}

/*
 * Normalized meta row — 2 columns side by side:
 * Left: Posted DATE in [BLOG] / by AUTHOR
 * Right: Tags: [pills]
 */
body.single-post.category-blog .mw-blog-meta-row,
body.markaworks-blog-post-page .mw-blog-meta-row {
    width: 100% !important;
    max-width: 100% !important;
    margin: 48px 0 0 0 !important;
    padding: 0 0 8px 0 !important;
    box-sizing: border-box !important;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 24px 48px !important;
    background: transparent !important;
}

body.single-post.category-blog .mw-blog-meta-left,
body.markaworks-blog-post-page .mw-blog-meta-left,
body.single-post.category-blog .mw-blog-meta-right,
body.markaworks-blog-post-page .mw-blog-meta-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    min-width: 0;
}

body.single-post.category-blog .mw-blog-meta-right,
body.markaworks-blog-post-page .mw-blog-meta-right {
    align-items: flex-end !important;
    text-align: right !important;
    margin-left: auto !important;
}

body.single-post.category-blog .mw-blog-meta-right:not(:has(.mw-blog-meta-pill)),
body.markaworks-blog-post-page .mw-blog-meta-right:not(:has(.mw-blog-meta-pill)),
body.single-post.category-blog .wp-block-post-terms.taxonomy-post_tag:not(:has(a)),
body.markaworks-blog-post-page .wp-block-post-terms.taxonomy-post_tag:not(:has(a)),
body.single-post.category-blog .wp-block-post-terms:not(:has(a)) .wp-block-post-terms__prefix,
body.markaworks-blog-post-page .wp-block-post-terms:not(:has(a)) .wp-block-post-terms__prefix {
    display: none !important;
}

body.single-post.category-blog .mw-blog-meta-posted,
body.markaworks-blog-post-page .mw-blog-meta-posted,
body.single-post.category-blog .mw-blog-meta-by,
body.markaworks-blog-post-page .mw-blog-meta-by,
body.single-post.category-blog .mw-blog-meta-tags-label,
body.markaworks-blog-post-page .mw-blog-meta-tags-label {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    line-height: 1.6 !important;
    margin: 0 !important;
}

body.single-post.category-blog .mw-blog-meta-date,
body.markaworks-blog-post-page .mw-blog-meta-date,
body.single-post.category-blog .mw-blog-meta-author,
body.markaworks-blog-post-page .mw-blog-meta-author {
    color: var(--mw-blog-ink-soft) !important;
    font-weight: 500 !important;
}

body.single-post.category-blog .mw-blog-meta-tags,
body.markaworks-blog-post-page .mw-blog-meta-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: flex-end !important;
    gap: 8px !important;
}

body.single-post.category-blog .mw-blog-meta-pill,
body.markaworks-blog-post-page .mw-blog-meta-pill {
    display: inline-flex !important;
    align-items: center !important;
    background: rgba(255, 255, 255, 0.65) !important;
    color: var(--mw-blog-ink) !important;
    border: 1px solid rgba(5, 51, 51, 0.18) !important;
    padding: 7px 14px !important;
    border-radius: 100px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    letter-spacing: 0.04em !important;
    text-transform: uppercase !important;
    text-decoration: none !important;
    line-height: 1.2 !important;
    margin: 0 0 0 6px !important;
    vertical-align: middle;
}

body.single-post.category-blog .mw-blog-meta-posted .mw-blog-meta-pill,
body.markaworks-blog-post-page .mw-blog-meta-posted .mw-blog-meta-pill {
    margin-left: 8px !important;
}

body.single-post.category-blog .mw-blog-meta-tags .mw-blog-meta-pill,
body.markaworks-blog-post-page .mw-blog-meta-tags .mw-blog-meta-pill {
    margin: 0 !important;
}

body.single-post.category-blog .mw-blog-meta-pill:hover,
body.markaworks-blog-post-page .mw-blog-meta-pill:hover {
    border-color: rgba(184, 212, 50, 0.7) !important;
    background: rgba(184, 212, 50, 0.18) !important;
    color: var(--mw-blog-ink) !important;
}

/* Hide original WP meta once normalized */
body.single-post.category-blog [data-mw-meta-hidden="1"],
body.markaworks-blog-post-page [data-mw-meta-hidden="1"] {
    display: none !important;
}

/* Line UNDER meta (meta stays above the line) */
body.single-post.category-blog .mw-blog-meta-row + .wp-block-separator,
body.markaworks-blog-post-page .mw-blog-meta-row + .wp-block-separator,
body.single-post.category-blog .mw-blog-meta-row + hr,
body.markaworks-blog-post-page .mw-blog-meta-row + hr,
body.single-post.category-blog .mw-blog-main > .wp-block-separator,
body.markaworks-blog-post-page .mw-blog-main > .wp-block-separator {
    width: 100% !important;
    max-width: 100% !important;
    margin: 18px 0 0 0 !important;
}

body.single-post.category-blog .mw-blog-layout + #mw-blog-final-cta,
body.markaworks-blog-post-page .mw-blog-layout + #mw-blog-final-cta,
body.single-post.category-blog .entry-content + #mw-blog-final-cta,
body.markaworks-blog-post-page .entry-content + #mw-blog-final-cta {
    margin-top: 8px !important;
}

/* Comments on beige */
body.single-post.category-blog .wp-block-comments,
body.markaworks-blog-post-page .wp-block-comments,
body.single-post:has(.mw-blog-featured-image) .wp-block-comments {
    max-width: 1400px !important;
    width: min(1400px, calc(100% - 48px)) !important;
    margin: 56px auto 0 !important;
    padding: 0 !important;
    color: var(--mw-blog-ink-soft) !important;
    box-sizing: border-box !important;
}

body.single-post.category-blog .wp-block-comments h2,
body.markaworks-blog-post-page .wp-block-comments h2,
body.single-post.category-blog .comment-reply-title,
body.markaworks-blog-post-page .comment-reply-title {
    color: var(--mw-blog-ink) !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    font-size: 22px !important;
}

body.single-post.category-blog .comment-form textarea,
body.single-post.category-blog .comment-form input[type="text"],
body.single-post.category-blog .comment-form input[type="email"],
body.markaworks-blog-post-page .comment-form textarea,
body.markaworks-blog-post-page .comment-form input[type="text"],
body.markaworks-blog-post-page .comment-form input[type="email"] {
    border: 1px solid rgba(5, 51, 51, 0.22) !important;
    border-radius: 0 !important;
    padding: 14px 16px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 15px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.55) !important;
    color: var(--mw-blog-ink) !important;
}

body.single-post.category-blog .wp-block-button__link,
body.single-post.category-blog input[type="submit"].wp-block-button__link,
body.markaworks-blog-post-page .wp-block-button__link,
body.markaworks-blog-post-page input[type="submit"].wp-block-button__link {
    background: var(--mw-blog-accent) !important;
    color: var(--mw-blog-ink) !important;
    border: none !important;
    padding: 12px 28px !important;
    border-radius: 100px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    font-size: 14px !important;
}

/* ---------- Final CTA (full-bleed after meta) ---------- */
body.single-post.category-blog #mw-blog-final-cta,
body.markaworks-blog-post-page #mw-blog-final-cta,
body.single-post #mw-blog-final-cta.markaworks-final-cta {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 48px 40px 80px !important;
    background: transparent !important;
    background-color: transparent !important;
    box-sizing: border-box !important;
    display: block !important;
    clear: both !important;
    position: relative !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
    grid-column: 1 / -1 !important;
    flex: 0 0 100% !important;
    visibility: hidden;
}

main .wp-block-column #mw-blog-final-cta,
main .wp-block-columns #mw-blog-final-cta:not(.mw-blog-final-cta-ready) {
    visibility: hidden !important;
}

body.single-post.category-blog #mw-blog-final-cta.mw-blog-final-cta-ready,
body.markaworks-blog-post-page #mw-blog-final-cta.mw-blog-final-cta-ready,
body.single-post #mw-blog-final-cta.mw-blog-final-cta-ready {
    visibility: visible !important;
}

body.single-post.category-blog #mw-blog-final-cta .markaworks-final-cta-container,
body.markaworks-blog-post-page #mw-blog-final-cta .markaworks-final-cta-container {
    width: 100% !important;
    max-width: 1600px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

body.single-post.category-blog #mw-blog-final-cta .markaworks-final-cta-card,
body.markaworks-blog-post-page #mw-blog-final-cta .markaworks-final-cta-card {
    width: 100% !important;
    max-width: none !important;
    background: #053333 !important;
    box-sizing: border-box !important;
    transform: none !important;
}

/* Sticky CTA bar images must not inherit content-image caps */
body.single-post .project-cta-bar img,
body.markaworks-blog-post-page .project-cta-bar img,
.entry-content .project-cta-bar img,
.wp-block-post-content .project-cta-bar img,
.project-cta-bar img {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    float: none !important;
    vertical-align: unset !important;
}

.entry-content .project-cta-bar .project-cta-logo-img,
.wp-block-post-content .project-cta-bar .project-cta-logo-img,
.project-cta-bar .project-cta-logo-img {
    object-fit: contain !important;
}

.entry-content .project-cta-bar .project-cta-agent-img,
.wp-block-post-content .project-cta-bar .project-cta-agent-img,
.project-cta-bar .project-cta-agent-img {
    object-fit: cover !important;
}

/* Local HTML template helpers */
body.markaworks-blog-post-page .markaworks-breadcrumb-section {
    display: none;
}

body.markaworks-blog-post-page .markaworks-blog-hero-section {
    display: none;
}

body.markaworks-blog-post-page .markaworks-blog-content-section,
body.markaworks-blog-post-page .markaworks-blog-content-container {
    max-width: none;
    width: 100%;
    margin: 0;
    padding: 0;
}

@media (prefers-reduced-motion: reduce) {
    .mw-blog-layout,
    body.single-post.category-blog h1.wp-block-post-title,
    .mw-blog-share-btn {
        animation: none !important;
        transition: none !important;
    }
}

/* ============================================
   STICKY PROJECT CTA BAR
   General classes for reusability across all project pages
   ============================================ */

.project-cta-bar {
    position: fixed;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    animation: slideUpCTABar 0.6s ease-out;
}

@keyframes slideUpCTABar {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.project-cta-container {
    display: flex;
    align-items: center;
    gap: 20px;
    background: rgba(5, 51, 51, 0.75);
    padding: 16px 24px;
    border-radius: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all 0.3s ease;
}

.project-cta-container:hover {
    background: rgba(5, 51, 51, 0.85);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 8px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Logo */
.project-cta-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #053333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.project-cta-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Content */
.project-cta-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.project-cta-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #F4F5F5;
    margin: 0;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.project-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #B8D432;
    color: #053333;
    padding: 12px 24px;
    border-radius: 40px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
    position: relative;
    overflow: visible;
    z-index: 1;
    --border-angle: 0turn;
}

/* White snake looping animation around button */
.project-cta-button::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 40px;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.project-cta-button:hover {
    background: #C5E138;
    box-shadow: 0 6px 16px rgba(184, 212, 50, 0.4);
    transform: translateY(-1px);
}

.project-cta-button:hover::after {
    animation-duration: 2s;
}

.project-cta-button svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
    transition: transform 0.3s ease;
}

.project-cta-button:hover svg {
    transform: translateX(3px);
}

/* Project Managers (Agents) */
.project-cta-agents {
    display: flex;
    align-items: center;
    position: relative;
}

/* Hide logo and agents on all mobile/tablet devices */
@media (max-width: 768px) {

    .project-cta-logo,
    .project-cta-agents {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

.project-cta-agent {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    border: 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    position: relative;
    background: transparent;
}

.project-cta-agent-2 {
    margin-left: -12px;
}

.project-cta-agent:hover {
    transform: scale(1.1) translateY(-2px);
    z-index: 10;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.3);
}

.project-cta-agent-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.project-cta-agents-single .project-cta-agent,
.project-cta-agents .project-cta-agent:only-child,
.project-cta-agent.project-cta-agent-single,
.project-cta-agent:has(.project-cta-agent-img[src*="Frame-2147226088"]) {
    width: clamp(92px, 8vw, 164px);
    height: 46px;
    border: 0 !important;
    border-radius: 999px;
    padding: 0;
    overflow: visible;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    isolation: isolate;
    cursor: pointer;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.project-cta-agents-single .project-cta-agent:hover,
.project-cta-agents .project-cta-agent:only-child:hover,
.project-cta-agent.project-cta-agent-single:hover,
.project-cta-agent:has(.project-cta-agent-img[src*="Frame-2147226088"]):hover {
    transform: none;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
}

.project-cta-agents-single .project-cta-agent-img,
.project-cta-agents .project-cta-agent:only-child .project-cta-agent-img,
.project-cta-agent-img.project-cta-agent-img-single,
.project-cta-agent-img[src*="Frame-2147226088"] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    border-radius: 999px;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease;
    will-change: transform, filter;
}

.project-cta-agents-single .project-cta-agent:hover .project-cta-agent-img,
.project-cta-agents .project-cta-agent:only-child:hover .project-cta-agent-img,
.project-cta-agent.project-cta-agent-single:hover .project-cta-agent-img-single,
.project-cta-agent:hover .project-cta-agent-img[src*="Frame-2147226088"],
.project-cta-agent-img[src*="Frame-2147226088"]:hover {
    transform: translateY(-2px) scale(1.04);
    filter: brightness(1.12) saturate(1.28)
        drop-shadow(0 0 2px rgba(184, 212, 50, 0.95))
        drop-shadow(0 0 8px rgba(184, 212, 50, 0.58)) !important;
}

/* Responsive Design */
/* Tablet and Mobile devices (≤768px) */
@media (max-width: 768px) {
    .project-cta-bar {
        bottom: max(15px, env(safe-area-inset-bottom, 15px));
        left: 12px;
        right: 12px;
        transform: none;
        width: auto;
    }

    .project-cta-container {
        padding: 14px 20px;
        gap: 16px;
        justify-content: space-between;
        border-radius: 50px;
        background: rgba(5, 51, 51, 0.9);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
            0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    /* Hide logo and agents on mobile */
    .project-cta-logo,
    .project-cta-agents {
        display: none !important;
    }

    .project-cta-content {
        gap: 16px;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        flex: 1;
    }

    .project-cta-text {
        font-size: 15px !important;
        font-weight: 500 !important;
        flex: 1;
        white-space: normal;
        line-height: 1.4;
        color: #F4F5F5;
        min-width: 0;
    }

    .project-cta-button {
        padding: 12px 24px !important;
        font-size: 15px !important;
        flex-shrink: 0;
        white-space: nowrap;
        border-radius: 40px;
        background: #B8D432;
        color: #053333;
        font-weight: 600;
    }

    .project-cta-button span {
        font-size: 15px !important;
        font-weight: 600;
    }

    .project-cta-button svg {
        width: 14px;
        height: 14px;
    }
}


/* ============================================
   STICKY MAIN PAGE CTA BAR
   For homepage, about, projects, services, contact, blogs pages
   ============================================ */

.main-page-cta-bar {
    position: fixed;
    bottom: 30px;
    right: 30px;
    z-index: 9999;
    animation: slideUpMainCTA 0.6s ease-out;
}

@keyframes slideUpMainCTA {
    from {
        opacity: 0;
        transform: translateY(100px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   STICKY SCROLL UP BUTTON (Bottom Left)
   Same snake animation as WhatsApp button
   ============================================ */

.markaworks-scroll-up-btn {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #B8D432;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    box-shadow: 0 4px 16px rgba(184, 212, 50, 0.3);
    transition: all 0.3s ease;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    --border-angle: 0turn;
}

.markaworks-scroll-up-btn.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    animation: slideUpScrollBtn 0.5s ease-out;
}

@keyframes slideUpScrollBtn {
    from {
        opacity: 0;
        transform: translateY(40px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* White snake looping animation around scroll-up button */
.markaworks-scroll-up-btn::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.markaworks-scroll-up-btn:hover {
    background: #C5E138;
    box-shadow: 0 6px 20px rgba(184, 212, 50, 0.5);
    transform: translateY(-3px);
}

.markaworks-scroll-up-btn:hover::after {
    animation-duration: 2s;
}

.markaworks-scroll-up-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
    object-fit: contain;
}

.markaworks-scroll-up-btn:hover .markaworks-scroll-up-icon {
    transform: translateY(-2px);
}

/* Mobile: sit above sticky CTA bar, right side */
@media (max-width: 768px) {
    .markaworks-scroll-up-btn {
        /* CTA bar sits ~15–20px from bottom and is ~64–72px tall */
        bottom: calc(max(15px, env(safe-area-inset-bottom, 15px)) + 84px);
        left: auto;
        right: 16px;
        width: 48px;
        height: 48px;
    }

    .markaworks-scroll-up-icon {
        width: 24px;
        height: 24px;
    }
}

.main-page-cta-container {
    display: flex;
    align-items: center;
    gap: 16px;
    background: rgba(5, 51, 51, 0.75);
    padding: 14px 20px;
    border-radius: 60px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3),
        0 0 1px rgba(255, 255, 255, 0.2) inset,
        0 4px 16px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    transition: all 0.3s ease;
    justify-content: space-between;
}

.main-page-cta-container:hover {
    background: rgba(5, 51, 51, 0.85);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4),
        0 0 1px rgba(255, 255, 255, 0.25) inset,
        0 8px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(-2px);
    border-color: rgba(255, 255, 255, 0.2);
}

/* Logo */
.main-page-cta-logo {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #053333;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.main-page-cta-logo-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Let's Talk Text (Desktop Only) */
.main-page-cta-text {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: #F4F5F5;
    white-space: nowrap;
    letter-spacing: 0.02em;
    min-width: 100px;
    display: block;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .main-page-cta-text {
        display: none;
    }
}

/* Button with WhatsApp Icon */
.main-page-cta-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #B8D432;
    color: #053333;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    font-family: 'Inter Tight', sans-serif;
    text-decoration: none;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
    position: relative;
    overflow: visible;
    z-index: 1;
    flex-shrink: 0;
    --border-angle: 0turn;
    order: 2;
    margin-left: auto;
}

/* White snake looping animation around button */
.main-page-cta-button::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 50%;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.main-page-cta-button:hover {
    background: #C5E138;
    box-shadow: 0 6px 16px rgba(184, 212, 50, 0.4);
    transform: translateY(-1px);
}

.main-page-cta-button:hover::after {
    animation-duration: 2s;
}

.main-page-cta-whatsapp-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.main-page-cta-button:hover .main-page-cta-whatsapp-icon {
    transform: scale(1.15) rotate(5deg);
}

/* Project Managers (Agents) - Hidden */
.main-page-cta-agents {
    display: none;
}

.main-page-cta-agent {
    display: none;
}

.main-page-cta-agent-2 {
    display: none;
}

.main-page-cta-agent:hover {
    display: none;
}

.main-page-cta-agent-img {
    display: none;
}

/* Responsive Design */
/* Tablet and Mobile devices (≤768px) */
@media (max-width: 768px) {
    .main-page-cta-bar {
        bottom: max(20px, env(safe-area-inset-bottom, 20px));
        right: 20px;
        left: auto;
        width: auto;
    }

    .main-page-cta-container {
        padding: 12px;
        gap: 0;
        justify-content: center;
        border-radius: 50%;
        background: rgba(5, 51, 51, 0.9);
        backdrop-filter: blur(30px) saturate(180%);
        -webkit-backdrop-filter: blur(30px) saturate(180%);
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4),
            0 0 1px rgba(255, 255, 255, 0.2) inset;
    }

    /* Hide logo and agents on mobile */
    .main-page-cta-logo,
    .main-page-cta-agents {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .main-page-cta-button {
        width: 52px !important;
        height: 52px !important;
        padding: 0 !important;
        border-radius: 50% !important;
        background: #B8D432;
        color: #053333;
        flex-shrink: 0;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .main-page-cta-whatsapp-icon {
        width: 26px !important;
        height: 26px !important;
    }
}


/* ============================================
   404 PAGE STYLES
   ============================================ */

/* 404 Page Body - Cream White Background */
body.page-404 {
    background: #F4F5F5;
}

/* 404 Section */
.markaworks-404-section {
    background: #F4F5F5;
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 40px;
    position: relative;
    overflow: hidden;
}

.markaworks-404-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.markaworks-404-content {
    text-align: center;
    animation: markaworks-404-fade-in 0.8s ease-out;
}

@keyframes markaworks-404-fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 404 Number */
.markaworks-404-number {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(120px, 20vw, 280px);
    font-weight: 700;
    line-height: 1;
    margin-bottom: 20px;
    background: linear-gradient(135deg, #053333 0%, #0a5555 50%, #B8D432 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.02em;
    animation: markaworks-404-gradient-shift 3s ease-in-out infinite;
}

@keyframes markaworks-404-gradient-shift {

    0%,
    100% {
        background-position: 0% 50%;
    }

    50% {
        background-position: 100% 50%;
    }
}

/* 404 Title */
.markaworks-404-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(32px, 5vw, 56px);
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 24px;
    letter-spacing: -0.01em;
}

.markaworks-404-text-dark {
    color: #053333;
    display: inline-block;
}

.markaworks-404-text-neon {
    color: #B8D432;
    display: inline-block;
    position: relative;
}

.markaworks-404-text-neon::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    right: 0;
    height: 3px;
    background: #B8D432;
    border-radius: 2px;
    animation: markaworks-404-underline-pulse 2s ease-in-out infinite;
}

@keyframes markaworks-404-underline-pulse {

    0%,
    100% {
        opacity: 1;
        transform: scaleX(1);
    }

    50% {
        opacity: 0.6;
        transform: scaleX(0.95);
    }
}

/* 404 Description */
.markaworks-404-description {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(16px, 2vw, 20px);
    line-height: 1.6;
    color: #053333;
    opacity: 0.8;
    max-width: 600px;
    margin: 0 auto 48px;
}

/* 404 Action Buttons */
.markaworks-404-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 48px;
}

.markaworks-404-btn {
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    padding: 16px 32px;
    border-radius: 100px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.markaworks-404-btn-primary {
    background: #B8D432;
    color: #053333;
    border: 2px solid #B8D432;
}

.markaworks-404-btn-primary::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: #053333;
    transform: translate(-50%, -50%);
    transition: width 0.5s ease, height 0.5s ease;
    z-index: 0;
}

.markaworks-404-btn-primary:hover::before {
    width: 300px;
    height: 300px;
}

.markaworks-404-btn-primary:hover {
    color: #B8D432;
    border-color: #053333;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.3);
}

.markaworks-404-btn-primary span,
.markaworks-404-btn-primary svg {
    position: relative;
    z-index: 1;
}

.markaworks-404-btn-secondary {
    background: transparent;
    color: #053333;
    border: 2px solid #053333;
}

.markaworks-404-btn-secondary:hover {
    background: #053333;
    color: #F4F5F5;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(5, 51, 51, 0.2);
}

/* Decorative Elements - scroll-driven rotation via JavaScript */
.markaworks-404-decoration {
    position: absolute;
    border-radius: 50%;
    opacity: 0.1;
    pointer-events: none;
    will-change: transform;
    /* No default animation - controlled by JavaScript scroll */
}

.markaworks-404-decoration-1 {
    width: 300px;
    height: 300px;
    background: #B8D432;
    top: 10%;
    left: 5%;
}

.markaworks-404-decoration-2 {
    width: 200px;
    height: 200px;
    background: #053333;
    bottom: 15%;
    right: 8%;
}

.markaworks-404-decoration-3 {
    width: 150px;
    height: 150px;
    background: #B8D432;
    top: 60%;
    left: 10%;
}

@keyframes markaworks-404-float {

    0%,
    100% {
        transform: translateY(0) scale(1);
    }

    50% {
        transform: translateY(-30px) scale(1.1);
    }
}

/* Responsive Design for 404 Page */
@media (max-width: 768px) {
    .markaworks-404-section {
        padding: 60px 20px;
        min-height: calc(100vh - 60px);
    }

    .markaworks-404-number {
        font-size: clamp(80px, 15vw, 120px);
        margin-bottom: 16px;
    }

    .markaworks-404-title {
        font-size: clamp(24px, 4vw, 32px);
        margin-bottom: 20px;
    }

    .markaworks-404-description {
        font-size: 16px;
        margin-bottom: 32px;
    }

    .markaworks-404-actions {
        flex-direction: column;
        gap: 12px;
        margin-top: 32px;
    }

    .markaworks-404-btn {
        width: 100%;
        justify-content: center;
        padding: 14px 28px;
        font-size: 16px;
    }

    .markaworks-404-decoration-1 {
        width: 200px;
        height: 200px;
    }

    .markaworks-404-decoration-2 {
        width: 150px;
        height: 150px;
    }

    .markaworks-404-decoration-3 {
        width: 100px;
        height: 100px;
    }
}

@media (max-width: 480px) {
    .markaworks-404-section {
        padding: 40px 16px;
    }

    .markaworks-404-number {
        font-size: 80px;
    }

    .markaworks-404-title {
        font-size: 24px;
    }

    .markaworks-404-description {
        font-size: 15px;
    }

    .markaworks-404-btn {
        padding: 12px 24px;
        font-size: 15px;
    }
}

/* Make sure the second line appears cleanly and spaced */
.markaworks-location-address {
    line-height: 1.4;
    display: block;
}

/* Style the second line nicely */
.markaworks-location-address br {
    display: block;
    content: "";
    margin-bottom: 2px;
    /* optional small spacing */
}

/* ============================================
   reCAPTCHA Styles
   ============================================ */
.recaptcha-container {
    margin-top: 8px;
    margin-bottom: 24px;
}

.recaptcha-container .g-recaptcha {
    display: flex;
    justify-content: flex-start;
}

.recaptcha-error {
    color: #dc3545;
    font-size: 0.875rem;
    margin-top: 0.5rem;
    font-weight: 500;
}

/* Responsive reCAPTCHA */
@media (max-width: 400px) {
    .recaptcha-container .g-recaptcha {
        transform: scale(0.9);
        transform-origin: left center;
    }
}

/* Ensure hidden attribute always works regardless of other display rules */
[hidden] {
    display: none !important;
}

/* ============================================
   BARS UI PROJECT CARD - IMAGE CROP FIX
   Zooms image to crop out black borders at top/bottom
   ============================================ */
.markaworks-project-card[data-project="BARS UI"] .markaworks-project-image-container,
.markaworks-portfolio-card[data-project="BARS UI"] .markaworks-portfolio-image-container {
    overflow: hidden;
}

.markaworks-project-card[data-project="BARS UI"] .markaworks-project-image-container img,
.markaworks-portfolio-card[data-project="BARS UI"] .markaworks-portfolio-image-container img {
    transform: scale(1.06);
    /* Slight zoom to crop edges */
    object-fit: cover;
    object-position: center center;
    margin-top: -8px;
    margin-bottom: -12px;
}

/* ============================================
   VIDEO TESTIMONIAL SECTION
   Premium testimonial with video and quote
   ============================================ */

.markaworks-video-testimonial {
    background-color: #B8D432;
    padding: 80px clamp(20px, 5vw, 80px) !important;
    overflow: hidden;
    position: relative;
}

.markaworks-video-testimonial-viewport {
    width: 100%;
    overflow: hidden;
}

.markaworks-video-testimonial-track {
    display: flex;
    width: 100%;
    transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.markaworks-video-testimonial-slide {
    flex: 0 0 100%;
    min-width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.markaworks-video-testimonial-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border: none;
    border-radius: 50%;
    background: #F4F5F5;
    color: #053333;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 8;
    padding: 0;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), background-color 0.3s ease;
}

.markaworks-video-testimonial-nav--next {
    right: clamp(10px, 1.6vw, 24px);
}

.markaworks-video-testimonial-nav--prev {
    left: clamp(10px, 1.6vw, 24px);
    right: auto;
}

.markaworks-video-testimonial-nav svg {
    width: 28px;
    height: 28px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-video-testimonial-nav--prev svg {
    transform: rotate(180deg);
}

.markaworks-video-testimonial-nav:hover {
    background: #ffffff;
    transform: translateY(-50%) scale(1.06);
}

.markaworks-video-testimonial-nav--next:hover svg {
    transform: translateX(2px);
}

.markaworks-video-testimonial-nav--prev:hover svg {
    transform: rotate(180deg) translateX(2px);
}

.markaworks-video-testimonial-nav:focus-visible {
    outline: 2px solid #053333;
    outline-offset: 3px;
}

.markaworks-video-testimonial-slide[inert] .markaworks-play-btn::before {
    animation: none;
}

#markaworksVideoTestimonial .markaworks-video-testimonial-content {
    padding-right: 16px !important;
}

#markaworksVideoTestimonial .markaworks-video-wrapper {
    flex: 1.4 1 0% !important;
    max-width: 1050px !important;
}

#markaworksVideoTestimonial .markaworks-video-thumbnail-container {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
}

@media (prefers-reduced-motion: reduce) {
    .markaworks-video-testimonial-track {
        transition: none;
    }
}

@media (max-width: 900px) {
    .markaworks-video-testimonial-nav {
        width: 44px;
        height: 44px;
        /* Sit on the video, not halfway down the stacked quote */
        top: calc(80px + (100vw - 2 * clamp(20px, 5vw, 80px)) * 0.28125);
    }

    .markaworks-video-testimonial-nav svg {
        width: 22px;
        height: 22px;
    }

    .markaworks-video-testimonial-nav--next {
        right: 8px;
    }

    .markaworks-video-testimonial-nav--prev {
        left: 8px;
        right: auto;
    }

    #markaworksVideoTestimonial .markaworks-video-testimonial-content {
        padding-right: 0 !important;
    }
}

.markaworks-video-testimonial-container {
    max-width: 1530px;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: stretch;
    /* Match height between video and text */
    gap: clamp(40px, 5vw, 80px);
    width: 100%;
}

/* Video Wrapper */
.markaworks-video-wrapper {
    flex: 1.4 1 0% !important;
    /* Increased flex-grow to take more space */
    min-width: 0 !important;
    /* Prevent flex-item overflow */
    max-width: 1050px !important;
    /* Increased max width for more presence */
    display: flex !important;
    flex-direction: column !important;
}

.markaworks-video-thumbnail-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    /* 16:9 Aspect Ratio */
    border-radius: 24px;
    overflow: hidden;
    background-color: #000;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
    /* Fix for overflow:hidden + border-radius with absolute children */
    mask-image: -webkit-radial-gradient(white, black);
    -webkit-mask-image: -webkit-radial-gradient(white, black);
    z-index: 1;
    isolation: isolate;
    transform: translateZ(0);
}

.markaworks-video-thumbnail-container:hover {
    transform: scale(1.02);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

/* Video Thumbnail Image */
.markaworks-video-thumbnail {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    z-index: 1;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Dark overlay removed for clarity */
.markaworks-video-thumbnail-container::before {
    content: none !important;
}

/* Decorative Circles */
.markaworks-video-circles {
    display: none !important;
}

.markaworks-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1px solid rgba(244, 245, 245, 0.2);
}

.markaworks-circle-1 {
    width: 150px;
    height: 150px;
    opacity: 0.25;
    animation: circleFloat 6s ease-in-out infinite;
}

.markaworks-circle-2 {
    width: 400px;
    height: 400px;
    opacity: 0.15;
    animation: circleFloat 8s ease-in-out infinite reverse;
}

.markaworks-circle-3 {
    width: 650px;
    height: 650px;
    opacity: 0.1;
    animation: circleFloat 10s ease-in-out infinite;
}

@keyframes circleFloat {

    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }

    50% {
        transform: translate(-50%, -50%) scale(1.05);
    }
}

.markaworks-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 20;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), filter 0.3s ease, opacity 0.3s ease;
}

/* Pause Button Styles */
.markaworks-pause-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 15;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.markaworks-video-thumbnail-container.playing:hover .markaworks-pause-btn {
    opacity: 1;
    pointer-events: auto;
}

.markaworks-pause-btn:hover {
    transform: translate(-50%, -50%) scale(1.1);
}

/* Click overlay when playing */
.markaworks-video-click-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 12;
    cursor: pointer;
    background: transparent;
}

.markaworks-play-btn:hover {
    transform: translate(-50%, -50%) scale(1.15);
}

.markaworks-play-btn:active {
    transform: translate(-50%, -50%) scale(0.95);
}

.markaworks-play-icon {
    width: clamp(60px, 10vw, 100px);
    height: clamp(60px, 10vw, 100px);
    filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.4));
    transition: filter 0.3s ease;
}

.markaworks-play-btn:hover .markaworks-play-icon {
    filter: drop-shadow(0 12px 30px rgba(0, 0, 0, 0.5));
}

/* Pulse animation behind play button */
.markaworks-play-btn::before {
    content: '';
    position: absolute;
    width: 80%;
    height: 80%;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    animation: playPulse 2s ease-in-out infinite;
}

@keyframes playPulse {

    0%,
    100% {
        transform: scale(1);
        opacity: 0.5;
    }

    50% {
        transform: scale(1.3);
        opacity: 0;
    }
}

/* Vimeo Container */
.markaworks-vimeo-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    background: #000;
}

/* Hide thumbnail elements once video has started */
.markaworks-video-thumbnail-container.started .markaworks-video-thumbnail,
.markaworks-video-thumbnail-container.started .markaworks-video-circles,
.markaworks-video-thumbnail-container.started::before {
    opacity: 0;
    pointer-events: none;
}

/* Hide play button only while video is actively playing */
.markaworks-video-thumbnail-container.playing .markaworks-play-btn {
    opacity: 0;
    pointer-events: none;
}

.markaworks-video-thumbnail-container.playing .markaworks-vimeo-container {
    display: block !important;
}

/* Content Side */
.markaworks-video-testimonial-content {
    flex: 1 1 0% !important;
    /* Occupy proportional space */
    min-width: 0 !important;
    /* flex-item overflow fix */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: flex-start !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    box-sizing: border-box !important;
    min-height: 100% !important;
}

body.landing-page .lt-stats-column {
    min-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.landing-page .lt-stats-column:nth-child(1) {
    flex: 0 0 calc(42% - 24px) !important;
}

body.landing-page .lt-stats-column:nth-child(2) {
    flex: 0 0 calc(58% - 24px) !important;
}

.markaworks-video-testimonial-inner {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    /* Align everything to the top initially */
    align-items: flex-start !important;
    height: 100% !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: clamp(24px, 3vw, 40px) !important;
    /* Gap between Quote and Author */
}

.markaworks-video-testimonial-copy {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(16px, 1.8vw, 22px) !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    color: #0B4444 !important;
    margin: 0 !important;
    max-width: 34em !important;
}

/* Quote */
.markaworks-video-testimonial-quote {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(32px, 3.8vw, 56px) !important;
    font-weight: 600 !important;
    line-height: 1.15 !important;
    color: #0B4444 !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    width: 100% !important;
    border: none !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Force removal of any browser-added quote symbols that might shift the box */
.markaworks-video-testimonial-quote::before,
.markaworks-video-testimonial-quote::after {
    content: none !important;
    display: none !important;
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Author Section */
.markaworks-video-testimonial-author {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: clamp(16px, 2vw, 24px) !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 1 !important;
    width: 100% !important;
}

.markaworks-video-author-avatar {
    width: clamp(80px, 10vw, 108px) !important;
    height: clamp(80px, 10vw, 108px) !important;
    border-radius: 12px !important;
    object-fit: cover !important;
    flex-shrink: 0 !important;
    background: linear-gradient(201deg, #94CDD9 0%, #94CDD9 68%) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.markaworks-video-author-avatar:hover {
    transform: scale(1.05) rotate(2deg);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.markaworks-video-author-details {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: flex-start !important;
}

.markaworks-video-author-info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

.markaworks-video-author-name {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: #0B4444 !important;
    margin: 0 !important;
}

.markaworks-video-author-title {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(16px, 2vw, 20px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0B4444 !important;
    opacity: 0.8 !important;
    margin: 0 !important;
}

.markaworks-video-author-website {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(14px, 1.5vw, 16px) !important;
    font-weight: 400 !important;
    line-height: 1.2 !important;
    color: #0B4444 !important;
    opacity: 0.8 !important;
    text-decoration: none !important;
    transition: opacity 0.3s ease, color 0.3s ease !important;
    margin-top: 12px !important;
}

.markaworks-video-author-website:hover {
    opacity: 1;
    color: #0B4444 !important;
    text-decoration: underline;
}

/* CTA Button */
.markaworks-video-case-study-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: clamp(16px, 2vw, 19px) clamp(24px, 3vw, 32px) !important;
    background-color: #F4F5F5 !important;
    border-radius: 100px !important;
    box-shadow: 0 8px 25px rgba(184, 212, 50, 0.3) !important;
    text-decoration: none !important;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
    /* overflow: hidden !important; */ overflow: auto !important;
    position: relative !important;
    width: fit-content !important;
    margin-top: auto !important;
    /* Pushes the button to the bottom */
}

.markaworks-video-case-study-btn span {
    font-family: 'Inter Tight', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    font-size: clamp(18px, 2vw, 24px) !important;
    font-weight: 600 !important;
    line-height: 1.2 !important;
    color: #0B4444 !important;
    position: relative !important;
    z-index: 1 !important;
}

.markaworks-video-case-study-btn svg {
    width: 24px !important;
    height: 24px !important;
    color: #0B4444 !important;
    transition: transform 0.3s ease !important;
    position: relative !important;
    z-index: 1 !important;
}

.markaworks-video-case-study-btn:hover {
    background-color: #0B4444;
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.markaworks-video-case-study-btn:hover span,
.markaworks-video-case-study-btn:hover svg {
    color: #F4F5F5;
}

.markaworks-video-case-study-btn:hover svg {
    transform: translateX(5px);
}

.markaworks-video-case-study-btn:active {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}

/* ============================================
   VIDEO TESTIMONIAL - RESPONSIVE STYLES
   ============================================ */

@media (max-width: 900px) {
    .markaworks-video-testimonial-container {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .markaworks-video-wrapper {
        width: 100% !important;
        margin: 0 !important;
    }

    .markaworks-video-testimonial-content {
        align-items: flex-start !important;
        text-align: left !important;
        padding-top: 40px !important;
    }

    .markaworks-video-testimonial-author {
        justify-content: flex-start !important;
    }

    .markaworks-video-author-details {
        text-align: left !important;
        align-items: flex-start !important;
    }
}

@media (max-width: 600px) {
    .markaworks-video-testimonial-author {
        flex-direction: row !important;
        align-items: center !important;
        gap: 16px !important;
    }
}

/* Small Mobile */
@media (max-width: 400px) {
    .markaworks-video-thumbnail-container {
        border-radius: 12px;
    }

    .markaworks-video-author-avatar {
        width: 72px;
        height: 72px;
        border-radius: 10px;
    }

    .markaworks-circle-1 {
        width: 80px;
        height: 80px;
    }

    .markaworks-circle-2 {
        width: 180px;
        height: 180px;
    }

    .markaworks-circle-3 {
        width: 300px;
        height: 300px;
    }
}

/* Video thumbnail entrance animation */
.markaworks-video-wrapper {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Animation trigger removed */

/* Video Timeline Styling */
.markaworks-video-timeline {
    position: absolute;
    bottom: 10px;
    left: 20px;
    right: 20px;
    padding: 12px 16px;
    background: rgba(5, 51, 51, 0.9);
    /* More solid background for better visibility */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 25;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    box-sizing: border-box !important;
    /* Force border-box to contain inside the left/right constraints */
}

.markaworks-video-thumbnail-container.started:hover .markaworks-video-timeline {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Mobile: Hide control bar when playing, show only when paused */
@media (max-width: 768px) {
    .markaworks-video-thumbnail-container.started.playing .markaworks-video-timeline {
        opacity: 0 !important;
        pointer-events: none !important;
    }

    .markaworks-video-thumbnail-container.started:not(.playing) .markaworks-video-timeline {
        opacity: 1;
        transform: translateY(0);
        pointer-events: auto;
    }

    /* Hide pause button on mobile - tap video to pause instead */
    .markaworks-pause-btn {
        display: none !important;
    }
}

.markaworks-timeline-track {
    width: 100%;
    height: 4px;
    background: rgba(244, 245, 245, 0.15);
    border-radius: 10px;
    position: relative;
    cursor: pointer;
    /* Increase hit area without changing layout */
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    background-clip: padding-box;
    margin-top: -8px;
    margin-bottom: -8px;
    transition: height 0.3s ease;
}

.markaworks-timeline-track:hover {
    height: 8px;
}

.markaworks-timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: #B8D432;
    border-radius: 10px;
    transition: width 0.1s linear;
    box-shadow: 0 0 10px rgba(184, 212, 50, 0.5);
    z-index: 2;
    /* Ensure it stays above the track */
}

.markaworks-timeline-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    /* Slightly smaller */
    font-weight: 500;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.markaworks-time-display {
    display: flex;
    align-items: center;
    gap: 6px;
}

.markaworks-time-separator {
    opacity: 0.5;
}

.markaworks-time-current {
    color: #B8D432;
}

/* Volume Control */
.markaworks-volume-control {
    display: flex;
    align-items: center;
    gap: 10px;
}

.markaworks-volume-btn {
    background: none;
    border: none;
    color: #F4F5F5;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    transition: color 0.3s ease, transform 0.2s ease;
}

.markaworks-volume-btn:hover {
    color: #B8D432;
    transform: scale(1.1);
}

.markaworks-volume-slider-wrapper {
    width: 0;
    overflow: hidden;
    transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.markaworks-volume-control:hover .markaworks-volume-slider-wrapper {
    width: 80px;
}

.markaworks-volume-track {
    width: 80px;
    height: 4px;
    background: rgba(244, 245, 245, 0.2);
    border-radius: 4px;
    position: relative;
    cursor: pointer;
}

.markaworks-volume-level {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: #B8D432;
    border-radius: 4px;
}

.markaworks-volume-btn.muted svg {
    opacity: 0.5;
}

/* Portfolio Showcase Buttons - Mobile */
@media (max-width: 968px) {
    .markaworks-portfolio-buttons-container {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100% !important;
        gap: 12px !important;
        margin-top: 20px !important;
    }

    .markaworks-portfolio-view-all-btn {
        width: 100% !important;
        box-sizing: border-box !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        text-align: center !important;
        /* Ensure it's not restricted by min-width of menu */
        min-width: 0 !important;
    }

    .markaworks-portfolio-categories-wrapper {
        width: 100% !important;
    }

    .markaworks-portfolio-categories-wrapper .markaworks-portfolio-view-all-btn {
        width: 100% !important;
    }
}

/* Production hero rebuild from Figma measurements */
.landing-hero {
    --landing-hover-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 31 31' fill='none'%3E%3Cpolygon points='7,3 25,21 14,19 9,29' fill='%23B8D432' stroke='%23F4F5F5' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 7 3, pointer;
    width: 100%;
    min-height: 830px;
    height: 830px;
    padding: 0 80px;
    background: #053333;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

.landing-hero-container {
    width: 1280px;
    max-width: 1280px;
    height: 830px;
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0 auto;
}

.landing-hero-left {
    width: 704px;
    flex: 0 0 704px;
    min-width: 0;
    max-width: none;
    height: 830px;
    padding: 160px 0 80px;
    margin: 0;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 59px;
    box-sizing: border-box;
}

.contact-options-section .calendly-inline-widget {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 820px !important;
    height: 820px !important;
    max-height: none !important;
    display: block !important;
    background: #B8D432 !important;
    border: 1px solid rgba(5, 51, 51, 0.08);
    box-shadow: 0 24px 60px rgba(5, 51, 51, 0.08);
}

.contact-options-section .calendly-inline-widget iframe {
    width: 100% !important;
    height: 100% !important;
    min-height: 820px !important;
    display: block !important;
    background: #B8D432 !important;
}

.landing-contact-section .contact-column-left {
    align-items: center;
}

.landing-contact-section .calendly-inline-widget {
    width: min(100%, 590px) !important;
    min-width: 0 !important;
    max-width: 590px !important;
    height: 595px !important;
    min-height: 595px !important;
    max-height: 595px !important;
    position: relative !important;
    display: block !important;
    /* overflow: hidden !important; */ overflow: auto !important;
    background: #F4F5F5 !important;
    border: 0;
    border-radius: 16px;
    box-shadow: none;
}

.landing-contact-section .calendly-inline-widget iframe {
    width: 100% !important;
    height: 1000px !important;
    min-height: 1000px !important;
    display: block !important;
    background: #B8D432 !important;
    border-radius: 16px;
}

@media (max-width: 768px) {
    .landing-contact-section.contact-options-section {
        padding-bottom: 20px !important;
    }

    .landing-contact-section .contact-header {
        margin-bottom: 42px !important;
    }

    .landing-contact-section .contact-main-title {
        font-size: clamp(48px, 14vw, 64px) !important;
        line-height: 1.08 !important;
    }

    .landing-contact-section .calendly-inline-widget {
        width: 100% !important;
        height: clamp(550px, 147vw, 610px) !important;
        min-height: clamp(550px, 147vw, 610px) !important;
        max-height: none !important;
    }

    .landing-contact-section .calendly-inline-widget iframe {
        height: 100% !important;
        min-height: 100% !important;
    }
}

@media (min-width: 1025px) {
    .landing-testimonials-section {
        height: auto !important;
        min-height: 756px !important;
        padding: 40px clamp(40px, 5vw, 80px) 0 !important;
        box-sizing: border-box !important;
    }

    .landing-testimonials-section .markaworks-testimonials-container {
        width: 1280px !important;
        max-width: 1280px !important;
        height: auto !important;
        min-height: 716px !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    .landing-testimonials-section .markaworks-testimonials-carousel {
        height: auto !important;
        min-height: 716px !important;
        overflow: visible !important;
    }

    .landing-testimonials-section .markaworks-testimonial-card {
        gap: 40px !important;
        align-items: flex-start !important;
        height: auto !important;
        min-height: 668px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-left {
        width: 673px !important;
        flex: 0 0 673px !important;
        min-height: 653px !important;
        padding-right: 0 !important;
        gap: 39.8px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-content {
        width: 673px !important;
        gap: 24px !important;
        flex-shrink: 0 !important;
    }

    .landing-testimonials-section .markaworks-testimonial-text-wrapper {
        width: 673px !important;
        gap: 18px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-title {
        width: 673px !important;
        min-height: 48px !important;
        font-size: 39.08px !important;
        font-weight: 600 !important;
        line-height: 46.90px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-quote {
        width: 666.48px !important;
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 30.80px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-stats {
        width: 673px !important;
        gap: 20px !important;
        align-items: stretch !important;
    }

    .landing-testimonials-section .markaworks-stat-item {
        width: 211px !important;
        height: auto !important;
        min-height: 155.19px !important;
        flex: 0 0 211px !important;
        padding: 16px !important;
        box-sizing: border-box !important;
    }

    .landing-testimonials-section .markaworks-stat-number {
        font-size: 44.67px !important;
        font-weight: 600 !important;
        line-height: 49.13px !important;
    }

    .landing-testimonials-section .markaworks-stat-label {
        font-size: 22px !important;
        font-weight: 400 !important;
        line-height: 30.80px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-author {
        width: 673px !important;
        justify-content: space-between !important;
        gap: 24px !important;
    }

    .landing-testimonials-section .markaworks-author-info {
        gap: 24px !important;
    }

    .landing-testimonials-section .markaworks-author-avatar {
        width: 160px !important;
        height: 160px !important;
        border-radius: 20px !important;
    }

    .landing-testimonials-section .markaworks-author-details {
        width: 202.5px !important;
        gap: 16px !important;
    }

    .landing-testimonials-section .markaworks-author-name {
        font-size: 32px !important;
        font-weight: 500 !important;
        line-height: 40px !important;
    }

    .landing-testimonials-section .markaworks-author-position {
        font-size: 20px !important;
        font-weight: 400 !important;
        line-height: 28px !important;
        opacity: 0.70 !important;
    }

    .landing-testimonials-section .markaworks-author-website {
        font-size: 18px !important;
        font-weight: 400 !important;
        line-height: 25.2px !important;
        opacity: 0.70 !important;
    }

    /* Vivira testimonial specific gap adjustments */
    .landing-testimonials-section .markaworks-testimonial-card[data-testimonial="2"] .markaworks-testimonial-left {
        gap: 0 !important;
    }

    .landing-testimonials-section .markaworks-testimonial-card[data-testimonial="2"] .markaworks-testimonial-content {
        gap: 16px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-card[data-testimonial="2"] .markaworks-testimonial-text-wrapper {
        gap: 14px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-nav {
        gap: 12px !important;
        align-self: center !important;
    }

    .landing-testimonials-section .markaworks-nav-arrow {
        width: 64px !important;
        height: 64px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-right {
        width: 567px !important;
        height: 668px !important;
        padding: 12px !important;
        box-sizing: border-box !important;
    }

    .landing-testimonials-section .markaworks-testimonial-right::before {
        border-radius: 26px !important;
    }

    .landing-testimonials-section .markaworks-testimonial-image {
        width: 543px !important;
        height: 641.81px !important;
        margin: 0 !important;
        border-radius: 20px !important;
    }
}

.landing-footer-locations-section {
    background: #053333;
    padding: 80px 30px 20px;
}

.landing-footer-locations-container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
}

.landing-footer-locations-section .landing-footer-locations-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
    min-height: 365px;
}

.landing-footer-locations-section .markaworks-location-card {
    min-height: 365px;
    height: 365px;
    padding: 24px;
    background: #0B4444;
    border-radius: 20px;
    box-shadow: none;
    gap: 16px;
    justify-content: flex-start;
    box-sizing: border-box;
}

.landing-footer-locations-section .markaworks-location-card:hover {
    box-shadow: none;
}

.landing-footer-locations-section .markaworks-location-icon {
    width: 160px;
    height: 160px;
    flex: 0 0 160px;
}

.landing-footer-locations-section .markaworks-location-title {
    font-size: 40px;
    line-height: 48px;
    margin: 0;
}

.landing-footer-locations-section .markaworks-location-address {
    font-size: 16px;
    line-height: 22.4px;
}

.landing-footer-locations-section .markaworks-location-content {
    gap: 16px;
}

body:has(.landing-hero) .markaworks-footer-container {
    max-width: 1400px;
    padding: 0 clamp(20px, 4vw, 40px);
    box-sizing: border-box;
}

@media (max-width: 1024px) {
    .landing-footer-locations-section .landing-footer-locations-row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        min-height: 0;
    }

    .landing-footer-locations-section .markaworks-location-card {
        height: auto;
        min-height: 320px;
    }
}

@media (max-width: 640px) {
    .landing-footer-locations-section {
        padding: 48px 20px 20px;
    }

    .landing-footer-locations-section .landing-footer-locations-row {
        grid-template-columns: 1fr;
    }

    .landing-footer-locations-section .markaworks-location-card {
        min-height: 300px;
    }

    .landing-footer-locations-section .markaworks-location-title {
        font-size: 32px;
        line-height: 38px;
    }
}

.landing-copy-stack {
    width: 704px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    opacity: 0;
    transform: translateY(18px);
    animation: landing-copy-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

.landing-main-copy {
    width: 704px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.landing-title {
    width: 704px;
    margin: 0;
    color: #FFFFFF;
    font-family: 'Inter Tight', sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
    letter-spacing: 0;
    text-transform: capitalize;
}

.landing-title-line {
    display: block;
}

.landing-title-row {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.landing-highlight {
    color: #B8D432;
    text-shadow: 4px 4px 50px rgba(184, 212, 50, 0.80);
}

.landing-word-rotator {
    display: block;
    width: 580px;
    height: 66px;
    overflow: hidden;
    position: relative;
    padding: 0;
    margin: 0;
}

.landing-word-rotator .l-word {
    position: absolute;
    inset: 0 auto auto 0;
    grid-area: auto;
    width: 580px;
    height: 66px;
    color: #94CDD9;
    font-family: 'Inter Tight', sans-serif;
    font-size: 60px;
    font-weight: 600;
    line-height: 66px;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(72px);
    filter: blur(8px);
    animation: landing-word-cycle 9s cubic-bezier(0.16, 1, 0.3, 1) infinite;
}

.landing-word-rotator .l-word:nth-child(1) {
    color: #BFB1D7;
    animation-delay: 0s;
}

.landing-word-rotator .l-word:nth-child(2) {
    color: #94CDD9;
    animation-delay: 3s;
}

.landing-word-rotator .l-word:nth-child(3) {
    color: #BFB1D7;
    animation-delay: 6s;
}

.landing-desc {
    width: 549px;
    max-width: 549px;
    margin: 0;
    color: #FFFFFF;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 35.52px;
    letter-spacing: 0;
}

.landing-cta {
    width: 205px;
    height: 63px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 100px;
    background: #B8D432;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28.8px;
    letter-spacing: 0;
    text-decoration: none;
    border: solid 3px transparent;
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.30);
    transform: none;
    transform-origin: center;
    position: relative;
    overflow: visible;
    z-index: 1;
    --border-angle: 0turn;
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
}

.landing-cta::after {
    content: '';
    position: absolute;
    inset: -3px;
    border-radius: 100px;
    padding: 3px;
    background: conic-gradient(from var(--border-angle),
            #F4F5F5 0%,
            transparent 30%,
            transparent 70%,
            #F4F5F5 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    animation: mw-border-spin 3s linear infinite;
    pointer-events: none;
    z-index: -1;
}

.landing-cta:hover,
.landing-cta:focus-visible {
    transform: translateY(-3px);
    background: #C5E138;
    box-shadow: 0 16px 36px rgba(184, 212, 50, 0.32);
}

.landing-cta:hover::after,
.landing-cta:focus-visible::after {
    animation-duration: 2s;
}

.landing-service-tags {
    width: 541.59px;
    height: 185px;
    position: absolute;
    left: 0;
    bottom: 35px;
    opacity: 0;
    animation: landing-tags-enter 300ms ease 340ms forwards;
}

.landing-service-tag {
    --tag-rotate: 0deg;
    --tag-delay: 0ms;
    --tag-start-x: 0px;
    --tag-mid-x: 0px;
    height: 32px;
    padding: 4px 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    position: absolute;
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 100px;
    background: #053333;
    outline: none;
    box-shadow: none;
    color: #FFFFFF;
    font-family: 'Inter Tight', sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    letter-spacing: 0;
    text-transform: uppercase;
    white-space: nowrap;
    box-sizing: border-box;
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(var(--tag-rotate)) scale(1);
    filter: blur(0);
    animation: landing-tag-fall 1280ms linear calc(460ms + var(--tag-delay)) backwards;
    transform-origin: 50% 50%;
    transition: background-color 220ms ease, border-color 220ms ease, color 220ms ease;
    will-change: transform, opacity, filter;
    cursor: default;
}

.landing-service-tag:hover,
.landing-service-tag:focus-visible {
    color: #053333;
    border-color: #B8D432;
    outline: none;
    background: #B8D432;
    box-shadow: none;
    cursor: var(--landing-hover-cursor);
}

.landing-service-tag-1 {
    --tag-rotate: 5deg;
    --tag-delay: 0ms;
    --tag-start-x: -26px;
    --tag-mid-x: 8px;
    left: 27.88px;
    top: 18px;
}

.landing-service-tag-2 {
    --tag-rotate: -13deg;
    --tag-delay: 105ms;
    --tag-start-x: 34px;
    --tag-mid-x: -10px;
    left: 201.73px;
    top: 18px;
}

.landing-service-tag-3 {
    --tag-rotate: 14deg;
    --tag-delay: 210ms;
    --tag-start-x: -18px;
    --tag-mid-x: 7px;
    left: 372.70px;
    top: 6px;
}

.landing-service-tag-4 {
    --tag-rotate: 9deg;
    --tag-delay: 315ms;
    --tag-start-x: 22px;
    --tag-mid-x: -8px;
    left: 117.75px;
    top: 78px;
}

.landing-service-tag-5 {
    --tag-rotate: -2deg;
    --tag-delay: 420ms;
    --tag-start-x: -30px;
    --tag-mid-x: 9px;
    left: 263px;
    top: 70px;
}

.landing-service-tag-6 {
    --tag-rotate: 3deg;
    --tag-delay: 525ms;
    --tag-start-x: 18px;
    --tag-mid-x: -6px;
    left: 1.70px;
    top: 118px;
}

.landing-service-tag-7 {
    --tag-rotate: 1deg;
    --tag-delay: 630ms;
    --tag-start-x: -20px;
    --tag-mid-x: 6px;
    left: 323.35px;
    top: 116px;
}

.landing-hero-right {
    width: 576px;
    flex: 0 0 576px;
    min-width: 0;
    height: 830px;
    max-height: none;
    margin: 0;
    position: relative;
    display: block;
    perspective: none;
    opacity: 0;
    transform: translateX(24px);
    animation: landing-visual-enter 1100ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.landing-grid-container {
    width: 616px;
    max-width: none;
    height: 830px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    position: relative;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 95%);
    mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, #000 30%, #000 70%, rgba(0, 0, 0, 0) 95%);
}

.landing-grid-container:hover,
.landing-grid-container:hover * {
    cursor: var(--landing-hover-cursor) !important;
}

.landing-grid-fade-top,
.landing-grid-fade-bottom {
    left: 0;
    right: 0;
    height: 145px;
    z-index: 4;
}

.landing-grid-fade-top {
    top: 0;
    background: linear-gradient(180deg, #053333 0%, rgba(5, 51, 51, 0) 100%);
}

.landing-grid-fade-bottom {
    bottom: 0;
    background: linear-gradient(0deg, #053333 0%, rgba(5, 51, 51, 0) 100%);
}

.landing-col {
    width: 164px;
    flex: 0 0 164px;
    display: block;
    overflow: visible;
}

.landing-col-inner {
    width: 164px;
    display: flex;
    flex-direction: column;
    gap: 0;
    will-change: transform;
}

.landing-col.col-2,
.landing-col.col-2 .landing-col-inner {
    width: 220px;
    flex-basis: 220px;
}

.landing-col.col-3 {
    margin-top: -735px;
}

.col-group {
    width: 164px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 16px;
}

.col-group-center {
    width: 220px;
}

.product-block {
    width: 164px;
    height: 250px;
    flex: 0 0 250px;
    position: relative;
    overflow: hidden;
    border-radius: 10px;
    background: #0A211F;
    box-shadow: none;
    transform: translateZ(0);
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), filter 420ms ease;
}

.product-block::before {
    display: none;
}

.product-block.is-tall {
    height: 266.66px;
    flex-basis: 266.66px;
}

.product-block-center {
    width: 220px;
    height: 220px;
    flex-basis: 220px;
}

.landing-grid-container .product-block img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: none !important;
    height: 100% !important;
    min-height: 100% !important;
    max-height: none !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    object-position: 50% 50% !important;
    filter: none;
    transform: scale(1.12) !important;
    transform-origin: center center !important;
    transition: filter 420ms ease, transform 420ms ease;
}

.product-block:hover {
    transform: translateY(-6px);
}

.landing-grid-container:hover .product-block img {
    filter: none;
}

.landing-grid-container .product-block:hover img {
    transform: scale(1.16) !important;
}

.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-16.38.50-1center-images-.webp"] {
    object-fit: fill !important;
    transform: scale(1.005) !important;
}

.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-16.38.50-1center-images-.webp"] {
    transform: scale(1.005) !important;
}

.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-10.40.47-3left-side-images-.webp"],
.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/META_BIO_Scene_7_04_2K-3left-side-images-.webp"] {
    object-position: 59% 50% !important;
    transform: translateX(7px) scale(1.12) !important;
}

.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-10.40.47-3left-side-images-.webp"],
.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/META_BIO_Scene_7_04_2K-3left-side-images-.webp"] {
    transform: translateX(7px) scale(1.16) !important;
}

.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/META_BIO_Scene_7_04_2K-3left-side-images-.webp"] {
    transform: translateX(14px) scale(1.12) !important;
}

.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/META_BIO_Scene_7_04_2K-3left-side-images-.webp"] {
    transform: translateX(14px) scale(1.16) !important;
}

.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-15.51.43-1right-side-images.webp"] {
    object-fit: fill !important;
    left: 50% !important;
    right: auto !important;
    width: 112% !important;
    min-width: 112% !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
}

.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-15.51.43-1right-side-images.webp"] {
    object-fit: fill !important;
    left: 50% !important;
    right: auto !important;
    width: 112% !important;
    min-width: 112% !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
}

.landing-grid-container .product-block img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-10.37.57-2right-side-images.webp"] {
    transform: translateX(11px) scale(1.12) !important;
}

.landing-grid-container .product-block:hover img[src$="/wp-content/uploads/2026/05/Ekran-Resmi-2026-05-07-10.37.57-2right-side-images.webp"] {
    transform: translateX(11px) scale(1.16) !important;
}

.up-anim {
    animation: slideUp 44s linear infinite;
}

.down-anim {
    animation: slideDown 48s linear infinite;
}

@keyframes slideUp {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-33.333%);
    }
}

@keyframes slideDown {
    0% {
        transform: translateY(-33.333%);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes landing-copy-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes landing-tags-enter {
    to {
        opacity: 1;
    }
}

@keyframes landing-tag-fall {
    0% {
        opacity: 0;
        transform: translate3d(var(--tag-start-x), -260px, 0) rotate(calc(var(--tag-rotate) - 24deg)) scale(0.88);
        filter: blur(8px);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
    }

    38% {
        opacity: 1;
        filter: blur(1px);
    }

    52% {
        opacity: 1;
        transform: translate3d(var(--tag-mid-x), 18px, 0) rotate(calc(var(--tag-rotate) + 5deg)) scale(1.035, 0.94);
        filter: blur(0);
        box-shadow: 0 18px 30px rgba(0, 0, 0, 0.20);
    }

    64% {
        transform: translate3d(0, -13px, 0) rotate(calc(var(--tag-rotate) - 3deg)) scale(0.985, 1.025);
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.12);
    }

    75% {
        transform: translate3d(0, 7px, 0) rotate(calc(var(--tag-rotate) + 1.5deg)) scale(1.012, 0.985);
        box-shadow: 0 11px 20px rgba(0, 0, 0, 0.15);
    }

    86% {
        transform: translate3d(0, -4px, 0) rotate(calc(var(--tag-rotate) - 0.8deg)) scale(0.998, 1.006);
        box-shadow: 0 5px 12px rgba(0, 0, 0, 0.10);
    }

    94% {
        transform: translate3d(0, 2px, 0) rotate(calc(var(--tag-rotate) + 0.35deg)) scale(1.002, 0.997);
        box-shadow: 0 7px 14px rgba(0, 0, 0, 0.12);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0) rotate(var(--tag-rotate)) scale(1);
        filter: blur(0);
        box-shadow: none;
    }
}

@keyframes landing-visual-enter {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes landing-word-cycle {
    0% {
        opacity: 0;
        transform: translateY(72px);
        filter: blur(8px);
    }

    9%,
    29% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }

    38%,
    100% {
        opacity: 0;
        transform: translateY(-72px);
        filter: blur(8px);
    }
}

@media (max-width: 1399px) {
    .landing-hero {
        padding: 0 48px;
    }

    .landing-hero-container {
        width: 100%;
        max-width: 1220px;
    }

    .landing-hero-left {
        width: calc(100% - 520px);
        flex-basis: calc(100% - 520px);
    }

    .landing-copy-stack,
    .landing-main-copy,
    .landing-title {
        width: 620px;
        max-width: 100%;
    }

    .landing-title {
        font-size: 56px;
        line-height: 62px;
    }

    .landing-word-rotator,
    .landing-word-rotator .l-word {
        width: 540px;
        height: 62px;
        font-size: 56px;
        line-height: 62px;
    }

    .landing-hero-right,
    .landing-grid-container {
        width: 520px;
        flex-basis: 520px;
    }

    .landing-col,
    .landing-col-inner,
    .col-group {
        width: 148px;
        flex-basis: 148px;
    }

    .landing-col.col-2,
    .landing-col.col-2 .landing-col-inner,
    .col-group-center {
        width: 192px;
        flex-basis: 192px;
    }

    .product-block {
        width: 148px;
        height: 226px;
        flex-basis: 226px;
    }

    .product-block-center {
        width: 192px;
        height: 192px;
        flex-basis: 192px;
    }
}

@media (max-width: 1180px) {
    .landing-hero {
        height: auto;
        min-height: 0;
        padding: 118px 40px 64px;
        cursor: auto !important;
    }

    .landing-hero,
    .landing-hero * {
        cursor: auto !important;
    }

    .landing-hero-container {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }

    .landing-hero-left {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        padding: 0;
        gap: 40px;
    }

    .landing-copy-stack,
    .landing-main-copy,
    .landing-title {
        width: 100%;
    }

    .landing-title {
        font-size: 54px;
        line-height: 60px;
    }

    .landing-word-rotator,
    .landing-word-rotator .l-word {
        width: 100%;
        height: 60px;
        font-size: 54px;
        line-height: 60px;
    }

    .landing-desc {
        width: 549px;
        max-width: 100%;
    }

    .landing-service-tags {
        width: 100%;
        height: auto;
        position: static;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }

    .landing-service-tag {
        position: static;
        --tag-rotate: 0deg;
        transform: none;
    }

    .landing-service-tag:hover,
    .landing-service-tag:focus-visible {
        transform: none;
    }

    .landing-hero-right,
    .landing-grid-container {
        width: 100%;
        height: 430px;
        flex: 0 0 auto;
    }

    .landing-grid-container {
        justify-content: center;
    }

    .landing-col.col-3 {
        margin-top: -220px;
    }

}

@media (max-width: 760px) {
    .landing-hero {
        padding: 108px 24px 52px;
    }

    .landing-title {
        font-size: 44px;
        line-height: 50px;
    }

    .landing-title-row {
        gap: 12px;
        flex-wrap: wrap;
    }

    .landing-word-rotator,
    .landing-word-rotator .l-word {
        height: 50px;
        font-size: 44px;
        line-height: 50px;
    }

    .landing-desc {
        font-size: 21px;
        line-height: 31px;
    }

    .landing-cta {
        width: 205px;
        height: 63px;
    }

    .landing-hero-right,
    .landing-grid-container {
        height: 390px;
    }

    .landing-col,
    .landing-col-inner,
    .col-group {
        width: 132px;
        flex-basis: 132px;
    }

    .landing-col.col-2,
    .landing-col.col-2 .landing-col-inner,
    .col-group-center {
        width: 158px;
        flex-basis: 158px;
    }

    .product-block {
        width: 132px;
        height: 198px;
        flex-basis: 198px;
    }

    .product-block-center {
        width: 158px;
        height: 158px;
        flex-basis: 158px;
    }
}

@media (max-width: 520px) {
    .landing-hero {
        padding: 100px 20px 44px;
    }

    .landing-main-copy {
        gap: 24px;
    }

    .landing-title {
        font-size: 38px;
        line-height: 44px;
    }

    .landing-word-rotator,
    .landing-word-rotator .l-word {
        height: 44px;
        font-size: 38px;
        line-height: 44px;
    }

    .landing-desc {
        font-size: 19px;
        line-height: 29px;
    }

    .landing-service-tags {
        gap: 10px;
    }

    .landing-service-tag {
        height: 32px;
        font-size: 12px;
        line-height: 16px;
    }

    .landing-hero-right,
    .landing-grid-container {
        height: 360px;
    }

    .landing-grid-container {
        justify-content: flex-start;
        overflow: hidden;
    }

    .landing-col,
    .landing-col-inner,
    .col-group {
        width: 108px;
        flex-basis: 108px;
    }

    .landing-col.col-2,
    .landing-col.col-2 .landing-col-inner,
    .col-group-center {
        width: 126px;
        flex-basis: 126px;
    }

    .landing-col.col-3 {
        display: block;
        margin-top: -180px;
    }

    .product-block {
        width: 108px;
        height: 166px;
        flex-basis: 166px;
    }

    .product-block-center {
        width: 126px;
        height: 126px;
        flex-basis: 126px;
    }
}

@media (max-width: 520px) {
    body.landing-page .landing-page-navbar {
        padding: 24px 0 0 !important;
    }

    body.landing-page .landing-page-navbar .markaworks-nav-container {
        padding: 0 27px !important;
    }

    body.landing-page .landing-hero {
        min-height: 0;
        height: auto;
        padding: 94px 27px 18px;
        align-items: flex-start;
        justify-content: flex-start;
    }

    body.landing-page .landing-hero-container {
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        min-height: 0;
        height: auto;
        gap: 1px;
        align-items: flex-start;
        margin: 0;
        flex: 0 0 auto;
    }

    body.landing-page .landing-hero-left {
        width: calc(100vw - 54px);
        min-width: 0;
        max-width: calc(100vw - 54px);
        gap: 0;
        flex: 0 0 auto;
    }

    body.landing-page .landing-copy-stack {
        width: 100%;
        gap: 16px;
        display: contents;
    }

    body.landing-page .landing-main-copy {
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        gap: 20px;
        order: 1;
    }

    body.landing-page .landing-title,
    body.landing-page .landing-title-line,
    body.landing-page .landing-highlight,
    body.landing-page .landing-word-rotator .l-word {
        font-size: 33px;
        line-height: 36.6px;
        font-weight: 600;
        letter-spacing: 0;
    }

    body.landing-page .landing-title {
        width: 100%;
        overflow: visible;
    }

    body.landing-page .landing-title-line {
        white-space: nowrap;
    }

    body.landing-page .landing-title-row {
        display: flex;
        gap: 9.66px;
        flex-wrap: wrap;
    }

    body.landing-page .landing-word-rotator {
        width: min(100%, 350px);
        height: 37px;
    }

    body.landing-page .landing-desc {
        width: 100%;
        max-width: 343px;
        color: #E0E0E0;
        font-size: 16.6px;
        line-height: 26.5px;
        font-weight: 400;
    }

    body.landing-page .landing-service-tags {
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        height: auto;
        position: relative;
        display: grid;
        grid-template-columns: repeat(6, 1fr);
        column-gap: 4px;
        row-gap: 10px;
        left: auto;
        bottom: auto;
        margin-top: 28px;
        overflow: visible;
        order: 2;
        opacity: 1;
        animation: none !important;
    }

    body.landing-page .landing-service-tag {
        position: relative;
        height: 21px;
        min-height: 21px;
        padding: 2.6px 7.8px;
        border-width: 0.65px;
        border-radius: 65px;
        background: #053333;
        color: #FFFFFF;
        font-size: 9.11px;
        line-height: 12.75px;
        font-weight: 500;
        white-space: nowrap;
        transform: rotate(var(--tag-rotate));
        box-sizing: border-box;
        opacity: 1;
        filter: none;
        animation: none !important;
        will-change: auto;
    }

    body.landing-page .landing-service-tag-1 {
        grid-column: 1 / span 2;
        justify-self: center;
        left: auto;
        top: auto;
        --tag-rotate: 5deg;
    }

    body.landing-page .landing-service-tag-2 {
        grid-column: 3 / span 2;
        justify-self: center;
        left: auto;
        top: auto;
        --tag-rotate: -13deg;
    }

    body.landing-page .landing-service-tag-3 {
        grid-column: 5 / span 2;
        justify-self: center;
        left: auto;
        right: auto;
        top: auto;
        --tag-rotate: 14deg;
    }

    body.landing-page .landing-service-tag-4 {
        grid-column: 2 / span 2;
        justify-self: center;
        left: auto;
        top: auto;
        --tag-rotate: 9deg;
    }

    body.landing-page .landing-service-tag-5 {
        grid-column: 4 / span 2;
        justify-self: center;
        left: auto;
        top: auto;
        --tag-rotate: -2deg;
    }

    body.landing-page .landing-service-tag-6 {
        grid-column: 1 / span 3;
        justify-self: start;
        left: auto;
        top: auto;
        --tag-rotate: 3deg;
    }

    body.landing-page .landing-service-tag-7 {
        grid-column: 4 / span 3;
        justify-self: end;
        left: auto;
        right: auto;
        top: auto;
        --tag-rotate: 1deg;
    }

    body.landing-page .landing-cta {
        order: 3;
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        flex: 0 0 auto;
        height: 65px;
        min-height: 65px;
        box-sizing: border-box;
        margin-top: 24px;
        padding: 14px 20px;
        border-radius: 100px;
        font-size: 18px;
        line-height: 28.8px;
        box-shadow: 0 0 25px rgba(184, 212, 50, 0.80);
    }

    body.landing-page .landing-hero-right {
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        height: 520px;
        margin-top: -14px;
        overflow: hidden;
        opacity: 1;
        transform: none;
    }

    body.landing-page .landing-grid-container {
        width: calc(100vw - 54px);
        max-width: calc(100vw - 54px);
        height: 520px;
        gap: 9.76px;
        justify-content: flex-start;
        overflow: hidden;
    }

    body.landing-page .landing-grid-fade-top,
    body.landing-page .landing-grid-fade-bottom {
        position: absolute;
        left: 0;
        right: 0;
        width: 100%;
        height: 76px;
        pointer-events: none;
    }

    body.landing-page .landing-col,
    body.landing-page .landing-col-inner,
    body.landing-page .col-group {
        width: calc((100vw - 182px) / 2) !important;
        flex: 0 0 calc((100vw - 182px) / 2) !important;
        flex-basis: calc((100vw - 182px) / 2) !important;
    }

    body.landing-page .landing-col.col-2,
    body.landing-page .landing-col.col-2 .landing-col-inner,
    body.landing-page .col-group-center {
        width: 108px !important;
        flex: 0 0 108px !important;
        flex-basis: 108px !important;
    }

    body.landing-page .landing-col.col-3 {
        display: block;
        margin-top: -184px;
    }

    body.landing-page .landing-col-inner,
    body.landing-page .col-group {
        gap: 0;
    }

    body.landing-page .col-group {
        gap: 9.76px;
        padding-bottom: 9.76px;
    }

    body.landing-page .product-block {
        width: 100%;
        height: 164px;
        flex: 0 0 164px !important;
        flex-basis: 164px !important;
        border-radius: 6.1px;
    }

    body.landing-page .product-block-center {
        width: 108px !important;
        height: 108px;
        flex: 0 0 108px !important;
        flex-basis: 108px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .landing-copy-stack,
    .landing-service-tags,
    .landing-hero-right,
    .landing-service-tag,
    .landing-word-rotator .l-word,
    .up-anim,
    .down-anim {
        animation: none !important;
    }

    .landing-copy-stack,
    .landing-service-tags,
    .landing-hero-right,
    .landing-service-tag,
    .landing-word-rotator .l-word:first-child {
        opacity: 1;
        transform: none;
        filter: none;
    }
}

/* Landing page video testimonial section */
.lt-testimonial {
    width: 100%;
    height: 656px;
    padding: 83px 80px;
    position: relative;
    z-index: 5;
    overflow: hidden;
    background: #EAE5E3;
    box-sizing: border-box;
}

.lt-testimonial-container {
    width: 1280px;
    max-width: 1280px;
    height: 490px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
}

.lt-testimonial-content {
    width: 496px;
    flex: 0 0 496px;
    min-width: 0;
}

.lt-testimonial-inner {
    width: 496px;
    height: 490px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    opacity: 0;
    transform: translateY(24px);
    animation: lt-copy-enter 850ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

.lt-testimonial-copy {
    width: 496px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
}

.lt-testimonial-quote {
    width: 496px;
    margin: 0;
    padding: 0;
    border: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 57.6px;
    letter-spacing: 0;
}

.lt-testimonial-text {
    width: 496px;
    margin: 0;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: 0;
}

.lt-testimonial-author {
    width: 496px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 24px;
}

.lt-author-avatar {
    width: 108px;
    height: 108px;
    flex: 0 0 108px;
    border-radius: 12px;
    object-fit: cover;
    background: #DFD6C9;
}

.lt-author-details {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

.lt-author-info {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lt-author-name {
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 32px;
    letter-spacing: 0;
}

.lt-author-title {
    margin: 0;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: 0;
    opacity: 0.70;
}

.lt-author-website {
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 16px;
    letter-spacing: 0;
    opacity: 0.70;
    text-decoration: none;
}

.lt-testimonial .lt-video-wrapper {
    width: 735px;
    height: 490px;
    flex: 0 0 735px;
    min-width: 0;
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    animation: lt-video-enter 950ms cubic-bezier(0.16, 1, 0.3, 1) 260ms forwards;
}

.lt-testimonial .markaworks-video-thumbnail-container {
    width: 735px;
    height: 490px;
    padding: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    background: #161616;
    box-sizing: border-box;
    cursor: pointer;
}

.lt-testimonial .markaworks-video-thumbnail-container::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;

    pointer-events: none;
    transition: opacity 300ms ease;
}

.lt-testimonial .markaworks-video-thumbnail {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1), opacity 300ms ease;
}

.lt-testimonial .markaworks-video-thumbnail-container:hover .markaworks-video-thumbnail {
    transform: scale(1.035);
}

.lt-testimonial .markaworks-video-circles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.lt-testimonial .markaworks-circle {
    position: absolute;
    display: block;
    border: 1px solid #F4F5F5;
    border-radius: 9999px;
    pointer-events: none;
    animation: lt-ring-breathe 4s ease-in-out infinite;
}

.lt-testimonial .markaworks-circle-1 {
    width: 150px;
    height: 150px;
    left: 293px;
    top: 170px;
    opacity: 0.25;
}

.lt-testimonial .markaworks-circle-2 {
    width: 400px;
    height: 400px;
    left: 168px;
    top: 45px;
    opacity: 0.20;
    animation-delay: 220ms;
}

.lt-testimonial .markaworks-circle-3 {
    width: 650px;
    height: 650px;
    left: 43px;
    top: -80px;
    opacity: 0.10;
    animation-delay: 440ms;
}

.lt-video-caption {
    position: absolute;
    left: 164px;
    bottom: 78px;
    z-index: 3;
    max-width: 478px;
    padding: 12px 22px;
    border-radius: 999px;
    background: rgba(5, 51, 51, 0.70);
    color: #F4F5F5;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 22px;
    letter-spacing: 0;
    text-align: center;
    opacity: 0.88;
    backdrop-filter: blur(8px);
}

.lt-testimonial .markaworks-play-btn {
    width: 64px;
    height: 64px;
    padding: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 100px;
    background: #F4F5F5;
    color: #053333;
    cursor: pointer;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, background-color 260ms ease, opacity 260ms ease;
}

.lt-testimonial .markaworks-play-btn:hover,
.lt-testimonial .markaworks-play-btn:focus-visible {
    background: #B8D432;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 18px 42px rgba(5, 51, 51, 0.22);
}

.lt-testimonial .markaworks-play-button-inner {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #053333;
}

.lt-testimonial .markaworks-pause-btn {
    z-index: 16;
}

.lt-testimonial .markaworks-video-click-overlay {
    z-index: 14;
}

.lt-testimonial .markaworks-vimeo-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #000;
}

.lt-testimonial .markaworks-video-thumbnail-container.playing:hover .markaworks-pause-btn {
    opacity: 1;
    pointer-events: auto;
}

.lt-testimonial .markaworks-video-thumbnail-container.started:not(.playing):hover .markaworks-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.lt-testimonial .markaworks-video-thumbnail-container.started .markaworks-video-thumbnail,
.lt-testimonial .markaworks-video-thumbnail-container.started .markaworks-video-circles,
.lt-testimonial .markaworks-video-thumbnail-container.started .lt-video-caption,
.lt-testimonial .markaworks-video-thumbnail-container.started .markaworks-play-btn,
.lt-testimonial .markaworks-video-thumbnail-container.started::after {
    opacity: 0;
    pointer-events: none;
}

.lt-testimonial .markaworks-video-thumbnail-container.playing .markaworks-vimeo-container {
    display: block !important;
}

.lt-testimonial .markaworks-video-timeline {
    z-index: 20;
}

@keyframes lt-copy-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes lt-video-enter {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes lt-ring-breathe {
    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.025);
    }
}

@media (max-width: 1439px) {
    .lt-testimonial {
        padding-right: 48px;
        padding-left: 48px;
    }

    .lt-testimonial-container {
        width: 100%;
        max-width: 1220px;
    }

    .lt-testimonial-content,
    .lt-testimonial-inner,
    .lt-testimonial-copy,
    .lt-testimonial-quote,
    .lt-testimonial-text,
    .lt-testimonial-author {
        width: 456px;
    }

    .lt-testimonial-content {
        flex-basis: 456px;
    }

    .lt-testimonial .lt-video-wrapper,
    .lt-testimonial .markaworks-video-thumbnail-container {
        width: calc(100vw - 48px - 48px - 456px - 48px);
        max-width: 735px;
    }
}

@media (max-width: 1180px) {
    .lt-testimonial {
        height: auto;
        padding: 72px 40px;
    }

    .lt-testimonial-container {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 44px;
    }

    .lt-testimonial-content,
    .lt-testimonial-inner,
    .lt-testimonial-copy,
    .lt-testimonial-quote,
    .lt-testimonial-text,
    .lt-testimonial-author {
        width: 100%;
    }

    .lt-testimonial-content {
        flex: 0 0 auto;
    }

    .lt-testimonial-inner {
        height: auto;
        gap: 40px;
    }

    .lt-testimonial-quote {
        max-width: 720px;
    }

    .lt-testimonial-text {
        max-width: 650px;
    }

    .lt-testimonial .lt-video-wrapper,
    .lt-testimonial .markaworks-video-thumbnail-container {
        width: 100%;
        height: auto;
        aspect-ratio: 735 / 490;
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .lt-testimonial {
        padding: 56px 24px;
    }

    .lt-testimonial-container {
        gap: 36px;
    }

    .lt-testimonial-copy {
        gap: 24px;
    }

    .lt-testimonial-quote {
        font-size: 38px;
        line-height: 45.6px;
    }

    .lt-testimonial-text {
        font-size: 20px;
        line-height: 28px;
    }

    .lt-testimonial-author {
        gap: 18px;
    }

    .lt-author-avatar {
        width: 88px;
        height: 88px;
        flex-basis: 88px;
    }

    .lt-author-name {
        font-size: 28px;
        line-height: 28px;
    }

    .lt-author-title {
        font-size: 18px;
        line-height: 18px;
    }

    .lt-testimonial .markaworks-video-thumbnail-container {
        padding: 18px;
        border-radius: 16px;
    }

    .lt-testimonial .markaworks-circle-1 {
        width: 110px;
        height: 110px;
        left: calc(50% - 55px);
        top: calc(50% - 55px);
    }

    .lt-testimonial .markaworks-circle-2 {
        width: 260px;
        height: 260px;
        left: calc(50% - 130px);
        top: calc(50% - 130px);
    }

    .lt-testimonial .markaworks-circle-3 {
        width: 430px;
        height: 430px;
        left: calc(50% - 215px);
        top: calc(50% - 215px);
    }

    .lt-video-caption {
        left: 18px;
        right: 18px;
        bottom: 24px;
        max-width: none;
        font-size: 14px;
        line-height: 18px;
        padding: 10px 14px;
    }
}

@media (max-width: 520px) {
    .lt-testimonial {
        padding: 40px 16px;
    }

    .lt-testimonial-container {
        width: 100%;
        max-width: none;
        gap: 32px;
        align-items: flex-start;
    }

    .lt-testimonial-content,
    .lt-testimonial-inner,
    .lt-testimonial-copy,
    .lt-testimonial-quote,
    .lt-testimonial-text,
    .lt-testimonial-author {
        width: 100%;
    }

    .lt-testimonial-inner {
        gap: 32px;
        justify-content: flex-start;
    }

    .lt-testimonial-copy {
        order: 2;
        gap: 16px;
    }

    .lt-testimonial-author {
        order: 1;
        align-items: center;
        gap: 24px;
    }

    .lt-testimonial-quote {
        color: #053333;
        font-size: 24px;
        line-height: 27.6px;
    }

    .lt-testimonial-text {
        font-size: 16px;
        line-height: 22.4px;
        max-width: 330px;
    }

    .lt-author-avatar {
        width: 108px;
        height: 108px;
        flex: 0 0 108px;
        border-radius: 12px;
    }

    .lt-author-details {
        gap: 24px;
    }

    .lt-author-name {
        font-size: 32px;
        line-height: 32px;
    }

    .lt-author-title {
        font-size: 20px;
        line-height: 20px;
    }

    .lt-author-website {
        font-size: 16px;
        line-height: 16px;
    }

    .lt-testimonial .lt-video-wrapper,
    .lt-testimonial .markaworks-video-thumbnail-container {
        width: 100%;
        height: auto;
        aspect-ratio: 358 / 238.67;
        flex: 0 0 auto;
    }

    .lt-testimonial .markaworks-video-thumbnail-container {
        padding: 11.69px;
        border-radius: 16px;
    }

    .lt-testimonial .markaworks-play-btn {
        width: 31.17px;
        height: 31.17px;
        padding: 5.84px;
    }

    .lt-testimonial .markaworks-play-button-inner {
        width: 11.69px;
        height: 11.69px;
    }

    .lt-testimonial .markaworks-play-button-inner svg {
        width: 12px;
        height: 12px;
    }

    .lt-testimonial .markaworks-circle {
        border-width: 0.49px;
    }

    .lt-testimonial .markaworks-circle-1 {
        width: 73.06px;
        height: 73.06px;
        left: calc(50% - 36.53px);
        top: calc(50% - 36.53px);
    }

    .lt-testimonial .markaworks-circle-2 {
        width: 194.83px;
        height: 194.83px;
        left: calc(50% - 97.415px);
        top: calc(50% - 97.415px);
    }

    .lt-testimonial .markaworks-circle-3 {
        width: 316.6px;
        height: 316.6px;
        left: calc(50% - 158.3px);
        top: calc(50% - 158.3px);
    }

    .lt-video-caption {
        display: block;
        left: 99px;
        right: 58px;
        bottom: 56px;
        max-width: none;
        padding: 6px 10px;
        font-size: 10px;
        line-height: 12px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lt-testimonial-inner,
    .lt-testimonial .lt-video-wrapper,
    .lt-testimonial .markaworks-circle {
        animation: none !important;
    }

    .lt-testimonial-inner,
    .lt-testimonial .lt-video-wrapper {
        opacity: 1;
        transform: none;
    }
}

/* Founder proof video section */
.lf-proof {
    width: 100%;
    height: 656px;
    padding: 83px 80px;
    position: relative;
    overflow: hidden;
    background: #EAE5E3;
    box-sizing: border-box;
}

.lf-proof-container {
    width: 1280px;
    max-width: 1280px;
    height: 490px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 48px;
}

.lf-proof-content {
    flex: 1 1 0;
    align-self: stretch;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lf-proof.markaworks-animate-in .lf-proof-content {
    opacity: 1;
    transform: none;
}

.lf-proof-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 24px;
}

.lf-proof-rating {
    display: inline-flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 4px;
    color: #E6A000;
}

.lf-proof-star-symbol {
    position: absolute;
}

.lf-proof-star {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    fill: currentColor;
    opacity: 0;
    transform: translateY(12px) scale(0.9);
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1), transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
}

.lf-proof.markaworks-animate-in .lf-proof-star {
    opacity: 1;
    transform: none;
}

.lf-proof.markaworks-animate-in .lf-proof-star:nth-of-type(2) { transition-delay: 70ms; }
.lf-proof.markaworks-animate-in .lf-proof-star:nth-of-type(3) { transition-delay: 140ms; }
.lf-proof.markaworks-animate-in .lf-proof-star:nth-of-type(4) { transition-delay: 210ms; }
.lf-proof.markaworks-animate-in .lf-proof-star:nth-of-type(5) { transition-delay: 280ms; }
.lf-proof.markaworks-animate-in .lf-proof-star:nth-of-type(6) { transition-delay: 350ms; }

.lf-proof-title {
    width: 100%;
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 57.6px;
    letter-spacing: 0;
}

.lf-proof-text {
    width: 100%;
    margin: 0;
    color: #161616;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 33.6px;
    letter-spacing: 0;
}

.lf-proof-video-wrapper {
    width: 735px;
    height: 490px;
    flex: 0 0 735px;
    min-width: 0;
    opacity: 0;
    transform: translateY(28px) scale(0.985);
    transition: opacity 950ms cubic-bezier(0.16, 1, 0.3, 1) 160ms, transform 950ms cubic-bezier(0.16, 1, 0.3, 1) 160ms;
}

.lf-proof.markaworks-animate-in .lf-proof-video-wrapper {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.lf-proof-video-container {
    width: 735px;
    height: 490px;
    padding: 24px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 20px;
    background: #000000;
    box-sizing: border-box;
    cursor: pointer;
}

.lf-proof-video-poster {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #000000;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lf-proof-video-circles {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
}

.lf-proof-circle {
    position: absolute;
    display: block;
    border: 1px solid #F4F5F5;
    border-radius: 9999px;
    pointer-events: none;
    animation: lt-ring-breathe 4s ease-in-out infinite;
}

.lf-proof-circle-1 {
    width: 150px;
    height: 150px;
    left: 293px;
    top: 170px;
    opacity: 0.25;
}

.lf-proof-circle-2 {
    width: 400px;
    height: 400px;
    left: 168px;
    top: 45px;
    opacity: 0.20;
    animation-delay: 220ms;
}

.lf-proof-circle-3 {
    width: 650px;
    height: 650px;
    left: 43px;
    top: -80px;
    opacity: 0.10;
    animation-delay: 440ms;
}

.lf-proof-play-btn {
    width: 64px;
    height: 64px;
    padding: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 15;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 100px;
    background: #F4F5F5;
    color: #053333;
    cursor: pointer;
    transform: translate(-50%, -50%);
    backdrop-filter: blur(4px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, background-color 260ms ease, opacity 260ms ease;
}

.lf-proof-play-btn:hover,
.lf-proof-play-btn:focus-visible {
    background: #B8D432;
    transform: translate(-50%, -50%) scale(1.08);
    box-shadow: 0 18px 42px rgba(5, 51, 51, 0.22);
}

.lf-proof-play-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #053333;
}

.lf-proof-pause-btn {
    position: absolute;
    inset: 0;
    z-index: 16;
    margin: auto;
    width: 100px;
    height: 100px;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    opacity: 0;
    pointer-events: none;
    cursor: pointer;
    transition: opacity 260ms ease;
}

.lf-proof-video-container.playing:hover .lf-proof-pause-btn {
    opacity: 1;
    pointer-events: auto;
}

.lf-proof-video-click-overlay {
    position: absolute;
    inset: 0;
    z-index: 14;
    cursor: pointer;
}

.lf-proof-vimeo-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    background: #000;
}

.lf-proof-video-container.started .lf-proof-video-poster,
.lf-proof-video-container.started .lf-proof-video-circles {
    opacity: 0;
    pointer-events: none;
}

.lf-proof-video-container.started:not(.paused) .lf-proof-play-btn {
    opacity: 0;
    pointer-events: none;
}

.lf-proof-video-container.started.paused .lf-proof-play-btn {
    opacity: 1;
    pointer-events: auto;
}

.lf-proof-video-container.playing .lf-proof-vimeo-container {
    display: block !important;
}

.lf-proof-video-timeline {
    position: absolute;
    right: 20px;
    bottom: 10px;
    left: 20px;
    z-index: 20;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(5, 51, 51, 0.9);
    color: #F4F5F5;
    opacity: 0;
    pointer-events: none;
    transform: translateY(10px);
    backdrop-filter: blur(12px);
    box-sizing: border-box;
    transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1), transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lf-proof-video-container.started:hover .lf-proof-video-timeline {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.lf-proof-timeline-track {
    width: 100%;
    height: 4px;
    position: relative;
    margin-top: -8px;
    margin-bottom: -8px;
    border-top: 8px solid transparent;
    border-bottom: 8px solid transparent;
    border-radius: 10px;
    background: rgba(244, 245, 245, 0.15);
    background-clip: padding-box;
    cursor: pointer;
    transition: height 300ms ease;
}

.lf-proof-timeline-track:hover {
    height: 8px;
}

.lf-proof-timeline-progress {
    position: absolute;
    inset: 0 auto 0 0;
    width: 0%;
    border-radius: 10px;
    background: #B8D432;
    box-shadow: 0 0 10px rgba(184, 212, 50, 0.5);
    transition: width 100ms linear;
}

.lf-proof-timeline-metadata {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #F4F5F5;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
}

.lf-proof-time-display,
.lf-proof-volume-control {
    display: flex;
    align-items: center;
}

.lf-proof-time-display {
    gap: 6px;
}

.lf-proof-time-separator {
    opacity: 0.5;
}

.lf-proof-volume-control {
    gap: 10px;
}

.lf-proof-volume-btn {
    padding: 0;
    display: flex;
    align-items: center;
    border: 0;
    background: none;
    color: #F4F5F5;
    cursor: pointer;
    transition: color 300ms ease, transform 200ms ease;
}

.lf-proof-volume-btn:hover {
    color: #B8D432;
    transform: scale(1.1);
}

.lf-proof-volume-slider-wrapper {
    width: 0;
    overflow: hidden;
    transition: width 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.lf-proof-volume-control:hover .lf-proof-volume-slider-wrapper {
    width: 80px;
}

.lf-proof-volume-track {
    width: 80px;
    height: 4px;
    position: relative;
    border-radius: 4px;
    background: rgba(244, 245, 245, 0.2);
    cursor: pointer;
}

.lf-proof-volume-level {
    position: absolute;
    inset: 0 auto 0 0;
    width: 100%;
    border-radius: 4px;
    background: #B8D432;
}

@media (max-width: 1439px) {
    .lf-proof {
        padding-right: 48px;
        padding-left: 48px;
    }

    .lf-proof-container {
        width: 100%;
        max-width: 1220px;
    }

    .lf-proof-video-wrapper,
    .lf-proof-video-container {
        width: calc(100vw - 48px - 48px - 48px - ((100vw - 48px - 48px - 48px) - 735px));
        max-width: 735px;
    }
}

@media (max-width: 1180px) {
    .lf-proof {
        height: auto;
        padding: 72px 40px;
    }

    .lf-proof-container {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 44px;
    }

    .lf-proof-content {
        width: 100%;
        gap: 40px;
    }

    .lf-proof-title {
        max-width: 720px;
    }

    .lf-proof-video-wrapper,
    .lf-proof-video-container {
        width: 100%;
        height: auto;
        aspect-ratio: 735 / 490;
        flex: 0 0 auto;
    }
}

@media (max-width: 760px) {
    .lf-proof {
        padding: 56px 24px;
    }

    .lf-proof-container {
        gap: 36px;
    }

    .lf-proof-title {
        font-size: 24px;
        line-height: 27.60px;
    }

    .lf-proof-text {
        font-size: 16px;
        line-height: 22.40px;
        max-width: 350px;
    }

    .lf-proof-star {
        width: 24px;
        height: 24px;
        flex: 0 0 24px;
    }

    .lf-proof-video-container {
        padding: 18px;
        border-radius: 16px;
    }

    .lf-proof-circle-1 {
        width: 110px;
        height: 110px;
        left: calc(50% - 55px);
        top: calc(50% - 55px);
    }

    .lf-proof-circle-2 {
        width: 260px;
        height: 260px;
        left: calc(50% - 130px);
        top: calc(50% - 130px);
    }

    .lf-proof-circle-3 {
        width: 430px;
        height: 430px;
        left: calc(50% - 215px);
        top: calc(50% - 215px);
    }
}

@media (max-width: 520px) {
    .lf-proof {
        padding: 48px 20px;
    }

    .lf-proof-title {
        font-size: 24px;
        line-height: 27.60px;
    }

    .lf-proof-text {
        font-size: 16px;
        line-height: 22.40px;
    }

    .lf-proof-play-btn {
        width: 58px;
        height: 58px;
    }
}

@media (max-width: 768px) {
    .lf-proof-video-container.started.playing .lf-proof-video-timeline {
        opacity: 0;
        pointer-events: none;
    }

    .lf-proof-video-container.started:not(.playing) .lf-proof-video-timeline {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    .lf-proof-pause-btn {
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .lf-proof-content,
    .lf-proof-video-wrapper,
    .lf-proof-star,
    .lf-proof-circle {
        animation: none !important;
        transition: none !important;
    }

    .lf-proof-content,
    .lf-proof-video-wrapper,
    .lf-proof-star {
        opacity: 1;
        transform: none;
    }
}

/* ============================================
   Landing Page Services Section
   Building Blocks of a High-Converting Brand
   ============================================ */

.landing-services {
    width: 100%;
    padding: 120px 80px;
    background: #053333;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.landing-services-container {
    width: 1280px;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.services-header {
    width: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 40px;
    margin: 0;
}

.services-title {
    width: 760px;
    flex: 0 0 760px;
    margin: 0;
    color: #ffffff;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 64px;
    font-weight: 700;
    line-height: 70.4px;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.services-title.markaworks-animate-in {
    opacity: 1;
    transform: none;
}

.services-title span {
    display: block;
    color: #B8D432;
}

.services-lead {
    flex: 1 1 0;
    margin: 0;
    color: #ffffff;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 29.6px;
    letter-spacing: 0;
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 800ms cubic-bezier(0.16, 1, 0.3, 1), transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

.services-lead.markaworks-animate-in {
    opacity: 1;
    transform: none;
}

.services-grid {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.service-row {
    width: 100%;
    min-height: 566px;
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    gap: 24px;
}

.service-row:first-child {
    min-height: 535px;
}

.service-card {
    width: 628px;
    min-height: inherit;
    flex: 0 0 628px;
    padding: 32px;
    background: #ffffff;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    position: relative;
    overflow: hidden;
    border: 0;
    box-shadow: none;
    box-sizing: border-box;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.service-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.service-name {
    width: 100%;
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 48px;
    font-weight: 600;
    line-height: 57.6px;
    letter-spacing: 0;
}

.service-desc {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.service-desc p {
    width: 100%;
    margin: 0;
    color: #161616;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 39.2px;
    letter-spacing: 0;
}

.service-link {
    margin-top: auto;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28.8px;
    letter-spacing: 0;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 200ms ease, transform 200ms ease;
}

.service-link span {
    display: inline-block;
    color: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    font-family: 'Inter', Arial, sans-serif;
}

.service-link:hover,
.service-link:focus-visible {
    color: #0B4444;
    transform: translateX(4px);
}

.service-link:focus-visible {
    outline: 2px solid #B8D432;
    outline-offset: 4px;
    border-radius: 4px;
}

.service-image {
    width: 628px;
    min-height: inherit;
    flex: 0 0 628px;
    position: relative;
    overflow: hidden;
    padding: 0;
    background: #B3DFE8;
    border-radius: 20px;
    box-sizing: border-box;
    transition: transform 420ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 420ms ease;
}

.service-image img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 900ms ease, transform 900ms cubic-bezier(0.16, 1, 0.3, 1);
}

.service-image img.rotating-img {
    opacity: 0;
}

.service-image img.rotating-img.active {
    opacity: 1;
}

.service-image:hover {
    transform: translateY(-6px);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.22);
}

.service-image:hover img.active {
    transform: scale(1.03);
}

.service-image--amazon img.amazon-service-logo {
    position: absolute;
    top: 42px;
    left: 24px;
    z-index: 3;
    inset: auto auto auto auto;
    width: clamp(92px, 9.5vw, 128px);
    height: auto;
    object-fit: contain;
    opacity: 0.72;
    filter: drop-shadow(0 6px 14px rgba(255, 255, 255, 0.22));
    pointer-events: none;
    transition: opacity 300ms ease, transform 300ms ease;
}

.service-image--amazon:hover img.amazon-service-logo {
    opacity: 0.9;
    transform: scale(1.02);
}

.landing-services .reveal-item {
    opacity: 0;
    transform: translateY(48px);
    transition: opacity 850ms cubic-bezier(0.16, 1, 0.3, 1), transform 850ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}

.landing-services .reveal-item.markaworks-animate-in {
    opacity: 1;
    transform: none;
}

.landing-services .service-row:nth-child(2) .reveal-item { transition-delay: 100ms; }
.landing-services .service-row:nth-child(3) .reveal-item { transition-delay: 150ms; }
.landing-services .service-row:nth-child(4) .reveal-item { transition-delay: 200ms; }
.landing-services .service-row:nth-child(5) .reveal-item { transition-delay: 250ms; }

@media (max-width: 1439px) {
    .landing-services {
        padding: 110px 64px;
    }

    .landing-services-container {
        width: 100%;
        max-width: 1280px;
    }

    .services-title {
        width: 60%;
        flex-basis: 60%;
    }

    .service-card,
    .service-image {
        width: calc((100% - 24px) / 2);
        flex-basis: calc((100% - 24px) / 2);
    }
}

@media (max-width: 1180px) {
    .landing-services {
        padding: 96px 40px;
    }

    .services-header {
        flex-direction: column;
        gap: 28px;
    }

    .services-title,
    .services-lead {
        width: 100%;
        flex: 0 1 auto;
        max-width: 760px;
    }

    .services-title {
        font-size: 56px;
        line-height: 61.6px;
    }

    .service-row,
    .service-row:first-child {
        min-height: 520px;
    }

    .service-name {
        font-size: 42px;
        line-height: 50.4px;
    }

    .service-desc p {
        font-size: 23px;
        line-height: 32.2px;
    }
}

@media (max-width: 850px) {
    .landing-services {
        padding: 80px 24px;
    }

    .landing-services-container {
        gap: 48px;
    }

    .services-grid {
        gap: 24px;
    }

    .service-row {
        flex-direction: column;
        min-height: auto;
        gap: 24px;
    }

    .service-row:first-child {
        min-height: auto;
    }

    .service-card,
    .service-image {
        width: 100%;
        flex: 0 0 auto;
    }

    .service-card {
        min-height: auto;
        padding: 32px;
        gap: 40px;
    }

    .service-image {
        min-height: 420px;
    }

    .service-row .service-card {
        order: 1;
    }

    .service-row .service-image {
        order: 2;
    }

    .services-title {
        font-size: 48px;
        line-height: 52.8px;
    }
}

@media (max-width: 560px) {
    .landing-services {
        padding: 40px 20px;
    }

    .landing-services-container {
        gap: 48px;
    }

    .services-header {
        gap: 22.88px;
    }

    .services-title {
        font-size: 36.6px;
        line-height: 40.26px;
    }

    .services-lead {
        font-size: 16px;
        line-height: 22.4px;
    }

    .services-grid {
        width: 100%;
        gap: 9.38px;
    }

    .service-row {
        display: none;
        gap: 9.38px;
    }

    .service-row.is-services-mobile-active {
        display: flex;
        animation: services-mobile-slide-in 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
    }

    .service-row .service-image {
        order: 1;
    }

    .service-row .service-card {
        order: 2;
    }

    .service-card {
        padding: 24px;
        border-radius: 16px;
        gap: 32px;
    }

    .service-copy {
        gap: 24px;
    }

    .service-name {
        font-size: 28px;
        line-height: 33.6px;
    }

    .service-desc {
        gap: 8.92px;
    }

    .service-desc p {
        font-size: 16px;
        line-height: 22.4px;
    }

    .service-link {
        font-size: 18px;
        line-height: 23px;
    }

    .service-image {
        height: 315.45px;
        min-height: 315.45px;
        border-radius: 20px;
    }

    .landing-services .services-mobile-controls {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 20px;
    }

    .services-mobile-arrow {
        width: 48px;
        height: 48px;
        padding: 12px;
        border: 0;
        border-radius: 75px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #F4F5F5;
        color: #161616;
        cursor: pointer;
    }

    .services-mobile-arrow:disabled {
        opacity: 0.45;
        cursor: default;
    }

    .services-mobile-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
    }

    .services-mobile-dot {
        width: 12px;
        height: 12px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #D9D9D9;
        cursor: pointer;
    }

    .services-mobile-dot.is-active {
        background: #B8D432;
    }
}

.landing-services .services-mobile-controls {
    display: none;
}

@keyframes services-mobile-slide-in {
    from {
        opacity: 0;
        transform: translate3d(0, 14px, 0);
    }

    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@media (max-width: 560px) {
    .landing-services .services-mobile-controls {
        display: flex;
    }
}

@media (min-width: 1201px) {

    .markaworks-portfolio-grid {
        gap: clamp(30px, 3vw, 40px);
    }

}

.packages-landing-page .packages-landing-hero {

    min-height: clamp(300px, 46vh, 440px);
    padding: calc(var(--nav-h, 80px) + 8px) 5% 8px;

}

.packages-landing-page .packages-landing-hero .landing-hero-container {

    min-height: clamp(250px, 36vh, 360px);
    align-items: center;
    gap: clamp(18px, 2vw, 28px);

}

.packages-landing-page .packages-landing-hero .landing-hero-left {

    flex: 1 1 42%;
    max-width: 520px;
    margin-top: 0;

}

.packages-landing-page .packages-landing-hero .landing-title {

    font-size: clamp(30px, 3.9vw, 56px);
    line-height: 0.98;
    margin-bottom: 10px;
    max-width: 7.2ch;

}

.packages-landing-page .packages-landing-hero .landing-desc {

    font-size: clamp(13px, 1vw, 16px);
    line-height: 1.4;
    margin-bottom: 14px;
    max-width: 420px;

}

.packages-landing-page .packages-landing-hero .landing-cta {

    transform: scale(0.78);
    transform-origin: left center;

}

.packages-landing-page .packages-landing-hero .landing-hero-right {

    flex: 1 1 48%;
    height: clamp(250px, 34vh, 360px);
    margin-top: 0;
    align-items: center;

}

.packages-landing-page .packages-landing-hero .landing-grid-container {

    gap: 14px;
    max-width: 560px;

}

.packages-landing-page .packages-landing-hero .landing-grid-fade-top,
.packages-landing-page .packages-landing-hero .landing-grid-fade-bottom {

    height: 72px;

}

.packages-landing-page .packages-landing-hero .landing-col {

    border-radius: 16px;

}

.packages-pricing-section {

    background: #EAE5E3;
    padding: clamp(40px, 5vw, 72px) 5% clamp(84px, 8vw, 120px);
    position: relative;
    overflow: hidden;

}

.packages-landing-page .packages-pricing-section {

    padding-top: clamp(36px, 4vw, 56px);

}

.packages-pricing-shell {

    max-width: 1400px;
    margin: 0 auto;
    position: relative;
    z-index: 1;

}

.packages-pricing-intro {

    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(320px, 0.9fr);
    align-items: start;
    gap: clamp(28px, 4vw, 56px);
    margin-bottom: clamp(40px, 5vw, 60px);
    position: relative;
    z-index: 2;

}

.packages-pricing-title,
.packages-related-title {

    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(42px, 5.6vw, 72px);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.03em;

}

.packages-pricing-title {

    max-width: 8.1ch;

}

.packages-pricing-copy {

    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(18px, 1.55vw, 28px);
    line-height: 1.48;
    max-width: 520px;
    justify-self: end;

}

.packages-pricing-grid,
.packages-related-grid {

    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
    position: relative;
    z-index: 2;

}

.packages-pricing-grid {

    margin-bottom: clamp(48px, 7vw, 84px);

}

.packages-related-title {

    text-align: center;
    margin-bottom: clamp(30px, 4vw, 48px);
    font-size: clamp(38px, 4.6vw, 56px);

}

.package-card {

    --border-angle: 0turn;
    position: relative;
    background: #FFFFFF;
    border-radius: 32px;
    padding: 12px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    isolation: isolate;
    min-height: 100%;
    box-shadow: 0 20px 50px rgba(5, 51, 51, 0.08);
    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.65s cubic-bezier(0.16, 1, 0.3, 1);

}

.package-card::before {

    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.2), rgba(11, 68, 68, 0));
    opacity: 0;
    transition: opacity 0.55s ease;
    pointer-events: none;

}

.package-card::after {

    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    opacity: 0;
    pointer-events: none;
    padding: 4px;
    background: conic-gradient(from var(--border-angle),
            #C2E022 0%,
            rgba(194, 224, 34, 0) 18%,
            rgba(194, 224, 34, 0) 72%,
            #C2E022 100%);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask-composite: exclude;
    transition: opacity 0.25s ease, box-shadow 0.25s ease;
    z-index: 2;

}

.package-card:hover {

    transform: translateY(-14px);
    box-shadow: 0 34px 80px rgba(5, 51, 51, 0.16);

}

.package-card:hover::before {

    opacity: 1;

}

.package-card:hover::after {

    opacity: 1;
    animation: mw-border-spin 1.6s linear infinite;
    box-shadow:
        inset 0 0 0 1px rgba(194, 224, 34, 0.55),
        0 0 14px rgba(194, 224, 34, 0.28),
        0 0 28px rgba(194, 224, 34, 0.22);

}

.package-card-top {

    background: #C2E022;
    border-radius: 24px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;

}

.package-card-body {

    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 28px;

}

.package-card--featured {

    background: #053333;
    box-shadow: 0 26px 70px rgba(5, 51, 51, 0.24);

}

.package-card--featured::before {

    display: none;

}

.package-card--featured .package-card-top {

    background: #053333;

}

.package-card--featured::after {

    background: conic-gradient(from var(--border-angle),
            #FFFFFF 0%,
            rgba(255, 255, 255, 0) 18%,
            rgba(255, 255, 255, 0) 72%,
            #FFFFFF 100%);
    opacity: 1;
    animation: mw-border-spin 1.6s linear infinite;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0 24px rgba(255, 255, 255, 0.28),
        0 0 42px rgba(255, 255, 255, 0.22);

}

.package-card--featured:hover {

    transform: translateY(-8px);
    box-shadow: 0 42px 96px rgba(5, 51, 51, 0.28);

}

.package-card--featured:hover::after {

    opacity: 1;
    box-shadow:
        0 0 0 1px rgba(255, 255, 255, 0.34),
        0 0 24px rgba(255, 255, 255, 0.28),
        0 0 42px rgba(255, 255, 255, 0.22);

}

.package-card-heading {

    display: flex;
    flex-direction: column;
    gap: 12px;

}

.package-card-title {

    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(28px, 2.4vw, 32px);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.03em;

}

.package-card-subtitle {

    margin: 0;
    color: #053333;
    font-size: 18px;
    line-height: 1.4;

}

.package-card-price-row {

    display: flex;
    align-items: flex-end;
    gap: 18px;
    flex-wrap: wrap;

}

.package-card-price {

    color: #F54D50;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(34px, 3vw, 44px);
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.03em;

}

.package-card-price-strike {

    color: rgba(5, 51, 51, 0.4);
    font-size: clamp(26px, 2vw, 32px);
    line-height: 1;
    text-decoration: line-through;

}

.package-card-offer {

    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: #053333;
    font-size: 14px;
    line-height: 1.4;

}

.package-card-offer strong {

    font-weight: 700;

}

.package-card-actions {

    display: flex;
    flex-direction: column;
    gap: 0;

}

.packages-pricing-grid .package-card-actions::after {

    content: 'Project capacity for\A the upcoming 30 days: 2';
    white-space: pre-line;
    display: block;
    margin-top: 10px;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.35;
    text-align: center;
    animation: markaworks-capacity-flash 1.45s ease-in-out infinite;

}

.packages-pricing-grid .package-card--featured .package-card-actions::after {

    color: #FFFFFF;

}

@keyframes markaworks-capacity-flash {

    0%,
    100% {
        opacity: 0.48;
        text-shadow: 0 0 0 rgba(184, 212, 50, 0);
    }

    50% {
        opacity: 1;
        text-shadow:
            0 0 6px rgba(184, 212, 50, 0.52),
            0 0 14px rgba(184, 212, 50, 0.32);
    }

}

@media (prefers-reduced-motion: reduce) {

    .packages-pricing-grid .package-card-actions::after,
    .package-card--summary .package-card-actions::after {
        animation: none !important;
        opacity: 1;
        text-shadow: none;
    }

}

.package-btn {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 58px;
    border-radius: 999px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        background-color 0.45s ease,
        color 0.45s ease,
        box-shadow 0.45s ease,
        border-color 0.45s ease;

}

.package-btn:hover {

    transform: translateY(-2px);

}

.package-btn--primary {

    background: #FFFFFF;
    color: #053333;
    box-shadow: inset 0 0 0 1px rgba(5, 51, 51, 0.04);

}

.package-card--featured .package-btn--primary {

    background: #C2E022;
    box-shadow: 0 0 25px rgba(184, 212, 50, 0.8);

}

.package-btn--ghost {

    min-height: 48px;
    color: #053333;
    background: transparent;

}

.package-btn-arrow {

    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    font-size: 26px;
    line-height: 1;

}

.package-card-label {

    margin: 0 0 12px;
    color: #0B4444;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;

}

.package-card-tags {

    display: flex;
    flex-wrap: wrap;
    gap: 8px;

}

.package-tag {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 4px 12px;
    border: 1px solid #053333;
    border-radius: 999px;
    color: #053333;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.02em;

}

.package-feature-list {

    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;

}

.package-feature-list li {

    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #053333;
    font-size: 20px;
    line-height: 1.4;

}

.package-check-icon {

    width: 18px;
    height: 18px;
    margin-top: 6px;
    flex: 0 0 18px;
    border-radius: 50%;
    background: #0B4444;
    position: relative;

}

.package-check-icon::before {

    content: '';
    position: absolute;
    left: 5px;
    top: 3px;
    width: 6px;
    height: 9px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
    transform: rotate(45deg);

}

.package-card--featured .package-card-title,
.package-card--featured .package-card-label {

    color: #C2E022;
    text-shadow: 0 0 25px rgba(184, 212, 50, 0.35);

}

.package-card--featured .package-card-subtitle,
.package-card--featured .package-card-offer,
.package-card--featured .package-feature-list li {

    color: #FFFFFF;

}

.package-card--featured .package-card-price-strike {

    color: rgba(255, 255, 255, 0.45);

}

.package-card--featured .package-card-offer strong,
.package-card--featured .package-btn--ghost,
.package-card--featured .package-tag {

    color: #C2E022;

}

.package-card--featured .package-tag {

    border-color: rgba(255, 255, 255, 0.9);
    color: #FFFFFF;

}

.package-card--featured .package-check-icon {

    background: #C2E022;

}

.package-card--featured .package-check-icon::before {

    border-right-color: #053333;
    border-bottom-color: #053333;

}

.package-card--mini .package-card-top {

    gap: 26px;

}

.package-card--mini .package-card-body {

    gap: 0;

}

.package-card--mini .package-card-price {

    color: #053333;
    font-size: clamp(30px, 2.4vw, 40px);

}

.package-card--mini .package-btn--primary {

    box-shadow: none;

}

.packages-pricing-shape-left {

    width: clamp(220px, 28vw, 410px);
    height: auto;
    left: -168px !important;
    top: 41% !important;
    z-index: 0;
    opacity: 0.95;

}

.packages-pricing-shape-right {

    width: clamp(180px, 22vw, 290px);
    height: auto;
    right: -168px !important;
    top: 48% !important;
    bottom: auto !important;
    z-index: 4;
    opacity: 0.98;

}

.packages-pricing-reveal {

    opacity: 0;
    transform: translateY(48px) scale(0.985);
    transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.95s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;

}

.packages-pricing-reveal.packages-pricing-reveal-in {

    opacity: 1;
    transform: translateY(0) scale(1);

}

.packages-overview {

    position: relative;
    transition: opacity 0.55s ease, transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);

}

.packages-pricing-shell.is-inquiry-active .packages-overview {

    opacity: 0;
    transform: translateY(-30px) scale(0.985);
    pointer-events: none;
    position: absolute;
    inset: 0;

}

.package-inquiry-panel {

    position: relative;
    z-index: 2;
    opacity: 0;
    transform: translateY(45px) scale(0.985);
    transition: opacity 0.65s ease, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    max-width: 1280px;
    margin: 0 auto;

}

.packages-pricing-shell.is-inquiry-active .package-inquiry-panel {

    opacity: 1;
    transform: translateY(0) scale(1);

}

.package-inquiry-header {

    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 32px;
    min-height: 160px;
    margin-bottom: 52px;

}

.package-inquiry-grid {

    display: grid;
    grid-template-columns: minmax(0, 600px) minmax(0, 600px);
    justify-content: space-between;
    gap: 80px;
    align-items: start;

}

.package-inquiry-form-column,
.package-inquiry-summary-column {

    position: relative;
    z-index: 2;
    width: 100%;

}

.package-inquiry-summary-column {

    display: flex;
    flex-direction: column;
    gap: 40px;

}

.package-inquiry-shape {

    will-change: transform;
    display: block;
    width: 100%;
    height: auto;

}

.package-inquiry-hero-shape {

    position: absolute;
    left: 318px;
    top: -46px;
    width: 259px;
    height: 259px;
    pointer-events: none;

}

.package-inquiry-shape-star {

    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    transform: rotate(-6deg);
    transform-origin: center;
    filter: drop-shadow(0 20px 30px rgba(124, 105, 214, 0.14));

}

.package-back-button {

    display: inline-flex;
    align-items: center;
    gap: 14px;
    min-height: 70px;
    min-width: 305px;
    padding: 0 31px;
    border-radius: 999px;
    border: 1.5px solid #0B4444;
    background: transparent;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.35s ease, color 0.35s ease, transform 0.35s ease;
    margin-bottom: 0;
    align-self: start;

}

.package-back-button:hover {

    background: #0B4444;
    color: #fff;
    transform: translateY(-2px);

}

.package-back-icon {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    flex-shrink: 0;

}

.package-inquiry-form .form-group {

    margin-bottom: 32px;

}

.package-inquiry-form .form-label {

    color: #0B4444;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 12px;

}

.package-inquiry-form .form-input,
.package-inquiry-form .form-textarea,
.package-selector-input,
.package-selector-dropdown .custom-dropdown-toggle {

    border-radius: 20px;
    box-shadow: none;

}

.package-inquiry-form .form-input,
.package-selector-input,
.package-selector-dropdown .custom-dropdown-toggle {

    min-height: 64px;
    font-size: 24px;
    line-height: 1.4;
    padding: 16px 20px;

}

.package-inquiry-form .form-textarea {

    min-height: 176px;
    font-size: 24px;
    line-height: 1.45;
    padding: 16px 20px;
    resize: none;

}

.package-inquiry-form .form-input::placeholder,
.package-inquiry-form .form-textarea::placeholder,
.package-inquiry-form .phone-input-field::placeholder,
.package-selector-input,
.package-selector-dropdown .custom-dropdown-label {

    color: rgba(22, 22, 22, 0.48);

}

.package-inquiry-form .form-input,
.package-inquiry-form .form-textarea,
.package-inquiry-form .phone-input-field,
.package-selector-input,
.package-selector-dropdown .custom-dropdown-toggle,
.package-inquiry-form .custom-dropdown-toggle {

    transition: border-color 0.35s ease, box-shadow 0.35s ease, transform 0.35s ease, background-color 0.35s ease;

}

.package-inquiry-submit {

    width: 100%;
    margin-top: 4px;
    border-radius: 999px;
    min-height: 69px;
    font-size: 24px;
    font-weight: 600;
    background: #C2E022;
    color: #053333;
    border: none;
    box-shadow: none;
    transition: transform 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease, filter 0.35s ease;

}

.package-inquiry-submit:hover {

    transform: translateY(-2px);
    box-shadow: 0 14px 34px rgba(184, 212, 50, 0.34);
    filter: saturate(1.06);

}

.package-inquiry-intro {

    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    line-height: 1.48;
    max-width: 600px;
    margin-left: auto;
    padding-top: 4px;

}

.package-selector-group {

    margin-bottom: 0;

}

.package-selector-wrap {

    position: relative;
    border-radius: 20px;

}

.package-selector-wrap::after {

    display: none;

}

.package-selector-dropdown {

    width: 100%;

}

.package-selector-dropdown .custom-dropdown-toggle {

    width: 100%;
    justify-content: space-between;
    background: #FFFFFF;
    border: 1.5px solid rgba(5, 51, 51, 0.08);
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-weight: 400;
    padding: 14px 20px;
    padding-right: 52px;

}

.package-selector-dropdown .custom-dropdown-toggle::after {

    width: 22px;
    height: 22px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");

}

.package-selector-dropdown .custom-dropdown-label {

    display: block;
    text-align: left;
    color: #161616;

}

.package-selector-dropdown .custom-dropdown-list {

    padding: 10px;
    border: 1.5px solid rgba(184, 212, 50, 0.92);
    border-radius: 20px;
    box-shadow: 0 20px 44px rgba(5, 51, 51, 0.12);

}

.package-selector-dropdown .custom-dropdown-option {

    border-radius: 14px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.35;
    color: #161616;

}

.package-selector-dropdown .custom-dropdown-option:hover,
.package-selector-dropdown .custom-dropdown-option.is-active,
.package-selector-dropdown .custom-dropdown-option[aria-selected="true"] {

    background: rgba(184, 212, 50, 0.22);
    color: #053333;
    transform: none;

}

.package-selector-dropdown .custom-dropdown-toggle:hover {

    transform: translateY(-1px);
    border-color: rgba(184, 212, 50, 0.82);
    box-shadow: 0 12px 28px rgba(5, 51, 51, 0.08);

}

.package-selector-input {

    width: 100%;
    appearance: none;
    background: #fff;
    border: 1.5px solid rgba(5, 51, 51, 0.08);
    padding: 14px 58px 14px 20px;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;

}

.package-selector-wrap:hover {

    transform: none;
    box-shadow: none;

}

.package-selector-input:focus {

    transform: translateY(-1px);

}

.package-selector-input:focus,
.package-selector-dropdown.is-open .custom-dropdown-toggle,
.package-selector-dropdown .custom-dropdown-toggle:focus-visible {

    outline: none;
    border-color: rgba(184, 212, 50, 0.95);
    box-shadow: 0 0 0 4px rgba(184, 212, 50, 0.15);

}

.package-card--summary .package-card-top {

    min-height: 340px;
    padding: 24px;
    gap: 28px;
    background: #B8D432;
    border-radius: 24px 24px 24px 24px;

}

.package-card--summary {

    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #FFFFFF;
    border-radius: 32px;
    padding: 12px;
    margin-top: 12px;
    box-shadow: none;
    transform: none;

}

.package-card--summary:hover {

    transform: none;
    box-shadow: none;

}

.package-card--summary.is-updating {

    transform: translateY(-2px);

}

.package-card--summary.is-updating .package-card-top,
.package-card--summary.is-updating .package-card-body {

    transition: transform 0.42s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.42s ease;

}

.package-card--summary.is-updating .package-card-top {

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);

}

.package-card--summary .package-card-title {

    font-size: 32px;
    line-height: 1.2;
    color: #053333;
    text-shadow: none;

}

.package-card--summary .package-card-subtitle {

    font-size: 18px;
    color: #053333;
    line-height: 1.4;

}

.package-card--summary .package-card-price {

    font-size: 32px;
    color: #DC1C20;

}

.package-card--summary .package-card-price-strike {

    font-size: 28px;
    color: rgba(5, 51, 51, 0.35);

}

.package-card--summary .package-card-offer {

    font-size: 14px;
    color: #053333;
    margin-top: 10px;

}

.landing-page-package-pricing .package-card--summary.package-card--light .package-card-offer,
.landing-page-package-pricing .package-card--summary.package-card--signature .package-card-offer {
    color: #053333;
}

.landing-page-package-pricing .package-card--summary.package-card--light .package-card-offer strong,
.landing-page-package-pricing .package-card--summary.package-card--signature .package-card-offer strong {
    color: #053333;
}

.landing-page-package-pricing .package-card--summary.package-card--featured .package-card-offer {
    color: #FFFFFF;
}

.landing-page-package-pricing .package-card--summary.package-card--featured .package-card-offer strong {
    color: #C2E022;
}

.package-card--summary .package-card-actions {

    gap: 0;

}

.package-card--summary .package-btn--primary {

    min-height: 56px;
    font-size: 18px;
    background: #FFFFFF;
    color: #053333;
    box-shadow: none;

}

.landing-page-package-pricing .package-card--summary:not(.package-card--featured) .package-btn--primary:hover,
.landing-page-package-pricing .package-card--summary:not(.package-card--featured) .package-btn--primary:focus-visible {
    background: #053333;
    color: #FFFFFF;
    box-shadow: 0 14px 30px rgba(5, 51, 51, 0.22);
}

.landing-page-package-pricing .package-card--summary.package-card--featured .package-btn--primary:hover,
.landing-page-package-pricing .package-card--summary.package-card--featured .package-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #053333;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.18);
}

.package-card--summary .package-btn--ghost {

    min-height: 42px;
    font-size: 18px;
    color: #053333;

}

.package-card--summary .package-card-body {

    position: relative;
    padding: 24px;
    min-height: 430px;
    background: #FFFFFF;
    border-radius: 0 0 24px 24px;
    gap: 32px;

}

.package-card--summary .package-card-services,
.package-card--summary .package-feature-list {

    position: relative;
    z-index: 2;

}

.package-summary-body-shape {

    position: absolute;
    right: -105px;
    top: 62px;
    bottom: auto;
    width: 224px;
    pointer-events: none;
    z-index: 1;
    opacity: 0.76;

}

.package-inquiry-form .phone-input-wrapper {

    display: flex;
    align-items: stretch;
    gap: 8px;
    width: 100%;

}

.package-inquiry-form .phone-dropdown {

    display: flex;
    width: 170px;
    max-width: 170px;
    flex-shrink: 0;

}

.package-inquiry-form .phone-dropdown .custom-dropdown-toggle,
.package-inquiry-form .phone-input-field {

    min-height: 64px;
    height: 64px;
    box-sizing: border-box;

}

.package-inquiry-form .phone-dropdown .custom-dropdown-toggle {

    width: 100%;

}

.package-inquiry-form .phone-input-field {

    flex: 1;
    padding: 16px 20px;
    background: #FFFFFF;
    border: 2px solid transparent;
    border-radius: 20px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    outline: none;

}

.package-inquiry-form .phone-input-field:focus {

    border-color: #B8D432;
    background: #FAFAFA;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(184, 212, 50, 0.2);

}

.packages-pricing-shell.is-inquiry-active .packages-pricing-shape-left,
.packages-pricing-shell.is-inquiry-active .packages-pricing-shape-right {

    opacity: 0;
    transition: opacity 0.35s ease;

}

.package-card--summary .package-card-label,
.package-card--summary .package-tag,
.package-card--summary .package-feature-list li,
.package-card--summary .package-check-icon,
.package-card--summary .package-check-icon::before {

    text-shadow: none;

}

.package-card--summary .package-card-label {

    color: #0B4444;
    font-size: 18px;

}

.package-card--summary .package-tag {

    color: #053333;
    border-color: #053333;
    background: transparent;
    font-size: 13px;

}

.package-card--summary .package-feature-list {

    gap: 8px;
    padding-right: 0;

}

.package-card--summary .package-feature-list li {

    color: #053333;
    font-size: 20px;
    line-height: 1.45;

}

.package-card--summary .package-check-icon {

    width: 18px;
    height: 18px;
    margin-top: 5px;
    background: #0B4444;

}

.package-card--summary .package-check-icon::before {

    border-right-color: #FFFFFF;
    border-bottom-color: #FFFFFF;

}

@media (max-width: 1300px) {

    .packages-pricing-grid,
    .packages-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .packages-pricing-grid .package-card--featured {
        grid-column: span 2;
    }

    .package-inquiry-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .package-inquiry-summary-column {
        max-width: 600px;
    }

    .package-inquiry-header {
        min-height: 148px;
    }

    .package-inquiry-hero-shape {
        left: 280px;
        top: -26px;
        width: 220px;
        height: 220px;
    }

    .package-inquiry-intro {
        max-width: 520px;
    }

}

.packages-landing-page .landing-hero.packages-landing-hero {

    min-height: 0 !important;
    height: auto !important;
    padding: calc(var(--nav-h, 80px) + 6px) 5% 6px !important;

}

.packages-landing-page .packages-landing-hero-container {

    min-height: 240px !important;
    max-width: 1320px !important;
    gap: 16px !important;
    align-items: center !important;

}

.packages-landing-page .packages-landing-hero-left {

    flex: 0 1 380px !important;
    max-width: 380px !important;
    min-width: 0 !important;
    margin-top: 0 !important;

}

.packages-landing-page .packages-landing-title {

    font-size: clamp(24px, 3vw, 42px) !important;
    line-height: 0.94 !important;
    letter-spacing: -0.03em !important;
    margin-bottom: 8px !important;
    max-width: 6.8ch !important;

}

.packages-landing-page .packages-landing-desc {

    font-size: clamp(11px, 0.82vw, 13px) !important;
    line-height: 1.32 !important;
    margin-bottom: 10px !important;
    max-width: 320px !important;

}

.packages-landing-page .packages-landing-cta {

    transform: scale(0.66) !important;
    transform-origin: left center !important;

}

.packages-landing-page .packages-landing-hero-right {

    flex: 0 1 430px !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 220px !important;
    max-height: 220px !important;
    margin-top: 0 !important;

}

.packages-landing-page .packages-landing-grid-container {

    max-width: 430px !important;
    height: 100% !important;
    gap: 10px !important;
    transform: scale(0.84) !important;
    transform-origin: center center !important;

}

.packages-landing-page .packages-landing-hero .landing-grid-fade-top,
.packages-landing-page .packages-landing-hero .landing-grid-fade-bottom {

    height: 42px !important;

}

.packages-landing-page .packages-pricing-section {

    padding-top: 24px !important;

}

/* Packages landing footer - compact mobile layout from design */
@media (max-width: 768px) {
    body.packages-landing-page .markaworks-footer {
        padding: 32px 16px 16px !important;
        background: #053333 !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    body.packages-landing-page .markaworks-footer-container {
        max-width: none !important;
        width: 100% !important;
        gap: 0 !important;
        margin: 0 !important;
    }

    body.packages-landing-page .markaworks-footer-bottom {
        width: 100% !important;
        gap: 32px !important;
    }

    body.packages-landing-page .markaworks-footer-divider {
        width: 100% !important;
        height: 1px !important;
        background: rgba(244, 245, 245, 0.4) !important;
    }

    body.packages-landing-page .markaworks-footer-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 16px !important;
        width: 100% !important;
    }

    body.packages-landing-page .markaworks-footer-brand {
        flex: 0 1 auto !important;
        width: auto !important;
        min-width: 0 !important;
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    body.packages-landing-page .markaworks-footer-logo {
        display: none !important;
    }

    body.packages-landing-page .markaworks-footer-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        flex-wrap: nowrap !important;
        flex: 0 0 auto !important;
    }

    body.packages-landing-page .markaworks-footer-link {
        display: flex !important;
        align-items: center !important;
        min-height: 36px !important;
        padding: 8px !important;
        color: #F4F5F5 !important;
        font-family: 'Inter Tight', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 19.6px !important;
        text-decoration: none !important;
        white-space: nowrap !important;
    }

    body.packages-landing-page .markaworks-footer-link::after {
        display: none !important;
    }

    body.packages-landing-page .markaworks-footer-social {
        align-self: stretch !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: auto !important;
        flex: 0 0 auto !important;
    }

    body.packages-landing-page .markaworks-social-group {
        display: flex !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 13px !important;
    }

    body.packages-landing-page .markaworks-social-link,
    body.packages-landing-page .markaworks-footer-cta {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 6.4px !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
    }

    body.packages-landing-page .markaworks-social-link {
        background: #F4F5F5 !important;
    }

    body.packages-landing-page .markaworks-footer-cta {
        background: #B8D432 !important;
    }

    body.packages-landing-page .markaworks-social-icon,
    body.packages-landing-page .markaworks-cta-icon {
        width: 23px !important;
        height: 23px !important;
        object-fit: contain !important;
    }

    body.packages-landing-page .markaworks-social-icon path {
        fill: #053333 !important;
    }

    body.packages-landing-page .markaworks-social-icon path.markaworks-social-icon-behance-mark {
        fill: #F4F5F5 !important;
    }

    body.packages-landing-page .markaworks-footer-legal {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px !important;
        width: 100% !important;
    }

    body.packages-landing-page .markaworks-footer-legal-start {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    body.packages-landing-page .markaworks-legal-links {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    body.packages-landing-page .markaworks-copyright,
    body.packages-landing-page .markaworks-legal-link {
        color: #F4F5F5 !important;
        font-family: 'Inter Tight', sans-serif !important;
        font-size: 14px !important;
        font-weight: 400 !important;
        line-height: 19.6px !important;
    }

    body.packages-landing-page .markaworks-legal-link {
        text-decoration: underline !important;
    }
}

@media (max-width: 360px) {
    body.packages-landing-page .markaworks-social-group {
        gap: 8px !important;
    }

    body.packages-landing-page .markaworks-social-link,
    body.packages-landing-page .markaworks-footer-cta {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
    }
}

.markaworks-project-tags-section {

    padding: 80px 0;
    background: #ffffff;
    margin: 0;

}

.markaworks-project-tags-container {

    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;

}

.markaworks-project-tags-wrapper {

    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    align-items: center;

}

.markaworks-project-tags-section .markaworks-project-page-tag {

    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 8px 18px;
    background: #ffffff;
    color: #053333;
    border: 2px solid #EAE5E3;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: capitalize;
    cursor: default;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 6px rgba(5, 51, 51, 0.08);
    user-select: none;

}

.markaworks-project-tags-section .markaworks-project-page-tag:hover {

    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(184, 212, 50, 0.3);
    background: #053333;
    color: #B8D432;
    border-color: #EAE5E3;

}

.markaworks-project-tags-section .markaworks-project-page-tag.active {

    background: #B8D432;
    color: #053333;
    border-color: #EAE5E3;
    transform: translateY(-1px);
    font-weight: 600;

}

.markaworks-project-tags-section .markaworks-project-page-tag.active:hover {

    background: #B8D432;
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(184, 212, 50, 0.4);

}

.markaworks-project-tags-section .markaworks-project-page-tag {

    opacity: 0;
    transform: translateY(15px);
    animation: fadeInTag 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;

}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(1) {
 animation-delay: 0.1s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(2) {
 animation-delay: 0.15s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(3) {
 animation-delay: 0.2s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(4) {
 animation-delay: 0.25s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(5) {
 animation-delay: 0.3s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(6) {
 animation-delay: 0.35s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(7) {
 animation-delay: 0.4s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(8) {
 animation-delay: 0.45s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(9) {
 animation-delay: 0.5s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(10) {
 animation-delay: 0.55s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(11) {
 animation-delay: 0.6s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(12) {
 animation-delay: 0.65s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(13) {
 animation-delay: 0.7s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(14) {
 animation-delay: 0.75s; 
}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(15) {
 animation-delay: 0.8s; 
}

@keyframes fadeInTag {

    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }

}

.markaworks-project-tags-section .markaworks-project-page-tag:nth-child(n) {

    animation-fill-mode: forwards;

}

/* Supplement landing page package pricing section */
.landing-page-package-pricing.packages-pricing-section {
    width: 100%;
    padding: 72px 72px 115.2px !important;
    background: #EAE5E3;
    position: relative;
    overflow: hidden;
    box-sizing: border-box;
}

.landing-page-package-pricing .packages-pricing-shell {
    width: 1296px;
    max-width: 1296px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.landing-page-package-pricing .packages-overview {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: relative;
}

.landing-page-package-pricing .landing-package-system-title,
.landing-page-package-pricing .landing-focused-title {
    width: 100%;
    min-height: 162px;
    margin: 0 0 24px;
    padding-top: 36px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #0B4444;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: 0;
    text-align: center;
    box-sizing: border-box;
}

.landing-page-package-pricing .landing-package-system-title {
    min-height: 0;
    height: auto;
    margin-bottom: clamp(24px, 3vw, 42px);
}

.landing-page-package-pricing .landing-focused-title {
    height: auto;
    padding-top: 92px;
    margin-bottom: 48px;
}

.landing-page-package-pricing .packages-pricing-grid,
.landing-page-package-pricing .packages-related-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    gap: 24px;
    margin: 0;
    position: relative;
    z-index: 2;
}

.landing-page-package-pricing .packages-related-grid {
    grid-template-rows: auto auto;
}

.landing-page-package-pricing .landing-package-system-title + .packages-mobile-card-previews + .packages-pricing-grid {
    margin-top: clamp(20px, 2.4vw, 36px);
}

.landing-page-package-pricing .package-card {
    min-width: 0;
    min-height: 0;
    height: auto;
    align-self: start;
    padding: 12px;
    background: #FFFFFF;
    border-radius: 32px;
    box-shadow: none;
    overflow: hidden;
    transform: none;
    transition: transform 650ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.landing-page-package-pricing .package-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 28px 70px rgba(5, 51, 51, 0.16);
}

.landing-page-package-pricing .package-card::before,
.landing-page-package-pricing .package-card::after {
    display: none;
}

.landing-page-package-pricing .package-card-top {
    width: 100%;
    padding: 24px;
    background: #C2E022;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
}

.landing-page-package-pricing .package-card--featured,
.landing-page-package-pricing .package-card--featured .package-card-top,
.landing-page-package-pricing .package-card--featured .package-card-body {
    background: #053333;
}

.landing-page-package-pricing .package-card--signature .package-card-top {
    background: #BFB1D7;
}

.landing-page-package-pricing .package-card-heading {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-page-package-pricing .package-card-title {
    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 32px;
    font-weight: 600;
    line-height: 38.4px;
    letter-spacing: 0;
}

.landing-page-package-pricing .package-card-subtitle {
    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 25.2px;
}

.landing-page-package-pricing .package-card-price-row {
    display: flex;
    align-items: flex-end;
    gap: 24px;
}

.landing-page-package-pricing .package-card-price {
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 40px;
    font-weight: 600;
    line-height: 48px;
    letter-spacing: 0;
}

.landing-page-package-pricing .package-card-title-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
}

.landing-page-package-pricing .package-most-popular-badge {
    display: inline-flex;
    align-items: center;
    padding: 7px 14px;
    border-radius: 999px;
    background: #C2E022;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    white-space: nowrap;
    box-shadow: 0 0 0 1px rgba(5, 51, 51, 0.12), 0 8px 20px rgba(194, 224, 34, 0.28);
}

.landing-page-package-pricing .package-card--featured .package-card-price {
    color: #FFFFFF;
}

.landing-page-package-pricing .package-card-price-strike {
    color: rgba(255, 255, 255, 0.40);
    font-size: 32px;
    font-weight: 400;
    line-height: 38.4px;
    text-decoration: line-through;
}

.landing-page-package-pricing .package-card-offer {
    margin-top: 16px;
    display: flex;
    gap: 8px;
    color: #FFFFFF;
    font-size: 14px;
    line-height: 19.6px;
}

.landing-page-package-pricing .package-card-offer span[data-package-sale-label] {
    font-family: 'Inter Tight', Arial, sans-serif;
}

.landing-page-package-pricing .package-card-offer strong {
    color: #C2E022;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    display: inline-block;
    width: 170px;
    text-align: left;
    flex-shrink: 0;
}

.landing-page-package-pricing .package-btn {
    width: 100%;
    min-height: 56.8px;
    padding: 14px 20px;
    border-radius: 100px;
    background: #FFFFFF;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28.8px;
    box-shadow: none;
}

.landing-page-package-pricing .package-card--featured .package-btn--primary {
    background: #C2E022;
    box-shadow: 0 0 25px rgba(184, 212, 50, 0.80);
}

.landing-page-package-pricing .packages-pricing-grid .package-card:not(.package-card--featured) .package-btn--primary:hover,
.landing-page-package-pricing .packages-pricing-grid .package-card:not(.package-card--featured) .package-btn--primary:focus-visible {
    background: #053333;
    color: #FFFFFF;
    box-shadow: 0 14px 30px rgba(5, 51, 51, 0.22);
}

.landing-page-package-pricing .packages-pricing-grid .package-card--featured .package-btn--primary:hover,
.landing-page-package-pricing .packages-pricing-grid .package-card--featured .package-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #053333;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.18);
}

.landing-page-package-pricing .package-card-actions::after {
    content: var(--package-capacity-text, 'Project Capacity For\A The Upcoming 30 Days: 2');
    white-space: pre-line;
    display: block;
    margin-top: 24px;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    text-align: center;
    text-transform: none;
    animation: markaworks-capacity-flash 1.45s ease-in-out infinite;
}

.landing-page-package-pricing .package-card--featured .package-card-actions::after {
    color: #FFFFFF;
}

.landing-page-package-pricing .package-card--signature .package-card-actions::after {
    content: var(--package-signature-slot-text, 'One Slot Left For May');
}

.landing-page-package-pricing .package-card-body {
    width: 100%;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    box-sizing: border-box;
}

.landing-page-package-pricing .landing-package-best {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-page-package-pricing .package-card-label {
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 18px;
    font-weight: 700;
    line-height: 25.2px;
}

.landing-page-package-pricing .landing-package-best p {
    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.landing-page-package-pricing .package-card-services {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.landing-page-package-pricing .package-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.landing-page-package-pricing .package-tag {
    min-height: 32px;
    padding: 4px 12px;
    border: 1px solid #053333;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
    text-transform: uppercase;
    letter-spacing: 0;
    box-sizing: border-box;
    cursor: pointer;
    transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.landing-page-package-pricing .package-tag--accent {
    background: #C2E022;
}

.landing-page-package-pricing .package-tag:hover,
.landing-page-package-pricing .package-tag:focus-visible,
.landing-page-package-pricing .package-tag.package-tag--details-active,
.landing-page-package-pricing .package-card--featured .package-tag:hover,
.landing-page-package-pricing .package-card--featured .package-tag:focus-visible,
.landing-page-package-pricing .package-card--featured .package-tag.package-tag--details-active {
    color: #053333;
    background: #C2E022;
    border-color: #C2E022;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(194, 224, 34, 0.28);
    outline: none;
}

.package-tag-detail-card {
    position: fixed;
    width: min(392px, calc(100vw - 32px));
    padding: 24px;
    background: #FFFFFF;
    color: #053333;
    border-radius: 16px;
    box-shadow: 0 4px 4px -4px rgba(12, 12, 13, 0.05), 0 16px 32px -4px rgba(12, 12, 13, 0.10), 0 28px 80px rgba(5, 51, 51, 0.18);
    z-index: 10020;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.98);
    transition: opacity 180ms ease, visibility 180ms ease, transform 180ms ease;
    box-sizing: border-box;
}

.package-tag-detail-card.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.package-tag-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.package-tag-detail-title {
    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 28.8px;
}

.package-tag-detail-close {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #053333;
    flex: 0 0 auto;
    opacity: 0.9;
}

.package-tag-detail-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.package-tag-detail-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.package-tag-detail-check {
    width: 24px;
    height: 24px;
    margin-top: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.package-tag-detail-check svg {
    width: 24px;
    height: 24px;
    display: block;
}

@media (min-width: 641px) {
    .package-tag-detail-card[data-service-name="website-design"] .package-tag-detail-list li[data-detail-index="0"] {
        width: calc(100% + 10px);
        margin-right: -10px;
    }
}

@media (max-width: 640px) {
    .package-tag-detail-card {
        width: min(318px, calc(100vw - 28px));
        padding: 14px;
        border-radius: 14px;
    }

    .package-tag-detail-header {
        gap: 10px;
        margin-bottom: 10px;
    }

    .package-tag-detail-title {
        font-size: 18px;
        line-height: 22px;
    }

    .package-tag-detail-close {
        width: 22px;
        height: 22px;
        flex-basis: 22px;
    }

    .package-tag-detail-list {
        gap: 6px;
    }

    .package-tag-detail-list li {
        gap: 5px;
        font-size: 13.5px;
        line-height: 18.5px;
    }

    .package-tag-detail-check {
        width: 18px;
        height: 18px;
        margin-top: 1px;
        flex-basis: 18px;
    }

    .package-tag-detail-check svg {
        width: 18px;
        height: 18px;
    }
}

.landing-page-package-pricing .package-feature-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.landing-page-package-pricing .package-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 20px;
    font-weight: 400;
    line-height: 28px;
}

.landing-page-package-pricing .package-feature-list li > span:last-child {
    min-width: 0;
    display: flex;
    flex: 1 1 0;
    flex-direction: column;
    gap: 6px;
}

.landing-page-package-pricing .package-feature-list strong {
    color: inherit;
    font-weight: 400;
}

.landing-page-package-pricing .package-feature-list small,
.landing-page-package-pricing .package-feature-desc {
    color: inherit;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
}

.landing-page-package-pricing .package-check-icon {
    width: 24px;
    height: 24px;
    margin-top: 0;
    flex: 0 0 24px;
    background: #0B4444;
}

.landing-page-package-pricing .package-check-icon::before {
    left: 8px;
    top: 5px;
    width: 7px;
    height: 11px;
    border-right: 2px solid #FFFFFF;
    border-bottom: 2px solid #FFFFFF;
}

.landing-page-package-pricing .package-card--featured .package-card-title,
.landing-page-package-pricing .package-card--featured .package-card-label {
    color: #C2E022;
    text-shadow: 0 0 25px rgba(184, 212, 50, 0.80);
}

.landing-page-package-pricing .package-card--featured .package-card-subtitle,
.landing-page-package-pricing .package-card--featured .landing-package-best p,
.landing-page-package-pricing .package-card--featured .package-feature-list li,
.landing-page-package-pricing .package-card--featured .package-tag {
    color: #FFFFFF;
}

.landing-page-package-pricing .package-card--featured .package-tag {
    border-color: #FFFFFF;
}

.landing-page-package-pricing .package-card--featured .package-check-icon {
    background: #C2E022;
}

.landing-page-package-pricing .package-card--featured .package-check-icon::before {
    border-right-color: #053333;
    border-bottom-color: #053333;
}

.landing-page-package-pricing .package-card--mini .package-card-body {
    gap: 32px;
}

.landing-page-package-pricing .package-card--mini .package-card-actions::after {
    display: none;
}

.landing-page-package-pricing .packages-related-grid .package-card--mini:not(.package-card--featured) .package-btn--primary:hover,
.landing-page-package-pricing .packages-related-grid .package-card--mini:not(.package-card--featured) .package-btn--primary:focus-visible {
    background: #053333;
    color: #FFFFFF;
    box-shadow: 0 14px 30px rgba(5, 51, 51, 0.22);
}

.landing-page-package-pricing .packages-related-grid .package-card--mini.package-card--featured .package-btn--primary:hover,
.landing-page-package-pricing .packages-related-grid .package-card--mini.package-card--featured .package-btn--primary:focus-visible {
    background: #FFFFFF;
    color: #053333;
    box-shadow: 0 14px 30px rgba(255, 255, 255, 0.18);
}

.landing-page-package-pricing .packages-pricing-shape-left {
    width: 356.76px;
    height: auto;
    left: -190.64px !important;
    top: auto !important;
    bottom: 230px !important;
    opacity: 0.95;
}

.landing-page-package-pricing .packages-pricing-shape-right {
    width: 338.9px;
    height: auto;
    right: -210px !important;
    top: auto !important;
    bottom: -115px !important;
    opacity: 0.98;
}

.landing-page-package-pricing .packages-pricing-shell.is-inquiry-active .packages-overview {
    opacity: 0;
    transform: translateY(-30px) scale(0.985);
    pointer-events: none;
    position: absolute;
    inset: 0;
}

.landing-page-package-pricing .package-inquiry-panel {
    max-width: 1280px;
}

.landing-page-package-pricing .package-card--summary .package-feature-list li span:last-child {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.landing-page-package-pricing .package-card--summary .package-feature-title {
    font-size: 20px;
    line-height: 28px;
}

.landing-page-package-pricing .package-card--summary .package-feature-desc {
    font-size: 14px;
    line-height: 19.6px;
}

.landing-page-package-pricing .packages-mobile-card-previews {
    display: none;
}

.landing-page-package-pricing .package-mobile-meeting,
.landing-page-package-pricing .package-mobile-contact-intro,
.landing-page-package-pricing .package-mobile-budget-group {
    display: none;
}

.landing-page-package-pricing .landing-custom-quote-card .package-card-title {
    max-width: 360px;
}

@media (min-width: 1181px) {
    .landing-page-package-pricing .landing-custom-quote-card {
        height: 433px;
        min-height: 433px;
    }
}

.landing-page-package-pricing .landing-custom-quote-card .package-card-top {
    background: #BFB1D7;
}

.landing-page-package-pricing .landing-custom-quote-card .package-card-body {
    flex: 1;
}

.landing-page-package-pricing .landing-custom-quote-card .package-card-actions {
    margin-top: auto;
}

.landing-page-package-pricing .landing-custom-quote-button {
    width: 100%;
    min-height: 56.8px;
    padding: 14px 20px;
    background: #FFFFFF;
    color: #053333;
    border-radius: 100px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    line-height: 28.8px;
    text-decoration: none;
    box-shadow: none;
    box-sizing: border-box;
}

.landing-page-package-pricing .landing-custom-quote-copy {
    margin: 0;
    color: #053333;
    font-family: 'Inter Tight', Arial, sans-serif;
    font-size: 20px;
    font-weight: 700;
    line-height: 28px;
}

@media (max-width: 1439px) {
    .landing-page-package-pricing.packages-pricing-section {
        padding-right: 48px !important;
        padding-left: 48px !important;
    }

    .landing-page-package-pricing .packages-pricing-shell {
        width: 100%;
        max-width: 1296px;
    }
}

@media (max-width: 1180px) {
    .landing-page-package-pricing .packages-pricing-grid,
    .landing-page-package-pricing .packages-related-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .landing-page-package-pricing .packages-pricing-grid .package-card--featured {
        grid-column: auto;
    }

    .landing-page-package-pricing .landing-package-system-title,
    .landing-page-package-pricing .landing-focused-title {
        height: auto;
        min-height: 132px;
        margin-bottom: 22px;
        font-size: 46px;
        line-height: 1.08;
    }

    .landing-page-package-pricing .landing-package-system-title {
        min-height: 0;
        margin-bottom: 28px;
    }

}

@media (max-width: 760px) {
    .landing-page-package-pricing.packages-pricing-section {
        padding: 56px 24px 72px !important;
    }

    .landing-page-package-pricing .landing-package-system-title,
    .landing-page-package-pricing .landing-focused-title {
        min-height: auto;
        padding-top: 24px;
        margin-bottom: 32px;
        font-size: 34px;
        line-height: 36.72px;
    }

    .landing-page-package-pricing .landing-package-system-title {
        margin-bottom: 24px;
    }

    .landing-page-package-pricing .packages-pricing-grid,
    .landing-page-package-pricing .packages-related-grid {
        grid-template-columns: 1fr;
    }

    .landing-page-package-pricing .package-card-title {
        font-size: 28px;
        line-height: 33.6px;
    }

    .landing-page-package-pricing .package-card-price {
        font-size: 34px;
        line-height: 40.8px;
    }

}

@media (max-width: 576px) {
    .landing-page-package-pricing.packages-pricing-section {
        padding: 48px 0 54px !important;
    }

    .landing-page-package-pricing .packages-pricing-shell {
        max-width: none;
        width: 100%;
    }

    .landing-page-package-pricing .packages-overview {
        width: 100%;
        overflow: visible;
    }

    .landing-page-package-pricing .packages-pricing-shape-left,
    .landing-page-package-pricing .packages-pricing-shape-right {
        display: none !important;
    }

    .landing-page-package-pricing .packages-mobile-card-previews {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        width: 100%;
        padding: 0 45px;
        box-sizing: border-box;
        position: relative;
        z-index: 5;
        pointer-events: auto;
    }

    .landing-page-package-pricing .packages-mobile-card-previews.is-at-start {
        justify-content: center;
    }

    .landing-page-package-pricing .packages-mobile-card-previews.is-at-end {
        justify-content: center;
    }

    .landing-page-package-pricing .packages-mobile-card-previews--top {
        margin-bottom: 12px;
    }

    .landing-page-package-pricing .packages-mobile-card-previews--bottom {
        margin-top: 8px;
        margin-bottom: 18px;
    }

    .landing-page-package-pricing .packages-mobile-preview {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        width: 120px;
        color: #053333;
        font-family: 'Inter Tight', Arial, sans-serif;
        text-align: center;
    }

    .landing-page-package-pricing .packages-mobile-arrow {
        width: 48px;
        height: 48px;
        padding: 12px;
        border: 0;
        border-radius: 999px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: #F4F5F5;
        color: #053333;
        cursor: pointer;
    }

    .landing-page-package-pricing .packages-mobile-preview-name {
        display: block;
        font-size: 18px;
        font-weight: 700;
        line-height: 1.4;
        white-space: nowrap;
    }

    .landing-page-package-pricing .packages-mobile-preview-price {
        display: block;
        margin-top: -8px;
        font-size: 16px;
        font-weight: 400;
        line-height: 1.4;
    }

    .landing-page-package-pricing .packages-pricing-grid {
        --mobile-package-card-width: 280px;
        --mobile-package-card-gap: 14px;
        display: block;
        width: 100%;
        height: 764px;
        margin: 0;
        position: relative;
        overflow: visible;
        z-index: 4;
        perspective: 900px;
        transition: height 360ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .landing-page-package-pricing .packages-pricing-grid > .package-card {
        width: var(--mobile-package-card-width);
        min-height: 0;
        position: absolute;
        top: 0;
        left: 50%;
        right: auto;
        padding: 12px;
        border-radius: 32px;
        box-shadow: none;
        opacity: 0;
        pointer-events: none;
        transform: translateX(-50%) scale(0.9);
        transform-origin: center top;
        filter: saturate(0.9) brightness(0.98);
        backface-visibility: hidden;
        will-change: transform, opacity, filter;
        transition: transform 580ms cubic-bezier(0.22, 1, 0.36, 1), opacity 340ms ease, filter 580ms cubic-bezier(0.22, 1, 0.36, 1);
    }

    .landing-page-package-pricing .packages-pricing-grid > .package-card.is-mobile-active {
        transform: translateX(-50%) translateY(0) scale(1) rotateY(0deg) !important;
        opacity: 1;
        pointer-events: auto;
        filter: none;
        z-index: 3;
    }

    .landing-page-package-pricing .packages-pricing-grid > .package-card.is-mobile-prev {
        transform: translateX(calc(-50% - var(--mobile-package-card-width) - var(--mobile-package-card-gap))) translateY(10px) scale(0.96) rotateY(6deg) !important;
        opacity: 1;
        pointer-events: auto;
        filter: saturate(0.86) brightness(1.02);
        z-index: 1;
    }

    .landing-page-package-pricing .packages-pricing-grid > .package-card.is-mobile-next {
        transform: translateX(calc(-50% + var(--mobile-package-card-width) + var(--mobile-package-card-gap))) translateY(10px) scale(0.96) rotateY(-6deg) !important;
        opacity: 1;
        pointer-events: auto;
        filter: saturate(0.86) brightness(1.02);
        z-index: 1;
    }

    .landing-page-package-pricing .packages-related-grid {
        width: min(350px, calc(100vw - 26px));
        margin: 0 auto;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .landing-page-package-pricing .package-card-top,
    .landing-page-package-pricing .package-card-body {
        padding: 16px;
        gap: 16px;
    }

    .landing-page-package-pricing .package-card-body {
        gap: 32px;
    }

    .landing-page-package-pricing .package-card-title {
        font-size: 24px;
        line-height: 28.8px;
    }

    .landing-page-package-pricing .package-card-subtitle {
        font-size: 15px;
        line-height: 21px;
    }

    .landing-page-package-pricing .package-card-price {
        font-size: 24px;
        line-height: 28.8px;
    }

    .landing-page-package-pricing .package-card-price-strike {
        font-size: 16px;
        line-height: 19.2px;
    }

    .landing-page-package-pricing .package-btn {
        min-height: 57px;
        padding: 14px 20px;
        font-size: 18px;
        line-height: 28.8px;
    }

    .landing-page-package-pricing .package-card-actions::after {
        margin-top: 8px;
        font-size: 12px;
        line-height: 16.8px;
    }

    .landing-page-package-pricing .package-feature-list li {
        font-size: 18px;
        line-height: 25.2px;
    }

    .landing-page-package-pricing .package-inquiry-panel {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 40px 20px 20px;
        box-sizing: border-box;
        background: #EAE5E3;
    }

    .landing-page-package-pricing .packages-pricing-shell.is-inquiry-active .packages-overview {
        display: none;
    }

    .landing-page-package-pricing .packages-pricing-shell.is-inquiry-active .package-inquiry-panel {
        display: flex;
    }

    body.package-inquiry-mobile-active .landing-page-package-pricing.packages-pricing-section {
        overflow: visible;
    }

    body.package-inquiry-mobile-active .landing-contact-section {
        display: block !important;
        padding: 0 0 20px !important;
        min-height: 0 !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section>.contact-options-container {
        display: none !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-inquiry-mobile-host {
        display: block;
        width: 100%;
        margin: 0;
        padding: 0;
        min-height: 0;
    }

    .landing-contact-section .package-inquiry-mobile-host[hidden],
    body:not(.package-inquiry-mobile-active) .landing-contact-section .package-inquiry-mobile-host {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    body:not(.package-inquiry-mobile-active) .landing-contact-section {
        overflow-y: visible !important;
        min-height: 0 !important;
    }

    body:not(.package-inquiry-mobile-active) .landing-contact-section > .contact-options-container {
        display: block;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-inquiry-mobile-host .package-inquiry-panel {
        margin: 0;
        padding: 20px 20px 20px !important;
        max-width: none;
    }

    body.package-inquiry-mobile-active .landing-page-package-pricing .packages-pricing-shell.is-inquiry-active .packages-overview {
        opacity: 1;
        transform: none;
        pointer-events: auto;
        position: relative;
        inset: auto;
    }

    .landing-page-package-pricing .package-inquiry-panel {
        flex-direction: column;
        align-items: stretch;
        gap: 40px;
        opacity: 0;
        transform: translateY(18px);
        overflow: visible;
    }

    .landing-page-package-pricing .packages-pricing-shell.is-inquiry-active .package-inquiry-panel {
        opacity: 1;
        transform: translateY(0);
    }

    .package-inquiry-mobile-host .package-inquiry-panel {
        display: flex;
        opacity: 1;
        transform: translateY(0);
    }

    .landing-page-package-pricing .package-inquiry-header {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 28px;
        min-height: 0;
        margin: 0;
        position: relative;
        z-index: 2;
        isolation: isolate;
    }

    .landing-page-package-pricing .package-back-button {
        min-width: 0;
        min-height: 57px;
        padding: 14px 24px;
        gap: 10px;
        border-radius: 100px;
        border-width: 1px;
        background: transparent;
        color: #053333;
        font-size: 18px;
        line-height: 28.8px;
        position: relative;
        z-index: 2;
    }

    .landing-page-package-pricing .package-back-icon,
    .landing-page-package-pricing .package-back-icon svg {
        width: 28px;
        height: 32px;
    }

    .landing-page-package-pricing .package-inquiry-hero-shape {
        left: auto;
        right: -58px;
        top: -108px;
        width: 190px;
        height: 190px;
        z-index: 1;
        transform: rotate(15deg);
    }

    .landing-page-package-pricing .package-inquiry-intro {
        max-width: 100%;
        margin: 0;
        padding: 0;
        color: #161616;
        font-size: 16px;
        line-height: 22.4px;
        position: relative;
        z-index: 2;
    }

    .landing-page-package-pricing .package-mobile-meeting,
    .landing-page-package-pricing .package-mobile-contact-intro,
    .landing-page-package-pricing .package-mobile-budget-group {
        display: block;
    }

    .landing-page-package-pricing .package-mobile-budget-group {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .landing-page-package-pricing .package-mobile-meeting {
        display: flex;
        flex-direction: column;
        gap: 24px;
        width: 100%;
    }

    .landing-page-package-pricing .package-mobile-contact-intro {
        margin-bottom: 20px;
    }

    .landing-page-package-pricing .package-mobile-option-title {
        margin: 0;
        color: #0B4444;
        font-family: 'Inter Tight', Arial, sans-serif;
        font-size: 28px;
        font-weight: 700;
        line-height: 34px;
        letter-spacing: 0;
    }

    .landing-page-package-pricing .package-mobile-option-description {
        margin: 18px 0 0;
        color: #161616;
        font-family: 'Inter Tight', Arial, sans-serif;
        font-size: 16px;
        font-weight: 400;
        line-height: 22.4px;
    }

    .landing-page-package-pricing .package-mobile-meeting .package-mobile-option-description {
        margin-top: 0;
    }

    .landing-page-package-pricing .package-mobile-calendly {
        height: clamp(550px, 147vw, 610px) !important;
        min-height: clamp(550px, 147vw, 610px) !important;
        max-height: none !important;
        border-radius: 9px;
        overflow: hidden;
        background: #B8D432;
    }

    .landing-page-package-pricing .package-mobile-calendly iframe {
        width: 100% !important;
        height: 100% !important;
        min-height: 100% !important;
        border-radius: 9px;
    }

    .landing-page-package-pricing .package-inquiry-grid {
        display: block;
        width: 100%;
    }

    .landing-page-package-pricing .package-inquiry-form-column {
        width: 100%;
    }

    .landing-page-package-pricing .package-inquiry-summary-column {
        display: none !important;
    }

    .landing-page-package-pricing .package-inquiry-form {
        display: flex;
        flex-direction: column;
        gap: 18px;
        width: 100%;
        max-width: none;
        margin: 0;
        padding: 0;
        background: transparent;
        box-shadow: none;
    }

    .landing-page-package-pricing .package-inquiry-form .form-group {
        margin: 0;
    }

    .landing-page-package-pricing .package-inquiry-form .form-label {
        margin: 0 0 10px;
        color: #053333;
        font-size: 14px;
        font-weight: 600;
        line-height: 17px;
    }

    .landing-page-package-pricing .package-inquiry-form .form-input,
    .landing-page-package-pricing .package-inquiry-form .phone-input-field,
    .landing-page-package-pricing .package-inquiry-form .custom-dropdown-toggle {
        min-height: 41px;
        height: 41px;
        border: 0;
        border-radius: 12px;
        background: #FFFFFF;
        padding: 11px 13px;
        color: #161616;
        font-size: 14px;
        line-height: 20px;
        box-shadow: none;
        transform: none;
    }

    .landing-page-package-pricing .package-inquiry-form .form-textarea {
        min-height: 121px;
        height: 121px;
        border: 0;
        border-radius: 12px;
        background: #FFFFFF;
        padding: 12px 13px;
        color: #161616;
        font-size: 14px;
        line-height: 20px;
        box-shadow: none;
        transform: none;
    }

    .landing-page-package-pricing .package-inquiry-form .form-input:focus,
    .landing-page-package-pricing .package-inquiry-form .form-textarea:focus,
    .landing-page-package-pricing .package-inquiry-form .phone-input-field:focus,
    .landing-page-package-pricing .package-inquiry-form .custom-dropdown-toggle:focus-visible {
        outline: none;
        border: 0;
        background: #FFFFFF;
        box-shadow: 0 0 0 2px rgba(184, 212, 50, 0.65);
        transform: none;
    }

    .landing-page-package-pricing .package-inquiry-form .form-input::placeholder,
    .landing-page-package-pricing .package-inquiry-form .form-textarea::placeholder,
    .landing-page-package-pricing .package-inquiry-form .phone-input-field::placeholder {
        color: rgba(22, 22, 22, 0.5);
    }

    .landing-page-package-pricing .package-inquiry-form .phone-input-wrapper {
        display: grid;
        grid-template-columns: 101px minmax(0, 1fr);
        gap: 6px;
        align-items: stretch;
    }

    .landing-page-package-pricing .package-inquiry-form .phone-dropdown {
        width: 101px;
        max-width: 101px;
    }

    .landing-page-package-pricing .package-inquiry-form .phone-dropdown .custom-dropdown-toggle {
        padding: 9px 8px;
        font-size: 10px;
    }

    .landing-page-package-pricing .package-inquiry-form .phone-dropdown .custom-dropdown-label {
        display: inline-flex;
        align-items: center;
        gap: 5px;
        color: #053333;
        font-size: 10px;
        font-weight: 600;
        white-space: nowrap;
    }

    .landing-page-package-pricing .package-inquiry-form .phone-dropdown .country-flag {
        font-size: 14px;
    }

    .landing-page-package-pricing .package-inquiry-form .phone-dropdown .country-code {
        font-size: 10px;
    }

    .landing-page-package-pricing .package-inquiry-form .custom-dropdown-list {
        border: 1px solid #B8D432;
        border-radius: 12px;
        box-shadow: 0 12px 30px rgba(5, 51, 51, 0.15);
        z-index: 10030;
    }

    .landing-page-package-pricing .package-inquiry-form .custom-dropdown-option {
        border-radius: 8px;
        font-size: 13px;
        line-height: 18px;
        padding: 8px 10px;
    }

    .landing-page-package-pricing .package-project-name-group {
        display: none;
    }

    .landing-page-package-pricing .package-inquiry-submit {
        width: 100%;
        min-height: 41px;
        margin: 0;
        border-radius: 59px;
        background: #B8D432;
        color: #053333;
        font-size: 14px;
        font-weight: 600;
        line-height: 17px;
        box-shadow: none;
    }
}

@media (max-width: 768px) {
    .landing-contact-section .contact-two-column {
        min-height: 0 !important;
        padding-bottom: 0 !important;
        overflow: visible !important;
    }

    .landing-contact-section .contact-column {
        min-height: 0 !important;
        overflow: visible !important;
    }

    .landing-contact-section .contact-column-left {
        order: 1 !important;
    }

    .landing-contact-section .contact-column-right {
        order: 2 !important;
    }

    .landing-contact-section .calendly-inline-widget:not(.package-mobile-calendly) {
        height: 615px !important;
        min-height: 615px !important;
        max-height: none !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    .landing-contact-section .calendly-inline-widget:not(.package-mobile-calendly) iframe {
        height: 615px !important;
        min-height: 615px !important;
        max-height: none !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section {
        padding: 0 !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section>.contact-options-container {
        display: none !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-inquiry-mobile-host {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: visible !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-inquiry-mobile-host .package-inquiry-panel {
        display: flex !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 24px 20px 20px !important;
        gap: 28px !important;
        overflow: visible !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-mobile-meeting {
        gap: 18px !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-mobile-calendly {
        height: 615px !important;
        min-height: 615px !important;
        max-height: none !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    body.package-inquiry-mobile-active .landing-contact-section .package-mobile-calendly iframe {
        height: 615px !important;
        min-height: 615px !important;
        max-height: none !important;
    }

    body:not(.package-inquiry-mobile-active) .landing-contact-section .package-inquiry-mobile-host,
    body:not(.package-inquiry-mobile-active) .landing-contact-section .package-inquiry-mobile-host *,
    .landing-contact-section .package-inquiry-mobile-host[hidden],
    .landing-contact-section .package-inquiry-mobile-host[hidden] * {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        max-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        /* overflow: hidden !important; */ overflow: auto !important;
        visibility: hidden !important;
    }

    body:not(.package-inquiry-mobile-active) .landing-contact-section {
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }

    body:not(.package-inquiry-mobile-active) .landing-contact-section > .contact-options-container {
        display: block !important;
        height: auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow: visible !important;
        overflow-y: visible !important;
    }
}

@media (max-width: 768px) {
    body.landing-page .markaworks-faq {
        padding: 90px 20px 40px !important;
        background: #EAE5E3 !important;
        /* overflow: hidden !important; */ overflow: auto !important;
        position: relative !important;
    }

    body.landing-page .markaworks-faq-container {
        width: 100% !important;
        max-width: none !important;
        align-items: stretch !important;
        gap: 48px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    body.landing-page .markaworks-faq-title {
        max-width: 330px !important;
        color: #0B4444 !important;
        font-size: 30px !important;
        font-weight: 700 !important;
        line-height: 32.4px !important;
        text-align: left !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.landing-page .markaworks-faq-list {
        max-width: none !important;
        gap: 10px !important;
        position: relative !important;
        z-index: 2 !important;
    }

    body.landing-page .markaworks-faq-item {
        background: #F4F5F5 !important;
        border: 0 !important;
        border-radius: 13px !important;
        box-shadow: none !important;
        transform: none !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    body.landing-page .markaworks-faq-item:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    body.landing-page .markaworks-faq-question {
        min-height: 0 !important;
        padding: 15px 18px !important;
        gap: 15px !important;
        background: #F4F5F5 !important;
        border-radius: 13px !important;
        overflow: visible !important;
    }

    body.landing-page .markaworks-faq-question::before,
    body.landing-page .markaworks-faq-question:hover::before,
    body.landing-page .markaworks-faq-item-open .markaworks-faq-question::before {
        display: none !important;
        width: 0 !important;
        background: transparent !important;
    }

    body.landing-page .markaworks-faq-question:hover .markaworks-faq-question-text,
    body.landing-page .markaworks-faq-question:hover .markaworks-faq-icon svg {
        color: #161616 !important;
    }

    body.landing-page .markaworks-faq-question-text {
        color: #161616 !important;
        font-size: 20.5px !important;
        font-weight: 600 !important;
        line-height: 24.6px !important;
    }

    body.landing-page .markaworks-faq-item-open .markaworks-faq-question-text {
        color: #0B4444 !important;
    }

    body.landing-page .markaworks-faq-icon,
    body.landing-page .markaworks-faq-item.markaworks-faq-item-open .markaworks-faq-question .markaworks-faq-icon {
        width: 21px !important;
        height: 21px !important;
        padding: 0 !important;
        background: transparent !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.landing-page .markaworks-faq-question:hover .markaworks-faq-icon,
    body.landing-page .markaworks-faq-item-open .markaworks-faq-question:hover .markaworks-faq-icon {
        transform: none !important;
    }

    body.landing-page .markaworks-faq-icon svg {
        width: 21px !important;
        height: 21px !important;
        color: #161616 !important;
        stroke-width: 2 !important;
        transform: none !important;
    }

    body.landing-page .markaworks-faq-item-open .markaworks-faq-icon svg {
        transform: rotate(45deg) !important;
    }

    body.landing-page .markaworks-faq-answer {
        background: #F4F5F5 !important;
    }

    body.landing-page .markaworks-faq-answer-content {
        margin: 0 !important;
        padding: 0 18px 18px !important;
        background: #F4F5F5 !important;
        transform: none !important;
    }

    body.landing-page .markaworks-faq-answer-content p {
        color: #161616 !important;
        font-size: 15.4px !important;
        font-weight: 400 !important;
        line-height: 21.5px !important;
    }

    body.landing-page .markaworks-faq-decoration-right {
        display: none !important;
    }

    body.landing-page .markaworks-faq {
        overflow: visible !important;
    }

    body.landing-page .markaworks-faq-decoration-left {
        max-width: none !important;
        width: 500px !important;
        height: 500px !important;
        left: -50% !important;
        bottom: -50px !important;
        top: auto !important;
        opacity: 1 !important;
        z-index: 0 !important;
        display: block !important;
    }

    body.landing-page .landing-testimonials-section .markaworks-testimonial-title {
        font-size: 24px !important;
        line-height: 27.60px !important;
    }

    body.landing-page .landing-testimonials-section .markaworks-testimonial-quote {
        font-size: 16px !important;
        line-height: 22.40px !important;
    }
}

@media (max-width: 480px) {
    body.landing-page .markaworks-faq-decoration-left {
        max-width: none !important;
        width: 500px !important;
        height: 500px !important;
        left: -50% !important;
        bottom: -50px !important;
        top: auto !important;
        opacity: 1 !important;
        z-index: 0 !important;
        display: block !important;
    }
}

@media (max-width: 520px) {
    body.landing-page .landing-page-navbar {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    body.landing-page .landing-testimonials-section .markaworks-testimonial-title {
        font-size: 24px !important;
        line-height: 27.60px !important;
    }

    body.landing-page .landing-testimonials-section .markaworks-testimonial-quote {
        font-size: 16px !important;
        line-height: 22.40px !important;
    }
}

@media (max-width: 640px) {
    body.landing-page .landing-footer-locations-section {
        padding: 32px 16px 0 !important;
        background: #053333 !important;
    }

    body.landing-page .landing-footer-locations-container {
        max-width: none !important;
        width: 100% !important;
    }

    body.landing-page .landing-footer-locations-section .landing-footer-locations-row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10.85px 11px !important;
        min-height: 0 !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-card {
        min-height: 200px !important;
        height: 200px !important;
        padding: 13.02px !important;
        border-radius: 10.85px !important;
        gap: 8.68px !important;
        background: #0B4444 !important;
        border: 0 !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-card[data-location="antalya"] {
        order: 3 !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-card[data-location="dubai"] {
        order: 4 !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-card::before,
    body.landing-page .landing-footer-locations-section .markaworks-location-card::after {
        display: none !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-icon {
        width: 86.78px !important;
        height: 86.78px !important;
        flex: 0 0 86.78px !important;
        border-radius: 0 !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-image {
        object-fit: contain !important;
        transform: none !important;
        filter: none !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-content {
        gap: 8.68px !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-title {
        font-size: 21.69px !important;
        line-height: 26.03px !important;
        font-weight: 600 !important;
        margin: 0 !important;
        color: #F4F5F5 !important;
        text-shadow: none !important;
        transform: none !important;
    }

    body.landing-page .landing-footer-locations-section .markaworks-location-address {
        font-size: 8.68px !important;
        line-height: 12.15px !important;
        color: #F4F5F5 !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.landing-page .markaworks-footer {
        padding: 40px 16px 32px !important;
        background: #053333 !important;
        /* overflow: hidden !important; */ overflow: auto !important;
    }

    body.landing-page .markaworks-footer-container {
        width: 100% !important;
        max-width: none !important;
        gap: 0 !important;
        padding: 0 !important;
    }

    body.landing-page .markaworks-footer-bottom {
        gap: 32px !important;
    }

    body.landing-page .markaworks-footer-divider {
        background: rgba(244, 245, 245, 0.45) !important;
    }

    body.landing-page .markaworks-footer-main {
        display: flex !important;
        flex-direction: row !important;
        align-items: stretch !important;
        justify-content: space-between !important;
        gap: 24px !important;
        width: 100% !important;
    }

    body.landing-page .markaworks-footer-brand {
        width: auto !important;
        flex: 0 1 50% !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
    }

    body.landing-page .markaworks-footer-logo {
        display: none !important;
    }

    body.landing-page .markaworks-footer-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 0 !important;
        flex: 0 0 auto !important;
    }

    body.landing-page .markaworks-footer-link {
        padding: 16px 8px !important;
        color: #F4F5F5 !important;
        font-size: 14px !important;
        line-height: 19.6px !important;
        text-decoration: none !important;
        transform: none !important;
        text-shadow: none !important;
    }

    body.landing-page .markaworks-footer-link::after {
        display: none !important;
    }

    body.landing-page .markaworks-footer-social {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-end !important;
        justify-content: space-between !important;
        gap: 104px !important;
        align-self: stretch !important;
    }

    body.landing-page .markaworks-social-group {
        display: flex !important;
        gap: 12.8px !important;
    }

    body.landing-page .markaworks-social-link,
    body.landing-page .markaworks-footer-cta {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        padding: 6.4px !important;
        box-shadow: none !important;
        transform: none !important;
    }

    body.landing-page .markaworks-social-link {
        background: #F4F5F5 !important;
    }

    body.landing-page .markaworks-footer-cta {
        background: #C2E022 !important;
    }

    body.landing-page .markaworks-social-icon,
    body.landing-page .markaworks-cta-icon {
        width: 22.4px !important;
        height: 22.4px !important;
        transform: none !important;
        animation: none !important;
    }

    body.landing-page .markaworks-footer-legal {
        display: flex !important;
        flex-direction: column-reverse !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }

    body.landing-page .markaworks-footer-legal-start {
        display: flex !important;
        align-items: center !important;
        gap: 12px !important;
        flex-wrap: wrap !important;
    }

    body.landing-page .markaworks-legal-links {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 16px !important;
    }

    body.landing-page .markaworks-legal-link,
    body.landing-page .markaworks-copyright {
        color: #F4F5F5 !important;
        font-size: 14px !important;
        line-height: 19.6px !important;
    }
}

@media (max-width: 480px) {
    body.landing-page .markaworks-footer-nav {
        gap: 0 !important;
    }
}

@media (max-width: 768px) {
    body.landing-page .markaworks-footer-nav {
        gap: 0 !important;
    }
}

@media (max-width: 1024px) {
    body.landing-page .markaworks-footer-nav {
        gap: 0 !important;
    }
}



/* ==========================================================================
   LANDING PAGE UPDATED TESTIMONIAL & SUCCESS STATISTICS SECTION
   ========================================================================== */

/* Scoped to landing-page body only to avoid affecting other pages */
body.landing-page .lt-testimonial {
    background: #C2E022 !important;
    height: auto !important; /* Allow dynamic height based on stats grid + cards */
    padding: 80px 80px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
    box-sizing: border-box !important;
    /* overflow: hidden !important; */ overflow: auto !important;
}

body.landing-page .lt-testimonial-container {
    width: 100% !important;
    max-width: 1280px !important;
    height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 80px !important;
    margin: 0 auto !important;
}

/* Header Area styling */
body.landing-page .lt-header-wrapper {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 19px !important;
    text-align: center !important;
}

body.landing-page .lt-header-sub {
    align-self: stretch !important;
    color: #0B4444 !important;
    font-size: 20px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 32px !important;
    letter-spacing: 0.05em !important;
}

body.landing-page .lt-header-title {
    align-self: stretch !important;
    color: #0B4444 !important;
    font-size: 64px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 700 !important;
    line-height: 70.4px !important;
    margin: 0 !important;
}

body.landing-page .lt-header-title span {
    color: #FFFFFF !important;
}

/* Statistics Grid styling */
body.landing-page .lt-stats-grid {
    align-self: stretch !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 48px !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.landing-page .lt-stats-column {

    min-width: 320px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
}

body.landing-page .lt-stats-column:nth-child(1) {
    flex: 0 0 calc(42% - 24px) !important;
}

body.landing-page .lt-stats-column:nth-child(2) {
    flex: 0 0 calc(58% - 24px) !important;
}

body.landing-page .lt-stats-column-dummy {
}

body.landing-page .lt-stat-row {
    align-self: stretch !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    border-bottom: 1px solid #0B4444 !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 40px !important;
    transition: border-color 0.3s ease !important;
}

body.landing-page .lt-stat-row:hover {
    border-bottom-color: #0B4444 !important;
}

@media (min-width: 769px) {
    body.landing-page .lt-stats-grid {
        display: grid !important;
        grid-template-columns: calc(42% - 24px) calc(58% - 24px) !important;
        column-gap: 48px !important;
        row-gap: 0 !important;
    }
    
    body.landing-page .lt-stats-column {
        display: contents !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(1) .lt-stat-row:nth-of-type(1) {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(1) .lt-stat-row:nth-of-type(2) {
        grid-column: 1 !important;
        grid-row: 2 !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(2) .lt-stat-row:nth-of-type(1) {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(2) .lt-stat-row:nth-of-type(2) {
        grid-column: 2 !important;
        grid-row: 2 !important;
    }

    body.landing-page .lt-stats-column {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    
    body.landing-page .lt-stat-row {
        opacity: 0 !important;
        transform: translateY(30px) !important;
        transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease !important;
        will-change: transform, opacity !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(1) .lt-stat-row {
        transition-delay: 150ms !important;
    }
    
    body.landing-page .lt-stats-column:nth-child(2) .lt-stat-row {
        transition-delay: 300ms !important;
    }
    
    body.landing-page .lt-testimonial.markaworks-animate-in .lt-stat-row {
        opacity: 1 !important;
        transform: translateY(0) !important;
    }
}

body.landing-page .lt-stat-row-hover-dummy {
    border-bottom-color: #0B4444 !important;
}

body.landing-page .lt-stat-desc {
    flex: 1 1 0 !important;
    color: #161616 !important;
    font-size: 20px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 400 !important;
    line-height: 33.6px !important;
    margin: 0 !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-self: stretch !important;
}

body.landing-page .lt-stat-value {
    color: #0B4444 !important;
    font-size: 64px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    line-height: 76.8px !important;
    white-space: nowrap !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: stretch !important;
}

body.landing-page .lt-stat-desc-dummy-removed {
    display: none !important;
}

body.landing-page .lt-stat-legacy-unused-dummy {
    /*
    flex: 1 1 0 !important;
    color: #161616 !important;
    font-size: 20px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 400 !important;
    line-height: 33.6px !important;
    margin: 0 !important;
    text-align: left !important;
}

body.landing-page .lt-stat-value {
    color: #0B4444 !important;
    font-size: 64px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    line-height: 76.8px !important;
    white-space: nowrap !important;
    */
}

/* Bottom Row styling */
body.landing-page .lt-bottom-row {
    align-self: stretch !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: stretch !important;
    gap: 32px !important;
}

/* Success Story White Card */
body.landing-page .lt-story-card {
    width: 525px !important;
    flex: 0 0 525px !important;
    padding: 40px !important;
    background: #FFFFFF !important;
    border-radius: 24px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 40px !important;
    box-sizing: border-box !important;
    box-shadow: 0 12px 36px rgba(11, 68, 68, 0.04) !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

body.landing-page .lt-story-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 20px 48px rgba(11, 68, 68, 0.08) !important;
}

body.landing-page .lt-story-header {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 8px !important;
}

body.landing-page .lt-story-sub {
    align-self: stretch !important;
    color: #0B4444 !important;
    font-size: 20px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
    line-height: 32px !important;
}

body.landing-page .lt-story-title {
    align-self: stretch !important;
    color: #0B4444 !important;
    font-size: 40px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    line-height: 48px !important;
    margin: 0 !important;
}

body.landing-page .lt-story-body {
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    gap: 16px !important;
}

body.landing-page .lt-story-rating {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 4px !important;
}

body.landing-page .lt-star {
    width: 32px !important;
    height: 32px !important;
}

body.landing-page .lt-story-quote {
    align-self: stretch !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: #161616 !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 24px !important;
    font-weight: 400 !important;
    line-height: 33.60px !important;
}

body.landing-page .lt-story-author {
    align-self: stretch !important;
    display: flex !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 24px !important;
}

body.landing-page .lt-story-avatar {
    width: 108px !important;
    height: 108px !important;
    position: relative !important;
    background: #DFD6C9 !important;
    border-radius: 12px !important;
    object-fit: cover !important;
}

body.landing-page .lt-story-author-info {
    flex: 1 1 0 !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
}

body.landing-page .lt-story-author-meta {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
}

body.landing-page .lt-story-author-name {
    align-self: stretch !important;
    color: #0B4444 !important;
    font-size: 32px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 600 !important;
    line-height: 32px !important;
}

body.landing-page .lt-story-author-title {
    align-self: stretch !important;
    opacity: 0.70 !important;
    color: #161616 !important;
    font-size: 20px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 400 !important;
    line-height: 24px !important;
}

body.landing-page .lt-story-author-web {
    align-self: stretch !important;
    opacity: 0.70 !important;
    color: #161616 !important;
    font-size: 16px !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-weight: 400 !important;
    line-height: 16px !important;
    text-decoration: none !important;
}

body.landing-page .lt-story-author-web:hover {
    text-decoration: none !important;
    opacity: 0.70 !important;
}

body.landing-page .lt-story-author-web-dummy {
    text-decoration: underline !important;
    opacity: 1 !important;
}

/* Video Player Card Wrapper */
body.landing-page .lt-video-card {
    flex: 1 1 0 !important;
    align-self: stretch !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    position: relative !important;
    min-height: 506px !important;
}

/* Maintain player container internals but overlay new ring animations and colors */
body.landing-page .lt-video-card .markaworks-video-thumbnail-container {
    width: 100% !important;
    height: 100% !important;
    padding: 24px !important;
    position: absolute !important;
    inset: 0 !important;
    /* overflow: hidden !important; */ overflow: auto !important;
    border-radius: 20px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    box-sizing: border-box !important;
    cursor: pointer !important;
    background: #000000 !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail-container::after {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;

    pointer-events: none !important;
    transition: opacity 300ms ease !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 0 !important;
    transition: opacity 300ms ease !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail-container {
    transition: box-shadow 0.4s ease !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail-container:hover {
    transform: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2) !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail-container:hover .markaworks-video-thumbnail {
    transform: none !important;
}

/* Pulsing circular rings overlay from Figma */
body.landing-page .lt-video-card .markaworks-video-circles {
    position: absolute !important;
    inset: 0 !important;
    z-index: 2 !important;
    pointer-events: none !important;
}

body.landing-page .lt-video-card .markaworks-circle {
    position: absolute !important;
    display: block !important;
    border: 1px solid #F4F5F5 !important;
    border-radius: 9999px !important;
    pointer-events: none !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    animation: lt-ring-breathe 4s ease-in-out infinite !important;
}

body.landing-page .lt-video-card .markaworks-circle-1 {
    width: 150px !important;
    height: 150px !important;
    opacity: 0.25 !important;
}

body.landing-page .lt-video-card .markaworks-circle-2 {
    width: 400px !important;
    height: 400px !important;
    opacity: 0.20 !important;
    animation-delay: 220ms !important;
}

body.landing-page .lt-video-card .markaworks-circle-3 {
    width: 650px !important;
    height: 650px !important;
    opacity: 0.10 !important;
    animation-delay: 440ms !important;
}
body.landing-page .lt-video-caption {
    position: absolute !important;
    left: 50% !important;
    bottom: 40px !important;
    transform: translateX(-50%) !important;
    z-index: 3 !important;
    width: auto !important;
    max-width: 90% !important;
    padding: 12px 22px !important;
    border-radius: 999px !important;
    background: rgba(5, 51, 51, 0.70) !important;
    color: #F4F5F5 !important;
    font-family: 'Inter Tight', sans-serif !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    line-height: 22px !important;
    text-align: center !important;
    opacity: 0.88 !important;
    backdrop-filter: blur(8px) !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
}

body.landing-page .lt-video-card .markaworks-play-btn {
    width: 64px !important;
    height: 64px !important;
    padding: 12px !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    z-index: 15 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 0 !important;
    border-radius: 100px !important;
    background: #FFFFFF !important;
    color: #053333 !important;
    cursor: pointer !important;
    transform: translate(-50%, -50%) !important;
    backdrop-filter: none !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
    transition: transform 260ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 260ms ease, background-color 260ms ease !important;
}

body.landing-page .lt-video-card .markaworks-play-btn:hover {
    background: #FFFFFF !important;
    color: #053333 !important;
    transform: translate(-50%, -50%) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16) !important;
}

body.landing-page .lt-video-card .markaworks-play-button-inner {
    width: 24px !important;
    height: 24px !important;
    /*
    align-items: center !important;
    justify-content: center !important;
    */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Active Vimeo and Timeline player classes */
body.landing-page .lt-video-card .markaworks-vimeo-container {
    position: absolute !important;
    inset: 0 !important;
    z-index: 10 !important;
    background: #000000 !important;
}

body.landing-page .lt-video-card .markaworks-video-thumbnail-container.playing .markaworks-vimeo-container {
    display: block !important;
}

body.landing-page .lt-video-card .markaworks-video-timeline {
    z-index: 20 !important;
}

/* ==========================================================================
   ENTRANCE SCROLL ANIMATION RULES
   ========================================================================== */

/* Animation initial states */
body.landing-page .lt-header-wrapper,
body.landing-page .lt-stats-column,
body.landing-page .lt-story-card,
body.landing-page .lt-video-card {
    opacity: 0 !important;
    transform: translateY(30px) !important;
    transition: opacity 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1) !important;
    will-change: transform, opacity !important;
}

/* Animate in states triggered by IntersectionObserver adding .markaworks-animate-in */
body.landing-page .lt-testimonial.markaworks-animate-in .lt-header-wrapper {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

body.landing-page .lt-testimonial.markaworks-animate-in .lt-stats-column:nth-child(1) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 150ms !important;
}

body.landing-page .lt-testimonial.markaworks-animate-in .lt-stats-column:nth-child(2) {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 300ms !important;
}

body.landing-page .lt-testimonial.markaworks-animate-in .lt-story-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 450ms !important;
}

body.landing-page .lt-testimonial.markaworks-animate-in .lt-video-card {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 600ms !important;
}

/* ==========================================================================
   RESPONSIVE DESIGN BREAKPOINTS
   ========================================================================== */

@media (max-width: 1200px) {
    body.landing-page .lt-testimonial {
        padding: 80px 48px !important;
    }
    
    body.landing-page .lt-testimonial-container {
        gap: 60px !important;
    }
    
    body.landing-page .lt-header-title {
        font-size: 52px !important;
        line-height: 58px !important;
    }
    
    body.landing-page .lt-bottom-row {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 40px !important;
    }
    
    body.landing-page .lt-story-card {
        width: 100% !important;
        flex: 0 0 auto !important;
    }
    
    body.landing-page .lt-video-card {
        flex: 0 0 auto !important;
        height: 500px !important;
        min-height: 500px !important;
    }
}

@media (max-width: 768px) {
    body.landing-page .lt-testimonial {
        padding: 60px 24px !important;
    }
    
    body.landing-page .lt-testimonial-container {
        gap: 48px !important;
    }
    
    body.landing-page .lt-header-title {
        font-size: 40px !important;
        line-height: 46px !important;
    }
    
    body.landing-page .lt-stats-grid {
        flex-direction: column !important;
        gap: 0 !important;
    }
    
    body.landing-page .lt-stats-column {
        flex: 1 1 100% !important;
        width: 100% !important;
    }
    
    body.landing-page .lt-stat-row {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
        gap: 20px !important;
    }
    
    body.landing-page .lt-stat-desc {
        font-size: 16px !important;
        line-height: 26px !important;
    }
    
    body.landing-page .lt-stat-value {
        font-size: 48px !important;
        line-height: 58px !important;
    }
    
    body.landing-page .lt-story-card {
        padding: 30px 24px !important;
        gap: 30px !important;
    }
    
    body.landing-page .lt-story-title {
        font-size: 32px !important;
        line-height: 40px !important;
    }
    
    body.landing-page .lt-story-quote {
        font-size: 20px !important;
        line-height: 28px !important;
    }
    
    body.landing-page .lt-story-author {
        gap: 16px !important;
    }
    
    body.landing-page .lt-story-avatar {
        width: 80px !important;
        height: 80px !important;
        flex: 0 0 80px !important;
    }
    
    body.landing-page .lt-story-author-name {
        font-size: 24px !important;
        line-height: 24px !important;
    }
    
    body.landing-page .lt-story-author-title {
        font-size: 16px !important;
        line-height: 20px !important;
    }
    
    body.landing-page .lt-video-card {
        height: 380px !important;
        min-height: 380px !important;
    }
    
    body.landing-page .lt-video-caption {
        font-size: 13px !important;
        line-height: 18px !important;
        padding: 10px 20px !important;
        white-space: normal !important;
        width: calc(100% - 40px) !important;
        max-width: 320px !important;
        bottom: 20px !important;
        border-radius: 20px !important;
    }
    
    body.landing-page .lt-story-quote-dummy {
    
    }
    
    body.landing-page .lt-video-card .markaworks-circle-1 {
        width: 100px !important;
        height: 100px !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    body.landing-page .lt-video-card .markaworks-circle-2 {
        width: 250px !important;
        height: 250px !important;
        left: 50% !important;
        top: 50% !important;
    }
    
    body.landing-page .lt-video-card .markaworks-circle-3 {
        width: 450px !important;
        height: 450px !important;
        left: 50% !important;
        top: 50% !important;
    }
}

/* Breathing animation for pulsing video decorative rings */
@keyframes lt-ring-breathe {
    0%, 100% {
        transform: translate(-50%, -50%) scale(0.94);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.06);
    }
}

/* Final override: sticky project CTA single image */
.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child,
.project-cta-bar .project-cta-agent:has(img[src*="Frame-2147226088"]) {
    width: clamp(92px, 15vw, 214px) !important;
    min-width: 92px !important;
    height: 82px !important;
    min-height: 82px !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0 !important;
    overflow: visible !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transform: none !important;
    position: relative !important;
    transition: transform 0.28s ease, filter 0.28s ease !important;
}

.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent::before,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single::before,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child::before,
.project-cta-bar .project-cta-agent:has(img[src*="Frame-2147226088"])::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    border-radius: 0 !important;
    background: #B8D432 !important;
    background-color: #B8D432 !important;
    background-image: none !important;
    -webkit-mask-image: url("/wp-content/uploads/2026/05/Frame-2147226088-scaled.webp") !important;
    mask-image: url("/wp-content/uploads/2026/05/Frame-2147226088-scaled.webp") !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    opacity: 0 !important;
    filter: blur(2px) drop-shadow(0 0 8px rgba(184, 212, 50, 0.65)) !important;
    transform: translateY(-2px) scale(1.04) !important;
    transition: opacity 0.28s ease !important;
    pointer-events: none !important;
    z-index: 1 !important;
}

.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent-img,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single .project-cta-agent-img,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child .project-cta-agent-img,
.project-cta-bar .project-cta-agent-img[src*="Frame-2147226088"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    border-radius: 999px !important;
    transform: none !important;
    filter: none !important;
    transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), filter 0.28s ease !important;
}

.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent:hover,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single:hover,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child:hover,
.project-cta-bar .project-cta-agent:has(img[src*="Frame-2147226088"]):hover {
    transform: none !important;
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent:hover::before,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single:hover::before,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child:hover::before,
.project-cta-bar .project-cta-agent:has(img[src*="Frame-2147226088"]):hover::before {
    background: #B8D432 !important;
    box-shadow: none !important;
    opacity: 0.28 !important;
}

.project-cta-bar .project-cta-agents.project-cta-agents-single .project-cta-agent:hover .project-cta-agent-img,
.project-cta-bar .project-cta-agents .project-cta-agent.project-cta-agent-single:hover .project-cta-agent-img,
.project-cta-bar .project-cta-agents .project-cta-agent:only-child:hover .project-cta-agent-img,
.project-cta-bar .project-cta-agent-img[src*="Frame-2147226088"]:hover,
.project-cta-bar .project-cta-agent:hover .project-cta-agent-img[src*="Frame-2147226088"] {
    position: relative !important;
    z-index: 2 !important;
    transform: translateY(-2px) scale(1.04) !important;
    filter: brightness(1.12) saturate(1.28) !important;
}



/* ============================================================
   CALCULATOR PAGE HERO
   Figma layout + landing-page project grid animation
   ============================================================ */

body:has(.calculator-hero) {
    background: #053333;
}

/* Shared content rail — match header (.markaworks-navbar + .markaworks-nav-container) */
.calculator-page {
    --mw-page-rail-max: 1400px;
    --mw-page-rail-pad: clamp(20px, 4vw, 40px);
    /* Same horizontal inset as .markaworks-navbar */
    --mw-page-outer-pad: 40px;
}

@media (max-width: 1180px) {
    .calculator-page {
        --mw-page-rail-pad: 14px;
    }

    .calculator-hero,
    .mw-scope-calc {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .calculator-hero-container,
    .mw-scope-calc__inner {
        padding-left: var(--mw-page-rail-pad, 14px) !important;
        padding-right: var(--mw-page-rail-pad, 14px) !important;
    }
}

@media (max-width: 768px) {
    .calculator-page {
        --mw-page-outer-pad: 0px;
        --mw-page-rail-pad: 12px;
    }

    .calculator-hero,
    .mw-scope-calc {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .calculator-hero-container,
    .mw-scope-calc__inner {
        padding-left: var(--mw-page-rail-pad, 12px) !important;
        padding-right: var(--mw-page-rail-pad, 12px) !important;
    }
}

@media (max-width: 520px) {
    .calculator-page {
        --mw-page-rail-pad: 10px;
    }
}

@media (max-width: 480px) {
    .calculator-page {
        --mw-page-outer-pad: 0px;
        --mw-page-rail-pad: 10px;
    }
}

.calculator-hero {
    --calculator-hover-cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='31' height='31' viewBox='0 0 31 31' fill='none'%3E%3Cpolygon points='7,3 25,21 14,19 9,29' fill='%23B8D432' stroke='%23F4F5F5' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") 7 3, pointer;
    width: 100%;
    min-height: 680px;
    height: 680px;
    padding: 0;
    box-sizing: border-box;
    background: #053333;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.calculator-hero-container {
    width: 100%;
    max-width: var(--mw-page-rail-max, 1400px);
    height: 680px;
    padding-left: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    padding-right: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    margin: 0 auto;
    box-sizing: border-box;
}

.calculator-hero-left {
    width: 704px;
    flex: 0 0 704px;
    min-width: 0;
    height: 680px;
    padding: 72px 0 48px;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}

.calculator-copy-stack {
    width: 100%;
    max-width: 704px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 40px;
    opacity: 0;
    transform: translateY(18px);
    animation: calculator-copy-enter 900ms cubic-bezier(0.16, 1, 0.3, 1) 120ms forwards;
}

.calculator-main-copy {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 32px;
}

.calculator-title {
    width: 100%;
    margin: 0;
    color: #FFFFFF;
    font-family: 'Inter Tight', sans-serif;
    font-size: 64px;
    font-weight: 600;
    line-height: 70.4px;
    letter-spacing: 0;
    text-transform: capitalize;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
}

.calculator-title-line {
    display: block;
}

.calculator-title-row {
    display: inline-flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
}

.calculator-highlight {
    color: #B8D432;
    text-shadow:
        4px 4px 50px rgba(184, 212, 50, 0.92),
        0 0 40px rgba(184, 212, 50, 0.55);
}

.calculator-desc {
    width: 549px;
    max-width: 100%;
    margin: 0;
    color: #FFFFFF;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 26.64px;
    letter-spacing: 0;
}

.calculator-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 32px;
    border-radius: 100px;
    background: #B8D432;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 18px;
    font-weight: 600;
    line-height: 28.8px;
    letter-spacing: 0;
    text-decoration: none;
    border: none;
    box-shadow: 0 4px 15px rgba(184, 212, 50, 0.30);
    transition: transform 220ms ease, box-shadow 220ms ease, background-color 220ms ease;
    cursor: pointer;
}

.calculator-cta:hover,
.calculator-cta:focus-visible {
    transform: translateY(-2px);
    background: #c5e04a;
    box-shadow: 0 8px 28px rgba(184, 212, 50, 0.45);
    outline: none;
}

.calculator-cta:active {
    transform: translateY(0);
}

.calculator-hero-right {
    width: 576px;
    flex: 0 0 576px;
    min-width: 0;
    height: 680px;
    margin: 0;
    position: relative;
    display: block;
    opacity: 0;
    transform: translateX(24px);
    animation: calculator-visual-enter 1100ms cubic-bezier(0.16, 1, 0.3, 1) 180ms forwards;
}

.calculator-hero .landing-grid-container {
    /* Match landing grid geometry so product-block / col widths + scroll anim stay correct */
    width: 616px;
    max-width: none;
    height: 680px;
    gap: 16px;
}

.calculator-hero .landing-grid-fade-top,
.calculator-hero .landing-grid-fade-bottom {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 110px;
    z-index: 4;
    pointer-events: none;
}

.calculator-hero .landing-col.col-3 {
    margin-top: -620px;
}

.calculator-hero .landing-grid-container:hover,
.calculator-hero .landing-grid-container:hover * {
    cursor: var(--calculator-hover-cursor) !important;
}

@keyframes calculator-copy-enter {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes calculator-visual-enter {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@media (max-width: 1399px) {
    .calculator-hero-container {
        width: 100%;
        max-width: var(--mw-page-rail-max, 1400px);
    }

    .calculator-hero-left {
        width: calc(100% - 520px);
        flex-basis: calc(100% - 520px);
    }

    .calculator-hero-right,
    .calculator-hero .landing-grid-container {
        width: 520px;
        max-width: 520px;
        flex-basis: 520px;
    }
}

@media (max-width: 1180px) {
    .calculator-hero {
        height: auto;
        min-height: 0;
        padding: 118px 0 64px;
        align-items: flex-start;
    }

    .calculator-hero-container {
        height: auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 48px;
    }

    .calculator-hero-left {
        width: 100%;
        height: auto;
        flex: 0 0 auto;
        padding: 0;
    }

    .calculator-copy-stack,
    .calculator-main-copy,
    .calculator-title {
        width: 100%;
    }

    .calculator-title {
        font-size: 54px;
        line-height: 60px;
        gap: 10px;
    }

    .calculator-desc {
        width: 100%;
        max-width: 549px;
    }

    .calculator-hero-right {
        width: 100%;
        max-width: 576px;
        height: 560px;
        flex: 0 0 auto;
        opacity: 1;
        transform: none;
        animation: none;
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .calculator-hero .landing-grid-container {
        width: 100%;
        max-width: 100%;
        height: 560px;
        margin-left: auto;
        margin-right: auto;
        justify-content: center;
    }

    .calculator-hero .landing-col.col-3 {
        margin-top: -220px;
    }
}

@media (max-width: 760px) {
    .calculator-hero {
        padding: 110px 0 40px;
    }

    .calculator-title {
        font-size: 42px;
        line-height: 48px;
        gap: 8px;
    }

    .calculator-title-row {
        gap: 10px;
    }

    .calculator-desc {
        font-size: 16px;
        line-height: 24px;
    }

    .calculator-copy-stack {
        gap: 28px;
    }

    .calculator-hero-right,
    .calculator-hero .landing-grid-container {
        height: 480px;
    }

    .calculator-hero .landing-grid-container {
        justify-content: center;
    }

    .calculator-hero .landing-col.col-3 {
        margin-top: -180px;
    }
}

@media (max-width: 520px) {
    .calculator-hero {
        padding: 94px 0 18px;
    }

    .calculator-hero-container {
        width: 100%;
        max-width: var(--mw-page-rail-max, 1400px);
        gap: 24px;
    }

    .calculator-hero-left {
        width: 100%;
    }

    .calculator-title {
        font-size: 33px;
        line-height: 36.6px;
        gap: 6px;
    }

    .calculator-title-row {
        gap: 8px;
    }

    .calculator-desc {
        max-width: 343px;
        color: #E0E0E0;
        font-size: 16.6px;
        line-height: 26.5px;
    }

    .calculator-copy-stack {
        gap: 16px;
    }

    .calculator-main-copy {
        gap: 20px;
    }

    .calculator-cta {
        width: 100%;
        box-sizing: border-box;
        min-height: 56px;
        margin-top: 8px;
        box-shadow: 0 0 25px rgba(184, 212, 50, 0.80);
    }

    .calculator-hero-right {
        width: 100%;
        max-width: 100%;
        height: 420px;
        align-self: center;
        margin-left: auto;
        margin-right: auto;
    }

    .calculator-hero .landing-grid-container {
        width: 100%;
        max-width: 100%;
        height: 420px;
        gap: 10px;
        justify-content: center;
        margin-left: auto;
        margin-right: auto;
    }

    .calculator-hero .landing-grid-fade-top,
    .calculator-hero .landing-grid-fade-bottom {
        height: 76px;
    }

    .calculator-hero .landing-col.col-3 {
        margin-top: -160px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .calculator-copy-stack,
    .calculator-hero-right {
        opacity: 1;
        transform: none;
        animation: none;
    }

    .calculator-hero .landing-col-inner {
        animation: none !important;
    }

    .calculator-cta {
        transition: none;
    }
}


/* ============================================================
   MW SCOPE CALCULATOR (Stationary-first, data-driven)
   All selectors scoped under .mw-scope-calc — safe for other pages
   ============================================================ */

.mw-scope-calc {
    --mw-calc-bg: #EAE5E3;
    --mw-calc-surface: #FFFFFF;
    --mw-calc-muted: #F4F5F5;
    --mw-calc-ink: #053333;
    --mw-calc-ink-soft: #161616;
    --mw-calc-line: #0B4444;
    --mw-calc-border: #D4D6D3;
    --mw-calc-track: #EAEBEB;
    --mw-calc-accent: #B8D432;
    --mw-calc-accent-hover: #c5e04a;
    --mw-calc-sale: #C42020;
    --mw-calc-radius-xl: 32px;
    --mw-calc-radius-lg: 24px;
    --mw-calc-radius-md: 16px;
    --mw-calc-radius-sm: 12px;
    --mw-calc-ease: cubic-bezier(0.16, 1, 0.3, 1);
    width: 100%;
    max-width: 100%;
    padding: 80px 0 120px;
    background: var(--mw-calc-bg);
    box-sizing: border-box;
    overflow-x: clip;
    overflow-y: visible;
    font-family: 'Inter Tight', sans-serif;
    color: var(--mw-calc-ink);
}

.mw-scope-calc *,
.mw-scope-calc *::before,
.mw-scope-calc *::after {
    box-sizing: border-box;
}

.mw-scope-calc__inner {
    width: 100%;
    max-width: var(--mw-page-rail-max, 1400px);
    margin: 0 auto;
    padding-left: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    padding-right: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    box-sizing: border-box;
}

/* Keep footer content aligned to the same rail as header/hero/calculator */
.calculator-page .markaworks-footer {
    padding-left: var(--mw-page-outer-pad, 40px) !important;
    padding-right: var(--mw-page-outer-pad, 40px) !important;
    box-sizing: border-box;
}

.calculator-page .markaworks-footer-container {
    width: 100%;
    max-width: var(--mw-page-rail-max, 1400px);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    padding-right: var(--mw-page-rail-pad, clamp(20px, 4vw, 40px));
    box-sizing: border-box;
}

.mw-scope-calc__layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 24px;
    align-items: start;
    width: 100%;
    min-width: 0;
}

.mw-scope-calc__main,
.mw-scope-calc__summary {
    background: var(--mw-calc-surface);
    border-radius: var(--mw-calc-radius-xl);
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 700ms var(--mw-calc-ease), transform 700ms var(--mw-calc-ease);
}

.mw-scope-calc.is-inview .mw-scope-calc__main {
    opacity: 1;
    transform: translateY(0);
}

.mw-scope-calc.is-inview .mw-scope-calc__summary {
    opacity: 1;
    transform: translateY(0);
    transition-delay: 120ms;
}

.mw-scope-calc__main {
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 48px;
    min-width: 0;
}

.mw-scope-calc__intro {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__heading {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.mw-scope-calc__tabs-nav {
    display: block;
    position: relative;
    width: 100%;
    min-width: 0;
}

.mw-scope-calc__tabs-arrow {
    display: none;
}

.mw-scope-calc__tabs-hint {
    display: none;
}

.mw-scope-calc__tab {
    appearance: none;
    margin: 0;
    padding: 12px 14px;
    border: 1px solid var(--mw-calc-line);
    border-radius: var(--mw-calc-radius-md);
    background: transparent;
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    white-space: nowrap;
    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease, transform 200ms var(--mw-calc-ease), box-shadow 200ms ease;
}

.mw-scope-calc__tab:hover {
    background: rgba(184, 212, 50, 0.18);
    transform: translateY(-1px);
}

.mw-scope-calc__tab:focus-visible {
    outline: 2px solid var(--mw-calc-accent);
    outline-offset: 2px;
}

.mw-scope-calc__tab.is-active {
    background: var(--mw-calc-accent);
    border-color: var(--mw-calc-line);
    box-shadow: 0 4px 16px rgba(184, 212, 50, 0.28);
}

.mw-scope-calc__tab:active {
    transform: translateY(0) scale(0.98);
}

.mw-scope-calc__tab-badge {
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    min-width: 24px;
    border-radius: 100px;
    background: var(--mw-calc-accent);
    color: var(--mw-calc-ink);
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    line-height: 1;
    letter-spacing: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 24px;
    padding: 0;
}

.mw-scope-calc__tab.is-active .mw-scope-calc__tab-badge {
    background: #FFFFFF;
    color: var(--mw-calc-ink);
}

.mw-scope-calc__panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-height: 120px;
    min-width: 0;
    width: 100%;
}

.mw-scope-calc__empty {
    padding: 28px 20px;
    border-radius: var(--mw-calc-radius-md);
    background: var(--mw-calc-muted);
    color: var(--mw-calc-ink-soft);
    font-size: 16px;
    line-height: 1.5;
}

.mw-scope-calc__empty strong {
    display: block;
    margin-bottom: 6px;
    color: var(--mw-calc-ink);
    font-size: 18px;
}

/* Toggle / option cards (Branding + shared) */
.mw-scope-calc__section {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mw-scope-calc__section-title {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__category-intro {
    margin: 0 0 8px;
    max-width: 720px;
    color: var(--mw-calc-ink-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__section-items {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
    width: 100%;
}

.mw-scope-calc__card {
    width: 100%;
    padding: 16px;
    background: var(--mw-calc-muted);
    border-radius: var(--mw-calc-radius-md);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: background-color 220ms ease, border-color 220ms ease, box-shadow 220ms ease, transform 220ms var(--mw-calc-ease);
}

.mw-scope-calc__card--service {
    cursor: pointer;
}

.mw-scope-calc__card--service:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 20px rgba(5, 51, 51, 0.06);
}

.mw-scope-calc__card.is-open {
    background: linear-gradient(0deg, rgba(184, 212, 50, 0.20), rgba(184, 212, 50, 0.20)), #F4F5F5;
    border-color: var(--mw-calc-line);
    box-shadow: none;
}

.mw-scope-calc__card-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-scope-calc__check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    width: 100%;
    min-width: 0;
}

.mw-scope-calc__card-price {
    display: none !important;
}

.mw-scope-calc__card-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.mw-scope-calc__check {
    position: relative;
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
}

.mw-scope-calc__check input {
    position: absolute;
    inset: 0;
    z-index: 2;
    opacity: 0;
    margin: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

.mw-scope-calc__check-ui {
    display: block;
    position: relative;
    z-index: 1;
    width: 24px;
    height: 24px;
    border: 1.5px solid var(--mw-calc-ink);
    border-radius: 3px;
    background: transparent;
    pointer-events: none;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--mw-calc-ease);
}

.mw-scope-calc__check-ui::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 5px;
    height: 9px;
    border: solid #F4F5F5;
    border-width: 0 2px 2px 0;
    opacity: 0;
    transform: translate(-50%, -58%) rotate(45deg) scale(0);
    transform-origin: center;
    transition: transform 180ms var(--mw-calc-ease), opacity 180ms ease;
}

.mw-scope-calc__check input:checked + .mw-scope-calc__check-ui {
    background: var(--mw-calc-ink);
    border-color: var(--mw-calc-ink);
}

.mw-scope-calc__check input:checked + .mw-scope-calc__check-ui::after {
    opacity: 1;
    transform: translate(-50%, -58%) rotate(45deg) scale(1);
}

.mw-scope-calc__check input:focus-visible + .mw-scope-calc__check-ui {
    outline: 2px solid var(--mw-calc-accent);
    outline-offset: 2px;
}

.mw-scope-calc__card-title {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    flex: 1 1 auto;
    min-width: 0;
}

.mw-scope-calc__card-title--lg {
    font-size: 24px;
    line-height: 1.2;
}

.mw-scope-calc__card-desc {
    margin: 0;
    color: var(--mw-calc-ink-soft);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__card-desc--sm {
    color: #161616;
    font-size: 14px;
    line-height: 1.4;
}

.mw-scope-calc__card-disclaimer {
    margin: 0;
    color: var(--mw-calc-ink-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.67;
}

.mw-scope-calc__notes {
    display: grid;
    gap: 8px;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 360ms var(--mw-calc-ease), opacity 240ms ease, margin 240ms ease;
    margin-top: 0;
}

.mw-scope-calc__card.is-open .mw-scope-calc__notes,
.mw-scope-calc__notes.is-visible {
    max-height: 200px;
    opacity: 1;
    margin-top: 0;
    overflow: visible;
    padding-bottom: 2px;
}

.mw-scope-calc__card.has-notes-always {
    gap: 16px;
}

.mw-scope-calc__notes-label {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__notes-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--mw-calc-radius-sm);
    background: var(--mw-calc-surface);
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.4;
    resize: vertical;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 160ms ease;
}

.mw-scope-calc__notes-input:hover {
    box-shadow: inset 0 0 0 2px var(--mw-calc-accent);
}

.mw-scope-calc__notes-input:focus {
    outline: none;
    box-shadow: inset 0 0 0 2px var(--mw-calc-accent);
}

.mw-scope-calc__option-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.mw-scope-calc__option {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 999px;
    background: var(--mw-calc-surface);
    border: 1px solid rgba(11, 68, 68, 0.18);
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--mw-calc-ease);
}

.mw-scope-calc__option:hover {
    border-color: var(--mw-calc-line);
    transform: translateY(-1px);
}

.mw-scope-calc__option.is-checked {
    background: rgba(184, 212, 50, 0.35);
    border-color: var(--mw-calc-line);
}

.mw-scope-calc__option.is-locked {
    cursor: default;
    background: linear-gradient(0deg, rgba(184, 212, 50, 0.22), rgba(184, 212, 50, 0.22)), #FFFFFF;
    border-color: var(--mw-calc-line);
}

.mw-scope-calc__option.is-locked:hover {
    transform: none;
}

.mw-scope-calc__option input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.mw-scope-calc__option-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--mw-calc-ink);
}

.mw-scope-calc__option-lock {
    margin-left: 2px;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--mw-calc-ink);
    color: #FFFFFF;
    font-size: 11px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.mw-scope-calc__card--group {
    gap: 16px;
}

.mw-scope-calc__card--group:not(.is-open) {
    background: var(--mw-calc-muted);
    border-color: transparent;
}

.mw-scope-calc__group-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.mw-scope-calc__group-option {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    width: 100%;
    min-height: 56px;
    padding: 14px 16px;
    border-radius: var(--mw-calc-radius-md);
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--mw-calc-ease), box-shadow 180ms ease;
}

.mw-scope-calc__group-option:hover {
    background: #FFFFFF;
    border-color: rgba(11, 68, 68, 0.14);
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(5, 51, 51, 0.05);
}

.mw-scope-calc__group-option.is-checked {
    background: #FFFFFF;
    border-color: rgba(11, 68, 68, 0.2);
}

.mw-scope-calc__group-option.is-locked {
    cursor: default;
    background: rgba(255, 255, 255, 0.9);
    border-color: rgba(11, 68, 68, 0.12);
}

.mw-scope-calc__group-option.is-locked:hover {
    transform: none;
    box-shadow: none;
}

.mw-scope-calc__group-option-copy {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    padding-top: 1px;
}

.mw-scope-calc__group-option-label {
    color: var(--mw-calc-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}

.mw-scope-calc__group-option-meta {
    color: var(--mw-calc-ink-soft);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    opacity: 0.72;
}

/* Slider fields */
.mw-scope-calc__slider-field {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 4px 0 8px;
}

.mw-scope-calc__slider-top {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-scope-calc__slider-top.is-compact {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
}

.mw-scope-calc__slider-title {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mw-scope-calc__slider-meta {
    display: flex;
    justify-content: flex-start;
    align-items: flex-end;
    gap: 24px;
}

.mw-scope-calc__slider-desc {
    margin: 0;
    flex: 1 1 auto;
    color: var(--mw-calc-ink-soft);
    font-size: 14px;
    line-height: 1.4;
}

.mw-scope-calc__slider-unit {
    margin: 0;
    flex: 0 0 auto;
    color: var(--mw-calc-ink-soft);
    font-size: 14px;
    line-height: 1.4;
    white-space: nowrap;
}

.mw-scope-calc__slider-unit[data-live-value]::after {
    content: none;
}

.mw-scope-calc__slider-control {
    position: relative;
    width: 100%;
    padding: 4px 0 2px;
}

.mw-scope-calc__slider-track {
    position: relative;
    height: 24px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    box-sizing: border-box;
}

.mw-scope-calc__slider-track-bg {
    position: absolute;
    left: 0;
    right: 0;
    height: 16px;
    border-radius: 100px;
    background: var(--mw-calc-track);
    overflow: hidden;
}

.mw-scope-calc__slider-track-fill {
    height: 100%;
    width: 0%;
    border-radius: inherit;
    background: var(--mw-calc-line);
    transition: width 80ms linear;
}

.mw-scope-calc__slider-ticks {
    position: absolute;
    left: 6px;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 1;
}

.mw-scope-calc__slider-tick {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--mw-calc-line);
    opacity: 0.55;
    transition: background-color 120ms ease, opacity 120ms ease;
}

.mw-scope-calc__slider-tick.is-passed {
    background: #FFFFFF;
    opacity: 1;
}

.mw-scope-calc__slider-input {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 24px;
    margin: 0;
    appearance: none;
    background: transparent;
    cursor: pointer;
}

.mw-scope-calc__slider-input:focus {
    outline: none;
}

.mw-scope-calc__slider-input:focus-visible::-webkit-slider-thumb {
    box-shadow: 0 0 0 4px rgba(184, 212, 50, 0.35);
}

.mw-scope-calc__slider-input:focus-visible::-moz-range-thumb {
    box-shadow: 0 0 0 4px rgba(184, 212, 50, 0.35);
}

.mw-scope-calc__slider-input::-webkit-slider-runnable-track {
    height: 16px;
    background: transparent;
}

.mw-scope-calc__slider-input::-webkit-slider-thumb {
    appearance: none;
    width: 24px;
    height: 24px;
    margin-top: -4px;
    border: none;
    border-radius: 50%;
    background: var(--mw-calc-accent);
    box-shadow: 0 2px 8px rgba(5, 51, 51, 0.18);
    transition: transform 160ms var(--mw-calc-ease), box-shadow 160ms ease, background-color 160ms ease;
}

.mw-scope-calc__slider-input:hover::-webkit-slider-thumb {
    transform: scale(1.08);
    background: var(--mw-calc-accent-hover);
}

.mw-scope-calc__slider-input:active::-webkit-slider-thumb {
    transform: scale(1.14);
    box-shadow: 0 4px 14px rgba(5, 51, 51, 0.24);
}

.mw-scope-calc__slider-input::-moz-range-track {
    height: 16px;
    background: transparent;
    border: none;
}

.mw-scope-calc__slider-input::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border: none;
    border-radius: 50%;
    background: var(--mw-calc-accent);
    box-shadow: 0 2px 8px rgba(5, 51, 51, 0.18);
    transition: transform 160ms var(--mw-calc-ease), box-shadow 160ms ease, background-color 160ms ease;
}

.mw-scope-calc__slider-input:hover::-moz-range-thumb {
    transform: scale(1.08);
    background: var(--mw-calc-accent-hover);
}

.mw-scope-calc__slider-scale {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 2px;
    color: var(--mw-calc-ink-soft);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__slider-scale-label.is-mid {
    text-align: center;
}

.mw-scope-calc__slider-scale-label.is-end {
    text-align: right;
}

.mw-scope-calc__slider-scale--proportional {
    position: relative;
    height: 25px;
    display: block;
}

.mw-scope-calc__slider-scale--proportional .mw-scope-calc__slider-scale-label {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    white-space: nowrap;
}

.mw-scope-calc__slider-scale--proportional .mw-scope-calc__slider-scale-label.is-start {
    left: 0 !important;
    transform: none;
}

.mw-scope-calc__slider-scale--proportional .mw-scope-calc__slider-scale-label.is-end {
    left: auto !important;
    right: 0;
    transform: none;
    text-align: right;
}

.mw-scope-calc__slider-footnote {
    margin: 0;
    opacity: 0.6;
    color: var(--mw-calc-ink-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__spec-fields {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 8px;
}

.mw-scope-calc__spec-fields-label {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__spec-sliders {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.mw-scope-calc__spec-slider {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    min-width: 0;
}

.mw-scope-calc__spec-slider-title {
    margin: 0;
    color: var(--mw-calc-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__spec-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.mw-scope-calc__spec-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.mw-scope-calc__spec-field-label {
    color: var(--mw-calc-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

.mw-scope-calc__spec-input {
    width: 100%;
    min-height: 48px;
    padding: 12px 20px;
    border: none;
    border-radius: var(--mw-calc-radius-sm);
    background: var(--mw-calc-muted);
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
    box-shadow: inset 0 0 0 0 transparent;
    transition: box-shadow 160ms ease, background-color 160ms ease, transform 160ms var(--mw-calc-ease);
    -moz-appearance: textfield;
}

.mw-scope-calc__spec-input::-webkit-outer-spin-button,
.mw-scope-calc__spec-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.mw-scope-calc__spec-input:hover {
    box-shadow: inset 0 0 0 2px var(--mw-calc-accent);
}

.mw-scope-calc__spec-input:focus {
    outline: none;
    background: var(--mw-calc-surface);
    box-shadow: inset 0 0 0 2px var(--mw-calc-accent);
}

.mw-scope-calc__video-multi {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__video-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__video-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px;
    border-radius: var(--mw-calc-radius-md);
    background: var(--mw-calc-muted);
    transition: transform 180ms var(--mw-calc-ease), box-shadow 180ms ease;
}

.mw-scope-calc__video-row:hover {
    box-shadow: 0 8px 20px rgba(5, 51, 51, 0.06);
}

.mw-scope-calc__video-row-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.mw-scope-calc__video-row-title {
    color: var(--mw-calc-ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__video-remove {
    appearance: none;
    margin: 0;
    padding: 6px 12px;
    border: 1px solid rgba(11, 68, 68, 0.2);
    border-radius: 999px;
    background: var(--mw-calc-surface);
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--mw-calc-ease);
}

.mw-scope-calc__video-remove:hover {
    border-color: var(--mw-calc-line);
    background: #fff;
    transform: translateY(-1px);
}

.mw-scope-calc__video-remove:active {
    transform: translateY(0) scale(0.98);
}

.mw-scope-calc__video-empty {
    margin: 0;
    padding: 14px 16px;
    border-radius: var(--mw-calc-radius-sm);
    background: var(--mw-calc-muted);
    color: var(--mw-calc-ink-soft);
    font-size: 14px;
    line-height: 1.4;
    opacity: 0.85;
}

.mw-scope-calc__video-add {
    appearance: none;
    align-self: flex-start;
    margin: 0;
    padding: 12px 18px;
    border: 1px dashed rgba(11, 68, 68, 0.35);
    border-radius: 999px;
    background: transparent;
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--mw-calc-ease), box-shadow 180ms ease;
}

.mw-scope-calc__video-add:hover:not(:disabled) {
    background: rgba(184, 212, 50, 0.18);
    border-style: solid;
    border-color: var(--mw-calc-line);
    transform: translateY(-1px);
}

.mw-scope-calc__video-add:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.mw-scope-calc__video-add:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.mw-scope-calc__video-add:focus-visible,
.mw-scope-calc__video-remove:focus-visible {
    outline: 2px solid var(--mw-calc-accent);
    outline-offset: 2px;
}

.mw-scope-calc__scoped-pages {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__scoped-head {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-scope-calc__platform-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.mw-scope-calc__platform {
    appearance: none;
    margin: 0;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: var(--mw-calc-radius-md);
    background: var(--mw-calc-muted);
    color: var(--mw-calc-ink);
    font-family: inherit;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    text-align: left;
    min-height: 56px;
    transition: background-color 180ms ease, border-color 180ms ease, transform 180ms var(--mw-calc-ease), box-shadow 180ms ease;
}

.mw-scope-calc__platform:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(5, 51, 51, 0.06);
}

.mw-scope-calc__platform.is-active {
    background: linear-gradient(0deg, rgba(184, 212, 50, 0.22), rgba(184, 212, 50, 0.22)), #F4F5F5;
    border-color: var(--mw-calc-line);
    box-shadow: none;
}

.mw-scope-calc__platform:focus-visible {
    outline: 2px solid var(--mw-calc-accent);
    outline-offset: 2px;
}

.mw-scope-calc__platform-radio {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    border: 1.5px solid var(--mw-calc-ink);
    border-radius: 50%;
    position: relative;
    background: transparent;
}

.mw-scope-calc__platform.is-active .mw-scope-calc__platform-radio::after {
    content: '';
    position: absolute;
    inset: 4px;
    border-radius: 50%;
    background: var(--mw-calc-ink);
}

.mw-scope-calc__platform-label {
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__scoped-controls {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__scoped-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.mw-scope-calc__homepage-check {
    display: inline-flex;
    align-items: flex-start;
    gap: 8px;
    cursor: pointer;
    min-width: 0;
}

.mw-scope-calc__homepage-check.is-locked {
    cursor: default;
}

.mw-scope-calc__homepage-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    padding-top: 1px;
}

.mw-scope-calc__homepage-label {
    color: var(--mw-calc-ink-soft);
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__homepage-meta {
    color: var(--mw-calc-ink-soft);
    font-size: 12px;
    font-weight: 400;
    line-height: 1.3;
    opacity: 0.7;
}

.mw-scope-calc__amazon-video {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.mw-scope-calc__amazon-scope {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    width: 100%;
}

.mw-scope-calc__amazon-scope-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 56px;
    padding: 16px;
    border-radius: var(--mw-calc-radius-md);
    background: var(--mw-calc-muted);
    cursor: pointer;
    transition: background-color 180ms ease, box-shadow 180ms ease, transform 180ms var(--mw-calc-ease);
}

.mw-scope-calc__amazon-scope-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 18px rgba(5, 51, 51, 0.06);
}

.mw-scope-calc__amazon-scope-card.is-active {
    box-shadow: inset 0 0 0 1.5px rgba(11, 68, 68, 0.18);
}

.mw-scope-calc__amazon-scope-check {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
    cursor: pointer;
}

.mw-scope-calc__amazon-scope-label {
    color: var(--mw-calc-ink);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
    overflow-wrap: anywhere;
}

.mw-scope-calc__stepper {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    height: 48px;
    padding: 8px 16px;
    border-radius: 12px;
    background: #FFFFFF;
    flex: 0 0 auto;
    transition: opacity 160ms ease;
}

.mw-scope-calc__stepper.is-disabled {
    opacity: 0.45;
    pointer-events: none;
}

.mw-scope-calc__stepper-btn {
    appearance: none;
    margin: 0;
    padding: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--mw-calc-ink-soft);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 140ms ease, color 140ms ease, transform 140ms var(--mw-calc-ease);
}

.mw-scope-calc__stepper-btn:hover:not(:disabled) {
    background: rgba(5, 51, 51, 0.06);
    color: var(--mw-calc-ink);
}

.mw-scope-calc__stepper-btn:active:not(:disabled) {
    transform: scale(0.94);
}

.mw-scope-calc__stepper-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.mw-scope-calc__stepper-btn:focus-visible {
    outline: 2px solid var(--mw-calc-accent);
    outline-offset: 2px;
}

.mw-scope-calc__stepper-value {
    min-width: 28px;
    text-align: center;
    color: var(--mw-calc-ink-soft);
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
    font-variant-numeric: tabular-nums;
}

/* Summary */
.mw-scope-calc__summary {
    width: 100%;
    padding: 32px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    position: sticky;
    top: 110px;
}

.mw-scope-calc__summary-title {
    margin: 0;
    width: 100%;
    text-align: center;
    color: var(--mw-calc-ink);
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__price-card {
    width: 100%;
    padding: 24px;
    background: var(--mw-calc-line);
    border-radius: var(--mw-calc-radius-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.mw-scope-calc__price-value {
    color: var(--mw-calc-accent);
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.02em;
    transition: transform 220ms var(--mw-calc-ease);
}

.mw-scope-calc__price-value.is-pulse {
    transform: scale(1.04);
}

.mw-scope-calc__slots {
    margin: 0;
    color: #FFFFFF;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.mw-scope-calc__slots[hidden] {
    display: none !important;
}

.mw-scope-calc__cta {
    width: 100%;
    padding: 14px 20px;
    border: none;
    border-radius: 100px;
    background: var(--mw-calc-accent);
    color: var(--mw-calc-ink);
    font-family: inherit;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.6;
    cursor: pointer;
    transition: opacity 200ms ease, transform 200ms var(--mw-calc-ease), background-color 200ms ease, box-shadow 200ms ease;
}

.mw-scope-calc__cta:hover:not(:disabled) {
    background: var(--mw-calc-accent-hover);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(184, 212, 50, 0.35);
}

.mw-scope-calc__cta:active:not(:disabled) {
    transform: translateY(0);
}

.mw-scope-calc__cta:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.mw-scope-calc__cta:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

.mw-scope-calc__price-note {
    margin: 0;
    max-width: 180px;
    text-align: center;
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
}

.mw-scope-calc__breakdown {
    width: 100%;
    padding: 0 24px;
    display: flex;
    flex-direction: column;
}

.mw-scope-calc__breakdown-items {
    display: flex;
    flex-direction: column;
}

.mw-scope-calc__breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1.5px solid var(--mw-calc-border);
    font-size: 18px;
    font-weight: 600;
    line-height: 1.2;
}

.mw-scope-calc__breakdown-row span:first-child {
    min-width: 0;
}

.mw-scope-calc__breakdown-row--sale {
    color: var(--mw-calc-sale);
}

.mw-scope-calc__breakdown-row--total {
    color: var(--mw-calc-ink);
}

.mw-scope-calc__breakdown-row--item {
    color: var(--mw-calc-ink);
    font-weight: 600;
    font-size: 18px;
}

.mw-scope-calc__breakdown-copy {
    min-width: 0;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.mw-scope-calc__breakdown-name {
    color: var(--mw-calc-ink);
}

.mw-scope-calc__breakdown-details {
    margin: 0;
    color: var(--mw-calc-ink-soft);
    font-size: 11px;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0.6;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.mw-scope-calc__breakdown-amount {
    flex: 0 0 auto;
    white-space: nowrap;
}

/* Mobile sticky bar */
.mw-scope-calc__mobile-bar {
    display: none;
}

@media (max-width: 1180px) {
    .mw-scope-calc {
        padding: 64px 0 96px;
    }

    .mw-scope-calc__layout {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .mw-scope-calc__summary {
        position: static;
        max-width: 560px;
        width: 100%;
        margin: 0 auto;
        padding: 28px 16px;
    }

    .mw-scope-calc__amazon-scope {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 900px) {
    .mw-scope-calc {
        padding: 56px 0 100px;
    }

    .mw-scope-calc__main {
        padding: 24px;
        gap: 32px;
        border-radius: 28px;
    }

    .mw-scope-calc__platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mw-scope-calc__heading {
        font-size: 20px;
    }

    .mw-scope-calc__slider-title,
    .mw-scope-calc__card-title {
        font-size: 18px;
    }

    .mw-scope-calc__slider-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .mw-scope-calc__slider-top.is-compact {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .mw-scope-calc__option-list {
        flex-wrap: wrap;
    }

    .mw-scope-calc__group-option {
        min-height: 52px;
        padding: 12px 14px;
    }

    .mw-scope-calc__group-option-label {
        font-size: 15px;
    }

    .mw-scope-calc__group-option-meta {
        font-size: 12px;
    }
}

@media (max-width: 760px) {
    .mw-scope-calc {
        padding: 40px 0 calc(112px + env(safe-area-inset-bottom, 0px));
    }

    .mw-scope-calc__main {
        padding: 14px 12px 16px;
        gap: 14px;
        border-radius: 20px;
    }

    .mw-scope-calc__intro {
        gap: 10px;
    }

    .mw-scope-calc__heading {
        font-size: 17px;
        letter-spacing: -0.01em;
    }

    /* Compact chip tabs with scroll navigation */
    .mw-scope-calc__tabs-nav {
        display: grid;
        grid-template-columns: 34px minmax(0, 1fr) 34px;
        align-items: center;
        gap: 4px;
        width: 100%;
    }

    .mw-scope-calc__tabs-nav:not(.is-scrollable) {
        grid-template-columns: minmax(0, 1fr);
    }

    .mw-scope-calc__tabs-nav:not(.is-scrollable) .mw-scope-calc__tabs-arrow {
        display: none;
    }

    .mw-scope-calc__tabs-arrow {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 34px;
        height: 34px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(5, 51, 51, 0.18);
        border-radius: 999px;
        background: #FFFFFF;
        color: var(--mw-calc-ink);
        cursor: pointer;
        flex: 0 0 34px;
        box-shadow: 0 4px 12px rgba(5, 51, 51, 0.08);
        transition: background-color 180ms ease, border-color 180ms ease, opacity 180ms ease, transform 180ms var(--mw-calc-ease);
    }

    .mw-scope-calc__tabs-arrow span {
        display: block;
        width: 8px;
        height: 8px;
        border-right: 2px solid currentColor;
        border-bottom: 2px solid currentColor;
        transform: rotate(-45deg);
        margin-left: -2px;
    }

    .mw-scope-calc__tabs-arrow--prev span {
        transform: rotate(135deg);
        margin-left: 2px;
    }

    .mw-scope-calc__tabs-arrow:disabled {
        opacity: 0.28;
        cursor: default;
        box-shadow: none;
    }

    .mw-scope-calc__tabs-arrow:not(:disabled):active {
        transform: scale(0.94);
        background: var(--mw-calc-accent);
        border-color: var(--mw-calc-line);
    }

    .mw-scope-calc__tabs-nav.can-scroll-right .mw-scope-calc__tabs-arrow--next:not(:disabled) {
        animation: mw-calc-tabs-nudge 1.6s var(--mw-calc-ease) 2;
    }

    @keyframes mw-calc-tabs-nudge {
        0%,
        100% { transform: translateX(0); }
        50% { transform: translateX(3px); }
    }

    .mw-scope-calc__tabs {
        flex-wrap: nowrap;
        gap: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
        margin-inline: 0;
        padding: 2px 18px 8px 2px;
        scroll-snap-type: x proximity;
        mask-image: none;
        -webkit-mask-image: none;
    }

    .mw-scope-calc__tabs-nav.can-scroll-left .mw-scope-calc__tabs {
        mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 100%);
    }

    .mw-scope-calc__tabs-nav.can-scroll-right .mw-scope-calc__tabs {
        mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
        -webkit-mask-image: linear-gradient(90deg, #000 0, #000 calc(100% - 22px), transparent);
    }

    .mw-scope-calc__tabs-nav.can-scroll-left.can-scroll-right .mw-scope-calc__tabs {
        mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent);
        -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 22px), transparent);
    }

    .mw-scope-calc__tabs::-webkit-scrollbar {
        display: none;
    }

    .mw-scope-calc__tab {
        flex: 0 0 auto;
        white-space: nowrap;
        padding: 7px 12px;
        font-size: 13px;
        font-weight: 600;
        border-radius: 999px;
        min-height: 34px;
        scroll-snap-align: start;
        line-height: 1.2;
    }

    .mw-scope-calc__tabs-hint {
        display: block;
        margin: 0;
        padding: 0 2px;
        color: var(--mw-calc-ink);
        font-size: 11px;
        font-weight: 500;
        letter-spacing: 0.02em;
        opacity: 0.55;
        transition: opacity 280ms ease, transform 280ms ease;
    }

    .mw-scope-calc__tabs-hint.is-hidden,
    .mw-scope-calc__tabs-hint[hidden] {
        opacity: 0;
        transform: translateY(-4px);
        pointer-events: none;
        height: 0;
        margin: 0;
        overflow: hidden;
    }

    .mw-scope-calc__tab-badge {
        width: 18px;
        height: 18px;
        font-size: 11px;
    }

    .mw-scope-calc__panel {
        gap: 12px;
    }

    /* Continuous checklist sheet */
    .mw-scope-calc__section-items {
        gap: 0;
        border-radius: 14px;
        background: #F0EEEC;
        overflow: hidden;
    }

    .mw-scope-calc__card {
        padding: 11px 12px;
        border-radius: 0;
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(5, 51, 51, 0.08);
        gap: 0;
        box-shadow: none;
        position: relative;
        transition: background-color 200ms ease, box-shadow 200ms ease;
    }

    .mw-scope-calc__card:last-child {
        border-bottom: none;
    }

    .mw-scope-calc__card--service:hover {
        transform: none;
        box-shadow: none;
    }

    .mw-scope-calc__card--service:active {
        background: rgba(255, 255, 255, 0.35);
    }

    .mw-scope-calc__card.is-open {
        background: linear-gradient(90deg, rgba(184, 212, 50, 0.34), rgba(184, 212, 50, 0.12) 42%, rgba(244, 245, 245, 0.55));
        border-color: transparent;
        box-shadow: inset 3px 0 0 #B8D432;
    }

    .mw-scope-calc__card-head {
        gap: 0;
    }

    .mw-scope-calc__check-row {
        gap: 10px;
        min-height: 28px;
    }

    .mw-scope-calc__check,
    .mw-scope-calc__check-ui {
        width: 20px;
        height: 20px;
        flex-basis: 20px;
    }

    .mw-scope-calc__check-ui::after {
        width: 4px;
        height: 8px;
    }

    .mw-scope-calc__card-title,
    .mw-scope-calc__slider-title,
    .mw-scope-calc__card-title--lg {
        font-size: 15px;
        line-height: 1.25;
        letter-spacing: -0.01em;
    }

    /* Collapse detail + notes until selected */
    .mw-scope-calc__card--service .mw-scope-calc__card-detail {
        display: grid;
        grid-template-rows: 0fr;
        opacity: 0;
        margin-top: 0;
        transition: grid-template-rows 280ms var(--mw-calc-ease), opacity 200ms ease, margin-top 200ms ease;
    }

    .mw-scope-calc__card--service .mw-scope-calc__card-detail > * {
        min-height: 0;
        overflow: hidden;
    }

    .mw-scope-calc__card--service.is-open .mw-scope-calc__card-detail {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 8px;
    }

    .mw-scope-calc__card-desc,
    .mw-scope-calc__slider-desc,
    .mw-scope-calc__card-desc--sm {
        font-size: 12px;
        line-height: 1.35;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .mw-scope-calc__card-disclaimer {
        font-size: 11px;
    }

    .mw-scope-calc__card.has-notes-always {
        gap: 0;
    }

    .mw-scope-calc__card--service .mw-scope-calc__notes,
    .mw-scope-calc__card--service .mw-scope-calc__notes.is-visible {
        max-height: 0 !important;
        opacity: 0 !important;
        margin-top: 0 !important;
        overflow: hidden !important;
        pointer-events: none;
        padding-bottom: 0 !important;
    }

    .mw-scope-calc__card--service.is-open .mw-scope-calc__notes,
    .mw-scope-calc__card--service.is-open .mw-scope-calc__notes.is-visible {
        max-height: 120px !important;
        opacity: 1 !important;
        margin-top: 8px !important;
        overflow: visible !important;
        pointer-events: auto;
        gap: 4px;
    }

    .mw-scope-calc__notes-label {
        font-size: 12px;
        font-weight: 600;
        opacity: 0.72;
    }

    .mw-scope-calc__notes-input {
        font-size: 16px; /* prevents iOS zoom on focus */
        min-height: 40px;
        padding: 10px 12px;
        border-radius: 10px;
    }

    .mw-scope-calc__option {
        min-height: 40px;
        padding: 8px 10px;
    }

    .mw-scope-calc__card--group {
        gap: 10px;
        padding: 12px;
    }

    .mw-scope-calc__card--group .mw-scope-calc__card-detail,
    .mw-scope-calc__card--group .mw-scope-calc__card-desc {
        display: block;
        opacity: 1;
        -webkit-line-clamp: 2;
    }

    .mw-scope-calc__group-options {
        gap: 6px;
    }

    .mw-scope-calc__group-option {
        min-height: 44px;
        padding: 10px 12px;
        border-radius: 10px;
        gap: 10px;
    }

    .mw-scope-calc__group-option:hover {
        transform: none;
        box-shadow: none;
    }

    .mw-scope-calc__group-option-label {
        font-size: 14px;
    }

    .mw-scope-calc__group-option-meta {
        font-size: 11px;
    }

    .mw-scope-calc__spec-grid {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mw-scope-calc__spec-fields-label {
        font-size: 13px;
    }

    .mw-scope-calc__spec-sliders {
        gap: 12px;
    }

    .mw-scope-calc__spec-slider-title {
        font-size: 14px;
    }

    .mw-scope-calc__spec-slider {
        gap: 8px;
    }

    .mw-scope-calc__spec-input {
        min-height: 42px;
        padding: 10px 14px;
        font-size: 16px;
    }

    /* Compact sliders */
    .mw-scope-calc__slider-field,
    .mw-scope-calc__amazon-video,
    .mw-scope-calc__video-multi,
    .mw-scope-calc__scoped-pages {
        gap: 6px;
        padding: 10px 12px;
        margin: 0;
        border-radius: 0;
        border-bottom: 1px solid rgba(5, 51, 51, 0.08);
        background: transparent;
        box-sizing: border-box;
    }

    .mw-scope-calc__slider-field:last-child,
    .mw-scope-calc__amazon-video:last-child,
    .mw-scope-calc__video-multi:last-child,
    .mw-scope-calc__scoped-pages:last-child {
        border-bottom: none;
    }

    .mw-scope-calc__slider-top {
        gap: 4px;
    }

    .mw-scope-calc__slider-top.is-compact {
        flex-direction: row;
        align-items: center;
        gap: 10px;
    }

    .mw-scope-calc__slider-meta {
        flex-direction: row;
        align-items: baseline;
        justify-content: space-between;
        gap: 8px;
        width: 100%;
    }

    .mw-scope-calc__slider-field .mw-scope-calc__slider-desc,
    .mw-scope-calc__video-multi .mw-scope-calc__slider-desc,
    .mw-scope-calc__scoped-pages .mw-scope-calc__slider-desc,
    .mw-scope-calc__amazon-video .mw-scope-calc__slider-desc {
        display: none;
    }

    .mw-scope-calc__slider-unit {
        font-size: 12px;
        white-space: nowrap;
        opacity: 0.65;
    }

    .mw-scope-calc__slider-control {
        padding: 2px 0 0;
    }

    .mw-scope-calc__slider-track {
        height: 24px;
        padding: 0 4px;
    }

    .mw-scope-calc__slider-ticks {
        left: 4px;
        right: 4px;
    }

    .mw-scope-calc__slider-input {
        height: 24px;
        touch-action: none;
    }

    .mw-scope-calc__slider-input::-webkit-slider-thumb {
        width: 22px;
        height: 22px;
        margin-top: -4px;
    }

    .mw-scope-calc__slider-input::-moz-range-thumb {
        width: 22px;
        height: 22px;
    }

    .mw-scope-calc__slider-scale {
        font-size: 11px;
        padding: 0;
        margin-top: -2px;
    }

    .mw-scope-calc__slider-scale--proportional {
        height: 16px;
    }

    .mw-scope-calc__amazon-scope {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .mw-scope-calc__amazon-scope-card {
        flex-wrap: nowrap;
        align-items: center;
        min-height: 48px;
        padding: 10px 12px;
        gap: 10px;
    }

    .mw-scope-calc__amazon-scope-label {
        font-size: 14px;
    }

    .mw-scope-calc__amazon-scope-check {
        flex: 1 1 auto;
        min-width: 0;
    }

    .mw-scope-calc__stepper {
        margin-left: auto;
        height: 40px;
        padding: 4px 10px;
        gap: 8px;
        flex-shrink: 0;
    }

    .mw-scope-calc__stepper-btn {
        width: 28px;
        height: 28px;
    }

    .mw-scope-calc__stepper-value {
        font-size: 15px;
        min-width: 22px;
    }

    .mw-scope-calc__video-add {
        width: 100%;
        text-align: center;
        min-height: 42px;
    }

    .mw-scope-calc__video-row {
        padding: 10px;
    }

    .mw-scope-calc__platform-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 8px;
    }

    .mw-scope-calc__platform {
        min-height: 42px;
        padding: 10px;
    }

    .mw-scope-calc__platform-label {
        font-size: 14px;
    }

    .mw-scope-calc__scoped-meta {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 8px;
    }

    .mw-scope-calc__homepage-label {
        font-size: 13px;
    }

    .mw-scope-calc__summary {
        max-width: none;
        border-radius: 20px;
        padding: 16px 12px;
        gap: 14px;
    }

    .mw-scope-calc__summary-title {
        font-size: 20px;
    }

    .mw-scope-calc__price-card {
        padding: 16px 14px;
        border-radius: 16px;
        gap: 10px;
    }

    .mw-scope-calc__price-value {
        font-size: 30px;
    }

    .mw-scope-calc__slots {
        font-size: 13px;
    }

    .mw-scope-calc__cta {
        font-size: 15px;
        padding: 12px 16px;
        min-height: 46px;
    }

    .mw-scope-calc__price-note {
        max-width: 220px;
        font-size: 12px;
    }

    .mw-scope-calc__breakdown {
        padding: 0 4px;
    }

    .mw-scope-calc__breakdown-row,
    .mw-scope-calc__breakdown-row--item {
        font-size: 14px;
        gap: 10px;
        padding: 10px 0;
    }

    .mw-scope-calc__breakdown-details {
        font-size: 11px;
    }

    .mw-scope-calc__mobile-bar {
        display: flex;
        position: fixed;
        left: max(10px, env(safe-area-inset-left, 0px));
        right: max(10px, env(safe-area-inset-right, 0px));
        bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        z-index: 90;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        padding: 10px 10px 10px 14px;
        border-radius: 16px;
        background: var(--mw-calc-line);
        box-shadow: 0 10px 28px rgba(5, 51, 51, 0.28);
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
        transition: transform 320ms var(--mw-calc-ease), opacity 240ms ease;
    }

    .mw-scope-calc__mobile-bar.is-visible {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

    .mw-scope-calc__mobile-bar[hidden] {
        display: none !important;
    }

    .mw-scope-calc__mobile-bar-info {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }

    .mw-scope-calc__mobile-bar-label {
        color: rgba(255, 255, 255, 0.72);
        font-size: 11px;
        font-weight: 500;
    }

    .mw-scope-calc__mobile-bar-total {
        color: var(--mw-calc-accent);
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .mw-scope-calc__mobile-bar-cta {
        flex: 0 0 auto;
        padding: 10px 14px;
        min-height: 40px;
        border: none;
        border-radius: 100px;
        background: var(--mw-calc-accent);
        color: var(--mw-calc-ink);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: opacity 180ms ease, background-color 180ms ease;
    }

    .mw-scope-calc__mobile-bar-cta:disabled {
        opacity: 0.5;
        cursor: not-allowed;
    }
}

@media (max-width: 520px) {
    .mw-scope-calc {
        padding: 28px 0 calc(116px + env(safe-area-inset-bottom, 0px));
    }

    .mw-scope-calc__main {
        padding: 12px 10px 14px;
        gap: 12px;
        border-radius: 18px;
    }

    .mw-scope-calc__heading {
        font-size: 16px;
    }

    .mw-scope-calc__tabs {
        margin-inline: -2px;
        padding: 1px 2px 4px;
        gap: 5px;
    }

    .mw-scope-calc__tab {
        padding: 6px 10px;
        font-size: 12px;
        min-height: 32px;
        border-radius: 999px;
    }

    .mw-scope-calc__card {
        padding: 10px 11px;
    }

    .mw-scope-calc__card-title,
    .mw-scope-calc__slider-title,
    .mw-scope-calc__card-title--lg {
        font-size: 14px;
    }

    .mw-scope-calc__check,
    .mw-scope-calc__check-ui {
        width: 18px;
        height: 18px;
        flex-basis: 18px;
    }

    .mw-scope-calc__platform-grid {
        grid-template-columns: 1fr;
    }

    .mw-scope-calc__amazon-scope-card {
        flex-wrap: wrap;
        padding: 10px;
        min-height: 44px;
    }

    .mw-scope-calc__amazon-scope-label {
        font-size: 13px;
    }

    .mw-scope-calc__stepper {
        width: 100%;
        justify-content: space-between;
        margin-left: 0;
        padding: 4px 12px;
    }

    .mw-scope-calc__summary {
        padding: 14px 10px;
        border-radius: 18px;
        gap: 12px;
    }

    .mw-scope-calc__summary-title {
        font-size: 18px;
    }

    .mw-scope-calc__price-card {
        padding: 14px 12px;
        border-radius: 14px;
    }

    .mw-scope-calc__price-value {
        font-size: 28px;
    }

    .mw-scope-calc__breakdown {
        padding: 0 2px;
    }

    .mw-scope-calc__breakdown-row,
    .mw-scope-calc__breakdown-row--item {
        font-size: 13px;
        padding: 9px 0;
    }

    .mw-scope-calc__mobile-bar {
        left: max(8px, env(safe-area-inset-left, 0px));
        right: max(8px, env(safe-area-inset-right, 0px));
        bottom: calc(8px + env(safe-area-inset-bottom, 0px));
        padding: 8px 8px 8px 12px;
        border-radius: 14px;
        gap: 8px;
    }

    .mw-scope-calc__mobile-bar-total {
        font-size: 16px;
    }

    .mw-scope-calc__mobile-bar-cta {
        padding: 9px 12px;
        font-size: 13px;
        min-height: 38px;
    }
}

@media (max-width: 380px) {
    .mw-scope-calc {
        padding: 24px 0 calc(112px + env(safe-area-inset-bottom, 0px));
    }

    .mw-scope-calc__main {
        padding: 10px 8px 12px;
        border-radius: 16px;
    }

    .mw-scope-calc__tab {
        padding: 6px 9px;
        font-size: 11px;
        min-height: 30px;
    }

    .mw-scope-calc__card-title,
    .mw-scope-calc__slider-title,
    .mw-scope-calc__card-title--lg {
        font-size: 13px;
    }

    .mw-scope-calc__amazon-scope-label {
        font-size: 12px;
    }

    .mw-scope-calc__price-value {
        font-size: 26px;
    }

    .mw-scope-calc__slider-scale {
        font-size: 11px;
    }

    .mw-scope-calc__mobile-bar-cta {
        padding: 8px 10px;
        font-size: 12px;
    }
}

/* Prefer hover affordances only when a real pointer exists */
@media (hover: none) {
    .mw-scope-calc__tab:hover,
    .mw-scope-calc__card--service:hover,
    .mw-scope-calc__platform:hover,
    .mw-scope-calc__amazon-scope-card:hover,
    .mw-scope-calc__video-row:hover,
    .mw-scope-calc__option:hover,
    .mw-scope-calc__group-option:hover,
    .mw-scope-calc__cta:hover:not(:disabled) {
        transform: none;
        box-shadow: none;
    }

    .mw-scope-calc__slider-input:hover::-webkit-slider-thumb,
    .mw-scope-calc__slider-input:hover::-moz-range-thumb {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .mw-scope-calc__main,
    .mw-scope-calc__summary,
    .mw-scope-calc__tab,
    .mw-scope-calc__cta,
    .mw-scope-calc__price-value,
    .mw-scope-calc__mobile-bar,
    .mw-scope-calc__notes,
    .mw-scope-calc__slider-track-fill,
    .mw-scope-calc__tabs-arrow {
        transition: none !important;
        animation: none !important;
    }

    .mw-scope-calc__main,
    .mw-scope-calc__summary {
        opacity: 1;
        transform: none;
    }
}

body.mw-checkout .main-page-cta-bar,
body.mw-checkout .project-cta-bar {
    display: none !important;
}

/* ============================================
   CONTACT PAGE BOOKING LAYOUT
   Scoped to .contact-page-booking so landing
   contact-options-section is unchanged.
   ============================================ */

body:has(.contact-page-booking) .contact-hero-section {
    display: none !important;
}

.contact-page-booking.contact-options-section {
    background: #EAE5E3;
    padding: 160px clamp(20px, 4vw, 40px) 120px;
    overflow-x: clip;
    overflow-y: visible;
    scroll-margin-top: 96px;
}

.contact-page-booking .contact-options-container {
    max-width: 1400px;
    padding: 0;
}

.contact-page-booking .contact-booking {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 48px;
    width: 100%;
}

.contact-page-booking .contact-header {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 0;
    width: 100%;
}

.contact-page-booking .contact-title-wrapper {
    flex: none;
    width: 100%;
}

.contact-page-booking .contact-main-title {
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(32px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.contact-page-booking .contact-title-dark,
.contact-page-booking .contact-title-green {
    display: inline;
    font-size: inherit;
    opacity: 1;
    animation: none;
}

.contact-page-booking .contact-title-dark {
    color: #0B4444;
}

.contact-page-booking .contact-title-green {
    color: #9BB814;
}

.contact-page-booking .contact-info-cards {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 40px;
    width: 100%;
}

.contact-page-booking .contact-info-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 0;
    background: transparent;
    backdrop-filter: none;
    min-height: 48px;
    border-radius: 0;
    overflow: visible;
}

.contact-page-booking .contact-info-card:hover {
    transform: none;
    background: transparent;
    box-shadow: none;
}

.contact-page-booking .contact-info-card:hover .contact-icon-wrapper {
    background: transparent !important;
    transform: none !important;
}

.contact-page-booking .contact-info-card:focus-visible {
    outline: 2px solid #0B4444;
    outline-offset: 4px;
    border-radius: 8px;
}

.contact-page-booking .contact-icon-wrapper {
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    background: transparent !important;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-page-booking .contact-icon-wrapper img,
.contact-page-booking .contact-icon-wrapper svg,
.contact-page-booking .contact-icon-wrapper svg[viewBox="0 0 24 24"],
.contact-page-booking .contact-info-card:hover .contact-icon-wrapper svg {
    width: 48px !important;
    height: 48px !important;
    max-width: none;
    flex-shrink: 0;
    display: block;
    object-fit: contain;
    pointer-events: none;
    fill: unset;
    stroke: unset;
}

.contact-page-booking .contact-icon-wrapper > svg > rect {
    fill: #0B4444;
    stroke: none;
}

.contact-page-booking .contact-icon-wrapper svg path {
    fill: #F4F5F5;
    stroke: none;
}

.contact-page-booking .contact-info-card:active .contact-icon-wrapper {
    transform: scale(0.96);
}

.contact-page-booking .contact-info-text {
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(16px, 1.8vw, 24px);
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
}

.contact-page-booking .contact-info-card:hover .contact-info-text {
    color: #0B4444;
}

.contact-page-booking .contact-calendly-stage {
    position: relative;
    align-self: stretch;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    box-sizing: border-box;
    background: #B8D432;
    border-radius: 20px;
    padding: 40px 24px;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (min-width: 1200px) {
    .contact-page-booking .contact-calendly-stage {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
        padding: 64px 80px;
    }
}

.contact-page-booking .contact-calendly-mark {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.04;
    pointer-events: none;
}

.contact-page-booking .contact-calendly-mark svg {
    width: min(92%, 1100px);
    height: auto;
}

.contact-page-booking .contact-booking-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.contact-page-booking.contact-options-section .calendly-inline-widget,
.contact-page-booking.contact-options-section .calendly-inline-widget iframe {
    position: relative;
    z-index: 1;
    width: 100% !important;
    max-width: 1100px !important;
    min-width: 0 !important;
    height: 680px !important;
    min-height: 680px !important;
    max-height: 680px !important;
    margin: 0 auto !important;
    background: #B8D432 !important;
    border: 0 !important;
    border-radius: 16px !important;
    box-shadow: none !important;
    display: block !important;
    align-items: stretch !important;
    justify-content: stretch !important;
    overflow: hidden !important;
}

@media (min-width: 1200px) {
    .contact-page-booking.contact-options-section .calendly-inline-widget,
    .contact-page-booking.contact-options-section .calendly-inline-widget iframe {
        width: 1100px !important;
        max-width: 1100px !important;
        min-width: 1100px !important;
        height: 680px !important;
        min-height: 680px !important;
        max-height: 680px !important;
        flex: 0 0 1100px;
    }
}

.contact-page-booking .contact-form-layout {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
    padding-top: 40px;
    padding-bottom: 0;
}

.contact-page-booking .contact-form-intro {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    flex: 1 1 555px;
    width: 555px;
    max-width: 555px;
    padding-top: 0;
}

.contact-page-booking .contact-form-intro-title {
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: clamp(36px, 4.2vw, 56px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.contact-page-booking .contact-form-intro-copy {
    margin: 0;
    width: 390px;
    max-width: 100%;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
}

.contact-page-booking .contact-form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    flex: 0 1 670px;
    width: 100%;
    max-width: 670px;
}

.contact-page-booking .contact-form > .form-group,
.contact-page-booking .contact-form > .contact-pill-fieldset,
.contact-page-booking .contact-form > .form-submit-btn {
    width: 100%;
    max-width: 555px;
}

.contact-page-booking .form-group {
    margin-bottom: 32px;
    gap: 12px;
}

.contact-page-booking .form-label,
.contact-page-booking .contact-pill-fieldset legend.form-label {
    display: block;
    float: none;
    width: 100%;
    padding: 0;
    margin: 0;
    color: #0B4444;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
}

.contact-page-booking .contact-pill-fieldset {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    border: 0;
    margin: 0 0 32px;
    padding: 0;
    min-width: 0;
}

.contact-page-booking .contact-pill-fieldset legend.form-label {
    float: left;
    width: 100%;
    margin: 0;
    padding: 0 0 12px;
}

.contact-page-booking .contact-pill-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 0;
    clear: both;
}

.contact-page-booking .form-input,
.contact-page-booking .form-textarea,
.contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle {
    background: #F4F5F5;
    border: 0;
    border-radius: 20px;
    box-shadow: none;
    color: #161616;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    transform: none;
}

.contact-page-booking .form-input,
.contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle {
    height: 64px;
    min-height: 64px;
    padding: 16px 20px;
}

.contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle {
    padding-right: 20px;
    gap: 24px;
}

.contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle::after {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-page-booking .custom-dropdown:not(.phone-dropdown):has(input[value=""]) .custom-dropdown-label {
    opacity: 0.5;
    color: #161616;
}

.contact-page-booking .form-input:hover,
.contact-page-booking .form-textarea:hover,
.contact-page-booking .custom-dropdown-toggle:hover,
.contact-page-booking .custom-dropdown.is-open .custom-dropdown-toggle,
.contact-page-booking .phone-dropdown.is-open .custom-dropdown-toggle {
    border-color: transparent;
    background: #F4F5F5;
    box-shadow: none;
    transform: none;
}

.contact-page-booking .form-input:focus,
.contact-page-booking .form-textarea:focus,
.contact-page-booking .form-input:focus-visible,
.contact-page-booking .form-textarea:focus-visible,
.contact-page-booking .phone-input-field:focus,
.contact-page-booking .phone-input-field:focus-visible,
.contact-page-booking .custom-dropdown-toggle:focus-visible {
    border-color: transparent;
    background: #F4F5F5;
    background-image: none;
    transform: none;
    box-shadow: none;
    outline: 2px solid #0B4444;
    outline-offset: 2px;
}

.contact-page-booking .form-input::placeholder,
.contact-page-booking .form-textarea::placeholder,
.contact-page-booking .phone-input-field::placeholder {
    color: #161616;
    opacity: 0.5;
    font-weight: 400;
}

.contact-page-booking .form-textarea {
    height: 180px;
    min-height: 180px;
    padding: 16px 20px;
    resize: vertical;
}

.contact-page-booking .phone-input-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 64px;
    min-height: 64px;
    padding: 0 20px;
    background: #F4F5F5;
    border-radius: 20px;
}

.contact-page-booking .phone-input-wrapper:focus-within {
    outline: 2px solid #0B4444;
    outline-offset: 2px;
}

.contact-page-booking .phone-dropdown {
    width: auto;
    max-width: none;
    flex-shrink: 0;
}

.contact-page-booking .phone-dropdown .custom-dropdown-toggle {
    width: auto;
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    justify-content: flex-start;
    gap: 8px;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
}

.contact-page-booking .phone-dropdown .custom-dropdown-toggle:hover,
.contact-page-booking .phone-dropdown.is-open .custom-dropdown-toggle {
    background: transparent;
    box-shadow: none;
    transform: none;
    border: 0;
}

.contact-page-booking .phone-dropdown .custom-dropdown-toggle::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M19.5 9L12 16.5L4.5 9' stroke='%23161616' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.contact-page-booking .phone-dropdown .custom-dropdown-label {
    flex: none;
}

.contact-page-booking .phone-dropdown .custom-dropdown-toggle .country-flag {
    display: none;
}

.contact-page-booking .phone-dropdown .country-code {
    font-size: 24px;
    font-weight: 400;
    color: #161616;
    line-height: 1.4;
}

.contact-page-booking .phone-input-field {
    flex: 1;
    min-width: 0;
    height: auto;
    min-height: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
    color: #161616;
    transform: none;
}

.contact-page-booking .phone-input-field:focus,
.contact-page-booking .phone-input-field:focus-visible {
    outline: none;
    background: transparent;
    box-shadow: none;
    transform: none;
}

.contact-page-booking .contact-pill {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 48px;
    min-height: 48px;
    padding: 8px 18px;
    background: #F4F5F5;
    border-radius: 100px;
    cursor: pointer;
    color: #053333;
    font-family: 'Inter Tight', sans-serif;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    text-align: center;
    user-select: none;
    overflow: hidden;
    transition: background-color 150ms cubic-bezier(0.2, 0, 0, 1);
}

.contact-page-booking .contact-pill span {
    pointer-events: none;
}

.contact-page-booking .contact-pill input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    opacity: 0;
    cursor: pointer;
}

.contact-page-booking .contact-pill:has(input:checked) {
    background: #B8D432;
    color: #053333;
}

.contact-page-booking .contact-pill:has(input:focus-visible) {
    box-shadow: 0 0 0 2px #0B4444;
}

.contact-page-booking .contact-pill:active {
    transform: none;
}

.contact-page-booking .form-group.recaptcha-container {
    margin-top: 0;
    margin-bottom: 24px;
}

.contact-page-booking .form-submit-btn {
    margin-top: 24px;
    width: 100%;
    max-width: 555px;
    height: 64px;
    min-height: 64px;
    padding: 20px 32px;
    font-family: 'Inter Tight', sans-serif;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.2;
    border-radius: 100px;
    background: #B8D432;
    color: #0B4444;
    box-shadow: none;
    transform: none;
}

.contact-page-booking .form-submit-btn::before {
    display: none;
}

.contact-page-booking .form-submit-btn:hover {
    background: #B8D432;
    transform: none;
    box-shadow: none;
}

.contact-page-booking .form-submit-btn:active {
    transform: scale(0.98);
}

.contact-page-booking .form-submit-btn:focus-visible {
    outline: 2px solid #0B4444;
    outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .contact-page-booking .contact-calendly-stage {
        opacity: 0;
        animation: fadeInUp 0.45s cubic-bezier(0.2, 0, 0, 1) 0.12s forwards;
    }
}

@media (prefers-reduced-motion: reduce) {
    .contact-page-booking .contact-pill,
    .contact-page-booking .form-submit-btn {
        transition: none;
    }

    .contact-page-booking .contact-pill:active,
    .contact-page-booking .form-submit-btn:active {
        transform: none;
    }
}

@media (max-width: 1100px) {
    .contact-page-booking .contact-form-layout {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
        padding-top: 48px;
    }

    .contact-page-booking .contact-form-intro,
    .contact-page-booking .contact-form {
        width: 100%;
        max-width: 555px;
        flex: none;
    }
}

@media (max-width: 1024px) {
    .contact-page-booking.contact-options-section {
        padding: 132px 32px 80px;
    }

    .contact-page-booking .contact-calendly-stage {
        padding: 40px 32px;
    }

    .contact-page-booking .contact-info-cards {
        gap: 24px 32px;
    }
}

@media (max-width: 768px) {
    .contact-page-booking.contact-options-section {
        padding: 110px 16px 64px;
    }

    .contact-page-booking .contact-booking {
        gap: 32px;
    }

    .contact-page-booking .contact-header {
        gap: 20px;
    }

    .contact-page-booking .contact-info-cards {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
    }

    .contact-page-booking .contact-info-card {
        width: auto;
        max-width: 100%;
        padding: 0;
        background: transparent;
        min-height: 48px;
    }

    .contact-page-booking .contact-icon-wrapper,
    .contact-page-booking .contact-icon-wrapper svg {
        width: 48px !important;
        height: 48px !important;
        padding: 0 !important;
        background: transparent !important;
    }

    .contact-page-booking .contact-info-text {
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        font-size: 18px;
    }

    .contact-page-booking .contact-calendly-stage {
        padding: 12px;
        border-radius: 16px;
    }

    .contact-page-booking.contact-options-section .calendly-inline-widget,
    .contact-page-booking.contact-options-section .calendly-inline-widget iframe {
        height: 960px !important;
        min-height: 960px !important;
        max-height: none !important;
        border-radius: 12px !important;
    }

    .contact-page-booking .contact-form-layout {
        padding-top: 32px;
        gap: 28px;
    }

    .contact-page-booking .contact-form-intro,
    .contact-page-booking .contact-form,
    .contact-page-booking .contact-form > .form-group,
    .contact-page-booking .contact-form > .contact-pill-fieldset,
    .contact-page-booking .contact-form > .form-submit-btn {
        max-width: 100%;
    }

    .contact-page-booking .contact-form-intro-copy {
        width: 100%;
        font-size: 18px;
    }

    .contact-page-booking .form-label,
    .contact-page-booking .contact-pill-fieldset legend.form-label,
    .contact-page-booking .form-input,
    .contact-page-booking .form-textarea,
    .contact-page-booking .phone-input-field,
    .contact-page-booking .phone-dropdown .country-code,
    .contact-page-booking .phone-dropdown .custom-dropdown-toggle,
    .contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle,
    .contact-page-booking .form-submit-btn {
        font-size: 18px;
    }

    .contact-page-booking .form-input,
    .contact-page-booking .custom-dropdown:not(.phone-dropdown) .custom-dropdown-toggle,
    .contact-page-booking .phone-input-wrapper,
    .contact-page-booking .form-submit-btn {
        height: 56px;
        min-height: 56px;
    }

    .contact-page-booking .form-textarea {
        height: 160px;
        min-height: 160px;
    }

    .contact-page-booking .contact-pill {
        height: 44px;
        min-height: 44px;
        padding: 6px 14px;
        font-size: 15px;
    }
}

@media (max-width: 480px) {
    .contact-page-booking.contact-options-section {
        padding: 96px 16px 48px;
    }

    .contact-page-booking .contact-info-text {
        font-size: 16px;
    }

    .contact-page-booking.contact-options-section .calendly-inline-widget,
    .contact-page-booking.contact-options-section .calendly-inline-widget iframe {
        height: 900px !important;
        min-height: 900px !important;
        max-height: none !important;
    }

    .contact-page-booking .contact-pill {
        font-size: 14px;
        padding: 6px 12px;
    }
}

@media (max-width: 1199px) {
    .contact-page-booking .contact-calendly-stage {
        padding: 12px;
        border-radius: 16px;
        align-items: stretch;
        justify-content: flex-start;
    }

    .contact-page-booking .contact-calendly-mark {
        display: none;
    }

    .contact-page-booking.contact-options-section .calendly-inline-widget,
    .contact-page-booking.contact-options-section .calendly-inline-widget iframe {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        height: 960px !important;
        min-height: 960px !important;
        max-height: none !important;
        flex: none;
        border-radius: 12px !important;
    }
}

@media (max-width: 480px) {
    .contact-page-booking.contact-options-section .calendly-inline-widget,
    .contact-page-booking.contact-options-section .calendly-inline-widget iframe {
        height: 900px !important;
        min-height: 900px !important;
    }
}

/* ============================================
   CONTACT PAGE BRANCHES — Figma match
   Scoped so footer location cards stay unchanged.
   ============================================ */
.contact-page-branches.contact-locations-section {
    padding: 120px 40px;
}

.contact-page-branches .contact-locations-container {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 80px;
    max-width: 1400px;
    padding: 0;
    overflow: visible;
}

.contact-page-branches .contact-locations-header,
.contact-page-branches .contact-locations-grid {
    margin-bottom: 0;
}

.contact-page-branches .contact-locations-title {
    max-width: 1130px;
    font-size: clamp(36px, 5vw, 72px);
    font-weight: 600;
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.contact-page-branches .contact-locations-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    z-index: 3;
}

.contact-page-branches .location-card {
    padding: 24px;
    gap: 16px;
    min-height: 340px;
    background: #F4F5F5;
    border-radius: 20px;
    cursor: pointer;
}

.contact-page-branches .location-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 60px rgba(184, 212, 50, 0.2);
    background: #FFFFFF;
}

.contact-page-branches .location-icon,
.contact-page-branches .contact-locations-grid .location-icon {
    width: 160px;
    height: 160px;
    flex-shrink: 0;
}

.contact-page-branches .location-card:hover .location-icon {
    transform: scale(1.1) rotate(5deg);
}

.contact-page-branches .location-subtitle {
    display: none;
}

.contact-page-branches .location-content {
    gap: 16px;
}

.contact-page-branches .location-title,
.contact-page-branches .location-card[data-location="london"] .location-title,
.contact-page-branches .location-card[data-location="istanbul"] .location-title,
.contact-page-branches .location-card[data-location="dubai"] .location-title,
.contact-page-branches .location-card[data-location="antalya"] .location-title,
.contact-page-branches .location-card[data-location="florida"] .location-title {
    color: #0B4444;
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
}

.contact-page-branches .location-card:hover .location-title,
.contact-page-branches .location-card[data-location="london"]:hover .location-title,
.contact-page-branches .location-card[data-location="istanbul"]:hover .location-title,
.contact-page-branches .location-card[data-location="dubai"]:hover .location-title,
.contact-page-branches .location-card[data-location="antalya"]:hover .location-title,
.contact-page-branches .location-card[data-location="florida"]:hover .location-title {
    color: #B8D432;
}

.contact-page-branches .location-address {
    color: #161616;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
}

.contact-page-branches .contact-cta-section {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
    min-height: 124px;
    overflow: visible;
}

.contact-page-branches .contact-cta-content {
    position: relative;
    z-index: 6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 760px;
    max-width: 100%;
    gap: 24px;
}

.contact-page-branches .contact-cta-holo,
.contact-page-branches .contact-cta-section .markaworks-contact-floating-2 {
    position: absolute;
    left: auto;
    right: calc(760px + 20px);
    top: -40px;
    bottom: auto;
    width: 204px;
    height: 204px;
    margin: 0;
    flex-shrink: 0;
    opacity: 1;
    z-index: 5;
    pointer-events: none;
}

.contact-page-branches .contact-cta-title {
    color: #B8D432;
    font-size: 40px;
    font-weight: 600;
    line-height: 1.2;
    margin: 0;
    text-align: left;
    flex: 1 1 auto;
    white-space: nowrap;
}

.contact-page-branches .contact-cta-button {
    height: 48px;
    min-width: 240px;
    padding: 12px 36px;
    color: #0B4444;
    font-size: 24px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-page-branches .contact-cta-button:hover {
    background: #B8D432;
    transform: none;
    box-shadow: none;
}

.contact-page-branches .markaworks-contact-floating-1 {
    width: 354px;
    height: 354px;
    top: 60px;
    right: 40px;
    left: auto;
    bottom: auto;
    opacity: 0.95;
    z-index: 6;
}

@media (max-width: 1199px) {
    .contact-page-branches .contact-locations-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .contact-page-branches .contact-cta-title {
        font-size: 32px;
    }

    .contact-page-branches .contact-cta-holo,
    .contact-page-branches .contact-cta-section .markaworks-contact-floating-2 {
        width: 160px;
        height: 160px;
        right: calc(760px + 12px);
        top: -24px;
    }
}

@media (max-width: 768px) {
    .contact-page-branches.contact-locations-section {
        padding: 80px 16px;
    }

    .contact-page-branches .contact-locations-container {
        gap: 48px;
    }

    .contact-page-branches .contact-locations-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .contact-page-branches .location-icon,
    .contact-page-branches .contact-locations-grid .location-icon {
        width: 120px;
        height: 120px;
    }

    .contact-page-branches .location-title,
    .contact-page-branches .location-card[data-location] .location-title {
        font-size: 28px;
    }

    .contact-page-branches .contact-cta-section {
        justify-content: flex-start;
        min-height: 0;
    }

    .contact-page-branches .contact-cta-content {
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
        gap: 24px;
    }

    .contact-page-branches .contact-cta-title {
        font-size: 28px;
    }

    .contact-page-branches .contact-cta-button {
        height: 44px;
        min-width: 220px;
        font-size: 20px;
        padding: 10px 32px;
    }

    .contact-page-branches .markaworks-contact-floating-1,
    .contact-page-branches .contact-cta-section .markaworks-contact-floating-2 {
        display: none;
    }
}

.contact-page-faq.markaworks-faq {
    overflow: hidden;
}

.contact-page-faq .markaworks-faq-title,
.contact-page-faq .markaworks-faq-list {
    position: relative;
    z-index: 2;
}

.contact-page-faq .markaworks-faq-item {
    position: relative;
    z-index: 2;
    background: #F4F5F5;
}

.contact-page-faq .markaworks-faq-decoration {
    z-index: 0;
}

.contact-page-faq .markaworks-faq-decoration-left {
    width: 440px;
    height: 432px;
    left: -70px;
    top: 90px;
    bottom: auto;
}

.contact-page-faq .markaworks-faq-decoration-right {
    width: 340px;
    height: 334px;
    right: -60px;
    left: auto;
    top: auto;
    bottom: -40px;
}

@media (max-width: 1400px) {
    .contact-page-faq .markaworks-faq-decoration-left {
        width: 360px;
        height: 353px;
        left: -50px;
        top: 70px;
        bottom: auto;
    }

    .contact-page-faq .markaworks-faq-decoration-right {
        width: 280px;
        height: 274px;
        right: -40px;
        left: auto;
        top: auto;
        bottom: -30px;
    }
}

@media (max-width: 768px) {
    .contact-page-faq .markaworks-faq-decoration-left {
        left: -40px !important;
        top: 40px !important;
        bottom: auto !important;
    }

    .contact-page-faq .markaworks-faq-decoration-right {
        right: -36px !important;
        top: auto !important;
        bottom: -10px !important;
    }
}