/* Inter Font local definition */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 300 700;
    font-display: swap;
    src: url('../fonts/Inter.woff2') format('woff2');
}

/* Material Icons
   font-display: optional — on first paint don't wait for font; icons use size-adjust placeholder to prevent layout shift */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    font-display: block;
    /* Changed from optional to block */
    size-adjust: 100%;
    src: url('../fonts/materialIcons.woff2') format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    /* Fixed-width placeholder to prevent size shifting before and after icon font loading. */
    min-width: 1em;
    min-height: 1em;
    -webkit-font-smoothing: antialiased;
}

/* Oswald Font
   `font-display: swap + metric overrides` makes the fallback font size as close as possible to Oswald's.
   Reduce Layout Shifts (CLS) Caused by Font Switching */
@font-face {
    font-family: 'Oswald';
    font-style: normal;
    font-weight: 500 600;
    font-display: swap;
    ascent-override: 90%;
    descent-override: 22%;
    line-gap-override: 0%;
    src: url('../fonts/oswald.woff2') format('woff2');
}

/* =========================================================
   Specific Styles product achive
   ========================================================= */

/* Navigation */
.jt-nav {
    position: sticky;
    top: 0;
    z-index: 50;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--ast-global-color-6);
}

.jt-nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 5rem;
}

.jt-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jt-logo-icon {
    width: 2.5rem;
    height: 2.5rem;
    background-color: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    border-radius: 0.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt-logo-text {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ast-global-color-2);
}

.jt-logo-image,
.jt-footer-logo {
    height: 60px;
    width: auto;
}

@media (max-width: 768px) {

    .jt-logo-image,
    .jt-footer-logo {
        height: 45px;
    }
}

/* Footer 复用 header 的彩色 Logo 文件（spillot_rgb_logo_tagline.png），
   用 CSS filter 转成白色，省掉单独维护/请求一份白色 Logo 图。
   footer 背景固定为深色（--ast-global-color-8），无需按滚动状态做条件判断。 */
.jt-footer-logo {
    filter: brightness(0) invert(1);
}

.jt-desktop-menu {
    display: none;
    align-items: center;
    gap: 2rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ast-global-color-2);
}

@media (min-width: 768px) {
    .jt-desktop-menu {
        display: flex;
    }
}

.jt-desktop-menu a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.jt-desktop-menu a:hover {
    color: var(--ast-global-color-0);
}

/* Dropdown */
.jt-dropdown-group {
    position: relative;
}

.jt-dropdown-trigger {
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
    transition: color 0.3s;
}

.jt-dropdown-trigger:hover {
    color: var(--ast-global-color-0);
}

.jt-dropdown-trigger .material-icons {
    font-size: 1rem;
    margin-left: 0.25rem;
}

.jt-dropdown-menu {
    position: absolute;
    left: 0;
    top: 100%;
    width: 14rem;
    background: var(--ast-global-color-4);
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.5rem;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.3s ease;
    z-index: 50;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.jt-dropdown-group:hover .jt-dropdown-menu {
    opacity: 1;
    visibility: visible;
}

.jt-dropdown-menu a {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--ast-global-color-6);
    color: var(--ast-global-color-3);
    transition: all 0.2s;
}

.jt-dropdown-menu a:last-child {
    border-bottom: none;
}

/* --- Megamenu Overrides --- */
/* Positioning relative allows auto width to track the dropdown's content */
.jt-nav .jt-mega-menu-wrapper {
    position: relative;
}

.jt-nav .jt-mega-menu {
    left: 50%;
    transform: translate(-50%, 15px);
    /* Center align the dropdown below its parent */
    width: max-content;
    max-width: 90vw;
    /* Prevent screen overflow */
    /* Auto width based on grid columns instead of 100% full screen */
    margin-top: 0;
    padding: 2rem 2.5rem;
    border-radius: 6px;
    /* Soften edges */
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.jt-mega-menu-inner {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
}

@media (max-width: 1500px) {
    .jt-nav .jt-mega-menu {
        left: 50%;
        right: auto;
        transform: translate(-65%, 15px);
    }
}

@media (max-width: 1366px) {
    .jt-nav .jt-mega-menu {
        left: 50%;
        right: auto;
        transform: translate(-62%, 15px);
        padding: 1.5rem;
    }

    .jt-mega-menu-inner {
        gap: 1.5rem;
    }
}

@media (max-width: 1100px) {
    .jt-nav .jt-mega-menu {
        right: auto;
        transform: translate(-42%, 15px);
    }

    .jt-mega-menu-inner {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem 2rem;
    }
}

.jt-mega-col {
    display: flex;
    flex-direction: column;
}

.jt-mega-title {
    font-family: 'Oswald', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--ast-global-color-1);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ast-global-color-0);
}

.jt-mega-title a {
    color: inherit;
    text-decoration: none;
    transition: all 0.2s;
    display: inline-block;
}

.jt-mega-title a:hover {
    color: var(--ast-global-color-0);
    padding-left: 0.5rem;
}

.jt-mega-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jt-mega-list li {
    margin-bottom: 0.5rem;
}

.jt-mega-list li a {
    display: block;
    color: var(--ast-global-color-3);
    text-decoration: none;
    font-size: 0.9375rem;
    padding: 0.25rem 0;
    transition: all 0.2s;
    border: none;
    background: transparent;
}

.jt-mega-list li a:hover {
    color: var(--ast-global-color-0);
    padding-left: 0.5rem;
    background: transparent;
}


/* Mobile Menu */
.jt-mobile-btn-wrap {
    display: flex;
    align-items: center;
}

@media (min-width: 768px) {
    .jt-mobile-btn-wrap {
        display: none;
    }
}

.jt-mobile-btn {
    background: transparent;
    border: none;
    color: var(--ast-global-color-3);
    padding: 0.5rem;
    cursor: pointer;
    box-shadow: none;
}

.jt-mobile-menu {
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: var(--ast-global-color-4);
    border-top: 1px solid var(--ast-global-color-6);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    z-index: 40;
    padding: 1rem;
    box-sizing: border-box;
}

.jt-mobile-menu a {
    display: block;
    padding: 0.75rem 1rem;
    font-weight: 600;
    color: var(--ast-global-color-2);
    text-decoration: none;
}

.jt-mobile-menu a:hover {
    color: var(--ast-global-color-0);
}

.jt-mobile-menu a.jt-btn-primary.ast-button {
    color: var(--ast-global-color-4);
}

.jt-mobile-menu a.jt-btn-primary.ast-button:hover {
    color: var(--ast-global-color-4);

}

.jt-mobile-menu-btn-wrap {
    padding-top: 1rem;
    border-top: 1px solid var(--ast-global-color-6);
    margin-top: 0.5rem;
}

/* Mobile Accordion 鈥?product categories */
.jt-mob-acc {
    border-bottom: 1px solid var(--ast-global-color-6);
}

.jt-mob-acc:first-of-type {
    border-top: 1px solid var(--ast-global-color-6);
}

.jt-mob-acc-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 0.75rem 1rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--ast-global-color-2);
    background: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit;
}

.jt-mob-acc-trigger .material-icons {
    font-size: 1.1rem;
    transition: transform 0.25s ease;
    /* color: var(--ast-global-color-3); */
    flex-shrink: 0;
}

.jt-mob-acc-trigger.is-open .material-icons {
    transform: rotate(180deg);
}

.jt-mob-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.jt-mob-acc-body.is-open {
    max-height: 600px;
}

.jt-mob-acc-body a {
    display: block;
    padding: 0.55rem 1rem 0.55rem 2rem;
    font-size: 0.9rem;
    font-weight: 400;
    color: var(--ast-global-color-3);
    text-decoration: none;
    border: none;
}

.jt-mob-acc-body a:hover {
    color: var(--ast-global-color-0);
}

/* Sub Navigation */
.jt-subnav {
    background: var(--ast-global-color-5);
    border-bottom: 1px solid var(--ast-global-color-6);
    position: sticky;
    top: 5rem;
    z-index: 40;
    backdrop-filter: blur(4px);
}

.jt-subnav-inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0;
    overflow-x: auto;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--ast-global-color-3);
    white-space: nowrap;
    scrollbar-width: none;
    line-height: 2rem;
}

.jt-subnav-inner::-webkit-scrollbar {
    display: none;
}

@media (min-width: 768px) {
    .jt-subnav-inner {
        justify-content: center;
        gap: 3rem;
    }
}

.jt-subnav-inner a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}

.jt-subnav-inner a:hover {
    color: var(--ast-global-color-0);
}

.jt-subnav-top {
    margin-left: auto;
    display: flex;
    align-items: center;
    color: var(--ast-global-color-0);
    cursor: pointer;
}

@media (min-width: 768px) {
    .jt-subnav-top {
        margin-left: 0;
    }
}

/* Home Section Carousel */
.jt-home-carousel-wrap {
    position: relative;
}

.jt-home-carousel-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jt-home-carousel-track-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.jt-home-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.jt-home-carousel-item {
    flex: 0 0 100%;
    padding: 1rem;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .jt-home-carousel-item {
        flex: 0 0 33.3333%;
    }
}

/* Mobile: buttons overlay on card so track fills full width */
@media (max-width: 767px) {
    .jt-home-carousel-inner {
        position: relative;
    }
    .jt-carousel-nav-btn {
        position: absolute;
        /* top: 30%; */
        z-index: 2;
    }
    #carousel-prev { left: 0rem; }
    #carousel-next { right: 0rem; }
    .jt-home-carousel-track-wrap {
        width: 100%;
    }
}

.jt-product-card {
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.5rem;
    overflow: hidden;
    transition: all 0.3s;
}

.jt-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-color: var(--ast-global-color-0);
}

.jt-product-img-wrap {
    aspect-ratio: 431/330;
    overflow: hidden;
}

.jt-product-img-wrap a {
    display: block;
    width: 100%;
    height: 100%;
}

.jt-product-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.jt-product-card:hover .jt-product-img-wrap img {
    transform: scale(1.05);
}

.jt-product-card-body {
    padding: 1.5rem;
    text-align: center;
}

.jt-product-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: var(--ast-global-color-2);
}

.jt-product-card-title a {
    color: inherit;
    text-decoration: none;
}

.jt-product-card-title a:hover {
    color: var(--ast-global-color-0);
}

.jt-product-card-desc {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    margin-bottom: 1.5rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* border-radius: 0.25rem; */
.jt-btn-outline {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--ast-global-color-0);
    color: var(--ast-global-color-0);
    font-weight: 600;
    /* text-transform: uppercase; */
    letter-spacing: 0.05em;
    font-size: 0.875rem;
    transition: all 0.3s;
    background: transparent;
    cursor: pointer;
    text-decoration: none;
}

.jt-btn-outline:hover {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
}

.jt-carousel-nav-btn {
    flex-shrink: 0;
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    border: none;
    border-radius: 50%;
    width: 2.75rem;
    height: 2.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
}

.jt-carousel-nav-btn svg {
    stroke: #fff;
    width: 1.25rem;
    height: 1.25rem;
}

.jt-carousel-nav-btn:hover {
    background: var(--ast-global-color-1);
}

.jt-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

/* Features & Categories */
.jt-space-y-24>*+* {
    margin-top: 6rem;
}

.jt-feature-card {
    background: var(--ast-global-color-4);
    padding: 2.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ast-global-color-6);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
}

.jt-feature-tag {
    color: var(--ast-global-color-0);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    display: block;
}

.jt-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jt-feature-list li {
    display: flex;
    align-items: center;
    font-size: 0.875rem;
    margin-bottom: 0.75rem;
    color: var(--ast-global-color-3);
}

.jt-feature-list .material-icons {
    color: var(--ast-global-color-0);
    margin-right: 0.5rem;
    font-size: 1.25rem;
}

.jt-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .jt-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.jt-category-box {
    position: relative;
    height: 460px;
    border-radius: 0.5rem;
    overflow: hidden;
    cursor: pointer;
}

.jt-category-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s;
}

.jt-category-box:hover img {
    transform: scale(1.1);
}

.jt-category-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 60%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 2rem;
    color: #fff;
}

