/* ============================================
   Indscope Tabs Pro - Front Styles
   Built by AR Nayak (Indscope)
   ============================================ */

/* ---- FULL-WIDTH TEMPLATE SAFETY GUARD ----
   On Elementor Full Width / Canvas templates the theme's overflow container is
   removed, so a 100vw full-bleed strip (100vw includes the scrollbar) can push
   the page wider than the viewport. In some browsers that horizontal overflow
   is resolved in a repaint loop that spikes memory until the tab crashes
   ("Aw, Snap"). Rather than 100vw, our full-bleed widgets below now break out
   with margin math that excludes the scrollbar, so they never overflow. This
   line is only a backstop: it stops the plugin's own top-level widgets from
   ever exceeding the viewport, without touching their inner layout. */
.itp-hrc, .itp-lmf, .itp-tmq, .itp-cs2, .itp-pfs { max-width: 100%; overflow-x: hidden; }

/* ====== SHARED ====== */
.itp-radial-tab-inner,
.itp-htab-inner,
.itp-rsc-tab-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 12px;
    box-sizing: border-box;
    cursor: pointer;
    transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .3s ease;
}

.itp-radial-tab-item,
.itp-htab-item,
.itp-rsc-tab-item,
.itp-vt-tab-item {
    cursor: pointer;
}

.itp-radial-tab-img,
.itp-htab-img {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    line-height: 1;
}

.itp-radial-tab-img img,
.itp-htab-img img { max-width: 100%; display: block; }

.itp-radial-tab-title,
.itp-htab-title {
    font-size: 13px;
    font-weight: 600;
    line-height: 1.3;
}

/* ====== WIDGET 1: RADIAL (Circle of tabs + center arrows) ====== */
.itp-radial-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.itp-radial-circle {
    position: relative;
    margin: 0 auto;
    max-width: 100%;
}

.itp-radial-tab-item {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
}

.itp-arrow,
.itp-rsc-arrow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 50px !important;
    height: 50px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 50% !important;
    background: #101E41;
    color: #ffffff;
    cursor: pointer;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    z-index: 3;
    box-sizing: border-box !important;
    flex-shrink: 0;
    font-size: 0;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
}

.itp-arrow:hover,
.itp-rsc-arrow:hover {
    background: #00407C;
    color: #ffffff;
    box-shadow: 0 6px 18px rgba(0, 64, 124, 0.4);
}

.itp-arrow svg,
.itp-rsc-arrow svg {
    width: 22px !important;
    height: 22px !important;
    display: block !important;
    stroke: #ffffff !important;
    fill: none !important;
    stroke-width: 2.5 !important;
}

.itp-arrow-prev { transform: translate(calc(-100% - 8px), -50%) !important; }
.itp-arrow-next { transform: translate(8px, -50%) !important; }

.itp-radial-content {
    width: 100%;
    overflow: hidden;
}

.itp-radial-content-panel,
.itp-htab-panel,
.itp-rsc-block-panel,
.itp-vt-block-panel {
    display: none;
    animation: itp-fade-in .4s ease;
}

.itp-radial-content-panel.itp-active,
.itp-htab-panel.itp-active,
.itp-rsc-block-panel.itp-active,
.itp-vt-block-panel.itp-active {
    display: block;
}

/* ====== WIDGET 2: HORIZONTAL TABS ====== */
.itp-htab-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.itp-htab-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.itp-htab-content {
    width: 100%;
    overflow: hidden;
}

/* ====== WIDGET 3: RADIAL + SIDE CONTENT ====== */
.itp-rsc-wrapper {
    display: flex;
    align-items: center;
    width: 100%;
    flex-wrap: wrap;
}

.itp-rsc-block {
    flex: 0 0 45%;
    max-width: 45%;
    box-sizing: border-box;
}

.itp-rsc-tabs-area {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.itp-rsc-circle {
    position: relative;
    max-width: 100%;
}

.itp-rsc-tab-item {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
}

.itp-rsc-tab-inner {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    padding: 8px;
    box-sizing: border-box;
}

.itp-rsc-headline {
    margin: 0 0 20px;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.15;
}

.itp-rsc-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
}

.itp-rsc-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.itp-rsc-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}

.itp-rsc-name {
    position: absolute;
    bottom: 20px;
    left: 24px;
    z-index: 2;
    font-size: 36px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.itp-rsc-desc {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
}

.itp-rsc-btn,
.itp-vt-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 28px;
    background: #101E41;
    color: #ffffff;
    border-radius: 30px;
    text-decoration: none;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}
.itp-rsc-btn:hover,
.itp-vt-btn:hover {
    background: #00407C;
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(0, 64, 124, 0.35);
}

.itp-rsc-btn svg,
.itp-vt-btn svg {
    width: 18px;
    height: 18px;
    stroke: #ffffff;
    fill: none;
    stroke-width: 2.5;
}

/* Vertical / Horizontal arrow groups for radial side widget */
.itp-rsc-arrows-vertical .itp-rsc-arrow-prev { transform: translate(-50%, calc(-100% - 8px)) !important; }
.itp-rsc-arrows-vertical .itp-rsc-arrow-next { transform: translate(-50%, 8px) !important; }
.itp-rsc-arrows-horizontal .itp-rsc-arrow-prev { transform: translate(calc(-100% - 8px), -50%) !important; }
.itp-rsc-arrows-horizontal .itp-rsc-arrow-next { transform: translate(8px, -50%) !important; }

/* ====== WIDGET 4: VERTICAL TABS ====== */
.itp-vt-wrapper {
    display: flex;
    width: 100%;
    align-items: flex-start;
    flex-wrap: wrap;
}

.itp-vt-side-right { flex-direction: row-reverse; }

.itp-vt-tabs-col {
    flex: 0 0 280px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.itp-vt-tab-item {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 70px;
    padding: 14px 20px;
    background: #f5f5f5;
    color: #222;
    border-radius: 8px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
    cursor: pointer;
}

.itp-vt-shape-circular .itp-vt-tab-item {
    border-radius: 50px;
}

.itp-vt-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.itp-vt-block {
    flex: 1;
    min-width: 0;
}

.itp-vt-headline {
    margin: 0 0 20px;
    font-size: 32px;
    font-weight: 800;
    line-height: 1.2;
}

.itp-vt-image {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    overflow: hidden;
    border-radius: 12px;
    margin-bottom: 16px;
}

.itp-vt-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.itp-vt-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.35);
    pointer-events: none;
}

.itp-vt-name {
    position: absolute;
    bottom: 20px;
    left: 24px;
    z-index: 2;
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
    line-height: 1.05;
    text-shadow: 0 2px 12px rgba(0,0,0,.4);
}

.itp-vt-desc {
    margin: 0 0 22px;
    font-size: 15px;
    line-height: 1.6;
}

/* ====== CARD CAROUSEL (shared) ====== */
.itp-carousel {
    width: 100%;
    padding: 10px 0 30px;
    position: relative;
}

.itp-card {
    background: #ffffff;
    border: 1px solid #eeeeee;
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: box-shadow .3s ease, transform .3s ease;
}

.itp-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,.08);
    transform: translateY(-4px);
}

.itp-card-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fafafa;
}

.itp-card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 16px;
    box-sizing: border-box;
}

.itp-card-body {
    padding: 18px 20px 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
    position: relative;
}

.itp-card-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0 0 8px;
    color: #222;
    line-height: 1.3;
}

.itp-card-desc {
    font-size: 14px;
    color: #555;
    margin: 0 0 16px;
    line-height: 1.55;
    flex: 1;
}

.itp-card-btn {
    align-self: flex-end;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #101E41;
    color: #fff;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
    padding: 0 !important;
    line-height: 1 !important;
    box-sizing: border-box;
}

.itp-card-btn svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    stroke: currentColor !important;
    fill: none !important;
    stroke-width: 2.5 !important;
    /* Nudge left by 1px to optically center the right-pointing arrow */
    margin-left: -1px;
    flex-shrink: 0;
}

.itp-card-btn:hover {
    background: #00407C;
    transform: scale(1.1);
    box-shadow: 0 4px 14px rgba(0, 64, 124, 0.35);
}

.itp-carousel .swiper-button-prev,
.itp-carousel .swiper-button-next {
    width: 44px;
    height: 44px;
    background: #101E41;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
    color: #ffffff;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease;
}

.itp-carousel .swiper-button-prev:hover,
.itp-carousel .swiper-button-next:hover {
    background: #00407C;
    color: #ffffff;
    box-shadow: 0 4px 14px rgba(0, 64, 124, 0.35);
}

.itp-carousel .swiper-button-prev::after,
.itp-carousel .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
    color: #ffffff;
}

/* ====== Animations ====== */
@keyframes itp-fade-in {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ====== Mobile ====== */
@media (max-width: 991px) {
    .itp-rsc-block,
    .itp-vt-tabs-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-rsc-tabs-area {
        margin-top: 24px;
    }
    .itp-rsc-headline,
    .itp-vt-headline {
        font-size: 28px;
    }
    .itp-rsc-name,
    .itp-vt-name {
        font-size: 26px;
    }
}

@media (max-width: 767px) {
    .itp-radial-circle,
    .itp-rsc-circle {
        width: 100% !important;
        height: auto !important;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 0 10px;
    }
    .itp-radial-tab-item,
    .itp-rsc-tab-item {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
    }
    .itp-arrow,
    .itp-rsc-arrow {
        position: static !important;
        transform: none !important;
        margin: 8px !important;
    }
}

/* ============================================
   v2.1.0 ADDITIONS
   ============================================ */

/* ====== VT: Circular Mode ====== */
.itp-vt-shape-circular .itp-vt-tabs-col {
    flex-direction: column;
}

.itp-vt-tab-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.itp-vt-tab-circle {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    flex-shrink: 0;
}

.itp-vt-tab-wrap:hover .itp-vt-tab-circle {
    transform: scale(1.05);
}

.itp-vt-tab-circle .itp-vt-tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.itp-vt-circle-label {
    position: relative;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    color: #222;
    line-height: 1.3;
    padding-bottom: 8px;
    transition: color .3s ease;
}

/* Underline (animates in on active) */
.itp-vt-circle-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 70%;
    height: 3px;
    background-color: #1e5fbf;
    border-bottom: 0 solid #1e5fbf;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
    opacity: 0;
}

.itp-vt-tab-wrap.itp-active .itp-vt-circle-label::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

/* Underline style variants */
.itp-vt-underline-dashed .itp-vt-circle-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 3px dashed currentColor;
}
.itp-vt-underline-dotted .itp-vt-circle-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 3px dotted currentColor;
}
.itp-vt-underline-double .itp-vt-circle-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 5px double currentColor;
}
.itp-vt-underline-gradient .itp-vt-circle-label::after {
    background: linear-gradient(90deg, #1e5fbf 0%, #d91e5f 100%);
    border-radius: 2px;
}

/* If underline disabled */
.itp-vt-wrapper:not(.itp-vt-has-underline) .itp-vt-circle-label::after {
    display: none;
}

/* ====== WIDGET 5: ROUND TABS SHOWCASE ====== */
.itp-rts-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

.itp-rts-dir-vertical {
    flex-direction: row;
    align-items: flex-start;
}

.itp-rts-dir-vertical .itp-rts-tabs {
    flex: 0 0 auto;
    flex-direction: column;
}

.itp-rts-dir-vertical .itp-rts-content-wrap {
    flex: 1;
    min-width: 0;
}

.itp-rts-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
}

.itp-rts-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.itp-rts-tab-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    flex-shrink: 0;
}

.itp-rts-tab:hover .itp-rts-tab-circle {
    transform: scale(1.05);
}

.itp-rts-tab-circle i,
.itp-rts-tab-circle svg {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.itp-rts-tab-label {
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-align: center;
    transition: color .3s ease;
}

.itp-rts-content-wrap {
    width: 100%;
    background: #000;
    padding: 60px;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
}

.itp-rts-content-panel {
    display: none;
    animation: itp-fade-in .4s ease;
}

.itp-rts-content-panel.itp-active {
    display: block;
}

.itp-rts-content {
    display: flex;
    align-items: center;
    gap: 60px;
    flex-wrap: wrap;
}

.itp-rts-img-right .itp-rts-content {
    flex-direction: row-reverse;
}

.itp-rts-image {
    flex: 0 0 45%;
    max-width: 45%;
}

.itp-rts-image img {
    width: 100%;
    height: auto;
    display: block;
}

.itp-rts-text {
    flex: 1;
    min-width: 0;
}

.itp-rts-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 18px 8px 14px;
    background: rgba(255,255,255,0.08);
    color: #fff;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.itp-rts-badge::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #ffa500;
    flex-shrink: 0;
}

.itp-rts-headline {
    margin: 0 0 20px;
    color: #fff;
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
}

.itp-rts-desc,
.itp-rts-desc p {
    color: rgba(255,255,255,0.75);
    font-size: 16px;
    line-height: 1.65;
    margin: 0 0 16px;
}

.itp-rts-desc p:last-child { margin-bottom: 0; }

.itp-rts-buttons {
    display: flex;
    gap: 16px;
    margin-top: 32px;
    flex-wrap: wrap;
}

.itp-rts-btn-1 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 36px;
    background: #101E41;
    color: #fff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform .3s ease, box-shadow .3s ease, background .3s ease;
}

.itp-rts-btn-1:hover {
    background: #00407C;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 64, 124, 0.4);
}

.itp-rts-btn-2 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 36px;
    background: transparent;
    color: #fff;
    border: 1px solid #fff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    transition: transform .3s ease, background .3s ease;
}

.itp-rts-btn-2:hover {
    transform: translateY(-2px);
    background: rgba(255,255,255,0.1);
}

.itp-rts-play {
    width: 14px;
    height: 14px;
}

/* ====== RESPONSIVE (v2.1.0) ====== */
@media (max-width: 1024px) {
    .itp-rts-headline { font-size: 36px; }
    .itp-rts-content-wrap { padding: 40px; }
}

@media (max-width: 991px) {
    .itp-rts-content { flex-direction: column !important; }
    .itp-rts-image,
    .itp-rts-text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-rts-headline { font-size: 32px; }

    .itp-vt-wrapper { flex-direction: column !important; }
    .itp-vt-side-right { flex-direction: column !important; }
    .itp-vt-tabs-col {
        flex: 0 0 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
    }
    .itp-vt-shape-circular .itp-vt-tabs-col {
        flex-direction: row !important;
    }
}

@media (max-width: 767px) {
    .itp-rts-content-wrap { padding: 28px 20px; }
    .itp-rts-headline { font-size: 26px; }
    .itp-rts-desc { font-size: 14px; }
    .itp-rts-btn-1, .itp-rts-btn-2 { padding: 12px 22px; font-size: 14px; }

    .itp-vt-tab-circle { width: 64px; height: 64px; }
    .itp-rts-tab-circle { width: 56px; height: 56px; }
}

/* ============================================
   v2.2.0: WIDGET 6 - ROUND TABS FREE CANVAS
   ============================================ */
.itp-rtfc-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 40px;
}

.itp-rtfc-dir-vertical {
    flex-direction: row;
    align-items: flex-start;
}

.itp-rtfc-dir-vertical.itp-rtfc-vpos-right {
    flex-direction: row-reverse;
}

.itp-rtfc-dir-vertical .itp-rtfc-tabs {
    flex: 0 0 200px;
    flex-direction: column;
}

.itp-rtfc-dir-vertical .itp-rtfc-content-wrap {
    flex: 1;
    min-width: 0;
}

.itp-rtfc-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    align-items: flex-start;
    justify-content: center;
}

.itp-rtfc-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}

.itp-rtfc-tab-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: #f5f5f5;
    color: #444;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .3s ease, color .3s ease, transform .3s ease, box-shadow .3s ease;
    flex-shrink: 0;
}

.itp-rtfc-tab:hover .itp-rtfc-tab-circle {
    transform: scale(1.05);
}

.itp-rtfc-tab-circle i,
.itp-rtfc-tab-circle svg {
    font-size: 24px;
    width: 24px;
    height: 24px;
}

.itp-rtfc-tab-label {
    position: relative;
    font-size: 13px;
    font-weight: 600;
    color: #222;
    text-align: center;
    transition: color .3s ease;
    padding-bottom: 6px;
}

/* Underline */
.itp-rtfc-tab-label::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    width: 70%;
    height: 3px;
    background-color: #1e5fbf;
    transition: transform .35s cubic-bezier(.4, 0, .2, 1), opacity .35s ease;
    opacity: 0;
}

.itp-rtfc-has-underline .itp-rtfc-tab.itp-active .itp-rtfc-tab-label::after {
    transform: translateX(-50%) scaleX(1);
    opacity: 1;
}

.itp-rtfc-underline-dashed .itp-rtfc-tab.itp-active .itp-rtfc-tab-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 3px dashed currentColor;
}
.itp-rtfc-underline-dotted .itp-rtfc-tab.itp-active .itp-rtfc-tab-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 3px dotted currentColor;
}
.itp-rtfc-underline-double .itp-rtfc-tab.itp-active .itp-rtfc-tab-label::after {
    background-color: transparent;
    height: 0 !important;
    border-bottom: 5px double currentColor;
}
.itp-rtfc-underline-gradient .itp-rtfc-tab.itp-active .itp-rtfc-tab-label::after {
    background: linear-gradient(90deg, #1e5fbf 0%, #d91e5f 100%);
    border-radius: 2px;
}

.itp-rtfc-wrapper:not(.itp-rtfc-has-underline) .itp-rtfc-tab-label::after {
    display: none;
}

.itp-rtfc-content-wrap {
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

.itp-rtfc-content-panel {
    display: none;
}

.itp-rtfc-content-panel.itp-active {
    display: block;
}

/* Transitions */
.itp-rtfc-trans-fade .itp-rtfc-content-panel.itp-active {
    animation: itp-fade-in .4s ease;
}

.itp-rtfc-trans-slide-up .itp-rtfc-content-panel.itp-active {
    animation: itp-slide-up .4s ease;
}

.itp-rtfc-trans-slide-down .itp-rtfc-content-panel.itp-active {
    animation: itp-slide-down .4s ease;
}

.itp-rtfc-trans-zoom .itp-rtfc-content-panel.itp-active {
    animation: itp-zoom-in .4s ease;
}

.itp-rtfc-trans-none .itp-rtfc-content-panel.itp-active {
    animation: none;
}

@keyframes itp-slide-up {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes itp-slide-down {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes itp-zoom-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

.itp-rtfc-empty {
    padding: 40px;
    text-align: center;
    color: #888;
    font-size: 14px;
    background: rgba(0,0,0,0.03);
    border: 2px dashed #ccc;
    border-radius: 8px;
}

@media (max-width: 991px) {
    .itp-rtfc-dir-vertical {
        flex-direction: column !important;
    }
    .itp-rtfc-dir-vertical .itp-rtfc-tabs {
        flex: 0 0 100% !important;
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center;
    }
}

@media (max-width: 767px) {
    .itp-rtfc-tab-circle { width: 56px; height: 56px; }
}

/* ============================================
   v2.4.0: ROUND TABS SHOWCASE — Image Support + Pulse + Responsive
   ============================================ */

/* Image variant inside tab circle */
.itp-rts-tab-circle.itp-rts-visual-image {
    overflow: hidden;
    padding: 0;
}

.itp-rts-tab-circle.itp-rts-visual-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

/* Active state: smoother transition for ring */
.itp-rts-tab .itp-rts-tab-circle {
    transition: background .35s ease, color .35s ease, transform .35s ease, box-shadow .5s ease;
}

/* Animated pulse around active tab */
.itp-rts-pulse .itp-rts-tab.itp-active .itp-rts-tab-circle {
    animation: itp-rts-pulse-anim 2.2s ease-in-out infinite;
}

@keyframes itp-rts-pulse-anim {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(30, 95, 191, 0.35);
    }
    50% {
        box-shadow: 0 0 0 16px rgba(30, 95, 191, 0.0);
    }
}

/* Slight scale on active */
.itp-rts-tab.itp-active .itp-rts-tab-circle {
    transform: scale(1.05);
}

/* ============================================
   v2.4.0: STRONGER RESPONSIVE
   ============================================ */

/* Tablet */
@media (max-width: 1024px) {
    .itp-rts-headline { font-size: 36px; }
    .itp-rts-content-wrap { padding: 40px; }
    .itp-rts-content { gap: 40px; }
}

/* Tablet portrait */
@media (max-width: 991px) {
    .itp-rts-wrapper.itp-rts-dir-vertical {
        flex-direction: column !important;
    }
    .itp-rts-content {
        flex-direction: column !important;
        gap: 32px;
    }
    .itp-rts-image,
    .itp-rts-text {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-rts-image img {
        max-width: 70%;
        margin: 0 auto;
    }
    .itp-rts-headline { font-size: 32px; line-height: 1.15; }
    .itp-rts-desc, .itp-rts-desc p { font-size: 15px; }
}

/* Mobile */
@media (max-width: 767px) {
    .itp-rts-content-wrap { padding: 28px 20px; border-radius: 16px; }
    .itp-rts-headline { font-size: 26px; }
    .itp-rts-desc, .itp-rts-desc p { font-size: 14px; line-height: 1.6; }
    .itp-rts-badge { padding: 6px 14px; font-size: 11px; margin-bottom: 16px; }
    .itp-rts-btn-1, .itp-rts-btn-2 { padding: 12px 22px; font-size: 14px; }
    .itp-rts-buttons { gap: 12px; margin-top: 24px; }
    .itp-rts-tabs { gap: 12px; }
    .itp-rts-tab-circle { width: 56px !important; height: 56px !important; }
    .itp-rts-tab-circle i { font-size: 20px !important; }
    .itp-rts-tab-label { font-size: 11px; }
    .itp-rts-image img { max-width: 100%; }

    /* Reduce pulse intensity on mobile to save battery */
    .itp-rts-pulse .itp-rts-tab.itp-active .itp-rts-tab-circle {
        animation: itp-rts-pulse-anim 3s ease-in-out infinite;
    }
}

/* Extra small */
@media (max-width: 480px) {
    .itp-rts-content-wrap { padding: 22px 16px; }
    .itp-rts-headline { font-size: 22px; }
    .itp-rts-buttons { flex-direction: column; }
    .itp-rts-btn-1, .itp-rts-btn-2 { width: 100%; }
}

/* ============================================
   ProV10.02 — Global pulse-ring keyframes
   (consumed via CSS variables --itp-ring-color and --itp-ring-size set per-widget;
    only activates when explicitly enabled by a widget's active-ring controls)
   ============================================ */
@keyframes itp-pulse-ring {
    0%, 100% {
        box-shadow: 0 0 0 var(--itp-ring-size, 8px) var(--itp-ring-color, rgba(30,95,191,0.35));
    }
    50% {
        box-shadow: 0 0 0 calc(var(--itp-ring-size, 8px) + 8px) transparent;
    }
}

/* ============================================
   ProV10.02 — Horizontal Image Tabs: Fill Mode + Overlay support
   (Image fill is a per-tab opt-in via tab_image_fit control)
   ============================================ */
.itp-htab-item.itp-htab-fill .itp-htab-inner {
    position: relative;
    overflow: hidden;
    padding: 0;
    border-radius: 50%;
}

.itp-htab-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    border-radius: inherit;
    transition: transform .4s ease;
    z-index: 1;
}

.itp-htab-overlay {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    z-index: 2;
    pointer-events: none;
    transition: background .3s ease, opacity .3s ease;
}

.itp-htab-fill .itp-htab-title {
    position: relative;
    z-index: 3;
    color: #fff !important;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    padding: 6px 10px;
    margin-top: auto;
    margin-bottom: 0;
    font-weight: 700;
}

.itp-htab-fill .itp-htab-inner {
    align-items: stretch;
    justify-content: flex-end;
}

.itp-htab-item.itp-htab-fill:hover .itp-htab-bg-image {
    transform: scale(1.06);
}

.itp-htab-item:not(.itp-htab-fill) .itp-htab-img img {
    object-fit: contain;
}

/* Title position helpers (only fill mode; class is added to wrapper inside widget render) */
.itp-htab-tpos-top .itp-htab-fill .itp-htab-inner    { justify-content: flex-start; }
.itp-htab-tpos-top .itp-htab-fill .itp-htab-title    { margin-top: 0; margin-bottom: auto; }
.itp-htab-tpos-center .itp-htab-fill .itp-htab-inner { justify-content: center; }
.itp-htab-tpos-center .itp-htab-fill .itp-htab-title { margin: auto 0; }
.itp-htab-tpos-bottom .itp-htab-fill .itp-htab-inner { justify-content: flex-end; }
.itp-htab-tpos-bottom .itp-htab-fill .itp-htab-title { margin-top: auto; margin-bottom: 0; }
.itp-htab-tpos-below .itp-htab-item                  { gap: 12px; }
.itp-htab-tpos-below .itp-htab-title-below {
    color: inherit;
    text-shadow: none;
    background: transparent;
    padding: 0;
}

/* ============================================
   ProV10.03 — ACCORDION TAB widget (itp-accordion-tab)
   All selectors scoped to .itp-at-* so no leakage.
   ============================================ */

.itp-at-wrapper {
    display: flex;
    gap: 40px;
    align-items: flex-start;
    width: 100%;
}

.itp-at-wrapper.itp-at-imgpos-right {
    flex-direction: row-reverse;
}

.itp-at-image-col {
    flex: 0 0 45%;
    max-width: 45%;
}

.itp-at-product-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.itp-at-content-col {
    flex: 1;
    min-width: 0;
}

/* Title with two-color split */
.itp-at-title {
    margin: 0 0 20px 0;
    line-height: 1.2;
    font-weight: 700;
}
.itp-at-title-p1 { display: inline; }
.itp-at-title-p2 { display: inline; margin-left: 6px; }

/* Variants */
.itp-at-variants {
    margin-bottom: 30px;
}
.itp-at-variants-label {
    font-weight: 600;
    margin-bottom: 12px;
    font-size: 16px;
}
.itp-at-variants-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.itp-at-variant {
    cursor: pointer;
    border: 2px solid #eaeaea;
    border-radius: 4px;
    padding: 8px;
    text-align: center;
    transition: border-color .25s ease, box-shadow .25s ease;
    background: #fff;
}
.itp-at-variant:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.itp-at-variant.itp-active {
    border-color: #d91e5f;
    box-shadow: 0 0 0 1px #d91e5f inset;
}
.itp-at-variant-thumb {
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    margin: 0 auto;
}
.itp-at-variant-thumb img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    display: block;
    object-fit: contain;
}
.itp-at-variant-name {
    font-size: 13px;
    margin-top: 8px;
    color: #444;
}

/* Accordion */
.itp-at-accordion {
    margin-bottom: 24px;
}
.itp-at-acc-item {
    border-bottom: 1px solid #e5e7eb;
}
.itp-at-acc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    cursor: pointer;
    user-select: none;
    transition: background .2s ease;
}
.itp-at-acc-header:hover {
    background: rgba(0,0,0,0.02);
}
.itp-at-acc-header:focus {
    outline: 2px solid #1e5fbf;
    outline-offset: 2px;
}
.itp-at-acc-title {
    flex: 1;
    font-weight: 700;
    letter-spacing: 0.5px;
    font-size: 16px;
    color: #111;
}
.itp-at-acc-toggle {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    line-height: 1;
    color: #1e5fbf;
    font-weight: 600;
    position: relative;
}
.itp-at-acc-toggle-minus,
.itp-at-acc-toggle-plus {
    display: inline-block;
    line-height: 1;
}
/* When closed, show "+", hide "-" */
.itp-at-acc-item:not(.itp-active) .itp-at-acc-toggle-minus { display: none; }
.itp-at-acc-item:not(.itp-active) .itp-at-acc-toggle-plus  { display: inline-block; }
/* When open, show "-", hide "+" */
.itp-at-acc-item.itp-active .itp-at-acc-toggle-minus { display: inline-block; }
.itp-at-acc-item.itp-active .itp-at-acc-toggle-plus  { display: none; }

.itp-at-acc-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height .35s ease;
}
.itp-at-acc-item.itp-active .itp-at-acc-body {
    max-height: 3000px;
}
.itp-at-acc-body-inner {
    padding: 0 0 20px 0;
    color: #444;
    line-height: 1.6;
}

/* Content type: text */
.itp-at-text p { margin: 0 0 1em 0; }
.itp-at-text p:last-child { margin-bottom: 0; }
.itp-at-text strong { color: #111; font-weight: 700; }

/* ---- Per-variant KEY FEATURES grid (v2.18.0) ---- */
/* Left-aligned icon-over-text items, matching the UniKlinger reference */
.itp-at-kf-grid {
    --itp-at-kf-cols: 3;
    display: grid;
    grid-template-columns: repeat(var(--itp-at-kf-cols), minmax(0, 1fr));
    gap: 28px 20px;
}
.itp-at-kf-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.itp-at-kf-media {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}
.itp-at-kf-media i   { font-size: 40px; color: #d91e5f; line-height: 1; }
.itp-at-kf-media svg { width: 40px; height: 40px; fill: #d91e5f; }
.itp-at-kf-media img { width: 52px; height: auto; display: block; }
.itp-at-kf-text {
    font-size: 14px;
    line-height: 1.45;
    color: #111;
    font-weight: 600;
}

@media (max-width: 767px) {
    .itp-at-kf-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 22px 16px; }
}

/* Content type: icon box grid */
.itp-at-iconbox-grid {
    display: grid;
    gap: 16px;
}
.itp-at-iconbox-cols-1 { grid-template-columns: 1fr; }
.itp-at-iconbox-cols-2 { grid-template-columns: repeat(2, 1fr); }
.itp-at-iconbox-cols-3 { grid-template-columns: repeat(3, 1fr); }
.itp-at-iconbox-cols-4 { grid-template-columns: repeat(4, 1fr); }

.itp-at-iconbox {
    background: #fafafa;
    border-radius: 6px;
    padding: 16px 12px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    transition: transform .25s ease, box-shadow .25s ease;
}
.itp-at-iconbox:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(0,0,0,0.08);
}
.itp-at-iconbox-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}
.itp-at-iconbox-icon i  { font-size: 36px; color: #d91e5f; }
.itp-at-iconbox-icon svg { width: 36px; height: 36px; fill: #d91e5f; }
.itp-at-iconbox-title {
    font-size: 14px;
    color: #111;
    line-height: 1.4;
    font-weight: 600;
}
.itp-at-iconbox-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.5;
}

/* Content type: icon list */
.itp-at-iconlist-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 8px;
}
.itp-at-iconlist-item:last-child {
    margin-bottom: 0;
}
.itp-at-iconlist-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 2px;
}
.itp-at-iconlist-icon i   { font-size: 16px; color: #d91e5f; }
.itp-at-iconlist-icon svg { width: 16px; height: 16px; fill: #d91e5f; }
.itp-at-iconlist-text {
    flex: 1;
    line-height: 1.6;
}
.itp-at-iconlist-label {
    font-weight: 700;
    color: #111;
    margin-right: 4px;
}
.itp-at-iconlist-value {
    color: #444;
}

/* CTA Button */
.itp-at-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 32px;
    background: #101E41;
    color: #fff;
    border-radius: 100px;
    text-decoration: none;
    font-weight: 600;
    letter-spacing: 0.3px;
    transition: background .25s ease, transform .25s ease, box-shadow .25s ease, opacity .25s ease;
    margin-top: 8px;
}
.itp-at-cta:hover {
    background: #00407C;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 64, 124, 0.35);
    color: #fff;
}
.itp-at-cta-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}
.itp-at-cta:hover .itp-at-cta-icon {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 991px) {
    .itp-at-wrapper {
        flex-direction: column !important;
        gap: 30px;
    }
    .itp-at-image-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-at-iconbox-cols-3,
    .itp-at-iconbox-cols-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 480px) {
    .itp-at-iconbox-cols-2,
    .itp-at-iconbox-cols-3,
    .itp-at-iconbox-cols-4 {
        grid-template-columns: 1fr;
    }
    .itp-at-variant-thumb {
        width: 70px;
        height: 70px;
    }
}

/* ============================================
   ProV10.04 — INTERACTIVE HOTSPOT IMAGE widget
   All selectors prefixed .itp-hsi-* — no global leakage.
   ============================================ */

/* Wrapper: two-column layout */
.itp-hsi-wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
}
.itp-hsi-wrapper.itp-hsi-side-right { flex-direction: row-reverse; }
.itp-hsi-wrapper.itp-hsi-no-side .itp-hsi-trigger { flex: 1; }

/* Side content block */
.itp-hsi-side {
    flex: 0 0 30%;
    max-width: 30%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: #6B7280;
    padding: 40px 32px;
    color: #fff;
}
.itp-hsi-side-title {
    margin: 0 0 16px 0;
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
}
.itp-hsi-side-desc {
    line-height: 1.6;
    color: #fff;
}
.itp-hsi-side-desc p { margin: 0 0 0.75em; }
.itp-hsi-side-desc p:last-child { margin-bottom: 0; }

/* Side CTA button (new default scheme: #101E41 / #00407C / white) */
.itp-hsi-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding: 12px 24px;
    background: #101E41;
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
    align-self: flex-start;
}
.itp-hsi-cta:hover {
    background: #00407C;
    color: #fff;
    transform: translateY(-1px);
}
.itp-hsi-cta-arrow {
    transition: transform .25s ease;
    color: #fff;
}
.itp-hsi-cta:hover .itp-hsi-cta-arrow { transform: translateX(3px); }

/* Trigger image (the click target) */
.itp-hsi-trigger {
    position: relative;
    flex: 1;
    cursor: pointer;
    overflow: hidden;
    background: #fff;
    transition: opacity .25s ease;
}
.itp-hsi-trigger:focus { outline: 2px solid #00407C; outline-offset: 2px; }
.itp-hsi-trigger img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
.itp-hsi-trigger-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    background: rgba(16, 30, 65, 0.75);
    opacity: 0;
    transition: opacity .3s ease;
    color: #fff;
}
.itp-hsi-trigger:hover .itp-hsi-trigger-overlay { opacity: 1; }
.itp-hsi-trigger-overlay-text {
    font-weight: 600;
    letter-spacing: 0.5px;
    color: #fff;
}
.itp-hsi-trigger-overlay-icon svg { color: #fff; }

/* ===== MODAL ===== */
.itp-hsi-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: none;
    align-items: center;
    justify-content: center;
}
.itp-hsi-modal.itp-active { display: flex; }
.itp-hsi-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    cursor: pointer;
}
.itp-hsi-modal-inner {
    position: relative;
    z-index: 2;
    width: 95vw;
    max-width: 1400px;
    max-height: 95vh;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.itp-hsi-modal-close {
    position: absolute;
    top: 8px;
    right: 12px;
    width: 36px;
    height: 36px;
    line-height: 1;
    font-size: 28px;
    background: transparent;
    border: none;
    color: #fff;
    cursor: pointer;
    z-index: 10;
    padding: 0;
    border-radius: 50%;
    transition: background .2s ease;
}
.itp-hsi-modal-close:hover { background: rgba(255,255,255,0.15); }
.itp-hsi-modal-top {
    background: #101E41;
    color: #fff;
    padding: 14px 56px 14px 20px;
    font-size: 14px;
    text-align: center;
    flex-shrink: 0;
}
.itp-hsi-modal-bottom {
    background: #101E41;
    color: #fff;
    padding: 14px 20px;
    font-size: 13px;
    text-align: center;
    flex-shrink: 0;
}
.itp-hsi-modal-canvas {
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: auto;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
.itp-hsi-modal-image {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    object-fit: contain;
}

/* ===== HOTSPOTS ===== */
.itp-hsi-hotspot {
    --itp-hs-size: 16px;
    --itp-hs-color: #d91e5f;
    --itp-hs-ring: rgba(217, 30, 95, 0.5);
    --itp-hs-speed: 1.8s;

    position: absolute;
    width: var(--itp-hs-size);
    height: var(--itp-hs-size);
    transform: translate(-50%, -50%);
    cursor: pointer;
    z-index: 5;
}
.itp-hsi-hotspot:focus { outline: none; }
.itp-hsi-hotspot:focus .itp-hsi-hotspot-dot {
    box-shadow: 0 0 0 3px rgba(0, 64, 124, 0.5);
}

.itp-hsi-hotspot-dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--itp-hs-color);
    z-index: 2;
    box-shadow: 0 0 8px rgba(0,0,0,0.3);
}

.itp-hsi-hotspot-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--itp-hs-ring);
    z-index: 1;
}

/* Pulse animation (only when global pulse is on) */
.itp-hsi-pulse-on .itp-hsi-hotspot-ring {
    animation: itp-hsi-pulse var(--itp-hs-speed) ease-out infinite;
}
.itp-hsi-pulse-on .itp-hsi-hotspot-dot {
    animation: itp-hsi-dot-pulse var(--itp-hs-speed) ease-in-out infinite;
}

@keyframes itp-hsi-pulse {
    0%   { transform: scale(1); opacity: 1; }
    100% { transform: scale(3.5); opacity: 0; }
}
@keyframes itp-hsi-dot-pulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}

