/* =========================================================================
   Jantrah Tech – Global Stylesheet
   Author: Jantrah Tech
   Strategy: design tokens via CSS custom properties, mobile-first,
             zero-runtime cost, no animations on critical render path.
   ========================================================================= */

/* ---- Design tokens ----------------------------------------------------- */
:root {
    /* Brand palette derived from header bar (teal-green) */
    --jt-primary: #2DBE91;
    --jt-primary-600: #1FA77B;
    --jt-primary-700: #178866;
    --jt-primary-100: #E6F8F2;
    --jt-primary-050: #F2FBF7;

    /* Neutrals */
    --jt-ink: #0F172A;
    --jt-text: #334155;
    --jt-muted: #64748B;
    --jt-border: #E2E8F0;
    --jt-bg: #FFFFFF;
    --jt-bg-alt: #F8FAFC;
    --jt-bg-dark: #0F172A;
    --jt-bg-darker: #0A1220;

    /* Semantic */
    --jt-success: #16A34A;
    --jt-warning: #F59E0B;
    --jt-danger: #EF4444;

    /* Type */
    --jt-font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --jt-font-display: "Montserrat", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    /* Sizing & spacing scale */
    --jt-radius-sm: 6px;
    --jt-radius: 8px;
    --jt-radius-lg: 14px;
    --jt-radius-xl: 20px;
    --jt-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
    --jt-shadow: 0 6px 18px rgba(15, 23, 42, .08);
    --jt-shadow-lg: 0 18px 40px rgba(15, 23, 42, .12);
    --jt-container: 1180px;

    /* Layout heights */
    --jt-topbar-h: 36px;
    --jt-nav-h: 64px;
}

/* ---- Reset / base ------------------------------------------------------ */
*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* App never scrolls horizontally. Use `clip` (not `hidden`) so the
       sticky header at #jt-header keeps its scroll context = the viewport.
       Falls back to `hidden` on older browsers that don't know `clip`. */
    overflow-x: hidden;
    overflow-x: clip;
}

body {
    margin: 0;
    font-family: var(--jt-font-sans);
    font-size: 15px;
    line-height: 1.55;
    color: var(--jt-text);
    background: var(--jt-bg);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    max-width: 100%;
    /* overflow:hidden clips both axes, then overflow-y:scroll re-enables the
       vertical scrollbar (always reserved). Net: no horizontal scroll, a
       persistent vertical scrollbar. */
    overflow: hidden;
    overflow-y: scroll;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--jt-primary-600);
    text-decoration: none;
    transition: color .18s ease;
}

a:hover {
    color: var(--jt-primary-700);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--jt-font-display);
    color: var(--jt-ink);
    font-weight: 700;
    line-height: 1.18;
    margin: 0 0 .5em;
    letter-spacing: -.01em;
}

h1 {
    font-size: clamp(1.65rem, 3.2vw, 2.4rem);
}

h2 {
    font-size: clamp(1.35rem, 2.4vw, 1.85rem);
}

h3 {
    font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

h4 {
    font-size: 1rem;
}

h5 {
    font-size: .95rem;
}

p {
    margin: 0 0 .85rem;
}

/* Container */
.jt-container {
    width: 100%;
    max-width: var(--jt-container);
    margin: 0 auto;
    padding: 0 1.25rem;
}

/* ---- Buttons ----------------------------------------------------------- */
.jt-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .6rem 1.1rem;
    border-radius: var(--jt-radius);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .85rem;
    letter-spacing: .01em;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform .15s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
    line-height: 1;
    white-space: nowrap;
}

.jt-btn:hover {
    transform: translateY(-1px);
}

.jt-btn-primary {
    background: var(--jt-primary);
    color: #fff;
}

.jt-btn-primary:hover {
    background: var(--jt-primary-600);
    color: #fff;
    box-shadow: var(--jt-shadow);
}

.jt-btn-outline {
    background: transparent;
    border-color: var(--jt-primary);
    color: var(--jt-primary-600);
}

.jt-btn-outline:hover {
    background: var(--jt-primary);
    color: #fff;
}

.jt-btn-ghost {
    background: transparent;
    color: var(--jt-ink);
}

.jt-btn-ghost:hover {
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
}

.jt-btn-lg {
    padding: .8rem 1.4rem;
    font-size: .9rem;
}

/* WhatsApp variant official green palette */
.jt-btn-wa {
    background: #25D366;
    color: #fff;
    border-color: transparent;
    position: relative;
    box-shadow: 0 4px 12px rgba(37, 211, 102, .28);
}

.jt-btn-wa:hover {
    background: #1DAE54;
    color: #fff;
    box-shadow: 0 8px 20px rgba(37, 211, 102, .40);
}

.jt-btn-wa i.bi-whatsapp {
    font-size: 1.05em;
}

/* Multi-line WhatsApp CTA used in the mobile drawer footer */
.jt-wa-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .75rem 1rem;
    text-align: left;
    line-height: 1.15;
    overflow: hidden;
    isolation: isolate;
}

.jt-wa-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .18) 50%, transparent 100%);
    transform: translateX(-110%);
    transition: transform .8s ease;
    z-index: 0;
}

.jt-wa-cta:hover::before {
    transform: translateX(110%);
}

.jt-wa-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    font-size: 1.15rem;
    position: relative;
    z-index: 1;
}

.jt-wa-label {
    display: inline-flex;
    flex-direction: column;
    position: relative;
    z-index: 1;
    min-width: 0;
}

.jt-wa-label strong {
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .01em;
}

.jt-wa-label span {
    font-size: .7rem;
    opacity: .9;
    font-weight: 500;
}

/* =====================================================================
   HEADER  redesigned (UI/UX pass)
   Structure:
   • #jt-header (sticky, frosted)
       ├─ .jt-topbar          (slim contact strip green)
       └─ .jt-nav             (white nav row)
            ├─ .jt-brand
            ├─ .jt-burger     (mobile only)
            ├─ .jt-drawer     (display:contents on desktop, drawer on mobile)
            │    ├─ .jt-drawer-head     (mobile only)
            │    ├─ .jt-drawer-body
            │    │    ├─ .jt-menu
            │    │    │    └─ li > .jt-mega   (desktop mega-menu; mobile collapsible)
            │    │    ├─ .jt-drawer-section.jt-drawer-contact  (mobile only)
            │    │    └─ .jt-drawer-section.jt-drawer-socials  (mobile only)
            │    └─ .jt-drawer-foot     (mobile only)
            └─ .jt-nav-actions  (phone CTA + Get a Quote desktop only)
   ===================================================================== */

#jt-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: saturate(160%) blur(10px);
    -webkit-backdrop-filter: saturate(160%) blur(10px);
    border-bottom: 1px solid transparent;
    transition: box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}

#jt-header.is-scrolled {
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    border-bottom-color: var(--jt-border);
}

/* ----- TOPBAR ----- */
.jt-topbar {
    background: linear-gradient(90deg, var(--jt-primary) 0%, var(--jt-primary-600) 100%);
    color: #fff;
    font-family: var(--jt-font-sans);
    font-size: .78rem;
    height: var(--jt-topbar-h);
    display: flex;
    align-items: center;
    box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .06);
}

.jt-topbar a {
    color: #fff;
}

.jt-topbar a:hover {
    color: rgba(255, 255, 255, .85);
}

.jt-topbar-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
}

.jt-topbar-info {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    min-width: 0;
}

.jt-topbar-link {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
    white-space: nowrap;
}

.jt-topbar-link i {
    opacity: .9;
    font-size: .85rem;
}

.jt-topbar-socials {
    display: flex;
    gap: .3rem;
    flex: none;
}

.jt-topbar-socials a {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    background: rgba(255, 255, 255, .14);
    transition: background .18s ease, transform .18s ease;
}

.jt-topbar-socials a:hover {
    background: rgba(255, 255, 255, .28);
    transform: translateY(-1px);
}

.jt-topbar-socials i {
    font-size: .8rem;
}

/* ----- BRAND (image logo) ----- */
.jt-brand {
    display: inline-flex;
    align-items: center;
    flex: none;
    text-decoration: none;
}

.jt-brand-logo {
    height: 38px;
    width: auto;
    max-width: 100%;
    display: block;
    user-select: none;
}

@media (max-width: 575.98px) {
    .jt-brand-logo {
        height: 34px;
    }
}

@media (max-width: 380px) {
    .jt-brand-logo {
        height: 30px;
    }
}

/* ----- MAIN NAV ROW ----- */
.jt-nav {
    height: var(--jt-nav-h);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.jt-menu {
    display: flex;
    gap: .15rem;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1 1 auto;
    justify-content: center;
}

.jt-menu>li {
    position: relative;
}

.jt-menu>li>a {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .55rem .85rem;
    color: var(--jt-ink);
    font-family: var(--jt-font-display);
    font-weight: 500;
    font-size: .88rem;
    border-radius: 6px;
    transition: color .18s ease, background-color .18s ease;
    position: relative;
    text-decoration: none;
}

.jt-menu-icon {
    display: none;
}

/* desktop hides icons, mobile shows */
.jt-menu>li>a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -2px;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: calc(100% - 1.7rem);
    height: 2px;
    background: var(--jt-primary);
    border-radius: 2px;
    transition: transform .25s ease;
}

.jt-menu>li:hover>a::after,
.jt-menu>li.active>a::after {
    transform: translateX(-50%) scaleX(1);
}

.jt-menu>li>a:hover,
.jt-menu>li.active>a {
    color: var(--jt-primary-700);
}

.jt-menu>li>a .caret {
    font-size: .7rem;
    transition: transform .18s ease;
    opacity: .65;
}

.jt-menu>li:hover>a .caret {
    transform: rotate(180deg);
    opacity: 1;
}

/* ----- DESKTOP MEGA MENU (compact) ----- */
.jt-mega {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(6px);
    width: min(560px, 92vw);
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: var(--jt-radius-lg);
    box-shadow: 0 20px 48px rgba(15, 23, 42, .14);
    padding: .55rem;
    opacity: 0;
    visibility: hidden;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
    z-index: 60;
}

.jt-mega::before {
    /* arrow */
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    width: 11px;
    height: 11px;
    background: #fff;
    border-left: 1px solid var(--jt-border);
    border-top: 1px solid var(--jt-border);
    transform: translateX(-50%) rotate(45deg);
}

.jt-menu>li:hover>.jt-mega,
.jt-menu>li:focus-within>.jt-mega {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

@media screen and (max-width: 991.98px) {

    .jt-menu>li:hover>.jt-mega,
    .jt-menu>li:focus-within>.jt-mega {
        opacity: 1;
        visibility: visible;
        transform: translateX(0%) translateY(0);
    }
}

.jt-mega-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
}

/* Services mega-menu  3 columns grouped by category, wider than default. */
.jt-mega--services {
    width: min(820px, 96vw);
}

.jt-mega-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: .25rem .85rem;
}

.jt-mega-col {
    min-width: 0;
}

.jt-mega-heading {
    font-family: var(--jt-font-display);
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--jt-primary-700);
    font-weight: 700;
    margin: .4rem .55rem .4rem;
    padding-bottom: .35rem;
    border-bottom: 1px solid var(--jt-border);
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .jt-mega--services {
        width: 100%;
    }
    .jt-mega-cols {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .jt-mega-heading {
        margin-top: .8rem;
    }
}

.jt-mega-item {
    display: flex;
    align-items: center;
    gap: .55rem;
    padding: .42rem .55rem;
    border-radius: 7px;
    color: var(--jt-text);
    transition: background .15s ease, transform .15s ease;
    text-decoration: none;
    min-width: 0;
}

.jt-mega-item:hover {
    background: var(--jt-primary-050);
    transform: translateX(2px);
}

.jt-mega-text {
    display: block;
    min-width: 0;
}

.jt-mega-text span {
    font-family: var(--jt-font-display);
    font-weight: 500;
    font-size: .85rem;
    color: var(--jt-ink);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.jt-mega-foot {
    margin-top: .35rem;
    padding: .5rem .6rem;
    background: var(--jt-bg-alt);
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: .72rem;
    color: var(--jt-muted);
    gap: .5rem;
}

.jt-mega-foot a {
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .74rem;
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    white-space: nowrap;
}

.jt-mega-foot a:hover {
    color: var(--jt-primary);
}

/* ----- DESKTOP RIGHT CLUSTER (phone CTA + Get a Quote) ----- */
.jt-nav-actions {
    display: flex;
    align-items: center;
    gap: .85rem;
    flex: none;
}

.jt-nav-phone {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    text-decoration: none;
    padding: .25rem .35rem;
    border-radius: 8px;
    transition: background .18s ease;
}

.jt-nav-phone:hover {
    background: var(--jt-primary-050);
}

.jt-nav-phone__icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    flex: none;
}

.jt-nav-phone__text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.jt-nav-phone__text .lab {
    font-size: .68rem;
    color: var(--jt-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.jt-nav-phone__text strong {
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .88rem;
    color: var(--jt-ink);
    margin-top: 2px;
}

.jt-cta-btn {
    display: inline-flex;
    flex: none;
}

/* Hide phone CTA on tablets to save room */
@media (max-width: 1099.98px) {
    .jt-nav-phone {
        display: none;
    }
}

/* ============================================
   Default desktop drawer state: invisible wrapper.
   ============================================ */
.jt-drawer {
    display: contents;
}

.jt-drawer-head,
.jt-drawer-foot,
.jt-drawer-close,
.jt-drawer-section,
.jt-drawer-backdrop {
    display: none;
}

.jt-burger {
    display: none;
    width: 40px;
    height: 40px;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    border: 1px solid var(--jt-border);
    background: #fff;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color .18s ease, background .18s ease, transform .18s ease;
    flex: none;
}

.jt-burger:hover {
    border-color: var(--jt-primary);
    background: var(--jt-primary-050);
}

.jt-burger-bar {
    display: block;
    width: 18px;
    height: 2px;
    background: var(--jt-ink);
    border-radius: 2px;
    transform-origin: center;
    transition: transform .25s ease, opacity .2s ease;
}

body.jt-menu-open .jt-burger .jt-burger-bar:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
}

body.jt-menu-open .jt-burger .jt-burger-bar:nth-child(2) {
    opacity: 0;
}

body.jt-menu-open .jt-burger .jt-burger-bar:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
}