.jt-category-tag {
    color: var(--ast-global-color-0);
    font-weight: 700;
    font-size: 0.75rem;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.jt-category-title {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    margin-bottom: 1rem;
    color: #fff;
}

.jt-category-link {
    display: inline-flex;
    align-items: center;
    color: var(--ast-global-color-0);
    font-weight: 700;
    font-size: 0.875rem;
    transition: color 0.3s;
}

.jt-category-box:hover .jt-category-link {
    color: #fff;
}

/* Read More / Less Toggle */
.jt-relative-parent {
    position: relative;
    text-align: left;
    /* Force wrapped layers to align left. */
}

.jt-custom-text-wrap {
    overflow: hidden;
    transition: max-height 0.3s ease;
    display: block !important;
    -webkit-line-clamp: unset !important;
    text-align: left;
    /* Ensure text paragraphs are left-aligned. */
}

/* Set the button container to Flex and left-align it (aligning with the left side of the text). */
#btnContainer {
    display: flex;
    justify-content: flex-start;
}

/* Dynamic vertical spacing synchronized with the "Read More" button. */
.jt-btn-spacing-more {
    margin-top: 0.6rem;
    transition: margin 0.3s ease;
}

.jt-btn-spacing-less {
    transition: margin 0.3s ease;
}

.jt-toggle-link {
    display: inline-flex;
    align-items: center;
    color: var(--ast-global-color-0);
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
    /* Add the following line to ensure there is no outline when clicked. */
    outline: none;
}

/* Specifically targets the focused state to remove the browser's default blue outline. */
.jt-toggle-link:focus {
    outline: none;
    box-shadow: none;
}

.jt-toggle-link:hover {
    color: var(--ast-global-color-1);
}

/* Critical Fix: Removed the previous `transform: rotate(180deg)` animation.
   Since JS has already dynamically replaced the icon with `expand_less` (an upward-pointing arrow), retaining the CSS rotation would cause the arrow to appear upside down again.*/
.jt-toggle-link .material-icons {
    margin-right: 0.25rem;
    transition: none;
}

/* Utilities */
.jt-btn-sm {
    padding: 0.5rem 1.25rem;
    font-size: 0.875rem;
}


/* =========================================================
   Astra CSS Variables Conversion product detail
   ========================================================= */

/* Typography & Base */
.jt-html-smooth {
    scroll-behavior: smooth;
}

.jt-body-bg {
    background-color: var(--ast-global-color-4);
    font-family: 'Inter', sans-serif;
    color: var(--ast-global-color-3);
}

/* Layout Utilities */
.jt-container {
    max-width: 80rem;
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
}

.jt-text-center {
    text-align: center;
}

.jt-flex {
    display: flex;
}

.jt-flex-1 {
    flex: 1;
}

.jt-items-center {
    align-items: center;
}

.jt-items-start {
    align-items: flex-start;
}

.jt-justify-center {
    justify-content: center;
}

.jt-relative {
    position: relative;
}

.jt-absolute {
    position: absolute;
}

.jt-absolute-inset {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.jt-overflow-hidden {
    overflow: hidden;
}

.jt-overflow-x {
    overflow-x: auto;
}

.jt-w-full {
    width: 100%;
}

.jt-h-full {
    height: 100%;
}

.jt-w-24 {
    width: 6rem;
}

/* Grid Layouts */
.jt-grid-2 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.jt-grid-faq {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
}

.jt-related-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .jt-grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .jt-related-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (min-width: 1024px) {
    .jt-grid-faq {
        grid-template-columns: 2fr 1fr;
    }
}

@media (min-width: 768px) {
    .jt-order-md-1 {
        order: 1;
    }

    .jt-order-md-2 {
        order: 2;
    }
}

/* Spacing */
.jt-p-8 {
    padding: 2rem;
}

.jt-px-10 {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}

.jt-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.jt-py-12 {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.jt-py-16 {
    padding-top: 5rem;
    padding-bottom: 5rem;
}

.jt-mb-4 {
    margin-bottom: 1rem;
}

.jt-mb-6 {
    margin-bottom: 1.5rem;
}

.jt-mb-20 {
    margin-bottom: 5rem;
}

.jt-ml-2 {
    margin-left: 0.5rem;
}

.jt-mx-1 {
    margin-left: 0.25rem;
    margin-right: 0.25rem;
}

.jt-gap-2 {
    gap: 0.5rem;
}

.jt-gap-3 {
    gap: 0.75rem;
}

.jt-space-y-4>*+* {
    margin-top: 1rem;
}

.jt-h-40 {
    height: 10rem;
}

/* Backgrounds & Borders */
.jt-bg-primary {
    background-color: var(--ast-global-color-4);
}

/* Modification: Modules 1 and 3 use ast-global-color-3. */
.jt-bg-secondary {
    background-color: var(--ast-global-color-5);
}

/* Added: Module 2 now uses ast-global-color-4. */
.jt-bg-alternate {
    background-color: var(--ast-global-color-6);
}


.border-primary {
    border-left-width: 4px;
    border-left-style: solid;
    padding-left: 1rem;
    --tw-border-opacity: 1;
    border-color: rgb(29 78 216 / var(--tw-border-opacity, 1));
}

.jt-bg-alt {
    background-color: var(--ast-global-color-6);
}

.jt-border-y {
    border-top: 1px solid var(--ast-global-color-7);
    border-bottom: 1px solid var(--ast-global-color-7);
}

.jt-radius-lg {
    border-radius: 0.5rem;
}

.jt-placeholder-box {
    aspect-ratio: 16/10;
    background-color: var(--ast-global-color-7);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 0.5rem;
    color: var(--ast-global-color-3);
    font-size: 1.875rem;
    font-weight: bold;
}


/* Typography */
.jt-hero-title {
    font-size: 2.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-5);
    margin-bottom: 1.5rem;
    letter-spacing: 0.025em;
    line-height: 1.2;
}

@media (min-width: 768px) {
    .jt-hero-title {
        font-size: 3.125rem;
    }
}

.jt-hero-subtitle {
    font-size: 1rem;
    color: var(--ast-global-color-5);
    margin-bottom: 1rem;
    line-height: 1.625;
    max-width: 550px;
    /* margin-left: auto;
    margin-right: auto; */
}

.jt-hero-subtitle ul {
    list-style: disc;
    /* padding-left: 1.25em; */
    margin: 0.75rem 0 1.5em 1em;
}

/* .jt-hero-subtitle ul li {
    padding-left: 0;
} */

.jt-title-2 {
    font-size: 1.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 1rem;
}

.jt-title-3 {
    font-size: 1.875rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 1.5rem;
}

.jt-title-4 {
    font-size: 2rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 2.5rem;
}

.jt-text-body {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.625;
    text-align: left;
}

.jt-breadcrumbs {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    margin-bottom: 0.5rem;
}

.jt-breadcrumbs a {
    color: var(--ast-global-color-3);
    transition: color 0.3s;
}

.jt-breadcrumbs a:hover {
    color: var(--ast-global-color-1);
}

/* Buttons */
.jt-btn-primary {
    display: inline-flex;
    align-items: center;
    padding: 1rem 2rem;
    font-weight: 700;
    transition: all 0.3s;
    text-decoration: none;
    cursor: pointer;
}

a.jt-btn-primary.jt-btn-sm.ast-button {
    color: var(--ast-global-color-4)
}

.jt-btn-banner {
    background: var(--ast-global-color-2);
    color: #fff;
    border: none;
    width: auto;
}

@media (max-width: 768px) {
    .jt-btn-banner {
        width: 100%;
        justify-content: center;
    }
}

.jt-btn-primary:hover {
    transform: translateY(-0.25rem);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.jt-shadow-btn {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Hero Section Specifics */
.jt-hero-section {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.hero-pattern {
    background-color: var(--ast-global-color-7);
    background-image: radial-gradient(var(--ast-global-color-6) 0.5px, transparent 0.5px);
    background-size: 20px 20px;
}

.jt-hero-overlay {
    position: absolute;
    inset: 0;
    opacity: 0.9;
}

.jt-hero-overlay img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.hero-content-absolute {
    position: absolute;
    z-index: 10;
    width: 100%;
    max-width: 1170px;
    padding: 0 1rem;
    margin: 0 auto;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Hero Left Layout (About / Contact pages) */
.hero-content-left {
    left: 15%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    width: 36%;
    max-width: 800px;
    text-align: left;
}

.jt-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--ast-global-color-0);
    margin-bottom: 1rem;
}

.jt-hero-label-line {
    display: inline-block;
    width: 32px;
    height: 2px;
    background: var(--ast-global-color-0);
    flex-shrink: 0;
}

.hero-content-left .jt-hero-title {
    text-align: left;
    margin-bottom: 1rem;
}

.hero-content-left .jt-hero-subtitle {
    text-align: left;
    margin-bottom: 0;
    opacity: 0.85;
    margin-left: 0;
    margin-right: 0;
}

/* Mobile & Tablet: hero-content-left to centered layout (matches taxonomy page) */
@media (max-width: 1023px) {
    .hero-content-left {
        left: 50%;
        right: auto;
        top: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        max-width: 640px;
        text-align: center;
    }

    .hero-content-left .jt-hero-title,
    .hero-content-left .jt-hero-subtitle {
        text-align: center;
    }

    .hero-content-left .jt-hero-label {
        justify-content: center;
    }

    .hero-content-left>div[style*="margin-top"] {
        display: flex;
        justify-content: center;
    }
}

/* Product Gallery */
/* Fixed left-alignment issue for UL lists */
.jt-text-body ul {
    margin-left: 1rem;
    /* Align the small black dot precisely with the left edge of the text above it */
    margin-top: 1rem;
    margin-bottom: 1rem;
    list-style-type: disc;
    /* Ensure the small black dot displays correctly */
}

.jt-text-body li {
    margin-bottom: 0.35rem;
    /* Increase line spacing to enhance the reading experience */
}

.main-image-container {
    width: 100%;
    aspect-ratio: 1/1;
    max-width: 650px;
    max-height: 650px;
    background: transparent;
    margin: 0 auto;
}

/* Thumb nav wrapper - flex row so buttons sit outside the scroll area */
.thumb-nav-wrapper {
    max-width: 650px;
    margin: 0 auto;
    gap: 0.75rem;
}

.thumb-nav-wrapper .thumb-scroll-container {
    flex: 1;
    min-width: 0;
}

/* Thumb nav buttons - same style as Related Products carousel buttons */
.thumb-nav-btn {
    flex-shrink: 0;
    /* background: var(--ast-global-color-7, #f5f5f5); */
    background: var(--ast-global-color-0);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
}

.thumb-nav-btn svg {
    width: 1.25rem;
    height: 1.25rem;
}

.thumb-nav-btn:hover {
    background: var(--ast-global-color-1);
    color: #fff;
}

/* Keep the arrow white when in the hover state. */
.thumb-nav-btn:hover svg {
    stroke: #fff;
}

.thumb-nav-btn:focus {
    outline: none;
}

.thumb-nav-btn:focus:not(:focus-visible) {
    /* background: var(--ast-global-color-7, #f5f5f5); */
    background: var(--ast-global-color-0);
    color: inherit;
}

/* Keep the arrow white when in the focused state. */
.thumb-nav-btn:focus svg {
    stroke: #fff;
}

.jt-img-contain {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.jt-img-cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.2s;
}

.thumb-container {
    display: flex;
    gap: 12px;
    transition: transform 0.4s ease;
    padding: 6px 4px;
}

.thumb-item {
    width: calc((100% - 36px) / 4);
    flex-shrink: 0;
    position: relative;
    aspect-ratio: 1/1;
    border-radius: 0.5rem;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--ast-global-color-4);
}

.thumb-item.active-thumb {
    border-color: var(--ast-global-color-0);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.thumb-item:hover {
    border-color: var(--ast-global-color-1);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.jt-thumb-overlay {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s;
}

.thumb-item:hover .jt-thumb-overlay {
    opacity: 1;
}

/* Ensure that the selected thumbnail mask always remains transparent. */
.thumb-item.active-thumb .jt-thumb-overlay {
    opacity: 0 !important;
    background: transparent !important;
}

.thumb-no-image,
.no-image-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: var(--ast-global-color-6);
    color: var(--ast-global-color-3);
    font-weight: 500;
}

.no-image-placeholder {
    font-size: 2.25rem;
    font-weight: 600;
}

/* Thumbnail left and right arrow buttons */
.jt-nav-btn {
    position: absolute;
    top: 50%;
    /* Absolute Vertical Centering: Step 1 */
    transform: translateY(-50%);
    /* Absolute Vertical Centering: Step 2 */
    z-index: 20;
    width: 2.25rem;
    /* Zoom in slightly—the original version is 2rem. */
    height: 2.25rem;
    padding: 0;
    /* Remove the browser's default padding on buttons to prevent circles from becoming ellipses. */
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--ast-global-color-4) !important;
    /* Background Color */
    border: 1px solid var(--ast-global-color-6);
    /* The border color is slightly darker for differentiation. */
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
    /* Restore Original Shadows */
    cursor: pointer;
    transition: all 0.2s ease;
}

/* Button Hover State */
.jt-nav-btn:hover {
    background-color: var(--ast-global-color-5);
    /* Background Darkens on Hover */
    /* Note: Since the element includes a default `translateY` ​​value, you must preserve this `translateY` ​​during the hover state; otherwise, the button will jump erratically. */
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}

/* Left-Right Position Adjustment */
.jt-nav-left {
    left: 0;
}

.jt-nav-right {
    right: 0;
}

/* Arrow SVG Icon Styles */
.jt-icon-svg {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--ast-global-color-3);
    /* Arrow Color */
}

.gallery-thumb-wrapper.no-scroll-arrows .thumb-nav-btn {
    display: none !important;
}

/* Animations for Slider */
.slick-slide {
    animation: fadeIn 0.3s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0.5;
    }

    to {
        opacity: 1;
    }
}

