/* ── CARD GRID ── */
         .cards-grid {
         display: grid;
         grid-template-columns: repeat(4, 1fr);
         gap: 16px;
         margin-bottom: 0;
         }
         .director-card {
         background: var(--card-bg);
         cursor: pointer;
         transition: transform 0.25s ease, box-shadow 0.25s ease;
         position: relative;
         overflow: hidden;
         }
         .director-card:hover {
         transform: translateY(-4px);
         box-shadow: 0 12px 32px rgba(244,124,32,0.18);
         }
         .director-card.active .card-name {
         background: var(--orange);
         color: var(--text-white);
         }
         .card-photo {
         width: 100%;
         height: 400px;
         aspect-ratio: 3/4;
         background: #2a2a2a;
         display: flex;
         align-items: flex-start;
         justify-content: center;
         overflow: hidden;
         position: relative;
         }
         .card-photo img {
         width: 100%;
         height: 100%;
         object-fit: cover;
         display: block;
         }
         .card-photo .placeholder-label {
         position: absolute;
         top: 10px;
         left: 50%;
         transform: translateX(-50%);
         font-size: 11px;
         color: var(--text-muted);
         white-space: nowrap;
         letter-spacing: 0.05em;
         }
         /* Director silhouette */
         .card-photo::after {
         content: '';
         position: absolute;
         bottom: 0; left: 0; right: 0;
         height: 40%;
         background: linear-gradient(to top, #1e1e1e88, transparent);
         pointer-events: none;
         }
         .card-name {
         padding: 14px 16px;
         font-weight: 700;
         font-size: large;
         text-transform: uppercase;
         letter-spacing: 0.08em;
         color: var(--text-dim);
         background: #2a2a2a;
         text-align: center;
         transition: background 0.2s, color 0.2s;
         }
         .director-card.active .card-name {
         background: var(--orange);
         color: #fff;
         }
         /* ── DETAIL PANEL ── */
         .detail-panel {
         background: whitesmoke;
         border: 1px solid var(--border);
         border-top: 2px solid var(--orange);
         padding: 36px 40px;
         display: grid;
         grid-template-columns: 260px 1fr;
         gap: 0 40px;
         margin-top: 16px;
         transition: opacity 0.3s ease;
         }
         .detail-left {
         border-right: 1px solid #f07b20;
         padding-right: 40px;
         }
         .detail-role {
         font-size: medium;
         letter-spacing: 0.14em;
         text-transform: uppercase;
         color: var(--orange);
         font-weight: 600;
         margin-bottom: 10px;
         }
         .detail-name {
         font-weight: 800;
         font-size: xx-large;
         text-transform: uppercase;
         letter-spacing: 0.04em;
         color: var(--text-white);
         line-height: 1.05;
         }
         .detail-right {
         padding-left: 0;
         }
         .detail-quote {
         border-left: 3px solid var(--orange);
         padding-left: 20px;
         margin-bottom: 20px;
         }
         .detail-quote p {
         font-style: italic;
         font-size: clamp(0.95rem, 1.5vw, 1.1rem);
         color: var(--text-white);
         line-height: 1.55;
         font-weight: 500;
         }
         .detail-bio {
         font-size: medium;
         color: var(--text-dim);
         line-height: 1.7;
         }
         /* ── MOBILE ── */
         @media (max-width: 767px) {
         body { border-left-width: 3px; }
         
         .cards-grid {
         grid-template-columns: 1fr;
         gap: 0;
         }
         .director-card {
         display: flex;
         flex-direction: column;
         margin-top: 20px;
         }
         .card-photo {
         aspect-ratio: 16/10;
         }
         /* Mobile: detail panel is injected AFTER the active card */
         .detail-panel {
         grid-template-columns: 1fr;
         gap: 24px;
         padding: 28px 20px;
         margin-top: 0;
         border-top: 2px solid var(--orange);
         }
         .detail-left {
         border-right: none;
         padding-right: 0;
         border-bottom: 1px solid var(--border);
         padding-bottom: 20px;
         }
         .detail-right { padding-left: 0; }
         }
         @media (min-width: 768px) and (max-width: 1023px) {
         .cards-grid { grid-template-columns: repeat(2, 1fr); }
         }
         /* ── ANIMATIONS ── */
         .director-card {
         opacity: 0;
         animation: fadeUp 0.5s ease forwards;
         }
         .director-card:nth-child(1) { animation-delay: 0.05s; }
         .director-card:nth-child(2) { animation-delay: 0.15s; }
         .director-card:nth-child(3) { animation-delay: 0.25s; }
         .director-card:nth-child(4) { animation-delay: 0.35s; }
         @keyframes fadeUp {
         from { opacity: 0; transform: translateY(20px); }
         to   { opacity: 1; transform: translateY(0); }
         }
         .detail-panel {
         animation: panelIn 0.35s ease;
         box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
         }
         @keyframes panelIn {
         from { opacity: 0; transform: translateY(8px); }
         to   { opacity: 1; transform: translateY(0); }
         }