/* Biography page body. Replace the placeholder areas in template.html with site content and images. */
:root {
    --primary-color: #003f87;
    --primary-light: #0052cc;
     --bio-green: #004b3a; 
     --bio-gold: #f4b400; 
     --bio-ink: #172b26; 
     --bio-muted: #5f6d68; 
     --bio-soft: #f4f8f6;
     }
.bio-page { 
    color: var(--bio-ink); 
    background: #fff; 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
.bio-container { 
    width: min(1220px, calc(100% - 48px)); 
    margin-inline:auto; 
}
.bio-breadcrumb-wrap { 
    background: #fff; border-bottom: 1px solid #edf0ef; 
}
.bio-breadcrumb { 
    min-height: 44px; 
    display: flex; 
    align-items: center; 
    gap: 8px; 
    font-size: .73rem; 
    color: #60706b; 
}
.bio-breadcrumb a {
     color: inherit; 
     text-decoration: none;
     }
.bio-breadcrumb a:hover {
    color: var(--primary-color);
 }
.bio-hero {
     position: relative; 
     overflow: hidden; 
    /* background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.7) 40%, rgba(255, 255, 255, 0) 100%); */

     background: linear-gradient(110deg,#edf4f1 0%,#fff 47%,#dbe8e7 100%); 
     min-height: 315px; 
     background-image: url('images/about-hero.webp');
     background-repeat: no-repeat;
     background-size: cover;
    }
/* Apply background-image: url('images/your-building.jpg') to .bio-hero after adding the building photo. */
.bio-hero-overlay {
     position:absolute; 
     inset:0; 
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 1%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);

     /* background: radial-gradient(circle at 87% 35%,rgba(255,255,255,.1),rgba(0,67,53,.13));  */
     pointer-events:none;
     }
.bio-hero-content { 
    position:relative; 
    min-height:315px; 
    display:grid; 
    grid-template-columns: 400px 1fr;
    align-items:center; 
    gap: 34px; 
    padding-block: 25px; 
}

.bio-portrait-placeholder {
    overflow: hidden;
}

.bio-portrait-placeholder img {
    width: 100%;
    height: 100%;
    max-height: 250px;
    object-fit: cover;
    display: block;
    border-radius: 8px;
}
.bio-portrait-placeholder i { 
    font-size:4.5rem; opacity:.75; 
}
.bio-portrait-placeholder span { 
    font-size:.8rem; 
    text-transform:uppercase; 
    letter-spacing:.08em; 
}
.bio-intro { 
    max-width: 550px;
 }
 .bio-summary{
    margin:0 0 14px; 
    font-size:.84rem; 
    line-height:1.55;
    font-weight:500;
    color:rgb(56, 56, 56);
 }
 .bio-eyebrow { 
    margin:0 0 7px; 
    color:var(--primary-color); 
    font-size:.68rem; 
    text-transform:uppercase; 
    font-weight:800; 
    letter-spacing:.04em; 
}
.bio-eyebrow::after { 
    content:""; 
    display:block; 
    width:42px; 
    height:3px; 
    margin-top:5px; 
    background:var(--bio-gold); 
}
.bio-intro h1 { 
    margin:0; 
    font-size:clamp(1.8rem,4vw,2.45rem);
    line-height:1.1; 
}
.bio-role { 
    margin:5px 0 12px; 
    color:var(--primary-color); 
    font-weight:800; 
    font-size:1.1rem;
 }
 .bio-intro > p:not(.bio-eyebrow):not(.bio-role)
  { 
    margin:0 0 14px; 
    font-size:.84rem; 
    line-height:1.55; 
}
.bio-download { 
    display:inline-flex; 
    align-items:center; 
    gap:8px; 
    padding:9px 14px; 
    border-radius:4px; 
    background:var(--primary-color); 
    color:#fff; 
    text-decoration:none; 
    font-size:.72rem; 
    font-weight:700; 
}
.bio-download:hover { 
    background:var(--primary-light); 
}
.bio-details { 
    display:grid; 
    grid-template-columns:2.5fr 1.15fr; 
    gap:46px; 
    padding-block:35px; 
}
.bio-details h2,.bio-credentials h2,.leadership-preview h2 { 
    margin:0 0 14px; 
    color:var(--primary-color); 
    /*font-size:1.2rem; line-height:1.15;  */
}
.bio-copy { 
    padding-right:36px; 
    border-right:1px solid #dfe7e3; 
}
.bio-copy p { 
    margin:0 0 18px; 
    /* font-size:.78rem;  */
    line-height:1.6; 
}
.bio-journey{
    position:sticky;
    top:100px;  
     align-self: start;
}
.timeline-item {
     position:relative; 
     display:grid; 
     grid-template-columns:85px 35px 1fr; 
     gap:10px; 
     padding-bottom:17px; 
     font-size:.8rem; 
     line-height:1.25;
     }
.timeline-item:not(:last-child)::after { 
    content:""; 
    position:absolute; 
    left:102px; 
    top:28px; 
    bottom:0; 
    width:1px; 
    background:#b8d0c6; 
}
.timeline-item time { 
    color:var(--primary-color); 
    font-weight:800; 
    text-align:right; 
}
.timeline-icon { 
    position:relative; 
    z-index:1; 
    width:30px; 
    height:30px; 
    display:grid; 
    place-items:center; 
    border-radius:50%; 
    background:var(--primary-light); 
    color:#fff; 
    font-size:.7rem; 
}
.timeline-item h3 {
     margin:0 0 2px; 
     font-size:.75rem; 
    }
    .timeline-item p { 
        margin:0; 
        color:#495a54; 
    }
.bio-credentials { 
    display:grid; 
    grid-template-columns:1.3fr 1fr; 
    gap:32px; 
    padding:28px 20px; 
    border-radius:12px; 
    background:#f0f7fd; 
}
.education-panel { 
    padding-right:30px; 
    border-right:1px solid #cfddd7; 
}
.qualification-grid {
     display:grid; 
     grid-template-columns:repeat(3,1fr); 
     gap:10px; 
    }
.qualification-card { 
        min-height:154px; 
        padding:17px;
        text-align:center; 
        border-radius:9px; 
        background:#fff; 
        box-shadow:0 3px 9px rgba(26,60,48,.08);
     }
.qualification-card > i { 
        color:#003f87; 
        font-size:1.5rem;
     }
.qualification-card h3 {
         margin:8px 0 7px; 
         font-size:.7rem; 
         line-height:1.25;
         }
         
.qualification-card p { 
margin:0 0 8px; 
color:#4a5954; 
font-size:.7rem; 
line-height:1.3; 
}
.qualification-card strong { 
color:var(--primary-color); 
font-size:.58rem; 
}
.expertise-tags { 
    display:grid; 
    grid-template-columns:repeat(2,1fr); 
    gap:10px; 
}
.expertise-tags span { 
    display:flex; 
    align-items:center; 
    gap:9px; 
    min-height:33px; 
    padding:7px 10px; 
    border:1px solid #acd1c0; 
    border-radius:8px; 
    color:var(--primary-color); 
    font-size:.8rem; 
    font-weight:700; 
}
.expertise-tags i { 
    font-size:.84rem; 
}
.commitment-banner { 
display:flex; 
align-items:center;
 justify-content:space-between; 
 gap:42px; 
 margin-top:24px; 
 padding:22px 34px; 
 border-radius:9px; 
 color:#fff;
  background:linear-gradient(110deg,#003f87,#003f87);
 }
 .commitment-banner blockquote { 
    max-width:680px; 
    margin:0; 
    font-size:.77rem; 
    font-style:italic; 
    line-height:1.55;
 }
 .commitment-banner blockquote i {
     margin-right:10px; 
     color:var(--bio-gold); 
     font-size:1.4rem; 
    }
    
.commitment-banner > p { 
    min-width:190px; 
    margin:0; 
    padding-left:22px; 
    border-left:2px solid var(--bio-gold); 
    color:#c8ded5;
     font-size:.67rem; line-height:1.35;
     }
     
.commitment-banner strong { 
    color:#fff; 
    font-size:.73rem; 
}
.leadership-preview {
     padding-block:24px 40px;
     }
.section-heading {
     display:flex; 
     align-items:center; 
     justify-content:space-between; 
     gap:18px; 
    }
.section-heading a { 
color:var(--primary-color); 
font-size:.65rem; 
font-weight:800; 
text-decoration:none; 
}

.section-heading a i,.mini-leader em i { 
    margin-left:5px; 
}
.leader-grid { 
    display:grid; 
    grid-template-columns:repeat(4,1fr);
    gap:11px; 
}
.mini-photo {
    overflow: hidden;
}

.mini-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.mini-leader { 
    display:flex; 
    align-items:center; 
    gap:10px; 
    min-width:0; 
    padding:9px; 
    color:inherit; 
    text-decoration:none; 
    border:1px solid #e2e4eb;
    border-radius:8px; 
    box-shadow:0 2px 7px rgba(28,59,48,.05);
 }
 .mini-leader:hover { 
    border-color:#9ca2c7;
 }
 .mini-photo {
    width:100%;
     max-width:80px; 
     height:80px; 
     display:grid; 
     place-items:center; 
     border-radius:5px; 
     background-repeat:no-repeat;
     background-size: cover;
    background-position: center;

     /* object-fit:cover; */
     
     /* color:#426157;  */
    }
.mini-leader strong,.mini-leader small,.mini-leader em {
         display:block; 
         overflow:hidden; 
         text-overflow:ellipsis; 
         white-space:nowrap; 
        }
.mini-leader strong { 
    font-size:.8rem; 
}
.mini-leader small {
     margin-top:2px; 
     color:#61726b; 
     font-size:.7rem; 
    }
    .mini-leader em { 
        margin-top:7px; 
        color:var(--primary-color);
        font-style:normal; 
        font-size:.55rem; 
        font-weight:800; 
    }

    @media (max-width: 620px) {
    .bio-journey {
        position: static;
    }
}
@media (max-width:1250px){
 .leader-grid { 
        grid-template-columns:repeat(3,1fr); 
    } 
}
@media(max-width:990px){
     .leader-grid { 
        grid-template-columns:repeat(2,1fr); 
    } 
}
@media (max-width:850px) { 
    .bio-hero-content { 
        grid-template-columns:230px 1fr; 
    }
    .bio-details { 
        gap:25px; 
    }
    .bio-credentials { 
        grid-template-columns:1fr;
     }
     .education-panel { 
        padding:0 0 22px; 
        border:0; 
        border-bottom:1px solid #cfddd7; 
    }
    .leader-grid { 
        grid-template-columns:repeat(2,1fr); 
    } 
}
@media (max-width:620px) { 
.bio-container { 
        width:min(100% - 32px,1120px); 
    }
.bio-hero-content {
     grid-template-columns:1fr; 
     gap:22px; 
     padding-block:24px; 
    }
.bio-portrait-placeholder { 
    min-height:220px; 
}
.bio-details { 
    grid-template-columns:1fr;
     padding-block:28px; 
    }
.bio-copy { 
    padding:0 0 20px; 
    border:0; 
    border-bottom:1px solid #dfe7e3; 
}
.qualification-grid { 
    grid-template-columns:1fr; 
}
.qualification-card { 
    min-height:0; 
}
.expertise-tags 
{ grid-template-columns:1fr;

 }
 .commitment-banner {
     align-items:flex-start;
      flex-direction:column;
       gap:18px;
        padding:24px;
     }
.commitment-banner > p {
         min-width:0; 
 }
 .leader-grid { 
    grid-template-columns:1fr; 
}
.timeline-item {
     grid-template-columns:76px 32px 1fr;
     }
.timeline-item:not(:last-child)::after { 
    left:91px;
 } 
}