/* Table and Video Tabs */
.jt-tabs-header {
    display: flex;
    border-bottom: 1px solid var(--ast-global-color-7);
    margin-bottom: 1rem;
}

.jt-tab-btn {
    padding: 0.5rem 1.5rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--ast-global-color-3);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    border-top: none;
    border-left: none;
    border-right: none;
}

.jt-tab-btn.active {
    color: var(--ast-global-color-3);
    border-bottom-color: var(--ast-global-color-0);
}

.jt-table {
    width: 100%;
    text-align: left;
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--ast-global-color-3);
    border-collapse: collapse;
    border: 1px solid var(--ast-global-color-6);
}

.jt-table th,
.jt-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--ast-global-color-6);
}

.jt-tr-alt {
    background-color: var(--ast-global-color-5);
}

/* =========================================================
   Fixed styling for the video area and play button.
   ========================================================= */
/* New: Dedicated video wrapper layer, completely eliminating button misalignment. */
.jt-video-wrap {
    position: relative;
    width: 100%;
    border-radius: 0.5rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    display: flex;
    /* Eliminate the "Ghost Space" at the Bottom of Images */
    overflow: hidden;
    /* Preventing Gaussian Blur from Overflowing the Corners */
}

.jt-video-thumb {
    width: 100%;
    height: 380px;
    object-fit: cover;
}

.jt-video-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* The main body of the play button retains the code from the previous version unchanged. */
.jt-play-btn {
    position: relative;
    overflow: hidden;
    -webkit-appearance: button;
    background-image: none;
    text-transform: none;
    margin: 0;
    padding: 0;
    cursor: pointer;

    display: flex;
    width: 5rem;
    height: 5rem;
    align-items: center;
    justify-content: center;

    border-radius: 9999px;
    border-width: 1px;
    border-style: solid;
    /* Fix: Use standard RGBA to avoid errors in older validators. */
    border-color: rgba(255, 255, 255, 0.5);
    background-color: rgba(255, 255, 255, 0.2);

    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);

    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
    text-decoration: none;
}

/* Black Gradient Shadow */
.jt-play-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 9999px;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.4) 33.33%,
            rgba(0, 0, 0, 0.4) 66.66%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    z-index: 0;
}

.jt-play-btn:hover {
    background-color: rgba(255, 255, 255, 0.3);
}

.jt-play-btn .material-icons {
    position: relative;
    z-index: 1;
    color: #ffffff;
    font-size: 2.25rem;
    line-height: 2.5rem;
}

/* Fix: Removed duplicate `.jt-group:hover .jt-play-btn` rule. */
.jt-group:hover .jt-play-btn {
    transform: scale(1.1);
}

/* Related Products */
.jt-section-title-wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 2.5rem;
}

.jt-line {
    height: 1px;
    background-color: var(--ast-global-color-7);
    flex-grow: 1;
}

.jt-section-title {
    padding: 0 2rem;
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0;
}

.jt-related-card {
    text-align: center;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.jt-related-card:hover {
    transform: translateY(-6px);
}

.jt-related-img-wrap {
    aspect-ratio: 4/3.5;
    background-color: var(--ast-global-color-7);
    border-radius: 0.5rem;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1rem;
    color: var(--ast-global-color-3);
}

.jt-related-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.jt-related-card:hover .jt-related-img-wrap img {
    transform: scale(1.06);
}

.jt-related-card p {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    transition: color 0.3s;
}

.jt-related-card:hover p {
    color: var(--ast-global-color-3);
}

/* FAQ Section */
button.accordion-header.faq-toggle {
    border-radius: unset;
    color: var(--ast-global-color-2);
    background-color: var(--ast-global-color-7);
}

.jt-faq-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    background-color: var(--ast-global-color-5);
    position: relative;
}

.accordion-item {
    border-radius: 0.75rem;
    overflow: hidden;
    margin-bottom: 1rem;
    background-color: var(--ast-global-color-7);
    transition: all 0.2s ease;
}

.accordion-item:hover {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.accordion-header,
.jt-input {
    width: 100%;
    background: transparent;
    border: none;
    font-size: 1rem;
    /* Merged from .accordion-header */
    line-height: 1.5;
    /* From .jt-input */
    color: var(--ast-global-color-2);
    /* From .accordion-header */
    outline: none;
    /* From .jt-input */
    box-sizing: border-box;
    /* From .jt-input */
    font-family: inherit;
    /* From .jt-input */
    display: flex;
    /* From .accordion-header */
    justify-content: space-between;
    /* From .accordion-header */
    align-items: center;
    /* From .accordion-header */
    padding: 1.25rem;
    /* From .accordion-header */
    font-weight: 500;
    /* From .accordion-header */
    text-align: left;
    /* From .accordion-header */
    cursor: pointer;
    /* From .accordion-header */
}

.accordion-content {
    transition: max-height 0.3s ease-out, opacity 0.3s ease-out;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    background-color: rgba(255, 255, 255, 0.4);
}

.accordion-inner {
    padding: 1rem 1.25rem;
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
}

.accordion-content.active {
    opacity: 1;
}

/* Sticky Form */
/* =========================================================
   Sticky Form & UI Optimization
   ========================================================= */
.jt-sticky-form {
    position: sticky;
    top: 2rem;
}

.jt-form-box {
    background-color: var(--jt-form-bg-color, var(--ast-global-color-7));
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--ast-global-color-6);
    box-shadow: 0 10px 30px var(--jt-form-shadow-color, rgba(15, 23, 42, 0.08));
}

.jt-form-box h3 {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    text-align: center;
    margin-bottom: 1.5rem;
}

/* 1. Form Outer Container: Responsible for borders and focus animations. */
.jt-input-wrap {
    background-color: var(--ast-global-color-4);
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    /* border: 1px solid var(--ast-global-color-6); */
    transition: all 0.3s ease;
    display: flex;
    /* overflow: hidden; */
    /* Prevent internal inputs from obscuring rounded corners. */
}

/* Focus State: Soft Glow Ring + Border Color Shift (Enhances UI Sophistication) */
.jt-input-wrap:focus-within {
    border-color: var(--ast-global-color-3);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
    /* Tailwind Style Focus Ring */
}

select.jt-input {
    cursor: pointer;
}

textarea.jt-input {
    resize: vertical;
    /* Allow Vertical Stretching */
    min-height: 120px;
    /* Assign a reasonable initial height. */
}

/* 3. Submit Button: Fixed the conflict between Hover and Active states. `border-radius: 0.75rem;` */
.jt-submit-btn {
    width: 100%;
    background-color: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    padding: 1rem;
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 700;
    /* text-transform: uppercase; */
    letter-spacing: 1px;
    border: none;
    cursor: pointer;
    margin-top: 1rem;
    /* Initial 3D thickness of 3px */
    box-shadow: 0 3px 0 0 var(--ast-global-color-1), 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    /* Shorten the transition time to 0.15s, making the tactile feedback crisper and more responsive. */
    transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Note: :hover must strictly be placed before :active. */
.jt-submit-btn:hover {
    transform: translateY(-2px);
    /* Shift up by 2px */
    box-shadow: 0 0 0 0 var(--ast-global-color-1);
    background-color: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
}


/* Pressed State: Generates a realistic physical tactile sensation. */
.jt-submit-btn:active {
    transform: translateY(4px);
    /* Shift downward by 4px (fully depressed) */
    box-shadow: 0 0 0 0 var(--ast-global-color-1);
    /* 3D thickness shadows have completely disappeared. */
}

.jt-form-hint {
    font-size: 0.625rem;
    text-align: center;
    color: var(--ast-global-color-3);
    margin-top: 1rem;
    line-height: 1.2;
}

/* Global Utilities */
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

.no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
}


/* =========================================================
   Footer Styles (Tailwind Converted)
   ========================================================= */

.jt-footer {
    background-color: var(--ast-global-color-8);
    color: var(--ast-global-color-5);
    padding-top: 5rem;
    padding-bottom: 2.5rem;
}

.jt-footer-container {
    max-width: 80rem;
    /* max-w-7xl */
    margin: 0 auto;
    padding: 0 1rem;
    width: 100%;
    box-sizing: border-box;
}

.jt-footer-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    margin-bottom: 4rem;
}

