/* =========================================================================
   Shiverex Agency — assets/css/style.css (Phase 3 Optimized Master Build)
   Crystal iOS Liquid Glass Optics, Clean Specificity, Fixed Ratios,
   Disabled Navigation State, Universal Transparency & 3-Card Desktop Carousel
   ========================================================================= */

/* Local Vazirmatn Font Face Integration */
@font-face {
    font-family: "Vazirmatn";
    src: url("../fonts/Vazirmatn[wght].woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

/* -------------------------------------------------------------------------
   1. Design Tokens & Liquid Glass Hardcoded Variables
   ------------------------------------------------------------------------- */
:root {
    /* Crystal Clear iOS Liquid Glass (Low blur, ultra-light tint, multi-layered specular highlights) */
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.04) 100%);
    --glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.24) 0%, rgba(255, 255, 255, 0.08) 100%);
    --glass-border: transparent;
    --glass-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.8), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.2), 0 12px 32px 0 rgba(0, 0, 0, 0.06);
    --glass-blur: 6px;
    --glass-text: var(--box-text-glass, var(--text));
    --icon-chip-bg: rgba(255, 255, 255, 0.22);

    /* Dimensions & Radii */
    --radius-xl: 28px;
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 10px;
    --container: 1280px;
    --gap-section: 90px;
    --gap-section-mobile: 52px;
}

html[data-theme="dark"] {
    --glass-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.10) 0%, rgba(255, 255, 255, 0.03) 100%);
    --glass-bg-strong: linear-gradient(135deg, rgba(255, 255, 255, 0.16) 0%, rgba(255, 255, 255, 0.05) 100%);
    --glass-border: transparent;
    --glass-shadow: inset 0 1px 1.5px 0 rgba(255, 255, 255, 0.38), inset 0 -1px 1px 0 rgba(255, 255, 255, 0.14), 0 12px 32px 0 rgba(0, 0, 0, 0.16);
    --glass-text: var(--box-text-glass, var(--text));
    --icon-chip-bg: rgba(255, 255, 255, 0.08);
}

/* -------------------------------------------------------------------------
   2. Base Reset & Typography Setup (7-Level System)
   ------------------------------------------------------------------------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    background-color: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: var(--body-size);
    direction: rtl;
    position: relative;
    overflow-x: hidden;
    transition: background-color .3s ease, color .3s ease;
}

h1,h2,h3,h4,h5,h6 { margin: 0; font-weight: 700; color: var(--text); }
h1 { font-family: var(--font-h1); font-size: var(--h1-size); }
h2 { font-family: var(--font-h2); font-size: var(--h2-size); }
h3 { font-family: var(--font-h3); font-size: var(--h3-size); }
h4 { font-family: var(--font-h4); font-size: var(--h4-size); }
h5 { font-family: var(--font-h5); font-size: var(--h5-size); }
h6 { font-family: var(--font-h6); font-size: var(--h6-size); }

p { margin: 0; color: var(--muted); line-height: 1.85; white-space: pre-wrap; font-size: var(--body-size); }
a { color: inherit; text-decoration: none; }
img, video { max-width: 100%; display: block; background: transparent; }
button, input, textarea, select { font-family: inherit; }
button { cursor: pointer; border: none; outline: none; background: transparent; }
ul { margin: 0; padding: 0; list-style: none; }

.container { max-width: var(--container); margin: 0 auto; padding: 0 20px; }
.container--flush { padding: 0 16px; }

/* -------------------------------------------------------------------------
   3. Static / Fixed Full-Page Background Layer (4-Slot Multi-Media Engine)
   ------------------------------------------------------------------------- */