/* ===== POPUP (tooltip on hotspot) ===== */
.itp-hsi-popup {
    position: absolute;
    background: #101E41;
    color: #fff;
    padding: 14px 16px;
    border-radius: 6px;
    max-width: 280px;
    min-width: 180px;
    width: max-content;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .2s ease, visibility .2s ease, transform .25s ease;
    z-index: 10;
    line-height: 1.5;
    font-size: 13px;
}
.itp-hsi-hotspot:hover .itp-hsi-popup,
.itp-hsi-hotspot:focus .itp-hsi-popup,
.itp-hsi-hotspot.itp-active .itp-hsi-popup {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.itp-hsi-popup-title {
    font-weight: 700;
    color: #fff;
    margin-bottom: 6px;
    font-size: 14px;
    line-height: 1.3;
}
.itp-hsi-popup-desc {
    color: #e5e7eb;
    font-size: 13px;
}
.itp-hsi-popup-desc p { margin: 0 0 0.5em; }
.itp-hsi-popup-desc p:last-child { margin-bottom: 0; }
.itp-hsi-popup-image {
    margin: -14px -16px 10px;
    overflow: hidden;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}
.itp-hsi-popup-image img {
    display: block;
    width: 100%;
    height: auto;
}
.itp-hsi-popup-link {
    display: inline-block;
    margin-top: 10px;
    padding: 8px 16px;
    background: #101E41;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
    transition: background .2s ease;
    border: 1px solid rgba(255,255,255,0.2);
}
.itp-hsi-popup-link:hover { background: #00407C; }

/* Popup positions */
.itp-hsi-popup-pos-auto,
.itp-hsi-popup-pos-top {
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 6px);
}
.itp-hsi-hotspot:hover .itp-hsi-popup-pos-auto,
.itp-hsi-hotspot:hover .itp-hsi-popup-pos-top,
.itp-hsi-hotspot.itp-active .itp-hsi-popup-pos-auto,
.itp-hsi-hotspot.itp-active .itp-hsi-popup-pos-top {
    transform: translate(-50%, 0);
}
.itp-hsi-popup-pos-bottom {
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, -6px);
}
.itp-hsi-hotspot:hover .itp-hsi-popup-pos-bottom,
.itp-hsi-hotspot.itp-active .itp-hsi-popup-pos-bottom {
    transform: translate(-50%, 0);
}
.itp-hsi-popup-pos-left {
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(6px, -50%);
}
.itp-hsi-hotspot:hover .itp-hsi-popup-pos-left,
.itp-hsi-hotspot.itp-active .itp-hsi-popup-pos-left {
    transform: translate(0, -50%);
}
.itp-hsi-popup-pos-right {
    left: calc(100% + 14px);
    top: 50%;
    transform: translate(-6px, -50%);
}
.itp-hsi-hotspot:hover .itp-hsi-popup-pos-right,
.itp-hsi-hotspot.itp-active .itp-hsi-popup-pos-right {
    transform: translate(0, -50%);
}

/* Body scroll lock when modal is open */
body.itp-hsi-modal-open { overflow: hidden; }

/* Responsive */
@media (max-width: 991px) {
    .itp-hsi-wrapper {
        flex-direction: column !important;
    }
    .itp-hsi-side {
        flex: 0 0 auto !important;
        max-width: 100% !important;
    }
    .itp-hsi-modal-inner {
        width: 100vw;
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
    .itp-hsi-popup {
        max-width: 240px;
    }
}
@media (max-width: 480px) {
    .itp-hsi-popup {
        max-width: 200px;
        font-size: 12px;
        padding: 10px 12px;
    }
}

/* ============================================
   ProV10.07 — ABOUT SECTION widget (itp-about-section)
   All selectors scoped with .itp-as-* — no global leakage.
   ============================================ */

.itp-as-wrapper {
    background: #F3F5F8;
    padding: 60px 40px;
    width: 100%;
    box-sizing: border-box;
}

.itp-as-top-row {
    display: flex;
    align-items: flex-start;
    gap: 40px;
    width: 100%;
}
.itp-as-wrapper.itp-as-imgpos-left .itp-as-top-row {
    flex-direction: row-reverse;
}

/* Content column */
.itp-as-content {
    flex: 0 0 60%;
    max-width: 60%;
    min-width: 0;
}

.itp-as-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    color: #d91e5f;
    text-transform: uppercase;
    margin-bottom: 20px;
    line-height: 1.2;
}

.itp-as-heading {
    color: #101E41;
    margin: 0 0 20px 0;
    font-weight: 700;
    line-height: 1.2;
}

.itp-as-body {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
}
.itp-as-body p { margin: 0 0 1em 0; }
.itp-as-body p:last-child { margin-bottom: 0; }
.itp-as-body strong,
.itp-as-body b {
    color: #111;
    font-weight: 700;
}

/* CTA Link with gradient underline */
.itp-as-cta {
    --itp-as-uline-start: #d91e5f;
    --itp-as-uline-end:   #1e5fbf;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    color: #101E41;
    text-decoration: none;
    font-weight: 700;
    padding-bottom: 6px;
    background-image: linear-gradient(90deg, var(--itp-as-uline-start), var(--itp-as-uline-end));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    transition: color .25s ease, background-size .25s ease;
}
.itp-as-cta:hover {
    color: #00407C;
    background-size: 100% 3px;
}
.itp-as-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform .25s ease;
}
.itp-as-cta:hover .itp-as-cta-arrow {
    transform: translate(2px, -2px);
}

/* Image column */
.itp-as-image-col {
    flex: 1;
    min-width: 0;
}
.itp-as-image {
    width: 100%;
    overflow: hidden;
    line-height: 0;
}
.itp-as-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* Stats row */
.itp-as-stats-row {
    display: grid;
    gap: 16px;
    margin-top: 40px;
    width: 100%;
}
.itp-as-stats-cols-2 { grid-template-columns: repeat(2, 1fr); }
.itp-as-stats-cols-3 { grid-template-columns: repeat(3, 1fr); }
.itp-as-stats-cols-4 { grid-template-columns: repeat(4, 1fr); }

.itp-as-stat {
    background: #ffffff;
    border: 1px solid #A8C5E8;
    border-radius: 4px;
    padding: 28px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease;
    min-height: 100px;
}
.itp-as-stat:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(16, 30, 65, 0.08);
}
.itp-as-stat-number {
    color: #101E41;
    font-size: 36px;
    font-weight: 800;
    line-height: 1.1;
    margin-bottom: 8px;
}
.itp-as-stat-text {
    color: #333;
    font-size: 14px;
    line-height: 1.4;
}
.itp-as-stat-text strong,
.itp-as-stat-text b { font-weight: 700; color: #101E41; }

/* Responsive */
@media (max-width: 991px) {
    .itp-as-top-row {
        flex-direction: column !important;
        gap: 30px;
    }
    .itp-as-content {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-as-stats-cols-4 { grid-template-columns: repeat(2, 1fr); }
    .itp-as-stats-row { margin-top: 30px !important; }
}
@media (max-width: 600px) {
    .itp-as-wrapper { padding: 40px 20px; }
    .itp-as-stats-cols-3,
    .itp-as-stats-cols-4 { grid-template-columns: 1fr; }
    .itp-as-stat-number { font-size: 28px; }
}

/* ============================================
   ProV10.08 — HERO BANNER widget (itp-hero-banner)
   All selectors scoped with .itp-hb-* prefix.
   ============================================ */

.itp-hb-wrapper {
    position: relative;
    width: 100%;
    min-height: 420px;
    padding: 60px 60px 60px 80px;
    background: linear-gradient(90deg, #9F1247 0%, #0E2546 100%);
    overflow: hidden;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

/* Center decorative orb — color customizable via CSS variables */
.itp-hb-orb {
    --itp-hb-orb-center: #0F2754;
    --itp-hb-orb-glow:   #3A6CB0;

    position: absolute;
    width: 550px;
    height: 550px;
    border-radius: 50%;
    top: 50%;
    left: 55%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(
            circle at center,
            var(--itp-hb-orb-center) 0%,
            var(--itp-hb-orb-center) 30%,
            var(--itp-hb-orb-glow) 42%,
            var(--itp-hb-orb-center) 58%,
            transparent 80%
        );
    filter: blur(1px);
}

/* Content block (left side) */
.itp-hb-content {
    position: relative;
    z-index: 3;
    max-width: 500px;
    flex: 0 0 auto;
}

.itp-hb-heading {
    color: #fff;
    margin: 0;
    font-size: 28px;
    line-height: 1.35;
    font-weight: 400;
}
.itp-hb-heading p {
    margin: 0 0 0.5em 0;
}
.itp-hb-heading p:last-child {
    margin-bottom: 0;
}
.itp-hb-heading strong,
.itp-hb-heading b {
    color: #fff;
    font-weight: 700;
}

/* CTA Link with gradient underline */
.itp-hb-cta-wrap {
    margin-top: 40px;
}
.itp-hb-cta {
    --itp-hb-uline-start: #d91e5f;
    --itp-hb-uline-end:   #1e5fbf;

    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    padding-bottom: 6px;
    background-image: linear-gradient(90deg, var(--itp-hb-uline-start), var(--itp-hb-uline-end));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 2px;
    transition: color .25s ease, background-size .25s ease;
}
.itp-hb-cta:hover {
    color: #fff;
    background-size: 100% 3px;
}
.itp-hb-cta-arrow {
    display: inline-flex;
    align-items: center;
    transition: transform .25s ease;
}
.itp-hb-cta:hover .itp-hb-cta-arrow {
    transform: translate(2px, -2px);
}

/* Image column — absolutely positioned so it stays anchored when banner resizes */
.itp-hb-image-col {
    position: absolute;
    top: 50%;
    right: 40px;
    transform: translateY(-50%);
    z-index: 2;
    line-height: 0;
}
.itp-hb-wrapper.itp-hb-img-left .itp-hb-image-col {
    right: auto;
    left: 40px;
}
.itp-hb-wrapper.itp-hb-img-left {
    flex-direction: row-reverse;
    padding: 60px 80px 60px 60px;
}
.itp-hb-wrapper.itp-hb-img-left .itp-hb-content {
    margin-left: auto;
}

.itp-hb-image {
    display: block;
    width: 420px;
    max-width: 100%;
    height: auto;
}

/* Responsive */
@media (max-width: 991px) {
    .itp-hb-wrapper {
        padding: 40px 30px !important;
        min-height: auto !important;
        flex-direction: column;
        text-align: center;
    }
    .itp-hb-content {
        max-width: 100% !important;
        margin: 0 auto;
    }
    .itp-hb-cta-wrap {
        text-align: center;
    }
    .itp-hb-cta {
        display: inline-flex;
    }
    .itp-hb-image-col {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        left: auto !important;
        transform: none !important;
        margin-top: 30px;
    }
    .itp-hb-image {
        width: 300px !important;
        margin: 0 auto;
    }
    .itp-hb-orb {
        width: 400px !important;
        height: 400px !important;
        top: 50% !important;
        left: 50% !important;
        transform: translate(-50%, -50%) !important;
        opacity: 0.7;
    }
}
@media (max-width: 480px) {
    .itp-hb-wrapper { padding: 30px 20px !important; }
    .itp-hb-heading { font-size: 22px; }
    .itp-hb-image { width: 240px !important; }
    .itp-hb-orb { display: none; }
}

/* ============================================
   ProV10.09 — ABOUT BLOCKS 1-4 widgets
   All selectors scoped with .itp-ab1-*, .itp-ab2-*, .itp-ab3-*, .itp-ab4-* prefixes.
   ============================================ */

/* ====== ABOUT BLOCK 1 — Centered intro + stats + gradient CTA ====== */
.itp-ab1-wrapper {
    background: #ffffff;
    padding: 60px 40px;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}
.itp-ab1-eyebrow {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin-bottom: 24px;
    line-height: 1.2;
}
.itp-ab1-heading {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    line-height: 1.25;
    margin: 0 auto 24px auto;
    max-width: 900px;
}
.itp-ab1-sub {
    font-size: 15px;
    color: #444;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto 48px auto;
}
.itp-ab1-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    width: 100%;
    margin: 0 auto 48px auto;
}
.itp-ab1-stat {
    background: #F1F4F8;
    padding: 30px 20px;
    border-radius: 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.itp-ab1-stat-num {
    font-size: 36px;
    font-weight: 700;
    color: #1B4FB2;
    line-height: 1.1;
    margin-bottom: 8px;
}
.itp-ab1-stat-label {
    font-size: 15px;
    color: #222;
    line-height: 1.3;
}
.itp-ab1-cta-wrap {
    text-align: center;
    margin-top: 24px;
}
.itp-ab1-cta {
    display: inline-block;
    padding: 18px 40px;
    background: linear-gradient(90deg, #d91e5f 0%, #1e5fbf 100%);
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 4px;
    transition: transform .25s ease, box-shadow .25s ease, opacity .25s ease;
}
.itp-ab1-cta:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(217, 30, 95, 0.3);
}

/* ====== ABOUT BLOCK 2 — Image + content with accent ====== */
.itp-ab2-wrapper {
    position: relative;
    display: flex;
    background: #F1F4F8;
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    gap: 60px;
}
.itp-ab2-wrapper.itp-ab2-img-right { flex-direction: row-reverse; }
.itp-ab2-image-col {
    flex: 0 0 50%;
    max-width: 50%;
    line-height: 0;
}
.itp-ab2-image-col img {
    width: 100%;
    height: 480px;
    object-fit: cover;
    display: block;
}
.itp-ab2-content-col {
    flex: 1;
    padding: 60px 60px 60px 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.itp-ab2-wrapper.itp-ab2-img-right .itp-ab2-content-col {
    padding: 60px 0 60px 60px;
}
.itp-ab2-heading {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    margin: 0 0 20px 0;
    line-height: 1.25;
}
.itp-ab2-body {
    color: #333;
    font-size: 15px;
    line-height: 1.7;
}
.itp-ab2-body p { margin: 0 0 1em 0; }
.itp-ab2-body p:last-child { margin-bottom: 0; }
.itp-ab2-body strong, .itp-ab2-body b { color: #111; font-weight: 700; }
.itp-ab2-accent {
    position: absolute;
    right: -140px;
    top: 50%;
    transform: translateY(-50%);
    width: 280px;
    height: 280px;
    border-radius: 50%;
    border: 30px solid #FBC9D6;
    z-index: 0;
    pointer-events: none;
    opacity: 0.6;
}

/* ====== ABOUT BLOCK 3 — Navy title block + body + stats with dividers ====== */
.itp-ab3-wrapper {
    background: #ffffff;
    width: 100%;
    box-sizing: border-box;
}
.itp-ab3-top-row {
    display: flex;
    align-items: stretch;
    gap: 40px;
    background: #ffffff;
}
.itp-ab3-title-block {
    flex: 0 0 42%;
    max-width: 42%;
    background: #0E4279;
    padding: 80px 50px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.itp-ab3-heading {
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.1;
    margin: 0;
}
.itp-ab3-underline {
    width: 220px;
    height: 3px;
    background: #d91e5f;
    margin-top: 30px;
    position: relative;
    left: 50%;
}
.itp-ab3-body-col {
    flex: 1;
    padding: 40px 40px 40px 0;
    display: flex;
    align-items: center;
}
.itp-ab3-body {
    color: #222;
    font-size: 15px;
    line-height: 1.7;
}
.itp-ab3-body p { margin: 0 0 1em 0; }
.itp-ab3-body p:last-child { margin-bottom: 0; }
.itp-ab3-body strong, .itp-ab3-body b { color: #111; font-weight: 700; }

.itp-ab3-stats-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: #EAEEF4;
    padding: 50px 40px;
}
.itp-ab3-stat {
    position: relative;
    text-align: center;
    padding: 0 20px;
}
.itp-ab3-stat:not(:first-child)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10%;
    bottom: 10%;
    border-left: 1px dashed #B0B8C5;
}
.itp-ab3-stat-num {
    font-size: 32px;
    font-weight: 700;
    color: #0E4279;
    line-height: 1.1;
    margin-bottom: 8px;
}
.itp-ab3-stat-label {
    font-size: 16px;
    font-weight: 600;
    color: #0E4279;
}

/* ====== ABOUT BLOCK 4 — Image + overlapping navy text block + accent ====== */
.itp-ab4-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    box-sizing: border-box;
}
.itp-ab4-wrapper.itp-ab4-img-right { flex-direction: row-reverse; }
.itp-ab4-image-col {
    flex: 0 0 55%;
    max-width: 55%;
    line-height: 0;
    position: relative;
    z-index: 1;
}
.itp-ab4-image-col img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    display: block;
}
.itp-ab4-block-col {
    flex: 1;
    position: relative;
    z-index: 2;
    margin-left: -80px;
}
.itp-ab4-wrapper.itp-ab4-img-right .itp-ab4-block-col {
    margin-left: 0;
    margin-right: -80px;
}
.itp-ab4-block {
    background: #0E4279;
    padding: 50px;
    border-radius: 4px;
    color: #fff;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.itp-ab4-heading {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin: 0 0 24px 0;
    line-height: 1.3;
}
.itp-ab4-body {
    color: #E8EEF7;
    font-size: 15px;
    line-height: 1.7;
}
.itp-ab4-body p { margin: 0 0 1em 0; }
.itp-ab4-body p:last-child { margin-bottom: 0; }
.itp-ab4-body strong, .itp-ab4-body b { color: #ffffff; font-weight: 700; }
.itp-ab4-accent {
    width: 140px;
    height: 3px;
    background: #d91e5f;
    margin-top: 28px;
}

/* Responsive — all four blocks */
@media (max-width: 991px) {
    .itp-ab1-stats-row { grid-template-columns: repeat(2, 1fr); }
    .itp-ab1-heading { font-size: 28px; }
    .itp-ab2-wrapper {
        flex-direction: column !important;
        gap: 0 !important;
    }
    .itp-ab2-image-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-ab2-image-col img { height: 300px; }
    .itp-ab2-content-col,
    .itp-ab2-wrapper.itp-ab2-img-right .itp-ab2-content-col {
        padding: 40px 30px !important;
    }
    .itp-ab2-accent { display: none; }
    .itp-ab3-top-row {
        flex-direction: column;
        gap: 0;
    }
    .itp-ab3-title-block {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        padding: 50px 30px !important;
    }
    .itp-ab3-heading { font-size: 32px; }
    .itp-ab3-body-col { padding: 30px !important; }
    .itp-ab3-stats-row { grid-template-columns: repeat(2, 1fr); gap: 24px; }
    .itp-ab3-stat:not(:first-child)::before { display: none; }
    .itp-ab4-wrapper {
        flex-direction: column !important;
    }
    .itp-ab4-image-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-ab4-block-col,
    .itp-ab4-wrapper.itp-ab4-img-right .itp-ab4-block-col {
        margin: -40px 20px 0 20px !important;
    }
    .itp-ab4-image-col img { height: 280px; }
}
@media (max-width: 600px) {
    .itp-ab1-stats-row { grid-template-columns: 1fr; }
    .itp-ab1-heading { font-size: 22px; }
    .itp-ab1-stat-num { font-size: 28px; }
    .itp-ab3-stats-row { grid-template-columns: 1fr; }
    .itp-ab3-heading { font-size: 26px; }
    .itp-ab4-block { padding: 30px; }
}

/* ============================================
   ProV10.10 — PDF CAROUSEL widget (itp-pdf-carousel)
   CSS prefix: .itp-pc-*  — fully scoped, no leaks.
   Body scroll lock class: .itp-pc-modal-open
   ============================================ */

.itp-pc-wrapper {
    position: relative;
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
}
.itp-pc-swiper {
    overflow: hidden;
    width: 100%;
}
.itp-pc-slide {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto;
}

/* Slide inner — the white card showing the document thumbnail */
.itp-pc-slide-inner {
    display: block;
    width: 100%;
    height: 400px;
    background: #ffffff;
    border-radius: 4px;
    padding: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.10);
    overflow: hidden;
    transition: transform .3s ease, box-shadow .3s ease;
    box-sizing: border-box;
    /* Make it look button-like when clickable */
    border: 0;
    text-align: inherit;
    color: inherit;
    font: inherit;
}
.itp-pc-slide-inner.itp-pc-clickable {
    cursor: pointer;
}
.itp-pc-slide-inner.itp-pc-clickable:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0,0,0,0.15);
}
.itp-pc-slide-inner.itp-pc-clickable:focus-visible {
    outline: 2px solid #00407C;
    outline-offset: 3px;
}
a.itp-pc-slide-inner { text-decoration: none; }

.itp-pc-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}

.itp-pc-caption {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #111;
    margin-top: 16px;
    line-height: 1.4;
}

/* Coverflow effect — side slides slightly dimmed */
.itp-pc-effect-coverflow .swiper-slide:not(.swiper-slide-active) .itp-pc-slide-inner {
    opacity: 0.65;
    transform: scale(0.92);
}
.itp-pc-effect-coverflow .swiper-slide-active .itp-pc-slide-inner {
    opacity: 1;
}

/* Navigation arrows — using new button color scheme */
.itp-pc-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #101E41;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease, transform .25s ease;
    padding: 0;
}
.itp-pc-arrow:hover { background: #00407C; }
.itp-pc-arrow:focus-visible { outline: 2px solid #00407C; outline-offset: 3px; }
.itp-pc-arrow svg { stroke: #ffffff; }
.itp-pc-arrow-prev { left: 10px; }
.itp-pc-arrow-next { right: 10px; }
.itp-pc-arrow.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* Pagination dots */
.itp-pc-pagination {
    text-align: center;
    margin-top: 30px;
    position: relative !important;
    bottom: auto !important;
}
.itp-pc-pagination .swiper-pagination-bullet {
    background: #cccccc;
    opacity: 1;
    width: 10px;
    height: 10px;
    margin: 0 5px !important;
    transition: background .25s ease;
}
.itp-pc-pagination .swiper-pagination-bullet-active {
    background: #101E41;
}

/* =====================================================
   MODAL — PDF / image preview
   ===================================================== */
.itp-pc-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.75);
    z-index: 999998;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    box-sizing: border-box;
}
.itp-pc-modal.itp-active {
    display: flex;
    animation: itp-pc-fade-in .25s ease;
}
@keyframes itp-pc-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.itp-pc-modal-panel {
    background: #ffffff;
    border-radius: 8px;
    width: 100%;
    max-width: 900px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    animation: itp-pc-zoom-in .3s ease;
}
@keyframes itp-pc-zoom-in {
    from { transform: scale(0.94); opacity: 0; }
    to   { transform: scale(1);    opacity: 1; }
}

.itp-pc-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.itp-pc-modal-title {
    font-size: 20px;
    font-weight: 700;
    color: #111;
    margin: 0;
    line-height: 1.3;
}
.itp-pc-modal-close {
    background: transparent;
    border: 0;
    color: #111;
    cursor: pointer;
    padding: 6px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .2s ease;
}
.itp-pc-modal-close:hover { background: rgba(0,0,0,0.06); }
.itp-pc-modal-close:focus-visible { outline: 2px solid #00407C; outline-offset: 2px; }

.itp-pc-modal-body {
    flex: 1;
    overflow: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f5f5f5;
    padding: 0;
    min-height: 0;
}
.itp-pc-modal-body-pdf {
    padding: 0;
    background: #525659; /* PDF viewer default grey */
}
.itp-pc-modal-iframe {
    width: 100%;
    height: 100%;
    min-height: 70vh;
    border: 0;
    display: block;
}
.itp-pc-modal-image {
    max-width: 100%;
    max-height: 80vh;
    object-fit: contain;
    display: block;
}

/* Body scroll lock when modal is open */
body.itp-pc-modal-open {
    overflow: hidden;
}

/* Responsive */
@media (max-width: 991px) {
    .itp-pc-wrapper { padding: 40px 10px; }
    .itp-pc-slide-inner { height: 320px; }
    .itp-pc-arrow { width: 40px; height: 40px; }
    .itp-pc-arrow-prev { left: 4px; }
    .itp-pc-arrow-next { right: 4px; }
    .itp-pc-modal-iframe { min-height: 60vh; }
}
@media (max-width: 600px) {
    .itp-pc-wrapper { padding: 30px 10px; }
    .itp-pc-slide-inner { height: 280px; padding: 8px; }
    .itp-pc-caption { font-size: 13px; margin-top: 12px; }
    .itp-pc-modal { padding: 10px; }
    .itp-pc-modal-panel { max-height: 95vh; }
    .itp-pc-modal-header { padding: 12px 16px; }
    .itp-pc-modal-title { font-size: 16px; }
}

/* ============================================
   ProV10.11 — PRODUCT LIST BLOCK widget
   CSS prefix: .itp-pl-*  — fully scoped, no leaks.
   ============================================ */

.itp-pl-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    background: #ffffff;
    padding: 60px 40px;
    gap: 80px;
    box-sizing: border-box;
    overflow: hidden;
}
.itp-pl-wrapper.itp-pl-img-right {
    flex-direction: row-reverse;
}

/* Image column */
.itp-pl-image-col {
    flex: 0 0 45%;
    max-width: 45%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
}
.itp-pl-image {
    display: block;
    max-width: 100%;
    max-height: 480px;
    width: auto;
    height: auto;
}

/* Content column */
.itp-pl-content-col {
    flex: 1;
    position: relative;
    z-index: 2;
    min-width: 0;
}
.itp-pl-heading {
    font-size: 30px;
    font-weight: 700;
    color: #111;
    margin: 0 0 20px 0;
    line-height: 1.25;
}
.itp-pl-body {
    color: #444;
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 36px;
}
.itp-pl-body p { margin: 0 0 1em 0; }
.itp-pl-body p:last-child { margin-bottom: 0; }
.itp-pl-body strong, .itp-pl-body b { color: #111; font-weight: 700; }

/* CTAs row */
.itp-pl-cta-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 16px;
}

/* Base CTA styles */
.itp-pl-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    box-sizing: border-box;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}

/* Primary CTA — gradient pill */
.itp-pl-cta-primary {
    background: linear-gradient(90deg, #1e5fbf 0%, #d91e5f 100%);
    color: #ffffff;
    padding: 16px 36px;
    border-radius: 50px;
    border: 0;
}
.itp-pl-cta-primary:hover {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(30, 95, 191, 0.3);
}
.itp-pl-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}
.itp-pl-cta-primary:hover .itp-pl-cta-arrow {
    transform: translateX(4px);
}

/* Secondary CTA — outline pill */
.itp-pl-cta-secondary {
    background: rgba(0,0,0,0);
    color: #111;
    border: 1px solid #dcdcdc;
    padding: 15px 36px;
    border-radius: 50px;
}
.itp-pl-cta-secondary:hover {
    background: #101E41;
    color: #ffffff;
    border-color: #101E41;
}