/* ============================================
   MOBILE under 992px: drawer slides from right
   ============================================ */
@media (max-width: 991.98px) {
    .jt-nav {
        gap: .5rem;
        height: 60px;
    }

    .jt-nav-actions {
        display: none;
    }

    .jt-burger {
        display: inline-flex;
    }

    /* Drawer becomes a real flex panel */
    .jt-drawer {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        height: 100vh;
        height: 100dvh;
        width: min(88vw, 360px);
        background: #fff;
        flex-direction: column;
        transform: translateX(100%);
        transition: transform .35s cubic-bezier(.22, .61, .36, 1);
        z-index: 1100;
        overflow: hidden;
    }

    body.jt-menu-open .jt-drawer {
        transform: translateX(0);
    }

    .jt-drawer-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(15, 23, 42, .50);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
        opacity: 0;
        visibility: hidden;
        transition: opacity .25s ease, visibility .25s ease;
        z-index: 1099;
    }

    body.jt-menu-open .jt-drawer-backdrop {
        opacity: 1;
        visibility: visible;
    }

    body.jt-menu-open {
        overflow: hidden;
    }

    /* ----- Drawer header ----- */
    .jt-drawer-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: .85rem 1rem;
        background: linear-gradient(135deg, var(--jt-primary) 0%, var(--jt-primary-700) 100%);
        flex: none;
        position: relative;
    }

    .jt-drawer-head::after {
        content: "";
        position: absolute;
        inset: 0;
        background-image: radial-gradient(rgba(255, 255, 255, .18) 1px, transparent 1.2px);
        background-size: 16px 16px;
        opacity: .35;
        pointer-events: none;
    }

    .jt-drawer-head .jt-brand {
        position: relative;
        z-index: 1;
        background: #fff;
        padding: .35rem .65rem;
        border-radius: 10px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, .12);
    }

    .jt-drawer-head .jt-brand-logo {
        height: 30px;
    }

    .jt-drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1px solid rgba(255, 255, 255, .25);
        background: rgba(255, 255, 255, .10);
        color: #fff;
        cursor: pointer;
        font-size: .95rem;
        position: relative;
        z-index: 1;
        transition: background .18s ease, transform .35s cubic-bezier(.22, .61, .36, 1), border-color .18s ease;
    }

    .jt-drawer-close:hover {
        background: #fff;
        color: var(--jt-primary-700);
        border-color: #fff;
        transform: rotate(90deg);
    }

    /* ----- Drawer body wrapper ----- */
    .jt-drawer-body {
        flex: 1 1 auto;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: .25rem 0;
    }

    /* ----- Mobile menu list ----- */
    .jt-menu {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;
        margin: 0;
        flex: none;
        justify-content: flex-start;
    }

    .jt-menu>li {
        width: 100%;
        position: relative;
    }

    .jt-menu>li>a {
        display: flex;
        align-items: center;
        gap: .85rem;
        padding: .85rem 1.1rem;
        font-size: .92rem;
        font-weight: 600;
        color: var(--jt-ink);
        text-align: left;
        border-radius: 0;
        border-bottom: 1px solid var(--jt-border);
        position: relative;
        text-decoration: none;
    }

    .jt-menu>li:last-child>a {
        border-bottom: 1px solid var(--jt-border);
    }

    .jt-menu>li>a::after {
        display: none;
    }

    /* no underline on mobile */
    .jt-menu-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        border-radius: 8px;
        background: var(--jt-primary-100);
        color: var(--jt-primary-700);
        font-size: .95rem;
        flex: none;
        transition: background .18s ease, color .18s ease;
    }

    .jt-menu-label {
        flex: 1 1 auto;
    }

    .jt-menu>li>a:hover,
    .jt-menu>li>a:focus-visible,
    .jt-menu>li.active>a {
        background: var(--jt-primary-050);
        color: var(--jt-primary-700);
    }

    .jt-menu>li.active>a .jt-menu-icon {
        background: var(--jt-primary);
        color: #fff;
    }

    .jt-menu>li.active>a::before {
        content: "";
        position: absolute;
        left: 0;
        top: 18%;
        bottom: 18%;
        width: 3px;
        background: var(--jt-primary);
        border-radius: 2px;
    }

    /* Caret on dropdown parents */
    .jt-menu>li.has-dropdown>a .caret {
        margin-left: auto;
        font-size: .8rem;
        transition: transform .25s ease, color .18s ease;
        color: var(--jt-muted);
    }

    .jt-menu>li.has-dropdown.open>a .caret {
        transform: rotate(180deg);
        color: var(--jt-primary);
    }

    /* Mobile mega-menu becomes a collapsible list */
    .jt-mega {
        position: static;
        transform: none;
        opacity: 1;
        visibility: visible;
        width: auto;
        background: var(--jt-bg-alt);
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        transition: max-height .35s ease;
    }

    .jt-mega::before {
        display: none;
    }

    .jt-menu>li.has-dropdown.open>.jt-mega {
        max-height: 1200px;
    }

    .jt-mega-grid {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .jt-mega-item {
        gap: .65rem;
        padding: .55rem 1rem .55rem 2.4rem;
        border-bottom: 1px solid var(--jt-border);
        border-radius: 0;
    }

    .jt-mega-item:hover {
        transform: none;
        background: #fff;
    }


    .jt-mega-foot {
        padding: .6rem 1rem;
        background: transparent;
        border-radius: 0;
        border-top: 1px dashed var(--jt-border);
        font-size: .7rem;
    }

    .jt-mega-foot a {
        font-size: .72rem;
    }

    /* ----- Drawer sections (contact + socials) ----- */
    .jt-drawer-section {
        display: block;
        padding: 1rem 1.1rem;
        border-top: 8px solid var(--jt-bg-alt);
    }

    .jt-drawer-section h6 {
        font-family: var(--jt-font-display);
        font-size: .72rem;
        text-transform: uppercase;
        letter-spacing: .12em;
        color: var(--jt-muted);
        margin: 0 0 .65rem;
        font-weight: 700;
    }

    .jt-drawer-contact-row {
        display: flex;
        align-items: center;
        gap: .8rem;
        padding: .55rem 0;
        text-decoration: none;
    }

    .jt-drawer-contact-row .ico {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        background: var(--jt-primary-100);
        color: var(--jt-primary-700);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        flex: none;
    }

    .jt-drawer-contact-row .txt {
        display: flex;
        flex-direction: column;
        line-height: 1.2;
        min-width: 0;
    }

    .jt-drawer-contact-row .txt strong {
        font-family: var(--jt-font-display);
        font-size: .8rem;
        color: var(--jt-ink);
        font-weight: 600;
    }

    .jt-drawer-contact-row .txt span {
        font-size: .82rem;
        color: var(--jt-text);
        margin-top: 1px;
    }

    .jt-drawer-contact-row:hover .ico {
        background: var(--jt-primary);
        color: #fff;
    }

    .jt-drawer-socials-row {
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
    }

    .jt-drawer-socials-row a {
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: var(--jt-primary-100);
        color: var(--jt-primary-700) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        transition: background .18s ease, color .18s ease, transform .18s ease;
    }

    .jt-drawer-socials-row a:hover {
        background: var(--jt-primary);
        color: #fff !important;
        transform: translateY(-2px);
    }

    /* ----- Drawer footer CTA ----- */
    .jt-drawer-foot {
        display: block;
        padding: 1rem;
        border-top: 1px solid var(--jt-border);
        background: linear-gradient(180deg, #fff 0%, var(--jt-bg-alt) 100%);
        flex: none;
        box-shadow: 0 -8px 16px rgba(15, 23, 42, .04);
    }
}

/* ----- Topbar density on small phones ----- */
@media (max-width: 767.98px) {
    .jt-topbar-link--hours {
        display: none;
    }
}

@media (max-width: 575.98px) {
    .jt-topbar {
        font-size: .72rem;
    }

    .jt-topbar-info {
        gap: .75rem;
    }

    .jt-topbar-link--mail {
        display: none;
    }

    .jt-topbar-socials {
        gap: .25rem;
    }

    .jt-topbar-socials a {
        width: 22px;
        height: 22px;
    }

    .jt-topbar-socials i {
        font-size: .72rem;
    }
}

/* ===================================================================== */
/* HERO  dark teal-green stage, light foreground                         */
/* ===================================================================== */
.jt-hero {
    position: relative;
    padding: 3.75rem 0 3.25rem;
    color: #fff;
    background:
        radial-gradient(900px 600px at 110% -20%, rgba(45, 190, 145, .45), transparent 55%),
        radial-gradient(700px 500px at -10% 120%, rgba(31, 167, 123, .32), transparent 60%),
        linear-gradient(135deg, #0B2D26 0%, #114537 45%, #0B2D26 100%);
    overflow: hidden;
    isolation: isolate;
}

/* Faint dot grid overlay (white on dark) */
.jt-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 25%, #000 75%, transparent 100%);
    opacity: .9;
}

/* Soft top-edge highlight to separate from header */
.jt-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .18), transparent);
    z-index: 1;
}

/* =====================================================================
   HERO V2  Centered, geometric network background (Teal theme)
   ===================================================================== */