.fixed-full-page-bg {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
    background: transparent;
}
.fixed-full-page-bg::before {
    content: "";
    position: absolute;
    inset: -8%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(46% 42% at 16% 18%, color-mix(in srgb, var(--accent, #e0855c) 32%, transparent) 0%, transparent 74%),
        radial-gradient(44% 40% at 84% 24%, color-mix(in srgb, var(--primary, #33c95d) 24%, transparent) 0%, transparent 72%),
        radial-gradient(48% 44% at 22% 56%, color-mix(in srgb, #6366f1 22%, transparent) 0%, transparent 74%),
        radial-gradient(46% 42% at 78% 64%, color-mix(in srgb, var(--accent, #e0855c) 26%, transparent) 0%, transparent 74%),
        radial-gradient(52% 46% at 50% 88%, color-mix(in srgb, var(--primary, #33c95d) 22%, transparent) 0%, transparent 76%);
    filter: blur(48px);
    opacity: 0.95;
}
.fixed-full-page-bg .resp-media,
.fixed-full-page-bg video,
.fixed-full-page-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

/* 4-Slot Responsive Media Switching Engine */
.resp-media { display: none; }
/* Hero crop-aware renderer: keep the four states isolated by viewport + theme.
   v1.16.8 CONTRACT — tablets (768–1024px) deliberately share the DESKTOP
   slots: the tablet aspect ratio is hard-locked to the desktop ratio
   (v1.16.7), so tablet media AND code embeds inherit from desktop — there
   are no tablet-specific slots and there never will be. */
.media-dl, .media-dd, .media-ml, .media-md { display: none !important; }
@media (min-width: 768px) {
    html[data-theme="light"] .resp-media.resp-media--desktop-light { display: block; }
    html[data-theme="dark"]  .resp-media.resp-media--desktop-dark   { display: block; }
    html[data-theme="light"] .media-dl { display: block !important; }
    html[data-theme="dark"]  .media-dd { display: block !important; }
}
@media (max-width: 767px) {
    html[data-theme="light"] .resp-media.resp-media--mobile-light  { display: block; }
    html[data-theme="dark"]  .resp-media.resp-media--mobile-dark    { display: block; }
    html[data-theme="light"] .media-ml { display: block !important; }
    html[data-theme="dark"]  .media-md { display: block !important; }
}

/* Dual Theme Swapping */
.theme-media--dark { display: none; }
html[data-theme="dark"] .theme-media--light { display: none; }
html[data-theme="dark"] .theme-media--dark  { display: block; }

/* v1.18.0 — E11 (BUG-018): paired media visibility. Home About/Portfolio/
   Features/Tutorial cards render .media-light/.media-dark twins, but no rule
   ever selected them by theme — both variants rendered at once. The
   selectors are scoped strictly AWAY from the 4-slot matrix classes
   (resp-media, media-dl/dd/ml/md) so their precedence stays untouched;
   .media-single keeps its own existing fallback behaviour. */
.media-light:not(.resp-media):not(.media-dl):not(.media-dd):not(.media-ml):not(.media-md),
.media-dark:not(.resp-media):not(.media-dl):not(.media-dd):not(.media-ml):not(.media-md) {
    display: none !important;
}
html[data-theme="light"] .media-light:not(.resp-media):not(.media-dl):not(.media-dd):not(.media-ml):not(.media-md),
html[data-theme="dark"] .media-dark:not(.resp-media):not(.media-dl):not(.media-dd):not(.media-ml):not(.media-md) {
    display: block !important;
}

/* -------------------------------------------------------------------------
   4. Liquid Glass UI Classes
   ------------------------------------------------------------------------- */
.glass {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}
.glass-strong {
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
}

/* -------------------------------------------------------------------------
   5. Site Header, Floating Navigation & Mobile Glass Drawer
   ------------------------------------------------------------------------- */
.site-header-wrap {
    position: sticky;
    top: 14px;
    z-index: 1000;
    padding: 0 16px;
}
.site-header {
    max-width: var(--container);
    margin: 0 auto;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 22px;
}
.site-header .brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 20px;
}
.site-header .brand img.logo-image {
    width: 34px;
    height: 34px;
    border-radius: 8px;
    object-fit: cover;
    background: transparent;
    flex-shrink: 0;
}
.site-header .brand .brand-text {
    color: var(--text);
    font-weight: 800;
    font-size: 19px;
    letter-spacing: -0.3px;
}

.site-nav { display: none; }
.site-nav ul { display: flex; align-items: center; gap: 8px; }
.site-nav a {
    display: inline-block;
    padding: 8px 16px;
    border-radius: 999px;
    color: var(--text);
    font-size: 14.5px;
    font-weight: 500;
    transition: all .2s ease;
}
.site-nav a:hover { color: var(--accent); }
.site-nav a.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    font-weight: 700;
}

/* Automatically Dim and Disable Navigation Links for Inactive Sections */
.site-nav a.nav-item--disabled,
.drawer-nav a.nav-item--disabled {
    opacity: 0.32;
    pointer-events: none;
    cursor: default;
}

.header-icons { display: flex; align-items: center; gap: 8px; }
.icon-btn {
    width: 40px; height: 40px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text);
    display: flex; align-items: center; justify-content: center;
    transition: background .2s ease;
}
.icon-btn:hover { background: var(--icon-chip-bg); }
.icon-btn svg { width: 18px; height: 18px; }
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun  { display: block; }

.mobile-only { display: flex; }
.desktop-only { display: none; }

/* Mobile Drawer Component */
.mobile-drawer-overlay {
    position: fixed;
    inset: 0;
    background: rgba(12, 16, 26, 0.14);
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-drawer-overlay.open {
    opacity: 1;
    visibility: visible;
}
.mobile-drawer {
    position: fixed;
    top: 0;
    right: -320px;
    width: 280px;
    height: 100vh;
    z-index: 1050;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    border-radius: var(--radius-lg) 0 0 var(--radius-lg);
    border-right: none;
    transition: right 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: -10px 0 30px rgba(0, 0, 0, 0.25);
}
.mobile-drawer.open {
    right: 0;
}

/* v1.0.5: mirrored mobile header — the light/dark switch sits on the LEFT
   edge and the menu (drawer) button on the RIGHT edge. In RTL the first flex
   item renders on the right, so the menu button gets order:-1. The buttons
   are .mobile-only (hidden ≥768px), so this never affects the desktop bar. */
#mobileMenuBtn { order: -1; }
.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}
.drawer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 800;
    font-size: 17px;
    color: var(--text);
}
.drawer-brand img.logo-image {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    object-fit: cover;
}
.drawer-nav ul {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.drawer-nav a {
    display: block;
    padding: 12px 16px;
    border-radius: var(--radius-md);
    color: var(--text);
    font-weight: 600;
    font-size: 15px;
    transition: all 0.2s ease;
}
.drawer-nav a:hover,
.drawer-nav a.active {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
}

/* v1.13.0 — tablets (768–1023px) now use the mobile header: menu button +
   drawer instead of the inline nav. The full desktop bar starts at 1024px.
   Liquid Glass still applies from 768px, so the drawer gets it on tablets. */
@media (min-width: 1024px) {
    .site-nav { display: block; }
    .mobile-only { display: none; }
    .desktop-only { display: flex; }
    .site-header { padding: 14px 28px; }
    .mobile-drawer, .mobile-drawer-overlay { display: none; }
}

/* -------------------------------------------------------------------------
   6. Sections General Framework
   ------------------------------------------------------------------------- */
.section { padding: var(--gap-section-mobile) 0; position: relative; scroll-margin-top: 90px; }
@media (min-width: 768px) { .section { padding: var(--gap-section) 0; scroll-margin-top: 110px; } }

.section-head { text-align: center; max-width: 640px; margin: 0 auto 36px; }
.section-head p { font-size: 15px; margin-top: 8px; }

/* -------------------------------------------------------------------------
   7. Hero Slider & Universal Capsule Slider Controls
   ------------------------------------------------------------------------- */
.hero-wrap { padding-top: 24px; }
.media-slider {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: transparent;
}
.media-slider .slide { position: absolute; inset: 0; opacity: 0; transition: opacity .8s ease; }
.media-slider .slide.active { opacity: 1; }
.media-slider .slide a { display: block; width: 100%; height: 100%; }
.media-slider img, .media-slider video { width: 100%; height: 100%; object-fit: cover; background: transparent; }

/* Vertical Capsule Navigation */
.vslider-controls {
    position: absolute;
    top: 50%; left: 20px;
    transform: translateY(-50%);
    z-index: 10;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 8px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    backdrop-filter: blur(12px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.3);
}
.vslider-controls .slider-arrow {
    width: 34px; height: 34px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.2);
    color: var(--box-text-colored);
    display: flex; align-items: center; justify-content: center;
}
.vslider-controls .slider-arrow svg { width: 14px; height: 14px; }
.vslider-controls .slider-dots { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.vslider-controls .dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255, 255, 255, 0.5); cursor: pointer; transition: all .25s ease; }
.vslider-controls .dot.active { width: 18px; height: 6px; background: var(--box-text-colored); }

/* Control Scaling on Mobile (-35%) */
@media (max-width: 767px) {
    .hero-wrap .media-slider { aspect-ratio: 4 / 3; }
    .vslider-controls {
        left: 10px;
        transform: translateY(-50%) scale(0.65);
        transform-origin: left center;
    }
}

/* -------------------------------------------------------------------------
   8. Features Section (Strict 3:4 Vertical Aspect Ratio & Zero Shadow)
   ------------------------------------------------------------------------- */
.features-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.feature-card {
    position: relative;
    border-radius: var(--radius-lg);
    aspect-ratio: 3 / 4;
    overflow: hidden;
    box-shadow: none;
    border: 1px solid var(--glass-border);
}
.feature-card .card-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.feature-card .card-bg img,
.feature-card .card-bg video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
    filter: none;
    opacity: 1;
    transform: scale(1);
    transform-origin: center center;
    transition: transform var(--feature-hover-duration, 650ms) var(--feature-hover-easing, cubic-bezier(.22,.61,.36,1));
    will-change: transform;
}

@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .feature-card.has-image:hover .card-bg img,
    .feature-card.has-image:hover .card-bg video {
        transform: scale(var(--feature-hover-scale, 1.07));
    }
}

@keyframes feature-card-mobile-image-pulse {
    0% { transform: scale(1); }
    50% { transform: scale(var(--feature-hover-scale, 1.07)); }
    100% { transform: scale(1); }
}

@media (max-width: 767px) {
    .feature-card.has-image.is-mobile-hover .card-bg img,
    .feature-card.has-image.is-mobile-hover .card-bg video {
        animation: feature-card-mobile-image-pulse var(--feature-hover-mobile-duration, 900ms) var(--feature-hover-easing, cubic-bezier(.22,.61,.36,1)) both;
    }
}

.feature-card .card-scrim {
    display: none;
}

.feature-card .card-content {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 100%;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.feature-card .icon-chip {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--icon-chip-bg);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 8px;
    flex-shrink: 0;
}
.feature-card .icon-chip svg { width: 22px; height: 22px; color: var(--text); }
.feature-card h3 { font-size: var(--h3-size); margin-bottom: 6px; }
.feature-card p { font-size: var(--body-size); }

@media (min-width: 768px) {
    .features-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; }
    .feature-card .card-content { padding: 22px 18px; }
}

/* -------------------------------------------------------------------------
   9. Services Section (Interactive Reveal)
   ------------------------------------------------------------------------- */
.services-list { display: flex; flex-direction: column; gap: 20px; }
.service-banner {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    aspect-ratio: 21 / 9;
    background: transparent;
    box-shadow: none;
    isolation: auto;
    cursor: pointer;
}
.service-banner img, .service-banner video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
    transform: scale(1.001);
    transition: filter .45s cubic-bezier(.22,.61,.36,1), transform .45s cubic-bezier(.22,.61,.36,1);
}
.service-stage-one-controls {
    position: absolute;
    inset: 0;
    z-index: 50;
    pointer-events: none;
}
.service-banner .banner-title {
    position: absolute;
    top: 50%;
    right: 18px;
    transform: translateY(-50%);
    width: fit-content;
    height: fit-content;
    max-height: calc(100% - 24px);
    padding: 18px 12px;
    border-radius: 999px;
    border: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 52;
    pointer-events: none;
}
.service-stage-one-toggle {
    position: absolute;
    left: 18px;
    top: 50%;
    height: 52px;
    min-width: 52px;
    padding: 0 15px;
    transform: translateY(-50%);
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    color: var(--box-text-glass);
    text-decoration: none;
    cursor: pointer;
    pointer-events: auto;
    overflow: hidden;
    white-space: nowrap;
    z-index: 52;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    transition:
        padding .34s cubic-bezier(.22, .61, .36, 1),
        gap .34s cubic-bezier(.22, .61, .36, 1),
        transform .26s cubic-bezier(.22, .61, .36, 1),
        background .26s ease,
        box-shadow .26s ease;
}
.service-stage-one-toggle .service-toggle-text {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    font-weight: 700;
    font-size: 14.5px;
    line-height: 1;
    color: var(--box-text-glass);
    transform: translateX(6px);
    transition:
        max-width .34s cubic-bezier(.22, .61, .36, 1),
        opacity .24s ease,
        transform .34s cubic-bezier(.22, .61, .36, 1);
}
.service-stage-one-toggle:hover {
    transform: translateY(-50%) scale(1.04);
}
.service-stage-one-toggle svg {
    width: 22px;
    height: 22px;
    flex: 0 0 22px;
    transition: transform .3s cubic-bezier(.22, .61, .36, 1);
}
.service-banner .banner-title span {
    writing-mode: vertical-rl;
    color: var(--box-text-glass);
    font-weight: 700;
    white-space: nowrap;
    font-family: var(--font-h3);
    font-size: var(--h3-size);
}
/* Stage 2 Matte Layer: sits ABOVE media/carousel (z-index: 1..2) and strictly BELOW .service-stage-one-controls (z-index: 50) */
.service-reveal {
    position: absolute;
    inset: 0;
    z-index: 25 !important;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    /* In RTL: padding-inline-start (right) leaves a clean gap right after the vertical .banner-title capsule;
       padding-inline-end (left) leaves room for the expanded 'ادامه' capsule button */
    padding-block: clamp(20px, 2.8vw, 36px);
    padding-inline-start: clamp(82px, 7vw, 96px);
    padding-inline-end: clamp(142px, 12vw, 164px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: var(--glass-service_reveal-bg, var(--glass-bg));
    -webkit-backdrop-filter: blur(var(--glass-service_reveal-blur, 16px)) saturate(190%);
    backdrop-filter: blur(var(--glass-service_reveal-blur, 16px)) saturate(190%);
    transition: opacity .36s cubic-bezier(.22, .61, .36, 1), visibility .36s ease;
}
.service-reveal::before {
    display: none;
}
.service-reveal__content {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    max-width: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    text-align: start;
}
.service-reveal__content--mobile { display: none; }
.service-reveal__content--desktop { display: flex; }
.service-reveal__content p {
    flex: 0 1 auto;
    width: 100%;
    max-width: 100%;
    margin: 0;
    color: var(--box-text-glass, var(--text));
    font-weight: 600;
    line-height: var(--service-description-desktop-line-height, 1.75);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    box-sizing: border-box;
    text-align: start;
}
@media (hover: hover) and (pointer: fine) and (min-width: 768px) {
    .service-banner--full-media:hover img,
    .service-banner--full-media:hover video {
        filter: saturate(1.12) brightness(1.03);
        transform: scale(1.035);
    }
    .service-banner:hover .service-reveal {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .service-banner:not(.service-banner--single-stage):hover .service-stage-one-toggle {
        padding: 0 20px;
        gap: 9px;
    }
    .service-banner:not(.service-banner--single-stage):hover .service-stage-one-toggle .service-toggle-text {
        max-width: 72px;
        opacity: 1;
        transform: translateX(0);
    }
    .service-banner:not(.service-banner--single-stage):hover .service-stage-one-toggle svg {
        transform: translateX(-2px);
    }
}
@media (min-width: 768px) {
    .service-banner { aspect-ratio: 7 / 2; }
}
@media (max-width: 767px) {
    .service-banner { aspect-ratio: 21 / 9; }
    .service-banner .banner-title {
        right: 12px;
        padding: 14px 10px;
    }
    .service-reveal {
        padding-block: 12px;
        padding-inline-start: 64px;
        padding-inline-end: 118px;
        background: var(--glass-service_reveal-bg, var(--glass-bg));
        -webkit-backdrop-filter: blur(var(--glass-service_reveal-blur, 14px)) saturate(185%);
        backdrop-filter: blur(var(--glass-service_reveal-blur, 14px)) saturate(185%);
    }
    .service-reveal__content { max-width: 100%; }
    .service-reveal__content--desktop { display: none; }
    .service-reveal__content--mobile { display: flex; }
    .service-reveal__content p {
        line-height: var(--service-description-mobile-line-height, 1.65);
    }
    .service-stage-one-toggle {
        height: 44px;
        min-width: 44px;
        padding: 0 12.5px;
        left: 12px;
    }
    .service-stage-one-toggle .service-toggle-text {
        font-size: 13px;
    }
    .service-stage-one-toggle svg {
        width: 19px;
        height: 19px;
        flex: 0 0 19px;
    }
    .service-banner--full-media.is-revealed img,
    .service-banner--full-media.is-revealed video {
        filter: saturate(1.12) brightness(1.03);
        transform: scale(1.035);
    }
    .service-banner.is-revealed .service-reveal {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .service-banner:not(.service-banner--single-stage).is-revealed .service-stage-one-toggle {
        padding: 0 15px;
        gap: 7px;
    }
    .service-banner:not(.service-banner--single-stage).is-revealed .service-stage-one-toggle .service-toggle-text {
        max-width: 64px;
        opacity: 1;
        transform: translateX(0);
    }
    .service-banner:not(.service-banner--single-stage).is-revealed .service-stage-one-toggle svg {
        transform: translateX(-2px);
    }
}

/* -------------------------------------------------------------------------
   Liquid Glass group integration note
   The authoritative group values are emitted by includes/header.php after
   this stylesheet. The duplicated .glass.glass-group-* selector there gives
   the admin-selected group settings enough specificity to override component
   rules that otherwise define their own background/blur/border/shadow.
   ------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------
   10. About Us Section (Transparent Media Box)
   ------------------------------------------------------------------------- */
.about-grid { display: flex; flex-direction: column; gap: 30px; }
.about-text .eyebrow { color: var(--accent); font-weight: 700; font-size: 16px; margin: 8px 0 14px; }
.about-text p { margin-bottom: 12px; white-space: pre-line; font-size: var(--body-size); }
.about-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-weight: 700; border-bottom: 2px solid var(--text); padding-bottom: 3px; font-size: var(--body-size); }
.about-image-box {
    position: relative;
    border-radius: var(--radius-xl);
    aspect-ratio: 1 / 1;
    max-width: 380px;
    width: 100%;
    margin: 0 auto;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
}
.about-image-box img, .about-image-box video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: transparent;
}

@media (min-width: 768px) {
    .about-grid { flex-direction: row-reverse; align-items: center; justify-content: space-between; gap: 50px; }
    .about-text { flex: 1; }
    .about-image-box { flex: 0 0 400px; margin: 0; }
}

/* -------------------------------------------------------------------------
   11. Portfolio Section (16:9 Mirrored on Mobile / 75% on Desktop)
   ------------------------------------------------------------------------- */
.portfolio-slider { aspect-ratio: 16 / 9; width: 75%; max-width: 75%; margin: 0 auto; background: transparent; }
@media (max-width: 767px) {
    .portfolio-slider { width: 100%; max-width: 100%; aspect-ratio: 16 / 9; }
}

/* -------------------------------------------------------------------------
   12. Newsletter Section (4-Slot Background Support)
   ------------------------------------------------------------------------- */
.newsletter-card {
    position: relative;
    border-radius: var(--radius-xl);
    padding: 44px 24px;
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    overflow: hidden;
    background: transparent;
}
.newsletter-card .card-bg-layer { position: absolute; inset: 0; z-index: 0; }
.newsletter-card .card-bg-layer .resp-media,
.newsletter-card .card-bg-layer img,
.newsletter-card .card-bg-layer video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.newsletter-card > *:not(.card-bg-layer) { position: relative; z-index: 1; }
.newsletter-card h2 { margin-bottom: 22px; }
.newsletter-field {
    border-radius: 999px;
    padding: 14px 20px;
    margin-bottom: 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
}
.newsletter-field input { width: 100%; background: transparent; border: none; outline: none; color: var(--text); font-size: var(--body-size); text-align: center; }
.newsletter-field input::placeholder { color: var(--muted); }
.newsletter-submit { width: 100%; padding: 15px; border-radius: 999px; border: none; background: var(--primary); color: var(--box-text-colored); font-weight: 700; font-size: var(--body-size); margin-top: 4px; transition: opacity .2s ease; }
.newsletter-submit:disabled { opacity: .7; }
.newsletter-msg { margin-top: 12px; font-size: 13.5px; min-height: 20px; }
.newsletter-msg.success { color: var(--primary); }
.newsletter-msg.error { color: color-mix(in srgb, var(--accent) 78%, #d64545 22%); }

/* -------------------------------------------------------------------------
   13. Blog Section (Seamless 3-Card Desktop & 2-Card Mobile Sliding Carousel)
   ------------------------------------------------------------------------- */
.blog-track-wrap { overflow: hidden; width: 100%; }
.blog-track {
    display: flex;
    gap: 16px;
    transition: transform .5s cubic-bezier(0.4, 0, 0.2, 1);
}

.blog-card {
    position: relative;
    flex: 0 0 calc((100% - 8px) / 2);
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
    background: transparent;
}
.blog-card img, .blog-card video { width: 100%; height: 100%; object-fit: cover; background: transparent; }

/* Header Badges on Blog Card */
.blog-card .blog-tag,
.blog-card .blog-date {
    position: absolute;
    top: 12px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--box-text-glass);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    z-index: 3;
}
.blog-card .blog-tag { right: 12px; }
.blog-card .blog-date { left: 12px; }

/* v1.1.3 — video play badge, shared by the blog preview card everywhere
   (home carousel + blog page grid + AJAX-loaded cards). */
.fx-play {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--glass-media_play-bg, var(--glass-bg));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .25);
    color: #fff;
    display: grid;
    place-items: center;
    z-index: 4;
    pointer-events: none;
}
.fx-play svg { width: 22px; height: 22px; }

/* v1.1.3 — mobile pill mode for article preview cards (Articles tab switch):
   on phones only the date OR the category tag shows; desktop shows both. */
@media (max-width: 767px) {
    .fx-mob-hide { display: none !important; }
}
/* v1.16.9 — home blog preview cards only: the admin's meta mode now reaches
   TABLETS too (≤1024px, matching the v1.16.7 tablet tier). Dedicated class,
   so ONLY the home section cards opt in; the blog list page and the
   related-article cards keep fx-mob-hide (phone-only) and therefore show
   the desktop pair (date + tag) on tablets, exactly like desktop. */
@media (max-width: 1024px) {
    .fx-tab-hide { display: none !important; }
}

/* Title Visibility Switching between Mobile and Desktop */
.blog-title-desktop { display: block; }
.blog-title-mobile  { display: none; }

/* Dynamic Shrink-Wrap Title Container (Centered Text) */
.blog-card .blog-title-wrap {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 10px 12px;
    border-radius: var(--radius-md);
    background: var(--glass-bg-strong);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}
.blog-card .blog-title-wrap h3 {
    color: var(--box-text-glass);
    font-size: 13px;
    line-height: 1.5;
    font-weight: 700;
    text-align: center;
    margin: 0;
    word-break: break-word;
}

/* v1.13.0 — Fixed "view all" panel of the HOME blog slider.
   .blog-stage = [ sliding track | fixed panel ]; in RTL the panel sits on the
   left edge. It stretches to the card height and never moves with the track.
   Surface (tint/blur/border/Liquid Glass) comes from group "blog_viewall". */
.blog-stage {
    display: flex;
    align-items: stretch;
    gap: 8px;
}
.blog-stage > .blog-track-wrap { flex: 1 1 auto; min-width: 0; }
.blog-viewall {
    position: relative;
    flex: 0 0 clamp(44px, 11.5%, 64px);
    border-radius: var(--radius-lg);
    border: 1px solid transparent;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1.6em;
    padding: 14px 0;
    color: var(--box-text-glass);
    text-decoration: none;
    font-size: 13px;
    overflow: hidden;
    transition: transform .25s ease, filter .25s ease;
}
.blog-viewall:hover { filter: brightness(1.05); }
.blog-viewall:active { transform: scale(0.98); }
.blog-viewall:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.blog-viewall .viewall-text {
    writing-mode: vertical-rl;
    font-weight: 800;
    font-size: 1em;
    line-height: 1;
    white-space: nowrap;
}
.blog-viewall .viewall-arrow { display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.blog-viewall .viewall-arrow svg { width: 1.35em; height: 1.35em; stroke-width: 2; }

/* Crystal Liquid Glass Blog Slider Controls */
.blog-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    margin-top: 48px;
}
.blog-controls button {
    width: 30px;
    height: 30px;
    padding: 0;
    border-radius: 50%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px) saturate(180%);
    backdrop-filter: blur(10px) saturate(180%);
    border: 1px solid var(--glass-border);
    box-shadow: var(--glass-shadow);
    color: var(--box-text-glass);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}
.blog-controls button:active { transform: scale(0.92); }
.blog-controls button svg { width: 24px; height: 24px; stroke-width: 1.4; }

.blog-dots { display: flex; align-items: flex-end; gap: 8px; }
.blog-dots .dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--text) 50%, transparent);
    cursor: pointer;
    transition: all .25s ease;
}
.blog-dots .dot.active {
    width: 10px;
    height: 24px;
    border-radius: 999px;
    background: var(--text);
}

/* Mobile Adaptations for Blog Section */
@media (max-width: 767px) {
    /* v1.13.0 — tag/date visibility on phones is decided ONLY by the Articles
       tab switch (.fx-mob-hide); the old blanket hide broke the "tag" mode. */
    .blog-title-desktop { display: none; }
    .blog-title-mobile  { display: block; }

    .blog-card .blog-title-wrap {
        left: 8px;
        right: 8px;
        bottom: 8px;
        padding: 8px 10px;
    }
    .blog-card .blog-title-wrap h3 {
        font-size: 11.5px;
        line-height: 1.4;
    }
    .blog-card .blog-date,
    .blog-card .blog-tag {
        top: 8px;
        padding: 4px 10px;
        font-size: 10px;
    }
    .blog-card .blog-date { left: 8px; }
    .blog-card .blog-tag  { right: 8px; }
    .blog-track { gap: 8px; }
}

/* Desktop Sliding Adaptation (3 Cards per View) */
@media (min-width: 768px) {
    .blog-track {
        gap: 20px;
    }
    .blog-card {
        flex: 0 0 calc((100% - 40px) / 3);
    }
    .blog-stage { gap: 20px; }
    .blog-viewall {
        flex: 0 0 clamp(80px, 7.8%, 104px);
        font-size: clamp(18px, 1.9vw, 26px);
        padding: 20px 0;
    }
    .blog-card .blog-title-wrap h3 {
        font-size: var(--h3-size);
    }
}

/* -------------------------------------------------------------------------
   14. Site Footer (4-Slot Background Matrix & Circular Transparent Social Icons)
   ------------------------------------------------------------------------- */
.site-footer-wrap { padding: 0 16px 24px; margin-top: var(--gap-section-mobile); }
.site-footer {
    position: relative;
    max-width: var(--container);
    margin: 0 auto;
    border-radius: var(--radius-xl);
    padding: 44px 28px 24px;
    overflow: hidden;
}
.site-footer .footer-bg-layer { position: absolute; inset: 0; z-index: 0; }
.site-footer .footer-bg-layer .resp-media,
.site-footer .footer-bg-layer img,
.site-footer .footer-bg-layer video { width: 100%; height: 100%; object-fit: cover; background: transparent; }
.site-footer > *:not(.footer-bg-layer) { position: relative; z-index: 1; }

.footer-top { display: flex; flex-direction: column; gap: 30px; padding-bottom: 24px; }
.footer-col.about { order: 1; }
.footer-col.links { order: 2; }
.footer-col.contact { order: 3; }
.footer-col h4 { font-size: var(--h4-size); margin-bottom: 14px; }
.footer-col.links ul { display: flex; flex-direction: column; gap: 8px; }
.footer-col.links a { color: var(--muted); font-size: var(--body-size); transition: color .2s; }
.footer-col.links a:hover { color: var(--accent); }
.footer-contact-item { margin-bottom: 12px; }
.footer-contact-item .label { display: block; font-weight: 700; margin-bottom: 3px; font-size: var(--body-size); }
.footer-bottom {
    border-top: 1px solid var(--border);
    padding-top: 20px;
    display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center;
}
.footer-bottom .copyright { order: 2; font-size: 12.5px; }
.footer-social { order: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.social-icons { display: flex; align-items: center; gap: 10px; }
.social-icon {
    width: 40px; height: 40px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text);
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    backdrop-filter: blur(var(--glass-blur)) saturate(180%);
    border: 1px solid var(--glass-border);
    transition: transform .2s ease;
}
.social-icon:hover { transform: translateY(-2px); }
.social-icon svg { width: 17px; height: 17px; }
.social-icon img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; background: transparent; }
/* v1.16.3/1.16.5 — light mode only, footer social circles only: the design calls for
   "Circular Transparent Social Icons" (see this section's heading). Three gray
   layers sit under each circle in light mode: the glass-group FILL, the
   group's DROP SHADOW (a soft gray halo under every circle) and the BACKDROP
   BLUR. The Liquid Glass engine (liquid-glass.js) re-applies its backdrop
   filter as an INLINE style after page load — !important is required so the
   stylesheet keeps winning over that late inline override. Dark mode and
   every other glass surface stay untouched. */