@media (min-width: 768px) {
    .jt-footer-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.jt-footer-heading {
    color: var(--ast-global-color-4);
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.jt-footer-text {
    font-size: 0.875rem;
    line-height: 2;
    /* leading-loose */
    margin-bottom: 1.5rem;
}

/* Social Icons */
.jt-social-wrap {
    display: flex;
    gap: 1rem;
}

.jt-social-link {
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background-color: color-mix(in srgb, var(--ast-global-color-7) 10%, transparent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

.jt-social-link:hover {
    background-color: var(--ast-global-color-0);
    /* Primary Hover */
    color: #ffffff;
}

.jt-social-icon {
    font-size: 0.875rem;
}

/* Link Lists (Products & Support) */
.jt-footer-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.jt-footer-list-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.jt-footer-list-link:hover {
    color: var(--ast-global-color-0);
    /* Primary hover */
}

.jt-footer-list-icon {
    font-size: 10px;
    margin-right: 0.5rem;
}

/* Contact Info List */
.jt-contact-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 0.875rem;
}

.jt-contact-item {
    display: flex;
    align-items: flex-start;
}

.jt-contact-item.jt-items-center {
    align-items: center;
}

.jt-contact-icon {
    color: var(--ast-global-color-0);
    /* Primary color */
    margin-right: 0.75rem;
}

.jt-mt-1 {
    margin-top: 0.25rem;
}

/* Bottom Bar */
.jt-footer-bottom {
    padding-top: 2.5rem;
    border-top: 1px solid color-mix(in srgb, var(--ast-global-color-7) 20%, transparent);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ast-global-color-7);
}

@media (min-width: 768px) {
    .jt-footer-bottom {
        flex-direction: row;
    }
}

.jt-footer-bottom-links {
    display: flex;
    gap: 1.5rem;
    margin-top: 1rem;
}

@media (min-width: 768px) {
    .jt-footer-bottom-links {
        margin-top: 0;
    }
}

.jt-footer-bottom-link {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.jt-footer-bottom-link:hover {
    color: var(--ast-global-color-4);
}

/* =========================================================
   Floating Button & Back to Top (Astra Variables Updated)
   ========================================================= */
/* Sidebar Container */
.floating-contact-wrap {
    position: fixed;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(15, 23, 42, 0.1);
    /* Retain Glassmorphism Effect */
    backdrop-filter: blur(12px);
    border-radius: 8px 0 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-right: none;
    z-index: 40;
    overflow: visible;
}

.sticky-contacts {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}

.contact-item:first-child .contact-link {
    border-top-left-radius: 8px;
}

.contact-item:last-child .contact-link {
    border-bottom-left-radius: 8px;
}

.contact-item {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    position: relative;
}

.contact-item:first-child {
    border-top: none;
}

.contact-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    color: inherit;
    transition: all 0.3s ease;
    text-decoration: none;
}

/* When a button is hovered over, consistently use Astra's brand color (Primary). */
.contact-link:hover {
    background-color: var(--ast-global-color-0);
    color: #ffffff;
}

/* SVG styles equivalent to Tailwind's `w-5 h-5 fill-current` */
.jt-contact-svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* QR Code Pop-up Style */
.qr-popover {
    position: absolute;
    right: 100%;
    top: 50%;
    transform: translateY(-50%) translateX(10px);
    margin-right: 12px;
    padding: 10px;
    background: var(--ast-global-color-4);
    /* Astra — White Background / Main Background */
    border-radius: 8px;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
    width: 130px;
    text-align: center;
}

.contact-item:hover .qr-popover,
.contact-item.qr-active .qr-popover {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}

.qr-popover img {
    width: 100%;
    height: auto;
    display: block;
}

.qr-popover p {
    margin-top: 8px;
    font-size: 12px;
    color: var(--ast-global-color-3);
}

/* Astra Text Color */

/* Back-to-Top Button — Circular Fix */
.back-to-top {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 48px;
    height: 48px;
    padding: 0;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    background-color: var(--ast-global-color-0);
    color: white;
    border: none;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    z-index: 40;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* When the button is hovered over */
.back-to-top:hover {
    background-color: var(--ast-global-color-1);
    transform: scale(1.1);
}

.back-to-top:focus:not(:focus-visible) {
    outline: none;
    box-shadow: none;
}

/* The show/hide animation state remains unchanged. */
.back-to-top.hidden {
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* =========================================================
   Remove the global margin from `<p>` tags within the footer to prevent gaps from appearing at the bottom.
   ========================================================= */
blockquote,
dd,
dl,
figure,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
p,
pre {
    margin: 0;
}


/* =========================================================
   Blog Single Specific Styles (.jt- prefix)
   ========================================================= */

/* Page Banner */
.jt-page-banner {
    background: var(--ast-global-color-4);
    min-height: 550px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.jt-page-banner-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: 0.15;
}

.jt-page-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 70% 50%, color-mix(in srgb, var(--ast-global-color-0) 30%, transparent) 0%, transparent 65%);
    pointer-events: none;
}

.jt-page-banner-inner {
    position: relative;
    z-index: 1;
    text-align: left;
}

.jt-page-banner-title {
    font-size: 3.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.jt-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
}

.jt-breadcrumb a {
    color: var(--ast-global-color-3);
    transition: color 0.2s;
    text-decoration: none;
}

.jt-breadcrumb a:hover {
    color: var(--ast-global-color-0);
}

.jt-breadcrumb .jt-sep {
    color: var(--ast-global-color-6);
}

.jt-breadcrumb .jt-current {
    color: var(--ast-global-color-2);
    font-weight: 600;
}

/* Blog Layout Grid */
.jt-blog-single-section {
    background: var(--ast-global-color-5);
    padding: 5rem 0;
}

.jt-post-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .jt-post-layout {
        grid-template-columns: 1fr 380px;
    }
}

/* Sidebar stack (TOC + Form as separate components, scroll together) */
.jt-sidebar-stack {
    display: flex;
    flex-direction: column;
    gap: 2rem;
    position: sticky;
    top: 6rem;
}

/* TOC Block (inline, full width, under the post title) */
.jt-toc-block {
    width: 100%;
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    padding: 1.75rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.jt-toc-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ast-global-color-0);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.jt-toc-title-text {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.jt-toc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border: none;
    /* background: transparent; */
    color: var(--ast-global-color-5);
    cursor: pointer;
    border-radius: 50%;
    transition: background 0.2s, transform 0.2s;
    flex-shrink: 0;
}

.jt-toc-toggle:hover {
    background: var(--ast-global-color-0);
}

.jt-toc-toggle .material-icons {
    transition: transform 0.25s;
}

.jt-toc-block.is-collapsed .jt-toc-toggle .material-icons {
    transform: rotate(180deg);
}

.jt-toc-list {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    max-height: 1000px;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin 0.3s ease;
    opacity: 1;
}

.jt-toc-block.is-collapsed .jt-toc-list {
    max-height: 0;
    opacity: 0;
}

.jt-toc-list li a {
    display: block;
    padding: 0.375rem 0 0.375rem 0.75rem;
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
    line-height: 1.45;
    border-left: 2px solid transparent;
    transition: all 0.2s;
    border-radius: 0 4px 4px 0;
    text-decoration: none;
    outline: none;
}

.jt-toc-list li a:focus {
    outline: none;
}

.jt-toc-list li a:hover,
.jt-toc-list li a.active {
    color: var(--ast-global-color-0) !important;
    border-left-color: var(--ast-global-color-0) !important;
    background: var(--ast-global-color-6) !important;
}

.jt-toc-list li.toc-h3 a {
    padding-left: 1.5rem;
    font-size: 0.65rem;
    /* color: var(--ast-global-color-3); */
}

/* Main Article */
.jt-post-article {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.jt-post-article-img {
    width: 100%;
    height: 420px;
    object-fit: cover;
    display: block;
}

.jt-post-article-body {
    padding: 1rem;
}

/* Meta Info */
.jt-post-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.jt-post-meta-cat {
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.jt-post-meta-item {
    font-size: 0.8125rem;
    color: var(--ast-global-color-3);
    display: flex;
    align-items: center;
    gap: 5px;
}

.jt-post-meta-item .material-icons {
    color: var(--ast-global-color-0);
    font-size: 0.875rem;
}

.jt-post-article-title {
    font-size: 2.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.3;
    margin-bottom: 1.75rem;
}

/* WP the_content() typography */
.jt-post-content {
    font-size: 0.9375rem;
    color: var(--ast-global-color-3);
    line-height: 1.85;
}

.jt-post-content h2 {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin: 2.25rem 0 0.875rem;
}

.jt-post-content h3 {
    font-size: 1.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin: 1.625rem 0 0.75rem;
}

.jt-post-content p {
    margin-bottom: 1rem;
}

.jt-post-content ul,
.jt-post-content ol {
    /* padding-left: 1.375rem; */
    margin-bottom: 1rem;
    margin-left: 1.5rem;
}

.jt-post-content li {
    margin-bottom: 0.4375rem;
    line-height: 1.7;
}

.jt-post-content blockquote {
    border-left: 4px solid var(--ast-global-color-0);
    padding: 1rem 1.5rem;
    background: var(--ast-global-color-6);
    border-radius: 0 8px 8px 0;
    margin: 1.5rem 0;
    font-style: italic;
    color: var(--ast-global-color-2);
    font-size: 1rem;
}

.jt-post-content img {
    border-radius: 0.5rem;
    margin: 1.25rem 0;
    max-width: 100%;
    height: auto;
}

.jt-post-content a {
    color: var(--ast-global-color-0);
    text-decoration: underline;
}


/* Author Bio */
.jt-author-bio {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    margin-top: 1.5rem;
    flex-wrap: wrap;
}

.jt-author-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.jt-author-bio-info h4 {
    font-size: 1.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.25rem;
}

.jt-author-bio-info span {
    font-size: 0.8125rem;
    color: var(--ast-global-color-0);
    font-weight: 500;
    display: block;
    margin-bottom: 0.625rem;
}

.jt-author-bio-info p {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.65;
    margin: 0;
}

/* Related Posts Widget */
.jt-related-posts {
    margin-top: 2.5rem;
}

.jt-related-posts-title {
    font-size: 1.375rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 1.25rem;
}

.jt-related-grid-3 {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
}

@media (min-width: 768px) {
    .jt-related-grid-3 {
        grid-template-columns: repeat(3, 1fr);
    }
}

.jt-related-card-blog {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: block;
}

.jt-related-card-blog:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}

.jt-related-card-blog img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    transition: transform 0.5s;
}

.jt-related-card-blog:hover img {
    transform: scale(1.05);
}

.jt-related-card-body {
    padding: 1rem;
}

.jt-related-card-title {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.4;
    margin-bottom: 0.375rem;
    transition: color 0.2s;
}

.jt-related-card-blog:hover .jt-related-card-title {
    color: var(--ast-global-color-0);
}

.jt-related-card-date {
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
    display: flex;
    align-items: center;
}

.jt-related-card-date .material-icons {
    color: var(--ast-global-color-0);
    margin-right: 4px;
    font-size: 0.875rem;
}

/* =========================================================
   Blog Archive Page Specific Styles (.jt- prefix)
   ========================================================= */

.jt-blog-archive-section {
    background: var(--ast-global-color-5);
    padding: 5rem 0;
}

.jt-blog-archive-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .jt-blog-archive-layout {
        grid-template-columns: 1fr 300px;
    }
}

/* Featured Post (First Article) */
.jt-blog-featured {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    margin-bottom: 2rem;
    display: grid;
    grid-template-columns: 1fr;
    transition: box-shadow 0.3s;
    text-decoration: none;
}

@media (min-width: 768px) {
    .jt-blog-featured {
        grid-template-columns: 1fr 1fr;
    }
}

.jt-blog-featured:hover {
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.jt-blog-featured img {
    width: 100%;
    height: 376px;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.jt-blog-featured:hover img {
    transform: scale(1.05);
}

.jt-blog-featured-body {
    padding: 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jt-blog-badge {
    display: inline-block;
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 0.6875rem;
    font-weight: 700;
    padding: 0.25rem 0.75rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 1rem;
    width: fit-content;
}

.jt-blog-featured-title {
    font-size: 1.375rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.4;
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.jt-blog-featured:hover .jt-blog-featured-title {
    color: var(--ast-global-color-0);
}

.jt-blog-featured-desc {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.65;
    margin-bottom: 1.25rem;
}

.jt-blog-featured-meta {
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.jt-blog-featured-meta span {
    display: flex;
    align-items: center;
}

.jt-blog-featured-meta .material-icons {
    color: var(--ast-global-color-0);
    margin-right: 4px;
    font-size: 0.875rem;
}

.jt-btn-read-more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ast-global-color-0);
    margin-top: 1rem;
    transition: gap 0.2s;
}

.jt-btn-read-more:hover {
    gap: 10px;
}

/* Grid Posts */
.jt-blog-archive-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 768px) {
    .jt-blog-archive-main-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.jt-blog-archive-card {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    text-decoration: none;
    display: block;
}

.jt-blog-archive-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.jt-blog-archive-card img {
    width: 100%;
    height: 190px;
    object-fit: cover;
    transition: transform 0.5s;
}

.jt-blog-archive-card:hover img {
    transform: scale(1.05);
}

.jt-blog-archive-card-body {
    padding: 1.25rem;
}


.jt-blog-archive-card-title {
    font-size: 1rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.45;
    margin-bottom: 0.5rem;
    transition: color 0.2s;
}

.jt-blog-archive-card:hover .jt-blog-archive-card-title {
    color: var(--ast-global-color-0);
}

.jt-blog-archive-card-desc {
    font-size: 0.8125rem;
    color: var(--ast-global-color-3);
    line-height: 1.6;
    margin-bottom: 0.875rem;
}

.jt-blog-archive-card-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
}

.jt-blog-archive-card-meta span {
    display: flex;
    align-items: center;
}

.jt-blog-archive-card-meta .material-icons {
    color: var(--ast-global-color-0);
    margin-right: 4px;
    font-size: 0.875rem;
}

/* Pagination Widget (WP Native Supported) */
.jt-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 3rem;
}

.accordion-header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 20px;
    background: #fff;
    border: 1px solid var(--ast-global-color-6);
    cursor: pointer;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--ast-global-color-1);
    transition: all 0.3s;
    outline: none;
}

.accordion-header:focus,
.accordion-header:active {
    outline: none !important;
    border-color: var(--ast-global-color-6) !important;
}

.accordion-header:hover {
    background: var(--ast-global-color-4);
    color: var(--ast-global-color-0);
    border-color: var(--ast-global-color-6) !important;
}

.jt-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--ast-global-color-6);
    border-radius: 4px;
    font-size: 0.875rem;
    color: var(--ast-global-color-2);
    background: var(--ast-global-color-4);
    transition: all 0.2s;
    text-decoration: none;
}

.jt-pagination a.page-numbers:hover {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #fff;
}

.jt-pagination span.current {
    background: var(--ast-global-color-0);
    border-color: var(--ast-global-color-0);
    color: #fff;
    font-weight: 700;
}

