.experience-tabs{--experience-text:#f7f8f7;--experience-muted:#b7c0c4;position:relative;overflow:hidden;background:radial-gradient(circle at 8% 12%,rgba(255,102,0,.17),transparent 27%),radial-gradient(circle at 94% 74%,rgba(66,111,136,.16),transparent 32%),linear-gradient(145deg,#111416,#17191a);padding:90px 0 0}.experience-tabs:before{content:"";position:absolute;inset:0;opacity:.13;background-image:linear-gradient(rgba(255,255,255,.16) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.16) 1px,transparent 1px);background-size:52px 52px;pointer-events:none}.experience-tabs__heading,.experience-tabs__nav,.experience-tabs__panels{position:relative;z-index:1}.experience-tabs__heading{width:min(1180px,calc(100% - 40px));margin:0 auto 27px;color:#fff}.experience-tabs__heading p{margin:0 0 10px;color:#ff7b25;font:700 11px/1 Inter,sans-serif;letter-spacing:.16em}.experience-tabs__heading h2{margin:0;font:700 clamp(32px,4vw,58px)/1.02 Poppins,sans-serif;letter-spacing:-.055em}.experience-tabs__heading em{font-style:normal;color:#ff6900}.experience-tabs__nav{display:flex;gap:7px;overflow:auto;width:min(1180px,calc(100% - 40px));margin:0 auto 25px;padding:7px;border:1px solid rgba(255,255,255,.16);border-radius:14px;background:rgba(255,255,255,.07);backdrop-filter:blur(16px);scrollbar-width:none}.experience-tabs__nav::-webkit-scrollbar{display:none}.experience-tabs__nav button{flex:0 0 auto;border:0;border-radius:9px;padding:13px 16px;background:transparent;color:#b9b9b9;cursor:pointer;font:600 12px/1 Inter,sans-serif;transition:.25s}.experience-tabs__nav button span{margin-right:7px;color:#ff8b48;font-size:10px}.experience-tabs__nav button:hover,.experience-tabs__nav button:focus-visible{color:#fff;transform:translateY(-1px)}.experience-tabs__nav button:focus-visible{outline:2px solid #fff;outline-offset:2px}.experience-tabs__nav button.is-active{background:#ff6900;color:#fff;box-shadow:0 8px 24px rgba(255,105,0,.24)}.experience-tabs__nav button.is-active span{color:#fff}.experience-tabs__panels{min-height:560px}.experience-tabs__panels>section{display:none!important;animation:experience-in .5s cubic-bezier(.2,.8,.2,1)}.experience-tabs__panels>section.is-experience-active{display:block!important;--white:transparent;--wash-top:transparent;--cream-50:rgba(255,255,255,.06);--cream-100:rgba(255,255,255,.08);--cream-200:rgba(255,126,55,.14);--cream-300:rgba(255,126,55,.2);--ink:#f7f8f7;--ink-900:#fff;--ink-800:#e1e6e7;--ink-700:#d0d8da;--ink-600:#c7d0d2;--ink-500:#aebbc0;--shadow-soft:0 18px 42px rgba(0,0,0,.24);background:transparent!important;color:var(--experience-text)!important}.experience-tabs .mi-section,.experience-tabs .rb-section,.experience-tabs .lc-section,.experience-tabs .rp-section,.experience-tabs .cm-section,.experience-tabs .cc-section,.experience-tabs .pl-section,.experience-tabs .lc-hero{margin:0!important;background:transparent!important}.experience-tabs :is(.mi-cta,.rb-cta,.lc-cta,.rp-cta,.cm-cta,.cc-cta,.pl-cta){display:none!important}.experience-tabs :is(.mi-quote,.rb-feature,.lc-step,.rp-card,.cc-card,.pl-step,.cm-stat,.cc-panel,.pl-quote){border-color:rgba(255,255,255,.15)!important;background:rgba(255,255,255,.045)!important;box-shadow:none!important}.experience-tabs :is(.mi-title,.rb-title,.lc-title,.rp-title,.cm-title,.cc-title,.pl-title,.mi-block-title,.rb-block-title,.lc-block-title,.rp-block-title,.cm-block-title,.cc-block-title,.pl-subhead h3){color:#fff!important}.experience-tabs :is(.mi-lead,.rb-lead,.lc-lead,.rp-lead,.cm-lead,.cc-lead,.pl-lead,.mi-round-sub,.rb-feature-text,.lc-step-text,.rp-card-text,.cc-card-text,.pl-step-text){color:var(--experience-muted)!important}.experience-tabs :is(.mi-badge,.rb-badge,.lc-badge,.rp-badge,.cm-badge,.cc-badge,.pl-badge,.mi-btn--ghost,.rb-btn--ghost,.lc-btn--ghost,.rp-btn--ghost,.cm-btn--ghost,.cc-btn--ghost,.pl-btn--ghost){background:rgba(255,255,255,.045)!important;color:#fff!important}.experience-tabs :is(.mi-art,.rb-art,.lc-art,.rp-art,.cm-art,.cc-art,.pl-art,.pl-art-frame){border:0!important;border-radius:0!important;overflow:visible!important;background:transparent!important;box-shadow:none!important}.experience-tabs :is(.mi-art img,.rb-art img,.lc-art img,.rp-art img,.cm-art img,.cc-art img,.pl-art img){border-radius:0!important;box-shadow:0 24px 48px rgba(0,0,0,.28);animation:experience-float 7s ease-in-out infinite}.experience-tabs .pl-quote{background:transparent!important;border:0!important;box-shadow:none!important}.experience-tabs .pl-quote :is(.pl-quote-text,.pl-quote-name,.pl-quote-role){color:#172025!important;text-shadow:0 1px rgba(255,255,255,.55)}.experience-tabs .rb-art,.experience-tabs .rp-art,.experience-tabs .cc-art{order:-1}.experience-tabs .lc-head{order:-1}.experience-tabs :is(.mi-head,.rb-head,.lc-head,.rp-head,.cm-head,.cc-head,.pl-head){animation:experience-copy .55s .08s both}.experience-tabs :is(.mi-art,.rb-art,.lc-art,.rp-art,.cm-art,.cc-art,.pl-art){animation:experience-visual .65s .12s both}@keyframes experience-in{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes experience-copy{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}@keyframes experience-visual{from{opacity:0;transform:translateX(26px) scale(.97)}to{opacity:1;transform:none}}@keyframes experience-float{50%{transform:translateY(-8px) scale(1.012)}}@media(max-width:700px){.experience-tabs{padding-top:64px}.experience-tabs__heading,.experience-tabs__nav{width:calc(100% - 30px)}.experience-tabs__heading h2{font-size:35px}.experience-tabs__nav{margin-bottom:16px}.experience-tabs__nav button{padding:12px 14px}.experience-tabs__panels{min-height:0}.experience-tabs .rb-art,.experience-tabs .rp-art,.experience-tabs .cc-art,.experience-tabs .lc-head{order:initial}}
/* Panels make --white transparent for their artwork; solid CTA copy must stay visible. */
.experience-tabs :is(.mi-btn--solid,.rb-btn--solid,.lc-btn--solid,.rp-btn--solid,.cm-btn--solid,.cc-btn--solid,.pl-btn--solid){color:#fff!important}

/* Seven experience labels share the entire desktop bar instead of leaving a
   blank strip after the final tab. Small screens retain horizontal scrolling. */
@media (min-width:701px){
    .experience-tabs__nav button{
        flex:1 1 0;
        padding-inline:10px;
    }
}

/* The placement testimonial sits on a detailed illustration. A dark glass
   backing and white type keep every line readable without hiding the art. */
.experience-tabs .pl-quote{
    background:rgba(8,13,17,.82)!important;
    border:1px solid rgba(255,255,255,.3)!important;
    box-shadow:0 12px 28px rgba(0,0,0,.32)!important;
    backdrop-filter:blur(8px);
}

.experience-tabs .pl-quote :is(.pl-quote-text,.pl-quote-name,.pl-quote-role){
    color:#fff!important;
    text-shadow:0 1px 3px rgba(0,0,0,.72)!important;
}

.experience-tabs .pl-quote-role{
    color:rgba(255,255,255,.82)!important;
}

@media(max-width:768px){
    .experience-tabs .cc-hero{
        padding:0;
        border:0;
        border-radius:0;
        background:transparent;
    }

    .experience-tabs .rb-actions .rb-btn,
    .experience-tabs .cc-actions .cc-btn{
        width:100%!important;
        min-height:54px;
        justify-content:center;
    }
}

@media(max-width:600px){
    .experience-tabs .cc-title{
        font-size:28px;
        letter-spacing:-.025em;
    }
}

/* =========================================================
   REAL PROJECTS CARDS (CLEAN DARK CARD + TOP HEADER + DIVIDER)
========================================================= */
.experience-tabs .rp-card {
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--r-15) !important;
    background: rgba(22, 27, 32, 0.95) !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35) !important;
    overflow: hidden !important;
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}