/* v1.25.0 — footer_social uses authentic Liquid Glass in both light and dark modes */

@media (min-width: 768px) {
    .site-footer-wrap { margin-top: var(--gap-section); }
    .site-footer { padding: 52px 42px 28px; }
    .footer-top { flex-direction: row; justify-content: space-between; }
    .footer-col.contact { order: 2; }
    .footer-col.links { order: 3; }
    .footer-col { flex: 1; }
    .footer-bottom { flex-direction: row; justify-content: space-between; text-align: right; }
    .footer-bottom .copyright { order: 1; }
    .footer-social { order: 2; }
}

/* -------------------------------------------------------------------------
   Added: Service 3D Carousel — Liquid Glass Cards
   ------------------------------------------------------------------------- */

/* Added: per-service switch between the coded carousel and the original full-frame media. */
.service-banner--full-media {
    position: relative;
    overflow: hidden;
    isolation: auto;
}
.service-banner--full-media > .resp-media {
    z-index: 1;
}
/* v1.2.0 — dedicated full-bleed preview cover (Services tab). The cover
   image spans the WHOLE preview box, independent from the single-page
   banner images. */
.svc-box-cover {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.svc-box-cover img,
.svc-box-cover video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: transparent;
}
.service-banner--full-media .banner-title { z-index: 52; }
.service-banner--full-media .service-reveal { z-index: 25 !important; }
.service-banner--full-media .resp-media {
    pointer-events: none;
}
.service-display-switch { margin-top:8px; }
.service-toggle {
    display:inline-flex;
    align-items:center;
    gap:12px;
    min-height:52px;
    padding:9px 13px;
    border:1px solid rgba(255,255,255,.10);
    border-radius:14px;
    background:rgba(255,255,255,.025);
    cursor:pointer;
    user-select:none;
}
.service-toggle > input {
    position:absolute;
    opacity:0;
    pointer-events:none;
}
.service-toggle__track {
    position:relative;
    width:48px;
    height:28px;
    flex:0 0 48px;
    border-radius:999px;
    background:color-mix(in srgb, var(--surface) 42%, transparent);
    border:1px solid color-mix(in srgb, var(--border) 78%, transparent);
    transition:.2s ease;
}
.service-toggle__thumb {
    position:absolute;
    top:3px;
    right:3px;
    width:20px;
    height:20px;
    border-radius:50%;
    background:var(--muted);
    box-shadow:0 2px 7px rgba(0,0,0,.35);
    transition:.2s ease;
}
.service-toggle > input:checked + .service-toggle__track {
    background:color-mix(in srgb, var(--accent) 30%, transparent);
    border-color:color-mix(in srgb, var(--accent) 58%, transparent);
}
.service-toggle > input:checked + .service-toggle__track .service-toggle__thumb {
    right:23px;
    background:var(--box-text-colored);
}
.service-toggle__label { display:flex; flex-direction:column; gap:3px; }
.service-toggle__label strong { font-size:14px; }
.service-toggle__label small { opacity:.55; font-size:11px; }