.jt-hero-v2 {
    position: relative;
    padding: 3.5rem 0 7rem;
    background: radial-gradient(circle at 50% 50%, #1FA77B 0%, #0B2D26 100%);
    color: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.jt-hero-network {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

.jt-net-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

.jt-hero-content-v2 {
    position: relative;
    z-index: 2;
    max-width: 800px;
    margin: 0 auto;
    margin-top: -20px;
}

.jt-welcome-v2 {
    font-family: "Playfair Display", serif;
    font-style: italic;
    font-size: 1.5rem;
    opacity: 0.9;
    display: block;
    margin-bottom: 0.5rem;
}

.jt-main-brand-v2 {
    font-size: clamp(3rem, 10vw, 6.5rem);
    font-weight: normal;
    margin: 0 0 1.5rem;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    display: flex;
    justify-content: center;
    gap: 0.15em;
}

.jt-main-brand-v2 span {
    display: inline-block;
    transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    color: rgba(255, 255, 255, 0.4);
    /* Dimmed by default */
}

.jt-main-brand-v2 span.is-active {
    color: #fff;
    transform: scale(1.15);
    text-shadow: 0 0 30px rgba(45, 190, 145, 0.8), 0 0 60px rgba(255, 255, 255, 0.2);
}

/* Remove old animation keyframes since we're using JS class toggling */
@keyframes jtLetterHighlight {

    0%,
    20%,
    100% {
        transform: scale(1);
        color: #fff;
    }

    10% {
        transform: scale(1.15);
        color: #2DBE91;
        text-shadow: 0 0 25px rgba(45, 190, 145, 0.7);
    }
}

.jt-tagline-v2 {
    font-size: clamp(1.2rem, 3vw, 1.8rem);
    font-weight: 400;
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.9);
    min-height: 2.8rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

.jt-tagline-v2 span {
    display: inline-block;
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    opacity: 1;
    transform: translateY(0);
}

.jt-tagline-v2 span.is-hidden {
    opacity: 0;
    transform: translateY(10px);
}


.jt-desc-v2 {
    font-size: 1.1rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 650px;
    margin: 0 auto 3rem;
}

.jt-hero-btns-v2 {
    display: flex;
    gap: 1.25rem;
    justify-content: center;
    flex-wrap: wrap;
}

.jt-btn-v2 {
    padding: 0.9rem 2.2rem;
    border-radius: 4px;
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jt-btn-v2-primary {
    background-color: #2DBE91;
    color: #fff;
    border: 2px solid #2DBE91;
}

.jt-btn-v2-primary:hover {
    background-color: #1FA77B;
    border-color: #1FA77B;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

.jt-btn-v2-outline {
    background-color: #fff;
    color: #0F172A;
    border: 2px solid #fff;
}

.jt-btn-v2-outline:hover {
    background-color: transparent;
    color: #fff;
    transform: translateY(-2px);
}

/* Floating Rating Widget */
.jt-floating-rating {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 10;
}

.rating-card {
    background: #fff;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    color: #334155;
    text-align: left;
}

.rating-info strong {
    display: block;
    font-size: 0.8rem;
    color: #64748B;
}

.rating-info .stars {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    color: #F59E0B;
    font-weight: 700;
    font-size: 0.9rem;
    margin: 2px 0;
}

.rating-info .stars span {
    color: #334155;
    margin-right: 2px;
}

.rating-info small {
    font-size: 0.7rem;
    color: #94A3B8;
}

/* WhatsApp Floating */
.jt-floating-wa {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    width: 60px;
    height: 60px;
    background-color: #25D366;
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 10px 30px rgba(37, 211, 102, 0.4);
    transition: all 0.3s ease;
    z-index: 10;
}

.jt-floating-wa:hover {
    transform: scale(1.1) rotate(10deg);
}

@media (max-width: 991.98px) {
    .jt-hero-v2 {
        padding: 2.5rem 0 5rem;
    }

    .jt-floating-rating {
        display: none;
    }
}

@media (max-width: 767.98px) {
    .jt-hero-v2 {
        padding: 2rem 1rem 4rem;
    }

    .jt-main-brand-v2 {
        font-size: 3.5rem;
        letter-spacing: 0.1em;
    }

    .jt-tagline-v2 {
        font-size: 1.1rem;
    }

    .jt-desc-v2 {
        font-size: 0.95rem;
    }

    .jt-hero-btns-v2 {
        flex-direction: column;
        width: 100%;
        max-width: 300px;
        margin: 0 auto;
    }

    .jt-btn-v2 {
        width: 100%;
    }
}

/* ===================================================================== */
/* SECTIONS                                                                */
/* ===================================================================== */
.jt-section {
    padding: 3rem 0;
}

.jt-section.alt {
    background: var(--jt-bg-alt);
}

.jt-section-head {
    text-align: center;
    max-width: 660px;
    margin: 0 auto 2rem;
}

.jt-section-head .jt-eyebrow {
    margin-bottom: .65rem;
}

.jt-section-head p {
    color: var(--jt-muted);
    font-size: .92rem;
    margin: 0;
}

/* Page header (banner) */
.jt-page-banner {
    background:
        radial-gradient(800px 400px at 80% -10%, rgba(45, 190, 145, .18), transparent 60%),
        var(--jt-bg-alt);
    padding: 2.25rem 0 2rem;
    border-bottom: 1px solid var(--jt-border);
}

.jt-page-banner h1 {
    margin-bottom: .35rem;
}

.jt-page-banner .crumbs {
    color: var(--jt-muted);
    font-size: .82rem;
}

.jt-page-banner .crumbs a {
    color: var(--jt-primary-700);
}

/* =====================================================================
   PAGE HERO  dark stage variant for inner pages (about, etc.)
   ===================================================================== */
.jt-page-hero {
    position: relative;
    padding: 3rem 0 2.75rem;
    color: #fff;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(45, 190, 145, .40), transparent 55%),
        radial-gradient(700px 400px at -10% 100%, rgba(31, 167, 123, .25), transparent 60%),
        linear-gradient(135deg, #0B2D26 0%, #114537 50%, #0B2D26 100%);
    overflow: hidden;
    isolation: isolate;
}

.jt-page-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.jt-page-hero .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

.jt-page-hero .bg-blob-1 {
    width: 360px;
    height: 360px;
    top: -100px;
    left: -120px;
    background: radial-gradient(circle, rgba(95, 212, 171, .55), transparent 70%);
}

.jt-page-hero .bg-blob-2 {
    width: 320px;
    height: 320px;
    bottom: -120px;
    right: 5%;
    background: radial-gradient(circle, rgba(45, 190, 145, .45), transparent 70%);
}

.jt-page-hero .bg-blob-3 {
    width: 240px;
    height: 240px;
    top: 30%;
    right: -60px;
    background: radial-gradient(circle, rgba(166, 240, 213, .40), transparent 70%);
}

.jt-page-hero .bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    opacity: .85;
}

.jt-page-hero-inner {
    position: relative;
    z-index: 1;
    max-width: 760px;
}

.jt-page-hero .crumbs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    font-size: .78rem;
    color: rgba(255, 255, 255, .70);
    margin-bottom: 1rem;
    font-family: var(--jt-font-display);
    font-weight: 500;
}

.jt-page-hero .crumbs a {
    color: rgba(255, 255, 255, .85);
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    transition: color .18s ease;
}

.jt-page-hero .crumbs a:hover {
    color: #fff;
}

.jt-page-hero .crumbs .sep {
    font-size: .7rem;
    opacity: .55;
}

.jt-page-hero .crumbs span[aria-current] {
    color: #fff;
}

.jt-page-hero h1 {
    color: #fff;
    margin: .9rem 0 .85rem;
    font-size: clamp(1.8rem, 3.6vw, 2.6rem);
    line-height: 1.18;
    letter-spacing: -.01em;
}

.jt-page-hero h1 span {
    background: linear-gradient(120deg, #B6F2DC 0%, #6CE3BA 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    font-style: italic;
}

.jt-page-hero p {
    color: rgba(255, 255, 255, .82);
    font-size: 1rem;
    max-width: 60ch;
    margin: 0;
}

/* =====================================================================
   ABOUT Story (2-col) with fact tiles
   ===================================================================== */
.jt-about-story {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    gap: 3rem;
    align-items: center;
}

.jt-story-text h2 {
    margin: .65rem 0 .85rem;
    font-size: clamp(1.45rem, 2.5vw, 1.95rem);
}

.jt-story-text p {
    color: var(--jt-text);
    font-size: .95rem;
    line-height: 1.65;
}

.jt-story-quote {
    position: relative;
    padding: .85rem 1rem .85rem 2.5rem;
    background: var(--jt-primary-050);
    border-left: 3px solid var(--jt-primary);
    border-radius: 0 10px 10px 0;
    color: var(--jt-ink) !important;
    font-style: italic;
    font-family: var(--jt-font-display);
    font-weight: 500;
    margin: 1.2rem 0 1.4rem;
}

.jt-story-quote .bi-quote {
    position: absolute;
    left: .65rem;
    top: .45rem;
    color: var(--jt-primary);
    font-size: 1.3rem;
    font-style: normal;
    opacity: .8;
}

.jt-story-cta {
    display: flex;
    gap: .65rem;
    flex-wrap: wrap;
    margin-top: .25rem;
}

/* Fact tiles staggered grid mockup */
.jt-story-art {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    padding: 1rem;
    isolation: isolate;
}

.jt-story-art-glow {
    position: absolute;
    inset: 10%;
    background: radial-gradient(closest-side, rgba(45, 190, 145, .30), transparent 70%);
    filter: blur(50px);
    z-index: -1;
}

.jt-fact-tile {
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 14px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 12px 28px rgba(15, 23, 42, .08);
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: transform .3s ease, box-shadow .3s ease;
    will-change: transform;
}

.jt-fact-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .14);
}

.jt-fact-tile .ico {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
    margin-bottom: .25rem;
}

.jt-fact-tile strong {
    font-family: var(--jt-font-display);
    font-weight: 800;
    font-size: 1.55rem;
    color: var(--jt-ink);
    line-height: 1;
    letter-spacing: -.01em;
}

.jt-fact-tile span:not(.ico) {
    font-size: .8rem;
    color: var(--jt-muted);
}

/* Asymmetric stagger for visual rhythm */
.jt-fact-tile.fact-1 {
    transform: translateY(-12px);
}

.jt-fact-tile.fact-4 {
    transform: translateY(12px);
}

.jt-fact-tile.fact-2 {
    background: linear-gradient(135deg, var(--jt-primary) 0%, var(--jt-primary-700) 100%);
    border: none;
    color: #fff;
}

.jt-fact-tile.fact-2 .ico {
    background: rgba(255, 255, 255, .20);
    color: #fff;
}

.jt-fact-tile.fact-2 strong {
    color: #fff;
}

.jt-fact-tile.fact-2 span:not(.ico) {
    color: rgba(255, 255, 255, .85);
}

@media (max-width: 991.98px) {
    .jt-about-story {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .jt-story-art {
        max-width: 480px;
        margin: 0 auto;
    }

    .jt-fact-tile.fact-1,
    .jt-fact-tile.fact-4 {
        transform: none;
    }
}

/* =====================================================================
   MISSION · VISION · APPROACH cards
   ===================================================================== */
.jt-mvp-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.jt-mvp-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 16px;
    padding: 1.6rem 1.4rem 1.4rem;
    overflow: hidden;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    isolation: isolate;
}

.jt-mvp-card::before {
    /* corner accent */
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(closest-side, rgba(45, 190, 145, .20), transparent 70%);
    border-radius: 50%;
    transition: transform .35s ease, opacity .35s ease;
    z-index: 0;
}

.jt-mvp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 18px 38px rgba(15, 23, 42, .10);
    border-color: var(--jt-primary-100);
}

.jt-mvp-card:hover::before {
    transform: scale(1.4);
}

.jt-mvp-num {
    font-family: var(--jt-font-display);
    font-weight: 800;
    font-size: 2.6rem;
    color: var(--jt-primary-100);
    line-height: 1;
    display: block;
    letter-spacing: -.02em;
    position: relative;
    z-index: 1;
}

.jt-mvp-ico {
    position: absolute;
    top: 1.3rem;
    right: 1.3rem;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    z-index: 1;
    transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
}

.jt-mvp-card:hover .jt-mvp-ico {
    background: var(--jt-primary);
    color: #fff;
    transform: scale(1.05) rotate(-4deg);
}

.jt-mvp-card h3 {
    margin: .65rem 0 .5rem;
    font-size: 1.15rem;
    color: var(--jt-ink);
    position: relative;
    z-index: 1;
}

.jt-mvp-card p {
    color: var(--jt-text);
    font-size: .9rem;
    line-height: 1.6;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* Accent middle card */
.jt-mvp-card.is-accent {
    background: linear-gradient(135deg, var(--jt-primary) 0%, var(--jt-primary-700) 100%);
    border: none;
    color: #fff;
    box-shadow: 0 18px 36px rgba(45, 190, 145, .30);
}

.jt-mvp-card.is-accent::before {
    background: radial-gradient(closest-side, rgba(255, 255, 255, .25), transparent 70%);
}

.jt-mvp-card.is-accent .jt-mvp-num {
    color: rgba(255, 255, 255, .30);
}

.jt-mvp-card.is-accent .jt-mvp-ico {
    background: rgba(255, 255, 255, .20);
    color: #fff;
}

.jt-mvp-card.is-accent:hover .jt-mvp-ico {
    background: #fff;
    color: var(--jt-primary-700);
}

.jt-mvp-card.is-accent h3 {
    color: #fff;
}

.jt-mvp-card.is-accent p {
    color: rgba(255, 255, 255, .92);
}

@media (max-width: 991.98px) {
    .jt-mvp-grid {
        grid-template-columns: 1fr;
    }
}

/* =====================================================================
   TEAM PAGE  flip-card grid + extended-team specialty grid
   Front: photo + name + role · Back: bio (revealed on hover/focus/tap)
   ===================================================================== */
.jt-team-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

/* Card = perspective container */
.jt-team-card {
    position: relative;
    aspect-ratio: 1 / 1.32;
    /* keeps front and back same height */
    perspective: 1400px;
    border-radius: 18px;
    cursor: pointer;
    outline: none;
}

.jt-team-card:focus-visible .jt-team-inner,
.jt-team-card:hover .jt-team-inner,
.jt-team-card.is-flipped .jt-team-inner {
    transform: rotateY(180deg);
}

.jt-team-card:focus-visible {
    box-shadow: 0 0 0 3px rgba(45, 190, 145, .35);
    border-radius: 18px;
}

/* Inner does the actual flipping */
.jt-team-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform .8s cubic-bezier(.22, .61, .36, 1);
    transform-style: preserve-3d;
    will-change: transform;
}

/* Both faces share size + 3D positioning */
.jt-team-face {
    position: absolute;
    inset: 0;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 18px;
    overflow: hidden;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    display: flex;
    flex-direction: column;
}

/* ---- Front ---- */
.jt-team-front {
    transform: rotateY(0deg);
}

.jt-team-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    isolation: isolate;
    flex: none;
}

.jt-team-bg {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(closest-side at 50% 100%, rgba(45, 190, 145, .18), transparent 70%),
        linear-gradient(180deg, var(--jt-primary-050) 0%, var(--jt-primary-100) 100%);
    z-index: 0;
}

.jt-team-photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(45, 190, 145, .18) 1px, transparent 1.2px);
    background-size: 14px 14px;
    mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%);
    z-index: 0;
    opacity: .55;
}

.jt-team-photo img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center bottom;
}

.jt-team-flag {
    position: absolute;
    top: .85rem;
    right: .85rem;
    z-index: 2;
    background: #fff;
    border-radius: 999px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .10);
    line-height: 1;
}

.jt-team-meta {
    padding: .9rem 1.05rem 1rem;
    border-top: 1px solid var(--jt-border);
    background: #fff;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: center;
    gap: .15rem;
}

.jt-team-meta h3 {
    font-size: 1rem;
    color: var(--jt-ink);
    margin: 0;
    font-weight: 700;
    letter-spacing: -.005em;
    line-height: 1.25;
}

.jt-team-meta .role {
    color: var(--jt-primary-700);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .72rem;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.jt-team-meta .hint {
    margin-top: .35rem;
    color: var(--jt-muted);
    font-family: var(--jt-font-display);
    font-size: .68rem;
    letter-spacing: .02em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .3rem;
    opacity: .7;
}

.jt-team-meta .hint i {
    transition: transform .35s ease;
}

.jt-team-card:hover .jt-team-meta .hint i {
    transform: rotate(180deg);
}

/* ---- Back ---- */
.jt-team-back {
    transform: rotateY(180deg);
    color: #fff;
    padding: 1.5rem 1.35rem 1.35rem;
    background:
        radial-gradient(700px 350px at 100% 0%, rgba(255, 255, 255, .16), transparent 55%),
        radial-gradient(500px 280px at 0% 100%, rgba(0, 0, 0, .18), transparent 55%),
        linear-gradient(135deg, var(--jt-primary) 0%, var(--jt-primary-700) 100%);
    border: none;
    box-shadow: 0 18px 40px rgba(45, 190, 145, .30);
    overflow: hidden;
}

.jt-team-back::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 75%, transparent);
    pointer-events: none;
    opacity: .55;
}

.jt-team-quote-glyph {
    position: relative;
    z-index: 1;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .18);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    flex: none;
    margin-bottom: .65rem;
}