.experience-tabs .rp-card:hover {
    transform: translateY(-4px) !important;
    border-color: rgba(255, 255, 255, 0.28) !important;
    box-shadow: 0 18px 42px rgba(0, 0, 0, 0.55) !important;
}

.experience-tabs .rp-card-header {
    padding: 12px 15px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    display: flex !important;
    align-items: center !important;
}

@media (min-width: 769px) {
    .experience-tabs .rp-rail {
        justify-content: center !important;
        flex-wrap: wrap !important;
    }
}

.experience-tabs .rp-card-media {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    aspect-ratio: 16 / 10 !important;
    border-bottom: none !important;
    overflow: hidden !important;
    background: #0f1215 !important;
}

.experience-tabs .rp-card-media img,
.experience-tabs .rp-card-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    margin: 0 auto !important;
}

.experience-tabs .rp-card-tag {
    position: static !important;
    border: 1px solid rgba(255, 126, 55, 0.32) !important;
    background: rgba(255, 102, 0, 0.14) !important;
    color: #ff8b48 !important;
    box-shadow: none !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: .06em !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    padding: 4px 9px !important;
}

.experience-tabs .rp-card-divider {
    height: 1px !important;
    width: 100% !important;
    background: rgba(255, 255, 255, 0.09) !important;
}