.service-banner--carousel {
    position: relative;
    overflow: hidden;
    isolation: auto;
    display: block;
}
.service-banner--carousel > .resp-media { opacity: 0; pointer-events: none; }
.service-carousel {
    position: absolute;
    inset: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: block;
    transform: translate3d(var(--service-animation-desktop-x,0px), var(--service-animation-desktop-y,0px), 0) scale(var(--service-carousel-scale,1));
    transform-origin: 50% 50%;
    pointer-events: none;
}
.service-carousel-stage {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 540px;
    height: 300px;
    margin: 0;
    display: block;
    transform: translate(-50%, -50%);
    transform-style: flat;
    perspective: none;
    perspective-origin: 50% 50%;
}
.service-carousel-card {
    position: absolute;
    left: 50%; top: 50%;
    width: 188px;
    height: 228px;
    margin-left: -94px;
    margin-top: -114px;
    border-radius: var(--service-card-radius,18px);
    overflow: hidden;
    transform-style: flat;
    backface-visibility: hidden;
    /* Performance: only compositor-friendly properties (transform/opacity) animate.
       Animating `filter` forces full repaints every frame on mobile. */
    will-change: transform;
    transition:
        transform var(--service-carousel-duration,720ms) cubic-bezier(.48,0,.18,1),
        opacity var(--service-carousel-duration,720ms) cubic-bezier(.48,0,.18,1);
    background: var(--glass-service_card-bg, var(--glass-bg));
    border: none !important;
    box-shadow:
        inset 0 12px 26px -6px rgba(255,255,255,.42),
        inset 0 -10px 22px -6px rgba(255,255,255,.18),
        0 14px var(--service-shadow-size,28px) rgba(0,0,0,var(--service-shadow-opacity,.14));
}
/* Liquid-glass specular layer */
.service-carousel-card::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
    border-radius: inherit;
    background:
        linear-gradient(125deg,rgba(255,255,255,.22) 0%,rgba(255,255,255,.06) 24%,transparent 48%),
        radial-gradient(circle at 20% 8%,rgba(255,255,255,.18),transparent 34%);
    box-shadow: inset 0 10px 28px -6px rgba(255,255,255,.26);
}
.service-carousel-card-inner {
    position: relative;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 13px;
    transform-style: flat;
    padding: 18px;
}
.service-carousel-card-media {
    position: relative;
    width: 138px;
    height: 138px;
    flex: 0 0 138px;
    display: grid;
    place-items: center;
    overflow: hidden;
    border-radius: 27px;
    background: transparent;
    border: 0;
    box-shadow: none !important;
    transform: none;
}
.service-carousel-card-media::before,
.service-carousel-card-media::after { display:none; }
.service-carousel-card-image {
    width: 100%; height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
    background: transparent;
    border-radius: inherit;
    box-shadow: none !important;
    filter: none;
}
.service-carousel-card-title {
    position: relative;
    z-index: 6;
    max-width: 100%;
    color: var(--glass-text);
    text-align: center;
    line-height: 1.15;
    font-weight: 750;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transform: none;
    text-shadow: 0 2px 10px rgba(0,0,0,.28);
}
.service-carousel--typo-body .service-carousel-card-title { font-family: var(--font-body); font-size: var(--body-size); }
.service-carousel--typo-h1 .service-carousel-card-title { font-family: var(--font-h1); font-size: var(--h1-size); }
.service-carousel--typo-h2 .service-carousel-card-title { font-family: var(--font-h2); font-size: var(--h2-size); }
.service-carousel--typo-h3 .service-carousel-card-title { font-family: var(--font-h3); font-size: var(--h3-size); }
.service-carousel--typo-h4 .service-carousel-card-title { font-family: var(--font-h4); font-size: var(--h4-size); }
.service-carousel--typo-h5 .service-carousel-card-title { font-family: var(--font-h5); font-size: var(--h5-size); }
.service-carousel--typo-h6 .service-carousel-card-title { font-family: var(--font-h6); font-size: var(--h6-size); }