.jt-team-back-inner {
    position: relative;
    z-index: 1;
    flex: 1 1 auto;
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.jt-team-back h4 {
    font-size: .98rem;
    color: #fff;
    margin: 0 0 .15rem;
    font-weight: 700;
    letter-spacing: -.005em;
}

.jt-team-back .role {
    color: rgba(255, 255, 255, .85);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .68rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    display: block;
    margin-bottom: .65rem;
}

.jt-team-back p {
    color: rgba(255, 255, 255, .92);
    font-size: .82rem;
    line-height: 1.55;
    margin: 0;
}

.jt-team-back-flag {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 1;
    background: rgba(255, 255, 255, .20);
    backdrop-filter: blur(4px);
    border-radius: 999px;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .9rem;
    line-height: 1;
}

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

@media (max-width: 767.98px) {
    .jt-team-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }

    .jt-team-card {
        aspect-ratio: 1 / 1.36;
    }

    .jt-team-meta {
        padding: .75rem .85rem .9rem;
    }

    .jt-team-meta h3 {
        font-size: .9rem;
    }

    .jt-team-meta .role {
        font-size: .65rem;
    }

    .jt-team-meta .hint {
        font-size: .62rem;
    }

    .jt-team-back {
        padding: 1.15rem 1rem 1rem;
    }

    .jt-team-back h4 {
        font-size: .9rem;
    }

    .jt-team-back p {
        font-size: .75rem;
        line-height: 1.5;
    }
}

@media (max-width: 420px) {
    .jt-team-grid {
        grid-template-columns: 1fr;
    }

    .jt-team-card {
        aspect-ratio: 1 / 1.25;
    }
}

/* Honour user motion preferences */
@media (prefers-reduced-motion: reduce) {
    .jt-team-inner {
        transition: none;
    }
}

/* ----- Extended team section ----- */
.jt-extended-team {
    padding: 4rem 0;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(45, 190, 145, .08), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(45, 190, 145, .06), transparent 60%),
        var(--jt-bg-alt);
    position: relative;
}

.jt-extended-team .jt-section-head h2 span {
    color: var(--jt-primary-700);
    background: linear-gradient(120deg, var(--jt-primary), var(--jt-primary-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

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

/* Specialty card icon + title + description */
.jt-extended-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    padding: 1.15rem 1.2rem 1.25rem;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 14px;
    transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease, background .25s ease;
    overflow: hidden;
    isolation: isolate;
}

.jt-extended-card::before {
    /* corner glow on hover */
    content: "";
    position: absolute;
    top: -40px;
    right: -40px;
    width: 120px;
    height: 120px;
    background: radial-gradient(closest-side, rgba(45, 190, 145, .18), transparent 70%);
    border-radius: 50%;
    opacity: 0;
    transition: opacity .35s ease, transform .35s ease;
    pointer-events: none;
    z-index: 0;
}

.jt-extended-card:hover {
    transform: translateY(-4px);
    border-color: var(--jt-primary-100);
    box-shadow: 0 18px 36px rgba(15, 23, 42, .08);
}

.jt-extended-card:hover::before {
    opacity: 1;
    transform: scale(1.4);
}

.jt-extended-card .ico {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    flex: none;
    transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    z-index: 1;
}

.jt-extended-card:hover .ico {
    background: var(--jt-primary);
    color: #fff;
    transform: scale(1.05) rotate(-4deg);
}

.jt-extended-card .meta {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.jt-extended-card h3 {
    color: var(--jt-ink);
    font-family: var(--jt-font-display);
    font-size: 1rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    letter-spacing: -.005em;
    line-height: 1.25;
    transition: color .2s ease;
}

.jt-extended-card:hover h3 {
    color: var(--jt-primary-700);
}

.jt-extended-card p {
    color: var(--jt-text);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
}

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

@media (max-width: 575.98px) {
    .jt-extended-team {
        padding: 2.5rem 0;
    }

    .jt-extended-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .jt-extended-card {
        padding: 1rem 1.05rem 1.1rem;
        gap: .75rem;
    }

    .jt-extended-card .ico {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .jt-extended-card h3 {
        font-size: .92rem;
    }

    .jt-extended-card p {
        font-size: .8rem;
    }
}

/* =====================================================================
   GLOBAL OFFICES
   ===================================================================== */
.jt-offices {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.jt-office {
    position: relative;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 16px;
    overflow: hidden;
    transition: transform .25s ease, border-color .25s ease;
}

.jt-office:hover {
    transform: translateY(-3px);
    border-color: var(--jt-primary);
}

.jt-office-flag-inline {
    width: 24px;
    height: auto;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.jt-office-country {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .25rem;
}

.jt-office-badge-inline {
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .62rem;
    padding: .15rem .45rem;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: .05em;
    margin-left: .25rem;
}

/* ----- Body ----- */
.jt-office-body {
    padding: 1.4rem 1.25rem 1.25rem;
}

.jt-office-titles {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin-bottom: 1rem;
    padding-bottom: .85rem;
    border-bottom: 1px dashed var(--jt-border);
}

.jt-office-titles strong {
    font-family: var(--jt-font-display);
    font-weight: 700;
    color: var(--jt-ink);
    font-size: 1.05rem;
    letter-spacing: -.005em;
}

.jt-office-titles span {
    color: var(--jt-primary-700);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .1em;
    margin-top: 4px;
}

/* Primary office accent subtle green left border */
.jt-office.is-primary {
    border-color: var(--jt-primary-100);
}

.jt-office.is-primary .jt-office-titles strong::after {
    content: "";
    display: inline-block;
    width: 6px;
    height: 6px;
    background: var(--jt-primary);
    border-radius: 50%;
    margin-left: .5rem;
    vertical-align: middle;
    transform: translateY(-3px);
}

/* ----- Contact rows ----- */
.jt-office-rows {
    display: flex;
    flex-direction: column;
    gap: .65rem;
}

/* Renamed from `.row` to `.line` to avoid clobbering by Bootstrap's grid `.row`. */
.jt-office-rows .line {
    display: flex !important;
    flex-direction: row;
    align-items: center;
    gap: .65rem;
    margin: 0;
    padding: 0;
    font-size: .85rem;
    color: var(--jt-text);
    line-height: 1.45;
}

.jt-office-rows .line a {
    color: var(--jt-text);
    text-decoration: none;
    transition: color .18s ease;
    word-break: break-word;
    flex: 1 1 auto;
    min-width: 0;
}

.jt-office-rows .line a:hover {
    color: var(--jt-primary-700);
}

.jt-office-rows .line .ico {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .8rem;
    flex: none;
}

.jt-office-rows .line-address {
    align-items: flex-start;
}

.jt-office-rows .line-address>span:not(.ico) {
    color: var(--jt-text);
    flex: 1 1 auto;
    min-width: 0;
    padding-top: 5px;
    line-height: 1.5;
}

@media (max-width: 991.98px) {
    .jt-offices {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .jt-offices {
        grid-template-columns: 1fr;
    }

    .jt-office-body {
        padding: 1.25rem 1rem 1rem;
    }
}

/* =====================================================================
   INDUSTRIES PAGE  alternating rows (icon card + content)
   ===================================================================== */
.jt-industries-list {
    padding: 4.5rem 0 3.5rem;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(45, 190, 145, .05), transparent 60%),
        radial-gradient(700px 400px at 0% 100%, rgba(45, 190, 145, .05), transparent 60%),
        var(--jt-bg);
    position: relative;
}

.jt-industries-list .jt-container {
    display: grid;
    gap: 2.5rem;
}

.jt-industry-row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 3rem;
    align-items: center;
    padding: 2rem 0;
    border-bottom: 1px solid var(--jt-border);
    position: relative;
}

.jt-industry-row::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 64px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--jt-primary), transparent);
    opacity: .55;
}

.jt-industry-row:first-child::before {
    display: none;
}

.jt-industry-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

/* Even rows content on left, art on right */
.jt-industry-row.is-reverse {
    grid-template-columns: 7fr 5fr;
}

.jt-industry-row.is-reverse .jt-industry-art {
    order: 2;
}

.jt-industry-row.is-reverse .jt-industry-content {
    order: 1;
}

/* ----- Art panel ----- */
.jt-industry-art {
    position: relative;
    /* Grid items default to min-width:auto and refuse to shrink below their
       content; min-width:0 lets the track stay within the 5fr/7fr ratio so
       the row never exceeds .jt-container (no horizontal scroll). */
    min-width: 0;
    background: linear-gradient(135deg, var(--jt-primary-050) 0%, var(--jt-primary-100) 100%);
    border: 1px solid rgba(45, 190, 145, .20);
    border-radius: 28px;
    aspect-ratio: 1.25 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
    transition: transform .35s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease, border-color .35s ease;
}

.jt-industry-art::after {
    /* dot grid pattern overlay */
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(45, 190, 145, .18) 1px, transparent 1.2px);
    background-size: 18px 18px;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    opacity: .55;
    pointer-events: none;
    z-index: 0;
}

.jt-industry-row:hover .jt-industry-art {
    transform: translateY(-6px);
    box-shadow: 0 28px 56px rgba(45, 190, 145, .18);
    border-color: var(--jt-primary);
}

.jt-industry-num {
    position: absolute;
    top: 1.1rem;
    left: 1.4rem;
    font-family: var(--jt-font-display);
    font-weight: 800;
    font-size: clamp(3rem, 6vw, 4.5rem);
    color: rgba(45, 190, 145, .20);
    line-height: 1;
    letter-spacing: -.04em;
    user-select: none;
    z-index: 1;
    transition: color .35s ease, transform .35s ease;
}

.jt-industry-row:hover .jt-industry-num {
    color: rgba(45, 190, 145, .32);
    transform: translateY(-2px);
}

.jt-industry-icon {
    width: clamp(90px, 14vw, 130px);
    height: clamp(90px, 14vw, 130px);
    border-radius: 28px;
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 4vw, 2.8rem);
    box-shadow: 0 24px 50px rgba(45, 190, 145, .30), 0 0 0 6px rgba(45, 190, 145, .08);
    position: relative;
    z-index: 2;
    transition: transform .4s cubic-bezier(.22, .61, .36, 1), box-shadow .35s ease;
}

.jt-industry-row:hover .jt-industry-icon {
    transform: scale(1.08) rotate(-5deg);
    box-shadow: 0 30px 60px rgba(45, 190, 145, .40), 0 0 0 8px rgba(45, 190, 145, .10);
}

.jt-industry-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(40px);
    z-index: 0;
    transition: transform .5s ease;
}

.jt-industry-blob--1 {
    width: 200px;
    height: 200px;
    top: -55px;
    right: -50px;
    background: radial-gradient(circle, rgba(45, 190, 145, .34), transparent 70%);
}

.jt-industry-blob--2 {
    width: 160px;
    height: 160px;
    bottom: -50px;
    left: -40px;
    background: radial-gradient(circle, rgba(95, 212, 171, .45), transparent 70%);
}

.jt-industry-row:hover .jt-industry-blob--1 {
    transform: translate(-6px, 6px);
}

.jt-industry-row:hover .jt-industry-blob--2 {
    transform: translate(6px, -6px);
}

/* ----- Content panel ----- */
.jt-industry-content {
    /* See note on .jt-industry-art — keeps the 7fr column shrinkable so the
       nested Solutions grid / long words can't widen the row. */
    min-width: 0;
}

.jt-industry-content .jt-eyebrow {
    margin-bottom: .85rem;
}

.jt-industry-content h2 {
    font-size: clamp(1.6rem, 2.7vw, 2.15rem);
    margin: .25rem 0 1rem;
    letter-spacing: -.015em;
    color: var(--jt-ink);
}

.jt-industry-content>p {
    font-size: .98rem;
    line-height: 1.75;
    color: var(--jt-text);
    margin: 0 0 1.5rem;
    max-width: 62ch;
}

/* ----- Related projects label on its own line, then chip row ----- */
.jt-industry-related {
    display: block;
    /* stack: label above chips */
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px dashed var(--jt-border);
}

.jt-industry-related .lab {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: var(--jt-muted);
    font-size: .68rem;
    text-transform: uppercase;
    letter-spacing: .14em;
    font-family: var(--jt-font-display);
    font-weight: 700;
    margin-bottom: .65rem;
}

.jt-industry-related .lab::before {
    content: "";
    width: 18px;
    height: 2px;
    background: var(--jt-primary);
    border-radius: 1px;
}

