:root {
      --gold-gradient: linear-gradient(135deg, #e7a305 0%, #ffc107 100%);
    }
    body { font-family: 'Inter', sans-serif; background: #fafafa; }
    h1, h2, h3, .serif { font-family: 'Playfair Display', serif; }

    /* --- PREMIUM HERO --- */
    .director-hero {
      min-height: 100vh; position: relative; background: #002f43; overflow: hidden;
      display: flex; align-items: center; padding-top: 100px;
    }
    .hero-bg-pattern {
      position: absolute; inset: 0; opacity: 0.1;
      background-image: radial-gradient(circle at 2px 2px, white 1px, transparent 0);
      background-size: 40px 40px;
    }
    .director-hero-grid {
      display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 60px; align-items: center;
      position: relative; z-index: 10;
    }
    .director-hero-content { color: white; }
    .hero-pre { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5em; color: var(--secondary); margin-bottom: 24px; display: block; }
    .hero-title { font-size: clamp(3rem, 6vw, 5.5rem); font-weight: 900; line-height: 1; margin-bottom: 32px; letter-spacing: -0.02em; }
    .hero-title span { font-style: italic; font-weight: 400; color: rgba(255,255,255,0.7); }

    /* Fix for Image Blur: Use a styled frame instead of a full-screen background */
    .director-img-container { position: relative; width: 100%; max-width: 500px; margin: 0 auto; }
    .director-img-frame {
      position: relative; border-radius: 40px; overflow: hidden;
      aspect-ratio: 4/5; box-shadow: 0 50px 100px rgba(0,0,0,0.5);
      z-index: 10; background: #fff;
    }
    .director-img-frame img {
      width: 100%; height: 100%; object-fit: cover; object-position: top center;
      background: #f8fafc; transition: transform 0.6s ease;
      image-rendering: -webkit-optimize-contrast; /* Sharpening attempt */
    }
    .director-img-container::before {
      content: ''; position: absolute; inset: -15px; border: 2px solid var(--secondary);
      border-radius: 50px; opacity: 0.3; transform: rotate(-3deg); z-index: 0;
    }

    /* --- MESSAGE SECTION --- */
    .message-section { padding: 150px 0; background: white; }
    .message-card {
      background: #fff; border-radius: 40px; padding: 100px;
      box-shadow: 0 40px 100px rgba(0,0,0,0.05);
      margin-top: -200px; position: relative; z-index: 20;
    }
    .message-body { font-size: 1.35rem; line-height: 1.9; color: #475569; font-weight: 300; }
    .pull-quote {
      font-size: 3rem; color: var(--primary); font-weight: 700; line-height: 1.1;
      margin: 80px 0; border-left: 12px solid var(--secondary); padding-left: 50px;
      font-family: 'Playfair Display', serif;
    }
    
    .signature-box { margin-top: 80px; display: flex; align-items: center; gap: 32px; }
    .sign-details h4 { font-size: 2.2rem; font-weight: 800; color: var(--dark-text); margin-bottom: 4px; }
    .sign-details p { font-size: 0.9rem; font-weight: 700; color: var(--secondary); text-transform: uppercase; letter-spacing: 0.1em; }

    /* --- PRINCIPLES --- */
    .principles-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-top: 100px; }
    .principle-card {
      padding: 50px; background: #f8fafc; border-radius: 30px;
      transition: all 0.4s ease; border: 1px solid transparent;
    }
    .principle-card:hover { transform: translateY(-10px); background: #fff; border-color: #edf2f7; box-shadow: 0 30px 60px rgba(0,0,0,0.05); }
    .p-count { font-size: 4rem; font-weight: 900; color: rgba(0,88,124,0.15); line-height: 1; margin-bottom: 24px; font-family: 'Playfair Display'; }
    .principle-card h5 { font-size: 1.6rem; font-weight: 700; margin-bottom: 16px; color: var(--dark-text); }

    @media (max-width: 1024px) {
      .director-hero { min-height: auto; padding: 120px 0 80px; }
      .director-hero-grid { grid-template-columns: 1fr; text-align: center; gap: 40px; }
      .hero-title { font-size: 3.5rem; }
      .director-img-container { max-width: 400px; }
      .message-card { padding: 60px 40px; margin-top: -60px; }
      .principles-grid { grid-template-columns: 1fr; gap: 24px; }
      .pull-quote { font-size: 2.2rem; padding-left: 24px; margin: 40px 0; }
    }

    @media (max-width: 768px) {
      .hero-title { font-size: 3rem; }
      .message-section { padding: 100px 0; }
      .message-card { padding: 40px 24px; border-radius: 24px; }
      .message-body { font-size: 1.15rem; }
      .pull-quote { font-size: 1.8rem; border-left-width: 8px; }
      .sign-details h4 { font-size: 1.8rem; }
      .section h2 { font-size: 3rem !important; }
    }

    @media (max-width: 480px) {
      .hero-title { font-size: 2.5rem; }
      .hero-pre { font-size: 0.65rem; letter-spacing: 0.3em; }
      .section h2 { font-size: 2.2rem !important; }
      .signature-box { flex-direction: column; text-align: left; gap: 16px; }
      .message-section { padding: 60px 0; }
      .message-card { padding: 40px 20px; }
      .principles-grid { margin-top: 40px; }
    }