/* Four deterministic states. The carousel itself stays centered in the banner.
   Depth cues use opacity only — no per-frame blur/brightness repaints. */
.service-carousel-card.hidden { transform: translate(0, 4px) scale(.48); opacity:0; pointer-events:none; z-index:1; }
.service-carousel-card.left { transform: translate(-178px, 8px) scale(.68); opacity:1; z-index:20; }
.service-carousel-card.left .service-carousel-card-inner { opacity:.82; }
.service-carousel-card.center { transform: translate(0, 0) scale(1); opacity:1; z-index:40; }
.service-carousel-card.right { transform: translate(178px, 8px) scale(.68); opacity:1; z-index:20; }
.service-carousel-card.right .service-carousel-card-inner { opacity:.82; }
.service-carousel-card.center .service-carousel-card-media { transform: scale(1.04); }

/* Keep existing banner UI, but make it float above the animation. */
.service-banner--carousel .banner-title { z-index: 52; }
/* v1.25.0 — .banner-title & .service-stage-one-toggle stay at z-index 50+ ABOVE .service-reveal (z-index 25) */
.service-banner--carousel .service-reveal { z-index: 25 !important; }

@media (max-width:767px) {
    .service-carousel {
        transform: translate3d(var(--service-animation-mobile-x,0px), var(--service-animation-mobile-y,0px), 0) scale(var(--service-carousel-mobile-scale,.78));
        transform-origin: 50% 50%;
    }
    .service-carousel-stage {
        left: 50%;
        top: 50%;
        width: 540px;
        height: 300px;
        margin: 0;
        transform: translate(-50%, -50%);
    }
    .service-carousel-card {
        transition-duration: var(--service-carousel-mobile-duration,820ms);
    }
}