/* Decorative accent ring — conic gradient ring with hole via radial mask */
.itp-pl-accent {
    --itp-pl-accent-a: #B0D4E8;
    --itp-pl-accent-b: #F6B3B3;
    --itp-pl-accent-hole: 45%;

    position: absolute;
    top: 50%;
    right: -180px;
    transform: translateY(-50%);
    width: 380px;
    height: 380px;
    border-radius: 50%;
    background: conic-gradient(
        from 180deg,
        var(--itp-pl-accent-a) 0deg,
        var(--itp-pl-accent-a) 90deg,
        var(--itp-pl-accent-b) 200deg,
        var(--itp-pl-accent-a) 360deg
    );
    -webkit-mask: radial-gradient(circle, transparent var(--itp-pl-accent-hole), #000 calc(var(--itp-pl-accent-hole) + 1%));
            mask: radial-gradient(circle, transparent var(--itp-pl-accent-hole), #000 calc(var(--itp-pl-accent-hole) + 1%));
    z-index: 1;
    pointer-events: none;
    filter: blur(1px);
}

/* Responsive */
@media (max-width: 991px) {
    .itp-pl-wrapper {
        flex-direction: column !important;
        gap: 40px !important;
        padding: 50px 30px !important;
    }
    .itp-pl-image-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-pl-image { max-height: 320px; }
    .itp-pl-heading { font-size: 26px; }
    .itp-pl-accent {
        width: 240px !important;
        height: 240px !important;
        right: -120px !important;
        opacity: 0.5;
    }
}
@media (max-width: 600px) {
    .itp-pl-wrapper { padding: 40px 20px !important; }
    .itp-pl-cta-row {
        width: 100%;
    }
    .itp-pl-cta {
        flex: 1 1 auto;
        min-width: 0;
        padding: 14px 24px !important;
    }
    .itp-pl-heading { font-size: 22px; }
    .itp-pl-accent { display: none; }
}

/* ============================================
   ProV10.12 — ACCORDION TAB bug fixes
   - Per-variant accordion visibility toggle
   ============================================ */
.itp-at-variant-acc.itp-at-acc-hidden {
    display: none;
}

/* ============================================
   ProV10.13 — HERO STYLE 1 widget (itp-hero-style-1)
   CSS prefix: .itp-hs1-*  — fully scoped.
   ============================================ */
.itp-hs1-wrapper {
    position: relative;
    width: 100%;
    min-height: 720px;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}
/* Background slideshow layers */
.itp-hs1-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.itp-hs1-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.itp-hs1-slide.itp-active { opacity: 1; }
.itp-hs1-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1;
}
.itp-hs1-inner {
    position: relative;
    z-index: 2;
    padding: 80px 60px 120px 60px;
    min-height: inherit;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}
.itp-hs1-grid {
    display: flex;
    align-items: center;
    gap: 60px;
    flex: 1;
}
.itp-hs1-wrapper.itp-hs1-form-left .itp-hs1-grid { flex-direction: row-reverse; }
.itp-hs1-content { flex: 1; min-width: 0; }
.itp-hs1-form-col { flex: 0 0 auto; }

.itp-hs1-heading {
    margin: 0 0 18px 0;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    color: #ffffff;
}
.itp-hs1-heading-p1 { color: #A23037; }
.itp-hs1-heading-p2 { color: #ffffff; }
.itp-hs1-subtitle {
    color: #ffffff;
    font-size: 18px;
    margin-bottom: 28px;
    max-width: 600px;
}
.itp-hs1-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 30px;
    flex-wrap: wrap;
}
.itp-hs1-stars {
    color: #F5B100;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 1;
}
.itp-hs1-rating-label {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}
.itp-hs1-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    align-items: center;
}
.itp-hs1-badge {
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}
.itp-hs1-badge img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

/* Form panel */
.itp-hs1-form {
    width: 440px;
    max-width: 100%;
    padding: 40px 36px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.18);
}
.itp-hs1-form-heading {
    margin: 0 0 20px 0;
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
}
/* Style shortcode-rendered form inputs to fit the dark panel */
.itp-hs1-form-body input[type="text"],
.itp-hs1-form-body input[type="email"],
.itp-hs1-form-body input[type="tel"],
.itp-hs1-form-body input[type="url"],
.itp-hs1-form-body input[type="number"],
.itp-hs1-form-body select,
.itp-hs1-form-body textarea {
    width: 100%;
    background: #ffffff;
    border: 0;
    border-radius: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
    font-size: 14px;
    color: #222;
    box-sizing: border-box;
}
.itp-hs1-form-body textarea { min-height: 100px; resize: vertical; }
.itp-hs1-form-body label { color: #fff; font-weight: 600; font-size: 14px; }
.itp-hs1-form-body input[type="submit"],
.itp-hs1-form-body button[type="submit"] {
    width: 100%;
    background: #A23037;
    color: #ffffff;
    border: 0;
    padding: 14px 28px;
    border-radius: 30px;
    font-weight: 700;
    cursor: pointer;
    font-size: 15px;
    transition: background .25s ease;
    margin-top: 8px;
}
.itp-hs1-form-body input[type="submit"]:hover,
.itp-hs1-form-body button[type="submit"]:hover { background: #7E1D24; }

/* Bottom service cards */
.itp-hs1-cards-wrap {
    position: relative;
    z-index: 3;
    margin: 0 60px;
    padding-bottom: 30px;
}
.itp-hs1-cards {
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 8px;
    padding: 12px;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}
.itp-hs1-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 22px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 6px;
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    text-align: left;
    line-height: 1.3;
}
.itp-hs1-card:hover {
    background: #ffffff;
    color: #A23037;
    transform: translateY(-2px);
}
.itp-hs1-card-icon {
    font-size: 18px;
    display: inline-flex;
    flex-shrink: 0;
}
.itp-hs1-card-icon svg { width: 1em; height: 1em; }

/* Responsive — Hero Style 1 */
@media (max-width: 991px) {
    .itp-hs1-inner { padding: 60px 30px 90px 30px; }
    .itp-hs1-grid { flex-direction: column !important; gap: 40px; align-items: stretch; }
    .itp-hs1-heading { font-size: 38px; }
    .itp-hs1-form { width: 100%; }
    .itp-hs1-cards-wrap { margin: 0 30px; }
    .itp-hs1-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .itp-hs1-wrapper { min-height: auto !important; }
    .itp-hs1-inner { padding: 40px 20px 80px 20px; }
    .itp-hs1-heading { font-size: 28px; }
    .itp-hs1-subtitle { font-size: 15px; }
    .itp-hs1-badge { width: 60px; height: 60px; }
    .itp-hs1-cards-wrap { margin: 0 20px; }
    .itp-hs1-cards { grid-template-columns: 1fr; }
    .itp-hs1-card { font-size: 13px; padding: 14px 18px; }
}

/* ============================================
   ProV10.13 — HERO STYLE 2 widget (itp-hero-style-2)
   CSS prefix: .itp-hs2-*  — fully scoped.
   ============================================ */
.itp-hs2-wrapper {
    position: relative;
    width: 100%;
    min-height: 640px;
    overflow: hidden;
    color: #fff;
    box-sizing: border-box;
}
.itp-hs2-bg { position: absolute; inset: 0; z-index: 0; }
.itp-hs2-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}
.itp-hs2-slide.itp-active { opacity: 1; }
.itp-hs2-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    z-index: 1;
}
.itp-hs2-inner {
    position: relative;
    z-index: 2;
    padding: 80px 60px;
    min-height: inherit;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.itp-hs2-grid-row {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
}
.itp-hs2-content { flex: 1; min-width: 0; }
.itp-hs2-heading {
    margin: 0 0 20px 0;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffffff;
}
.itp-hs2-rating {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}
.itp-hs2-stars {
    color: #F5B100;
    font-size: 18px;
    letter-spacing: 2px;
    line-height: 1;
}
.itp-hs2-rating-label { color: #ffffff; font-size: 15px; }
.itp-hs2-desc {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 32px 0;
    max-width: 560px;
}
.itp-hs2-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #2563EB;
    color: #ffffff;
    padding: 18px 36px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    font-size: 15px;
    letter-spacing: 0.5px;
    transition: background .25s ease, transform .25s ease;
}
.itp-hs2-cta:hover { background: #1D4ED8; color: #ffffff; transform: translateY(-2px); }
.itp-hs2-cta-icon { display: inline-flex; }

/* Right grid */
.itp-hs2-grid {
    flex: 0 0 auto;
    width: 52%;
    max-width: 700px;
}
.itp-hs2-grid-heading {
    color: #ffffff;
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 18px 0;
    text-align: center;
}
.itp-hs2-grid-cards {
    display: grid;
    grid-template-columns: repeat(var(--itp-hs2-cols, 3), 1fr);
    gap: 12px;
}
.itp-hs2-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px 16px;
    background: rgba(15,30,60,0.55);
    color: #ffffff;
    text-decoration: none;
    border-radius: 6px;
    transition: background .25s ease, transform .25s ease;
    text-align: center;
    gap: 10px;
    min-height: 110px;
    box-sizing: border-box;
}
.itp-hs2-card:hover { background: #2563EB; color: #ffffff; transform: translateY(-2px); }
.itp-hs2-card-icon {
    color: #ffffff;
    font-size: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.itp-hs2-card-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-hs2-card-label {
    color: inherit;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
}

/* Responsive — Hero Style 2 */
@media (max-width: 991px) {
    .itp-hs2-inner { padding: 60px 30px; }
    .itp-hs2-grid-row { flex-direction: column !important; gap: 40px; align-items: stretch; }
    .itp-hs2-heading { font-size: 32px; }
    .itp-hs2-grid { width: 100% !important; max-width: 100% !important; }
    .itp-hs2-grid-cards { grid-template-columns: repeat(var(--itp-hs2-cols-tab, 3), 1fr); }
}
@media (max-width: 600px) {
    .itp-hs2-wrapper { min-height: auto !important; }
    .itp-hs2-inner { padding: 40px 20px; }
    .itp-hs2-heading { font-size: 24px; }
    .itp-hs2-desc { font-size: 15px; }
    .itp-hs2-grid-cards { grid-template-columns: repeat(var(--itp-hs2-cols-mob, 2), 1fr); }
    .itp-hs2-card { min-height: 90px; padding: 18px 10px; }
    .itp-hs2-card-icon { font-size: 28px; }
    .itp-hs2-card-label { font-size: 12px; }
}

/* ============================================
   ProV10.14 — CLIENTS SHOWCASE 1 widget (itp-clients-showcase-1)
   CSS prefix: .itp-cs1-*  — fully scoped, no leaks.
   ============================================ */
.itp-cs1-wrapper {
    width: 100%;
    background: #ffffff;
    padding: 60px 40px;
    box-sizing: border-box;
}
.itp-cs1-row {
    display: flex;
    align-items: center;
    gap: 60px;
    width: 100%;
}
.itp-cs1-left {
    flex: 0 0 40%;
    max-width: 40%;
    position: relative;
}
.itp-cs1-right {
    flex: 1;
    min-width: 0;
}

/* Number wrap — holds the pattern + big number text */
.itp-cs1-number-wrap {
    position: relative;
    display: inline-block;
    line-height: 1;
}
.itp-cs1-pattern {
    position: absolute;
    inset: -8% -8% -8% -8%;
    background-image: var(--itp-cs1-pattern-img, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.4;
    z-index: 0;
    pointer-events: none;
}

/* Big number — image fills the inside of characters via background-clip */
.itp-cs1-number {
    position: relative;
    z-index: 1;
    display: inline-block;
    font-size: 280px;
    font-weight: 900;
    line-height: 1;
    color: #0E4279;
    letter-spacing: -2px;
}
.itp-cs1-has-img .itp-cs1-number {
    background-image: var(--itp-cs1-num-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
            background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
/* Fallback: browsers without background-clip:text get the color */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
    .itp-cs1-has-img .itp-cs1-number {
        color: #0E4279;
        background: none;
        -webkit-text-fill-color: initial;
    }
}

.itp-cs1-heading {
    color: #0F2C25;
    font-size: 32px;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
}

/* Carousel wrap */
.itp-cs1-carousel-wrap {
    position: relative;
    width: 100%;
}
.itp-cs1-swiper {
    overflow: hidden;
    width: 100%;
}
.itp-cs1-slide {
    height: auto;
    display: flex;
    align-items: stretch;
    justify-content: stretch;
}
.itp-cs1-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 90px;
    padding: 10px 16px;
    border-radius: 4px;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.itp-cs1-logo-link { cursor: pointer; }
.itp-cs1-logo-img {
    display: block;
    max-width: 100%;
    max-height: 70px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Nav arrows */
.itp-cs1-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #101E41;
    color: #ffffff;
    border: 0;
    cursor: pointer;
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background .25s ease;
    padding: 0;
}
.itp-cs1-arrow:hover { background: #00407C; }
.itp-cs1-arrow:focus-visible { outline: 2px solid #00407C; outline-offset: 3px; }
.itp-cs1-arrow svg { stroke: #ffffff; }
.itp-cs1-arrow-prev { left: -50px; }
.itp-cs1-arrow-next { right: -50px; }
.itp-cs1-arrow.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* Responsive */
@media (max-width: 991px) {
    .itp-cs1-wrapper { padding: 50px 30px; }
    .itp-cs1-row {
        flex-direction: column !important;
        gap: 40px;
        align-items: center;
        text-align: center;
    }
    .itp-cs1-left {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
    .itp-cs1-number { font-size: 200px; }
    .itp-cs1-heading { font-size: 26px; }
    .itp-cs1-arrow-prev { left: 4px; }
    .itp-cs1-arrow-next { right: 4px; }
}
@media (max-width: 600px) {
    .itp-cs1-wrapper { padding: 40px 20px; }
    .itp-cs1-number { font-size: 140px; }
    .itp-cs1-heading { font-size: 22px; }
    .itp-cs1-logo { min-height: 70px; padding: 8px 12px; }
    .itp-cs1-logo-img { max-height: 55px; }
}

/* ============================================
   ProV10.15 — HERO STYLE POINTER widget (itp-hero-style-pointer)
   CSS prefix: .itp-hsp-*  — fully scoped, no leaks.
   ============================================ */
.itp-hsp-wrapper {
    position: relative;
    width: 100%;
    min-height: 720px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    box-sizing: border-box;
}
.itp-hsp-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0);
    z-index: 1;
    pointer-events: none;
}
.itp-hsp-inner {
    position: relative;
    z-index: 2;
    min-height: inherit;
    padding: 60px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}
.itp-hsp-content {
    position: relative;
    z-index: 3;
    max-width: 620px;
}

/* Badge */
.itp-hsp-badge {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 32px;
    font-size: 14px;
    flex-wrap: wrap;
}
.itp-hsp-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: #A9C5A0;
    color: #0F2C25;
    border-radius: 24px;
    font-weight: 600;
    font-size: 14px;
}
.itp-hsp-pill-icon {
    display: inline-flex;
    align-items: center;
    color: #0F2C25;
    font-size: 13px;
}
.itp-hsp-pill-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-hsp-badge-after {
    color: #0F2C25;
    font-weight: 500;
}

/* Heading + Description */
.itp-hsp-heading {
    margin: 0 0 24px 0;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.1;
    color: #0F2C25;
}
.itp-hsp-desc {
    margin: 0 0 36px 0;
    color: #0F2C25;
    font-size: 17px;
    line-height: 1.65;
    max-width: 540px;
}

/* CTAs */
.itp-hsp-cta-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}
.itp-hsp-cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 18px 36px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 600;
    font-size: 15px;
    line-height: 1.2;
    transition: background .25s ease, color .25s ease, transform .25s ease;
    cursor: pointer;
}
.itp-hsp-cta-primary {
    background: #1A4F60;
    color: #ffffff;
    border: 0;
}
.itp-hsp-cta-primary:hover {
    background: #103848;
    color: #ffffff;
    transform: translateY(-2px);
}
.itp-hsp-cta-secondary {
    background: rgba(0,0,0,0);
    color: #0F2C25;
    border: 0;
}
.itp-hsp-cta-secondary:hover {
    color: #1A4F60;
}
.itp-hsp-cta-secondary svg { transition: transform .25s ease; }
.itp-hsp-cta-secondary:hover svg { transform: translateX(3px); }

/* Pointers layer */
.itp-hsp-pointers {
    position: absolute;
    inset: 0;
    z-index: 4;
    pointer-events: none;
}
.itp-hsp-pointer {
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: auto;
    cursor: pointer;
}
.itp-hsp-pointer:focus { outline: none; }
.itp-hsp-pointer:focus-visible .itp-hsp-pointer-dot {
    outline: 2px solid #00407C;
    outline-offset: 4px;
}

/* The dot itself */
.itp-hsp-pointer-dot {
    --itp-hsp-dot: #1A4F60;
    display: block;
    width: 14px;
    height: 14px;
    background: var(--itp-hsp-dot);
    border: 3px solid #ffffff;
    border-radius: 50%;
    box-sizing: content-box;
    position: relative;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/* Pulse / blink animation (CSS variable for color, controllable via JS or controls) */
@keyframes itp-hsp-pulse-ring {
    0%   { box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 0 var(--itp-hsp-dot, #1A4F60); }
    70%  { box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 18px rgba(26,79,96,0); }
    100% { box-shadow: 0 2px 6px rgba(0,0,0,0.2), 0 0 0 0 rgba(26,79,96,0); }
}
.itp-hsp-pulse-on .itp-hsp-pointer-dot {
    animation: itp-hsp-pulse-ring 2s infinite;
}

/* Tooltip card — default state hidden */
.itp-hsp-tooltip {
    position: absolute;
    width: 200px;
    background: #ffffff;
    color: #0F2C25;
    padding: 14px 16px;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
    font-size: 13px;
    line-height: 1.5;
    text-decoration: none;
    opacity: 0;
    visibility: hidden;
    transform: translate(-50%, 0) scale(0.96);
    transform-origin: center;
    transition: opacity .2s ease, transform .2s ease, visibility .2s;
    pointer-events: none;
    z-index: 5;
}
a.itp-hsp-tooltip { color: #0F2C25; text-decoration: none; }
a.itp-hsp-tooltip:hover { text-decoration: none; }

/* Tooltip position variants — relative to the pointer center */
.itp-hsp-tip-top {
    bottom: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, 4px) scale(0.96);
}
.itp-hsp-tip-bottom {
    top: calc(100% + 14px);
    left: 50%;
    transform: translate(-50%, -4px) scale(0.96);
}
.itp-hsp-tip-right {
    left: calc(100% + 14px);
    top: 50%;
    transform: translate(-4px, -50%) scale(0.96);
}
.itp-hsp-tip-left {
    right: calc(100% + 14px);
    top: 50%;
    transform: translate(4px, -50%) scale(0.96);
}

/* Show tooltip on hover (desktop) — only when trigger=hover */
.itp-hsp-trigger-hover .itp-hsp-pointer:hover .itp-hsp-tooltip,
.itp-hsp-trigger-hover .itp-hsp-pointer:focus-within .itp-hsp-tooltip,
.itp-hsp-trigger-hover .itp-hsp-pointer.itp-hsp-tapped .itp-hsp-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.itp-hsp-trigger-hover .itp-hsp-pointer:hover .itp-hsp-tip-top,
.itp-hsp-trigger-hover .itp-hsp-pointer:focus-within .itp-hsp-tip-top,
.itp-hsp-trigger-hover .itp-hsp-pointer.itp-hsp-tapped .itp-hsp-tip-top { transform: translate(-50%, 0) scale(1); }
.itp-hsp-trigger-hover .itp-hsp-pointer:hover .itp-hsp-tip-bottom,
.itp-hsp-trigger-hover .itp-hsp-pointer:focus-within .itp-hsp-tip-bottom,
.itp-hsp-trigger-hover .itp-hsp-pointer.itp-hsp-tapped .itp-hsp-tip-bottom { transform: translate(-50%, 0) scale(1); }
.itp-hsp-trigger-hover .itp-hsp-pointer:hover .itp-hsp-tip-right,
.itp-hsp-trigger-hover .itp-hsp-pointer:focus-within .itp-hsp-tip-right,
.itp-hsp-trigger-hover .itp-hsp-pointer.itp-hsp-tapped .itp-hsp-tip-right { transform: translate(0, -50%) scale(1); }
.itp-hsp-trigger-hover .itp-hsp-pointer:hover .itp-hsp-tip-left,
.itp-hsp-trigger-hover .itp-hsp-pointer:focus-within .itp-hsp-tip-left,
.itp-hsp-trigger-hover .itp-hsp-pointer.itp-hsp-tapped .itp-hsp-tip-left { transform: translate(0, -50%) scale(1); }

/* Always-visible mode */
.itp-hsp-trigger-always .itp-hsp-tooltip {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}
.itp-hsp-trigger-always .itp-hsp-tip-top    { transform: translate(-50%, 0) scale(1); }
.itp-hsp-trigger-always .itp-hsp-tip-bottom { transform: translate(-50%, 0) scale(1); }
.itp-hsp-trigger-always .itp-hsp-tip-right  { transform: translate(0, -50%) scale(1); }
.itp-hsp-trigger-always .itp-hsp-tip-left   { transform: translate(0, -50%) scale(1); }

/* Responsive */
@media (max-width: 991px) {
    .itp-hsp-inner { padding: 40px 30px; }
    .itp-hsp-heading { font-size: 38px; }
    .itp-hsp-desc { font-size: 16px; }
    .itp-hsp-tooltip { width: 170px; padding: 12px 14px; }
}
@media (max-width: 600px) {
    .itp-hsp-wrapper { min-height: auto !important; }
    .itp-hsp-inner { padding: 36px 20px; }
    .itp-hsp-heading { font-size: 28px; }
    .itp-hsp-desc { font-size: 15px; }
    .itp-hsp-cta { padding: 14px 24px !important; flex: 1 1 auto; justify-content: center; }
    .itp-hsp-tooltip { width: 150px; padding: 10px 12px; font-size: 12px; }
    /* Flip tooltip side automatically on small screens to keep it visible */
    .itp-hsp-pointer { z-index: 5; }
}

/* ============================================
   ProV10.16 — CLIENTS SHOWCASE 1: bottom full-width carousel
   ============================================ */
.itp-cs1-bottom {
    width: 100%;
    padding: 40px;
    box-sizing: border-box;
    background: transparent;
}
.itp-cs1-bottom-with-divider {
    border-top: 1px solid #E5E7EB;
}
.itp-cs1-bottom-swiper {
    overflow: hidden;
    width: 100%;
}
.itp-cs1-bottom-slide {
    height: auto;
    display: flex;
}
.itp-cs1-bottom-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 80px;
    padding: 10px 16px;
    border-radius: 0;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}
.itp-cs1-bottom-logo-link { cursor: pointer; }
.itp-cs1-bottom-logo-img {
    display: block;
    max-width: 100%;
    max-height: 60px;
    width: auto;
    height: auto;
    object-fit: contain;
}

/* Continuous marquee mode — linear timing */
.itp-cs1-bottom-marquee .swiper-wrapper {
    transition-timing-function: linear !important;
}

/* Responsive */
@media (max-width: 991px) {
    .itp-cs1-bottom { padding: 30px 20px; }
    .itp-cs1-bottom-logo { min-height: 70px; padding: 8px 12px; }
    .itp-cs1-bottom-logo-img { max-height: 50px; }
}
@media (max-width: 600px) {
    .itp-cs1-bottom { padding: 24px 16px; }
    .itp-cs1-bottom-logo { min-height: 60px; padding: 6px 10px; }
    .itp-cs1-bottom-logo-img { max-height: 45px; }
}

/* ============================================
   ProV10.17 — TESTIMONIAL BLOCK (itp-tst-*)
   ============================================ */
.itp-tst-wrapper {
    position: relative;
    width: 100%;
    background: #0E2C3D;
    padding: 80px 40px;
    box-sizing: border-box;
}
.itp-tst-head {
    text-align: center;
    margin-bottom: 56px;
}
.itp-tst-heading {
    margin: 0 auto 16px auto;
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 800px;
}
.itp-tst-subtitle {
    margin: 0 auto;
    color: #9CA9B3;
    font-size: 15px;
    line-height: 1.6;
    max-width: 700px;
}
.itp-tst-carousel-wrap {
    position: relative;
    width: 100%;
}
.itp-tst-swiper {
    overflow: visible; /* allow center card to look bigger than container edges */
    padding-bottom: 0;
}
.itp-tst-slide {
    height: auto;
    display: flex;
}
.itp-tst-card {
    background: #143E55;
    border-radius: 14px;
    padding: 36px 32px;
    width: 100%;
    min-height: 380px;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    transition: opacity .4s ease;
    box-sizing: border-box;
}

/* Fade non-active slides when fade_inactive is on */
.itp-tst-fade .itp-tst-slide .itp-tst-card { opacity: 0.45; }
.itp-tst-fade .itp-tst-slide.swiper-slide-active .itp-tst-card { opacity: 1; }

/* Stars */
.itp-tst-stars {
    display: flex;
    gap: 4px;
    font-size: 18px;
    line-height: 1;
    margin-bottom: 16px;
}
.itp-tst-stars .itp-tst-star-on  { color: #F5B100; }
.itp-tst-stars .itp-tst-star-off { color: #3A5567; }

/* Quote */
.itp-tst-quote {
    color: #ffffff;
    font-size: 17px;
    line-height: 1.6;
    margin: 0 0 28px 0;
    flex: 1;
}
.itp-tst-quote p { margin: 0 0 8px 0; }
.itp-tst-quote p:last-child { margin: 0; }

/* Author block */
.itp-tst-author {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
}
.itp-tst-photo {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: #1F4E66;
}
.itp-tst-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.itp-tst-author-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.itp-tst-name {
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
}
.itp-tst-role {
    color: #9CA9B3;
    font-size: 13px;
    line-height: 1.3;
}

/* Pagination dots */
.itp-tst-pagination {
    position: relative;
    margin-top: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.itp-tst-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #2D5163;
    opacity: 1;
    border-radius: 50%;
    transition: background .3s ease, transform .3s ease;
    margin: 0 4px;
}
.itp-tst-pagination .swiper-pagination-bullet-active {
    background: #1A8FA8;
    transform: scale(1.25);
}

/* Nav arrows */
.itp-tst-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #143E55;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .25s ease, transform .25s ease;
}
.itp-tst-arrow:hover {
    background: #1A8FA8;
    transform: translateY(-50%) scale(1.05);
}
.itp-tst-arrow svg { stroke: #ffffff; }
.itp-tst-arrow-prev { left: -8px; }
.itp-tst-arrow-next { right: -8px; }
.itp-tst-arrow.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; }

/* Responsive */
@media (max-width: 991px) {
    .itp-tst-wrapper { padding: 60px 24px; }
    .itp-tst-heading { font-size: 32px; }
    .itp-tst-card { padding: 28px 24px; min-height: 320px; }
    .itp-tst-arrow-prev { left: 0; }
    .itp-tst-arrow-next { right: 0; }
}
@media (max-width: 600px) {
    .itp-tst-wrapper { padding: 48px 16px; }
    .itp-tst-head { margin-bottom: 36px; }
    .itp-tst-heading { font-size: 26px; }
    .itp-tst-subtitle { font-size: 14px; }
    .itp-tst-card { padding: 24px 20px; min-height: 280px; }
    .itp-tst-quote { font-size: 15px; }
    .itp-tst-arrow { width: 38px; height: 38px; }
}

/* ============================================
   ProV10.17 — CTA BLOCK (itp-ctb-*)
   ============================================ */
.itp-ctb-wrapper {
    width: 100%;
    background: #0E2C3D;
    padding: 80px 60px;
    box-sizing: border-box;
}
.itp-ctb-row {
    display: flex;
    align-items: center;
    gap: 60px;
    max-width: 1280px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.itp-ctb-img-right .itp-ctb-row { flex-direction: row-reverse; }

.itp-ctb-image-col {
    flex: 0 0 48%;
    max-width: 48%;
}
.itp-ctb-content-col {
    flex: 1;
    min-width: 0;
}
.itp-ctb-image {
    display: block;
    width: 100%;
    height: 480px;
    object-fit: cover;
    border-radius: 16px;
}

/* Heading + description */
.itp-ctb-heading {
    margin: 0 0 20px 0;
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
}
.itp-ctb-desc {
    margin: 0 0 32px 0;
    color: #9CA9B3;
    font-size: 16px;
    line-height: 1.6;
}

/* Form auto-styling — fits any shortcode (CF7, WPForms, Elementor, etc.) */
.itp-ctb-form { width: 100%; }
.itp-ctb-form form { width: 100%; }
.itp-ctb-form p { margin: 0 0 14px 0; }
.itp-ctb-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.itp-ctb-form select,
.itp-ctb-form textarea {
    width: 100%;
    background: #ffffff;
    color: #0E2C3D;
    border: 0;
    padding: 16px 20px;
    border-radius: 8px;
    font-size: 15px;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    transition: box-shadow .25s ease;
    -webkit-appearance: none;
    appearance: none;
}
.itp-ctb-form select {
    /* Custom dropdown arrow */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230E2C3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 20px;
    padding-right: 48px;
}
.itp-ctb-form input::placeholder,
.itp-ctb-form textarea::placeholder { color: #9AA5B0; opacity: 1; }
.itp-ctb-form input:focus,
.itp-ctb-form select:focus,
.itp-ctb-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(26,143,168,0.25);
}

/* Submit button */
.itp-ctb-form input[type="submit"],
.itp-ctb-form button[type="submit"] {
    width: 100%;
    background: #1A8FA8;
    color: #ffffff;
    border: 0;
    padding: 18px 32px;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.itp-ctb-form input[type="submit"]:hover,
.itp-ctb-form button[type="submit"]:hover {
    background: #157287;
    transform: translateY(-1px);
}

/* CF7 helpers — turn first two text fields into a 2-column row when wrapped in .itp-ctb-row-2 */
.itp-ctb-form .itp-ctb-row-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* Disclaimer */
.itp-ctb-disclaimer {
    margin: 18px 0 0 0;
    color: #7E8B95;
    font-size: 13px;
    line-height: 1.5;
}

/* Responsive */
@media (max-width: 991px) {
    .itp-ctb-wrapper { padding: 60px 30px; }
    .itp-ctb-row { gap: 40px; }
    .itp-ctb-heading { font-size: 34px; }
    .itp-ctb-image { height: 380px; }
}
@media (max-width: 768px) {
    .itp-ctb-wrapper { padding: 48px 20px; }
    .itp-ctb-image-col,
    .itp-ctb-content-col { flex: 0 0 100%; max-width: 100%; }
    .itp-ctb-row { gap: 32px; }
    .itp-ctb-img-right .itp-ctb-row { flex-direction: column; }
    .itp-ctb-image { height: 280px; }
    .itp-ctb-heading { font-size: 28px; }
    .itp-ctb-form .itp-ctb-row-2 { grid-template-columns: 1fr; }
}

/* ============================================
   ProV10.19 — HERO STYLE SERVICE widget (itp-hero-style-service)
   CSS prefix: .itp-hss-*  — fully scoped, no leaks.
   ============================================ */
.itp-hss-wrapper {
    position: relative;
    width: 100%;
    min-height: 600px;
    overflow: hidden;
    box-sizing: border-box;
}

/* Background layer (slideshow or single image) */
.itp-hss-bg {
    position: absolute;
    inset: 0;
    z-index: 1;
}
.itp-hss-bg-image {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.itp-hss-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}
.itp-hss-slide.itp-active { opacity: 1; }

/* Overlay */
.itp-hss-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: rgba(0,0,0,0.4);
    pointer-events: none;
}

/* Inner layout */
.itp-hss-inner {
    position: relative;
    z-index: 3;
    min-height: inherit;
    display: flex;
    align-items: stretch;
    padding: 60px 60px 0;
    gap: 40px;
    box-sizing: border-box;
}
.itp-hss-form-left .itp-hss-inner { flex-direction: row-reverse; }

/* Left content column */
.itp-hss-content {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding-bottom: 0;
}
/* The text zone grows to fill the column, so its own justify-content
   positions the eyebrow + headline (top / middle / bottom) while the
   breadcrumb stays pinned to the bottom edge of the hero. */
.itp-hss-text {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding-top: 40px;
}
.itp-hss-eyebrow {
    color: #1A8FA8;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.itp-hss-heading {
    margin: 0;
    color: #ffffff;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    max-width: 700px;
}

/* Breadcrumb card — sits at bottom-left of hero */
.itp-hss-breadcrumb {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 18px;
    background: #ffffff;
    padding: 14px 28px 14px 14px;
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    box-shadow: 0 -6px 20px rgba(0,0,0,0.08);
    margin-top: auto;
    box-sizing: border-box;
    max-width: 100%;
    flex-wrap: wrap;
}

/* Icon box (home icon) */
.itp-hss-bc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: #1A8FA8;
    color: #ffffff;
    border-radius: 8px;
    text-decoration: none;
    flex-shrink: 0;
    transition: background .25s ease;
}
.itp-hss-bc-icon:hover { background: #147387; }
.itp-hss-bc-icon i { font-size: 18px; }
.itp-hss-bc-icon svg { width: 1.1em; height: 1.1em; fill: currentColor; }

/* Trail */
.itp-hss-bc-trail {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.itp-hss-bc-link {
    color: #0B2C42;
    text-decoration: none;
    transition: color .2s ease;
}
.itp-hss-bc-link:hover { color: #1A8FA8; }
.itp-hss-bc-current { color: #0B2C42; }
.itp-hss-bc-sep {
    color: #1A8FA8;
    font-weight: 700;
}

/* Form panel — same structure as Hero Style 1 */
.itp-hss-form-col {
    flex: 0 0 auto;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 40px;
}
.itp-hss-form {
    width: 420px;
    max-width: 100%;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: 36px 32px;
    border-radius: 8px;
    box-sizing: border-box;
}
.itp-hss-form-heading {
    margin: 0 0 22px 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
}
.itp-hss-form-body { width: 100%; }
.itp-hss-form-body p { margin: 0 0 12px 0; }
.itp-hss-form-body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.itp-hss-form-body select,
.itp-hss-form-body textarea {
    width: 100%;
    background: #ffffff;
    color: #1F2937;
    border: 0;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .25s ease;
}
.itp-hss-form-body select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 44px;
}
.itp-hss-form-body textarea { min-height: 100px; resize: vertical; }
.itp-hss-form-body label { color: #ffffff; font-weight: 600; font-size: 14px; }
.itp-hss-form-body input::placeholder,
.itp-hss-form-body textarea::placeholder { color: #9CA3AF; opacity: 1; }
.itp-hss-form-body input:focus,
.itp-hss-form-body select:focus,
.itp-hss-form-body textarea:focus { box-shadow: 0 0 0 3px rgba(26,143,168,0.25); }

.itp-hss-form-body input[type="submit"],
.itp-hss-form-body button[type="submit"] {
    width: 100%;
    background: #1A8FA8;
    color: #ffffff;
    border: 0;
    padding: 16px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background .25s ease, transform .25s ease;
}
.itp-hss-form-body input[type="submit"]:hover,
.itp-hss-form-body button[type="submit"]:hover {
    background: #147387;
    transform: translateY(-1px);
}

/* No-form layout — content takes full width */
.itp-hss-no-form .itp-hss-content { width: 100%; }

/* Responsive */
@media (max-width: 991px) {
    /* Content-driven height on mobile - a forced min-height plus margin-top:auto
       on the breadcrumb was pushing it up into the headline and overlapping. */
    .itp-hss-inner { padding: 40px 24px; gap: 24px; flex-direction: column; }
    .itp-hss-form-left .itp-hss-inner { flex-direction: column; }
    .itp-hss-content { width: 100%; }
    .itp-hss-text {
        flex: 0 0 auto;
        padding-top: 0;
        width: 100%;
    }
    .itp-hss-heading { font-size: 34px; }
    /* Breadcrumb flows directly under the headline instead of being pinned to
       the bottom of a stretched column. */
    .itp-hss-breadcrumb {
        margin-top: 22px;
        align-self: flex-start;
        border-radius: 12px;
    }
    .itp-hss-form-col { width: 100%; justify-content: stretch; padding-top: 4px; align-items: stretch; }
    .itp-hss-form { width: 100%; }
    .itp-hss-bc-icon { width: 40px; height: 40px; }
    .itp-hss-bc-trail { font-size: 12px; gap: 8px; }
}
@media (max-width: 600px) {
    .itp-hss-inner { padding: 30px 18px; gap: 20px; }
    .itp-hss-heading { font-size: 26px; }
    .itp-hss-eyebrow { font-size: 12px; letter-spacing: 1px; }
    .itp-hss-breadcrumb { margin-top: 18px; padding: 10px 18px 10px 10px; gap: 12px; }
    .itp-hss-form { padding: 24px 20px; }
    .itp-hss-form-heading { font-size: 20px; }
    .itp-hss-bc-trail { font-size: 11px; }
}

/* ============================================
   ProV10.21 — FORM PANEL widget (itp-fp-*)
   Standalone styled form container. Works in popups, sections, anywhere.
   ============================================ */
.itp-fp-wrapper { width: 100%; }
.itp-fp-panel {
    width: 100%;
    max-width: 480px;
    background: rgba(255,255,255,0.10);
    padding: 36px 32px;
    border-radius: 8px;
    box-sizing: border-box;
    margin-left: auto;
    margin-right: auto;
}
.itp-fp-heading-block { margin-bottom: 22px; }
.itp-fp-heading {
    margin: 0 0 8px 0;
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.3;
    text-align: left;
}
.itp-fp-subheading {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 14px;
    line-height: 1.5;
    text-align: left;
}
.itp-fp-form { width: 100%; }
.itp-fp-form p { margin: 0 0 12px 0; }
.itp-fp-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
.itp-fp-form select,
.itp-fp-form textarea {
    width: 100%;
    background: #ffffff;
    color: #1F2937;
    border: 0;
    padding: 14px 16px;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.4;
    box-sizing: border-box;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow .25s ease;
}
.itp-fp-form select {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2937' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 44px;
}
.itp-fp-form textarea { min-height: 100px; resize: vertical; }
.itp-fp-form label { color: #ffffff; font-weight: 600; font-size: 14px; display: block; margin-bottom: 6px; }
.itp-fp-form input::placeholder,
.itp-fp-form textarea::placeholder { color: #9CA3AF; opacity: 1; }
.itp-fp-form input:focus,
.itp-fp-form select:focus,
.itp-fp-form textarea:focus { box-shadow: 0 0 0 3px rgba(26,143,168,0.25); }

.itp-fp-form input[type="submit"],
.itp-fp-form button[type="submit"] {
    width: 100%;
    background: #A23037;
    color: #ffffff;
    border: 0;
    padding: 16px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 8px;
    transition: background .25s ease, transform .25s ease;
}
.itp-fp-form input[type="submit"]:hover,
.itp-fp-form button[type="submit"]:hover {
    background: #7E1D24;
    transform: translateY(-1px);
}

/* Popup context safety — ensure the widget sits well inside Elementor popups */
.elementor-popup-modal .itp-fp-panel { max-width: 100%; }

/* Responsive */
@media (max-width: 600px) {
    .itp-fp-panel { padding: 24px 20px; }
    .itp-fp-heading { font-size: 20px; }
}

/* ============================================
   ProV10.22 — TEAM CAROUSEL widget (itp-team-*)
   ============================================ */
.itp-team-wrapper {
    position: relative;
    width: 100%;
    background: #ffffff;
    padding: 60px 40px;
    box-sizing: border-box;
}
.itp-team-head { text-align: center; margin-bottom: 48px; }
.itp-team-eyebrow {
    color: #1A8FA8;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.itp-team-heading {
    margin: 0 0 12px 0;
    color: #0E2C3D;
    font-size: 40px;
    font-weight: 700;
    line-height: 1.2;
}
.itp-team-subtitle {
    margin: 0 auto;
    color: #6B7280;
    font-size: 15px;
    line-height: 1.6;
    max-width: 700px;
}

/* Carousel */
.itp-team-carousel-wrap {
    position: relative;
    width: 100%;
}
.itp-team-swiper {
    overflow: hidden;
    padding: 4px; /* room for hover-lift shadow */
    margin: -4px;
}
.itp-team-slide {
    height: auto;
    display: flex;
}

/* Card */
.itp-team-card {
    background: #ffffff;
    border: 1px solid #E5E7EB;
    border-radius: 16px;
    padding: 16px 16px 24px;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    transition: transform .3s ease, box-shadow .3s ease;
}
.itp-team-card-link { cursor: pointer; }
.itp-team-hover-lift .itp-team-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

/* Photo */
.itp-team-photo {
    width: 100%;
    aspect-ratio: 1 / 1.15;
    overflow: hidden;
    border-radius: 10px;
    margin-bottom: 20px;
    background: #F3F4F6;
    display: block;
}
.itp-team-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 10px;
    transition: transform .5s ease;
}
.itp-team-card:hover .itp-team-photo img { transform: scale(1.03); }

/* Info */
.itp-team-info { text-align: center; }
.itp-team-name {
    color: #0E2C3D;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 6px;
}
.itp-team-role {
    color: #6B7280;
    font-size: 14px;
    line-height: 1.4;
}

/* Accent bar */
.itp-team-bar {
    display: block;
    width: 60px;
    height: 3px;
    background: #0E2C3D;
    border-radius: 2px;
    margin: 16px auto 0;
}
.itp-team-info[style*="text-align: left"] .itp-team-bar,
.itp-team-info[style*="text-align:left"] .itp-team-bar { margin-left: 0; margin-right: auto; }
.itp-team-info[style*="text-align: right"] .itp-team-bar,
.itp-team-info[style*="text-align:right"] .itp-team-bar { margin-left: auto; margin-right: 0; }

/* Pagination */
.itp-team-pagination {
    position: relative;
    margin-top: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
.itp-team-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #D1D5DB;
    opacity: 1;
    border-radius: 50%;
    transition: background .3s ease, transform .3s ease;
    margin: 0 4px;
}
.itp-team-pagination .swiper-pagination-bullet-active {
    background: #1A8FA8;
    transform: scale(1.25);
}

/* Nav arrows */
.itp-team-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    background: #0E2C3D;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background .25s ease, transform .25s ease;
}
.itp-team-arrow:hover {
    background: #1A8FA8;
    transform: translateY(-50%) scale(1.05);
}
.itp-team-arrow svg { stroke: #ffffff; }
.itp-team-arrow-prev { left: -12px; }
.itp-team-arrow-next { right: -12px; }
.itp-team-arrow.swiper-button-disabled { opacity: 0.4; cursor: not-allowed; }

/* Responsive */
@media (max-width: 991px) {
    .itp-team-wrapper { padding: 48px 24px; }
    .itp-team-heading { font-size: 32px; }
    .itp-team-name { font-size: 18px; }
    .itp-team-arrow-prev { left: 0; }
    .itp-team-arrow-next { right: 0; }
}
@media (max-width: 600px) {
    .itp-team-wrapper { padding: 40px 16px; }
    .itp-team-head { margin-bottom: 32px; }
    .itp-team-heading { font-size: 26px; }
    .itp-team-subtitle { font-size: 14px; }
    .itp-team-arrow { width: 36px; height: 36px; }
}

/* ============================================================
   ProV10.23 — RESPONSIVE FIXES for all hero widgets + CTA Block + Form Panel
   Fixes: heading overflow, badge stacking, form input truncation,
   two-column layouts not collapsing cleanly on real phone widths.
   Uses !important because Elementor's per-instance inline CSS at
   (0,2,0) specificity otherwise overrides these mobile defaults.
   ============================================================ */

/* ---------- Universal box-sizing safety across our widgets ---------- */
.itp-hs1-wrapper *, .itp-hs2-wrapper *, .itp-hsp-wrapper *,
.itp-hss-wrapper *, .itp-ctb-wrapper *, .itp-fp-wrapper * {
    box-sizing: border-box;
}

/* ============================================================
   TABLET-DOWN: max-width: 991px  (large tablets & smaller)
   Force two-column layouts to collapse to single column and
   shrink oversized display headings. Layer 1 of 3.
   ============================================================ */
@media (max-width: 991px) {
    /* Hero Style 1 */
    .itp-hs1-heading { font-size: 34px !important; line-height: 1.15 !important; }
    .itp-hs1-form-heading { font-size: 22px !important; }
    .itp-hs1-form { width: 100% !important; max-width: 100% !important; }
    .itp-hs1-badges { flex-wrap: wrap !important; gap: 14px !important; justify-content: center !important; }
    .itp-hs1-badge { width: 90px !important; height: 90px !important; }

    /* Hero Style 2 */
    .itp-hs2-heading { font-size: 30px !important; line-height: 1.2 !important; }

    /* Hero Style Pointer */
    .itp-hsp-heading { font-size: 34px !important; line-height: 1.15 !important; }
    .itp-hsp-cta { padding: 14px 24px !important; }

    /* Hero Style Service */
    .itp-hss-heading { font-size: 34px !important; line-height: 1.15 !important; }
    .itp-hss-form { width: 100% !important; max-width: 100% !important; }

    /* CTA Block */
    .itp-ctb-heading { font-size: 30px !important; }

    /* Form Panel */
    .itp-fp-panel { max-width: 100% !important; }
}

/* ============================================================
   PHONE: max-width: 767px  (phones landscape / large phones)
   Layout collapse becomes total. Layer 2 of 3.
   ============================================================ */
@media (max-width: 767px) {
    /* --- Hero Style 1 --- */
    .itp-hs1-wrapper { min-height: auto !important; }
    .itp-hs1-inner { padding: 40px 20px 60px !important; }
    .itp-hs1-grid { flex-direction: column !important; gap: 30px !important; align-items: stretch !important; }
    .itp-hs1-content { width: 100% !important; max-width: 100% !important; }
    .itp-hs1-heading { font-size: 28px !important; }
    .itp-hs1-subtitle { font-size: 15px !important; line-height: 1.5 !important; }
    .itp-hs1-star-rating-row { flex-wrap: wrap; gap: 8px; }
    .itp-hs1-badges { gap: 10px !important; }
    .itp-hs1-badge { width: 78px !important; height: 78px !important; }
    .itp-hs1-form-col { width: 100% !important; }
    .itp-hs1-form { padding: 24px 18px !important; }
    .itp-hs1-form-heading { font-size: 20px !important; margin-bottom: 16px !important; }
    .itp-hs1-form-body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    .itp-hs1-form-body select,
    .itp-hs1-form-body textarea {
        width: 100% !important; max-width: 100% !important;
        padding: 12px 14px !important;
        font-size: 15px !important;
    }
    .itp-hs1-form-body input[type="submit"],
    .itp-hs1-form-body button[type="submit"] {
        padding: 14px 20px !important; font-size: 15px !important;
    }
    .itp-hs1-cards-wrap { margin: 0 !important; }
    .itp-hs1-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .itp-hs1-card { padding: 14px !important; font-size: 13px !important; }

    /* --- Hero Style 2 --- */
    .itp-hs2-wrapper { min-height: auto !important; }
    .itp-hs2-inner { padding: 40px 20px !important; }
    .itp-hs2-grid-row { flex-direction: column !important; gap: 30px !important; }
    .itp-hs2-content { width: 100% !important; max-width: 100% !important; }
    .itp-hs2-heading { font-size: 26px !important; }
    .itp-hs2-desc { font-size: 15px !important; }
    .itp-hs2-cta { padding: 12px 22px !important; font-size: 14px !important; }
    .itp-hs2-grid-cards { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
    .itp-hs2-grid-card { padding: 14px !important; }

    /* --- Hero Style Pointer --- */
    .itp-hsp-wrapper { min-height: auto !important; }
    .itp-hsp-inner { padding: 36px 20px !important; }
    .itp-hsp-content { max-width: 100% !important; }
    .itp-hsp-heading { font-size: 28px !important; }
    .itp-hsp-desc { font-size: 15px !important; }
    .itp-hsp-cta-row { flex-wrap: wrap; gap: 12px; }
    .itp-hsp-cta { padding: 12px 22px !important; flex: 1 1 auto !important; justify-content: center !important; }
    .itp-hsp-tooltip { width: 160px !important; padding: 10px 12px !important; font-size: 12px !important; }

    /* --- Hero Style Service --- */
    .itp-hss-inner { padding: 30px 18px !important; gap: 20px !important; flex-direction: column !important; }
    .itp-hss-form-left .itp-hss-inner { flex-direction: column !important; }
    .itp-hss-content { width: 100% !important; }
    .itp-hss-text { flex: 0 0 auto !important; padding-top: 0 !important; }
    .itp-hss-heading { font-size: 26px !important; }
    .itp-hss-breadcrumb { margin-top: 18px !important; align-self: flex-start !important; border-radius: 12px !important; }
    .itp-hss-form-col { width: 100% !important; justify-content: stretch !important; padding-top: 4px !important; align-items: stretch !important; }
    .itp-hss-form { padding: 24px 18px !important; }
    .itp-hss-form-heading { font-size: 20px !important; }
    .itp-hss-form-body input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    .itp-hss-form-body select,
    .itp-hss-form-body textarea {
        width: 100% !important; max-width: 100% !important;
        padding: 12px 14px !important; font-size: 15px !important;
    }
    .itp-hss-breadcrumb { padding: 10px 16px 10px 10px !important; gap: 10px !important; }
    .itp-hss-bc-icon { width: 38px !important; height: 38px !important; }
    .itp-hss-bc-trail { font-size: 11px !important; gap: 6px !important; }

    /* --- CTA Block --- */
    .itp-ctb-wrapper { padding: 44px 20px !important; }
    .itp-ctb-row { flex-direction: column !important; gap: 28px !important; }
    .itp-ctb-img-right .itp-ctb-row { flex-direction: column !important; }
    .itp-ctb-image-col,
    .itp-ctb-content-col { flex: 0 0 100% !important; max-width: 100% !important; width: 100% !important; }
    .itp-ctb-image { height: 260px !important; }
    .itp-ctb-heading { font-size: 26px !important; }
    .itp-ctb-desc { font-size: 15px !important; }
    .itp-ctb-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    .itp-ctb-form select,
    .itp-ctb-form textarea {
        width: 100% !important; max-width: 100% !important;
        padding: 12px 14px !important; font-size: 15px !important;
    }
    .itp-ctb-form input[type="submit"],
    .itp-ctb-form button[type="submit"] {
        padding: 14px 20px !important; font-size: 15px !important;
    }
    .itp-ctb-form .itp-ctb-row-2 { grid-template-columns: 1fr !important; }

    /* --- Form Panel --- */
    .itp-fp-panel { padding: 24px 18px !important; max-width: 100% !important; }
    .itp-fp-heading { font-size: 20px !important; }
    .itp-fp-form input:not([type="submit"]):not([type="checkbox"]):not([type="radio"]),
    .itp-fp-form select,
    .itp-fp-form textarea {
        width: 100% !important; max-width: 100% !important;
        padding: 12px 14px !important; font-size: 15px !important;
    }
    .itp-fp-form input[type="submit"],
    .itp-fp-form button[type="submit"] {
        padding: 14px 20px !important; font-size: 15px !important;
    }
}

/* ============================================================
   SMALL PHONE: max-width: 480px  (portrait phones, iPhone SE etc)
   Tightest layer — where the screenshots' pain hits hardest.
   Layer 3 of 3.
   ============================================================ */
@media (max-width: 480px) {
    /* Hero Style 1 */
    .itp-hs1-inner { padding: 30px 14px 40px !important; }
    .itp-hs1-heading { font-size: 24px !important; }
    .itp-hs1-badges { gap: 8px !important; }
    .itp-hs1-badge { width: 66px !important; height: 66px !important; }
    .itp-hs1-cards { grid-template-columns: 1fr !important; }
    .itp-hs1-form { padding: 20px 14px !important; }

    /* Hero Style 2 */
    .itp-hs2-inner { padding: 30px 14px !important; }
    .itp-hs2-heading { font-size: 22px !important; }
    .itp-hs2-grid-cards { grid-template-columns: 1fr !important; }

    /* Hero Style Pointer */
    .itp-hsp-inner { padding: 28px 14px !important; }
    .itp-hsp-heading { font-size: 24px !important; }
    .itp-hsp-desc { font-size: 14px !important; }

    /* Hero Style Service */
    .itp-hss-inner { padding: 24px 14px 0 !important; }
    .itp-hss-heading { font-size: 24px !important; }
    .itp-hss-form { padding: 20px 14px !important; }
    .itp-hss-bc-trail { font-size: 10px !important; letter-spacing: 0.3px !important; }
    .itp-hss-bc-icon { width: 34px !important; height: 34px !important; }
    .itp-hss-bc-icon i, .itp-hss-bc-icon svg { font-size: 14px !important; }

    /* CTA Block */
    .itp-ctb-wrapper { padding: 32px 14px !important; }
    .itp-ctb-image { height: 200px !important; }
    .itp-ctb-heading { font-size: 22px !important; }

    /* Form Panel */
    .itp-fp-panel { padding: 20px 14px !important; }
    .itp-fp-heading { font-size: 18px !important; }
}

/* ============================================
   ProV10.24 — SERVICE CARDS ADVANCED (itp-svc-*)
   Header + 3 cards with SVG-clipped photo blobs + offset decoration blob.
   ============================================ */
.itp-svc-wrapper {
    position: relative;
    width: 100%;
    background: #0A0A0A;
    padding: 80px 60px;
    box-sizing: border-box;
    --itp-svc-cols: 3;
    --itp-svc-cols-tab: 2;
    --itp-svc-cols-mob: 1;
    --itp-svc-gap: 20px;
}

/* Header */
.itp-svc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;
    margin-bottom: 60px;
    flex-wrap: wrap;
}
.itp-svc-header-left { flex: 1 1 auto; min-width: 0; }

/* Eyebrow pill */
.itp-svc-eyebrow {
    display: inline-block;
    padding: 8px 22px;
    background: transparent;
    color: #ffffff;
    border: 1px solid #00A8E8;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 28px;
}

/* Heading with two color spans */
.itp-svc-heading {
    margin: 0;
    color: #ffffff;
    font-size: 56px;
    font-weight: 700;
    line-height: 1.15;
    max-width: 1100px;
}
.itp-svc-heading-p1 { color: #ffffff; }
.itp-svc-heading-p2 { color: #00A8E8; }

/* CTA button */
.itp-svc-cta {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 20px 36px;
    background: #00A8E8;
    color: #ffffff;
    border-radius: 40px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
    align-self: center;
}
.itp-svc-cta:hover {
    background: #0086BC;
    color: #ffffff;
    transform: translateY(-2px);
}

/* Grid */
.itp-svc-grid {
    display: grid;
    grid-template-columns: repeat(var(--itp-svc-cols, 3), 1fr);
    gap: var(--itp-svc-gap, 20px);
}

/* Card */
.itp-svc-card {
    position: relative;
    background: #1E4B75;
    border-radius: 20px;
    padding: 32px 32px 36px;
    min-height: 520px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: transform .3s ease, box-shadow .3s ease;
    box-sizing: border-box;
}
.itp-svc-hover-lift .itp-svc-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 44px rgba(0,0,0,0.25);
}

/* Blob wrap (contains deco + photo, both clipped by same SVG) */
.itp-svc-blob-wrap {
    position: relative;
    width: 88%;
    aspect-ratio: 1 / 1;
    margin: 0 auto 32px;
    flex-shrink: 0;
}
.itp-svc-blob-deco,
.itp-svc-blob-photo {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    overflow: hidden;
}
.itp-svc-blob-deco {
    background: #3B6D9E;
    opacity: 0.65;
    transform: translate(var(--itp-svc-deco-x, 20px), var(--itp-svc-deco-y, 20px));
    z-index: 1;
    pointer-events: none;
}
.itp-svc-blob-photo {
    z-index: 2;
    background: #14385A;
}
.itp-svc-blob-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Card foot (title + arrow) */
.itp-svc-card-foot {
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.itp-svc-arrow-top-right .itp-svc-card-arrow {
    position: absolute;
    top: 24px;
    right: 24px;
}
.itp-svc-arrow-top-right .itp-svc-card-foot { justify-content: flex-start; }

.itp-svc-card-title {
    flex: 1 1 auto;
    color: #4FC3F7;
    font-size: 28px;
    font-weight: 600;
    line-height: 1.2;
    min-width: 0;
    word-break: break-word;
}

.itp-svc-card-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #F5F5F5;
    transition: background .25s ease, transform .25s ease;
}
.itp-svc-card-arrow svg {
    stroke: #0A0A0A;
    transition: stroke .25s ease, transform .25s ease;
}
.itp-svc-card:hover .itp-svc-card-arrow {
    background: #00A8E8;
    transform: rotate(45deg);
}
.itp-svc-card:hover .itp-svc-card-arrow svg { stroke: #ffffff; }

/* Responsive */
@media (max-width: 991px) {
    .itp-svc-wrapper { padding: 60px 30px; }
    .itp-svc-grid { grid-template-columns: repeat(var(--itp-svc-cols-tab, 2), 1fr); }
    .itp-svc-heading { font-size: 40px !important; }
    .itp-svc-card { min-height: 440px; padding: 26px 26px 30px; }
    .itp-svc-card-title { font-size: 24px; }
    .itp-svc-card-arrow { width: 46px; height: 46px; }
}
@media (max-width: 767px) {
    .itp-svc-wrapper { padding: 44px 20px !important; }
    .itp-svc-header { flex-direction: column; gap: 24px; margin-bottom: 40px; }
    .itp-svc-heading { font-size: 30px !important; }
    .itp-svc-cta { align-self: flex-start; padding: 14px 24px !important; font-size: 15px; }
    .itp-svc-grid { grid-template-columns: repeat(var(--itp-svc-cols-mob, 1), 1fr) !important; gap: 16px !important; }
    .itp-svc-card { min-height: 400px; padding: 24px 22px 28px !important; }
    .itp-svc-card-title { font-size: 22px !important; }
    .itp-svc-blob-wrap { width: 84%; margin-bottom: 24px; }
}
@media (max-width: 480px) {
    .itp-svc-wrapper { padding: 36px 14px !important; }
    .itp-svc-heading { font-size: 24px !important; }
    .itp-svc-card { min-height: 340px; padding: 20px 18px 24px !important; }
    .itp-svc-card-title { font-size: 20px !important; }
    .itp-svc-card-arrow { width: 42px; height: 42px; }
    .itp-svc-blob-wrap { width: 80%; }
}

/* ============================================
   ProV10.25 — VERTICAL IMAGE POP SERVICE CARDS (itp-vips-*)
   Stacked service rows + CSS-only hover popup image.
   Mobile: popup fully hidden, rows collapse to icon+title / desc / arrow layout.
   ============================================ */
.itp-vips-wrapper {
    position: relative;
    width: 100%;
    background: #0F3838;
    padding: 80px 60px;
    box-sizing: border-box;
    overflow: hidden; /* prevent popup from creating horizontal scroll */
}
.itp-vips-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
}

/* Heading block */
.itp-vips-head { text-align: center; margin-bottom: 60px; }
.itp-vips-eyebrow {
    color: #4ECBA0;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
}
.itp-vips-heading {
    margin: 0 auto;
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.2;
    max-width: 800px;
}

/* List of rows */
.itp-vips-list { position: relative; }

/* Row (link or div) */
.itp-vips-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
    text-decoration: none;
    color: inherit;
    transition: background .3s ease;
    box-sizing: border-box;
}
.itp-vips-row:last-child { border-bottom: 1px solid rgba(255,255,255,0.1); }

/* Icon badge */
.itp-vips-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    background: #4ECBA0;
    color: #0F3838;
    font-size: 26px;
    transition: background .3s ease, color .3s ease, transform .3s ease;
}
.itp-vips-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-vips-row:hover .itp-vips-icon { transform: scale(1.05); }

/* Text block */
.itp-vips-text {
    flex: 1 1 auto;
    min-width: 0;
}
.itp-vips-title {
    color: #ffffff;
    font-size: 26px;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 12px;
    transition: color .3s ease;
}
.itp-vips-desc {
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.55;
    max-width: 540px;
    margin: 0;
}

/* Arrow button */
.itp-vips-arrow {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.35);
    background: transparent;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}
.itp-vips-arrow svg { stroke: #ffffff; transition: stroke .3s ease, transform .3s ease; }
.itp-vips-row:hover .itp-vips-arrow svg { transform: translateX(3px); }

/* Popup preview image */
.itp-vips-preview {
    --itp-vips-preview-offset: 40px;
    position: absolute;
    top: 50%;
    width: 320px;
    height: 320px;
    border-radius: 20px;
    overflow: hidden;
    background: #143838;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    box-shadow: 0 20px 60px rgba(0,0,0,0.35);
    transition: opacity .3s ease, transform .3s ease, visibility .3s;
    z-index: 20;
}
/* Positioning: right side (default) or left side (based on wrapper class) */
.itp-vips-side-right .itp-vips-preview {
    right: var(--itp-vips-preview-offset);
    transform: translateY(-50%) scale(0.94) translateX(10px);
}
.itp-vips-side-left .itp-vips-preview {
    left: var(--itp-vips-preview-offset);
    transform: translateY(-50%) scale(0.94) translateX(-10px);
}
.itp-vips-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* On row hover, show only this row's preview */
.itp-vips-row:hover .itp-vips-preview {
    opacity: 1;
    visibility: visible;
    pointer-events: none; /* keep pointer through so hover on preview area doesn't create hover-loops */
}
.itp-vips-side-right .itp-vips-row:hover .itp-vips-preview {
    transform: translateY(-50%) scale(1) translateX(0);
}
.itp-vips-side-left .itp-vips-row:hover .itp-vips-preview {
    transform: translateY(-50%) scale(1) translateX(0);
}

/* On touch devices with no hover capability: no popup ever */
@media (hover: none) {
    .itp-vips-mobile-off .itp-vips-preview { display: none !important; }
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .itp-vips-wrapper { padding: 60px 30px !important; }
    .itp-vips-heading { font-size: 32px !important; }
    .itp-vips-title   { font-size: 22px !important; }
    .itp-vips-icon    { width: 56px !important; height: 56px !important; font-size: 22px !important; }
    .itp-vips-arrow   { width: 52px !important; height: 52px !important; }
    .itp-vips-preview { width: 260px !important; height: 260px !important; }
}

@media (max-width: 767px) {
    .itp-vips-wrapper { padding: 44px 20px !important; }
    .itp-vips-head { margin-bottom: 36px !important; }
    .itp-vips-heading { font-size: 26px !important; }
    .itp-vips-eyebrow { font-size: 13px !important; }

    /* Popup fully disabled on mobile */
    .itp-vips-mobile-off .itp-vips-preview { display: none !important; }

    /* Rows become stacked cards: [icon] [title], [description below], [arrow at bottom] */
    .itp-vips-row {
        display: grid !important;
        grid-template-columns: auto 1fr !important;
        grid-template-rows: auto auto auto !important;
        gap: 14px 16px !important;
        padding: 24px 0 !important;
        align-items: start !important;
    }
    .itp-vips-icon  {
        grid-column: 1; grid-row: 1;
        width: 52px !important; height: 52px !important;
        font-size: 20px !important;
    }
    .itp-vips-text  {
        grid-column: 2; grid-row: 1;
        align-self: center;
    }
    .itp-vips-title { font-size: 20px !important; margin-bottom: 0 !important; }
    .itp-vips-desc  {
        grid-column: 1 / -1; grid-row: 2;
        font-size: 14px !important;
        max-width: none !important;
    }
    .itp-vips-arrow {
        grid-column: 1; grid-row: 3;
        justify-self: start !important;
        width: 44px !important; height: 44px !important;
    }
}

@media (max-width: 480px) {
    .itp-vips-wrapper { padding: 36px 14px !important; }
    .itp-vips-heading { font-size: 22px !important; }
    .itp-vips-title   { font-size: 18px !important; }
    .itp-vips-icon    { width: 46px !important; height: 46px !important; font-size: 18px !important; }
    .itp-vips-arrow   { width: 40px !important; height: 40px !important; }
    .itp-vips-row     { gap: 12px 14px !important; padding: 20px 0 !important; }
}

/* ============================================
   ProV10.26 — ABOUT US FRAME REVEAL (itp-abs-*)
   Split image opens like a book/frame on scroll.
   TWO PANELS share ONE image — when opened, ZERO gap between them
   (seamless full image via 200%-wide inner img + object-position).
   ============================================ */
.itp-abs-wrapper {
    --itp-abs-anim-dur: 1400ms;
    --itp-abs-progress-offset: 20px;
    position: relative;
    width: 100%;
    background: #F5F5F5;
    padding: 80px 60px;
    box-sizing: border-box;
    overflow: hidden;
}

.itp-abs-row {
    display: flex;
    gap: 60px;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}
.itp-abs-reverse .itp-abs-row { flex-direction: row-reverse; }

.itp-abs-col-left  { flex: 0 0 48%; max-width: 48%; min-width: 0; }
.itp-abs-col-right { flex: 1 1 auto; min-width: 0; }

/* Eyebrow pill */
.itp-abs-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: #ffffff;
    border: 1px solid #DDDDE0;
    border-radius: 40px;
    color: #0E2C3D;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 22px;
}
.itp-abs-eyebrow-star {
    color: #4ADE80;
    font-weight: 700;
    line-height: 1;
}

/* Heading + description */
.itp-abs-heading {
    margin: 0 0 20px;
    color: #0E1929;
    font-size: 48px;
    font-weight: 700;
    line-height: 1.15;
}
.itp-abs-desc {
    margin: 0 0 20px;
    color: #4B5563;
    font-size: 16px;
    line-height: 1.6;
}

/* Info row: years number + description/CTA block */
.itp-abs-info-row {
    display: flex;
    gap: 30px;
    margin-bottom: 30px;
    align-items: flex-start;
}
.itp-abs-info-body { flex: 1 1 auto; min-width: 0; }

/* Years number — large number with optional bg-clip:text fill */
.itp-abs-years {
    display: flex;
    align-items: stretch;
    gap: 10px;
    flex-shrink: 0;
}
.itp-abs-years-num {
    font-size: 200px;
    font-weight: 900;
    line-height: 0.9;
    color: #0E1929;
    letter-spacing: -0.04em;
}
/* Fill image via background-clip: text (only applied when --itp-abs-years-bg is set) */
.itp-abs-wrapper[style*="--itp-abs-years-bg"] .itp-abs-years-num {
    background-image: var(--itp-abs-years-bg);
    background-size: cover;
    background-position: center;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}
.itp-abs-years-rotated {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    color: #0E1929;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    align-self: center;
}

/* CTA pill button with arrow circle */
.itp-abs-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 28px;
    background: #3E33E8;
    color: #ffffff;
    border-radius: 40px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}
.itp-abs-cta:hover { background: #2A22B5; color: #ffffff; transform: translateY(-2px); }
.itp-abs-cta-label { line-height: 1; }
.itp-abs-cta-arrow {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .25s ease;
}
.itp-abs-cta-arrow svg { stroke: #3E33E8; }
.itp-abs-cta:hover .itp-abs-cta-arrow { transform: rotate(-45deg); }

/* Checklist */
.itp-abs-check {
    list-style: none;
    margin: 0 0 30px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.itp-abs-check-item {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #0E1929;
    font-size: 16px;
    font-weight: 500;
}
.itp-abs-check-icon {
    width: 24px; height: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    color: #4ADE80;
    font-size: 14px;
    flex-shrink: 0;
}
.itp-abs-check-icon svg { width: 1em; height: 1em; fill: currentColor; }

/* MVC card */
.itp-abs-mvc {
    display: flex;
    align-items: stretch;
    border-radius: 16px;
    overflow: hidden;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
    margin-top: 20px;
}
.itp-abs-mvc-tabs {
    display: flex;
    flex-shrink: 0;
}
.itp-abs-mvc-tab {
    width: 56px;
    border: 0;
    padding: 20px 0;
    background: #B8A9F5;
    color: #0E2C3D;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    transition: background .25s ease, opacity .25s ease;
}
.itp-abs-mvc-tab-icon {
    display: inline-flex;
    font-size: 20px;
}
.itp-abs-mvc-tab-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-abs-mvc-tab-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
}
/* Active tab is HIDDEN from the strip (its content is showing on the right) */
.itp-abs-mvc-tab-active {
    display: none;
}
.itp-abs-mvc-content {
    flex: 1 1 auto;
    background: #ffffff;
    padding: 28px 32px;
    position: relative;
    min-height: 220px;
    display: flex;
    flex-direction: column;
}
.itp-abs-mvc-panel {
    display: none;
    flex-direction: column;
    animation: itp-abs-fade .35s ease;
}
.itp-abs-mvc-panel-active { display: flex; }
@keyframes itp-abs-fade { from { opacity: 0; transform: translateX(6px); } to { opacity: 1; transform: none; } }
.itp-abs-mvc-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.itp-abs-mvc-title {
    color: #0E1929;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: 1px;
}
.itp-abs-mvc-head-icon {
    color: #B8A9F5;
    font-size: 26px;
    display: inline-flex;
}
.itp-abs-mvc-head-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-abs-mvc-underline {
    width: 60px;
    height: 3px;
    background: #B8A9F5;
    border-radius: 2px;
    margin: 8px 0 14px;
}
.itp-abs-mvc-body {
    color: #4B5563;
    font-size: 15px;
    line-height: 1.6;
}

/* ==========================================
   THE MAIN EVENT: Split Image with Book/Frame Reveal
   ==========================================
   Concept:
   - ONE image, split 50/50 by TWO panels stacked side-by-side
   - Each panel = 50% width, overflow hidden, contains <img> at 200% width
   - Left panel img: object-position: left  center  (shows left half of photo)
   - Right panel img: object-position: right center  (shows right half)
   - When panels sit side-by-side with ZERO gap, the two halves meet
     seamlessly to form the ORIGINAL complete image
   - CLOSED state: panels transformed toward center (overlap)
   - OPEN state: transform: none — panels return to natural side-by-side
   ========================================== */
.itp-abs-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 20px;
    display: flex;
    /* NO gap: panels sit flush against each other when opened */
    gap: 0;
    overflow: visible; /* allow progress card to overhang */
}
.itp-abs-panel {
    position: relative;
    flex: 0 0 50%;
    width: 50%;
    height: 100%;
    overflow: hidden;
    background: #ddd;
    border-radius: 20px;
    transition: transform var(--itp-abs-anim-dur, 1400ms) cubic-bezier(.16, 1, .3, 1);
    will-change: transform;
    box-shadow: 0 20px 60px rgba(0,0,0,0.12);
}
.itp-abs-panel img {
    display: block;
    width: 200%;        /* image is twice as wide as panel */
    height: 100%;
    object-fit: cover;
    /* each panel positions the image so it shows exactly its half */
}
.itp-abs-panel-left  img { object-position: left  center; }
.itp-abs-panel-right img { object-position: right center; }

/* CLOSED state (default when .itp-abs-opened NOT applied):
   Left panel shifted RIGHT by 50% (moves toward center)
   Right panel shifted LEFT by 50% (moves toward center)
   Result: both panels overlap in center, looking like a closed frame */
.itp-abs-panel-left  { transform: translateX(50%); }
.itp-abs-panel-right { transform: translateX(-50%); }

/* OPEN state — panels return to natural positions.
   Because flex gap is 0 and both panels are 50%, they sit flush together
   with the image halves meeting seamlessly. */
.itp-abs-opened .itp-abs-panel-left,
.itp-abs-opened .itp-abs-panel-right {
    transform: translateX(0);
}

/* On-load and always-open variants use the same opened rules */
.itp-abs-load-open .itp-abs-panel-left  { transform: translateX(50%); }
.itp-abs-load-open .itp-abs-panel-right { transform: translateX(-50%); }
.itp-abs-load-open.itp-abs-opened .itp-abs-panel-left,
.itp-abs-load-open.itp-abs-opened .itp-abs-panel-right { transform: translateX(0); }

/* Progress stat card - floating over the image */
.itp-abs-progress {
    position: absolute;
    width: 200px;
    padding: 18px 20px;
    background: #B8A9F5;
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    z-index: 5;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .5s ease .8s, transform .5s ease .8s;
}
.itp-abs-opened .itp-abs-progress {
    opacity: 1;
    transform: translateY(0);
}
.itp-abs-progress-top-right    { top: var(--itp-abs-progress-offset); right: var(--itp-abs-progress-offset); }
.itp-abs-progress-bottom-right { bottom: var(--itp-abs-progress-offset); right: var(--itp-abs-progress-offset); }
.itp-abs-progress-top-left     { top: var(--itp-abs-progress-offset); left: var(--itp-abs-progress-offset); }
.itp-abs-progress-bottom-left  { bottom: var(--itp-abs-progress-offset); left: var(--itp-abs-progress-offset); }
.itp-abs-progress-title {
    color: #0E1929;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.3px;
    margin-bottom: 4px;
}
.itp-abs-progress-value {
    color: #3E33E8;
    font-size: 34px;
    font-weight: 800;
    line-height: 1;
    margin-bottom: 8px;
}
.itp-abs-progress-chart {
    margin-top: 4px;
}
.itp-abs-progress-chart img {
    display: block;
    width: 100%;
    height: auto;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .itp-abs-wrapper { padding: 60px 30px !important; }
    .itp-abs-row { flex-direction: column !important; gap: 40px !important; }
    .itp-abs-reverse .itp-abs-row { flex-direction: column !important; }
    .itp-abs-col-left, .itp-abs-col-right { flex: 1 1 100% !important; max-width: 100% !important; width: 100%; }
    .itp-abs-heading { font-size: 34px !important; }
    .itp-abs-years-num { font-size: 140px !important; }
    .itp-abs-info-row { gap: 20px !important; }
    .itp-abs-image { aspect-ratio: 4 / 3 !important; }
    .itp-abs-progress { width: 170px !important; padding: 14px 16px !important; }
    .itp-abs-progress-value { font-size: 28px !important; }
}

@media (max-width: 767px) {
    .itp-abs-wrapper { padding: 44px 20px !important; }
    .itp-abs-heading { font-size: 26px !important; }
    .itp-abs-eyebrow { font-size: 13px !important; padding: 6px 14px !important; }
    .itp-abs-info-row { flex-direction: column !important; gap: 20px !important; }
    .itp-abs-years-num { font-size: 100px !important; }
    .itp-abs-years-rotated { display: none; }
    .itp-abs-desc { font-size: 15px !important; }
    .itp-abs-cta { padding: 8px 8px 8px 20px !important; font-size: 14px !important; }
    .itp-abs-cta-arrow { width: 30px !important; height: 30px !important; }
    .itp-abs-check-item { font-size: 15px !important; }
    .itp-abs-mvc { flex-direction: row !important; }
    .itp-abs-mvc-tab { width: 48px !important; padding: 16px 0 !important; }
    .itp-abs-mvc-title { font-size: 20px !important; }
    .itp-abs-mvc-body { font-size: 14px !important; }
    .itp-abs-image { aspect-ratio: 1 / 1 !important; }
    .itp-abs-progress { width: 150px !important; padding: 12px 14px !important; }
    .itp-abs-progress-value { font-size: 24px !important; }
    .itp-abs-progress-title { font-size: 12px !important; }
}

@media (max-width: 480px) {
    .itp-abs-wrapper { padding: 32px 14px !important; }
    .itp-abs-heading { font-size: 22px !important; }
    .itp-abs-years-num { font-size: 80px !important; }
    .itp-abs-mvc-tab { width: 42px !important; padding: 14px 0 !important; }
    .itp-abs-mvc-content { padding: 20px 18px !important; min-height: 180px !important; }
    .itp-abs-progress { width: 130px !important; padding: 10px 12px !important; }
    .itp-abs-progress-value { font-size: 22px !important; }
}

/* ============================================
   ProV10.27 — HERO PROFESSIONAL SLIDER (itp-hps-*)
   Full-width Swiper hero with bg image + dark gradient overlay + right content.
   ============================================ */
.itp-hps-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.itp-hps-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}

/* Slide */
.itp-hps-slide {
    position: relative;
    width: 100%;
    min-height: 780px;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
}
.itp-hps-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    z-index: 1;
}
.itp-hps-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    --itp-hps-overlay-color: #0F2A2A;
    --itp-hps-overlay-opacity: 0.85;
}
/* Gradient variants */
.itp-hps-overlay-gradient_right .itp-hps-overlay {
    background: linear-gradient(
        90deg,
        rgba(0,0,0,0) 0%,
        color-mix(in srgb, var(--itp-hps-overlay-color) calc(var(--itp-hps-overlay-opacity) * 60%), transparent) 40%,
        color-mix(in srgb, var(--itp-hps-overlay-color) calc(var(--itp-hps-overlay-opacity) * 100%), transparent) 100%
    );
}
.itp-hps-overlay-gradient_left .itp-hps-overlay {
    background: linear-gradient(
        -90deg,
        rgba(0,0,0,0) 0%,
        color-mix(in srgb, var(--itp-hps-overlay-color) calc(var(--itp-hps-overlay-opacity) * 60%), transparent) 40%,
        color-mix(in srgb, var(--itp-hps-overlay-color) calc(var(--itp-hps-overlay-opacity) * 100%), transparent) 100%
    );
}
.itp-hps-overlay-full .itp-hps-overlay {
    background: color-mix(in srgb, var(--itp-hps-overlay-color) calc(var(--itp-hps-overlay-opacity) * 100%), transparent);
}
/* color-mix fallback for old browsers — use rgba if supported */
@supports not (background: color-mix(in srgb, red, blue)) {
    .itp-hps-overlay-gradient_right .itp-hps-overlay,
    .itp-hps-overlay-gradient_left  .itp-hps-overlay,
    .itp-hps-overlay-full           .itp-hps-overlay {
        background: rgba(15, 42, 42, 0.85);
    }
}

/* Content wrap = flex container that positions the content block */
.itp-hps-content-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 80px;
    box-sizing: border-box;
}
.itp-hps-content {
    max-width: 640px;
    color: #ffffff;
    width: 100%;
}

/* Top row: rating + badge */
.itp-hps-top-row {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}
.itp-hps-rating {
    position: relative;
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    letter-spacing: 3px;
}
.itp-hps-rating svg {
    display: inline-block;
    vertical-align: middle;
}
.itp-hps-star-empty   { color: rgba(255,255,255,0.3); display: inline-block; }
.itp-hps-star-filled {
    color: #FFB800;
    position: absolute;
    top: 0; left: 0;
    overflow: hidden;
    white-space: nowrap;
    display: inline-block;
}
.itp-hps-badge {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    background: rgba(255,255,255,0.1);
    color: #ffffff;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 40px;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
}

/* Heading */
.itp-hps-heading {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: 72px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}

/* Description */
.itp-hps-desc {
    margin: 0 0 40px;
    color: rgba(255,255,255,0.85);
    font-size: 17px;
    line-height: 1.6;
}

/* CTA row: avatars + button */
.itp-hps-cta-row {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.itp-hps-avatars { display: inline-flex; align-items: center; }
.itp-hps-avatar {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid #ffffff;
    background: #eee;
    object-fit: cover;
    box-sizing: border-box;
}
.itp-hps-avatar + .itp-hps-avatar { margin-left: -14px; }

.itp-hps-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 10px 10px 28px;
    background: #0F3838;
    color: #ffffff;
    border-radius: 40px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background .25s ease, transform .25s ease;
}
.itp-hps-cta:hover { background: #1F5555; color: #ffffff; transform: translateY(-2px); }
.itp-hps-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #ffffff;
    transition: transform .25s ease;
}
.itp-hps-cta-arrow svg { stroke: #0F3838; }
.itp-hps-cta:hover .itp-hps-cta-arrow { transform: rotate(-45deg); }

/* Nav arrows */
.itp-hps-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .25s ease, transform .25s ease;
}
.itp-hps-nav:hover { background: rgba(255,255,255,0.25); }
.itp-hps-nav svg { stroke: #ffffff; }
.itp-hps-nav-prev { left: 24px; }
.itp-hps-nav-next { right: 24px; }
.itp-hps-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* Pagination */
.itp-hps-pagination.swiper-pagination {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
}
.itp-hps-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.4);
    opacity: 1;
    margin: 0 5px;
    transition: background .25s ease, width .25s ease;
}
.itp-hps-pagination .swiper-pagination-bullet-active {
    background: #ffffff;
    width: 32px;
    border-radius: 5px;
}

/* Content entrance animation on each slide change */
.itp-hps-content [data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}
.itp-hps-content [data-anim].itp-hps-anim-in {
    opacity: 1;
    transform: translateY(0);
}

/* Swiper fade fix — ensure slides stack correctly */
.itp-hps-swiper.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}
.itp-hps-swiper.swiper-fade .swiper-slide-active { pointer-events: auto; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .itp-hps-slide { min-height: 560px; }
    .itp-hps-content-wrap { padding: 60px 40px !important; justify-content: flex-start; }
    .itp-hps-content { max-width: 100%; }
    .itp-hps-heading { font-size: 48px !important; }
    .itp-hps-desc { font-size: 16px !important; margin-bottom: 30px !important; }
    .itp-hps-nav { width: 44px !important; height: 44px !important; }
    .itp-hps-nav-prev { left: 12px; }
    .itp-hps-nav-next { right: 12px; }
}
@media (max-width: 767px) {
    /* Height follows the content instead of a fixed band, so nothing is
       stranded and the image always sits directly behind the text. */
    .itp-hps-slide {
        min-height: auto !important;
        height: auto !important;
    }
    .itp-hps-bg {
        background-position: center center !important;
    }
    /* Stronger top-to-bottom overlay so text on any bg image stays readable */
    .itp-hps-overlay-gradient_right .itp-hps-overlay,
    .itp-hps-overlay-gradient_left  .itp-hps-overlay,
    .itp-hps-overlay-full           .itp-hps-overlay {
        background: linear-gradient(180deg, rgba(15,42,42,0.55) 0%, rgba(15,42,42,0.9) 100%) !important;
    }
    .itp-hps-content-wrap {
        padding: 44px 22px !important;
        justify-content: flex-start !important;
    }
    .itp-hps-content { max-width: 100% !important; }
    .itp-hps-heading { font-size: 34px !important; }
    .itp-hps-desc    { font-size: 15px !important; margin-bottom: 26px !important; max-width: 100% !important; }
    .itp-hps-top-row { gap: 12px !important; margin-bottom: 20px !important; flex-wrap: wrap !important; }
    .itp-hps-badge   { font-size: 12px !important; padding: 6px 14px !important; }
    .itp-hps-rating  { font-size: 15px !important; }
    .itp-hps-avatar  { width: 42px !important; height: 42px !important; border-width: 2px !important; }
    .itp-hps-avatar + .itp-hps-avatar { margin-left: -10px !important; }
    .itp-hps-cta-row { flex-wrap: wrap !important; gap: 14px !important; }
    .itp-hps-cta { padding: 8px 8px 8px 20px !important; font-size: 14px !important; }
    .itp-hps-cta-arrow { width: 30px !important; height: 30px !important; }
    .itp-hps-nav { display: none !important; }
    .itp-hps-pagination.swiper-pagination { position: static !important; margin-top: 18px !important; padding-bottom: 4px; }
}
@media (max-width: 480px) {
    .itp-hps-heading { font-size: 28px !important; }
    .itp-hps-cta-row { gap: 14px !important; }
}

/* ============================================
   ProV10.28 — HERO PROFESSIONAL SLIDER 2 (itp-hps2-*)
   Lean variant: no rating/badge/avatars. Colored accent heading via {{...}}.
   ============================================ */
.itp-hps2-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.itp-hps2-swiper {
    width: 100%;
    height: 100%;
    position: relative;
}
.itp-hps2-slide {
    position: relative;
    width: 100%;
    min-height: 780px;
    display: flex;
    box-sizing: border-box;
    overflow: hidden;
}
.itp-hps2-bg {
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: right center;
    z-index: 1;
}
.itp-hps2-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    --itp-hps2-overlay-color: #0F1929;
    --itp-hps2-overlay-opacity: 0.9;
}
.itp-hps2-overlay-gradient_left .itp-hps2-overlay {
    background: linear-gradient(
        90deg,
        color-mix(in srgb, var(--itp-hps2-overlay-color) calc(var(--itp-hps2-overlay-opacity) * 100%), transparent) 0%,
        color-mix(in srgb, var(--itp-hps2-overlay-color) calc(var(--itp-hps2-overlay-opacity) * 85%), transparent) 40%,
        rgba(0,0,0,0) 100%
    );
}
.itp-hps2-overlay-gradient_right .itp-hps2-overlay {
    background: linear-gradient(
        -90deg,
        color-mix(in srgb, var(--itp-hps2-overlay-color) calc(var(--itp-hps2-overlay-opacity) * 100%), transparent) 0%,
        color-mix(in srgb, var(--itp-hps2-overlay-color) calc(var(--itp-hps2-overlay-opacity) * 85%), transparent) 40%,
        rgba(0,0,0,0) 100%
    );
}
.itp-hps2-overlay-full .itp-hps2-overlay {
    background: color-mix(in srgb, var(--itp-hps2-overlay-color) calc(var(--itp-hps2-overlay-opacity) * 100%), transparent);
}
@supports not (background: color-mix(in srgb, red, blue)) {
    .itp-hps2-overlay-gradient_left  .itp-hps2-overlay,
    .itp-hps2-overlay-gradient_right .itp-hps2-overlay,
    .itp-hps2-overlay-full           .itp-hps2-overlay {
        background: rgba(15, 25, 41, 0.9);
    }
}

/* Content wrap */
.itp-hps2-content-wrap {
    position: relative;
    z-index: 3;
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 80px;
    box-sizing: border-box;
}
.itp-hps2-content {
    max-width: 700px;
    color: #ffffff;
    width: 100%;
}

/* Heading with accent-color spans (rendered from {{...}}) */
.itp-hps2-heading {
    margin: 0 0 24px;
    color: #ffffff;
    font-size: 72px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
}
.itp-hps2-heading-accent {
    color: #D4FF3A;
    /* Optional: subtle glow on the accent for extra pop
       filter: drop-shadow(0 0 12px rgba(212,255,58,0.15)); */
}

/* Description */
.itp-hps2-desc {
    margin: 0 0 40px;
    color: rgba(255,255,255,0.85);
    font-size: 16px;
    line-height: 1.6;
    max-width: 560px;
}

/* CTA pill button with dark circle arrow */
.itp-hps2-cta {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 10px 10px 10px 32px;
    background: #D4FF3A;
    color: #0F1929;
    border-radius: 40px;
    text-decoration: none;
    font-size: 15px;
    font-weight: 700;
    transition: background .25s ease, transform .25s ease;
}
.itp-hps2-cta:hover {
    background: #B6DE2A;
    color: #0F1929;
    transform: translateY(-2px);
}
.itp-hps2-cta-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #0F1929;
    transition: transform .25s ease;
}
.itp-hps2-cta-arrow svg { stroke: #D4FF3A; }
.itp-hps2-cta:hover .itp-hps2-cta-arrow { transform: translateX(3px); }

/* Nav arrows */
.itp-hps2-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.12);
    backdrop-filter: blur(8px);
    cursor: pointer;
    transition: background .25s ease;
}
.itp-hps2-nav:hover { background: rgba(255,255,255,0.25); }
.itp-hps2-nav svg { stroke: #ffffff; }
.itp-hps2-nav-prev { left: 24px; }
.itp-hps2-nav-next { right: 24px; }
.itp-hps2-nav.swiper-button-disabled { opacity: 0.35; cursor: default; }

/* Pagination */
.itp-hps2-pagination.swiper-pagination {
    position: absolute;
    bottom: 28px;
    left: 0;
    right: 0;
    z-index: 10;
    text-align: center;
}
.itp-hps2-pagination .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
    background: rgba(255,255,255,0.4);
    opacity: 1;
    margin: 0 5px;
    transition: background .25s ease, width .25s ease;
}
.itp-hps2-pagination .swiper-pagination-bullet-active {
    background: #D4FF3A;
    width: 32px;
    border-radius: 5px;
}

/* Content entrance animation */
.itp-hps2-content [data-anim] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .8s ease, transform .8s ease;
}
.itp-hps2-content [data-anim].itp-hps2-anim-in {
    opacity: 1;
    transform: translateY(0);
}

.itp-hps2-swiper.swiper-fade .swiper-slide {
    pointer-events: none;
    transition-property: opacity;
}
.itp-hps2-swiper.swiper-fade .swiper-slide-active { pointer-events: auto; }

/* ---------- RESPONSIVE ---------- */
@media (max-width: 991px) {
    .itp-hps2-slide { min-height: 560px !important; }
    .itp-hps2-content-wrap { padding: 60px 40px !important; }
    .itp-hps2-content { max-width: 100% !important; }
    .itp-hps2-heading { font-size: 48px !important; }
    .itp-hps2-desc    { font-size: 15px !important; margin-bottom: 30px !important; }
    .itp-hps2-nav { width: 44px !important; height: 44px !important; }
    .itp-hps2-nav-prev { left: 12px; }
    .itp-hps2-nav-next { right: 12px; }
}
@media (max-width: 767px) {
    /* Height follows the content instead of a fixed band, so nothing is
       stranded and the image always sits directly behind the text. */
    .itp-hps2-slide {
        min-height: auto !important;
        height: auto !important;
    }
    .itp-hps2-bg {
        background-position: center center !important;
    }
    .itp-hps2-overlay-gradient_left  .itp-hps2-overlay,
    .itp-hps2-overlay-gradient_right .itp-hps2-overlay,
    .itp-hps2-overlay-full           .itp-hps2-overlay {
        background: linear-gradient(180deg, rgba(15,25,41,0.55) 0%, rgba(15,25,41,0.92) 100%) !important;
    }
    .itp-hps2-content-wrap {
        padding: 44px 22px !important;
        justify-content: flex-start !important;
    }
    .itp-hps2-content { max-width: 100% !important; }
    .itp-hps2-heading { font-size: 32px !important; }
    .itp-hps2-desc    { font-size: 14px !important; margin-bottom: 24px !important; max-width: 100% !important; }
    .itp-hps2-cta { padding: 10px 10px 10px 22px !important; font-size: 14px !important; gap: 12px !important; }
    .itp-hps2-cta-arrow { width: 34px !important; height: 34px !important; }
    .itp-hps2-nav { display: none !important; }
    .itp-hps2-pagination.swiper-pagination { position: static !important; margin-top: 16px !important; padding-bottom: 4px; }
}
@media (max-width: 480px) {
    .itp-hps2-heading { font-size: 26px !important; }
}

/* ============================================
   ProV10.30 — About Us Frame Reveal FIXES
   Override transitions (JS drives everything now), add seam line,
   allow MVC card to overlap image column.
   ============================================ */

/* JS-driven scroll animation — kill CSS transitions on the panels */
.itp-abs-panel { transition: none !important; }
.itp-abs-progress { transition: opacity .3s ease, transform .3s ease !important; }

/* The image container: relative so the seam line can be absolute-positioned,
   with a small horizontal-safe gap of zero so the two halves meet flush. */
.itp-abs-image {
    position: relative;
    display: flex;
    gap: 0;
    overflow: visible;
    /* Slight white gutter behind the panels so any sub-pixel gap shows white */
    background: #ffffff;
}

/* Book-spine seam line — thin white bar at the join.
   Only visible when panels are (nearly) open, driven by --itp-abs-progress from JS. */
.itp-abs-image::after {
    content: '';
    position: absolute;
    top: 6%;
    bottom: 6%;
    left: 50%;
    width: 3px;
    margin-left: -1.5px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 3px;
    z-index: 3;
    pointer-events: none;
    box-shadow: 0 0 6px rgba(255,255,255,0.5);
    opacity: var(--itp-abs-progress, 0);
    transition: opacity .15s linear;
}

/* Ensure each panel has its own subtle rounded corners kept only on outer edges
   so they read as ONE image when open (rounded outside, straight inside). */
.itp-abs-panel-left  { border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
.itp-abs-panel-right { border-top-left-radius: 0 !important;  border-bottom-left-radius: 0 !important; }

/* Progress card: opacity is now driven by JS, keep transition responsive */
.itp-abs-opened .itp-abs-progress {
    /* Neutralise the V10.26 CSS animation — JS drives inline styles now */
    opacity: unset;
    transform: unset;
}

/* MVC card overlap — extend beyond the left column into the image column.
   The card is inside the left column flow but visually spans wider.
   Uses !important because V10.26 CSS set width via flex. */
.itp-abs-mvc {
    position: relative;
    z-index: 5;                 /* above the image */
    width: calc(100% + 260px) !important;  /* extends past left column by 260px */
    max-width: none !important;
    margin-top: 40px;
    box-shadow: 0 20px 50px rgba(15,25,41,0.18);
}

/* On tablet: overlap reduced */
@media (max-width: 1200px) {
    .itp-abs-mvc { width: calc(100% + 160px) !important; }
}

/* On smaller tablet: no overlap, card matches column width */
@media (max-width: 991px) {
    .itp-abs-mvc { width: 100% !important; }
    /* MVC keeps its usual layout but no longer overlaps */
}

/* Larger typography for the title on the MVC card to match reference */
.itp-abs-mvc-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
}

/* ============================================
   ProV10.31 — About Us Frame Reveal FIX 2
   Butterfly-wing 3D rotation + true seamless image.
   ============================================ */

/* Perspective container — enables 3D depth for the rotating panels */
.itp-abs-image {
    perspective: 1500px !important;
    transform-style: preserve-3d !important;
    display: flex !important;
    gap: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    /* Unified drop-shadow on the whole open book, not per-panel.
       drop-shadow respects the combined shape so no seam is created. */
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.18));
    box-shadow: none !important;
}

