/* About Page Specific Styles */

/* About Page Variables - Professional Blue Theme */
:root {
    /* Primary Colors */
    --color-primary: #0f172a;
    --color-primary-light: #1e293b;
    --color-secondary: #334155;
    --color-accent: #06b6d4;
    --color-accent-hover: #0891b2;
    
    /* Gray Scale */
    --color-gray-100: #94a3b8;
    --color-gray-200: #64748b;
    --color-gray-300: #475569;
    --color-gray-400: #334155;
    --color-gray-500: #1e293b;
    --color-gray-700: #334155;
    --color-gray-900: #0f172a;
    
    /* Text Colors */
    --color-text-primary: #f8fafc;
    --color-text-secondary: #94a3b8;
    --color-white: #f8fafc;
    --color-wheat: #f5deb3; /* // president color text  */
    
    /* Border and UI Colors */
    --color-border: #334155;
    --color-success: #10b981;
    --color-warning: #f59e0b;
    --color-error: #ef4444;
    
    /* Background Colors */
    --color-bg: var(--color-primary);
    --color-bg-secondary: var(--color-secondary);
    --color-bg-card: rgba(30, 41, 59, 0.5);
    --color-bg-modal: #ffffff;
    
    /* Card Colors */
    --card-bg: rgba(30, 41, 59, 0.5);
    --card-border: var(--color-border);
    --card-hover-border: var(--color-accent);
    
    /* Operational Board Colors */
    --operational-bg: var(--color-gray-300);
    --operational-card-bg: var(--color-gray-900);
    --operational-border: var(--color-gray-700);
    --operational-text: var(--color-white);
    --operational-accent: var(--color-accent);
    --operational-transition: 0.3s ease;
    --operational-border-radius-1: 0.5rem;
    --operational-border-radius-2: 0.75rem;
    --operational-border-radius-3: 1rem;
    
    /* Modal Colors */
    --modal-bg: #ffffff;
    --modal-text: #1f2937;
    --modal-text-secondary: #374151;
    --modal-accent: #06b6d4;
    --modal-border: #e5e7eb;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* Global Styles */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
    color: var(--color-text-primary);
    background-color: var(--color-bg);
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 1rem;
}

.text-center {
    text-align: center;
}

/* Grid System */
.grid {
    display: grid;
    gap: 2rem;
}

.grid-cols-1 {
    grid-template-columns: 1fr;
}

.grid-cols-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
    grid-template-columns: repeat(3, 1fr);
}

/* Utility Classes */
.mb-4 {
    margin-bottom: 1rem;
}

/* Utility Classes */
.mb-4 {
    margin-bottom: 1rem;
}

/* Sections */
.section {
    padding: clamp(3rem, 8vw, 6rem) 0;
    position: relative;
    z-index: 1;
}

.section-alt {
    background-color: var(--color-secondary);
    position: relative;
    z-index: 1;
}

/* Activities And Programmes Section - Higher z-index to ensure visibility */
.activities-programmes-section {
    position: relative;
    z-index: 10;
}

/* Join Our Mission Section - Enhanced styling */
.join-mission-section {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-primary) 100%);
    position: relative;
    z-index: 5;
    overflow: hidden;
}

.join-mission-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="rgba(255,255,255,0.1)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
    opacity: 0.3;
    z-index: -1;
}

.join-mission-section .section-header {
    position: relative;
    z-index: 2;
}

.join-mission-section .section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    background: linear-gradient(135deg, var(--color-white) 0%, var(--color-accent) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    margin-bottom: 1.5rem;
    font-weight: 700;
}

.join-mission-section .section-subtitle {
    font-size: 1.25rem;
    color: var(--color-text-primary);
    max-width: 800px;
    margin: 0 auto 3rem;
    line-height: 1.6;
    font-weight: 400;
}

.join-mission-section .cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 2rem;
}

.join-mission-section .btn {
    padding: 1rem 2rem;
    border-radius: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    position: relative;
    overflow: hidden;
}

.join-mission-section .btn-primary {
    background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-hover) 100%);
    color: white;
    box-shadow: 0 8px 25px rgba(49, 130, 206, 0.3);
}

.join-mission-section .btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 35px rgba(49, 130, 206, 0.4);
    border-color: var(--color-accent);
}

.join-mission-section .btn-secondary {
    background: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
    backdrop-filter: blur(10px);
}

.join-mission-section .btn-secondary:hover {
    background: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(255, 255, 255, 0.2);
}