/* The image window itself is intentionally frameless; card shadows belong to the card. */
.service-carousel-card-media,
.service-carousel-card-media::before,
.service-carousel-card-media::after {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Admin: larger 1:1 image target for animation cards, without adding any
   visual box/shadow when the target is empty. */
.service-card-admin .img-field {
    align-items: flex-start;
}
.service-card-admin .img-field-preview {
    width: 150px;
    height: 150px;
    background: transparent;
    border: 0;
    box-shadow: none;
    border-radius: 14px;
}
.service-card-admin .img-field-preview:has(.preview-empty) {
    background: transparent;
    box-shadow: none;
    border: 0;
}
.service-card-admin .img-field-preview .preview-empty {
    color: transparent;
    font-size: 0;
}
.service-card-admin .img-field-preview img,
.service-card-admin .img-field-preview video {
    width: 100%; height: 100%; object-fit: cover;
    border-radius: 14px;
    box-shadow: none;
}
.service-animation-settings {
    margin: 18px 0;
    padding: 16px;
    border: 1px solid var(--a-border);
    border-radius: 14px;
    background: #fbfbfc;
}
.service-card-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    gap: 14px;
}
.service-card-admin {
    padding: 14px;
    border: 1px solid var(--a-border);
    border-radius: 12px;
    background: var(--box-text-colored);
}
@media (max-width:720px) {
    .service-card-grid { grid-template-columns: 1fr; }
    .service-card-admin .img-field-preview { width: 140px; height: 140px; }
}

/* Final stability fix: the image inside each card keeps the same intrinsic
   scale; only the parent card moves/scales between carousel states. */
.service-carousel-card-media,
.service-carousel-card.center .service-carousel-card-media,
.service-carousel-card.left .service-carousel-card-media,
.service-carousel-card.right .service-carousel-card-media,
.service-carousel-card.hidden .service-carousel-card-media {
    transform: scale(1) !important;
    transition: none !important;
}