/* Panels: prep for 3D, NO individual shadow (was creating the visible inner seam) */
.itp-abs-panel {
    position: relative;
    flex: 0 0 50% !important;
    width: 50% !important;
    backface-visibility: hidden;
    box-shadow: none !important;
    background: transparent !important;
    /* transform is set inline by JS every frame */
}

/* Hinge points at the inner edges — panels pivot around the container center */
.itp-abs-panel-left  { transform-origin: right center !important; }
.itp-abs-panel-right { transform-origin: left  center !important; }

/* Inner corners flat, outer corners rounded — makes the two halves read as ONE image */
.itp-abs-panel-left  {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}
.itp-abs-panel-right {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Ensure panel images fill their halves without gaps at the seam */
.itp-abs-panel img {
    display: block !important;
    width: 200% !important;
    height: 100% !important;
    object-fit: cover !important;
}
.itp-abs-panel-left  img { object-position: left  center !important; }
.itp-abs-panel-right img { object-position: right center !important; }

/* Refine the seam line — thinner + more subtle now that the image is truly seamless */
.itp-abs-image::after {
    top: 4% !important;
    bottom: 4% !important;
    width: 2px !important;
    margin-left: -1px !important;
    background: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 0 4px rgba(255, 255, 255, 0.35) !important;
}

/* ============================================
   ProV10.32 — DUAL MARQUEE CARDS (itp-dmc-*)
   Two horizontal rows scrolling opposite directions. Pure CSS animation,
   seamless infinite loop (card set duplicated in the DOM).
   ============================================ */
.itp-dmc-wrapper {
    position: relative;
    width: 100%;
    background: #0F1929;
    padding: 80px 0;
    overflow: hidden;
    box-sizing: border-box;
}
.itp-dmc-overlay {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: rgba(15, 25, 41, 0.5);
}
.itp-dmc-container {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Heading block */
.itp-dmc-head {
    max-width: 720px;
    margin: 0 0 50px;
    text-align: left;
}
.itp-dmc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    background: rgba(255,255,255,0.08);
    color: #ffffff;
    border-radius: 40px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 20px;
}
.itp-dmc-eyebrow-star { color: #4ADE80; font-weight: 700; line-height: 1; }
.itp-dmc-heading {
    margin: 0 0 18px;
    color: #ffffff;
    font-size: 42px;
    font-weight: 700;
    line-height: 1.15;
}
.itp-dmc-desc {
    margin: 0;
    color: rgba(255,255,255,0.75);
    font-size: 15px;
    line-height: 1.6;
}

/* Marquee wrapper (holds the rows) */
.itp-dmc-marquee {
    display: flex;
    flex-direction: column;
    gap: 20px;
    /* Break out of the container padding so cards can scroll edge-to-edge */
    width: calc(100% + 40px);
    margin-left: -20px;
}

/* Each row is a viewport that clips the scrolling track */
.itp-dmc-row {
    position: relative;
    width: 100%;
    overflow: hidden;
}

/* Track = flex row of cards, animated to scroll horizontally */
.itp-dmc-track {
    display: flex;
    gap: 20px;
    width: max-content;         /* content sizes track naturally; needed for the -50% translate */
    animation-duration: 40s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    animation-play-state: running;
    will-change: transform;
}

/* Scroll LEFT: track moves from 0 to -50% (i.e., original set exits left, clone takes over) */
.itp-dmc-track-left  { animation-name: itp-dmc-scroll-left; }

/* Scroll RIGHT: track moves from -50% to 0 (i.e., appears from left, exits right) */
.itp-dmc-track-right { animation-name: itp-dmc-scroll-right; }

@keyframes itp-dmc-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes itp-dmc-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

/* Pause on hover — applied at the row level so hovering any card pauses just that row */
.itp-dmc-pause-on-hover .itp-dmc-row:hover .itp-dmc-track {
    animation-play-state: paused;
}

/* Fade left/right edges — soft mask so cards fade into the section instead of hard-clipping */
.itp-dmc-fade-edges .itp-dmc-row {
    -webkit-mask-image: linear-gradient(to right,
        transparent 0%, black 6%, black 94%, transparent 100%);
    mask-image: linear-gradient(to right,
        transparent 0%, black 6%, black 94%, transparent 100%);
}

/* Card (the pill) */
.itp-dmc-card {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 10px 24px 10px 10px;
    background: rgba(184, 169, 245, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 50px;
    color: #ffffff;
    min-height: 60px;
    flex-shrink: 0;
    box-sizing: border-box;
    text-decoration: none;
}
.itp-dmc-card-text {
    white-space: nowrap;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    padding-right: 4px;
}

/* Icon badge (icon_text mode) */
.itp-dmc-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    background: #ffffff;
    color: #0F1929;
    font-size: 16px;
    border-radius: 50%;
}
.itp-dmc-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Logo image (logo_text / logo_only modes) */
.itp-dmc-logo {
    display: block;
    max-width: 100px;
    max-height: 40px;
    width: auto;
    height: auto;
    object-fit: contain;
    flex-shrink: 0;
}

/* Reduced motion — slow the animation drastically for accessibility */
@media (prefers-reduced-motion: reduce) {
    .itp-dmc-track {
        animation-duration: 200s !important;
    }
}

/* Responsive */
@media (max-width: 991px) {
    .itp-dmc-wrapper { padding: 60px 0 !important; }
    .itp-dmc-heading { font-size: 32px !important; }
    .itp-dmc-head    { margin-bottom: 36px !important; padding: 0 20px; }
    .itp-dmc-card    { min-height: 52px !important; padding: 8px 20px 8px 8px !important; }
    .itp-dmc-icon    { width: 38px !important; height: 38px !important; font-size: 14px !important; }
    .itp-dmc-card-text { font-size: 14px !important; }
    .itp-dmc-marquee { gap: 16px !important; }
    .itp-dmc-track   { gap: 16px !important; }
}
@media (max-width: 767px) {
    .itp-dmc-wrapper { padding: 44px 0 !important; }
    .itp-dmc-heading { font-size: 24px !important; }
    .itp-dmc-eyebrow { font-size: 12px !important; padding: 6px 14px !important; }
    .itp-dmc-desc    { font-size: 14px !important; }
    .itp-dmc-card    { min-height: 46px !important; padding: 6px 18px 6px 6px !important; }
    .itp-dmc-icon    { width: 34px !important; height: 34px !important; font-size: 13px !important; }
    .itp-dmc-card-text { font-size: 13px !important; }
}

/* ============================================================
   LOGO ORBIT RING  (.itp-lor-*)  - v2.10.0
   Ring of logo chips around a center hub. Chips float gently in
   place (no rotation), each with a coloured beam trailing inward.
   ============================================================ */

.itp-lor {
    position: relative;
    width: 100%;
    background-color: #F4F5F6;
}

.itp-lor-inner {
    --itp-lor-content-w: 45%;
    display: flex;
    align-items: center;
    gap: 40px;
    max-width: 1200px;
    margin: 0 auto;
}

.itp-lor-content-right .itp-lor-inner { flex-direction: row-reverse; }
.itp-lor-ring-only .itp-lor-inner     { justify-content: center; }

.itp-lor-content {
    flex: 0 0 var(--itp-lor-content-w);
    max-width: var(--itp-lor-content-w);
}

.itp-lor-ring-col {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* ---------- content ---------- */
.itp-lor-eyebrow {
    font-size: 14px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #2A7A7B;
    margin-bottom: 14px;
}

.itp-lor-heading {
    margin: 0 0 16px;
    font-size: 44px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}

.itp-lor-hl { color: #2A7A7B; }

.itp-lor-desc {
    margin: 0 0 28px;
    font-size: 16px;
    line-height: 1.65;
    color: #5A6472;
    max-width: 420px;
}

.itp-lor-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 22px 14px 26px;
    border-radius: 999px;
    background-color: #1F6B6D;
    color: #FFFFFF;
    text-decoration: none;
    transition: background-color .3s ease, transform .3s ease;
}
.itp-lor-btn:hover { background-color: #0F1B2D; transform: translateY(-2px); }
.itp-lor-btn:focus-visible { outline: 2px solid #2D7FF9; outline-offset: 3px; }

.itp-lor-btn-text { font-size: 15px; font-weight: 600; line-height: 1; }

.itp-lor-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #0F1B2D;
    color: #FFFFFF;
    font-size: 13px;
    flex-shrink: 0;
    transition: transform .3s ease;
}
.itp-lor-btn-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-lor-btn-ico-rot i, .itp-lor-btn-ico-rot svg { transform: rotate(45deg); }
.itp-lor-btn:hover .itp-lor-btn-ico { transform: translateX(2px) translateY(-2px); }

/* ---------- ring canvas ---------- */
.itp-lor-ring {
    --itp-lor-size: 520px;
    --itp-lor-radius: 185px;
    --itp-lor-chip: 64px;
    --itp-lor-hub: 108px;
    --itp-lor-amp: 12px;
    --itp-lor-dur: 6s;
    --itp-lor-beam-len: 46px;
    --itp-lor-beam-w: 58px;
    --itp-lor-beam-op: .45;
    --itp-lor-beam-blur: 7px;
    --itp-lor-beam-gap: 4px;
    position: relative;
    width: var(--itp-lor-size);
    height: var(--itp-lor-size);
    max-width: 100%;
    flex-shrink: 0;
}

.itp-lor-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    width: calc(var(--itp-lor-radius) * 2);
    height: calc(var(--itp-lor-radius) * 2);
    transform: translate(-50%, -50%);
    border: 1px dashed rgba(15, 27, 45, .08);
    border-radius: 50%;
    pointer-events: none;
}

/* ---------- hub ---------- */
.itp-lor-hub {
    --itp-lor-hub-a: #2E7D7E;
    --itp-lor-hub-b: #0E4B4C;
    --itp-lor-glow-a: #7C3AED;
    --itp-lor-glow-b: #3B82F6;
    --itp-lor-hub-shadow: rgba(14, 75, 76, .32);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 3;
    width: var(--itp-lor-hub);
    height: var(--itp-lor-hub);
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: none;
    text-decoration: none;
}

/* ::after = the hub face. Painted above the glow, below the logo. */
.itp-lor-hub::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, var(--itp-lor-hub-a) 0%, var(--itp-lor-hub-b) 78%);
    box-shadow: 0 18px 40px var(--itp-lor-hub-shadow), inset 0 -6px 18px rgba(0, 0, 0, .28), inset 0 6px 14px rgba(255, 255, 255, .12);
}

/* ::before = soft violet/blue arc hugging the hub edge, painted behind the face */
.itp-lor-hub-glow::before {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: -1;
    border-radius: 50%;
    background: conic-gradient(from 160deg, transparent 0deg, var(--itp-lor-glow-a) 55deg, var(--itp-lor-glow-b) 110deg, transparent 175deg, transparent 360deg);
    filter: blur(6px);
    opacity: .9;
}
.itp-lor-hub-glow-spin::before { animation: itp-lor-spin 18s linear infinite; }

@keyframes itp-lor-spin {
    to { transform: rotate(360deg); }
}

.itp-lor-hub-media {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45%;
    color: #FFFFFF;
}
.itp-lor-hub-media img { width: 100%; height: auto; display: block; }
.itp-lor-hub-media i   { font-size: calc(var(--itp-lor-hub) * .3); }
.itp-lor-hub-media svg { width: 100%; height: auto; fill: currentColor; }

/* ---------- ring items ---------- */
.itp-lor-item {
    --itp-lor-a: 0deg;
    --itp-lor-roff: 0px;
    --itp-lor-scale: 1;
    --itp-lor-delay: 0s;
    --itp-lor-dir: 1;
    --itp-lor-beam: #F97316;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    /* rotate to the item's angle, then push outward: local +X points away from the hub */
    transform: rotate(var(--itp-lor-a)) translateX(calc(var(--itp-lor-radius) + var(--itp-lor-roff)));
    z-index: 2;
}

/* beam: sits at the item origin, extends back toward the hub (local -X) */
.itp-lor-beam {
    position: absolute;
    top: 50%;
    right: calc(var(--itp-lor-chip) / 2 + var(--itp-lor-beam-gap));
    width: var(--itp-lor-beam-len);
    height: var(--itp-lor-beam-w);
    transform: translateY(-50%);
    background: linear-gradient(270deg, var(--itp-lor-beam) 0%, transparent 100%);
    opacity: var(--itp-lor-beam-op);
    filter: blur(var(--itp-lor-beam-blur));
    border-radius: 6px;
    pointer-events: none;
    z-index: -1;
}
.itp-lor-taper .itp-lor-beam {
    clip-path: polygon(100% 0%, 100% 100%, 0% 72%, 0% 28%);
}

/* chip wrap counter-rotates so logos always sit upright */
.itp-lor-chip-wrap {
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    transform: translate(-50%, -50%) rotate(calc(-1 * var(--itp-lor-a)));
}

.itp-lor-chip {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--itp-lor-chip);
    height: var(--itp-lor-chip);
    padding: 14px;
    box-sizing: border-box;
    background-color: #FFFFFF;
    border-radius: 50%;
    box-shadow: 0 8px 24px rgba(15, 27, 45, .12);
    text-decoration: none;
    transform: scale(var(--itp-lor-scale));
    animation: itp-lor-float var(--itp-lor-dur) ease-in-out infinite;
    animation-delay: var(--itp-lor-delay);
    will-change: transform;
}
.itp-lor-driftx .itp-lor-chip { animation-name: itp-lor-float-xy; }
.itp-lor-nofloat .itp-lor-chip { animation: none; }