.section-header {
    text-align: center;
    margin-bottom: clamp(2rem, 6vw, 3rem);
}

.section-title {
    margin-bottom: 1rem;
    font-size: clamp(2rem, 4vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text-primary);
    line-height: 1.2;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-secondary);
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Cards */
.card {
    background-color: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 1rem;
    padding: clamp(1.5rem, 4vw, 2rem);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
    border-color: var(--card-hover-border);
}

.card-icon {
    width: 3rem;
    height: 3rem;
    color: var(--color-accent);
    margin-bottom: 1rem;
}

.card-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
    color: var(--color-text-primary);
    font-weight: 600;
}

.card-text {
    color: var(--color-text-secondary);
    line-height: 1.6;
    flex-grow: 1;
    margin: 0;
}

/* Stats */
.stats {
    display: flex;
    justify-content: center;
    gap: 3rem;
    margin: 3rem 0;
    flex-wrap: wrap;
}

.stat {
    text-align: center;
    background-color: var(--card-bg);
    padding: 2rem;
    border-radius: 1rem;
    border: 1px solid var(--card-border);
    min-width: 200px;
    flex: 1;
    max-width: 300px;
}

.stat-number {
    font-size: 3rem;
    font-weight: 800;
    color: var(--color-accent);
    display: block;
}

.stat-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
    margin-top: 0.5rem;
}

/* Timeline Styles */
.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-accent);
    transform: translateX(-50%);
}

.timeline-item {
    position: relative;
    margin-bottom: 3rem;
    display: flex;
    align-items: center;
}

.timeline-item:nth-child(odd) {
    flex-direction: row-reverse;
}

.timeline-marker {
    width: 16px;
    height: 16px;
    background: var(--color-accent);
    border-radius: 50%;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

.timeline-content {
    background: var(--color-secondary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-lg);
    width: 45%;
    margin: 0 2rem;
}

.timeline-content h3 {
    color: var(--color-accent);
    margin-bottom: 0.5rem;
}

/* Ethics Cards */
.ethics-card {
    background: var(--color-secondary);
    padding: 2rem;
    border-radius: 1rem;
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: transform 0.3s ease;
}

.ethics-card:hover {
    transform: translateY(-5px);
}

.ethics-icon {
    width: 4rem;
    height: 4rem;
    margin: 0 auto 1rem;
    color: var(--color-accent);
}

.ethics-card h3 {
    color: var(--color-accent);
    margin-bottom: 1rem;
}

/* Founding Members Grid */
.founding-members-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-bottom: 3rem;
    justify-items: center;
}

.founding-member-card {
    background: var(--card-bg);
    padding: 1.5rem;
    border-radius: 1.5rem;
    text-align: center;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    border: 1px solid var(--card-border);
    width: 100%;
    max-width: 280px;
    position: relative;
    overflow: hidden;
}

.founding-member-card h4 {
    color: var(--operational-color-white);
    margin-bottom: 0.5rem;
}

.founding-member-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.4);
    border-color: var(--card-hover-border);
}

.founding-member-photo {
    position: relative;
    width: 120px;
    height: 120px;
    margin: 0 auto 1.5rem;
    border-radius: 50%;
    overflow: hidden;
}

.founding-member-image {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    object-position: center;
    border: 3px solid var(--color-accent);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.founding-member-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 50%;
}

.founding-member-card:hover .founding-member-overlay {
    opacity: 1;
}

.founding-member-info {
    text-align: center;
}

/* View Bio Button Styles (shared between operational board and founding members) */
.view-cv-btn {
    background: var(--color-accent);
    color: white;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
    display: inline-block;
}

.view-cv-btn:hover {
    background: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(49, 130, 206, 0.3);
}

.founding-member-card:hover .founding-member-image {
    transform: scale(1.05);
    border-color: #ffffff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

.founding-member-name {
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-accent);
    line-height: 1.3;
}

.founding-member-specialty {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin-bottom: 0.5rem;
    font-weight: 500;
}

.founding-member-location {
    font-size: 0.8rem;
    color: var(--color-text-secondary);
    opacity: 0.8;
}

.founding-members-note {
    background: var(--color-secondary);
    padding: 2rem;
    border-radius: 1rem;
    border-left: 4px solid var(--color-accent);
}