.jt-industry-related .chips {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.jt-industry-related .chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: var(--jt-primary-050);
    border: 1px solid var(--jt-primary-100);
    color: var(--jt-primary-700);
    padding: .5rem .85rem;
    border-radius: 999px;
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .8rem;
    text-decoration: none;
    transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.jt-industry-related .chip i {
    font-size: .72rem;
    transition: transform .25s ease;
}

.jt-industry-related .chip:hover {
    background: var(--jt-primary);
    color: #fff;
    border-color: var(--jt-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(45, 190, 145, .32);
}

.jt-industry-related .chip:hover i {
    transform: translate(2px, -2px);
}

@media (max-width: 991.98px) {
    .jt-industries-list {
        padding: 2.5rem 0 2rem;
    }

    .jt-industries-list .jt-container {
        gap: 1.75rem;
    }

    .jt-industry-row,
    .jt-industry-row.is-reverse {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding: 1.5rem 0;
    }

    .jt-industry-row.is-reverse .jt-industry-art {
        order: -1;
    }

    .jt-industry-row.is-reverse .jt-industry-content {
        order: 0;
    }

    .jt-industry-art {
        aspect-ratio: 16 / 9;
        max-height: 260px;
    }
}

@media (max-width: 575.98px) {
    /* Mobile layout: icon sits inline with the H2 only; description and
       related chips fall back to full-width on the next rows.
       `display: contents` on .jt-industry-content flattens it so the H2,
       P, and .jt-industry-related become direct grid children of the row. */
    .jt-industry-row,
    .jt-industry-row.is-reverse {
        display: grid;
        grid-template-columns: 64px 1fr;
        column-gap: .9rem;
        row-gap: .8rem;
        align-items: center;
        padding: 1.25rem 0;
    }

    .jt-industry-row .jt-industry-art,
    .jt-industry-row.is-reverse .jt-industry-art {
        order: 0;
        grid-row: 1;
        grid-column: 1;
        width: 64px;
        height: 64px;
        aspect-ratio: 1 / 1;
        max-height: none;
        border-radius: 16px;
        padding: 0;
        align-self: center;
    }

    .jt-industry-row .jt-industry-content,
    .jt-industry-row.is-reverse .jt-industry-content {
        display: contents;
    }

    .jt-industry-num,
    .jt-industry-blob,
    .jt-industry-art::after {
        display: none;
    }

    .jt-industry-icon {
        position: static;
        width: 100%;
        height: 100%;
        border-radius: 16px;
        font-size: 1.5rem;
        box-shadow: 0 6px 16px rgba(45, 190, 145, .25), 0 0 0 4px rgba(45, 190, 145, .08);
    }

    /* H2 sits beside the icon (row 1, col 2) */
    .jt-industry-content h2 {
        grid-row: 1;
        grid-column: 2;
        align-self: center;
        margin: 0;
        font-size: 1.25rem;
        line-height: 1.25;
    }

    /* Everything below the icon+H2 row spans full width and AUTO-FLOWS onto
       its own row in source order. Do NOT pin grid-row here — there can be
       several paragraphs plus the Solutions list, and pinning collapses them
       onto the same row (overlapping text) and pushes unpinned items (the
       Solutions list) to the bottom, after Related products. */
    .jt-industry-content > p,
    .jt-solutions-list,
    .jt-industry-related {
        grid-column: 1 / -1;
    }

    .jt-industry-content > p {
        margin: 0;
        font-size: .92rem;
        line-height: 1.6;
    }

    .jt-solutions-list {
        margin-top: 0;
    }

    .jt-industry-related .chip {
        font-size: .74rem;
        padding: .42rem .7rem;
    }

    .jt-industry-related .lab {
        padding-top: 0;
        width: 100%;
    }
}

/* =====================================================================
   PRODUCT / SERVICE CARDS  image-on-top, used on /our-products & /our-services
   ===================================================================== */
.jt-pcard-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
}

.jt-pcard {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 14px;
    overflow: hidden;
    transition: transform .28s ease, border-color .28s ease;
}

.jt-pcard:hover {
    transform: translateY(-4px);
    border-color: var(--jt-primary-100);
}

/* ----- Image zone ----- */
.jt-pcard-img {
    display: block;
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: var(--jt-bg-alt);
    isolation: isolate;
    text-decoration: none;
}

.jt-pcard-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform .5s cubic-bezier(.22, .61, .36, 1);
    display: block;
}

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

.jt-pcard-img-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--jt-primary-050) 0%, var(--jt-primary-100) 100%);
    color: var(--jt-primary-700);
    font-size: 3rem;
}

/* ----- Body ----- */
.jt-pcard-body {
    padding: 1.25rem 1.35rem 1.4rem;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    flex: 1 1 auto;
}

.jt-pcard-title {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.3;
    font-weight: 700;
    letter-spacing: -.005em;
}

.jt-pcard-title a {
    color: var(--jt-primary-700);
    text-decoration: none;
    transition: color .18s ease;
}

.jt-pcard-title a:hover {
    color: var(--jt-primary);
}

.jt-pcard-desc {
    color: var(--jt-text);
    font-size: .88rem;
    line-height: 1.65;
    margin: 0;
    flex: 1 1 auto;
}

.jt-pcard-more {
    margin-top: .15rem;
    color: var(--jt-primary-700);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .85rem;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    align-self: flex-start;
    transition: color .18s ease, gap .18s ease;
}

.jt-pcard-more i {
    font-size: .85rem;
    transition: transform .25s ease;
}

.jt-pcard-more:hover {
    color: var(--jt-primary);
    gap: .55rem;
}

.jt-pcard-more:hover i {
    transform: translateX(3px);
}

@media (max-width: 991.98px) {
    .jt-pcard-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5rem;
    }
}

@media (max-width: 575.98px) {
    .jt-pcard-grid {
        grid-template-columns: 1fr;
        gap: 1.25rem;
    }

    .jt-pcard-body {
        padding: 1.1rem 1.15rem 1.2rem;
    }

    .jt-pcard-title {
        font-size: .98rem;
    }

    .jt-pcard-desc {
        font-size: .84rem;
    }
}

/* ---------- Modifier: full-width row variant (services page) ---------- */
.jt-pcard-grid--row {
    grid-template-columns: 1fr;
    gap: 1.75rem;
}

.jt-pcard--row {
    display: grid;
    grid-template-columns: 5fr 7fr;
    align-items: stretch;
    flex-direction: row;
}

.jt-pcard--row.is-reverse {
    grid-template-columns: 7fr 5fr;
}

.jt-pcard--row.is-reverse .jt-pcard-img {
    order: 2;
}

.jt-pcard--row.is-reverse .jt-pcard-body {
    order: 1;
}

.jt-pcard--row .jt-pcard-img {
    aspect-ratio: 5 / 4;
    height: 100%;
    min-height: 320px;
    background:
        radial-gradient(closest-side at 50% 50%, rgba(45, 190, 145, .12), transparent 70%),
        var(--jt-bg-alt);
}

.jt-pcard--row .jt-pcard-img img {
    object-fit: cover;
    object-position: center;
    padding: 0;
    background: transparent;
}

.jt-pcard--row .jt-pcard-body {
    padding: 2rem 2.25rem;
    justify-content: center;
    gap: 1rem;
}

.jt-pcard--row .jt-pcard-title {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.25;
    margin-bottom: .15rem;
}

.jt-pcard--row .jt-pcard-desc {
    font-size: .95rem;
    line-height: 1.7;
    flex: 0 0 auto;
}

.jt-pcard--row .jt-pcard-more {
    margin-top: .5rem;
    font-size: .9rem;
    padding: .55rem 1rem;
    background: var(--jt-primary-050);
    border: 1px solid var(--jt-primary-100);
    border-radius: 999px;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, padding .2s ease;
}

.jt-pcard--row .jt-pcard-more:hover {
    background: var(--jt-primary);
    border-color: var(--jt-primary);
    color: #fff;
    gap: .55rem;
}

/* Hover lift slightly stronger for the larger row card */
.jt-pcard--row:hover {
    transform: translateY(-3px);
}

@media (max-width: 991.98px) {
    .jt-pcard-grid--row {
        gap: 1.5rem;
    }

    .jt-pcard--row,
    .jt-pcard--row.is-reverse {
        grid-template-columns: 1fr;
    }

    .jt-pcard--row.is-reverse .jt-pcard-img {
        order: -1;
    }

    .jt-pcard--row.is-reverse .jt-pcard-body {
        order: 0;
    }

    .jt-pcard--row .jt-pcard-img {
        aspect-ratio: 16 / 9;
        min-height: 220px;
        max-height: 320px;
    }

    .jt-pcard--row .jt-pcard-body {
        padding: 1.5rem 1.5rem 1.75rem;
    }
}

@media (max-width: 575.98px) {
    .jt-pcard--row .jt-pcard-img {
        aspect-ratio: 5 / 3;
        min-height: 180px;
    }

    .jt-pcard--row .jt-pcard-img img {
        padding: 1rem;
    }

    .jt-pcard--row .jt-pcard-body {
        padding: 1.25rem 1.15rem 1.4rem;
    }

    .jt-pcard--row .jt-pcard-title {
        font-size: 1.1rem;
    }

    .jt-pcard--row .jt-pcard-desc {
        font-size: .88rem;
    }
}

/* Cards */
.jt-grid {
    display: grid;
    gap: 1.1rem;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.jt-card {
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: var(--jt-radius-lg);
    padding: 1.25rem;
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}

.jt-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--jt-shadow);
    border-color: var(--jt-primary-100);
}

.jt-card .icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: .15rem;
}

.jt-card h3 {
    font-size: 1rem;
    margin: 0;
}

.jt-card p {
    color: var(--jt-muted);
    margin: 0;
    font-size: .85rem;
    line-height: 1.5;
}

.jt-card a.more {
    margin-top: auto;
    color: var(--jt-primary-700);
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .82rem;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.jt-card a.more:hover {
    color: var(--jt-primary);
}

/* =====================================================================
   SERVICES  tabbed section on the home page
   ===================================================================== */
.jt-services {
    position: relative;
    padding: 4rem 0 4rem;
    background: #fff;
    overflow: hidden;
    isolation: isolate;
}

.jt-services-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
}

.jt-services-bg .bg-grid {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(rgba(45, 190, 145, .10) 1px, transparent 1.2px),
        radial-gradient(circle at 50% 50%, rgba(45, 190, 145, .04) 0, transparent 60%);
    background-size: 28px 28px, 100% 100%;
    mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 15%, #000 85%, transparent 100%);
    opacity: .6;
}

.jt-services-head {
    text-align: center;
    max-width: 880px;
    margin: 0 auto 2.5rem;
}

.jt-services-head h2 {
    font-size: clamp(1.45rem, 3vw, 2rem);
    margin: 0 0 1rem;
    color: var(--jt-ink);
    font-weight: 600;
    letter-spacing: -.005em;
}

.jt-services-head h2 span {
    color: var(--jt-primary);
    font-weight: 700;
}

.jt-services-head h2 em {
    font-style: normal;
    color: var(--jt-primary);
    margin-left: .15rem;
}

.jt-services-head p {
    color: var(--jt-muted);
    font-size: .92rem;
    line-height: 1.7;
    margin: 0 auto;
    max-width: 70ch;
}

/* Tab strip */
.jt-services-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2.5rem;
    flex-wrap: wrap;
    border-bottom: 1px solid var(--jt-border);
    margin-bottom: 2rem;
    padding: .35rem 0 .9rem;
    position: relative;
}

.srv-tab {
    background: transparent;
    border: none;
    padding: .55rem .25rem;
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--jt-muted);
    cursor: pointer;
    position: relative;
    transition: color .18s ease;
    line-height: 1;
}

.srv-tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -.95rem;
    height: 2px;
    background: var(--jt-primary);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.srv-tab:hover {
    color: var(--jt-ink);
}

.srv-tab.is-active {
    color: var(--jt-primary);
}

.srv-tab.is-active::after {
    transform: scaleX(1);
}

/* Panes */
.srv-pane {
    display: none;
}

.srv-pane.is-active {
    display: block;
    animation: srvFade .3s ease;
}

@keyframes srvFade {
    from {
        opacity: 0;
        transform: translateY(6px);
    }

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

/* Card grid (3-up). Borders form a connected cell-grid like the source. */
.srv-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border: 1px solid var(--jt-border);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 6px 18px rgba(15, 23, 42, .04);
}

.srv-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem 1.4rem;
    border-right: 1px solid var(--jt-border);
    border-bottom: 1px solid var(--jt-border);
    transition: background .25s ease, transform .25s ease;
    background: #fff;
}

/* Strip the trailing borders cell-by-cell so we don't get double lines */
.srv-card:nth-child(3n) {
    border-right: none;
}

.srv-card:nth-last-child(-n+3):not(:nth-last-child(n+4)) {
    border-bottom: none;
}

/* Fallback for grids whose row count isn't a multiple of 3 */
.srv-grid>.srv-card:nth-last-child(1),
.srv-grid>.srv-card:nth-last-child(2),
.srv-grid>.srv-card:nth-last-child(3) {
    /* will be selectively reset below per row count */
}

.srv-card:hover {
    background: var(--jt-primary-050);
}

.srv-card-ico {
    flex: none;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
    margin-top: 2px;
}

.srv-card:hover .srv-card-ico {
    background: var(--jt-primary);
    color: #fff;
    transform: scale(1.06) rotate(-3deg);
}

.srv-card-meta {
    min-width: 0;
}

.srv-card-meta h3 {
    color: var(--jt-primary-700);
    font-size: 1rem;
    margin: 0 0 .45rem;
    font-weight: 600;
    letter-spacing: -.005em;
    line-height: 1.25;
    transition: color .2s ease;
}

.srv-card:hover .srv-card-meta h3 {
    color: var(--jt-primary);
}

.srv-card-meta p {
    color: var(--jt-muted);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

/* Responsive */
@media (max-width: 991.98px) {
    .srv-grid {
        grid-template-columns: 1fr 1fr;
    }

    .srv-card:nth-child(3n) {
        border-right: 1px solid var(--jt-border);
    }

    .srv-card:nth-child(2n) {
        border-right: none;
    }

    .srv-card:nth-last-child(-n+3):not(:nth-last-child(n+4)) {
        border-bottom: 1px solid var(--jt-border);
    }

    .srv-card:nth-last-child(-n+2):not(:nth-last-child(n+3)) {
        border-bottom: none;
    }
}

@media (max-width: 575.98px) {
    .jt-services {
        padding: 2.5rem 0 2.5rem;
    }

    .jt-services-head {
        margin-bottom: 1.75rem;
    }

    .jt-services-tabs {
        gap: 1.25rem;
        padding-bottom: .65rem;
    }

    .srv-tab {
        font-size: .88rem;
        padding: .4rem .15rem;
    }

    .srv-grid {
        grid-template-columns: 1fr;
    }

    .srv-card {
        padding: 1.15rem 1.1rem;
    }

    .srv-card,
    .srv-card:nth-child(2n),
    .srv-card:nth-child(3n) {
        border-right: none;
    }

    .srv-card:not(:last-child) {
        border-bottom: 1px solid var(--jt-border) !important;
    }

    .srv-card:last-child {
        border-bottom: none !important;
    }

    .srv-card-ico {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
    }
}

/* =====================================================================
   DISCOVER THE DIFFERENCE  green stage with 6 feature blocks
   ===================================================================== */
.jt-discover {
    position: relative;
    padding: 4rem 0 9rem;
    color: #fff;
    background:
        radial-gradient(900px 500px at 100% 0%, rgba(255, 255, 255, .12), transparent 55%),
        radial-gradient(700px 400px at -10% 100%, rgba(0, 0, 0, .18), transparent 55%),
        linear-gradient(135deg, #2DBE91 0%, #1FA77B 50%, #178866 100%);
    overflow: hidden;
    isolation: isolate;
}

.jt-discover-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    overflow: hidden;
}

.jt-discover .bg-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(70px);
    opacity: .55;
}

