/* Icon Service Tabs */
.icon-service-tabs { padding: clamp(28px,5vw,48px) 0; }

/* Tabs bar */
.icon-service-tabs .ist-tabs{
    display:flex; flex-wrap:wrap;
    gap: clamp(12px,2vw,24px);
    justify-content:space-between; align-items:center;
    border-bottom:1px solid rgba(0,0,0,.12);
    padding-bottom: clamp(16px,2.5vw,24px);
    margin-bottom: clamp(18px,3vw,28px);
}

/* Tabs */
.icon-service-tabs .ist-tab{
    appearance:none; border:0; background:transparent;
    display:flex; flex-direction:column; align-items:center; text-align:center;
    gap:10px; padding:8px 6px; cursor:pointer; outline:none;
    transition: transform .15s ease, opacity .15s ease;
    opacity:.7; max-width:20%;
    position: relative;
}
.icon-service-tabs .ist-tab:hover{ transform: translateY(-2px); opacity:1; }
.icon-service-tabs .ist-tab.is-active{ opacity:1; }
.icon-service-tabs .ist-tab::after{
    content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:#000;
    transform:scaleX(0); transform-origin:center; transition:transform .5s cubic-bezier(.2,.7,0,1); pointer-events:none;
}
.icon-service-tabs .ist-tab:hover::after,
.icon-service-tabs .ist-tab:focus-visible::after{ transform:scaleX(1); }

/* Icons + labels */
.icon-service-tabs .ist-icon{ width:72px; height:72px; display:grid; place-items:center; }
.icon-service-tabs .ist-icon img{ display:block; max-width:100%; max-height:100%; object-fit:contain; }
.icon-service-tabs .ist-label{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; font-size:.95rem; }

/* Panels container takes tallest panel height (set via JS) */
.icon-service-tabs .ist-panels{
    position:relative;
    perspective: 1000px;              /* 3D depth for card flip */
    perspective-origin: 50% 50%;
    transform-style: preserve-3d;
    height:auto;                      /* JS may set explicit px height */
    contain: layout paint style;      /* reduce flicker */
}

/* Panels are stacked absolutely; hidden by opacity not display */
.icon-service-tabs .ist-panel{
    position:absolute; top:0; left:0; width:100%;
    opacity:0; pointer-events:none;
    transform: rotateY(0deg) translateZ(0);
    transform-origin: 50% 50%;       /* center — card flip */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    will-change: transform, opacity;
}

/* Active panel visible */
.icon-service-tabs .ist-panel.is-active{
    opacity:1; pointer-events:auto;
    z-index: 2;
}

/* Animation helpers — TRUE 180° CARD FLIP (1s total) */
.icon-service-tabs .ist-panel.pre-in{
    opacity:0 !important;
    transform: rotateY(-180deg);     /* start flipped away */
    z-index: 3;
}
.icon-service-tabs .ist-panel.anim-in{
    transition: transform 1.2s cubic-bezier(.2,.7,0,1), opacity 1.0s ease;
    transform: rotateY(0deg);        /* flip into view */
    opacity:1 !important;
}
.icon-service-tabs .ist-panel.anim-out{
    transition: transform 1.2s cubic-bezier(.2,.7,0,1), opacity 1.0s ease;
    transform: rotateY(180deg);      /* flip out fully */
    opacity:0;
    z-index: 1;
}

/* Mobile: show all in flow; no absolute stacking or animations */
@media (max-width: 767.98px){
    .icon-service-tabs .ist-tabs{
        flex-direction: column; align-items: stretch; gap: 12px;
        border-bottom: 0; padding-bottom: 0; margin-bottom: 0;
    }
    .icon-service-tabs .ist-tab{
        flex-direction: row; align-items: center; text-align: left; gap: 12px;
        justify-content: center;            /* centered on mobile */
        width:100%; max-width:none; padding:10px 0; cursor: default; pointer-events: none;
        opacity:1; transform:none !important;
    }
    .icon-service-tabs .ist-tab::after{ display:none; }

    .icon-service-tabs .ist-panels{ perspective:none; transform-style:flat; height:auto !important; }
    .icon-service-tabs .ist-panel{
        position:static; opacity:1; pointer-events:auto; transform:none; will-change:auto;
        margin: 6px 0 18px;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
    .icon-service-tabs .ist-panel.anim-in,
    .icon-service-tabs .ist-panel.anim-out{ transition: none !important; }
}