@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@500&family=Jost:wght@300;400;500&display=swap');

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

   body {
     font-family: 'Jost', sans-serif;
     color: #23262B;
     line-height: 1.6;
     padding-top: 76px;
   }

   a { text-decoration: none; color: inherit; }
   ul { list-style: none; }
   img { max-width: 100%; display: block; }

   h1 {
     font-family: 'Cormorant Garamond', serif;
   }

   .container {
     max-width: 1180px;
     margin: 0 auto;
     padding: 0 24px;
   }

   /* ===== HERO ===== */
   .hero {
     background: #16233F;
     padding: 80px 0;
     overflow: hidden;
   }

   .hero-inner {
     display: flex;
     align-items: center;
     gap: 50px;
   }

   .hero-copy {
     flex: 1;
   }

   .page-hero {
     padding: 50px 0;
   }

   .eyebrow {
     color:  #ee790b;
     font-size: 1.1rem;
     letter-spacing: 0.1em;
     text-transform: uppercase;
   }

   .hero-copy h1 {
     color: #fff;
     font-size: 2.6rem;
     margin: 14px 0 18px;
   }

   .hero-copy h1 em { color: #ee790b; font-style: italic; }

   .hero-copy p {
     color: rgba(255,255,255,.75);
     margin-bottom: 24px;
   }

   /* ===== SEKSYON PÈSONÈL ===== */
   .personnel {
     padding: 70px 0 90px;
     background: #f7f8fa;
   }

   .personnel-grid {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
     gap: 30px;
   }

   .personnel-card {
     background: #fff;
     border-radius: 12px;
     padding: 30px 20px;
     text-align: center;
     box-shadow: 0 6px 20px rgba(0,0,0,.06);
     transition: transform .25s ease, box-shadow .25s ease;
   }

   .personnel-card:hover {
     transform: translateY(-6px);
     box-shadow: 0 12px 28px rgba(0,0,0,.1);
   }

   .personnel-avatar {
     width: 78px;
     height: 78px;
     margin: 0 auto 18px;
     border-radius: 50%;
     background: #16233F;
     color: #ee790b;
     display: flex;
     align-items: center;
     justify-content: center;
     font-size: 1.6rem;
     font-weight: 600;
     font-family: 'Cormorant Garamond', serif;
     border: 3px solid  #ee790b;
   }

   .personnel-photo {
     width: 78px;
     height: 78px;
     margin: 0 auto 18px;
     border-radius: 50%;
     object-fit: cover;
     border: 3px solid  #ee790b;
   }

   .personnel-card h3 {
     font-family: 'Jost', sans-serif;
     font-size: 1.1rem;
     color: #16233F;
     margin-bottom: 8px;
   }

   .personnel-role {
     display: inline-block;
     background : #ee790b;
     color:  #07012b;
     font-size: 0.8rem;
     font-weight: 500;
     padding: 5px 14px;
     border-radius: 20px;
     text-transform: uppercase;
     letter-spacing: .03em;
   }

   .personnel-vide {
     text-align: center;
     color: #6c757d;
     padding: 40px 0;
   }

   @media (max-width: 640px) {
     .hero-copy h1 { font-size: 2rem; }
     .personnel-grid { grid-template-columns: 1fr; }
   }