/* CTA Buttons */
.cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ===== OPERATIONAL BOARD STYLES ===== */
/*
 * Operational Board Styles
 *
 * This stylesheet adapts the look and feel of the ORAIA CV board to the
 * existing ORAIA website. All styles are scoped under the `.operational-board`
 * class to prevent leakage into other parts of the site. Color variables
 * defined here are mapped to the primary palette of the main site so that
 * buttons, cards and backgrounds blend seamlessly with the surrounding
 * design. Where the original CV board used light/dark greys and subtle
 * gradients, we approximate these values using the existing dark theme and
 * accent colour defined in `style.css`.
 */

/* ========================= OPERATIONAL BOARD STYLES ============================= */
/* All operational board variables are now in :root in header-footer.css */

/* Make the whole Operational Board section backgroundless */
#operational-board {
  background: transparent;
  position: relative;
}

#operational-board .operational-board {
  background: transparent;
  position: relative;
  z-index: 10;
}

/* Add grid background for operational board */
.bg-baord {
  background: var(--operational-color-gray-300);
  background-image: 
    linear-gradient(rgba(255, 255, 255, 0.05) 3px, transparent 3px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 3px, transparent 3px);
  background-size: 70px 70px;
  background-position: center center;
  position: relative;
  min-height: 100vh;
  padding: 2rem 0;
}

/* Add a subtle overlay to enhance the grid effect */
.bg-baord::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, 
    rgba(46, 65, 97, 0.3) 0%, 
    rgba(46, 65, 97, 0.1) 50%, 
    rgba(46, 65, 97, 0.3) 100%);
  z-index: -1;
  pointer-events: none;
}


/* ========================= CV BOARD HEADER ============================ */
.operational-board .cv-board-header {
  margin-top: 0;
  padding: 7rem 0 3rem 0;

  border-bottom: none;
}

.operational-board .cv-board-header__container {
  text-align: center;
  max-width: 900px;
  margin: 0 auto;
  z-index: 100;
  
}

.operational-board .cv-board-title {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, var(--operational-color-primary), var(--operational-color-white));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  
}

.operational-board .cv-board-subtitle {
  font-size: 1.1rem;
  color: var(--operational-color-gray-200);
  margin-bottom: 2rem;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* ========================= SEARCH AND FILTER CONTROLS ================= */
.operational-board .cv-board-controls {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-top: 2rem;
}

.operational-board .search-container {
  position: relative;
  min-width: 240px;
}

.operational-board .search-input {
  width: 100%;
  padding: 0.75rem 0.75rem 0.75rem 2.5rem;
  border: 2px solid var(--operational-color-gray-700);
  border-radius: var(--operational-card-border-radius-3);
  background: var(--operational-color-gray-900);
  color: var(--operational-color-white);
  font-size: 1rem;
  transition: var(--operational-transition);
}

.operational-board .search-input:focus {
  outline: none;
  border-color: var(--operational-color-primary);
  box-shadow: 0 0 0 3px var(--operational-color-primary-light);
}

.operational-board .search-input::placeholder {
  color: rgb(255, 255, 255);
}

.operational-board .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--operational-color-gray-200);
  font-size: 1.2rem;
}

.operational-board .filter-select {
  padding: 0.75rem 1.25rem;
  border: 2px solid var(--operational-color-gray-700);
  border-radius: var(--operational-card-border-radius-3);
  background: var(--operational-color-gray-900);
  color: var(--operational-color-white);
  font-size: 1rem;
  cursor: pointer;
  transition: var(--operational-transition);
  min-width: 200px;
}

.operational-board .filter-select:focus {
  outline: none;
  border-color: var(--operational-color-primary);
  box-shadow: 0 0 0 3px var(--operational-color-primary-light);
}

.operational-board .filter-select option {
  background: var(--operational-color-gray-900);
  color: var(--operational-color-white);
}

.operational-board .view-toggle {
  display: flex;
  border: 2px solid var(--operational-color-gray-700);
  border-radius: var(--operational-card-border-radius-3);
  overflow: hidden;
}