.jt-pagination .dots {
    background: transparent;
    border: none;
}

/* Sidebar Layout */
.jt-blog-sidebar {
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.jt-sidebar-widget {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    padding: 1.75rem;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.jt-sidebar-widget-title {
    font-size: 1.0625rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--ast-global-color-0);
}

/* Sidebar Search */
.jt-sidebar-search {
    display: flex;
}

.jt-sidebar-search input {
    flex: 1;
    padding: 0.625rem 0.875rem;
    border: 1px solid var(--ast-global-color-6);
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-family: inherit;
    font-size: 0.875rem;
    outline: none;
    transition: border-color 0.2s;
    background: var(--ast-global-color-4);
    color: var(--ast-global-color-2);
}

.jt-sidebar-search input:focus {
    border-color: var(--ast-global-color-0);
}

.jt-sidebar-search button {
    background: var(--ast-global-color-0);
    color: #fff;
    border: none;
    padding: 0.625rem 1rem;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    transition: background 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt-sidebar-search button:hover {
    background: var(--ast-global-color-1);
}


/* Sidebar Recent Posts */
.jt-sidebar-recent {
    list-style: none;
    padding: 0;
    margin: 0;
}

.jt-sidebar-recent li {
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--ast-global-color-6);
}

.jt-sidebar-recent li:last-child {
    border-bottom: none;
}

.jt-sidebar-recent img {
    width: 64px;
    height: 64px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0;
}

.jt-sidebar-recent-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.jt-sidebar-recent-text a {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--ast-global-color-2);
    line-height: 1.4;
    text-decoration: none;
    transition: color 0.2s;
}

.jt-sidebar-recent-text a:hover {
    color: var(--ast-global-color-0);
}

.jt-sidebar-recent-date {
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
    display: flex;
    align-items: center;
    gap: 4px;
}

.jt-sidebar-recent-date .material-icons {
    font-size: 0.875rem;
    color: var(--ast-global-color-0);
}


/* =========================================================
   SCROLL REVEAL ANIMATIONS
========================================================= */
.reveal,
.reveal-up,
.reveal-left,
.reveal-right {
    opacity: 0;
    transition: opacity 0.7s ease, transform 0.7s ease;
    will-change: transform, opacity;
}

.reveal {
    transform: none;
}

.reveal-up {
    transform: translateY(40px);
}

.reveal-left {
    transform: translateX(-50px);
}

.reveal-right {
    transform: translateX(50px);
}

.reveal.visible,
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* Stagger grid children */
.stagger-children>* {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: transform, opacity;
}

.stagger-children.visible>*:nth-child(1) {
    opacity: 1;
    transform: none;
    transition-delay: 0.05s;
}

.stagger-children.visible>*:nth-child(2) {
    opacity: 1;
    transform: none;
    transition-delay: 0.15s;
}

.stagger-children.visible>*:nth-child(3) {
    opacity: 1;
    transform: none;
    transition-delay: 0.25s;
}

.stagger-children.visible>*:nth-child(4) {
    opacity: 1;
    transform: none;
    transition-delay: 0.35s;
}

.stagger-children.visible>*:nth-child(5) {
    opacity: 1;
    transform: none;
    transition-delay: 0.45s;
}

.stagger-children.visible>*:nth-child(6) {
    opacity: 1;
    transform: none;
    transition-delay: 0.55s;
}

.stagger-children.visible>*:nth-child(7) {
    opacity: 1;
    transform: none;
    transition-delay: 0.65s;
}

.stagger-children.visible>*:nth-child(8) {
    opacity: 1;
    transform: none;
    transition-delay: 0.75s;
}

.stagger-children.visible>*:nth-child(9) {
    opacity: 1;
    transform: none;
    transition-delay: 0.85s;
}

.stagger-children.visible>*:nth-child(10) {
    opacity: 1;
    transform: none;
    transition-delay: 0.95s;
}

/* To prevent additional content from being hidden again in the future, I'm putting a safety net in place. */
.stagger-children.visible>*:nth-child(n+11) {
    opacity: 1;
    transform: none;
    transition-delay: 1.05s;
}

/* Client Slider */
.clients-slider .slick-slide {
    padding: 0 1rem;
    display: flex !important;
    align-items: center;
    justify-content: center;
}

.clients-slider img {
    height: 70px;
    width: 140px;
    object-fit: contain;
    filter: grayscale(55%);
    transition: filter 0.3s, transform 0.3s;
    margin: 0 auto;
}

.clients-slider img:hover {
    filter: grayscale(0%);
    transform: scale(1.06);
}

/* =========================================================
   Contact Page Specific Styles (.jt- prefix)
   ========================================================= */

/* Contact Cards Section */
.jt-contact-cards-section {
    background: var(--ast-global-color-5);
    padding: 5rem 0;
}

.jt-contact-cards-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

@media (min-width: 768px) {
    .jt-contact-cards-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.jt-contact-card {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    padding: 2.5rem 1.75rem;
    text-align: center;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.jt-contact-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.jt-contact-card-icon {
    width: 4.25rem;
    height: 4.25rem;
    background: var(--ast-global-color-6);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    transition: background 0.3s;
}

.jt-contact-card:hover .jt-contact-card-icon {
    background: var(--ast-global-color-0);
}

.jt-contact-card-icon .material-icons {
    font-size: 1.625rem;
    color: var(--ast-global-color-0);
    transition: color 0.3s;
}

.jt-contact-card:hover .jt-contact-card-icon .material-icons {
    color: var(--ast-global-color-4);
}

.jt-contact-card-title {
    font-size: 1.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.625rem;
}

.jt-contact-card-text {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.65;
}

.jt-contact-card-text a {
    color: var(--ast-global-color-0);
    transition: color 0.2s;
    text-decoration: none;
}

.jt-contact-card-text a:hover {
    color: var(--ast-global-color-1);
}

/* Contact Main Form & Map */
.jt-contact-page-section {
    background: var(--ast-global-color-4);
    padding: 5rem 0;
}

.jt-contact-main-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 3.75rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .jt-contact-main-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.jt-form-section-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ast-global-color-0);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.5rem;
}

.jt-form-subtitle {
    font-size: 0.9375rem;
    color: var(--ast-global-color-3);
    margin-bottom: 2rem;
    line-height: 1.6;
}

.jt-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .jt-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.jt-form-upload {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    margin-top: 0.5rem;
}

.jt-btn-upload {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--ast-global-color-6);
    color: var(--ast-global-color-2);
    font-size: 0.875rem;
    padding: 0.625rem 1.25rem;
    border: 1px solid var(--ast-global-color-7);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.jt-btn-upload:hover {
    background: var(--ast-global-color-7);
}