.jt-discover .bg-blob-1 {
    width: 360px;
    height: 360px;
    top: -100px;
    left: -120px;
    background: radial-gradient(circle, rgba(255, 255, 255, .45), transparent 70%);
}

.jt-discover .bg-blob-2 {
    width: 320px;
    height: 320px;
    bottom: -120px;
    right: 5%;
    background: radial-gradient(circle, rgba(0, 0, 0, .35), transparent 70%);
}

.jt-discover .bg-blob-3 {
    width: 240px;
    height: 240px;
    top: 35%;
    right: -60px;
    background: radial-gradient(circle, rgba(166, 240, 213, .45), transparent 70%);
}

.jt-discover .bg-grid {
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 70%, transparent);
    opacity: .8;
}

.jt-discover-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 2.5rem;
    position: relative;
    z-index: 1;
}

.jt-eyebrow.jt-eyebrow--invert {
    background: rgba(255, 255, 255, .14);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .28);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.jt-discover-head h2 {
    color: #fff;
    margin: .85rem 0 .85rem;
    font-size: clamp(1.55rem, 3vw, 2.15rem);
    letter-spacing: -.01em;
}

.jt-discover-head h2 span {
    background: linear-gradient(120deg, #ffffff 0%, #B6F2DC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.jt-discover-head p {
    color: rgba(255, 255, 255, .85);
    font-size: .95rem;
    line-height: 1.65;
    margin: 0 auto;
    max-width: 64ch;
}

/* Feature grid */
.jt-discover-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem 1.75rem;
}

.jt-feature {
    position: relative;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    padding: 1.1rem 1.15rem;
    border-radius: 14px;
    background: rgba(255, 255, 255, .08);
    border: 1px solid rgba(255, 255, 255, .14);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    transition: transform .28s ease, background .28s ease, border-color .28s ease, box-shadow .28s ease;
    overflow: hidden;
}

.jt-feature::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 0%, rgba(255, 255, 255, .10) 50%, transparent 100%);
    transform: translateX(-110%);
    transition: transform .8s ease;
    pointer-events: none;
}

.jt-feature:hover {
    transform: translateY(-4px);
    background: rgba(255, 255, 255, .14);
    border-color: rgba(255, 255, 255, .30);
    box-shadow: 0 18px 36px rgba(0, 0, 0, .20);
}

.jt-feature:hover::before {
    transform: translateX(110%);
}

.jt-feature .ft-ico {
    flex: none;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 1.3rem;
    transition: background .25s ease, color .25s ease, transform .35s cubic-bezier(.22, .61, .36, 1);
    position: relative;
    z-index: 1;
}

.jt-feature:hover .ft-ico {
    background: #fff;
    color: var(--jt-primary-700);
    transform: scale(1.05) rotate(-4deg);
    border-color: #fff;
}

.jt-feature .ft-text {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.jt-feature h3 {
    color: #fff;
    font-family: var(--jt-font-display);
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 .35rem;
    line-height: 1.25;
}

.jt-feature p {
    color: rgba(255, 255, 255, .80);
    font-size: .85rem;
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 991.98px) {
    .jt-discover {
        padding: 3.25rem 0 8rem;
    }

    .jt-discover-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.1rem;
    }
}

@media (max-width: 767.98px) {
    .jt-discover {
        padding: 2.5rem 0 6.5rem;
    }

    .jt-discover-head {
        margin-bottom: 1.75rem;
    }

    .jt-discover-head h2 {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }

    .jt-discover-head p {
        font-size: .88rem;
        line-height: 1.55;
    }

    .jt-discover-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .jt-feature {
        padding: .9rem 1rem;
        gap: .8rem;
    }

    .jt-feature .ft-ico {
        width: 40px;
        height: 40px;
        font-size: 1.1rem;
    }

    .jt-feature h3 {
        font-size: .95rem;
    }

    .jt-feature p {
        font-size: .82rem;
    }
}

/* =====================================================================
   STATS dark floating card overlapping the discover section
   ===================================================================== */
.jt-stats-section {
    position: relative;
    margin-top: -6rem;
    padding-bottom: 3rem;
    z-index: 3;
}

.jt-stats-card {
    background: linear-gradient(135deg, #1F2937 0%, #111827 100%);
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 22px;
    padding: 1.75rem 1.5rem;
    box-shadow:
        0 30px 60px rgba(15, 23, 42, .35),
        0 1px 0 rgba(255, 255, 255, .04) inset;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    color: #fff;
    position: relative;
    overflow: hidden;
}

.jt-stats-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--jt-primary) 50%, transparent 100%);
    opacity: .5;
}

.jt-stats-card .stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: .75rem .5rem;
    border-right: 1px solid rgba(255, 255, 255, .08);
    transition: transform .25s ease;
}

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

.jt-stats-card .stat:hover {
    transform: translateY(-2px);
}