.itp-lor-chip-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.itp-lor-chip-dot {
    display: block;
    width: 60%;
    height: 60%;
    border-radius: 50%;
    background: var(--itp-lor-beam);
    opacity: .85;
}

.itp-lor-hoverable .itp-lor-chip {
    transition: box-shadow .3s ease;
}
.itp-lor-hoverable .itp-lor-chip:hover {
    animation-play-state: paused;
    box-shadow: 0 16px 38px rgba(15, 27, 45, .22);
}

/* vertical bob only */
@keyframes itp-lor-float {
    0%, 100% { transform: scale(var(--itp-lor-scale)) translateY(0); }
    50%      { transform: scale(var(--itp-lor-scale)) translateY(calc(var(--itp-lor-amp) * -1 * var(--itp-lor-dir))); }
}

/* bob + small sideways wander */
@keyframes itp-lor-float-xy {
    0%, 100% { transform: scale(var(--itp-lor-scale)) translate(0, 0); }
    25%      { transform: scale(var(--itp-lor-scale)) translate(calc(var(--itp-lor-amp) * .35 * var(--itp-lor-dir)), calc(var(--itp-lor-amp) * -.55 * var(--itp-lor-dir))); }
    50%      { transform: scale(var(--itp-lor-scale)) translate(0, calc(var(--itp-lor-amp) * -1 * var(--itp-lor-dir))); }
    75%      { transform: scale(var(--itp-lor-scale)) translate(calc(var(--itp-lor-amp) * -.35 * var(--itp-lor-dir)), calc(var(--itp-lor-amp) * -.55 * var(--itp-lor-dir))); }
}

@media (prefers-reduced-motion: reduce) {
    .itp-lor-chip { animation: none !important; }
    .itp-lor-hub-glow-spin::before { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-lor-heading { font-size: 36px; }
    .itp-lor-ring {
        --itp-lor-size: 420px;
        --itp-lor-radius: 148px;
        --itp-lor-chip: 54px;
        --itp-lor-hub: 86px;
        --itp-lor-beam-len: 37px;
        --itp-lor-beam-w: 48px;
    }
}

@media (max-width: 767px) {
    .itp-lor-stack .itp-lor-inner,
    .itp-lor-stack.itp-lor-content-right .itp-lor-inner {
        flex-direction: column;
        text-align: center;
    }
    .itp-lor-stack .itp-lor-content {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .itp-lor-stack .itp-lor-desc { margin-left: auto; margin-right: auto; }
    .itp-lor-heading { font-size: 30px; }
    .itp-lor-ring {
        --itp-lor-size: 320px;
        --itp-lor-radius: 112px;
        --itp-lor-chip: 44px;
        --itp-lor-hub: 66px;
        --itp-lor-beam-len: 28px;
        --itp-lor-beam-w: 38px;
        --itp-lor-beam-blur: 5px;
    }
    .itp-lor-chip { padding: 9px; }
}

/* ============================================================
   CLIENTS SHOWCASE 2  (.itp-cs2-*)  - v2.11.0
   Split header (eyebrow + heading left, description right) over a
   continuously scrolling row of client logos with faded edges.
   ============================================================ */

.itp-cs2 {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 90px 24px;
    overflow: hidden;
}

.itp-cs2-inner {
    max-width: 1240px;
    margin: 0 auto;
}

/* ---------- header ---------- */
.itp-cs2-head {
    --itp-cs2-split: 52%;
    display: flex;
    gap: 60px;
    margin-bottom: 72px;
}

.itp-cs2-head-split .itp-cs2-head-left  { flex: 0 0 var(--itp-cs2-split); max-width: var(--itp-cs2-split); }
.itp-cs2-head-split .itp-cs2-head-right { flex: 1 1 auto; min-width: 0; padding-top: 26px; }

.itp-cs2-head-stacked { flex-direction: column; gap: 20px; }
.itp-cs2-head-stacked .itp-cs2-head-right { max-width: 720px; }

.itp-cs2-head-center {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}
.itp-cs2-head-center .itp-cs2-head-right { max-width: 680px; }

.itp-cs2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #0F1B2D;
}

.itp-cs2-eyebrow-ico {
    display: inline-flex;
    align-items: center;
    font-size: 14px;
    line-height: 1;
    color: #0F1B2D;
}
.itp-cs2-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }

.itp-cs2-eyebrow-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1;
}

.itp-cs2-heading {
    margin: 0;
    font-size: 44px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}

.itp-cs2-desc {
    margin: 0;
    font-size: 16px;
    line-height: 1.75;
    color: #4B5563;
}

/* ---------- logo strip ---------- */
.itp-cs2-strip {
    --itp-cs2-logo-h: 40px;
    --itp-cs2-box-h: 72px;
    --itp-cs2-card-pad: 20px;
    --itp-cs2-per: 6;
    --itp-cs2-op: .55;
    --itp-cs2-fade: 8%;
    --itp-cs2-tint: #8A94A0;
    position: relative;
    width: 100%;
    overflow: hidden;
    container-type: inline-size;
}

/* full-bleed: header keeps the max width, logos run edge to edge.
   Uses margin math (not 100vw width) so the scrollbar width is never added to
   the page, preventing the horizontal-overflow reflow loop on full-width
   templates. overflow:hidden on the strip keeps the row contained. */
.itp-cs2-bleed .itp-cs2-strip {
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    overflow-x: hidden;
}

.itp-cs2-fade-edges .itp-cs2-strip {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, black var(--itp-cs2-fade), black calc(100% - var(--itp-cs2-fade)), transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, black var(--itp-cs2-fade), black calc(100% - var(--itp-cs2-fade)), transparent 100%);
}

.itp-cs2-track {
    display: flex;
    align-items: center;
    gap: 90px;
    width: max-content;
    animation-duration: 45s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    will-change: transform;
}

.itp-cs2-track-left  { animation-name: itp-cs2-scroll-left; }
.itp-cs2-track-right { animation-name: itp-cs2-scroll-right; }

@keyframes itp-cs2-scroll-left {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes itp-cs2-scroll-right {
    from { transform: translate3d(-50%, 0, 0); }
    to   { transform: translate3d(0, 0, 0); }
}

.itp-cs2-pause-on-hover .itp-cs2-strip:hover .itp-cs2-track { animation-play-state: paused; }

/* scrolling off: centre the first set and hide the clone */
.itp-cs2-static .itp-cs2-track {
    animation: none;
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    row-gap: 40px;
}
.itp-cs2-static .itp-cs2-logo[aria-hidden="true"] { display: none; }

.itp-cs2-logo {
    --itp-cs2-scale: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-sizing: border-box;
    overflow: hidden;
}

/* AUTO: every card identical - strip width / logos-per-view. Logo centres inside. */
.itp-cs2-size-auto_equal .itp-cs2-logo {
    flex: 0 0 calc(100cqw / var(--itp-cs2-per));
    width: calc(100cqw / var(--itp-cs2-per));
    height: var(--itp-cs2-box-h);
    padding: var(--itp-cs2-card-pad);
}
.itp-cs2-size-auto_equal .itp-cs2-track { gap: 0 !important; }

/* Fallback for browsers without container query units (pre-2023) */
@supports not (width: 1cqw) {
    .itp-cs2-size-auto_equal .itp-cs2-logo { flex: 0 0 180px; width: 180px; }
}

/* NATURAL: card hugs the logo, spacing comes from the track gap */
.itp-cs2-size-natural .itp-cs2-logo { height: var(--itp-cs2-logo-h); }

.itp-cs2-logo-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

/* max-* rather than a fixed height: themes commonly ship img { height: auto !important },
   which would beat a height declaration and let the logo render at natural size. */
.itp-cs2-logo-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(var(--itp-cs2-logo-h) * var(--itp-cs2-scale));
    object-fit: contain;
    opacity: var(--itp-cs2-op);
    transition: opacity .3s ease, filter .3s ease;
}

.itp-cs2-logos-grayscale .itp-cs2-logo-img { filter: grayscale(1); }

/* tint: a flat colour block masked to the logo's own shape */
.itp-cs2-logos-tinted .itp-cs2-logo {
    background-color: var(--itp-cs2-tint);
    opacity: var(--itp-cs2-op);
    -webkit-mask-image: var(--itp-cs2-mask);
    mask-image: var(--itp-cs2-mask);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: opacity .3s ease;
}
/* the mask paints the card box, so the padding must not shrink it away from the logo */
.itp-cs2-logos-tinted.itp-cs2-size-auto_equal .itp-cs2-logo { padding: 0; }
/* the img stays in the flow to size the mask box, but is not painted */
.itp-cs2-logos-tinted .itp-cs2-logo-img { visibility: hidden; opacity: 1; }

.itp-cs2-hover-reveal .itp-cs2-logo:hover .itp-cs2-logo-img {
    filter: none;
    opacity: 1;
}
.itp-cs2-hover-reveal.itp-cs2-logos-tinted .itp-cs2-logo:hover {
    background-color: transparent;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
}
.itp-cs2-hover-reveal.itp-cs2-logos-tinted .itp-cs2-logo:hover .itp-cs2-logo-img {
    visibility: visible;
}

@media (prefers-reduced-motion: reduce) {
    .itp-cs2-track { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-cs2-heading { font-size: 34px; }
    .itp-cs2-head    { gap: 36px; margin-bottom: 56px; }
    .itp-cs2-size-natural .itp-cs2-track { gap: 64px; }
}

@media (max-width: 767px) {
    .itp-cs2 { padding: 56px 20px; }
    .itp-cs2-head-split { flex-direction: column; gap: 18px; }
    .itp-cs2-head-split .itp-cs2-head-left,
    .itp-cs2-head-split .itp-cs2-head-right {
        flex: 0 0 auto;
        max-width: 100%;
        padding-top: 0;
    }
    .itp-cs2-heading { font-size: 27px; }
    .itp-cs2-desc    { font-size: 15px; }
    .itp-cs2-head    { margin-bottom: 40px; }
    .itp-cs2-size-natural .itp-cs2-strip { --itp-cs2-logo-h: 28px; }
    .itp-cs2-size-natural .itp-cs2-track { gap: 44px; }
}

/* ============================================================
   COUNTER METER  (.itp-cnt-*)  - v2.12.0
   Shared by About Block 5 and About Block 6.
   ============================================================ */

.itp-cnt-wrap {
    --itp-cnt-dist: 28px;
    --itp-cnt-dur: 650ms;
    --itp-cnt-delay: 0ms;
}

.itp-cnt-num {
    display: inline-flex;
    align-items: baseline;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
}
.itp-cnt-pre, .itp-cnt-suf { display: inline-block; }

/* slide mode - resting state, then .itp-cnt-in is added on scroll into view */
.itp-cnt-slide {
    opacity: 0;
    transform: translate(var(--itp-cnt-dx, 0), var(--itp-cnt-dy, 0));
}
.itp-cnt-from-bottom { --itp-cnt-dy: var(--itp-cnt-dist); }
.itp-cnt-from-top    { --itp-cnt-dy: calc(var(--itp-cnt-dist) * -1); }
.itp-cnt-from-left   { --itp-cnt-dx: calc(var(--itp-cnt-dist) * -1); }
.itp-cnt-from-right  { --itp-cnt-dx: var(--itp-cnt-dist); }

.itp-cnt-slide.itp-cnt-in {
    opacity: 1;
    transform: translate(0, 0);
    transition: opacity var(--itp-cnt-dur) ease, transform var(--itp-cnt-dur) cubic-bezier(.22, 1, .36, 1);
    transition-delay: var(--itp-cnt-delay);
}

@media (prefers-reduced-motion: reduce) {
    .itp-cnt-slide { opacity: 1; transform: none; }
}

/* ============================================================
   ABOUT BLOCK 5  (.itp-ab5-*)  - v2.12.0
   ============================================================ */

.itp-ab5 {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 90px 24px;
}
.itp-ab5-inner { max-width: 1240px; margin: 0 auto; }

.itp-ab5-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 80px;
}
.itp-ab5-media-left .itp-ab5-top-content { order: 2; }
.itp-ab5-media-left .itp-ab5-top-media   { order: 1; }

.itp-ab5-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #0F1B2D;
}
.itp-ab5-eyebrow-ico { display: inline-flex; font-size: 14px; line-height: 1; }
.itp-ab5-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ab5-eyebrow-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1;
}

.itp-ab5-heading {
    margin: 0 0 18px;
    font-size: 42px;
    line-height: 1.16;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}

.itp-ab5-desc {
    margin: 0 0 30px;
    font-size: 16px;
    line-height: 1.75;
    color: #4B5563;
}

.itp-ab5-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 22px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.itp-ab5-li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
.itp-ab5-li-ico {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 16px;
    line-height: 1.5;
    color: #0F1B2D;
}
.itp-ab5-li-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ab5-li-text {
    font-size: 15px;
    line-height: 1.5;
    color: #0F1B2D;
}

.itp-ab5-img {
    display: block;
    width: 100%;
    height: 460px;
    object-fit: cover;
    border-radius: 24px;
}

.itp-ab5-bottom {
    --itp-ab5-side-w: 300px;
    display: grid;
    grid-template-columns: var(--itp-ab5-side-w) 1fr;
    gap: 40px;
    align-items: center;
}
.itp-ab5-no-side .itp-ab5-bottom { grid-template-columns: 1fr; }

.itp-ab5-side-media .itp-ab5-img { height: 300px; }

.itp-ab5-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 20px;
}

.itp-ab5-stat {
    background-color: #FFFFFF;
    border: 1px solid #E8EAEE;
    border-radius: 22px;
    padding: 34px 22px;
    text-align: center;
}
.itp-ab5-stat .itp-cnt-num { color: #0F1B2D; }
.itp-ab5-stat .itp-cnt-wrap { margin-bottom: 12px; }

.itp-ab5-stat-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    color: #0F1B2D;
    margin-bottom: 8px;
}
.itp-ab5-stat-desc {
    font-size: 14px;
    line-height: 1.6;
    color: #6B7280;
}

/* ============================================================
   ABOUT BLOCK 6  (.itp-ab6-*)  - v2.12.0
   ============================================================ */

.itp-ab6 {
    --itp-ab6-accent: #D8FF4F;
    --itp-ab6-on-accent: #0F1B2D;
    position: relative;
    width: 100%;
    background-color: #28514A;
    padding: 80px 24px;
}
.itp-ab6-inner { max-width: 1240px; margin: 0 auto; }

.itp-ab6-head {
    text-align: center;
    margin-bottom: 56px;
}
.itp-ab6-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #FFFFFF;
}
.itp-ab6-eyebrow-ico { display: inline-flex; font-size: 14px; line-height: 1; }
.itp-ab6-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ab6-eyebrow-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1;
}
.itp-ab6-heading {
    margin: 0;
    font-size: 40px;
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.itp-ab6-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    margin-bottom: 72px;
}
.itp-ab6-main-single { grid-template-columns: 1fr; }
.itp-ab6-media-left .itp-ab6-content { order: 2; }
.itp-ab6-media-left .itp-ab6-media   { order: 1; }

.itp-ab6-quote {
    margin: 0 0 16px;
    font-size: 28px;
    line-height: 1.3;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #FFFFFF;
}
.itp-ab6-desc {
    margin: 0 0 32px;
    font-size: 15px;
    line-height: 1.75;
    color: rgba(255, 255, 255, .82);
}

.itp-ab6-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 28px;
    row-gap: 18px;
    margin: 0 0 34px;
    padding: 0;
    list-style: none;
}
.itp-ab6-li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin: 0;
}
.itp-ab6-li-ico {
    display: inline-flex;
    flex-shrink: 0;
    font-size: 15px;
    line-height: 1.5;
    color: #FFFFFF;
}
.itp-ab6-li-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ab6-li-text {
    font-size: 15px;
    line-height: 1.5;
    color: #FFFFFF;
}

.itp-ab6-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 8px 8px 8px 24px;
    border-radius: 999px;
    background-color: var(--itp-ab6-accent);
    color: var(--itp-ab6-on-accent);
    text-decoration: none;
    transition: transform .3s ease, filter .3s ease;
}
.itp-ab6-btn:hover { transform: translateY(-2px); filter: brightness(1.05); }
.itp-ab6-btn:focus-visible { outline: 2px solid #FFFFFF; outline-offset: 3px; }
.itp-ab6-btn-text { font-size: 15px; font-weight: 700; line-height: 1; }
.itp-ab6-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #0F1B2D;
    color: #FFFFFF;
    font-size: 12px;
    flex-shrink: 0;
}
.itp-ab6-btn-ico svg { width: 1em; height: 1em; fill: currentColor; }

/* ---------- media panel ---------- */
.itp-ab6-media {
    position: relative;
    height: 440px;
    border-radius: 20px;
    overflow: hidden;
}
.itp-ab6-media-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.itp-ab6-media-overlay {
    position: absolute;
    inset: 0;
    background: #0B1F1C;
    opacity: .25;
    pointer-events: none;
}

.itp-ab6-play {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
    z-index: 2;
}
.itp-ab6-play-bottom-left   { left: 28px; bottom: 28px; }
.itp-ab6-play-bottom-center { left: 50%; bottom: 28px; transform: translateX(-50%); }
.itp-ab6-play-center        { left: 50%; top: 50%; transform: translate(-50%, -50%); }

.itp-ab6-play-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: var(--itp-ab6-accent);
    color: var(--itp-ab6-on-accent);
    flex-shrink: 0;
    transition: transform .3s ease;
}
.itp-ab6-play-btn svg { width: 32%; height: auto; fill: currentColor; margin-left: 3px; }
.itp-ab6-play:hover .itp-ab6-play-btn { transform: scale(1.08); }