.operational-board .view-btn {
  padding: 0.75rem 1.25rem;
  background: var(--operational-color-gray-900);
  color: var(--operational-color-gray-200);
  border: none;
  cursor: pointer;
  transition: var(--operational-transition);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.operational-board .view-btn:hover {
  background: var(--operational-color-gray-700);
  color: var(--operational-color-white);
}

.operational-board .view-btn.active {
  background: var(--operational-color-primary);
  color: var(--operational-color-white);
}

/* ========================= CV BOARD GRID ========================== */
.operational-board .cv-board-grid {
  padding: 2rem 0 4rem;
}

.operational-board .board-members {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
  transition: var(--operational-transition);
  /*
   * By default, allow the grid to determine its own alignment. Specific
   * alignment rules for grid and list views are defined further below.
   */
}

.operational-board .board-members.list-view {
  grid-template-columns: 1fr;
  gap: 1.5rem;
  /* In list view we want the cards to align to the start of the container
     rather than being centred. Using justify-content/start and justify-items
     ensures that cards line up along the left edge, mimicking the original
     design where the card does not fill the entire width and leaves space
     on the right. */
  justify-content: flex-start;
  justify-items: start;
}

/* Centre grid items only in grid view (not list view). When there are
   fewer items than columns, this prevents the grid from hugging the left
   edge and keeps the layout balanced. */
.operational-board .board-members:not(.list-view) {
  justify-content: center;
  justify-items: center;
}

.operational-board .board-member-card {
  background: var(--operational-color-gray-900);
  border-radius: var(--operational-card-border-radius-3);
  overflow: hidden;
  transition: var(--operational-transition);
  border: 1px solid var(--operational-color-gray-700);
  position: relative;
  /*
   * Do not set any width constraints here. Width constraints and alignment
   * are applied separately for grid and list views below.
   */
}

.operational-board .board-member-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 1rem 2rem rgba(0, 0, 0, 0.3);
  border-color: var(--operational-color-primary);
}

/*
 * In grid view (when .list-view class is not present on the container),
 * constrain the width of each card and centre it within its grid cell. This
 * prevents a single card from becoming too wide when there is only one
 * visible and maintains a consistent column width across multiple items.
 */
.operational-board .board-members:not(.list-view) .board-member-card {
  max-width: 380px;
  justify-self: center;
}

/*
 * In list view, allow the card to size itself based on its content and
 * align it to the start of the container. We deliberately avoid setting
 * a max-width here so the card naturally spans the space needed for its
 * content without filling the entire row, replicating the original layout.
 */
.operational-board .board-members.list-view .board-member-card {
  max-width: none;
  width: auto;
  justify-self: start;
}

/*
 * In list view, each board member card is displayed as a horizontal row with the
 * photo on the left and the content on the right. By default a flex item
 * without an explicit width will size itself based on its contents, which
 * causes the card to shrink to fit the text when there is only one card in
 * the list. This leaves a large empty gap on the right side of the card and
 * makes the layout look unbalanced. To ensure that a single card (or any
 * number of cards) always spans the full width of its container, we set
 * `width: 100%` on the card in list view. This makes the card grow to fill
 * the available space, preserving a consistent look whether there is one
 * card or many.
 */
.operational-board .board-members.list-view .board-member-card {
  display: flex;
  align-items: center;
  padding: 1rem;
  /*
   * Do not set a fixed width here. The width will be determined by the
   * content and additional rules (see below) to allow the card to shrink
   * naturally instead of stretching across the entire container. This
   * replicates the original behaviour where the card only takes up the
   * necessary space in list view.
   */
}

.operational-board .member-photo {
  position: relative;
  overflow: hidden;
  height: 260px;
}

.operational-board .board-members.list-view .member-photo {
  flex: 0 0 150px;
  height: 150px;
  margin-right: 1.5rem;
}

.operational-board .member-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.operational-board .member-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: var(--operational-transition);
}

.operational-board .board-member-card:hover .member-overlay {
  opacity: 1;
}

.operational-board .view-cv-btn {
  padding: 0.5rem 1rem;
  background: var(--operational-color-primary);
  color: var(--operational-color-white);
  border: none;
  border-radius: var(--operational-card-border-radius-1);
  cursor: pointer;
  font-size: 0.875rem;
  transition: var(--operational-transition);
}

.operational-board .view-cv-btn:hover {
  background: var(--operational-color-primary-light);
}

.operational-board .member-info {
  padding: 1.5rem;
}

.operational-board .board-members.list-view .member-info {
  flex: 1;
}

.operational-board .member-name {
  font-size: 1.25rem;
  color: var(--operational-color-white);
  margin-bottom: 0.25rem;
}