.experience-tabs .rp-card-title {
    color: #ffffff !important;
}

.experience-tabs .rp-card-text {
    color: var(--experience-muted) !important;
}

.experience-tabs .rp-card-tech li {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #d0d8da !important;
}

/* =========================================================
   LIVE INTERACTIVE CLASSES ARTWORK (ANIMATED GLASS FRAME + SHADOW)
========================================================= */
.experience-tabs .lc-art {
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 22px !important;
    padding: 10px !important;
    background: rgba(255, 255, 255, 0.05) !important;
    backdrop-filter: blur(16px) !important;
    -webkit-backdrop-filter: blur(16px) !important;
    overflow: hidden !important;
    max-width: 500px !important;
    width: 100% !important;
    margin-inline: auto !important;
    box-shadow: 0 24px 52px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.08) inset !important;
    animation: experience-float 6s ease-in-out infinite !important;
    transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out) !important;
}

.experience-tabs .lc-art:hover {
    transform: translateY(-8px) scale(1.01) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
    box-shadow: 0 30px 65px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.18) inset !important;
}

.experience-tabs .lc-art img {
    border-radius: 14px !important;
    display: block !important;
    width: 100% !important;
    height: auto !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4) !important;
    animation: none !important;
    transition: transform var(--dur-base) var(--ease-out) !important;
}

.experience-tabs .lc-art:hover img {
    transform: scale(1.015) !important;
}

.experience-tabs :is(.lc-step-no, .rb-step-no, .pl-step-no, .mi-step-no) {
    background: #ff6900 !important;
    color: #ffffff !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    font-weight: 700 !important;
    font-size: 11.5px !important;
    display: grid !important;
    place-items: center !important;
    z-index: 5 !important;
}