/* =============================================================
   JET Case Stories — v10
   Blue: rgb(38,117,201) / Dark: #14325a / White: #fff
   Hero matches Breakdance: bg-image right, gradient left
   ============================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Outfit:wght@300;400;500;600;700&display=swap');
.jcs-archive *, .jcs-single * { box-sizing: border-box !important; }

.jcs-archive, .jcs-single {
    --blue: rgb(38,117,201);
    --navy: #14325a;
    --pale: #e8f1fb;
    --lighter: #f0f6fd;
    --off: #f5f7fa;
    --g100: #f0f2f5; --g200: #dfe3ea; --g300: #c5ccd6;
    --g500: #6b7a94; --g700: #3a4660; --g900: #1a2340;
    --green: #00B67A;
    --r: 15px; --rs: 8px; --pad: 9%;
    --sh: 0 1px 3px rgba(20,50,90,0.06);
    --sh-xl: 0 20px 60px rgba(20,50,90,0.14);
    --fh: 'Inter', -apple-system, sans-serif;
    --fb: 'Outfit', -apple-system, sans-serif;
    font-family: var(--fb) !important;
    color: var(--g900) !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
}

/* Force overflow visible for sticky */
.jcs-single, .jcs-single > *,
.jcs-single__twocol, .jcs-single__twocol-inner,
.jcs-single__col-media, .jcs-single__col-media-sticky {
    overflow: visible !important;
}

/* ═════════════════════════════════════════════════════
   HERO — Breakdance style
   Box with bg-image right (contain), blue gradient from left
   ═════════════════════════════════════════════════════ */