.operational-board .member-position {
  font-size: 1rem;
  color: var(--color-wheat);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.operational-board .member-summary {
  font-size: 0.875rem;
  color: var(--operational-color-gray-200);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.operational-board .member-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.operational-board .tag {
  background: var(--operational-color-gray-700);
  color: var(--operational-color-white);
  padding: 0.25rem 0.5rem;
  border-radius: var(--operational-card-border-radius-1);
  font-size: 0.75rem;
  text-transform: uppercase;
}

/* List view modifications */
.operational-board .board-members.list-view .member-name {
  font-size: 1.5rem;
}

.operational-board .board-members.list-view .member-summary {
  font-size: 0.9rem;
}

/* ========================= CV MODAL ============================= */
.operational-board .cv-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* Slightly reduce the opacity of the overlay to soften the contrast with the lighter modal */
  background: rgba(0, 0, 0, 0.6);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  padding: 6rem 2rem 2rem 2rem;
}

.operational-board .cv-modal.show {
  display: flex;
}

.operational-board .cv-modal-content {
  /*
   * Give the bio modal a lighter palette to improve readability and convey
   * a more polished, professional look. Using a near‑white background and
   * dark text aligns the modal with contemporary design trends while still
   * harmonising with the rest of the dark interface. A generous border
   * radius and subtle shadow help the modal stand out without feeling heavy.
   */
  background: var(--modal-bg);
  color: var(--modal-text);
  border-radius: 1rem;
  width: 100%;
  max-width: 700px;
  max-height: 80vh;
  overflow-y: auto;
  scroll-behavior: smooth;
  position: relative;
  padding: 2rem;
  box-shadow: 0 1.5rem 3rem rgba(0, 0, 0, 0.3);
}

.operational-board .cv-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Add separation from content below with a bottom border */
  border-bottom: 1px solid var(--modal-border);
  padding-bottom: 1rem;
  margin-bottom: 1rem;
}

.operational-board .cv-modal-actions {
  display: flex;
  gap: 1rem;
}

.operational-board .cv-action-btn {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.5rem 1rem;
  background: var(--operational-color-gray-700);
  border: none;
  border-radius: var(--operational-card-border-radius-1);
  color: var(--operational-color-white);
  font-size: 0.875rem;
  cursor: pointer;
  transition: var(--operational-transition);
}

.operational-board .cv-action-btn:hover {
  background: var(--operational-color-primary);
}

.operational-board .cv-modal-close {
  background: none;
  border: none;
  color: #6b7280; /* neutral grey for icon */
  font-size: 1.5rem;
  cursor: pointer;
  transition: var(--operational-transition);
  padding: 0.25rem;
}

.operational-board .cv-modal-close:hover {
  color: var(--operational-color-primary);
}

.operational-board .cv-modal-body h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-size: 1.4rem;
  color: var(--modal-accent);
  /* Draw a subtle divider beneath section headings */
  border-bottom: 1px solid var(--modal-border);
  padding-bottom: 0.25rem;
}

.operational-board .cv-modal-body h4 {
  margin-top: 1rem;
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
  color: var(--modal-text);
  font-weight: 600;
}

.operational-board .cv-modal-body p {
  margin-bottom: 0.5rem;
  color: var(--modal-text-secondary);
  line-height: 1.6;
}

.operational-board .cv-modal-body ul {
  margin-left: 0;
  margin-bottom: 1rem;
  list-style: none;
  color: var(--modal-text-secondary);
  padding-left: 0;
}

.operational-board .cv-modal-body li {
  margin-bottom: 0.6rem;
  position: relative;
  padding-left: 1.5rem;
}

/* Custom bullet styling for list items inside the CV modal */
.operational-board .cv-modal-body li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background-color: var(--modal-accent);
}

/* ===================== BIOGRAPHY LAYOUT ===================== */
/*
 * These rules define the look and feel of the biography modal, which
 * presents information in a narrative format rather than a plain CV.
 * Sections are separated with clear headings, entries are displayed in
 * a timeline style, and skills are shown as coloured tags. The photo
 * of the board member is displayed alongside the name and position to
 * humanise the bio.
 */

.operational-board .cv-modal-body .bio-layout {
  /* reset any inherited list styling */
  margin: 0;
  padding: 0;
}

.operational-board .cv-modal-body .bio-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.operational-board .cv-modal-body .bio-photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e2e8f0;
}

.operational-board .cv-modal-body .bio-info {
  flex: 1;
}

.operational-board .cv-modal-body .bio-name {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 600;
  color: #0e7490;
}

