/* ==========================================================================
   Signx - Integrated Studios: Fluid Auto-Scaling & Responsive Architecture
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Root Fluid Viewport Variables & Zero-Overflow Lockdown
   -------------------------------------------------------------------------- */
:root {
    /* Fluid Viewport Scale Factor */
    --vw-ratio: 1vw;
    --vh-ratio: 1vh;

    /* Fluid Typography Scale */
    --scale-h1: clamp(1.75rem, 3.5vw + 1rem, 5rem);
    --scale-h2: clamp(1.4rem, 2.2vw + 0.65rem, 3rem);
    --scale-h3: clamp(1.18rem, 1.5vw + 0.4rem, 2.1rem);
    --scale-h4: clamp(1.02rem, 1vw + 0.3rem, 1.55rem);
    --scale-h5: clamp(0.95rem, 0.6vw + 0.25rem, 1.25rem);
    --scale-h6: clamp(0.85rem, 0.4vw + 0.25rem, 1.08rem);
    --scale-body: clamp(0.9rem, 0.25vw + 0.82rem, 1.05rem);
    --scale-subtitle: clamp(10px, 0.2vw + 9.5px, 13px);

    /* Fluid Spacing Scale */
    --section-pad-y: clamp(40px, 5.5vw, 110px);
    --container-max-w: min(94vw, 1380px);
    --card-pad-lg: clamp(18px, 3vw, 44px);
    --card-pad-md: clamp(14px, 2.2vw, 28px);
    --card-pad-sm: clamp(10px, 1.5vw, 20px);
}

/* Zero Horizontal Overflow Lockdown */
html,
body,
#wrapper {
    max-width: 100% !important;
    overflow-x: clip !important;
    position: relative;
    width: 100%;
}

@supports not (overflow-x: clip) {
    html,
    body,
    #wrapper {
        overflow-x: hidden !important;
    }
}

/* --------------------------------------------------------------------------
   2. Fluid Container Auto-Scaling
   -------------------------------------------------------------------------- */
.container,
.container-lg,
.container-xl,
.container-xxl {
    max-width: var(--container-max-w);
    padding-left: clamp(14px, 2.5vw, 32px);
    padding-right: clamp(14px, 2.5vw, 32px);
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* --------------------------------------------------------------------------
   3. Fluid Typography Auto-Scaling
   -------------------------------------------------------------------------- */
h1,
.h1 {
    font-size: var(--scale-h1) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em;
    word-break: break-word;
}

h2,
.h2 {
    font-size: var(--scale-h2) !important;
    line-height: 1.18 !important;
    letter-spacing: -0.015em;
    word-break: break-word;
}

h3,
.h3 {
    font-size: var(--scale-h3) !important;
    line-height: 1.26 !important;
    letter-spacing: -0.01em;
    word-break: break-word;
}

h4,
.h4 {
    font-size: var(--scale-h4) !important;
    line-height: 1.32 !important;
    word-break: break-word;
}

h5,
.h5 {
    font-size: var(--scale-h5) !important;
    line-height: 1.38 !important;
    word-break: break-word;
}

h6,
.h6 {
    font-size: var(--scale-h6) !important;
    line-height: 1.42 !important;
    word-break: break-word;
}

p,
li,
label {
    font-size: var(--scale-body);
    word-break: break-word;
}

/* Fluid Utility Font Size Classes */
.fs-11 {
    font-size: clamp(0.68rem, 0.08vw + 0.64rem, 0.74rem) !important;
}

.fs-12 {
    font-size: clamp(0.72rem, 0.1vw + 0.68rem, 0.78rem) !important;
}

.fs-13 {
    font-size: clamp(0.76rem, 0.12vw + 0.72rem, 0.84rem) !important;
}

.fs-14 {
    font-size: clamp(0.82rem, 0.15vw + 0.78rem, 0.92rem) !important;
}

.fs-15 {
    font-size: clamp(0.86rem, 0.18vw + 0.8rem, 0.97rem) !important;
}

.fs-16 {
    font-size: clamp(0.92rem, 0.2vw + 0.82rem, 1.02rem) !important;
}

.fs-18 {
    font-size: clamp(0.98rem, 0.35vw + 0.82rem, 1.18rem) !important;
}

.fs-20 {
    font-size: clamp(1.05rem, 0.5vw + 0.8rem, 1.3rem) !important;
}

.fs-22 {
    font-size: clamp(1.1rem, 0.6vw + 0.8rem, 1.42rem) !important;
}

.fs-24 {
    font-size: clamp(1.2rem, 0.8vw + 0.8rem, 1.55rem) !important;
}

.fs-28 {
    font-size: clamp(1.3rem, 1.1vw + 0.8rem, 1.85rem) !important;
}

.fs-40 {
    font-size: clamp(1.75rem, 2.5vw + 0.8rem, 2.85rem) !important;
}

/* Hero Title Auto-Scaling */
.fs-sm-10vw,
h1.fs-sm-10vw {
    font-size: clamp(1.95rem, 5.5vw + 0.5rem, 6.2rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.02em;
    word-break: break-word;
}

.subtitle {
    font-size: var(--scale-subtitle) !important;
    letter-spacing: clamp(1.5px, 0.25vw, 3.5px) !important;
}

/* --------------------------------------------------------------------------
   4. Hero & Intro Section Auto-Scaling
   -------------------------------------------------------------------------- */
#section-intro {
    min-height: clamp(560px, calc(var(--vh, 1vh) * 85), 940px);
    display: flex;
    align-items: center;
}

#section-intro .mh-800 {
    min-height: clamp(560px, calc(var(--vh, 1vh) * 85), 940px) !important;
    width: 100%;
}