/* One-page section active state.
   Keep the active title visually distinct, but intentionally do not render
   any extra dot/circle marker under the navigation item. */
.site-nav a,
.drawer-nav a {
    position: relative;
}

/* v1.26.0 — Unified capsule halo for ALL active header navigation items (including Home and one-page active sections). */
.site-nav a.active,
.site-nav a.is-active-section,
.site-nav a[data-onepage-home="true"].active,
.site-nav a[data-onepage-home="true"].is-active-section,
.site-nav li.current-menu-ancestor > a {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    font-weight: 700;
}
.drawer-nav a.active,
.drawer-nav a.is-active-section,
.drawer-nav a[data-onepage-home="true"].active,
.drawer-nav a[data-onepage-home="true"].is-active-section,
.drawer-nav li.current-menu-ancestor > a {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 12%, transparent) !important;
    font-weight: 700;
}


/* Universal 7-level typography assignments. Additive only: layout, color,
   spacing and component behavior remain controlled by the existing rules. */
.shiverex-typo-body { font-family: var(--font-body) !important; font-size: var(--body-size) !important; }
.shiverex-typo-h1   { font-family: var(--font-h1)   !important; font-size: var(--h1-size)   !important; }
.shiverex-typo-h2   { font-family: var(--font-h2)   !important; font-size: var(--h2-size)   !important; }
.shiverex-typo-h3   { font-family: var(--font-h3)   !important; font-size: var(--h3-size)   !important; }
.shiverex-typo-h4   { font-family: var(--font-h4)   !important; font-size: var(--h4-size)   !important; }
.shiverex-typo-h5   { font-family: var(--font-h5)   !important; font-size: var(--h5-size)   !important; }
.shiverex-typo-h6   { font-family: var(--font-h6)   !important; font-size: var(--h6-size)   !important; }


/* -------------------------------------------------------------------------
   Box text token + per-group Liquid Glass hooks
   NOTE: The following legacy text surfaces intentionally keep their original
   theme-linked colors. Only dedicated box text surfaces use --box-text.
   ------------------------------------------------------------------------- */