.operational-board .cv-modal-body .bio-position {
  margin: 0.25rem 0 0;
  font-size: 1rem;
  color: #6b7280;
}

.operational-board .cv-modal-body .bio-summary {
  margin-top: 0.5rem;
  color: #374151;
  line-height: 1.6;
}

.operational-board .cv-modal-body .bio-section-title {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  font-size: 1.3rem;
  color: #0e7490;
  border-bottom: 1px solid #e2e8f0;
  padding-bottom: 0.25rem;
}

.operational-board .cv-modal-body .bio-timeline {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
  border-left: 2px solid #e2e8f0;
  margin-bottom: 1rem;
  position: relative;
}

.operational-board .cv-modal-body .bio-timeline li {
  position: relative;
  padding-left: 1rem;
  margin-bottom: 0.7rem;
  color: #374151;
  line-height: 1.5;
}

.operational-board .cv-modal-body .bio-timeline li::before {
  content: '';
  position: absolute;
  left: -0.55rem;
  top: 0.35rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: #0e7490;
}

.operational-board .cv-modal-body .timeline-title {
  font-weight: 600;
  color: #1f2937;
}

.operational-board .cv-modal-body .timeline-organisation {
  color: #0f172a;
}

.operational-board .cv-modal-body .timeline-period {
  color: #6b7280;
}

.operational-board .cv-modal-body .timeline-description {
  color: #374151;
}

.operational-board .cv-modal-body .skill-category {
  margin-bottom: 1rem;
}

.operational-board .cv-modal-body .skill-category-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 0.5rem;
}