/* Archive hero — uses a static product image */
.jcs-archive__hero-section {
    padding: 4% 2% 2% !important;
    max-width: 100% !important; margin: -180px auto 0 !important;
    position: relative !important; z-index: 1 !important;
}
.jcs-archive__hero-box {
    position: relative !important;
    height: 65vh !important;
    border-radius: var(--r) !important;
    overflow: hidden !important;
    background-color: var(--blue) !important;
    /* Default bg — can be overridden inline or via a WP option later */
    background-image: url('') !important;
    background-size: contain !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    display: flex !important; align-items: center !important;
}
.jcs-archive__hero-gradient {
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(90deg, rgba(38,117,201,1) 47%, rgba(255,0,0,0) 100%) !important;
    z-index: 1 !important;
}
.jcs-archive__hero-content {
    position: relative !important; z-index: 2 !important;
    padding: 280px 7% 7% !important;
}
.jcs-archive__hero-left { max-width: 50% !important; }
.jcs-archive__hero-title {
    font-family: var(--fh) !important;
    font-size: 55px !important; font-weight: 700 !important;
    color: #fff !important; line-height: 1.1 !important;
    margin: 10px 0 10px !important;
	width:600px!important;
}
.jcs-archive__hero-text {
    font-family: var(--fb) !important;
    font-size: 17px !important; font-weight: 200 !important;
    color: #fff !important; line-height: 1.7 !important;
    margin: 10px 0 20px !important;
	width:600px!important;
}
.jcs-archive__hero-btn {
    display: inline-block !important;
    background: #fff !important; color: var(--navy) !important;
    padding: 12px 28px !important; border-radius: var(--rs) !important;
    font-size: 15px !important; font-weight: 600 !important;
    font-family: var(--fb) !important;
    text-decoration: none !important; transition: all 0.2s !important;
}
.jcs-archive__hero-btn:hover { background: var(--navy) !important; color: #fff !important; }

/* Single hero — featured image as bg */
.jcs-single__hero-section {
    padding: 4% 2% 2% !important;
    max-width: 100% !important; margin: -180px auto 0 !important;
    position: relative !important; z-index: 1 !important;
}
.jcs-single__hero-box {
    position: relative !important;
    min-height: 65vh !important;
    border-radius: var(--r) !important;
    overflow: hidden !important;
    background-color: var(--blue) !important;
    background-size: contain !important;
    background-position: right center !important;
    background-repeat: no-repeat !important;
    display: flex !important; align-items: center !important;
}
.jcs-single__hero-gradient {
    position: absolute !important; inset: 0 !important;
    background: linear-gradient(90deg, rgba(38,117,201,1) 47%, rgba(255,0,0,0) 100%) !important;
    z-index: 1 !important;
}
.jcs-single__hero-content {
    position: relative !important; z-index: 2 !important;
    padding: 220px 7% 7% !important; width: 100% !important;
}
.jcs-single__hero-left { max-width: 50% !important; }

.jcs-single__hero-meta {
    display: flex !important; gap: 12px !important; margin-bottom: 12px !important;
}
.jcs-single__hero-meta span {
    font-size: 13px !important; font-weight: 600 !important;
    color: rgba(255,255,255,0.7) !important;
    text-transform: uppercase !important; letter-spacing: 0.5px !important;
}
.jcs-single__hero-title {
    font-family: var(--fh) !important;
    font-size: clamp(32px, 4vw, 55px) !important; font-weight: 700 !important;
    color: #fff !important; line-height: 1.1 !important;
    margin: 0 0 16px !important;
}
.jcs-single__hero-quote {
    font-family: var(--fb) !important;
    font-size: 17px !important; font-weight: 200 !important;
    color: #fff !important; line-height: 1.7 !important;
    font-style: italic !important;
    margin: 0 0 6px !important;
}
.jcs-single__hero-cite {
    font-size: 14px !important; color: rgba(255,255,255,0.5) !important;
    display: block !important; margin-bottom: 20px !important;
}
.jcs-single__hero-btn {
    display: inline-block !important;
    background: #fff !important; color: var(--navy) !important;
    padding: 12px 28px !important; border-radius: var(--rs) !important;
    font-size: 15px !important; font-weight: 600 !important;
    font-family: var(--fb) !important;
    text-decoration: none !important; transition: all 0.2s !important;
}
.jcs-single__hero-btn:hover { background: var(--navy) !important; color: #fff !important; }

/* Mobile hero — handled by comprehensive responsive section below */

/* ═════════════════════════════════════════════════════
   ARCHIVE — Filters + Grid
   ═════════════════════════════════════════════════════ */
.jcs-archive__filters { background: #fff !important; border-bottom: 1px solid var(--g200) !important; position: sticky !important; top: 0 !important; z-index: 50 !important; }
.jcs-archive__filters-inner { padding: 16px var(--pad) !important; overflow-x: auto !important; scrollbar-width: none !important; }
.jcs-archive__filters-inner::-webkit-scrollbar { display: none !important; }
.jcs-filter-group { display: flex !important; gap: 8px !important; }
.jcs-filter-btn {
    padding: 10px 22px !important; border-radius: 40px !important;
    border: 1.5px solid var(--g200) !important; background: #fff !important;
    color: var(--g500) !important; font-size: 14px !important; font-weight: 500 !important;
    font-family: var(--fb) !important; cursor: pointer !important;
    transition: all 0.2s !important; white-space: nowrap !important;
}
.jcs-filter-btn:hover { border-color: var(--blue) !important; color: var(--blue) !important; }
.jcs-filter-btn.active { background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important; font-weight: 600 !important; }
.jcs-filter-btn__count { margin-left: 4px !important; opacity: 0.6 !important; font-size: 12px !important; }

.jcs-archive__grid-wrap { padding: 48px var(--pad) 80px !important; background: var(--off) !important; }
.jcs-archive__grid {
    display: grid !important; grid-template-columns: repeat(3,1fr) !important;
    gap: 24px !important; transition: opacity 0.25s !important;
}
.jcs-archive__grid.loading { opacity: 0.3 !important; }
/* Grid breakpoints handled in responsive section below */

/* ═════════════════════════════════════════════════════
   CARD
   ═════════════════════════════════════════════════════ */
.jcs-card {
    display: flex !important; flex-direction: column !important;
    background: #fff !important; border-radius: var(--r) !important;
    overflow: hidden !important; text-decoration: none !important; color: inherit !important;
    box-shadow: var(--sh) !important; border: 1px solid var(--g200) !important;
    transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.35s cubic-bezier(0.22,1,0.36,1) !important;
    opacity: 0; transform: translateY(20px);
    animation: jcsCardIn 0.5s cubic-bezier(0.22,1,0.36,1) forwards;
}
.jcs-card:hover { transform: translateY(-5px) !important; box-shadow: var(--sh-xl) !important; border-color: transparent !important; }
@keyframes jcsCardIn { to { opacity:1; transform:translateY(0); } }
.jcs-card:nth-child(1){animation-delay:0ms}.jcs-card:nth-child(2){animation-delay:60ms}.jcs-card:nth-child(3){animation-delay:120ms}.jcs-card:nth-child(4){animation-delay:180ms}.jcs-card:nth-child(5){animation-delay:240ms}.jcs-card:nth-child(6){animation-delay:300ms}

.jcs-card__img { height: 350px !important; overflow: hidden !important; background: var(--pale) !important; }
.jcs-card__img img { width: 100% !important; height: 100% !important; object-fit: cover !important; transition: transform 0.5s cubic-bezier(0.22,1,0.36,1) !important; }
.jcs-card:hover .jcs-card__img img { transform: scale(1.05) !important; }
.jcs-card__placeholder { width: 100% !important; height: 100% !important; }

.jcs-card__body { padding: 20px 24px 16px !important; flex: 1 !important; }
.jcs-card__meta {
    display: flex !important; align-items: center !important; gap: 6px !important; margin-bottom: 8px !important;
    font-size: 12px !important; font-weight: 600 !important; text-transform: uppercase !important; letter-spacing: 0.5px !important;
}
.jcs-card__industry { color: var(--blue) !important; }
.jcs-card__dot { color: var(--g300) !important; }
.jcs-card__country { color: var(--g500) !important; }
.jcs-card__company { font-family: var(--fh) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--g900) !important; line-height: 1.3 !important; margin: 0 0 6px !important; }
.jcs-card__product { font-size: 13px !important; font-weight: 600 !important; color: var(--blue) !important; margin: 0 0 12px !important; }
.jcs-card__quote {
    font-size: 14px !important; color: var(--g500) !important; line-height: 1.65 !important;
    font-style: italic !important; margin: 0 !important;
    display: -webkit-box !important; -webkit-line-clamp: 3 !important;
    -webkit-box-orient: vertical !important; overflow: hidden !important;
}
.jcs-card__footer {
    padding: 14px 24px !important; border-top: 1px solid var(--g100) !important;
    display: flex !important; align-items: center !important; justify-content: space-between !important;
}
.jcs-card__contact-name { display: block !important; font-size: 13px !important; font-weight: 600 !important; color: var(--g900) !important; }
.jcs-card__contact-title { display: block !important; font-size: 12px !important; color: var(--g500) !important; }
.jcs-card__read { font-size: 13px !important; font-weight: 600 !important; color: var(--blue) !important; }
.jcs-card:hover .jcs-card__read { color: var(--navy) !important; }
.jcs-no-results { grid-column: 1/-1 !important; text-align: center !important; padding: 80px 20px !important; color: var(--g500) !important; }

/* ═════════════════════════════════════════════════════
   SINGLE — Breadcrumb + Infobar + Two-column
   ═════════════════════════════════════════════════════ */
.jcs-single__breadcrumb { background: #fff !important; border-bottom: 1px solid var(--g200) !important; }
.jcs-single__breadcrumb-inner {
    padding: 18px var(--pad) !important; font-size: 14px !important; color: var(--g500) !important;
    display: flex !important; align-items: center !important; gap: 10px !important;
}
.jcs-single__breadcrumb a {
    color: var(--blue) !important; text-decoration: none !important; font-weight: 500 !important;
    display: inline-flex !important; align-items: center !important; gap: 6px !important;
}
.jcs-single__breadcrumb a:hover { color: var(--navy) !important; }
.jcs-single__breadcrumb a svg { width: 16px !important; height: 16px !important; }

/* Info bar */
.jcs-single__infobar { background: #fff !important; border-bottom: 1px solid var(--g200) !important; }
.jcs-single__infobar-inner { display: flex !important; padding: 0 var(--pad) !important; flex-wrap: wrap !important; }
.jcs-single__ib-item { padding: 18px 28px 18px 0 !important; border-right: 1px solid var(--g200) !important; }
.jcs-single__ib-item:last-child { border-right: none !important; padding-right: 0 !important; }
.jcs-single__ib-item:not(:first-child) { padding-left: 28px !important; }
.jcs-single__ib-label {
    display: block !important; font-size: 11px !important; font-weight: 600 !important;
    color: var(--g500) !important; text-transform: uppercase !important;
    letter-spacing: 0.8px !important; font-family: var(--fh) !important; margin-bottom: 3px !important;
}
.jcs-single__ib-value { font-size: 14px !important; font-weight: 600 !important; color: var(--g900) !important; }
.jcs-single__ib-link { font-size: 14px !important; font-weight: 600 !important; color: var(--blue) !important; text-decoration: none !important; }
.jcs-single__ib-link:hover { text-decoration: underline !important; }

/* Two-column: 60/40 */
.jcs-single__twocol { background: #fff !important; padding: 48px var(--pad) 64px !important; }
.jcs-single__twocol-inner {
    display: flex !important; gap: 48px !important;
    align-items: flex-start !important; position: relative !important;
}
.jcs-single__col-text { flex: 0 0 58% !important; max-width: 58% !important; min-width: 0 !important; }
.jcs-single__col-media { flex: 0 0 40% !important; max-width: 40% !important; min-width: 0 !important; position: relative !important; }
.jcs-single__col-media-sticky { will-change: transform !important; }

/* Text */
.jcs-single__prose p { font-size: 17px !important; line-height: 1.85 !important; color: var(--g700) !important; margin: 0 0 20px !important; }
.jcs-single__prose p:last-child { margin-bottom: 0 !important; }
.jcs-single__prose h2 { font-family: var(--fh) !important; font-size: 26px !important; font-weight: 700 !important; color: var(--g900) !important; margin: 40px 0 16px !important; }
.jcs-single__prose h2:first-child { margin-top: 0 !important; }
.jcs-single__prose h3 { font-family: var(--fh) !important; font-size: 20px !important; font-weight: 700 !important; color: var(--g900) !important; margin: 32px 0 12px !important; }
.jcs-single__prose img { max-width: 100% !important; height: auto !important; border-radius: var(--rs) !important; margin: 24px 0 !important; }

/* Reviews */
.jcs-single__inline-reviews { margin-top: 40px !important; }
.jcs-review { background: var(--lighter) !important; border: 1px solid var(--g200) !important; border-radius: var(--r) !important; padding: 24px 28px !important; margin-bottom: 16px !important; }
.jcs-review__stars { display: none !important; }
.jcs-review__quote { font-size: 16px !important; line-height: 1.7 !important; color: var(--g900) !important; margin: 0 0 16px !important; padding: 0 !important; border: none !important; }
.jcs-review__author { display: flex !important; align-items: center !important; gap: 10px !important; }
.jcs-review__avatar { width: 34px !important; height: 34px !important; border-radius: 50% !important; background: var(--navy) !important; color: #fff !important; display: flex !important; align-items: center !important; justify-content: center !important; font-family: var(--fh) !important; font-size: 13px !important; font-weight: 700 !important; }
.jcs-review__author strong { display: block !important; font-size: 14px !important; font-weight: 600 !important; color: var(--g900) !important; }
.jcs-review__author span { display: block !important; font-size: 12px !important; color: var(--g500) !important; }

/* Media */
.jcs-single__videos {
    display: flex !important; flex-direction: column !important;
    gap: 14px !important; margin-bottom: 10px !important;
}
.jcs-single__video-block { display: block !important; }
.jcs-single__video-label {
    margin-top: 8px !important; font-size: 13px !important;
    color: var(--g500) !important; font-weight: 500 !important;
    line-height: 1.4 !important;
}
.jcs-single__video {
    width: 100% !important; aspect-ratio: 16/9 !important;
    border-radius: var(--r) !important; overflow: hidden !important;
    background: #000 !important; margin-bottom: 0 !important;
}
.jcs-single__video iframe {
    width: 100% !important; height: 100% !important;
    display: block !important;
}
.jcs-single__main-img { width: 100% !important; aspect-ratio: 4/3 !important; border-radius: var(--r) !important; overflow: hidden !important; background: var(--pale) !important; margin-bottom: 10px !important; }
.jcs-single__main-img img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }
.jcs-single__thumb-grid { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-bottom: 24px !important; }
.jcs-single__thumb { width: 72px !important; height: 54px !important; border-radius: 6px !important; overflow: hidden !important; cursor: pointer !important; border: 2px solid transparent !important; opacity: 0.5 !important; transition: all 0.2s !important; }
.jcs-single__thumb:hover { opacity: 0.8 !important; }
.jcs-single__thumb.active { border-color: var(--blue) !important; opacity: 1 !important; }
.jcs-single__thumb img { width: 100% !important; height: 100% !important; object-fit: cover !important; display: block !important; }

/* Sidebar CTA */
.jcs-single__sidebar-cta { background: var(--navy) !important; border-radius: var(--r) !important; padding: 28px !important; text-align: center !important; }
.jcs-single__sidebar-cta p { color: rgba(255,255,255,0.8) !important; font-size: 15px !important; margin: 0 0 16px !important; }
.jcs-single__sidebar-btn { display: inline-block !important; background: var(--blue) !important; color: #fff !important; padding: 12px 28px !important; border-radius: var(--rs) !important; font-size: 15px !important; font-weight: 600 !important; text-decoration: none !important; transition: all 0.2s !important; }
.jcs-single__sidebar-btn:hover { background: #fff !important; color: var(--navy) !important; }

/* Related */
.jcs-single__related { background: var(--off) !important; border-top: 1px solid var(--g200) !important; padding: 60px var(--pad) 72px !important; }
.jcs-single__related-title { font-family: var(--fh) !important; font-size: 28px !important; font-weight: 800 !important; color: var(--g900) !important; margin: 0 0 32px !important; text-align: center !important; }
.jcs-single__related-grid { display: grid !important; grid-template-columns: repeat(3,1fr) !important; gap: 24px !important; }

/* ═════════════════════════════════════════════════════
   RESPONSIVE — Tablet, Small Tablet, Mobile, Small Mobile
   Comprehensive UX-focused responsive design
   ═════════════════════════════════════════════════════ */

/* ── Tablet landscape (1024px) ────────────────────── */
@media (max-width: 1024px) {

    /* Single: stack columns, media on top */
    .jcs-single__twocol-inner { flex-direction: column !important; gap: 32px !important; }
    .jcs-single__col-text { flex: none !important; max-width: 100% !important; width: 100% !important; }
    .jcs-single__col-media { flex: none !important; max-width: 100% !important; width: 100% !important; }
    .jcs-single__col-media-sticky { transform: none !important; }

    /* Archive grid: 2 columns */
    .jcs-archive__grid { grid-template-columns: repeat(2, 1fr) !important; }

    /* Related: 2 columns */
    .jcs-single__related-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}

/* ── Tablet portrait (768px – 960px) ──────────────── */
@media (max-width: 960px) {

    /* Reduce base padding */
    .jcs-archive, .jcs-single { --pad: 6% !important; }

    /* Hero: reduce vertical padding, remove negative margin overlap */
    .jcs-archive__hero-section,
    .jcs-single__hero-section {
        padding: 2% !important;
        margin-top: -100px !important;
    }
    .jcs-archive__hero-box,
    .jcs-single__hero-box {
        min-height: 45vh !important;
    }
    .jcs-archive__hero-content,
    .jcs-single__hero-content {
        padding: 140px 6% 6% !important;
    }
    .jcs-archive__hero-title { font-size: 40px !important; }
    .jcs-single__hero-title { font-size: 36px !important; }
    .jcs-archive__hero-left,
    .jcs-single__hero-left { max-width: 65% !important; }

    /* Infobar: vertical stack */
    .jcs-single__infobar-inner { flex-direction: column !important; }
    .jcs-single__ib-item {
        border-right: none !important;
        border-bottom: 1px solid var(--g100) !important;
        padding: 14px 0 !important;
    }
    .jcs-single__ib-item:not(:first-child) { padding-left: 0 !important; }
    .jcs-single__ib-item:last-child { border-bottom: none !important; }

    /* Twocol padding */
    .jcs-single__twocol { padding: 32px 6% 44px !important; }

    /* Breadcrumb */
    .jcs-single__breadcrumb-inner { padding: 12px 6% !important; }

    /* Related */
    .jcs-single__related { padding: 44px 6% 52px !important; }
    .jcs-single__related-title { font-size: 24px !important; margin-bottom: 24px !important; }

    /* Prose */
    .jcs-single__prose p { font-size: 16px !important; }
    .jcs-single__prose h2 { font-size: 22px !important; margin: 32px 0 12px !important; }
    .jcs-single__prose h3 { font-size: 18px !important; margin: 24px 0 10px !important; }

    /* Reviews */
    .jcs-review { padding: 20px 22px !important; }
    .jcs-review__quote { font-size: 15px !important; }

    /* Gallery thumbs: bigger touch targets */
    .jcs-single__thumb {
        width: 64px !important; height: 48px !important;
    }

    /* Filter buttons: horizontal scroll */
    .jcs-archive__filters-inner { padding: 14px 6% !important; }
    .jcs-archive__grid-wrap { padding: 32px 6% 48px !important; }
}

/* ── Mobile (max 680px) ───────────────────────────── */
@media (max-width: 680px) {

    /* Hero: full-width feel, stacked text — MORE BREATHING ROOM */
    .jcs-archive__hero-section,
    .jcs-single__hero-section {
        padding: 0 !important;
        margin-top: -80px !important;
    }
    .jcs-archive__hero-box,
    .jcs-single__hero-box {
        min-height: auto !important;
        border-radius: 0 !important;
        background-size: cover !important;
        background-position: center !important;
    }
    .jcs-archive__hero-gradient,
    .jcs-single__hero-gradient {
        background: linear-gradient(180deg, rgba(38,117,201,0.85) 0%, rgba(38,117,201,0.97) 100%) !important;
    }
    .jcs-archive__hero-content,
    .jcs-single__hero-content {
        padding: 130px 6% 44px !important;
    }
    .jcs-archive__hero-left,
    .jcs-single__hero-left {
        max-width: 100% !important;
    }
    .jcs-archive__hero-title { font-size: 30px !important; margin-bottom: 16px !important; }
    .jcs-archive__hero-text { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 28px !important; }
    .jcs-archive__hero-btn,
    .jcs-single__hero-btn {
        padding: 16px 24px !important;
        font-size: 15px !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 10px !important;
        margin-top: 8px !important;
    }

    /* Single hero mobile — more space */
    .jcs-single__hero-title { font-size: 28px !important; margin-bottom: 14px !important; }
    .jcs-single__hero-quote { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 8px !important; }
    .jcs-single__hero-cite { font-size: 13px !important; margin-bottom: 24px !important; }
    .jcs-single__hero-meta { gap: 10px !important; margin-bottom: 14px !important; }
    .jcs-single__hero-meta span { font-size: 12px !important; }

    /* Archive: single column grid — more gap */
    .jcs-archive__grid { grid-template-columns: 1fr !important; gap: 20px !important; }
    .jcs-archive__filters-inner {
        padding: 16px 5% !important;
        -webkit-overflow-scrolling: touch !important;
    }
    .jcs-archive__grid-wrap { padding: 28px 5% 48px !important; }

    /* Filter buttons: pill scroll, bigger touch targets */
    .jcs-filter-btn {
        padding: 12px 20px !important;
        font-size: 14px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
    }

    /* Cards: more breathing room */
    .jcs-card { border-radius: 14px !important; }
    .jcs-card__img { height: 220px !important; }
    .jcs-card__body { padding: 20px 22px 16px !important; }
    .jcs-card__meta { margin-bottom: 10px !important; }
    .jcs-card__company { font-size: 19px !important; margin-bottom: 8px !important; }
    .jcs-card__product { margin-bottom: 10px !important; }
    .jcs-card__quote { font-size: 14px !important; -webkit-line-clamp: 3 !important; margin-top: 4px !important; }
    .jcs-card__footer { padding: 16px 22px !important; }
    .jcs-card__read { font-size: 14px !important; }

    /* Disable hover effects on touch */
    .jcs-card:hover { transform: none !important; box-shadow: var(--sh) !important; }
    .jcs-card:active {
        transform: scale(0.98) !important;
        box-shadow: var(--sh) !important;
        transition-duration: 0.1s !important;
    }

    /* Breadcrumb: more padding */
    .jcs-single__breadcrumb-inner {
        padding: 16px 5% !important;
        font-size: 14px !important;
        gap: 8px !important;
    }
    .jcs-single__breadcrumb-inner > span:last-child {
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        max-width: 200px !important;
    }

    /* Infobar: more space between items */
    .jcs-single__infobar-inner { padding: 0 5% !important; }
    .jcs-single__ib-item { padding: 18px 0 !important; }
    .jcs-single__ib-label { font-size: 11px !important; margin-bottom: 4px !important; }
    .jcs-single__ib-value { font-size: 15px !important; }

    /* Twocol — generous padding */
    .jcs-single__twocol { padding: 36px 5% 48px !important; }
    .jcs-single__twocol-inner { gap: 32px !important; }

    /* Prose — more line height and paragraph spacing */
    .jcs-single__prose p { font-size: 16px !important; line-height: 1.85 !important; margin: 0 0 22px !important; }
    .jcs-single__prose h2 { font-size: 22px !important; margin: 36px 0 14px !important; }
    .jcs-single__prose h3 { font-size: 18px !important; margin: 28px 0 12px !important; }

    /* Gallery: horizontal scroll on mobile */
    .jcs-single__thumb-grid {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding-bottom: 4px !important;
        gap: 8px !important;
        margin-bottom: 20px !important;
    }
    .jcs-single__thumb-grid::-webkit-scrollbar { display: none !important; }
    .jcs-single__thumb {
        width: 64px !important; height: 48px !important;
        flex-shrink: 0 !important;
    }
    .jcs-single__main-img {
        border-radius: 12px !important;
        margin-bottom: 12px !important;
    }
    .jcs-single__videos {
        margin-bottom: 12px !important;
    }
    .jcs-single__video {
        border-radius: 12px !important;
        margin-bottom: 0 !important;
    }

    /* Sidebar CTA: more padding */
    .jcs-single__sidebar-cta {
        padding: 28px 24px !important;
        border-radius: 14px !important;
        margin-top: 8px !important;
    }
    .jcs-single__sidebar-cta p { font-size: 15px !important; margin-bottom: 20px !important; }
    .jcs-single__sidebar-btn {
        padding: 16px 24px !important;
        font-size: 15px !important;
        width: 100% !important;
        text-align: center !important;
        border-radius: 10px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* Reviews — more padding and spacing */
    .jcs-review {
        padding: 24px 22px !important;
        border-radius: 14px !important;
        margin-bottom: 16px !important;
    }
    .jcs-review__quote { font-size: 15px !important; line-height: 1.7 !important; margin-bottom: 18px !important; }
    .jcs-review__author { gap: 10px !important; }
    .jcs-review__avatar { width: 34px !important; height: 34px !important; font-size: 13px !important; }
    .jcs-review__author strong { font-size: 14px !important; }
    .jcs-review__author span { font-size: 12px !important; }

    /* Related: more space */
    .jcs-single__related {
        padding: 44px 5% 52px !important;
    }
    .jcs-single__related-title { font-size: 24px !important; margin-bottom: 28px !important; }
    .jcs-single__related-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Inline reviews spacing */
    .jcs-single__inline-reviews { margin-top: 36px !important; }
}

/* ── Small mobile (max 400px) ─────────────────────── */
@media (max-width: 400px) {

    .jcs-archive__hero-content,
    .jcs-single__hero-content {
        padding: 110px 5% 36px !important;
    }
    .jcs-archive__hero-title { font-size: 26px !important; }
    .jcs-single__hero-title { font-size: 24px !important; }
    .jcs-single__hero-quote { font-size: 14px !important; }

    .jcs-card__img { height: 200px !important; }
    .jcs-card__body { padding: 18px 18px 14px !important; }
    .jcs-card__company { font-size: 17px !important; }
    .jcs-card__meta { font-size: 11px !important; }
    .jcs-card__footer { padding: 14px 18px !important; }

    .jcs-single__prose p { font-size: 15px !important; margin: 0 0 20px !important; }
    .jcs-single__prose h2 { font-size: 20px !important; margin: 32px 0 12px !important; }
    .jcs-single__prose h3 { font-size: 17px !important; margin: 24px 0 10px !important; }

    .jcs-single__twocol { padding: 28px 5% 40px !important; }
    .jcs-review { padding: 20px 18px !important; }
    .jcs-review__quote { font-size: 14px !important; }
}

/* ── Touch device improvements ────────────────────── */
@media (hover: none) and (pointer: coarse) {
    /* Disable hover transforms on touch devices entirely */
    .jcs-card:hover {
        transform: none !important;
        box-shadow: var(--sh) !important;
        border-color: var(--g200) !important;
    }
    .jcs-card:hover .jcs-card__img img { transform: none !important; }
    .jcs-card:hover .jcs-card__read { color: var(--blue) !important; }

    /* Active state feedback instead */
    .jcs-card:active {
        transform: scale(0.97) !important;
        transition-duration: 0.1s !important;
    }

    /* Ensure all interactive elements meet 44px minimum tap target */
    .jcs-filter-btn { min-height: 44px !important; }
    .jcs-archive__hero-btn,
    .jcs-single__hero-btn,
    .jcs-single__sidebar-btn { min-height: 48px !important; }

    /* Gallery thumbs: bigger on touch */
    .jcs-single__thumb {
        width: 68px !important; height: 52px !important;
        opacity: 0.6 !important;
    }
    .jcs-single__thumb.active { opacity: 1 !important; }
}

/* ── Safe area (notch) support ────────────────────── */
@supports (padding: env(safe-area-inset-left)) {
    .jcs-archive__hero-content,
    .jcs-single__hero-content {
        padding-left: max(5%, env(safe-area-inset-left)) !important;
        padding-right: max(5%, env(safe-area-inset-right)) !important;
    }
    .jcs-archive__filters-inner,
    .jcs-archive__grid-wrap,
    .jcs-single__breadcrumb-inner,
    .jcs-single__infobar-inner,
    .jcs-single__twocol,
    .jcs-single__related {
        padding-left: max(4%, env(safe-area-inset-left)) !important;
        padding-right: max(4%, env(safe-area-inset-right)) !important;
    }
}

/* ── Landscape phone ──────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
    .jcs-archive__hero-box,
    .jcs-single__hero-box {
        min-height: 70vh !important;
    }
    .jcs-archive__hero-content,
    .jcs-single__hero-content {
        padding-top: 80px !important;
    }
    .jcs-archive__grid { grid-template-columns: repeat(2, 1fr) !important; }
}