/* Events */

 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0
 }

 :root {
     --bg: #f4f3f0;
     --brand: #414a80;
     --red: #c82c40;
     --text: #2d2d2d;
     --muted: #6b6b6b;
     --light: #9ba1c6;
     --border: rgba(65, 74, 128, .13);
     --card-bg: #ffffff;
     --radius: 14px;
 }

 /* ── WRAPPER ── */
 .events-scroll-section {
     display: flex;
     flex-direction: column;
     height: 980px;
     overflow: hidden;
 }

 /* ── TOP TITLE ── */
 .title-bar {
     flex-shrink: 0;
     text-align: center;
     padding: 40px 40px 28px;
 }

 .eyebrow {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .22em;
     text-transform: uppercase;
     color: var(--brand);
     margin-bottom: 10px;
 }

 .eyebrow::before,
 .eyebrow::after {
     content: '';
     display: block;
     width: 28px;
     height: 2px;
     background: linear-gradient(90deg, var(--red), var(--brand));
     border-radius: 2px;
 }

 .title-bar h2 {
     font-size: clamp(1.55rem, 3vw, 2.5rem);
     font-weight: 700;
     color: #000;
     letter-spacing: -.02em;
     line-height: 1.15;
 }

 .title-bar h2 span {
     color: var(--brand)
 }

 .title-rule {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 10px;
     margin-top: 12px
 }

 .title-rule span {
     width: 44px;
     height: 1px;
     background: var(--border)
 }

 .title-rule i {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--brand)
 }

 /* ── TWO COL ── */
 /*
      Responsive columns (Bootstrap-style naming):
      xxl ≥ 1400px  →  col-xxl-5 : col-xxl-7
      lg  1200–1399 →  col-lg-6  : col-lg-6
      md  768–1199  →  col-md-5  : col-md-7
      sm  < 768px   →  stacked
    */
 .two-col {
     display: grid;
     grid-template-columns: 5fr 7fr;
     /* md default */
     flex: 1;
     overflow: hidden;
     border-top: 1px solid var(--border);
 }

 /* lg (1200px – 1399px): equal 6/6 halves */
 @media (min-width: 1200px) and (max-width: 1399px) {
     .two-col {
         grid-template-columns: 1fr 1fr;
     }

     .col-left {
         padding: 36px 40px 36px 44px;
     }

     .col-right {
         padding: 28px 40px 40px 32px;
     }

     .card-img-wrap {
         height: 185px;
     }
 }

 /* xxl (≥ 1400px): 5/7 split, generous spacing, everything fits */
 @media (min-width: 1400px) {
     .two-col {
         grid-template-columns: 2fr 1fr;
     }

     .col-left {
         padding: 52px 56px 52px 64px;
     }

     .col-right {
         padding: 36px 56px 56px 48px;
     }

     .card-img-wrap {
         height: 210px;
     }

     .col-left h3 {
         font-size: clamp(1.5rem, 2.3vw, 2.4rem);
         margin-bottom: 18px;
     }

     .col-left p {
         font-size: .92rem;
         max-width: 380px;
         margin-bottom: 32px;
     }

     .stats-grid {
         gap: 12px;
         margin-bottom: 36px;
     }

     .stat {
         padding: 16px 20px;
     }

     .stat-n {
         font-size: 1.7rem;
     }
 }

 /* ── LEFT – FIXED ── */
 .col-left {
     padding: 0px 50px 200px 250px;
     display: flex;
     flex-direction: column;
     justify-content: center;
     /* border-right: 1px solid var(--border); */
     overflow: hidden;
 }

 .live-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: rgba(65, 74, 128, .08);
     border: 1px solid var(--border);
     border-radius: 50px;
     padding: 5px 14px 5px 10px;
     font-size: 10px;
     font-weight: 600;
     letter-spacing: .14em;
     text-transform: uppercase;
     color: var(--brand);
     margin-bottom: 24px;
     width: fit-content;
 }

 .live-badge::before {
     content: '';
     width: 10px;
     height: 10px;
     border-radius: 50%;
     background: var(--red);
     animation: blink 1.8s ease-in-out infinite;
 }

 @keyframes blink {

     0%,
     100% {
         opacity: 1
     }

     50% {
         opacity: .25
     }
 }

 .col-left h3 {
     font-size: clamp(1.35rem, 2.1vw, 2.1rem);
     font-weight: 700;
     line-height: 1.22;
     color: #000;
     margin-bottom: 14px;
     letter-spacing: -.01em;
 }

 .col-left h3 span {
     color: var(--brand)
 }

 .col-left p {
     font-size: 16px;
     line-height: 1.78;
     color: #000;
     max-width: 820px;
     margin-bottom: 28px;
     font-weight: 500;
 }

 .stats-grid {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 10px;
     margin-bottom: 32px
 }

 .stat {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     padding: 14px 16px;
     transition: border-color .25s, box-shadow .25s;
 }

 .stat:hover {
     border-color: var(--brand);
     box-shadow: 0 4px 20px rgba(65, 74, 128, .1)
 }

 .stat-n {
     font-size: 1.5rem;
     font-weight: 700;
     color: var(--brand);
     line-height: 1;
     margin-bottom: 3px
 }

 .stat-l {
     font-size: .68rem;
     font-weight: 500;
     color: var(--muted);
     text-transform: uppercase;
     letter-spacing: .07em
 }

 .cta {
     display: inline-flex;
     align-items: center;
     gap: 10px;
     padding: 11px 24px;
     background: var(--brand);
     color: #fff;
     font-family: 'Poppins', sans-serif;
     font-size: .82rem;
     font-weight: 600;
     border: none;
     border-radius: 50px;
     cursor: pointer;
     text-decoration: none;
     width: fit-content;
     transition: background .25s, transform .2s, box-shadow .25s;
 }

 .cta:hover {
     background: #333d6e;
     transform: translateY(-2px);
     box-shadow: 0 10px 28px rgba(65, 74, 128, .28)
 }

 .cta svg {
     width: 14px;
     height: 14px
 }

 /* ── RIGHT – SCROLLABLE ── */
 .col-right {
     overflow-y: auto;
     padding: 32px 48px 48px 40px;
     scrollbar-width: thin;
     scrollbar-color: var(--light) transparent;
     max-height: 550px;
 }

 .col-right::-webkit-scrollbar {
     width: 4px
 }

 .col-right::-webkit-scrollbar-thumb {
     background: var(--light);
     border-radius: 4px
 }

 /* Month group */
 .month-group {
     margin-bottom: 36px
 }

 .month-group:last-child {
     margin-bottom: 0
 }

 .month-head {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 16px
 }

 .month-head h4 {
     font-size: .92rem;
     font-weight: 600;
     color: #000;
     white-space: nowrap
 }

 .month-chip {
     font-size: .62rem;
     font-weight: 600;
     letter-spacing: .09em;
     text-transform: uppercase;
     color: var(--brand);
     background: rgba(65, 74, 128, .08);
     border: 1px solid var(--border);
     border-radius: 50px;
     padding: 2px 10px;
     white-space: nowrap;
 }

 .month-line {
     flex: 1;
     height: 1px;
     background: var(--border)
 }

 /* ── EVENT CARD (image style like reference) ── */
 .event-card {
     background: var(--card-bg);
     border: 1px solid var(--border);
     border-radius: var(--radius);
     overflow: hidden;
     margin-bottom: 20px;
     transition: box-shadow .3s, transform .3s, border-color .3s;
     cursor: pointer;
 }

 .event-card:hover {
     box-shadow: 0 8px 32px rgba(65, 74, 128, .14);
     transform: translateY(-3px);
     border-color: var(--brand);
 }

 .event-card:last-child {
     margin-bottom: 0
 }

 /* Image top */
 .card-img-wrap {
     position: relative;
     width: 100%;
     height: 200px;
     overflow: hidden;
 }

 .card-img-wrap img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     display: block;
     transition: transform .5s ease;
 }

 .event-card:hover .card-img-wrap img {
     transform: scale(1.04)
 }

 /* Badge overlaid on image */
 .card-img-wrap .badge {
     position: absolute;
     top: 12px;
     right: 12px;
     font-size: .62rem;
     font-weight: 600;
     letter-spacing: .09em;
     text-transform: uppercase;
     padding: 4px 10px;
     border-radius: 50px;
     backdrop-filter: blur(6px);
 }

 .b-up {
     background: rgba(65, 74, 128, .85);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .2)
 }

 .b-soon {
     background: rgba(200, 44, 64, .85);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .2)
 }

 .b-lim {
     background: rgba(180, 130, 0, .85);
     color: #fff;
     border: 1px solid rgba(255, 255, 255, .2)
 }

 /* Info below image */
 .card-info {
     padding: 14px 16px 16px
 }

 .card-date-row {
     display: flex;
     align-items: center;
     gap: 12px;
     margin-bottom: 8px;
     flex-wrap: wrap;
 }

 .date-chip,
 .time-chip {
     display: inline-flex;
     align-items: center;
     gap: 5px;
     font-size: .72rem;
     font-weight: 500;
     color: var(--brand);
 }

 .date-chip svg,
 .time-chip svg {
     width: 12px;
     height: 12px;
     flex-shrink: 0;
     color: var(--brand)
 }

 .card-title {
     font-size: .96rem;
     font-weight: 600;
     color: var(--text);
     line-height: 1.35;
     margin-bottom: 6px;
 }

 .card-loc {
     display: flex;
     align-items: center;
     gap: 5px;
     font-size: .74rem;
     color: var(--muted);
 }

 .card-loc svg {
     width: 11px;
     height: 11px;
     flex-shrink: 0;
     color: var(--brand)
 }

 /* ── RESPONSIVE ── */
 /* md (768px – 1199px): side-by-side but allow scroll if needed */
 @media (min-width: 768px) and (max-width: 1199px) {
     .col-left {
         padding: 32px 28px 32px 32px;
     }

     .col-right {
         padding: 24px 28px 40px 24px;
     }

     .col-left p {
         max-width: 100%;
         font-size: .84rem;
     }

     .card-img-wrap {
         height: 170px;
     }

     .title-bar {
         padding: 28px 28px 20px;
     }
 }

 /* sm and below (< 768px): stack columns */
 @media(max-width: 767px) {

     html,
     body {
         overflow: auto
     }

     .events-scroll-section {
         height: auto;
         overflow: visible
     }

     .two-col {
         grid-template-columns: 1fr;
         overflow: visible
     }

     .col-left {
         padding: 36px 28px;
         border-right: none;
         border-bottom: 1px solid var(--border);
         overflow: visible;
     }

     .col-left p {
         max-width: 100%
     }

     .col-right {
         overflow: visible;
         padding: 28px 28px 52px
     }

     .title-bar {
         padding: 28px 24px 20px
     }

     .card-img-wrap {
         height: 180px
     }
 }

 @media(max-width:480px) {
     .title-bar {
         padding: 22px 16px 18px
     }

     .col-left {
         padding: 28px 16px
     }

     .col-right {
         padding: 22px 16px 44px
     }

     .stats-grid {
         gap: 15px
     }

     .card-img-wrap {
         height: 160px
     }
 }


















 /* EC TEAMS */
 *,
 *::before,
 *::after {
     box-sizing: border-box;
     margin: 0;
     padding: 0;
 }

 :root {
     --bg: #f5f0eb;
     --accent: #c8722a;
     --text: #2d2d2d;
     --muted: #8a7f76;
     --r: 18px;
 }


 /* ── Hide all radio inputs ── */
 .team-radio {
     display: none;
 }

 /* ════════════════════════════════
       SECTION
    ════════════════════════════════ */
 .team-section {
     width: 100%;
     min-height: 800px;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     padding: 60px 0 80px;
     /* background: var(--bg); */
     overflow: hidden;
     margin-top: -50px;
     margin-bottom: -50px;
 }

 /* ════════════════════════════════
       STAGE
    ════════════════════════════════ */
 .carousel-stage {
     position: relative;
     width: 100%;
     height: clamp(300px, 46vw, 500px);
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ════════════════════════════════
       CARDS WRAP
    ════════════════════════════════ */
 .cards-wrap {
     position: relative;
     width: 100%;
     height: 100%;
     display: flex;
     align-items: center;
     justify-content: center;
 }

 /* ════════════════════════════════
       CARD BASE — default: hidden
    ════════════════════════════════ */
 .card-item {
     position: absolute;
     border-radius: var(--r);
     overflow: hidden;
     cursor: pointer;
     opacity: 0;
     pointer-events: none;
     transform: translateX(0) scale(0.5);
     z-index: 0;
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     transition:
         width .5s cubic-bezier(.4, 0, .2, 1),
         height .5s cubic-bezier(.4, 0, .2, 1),
         transform .5s cubic-bezier(.4, 0, .2, 1),
         opacity .5s ease,
         box-shadow .5s ease;
 }

 .card-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     object-position: top center;
     display: block;
     transition: filter .5s ease;
     pointer-events: none;
     user-select: none;
     filter: grayscale(100%) brightness(.7);
 }

 /* ════════════════════════════════
       ARROW LABELS
    ════════════════════════════════ */
 .arrow {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 30;
     width: clamp(38px, 4.5vw, 52px);
     height: clamp(38px, 4.5vw, 52px);
     border-radius: 50%;
     background: var(--accent);
     color: #fff;
     cursor: pointer;
     display: none;
     /* shown by :checked CSS below */
     align-items: center;
     justify-content: center;
     box-shadow: 0 4px 18px rgba(200, 114, 42, .35);
     transition: background .22s, transform .22s;
     user-select: none;
 }

 .arrow:hover {
     background: #a85e20;
     transform: translateY(-50%) scale(1.1);
 }

 .arrow svg {
     width: 16px;
     height: 16px;
     pointer-events: none;
 }

 .arrow-prev {
     left: clamp(10px, 4vw, 56px);
 }

 .arrow-next {
     right: clamp(10px, 4vw, 56px);
 }

 /* ════════════════════════════════
       NAME PLATES — all hidden
    ════════════════════════════════ */
 .name-plate {
     display: none;
     text-align: center;
     margin-top: 40px;
     min-height: 70px;
     animation: fadeUp .35s ease;
 }

 @keyframes fadeUp {
     from {
         opacity: 0;
         transform: translateY(10px);
     }

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

 .member-name {
     font-size: clamp(1.4rem, 3.2vw, 2.1rem);
     font-weight: 700;
     color: #6370c5;
     letter-spacing: -.01em;
 }

 .member-role {
     margin-top: 4px;
     font-size: clamp(.75rem, 1.6vw, .95rem);
     font-weight: 500;
     letter-spacing: .06em;
     color: var(--muted);
 }

 /* ════════════════════════════════
       DOTS
    ════════════════════════════════ */
 .dots {
     display: flex;
     align-items: center;
     justify-content: center;
     gap: 9px;
     margin-top: 26px;
 }

 .dot-label {
     width: 11px;
     height: 11px;
     border-radius: 50%;
     background: rgba(200, 114, 42, .25);
     cursor: pointer;
     display: block;
     transition: background .25s, width .25s, border-radius .25s;
 }

 /* ════════════════════════════════════════════════════════
       THE WHOLE CAROUSEL LOGIC — pure CSS :checked selectors
       Pattern: #mN:checked ~ .team-section .card-X { styles }
       The radios sit BEFORE .team-section in the HTML so the
       general sibling combinator (~) can reach inside it.
    ════════════════════════════════════════════════════════ */

 /* ── Reusable position mixins via grouped selectors ──
       pos 0  = centre active card
       pos +1 = right neighbour
       pos -1 = left  neighbour
       pos +2 = far right
       pos -2 = far left                                     */

 /* ───── MEMBER 1 ACTIVE ───── */
 #m1:checked~.team-section .card-1 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m1:checked~.team-section .card-1 img {
     filter: none;
 }

 #m1:checked~.team-section .card-2 {
     /* +1 right */
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m1:checked~.team-section .card-2 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m1:checked~.team-section .card-3 {
     /* +2 right */
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m1:checked~.team-section .card-3 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m1:checked~.team-section .card-6 {
     /* -1 left */
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m1:checked~.team-section .card-6 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m1:checked~.team-section .card-5 {
     /* -2 left */
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m1:checked~.team-section .card-5 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m1:checked~.team-section .name-1 {
     display: block;
 }

 #m1:checked~.team-section .dot-1 {
     background: #c82c40;
     width: 30px;
     border-radius: 6px;
 }

 #m1:checked~.team-section .prev-1,
 #m1:checked~.team-section .next-1 {
     display: flex;
 }

 /* ───── MEMBER 2 ACTIVE ───── */
 #m2:checked~.team-section .card-2 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m2:checked~.team-section .card-2 img {
     filter: none;
 }

 #m2:checked~.team-section .card-3 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m2:checked~.team-section .card-3 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m2:checked~.team-section .card-4 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m2:checked~.team-section .card-4 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m2:checked~.team-section .card-1 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m2:checked~.team-section .card-1 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m2:checked~.team-section .card-6 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m2:checked~.team-section .card-6 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m2:checked~.team-section .name-2 {
     display: block;
 }

 #m2:checked~.team-section .dot-2 {
     background: var(--accent);
     width: 30px;
     border-radius: 6px;
 }

 #m2:checked~.team-section .prev-2,
 #m2:checked~.team-section .next-2 {
     display: flex;
 }

 /* ───── MEMBER 3 ACTIVE ───── */
 #m3:checked~.team-section .card-3 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m3:checked~.team-section .card-3 img {
     filter: none;
 }

 #m3:checked~.team-section .card-4 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m3:checked~.team-section .card-4 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m3:checked~.team-section .card-5 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m3:checked~.team-section .card-5 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m3:checked~.team-section .card-2 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m3:checked~.team-section .card-2 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m3:checked~.team-section .card-1 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m3:checked~.team-section .card-1 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m3:checked~.team-section .name-3 {
     display: block;
 }

 #m3:checked~.team-section .dot-3 {
     background: var(--accent);
     width: 30px;
     border-radius: 6px;
 }

 #m3:checked~.team-section .prev-3,
 #m3:checked~.team-section .next-3 {
     display: flex;
 }

 /* ───── MEMBER 4 ACTIVE ───── */
 #m4:checked~.team-section .card-4 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m4:checked~.team-section .card-4 img {
     filter: none;
 }

 #m4:checked~.team-section .card-5 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m4:checked~.team-section .card-5 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m4:checked~.team-section .card-6 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m4:checked~.team-section .card-6 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m4:checked~.team-section .card-3 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m4:checked~.team-section .card-3 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m4:checked~.team-section .card-2 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m4:checked~.team-section .card-2 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m4:checked~.team-section .name-4 {
     display: block;
 }

 #m4:checked~.team-section .dot-4 {
     background: var(--accent);
     width: 30px;
     border-radius: 6px;
 }

 #m4:checked~.team-section .prev-4,
 #m4:checked~.team-section .next-4 {
     display: flex;
 }

 /* ───── MEMBER 5 ACTIVE ───── */
 #m5:checked~.team-section .card-5 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m5:checked~.team-section .card-5 img {
     filter: none;
 }

 #m5:checked~.team-section .card-6 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m5:checked~.team-section .card-6 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m5:checked~.team-section .card-1 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m5:checked~.team-section .card-1 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m5:checked~.team-section .card-4 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m5:checked~.team-section .card-4 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m5:checked~.team-section .card-3 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m5:checked~.team-section .card-3 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m5:checked~.team-section .name-5 {
     display: block;
 }

 #m5:checked~.team-section .dot-5 {
     background: var(--accent);
     width: 30px;
     border-radius: 6px;
 }

 #m5:checked~.team-section .prev-5,
 #m5:checked~.team-section .next-5 {
     display: flex;
 }

 /* ───── MEMBER 6 ACTIVE ───── */
 #m6:checked~.team-section .card-6 {
     width: clamp(200px, 20vw, 290px);
     height: clamp(280px, 42vw, 470px);
     z-index: 10;
     transform: translateX(0) scale(1);
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 28px 70px rgba(0, 0, 0, .22);
 }

 #m6:checked~.team-section .card-6 img {
     filter: none;
 }

 #m6:checked~.team-section .card-1 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(175px, 19vw, 265px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m6:checked~.team-section .card-1 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m6:checked~.team-section .card-2 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(305px, 33vw, 460px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m6:checked~.team-section .card-2 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m6:checked~.team-section .card-5 {
     width: clamp(160px, 16vw, 235px);
     height: clamp(220px, 34vw, 390px);
     z-index: 7;
     transform: translateX(clamp(-265px, -19vw, -175px));
     opacity: 1;
     pointer-events: auto;
     box-shadow: 0 12px 36px rgba(0, 0, 0, .12);
 }

 #m6:checked~.team-section .card-5 img {
     filter: grayscale(100%) brightness(.88);
 }

 #m6:checked~.team-section .card-4 {
     width: clamp(130px, 13vw, 195px);
     height: clamp(175px, 27vw, 320px);
     z-index: 4;
     transform: translateX(clamp(-460px, -33vw, -305px));
     opacity: .85;
     pointer-events: auto;
     box-shadow: 0 6px 20px rgba(0, 0, 0, .08);
 }

 #m6:checked~.team-section .card-4 img {
     filter: grayscale(100%) brightness(.78);
 }

 #m6:checked~.team-section .name-6 {
     display: block;
 }

 #m6:checked~.team-section .dot-6 {
     background: var(--accent);
     width: 30px;
     border-radius: 6px;
 }

 #m6:checked~.team-section .prev-6,
 #m6:checked~.team-section .next-6 {
     display: flex;
 }

 /* ════════════════════════════════
       RESPONSIVE
    ════════════════════════════════ */
 @media (max-width: 768px) {
     .team-section {
         padding: 48px 0 60px;
     }

     .arrow-prev {
         left: 6px;
     }

     .arrow-next {
         right: 6px;
     }

     /* hide outer ±2 cards */
     #m1:checked~.team-section .card-3,
     #m1:checked~.team-section .card-5,
     #m2:checked~.team-section .card-4,
     #m2:checked~.team-section .card-6,
     #m3:checked~.team-section .card-5,
     #m3:checked~.team-section .card-1,
     #m4:checked~.team-section .card-6,
     #m4:checked~.team-section .card-2,
     #m5:checked~.team-section .card-1,
     #m5:checked~.team-section .card-3,
     #m6:checked~.team-section .card-2,
     #m6:checked~.team-section .card-4 {
         opacity: 0 !important;
         pointer-events: none !important;
     }

     /* tighter ±1 offset */
     #m1:checked~.team-section .card-2,
     #m2:checked~.team-section .card-3,
     #m3:checked~.team-section .card-4,
     #m4:checked~.team-section .card-5,
     #m5:checked~.team-section .card-6,
     #m6:checked~.team-section .card-1 {
         transform: translateX(clamp(130px, 28vw, 180px)) !important;
     }

     #m1:checked~.team-section .card-6,
     #m2:checked~.team-section .card-1,
     #m3:checked~.team-section .card-2,
     #m4:checked~.team-section .card-3,
     #m5:checked~.team-section .card-4,
     #m6:checked~.team-section .card-5 {
         transform: translateX(clamp(-180px, -28vw, -130px)) !important;
     }
 }

 @media (max-width: 480px) {

     #m1:checked~.team-section .card-1,
     #m2:checked~.team-section .card-2,
     #m3:checked~.team-section .card-3,
     #m4:checked~.team-section .card-4,
     #m5:checked~.team-section .card-5,
     #m6:checked~.team-section .card-6 {
         width: clamp(155px, 52vw, 210px) !important;
         height: clamp(210px, 72vw, 290px) !important;
     }

     .arrow {
         width: 36px !important;
         height: 36px !important;
     }
 }