.operational-board .cv-modal-body .skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.operational-board .cv-modal-body .skill-tag {
  background: #e0f7fa;
  color: #0e7490;
  padding: 0.25rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ===================== COMPACT MODERN BIO DESIGN ===================== */
/*
 * Compact, modern styling for the bio modal with smaller avatar and cleaner layout.
 * Focus on readability and efficient use of space while maintaining visual appeal.
 */

/* Compact header styling */
.operational-board .cv-modal-body .bio-header {
    padding: 1.25rem;
    background: linear-gradient(135deg, #f1f5f9 0%, #e2e8f0 100%);
    border-radius: 10px;
    border: 1px solid #cbd5e1;
    margin-bottom: 1.25rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.operational-board .cv-modal-body .bio-photo {
    width: 70px;
    height: 70px;
    border: 2px solid #ffffff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.12);
}

.operational-board .cv-modal-body .bio-name {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1e293b;
    margin: 0 0 0.25rem 0;
    line-height: 1.3;
}

.operational-board .cv-modal-body .bio-position {
    font-size: 1rem;
    color: #0ea5e9;
    font-weight: 500;
    margin: 0 0 0.5rem 0;
}

.operational-board .cv-modal-body .bio-summary {
    color: #475569;
    line-height: 1.7;
    margin-top: 0.75rem;
    padding: 1rem;
    background: #ffffff;
    border-radius: 8px;
    border-left: 3px solid #0ea5e9;
}

/* Compact section titles */
.operational-board .cv-modal-body .bio-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1e293b;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: #ffffff;
    border-radius: 6px;
    border-left: 3px solid #0ea5e9;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

/* Enhanced timeline styling */
.operational-board .cv-modal-body .bio-timeline {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    border-left: 3px solid #e2e8f0;
    margin-left: 0;
}

.operational-board .cv-modal-body .bio-timeline li::before {
    background-color: #0ea5e9;
    width: 8px;
    height: 8px;
    left: -0.65rem;
}

.operational-board .cv-modal-body .timeline-title {
    font-weight: 600;
    color: #1e293b;
    font-size: 1rem;
}

.operational-board .cv-modal-body .timeline-organisation {
    color: #0ea5e9;
    font-weight: 500;
}

.operational-board .cv-modal-body .timeline-period {
    color: #64748b;
    font-size: 0.9rem;
}

.operational-board .cv-modal-body .timeline-description {
    color: #475569;
    line-height: 1.6;
}

/* Enhanced skill tags */
.operational-board .cv-modal-body .skill-category {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.operational-board .cv-modal-body .skill-category-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1e293b;
    margin-bottom: 0.75rem;
}

.operational-board .cv-modal-body .skill-tag {
    background: linear-gradient(135deg, #e0f7fa 0%, #b2ebf2 100%);
    color: #0891b2;
    padding: 0.4rem 0.8rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    border: 1px solid #b2ebf2;
    transition: all 0.2s ease;
}

.operational-board .cv-modal-body .skill-tag:hover {
    background: linear-gradient(135deg, #b2ebf2 0%, #81d4fa 100%);
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Enhanced general content styling */
.operational-board .cv-modal-body h3 {
    font-size: 1.3rem;
    color: #1e293b;
    font-weight: 600;
    padding: 0.75rem 1rem;
    background: #ffffff;
    border-radius: 8px;
    border-left: 3px solid #0ea5e9;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.operational-board .cv-modal-body h4 {
    font-size: 1.1rem;
    color: #374151;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.operational-board .cv-modal-body p {
    color: #475569;
    line-height: 1.7;
    margin-bottom: 0.75rem;
}

.operational-board .cv-modal-body ul {
    background: #ffffff;
    border-radius: 8px;
    padding: 1rem;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    margin-bottom: 1rem;
}

.operational-board .cv-modal-body li {
    color: #475569;
    line-height: 1.6;
    margin-bottom: 0.5rem;
}

.operational-board .cv-modal-body li::before {
    background-color: #0ea5e9;
    width: 6px;
    height: 6px;
    border-radius: 50%;
}

/* Responsive enhancements */
@media (max-width: 768px) {
    .operational-board .cv-modal-body .bio-header {
        flex-direction: column;
        text-align: center;
        padding: 1rem;
    }
    
    .operational-board .cv-modal-body .bio-photo {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem auto;
    }
    
    .operational-board .cv-modal-body .bio-name {
        font-size: 1.5rem;
    }
    
    .operational-board .cv-modal-body .bio-position {
        font-size: 1rem;
    }
    
    .operational-board .cv-modal-body .bio-section-title {
        font-size: 1.2rem;
        padding: 0.5rem 0.75rem;
    }
    
    .operational-board .cv-modal-body .bio-timeline,
    .operational-board .cv-modal-body .skill-category,
    .operational-board .cv-modal-body ul {
        padding: 0.75rem;
    }
}

/* Responsive Design for About Page */
@media (max-width: 1024px) {
    .grid-cols-3 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-cols-2 {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .section-title {
        font-size: clamp(1.75rem, 3.5vw, 2.25rem);
    }
    
    .section-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 768px) {
    .timeline::before {
        left: 2rem;
    }
    
    .timeline-item {
        flex-direction: row;
        padding-left: 4rem;
    }
    
    .timeline-item:nth-child(odd) {
        flex-direction: row;
    }
    
    .timeline-marker {
        left: 2rem;
    }
    
    .timeline-content {
        width: 100%;
        margin: 0;
    }
    
    .grid-cols-3,
    .grid-cols-2 {
        grid-template-columns: 1fr;
    }
    
    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }
    
    .founding-members-grid {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1.5rem;
    }
    
    .founding-member-card {
        max-width: 250px;
        padding: 1.5rem 1rem;
    }
    
    .founding-member-image {
        width: 100px;
        height: 100px;
    }
    
    .join-mission-section .btn {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
    
    .section {
        padding: clamp(2rem, 6vw, 4rem) 0;
    }
    
    .card {
        padding: 1.5rem;
    }
}

@media (max-width: 480px) {
    .founding-members-grid {
        grid-template-columns: 1fr;
    }
    
    .stats {
        flex-direction: column;
        align-items: center;
    }
    
    .stat {
        width: 100%;
        max-width: 300px;
    }
    
    .join-mission-section .cta-buttons {
        flex-direction: column;
        gap: 1rem;
    }
    
    .join-mission-section .btn {
        width: 100%;
        max-width: 300px;
    }
}

/* Responsive adjustments for operational board */
@media (max-width: 768px) {
  .operational-board .member-photo {
    height: 200px;
  }
  .operational-board .board-members.list-view .member-photo {
    flex: 0 0 120px;
    height: 120px;
  }
  .operational-board .cv-board-controls {
    flex-direction: column;
    align-items: stretch;
  }
  .operational-board .view-toggle {
    align-self: center;
  }
  .operational-board .cv-modal-content {
    padding: 1rem;
    margin: 1rem;
  }
  .operational-board .cv-modal {
    padding: 4rem 1rem 1rem 1rem;
  }
}

/* Loading spinner animation */
@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* Board loading state */
.board-loading {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 200px;
  color: var(--color-text-secondary);
}

.board-loading.hidden {
  display: none;
}

.hidden {
  display: none !important;
}