.jt-stats-card .stat .ico {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: rgba(45, 190, 145, .14);
    border: 1px solid rgba(45, 190, 145, .28);
    color: var(--jt-primary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    margin-bottom: .85rem;
    transition: background .25s ease, color .25s ease, transform .25s ease;
}

.jt-stats-card .stat:hover .ico {
    background: var(--jt-primary);
    color: #fff;
    transform: scale(1.05);
}

.jt-stats-card .stat strong {
    font-family: var(--jt-font-display);
    font-size: clamp(1.7rem, 3.2vw, 2.2rem);
    font-weight: 800;
    line-height: 1;
    color: #fff;
    letter-spacing: -.01em;
}

.jt-stats-card .stat span {
    color: rgba(255, 255, 255, .70);
    font-size: .85rem;
    margin-top: .4rem;
    font-weight: 500;
}

@media (max-width: 767.98px) {
    .jt-stats-section {
        margin-top: -4.5rem;
        padding-bottom: 2rem;
    }

    .jt-stats-card {
        grid-template-columns: repeat(2, 1fr);
        padding: 1.25rem 1rem;
        border-radius: 16px;
    }

    .jt-stats-card .stat {
        padding: 1rem .5rem;
        border-right: none;
    }

    .jt-stats-card .stat:nth-child(odd) {
        border-right: 1px solid rgba(255, 255, 255, .08);
    }

    .jt-stats-card .stat:nth-child(1),
    .jt-stats-card .stat:nth-child(2) {
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .jt-stats-card .stat .ico {
        width: 44px;
        height: 44px;
        font-size: 1.15rem;
        margin-bottom: .55rem;
    }

    .jt-stats-card .stat strong {
        font-size: 1.55rem;
    }

    .jt-stats-card .stat span {
        font-size: .78rem;
    }
}

@media (max-width: 380px) {
    .jt-stats-card {
        grid-template-columns: 1fr;
    }

    .jt-stats-card .stat {
        border-right: none !important;
        border-bottom: 1px solid rgba(255, 255, 255, .08);
    }

    .jt-stats-card .stat:last-child {
        border-bottom: none;
    }
}

/* =====================================================================
   CLIENT'S FEEDBACK  Google reviews section on home page
   ===================================================================== */
.jt-feedback {
    padding: 4rem 0;
    background: var(--jt-bg-alt);
    position: relative;
}

.jt-feedback .jt-section-head h2 span {
    color: var(--jt-primary-700);
    background: linear-gradient(120deg, var(--jt-primary), var(--jt-primary-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.jt-feedback .jt-eyebrow i.bi-google {
    color: #4285F4;
}

/* Overall banner */
.jt-feedback-overall {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    padding: 1.25rem 1.5rem;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 14px;
    box-shadow: var(--jt-shadow-sm);
    margin: 0 0 2rem;
    flex-wrap: wrap;
}

.jt-feedback-overall .overall-left {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
}

.jt-feedback-overall .g-logo {
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: 1.85rem;
    letter-spacing: -.02em;
    line-height: 1;
}

.jt-feedback-overall .g-logo .g-b {
    color: #4285F4;
}

.jt-feedback-overall .g-logo .g-o {
    color: #EA4335;
}

.jt-feedback-overall .g-logo .g-y {
    color: #FBBC04;
}

.jt-feedback-overall .g-logo .g-bb {
    color: #4285F4;
}

.jt-feedback-overall .g-logo .g-g {
    color: #34A853;
}

.jt-feedback-overall .g-logo .g-r {
    color: #EA4335;
}

.jt-feedback-overall strong {
    font-family: var(--jt-font-display);
    font-weight: 800;
    font-size: 1.7rem;
    color: var(--jt-ink);
    line-height: 1;
    display: block;
}

.jt-feedback-overall .stars {
    color: #FBBC04;
    font-size: .9rem;
    margin: 4px 0 2px;
    letter-spacing: 1px;
}

.jt-feedback-overall .stars .is-empty {
    color: var(--jt-border);
}

.jt-feedback-overall small {
    color: var(--jt-muted);
    font-size: .78rem;
}

/* Reviews grid */
.jt-feedback-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.1rem;
}

.jt-feedback-card {
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 14px;
    padding: 1.15rem 1.2rem 1.25rem;
    transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    display: flex;
    flex-direction: column;
    gap: .65rem;
    position: relative;
}

.jt-feedback-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--jt-shadow);
    border-color: var(--jt-primary-100);
}

.jt-feedback-card header {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.jt-feedback-card .avatar {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-700));
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .92rem;
    flex: none;
}

.jt-feedback-card img.avatar.avatar-img {
    background: var(--jt-bg-alt);
    object-fit: cover;
    object-position: center;
    border: 1px solid var(--jt-border);
    display: block;
}

.jt-feedback-card .who {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    min-width: 0;
    flex: 1 1 auto;
}

.jt-feedback-card .who strong {
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .92rem;
    color: var(--jt-ink);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}

.jt-feedback-card .who .flag {
    font-size: .85rem;
}

.jt-feedback-card .who .role {
    color: var(--jt-muted);
    font-size: .72rem;
    margin-top: 2px;
}

.jt-feedback-card .g-mark {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--jt-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.jt-feedback-card .rating {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .65rem;
}

.jt-feedback-card .rating .stars {
    color: #FBBC04;
    font-size: .85rem;
    letter-spacing: 1px;
}

.jt-feedback-card .rating .stars .is-empty {
    color: var(--jt-border);
}

.jt-feedback-card .rating .when {
    color: var(--jt-muted);
    font-size: .72rem;
}

.jt-feedback-card p {
    color: var(--jt-text);
    font-size: .85rem;
    line-height: 1.6;
    margin: 0;
}

@media (max-width: 991.98px) {
    .jt-feedback-grid {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 575.98px) {
    .jt-feedback {
        padding: 2.5rem 0;
    }

    .jt-feedback-grid {
        grid-template-columns: 1fr;
    }

    .jt-feedback-overall {
        padding: 1rem 1.1rem;
    }

    .jt-feedback-overall strong {
        font-size: 1.5rem;
    }
}

/* =====================================================================
   FLOATING GOOGLE RATING WIDGET
   Mirrors the BRB plugin's `rpi-badge-left` pattern used on jantrah.com:
   white horizontal card flush with the left edge, vertically centered,
   with a multi-colour Google accent stripe and a colour Google "G" logo.
   ===================================================================== */
.jt-grw {
    position: fixed;
    left: 0;
    bottom: 1.5rem;
    z-index: 1080;
    pointer-events: none;
}

.jt-grw>* {
    pointer-events: auto;
}

.jt-grw-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .85rem;
    padding: .85rem 1.1rem .85rem 1rem;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-left: none;
    border-radius: 0 14px 14px 0;
    box-shadow: 0 14px 30px rgba(15, 23, 42, .14);
    text-decoration: none;
    color: var(--jt-ink);
    transition: transform .25s ease, box-shadow .25s ease;
    overflow: hidden;
}

.jt-grw-card:hover {
    transform: translateX(3px);
    box-shadow: 0 20px 42px rgba(15, 23, 42, .20);
    color: var(--jt-ink);
}

/* The Google rainbow accent stripe on the left edge */
.jt-grw-line {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg,
            #4285F4 0%,
            #4285F4 25%,
            #34A853 25%,
            #34A853 50%,
            #FBBC04 50%,
            #FBBC04 75%,
            #EA4335 75%,
            #EA4335 100%);
}

/* Google "G" logo in a white circular bubble */
.jt-grw-logo {
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    border: 1px solid var(--jt-border);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}

.jt-grw-logo svg {
    display: block;
}

/* Right-hand info column */
.jt-grw-info {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    gap: 2px;
    min-width: 0;
}

.jt-grw-name {
    font-family: var(--jt-font-display);
    font-weight: 700;
    font-size: .82rem;
    color: var(--jt-ink);
    letter-spacing: -.005em;
}

.jt-grw-rating {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    line-height: 1;
}

.jt-grw-num {
    font-family: var(--jt-font-display);
    font-weight: 800;
    font-size: .98rem;
    color: #fb8e28;
    line-height: 1;
}

.jt-grw-stars {
    color: #fb8e28;
    font-size: .85rem;
    letter-spacing: 1px;
    line-height: 1;
    display: inline-flex;
    gap: 1px;
}

.jt-grw-stars .is-empty {
    color: #e7c79a;
    opacity: .55;
}

.jt-grw-stars .is-half {
    background: linear-gradient(90deg, #fb8e28 50%, #e7c79a 50%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.jt-grw-based {
    color: var(--jt-muted);
    font-size: .68rem;
    letter-spacing: .01em;
    margin-top: 2px;
}

/* ----- Mobile: detached rounded card with margin from edge ----- */
@media (max-width: 767.98px) {
    .jt-grw {
        bottom: 1rem;
        left: .75rem;
    }

    .jt-grw-card {
        border-left: 1px solid var(--jt-border);
        border-radius: 14px;
        padding: .65rem .9rem .65rem .85rem;
        gap: .65rem;
    }

    .jt-grw-line {
        left: 0;
        border-radius: 14px 0 0 14px;
    }

    .jt-grw-logo {
        width: 32px;
        height: 32px;
    }

    .jt-grw-logo svg {
        width: 18px;
        height: 18px;
    }

    .jt-grw-name {
        font-size: .72rem;
    }

    .jt-grw-num {
        font-size: .85rem;
    }

    .jt-grw-stars {
        font-size: .72rem;
    }

    .jt-grw-based {
        font-size: .62rem;
    }
}

/* CTA section */
.jt-cta {
    background: linear-gradient(135deg, var(--jt-primary), var(--jt-primary-700));
    color: #fff;
    border-radius: var(--jt-radius-lg);
    padding: 1.75rem 2rem;
    display: grid;
    grid-template-columns: 1.4fr auto;
    align-items: center;
    gap: 1.5rem;
}

.jt-cta h2 {
    color: #fff;
    margin: 0 0 .25rem;
    font-size: 1.4rem;
}

.jt-cta p {
    color: rgba(255, 255, 255, .9);
    margin: 0;
    font-size: .9rem;
}

.jt-cta .jt-btn-primary {
    background: #fff;
    color: var(--jt-primary-700);
}

.jt-cta .jt-btn-primary:hover {
    background: var(--jt-bg-alt);
}

@media (max-width: 767.98px) {
    .jt-cta {
        grid-template-columns: 1fr;
        padding: 1.5rem;
        text-align: center;
    }

    .jt-cta .jt-btn-lg {
        width: 100%;
        justify-content: center;
    }
}

/* =====================================================================
   GENERAL MOBILE TIGHTENING (home page sections)
   ===================================================================== */
@media (max-width: 767.98px) {
    .jt-section {
        padding: 2.25rem 0;
    }

    .jt-section-head {
        margin-bottom: 1.4rem;
    }

    .jt-section-head h2 {
        font-size: clamp(1.3rem, 5vw, 1.7rem);
    }

    .jt-section-head p {
        font-size: .85rem;
    }

    .jt-grid {
        grid-template-columns: 1fr;
        gap: .75rem;
    }

    .jt-card {
        padding: 1rem;
    }

    .jt-card .icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .jt-card h3 {
        font-size: .95rem;
    }

    .jt-card p {
        font-size: .82rem;
    }
}

/* Two-column grid on tablet phones (480-767px) reads better than single col */
@media (min-width: 480px) and (max-width: 767.98px) {
    .jt-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ===================================================================== */
/* FORMS                                                                   */
/* ===================================================================== */
.jt-form {
    display: grid;
    gap: .85rem;
}

.jt-form .field {
    display: grid;
    gap: .3rem;
}

.jt-form label {
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .82rem;
    color: var(--jt-ink);
}

.jt-form input,
.jt-form textarea,
.jt-form select {
    width: 100%;
    border: 1px solid var(--jt-border);
    border-radius: var(--jt-radius);
    padding: .55rem .75rem;
    font: inherit;
    font-size: .9rem;
    color: var(--jt-ink);
    background: #fff;
    transition: border-color .18s ease, box-shadow .18s ease;
}

.jt-form input:focus,
.jt-form textarea:focus,
.jt-form select:focus {
    outline: none;
    border-color: var(--jt-primary);
    box-shadow: 0 0 0 4px rgba(45, 190, 145, .18);
}

.jt-form .row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    align-items: start;
}

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

/* Validation states  keep layout stable when errors appear */
.jt-form .field {
    position: relative;
}

.jt-form .field.has-error input,
.jt-form .field.has-error textarea,
.jt-form .field.has-error select,
.jt-form input.is-invalid,
.jt-form textarea.is-invalid,
.jt-form select.is-invalid {
    border-color: var(--jt-danger, #e11d48);
    /* Remove Bootstrap's built-in icon that overlaps the placeholder */
    background-image: none;
    padding-right: .75rem;
}

.jt-form .field.has-error input:focus,
.jt-form .field.has-error textarea:focus,
.jt-form .field.has-error select:focus,
.jt-form input.is-invalid:focus,
.jt-form textarea.is-invalid:focus,
.jt-form select.is-invalid:focus {
    border-color: var(--jt-danger, #e11d48);
    box-shadow: 0 0 0 4px rgba(225, 29, 72, .15);
}

.jt-form .help-block,
.jt-form .invalid-feedback {
    display: block;
    margin: .25rem 0 0;
    font-size: .78rem;
    line-height: 1.3;
    color: var(--jt-danger, #e11d48);
}

.jt-form .help-block:empty,
.jt-form .invalid-feedback:empty {
    display: none;
}

/* =====================================================================
   CONTACT PAGE  single-column form wrapper + Google Maps embed
   ===================================================================== */
.jt-contact-form-wrap {
    max-width: 760px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 18px;
    padding: 2.25rem 2rem;
}

.jt-contact-form-head {
    text-align: center;
    margin-bottom: 1.75rem;
}

.jt-contact-form-head .jt-eyebrow {
    margin-bottom: .65rem;
}

.jt-contact-form-head h2 {
    margin: .35rem 0 .55rem;
    font-size: clamp(1.35rem, 2.4vw, 1.75rem);
    color: var(--jt-ink);
}

.jt-contact-form-head p {
    color: var(--jt-muted);
    font-size: .9rem;
    margin: 0;
}

/* Map section */
.jt-contact-map-section {
    background: #fff;
    margin-top: 0;
    border-top: 1px solid var(--jt-border);
}

.jt-contact-map-head {
    padding: 2.25rem 0 1.75rem;
}

.jt-contact-map-head .jt-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.jt-contact-map-head .meta {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 64ch;
}

.jt-contact-map-head .meta .jt-eyebrow {
    margin-bottom: .55rem;
}

.jt-contact-map-head .meta h2 {
    margin: .35rem 0 .35rem;
    font-size: clamp(1.4rem, 2.5vw, 1.85rem);
    color: var(--jt-ink);
}

.jt-contact-map-head .meta h2 span {
    color: var(--jt-primary-700);
    background: linear-gradient(120deg, var(--jt-primary), var(--jt-primary-700));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.jt-contact-map-head .meta p {
    color: var(--jt-muted);
    font-size: .92rem;
    line-height: 1.55;
    margin: 0;
}

.jt-contact-map-frame {
    width: 100%;
    line-height: 0;
    background: var(--jt-bg-alt);
    border-top: 1px solid var(--jt-border);
}

.jt-contact-map-frame iframe {
    width: 100%;
    height: 500px;
    display: block;
    border: 0;
    filter: saturate(1.05);
}

@media (max-width: 767.98px) {
    .jt-contact-form-wrap {
        padding: 1.5rem 1.15rem;
        border-radius: 14px;
    }

    .jt-contact-map-head {
        padding: 1.5rem 0 1.25rem;
    }

    .jt-contact-map-head .jt-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .jt-contact-map-frame iframe {
        height: 360px;
    }
}

@media (max-width: 575.98px) {
    .jt-contact-map-frame iframe {
        height: 320px;
    }
}

/* Captcha Styling */
#contact-form img {
    width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid var(--jt-border);
    padding: 8px;
    background: #f8fafc;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    transition: all 0.2s ease;
}

#contact-form img:hover {
    transform: translateY(-2px);
    border-color: var(--jt-primary);
}

.captcha-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: 100%;
}

.captcha-wrapper input {
    width: 100% !important;
    max-width: none !important;
}

.jt-info-card {
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: var(--jt-radius-lg);
    padding: 1.5rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.jt-info-card .icon {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.jt-info-card h4 {
    margin: 0 0 .25rem;
    font-size: 1rem;
}

.jt-info-card p {
    margin: 0;
    color: var(--jt-muted);
    font-size: .9rem;
}

/* ===================================================================== */
/* FOOTER  light theme with subtle wireframe pattern                     */
/* ===================================================================== */
#jt-footer {
    position: relative;
    background: #F4F6F5;
    color: var(--jt-ink);
    padding: 3rem 0 1.25rem;
    overflow: hidden;
    border-top: 1px solid var(--jt-border);
}

.jt-footer-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: .55;
    background-image:
        radial-gradient(1100px 320px at 8% -20%, rgba(45, 190, 145, .12), transparent 70%),
        radial-gradient(900px 280px at 100% 110%, rgba(45, 190, 145, .10), transparent 70%),
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='800' height='600' viewBox='0 0 800 600'><g fill='none' stroke='%2394a3b8' stroke-width='.6' stroke-opacity='.4'><path d='M0 480 L150 380 L300 460 L450 360 L600 440 L800 340'/><path d='M0 520 L120 460 L260 520 L420 440 L580 510 L800 420'/><path d='M40 80 L180 30 L300 100 L460 40 L620 110 L780 60'/><path d='M0 130 L160 70 L320 150 L480 80 L640 160 L800 100'/><circle cx='150' cy='380' r='2.5'/><circle cx='300' cy='460' r='2.5'/><circle cx='450' cy='360' r='2.5'/><circle cx='600' cy='440' r='2.5'/><circle cx='180' cy='30'  r='2.5'/><circle cx='460' cy='40'  r='2.5'/><circle cx='620' cy='110' r='2.5'/></g></svg>");
    background-size: cover, cover, 100% 100%;
    background-repeat: no-repeat;
}

.jt-footer-inner {
    position: relative;
    z-index: 1;
}

#jt-footer h5 {
    color: var(--jt-primary-600);
    font-family: var(--jt-font-display);
    font-size: .95rem;
    margin: 0 0 .9rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    font-weight: 700;
}

#jt-footer a {
    color: var(--jt-text);
    font-size: .85rem;
    transition: color .18s ease, padding-left .18s ease;
}

#jt-footer a:hover {
    color: var(--jt-primary-700);
}

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

.jt-footer-about {
    color: var(--jt-text);
    font-size: .85rem;
    line-height: 1.65;
    margin: 0;
    max-width: 32ch;
}

.jt-footer-about strong {
    color: var(--jt-primary-600);
    font-weight: 700;
}

.jt-footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: .5rem;
}

.jt-footer-links li {
    position: relative;
    padding-left: 1rem;
}

.jt-footer-links li::before {
    content: "\2022"; /* • */
    position: absolute;
    left: 0;
    top: 0;
    color: var(--jt-primary, #1FA77B);
    font-weight: 700;
    line-height: 1.4;
}

.jt-footer-links a {
    display: inline-block;
}

.jt-footer-links a:hover {
    padding-left: 4px;
}

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

.jt-contact-country {
    display: flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .55rem;
    font-family: var(--jt-font-display);
    font-size: .9rem;
    color: var(--jt-ink);
}

.jt-contact-country .flag {
    font-size: 1.05rem;
    line-height: 1;
}

.jt-contact-country strong {
    font-weight: 600;
}

.jt-contact-row {
    display: flex;
    align-items: flex-start;
    gap: .5rem;
    font-size: .82rem;
    line-height: 1.5;
    margin-bottom: .4rem;
    color: var(--jt-text);
}

.jt-contact-row i {
    color: var(--jt-primary-600);
    width: 16px;
    flex: none;
    margin-top: 2px;
    font-size: .9rem;
}

.jt-contact-row a {
    color: var(--jt-text);
}

.jt-contact-row a:hover {
    color: var(--jt-primary-700);
}

.jt-footer-socials {
    display: flex;
    gap: .4rem;
    margin-top: .75rem;
}

.jt-footer-socials a {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--jt-primary);
    color: #fff !important;
    transition: background .18s ease, transform .18s ease;
}

.jt-footer-socials a:hover {
    background: var(--jt-primary-700);
    transform: translateY(-2px);
    padding-left: 0;
}

.jt-footer-socials i {
    font-size: .85rem;
}

.jt-footer-bottom {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(15, 23, 42, .08);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    color: var(--jt-muted);
    font-size: .78rem;
}

.jt-footer-bottom a {
    color: var(--jt-text);
    font-size: .78rem;
}

.jt-footer-bottom a+a {
    margin-left: 1rem;
}

