.director-section {
     padding: var(--space-32) var(--space-16);
     max-width: var(--container-xl);
     margin: 0 auto;
     background-color: var(--white);
 }

 .director-header {
     text-align: center;
     margin-bottom: var(--space-32);
 }

 .director-subtitle {
     font-family: var(--font-family-base);
     font-size: var(--font-size-sm);
     font-weight: var(--font-weight-semibold);
     letter-spacing: 2px;
     color: var(--orange);
     text-transform: uppercase;
     margin: 0 0 var(--space-12);
 }

 .director-title {
     font-family: var(--font-family-base);
     font-size: var(--font-size-4xl);
     font-weight: var(--font-weight-bold);
     line-height: var(--line-height-tight);
     letter-spacing: var(--letter-spacing-tight);
     color: var(--blue);
     margin: 0;
     max-width: 800px;
     margin-left: auto;
     margin-right: auto;
 }

     .director-content {
         display: grid;
         grid-template-columns: 1fr;
         gap: var(--space-32);
         align-items: center;
     }

     @media (min-width: 768px) {
         .director-content {
             grid-template-columns: 1fr 1fr;
         }
     }

     .director-text {
         order: 2;
     }

     @media (min-width: 768px) {
         .director-text {
             order: 1;
         }
     }

     .director-name {
         font-size: var(--font-size-2xl);
         font-weight: var(--font-weight-bold);
         color: var(--dark);
         margin-bottom: var(--space-12);
     }

     .director-role {
         font-size: var(--font-size-base);
         color: var(--blue);
         font-weight: var(--font-weight-medium);
         margin-bottom: var(--space-20);
     }

     .director-description {
         font-size: var(--font-size-lg);
         line-height: var(--line-height-normal);
         color: var(--gray-dark);
         margin-bottom: var(--space-20);
     }

     .director-buttons {
         display: flex;
         flex-wrap: wrap;
         gap: var(--space-16);
         margin-top: var(--space-24);
     }

     .btn {
         display: inline-flex;
         align-items: center;
         gap: var(--space-8);
         padding: var(--space-12) var(--space-24);
         font-size: var(--font-size-base);
         font-weight: var(--font-weight-semibold);
         border-radius: var(--radius-base);
         border: none;
         cursor: pointer;
         transition: all var(--duration-normal) var(--ease-standard);
         text-decoration: none;
     }

     .btn-primary {
         background-color: var(--blue);
         color: var(--white);
         box-shadow: var(--shadow-md);
     }

     .btn-primary:hover {
         background-color: #164a8f;
         box-shadow: var(--shadow-lg);
         transform: translateY(-2px);
     }

     .btn-secondary {
         background-color: var(--white);
         color: var(--blue);
         border: 2px solid var(--blue);
     }

     .btn-secondary:hover {
         background-color: var(--blue);
         color: var(--white);
     }

     .btn i {
         font-size: var(--font-size-lg);
     }

     .director-image {
         order: 1;
         position: relative;
         border-radius: var(--radius-lg);
         overflow: hidden;
         box-shadow: var(--shadow-lg);
     }

     @media (min-width: 768px) {
         .director-image {
             order: 2;
         }
     }

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

     /* Video Modal */
     .video-modal {
         display: none;
         position: fixed;
         z-index: 9999;
         left: 0;
         top: 0;
         width: 100%;
         height: 100%;
         background-color: rgba(0, 0, 0, 0.9);
         animation: fadeIn var(--duration-normal) var(--ease-standard);
     }

     .video-modal.active {
         display: flex;
         align-items: center;
         justify-content: center;
     }

     @keyframes fadeIn {
         from {
             opacity: 0;
         }

         to {
             opacity: 1;
         }
     }

     .video-modal-content {
         position: relative;
         width: 90%;
         max-width: 900px;
         aspect-ratio: 16 / 9;
         animation: slideIn var(--duration-normal) var(--ease-standard);
     }

     @keyframes slideIn {
         from {
             transform: translateY(-50px);
             opacity: 0;
         }

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

     .video-modal iframe {
         width: 100%;
         height: 100%;
         border: none;
         border-radius: var(--radius-md);
     }

     .video-modal-close {
         position: absolute;
         top: -40px;
         right: 0;
         color: var(--white);
         font-size: var(--font-size-3xl);
         font-weight: var(--font-weight-bold);
         cursor: pointer;
         background: none;
         border: none;
         padding: var(--space-8);
         transition: transform var(--duration-fast) var(--ease-standard);
     }

     .video-modal-close:hover {
         transform: rotate(90deg);
     }