/* Gradient Map Guide Block */
.jt-contact-map-box {
    background: linear-gradient(135deg, var(--ast-global-color-8) 0%, var(--ast-global-color-0) 100%);
    border-radius: 0.625rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3.75rem 2.5rem;
    min-height: 460px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.jt-contact-map-box .material-icons {
    font-size: 3.25rem;
    opacity: 0.7;
    margin-bottom: 1.5rem;
}

.jt-contact-map-box h3 {
    font-size: 1.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    margin-bottom: 0.75rem;
    color: #fff;
}

.jt-contact-map-box p {
    font-size: 0.9375rem;
    opacity: 0.8;
    line-height: 1.65;
    margin-bottom: 0.5rem;
}

.jt-btn-map {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.75rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    padding: 0.625rem 1.375rem;
    border-radius: 0.25rem;
    font-size: 0.875rem;
    font-weight: 600;
    transition: background 0.2s;
    text-decoration: none;
}

.jt-btn-map:hover {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

/* Product Grid 6 (3x2 static grid) */
.jt-product-grid-6 {
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 24px;
    margin-top: 2rem;
}

@media (min-width: 640px) {
    .jt-product-grid-6 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .jt-product-grid-6 {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* Contact Page FAQ Card Grid */
.jt-faq-card-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .jt-faq-card-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.jt-faq-card {
    background: #fff;
    border-radius: 10px;
    padding: 28px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s, opacity 0.6s ease, transform 0.6s ease;
}

.jt-faq-card:hover {
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
}

.jt-faq-q {
    font-size: 1rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 12px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.jt-faq-q-badge {
    background: var(--ast-global-color-0);
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}

.jt-faq-a {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.75;
    padding-left: 36px;
}

/* =========================================================
   About Us Page Specific Styles (.jt- prefix)
   ========================================================= */

/* Common About Typography */
.jt-section-label {
    font-size: 0.8125rem;
    font-weight: 700;
    color: var(--ast-global-color-0);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 0.75rem;
}

.jt-section-heading {
    font-size: 2.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.25;
    margin-bottom: 1.25rem;
}

/* Our Story Section */
.jt-about-page-section {
    background: var(--ast-global-color-4);
    padding: 5rem 0;
}

.jt-about-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 4rem;
    align-items: center;
}

@media (min-width: 1024px) {
    .jt-about-story-grid {
        grid-template-columns: 1fr 1fr;
    }
}

.jt-about-story-img {
    position: relative;
    overflow: hidden;
    border-radius: 0.625rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.jt-about-story-img img {
    width: 100%;
    height: 520px;
    object-fit: cover;
    transition: transform 0.5s;
    display: block;
}

.jt-about-story-img:hover img {
    transform: scale(1.03);
}

.jt-about-story-badge {
    position: absolute;
    bottom: 1.75rem;
    left: 1.75rem;
    background: var(--ast-global-color-0);
    color: #fff;
    border-radius: 0.5rem;
    padding: 1rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.jt-about-story-badge .badge-num {
    font-size: 2.375rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    line-height: 1;
}

.jt-about-story-badge .badge-text {
    font-size: 0.8125rem;
    opacity: 0.9;
    margin-top: 0.25rem;
}

.jt-about-story-content p {
    font-size: 0.9375rem;
    color: var(--ast-global-color-3);
    line-height: 1.8;
    margin-bottom: 1rem;
}

.jt-about-checklist {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.jt-about-checklist li {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    font-size: 0.9375rem;
    color: var(--ast-global-color-3);
}

.jt-about-checklist .check-dot {
    width: 20px;
    height: 20px;
    background: var(--ast-global-color-0);
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt-about-checklist .check-dot .material-icons {
    font-size: 10px;
    color: #fff;
    font-weight: bold;
}

/* Stats Section */
.jt-stats-section {
    background: var(--ast-global-color-2);
    padding: 4.5rem 0;
}

.jt-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .jt-stats-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.jt-stat-item {
    text-align: center;
    padding: 1.75rem 1.25rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .jt-stat-item {
        border-bottom: none;
    }
}

.jt-stat-item:last-child,
.jt-stat-item:nth-child(even) {
    border-right: none;
}

@media (min-width: 768px) {
    .jt-stat-item:nth-child(even) {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }

    .jt-stat-item:last-child {
        border-right: none;
    }
}

.jt-stat-num {
    font-size: 3.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}

.jt-stat-num em {
    color: var(--ast-global-color-0);
    font-style: normal;
}

.jt-stat-label {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    margin-top: 0.5rem;
}

/* Team Section */
.jt-team-section {
    background: var(--ast-global-color-5);
    padding: 5rem 0;
}

.jt-team-header {
    text-align: center;
    margin-bottom: 3rem;
}

.jt-team-header p {
    font-size: 1rem;
    color: var(--ast-global-color-3);
    max-width: 600px;
    margin: 0 auto;
}

.jt-team-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.5rem;
}

@media (min-width: 480px) {
    .jt-team-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .jt-team-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

.jt-team-card {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
}

.jt-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12);
}

.jt-team-card img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    object-position: top;
    transition: transform 0.5s;
}

.jt-team-card:hover img {
    transform: scale(1.04);
}

.jt-team-card-body {
    padding: 1.25rem;
}

.jt-team-name {
    font-size: 1.0625rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.25rem;
}

.jt-team-role {
    font-size: 0.8125rem;
    color: var(--ast-global-color-0);
    font-weight: 500;
    margin-bottom: 0.875rem;
}

.jt-team-social {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
}

.jt-team-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--ast-global-color-6);
    border-radius: 50%;
    color: var(--ast-global-color-0);
    font-size: 12px;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
}

.jt-team-social a:hover {
    background: var(--ast-global-color-0);
    color: #fff;
}

.jt-team-social-svg {
    width: 18px;
    height: 18px;
    display: block;
}

.jt-input {
    width: 100%;
    padding: 1rem;
    background: #fff;
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.25rem;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--ast-global-color-3);
    font-family: inherit;
    transition: border-color 0.3s;
    outline: none;
    cursor: pointer;
}

.jt-input:focus {
    border-color: var(--ast-global-color-5);
    outline: none !important;
    box-shadow: none !important;
}


/* Core Values Section */
.jt-values-section {
    background: var(--ast-global-color-4);
    padding: 5rem 0;
}

.jt-values-header {
    text-align: center;
    margin-bottom: 3rem;
}

.jt-values-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

@media (min-width: 768px) {
    .jt-values-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.jt-value-card {
    padding: 2.5rem 1.75rem;
    border-radius: 0.625rem;
    border: 1px solid var(--ast-global-color-7);
    transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s;
}

.jt-value-card:hover {
    border-color: var(--ast-global-color-0);
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
}

.jt-value-icon {
    width: 3.5rem;
    height: 3.5rem;
    background: var(--ast-global-color-6);
    border-radius: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
    transition: background 0.3s;
}

.jt-value-card:hover .jt-value-icon {
    background: var(--ast-global-color-0);
}

.jt-value-icon .material-icons {
    font-size: 1.5rem;
    color: var(--ast-global-color-0);
    transition: color 0.3s;
}

.jt-value-card:hover .jt-value-icon .material-icons {
    color: #fff;
}

.jt-value-title {
    font-size: 1.1875rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.75rem;
}

.jt-value-desc {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.75;
}

/* Call to Action Section */
.jt-cta-section {
    background: linear-gradient(135deg, var(--ast-global-color-2) 0%, var(--ast-global-color-0) 100%);
    padding: 5rem 0;
    text-align: center;
}

.jt-cta-section h2 {
    font-size: 2.625rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1rem;
}

.jt-cta-section p {
    font-size: 1.0625rem;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    line-height: 1.65;
}

.jt-cta-buttons {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.jt-btn-cta {
    display: inline-flex;
    align-items: center;
    background: #fff;
    color: var(--ast-global-color-2);
    font-size: 1rem;
    font-weight: 700;
    padding: 0.9rem 2.25rem;
    border-radius: 0.25rem;
    transition: background 0.25s, transform 0.25s;
    text-decoration: none;
}

.jt-btn-cta:hover {
    background: var(--ast-global-color-2);
    transform: translateY(-2px);
    color: var(--ast-global-color-5);
}

.jt-btn-cta-outline {
    display: inline-flex;
    align-items: center;
    background: transparent;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.8rem 2.1rem;
    border: 2px solid rgba(255, 255, 255, 0.55);
    border-radius: 0.25rem;
    transition: all 0.25s;
    text-decoration: none;
}

.jt-btn-cta-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: #fff;
    transform: translateY(-2px);
    color: #fff;
}

/* =========================================================
   Home Page Specific Styles (.jt- prefix)
   ========================================================= */

/* Hero Slider Section */
.jt-hero-slider-wrap
 {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Lock the height prior to Slick JS initialization to prevent layout collapse—and the resulting CLS—during page load.
       The height of 720px should be kept consistent with that of `.jt-hero-slider .jt-slide`.*/
    min-height: 720px;
}

.jt-hero-slider .jt-slide {
    position: relative;
    height: 720px;
    overflow: hidden;
}

/* Before Slick initializes, the first slide is displayed immediately, without waiting for JS. */
.jt-hero-slider:not(.slick-initialized) .jt-slide:first-child {
    display: block !important;
    position: relative;
    width: 100%;
}

.jt-hero-slider:not(.slick-initialized) .jt-slide:first-child .jt-slide-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* The remaining slides are hidden prior to initialization to prevent image overlapping. */
.jt-hero-slider:not(.slick-initialized) .jt-slide:not(:first-child) {
    display: none !important;
}

.jt-slide-bg-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    z-index: 0;
}

/* Poster Overlay Color */
.jt-slide-overlay {
    position: absolute;
    inset: 0;
    /* background: rgba(9, 44, 71, 0.55); */
    background-color: color-mix(in srgb, var(--ast-global-color-3) 55%, transparent);
    z-index: 1;
}

.jt-slide-content-outer {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    z-index: 2;
}

.jt-slide-content-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.jt-slide-content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 42%;
    min-width: 340px;
}

/* Slick Text Animations */
.slick-current .jt-slide-subtitle {
    animation: heroFadeUp 0.8s ease both;
    animation-delay: 0.2s;
}

.slick-current .jt-slide-title {
    animation: heroFadeUp 0.8s ease both;
    animation-delay: 0.4s;
}

.slick-current .jt-slide-desc {
    animation: heroFadeUp 0.8s ease both;
    animation-delay: 0.6s;
}

.slick-current .jt-btn-primary {
    animation: heroFadeUp 0.8s ease both;
    animation-delay: 0.8s;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.jt-slide-subtitle {
    font-size: 2.5rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 400;
    color: #fff;
    line-height: 1.3;
    margin-bottom: 0.5rem;
}

.jt-slide-title {
    font-size: 4.375rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    /* font-metric-overrides reduces the jump amplitude when switching fonts.
       `min-height` ensures that the element does not collapse to a height of 0 before fonts have loaded, thereby preventing the content below it from shifting upward. */
    min-height: 5.05rem;
    /* 4.375rem × 1.15 (line-height) ≈ Height occupied by one line */
}

.jt-slide-desc {
    font-size: 1rem;
    font-weight: 400;
    color: #fff;
    line-height: 1.7;
    max-width: 520px;
    margin-bottom: 2.25rem;
}

/* Slick Slider Arrows Overrides */
.jt-hero-slider-wrap .slick-prev,
.jt-hero-slider-wrap .slick-next {
    width: 48px;
    height: 48px;
    z-index: 10;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transition: all 0.25s;
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fff;
}

.jt-hero-slider-wrap .slick-prev {
    left: 28px;
}

.jt-hero-slider-wrap .slick-next {
    right: 28px;
}

/* `:focus` state triggered by mouse clicks: Overrides Slick's default `transparent` setting to maintain a semi-transparent appearance. */
.jt-hero-slider-wrap .slick-prev:focus,
.jt-hero-slider-wrap .slick-next:focus {
    color: #fff;
    outline: none;
    background: rgba(255, 255, 255, 0.18);
}

/* `:focus-visible` on hover or keyboard navigation: Displays a primary-color highlight. */
.jt-hero-slider-wrap .slick-prev:hover,
.jt-hero-slider-wrap .slick-next:hover,
.jt-hero-slider-wrap .slick-prev:focus-visible,
.jt-hero-slider-wrap .slick-next:focus-visible {
    color: #fff;
    outline: none;
    background: var(--ast-global-color-0);
}

.jt-hero-slider-wrap .slick-prev::before,
.jt-hero-slider-wrap .slick-next::before {
    display: none !important;
}

/* SVG Arrow Icon Styles (Alternative to Material Icons) */
.jt-hero-slider-wrap .slick-prev svg,
.jt-hero-slider-wrap .slick-next svg {
    width: 24px;
    height: 24px;
    display: block;
    color: inherit;
}

@media (max-width: 768px) {

    .jt-hero-slider-wrap .slick-prev svg,
    .jt-hero-slider-wrap .slick-next svg {
        width: 20px;
        height: 20px;
    }
}

.jt-hero-slider-wrap .slick-dotted.slick-slider {
    margin-bottom: 0;
}

.jt-hero-slider-wrap .slick-dots {
    bottom: 22px;
}

/* 圆点用纯 CSS 圆形，不再依赖字体字形：slick 字体移除后系统字体的 • 在同样
   font-size 下渲染偏小（字形占 em 框比例不同），改成定宽圆形后大小完全可控 */
.jt-hero-slider-wrap .slick-dots li button::before {
    content: '';
    width: 12px;
    height: 12px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #fff;
    opacity: 0.55;
}

.jt-hero-slider-wrap .slick-dots li.slick-active button::before {
    opacity: 1;
}

/* Home About Section */
.jt-home-about-section {
    padding: 5.5rem 0;
    background: var(--ast-global-color-4);
    /* `contain:layout` confines any internal layout shifts to this container, preventing them from propagating to the global CLS. */
    contain: layout;
}

.jt-home-about-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem;
    align-items: center;
}

/* Image Container with Locked Height: Prevents container collapse before the image loads, eliminating CLS. */
.jt-home-about-img {
    overflow: hidden;
    border-radius: 0.375rem;
    height: 500px;
}

.jt-home-about-img img {
    width: 100%;
    height: 500px;
    object-fit: cover;
    border-radius: 0.375rem;
    transition: transform 0.5s ease;
}

.jt-home-about-img:hover img {
    transform: scale(1.03);
}

.jt-home-highlight-text {
    font-size: 1rem;
    font-weight: 600;
    color: var(--ast-global-color-0);
    line-height: 1.7;
    margin-bottom: 1.25rem;
}

/* Home Products Section */
.jt-home-products-section {
    background: var(--ast-global-color-5);
    padding: 5.5rem 0;
}

.jt-home-products-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-bottom: 3rem;
}

.jt-home-products-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.jt-home-product-card {
    background: var(--ast-global-color-4);
    border-radius: 0.375rem;
    overflow: hidden;
    transition: transform 0.3s, box-shadow 0.3s;
}

.jt-home-product-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.18);
}

.jt-home-product-card img {
    width: 100%;
    aspect-ratio: 300 / 220;
    height: auto;
    object-fit: cover;
    background-color: #fff;
    transition: transform 0.5s;
}

.jt-home-product-card:hover img {
    transform: scale(1.05);
}

.jt-home-product-body {
    padding: 1.25rem;
}

.jt-home-product-title {
    font-size: 1.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-0);
    margin-bottom: 0.5rem;
}

.jt-home-product-desc {
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    margin-bottom: 0.75rem;
    line-height: 1.5;
}

.jt-home-product-link {
    font-size: 0.875rem;
    color: var(--ast-global-color-0);
    font-weight: 500;
    text-decoration: none;
}

.jt-icon-suit {
    font-size: 1em;
    vertical-align: middle;
    line-height: 1;
    width: 1em;
    height: 1em;
    fill: currentColor;
    display: inline-block;
    flex-shrink: 0;
}

/* Home Categories Icons */
.jt-home-categories-section {
    background: var(--ast-global-color-4);
    padding: 5.5rem 0;
}

.jt-home-categories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.jt-home-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.25rem 1.5rem;
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.625rem;
    transition: all 0.3s;
}

.jt-home-category-card:hover {
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-4px);
    border-color: var(--ast-global-color-0);
}

.jt-home-category-icon {
    width: 64px;
    height: 64px;
    background: var(--ast-global-color-0);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s, background-color 0.3s;
}

.jt-home-category-icon svg {
    width: 28px;
    height: 28px;
    display: block;
    fill: currentColor;
}

.jt-home-category-icon img {
    width: 28px;
    height: 28px;
    object-fit: contain;
}

.jt-home-category-icon .material-icons {
    font-size: 28px;
}

.jt-home-category-card:hover .jt-home-category-icon {
    transform: scale(1.1);
}

.jt-home-category-name {
    font-size: 1.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-0);
    margin-bottom: 0.75rem;
}

/* Home Banner Sections */
.jt-home-banner-section {
    padding: 5.5rem 0;
    background: var(--ast-global-color-4);
}

.jt-home-banner-section.jt-reversed {
    background: var(--ast-global-color-5);
}

.jt-home-banner-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3.75rem;
    align-items: center;
}

.jt-home-banner-section.jt-reversed .jt-home-banner-inner {
    direction: rtl;
}

.jt-home-banner-section.jt-reversed .jt-home-banner-img,
.jt-home-banner-section.jt-reversed .jt-home-banner-content {
    direction: ltr;
}

.jt-home-banner-img {
    overflow: hidden;
    border-radius: 0.375rem;
}

.jt-home-banner-img img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    border-radius: 0.375rem;
    transition: transform 0.5s ease;
}

.jt-home-banner-img:hover img {
    transform: scale(1.03);
}

.jt-home-banner-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.jt-home-banner-content .jt-btn-primary {
    align-self: flex-start;
}