.itp-ab6-play-label {
    font-size: 15px;
    font-weight: 600;
    color: #FFFFFF;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* ---------- stat cards ---------- */
.itp-ab6-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 22px;
}

.itp-ab6-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background-color: rgba(255, 255, 255, .03);
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 14px;
    padding: 30px 26px;
}
.itp-ab6-stat .itp-cnt-num { color: #FFFFFF; font-size: 42px; }
.itp-ab6-stat .itp-cnt-wrap { margin-bottom: 6px; }

.itp-ab6-stat-text { min-width: 0; }
.itp-ab6-stat-title {
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: #FFFFFF;
}

.itp-ab6-stat-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 46px;
    line-height: 1;
    color: var(--itp-ab6-accent);
}
.itp-ab6-stat-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ab6-stat-ico img { width: 46px; height: auto; display: block; }

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-ab5-top, .itp-ab6-main { gap: 36px; }
    .itp-ab5-heading { font-size: 32px; }
    .itp-ab6-heading { font-size: 30px; }
    .itp-ab6-quote   { font-size: 23px; }
    .itp-ab5-stats, .itp-ab6-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .itp-ab5-bottom  { grid-template-columns: 1fr; }
    .itp-ab5-side-media .itp-ab5-img { height: 240px; }
}

@media (max-width: 767px) {
    .itp-ab5, .itp-ab6 { padding: 56px 20px; }
    .itp-ab5-top, .itp-ab6-main {
        grid-template-columns: 1fr;
        margin-bottom: 44px;
    }
    .itp-ab5-media-left .itp-ab5-top-content,
    .itp-ab5-media-left .itp-ab5-top-media,
    .itp-ab6-media-left .itp-ab6-content,
    .itp-ab6-media-left .itp-ab6-media { order: 0; }
    .itp-ab5-heading { font-size: 26px; }
    .itp-ab6-heading { font-size: 25px; }
    .itp-ab6-quote   { font-size: 20px; }
    .itp-ab5-list, .itp-ab6-list { grid-template-columns: 1fr; grid-auto-flow: row !important; }
    .itp-ab5-stats, .itp-ab6-stats { grid-template-columns: 1fr; }
    .itp-ab5-img { height: 280px; }
    .itp-ab6-media { height: 260px; }
    .itp-cnt-num { font-size: 34px; }
    .itp-ab6-stat .itp-cnt-num { font-size: 34px; }
    .itp-ab6-play-bottom-left { left: 18px; bottom: 18px; }
}

/* ============================================================
   HOW WE WORK  (.itp-hww-*)  - v2.13.0
   Split copy + pill button on one side, icon feature grid on the other.
   ============================================================ */

.itp-hww {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 90px 24px;
}

.itp-hww-inner {
    --itp-hww-left: 40%;
    display: flex;
    align-items: center;
    gap: 90px;
    max-width: 1240px;
    margin: 0 auto;
}
.itp-hww-copy-right .itp-hww-inner { flex-direction: row-reverse; }
.itp-hww-grid-only .itp-hww-inner  { display: block; }

.itp-hww-left {
    flex: 0 0 var(--itp-hww-left);
    max-width: var(--itp-hww-left);
}

.itp-hww-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: #0F1B2D;
}
.itp-hww-eyebrow-ico { display: inline-flex; font-size: 14px; line-height: 1; }
.itp-hww-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-hww-eyebrow-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1;
}

.itp-hww-heading {
    margin: 0 0 20px;
    font-size: 42px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}

.itp-hww-desc {
    margin: 0 0 32px;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
}

.itp-hww-btn {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    padding: 8px 8px 8px 26px;
    border-radius: 999px;
    background-color: #D8FF4F;
    color: #0F1B2D;
    text-decoration: none;
    transition: transform .3s ease, filter .3s ease, background-color .3s ease;
}
.itp-hww-btn:hover { transform: translateY(-2px); filter: brightness(1.04); }
.itp-hww-btn:focus-visible { outline: 2px solid #0F1B2D; outline-offset: 3px; }
.itp-hww-btn-text { font-size: 15px; font-weight: 700; line-height: 1; }
.itp-hww-btn-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #0F1B2D;
    color: #FFFFFF;
    font-size: 12px;
    flex-shrink: 0;
    transition: transform .3s ease;
}
.itp-hww-btn-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-hww-btn:hover .itp-hww-btn-ico { transform: translateX(3px); }

/* ---------- feature grid ---------- */
.itp-hww-grid {
    flex: 1 1 auto;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 44px;
    row-gap: 48px;
}

.itp-hww-item {
    display: flex;
    align-items: flex-start;
    gap: 22px;
    text-decoration: none;
    transition: transform .3s ease;
}
.itp-hww-ico-top .itp-hww-item { flex-direction: column; }

.itp-hww-hoverable .itp-hww-item:hover { transform: translateY(-4px); }

.itp-hww-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 52px;
    line-height: 1;
    color: #0F1B2D;
}
.itp-hww-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-hww-ico img { width: 52px; height: auto; display: block; }

.itp-hww-item-body {
    display: block;
    min-width: 0;
}

.itp-hww-item-title {
    display: block;
    margin-bottom: 8px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #0F1B2D;
}

.itp-hww-item-desc {
    display: block;
    font-size: 15px;
    line-height: 1.6;
    color: #4B5563;
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-hww-inner   { gap: 44px; }
    .itp-hww-heading { font-size: 32px; }
    .itp-hww-grid    { column-gap: 28px; row-gap: 34px; }
    .itp-hww-ico     { font-size: 42px; }
    .itp-hww-ico img { width: 42px; }
    .itp-hww-item-title { font-size: 18px; }
}

@media (max-width: 767px) {
    .itp-hww { padding: 56px 20px; }
    .itp-hww-inner,
    .itp-hww-copy-right .itp-hww-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    .itp-hww-left {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .itp-hww-heading { font-size: 26px; }
    .itp-hww-grid    { grid-template-columns: 1fr; row-gap: 30px; }
    .itp-hww-item    { gap: 16px; }
    .itp-hww-ico     { font-size: 38px; }
    .itp-hww-ico img { width: 38px; }
}

/* ============================================================
   PROCESS BLOCK 1  (.itp-pb1-*)  - v2.14.0
   Centred header + cards with a number badge nested into the
   top-right corner. Badge fills with the accent on hover.

   The "notch" is a ring of the section background painted around
   the badge via box-shadow spread - no mask/clip-path needed, so
   it survives any card radius and any background colour.
   ============================================================ */

.itp-pb1 {
    --itp-pb1-bg: #F4F3FC;
    --itp-pb1-accent: #7C6BE8;
    position: relative;
    width: 100%;
    background-color: var(--itp-pb1-bg);
    padding: 90px 24px;
}
.itp-pb1-inner { max-width: 1280px; margin: 0 auto; }

/* ---------- header ---------- */
.itp-pb1-head {
    text-align: center;
    margin-bottom: 70px;
}
.itp-pb1-eyebrow {
    font-size: 15px;
    font-weight: 500;
    color: #0F1B2D;
    margin-bottom: 14px;
}
.itp-pb1-heading {
    margin: 0 0 16px;
    font-size: 46px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}
.itp-pb1-desc {
    margin: 0 auto;
    max-width: 620px;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
}

/* ---------- grid ---------- */
.itp-pb1-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 46px;
}

.itp-pb1-card {
    --itp-pb1-badge: 68px;
    --itp-pb1-ring: 10px;
    --itp-pb1-badge-bg: #FFFFFF;
    --itp-pb1-badge-color: #0F1B2D;
    --itp-pb1-badge-bg-on: #7C6BE8;
    --itp-pb1-badge-color-on: #FFFFFF;
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 36px 32px;
    background-color: #FFFFFF;
    border-radius: 26px;
    text-decoration: none;
    transition: transform .3s ease;
}
.itp-pb1-lift .itp-pb1-card:hover { transform: translateY(-6px); }

/* badge sits at the card's top-right, pushed out so the ring reads as a notch */
.itp-pb1-num {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--itp-pb1-badge);
    height: var(--itp-pb1-badge);
    transform: translate(38%, -14%);
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
    border-bottom-right-radius: 30px;
    border-bottom-left-radius: 22px;
    background-color: var(--itp-pb1-badge-bg);
    color: var(--itp-pb1-badge-color);
    font-size: 20px;
    font-weight: 600;
    line-height: 1;
    box-shadow: 0 0 0 var(--itp-pb1-ring) var(--itp-pb1-bg);
    transition: background-color .3s ease, color .3s ease;
}

/* highlighted by default, or hovered */
.itp-pb1-card.itp-pb1-on .itp-pb1-num,
.itp-pb1-card:hover .itp-pb1-num {
    background-color: var(--itp-pb1-badge-bg-on);
    color: var(--itp-pb1-badge-color-on);
}
/* as soon as any sibling is hovered, the default highlight stands down */
.itp-pb1-grid:hover .itp-pb1-card.itp-pb1-on:not(:hover) .itp-pb1-num {
    background-color: var(--itp-pb1-badge-bg);
    color: var(--itp-pb1-badge-color);
}

.itp-pb1-ico {
    display: inline-flex;
    align-items: center;
    margin-bottom: 60px;
    font-size: 52px;
    line-height: 1;
    color: #7C6BE8;
}
.itp-pb1-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-pb1-ico img { width: 52px; height: auto; display: block; }

.itp-pb1-card-title {
    display: block;
    margin-bottom: 24px;
    font-size: 23px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #0F1B2D;
}

.itp-pb1-rule {
    display: block;
    width: 100%;
    height: 1px;
    background-color: #E8E8F2;
}

/* pinned to the bottom so the rules line up no matter the text length */
.itp-pb1-card-desc {
    display: block;
    margin-top: auto;
    padding-top: 32px;
    font-size: 15px;
    line-height: 1.65;
    color: #6B7280;
}

/* ============================================================
   PROCESS BLOCK 2  (.itp-pb2-*)  - v2.14.0
   Outlined cards that fill completely on hover and reveal a button.
   Every colour is a CSS variable so the fill is one swap, not
   a rule per element.
   ============================================================ */

.itp-pb2 {
    --itp-pb2-accent: #3B3777;
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 90px 24px;
}
.itp-pb2-inner { max-width: 1280px; margin: 0 auto; }

/* ---------- header ---------- */
.itp-pb2-head {
    text-align: center;
    margin-bottom: 66px;
}

.itp-pb2-pill {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 5px 22px 5px 5px;
    border: 1px solid #3B3777;
    border-radius: 999px;
}
.itp-pb2-pill-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background-color: #3B3777;
    color: #FFFFFF;
    font-size: 14px;
    flex-shrink: 0;
}
.itp-pb2-pill-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-pb2-pill-text {
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    color: #3B3777;
}

.itp-pb2-heading {
    margin: 0 0 14px;
    font-size: 46px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}
.itp-pb2-hl { color: #5A54B8; }

.itp-pb2-desc {
    margin: 0 auto;
    max-width: 600px;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
}

/* ---------- grid ---------- */
.itp-pb2-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
}

.itp-pb2-card {
    --itp-pb2-speed: 350ms;
    --itp-pb2-bg: #FFFFFF;
    --itp-pb2-border: #E5E7EB;
    --itp-pb2-num: #D9DBE1;
    --itp-pb2-ico: #3B3777;
    --itp-pb2-title: #0F1B2D;
    --itp-pb2-text: #6B7280;
    /* filled state - falls back to the section accent when not overridden */
    --itp-pb2-bg-on: var(--itp-pb2-accent);
    --itp-pb2-border-on: var(--itp-pb2-accent);
    --itp-pb2-num-on: #FFFFFF;
    --itp-pb2-ico-on: #FFFFFF;
    --itp-pb2-title-on: #FFFFFF;
    --itp-pb2-text-on: rgba(255, 255, 255, .85);

    --itp-pb2-c-bg: var(--itp-pb2-bg);
    --itp-pb2-c-border: var(--itp-pb2-border);
    --itp-pb2-c-num: var(--itp-pb2-num);
    --itp-pb2-c-ico: var(--itp-pb2-ico);
    --itp-pb2-c-title: var(--itp-pb2-title);
    --itp-pb2-c-text: var(--itp-pb2-text);

    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 430px;
    padding: 30px;
    background-color: var(--itp-pb2-c-bg);
    border: 1px solid var(--itp-pb2-c-border);
    border-radius: 18px;
    transition: background-color var(--itp-pb2-speed) ease,
                border-color var(--itp-pb2-speed) ease,
                transform .3s ease;
}

/* one swap flips every colour in the card */
.itp-pb2-card.itp-pb2-on,
.itp-pb2-card:hover {
    --itp-pb2-c-bg: var(--itp-pb2-bg-on);
    --itp-pb2-c-border: var(--itp-pb2-border-on);
    --itp-pb2-c-num: var(--itp-pb2-num-on);
    --itp-pb2-c-ico: var(--itp-pb2-ico-on);
    --itp-pb2-c-title: var(--itp-pb2-title-on);
    --itp-pb2-c-text: var(--itp-pb2-text-on);
}
/* default fill stands down when a sibling is hovered */
.itp-pb2-grid:hover .itp-pb2-card.itp-pb2-on:not(:hover) {
    --itp-pb2-c-bg: var(--itp-pb2-bg);
    --itp-pb2-c-border: var(--itp-pb2-border);
    --itp-pb2-c-num: var(--itp-pb2-num);
    --itp-pb2-c-ico: var(--itp-pb2-ico);
    --itp-pb2-c-title: var(--itp-pb2-title);
    --itp-pb2-c-text: var(--itp-pb2-text);
}
.itp-pb2-lift .itp-pb2-card:hover { transform: translateY(-6px); }

.itp-pb2-num {
    position: absolute;
    top: 26px;
    right: 30px;
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--itp-pb2-c-num);
    transition: color var(--itp-pb2-speed) ease;
}

/* content is bottom-anchored, so titles align across cards and the
   filled card's icon rides up to make room for its button */
.itp-pb2-body { margin-top: auto; }

.itp-pb2-ico {
    display: inline-flex;
    align-items: center;
    margin-bottom: 26px;
    font-size: 46px;
    line-height: 1;
    color: var(--itp-pb2-c-ico);
    transition: color var(--itp-pb2-speed) ease;
}
.itp-pb2-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-pb2-ico img { width: 46px; height: auto; display: block; }

/* swap image icons only when a light "filled state" version was supplied */
.itp-pb2-ico-on { display: none; }
.itp-pb2-ico-dual.itp-pb2-ico .itp-pb2-ico-idle { display: block; }

.itp-pb2-card.itp-pb2-on .itp-pb2-ico-dual .itp-pb2-ico-on,
.itp-pb2-card:hover .itp-pb2-ico-dual .itp-pb2-ico-on { display: block; }
.itp-pb2-card.itp-pb2-on .itp-pb2-ico-dual .itp-pb2-ico-idle,
.itp-pb2-card:hover .itp-pb2-ico-dual .itp-pb2-ico-idle { display: none; }

.itp-pb2-grid:hover .itp-pb2-card.itp-pb2-on:not(:hover) .itp-pb2-ico-dual .itp-pb2-ico-on { display: none; }
.itp-pb2-grid:hover .itp-pb2-card.itp-pb2-on:not(:hover) .itp-pb2-ico-dual .itp-pb2-ico-idle { display: block; }

.itp-pb2-card .itp-pb2-card-title {
    margin: 0 0 12px;
    font-size: 21px;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.01em;
    /* Doubled ancestor so the widget's own colour wins over a theme rule that
       styles headings globally (e.g. .elementor-widget h3 { color: ... }),
       which was overriding the Title Colour control. */
    color: var(--itp-pb2-c-title);
    transition: color var(--itp-pb2-speed) ease;
}

.itp-pb2-card-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--itp-pb2-c-text);
    transition: color var(--itp-pb2-speed) ease;
}

/* ---------- card button ---------- */
.itp-pb2-btn-wrap {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    opacity: 0;
    overflow: hidden;
    transition: grid-template-rows var(--itp-pb2-speed) ease,
                opacity var(--itp-pb2-speed) ease,
                margin-top var(--itp-pb2-speed) ease;
}
.itp-pb2-btn-wrap > * { min-height: 0; }

.itp-pb2-btn-always .itp-pb2-btn-wrap,
.itp-pb2-card.itp-pb2-on .itp-pb2-btn-wrap,
.itp-pb2-card:hover .itp-pb2-btn-wrap {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: 26px;
}
.itp-pb2-btn-active .itp-pb2-grid:hover .itp-pb2-card.itp-pb2-on:not(:hover) .itp-pb2-btn-wrap {
    grid-template-rows: 0fr;
    opacity: 0;
    margin-top: 0;
}

.itp-pb2-btn {
    display: block;
    width: 100%;
    padding: 15px 20px;
    border-radius: 8px;
    background-color: #FFFFFF;
    color: #0F1B2D;
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    text-align: center;
    text-decoration: none;
    transition: filter .25s ease;
}
.itp-pb2-btn:hover { filter: brightness(.94); }
.itp-pb2-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
    .itp-pb1-card, .itp-pb1-num,
    .itp-pb2-card, .itp-pb2-num, .itp-pb2-ico,
    .itp-pb2-card-title, .itp-pb2-card-desc, .itp-pb2-btn-wrap { transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-pb1-heading, .itp-pb2-heading { font-size: 34px; }
    .itp-pb1-grid { gap: 40px; }
    .itp-pb1-card, .itp-pb2-card { min-height: 380px; }
    .itp-pb1-ico  { margin-bottom: 36px; }
    .itp-pb1-card-title, .itp-pb2-card-title { font-size: 19px; }
}

@media (max-width: 767px) {
    .itp-pb1, .itp-pb2 { padding: 56px 20px; }
    .itp-pb1-head { margin-bottom: 44px; }
    .itp-pb2-head { margin-bottom: 40px; }
    .itp-pb1-heading, .itp-pb2-heading { font-size: 27px; }
    .itp-pb1-grid, .itp-pb2-grid { grid-template-columns: 1fr; }
    .itp-pb1-grid { gap: 34px; }
    .itp-pb1-card, .itp-pb2-card { min-height: 0; }
    .itp-pb1-ico  { margin-bottom: 28px; }
    .itp-pb1-card-desc { padding-top: 22px; }
    .itp-pb1-card { padding: 28px 24px; }
    .itp-pb2-num  { font-size: 32px; }
    /* no hover on touch - show the filled card's button permanently */
    .itp-pb2-btn-active .itp-pb2-card.itp-pb2-on .itp-pb2-btn-wrap {
        grid-template-rows: 1fr;
        opacity: 1;
        margin-top: 22px;
    }
}

/* ============================================================
   FAQ BLOCK 1  (.itp-faq1-*)  - v2.15.0
   Multi-column accordion. Open item = dark header joined to a
   tinted answer panel as one rounded card.

   Panel height animates with grid-template-rows 0fr -> 1fr, so
   answers of any length animate without JS measuring anything.
   ============================================================ */

.itp-faq1 {
    --itp-faq1-accent: #2A5049;
    --itp-faq1-lime: #D8FF4F;
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 80px 24px;
}
.itp-faq1-inner { max-width: 1280px; margin: 0 auto; }

/* ---------- header ---------- */
.itp-faq1-head {
    text-align: center;
    margin-bottom: 62px;
}
.itp-faq1-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
    color: #0F1B2D;
}
.itp-faq1-eyebrow-ico { display: inline-flex; font-size: 13px; line-height: 1; }
.itp-faq1-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-faq1-eyebrow-text {
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.4px;
    line-height: 1;
}
.itp-faq1-heading {
    margin: 0;
    font-size: 46px;
    line-height: 1.14;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #0F1B2D;
}
.itp-faq1-hl { color: var(--itp-faq1-accent); }
.itp-faq1-desc {
    margin: 14px auto 0;
    max-width: 640px;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
}

/* ---------- columns ---------- */
.itp-faq1-cols {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 34px;
    align-items: start;
}
.itp-faq1-col {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---------- item ---------- */
.itp-faq1-item {
    --itp-faq1-speed: 350ms;
    --itp-faq1-item-bg: #FFFFFF;
    --itp-faq1-item-border: #E5E7EB;
    --itp-faq1-q-color: #0F1B2D;
    --itp-faq1-tog-bg: var(--itp-faq1-accent);
    --itp-faq1-tog-color: #FFFFFF;
    --itp-faq1-q-bg-on: var(--itp-faq1-accent);
    --itp-faq1-q-color-on: #FFFFFF;
    --itp-faq1-tog-bg-on: var(--itp-faq1-lime);
    --itp-faq1-tog-color-on: #0F1B2D;
    --itp-faq1-panel-bg: #F4F5F5;
    --itp-faq1-a-color: #4B5563;

    background-color: var(--itp-faq1-item-bg);
    border: 1px solid var(--itp-faq1-item-border);
    border-radius: 14px;
    overflow: hidden;
    transition: border-color var(--itp-faq1-speed) ease;
}
/* open card: the border would draw a line between header and panel */
.itp-faq1-item.itp-faq1-open { border-color: transparent; }

.itp-faq1-q-head {
    margin: 0;
    font: inherit;
    color: inherit;
}

/* The question row is a real <button> for keyboard and screen-reader support,
   which means themes that style `button` globally will otherwise paint their
   brand colour straight over it. The extra .itp-faq1 ancestor lifts specificity
   above a plain element selector, and the appearance/box-shadow resets stop
   theme button chrome bleeding through. */
.itp-faq1 .itp-faq1-q,
.itp-faq1 .itp-faq1-q:hover,
.itp-faq1 .itp-faq1-q:focus {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 22px 20px 22px 26px;
    margin: 0;
    background-color: var(--itp-faq1-q-bg, transparent);
    background-image: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    cursor: pointer;
    color: var(--itp-faq1-q-color);
    transition: background-color var(--itp-faq1-speed) ease, color var(--itp-faq1-speed) ease;
}
.itp-faq1-q:focus-visible {
    outline: 2px solid var(--itp-faq1-accent);
    outline-offset: -3px;
}
.itp-faq1-tog-left .itp-faq1-q { flex-direction: row-reverse; }

.itp-faq1-q-text {
    flex: 1 1 auto;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.01em;
}

.itp-faq1-tog {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 9px;
    background-color: var(--itp-faq1-tog-bg);
    color: var(--itp-faq1-tog-color);
    font-size: 13px;
    line-height: 1;
    transition: background-color var(--itp-faq1-speed) ease, color var(--itp-faq1-speed) ease;
}
.itp-faq1-tog svg { width: 1em; height: 1em; fill: currentColor; }
.itp-faq1-tog-open { display: none; }

/* open state */
.itp-faq1 .itp-faq1-open .itp-faq1-q,
.itp-faq1 .itp-faq1-open .itp-faq1-q:hover,
.itp-faq1 .itp-faq1-open .itp-faq1-q:focus {
    background-color: var(--itp-faq1-q-bg-on);
    color: var(--itp-faq1-q-color-on);
}
.itp-faq1-open .itp-faq1-tog {
    background-color: var(--itp-faq1-tog-bg-on);
    color: var(--itp-faq1-tog-color-on);
}
.itp-faq1-open .itp-faq1-tog-open   { display: inline-flex; }
.itp-faq1-open .itp-faq1-tog-closed { display: none; }

/* ---------- panel ---------- */
.itp-faq1-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--itp-faq1-speed) ease;
}
.itp-faq1-open .itp-faq1-panel { grid-template-rows: 1fr; }

.itp-faq1-a-outer {
    min-height: 0;
    overflow: hidden;
    background-color: var(--itp-faq1-panel-bg);
}
.itp-faq1-a-inner { padding: 26px 26px 30px; }

.itp-faq1-a {
    font-size: 15px;
    line-height: 1.75;
    color: var(--itp-faq1-a-color);
}
.itp-faq1-a > :first-child { margin-top: 0; }
.itp-faq1-a > :last-child  { margin-bottom: 0; }
.itp-faq1-a a { color: var(--itp-faq1-accent); text-decoration: underline; }

@media (prefers-reduced-motion: reduce) {
    .itp-faq1-panel, .itp-faq1-q, .itp-faq1-tog, .itp-faq1-item { transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-faq1-heading { font-size: 34px; }
    .itp-faq1-q-text  { font-size: 17px; }
    .itp-faq1-cols    { gap: 22px; }
}

@media (max-width: 767px) {
    .itp-faq1 { padding: 56px 20px; }
    .itp-faq1-head    { margin-bottom: 36px; }
    .itp-faq1-heading { font-size: 27px; }
    .itp-faq1-cols    { grid-template-columns: 1fr !important; gap: 18px; }
    .itp-faq1-q       { padding: 18px 16px 18px 18px; gap: 12px; }
    .itp-faq1-q-text  { font-size: 16px; }
    .itp-faq1-a-inner { padding: 20px 18px 24px; }
}

/* ============================================================
   USP CAROUSEL  (.itp-usp-*)  - v2.16.0
   Two-tone heading over framed image cards with a tinted body.
   Arrows sit outside the track, centred on the image band.
   ============================================================ */

.itp-usp {
    /* image height and frame padding drive the card AND the arrow centring,
       so they live as variables rather than being set on each element */
    --itp-usp-img-h: 230px;
    --itp-usp-pad: 13px;
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 70px 24px;
}
.itp-usp-inner { max-width: 1300px; margin: 0 auto; }

/* ---------- heading ---------- */
.itp-usp-head {
    text-align: center;
    margin-bottom: 42px;
}
.itp-usp-heading {
    margin: 0;
    font-size: 38px;
    line-height: 1.2;
    font-weight: 400;
    letter-spacing: -0.01em;
    color: #1F2328;
}
.itp-usp-heading-bold  { font-weight: 800; }
.itp-usp-heading-light { font-weight: 400; }
.itp-usp-desc {
    margin: 12px auto 0;
    max-width: 700px;
    font-size: 16px;
    line-height: 1.7;
    color: #4B5563;
}

/* ---------- stage ---------- */
.itp-usp-stage { position: relative; }

/* the stage must not clip the arrows, but the track still has to hide
   the slides queued outside it - so clip on the swiper, not the stage */
.itp-usp-swiper { overflow: hidden; }

.itp-usp-slide { height: auto; }
.itp-usp-equal .itp-usp-slide { display: flex; }
.itp-usp-equal .itp-usp-card  { width: 100%; }

/* ---------- card ---------- */
.itp-usp-card {
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #E3E6EB;
    border-radius: 2px;
    padding: var(--itp-usp-pad);
    text-decoration: none;
    transition: transform .3s ease, box-shadow .3s ease;
}
.itp-usp-lift .itp-usp-card:hover { transform: translateY(-5px); }

.itp-usp-media {
    position: relative;
    height: var(--itp-usp-img-h);
    overflow: hidden;
    flex-shrink: 0;
}
.itp-usp-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.itp-usp-zoom .itp-usp-card:hover .itp-usp-media img { transform: scale(1.06); }

.itp-usp-body {
    flex: 1 1 auto;
    background-color: #E7ECF4;
    padding: 24px 22px 28px;
}

.itp-usp-title {
    margin: 0 0 6px;
    font-size: 19px;
    font-weight: 700;
    line-height: 1.3;
    color: #1F2328;
}

.itp-usp-card-desc {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: #3F454D;
}

/* ---------- arrows ---------- */
.itp-usp-arrow {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background-color: #FFFFFF;
    color: #1F2328;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(15, 27, 45, .16);
    transition: background-color .25s ease, color .25s ease, transform .25s ease, opacity .25s ease;
}
.itp-usp-arrow:hover { transform: scale(1.06); }
.itp-usp-arrow:focus-visible { outline: 2px solid #1F2328; outline-offset: 3px; }
.itp-usp-arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }

.itp-usp-arrow-prev { left: -28px; }
.itp-usp-arrow-next { right: -28px; }

/* centred on the image band, matching the reference, rather than the whole card */
.itp-usp-arrows-image .itp-usp-arrow {
    top: calc(var(--itp-usp-pad) + (var(--itp-usp-img-h) / 2));
    transform: translateY(-50%);
}
.itp-usp-arrows-image .itp-usp-arrow:hover { transform: translateY(-50%) scale(1.06); }

.itp-usp-arrows-card .itp-usp-arrow {
    top: 50%;
    transform: translateY(-50%);
}
.itp-usp-arrows-card .itp-usp-arrow:hover { transform: translateY(-50%) scale(1.06); }

/* ---------- dots ---------- */
.itp-usp-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}
.itp-usp-pagination .swiper-pagination-bullet {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #C9CFD8;
    opacity: 1;
    cursor: pointer;
    transition: background-color .25s ease, transform .25s ease;
}
.itp-usp-pagination .swiper-pagination-bullet-active {
    background-color: #1F2328;
    transform: scale(1.2);
}

@media (prefers-reduced-motion: reduce) {
    .itp-usp-card, .itp-usp-media img, .itp-usp-arrow { transition: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1400px) {
    /* pull the arrows inside once there is no room beside the track */
    .itp-usp-arrow-prev { left: 8px; }
    .itp-usp-arrow-next { right: 8px; }
}

@media (max-width: 1024px) {
    .itp-usp-heading { font-size: 30px; }
    .itp-usp-arrow   { width: 46px; height: 46px; }
}

@media (max-width: 767px) {
    .itp-usp { padding: 50px 20px; }
    .itp-usp-head    { margin-bottom: 28px; }
    .itp-usp-heading { font-size: 24px; }
    .itp-usp-body    { padding: 18px 16px 22px; }
    .itp-usp-title   { font-size: 17px; }
    .itp-usp-card-desc { font-size: 14px; }
    .itp-usp-arrow   { width: 40px; height: 40px; }
    .itp-usp-arrow svg { width: 17px; height: 17px; }
    .itp-usp-arrow-prev { left: 2px; }
    .itp-usp-arrow-next { right: 2px; }
}

/* ============================================================
   INDUSTRY GRID  (.itp-ind-*)  - v2.17.0
   Image cards with a title, and buttons that reveal on hover.
   On touch screens (no hover) the buttons are shown by default.

   Slide reveal uses grid-template-rows 0fr -> 1fr, so button
   height animates with no hardcoded value.
   ============================================================ */

.itp-ind {
    position: relative;
    width: 100%;
    background-color: #FFFFFF;
    padding: 60px 24px;
}
.itp-ind-inner { max-width: 1240px; margin: 0 auto; }

.itp-ind-head { margin-bottom: 40px; text-align: center; }
.itp-ind-heading {
    margin: 0;
    font-size: 38px;
    line-height: 1.18;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #1F2328;
}

/* ---------- grid ---------- */
.itp-ind-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 28px;
}

.itp-ind-card {
    --itp-ind-shadow: rgba(15, 27, 45, .14);
    display: flex;
    flex-direction: column;
    background-color: #FFFFFF;
    border: 1px solid #E3E6EB;
    border-radius: 4px;
    padding: 14px;
    transition: box-shadow .3s ease, transform .3s ease;
}
.itp-ind-shadow .itp-ind-card:hover {
    box-shadow: 0 18px 40px var(--itp-ind-shadow);
}

.itp-ind-media {
    height: 250px;
    overflow: hidden;
    flex-shrink: 0;
}
.itp-ind-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}
.itp-ind-zoom .itp-ind-card:hover .itp-ind-media img { transform: scale(1.06); }

.itp-ind-title {
    margin: 0;
    padding: 22px 6px 6px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
    color: #1F2328;
}

/* ---------- reveal wrapper ---------- */
.itp-ind-reveal {
    display: grid;
    grid-template-rows: 0fr;
    opacity: 0;
    transition: grid-template-rows .35s ease, opacity .35s ease;
}
.itp-ind-reveal-outer {
    min-height: 0;
    overflow: hidden;
}
.itp-ind-btns {
    display: flex;
    gap: 12px;
    padding: 16px 6px 6px;
}
.itp-ind-btns-stack .itp-ind-btns { flex-direction: column; }

/* slide reveal (default) - expands the card on hover */
.itp-ind-reveal-slide .itp-ind-card:hover .itp-ind-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* fade reveal - collapsed when idle, fades in on hover with no slide */
.itp-ind-reveal-fade .itp-ind-reveal {
    grid-template-rows: 1fr;
    opacity: 0;
    pointer-events: none;
    transition: opacity .35s ease;
}
.itp-ind-reveal-fade .itp-ind-card:hover .itp-ind-reveal {
    opacity: 1;
    pointer-events: auto;
}

/* always visible */
.itp-ind-reveal-always .itp-ind-reveal {
    grid-template-rows: 1fr;
    opacity: 1;
}

/* ---------- buttons ---------- */
.itp-ind-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 15px 28px;
    border-radius: 999px;
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color .25s ease, color .25s ease, transform .25s ease;
}
.itp-ind-btn:hover { transform: translateY(-2px); }
.itp-ind-btn:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