@media (max-width: 1199.98px) {
    .jt-footer-grid {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .jt-footer-contact-col {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767.98px) {
    .jt-footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .jt-footer-contact-col {
        grid-column: 1 / -1;
    }
}

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

    .jt-footer-contacts-grid {
        grid-template-columns: 1fr;
    }
}

/* ===================================================================== */
/* MISC                                                                    */
/* ===================================================================== */
.jt-prose h2 {
    margin-top: 2rem;
}

.jt-prose h3 {
    margin-top: 1.5rem;
}

.jt-prose p,
.jt-prose li {
    color: var(--jt-text);
}

.jt-prose ul {
    padding-left: 1.25rem;
}

.jt-prose ul li {
    margin-bottom: .35rem;
}

/* =====================================================================
   SERVICE / PRODUCT DETAIL PAGES  full-width article + below-CTA
   The article content itself is rendered exactly as the HTML editor saved
   it we don't impose any typography, alignment, spacing or color rules
   here so admin-defined inline styles are honoured 1:1.
   ===================================================================== */
.jt-article {
    width: 100%;
}

.jt-article--product .jt-article-figure {
    display: none;
    /* User requested to hide the figure specifically on the product page */
}

.jt-article-figure {
    margin: 0 0 2rem;
    border-radius: 18px;
    overflow: hidden;
    background: var(--jt-bg-alt);
}

.jt-article-image {
    width: 100%;
    height: auto;
    display: block;
}

.jt-article-content {
    width: 100%;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 
   Responsive fixes for rich HTML content (e.g. copied from WordPress)
   Ensures images, tables, and other elements don't break the mobile layout.
*/
.jt-article-content img {
    max-width: 100% !important;
    height: auto !important;
}

.jt-article-content table {
    width: 100% !important;
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
}

.jt-article-content * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 767.98px) {

    /* Prevent overlapping by resetting positioning and heights */
    .jt-article-content * {
        position: static !important;
        /* Fixes absolute/fixed overlapping */
        height: auto !important;
        /* Ensures containers expand to fit content */
        min-height: auto !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        transform: none !important;
        /* Removes translate/scale positioning */
        flex: none !important;
        /* Disables flex layout */
        flex-basis: 100% !important;
        grid-column: 1 / -1 !important;
        inset: auto !important;
        /* Resets top/left/right/bottom */
    }

    /* Force major structural elements to stack vertically and take full width */
    .jt-article-content div,
    .jt-article-content p,
    .jt-article-content section,
    .jt-article-content article,
    .jt-article-content figure,
    .jt-article-content table,
    .jt-article-content ul,
    .jt-article-content ol,
    .jt-article-content li,
    .jt-article-content h1,
    .jt-article-content h2,
    .jt-article-content h3,
    .jt-article-content h4,
    .jt-article-content h5,
    .jt-article-content h6 {
        display: block !important;
        width: 100% !important;
        float: none !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 1.5rem !important;
        /* Adds spacing between rows */
        text-align: left !important;
        /* Centering often fails on absolute-reset content */
    }

    /* Ensure images take their own row and don't float, but don't stretch small icons */
    .jt-article-content img {
        display: block !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        float: none !important;
        margin: 0 0 1.5rem 0 !important;
    }

    /* Prevent inline text elements from breaking into new lines unless they are containers */
    .jt-article-content span,
    .jt-article-content a,
    .jt-article-content strong,
    .jt-article-content b,
    .jt-article-content em,
    .jt-article-content i {
        display: inline;
        /* Keep text natural */
        width: auto !important;
        margin-bottom: 0 !important;
    }
}

.jt-article-content iframe {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
}

/* Lists whose items already start with an icon (e.g. WordPress feature
   lists migrated to <i class="bi bi-check-circle-fill">) shouldn't ALSO
   show the browser's default bullet. Drop the marker and the indent so
   the icon sits at the natural left edge. Plain lists (no icon prefix)
   keep their bullets. */
.jt-article-content ul:has(> li > i.bi:first-child) {
    list-style: none;
    padding-left: 0;
    margin-left: 0;
}
.jt-article-content ul:has(> li > i.bi:first-child) > li {
    margin-bottom: .35rem;
    line-height: 1.55;
}

/* Inline figure images inside product/service article content.
   No background or solid border on the IMG itself — many WordPress
   exports use PNGs with transparent padding around the actual subject,
   and a background colour would render that padding as visible empty
   space (looking like the image was "stretched"). */
.jt-article-content figure {
    margin: 1.25rem 0;
    text-align: center;
}
.jt-article-content figure img {
    border-radius: 14px;
    background: transparent;
    box-shadow: 0 8px 28px rgba(15, 23, 42, .06);
    display: inline-block;
    object-fit: contain;
}
.jt-article-content figure figcaption {
    margin-top: .55rem;
    font-size: .82rem;
    color: var(--jt-muted);
}

/* Magazine-style section blocks. Each <section class="article-block">
   establishes its own float-containing context, so its H2 / text wrap
   alongside its <figure> instead of being pushed above by `clear: both`,
   and its float never bleeds into the next section.

   Mobile (<=767.98px) inherits the existing reset rules in this file
   that force `float: none; width: 100%; display: block`, so figures
   stack vertically above the section text. */
.jt-article-content .article-block {
    display: flow-root;
    margin: 0 0 2rem;
}

@media (min-width: 768px) {
    .jt-article-content .article-block figure.align-left {
        float: left;
        width: clamp(200px, 30%, 300px);
        margin: .15rem 1.75rem 1rem 0;
        text-align: left;
    }
    .jt-article-content .article-block figure.align-right {
        float: right;
        width: clamp(200px, 30%, 300px);
        margin: .15rem 0 1rem 1.75rem;
        text-align: right;
    }
    /* Image fills the figure width and is height-capped so portrait
       sources (e.g. 769x1024 phone mockups) don't tower. width:100%
       inside the clamped figure stays within the 200–300px range. */
    .jt-article-content .article-block figure.align-left img,
    .jt-article-content .article-block figure.align-right img {
        width: 100%;
        max-height: 260px;
        object-fit: contain;
    }
    /* H2 and H3 inside a block must NOT clear — they need to flow
       alongside the floated figure so heading + text stay in the same
       column. Block boundaries (display:flow-root) contain the float. */
    .jt-article-content .article-block h2,
    .jt-article-content .article-block h3 {
        clear: none;
        margin-top: 0;
    }
}

/* Collapsible FAQ items inside product/service article content */
.jt-article-content details {
    border: 1px solid var(--jt-border);
    border-radius: 12px;
    background: #fff;
    padding: .85rem 1.1rem;
    margin: 0 0 .65rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}
.jt-article-content details[open] {
    border-color: var(--jt-primary);
    box-shadow: 0 6px 20px rgba(45, 190, 145, .08);
}
.jt-article-content details summary {
    cursor: pointer;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: var(--jt-ink);
    font-size: .98rem;
    line-height: 1.4;
    user-select: none;
}
.jt-article-content details summary::-webkit-details-marker { display: none; }
.jt-article-content details summary::after {
    content: "\F282"; /* bi-plus-lg */
    font-family: "bootstrap-icons";
    font-size: .9rem;
    color: var(--jt-primary-700);
    transition: transform .2s ease;
    flex: none;
}
.jt-article-content details[open] summary::after {
    content: "\F2EA"; /* bi-dash-lg */
}
.jt-article-content details > p {
    margin: .6rem 0 0;
    color: var(--jt-text);
    font-size: .92rem;
    line-height: 1.65;
}

/* ----- Quote / CTA banner under the article ----- */
.jt-quote-cta {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    padding: 2.5rem 2.75rem;
    background: linear-gradient(135deg, var(--jt-primary) 0%, var(--jt-primary-700) 100%);
    border-radius: 22px;
    color: #fff;
    overflow: hidden;
    isolation: isolate;
    box-shadow: 0 24px 48px rgba(45, 190, 145, .25);
}

.jt-quote-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1.2px);
    background-size: 22px 22px;
    mask-image: linear-gradient(135deg, transparent, #000 30%, #000 80%, transparent);
    -webkit-mask-image: linear-gradient(135deg, transparent, #000 30%, #000 80%, transparent);
    pointer-events: none;
    opacity: .4;
}

/* Decorative left art */
.jt-quote-cta-art {
    position: relative;
    width: 96px;
    height: 96px;
    flex: none;
    z-index: 1;
}

.jt-quote-cta-art .ico {
    position: relative;
    z-index: 2;
    width: 96px;
    height: 96px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .18);
    border: 1px solid rgba(255, 255, 255, .22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 2.4rem;
    backdrop-filter: blur(6px);
}

.jt-quote-cta-art .blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(28px);
    z-index: 1;
}

.jt-quote-cta-art .blob-1 {
    width: 80px;
    height: 80px;
    top: -20px;
    right: -20px;
    background: rgba(255, 255, 255, .30);
}

.jt-quote-cta-art .blob-2 {
    width: 60px;
    height: 60px;
    bottom: -15px;
    left: -15px;
    background: rgba(255, 255, 255, .20);
}

.jt-quote-cta-meta {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.jt-quote-cta-meta .eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255, 255, 255, .16);
    border: 1px solid rgba(255, 255, 255, .22);
    color: #fff;
    font-family: var(--jt-font-display);
    font-weight: 600;
    font-size: .72rem;
    padding: .3rem .65rem;
    border-radius: 999px;
    letter-spacing: .06em;
    text-transform: uppercase;
    margin-bottom: .65rem;
    backdrop-filter: blur(6px);
}

.jt-quote-cta-meta h2 {
    color: #fff;
    margin: 0 0 .55rem;
    font-size: clamp(1.3rem, 2.4vw, 1.7rem);
    line-height: 1.25;
    letter-spacing: -.005em;
}

.jt-quote-cta-meta h2 span {
    background: linear-gradient(120deg, #ffffff 0%, #B6F2DC 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.jt-quote-cta-meta p {
    color: rgba(255, 255, 255, .88);
    font-size: .92rem;
    line-height: 1.65;
    margin: 0;
    max-width: 56ch;
}

.jt-quote-cta-actions {
    display: flex;
    flex-direction: column;
    gap: .55rem;
    flex: none;
    position: relative;
    z-index: 1;
}

.jt-quote-cta-actions .jt-btn-primary {
    background: #fff;
    color: var(--jt-primary-700);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .18);
}

.jt-quote-cta-actions .jt-btn-primary:hover {
    background: var(--jt-primary-100);
    color: var(--jt-primary-700);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .25);
}

.jt-quote-cta-actions .jt-btn-outline {
    background: rgba(255, 255, 255, .10);
    color: #fff;
    border-color: rgba(255, 255, 255, .40);
    backdrop-filter: blur(4px);
}

.jt-quote-cta-actions .jt-btn-outline:hover {
    background: #fff;
    color: var(--jt-primary-700);
    border-color: #fff;
}

@media (max-width: 991.98px) {
    .jt-quote-cta {
        grid-template-columns: 1fr;
        text-align: center;
        padding: 2rem 1.75rem 2.25rem;
        gap: 1.5rem;
    }

    .jt-quote-cta-art {
        margin: 0 auto;
    }

    .jt-quote-cta-meta p {
        margin-left: auto;
        margin-right: auto;
    }

    .jt-quote-cta-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .jt-article-content {
        font-size: .95rem;
        line-height: 1.75;
    }

    .jt-quote-cta {
        padding: 1.75rem 1.25rem 2rem;
    }

    .jt-quote-cta-art {
        width: 76px;
        height: 76px;
    }

    .jt-quote-cta-art .ico {
        width: 76px;
        height: 76px;
        font-size: 2rem;
        border-radius: 20px;
    }

    .jt-quote-cta-actions {
        flex-direction: column;
    }

    .jt-quote-cta-actions .jt-btn {
        width: 100%;
        justify-content: center;
    }
}

.alert {
    border-radius: var(--jt-radius);
    border: none;
    padding: 1rem 1.25rem;
}

.alert-success {
    background: #DCFCE7;
    color: #166534;
}

.alert-danger {
    background: #FEE2E2;
    color: #991B1B;
}

/* Skip link for a11y */
.skip-link {
    position: absolute;
    left: -9999px;
    top: auto;
    width: 1px;
    height: 1px;
    overflow: hidden;
    background: var(--jt-primary);
    color: #fff;
    padding: .5rem .75rem;
    border-radius: 6px;
}

.skip-link:focus {
    left: 1rem;
    top: 1rem;
    width: auto;
    height: auto;
    z-index: 2000;
}

/* Print */
@media print {

    #jt-header,
    #jt-footer {
        display: none;
    }

    body {
        color: #000;
        background: #fff;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }

    html {
        scroll-behavior: auto;
    }
}

/* ---- Updated Hero Title ----------------------------------------------- */
.jt-hero-title {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

.jt-hero-title small {
    font-size: 1.1rem;
    color: var(--jt-primary-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.jt-brand-split {
    display: flex;
    gap: 0.5rem;
    font-size: clamp(2.5rem, 8vw, 5rem);
    font-weight: 900;
    color: var(--jt-ink);
    line-height: 1;
    margin-top: 0.5rem;
}

.jt-brand-split span {
    transition: transform 0.3s ease, color 0.3s ease;
    cursor: default;
    display: inline-block;
}

.jt-brand-split span:hover {
    transform: translateY(-8px);
    color: var(--jt-primary);
}

@media (max-width: 767.98px) {
    .jt-brand-split {
        gap: 0.25rem;
        font-size: 3.5rem;
    }

    .jt-hero-title small {
        font-size: 0.9rem;
    }
}

/* =====================================================================
   FAQ ACCORDION  shared across services / products / industries /
   team / contact / product-detail pages. Was previously inlined per
   page; promoted here so it works on DB-rendered detail pages too.
   ===================================================================== */
.jt-faq {
    display: grid;
    gap: .85rem;
    max-width: 820px;
    margin: 0 auto;
}

.jt-faq details {
    background: #fff;
    border: 1px solid var(--jt-border);
    border-radius: 12px;
    padding: 0;
    transition: border-color .2s ease, box-shadow .2s ease;
}

.jt-faq details[open] {
    border-color: var(--jt-primary-100);
    box-shadow: 0 6px 18px rgba(15, 23, 42, .05);
}

.jt-faq summary {
    cursor: pointer;
    padding: 1.1rem 1.25rem;
    font-weight: 600;
    color: var(--jt-ink, #0f172a);
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}

.jt-faq summary::-webkit-details-marker {
    display: none;
}

.jt-faq summary::after {
    content: "+";
    font-size: 1.5rem;
    font-weight: 300;
    color: var(--jt-primary-700);
    transition: transform .2s ease;
}

.jt-faq details[open] summary::after {
    transform: rotate(45deg);
}

.jt-faq .a {
    padding: 0 1.25rem 1.15rem;
    color: var(--jt-muted);
    line-height: 1.65;
}