:root { --box-text-colored: #ffffff; --box-text-glass: #15171c; --box-text: var(--box-text-colored); }
html[data-theme="dark"] { --box-text-colored: #ffffff; --box-text-glass: #f4f3f0; }

/* Dedicated text palettes: solid/color surfaces vs Liquid Glass surfaces. */
.service-action,
.newsletter-submit { color: var(--box-text-colored); }
.service-stage-one-toggle,
.service-banner .banner-title span,
.blog-card .blog-tag,
.blog-card .blog-date,
.blog-card .blog-title-wrap h3,
.blog-viewall,
.blog-controls button,
.service-carousel-card-title { color: var(--box-text-glass); }

/* Group-level glass settings are injected as variables by includes/header.php. */
.glass-group-service_title,
.glass-group-service_toggle,
.glass-group-service_reveal,
.glass-group-newsletter_card,
.glass-group-newsletter_field,
.glass-group-blog_meta,
.glass-group-blog_title,
.glass-group-blog_viewall,
.glass-group-blog_control,
.glass-group-feature_card { color: var(--box-text-glass); }

/* Header, mobile drawer and footer social icons intentionally inherit their
   legacy theme-linked text colors from the specific selectors above. */

/* =========================================================================
   v1.9.0 — Back-to-top control (all front-end views)
   Functional long-page navigation: appears after ~75% of a viewport of
   reading, returns the reader to the top. Palette tokens come from the
   dynamic light/dark scheme (inc/render.php), so dark mode is automatic.
   ========================================================================= */
.fx-to-top {
    position: fixed;
    bottom: 22px;
    inset-inline-end: 22px;
    z-index: 960;
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: none;
    border-radius: var(--radius-md);
    background: var(--glass-back_to_top-bg, var(--glass-bg));
    color: var(--accent);
    cursor: pointer;
    box-shadow: var(--glass-back_to_top-shadow, var(--glass-shadow));
    backdrop-filter: blur(var(--glass-back_to_top-blur, var(--glass-blur))) saturate(var(--glass-back_to_top-saturation, 205%));
    -webkit-backdrop-filter: blur(var(--glass-back_to_top-blur, var(--glass-blur))) saturate(var(--glass-back_to_top-saturation, 205%));
    transition: transform 0.25s ease, filter 0.25s ease, color 0.25s ease;
}
.fx-to-top svg {
    width: 20px;
    height: 20px;
    display: block;
}
.fx-to-top:hover {
    filter: brightness(1.08);
    transform: translateY(-2px);
}
.fx-to-top:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
.fx-to-top[hidden] {
    /* explicit guard: .fx-to-top's own display:flex would otherwise beat the
       UA [hidden] sheet (the exact v1.8.0 hidden-attr regression class) */
    display: none;
}
@media (max-width: 640px) {
    .fx-to-top {
        bottom: 16px;
        inset-inline-end: 16px;
        width: 42px;
        height: 42px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .fx-to-top {
        transition: none;
    }
    .fx-to-top:hover {
        transform: none;
    }
}

/* ===== 1.11.0 / 1.22.0: Header Accordion Submenu (Synced with site_header Liquid Glass) & Single-Stage Service Boxes ===== */
/* Move .site-header's backdrop-filter onto ::before so .site-header does not trap
   a CSS Backdrop Root — allowing both the header bar AND its child .sub-menu
   dropdown to blur the live page behind them with the exact same site_header Liquid Glass! */
.site-header {
    position: relative;
}
.site-header.glass-group-site_header {
    background: transparent !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}
.site-header > .site-header-glass-surface {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: -1;
    display: block;
    background: var(--glass-site_header-bg, var(--glass-bg));
    -webkit-backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    border: 1px solid var(--glass-site_header-border, var(--glass-border));
    box-shadow: var(--glass-site_header-shadow, var(--glass-shadow));
}
.site-nav li { position: relative; }
.site-nav a.fx-nav-link--has-caret,
.drawer-nav a.fx-nav-link--has-caret {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 6px;
}
.drawer-nav a.fx-nav-link--has-caret {
    display: flex; width: 100%;
}
.fx-nav-caret {
    display: inline-flex; align-items: center; justify-content: center;
    width: 16px; height: 16px; flex-shrink: 0; opacity: .82;
    transition: transform .26s cubic-bezier(.22,.61,.36,1), opacity .2s ease;
}
.fx-nav-caret svg { width: 14px; height: 14px; }
.site-nav li.menu-item-has-children:hover > a,
.site-nav li.menu-item-has-children:focus-within > a,
.site-nav li.menu-item-has-children.is-open > a {
    color: var(--accent);
    background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.site-nav li.menu-item-has-children:hover > a .fx-nav-caret,
.site-nav li.menu-item-has-children:focus-within > a .fx-nav-caret,
.site-nav li.menu-item-has-children.is-open > a .fx-nav-caret,
.drawer-nav li.menu-item-has-children.is-open > a .fx-nav-caret {
    transform: rotate(180deg);
    opacity: 1;
}
.site-nav .sub-menu {
    position: absolute;
    top: calc(100% + 20px);
    inset-inline-start: 50%;
    min-width: 230px;
    margin: 0;
    padding: 8px;
    list-style: none;
    border-radius: var(--radius-lg);
    background: var(--glass-site_header-bg, var(--glass-bg));
    -webkit-backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    border: 1px solid var(--glass-site_header-border, var(--glass-border));
    box-shadow: var(--glass-site_header-shadow, var(--glass-shadow));
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(50%) translateY(8px) scale(0.97);
    transform-origin: top center;
    transition: opacity .24s cubic-bezier(.22,.61,.36,1), transform .24s cubic-bezier(.22,.61,.36,1), visibility .24s ease;
    z-index: 120;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
html[dir="ltr"] .site-nav .sub-menu {
    transform: translateX(-50%) translateY(8px) scale(0.97);
}
.site-nav .sub-menu::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -22px;
    height: 22px;
}
.site-nav li:hover > .sub-menu,
.site-nav li:focus-within > .sub-menu,
.site-nav li.is-open > .sub-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(50%) translateY(0) scale(1);
}
html[dir="ltr"] .site-nav li:hover > .sub-menu,
html[dir="ltr"] .site-nav li:focus-within > .sub-menu,
html[dir="ltr"] .site-nav li.is-open > .sub-menu {
    transform: translateX(-50%) translateY(0) scale(1);
}
.site-nav .sub-menu li {
    width: 100%;
}
.site-nav .sub-menu a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    padding: 10px 18px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 600;
    color: var(--box-text-glass, var(--text));
    transition: background .2s ease, color .2s ease, transform .2s ease;
}
.site-nav .sub-menu a:hover,
.site-nav .sub-menu a.active {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}
.mobile-drawer .sub-menu {
    list-style: none;
    margin: 6px 0 8px;
    padding: 8px;
    border-radius: 16px;
    background: var(--glass-site_header-bg, var(--glass-bg));
    -webkit-backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    backdrop-filter: blur(var(--glass-site_header-blur, var(--glass-blur))) saturate(var(--glass-site_header-saturation, 180%));
    border: 1px solid var(--glass-site_header-border, var(--glass-border));
    box-shadow: var(--glass-site_header-shadow, var(--glass-shadow));
    display: none;
    flex-direction: column;
    gap: 4px;
}
.mobile-drawer li.menu-item-has-children.is-open > .sub-menu {
    display: flex;
}
.mobile-drawer .sub-menu a {
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 999px;
    color: var(--box-text-glass, var(--text));
    transition: background .2s ease, color .2s ease;
}
.mobile-drawer .sub-menu a:hover,
.mobile-drawer .sub-menu a.active {
    color: var(--accent) !important;
    background: color-mix(in srgb, var(--accent) 14%, transparent) !important;
}

/* Single-stage service box mode (when group two-stage is turned OFF):
   ONLY hide Stage 2 (.service-reveal); Stage 1 controls (title + arrow icon) remain visible! */
.service-banner--single-stage .service-reveal {
    display: none !important;
}
.service-banner--single-stage:hover img,
.service-banner--single-stage:hover video {
    filter: none !important;
    transform: scale(1.015);
}
.service-banner--single-stage:hover .service-stage-one-toggle {
    transform: translateY(-50%) scale(1.05);
}
.service-single-stage-link {
    position: absolute; inset: 0; z-index: 55; display: block; cursor: pointer;
}
.elementor-location-header:has(.site-header-wrap[data-fx-sticky="1"]){position:sticky;top:14px;z-index:1000}
.elementor-location-header .site-header-wrap{position:relative;top:auto}
.site-header.fx-el-chrome-part{position:static;box-shadow:none;background:none;border:0;padding:0}
.fx-el-nav-wrap{display:flex;align-items:center}
.fx-brand-link{color:inherit;text-decoration:none}

/* v1.12.0 — back-to-top now uses the "back_to_top" Liquid Glass group. */
.fx-to-top.glass-group-back_to_top:hover { filter: brightness(1.06); }


/* ==========================================================================
   Furex v1.32.0 — Desktop Header Layouts, Mobile Bottom Glass Dock & Countdown
   ========================================================================== */
@media (min-width: 901px) {
    .site-header-wrap.fx-header-layout--centered .site-header {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
    }
    .site-header-wrap.fx-header-layout--centered .site-header > nav {
        order: 1;
        justify-self: start;
    }
    .site-header-wrap.fx-header-layout--centered .site-header > .brand {
        order: 2;
        justify-self: center;
    }
    .site-header-wrap.fx-header-layout--centered .site-header > .header-actions {
        order: 3;
        justify-self: end;
    }
    .site-header-wrap.fx-header-layout--compact_pill .container {
        max-width: 980px;
    }
    .site-header-wrap.fx-header-layout--compact_pill .site-header {
        border-radius: 999px;
        padding-inline: 22px;
    }
}

.fx-ann-countdown-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(0, 0, 0, 0.24);
    border: 1px solid rgba(255, 255, 255, 0.24);
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 0.76rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.fx-mobile-glass-dock {
    display: none;
}
@media (max-width: 767px) {
    body.has-fx-mobile-dock {
        padding-bottom: 78px;
    }
    .fx-mobile-glass-dock {
        position: fixed;
        bottom: 12px;
        left: 12px;
        right: 12px;
        z-index: 1090;
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        align-items: center;
        padding: 8px 6px;
        border-radius: 999px;
        transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    }
    .fx-mobile-glass-dock.is-hidden-scroll {
        transform: translateY(120%);
        opacity: 0;
        pointer-events: none;
    }
    .fx-dock-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 3px;
        color: var(--text);
        text-decoration: none;
        background: none;
        border: none;
        font-family: inherit;
        font-size: 0.68rem;
        font-weight: 600;
        cursor: pointer;
        padding: 4px 2px;
        opacity: 0.82;
        transition: opacity 0.2s, color 0.2s, transform 0.2s;
    }
    .fx-dock-item.is-active,
    .fx-dock-item:hover {
        opacity: 1;
        color: var(--accent, #4f5bd5);
    }
    .fx-dock-item--cta {
        background: var(--accent, #4f5bd5);
        color: #fff !important;
        opacity: 1;
        border-radius: 999px;
        padding: 7px 4px;
        box-shadow: 0 6px 16px rgba(79, 91, 213, 0.35);
    }
    .fx-mobile-dock-quickcall {
        position: fixed;
        bottom: 84px;
        left: 16px;
        right: 16px;
        z-index: 1095;
        padding: 16px;
        border-radius: 22px;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    .fx-quickcall-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.88rem;
    }
    .fx-quickcall-head button {
        background: none;
        border: none;
        color: var(--text);
        font-size: 1.1rem;
        cursor: pointer;
    }
    .fx-quickcall-actions {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .fx-quickcall-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 10px 14px;
        border-radius: 14px;
        background: rgba(79, 91, 213, 0.14);
        color: var(--text);
        text-decoration: none;
        font-weight: 700;
        font-size: 0.84rem;
    }
    .fx-quickcall-btn.is-wa {
        background: rgba(16, 185, 129, 0.16);
        color: #10b981;
    }
}

/* Ambient luminous stage behind standalone glass sections (.service-banner--carousel, .feature-card:not(.has-image), .newsletter-card) */
.service-banner--carousel::before {
    content: "";
    position: absolute;
    inset: 8% 14%;
    z-index: 0;
    pointer-events: none;
    border-radius: 999px;
    background:
        radial-gradient(48% 55% at 32% 48%, color-mix(in srgb, var(--accent, #e0855c) 34%, transparent) 0%, transparent 72%),
        radial-gradient(46% 52% at 68% 52%, color-mix(in srgb, var(--primary, #33c95d) 26%, transparent) 0%, transparent 72%);
    filter: blur(28px);
    opacity: 0.85;
}
.fx-mobile-dock-quickcall[hidden] {
    display: none !important;
}