.itp-ind-btn-1 { background-color: #14213D; color: #FFFFFF; }
.itp-ind-btn-1:hover { background-color: #3B6FB5; color: #FFFFFF; }
.itp-ind-btn-2 { background-color: #3B6FB5; color: #FFFFFF; }
.itp-ind-btn-2:hover { background-color: #14213D; color: #FFFFFF; }

.itp-ind-btn-full .itp-ind-btn { flex: 1 1 auto; }

.itp-ind-btn-ico {
    display: inline-flex;
    align-items: center;
    font-size: 0.95em;
    transition: transform .25s ease;
}
.itp-ind-btn-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ind-btn:hover .itp-ind-btn-ico { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .itp-ind-card, .itp-ind-media img, .itp-ind-reveal, .itp-ind-btn, .itp-ind-btn-ico { transition: none !important; }
}

/* ---------- TOUCH: no hover, so buttons show by default ---------- */
@media (hover: none) {
    .itp-ind-reveal {
        grid-template-rows: 1fr !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
    .itp-ind-btn:hover { transform: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
    .itp-ind-heading { font-size: 30px; }
    .itp-ind-media   { height: 210px; }
    .itp-ind-title   { font-size: 19px; padding-top: 18px; }
}

@media (max-width: 767px) {
    .itp-ind { padding: 44px 20px; }
    .itp-ind-heading { font-size: 25px; }
    .itp-ind-media   { height: 200px; }
    .itp-ind-title   { font-size: 18px; }
    /* stack the two buttons on narrow screens so neither is cramped */
    .itp-ind-btns    { flex-direction: column; }
    .itp-ind-btn     { width: 100%; }
}

/* ============================================================
   ACCORDION BLOCK  (single product)  .itp-ab-*   - v2.19.0
   Variant-free sibling of the Accordion Tab. Reuses .itp-at-*
   for the accordion body + KF grid; own layout + CTA classes.
   ============================================================ */

.itp-ab { width: 100%; padding: 40px 24px; }

.itp-ab-wrapper {
    --itp-ab-img-w: 45%;
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1240px;
    margin: 0 auto;
}
.itp-ab-imgpos-right .itp-ab-wrapper { flex-direction: row-reverse; }

.itp-ab-image-col {
    flex: 0 0 var(--itp-ab-img-w);
    max-width: var(--itp-ab-img-w);
    display: flex;
    align-items: center;
    justify-content: center;
}
.itp-ab-product-img {
    display: block;
    max-width: 100%;
    height: auto;
}

.itp-ab-content-col {
    flex: 1 1 auto;
    min-width: 0;
}

.itp-ab-title {
    margin: 0 0 28px;
    font-size: 40px;
    line-height: 1.15;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #1155CC;
}

/* CTA - gradient by default, matching the reference; solid option available */
.itp-ab-cta-wrap { margin-top: 28px; }
.itp-ab-cta {
    --itp-ab-cta-from: #1E5FBF;
    --itp-ab-cta-to: #D91E5F;
    --itp-ab-cta-angle: 90deg;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 16px 38px;
    border-radius: 100px;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-decoration: none;
    transition: transform .25s ease, box-shadow .25s ease, filter .25s ease, background .25s ease;
}
.itp-ab-cta-gradient {
    background: linear-gradient(var(--itp-ab-cta-angle), var(--itp-ab-cta-from) 0%, var(--itp-ab-cta-to) 100%);
}
.itp-ab-cta-solid { background: #101E41; }
.itp-ab-cta-gradient:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 26px rgba(30, 95, 191, 0.32);
    filter: brightness(1.05);
    color: #fff;
}
.itp-ab-cta-solid:hover {
    background: #00407C;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 64, 124, 0.35);
    color: #fff;
}
.itp-ab-cta:focus-visible { outline: 2px solid #1155CC; outline-offset: 3px; }
.itp-ab-cta-icon {
    display: inline-block;
    font-size: 18px;
    line-height: 1;
    transition: transform .25s ease;
}
.itp-ab-cta:hover .itp-ab-cta-icon { transform: translateX(4px); }

/* responsive */
@media (max-width: 991px) {
    .itp-ab-wrapper,
    .itp-ab-imgpos-right .itp-ab-wrapper {
        flex-direction: column;
        align-items: stretch;
        gap: 32px;
    }
    .itp-ab-image-col {
        flex: 0 0 auto;
        max-width: 100%;
    }
    .itp-ab-title { font-size: 30px; }
}
@media (max-width: 767px) {
    .itp-ab { padding: 32px 20px; }
    .itp-ab-title { font-size: 25px; margin-bottom: 20px; }
    .itp-ab-cta { padding: 14px 30px; font-size: 16px; }
}

/* ============================================================
   SERVICE CAROUSEL  (.itp-svc-*)  - v2.20.0
   Heading block + carousel of image-top cards with a tinted body
   carrying title, sub-heading, description and a Read More button.
   ============================================================ */

.itp-svc { width: 100%; padding: 30px 24px 60px; }
.itp-svc-inner { max-width: 1320px; margin: 0 auto; }

.itp-svc-head { margin-bottom: 34px; }
.itp-svc-eyebrow {
    font-size: 14px; font-weight: 600; letter-spacing: 1.2px;
    text-transform: uppercase; color: #1F2328; margin-bottom: 10px;
}
.itp-svc-heading {
    margin: 0 0 14px; font-size: 38px; line-height: 1.12;
    font-weight: 800; letter-spacing: -0.01em; color: #111;
    text-transform: uppercase;
}
.itp-svc-head-desc { margin: 0; max-width: 1000px; font-size: 16px; line-height: 1.65; color: #4B5563; }

.itp-svc-stage { position: relative; }
.itp-svc-swiper { overflow: hidden; }
.itp-svc-slide { height: auto; }
.itp-svc-slide { display: flex; }

.itp-svc-card {
    display: flex;
    flex-direction: column;
    width: 100%;
    background: #fff;
}
.itp-svc-media { height: 370px; overflow: hidden; flex-shrink: 0; }
.itp-svc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.itp-svc-body {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    background: #D9D9D9;
    padding: 26px 24px 30px;
    text-align: center;
}
.itp-svc-title { margin: 0; font-size: 22px; font-weight: 700; line-height: 1.25; color: #111; }
.itp-svc-sub   { display: block; margin-top: 4px; font-size: 15px; font-weight: 500; color: #333; }
.itp-svc-desc  { margin: 12px 0 0; font-size: 15px; line-height: 1.55; color: #4B5563; }

.itp-svc-btn-wrap { display: flex; justify-content: center; margin-top: auto; padding-top: 22px; }
.itp-svc-btn {
    display: inline-flex; align-items: center; gap: 9px;
    padding: 13px 26px; border-radius: 6px;
    background: #2C5F8A; color: #fff;
    font-size: 15px; font-weight: 600; text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}
.itp-svc-btn:hover { background: #1F4666; color: #fff; transform: translateY(-2px); }
.itp-svc-btn:focus-visible { outline: 2px solid #1F4666; outline-offset: 2px; }
.itp-svc-btn-arrow { transition: transform .25s ease; }
.itp-svc-btn:hover .itp-svc-btn-arrow { transform: translateX(3px); }

/* arrows */
.itp-svc-arrow {
    position: absolute; top: 185px; transform: translateY(-50%); z-index: 5;
    display: flex; align-items: center; justify-content: center;
    width: 46px; height: 46px; border: 0; border-radius: 50%;
    background: #2C5F8A; color: #fff; cursor: pointer;
    box-shadow: 0 4px 14px rgba(15,27,45,.2);
    transition: transform .25s ease, opacity .25s ease;
}
.itp-svc-arrow:hover { transform: translateY(-50%) scale(1.06); }
.itp-svc-arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }
.itp-svc-arrow-prev { left: -8px; }
.itp-svc-arrow-next { right: -8px; }

/* dots */
.itp-svc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 26px; }
.itp-svc-pagination .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 50%; background: #C9CFD8; opacity: 1; cursor: pointer; transition: background-color .25s ease, transform .25s ease; }
.itp-svc-pagination .swiper-pagination-bullet-active { background: #2C5F8A; transform: scale(1.2); }

@media (max-width: 1024px) {
    .itp-svc-heading { font-size: 28px; }
    .itp-svc-media   { height: 300px; }
    .itp-svc-arrow   { top: 150px; }
}
@media (max-width: 767px) {
    .itp-svc { padding: 24px 20px 48px; }
    .itp-svc-heading { font-size: 23px; }
    .itp-svc-media   { height: 260px; }
    .itp-svc-arrow   { display: none; }
}

/* ============================================================
   TEAM SPLIT CAROUSEL  (.itp-tsc-*)  - v2.20.0
   Copy block on the left, carousel of team cards on the right.
   ============================================================ */

.itp-tsc { width: 100%; padding: 60px 24px; }
.itp-tsc-inner {
    --itp-tsc-copy: 34%;
    display: flex;
    align-items: center;
    gap: 56px;
    max-width: 1300px;
    margin: 0 auto;
}

.itp-tsc-copy {
    flex: 0 0 var(--itp-tsc-copy);
    max-width: var(--itp-tsc-copy);
}
.itp-tsc-eyebrow {
    font-size: 14px; font-weight: 600; letter-spacing: 1px;
    text-transform: uppercase; color: #2A3B8F; margin-bottom: 16px;
}
.itp-tsc-heading {
    margin: 0 0 20px; font-size: 44px; line-height: 1.1;
    font-weight: 800; letter-spacing: -0.02em; color: #1A1A2E;
}
.itp-tsc-desc { margin: 0; font-size: 16px; line-height: 1.7; color: #5B6270; }

.itp-tsc-cta-wrap { margin-top: 30px; }
.itp-tsc-cta {
    display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 30px; border-radius: 8px;
    background: #2C5F8A; color: #fff;
    font-size: 16px; font-weight: 600; text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}
.itp-tsc-cta:hover { background: #1F4666; color: #fff; transform: translateY(-2px); }
.itp-tsc-cta:focus-visible { outline: 2px solid #1F4666; outline-offset: 3px; }
.itp-tsc-cta-ico { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,.18); font-size: 12px; transition: transform .25s ease; }
.itp-tsc-cta-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-tsc-cta:hover .itp-tsc-cta-ico { transform: translateX(3px); }

.itp-tsc-carousel-col { flex: 1 1 auto; min-width: 0; }
.itp-tsc-stage { position: relative; }
.itp-tsc-swiper { overflow: hidden; }
.itp-tsc-slide { height: auto; display: flex; }

.itp-tsc-card { display: flex; flex-direction: column; width: 100%; background: #fff; border-radius: 8px; overflow: hidden; text-decoration: none; }
.itp-tsc-media { height: 300px; overflow: hidden; flex-shrink: 0; }
.itp-tsc-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

.itp-tsc-body { flex: 1 1 auto; background: #D9D9D9; padding: 20px 16px 24px; text-align: center; }
.itp-tsc-name { display: block; font-size: 21px; font-weight: 700; line-height: 1.25; color: #1A1A2E; }
.itp-tsc-role { display: block; margin-top: 4px; font-size: 15px; color: #4B5563; }

.itp-tsc-arrow {
    position: absolute; top: 150px; transform: translateY(-50%); z-index: 5;
    display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: #2C5F8A; color: #fff; cursor: pointer;
    box-shadow: 0 4px 14px rgba(15,27,45,.2);
    transition: transform .25s ease, opacity .25s ease;
}
.itp-tsc-arrow:hover { transform: translateY(-50%) scale(1.06); }
.itp-tsc-arrow.swiper-button-disabled { opacity: .35; pointer-events: none; }
.itp-tsc-arrow-prev { left: -8px; }
.itp-tsc-arrow-next { right: -8px; }

.itp-tsc-pagination { display: flex; justify-content: center; gap: 8px; margin-top: 24px; }
.itp-tsc-pagination .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 50%; background: #C9CFD8; opacity: 1; cursor: pointer; transition: background-color .25s ease, transform .25s ease; }
.itp-tsc-pagination .swiper-pagination-bullet-active { background: #2C5F8A; transform: scale(1.2); }

@media (max-width: 991px) {
    .itp-tsc-inner { flex-direction: column; align-items: stretch; gap: 36px; }
    .itp-tsc-copy  { flex: 0 0 auto; max-width: 100%; text-align: center; }
    .itp-tsc-cta-wrap { display: flex; justify-content: center; }
    .itp-tsc-heading  { font-size: 34px; }
}
@media (max-width: 767px) {
    .itp-tsc { padding: 48px 20px; }
    .itp-tsc-heading { font-size: 27px; }
    .itp-tsc-media   { height: 280px; }
    .itp-tsc-arrow   { display: none; }
}

/* ============================================================
   HERO CONTENT PIXEL OFFSETS  - v2.22.0
   Each hero exposes --<prefix>-ox / --<prefix>-oy, set by the
   "Offset X / Offset Y" controls. Both axes are combined into a
   SINGLE transform here, because two separate controls each
   writing `transform` would overwrite one another.

   transform is used rather than margin so the nudge is purely
   visual - it never reflows the sibling column or the breadcrumb.
   ============================================================ */

.itp-hb-content   { transform: translate( var(--itp-hb-c-ox,   0px), var(--itp-hb-c-oy,   0px) ); }
.itp-hs1-content  { transform: translate( var(--itp-hs1-c-ox,  0px), var(--itp-hs1-c-oy,  0px) ); }
.itp-hs2-content  { transform: translate( var(--itp-hs2-c-ox,  0px), var(--itp-hs2-c-oy,  0px) ); }
.itp-hsp-content  { transform: translate( var(--itp-hsp-c-ox,  0px), var(--itp-hsp-c-oy,  0px) ); }
.itp-hps-content  { transform: translate( var(--itp-hps-c-ox,  0px), var(--itp-hps-c-oy,  0px) ); }
.itp-hps2-content { transform: translate( var(--itp-hps2-c-ox, 0px), var(--itp-hps2-c-oy, 0px) ); }
.itp-hss-text     { transform: translate( var(--itp-hss-c-ox,  0px), var(--itp-hss-c-oy,  0px) ); }
.itp-hss-form     { transform: translate( var(--itp-hss-f-ox,  0px), var(--itp-hss-f-oy,  0px) ); }

/* ============================================================
   TYPEWRITER HERO  (.itp-tw-*)  - v2.24.0
   Static heading + a final phrase that types, deletes and cycles.

   The rotator is a grid where every hidden ghost phrase AND the
   live text share cell 1/1. The box therefore always matches the
   longest phrase, so the paragraph and button never jump while
   characters are being typed or deleted.
   ============================================================ */

.itp-tw { width: 100%; padding: 70px 24px; }
.itp-tw-inner { max-width: 900px; margin: 0 auto; }

.itp-tw-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #F97316;
    margin-bottom: 14px;
}

.itp-tw-heading {
    margin: 0 0 26px;
    font-size: 54px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.02em;
    color: #3D3F6B;
}
.itp-tw-static { display: inline; }
.itp-tw-newline .itp-tw-static { display: block; }

.itp-tw-rotator {
    display: inline-grid;
    vertical-align: top;
    color: #F97316;
}
.itp-tw-newline .itp-tw-rotator { display: grid; }

/* ghosts + live text stack in the same cell */
.itp-tw-ghost,
.itp-tw-live {
    grid-area: 1 / 1;
}
.itp-tw-ghost {
    visibility: hidden;
    pointer-events: none;
    /* the ghost must not be the thing that decides where the line breaks
       differently from the live text, so it shares identical typography */
    white-space: normal;
}
.itp-tw-live {
    align-self: start;
    justify-self: start;
}

/* When space is not reserved the box tracks the current phrase instead. */
.itp-tw:not(.itp-tw-reserve) .itp-tw-rotator { display: inline; }
.itp-tw:not(.itp-tw-reserve).itp-tw-newline .itp-tw-rotator { display: block; }

.itp-tw-cursor {
    display: inline-block;
    font-weight: 400;
    transform: translateY(-0.03em);
}
.itp-tw-blink .itp-tw-cursor { animation: itpTwBlink 1s step-end infinite; }
@keyframes itpTwBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}

/* Read by screen readers, invisible on screen. */
.itp-tw-sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.itp-tw-desc {
    margin: 0 0 34px;
    max-width: 720px;
    font-size: 18px;
    line-height: 1.7;
    color: #7B7BA6;
}

.itp-tw-cta-wrap { display: flex; }
.itp-tw-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 18px 36px;
    border-radius: 8px;
    background: #F97316;
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.itp-tw-cta:hover {
    background: #E2620A;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(249, 115, 22, .3);
}
.itp-tw-cta:focus-visible { outline: 2px solid #3D3F6B; outline-offset: 3px; }
.itp-tw-cta-ico { display: inline-flex; align-items: center; transition: transform .25s ease; }
.itp-tw-cta-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-tw-cta:hover .itp-tw-cta-ico { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
    .itp-tw-cursor { animation: none !important; }
    .itp-tw-cta { transition: none !important; }
}

@media (max-width: 1024px) {
    .itp-tw-heading { font-size: 40px; }
    .itp-tw-desc    { font-size: 17px; }
}
@media (max-width: 767px) {
    .itp-tw { padding: 48px 20px; }
    .itp-tw-heading { font-size: 30px; margin-bottom: 18px; }
    .itp-tw-desc    { font-size: 16px; margin-bottom: 26px; }
    .itp-tw-cta     { padding: 15px 28px; font-size: 16px; }
}

/* ============================================================
   IMAGE WITH FLOATING CARD  (.itp-ifc-*)  - v2.25.0
   Rounded image with a stats card overlapping a corner, drifting
   gently up and down. Chart is inline SVG built in PHP.
   ============================================================ */

.itp-ifc {
    --itp-ifc-glow: #FDE9B8;
    --itp-ifc-card-x: -70px;
    --itp-ifc-card-y: 20px;
    --itp-ifc-float: 12px;
    --itp-ifc-float-dur: 5s;
    --itp-ifc-scale: 1;
    position: relative;
    width: 100%;
    padding: 40px 24px 40px 90px;
    box-sizing: border-box;
}

.itp-ifc-stage {
    position: relative;
    width: 100%;
}

/* soft glow behind the image */
.itp-ifc-glow-on .itp-ifc-stage::before {
    content: "";
    position: absolute;
    inset: -8% -6% -6% -8%;
    background: radial-gradient(60% 55% at 30% 40%, var(--itp-ifc-glow) 0%, transparent 70%);
    filter: blur(10px);
    z-index: 0;
    pointer-events: none;
}

.itp-ifc-media {
    position: relative;
    z-index: 1;
    height: 620px;
    border-radius: 30px;
    overflow: hidden;
}
.itp-ifc-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ---------- card ---------- */
.itp-ifc-card {
    position: absolute;
    z-index: 3;
    width: 400px;
    max-width: 100%;
    background: #fff;
    border-radius: 18px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 18px 45px rgba(20, 30, 50, .16);
}
.itp-ifc-pos-bottom-left  .itp-ifc-card { left: var(--itp-ifc-card-x);  bottom: var(--itp-ifc-card-y); }
.itp-ifc-pos-bottom-right .itp-ifc-card { right: var(--itp-ifc-card-x); bottom: var(--itp-ifc-card-y); }
.itp-ifc-pos-top-left     .itp-ifc-card { left: var(--itp-ifc-card-x);  top: var(--itp-ifc-card-y); }
.itp-ifc-pos-top-right    .itp-ifc-card { right: var(--itp-ifc-card-x); top: var(--itp-ifc-card-y); }

/* Card Size. Applied as a transform so the chart SVG, text and spacing all
   shrink together in exact proportion. transform-origin is pinned to whichever
   corner the card is anchored to, so shrinking pulls it toward that corner
   rather than drifting away from it. */
.itp-ifc-card { transform: scale(var(--itp-ifc-scale)); }
.itp-ifc-pos-bottom-left  .itp-ifc-card { transform-origin: left bottom; }
.itp-ifc-pos-bottom-right .itp-ifc-card { transform-origin: right bottom; }
.itp-ifc-pos-top-left     .itp-ifc-card { transform-origin: left top; }
.itp-ifc-pos-top-right    .itp-ifc-card { transform-origin: right top; }

/* Float. The card is positioned with left/bottom, so animating transform
   keeps the offsets intact and stays off the layout thread. */
.itp-ifc-float-on .itp-ifc-card {
    animation: itpIfcFloat var(--itp-ifc-float-dur) ease-in-out infinite;
    will-change: transform;
}
@keyframes itpIfcFloat {
    0%, 100% { transform: scale(var(--itp-ifc-scale)) translateY(0); }
    50%      { transform: scale(var(--itp-ifc-scale)) translateY(calc(var(--itp-ifc-float) * -1)); }
}

/* Image drifts on a longer, offset rhythm so the two never bob in lockstep. */
.itp-ifc-float-img .itp-ifc-media {
    animation: itpIfcFloatImg calc(var(--itp-ifc-float-dur) * 1.6) ease-in-out infinite;
    animation-delay: -1.2s;
    will-change: transform;
}
@keyframes itpIfcFloatImg {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(calc(var(--itp-ifc-float) * -0.45)); }
}

/* ---------- card head ---------- */
.itp-ifc-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 10px;
}
.itp-ifc-title { font-size: 19px; font-weight: 700; color: #16233F; line-height: 1.25; }
.itp-ifc-sub   { font-size: 15px; color: #98A0AE; margin-top: 3px; }

.itp-ifc-legend { display: flex; flex-direction: column; gap: 7px; flex-shrink: 0; padding-top: 3px; }
.itp-ifc-leg {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #5A6474;
    white-space: nowrap;
}
.itp-ifc-leg i {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ---------- chart ---------- */
.itp-ifc-chart {
    --itp-ifc-axis: #98A0AE;
    --itp-ifc-grid: #EDEFF3;
    height: 200px;
    margin: 4px 0 16px;
}
.itp-ifc-chart svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------- footer ---------- */
.itp-ifc-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    flex-wrap: wrap;
    background: #FDEEEA;
    border-radius: 10px;
    padding: 12px 16px;
}
.itp-ifc-foot-label { font-size: 13px; color: #6B7280; }
.itp-ifc-foot-value { font-size: 22px; font-weight: 700; color: #16233F; line-height: 1.2; margin-top: 2px; }
.itp-ifc-foot-change {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 15px;
    font-weight: 600;
    color: #12A150;
}

@media (prefers-reduced-motion: reduce) {
    .itp-ifc-float-on .itp-ifc-card,
    .itp-ifc-float-img .itp-ifc-media { animation: none !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 1200px) {
    .itp-ifc { padding-left: 40px; }
    .itp-ifc-pos-bottom-left  .itp-ifc-card,
    .itp-ifc-pos-top-left     .itp-ifc-card { left: -30px; }
    .itp-ifc-pos-bottom-right .itp-ifc-card,
    .itp-ifc-pos-top-right    .itp-ifc-card { right: -30px; }
}

@media (max-width: 900px) {
    /* Overlapping a narrow screen would push the card off the viewport,
       so it stops overlapping and simply sits under the image. */
    .itp-ifc { padding: 30px 18px !important; }
    .itp-ifc-media { height: 420px; }
    .itp-ifc-card,
    .itp-ifc-card-dash,
    .itp-ifc-pos-bottom-left  .itp-ifc-card,
    .itp-ifc-pos-bottom-right .itp-ifc-card,
    .itp-ifc-pos-top-left     .itp-ifc-card,
    .itp-ifc-pos-top-right    .itp-ifc-card {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        bottom: auto;
        /* Force full width over the base 400px / 560px (dashboard) widths, which
           otherwise win as later same-specificity rules and overflow the phone. */
        width: 100% !important;
        max-width: 100% !important;
        margin-top: -40px;
        box-sizing: border-box;
        /* Once the card stacks it is in normal flow, and a scaled transform
           would leave dead space below it - its layout box stays full size.
           Full width at natural scale is the right answer on a phone. */
        transform: none !important;
    }
    .itp-ifc-float-on .itp-ifc-card { animation: none; }
}

@media (max-width: 600px) {
    .itp-ifc { overflow-x: hidden; }
    .itp-ifc-media { height: 340px; }
    .itp-ifc-card, .itp-ifc-card-dash  { padding: 18px; width: 100% !important; max-width: 100% !important; box-sizing: border-box; }
    .itp-ifc-title { font-size: 17px; }
    .itp-ifc-chart { height: 170px; }
    .itp-ifc-foot-value { font-size: 19px; }
    .itp-ifc-card-head { flex-direction: column; gap: 8px; }
    .itp-ifc-legend { flex-direction: row; gap: 14px; }
    .itp-ifc-tiles { grid-template-columns: 1fr !important; }
}

/* ---------- Image Floating Card: DASHBOARD layout (v2.26.0) ---------- */

.itp-ifc-card-dash { width: 560px; }

.itp-ifc-card-dash .itp-ifc-title { font-size: 26px; }
.itp-ifc-card-dash .itp-ifc-sub   { font-size: 16px; }
.itp-ifc-card-dash .itp-ifc-card-head { margin-bottom: 18px; align-items: center; }

/* period pill */
.itp-ifc-period {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    padding: 9px 14px;
    border: 1px solid #E3E6ED;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    color: #16233F;
    white-space: nowrap;
}
.itp-ifc-period svg { flex-shrink: 0; color: #6B7280; }

/* stat tiles */
.itp-ifc-tiles {
    --itp-ifc-tile-cols: 2;
    display: grid;
    grid-template-columns: repeat(var(--itp-ifc-tile-cols), minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.itp-ifc-tile {
    --itp-ifc-acc: #4C6FE7;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    /* the tile tint is derived from the accent, so one colour control drives
       the icon, the dot, the note and the background together */
    background: color-mix(in srgb, var(--itp-ifc-acc) 8%, #ffffff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .itp-ifc-tile { background: #F5F7FB; }
}
.itp-ifc-tile-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    flex-shrink: 0;
    border-radius: 50%;
    font-size: 19px;
    color: var(--itp-ifc-acc);
    background: color-mix(in srgb, var(--itp-ifc-acc) 16%, #ffffff);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .itp-ifc-tile-ico { background: rgba(255, 255, 255, .75); }
}
.itp-ifc-tile-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ifc-tile-body { min-width: 0; }
.itp-ifc-tile-label { font-size: 14px; color: #5A6474; }
.itp-ifc-tile-value { font-size: 24px; font-weight: 700; color: #16233F; line-height: 1.2; margin: 2px 0 3px; }
.itp-ifc-tile-note {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13px;
    color: var(--itp-ifc-acc);
}
.itp-ifc-tile-note i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--itp-ifc-acc);
    flex-shrink: 0;
}

/* chart heading row with inline legend */
.itp-ifc-chart-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.itp-ifc-chart-title { font-size: 18px; font-weight: 700; color: #16233F; }
.itp-ifc-legend-row { flex-direction: row; gap: 20px; padding-top: 0; }
.itp-ifc-legend-row .itp-ifc-leg { font-size: 14px; }
.itp-ifc-legend-row b {
    display: inline-block;
    width: 20px;
    height: 3px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* dashboard footer */
.itp-ifc-card-dash .itp-ifc-foot {
    background: #F7F8FA;
    border: 1px solid #EDEFF3;
    border-radius: 14px;
    padding: 16px 20px;
    gap: 16px;
}
.itp-ifc-foot-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #E4F6EA;
    color: #12A150;
    font-size: 19px;
}
.itp-ifc-foot-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-ifc-card-dash .itp-ifc-foot-left { flex: 1 1 auto; }
.itp-ifc-card-dash .itp-ifc-foot-label { font-size: 15px; }
.itp-ifc-card-dash .itp-ifc-foot-value { font-size: 26px; }
.itp-ifc-foot-right { text-align: right; flex-shrink: 0; }
.itp-ifc-card-dash .itp-ifc-foot-change { font-size: 19px; font-weight: 700; }
.itp-ifc-foot-note { font-size: 12.5px; color: #8A93A3; margin-top: 2px; }

@media (max-width: 600px) {
    .itp-ifc-tiles { grid-template-columns: 1fr !important; }
    .itp-ifc-card-dash .itp-ifc-title { font-size: 19px; }
    .itp-ifc-card-dash .itp-ifc-foot { flex-wrap: wrap; }
    .itp-ifc-foot-right { text-align: left; }
}

/* ============================================================
   THEME BUTTON DEFENCE  - v2.26.1
   Carousel arrows and accordion headers are real <button> elements,
   for keyboard and screen-reader support. The cost is that any theme
   styling `button` globally paints its brand colour over them, which
   is what happened on a build where the FAQ rows turned the theme's
   orange with no widget control able to override it.

   Each selector is doubled to lift specificity above a theme's
   element or single-class rules without resorting to !important,
   so the widget's own colour controls still win normally.
   ============================================================ */

.itp-cs1-arrow.itp-cs1-arrow,
.itp-pc-arrow.itp-pc-arrow,
.itp-rsc-arrow.itp-rsc-arrow,
.itp-svc-arrow.itp-svc-arrow,
.itp-team-arrow.itp-team-arrow,
.itp-tsc-arrow.itp-tsc-arrow,
.itp-tst-arrow.itp-tst-arrow,
.itp-usp-arrow.itp-usp-arrow,
.itp-vips-arrow.itp-vips-arrow,
.itp-hps-nav.itp-hps-nav,
.itp-hps2-nav.itp-hps2-nav {
    background-image: none;
    text-transform: none;
    letter-spacing: normal;
    -webkit-appearance: none;
    appearance: none;
}

/* ============================================================
   WHY US FEATURE BLOCK  (.itp-wus-*)  - v2.27.0
   Centred header, then image left + highlight cards right.
   Hovering (or clicking) a card highlights it and swaps the image.
   ============================================================ */

.itp-wus { width: 100%; padding: 70px 24px; }
.itp-wus-inner { max-width: 1180px; margin: 0 auto; }

/* ---- header ---- */
.itp-wus-head { text-align: center; margin-bottom: 56px; }
.itp-wus-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 9px 20px;
    border-radius: 999px;
    background: #FCEEDD;
    color: #E07B2E;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-bottom: 22px;
}
.itp-wus-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.itp-wus-heading {
    margin: 0 auto 22px;
    max-width: 900px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -0.02em;
}
.itp-wus-h1 { color: #0E1116; }
.itp-wus-h2 { color: #E07B2E; }
.itp-wus-desc {
    margin: 0 auto;
    max-width: 760px;
    font-size: 18px;
    line-height: 1.65;
    color: #5B6472;
}

/* ---- split ---- */
.itp-wus-split {
    --itp-wus-img-w: 44%;
    display: flex;
    align-items: stretch;
    gap: 60px;
}
.itp-wus-img-right .itp-wus-split { flex-direction: row-reverse; }

.itp-wus-media-col {
    flex: 0 0 var(--itp-wus-img-w);
    max-width: var(--itp-wus-img-w);
}
.itp-wus-media {
    position: relative;
    height: 100%;
    min-height: 420px;
    border-radius: 20px;
    overflow: hidden;
    background: #E9F3EE;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* When not matching card height, let the media size to its content. */
.itp-wus:not(.itp-wus-img-fit) .itp-wus-media { height: auto; }

.itp-wus-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* Per-card images stack above the default and fade in when active. */
.itp-wus-img-card { opacity: 0; transition: opacity .35s ease; pointer-events: none; }
.itp-wus-img-card[data-active="1"] { opacity: 1; }

.itp-wus-ph {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 40px 30px;
    color: #2D6154;
}
.itp-wus-ph-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 10px 26px rgba(45, 97, 84, .12);
    margin-bottom: 22px;
}
.itp-wus-ph-title { font-size: 22px; font-weight: 800; margin-bottom: 12px; }
.itp-wus-ph-sub { font-size: 14px; font-style: italic; line-height: 1.6; opacity: .85; max-width: 300px; }

/* ---- cards ---- */
.itp-wus-cards {
    --itp-wus-hl: #E07B2E;
    --itp-wus-hl-bg: #FFFFFF;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.itp-wus-card {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 24px 26px 24px 24px;
    background: #fff;
    border: 1.5px solid #ECEEF2;
    border-radius: 16px;
    cursor: pointer;
    transition: border-color .25s ease, box-shadow .25s ease, background-color .25s ease, transform .25s ease;
}
/* The highlight: applied to the default-active card, and to whichever card is
   hovered. When any card in the group is hovered, the default one stands down -
   so exactly one card is ever lit. */
.itp-wus-card.itp-wus-active {
    border-color: var(--itp-wus-hl);
    background: var(--itp-wus-hl-bg);
    box-shadow: 0 14px 30px rgba(224, 123, 46, .12);
}
.itp-wus-mode-hover .itp-wus-cards:hover .itp-wus-card.itp-wus-active:not(:hover) {
    border-color: #ECEEF2;
    box-shadow: none;
}
.itp-wus-mode-hover .itp-wus-card:hover {
    border-color: var(--itp-wus-hl);
    background: var(--itp-wus-hl-bg);
    box-shadow: 0 14px 30px rgba(224, 123, 46, .12);
    transform: translateY(-1px);
}
.itp-wus-card:focus-visible {
    outline: none;
    border-color: var(--itp-wus-hl);
    box-shadow: 0 0 0 3px rgba(224, 123, 46, .25);
}

.itp-wus-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    flex-shrink: 0;
    border-radius: 14px;
    font-size: 22px;
}
.itp-wus-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-wus-ico-green  { background: #E4F0EA; color: #2D6154; }
.itp-wus-ico-orange { background: #FCEAD8; color: #E07B2E; }

.itp-wus-card-body { min-width: 0; }
.itp-wus-card-title { margin: 0 0 7px; font-size: 19px; font-weight: 700; color: #0E1116; line-height: 1.3; }
.itp-wus-card-desc  { margin: 0; font-size: 15px; line-height: 1.6; color: #5B6472; }

/* ---- cta ---- */
.itp-wus-cta-wrap { display: flex; justify-content: center; margin-top: 50px; }
.itp-wus-cta {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 18px 40px;
    border-radius: 40px;
    background: #E07B2E;
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.itp-wus-cta:hover { background: #C96A22; color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(224, 123, 46, .32); }
.itp-wus-cta:focus-visible { outline: 2px solid #0E1116; outline-offset: 3px; }
.itp-wus-cta-ico { display: inline-flex; align-items: center; transition: transform .25s ease; }
.itp-wus-cta-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-wus-cta:hover .itp-wus-cta-ico { transform: translateX(4px); }

@media (prefers-reduced-motion: reduce) {
    .itp-wus-card, .itp-wus-cta, .itp-wus-img-card { transition: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 992px) {
    .itp-wus-split, .itp-wus-img-right .itp-wus-split {
        flex-direction: column;
        gap: 30px;
    }
    .itp-wus-media-col { flex: 0 0 auto; max-width: 100%; }
    .itp-wus-media { min-height: 320px; }
    .itp-wus-heading { font-size: 36px; }
}
@media (max-width: 600px) {
    .itp-wus { padding: 48px 18px; }
    .itp-wus-head { margin-bottom: 36px; }
    .itp-wus-heading { font-size: 27px; }
    .itp-wus-desc { font-size: 16px; }
    .itp-wus-media { min-height: 240px; }
    .itp-wus-card { padding: 18px; gap: 14px; }
    .itp-wus-ico { width: 48px; height: 48px; font-size: 18px; border-radius: 12px; }
    .itp-wus-card-title { font-size: 17px; }
    .itp-wus-cta { padding: 15px 30px; font-size: 16px; width: 100%; justify-content: center; }
}

/* Image Floating Card - linked card should not look like link text */
.itp-ifc-card-link { text-decoration: none; color: inherit; display: block; }
.itp-ifc-card-link:hover { text-decoration: none; }

/* ============================================================
   GLOBAL MOBILE SAFETY NET  - v2.27.2
   A backstop so no widget can horizontally overflow a phone,
   regardless of any fixed pixel widths set for desktop. Scoped
   to itp- panels/cards/forms/media so it never touches theme layout.
   ============================================================ */
@media (max-width: 600px) {
    [class*="itp-"] [class*="-card"],
    [class*="itp-"] [class*="-form"],
    [class*="itp-"] [class*="-panel"],
    [class*="itp-"] [class*="-media"],
    [class*="itp-"] [class*="-inner"],
    [class*="itp-"] [class*="-content"] {
        max-width: 100%;
    }
    /* Any itp row that lays out horizontally should be allowed to wrap
       rather than force horizontal scroll. */
    .itp-hss-bc-trail,
    .itp-hps-cta-row,
    .itp-hsp-cta-row,
    .itp-tw-cta-wrap,
    .itp-wus-cta-wrap { flex-wrap: wrap; }
}

/* ============================================================
   STACKING PROJECTS BLOCK  (.itp-spb-*)  - v2.28.0
   Left column (sticky) + right cards that pin on scroll and pile
   into a stack. Pure CSS: position:sticky with an increasing top
   offset per card. No scroll library.
   ============================================================ */

.itp-spb {
    --itp-spb-top: 24px;
    --itp-spb-step: 16px;
    --itp-spb-left-w: 42%;
    width: 100%;
    padding: 60px 24px;
}
.itp-spb-inner {
    display: flex;
    align-items: flex-start;
    gap: 50px;
    max-width: 1240px;
    margin: 0 auto;
}
.itp-spb-cards-left .itp-spb-inner { flex-direction: row-reverse; }
.itp-spb-no-left .itp-spb-inner { display: block; }

/* ---- left column ---- */
.itp-spb-left {
    flex: 0 0 var(--itp-spb-left-w);
    max-width: var(--itp-spb-left-w);
}
/* Sticky so the intro holds its place while the cards scroll and stack. */
.itp-spb-left-sticky {
    position: sticky;
    top: var(--itp-spb-top);
}
.itp-spb-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 15px;
    font-weight: 600;
    color: #6B7B2E;
    margin-bottom: 16px;
}
.itp-spb-eyebrow-ico { display: inline-flex; font-size: 1.1em; }
.itp-spb-eyebrow-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-spb-heading {
    margin: 0 0 16px;
    font-size: 46px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.02em;
    color: #111;
}
.itp-spb-desc { margin: 0 0 24px; font-size: 17px; line-height: 1.6; color: #5B6472; max-width: 460px; }

.itp-spb-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 26px;
    border-radius: 40px;
    background: #D4E85A;
    color: #1A1A1A;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color .25s ease, transform .25s ease;
}
.itp-spb-btn:hover { background: #C2D849; color: #1A1A1A; transform: translateY(-2px); }
.itp-spb-btn-ico { display: inline-flex; }
.itp-spb-btn-ico svg { width: 1em; height: 1em; fill: currentColor; }

/* ---- built-in form ---- */
.itp-spb-form { margin-top: 26px; background: #0E1A3A; border-radius: 18px; padding: 26px; }
.itp-spb-form-title { font-size: 22px; font-weight: 700; color: #fff; margin-bottom: 18px; }
.itp-spb-form-body { display: flex; flex-direction: column; gap: 12px; }
.itp-spb-form-body input,
.itp-spb-form-body textarea {
    width: 100%;
    padding: 14px 16px;
    border: 0;
    border-radius: 10px;
    background: #EEF1F7;
    font-size: 15px;
    color: #1A1A1A;
    box-sizing: border-box;
    font-family: inherit;
}
.itp-spb-form-body textarea { resize: vertical; min-height: 90px; }
.itp-spb-form-submit {
    width: 100%;
    padding: 15px;
    border: 0;
    border-radius: 40px;
    background: #D4E85A;
    color: #1A1A1A;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 4px;
    transition: filter .2s ease, transform .2s ease;
    font-family: inherit;
}
.itp-spb-form-submit:hover { filter: brightness(.96); transform: translateY(-1px); }

/* ---- cards / stacking ---- */
.itp-spb-cards {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.itp-spb-card {
    position: sticky;
    /* top + z-index are set inline per card so each pins lower than the last */
    background: #fff;
    border: 1px solid #ECECEC;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,.10);
    text-decoration: none;
    color: inherit;
    display: block;
}
.itp-spb-card-link { cursor: pointer; transition: transform .25s ease; }
.itp-spb-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 22px 24px 22px 26px;
}
.itp-spb-card-text { min-width: 0; }
.itp-spb-card-title { margin: 0; font-size: 24px; font-weight: 700; line-height: 1.25; color: #111; }
.itp-spb-card-desc  { margin: 8px 0 0; font-size: 15px; line-height: 1.55; color: #6B7280; }

.itp-spb-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #D4E85A;
    color: #1A1A1A;
    transition: transform .25s ease;
}
.itp-spb-card-link:hover .itp-spb-arrow { transform: rotate(45deg); }

.itp-spb-card-media { width: 100%; height: 260px; overflow: hidden; }
.itp-spb-card-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
    .itp-spb-btn, .itp-spb-card-link, .itp-spb-arrow, .itp-spb-form-submit { transition: none !important; }
}

/* ---- responsive ---- */
@media (max-width: 991px) {
    .itp-spb-inner, .itp-spb-cards-left .itp-spb-inner {
        flex-direction: column;
        gap: 30px;
    }
    .itp-spb-left { flex: 0 0 auto; max-width: 100%; }
    /* the intro no longer needs to stick once it is above the cards */
    .itp-spb-left-sticky { position: static; }
    .itp-spb-heading { font-size: 36px; }
}
@media (max-width: 600px) {
    .itp-spb { padding: 48px 18px; }
    .itp-spb-heading { font-size: 28px; }
    .itp-spb-desc { font-size: 15px; }
    .itp-spb-card-title { font-size: 19px; }
    .itp-spb-card-head { padding: 18px; gap: 14px; }
    .itp-spb-arrow { width: 44px; height: 44px; }
    .itp-spb-card-media { height: 190px; }
    .itp-spb-btn { width: 100%; justify-content: center; }
}
/* Mobile mode: plain list turns off the sticky pinning so cards scroll normally. */
@media (max-width: 991px) {
    .itp-spb-mob-list .itp-spb-card {
        position: relative !important;
        top: auto !important;
    }
}

/* ============================================================
   HERO STYLE SERVICE - mobile breadcrumb options  (v2.29.0)
   • Hide on mobile only, or
   • Show the trail as a plain eyebrow-style line (HOME / SERVICE)
     with the white box, icon, shadow and rounded corners stripped.
   Both apply at <=767px only; desktop is untouched.
   ============================================================ */
@media (max-width: 767px) {

    /* hide on mobile only */
    .itp-hss-bc-hide-mobile .itp-hss-breadcrumb { display: none !important; }

    /* plain eyebrow-style text on mobile */
    .itp-hss-bc-plain-mobile .itp-hss-breadcrumb {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        padding: 0 !important;
        margin-top: 14px !important;
        gap: 0 !important;
    }
    /* the home icon chip is redundant once it is plain text */
    .itp-hss-bc-plain-mobile .itp-hss-bc-icon { display: none !important; }

    .itp-hss-bc-plain-mobile .itp-hss-bc-trail {
        font-size: 13px !important;
        font-weight: 700 !important;
        letter-spacing: 1.2px !important;
        text-transform: uppercase !important;
        color: var(--itp-hss-bc-mob-color, #1A8FA8) !important;
        flex-wrap: wrap;
    }
    .itp-hss-bc-plain-mobile .itp-hss-bc-link,
    .itp-hss-bc-plain-mobile .itp-hss-bc-current,
    .itp-hss-bc-plain-mobile .itp-hss-bc-sep {
        color: inherit !important;
    }
    .itp-hss-bc-plain-mobile .itp-hss-bc-link { text-decoration: none; }
}

/* ============================================================
   SCROLL SERVICES BLOCK  (.itp-ssb-*)  - v2.30.0
   White panel on a coloured section. Left text + right image pairs.
   Two modes:
     natural - each pair is a row; the media column sticks so text
               scrolls past a held image. Pure CSS.
     pinned  - the section sticks to the viewport and JS swaps the
               active text + image as you scroll through it.
   ============================================================ */

.itp-ssb {
    width: 100%;
    padding: 70px 24px;
    background: #E4572E;
}
.itp-ssb-inner { max-width: 1240px; margin: 0 auto; }

.itp-ssb-head { margin-bottom: 40px; }
.itp-ssb-heading {
    margin: 0;
    font-size: 56px;
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #fff;
}

.itp-ssb-panel {
    background: #fff;
    border-radius: 8px;
    padding: 60px;
}

/* ---- row (shared) ---- */
.itp-ssb-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.itp-ssb-img-left .itp-ssb-row { direction: rtl; }
.itp-ssb-img-left .itp-ssb-row > * { direction: ltr; }

.itp-ssb-title {
    margin: 0 0 20px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    text-transform: uppercase;
    color: #111;
}
.itp-ssb-desc { margin: 0 0 24px; font-size: 17px; line-height: 1.7; color: #4B5563; }
.itp-ssb-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #111;
    text-decoration: none;
    padding-bottom: 4px;
    border-bottom: 2px solid #E4572E;
    transition: gap .25s ease;
}
.itp-ssb-link:hover { gap: 16px; color: #111; }
.itp-ssb-link svg { width: 1.1em; height: 1.1em; }

.itp-ssb-media { width: 100%; height: 320px; border-radius: 4px; overflow: hidden; }
.itp-ssb-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ============ NATURAL MODE ============ */
/* Each row is normal flow, but the image column sticks within its row so the
   text scrolls past a held image, giving the paired-scroll feel with no JS. */
.itp-ssb-mode-natural .itp-ssb-row + .itp-ssb-row { margin-top: 70px; }
.itp-ssb-mode-natural .itp-ssb-media-col {
    position: sticky;
    top: 90px;
    align-self: start;
}

/* ============ PINNED MODE ============ */
/* The .itp-ssb-pin element is tall (count * 100vh); its inner stage sticks to
   the viewport, and JS toggles which text/media is active as you scroll. */
.itp-ssb-mode-pinned .itp-ssb-pin {
    position: relative;
    height: calc(var(--itp-ssb-count, 3) * 100vh);
}
.itp-ssb-mode-pinned .itp-ssb-stage {
    position: sticky;
    top: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* In pinned mode the text and media layers stack; only the active one shows. */
.itp-ssb-mode-pinned .itp-ssb-text-col,
.itp-ssb-mode-pinned .itp-ssb-media-col { position: relative; }
.itp-ssb-mode-pinned .itp-ssb-text,
.itp-ssb-mode-pinned .itp-ssb-media {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transition: opacity .5s ease;
}
.itp-ssb-mode-pinned .itp-ssb-text { display: flex; flex-direction: column; justify-content: center; }
.itp-ssb-mode-pinned .itp-ssb-text.itp-ssb-active,
.itp-ssb-mode-pinned .itp-ssb-media.itp-ssb-active { opacity: 1; visibility: visible; }
/* give the stacked columns height to fill */
.itp-ssb-mode-pinned .itp-ssb-text-col { min-height: 340px; }
.itp-ssb-mode-pinned .itp-ssb-media { height: auto; }

/* progress dots */
.itp-ssb-progress { display: flex; gap: 8px; justify-content: center; margin-top: 40px; }
.itp-ssb-progress span {
    width: 26px; height: 4px; border-radius: 3px;
    background: rgba(0,0,0,.12);
    transition: background-color .3s ease;
}
.itp-ssb-progress span.itp-ssb-on { background: #E4572E; }

@media (prefers-reduced-motion: reduce) {
    .itp-ssb-text, .itp-ssb-media, .itp-ssb-link, .itp-ssb-progress span { transition: none !important; }
}

/* ============ RESPONSIVE ============ */
/* On mobile BOTH modes fall back to a plain stacked list: image on top, text
   below. Pinned's sticky/absolute stacking is unwound so nothing overlaps. */
@media (max-width: 900px) {
    .itp-ssb { padding: 48px 18px; }
    .itp-ssb-heading { font-size: 34px; }
    .itp-ssb-panel { padding: 30px 22px; }

    .itp-ssb-row, .itp-ssb-img-left .itp-ssb-row {
        grid-template-columns: 1fr;
        gap: 24px;
        direction: ltr;
    }
    /* image on top */
    .itp-ssb-media-col { order: -1; }
    .itp-ssb-title { font-size: 27px; }
    .itp-ssb-media { height: 240px; }

    /* natural: drop the sticky image */
    .itp-ssb-mode-natural .itp-ssb-media-col { position: static; }
    .itp-ssb-mode-natural .itp-ssb-row + .itp-ssb-row { margin-top: 44px; }

    /* pinned: unwind the pin entirely into a normal list */
    .itp-ssb-mode-pinned .itp-ssb-pin { height: auto !important; }
    .itp-ssb-mode-pinned .itp-ssb-stage { position: static; min-height: 0; display: block; }
    .itp-ssb-mode-pinned .itp-ssb-text-col,
    .itp-ssb-mode-pinned .itp-ssb-media-col { min-height: 0; }
    /* turn the absolute stacks back into flow, and make every pair show */
    .itp-ssb-mode-pinned .itp-ssb-row {
        display: block;
    }
    .itp-ssb-mode-pinned .itp-ssb-text,
    .itp-ssb-mode-pinned .itp-ssb-media {
        position: relative;
        inset: auto;
        opacity: 1 !important;
        visibility: visible !important;
    }
    /* pair each text with its media by re-flowing them: since both loops render
       in order, we show media then text per index using flex order on wrappers */
    .itp-ssb-mode-pinned .itp-ssb-media { margin-bottom: 24px; height: 240px; }
    .itp-ssb-mode-pinned .itp-ssb-text  { margin-bottom: 44px; }
    .itp-ssb-progress { display: none; }
}

/* ============================================================
   PROCESS FLOW STAGES  (.itp-pfs-*)  - v2.31.0
   Centred header, a row of stage cards joined by arrows, and a
   full-width banner below. Icon OR image per card. Fully responsive:
   the row wraps to fewer columns and the arrows rotate to point
   down once cards stack.
   ============================================================ */

.itp-pfs { width: 100%; padding: 60px 24px; background: #F7F9FB; }
.itp-pfs-inner { max-width: 1200px; margin: 0 auto; }

/* ---- header ---- */
.itp-pfs-head { text-align: center; margin-bottom: 46px; }
.itp-pfs-heading {
    margin: 0 0 14px;
    font-size: 40px;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #12233B;
}
.itp-pfs-sub { margin: 0; font-size: 18px; font-style: italic; color: #5B6472; }

/* ---- grid of cells (card + trailing arrow) ---- */
.itp-pfs-grid {
    --itp-pfs-cols: 4;
    --itp-pfs-gap: 20px;
    display: grid;
    grid-template-columns: repeat(var(--itp-pfs-cols), 1fr);
    gap: var(--itp-pfs-gap);
    align-items: stretch;
}
.itp-pfs-cell { position: relative; display: flex; }
.itp-pfs-card {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 22px 30px;
    background: #fff;
    border: 1.5px solid #E7EBF0;
    border-radius: 14px;
    text-decoration: none;
    color: inherit;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
}
.itp-pfs-card-link:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(18,35,59,.10); }
.itp-pfs-card-hl {
    border-color: #2563EB;
    box-shadow: 0 0 0 1px #2563EB;
}

.itp-pfs-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #B8892B;
    margin-bottom: 18px;
}
.itp-pfs-media { margin-bottom: 16px; display: flex; align-items: center; justify-content: center; min-height: 48px; }
.itp-pfs-icon { display: inline-flex; font-size: 40px; line-height: 1; color: #2563EB; }
.itp-pfs-icon svg { width: 1em; height: 1em; fill: currentColor; }
.itp-pfs-img { width: 72px; height: 72px; object-fit: cover; border-radius: 12px; }

.itp-pfs-title { margin: 0 0 12px; font-size: 21px; font-weight: 700; color: #12233B; line-height: 1.25; }
.itp-pfs-lines { display: flex; flex-direction: column; gap: 4px; }
.itp-pfs-line { font-size: 15px; line-height: 1.5; color: #5B6472; }

/* ---- arrows between cards ---- */
.itp-pfs-arrow {
    position: absolute;
    top: 50%;
    right: calc(var(--itp-pfs-gap) / -2);
    transform: translate(50%, -50%);
    z-index: 2;
    display: inline-flex;
    color: #2563EB;
    background: #F7F9FB;
    padding: 4px;
    border-radius: 50%;
}
.itp-pfs-arrow svg { width: 1.6em; height: 1.6em; }

/* ---- banner ---- */
.itp-pfs-banner {
    margin-top: 30px;
    background: #3C8C40;
    border-top: 3px solid #B8892B;
    border-radius: 12px;
    padding: 26px 30px;
    text-align: center;
    text-decoration: none;
    display: block;
    transition: filter .2s ease;
}
.itp-pfs-banner-link:hover { filter: brightness(.96); }
.itp-pfs-banner-main {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}
.itp-pfs-banner-ico { display: inline-flex; font-size: 24px; color: #fff; }
.itp-pfs-banner-ico svg { width: 1em; height: 1em; fill: currentColor; }
.itp-pfs-banner-title { font-size: 24px; font-weight: 700; color: #fff; }
.itp-pfs-banner-sub { margin-top: 8px; font-size: 15px; font-style: italic; color: #EAF3E6; }

@media (prefers-reduced-motion: reduce) {
    .itp-pfs-card, .itp-pfs-banner { transition: none !important; }
}

/* ============ RESPONSIVE ============ */
/* Tablet: fall to the tablet column count (default 2). Arrows only make sense
   pointing right between cards on the same row - on the last card of a row the
   right arrow would point into a gap, so we hide arrows once wrapped and show
   a downward one under each card instead. */
@media (max-width: 1024px) {
    .itp-pfs-grid { --itp-pfs-cols: 2; }
    .itp-pfs-heading { font-size: 32px; }
}
@media (max-width: 1024px) and (min-width: 601px) {
    /* between the two columns, keep the right arrow only on the left card of each pair */
    .itp-pfs-cell:nth-child(2n) .itp-pfs-arrow { display: none; }
}
@media (max-width: 600px) {
    .itp-pfs { padding: 44px 16px; }
    .itp-pfs-head { margin-bottom: 32px; }
    .itp-pfs-heading { font-size: 25px; }
    .itp-pfs-sub { font-size: 15px; }
    .itp-pfs-grid { --itp-pfs-cols: 1; }
    /* stacked: arrow drops below each card and points down */
    .itp-pfs-cell { flex-direction: column; }
    .itp-pfs-arrow {
        position: static;
        transform: none;
        margin: 10px auto 0;
        background: transparent;
    }
    .itp-pfs-arrow svg { transform: rotate(90deg); }
    .itp-pfs-title { font-size: 19px; }
    .itp-pfs-banner-title { font-size: 19px; }
    .itp-pfs-banner-main { gap: 10px; }
}

/* ============================================================
   HERO ROTATING CTA  (.itp-hrc-*)  - v2.32.0
   Left: eyebrow, heading with a rotating second word, description.
   Right: coloured lead form. Floating stat pills around, and a
   scrolling feature-chip marquee along the bottom.
   ============================================================ */

.itp-hrc { position: relative; width: 100%; padding: 60px 24px 0; background: #FBFAF6; overflow: hidden; }
.itp-hrc-inner { position: relative; max-width: 1240px; margin: 0 auto; }

.itp-hrc-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 50px;
    align-items: center;
    padding: 30px 0 70px;
}

/* ---- left ---- */
.itp-hrc-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 22px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 4px 18px rgba(0,0,0,.06);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #111;
    margin-bottom: 26px;
}
.itp-hrc-eyebrow-dot, .itp-hrc-pill-dot, .itp-hrc-chip-dot {
    width: 10px; height: 10px; flex-shrink: 0;
    background: #F0CB33;
    /* hexagon */
    clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.itp-hrc-kicker { font-size: 30px; font-weight: 800; color: #9A9A9A; line-height: 1.1; margin-bottom: 4px; }
.itp-hrc-heading {
    margin: 0 0 26px;
    font-size: 92px;
    font-weight: 800;
    line-height: 0.98;
    letter-spacing: -0.02em;
}
.itp-hrc-static { display: block; color: #111; }
.itp-hrc-rotate-wrap { display: inline-flex; align-items: baseline; }
.itp-hrc-rotate { color: #C79A2E; }
.itp-hrc-caret { display: inline-block; width: 3px; height: 0.82em; margin-left: 6px; background: currentColor; color: #C79A2E; animation: itpHrcCaret 1s steps(1) infinite; transform: translateY(0.06em); }
@keyframes itpHrcCaret { 0%,50%{opacity:1} 50.01%,100%{opacity:0} }
.itp-hrc-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* slide mode: vertical roll */
.itp-hrc-anim-slide .itp-hrc-rotate-wrap { overflow: hidden; height: 1em; }
.itp-hrc-slide { display: inline-flex; flex-direction: column; transition: transform .6s cubic-bezier(.22,1,.36,1); }
.itp-hrc-slide-word { display: block; height: 1em; line-height: 1; }

.itp-hrc-desc { max-width: 560px; font-size: 20px; line-height: 1.6; color: #3A3A3A; margin: 0; }

/* ---- form ---- */
.itp-hrc-right { display: flex; justify-content: center; }
.itp-hrc-form {
    width: 100%;
    max-width: 460px;
    background: #F0CB33;
    border-radius: 28px;
    padding: 40px;
    box-shadow: 0 30px 60px rgba(210,170,20,.28);
}
.itp-hrc-form-title { font-size: 30px; font-weight: 800; line-height: 1.15; color: #111; margin-bottom: 12px; }
.itp-hrc-form-sub { font-size: 16px; color: #2A2A2A; margin-bottom: 26px; }
.itp-hrc-field { margin-bottom: 18px; }
.itp-hrc-field label { display: block; font-size: 15px; font-weight: 700; color: #1A1A1A; margin-bottom: 8px; }
.itp-hrc-req { color: #E23; }
.itp-hrc-field input {
    width: 100%;
    padding: 16px 18px;
    border: 0;
    border-radius: 12px;
    background: #fff;
    font-size: 16px;
    color: #111;
    box-sizing: border-box;
    font-family: inherit;
}
.itp-hrc-field input::placeholder { color: #9AA0A6; }
.itp-hrc-form-btn {
    width: 100%;
    margin-top: 8px;
    padding: 20px;
    border: 0;
    border-radius: 14px;
    background: #111;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    cursor: pointer;
    transition: transform .2s ease, filter .2s ease;
    font-family: inherit;
}
.itp-hrc-form-btn:hover { transform: translateY(-2px); filter: brightness(1.15); }

/* ---- floating pills ---- */
.itp-hrc-pills { position: absolute; z-index: 3; display: flex; flex-direction: column; gap: 12px; }
.itp-hrc-pills-tl { top: 0; left: 2%; }
.itp-hrc-pills-tc { top: -10px; left: 40%; }
.itp-hrc-pills-tr { top: -20px; right: 2%; }
.itp-hrc-pills-bl { bottom: 90px; left: 2%; }
.itp-hrc-pills-br { bottom: 100px; right: 30%; }
.itp-hrc-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 11px 20px;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    font-size: 15px;
    font-weight: 600;
    color: #111;
    white-space: nowrap;
}

/* ---- marquee ---- */
.itp-hrc-marquee {
    position: relative;
    /* Scrollbar-safe full-bleed: break out to the document edges using the
       widget's own offsetParent width rather than 100vw, so the scrollbar
       width is never added to the page (which is what caused the reflow loop
       on full-width templates). overflow:hidden keeps the track contained. */
    width: auto;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    background: #fff;
    border-top: 1px solid #F0F0F0;
    padding: 22px 0;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.itp-hrc-marquee-track {
    display: inline-flex;
    gap: 18px;
    white-space: nowrap;
    animation: itpHrcMarquee 32s linear infinite;
    will-change: transform;
}
.itp-hrc-mq-pause .itp-hrc-marquee:hover .itp-hrc-marquee-track { animation-play-state: paused; }
@keyframes itpHrcMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.itp-hrc-chip {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 26px;
    border: 1px solid #ECECEC;
    border-radius: 999px;
    background: #fff;
    box-shadow: 0 3px 10px rgba(0,0,0,.04);
    font-size: 17px;
    font-weight: 700;
    color: #111;
}

@media (prefers-reduced-motion: reduce) {
    .itp-hrc-marquee-track { animation: none; }
    .itp-hrc-caret { animation: none; }
    .itp-hrc-slide { transition: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 1024px) {
    .itp-hrc-heading { font-size: 68px; }
    .itp-hrc-grid { gap: 36px; }
    /* pills that sit centre/over content can crowd - ease them in */
    .itp-hrc-pills-tc { left: 30%; }
    .itp-hrc-pills-br { right: 4%; }
}
@media (max-width: 820px) {
    .itp-hrc-grid { grid-template-columns: 1fr; gap: 34px; padding: 20px 0 60px; }
    .itp-hrc-heading { font-size: 60px; }
    .itp-hrc-right { justify-content: stretch; }
    .itp-hrc-form { max-width: 100%; }
    /* On stacked layouts the floating pills have nowhere sensible to sit, so we
       fold them into normal flow instead of overlapping the text/form. */
    .itp-hrc-pills { position: static; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 0 0 10px; }
    .itp-hrc-pills-tc, .itp-hrc-pills-tr, .itp-hrc-pills-tl { margin-bottom: 14px; }
    .itp-hrc-pills-bl, .itp-hrc-pills-br { margin-top: 14px; }
}
@media (max-width: 600px) {
    .itp-hrc { padding: 40px 16px 0; }
    .itp-hrc-kicker { font-size: 22px; }
    .itp-hrc-heading { font-size: 44px; }
    .itp-hrc-desc { font-size: 16px; }
    .itp-hrc-form { padding: 26px 20px; }
    .itp-hrc-form-title { font-size: 23px; }
    .itp-hrc-eyebrow { font-size: 12px; letter-spacing: 1px; padding: 9px 16px; }
    .itp-hrc-chip { font-size: 15px; padding: 11px 20px; }
    .itp-hrc-pill { font-size: 13px; padding: 9px 15px; }
}

/* ============================================================
   LOGO MARQUEE FORM  (.itp-lmf-*)  - v2.33.0
   Left: heading + two logo rows scrolling opposite directions,
   equal-sized white cards. Right: form panel with shortcode slot.
   Pure CSS marquee - each row's set is duplicated for a seamless loop.
   ============================================================ */

.itp-lmf { width: 100%; padding: 60px 40px; background: #138576; }
.itp-lmf-inner {
    --itp-lmf-left: 56%;
    display: flex;
    align-items: flex-start;
    gap: 60px;
    max-width: 1280px;
    margin: 0 auto;
}
.itp-lmf-left { flex: 0 0 var(--itp-lmf-left); max-width: var(--itp-lmf-left); min-width: 0; }
.itp-lmf-right { flex: 1 1 auto; min-width: 0; }

.itp-lmf-eyebrow { font-size: 14px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; color: #8FD3C6; margin-bottom: 14px; }
.itp-lmf-heading { margin: 0 0 18px; font-size: 44px; font-weight: 800; line-height: 1.1; letter-spacing: -0.01em; color: #fff; }
.itp-lmf-desc { margin: 0 0 32px; font-size: 17px; line-height: 1.65; color: #DCEFEA; max-width: 620px; }
.itp-lmf-caption { margin-top: 22px; font-size: 15px; color: #9FD8CC; }

/* ---- rows ---- */
.itp-lmf-rows { display: flex; flex-direction: column; gap: 16px; }

.itp-lmf-row { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.itp-lmf-track {
    display: inline-flex;
    gap: 16px;
    white-space: nowrap;
    width: max-content;
    animation: itpLmfLeft 30s linear infinite;
    will-change: transform;
}
.itp-lmf-dup { display: inline-flex; gap: 16px; }
/* Row 1 scrolls left, row 2 scrolls right. Because each track holds the set
   twice, translating by -50% (or from -50%) lands exactly on a duplicate,
   so the loop is seamless with no visible jump. */
.itp-lmf-row-left  .itp-lmf-track { animation-name: itpLmfLeft; }
.itp-lmf-row-right .itp-lmf-track { animation-name: itpLmfRight; }
@keyframes itpLmfLeft  { from { transform: translateX(0); }     to { transform: translateX(-50%); } }
@keyframes itpLmfRight { from { transform: translateX(-50%); }  to { transform: translateX(0); } }
.itp-lmf-pause .itp-lmf-row:hover .itp-lmf-track { animation-play-state: paused; }

/* ---- logo card - equal size, logo centred and contained ---- */
.itp-lmf-logo {
    flex: 0 0 auto;
    width: 168px;
    height: 84px;
    padding: 22px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0,0,0,.12);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    text-decoration: none;
}
/* object-fit: contain is what makes mixed-size uploads all render at one scale */
.itp-lmf-img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: block; }

/* static grid variant */
.itp-lmf-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.itp-lmf-static .itp-lmf-logo { width: auto; }

/* ---- form panel ---- */
.itp-lmf-form { background: #2E8C7C; border-radius: 24px; padding: 40px; }
.itp-lmf-form-title { font-size: 26px; font-weight: 800; line-height: 1.2; color: #fff; margin-bottom: 12px; }
.itp-lmf-form-sub { font-size: 16px; line-height: 1.55; color: #CDE8E1; margin-bottom: 26px; }
.itp-lmf-form-body { display: flex; flex-direction: column; gap: 14px; }
.itp-lmf-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.itp-lmf-input {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid rgba(255,255,255,.28);
    border-radius: 30px;
    background: rgba(255,255,255,.10);
    font-size: 15px;
    color: #fff;
    box-sizing: border-box;
    font-family: inherit;
}
.itp-lmf-input::placeholder { color: #fff; opacity: .7; }
.itp-lmf-input:focus { outline: none; border-color: rgba(255,255,255,.6); }
.itp-lmf-textarea { border-radius: 20px; resize: vertical; min-height: 110px; }
.itp-lmf-submit {
    margin-top: 6px;
    padding: 16px;
    border: 0;
    border-radius: 30px;
    background: #20B9A4;
    color: #0B3D36;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .2s ease, transform .2s ease;
    font-family: inherit;
}
.itp-lmf-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
    .itp-lmf-track { animation: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 992px) {
    .itp-lmf-inner { flex-direction: column; gap: 36px; }
    .itp-lmf-left, .itp-lmf-right { flex: 0 0 auto; max-width: 100%; width: 100%; }
    .itp-lmf-heading { font-size: 36px; }
}
@media (max-width: 600px) {
    .itp-lmf { padding: 44px 18px; }
    .itp-lmf-heading { font-size: 28px; }
    .itp-lmf-desc { font-size: 15px; }
    .itp-lmf-logo { width: 132px; height: 68px; padding: 16px; }
    .itp-lmf-grid { grid-template-columns: repeat(2, 1fr); }
    .itp-lmf-form { padding: 26px 20px; }
    .itp-lmf-form-title { font-size: 21px; }
    .itp-lmf-two { grid-template-columns: 1fr; }
}

/* ============================================================
   TESTIMONIAL MARQUEE  (.itp-tmq-*)  - v2.34.0
   Two rows of testimonial cards - row 1 scrolls left, row 2 right.
   Word-safe char limit with Read More / Read Less. The whole
   marquee pauses while any card is expanded (class added by JS).
   ============================================================ */

.itp-tmq { width: 100%; padding: 50px 0; background: #fff; }
.itp-tmq-rows { display: flex; flex-direction: column; gap: 24px; }

.itp-tmq-row { overflow: hidden; }
.itp-tmq-fade .itp-tmq-row {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
}
.itp-tmq-track {
    display: inline-flex;
    gap: 24px;
    width: max-content;
    align-items: flex-start;
    padding: 10px 12px;
    animation: itpTmqLeft 55s linear infinite;
    will-change: transform;
}
.itp-tmq-dup { display: inline-flex; gap: 24px; align-items: flex-start; }
.itp-tmq-row-left  .itp-tmq-track { animation-name: itpTmqLeft; }
.itp-tmq-row-right .itp-tmq-track { animation-name: itpTmqRight; }
@keyframes itpTmqLeft  { from { transform: translateX(0); }    to { transform: translateX(-50%); } }
@keyframes itpTmqRight { from { transform: translateX(-50%); } to { transform: translateX(0); } }
.itp-tmq-track-static { animation: none !important; flex-wrap: nowrap; }

/* pause on hover, and pause whenever a card is expanded (JS adds the class) */
.itp-tmq-pause .itp-tmq-row:hover .itp-tmq-track { animation-play-state: paused; }
.itp-tmq-frozen .itp-tmq-track { animation-play-state: paused !important; }

/* ---- card ---- */
.itp-tmq-card {
    flex: 0 0 auto;
    width: 400px;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #EEF0F4;
    border-radius: 18px;
    padding: 30px;
    box-shadow: 0 10px 30px rgba(20,30,50,.08);
    white-space: normal;
    vertical-align: top;
    align-self: flex-start;
}
.itp-tmq-head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 18px; }
.itp-tmq-img {
    flex-shrink: 0;
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #F1F3F7;
    display: inline-flex;
}
.itp-tmq-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.itp-tmq-meta { min-width: 0; padding-top: 2px; }
.itp-tmq-name { font-size: 21px; font-weight: 700; line-height: 1.25; color: #1B2A4A; }
.itp-tmq-date { margin-top: 6px; font-size: 15px; color: #6B7280; }

.itp-tmq-text { font-size: 16px; line-height: 1.7; color: #2B3440; margin-bottom: 20px; }
/* collapsed: show short, hide full */
.itp-tmq-full { display: none; }
.itp-tmq-card.itp-tmq-open .itp-tmq-short { display: none; }
.itp-tmq-card.itp-tmq-open .itp-tmq-full { display: inline; }

.itp-tmq-more {
    display: inline;
    padding: 0;
    border: 0;
    background: none;
    color: #2563EB;
    font-size: inherit;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
    white-space: nowrap;
}
.itp-tmq-more:hover { text-decoration: underline; }

/* Filled-button variant: becomes a proper block button on its own line. */
.itp-tmq-more-button .itp-tmq-more {
    display: inline-block;
    margin-top: 4px;
    padding: 10px 22px;
    border-radius: 30px;
    background: #2563EB;
    color: #fff;
    text-decoration: none;
    transition: background-color .2s ease, transform .2s ease;
}
.itp-tmq-more-button .itp-tmq-more:hover { text-decoration: none; transform: translateY(-1px); }

.itp-tmq-stars { display: inline-flex; gap: 4px; color: #F5A524; }
.itp-tmq-stars svg { width: 20px; height: 20px; }
.itp-tmq-star-empty { color: #E2E6EC; }

/* static grid */
.itp-tmq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.itp-tmq-static .itp-tmq-card { width: auto; }

@media (prefers-reduced-motion: reduce) {
    .itp-tmq-track { animation: none; }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 700px) {
    .itp-tmq-card { width: 300px; padding: 22px; }
    .itp-tmq-name { font-size: 18px; }
    .itp-tmq-text { font-size: 15px; }
    .itp-tmq-grid { grid-template-columns: 1fr; }
}

/* Process Flow Stages - optional description below sub-heading (v2.36.0) */
.itp-pfs-desc { margin: 12px auto 0; max-width: 720px; font-size: 16px; line-height: 1.65; color: #5B6472; }
.itp-pfs-desc > :first-child { margin-top: 0; }
.itp-pfs-desc > :last-child { margin-bottom: 0; }
.itp-pfs-desc a { color: inherit; text-decoration: underline; }

/* Accordion Tab - make SVG icons obey the size control even when the SVG file
   has hard-coded width/height attributes (v2.37.1). The per-widget selectors
   set width/height !important; these just ensure the SVG box model cooperates. */
.itp-at-iconlist-icon, .itp-at-iconbox-icon { line-height: 0; }
.itp-at-iconlist-icon svg, .itp-at-iconbox-icon svg,
.itp-at-iconlist-icon img, .itp-at-iconbox-icon img { display: inline-block; object-fit: contain; vertical-align: middle; }

/* ============================================================
   QUALITY WHEEL  (.itp-qw-*)  - v2.39.0
   Segmented ring of icon slices around a dark centre hub, with a
   label outside each segment. The whole wheel can spin; icons and
   labels counter-rotate so they always stay upright.

   Placement: each segment icon/label is absolutely centred, then
   pushed out along its angle with
     transform: rotate(a) translateY(-R) rotate(-a)
   which lands it on the ring at angle `a` while keeping it upright.
   When the wheel spins, a second counter-rotation cancels the spin.
   ============================================================ */

.itp-qw { width: 100%; }
.itp-qw-header { margin: 0 0 30px; }
.itp-qw-heading { margin: 0 0 10px; line-height: 1.02; }
.itp-qw-h1, .itp-qw-h2 { display: block; font-size: 46px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.itp-qw-h1 { color: #C15A28; }
.itp-qw-h2 { color: #16233F; }
.itp-qw-sub { margin: 0; max-width: 560px; font-size: 18px; line-height: 1.5; color: #333; }
.itp-qw-header[style*="center"] .itp-qw-sub { margin-left: auto; margin-right: auto; }

.itp-qw-stage { display: flex; justify-content: center; }

.itp-qw-wheel {
    --itp-qw-size: 620px;
    --itp-qw-hole: 38%;
    --itp-qw-icon-r: 68;   /* % of radius */
    --itp-qw-label-r: 116; /* % of radius */
    --itp-qw-dur: 40s;
    --itp-qw-spin-dir: normal;
    position: relative;
    width: var(--itp-qw-size);
    height: var(--itp-qw-size);
    max-width: 100%;
    aspect-ratio: 1 / 1;
}

/* the ring plate (rotates when spinning) */
.itp-qw-ring {
    --itp-qw-ring-bg: #EDEDED;
    --itp-qw-divider: #C15A28;
    --itp-qw-divider-w: 2px;
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: var(--itp-qw-ring-bg);
    border: 5px solid var(--itp-qw-divider);
    box-sizing: border-box;
    /* punch the centre hole so the ring looks like a donut */
    -webkit-mask: radial-gradient(circle at center, transparent calc(var(--itp-qw-hole) - 1px), #000 var(--itp-qw-hole));
            mask: radial-gradient(circle at center, transparent calc(var(--itp-qw-hole) - 1px), #000 var(--itp-qw-hole));
}
/* divider lines between segments */
.itp-qw-divider {
    position: absolute;
    top: 0; left: 50%;
    width: var(--itp-qw-divider-w);
    height: 50%;
    background: var(--itp-qw-divider);
    transform-origin: bottom center;
    margin-left: calc(var(--itp-qw-divider-w) / -2);
}

/* icons + labels layer - shares the spin so they travel with segments */
.itp-qw-seg, .itp-qw-label-wrap {
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* push out to the icon radius, then keep upright */
.itp-qw-seg {
    transform: rotate(var(--itp-qw-a)) translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-icon-r) / 100 * -1)) rotate(calc(var(--itp-qw-a) * -1));
    text-decoration: none;
    z-index: 3;
}
.itp-qw-label-wrap {
    transform: rotate(var(--itp-qw-a)) translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-label-r) / 100 * -1)) rotate(calc(var(--itp-qw-a) * -1));
    z-index: 4;
}
.itp-qw-seg-icon {
    font-size: 38px;
    color: #16233F;
    line-height: 1;
    display: inline-flex;
    transition: color .25s ease, transform .25s ease;
}
.itp-qw-seg-icon svg { width: 38px; height: 38px; }
.itp-qw-seg:hover .itp-qw-seg-icon { transform: scale(1.12); }
.itp-qw-label {
    display: block;
    max-width: 120px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.2;
    color: #C15A28;
    white-space: normal;
}

/* centre hub - sits above the ring, never rotates */
.itp-qw-hub {
    position: absolute;
    top: 50%; left: 50%;
    width: calc(var(--itp-qw-hole) * 2 - 6%);
    height: calc(var(--itp-qw-hole) * 2 - 6%);
    transform: translate(-50%, -50%);
    border-radius: 50%;
    background: #16233F;
    border: 4px solid #C15A28;
    box-sizing: border-box;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.itp-qw-hub-inner { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #fff; }
.itp-qw-hub-img { width: 100%; height: 100%; object-fit: cover; }
.itp-qw-hub-icon { font-size: 30%; display: inline-flex; }
.itp-qw-hub-icon svg { width: 46px; height: 46px; }
.itp-qw-hub-text { font-size: 22px; font-weight: 800; letter-spacing: 1px; text-align: center; }
.itp-qw-hub-dot { position: absolute; top: 8%; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: #C15A28; z-index: 2; }

/* ---- rotation ----
   The ring plate spins. Each seg/label orbits the centre with the SAME period
   (its own keyframe preserves its individual radius), and the inner icon/label
   counter-spins by the same period so it stays upright. All share --itp-qw-dur
   and --itp-qw-spin-dir, so they stay perfectly in lock-step. */
@keyframes itpQwSpin { to { transform: rotate(360deg); } }
.itp-qw-rotating .itp-qw-ring {
    animation: itpQwSpin var(--itp-qw-dur) linear infinite;
    animation-direction: var(--itp-qw-spin-dir);
}
.itp-qw-rotating .itp-qw-seg {
    animation: itpQwOrbitIcon var(--itp-qw-dur) linear infinite;
    animation-direction: var(--itp-qw-spin-dir);
}
.itp-qw-rotating .itp-qw-label-wrap {
    animation: itpQwOrbitLabel var(--itp-qw-dur) linear infinite;
    animation-direction: var(--itp-qw-spin-dir);
}
.itp-qw-rotating .itp-qw-seg-icon,
.itp-qw-rotating .itp-qw-label {
    animation: itpQwUpright var(--itp-qw-dur) linear infinite;
    animation-direction: var(--itp-qw-spin-dir);
}
/* orbit for icons (uses icon radius) */
@keyframes itpQwOrbitIcon {
    from { transform: rotate(var(--itp-qw-a))                translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-icon-r) / 100 * -1)) rotate(calc(var(--itp-qw-a) * -1)); }
    to   { transform: rotate(calc(var(--itp-qw-a) + 360deg)) translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-icon-r) / 100 * -1)) rotate(calc((var(--itp-qw-a) + 360deg) * -1)); }
}
/* orbit for labels (uses label radius) */
@keyframes itpQwOrbitLabel {
    from { transform: rotate(var(--itp-qw-a))                translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-label-r) / 100 * -1)) rotate(calc(var(--itp-qw-a) * -1)); }
    to   { transform: rotate(calc(var(--itp-qw-a) + 360deg)) translateY(calc(var(--itp-qw-size) / 2 * var(--itp-qw-label-r) / 100 * -1)) rotate(calc((var(--itp-qw-a) + 360deg) * -1)); }
}
/* upright counter-spin so the icon/label text never turns over.
   Because the parent orbit already applies rotate(a)...rotate(-a) = net 0 extra
   spin at each frame, the icon stays upright on its own; this keyframe is a
   no-op safety that keeps sub-pixel jitter from accumulating. */
@keyframes itpQwUpright { from { transform: rotate(0); } to { transform: rotate(0); } }

.itp-qw-pause:hover .itp-qw-ring,
.itp-qw-pause:hover .itp-qw-seg,
.itp-qw-pause:hover .itp-qw-label-wrap,
.itp-qw-pause:hover .itp-qw-seg-icon,
.itp-qw-pause:hover .itp-qw-label { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
    .itp-qw-rotating .itp-qw-ring,
    .itp-qw-rotating .itp-qw-seg,
    .itp-qw-rotating .itp-qw-label-wrap,
    .itp-qw-rotating .itp-qw-seg-icon,
    .itp-qw-rotating .itp-qw-label { animation: none; }
}

/* ---- responsive: shrink and pull labels tighter ---- */
@media (max-width: 782px) {
    .itp-qw-wheel { --itp-qw-label-r: 112; }
    .itp-qw-h1, .itp-qw-h2 { font-size: 32px; }
    .itp-qw-label { font-size: 13px; max-width: 84px; }
    .itp-qw-seg-icon { font-size: 26px; }
    .itp-qw-seg-icon svg { width: 26px; height: 26px; }
}
@media (max-width: 480px) {
    .itp-qw-wheel { --itp-qw-icon-r: 66; --itp-qw-label-r: 108; }
    .itp-qw-label { font-size: 10px; max-width: 62px; }
    .itp-qw-seg-icon { font-size: 20px; }
    .itp-qw-seg-icon svg { width: 20px; height: 20px; }
}