.jt-home-banner-title {
    font-size: 2.1875rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-2);
    line-height: 1.3;
    margin-bottom: 1.25rem;
}

/* Home Blog Grid */
.jt-home-blog-section {
    background: var(--ast-global-color-5);
    padding: 5.5rem 0;
}

.jt-home-blog-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.75rem;
}

.jt-home-blog-card {
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s, box-shadow 0.3s;
}

.jt-home-blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
}

.jt-home-blog-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    transition: transform 0.5s;
}

.jt-home-blog-card:hover img {
    transform: scale(1.05);
}

.jt-home-blog-card-body {
    padding: 1.5rem;
}

.jt-home-blog-card-title {
    font-size: 1.125rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-0);
    margin-bottom: 0.75rem;
    transition: color 0.2s;
}

.jt-home-blog-card-title:hover {
    color: var(--ast-global-color-2);
}

/* Home Contact Section */
.jt-home-contact-section {
    background: var(--ast-global-color-4);
    padding: 5.5rem 0;
}

.jt-home-contact-inner {
    display: grid;
    grid-template-columns: 6.5fr 3.5fr;
    gap: 5rem;
    align-items: start;
}

.jt-home-contact-info-title {
    font-size: 1.25rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-0);
    margin-bottom: 0.5rem;
}

.jt-home-contact-info-sub {
    font-size: 1rem;
    color: var(--ast-global-color-2);
    margin-bottom: 1.75rem;
}

.jt-home-contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-bottom: 2rem;
}

.jt-home-contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
}

.jt-home-contact-info-item .material-icons {
    font-size: 1.25rem;
    color: var(--ast-global-color-0);
    margin-top: 0.125rem;
}

.jt-home-contact-info-item p {
    font-size: 1rem;
    color: var(--ast-global-color-3);
    line-height: 1.5;
    margin: 0;
}

/* Home Responsive Overrides */
@media (max-width: 1024px) {
    .jt-slide-content {
        width: 55%;
    }

    .jt-slide-title {
        font-size: 3.25rem;
        min-height: 3.74rem;
        /* 3.25rem x 1.15 */
    }

    .jt-slide-subtitle {
        font-size: 1.875rem;
    }

    /* In responsive mode, the slider height is reduced, and `min-height` is synchronized accordingly. */

    .jt-hero-slider-wrap
     {
        min-height: 100svh;
    }

    .jt-hero-slider .jt-slide {
        height: 100svh;
    }

    /* Regarding images: reduce height when displayed in a single column, and synchronize with the container. */
    .jt-home-about-img,
    .jt-home-about-img img {
        height: 360px;
    }

    .jt-home-about-inner,
    .jt-home-contact-inner {
        grid-template-columns: 1fr;
    }

    .jt-home-banner-inner,
    .jt-home-banner-section.jt-reversed .jt-home-banner-inner {
        grid-template-columns: 1fr;
        direction: ltr;
    }

    .jt-home-banner-img img {
        height: 300px;
    }
}

@media (max-width: 768px) {
    .jt-slide-content {
        width: 80%;
    }

    .jt-slide-title {
        font-size: 2.375rem;
        min-height: 2.73rem;
        /* 2.375rem x 1.15 */
    }

    .jt-slide-subtitle {
        font-size: 1.375rem;
    }

    .jt-hero-slider-wrap
     {
        min-height: 100svh;
    }

    .jt-hero-slider .jt-slide {
        height: 100svh;
    }

    .jt-home-products-grid,
    .jt-home-categories-grid,
    .jt-home-blog-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 480px) {
    .jt-slide-content {
        width: 100%;
    }


    .jt-hero-slider-wrap
     {
        min-height: 100svh;
    }

    .jt-hero-slider .jt-slide {
        height: 100svh;
    }

    .jt-home-about-img,
    .jt-home-about-img img {
        height: 260px;
    }

    .jt-home-products-grid,
    .jt-home-categories-grid,
    .jt-home-blog-grid {
        grid-template-columns: 1fr;
    }
}

/* Enable text selection on hero slider */
/* .jt-hero-slider .jt-slide,
.jt-hero-slider .jt-slide-content,
.jt-hero-slider .jt-slide-title,
.jt-hero-slider .jt-slide-subtitle,
.jt-hero-slider .jt-slide-desc {
    user-select: text !important;
    -webkit-user-select: text !important;
    -moz-user-select: text !important;
    -ms-user-select: text !important;
} */

/* Override Astra's default button focus outline / border-color */
button:focus,
.menu-toggle:focus,
.ast-button:focus,
.ast-custom-button:focus,
input[type=reset]:focus,
input#submit:focus,
input[type="button"]:focus,
input[type="submit"]:focus,
form[CLASS*="wp-block-search__"].wp-block-search .wp-block-search__inside-wrapper .wp-block-search__button:focus,
body .wp-block-file .wp-block-file__button:focus {
    outline: none !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

/* =========================================================
   Logo Carousel A11y Fix
   Replacing Inline onmouseover/onmouseout Events with CSS
   Simultaneously fix the visual focus state of images within `aria-hidden` slides.
   ========================================================= */

/* Move the grayscale/opacity settings from the inline style to the CSS.
   This allows for unified control via `:hover` and `:focus-visible`. */

.clients-slider .slick-slide img {
    filter: grayscale(100%);
    opacity: 0.6;
    transition: filter 0.3s, opacity 0.3s;
    /* Remove `tabindex="0"` from the HTML; the image itself should not be focusable.
       Centrally manage `tabindex` in JS (a11y-slick-fix.js). */
}

/* It is evident that hover and focus effects are permitted only for images located within a slide where `aria-hidden="false"`. */
.clients-slider .slick-slide:not([aria-hidden="true"]) img:hover,
.clients-slider .slick-slide:not([aria-hidden="true"]) img:focus-visible {
    filter: none;
    opacity: 1;
    outline: 2px solid var(--ast-global-color-0);
    outline-offset: 3px;
}

/* Slide Images with `aria-hidden="true"`: Ensure they do not visually respond to interactions. */
.clients-slider .slick-slide[aria-hidden="true"] img {
    pointer-events: none;
}

/* =========================================
   Diamond List Styles for text body (Override default ::marker)
   ========================================= */
.jt-text-body ul {
    list-style-type: none;
    /* Hide default ::marker */
    padding-left: 0;
}

.jt-text-body ul li {
    position: relative;
    padding-left: 20px;
    /* Space for the diamond */
    margin-bottom: 8px;
    /* Breathing room between items */
}

.jt-text-body ul li::before {
    position: absolute;
    content: '';
    top: 8px;
    /* Adjust vertical alignment if needed */
    left: 0;
    width: 8px;
    height: 8px;
    background: var(--ast-global-color-0);
    transform: rotate(45deg);
}

/* Related Products Carousel */
.jt-related-carousel {
    width: 100%;
}

.jt-related-carousel-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.jt-related-carousel-track {
    flex: 1;
    min-width: 0;
}

/* Slot fade transitions */
#relatedGrid.rp-fade-out {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

#relatedGrid.rp-fade-in {
    opacity: 1;
    transform: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.jt-related-carousel-prev,
.jt-related-carousel-next {
    flex-shrink: 0;
    /* background: var(--ast-global-color-7, #f5f5f5); */
    background: var(--ast-global-color-0);
    border: none;
    border-radius: 50%;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s;
    padding: 0;
}

.jt-related-carousel-prev:hover,
.jt-related-carousel-next:hover {
    background: var(--ast-global-color-1);
    color: #fff;
}

.jt-related-carousel-prev:focus,
.jt-related-carousel-next:focus {
    outline: none;
}

.jt-related-carousel-prev:focus:not(:focus-visible),
.jt-related-carousel-next:focus:not(:focus-visible) {
    /* background: var(--ast-global-color-7, #f5f5f5); */
    background: var(--ast-global-color-0);
    color: inherit;
}

/* keep arrow is white on focus */
.jt-related-carousel-prev:focus svg,
.jt-related-carousel-next:focus svg {
    stroke: #fff;
}

.jt-related-carousel-prev svg,
.jt-related-carousel-next svg {
    width: 1.25rem;
    height: 1.25rem;
}

/* Mobile: show only 1 product at a time */
@media (max-width: 767px) {

    #rpSlot1,
    #rpSlot2 {
        display: none;
    }
}

.jt-related-carousel-dots {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 1.5rem;
}

.jt-carousel-dot {
    display: inline-block;
    width: 0.75rem;
    height: 0.75rem;
    border-radius: 50%;
    background: var(--ast-global-color-6, #ccc);
    border: none;
    padding: 0;
    cursor: pointer;
    transition: background 0.3s;
}

.jt-carousel-dot.active-dot {
    background: var(--ast-global-color-0);
}

/* Inquiry Popup Overlay */
.hc-popup-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 99999;
    background: rgba(0, 0, 0, 0.55);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.hc-popup-overlay.is-open {
    display: flex;
}

/* Dialog (desktop: centered card)*/
.hc-popup-dialog {
    background: #fff;
    border-radius: 8px;
    padding: 2rem;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
}

/* Close button */
.hc-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    /* background: none; */
    /* border: none; */
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    color: var(--ast-global-color-5);
    ;
    padding: 0px 6px 4px 6px;
    /* border-radius: 4px; */
    transition: color 0.15s, background 0.15s;
}

/* .hc-popup-close:hover {
    color: #111;
    background: #f0f0f0;
} */

/* Popup headings */
#hc-popup-heading {
    margin: 0 2rem 1rem 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.hc-popup-product-name {
    font-size: 0.8125rem;
    color: #555;
    margin: 0 0 1.25rem;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    border-left: 3px solid var(--ast-global-color-0, #2563eb);
}

/* Mobile: bottom-sheet */
@media (max-width: 600px) {
    .hc-popup-overlay.is-open {
        align-items: flex-end;
        padding: 0;
    }

    .hc-popup-dialog {
        border-radius: 16px 16px 0 0;
        max-width: 100%;
        max-height: 85vh;
        padding: 1.5rem 1.25rem 2rem;
    }
}

/* =========================================================
   Operation Process Section
   ========================================================= */
#process-section .jt-feature-card {
    position: relative;
    text-align: center;
    padding: 2rem;
}

.jt-icon-wrap {
    width: 64px;
    height: 64px;
    background: var(--ast-global-color-0);
    color: #fff;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin-bottom: 1.5rem;
    margin-left: auto;
    margin-right: auto;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.jt-step-number {
    position: absolute;
    top: -10px;
    right: 10px;
    font-size: 64px;
    font-weight: 800;
    color: rgba(0, 0, 0, 0.03);
    z-index: 0;
    line-height: 1;
    user-select: none;
}

#process-section .jt-feature-card .jt-title-4 {
    position: relative;
    z-index: 1;
    margin-bottom: 1rem;
}

#process-section .jt-feature-card .jt-text-body {
    position: relative;
    z-index: 1;
    margin-bottom: 0;
    font-size: 15px;
    opacity: 0.8;
    text-align: left;
}

/* =========================================================
   Buying Guide Section
   ========================================================= */
.jt-guide-cta-btn {
    width: auto;
    display: inline-flex;
    padding: 12px 28px;
    margin-top: 10px;
}

.jt-guide-item {
    display: flex;
    align-items: flex-start;
    gap: 16px;
}

.jt-guide-icon {
    color: var(--ast-global-color-0);
    font-size: 28px;
    background: rgba(0, 0, 0, 0.03);
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
}

.jt-title-5 {
    margin-bottom: 6px;
    font-weight: 600;
    font-size: 16px;
}

.jt-guide-item .jt-text-body {
    font-size: 14px;
    margin-bottom: 0;
    opacity: 0.7;
    line-height: 1.4;
}

/* Pain Point Section */
.jt-pain-point-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-bottom: 2.5rem;
}

.jt-pain-point-card {
    background: #fff;
    border: 1px solid var(--ast-global-color-6, #e2e8f0);
    border-radius: 0.5rem;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.jt-pain-point-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.05);
    border-color: var(--ast-global-color-0);
}