@media (max-width: 991px) {
    #section-intro {
        min-height: clamp(500px, calc(var(--vh, 1vh) * 78), 700px);
        padding-top: 100px;
        padding-bottom: 40px;
    }
    #section-intro .mh-800 {
        min-height: clamp(500px, calc(var(--vh, 1vh) * 78), 700px) !important;
    }
}

@media (max-width: 576px) {
    #section-intro {
        min-height: clamp(460px, calc(var(--vh, 1vh) * 75), 620px);
        padding-top: 85px;
    }
}

/* --------------------------------------------------------------------------
   5. Fluid Section Paddings & Spacing
   -------------------------------------------------------------------------- */
section {
    padding-top: var(--section-pad-y) !important;
    padding-bottom: var(--section-pad-y) !important;
}

section.no-top {
    padding-top: 0 !important;
}

section.no-bottom {
    padding-bottom: 0 !important;
}

section.py-5 {
    padding-top: clamp(35px, 4.5vw, 70px) !important;
    padding-bottom: clamp(35px, 4.5vw, 70px) !important;
}

/* Breadcrumbs / Subheader Auto-Scaling */
#subheader {
    padding: clamp(100px, 12vw, 180px) 0 clamp(40px, 5.5vw, 85px) 0 !important;
}

/* Spacers */
.spacer-double {
    height: clamp(30px, 4.5vw, 70px) !important;
}
.spacer-single {
    height: clamp(20px, 2.5vw, 40px) !important;
}
.spacer-10 {
    height: 10px !important;
}
.spacer-20 {
    height: 20px !important;
}

/* --------------------------------------------------------------------------
   6. Fluid Cards, Forms & Interactive Surfaces
   -------------------------------------------------------------------------- */
.p-40 {
    padding: var(--card-pad-lg) !important;
}

.p-30 {
    padding: var(--card-pad-md) !important;
}

.p-20 {
    padding: var(--card-pad-sm) !important;
}

/* Responsive Image Containers */
.hover-scale-1-2 {
    max-width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

/* Responsive Grid Heights */
@media (max-width: 767px) {
    .hover img[style*="height: 380px"],
    .hover img[style*="height: 360px"],
    .hover img[style*="height: 340px"] {
        height: clamp(240px, 60vw, 320px) !important;
    }
}

/* Form Controls Fluid Scaling */
.form-control,
.form-select,
textarea {
    font-size: clamp(14px, 0.3vw + 13.5px, 16px) !important;
    padding: clamp(10px, 1.2vw, 15px) clamp(12px, 1.5vw, 18px) !important;
}

.btn-main,
.btn-line {
    font-size: clamp(13px, 0.25vw + 12.5px, 15px) !important;
    padding: clamp(10px, 1.2vw, 14px) clamp(22px, 2.2vw, 36px) !important;
}

/* --------------------------------------------------------------------------
   7. Navigation & Header Auto-Scaling
   -------------------------------------------------------------------------- */
header .logo-main,
header .logo-scroll,
header .logo-mobile {
    max-height: clamp(38px, 4vw, 50px) !important;
    width: auto;
    object-fit: contain;
}

#mainmenu > li > a {
    font-size: clamp(13.5px, 0.25vw + 13px, 15px) !important;
    padding: clamp(18px, 2vw, 30px) clamp(10px, 1vw, 18px) !important;
}

@media (max-width: 991px) {
    #mainmenu {
        padding: 20px clamp(15px, 4vw, 35px) !important;
    }
    #mainmenu > li > a {
        padding: 12px 0 !important;
        font-size: 16px !important;
    }
}

/* --------------------------------------------------------------------------
   8. Ultra-Wide Display Scaling (4K, 2K, 1440p)
   -------------------------------------------------------------------------- */
@media (min-width: 1600px) {
    :root {
        --container-max-w: 1520px;
    }
    
    .container {
        max-width: 1520px !important;
    }

    .fs-sm-10vw,
    h1.fs-sm-10vw {
        font-size: 7.2rem !important;
    }
}

@media (min-width: 2560px) {
    :root {
        --container-max-w: 1800px;
    }

    .container {
        max-width: 1800px !important;
    }

    body {
        font-size: 1.15rem;
    }

    h1, .h1 {
        font-size: 5rem !important;
    }
    h2, .h2 {
        font-size: 3.5rem !important;
    }
}

/* --------------------------------------------------------------------------
   9. Service Section Auto-Scaling & Interactive Motion Scaling
   -------------------------------------------------------------------------- */
.service-card-scaling {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), box-shadow 0.4s ease, border-color 0.4s ease;
    will-change: transform;
    border-radius: 4px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body:not(.dark-scheme) .service-card-scaling {
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.service-card-scaling:hover {
    transform: translateY(-8px) scale(1.025);
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.45) !important;
    border-color: var(--signx-gold, #ff6b00) !important;
    z-index: 5;
}

body:not(.dark-scheme) .service-card-scaling:hover {
    box-shadow: 0 24px 45px rgba(0, 0, 0, 0.18) !important;
}

.service-card-scaling .hover-scale-1-2 {
    transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    transform-origin: center center;
}

.service-card-scaling:hover .hover-scale-1-2 {
    transform: scale(1.1) !important;
}

.service-card-scaling .up-right-arrow,
.service-card-scaling img[src*="up-right-arrow"] {
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.3s ease;
    transform-origin: top right;
}

.service-card-scaling:hover .up-right-arrow,
.service-card-scaling:hover img[src*="up-right-arrow"] {
    transform: translate(3px, -3px) scale(1.18);
    opacity: 1 !important;
}

/* Fluid responsive height scaling for service cards across all viewports */
.service-card-img-wrap {
    height: clamp(340px, 26vw + 100px, 460px);
    position: relative;
    overflow: hidden;
}

.service-card-img-wrap img,
.service-card-img-wrap video {
    height: 100% !important;
    width: 100%;
    object-fit: cover;
}

/* Service Card Typography & Content Arrangement */
.service-card-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 0.98) 0%,
        rgba(10, 12, 16, 0.88) 38%,
        rgba(10, 12, 16, 0.52) 68%,
        rgba(10, 12, 16, 0.18) 85%,
        transparent 100%
    );
    z-index: 2;
    transition: background 0.4s ease;
    pointer-events: none;
}

.service-card-scaling:hover .service-card-scrim {
    background: linear-gradient(
        to top,
        rgba(10, 12, 16, 1) 0%,
        rgba(10, 12, 16, 0.93) 42%,
        rgba(10, 12, 16, 0.62) 72%,
        rgba(10, 12, 16, 0.28) 90%,
        transparent 100%
    );
}

.service-card-content {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: clamp(16px, 2.2vw, 26px);
    z-index: 4;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
}

.service-meta-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: clamp(11px, 0.85vw, 12.5px);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-weight: 600;
    max-width: 100%;
    overflow: hidden;
}

.service-index-num {
    color: var(--signx-gold, #ff6b00);
    font-family: monospace, sans-serif;
    font-size: 1.15em;
    font-weight: 700;
    flex-shrink: 0;
}

.service-sep {
    color: rgba(255, 255, 255, 0.35);
    flex-shrink: 0;
}

.service-cat-name {
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    flex: 1 1 auto;
}

.service-card-title {
    font-size: clamp(17px, 1.2vw + 3px, 23px) !important;
    font-weight: 600;
    line-height: 1.25;
    color: #ffffff !important;
    margin-bottom: 8px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
    transition: color 0.3s ease;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.service-card-scaling:hover .service-card-title {
    color: var(--signx-gold, #ff6b00) !important;
}

.service-card-desc {
    font-size: clamp(12.5px, 0.85vw + 1px, 14px) !important;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78) !important;
    margin-bottom: 12px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.service-card-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--signx-gold, #ff6b00);
}

.service-card-action .action-arrow {
    transition: transform 0.3s ease;
    font-size: 15px;
}

.service-card-scaling:hover .service-card-action .action-arrow {
    transform: translateX(5px);
}

/* Service Scope Scale Slider & Buttons */
.scale-tier-btn {
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: transparent;
    color: var(--signx-text-body-dark, #cbd5e1);
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 4px;
    transition: all 0.25s ease;
    cursor: pointer;
}

body:not(.dark-scheme) .scale-tier-btn {
    border-color: rgba(0, 0, 0, 0.12);
    color: #495057;
    background: #f8f9fa;
}

.scale-tier-btn:hover,
.scale-tier-btn.active {
    border-color: var(--signx-gold, #ff6b00) !important;
    background: var(--signx-gold, #ff6b00) !important;
    color: #0c0e12 !important;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(197, 168, 128, 0.35);
}

.scope-scale-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.15);
    outline: none;
    transition: background 0.2s;
}

body:not(.dark-scheme) .scope-scale-slider {
    background: #dee2e6;
}

.scope-scale-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--signx-gold, #ff6b00);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(197, 168, 128, 0.6);
    border: 2px solid #ffffff;
}

.scope-scale-slider::-moz-range-thumb {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--signx-gold, #ff6b00);
    cursor: pointer;
    box-shadow: 0 0 10px rgba(197, 168, 128, 0.6);
    border: 2px solid #ffffff;
}

/* --------------------------------------------------------------------------
   10. Universal Column Text Framing, Grid Containment & Anti-Overflow
   -------------------------------------------------------------------------- */
/* Universal column boundaries: prevent flex children from blowing out grid cells */
.row > [class*="col-"],
.row > .col,
.row > .col-auto,
[class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Universal text framing inside columns: prevent long words, URLs, headings from spilling out */
[class*="col-"] h1, [class*="col-"] .h1,
[class*="col-"] h2, [class*="col-"] .h2,
[class*="col-"] h3, [class*="col-"] .h3,
[class*="col-"] h4, [class*="col-"] .h4,
[class*="col-"] h5, [class*="col-"] .h5,
[class*="col-"] h6, [class*="col-"] .h6,
[class*="col-"] p,
[class*="col-"] .lead,
[class*="col-"] span,
[class*="col-"] a,
[class*="col-"] li,
[class*="col-"] label,
[class*="col-"] blockquote,
h1, h2, h3, h4, h5, h6,
.subtitle, .de_count,
.card-title, .card-text,
.widget h5, .widget h6, .widget p,
p, blockquote, q,
.fst-italic {
    overflow-wrap: break-word !important;
    word-wrap: break-word !important;
    white-space: normal !important;
    min-width: 0;
    box-sizing: border-box;
}

/* Card Framing & Text Containment */
.service-highlight-box,
.service-plugin-card,
.scope-service-card,
.plugin-card-wrapper,
.service-custom-card,
.service-card-scaling,
.studio-pillar-column,
.studio-description-console,
.blog-post-card,
.scope-summary-card,
.card,
.widget,
.scope-plugin-label,
.p-40,
.testimonial-card {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden;
}

.p-40,
.testimonial-card {
    padding: clamp(20px, 3vw, 40px) !important;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.p-40 p,
.testimonial-card p,
.fst-italic {
    white-space: normal !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    line-height: 1.65;
    min-width: 0 !important;
    max-width: 100% !important;
}

.service-highlight-box span,
.service-plugin-card p,
.service-plugin-card h4,
.service-plugin-card h5,
.service-plugin-card h6,
.service-plugin-card li,
.service-plugin-card span,
.service-card-title,
.service-card-desc,
.studio-console-title,
.studio-console-subtitle,
.studio-console-desc,
.studio-pillar-name,
.studio-pillar-sub,
.scope-service-card h6,
.scope-service-card small,
.scope-plugin-label strong,
.scope-plugin-label p {
    min-width: 0 !important;
    max-width: 100% !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
}

/* Framed Badges: never exceed column width */
.badge {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    word-break: break-word;
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
}

/* Service card scale badge framing: never overlaps top-right action arrow */
.service-card-scaling .abs.top-0.start-0 {
    max-width: calc(100% - 65px) !important;
    box-sizing: border-box;
}

.service-card-scaling .abs.top-0.start-0 .badge {
    max-width: 100%;
    white-space: normal;
    word-break: break-word;
    text-align: left;
}

/* Framed Flex Lists & Process Rows */
.d-flex {
    min-width: 0;
    white-space: normal !important;
}

.de-marquee .d-flex,
.de-marquee-list {
    white-space: nowrap !important;
}

.d-flex > * {
    min-width: 0;
}

/* Preserve natural icon and control footprints */
.flex-shrink-0,
.step-pill,
.plugin-icon-wrap,
.studio-service-icon-box,
.service-index-num,
.service-sep,
.up-right-arrow,
i[class*="icofont-"],
.btn-close {
    flex-shrink: 0 !important;
}

/* Absolute Overlays Pinned & Framed to Column Boundaries */
.abs.w-100 {
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

.abs.bottom-0.w-100 {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Framed Action Buttons & Controls */
.service-custom-card .btn,
.service-plugin-card .btn,
.service-plugin-card .btn-line,
.studio-console-actions .btn,
.btn-studio-orange,
.btn-studio-outline {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: break-word !important;
    min-width: 0;
}

/* Studio deliverable chips framing */
.studio-deliverable-chip {
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

/* Service Card Meta Label Framing */
.service-meta-label {
    min-width: 0 !important;
    max-width: 100%;
    overflow: hidden;
}

.service-cat-name {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Scope summary card dynamic items framing */
#summary-plugins-list li {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

#summary-plugins-list li > div {
    min-width: 0 !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
}

/* --------------------------------------------------------------------------
   11. Service Section Layout, Structured Grid & Custom Commission Card
   -------------------------------------------------------------------------- */
.service-custom-card {
    min-height: clamp(340px, 26vw + 100px, 460px);
    background: linear-gradient(145deg, #141822 0%, #0d0f14 100%);
    border: 1px solid rgba(255, 107, 0, 0.35);
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: clamp(20px, 2.5vw, 30px);
    box-sizing: border-box;
    transition: all 0.35s cubic-bezier(0.165, 0.84, 0.44, 1);
    max-width: 100%;
    overflow: hidden;
}

.service-custom-card .service-card-title,
.service-custom-card .service-card-desc {
    max-width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
}

.service-card-scaling.service-custom-card:hover {
    border-color: var(--signx-gold, #ff6b00);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.45), 0 0 25px rgba(197, 168, 128, 0.2);
    transform: translateY(-8px) scale(1.015);
}

.service-filter-btn {
    transition: all 0.25s ease;
    font-weight: 500;
}

.service-filter-btn.active {
    background: var(--signx-gold, #ff6b00) !important;
    border-color: var(--signx-gold, #ff6b00) !important;
    color: #0c0e12 !important;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(197, 168, 128, 0.35);
}

.service-card-col {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* --------------------------------------------------------------------------
   12. Service Section Master Graphic & Capabilities Matrix Showcase
   -------------------------------------------------------------------------- */
.service-matrix-showcase-card {
    transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45);
}

.service-matrix-showcase-card:hover {
    border-color: var(--signx-gold, #ff6b00) !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6), 0 0 25px rgba(197, 168, 128, 0.2) !important;
}

.service-matrix-img-container {
    cursor: pointer;
    background: #07090c;
}

.service-matrix-img {
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

.service-matrix-img-container:hover .service-matrix-img {
    transform: scale(1.02);
}

.service-matrix-expand-overlay {
    opacity: 0;
    background: rgba(10, 12, 16, 0.5);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.service-matrix-img-container:hover .service-matrix-expand-overlay {
    opacity: 1;
}

/* --------------------------------------------------------------------------
   13. Interactive 4-Pillar Services Matrix & Live Description Explorer
   -------------------------------------------------------------------------- */
:root {
    --studio-orange: #ff6b00;
    --studio-orange-glow: rgba(255, 107, 0, 0.4);
    --studio-orange-subtle: rgba(255, 107, 0, 0.12);
    --studio-dark-base: #08090d;
    --studio-dark-card: #0f1218;
    --studio-dark-elevated: #151922;
}

.studio-services-master-wrap {
    position: relative;
    background: radial-gradient(circle at 50% 0%, rgba(255, 107, 0, 0.08) 0%, transparent 70%), #08090d;
    border-radius: 12px;
    padding: clamp(16px, 2.5vw, 32px);
    border: 1px solid rgba(255, 107, 0, 0.25);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 107, 0, 0.08);
    overflow: hidden;
}

/* Header with Studio Glow */
.studio-services-header {
    text-align: center;
    position: relative;
    padding-bottom: 24px;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-services-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 50%;
    transform: translateX(-50%);
    width: 140px;
    height: 3px;
    background: linear-gradient(90deg, transparent, #ff6b00, transparent);
    box-shadow: 0 0 12px #ff6b00;
}

.studio-main-title {
    font-size: clamp(28px, 3.5vw + 10px, 48px);
    font-weight: 900;
    letter-spacing: 2px;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.1;
    margin-bottom: 6px;
}

.studio-main-title .orange-word {
    color: #ff6b00;
    text-shadow: 0 0 25px rgba(255, 107, 0, 0.55);
}

.studio-sub-badge {
    display: inline-block;
    font-size: clamp(11px, 0.85vw, 13px);
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 600;
}

/* Navigation Tabs */
.studio-pillar-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin-bottom: 32px;
}

.studio-pillar-tab-btn {
    background: rgba(255, 255, 255, 0.05);
    color: #e2e8f0;
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 10px 22px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.studio-pillar-tab-btn:hover {
    background: rgba(255, 107, 0, 0.15);
    border-color: rgba(255, 107, 0, 0.45);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 107, 0, 0.2);
}

.studio-pillar-tab-btn.active {
    background: #ff6b00 !important;
    border-color: #ff6b00 !important;
    color: #08090d !important;
    box-shadow: 0 4px 20px rgba(255, 107, 0, 0.5) !important;
    transform: translateY(-2px);
}

/* 4-Pillar Matrix Grid (Matching the Graphic) */
.studio-matrix-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 32px;
}

@media (max-width: 1199px) {
    .studio-matrix-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .studio-matrix-grid {
        grid-template-columns: 1fr;
    }
}

/* Pillar Column Card */
.studio-pillar-column {
    background: #0f1218;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease;
    position: relative;
}

.studio-pillar-column:hover {
    border-color: rgba(255, 107, 0, 0.45);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px rgba(255, 107, 0, 0.15);
    transform: translateY(-4px);
}

.studio-pillar-column-active {
    border-color: #ff6b00 !important;
    box-shadow: 0 0 25px rgba(255, 107, 0, 0.25) !important;
}

/* Pillar Card Image Banner */
.studio-pillar-banner-wrap {
    height: 180px;
    position: relative;
    overflow: hidden;
    background: #07080a;
}

.studio-pillar-banner-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.studio-pillar-column:hover .studio-pillar-banner-img {
    transform: scale(1.08);
}

.studio-pillar-scrim {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, #0f1218 0%, rgba(15, 18, 24, 0.6) 50%, rgba(15, 18, 24, 0.2) 100%);
    pointer-events: none;
}

.studio-pillar-title-wrap {
    padding: 18px 18px 12px 18px;
    position: relative;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.studio-pillar-title-wrap::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 18px;
    width: 48px;
    height: 2px;
    background: #ff6b00;
}

.studio-pillar-name {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: 1px;
    color: #ffffff;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.studio-pillar-sub {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Pillar Service Items List */
.studio-pillar-items-list {
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-grow: 1;
}

.studio-service-item-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    color: #cbd5e1;
    font-size: 13.5px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: left;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    min-width: 0;
}

.studio-service-item-btn:hover {
    background: rgba(255, 107, 0, 0.12);
    border-color: rgba(255, 107, 0, 0.35);
    color: #ffffff;
}

.studio-service-item-btn.selected {
    background: linear-gradient(90deg, rgba(255, 107, 0, 0.24) 0%, rgba(255, 107, 0, 0.08) 100%) !important;
    border-color: #ff6b00 !important;
    color: #ffffff !important;
    box-shadow: 0 0 14px rgba(255, 107, 0, 0.35);
}

.studio-service-icon-box {
    width: 28px;
    height: 28px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ff6b00;
    font-size: 15px;
    flex-shrink: 0;
    background: rgba(255, 107, 0, 0.1);
    transition: all 0.25s ease;
}

.studio-service-item-btn:hover .studio-service-icon-box,
.studio-service-item-btn.selected .studio-service-icon-box {
    background: #ff6b00;
    color: #08090d;
    box-shadow: 0 0 8px rgba(255, 107, 0, 0.6);
}

.studio-service-item-title {
    flex: 1 1 auto;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: transform 0.2s ease;
}

.studio-service-item-btn:hover .studio-service-item-title,
.studio-service-item-btn.selected .studio-service-item-title {
    transform: translateX(3px);
}

.studio-service-item-arrow {
    font-size: 12px;
    opacity: 0.4;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.studio-service-item-btn:hover .studio-service-item-arrow,
.studio-service-item-btn.selected .studio-service-item-arrow {
    opacity: 1;
    color: #ff6b00;
    transform: translateX(2px);
}

/* ==========================================================================
   LIVE DESCRIPTION & SCOPE CONSOLE (The Description Part)
   ========================================================================== */
.studio-description-console {
    background: #0d1016;
    border: 1px solid rgba(255, 107, 0, 0.35);
    border-radius: 12px;
    padding: clamp(20px, 2.5vw, 32px);
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0.65), 0 0 30px rgba(255, 107, 0, 0.12);
    position: relative;
    animation: studioConsoleReveal 0.4s cubic-bezier(0.165, 0.84, 0.44, 1) forwards;
}

@keyframes studioConsoleReveal {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.studio-console-header-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 4px;
    background: rgba(255, 107, 0, 0.15);
    border: 1px solid rgba(255, 107, 0, 0.35);
    color: #ff6b00;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 12px;
}

.studio-console-title {
    font-size: clamp(24px, 2vw + 8px, 34px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.2;
    margin-bottom: 6px;
}

.studio-console-subtitle {
    font-size: clamp(13px, 0.9vw, 15px);
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 20px;
    font-weight: 500;
}

.studio-console-desc {
    font-size: clamp(14px, 0.95vw + 1px, 16px);
    line-height: 1.7;
    color: #cbd5e1;
    margin-bottom: 24px;
}

/* Deliverables & Highlights Grid */
.studio-console-section-title {
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #ff6b00;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.studio-deliverable-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 7px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 6px;
    color: #e2e8f0;
    font-size: 12.5px;
    font-weight: 500;
    transition: all 0.2s ease;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
}

.studio-deliverable-chip:hover {
    background: rgba(255, 107, 0, 0.1);
    border-color: rgba(255, 107, 0, 0.3);
    color: #ffffff;
}

.studio-deliverable-chip i {
    color: #ff6b00;
    font-size: 14px;
}

/* Action Bar in Console */
.studio-console-actions {
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

.btn-studio-orange {
    background: #ff6b00;
    color: #08090d !important;
    font-weight: 700;
    letter-spacing: 0.5px;
    padding: 12px 28px;
    border-radius: 6px;
    border: 1px solid #ff6b00;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 18px rgba(255, 107, 0, 0.4);
    text-decoration: none;
}

.btn-studio-orange:hover {
    background: #ff7f1f;
    box-shadow: 0 6px 24px rgba(255, 107, 0, 0.6);
    transform: translateY(-2px);
    color: #000000 !important;
}

.btn-studio-outline {
    background: transparent;
    color: #ffffff !important;
    font-weight: 600;
    padding: 12px 24px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-studio-outline:hover {
    border-color: #ff6b00;
    color: #ff6b00 !important;
    background: rgba(255, 107, 0, 0.08);
    transform: translateY(-2px);
}

/* ==========================================================================
   14. Comprehensive Device & Multi-Viewport Scaling Architecture
       (Ultra-Wide, Laptops, Tablets, Large Phablets & Mobile Phones 320px–1440px+)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Global Mobile & Touch Ergonomics
   -------------------------------------------------------------------------- */
/* Eliminate 300ms tap delay on mobile touchscreens */
button,
a,
input,
select,
textarea,
.btn,
.service-filter-btn,
.plugin-filter-btn,
.scale-tier-btn,
.studio-pillar-tab-btn,
.studio-service-item-btn {
    touch-action: manipulation;
}

/* Focus visibility for accessible keyboard & touch navigation */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #ff6b00 !important;
    outline-offset: 2px !important;
}

/* Prevent iOS WebKit auto-zooming on input focus (requires computed font-size >= 16px) */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="date"],
    input[type="time"],
    input[type="search"],
    input[type="password"],
    select,
    textarea,
    .form-control,
    .form-select {
        font-size: 16px !important;
    }
}

/* Smooth Touch Scrolling with momentum */
.studio-pillar-nav,
.table-responsive,
#mainmenu,
.service-filter-btn-row {
    -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   B. Desktop & Laptop Tiers (992px to 1440px+)
   -------------------------------------------------------------------------- */
/* Large Desktops & 15"-17" Laptops (>= 1200px) */
@media (min-width: 1200px) {
    .studio-matrix-grid {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 18px !important;
    }

    .studio-pillar-banner-wrap {
        height: 175px !important;
    }

    .studio-description-console {
        padding: 32px 36px !important;
    }

    /* Keep the consultation scope configurator summary pinned cleanly */
    .scope-summary-card.sticky-top {
        top: 96px !important;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
}

/* Compact Laptops & Netbooks (992px to 1199px) */
@media (min-width: 992px) and (max-width: 1199px) {
    .container {
        max-width: 960px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    #mainmenu > li > a {
        padding: 22px 10px !important;
        font-size: 13px !important;
    }

    .studio-matrix-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 18px !important;
    }

    .studio-pillar-banner-wrap {
        height: 160px !important;
    }

    .studio-description-console {
        padding: 26px !important;
    }

    .service-card-img-wrap {
        height: 320px !important;
    }
}

/* --------------------------------------------------------------------------
   C. Tablet Viewports (768px to 991px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 991px) {
    .container {
        max-width: 720px !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* Subheader banner auto-scaling */
    #subheader {
        padding: clamp(90px, 12vw, 125px) 0 clamp(35px, 5vw, 60px) 0 !important;
    }

    /* Hero section proportion */
    #section-intro {
        min-height: 520px !important;
        padding-top: 110px !important;
    }

    /* 4-Pillar Matrix 2-Column Balanced Grid */
    .studio-matrix-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 16px !important;
    }

    .studio-pillar-banner-wrap {
        height: 155px !important;
    }

    /* Description Console Stacking */
    .studio-description-console {
        padding: 24px !important;
    }

    /* Scope Configurator Un-pinning */
    .scope-summary-card.sticky-top {
        position: relative !important;
        top: 0 !important;
        margin-top: 24px;
        max-height: none !important;
    }

    /* Service card image wrap */
    .service-card-img-wrap {
        height: 300px !important;
    }

    /* Metric counter numbers */
    .de_count h3.fs-40 {
        font-size: clamp(2rem, 3.8vw, 2.5rem) !important;
    }
}

/* --------------------------------------------------------------------------
   D. Mobile Phones & Touch Screens General (<= 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Strict Horizontal Overflow Lockdown */
    html,
    body,
    #wrapper,
    section,
    .container,
    .row {
        max-width: 100% !important;
        overflow-x: clip !important;
    }

    /* Mobile Container Padding */
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: clamp(12px, 3.5vw, 20px) !important;
        padding-right: clamp(12px, 3.5vw, 20px) !important;
    }

    /* Section Spacing on Mobile */
    section {
        padding-top: clamp(40px, 6vw, 65px) !important;
        padding-bottom: clamp(40px, 6vw, 65px) !important;
    }

    section.py-5,
    section.pt-5,
    section.pb-5 {
        padding-top: 35px !important;
        padding-bottom: 35px !important;
    }

    /* Subheader banner on Mobile */
    #subheader {
        padding: clamp(85px, 14vw, 115px) 0 clamp(25px, 5vw, 45px) 0 !important;
    }

    /* Metric Counters 2x2 Clean Mobile Grid */
    .row > .col-md-3.col-sm-6 {
        width: 50% !important;
        margin-bottom: 18px;
    }

    .de_count {
        padding: 14px 8px;
        text-align: center;
    }

    .de_count h3.fs-40 {
        font-size: clamp(1.8rem, 6vw, 2.4rem) !important;
        margin-bottom: 4px !important;
    }

    /* =========================================================================
       Studio 4-Pillar Matrix Mobile Architecture
       ========================================================================= */
    .studio-services-master-wrap {
        padding: clamp(14px, 3vw, 22px) !important;
        border-radius: 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .studio-services-header {
        padding-bottom: 18px !important;
        margin-bottom: 20px !important;
    }

    .studio-main-title {
        font-size: clamp(22px, 6.8vw, 32px) !important;
        letter-spacing: 1px !important;
    }

    .studio-sub-badge {
        font-size: 11px !important;
        letter-spacing: 2px !important;
    }

    /* Horizontal Swipe Nav Tabs with Touch Momentum */
    .studio-pillar-nav {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory;
        gap: 8px !important;
        padding: 4px 2px 12px 2px !important;
        margin-bottom: 20px !important;
        justify-content: flex-start !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 107, 0, 0.4) transparent;
    }

    .studio-pillar-nav::-webkit-scrollbar {
        height: 4px;
    }

    .studio-pillar-nav::-webkit-scrollbar-thumb {
        background: rgba(255, 107, 0, 0.4);
        border-radius: 4px;
    }

    .studio-pillar-tab-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
        padding: 9px 16px !important;
        font-size: 12px !important;
        border-radius: 5px !important;
        min-height: 40px;
    }

    /* Single Column Stacked Matrix Cards on Mobile */
    .studio-matrix-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        margin-bottom: 24px !important;
    }

    .studio-pillar-column {
        border-radius: 8px !important;
    }

    .studio-pillar-banner-wrap {
        height: 145px !important;
    }

    .studio-pillar-title-wrap {
        padding: 14px 16px 10px 16px !important;
    }

    .studio-pillar-name {
        font-size: 16px !important;
    }

    .studio-pillar-sub {
        font-size: 10.5px !important;
    }

    .studio-pillar-items-list {
        padding: 10px 12px !important;
        gap: 7px !important;
    }

    /* Touch-friendly Service Button Targets */
    .studio-service-item-btn {
        padding: 11px 13px !important;
        min-height: 46px !important;
        font-size: 13px !important;
        gap: 10px !important;
    }

    .studio-service-icon-box {
        width: 26px !important;
        height: 26px !important;
        font-size: 13.5px !important;
    }

    .studio-service-item-title {
        font-size: 13px !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Live Description Console on Mobile */
    .studio-description-console {
        padding: clamp(16px, 3.5vw, 24px) !important;
        border-radius: 8px !important;
    }

    .studio-console-title {
        font-size: clamp(20px, 5.5vw, 26px) !important;
        margin-bottom: 4px !important;
    }

    .studio-console-subtitle {
        font-size: 12.5px !important;
        margin-bottom: 14px !important;
    }

    .studio-console-desc {
        font-size: 13.5px !important;
        line-height: 1.6 !important;
        margin-bottom: 18px !important;
    }

    .studio-deliverable-chip {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
        gap: 6px !important;
    }

    .studio-deliverable-chip i {
        font-size: 12.5px !important;
    }

    /* Full-width Responsive Action Buttons in Console */
    .studio-console-actions {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        margin-top: 20px !important;
        padding-top: 16px !important;
    }

    .btn-studio-orange,
    .btn-studio-outline {
        width: 100% !important;
        justify-content: center !important;
        text-align: center !important;
        padding: 12px 18px !important;
        font-size: 13.5px !important;
        min-height: 46px;
    }

    /* =========================================================================
       Discipline Filter Tabs & Service Cards on Mobile
       ========================================================================= */
    /* Horizontal Swipe for Discipline Filter Buttons */
    .service-filter-btn-container,
    .plugin-filter-btn-container,
    div:has(> .service-filter-btn),
    div:has(> .plugin-filter-btn) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-snap-type: x mandatory;
        gap: 6px !important;
        padding: 2px 2px 10px 2px !important;
        scrollbar-width: thin;
        scrollbar-color: rgba(255, 107, 0, 0.4) transparent;
    }

    .service-filter-btn,
    .plugin-filter-btn {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
        scroll-snap-align: start;
        padding: 8px 14px !important;
        font-size: 12px !important;
        min-height: 38px;
    }

    /* Service Cards (Cards 01 to 08) Responsive Height */
    .service-card-img-wrap {
        height: clamp(230px, 55vw, 290px) !important;
    }

    .service-card-content {
        padding: 16px !important;
    }

    .service-card-title {
        font-size: clamp(17px, 4.5vw, 21px) !important;
        margin-bottom: 6px !important;
    }

    .service-card-desc {
        font-size: 12.5px !important;
        line-height: 1.55 !important;
        margin-bottom: 10px !important;
    }

    .service-meta-label {
        font-size: 11px !important;
    }

    .service-cat-name {
        max-width: clamp(140px, 40vw, 200px) !important;
    }

    /* Card 08: Bespoke Architectural Scope & Configurator */
    .service-custom-card {
        padding: 18px !important;
        min-height: auto !important;
    }

    /* Scope Configurator on Mobile */
    .scope-summary-card.sticky-top {
        position: relative !important;
        top: 0 !important;
        margin-top: 20px;
    }

    .scale-tier-btn {
        padding: 8px 12px !important;
        font-size: 12px !important;
        min-height: 40px;
    }

    .scope-scale-slider::-webkit-slider-thumb {
        width: 24px !important;
        height: 24px !important;
    }

    .scope-scale-slider::-moz-range-thumb {
        width: 24px !important;
        height: 24px !important;
    }

    /* Capabilities Matrix Table on Mobile */
    .capabilities-matrix-table th,
    .capabilities-matrix-table td {
        padding: 10px 12px !important;
        font-size: 12.5px !important;
    }

    /* Modal Dialogs on Mobile */
    .modal-dialog {
        margin: 10px !important;
    }

    .modal-body {
        padding: 8px !important;
    }

    .modal-body img {
        max-height: 72vh !important;
    }

    /* Footer on Mobile */
    footer {
        padding-top: 45px !important;
    }

    .subfooter {
        padding: 16px 0 !important;
        text-align: center;
    }

    .subfooter .text-md-end {
        text-align: center !important;
        margin-top: 8px;
    }
}

/* --------------------------------------------------------------------------
   E. Standard Mobile Phones (375px to 575px)
   -------------------------------------------------------------------------- */
@media (max-width: 575px) {
    /* Hero Section Responsive Layout */
    #section-intro {
        min-height: clamp(440px, 80vh, 580px) !important;
        padding-top: 85px !important;
        padding-bottom: 30px !important;
    }

    #section-intro .mh-800 {
        min-height: clamp(440px, 80vh, 580px) !important;
    }

    /* Hero Text Auto-Scaling */
    .fs-sm-10vw,
    h1.fs-sm-10vw {
        font-size: clamp(1.85rem, 8vw, 2.35rem) !important;
        line-height: 1.08 !important;
        letter-spacing: -0.015em !important;
        margin-bottom: 8px !important;
    }

    #section-intro p.fs-18 {
        font-size: 14px !important;
        line-height: 1.6 !important;
    }

    /* Hero Buttons Responsive Stack */
    #section-intro .mt-4.wow.fadeInUp {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    #section-intro .mt-4.wow.fadeInUp .btn-main,
    #section-intro .mt-4.wow.fadeInUp .btn-line {
        width: 100% !important;
        text-align: center !important;
        margin-right: 0 !important;
        padding: 12px 20px !important;
        justify-content: center !important;
    }

    /* Header Logo & Actions */
    header .logo-main,
    header .logo-scroll,
    header .logo-mobile {
        max-height: 38px !important;
        max-width: 125px !important;
    }

    .menu_side_area .btn-main {
        padding: 6px 12px !important;
        font-size: 11.5px !important;
    }

    /* Custom Scope Card (Card 08) Action Buttons */
    .service-custom-card .d-flex.flex-wrap.gap-2.align-items-center.justify-content-between {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
    }

    .service-custom-card .d-flex.flex-wrap.gap-2.align-items-center.justify-content-between a {
        width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
    }

    /* Consultation CTA Banner */
    .bg-color.text-light.pt-5.pb-5 .row {
        text-align: center;
    }

    .bg-color.text-light.pt-5.pb-5 .btn-main {
        width: 100% !important;
        margin-top: 14px;
        text-align: center !important;
    }
}