.jt-pain-point-card .material-icons {
    color: var(--ast-global-color-0);
    font-size: 24px;
    flex-shrink: 0;
    background: var(--ast-global-color-5, #f1f5f9);
    padding: 8px;
    border-radius: 50%;
}

.jt-pain-point-text {
    font-size: 0.95rem;
    color: var(--ast-global-color-2);
    font-weight: 500;
    line-height: 1.4;
}

.jt-pain-point-summary {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    padding: 1.5rem 2rem;
    border-radius: 0.75rem;
    font-size: 1.05rem;
    line-height: 1.6;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}

/* Manufacturer Authority Section */
.jt-items-start {
    align-items: flex-start;
}

/* ── Certifications Section ── */
.jt-cert-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    justify-content: center;
}

.jt-cert-card {
    background: var(--ast-global-color-4);
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.5rem;
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);
    transition: box-shadow 0.3s, transform 0.3s;
    width: 100%;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    .jt-cert-card {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: calc(33.333% - 1rem);
    }
}

.jt-cert-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
    border-color: var(--ast-global-color-0);
}

.jt-cert-icon-wrap {
    width: 72px;
    height: 72px;
    margin: 0 auto 1.25rem;
    background: var(--ast-global-color-5);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.jt-cert-icon-wrap .material-icons {
    font-size: 36px;
    color: var(--ast-global-color-0);
}

.jt-cert-img-wrap {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.25rem;
}

.jt-cert-img-wrap img {
    max-height: 72px;
    max-width: 120px;
    width: auto;
    object-fit: contain;
}

.jt-cert-name {
    font-family: 'Oswald', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.5rem;
}

.jt-cert-body {
    font-size: 0.8125rem;
    color: var(--ast-global-color-0);
    font-weight: 600;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.jt-cert-scope {
    font-size: 0.8125rem;
    color: var(--ast-global-color-3);
    line-height: 1.5;
    margin: 0;
}

.jt-comparison-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 2rem;
    font-size: 0.875rem;
}

.jt-comparison-table th {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    padding: 0.875rem 1rem;
    text-align: left;
    font-family: 'Oswald', sans-serif;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.jt-comparison-table td {
    padding: 0.875rem 1rem;
    border-bottom: 1px solid var(--ast-global-color-6);
    color: var(--ast-global-color-3);
    vertical-align: middle;
}

.jt-comparison-table tr:nth-child(even) td {
    background: rgba(0, 0, 0, 0.025);
}

.jt-comparison-table tr:hover td {
    background: rgba(0, 0, 0, 0.04);
}

.jt-comparison-table .jt-kit-badge {
    display: inline-block;
    padding: 0.2rem 0.6rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
}

@media (max-width: 640px) {
    .jt-comparison-table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* Internal Linking Section */
.jt-internal-links-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
    margin-top: 2rem;
}

@media (max-width: 768px) {
    .jt-internal-links-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

.jt-link-block h4 {
    font-family: 'Oswald', sans-serif;
    font-size: 1rem;
    font-weight: 600;
    color: var(--ast-global-color-2);
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid var(--ast-global-color-0);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.jt-link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.jt-link-list li a {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    text-decoration: none;
    padding: 0.3rem 0;
    transition: color 0.2s;
}

.jt-link-list li a:hover {
    color: var(--ast-global-color-0);
}

.jt-link-list li a .material-icons {
    font-size: 14px;
    color: var(--ast-global-color-0);
    flex-shrink: 0;
}

/* =========================================================
   404 Page Styles
   ========================================================= */
.error404 #content.site-content {
    background-color: var(--ast-global-color-5);
    margin: 0;
    padding: 0;
}

.error404 .astcontainerland {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 160px);
    /* Adjust based on header/footer */
}

.jt-404-wrapper {
    padding: 120px 20px 0px;
    text-align: center;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: var(--ast-global-color-5);
}

.jt-404-content {
    max-width: 600px;
    width: 100%;
    background: var(--ast-global-color-4);
    padding: 4rem 2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--ast-global-color-6);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
}

.jt-404-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 6rem;
    font-weight: 700;
    color: var(--ast-global-color-0);
    margin: 0;
    line-height: 1;
}

.jt-404-subheading {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin: 1rem 0 1.5rem;
}

.jt-404-text {
    color: var(--ast-global-color-3);
    font-size: 1rem;
    margin-bottom: 1.5rem;
}

.jt-404-actions {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    justify-content: center;
    align-items: center;
}

.jt-404-search-form {
    display: flex;
    align-items: stretch;
    max-width: 100%;
    height: 48px;
}

.jt-404-search-form input.jt-404-search-input[type="search"] {
    padding: 0 1rem;
    border: 1px solid var(--ast-global-color-6);
    border-radius: 0.25rem 0 0 0.25rem;
    outline: none;
    font-size: 1rem;
    color: var(--ast-global-color-3);
    background: var(--ast-global-color-4);
    transition: border-color 0.3s;
    height: 48px;
    box-sizing: border-box;
    min-width: 250px;
    margin: 0;
    line-height: normal;
}

.jt-404-search-form input.jt-404-search-input[type="search"]:focus {
    border-color: var(--ast-global-color-0);
}

.jt-404-search-form button.jt-404-search-btn[type="submit"] {
    background: var(--ast-global-color-0);
    color: var(--ast-global-color-4);
    border: none;
    padding: 0 1.25rem;
    height: 48px;
    border-radius: 0 0.25rem 0.25rem 0;
    cursor: pointer;
    transition: background 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    box-sizing: border-box;
    line-height: normal;
}

.jt-404-search-form button.jt-404-search-btn[type="submit"]:hover {
    background: var(--ast-global-color-1);
}

@media (max-width: 768px) {
    .jt-404-wrapper {
        padding: 40px 20px 0px;
    }
}

/* Long Form Content (Pillar Page) */
.jt-custom-text-wrap p {
    margin-bottom: 1.25rem;
}
.jt-custom-text-wrap p:last-child {
    margin-bottom: 0;
}
.jt-custom-text-wrap h2,
.jt-custom-text-wrap h3,
.jt-custom-text-wrap h4 {
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
}
.jt-custom-text-wrap :is(h2, h3, h4):first-child {
    margin-top: 0;
}
.jt-long-form-card {
    background: #fff;
    border: 1px solid var(--ast-global-color-6, #e2e8f0);
    border-radius: 0.5rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
    transition: box-shadow 0.3s;
}
.jt-long-form-card:hover {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   Mid-page CTA Bars
   ========================================================= */
.jt-mid-cta-bar {
    background: var(--ast-global-color-0);
    padding: 2.25rem 0;
}

/* .jt-mid-cta-bar--light removed — replaced by .jt-cta-poster */

.jt-mid-cta-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.jt-mid-cta-inner p {
    font-size: 1.0625rem;
    font-weight: 600;
    color: #fff;
    margin: 0;
    line-height: 1.5;
}

.jt-mid-cta-btn {
    background: #fff;
    color: var(--ast-global-color-0) !important;
    flex-shrink: 0;
    white-space: nowrap;
}

.jt-mid-cta-btn:hover {
    background: var(--ast-global-color-5);
    color: var(--ast-global-color-0) !important;
}

.jt-mid-cta-btn:focus,
.jt-mid-cta-btn:focus-visible,
.jt-mid-cta-btn:active {
    background: #fff !important;
    color: var(--ast-global-color-0) !important;
    outline: none !important;
    box-shadow: none !important;
    border-color: transparent !important;
}

.jt-mid-cta-outline-btn {
    flex-shrink: 0;
    width: auto;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .jt-mid-cta-inner {
        flex-direction: column;
        text-align: center;
    }
    .jt-mid-cta-btn,
    .jt-mid-cta-outline-btn {
        width: 100%;
        justify-content: center;
    }
}

/* =========================================================
   Compliance Icon List
   ========================================================= */
.jt-compliance-icon-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.jt-compliance-item {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    background: var(--ast-global-color-4);
    border-radius: 0.5rem;
    border: 1px solid var(--ast-global-color-6);
    transition: box-shadow 0.2s;
}

.jt-compliance-item:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.jt-compliance-item .material-icons {
    font-size: 28px;
    color: var(--ast-global-color-0);
    flex-shrink: 0;
    margin-top: 1px;
}

.jt-compliance-item strong {
    display: block;
    font-size: 0.9375rem;
    font-weight: 700;
    color: var(--ast-global-color-2);
    margin-bottom: 0.3rem;
}

.jt-compliance-item p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--ast-global-color-3);
    line-height: 1.55;
}

/* =========================================================
   Manufacturer Stats Row
   ========================================================= */
.jt-mfr-stats {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}

.jt-mfr-stat {
    text-align: center;
    padding: 1.25rem 1.75rem;
    background: var(--ast-global-color-4);
    border-radius: 0.625rem;
    border: 1px solid var(--ast-global-color-6);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    min-width: 130px;
    transition: box-shadow 0.2s, transform 0.2s;
}

.jt-mfr-stat:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
    transform: translateY(-2px);
}

.jt-mfr-stat strong {
    display: block;
    font-size: 1.75rem;
    font-family: 'Oswald', sans-serif;
    font-weight: 700;
    color: var(--ast-global-color-0);
    line-height: 1.1;
}

.jt-mfr-stat span {
    display: block;
    font-size: 0.75rem;
    color: var(--ast-global-color-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 0.35rem;
}

@media (max-width: 768px) {
    .jt-mfr-stats {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
    }
}

/* =========================================================
   Capacity 3-Step Visual
   ========================================================= */
.jt-capacity-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

@media (max-width: 768px) {
    .jt-capacity-steps {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
}

.jt-capacity-step {
    background: var(--ast-global-color-5);
    border-radius: 0.75rem;
    padding: 2rem 1.5rem;
    text-align: center;
    position: relative;
    border: 1px solid var(--ast-global-color-6);
    transition: box-shadow 0.2s, transform 0.2s;
}

.jt-capacity-step:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}

.jt-capacity-step-num {
    font-size: 3.5rem;
    font-weight: 800;
    font-family: 'Oswald', sans-serif;
    color: var(--ast-global-color-6);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.jt-capacity-step .material-icons {
    font-size: 2.25rem;
    color: var(--ast-global-color-0);
    display: block;
    margin-bottom: 0.75rem;
}

/* .jt-capacity-step h5 {
    font-size: 1rem;
    font-weight: 700;
    font-family: 'Oswald', sans-serif;
    color: var(--ast-global-color-2);
    margin-bottom: 0.6rem;
    letter-spacing: 0.02em;
} */

.jt-capacity-step p {
    font-size: 0.8125rem;
    color: var(--ast-global-color-3);
    line-height: 1.65;
    margin: 0;
    text-align: left;
}

/* =========================================================
   Full-width CTA Poster (#2)
   ========================================================= */
.jt-cta-poster {
    position: relative;
    height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.jt-cta-poster-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease;
}

.jt-cta-poster:hover .jt-cta-poster-bg {
    transform: scale(1.04);
}

.jt-cta-poster-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.42) 0%, rgba(0,0,0,0.68) 100%);
}

.jt-cta-poster-content {
    position: relative;
    z-index: 2;
    text-align: center;
    padding: 2rem 1rem;
}

.jt-cta-poster-heading {
    font-family: 'Oswald', sans-serif;
    font-size: 2.625rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 1.25rem;
    line-height: 1.15;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

@media (min-width: 768px) {
    .jt-cta-poster-heading {
        font-size: 3.25rem;
    }
}

.jt-cta-poster-text {
    font-size: 1.0625rem;
    color: rgba(255,255,255,0.88);
    max-width: 620px;
    margin: 0 auto 2.25rem;
    line-height: 1.65;
}

.jt-cta-poster-btn {
    background: var(--ast-global-color-0);
    color: #fff !important;
    padding: 1rem 2.5rem;
    font-size: 1rem;
    border: none;
}

.jt-cta-poster-btn:hover {
    background: var(--ast-global-color-1);
    color: #fff !important;
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}

@media (max-width: 640px) {
    .jt-cta-poster {
        height: 420px;
    }
    .jt-cta-poster-heading {
        font-size: 1.875rem;
    }
    .jt-cta-poster-text {
        font-size: 0.9375rem;
    }
}

/* =========================================================
   Back-to-top: prevent stuck active/focus state on mobile
   ========================================================= */
.back-to-top {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
}

.back-to-top:focus {
    outline: none;
    box-shadow: none;
    background-color: var(--ast-global-color-0);
    transform: none;
}

.back-to-top:active {
    transform: scale(0.92);
    background-color: var(--ast-global-color-1);
}