/* --------------------------------------------------------------------------
   F. Compact & Smallest Mobile Phones (320px to 374px - iPhone SE & Small Devices)
   -------------------------------------------------------------------------- */
@media (max-width: 374px) {
    /* Strict Micro-Viewport Container Protection */
    .container,
    .container-lg,
    .container-xl,
    .container-xxl {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Scaled Compact Typography */
    h1, .h1 {
        font-size: 1.65rem !important;
    }

    h2, .h2 {
        font-size: 1.35rem !important;
    }

    h3, .h3 {
        font-size: 1.15rem !important;
    }

    h4, .h4 {
        font-size: 1.0rem !important;
    }

    .fs-sm-10vw,
    h1.fs-sm-10vw {
        font-size: 1.65rem !important;
        line-height: 1.1 !important;
    }

    .studio-main-title {
        font-size: 20px !important;
    }

    .studio-sub-badge {
        font-size: 9.5px !important;
        letter-spacing: 1.5px !important;
    }

    /* Studio Matrix Compact Micro Rules */
    .studio-services-master-wrap {
        padding: 10px !important;
    }

    .studio-pillar-tab-btn {
        padding: 7px 12px !important;
        font-size: 11px !important;
    }

    .studio-service-item-btn {
        padding: 8px 10px !important;
        font-size: 12px !important;
        gap: 7px !important;
        min-height: 42px !important;
    }

    .studio-service-icon-box {
        width: 24px !important;
        height: 24px !important;
        font-size: 12px !important;
    }

    .studio-service-item-arrow {
        font-size: 10px !important;
    }

    .studio-description-console {
        padding: 12px !important;
    }

    .studio-console-title {
        font-size: 18px !important;
    }

    .studio-console-desc {
        font-size: 12.5px !important;
    }

    .studio-deliverable-chip {
        padding: 4px 8px !important;
        font-size: 10.5px !important;
    }

    .btn-studio-orange,
    .btn-studio-outline {
        padding: 10px 14px !important;
        font-size: 12.5px !important;
    }

    /* Quick Scale Tier Buttons in Scope Configurator */
    .scale-tier-btn {
        width: 100% !important;
        text-align: center !important;
        font-size: 11.5px !important;
        padding: 7px 10px !important;
    }

    /* Metric Counters */
    .de_count h3.fs-40 {
        font-size: 1.6rem !important;
    }

    .de_count {
        font-size: 11.5px !important;
    }

    /* Header adjustments */
    .menu_side_area .btn-main span {
        font-size: 11px !important;
    }
}

/* --------------------------------------------------------------------------
   G. Mobile Landscape Orientation (< 500px height)
   -------------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
    #section-intro {
        min-height: 400px !important;
        padding-top: 75px !important;
        padding-bottom: 25px !important;
    }

    #section-intro .mh-800 {
        min-height: 400px !important;
    }

    .studio-pillar-banner-wrap {
        height: 120px !important;
    }
}

/* --------------------------------------------------------------------------
   H. Universal Autoplay Video Element Styles
   -------------------------------------------------------------------------- */
video.signx-auto-video {
    object-fit: cover;
    pointer-events: none; /* Allows click events to bubble to parent anchor / container */
    display: block;
    width: 100%;
    background-color: #07090c;
}

/* When a video is in an interactive container (like modal or has controls) */
video.signx-auto-video[controls],
.interactive-media video.signx-auto-video,
.modal video.signx-auto-video {
    pointer-events: auto !important;
}

/* Card scaled image containers with video */
.service-card-img-wrap video.signx-auto-video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}