/* ---- Facts & Figures Hero ---- */
.fnf-hero-wrapper {
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
    display: flex;
}

.fnf-hero-img {
    display: block;
    width: 100%;
    height: auto;
    will-change: transform;
    transform-origin: top center;
}

.fnf-hero-text-container {
    position: absolute;
    bottom: 170px;
    right: 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    padding-right: 15px;
    z-index: 2;
}

.fnf-hero-year {
    font-size: clamp(32px, 5vw, 38px);
    font-weight: 500;
    color: #fff;
    line-height: 0.95;
    letter-spacing: 2px;
    font-family: Impact, 'Poppins', sans-serif;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.6);
}

.fnf-hero-title {
    font-size: clamp(24px, 4vw, 46px);
    font-weight: 500;
    color: #fff;
    line-height: 1;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-family: Impact, 'Poppins', sans-serif;
    text-shadow: 2px 4px 10px rgba(0,0,0,0.6);
    margin-top: 2px;
}

.fnf-hero-infobox {
    position: absolute;
    bottom: 55px;
    right: 0;
    width: 52%;
    background: #d91c2b;
    padding: 24px 32px 24px 28px;
    box-sizing: border-box;
    box-shadow: -15px 15px 0px #ffd200;
    z-index: 2;
}

.fnf-hero-infobox-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 1.2vw, 12px);
    font-weight: 800;
    color: #fff;
    margin-bottom: 2px;
    line-height: 1.3;
    text-transform: uppercase;
}

.fnf-hero-infobox-desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1.1vw, 12px);
    font-weight: 400;
    color: #fff;
    line-height: 1.45;
    margin: 0;
}

/* ---- Enrollment Overview ---- */
.fnf-enrollment-section {
    padding: 70px 48px;
    background: #fff;
}

.fnf-enrollment-title {
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #1a1a1a;
    margin-bottom: 32px;
}

.fnf-stat-block {
    display: flex;
    flex-direction: column;
    padding-left: 18px;
    border-left: 5px solid #c00000;
}

.fnf-stat-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #c00000;
    margin-bottom: 4px;
}

.fnf-stat-number {
    font-size: 57px;
    font-weight: 800;
    line-height: 1;
    color: #1a1a1a;
    letter-spacing: 1px;
    font-family: 'Poppins', sans-serif;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fnf-stat-number.visible {
    opacity: 1;
}

.fnf-stat-sublabel {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #888;
    margin-top: 6px;
}

/* ---- New Page Section ---- */
.fnf-new-page-section {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.fnf-full-img {
    width: 100%;
    height: auto;
    display: block;
    will-change: transform;
    transform-origin: top center;
}

/* ---- Foreign Students Banner ---- */
.fnf-fs-banner {
    position: absolute;
    bottom: 8%;
    right: 5%;
    width: clamp(280px, 60%, 650px);
    display: flex;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
    z-index: 10;
}

.fnf-fs-header {
    background-color: #da202b;
    color: #fff;
    flex: 0 0 38%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    text-align: center;
}

.fnf-fs-title {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(14px, 2.0vw, 25px);
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.fnf-fs-body {
    background-color: #f1f2f2;
    flex: 1;
    padding: 20px 30px;
    display: flex;
    justify-content: space-between;
}

.fnf-fs-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 48%;
}

.fnf-fs-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.fnf-fs-num {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(14px, 2.2vw, 24px);
    color: #333;
    width: clamp(30px, 4vw, 55px);
    text-align: right;
    line-height: 1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fnf-fs-num.visible {
    opacity: 1;
}

.fnf-fs-nat {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 1.3vw, 13px);
    font-weight: 500;
    color: #444;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    flex: 1;
}

.fnf-fs-nat.visible {
    opacity: 1;
}

@media (max-width: 768px) {
    .fnf-fs-banner {
        flex-direction: column;
        width: 85%;
    }
    .fnf-fs-header {
        padding: 15px;
    }
    .fnf-fs-body {
        flex-direction: row;
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .fnf-fs-banner {
        position: relative;
        width: 90%;
        bottom: 0;
        right: 0;
        margin: -20px auto 20px auto;
        box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    }
    .fnf-new-page-section {
        flex-direction: column;
        background: #fff;
    }
    .fnf-fs-body {
        flex-direction: column;
        gap: 15px;
        padding: 15px 20px;
    }
    .fnf-fs-col {
        width: 100%;
        gap: 10px;
    }
}

/* ---- Accreditation Banner ---- */
.fnf-acc-banner {
    position: absolute;
    bottom: 8%;
    right: 5%;
    width: clamp(280px, 55%, 550px);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
    z-index: 10;
}

.fnf-acc-header {
    background-color: #da202b;
    color: #fff;
    padding: 18px;
    text-align: center;
}

.fnf-acc-title {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(16px, 1.8vw, 20px);
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.fnf-acc-body {
    background-color: #f1f2f2;
    padding: 18px 35px;
    display: flex;
    justify-content: space-between;
}

.fnf-acc-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 48%;
}

.fnf-acc-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fnf-acc-num {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(14px, 1.8vw, 18px);
    color: #333;
    width: 30px;
    text-align: right;
    line-height: 1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fnf-acc-num.visible {
    opacity: 1;
}

.fnf-acc-desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 1.2vw, 12px);
    font-weight: 400;
    color: #333;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fnf-acc-desc.visible {
    opacity: 1;
}

@media (max-width: 768px) {
    .fnf-acc-banner {
        width: 85%;
    }
    .fnf-acc-body {
        padding: 18px 20px;
    }
}

@media (max-width: 480px) {
    .fnf-acc-banner {
        position: relative;
        width: 90%;
        bottom: 0;
        right: 0;
        margin: -20px auto 20px auto;
        box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    }
    .fnf-acc-body {
        flex-direction: column;
        gap: 15px;
    }
    .fnf-acc-col {
        width: 100%;
        gap: 10px;
    }
}

/* ---- Board Passing Rates Section ---- */
.fnf-boards-container {
    position: absolute;
    bottom: 15%;
    left: 50%;
    transform: translateX(-50%);
    width: 85%;
    max-width: 900px;
    display: flex;
    gap: 20px;
    z-index: 10;
}

.fnf-boards-left {
    flex: 1.4;
}

.fnf-boards-right {
    flex: 1;
}

.fnf-board-table {
    width: 100%;
    border-collapse: collapse;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.4);
}

.fnf-board-table th {
    background-color: #da202b;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(12px, 1.8vw, 15px);
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 10px 8px;
    text-align: center;
    border: 2px solid #222;
    line-height: 1.2;
}

.fnf-board-table th.th-split {
    font-size: clamp(11px, 1.6vw, 14px);
}

.fnf-board-table th.col-num-hdr {
    width: 25%;
}

.fnf-board-table td {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 1vw, 11px);
    color: #1a1a1a;
    padding: 6px 8px;
    border: 2px solid #222;
    font-weight: 700;
}

.fnf-board-table td.col-num {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(12px, 1.4vw, 16px);
    font-weight: normal;
    text-align: center;
    width: 12%;
    color: #222;
    background: rgba(190, 190, 190, 0.8);
}

.fnf-board-table td.col-prog {
    text-align: left;
    text-transform: uppercase;
    background: #f1f2f2;
}

@media (max-width: 992px) {
    .fnf-boards-container {
        flex-direction: column;
        width: 85%;
        gap: 30px;
    }
}

@media (max-width: 480px) {
    .fnf-boards-container {
        position: relative;
        bottom: 0;
        left: 0;
        transform: none;
        width: 90%;
        margin: -20px auto 20px auto;
    }
    .fnf-board-table th {
        font-size: 14px;
        padding: 8px 5px;
    }
    .fnf-board-table th.th-split {
        font-size: 12px;
    }
    .fnf-board-table td {
        font-size: 9px;
        padding: 5px;
    }
    .fnf-board-table td.col-num {
        font-size: 12px;
    }
}

/* =====================================================
   FNF Honeycomb Overlay  —  2 / 3 / 4 row layout
   Pointy-top hex  (clip-path matches styles.css):
     W = 230px  |  H = 248px

   Touching rule for this clip-path:
     Diagonal shared-edge vert distance = 3H/4 = 186px
     Flat-side horiz distance           = W    = 230px

   Adding uniform 12px gap:
     horiz_step  = W + 12         = 242px
     vert_step   = (3H/4) + 12    = 198px
     row_offset  = horiz_step / 2 = 121px

   Row positions (top / left of each 230×248 div):
     Row 1 (2 hexes): top =   0   left = 242, 484
     Row 2 (3 hexes): top = 198   left = 121, 363, 605
     Row 3 (4 hexes): top = 396   left =   0, 242, 484, 726

   Container: 956 × 644px
   Positioned at left:-130px so hero overflow:hidden clips the left
   ===================================================== */
.fnf-honeycomb-overlay {
    position: absolute;
    left: -440px;
    top: 70%;
    transform: translateY(-50%);
    width: 956px;
    height: 644px;
    z-index: 4;
    pointer-events: none;
}

/* Individual hex shell — W × H */
.fnf-hex {
    position: absolute;
    width: 230px;
    height: 248px;
    filter: drop-shadow(0 4px 14px rgba(0,0,0,0.55));
}

/* White border: scaled-up hex behind the image */
.fnf-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ffffff;
    transform: scale(1.025);
    transform-origin: center center;
    z-index: 1;
}

/* Hex image fills the clipped hexagon */
.fnf-hex img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    object-fit: cover;
    object-position: center;
    z-index: 2;
    display: block;
}

/* ---- Row 1 (2 hexes): top = 0 ---- */
.fnf-hex--r1c1 { top:   0px; left: 242px; }
.fnf-hex--r1c2 { top:   0px; left: 484px; }

/* ---- Row 2 (3 hexes): top = 198 ---- */
.fnf-hex--r2c1 { top: 198px; left: 121px; }
.fnf-hex--r2c2 { top: 198px; left: 363px; }
.fnf-hex--r2c3 { top: 198px; left: 605px; }

/* ---- Row 3 (4 hexes): top = 396 ---- */
.fnf-hex--r3c1 { top: 396px; left:   0px; }
.fnf-hex--r3c2 { top: 396px; left: 242px; }
.fnf-hex--r3c3 { top: 396px; left: 484px; }
.fnf-hex--r3c4 { top: 396px; left: 726px; }

/* Responsive adjustments for tablets and smaller screens */
@media (max-width: 1024px) {
    .fnf-honeycomb-overlay {
        left: -300px;
        width: 800px;
        height: 536px;
    }
    .fnf-hex {
        width: 190px;
        height: 205px;
    }
    .fnf-hex--r1c1 { left: 200px; }
    .fnf-hex--r1c2 { left: 400px; }
    .fnf-hex--r2c1 { top: 164px; left: 100px; }
    .fnf-hex--r2c2 { top: 164px; left: 300px; }
    .fnf-hex--r2c3 { top: 164px; left: 500px; }
    .fnf-hex--r3c1 { top: 328px; left: 0px; }
    .fnf-hex--r3c2 { top: 328px; left: 200px; }
    .fnf-hex--r3c3 { top: 328px; left: 400px; }
    .fnf-hex--r3c4 { top: 328px; left: 600px; }
    .fnf-hero-text-container {
        bottom: 140px;
        right: 15px;
    }
    .fnf-hero-infobox {
        bottom: 45px;
        width: 55%;
    }
}

@media (max-width: 768px) {
    .fnf-honeycomb-overlay {
        left: -200px;
        width: 600px;
        height: 400px;
    }
    .fnf-hex {
        width: 140px;
        height: 150px;
    }
    .fnf-hex--r1c1 { left: 150px; }
    .fnf-hex--r1c2 { left: 300px; }
    .fnf-hex--r2c1 { top: 120px; left: 75px; }
    .fnf-hex--r2c2 { top: 120px; left: 225px; }
    .fnf-hex--r2c3 { top: 120px; left: 375px; }
    .fnf-hex--r3c1 { top: 240px; left: 0px; }
    .fnf-hex--r3c2 { top: 240px; left: 150px; }
    .fnf-hex--r3c3 { top: 240px; left: 300px; }
    .fnf-hex--r3c4 { top: 240px; left: 450px; }
    .fnf-hero-text-container {
        bottom: 100px;
        right: 10px;
    }
    .fnf-hero-infobox {
        bottom: 30px;
        width: 60%;
        padding: 18px 24px 18px 20px;
    }
    .fnf-hero-infobox-title {
        font-size: clamp(8px, 1.5vw, 10px);
    }
    .fnf-hero-infobox-desc {
        font-size: clamp(9px, 1.2vw, 11px);
    }
}

@media (max-width: 480px) {
    .fnf-honeycomb-overlay {
        left: -150px;
        width: 450px;
        height: 300px;
    }
    .fnf-hex {
        width: 105px;
        height: 113px;
    }
    .fnf-hex--r1c1 { left: 113px; }
    .fnf-hex--r1c2 { left: 225px; }
    .fnf-hex--r2c1 { top: 90px; left: 56px; }
    .fnf-hex--r2c2 { top: 90px; left: 169px; }
    .fnf-hex--r2c3 { top: 90px; left: 282px; }
    .fnf-hex--r3c1 { top: 180px; left: 0px; }
    .fnf-hex--r3c2 { top: 180px; left: 113px; }
    .fnf-hex--r3c3 { top: 180px; left: 225px; }
    .fnf-hex--r3c4 { top: 180px; left: 338px; }
    .fnf-hero-text-container {
        bottom: 80px;
        right: 8px;
    }
    .fnf-hero-year {
        font-size: clamp(24px, 6vw, 30px);
    }
    .fnf-hero-title {
        font-size: clamp(18px, 5vw, 36px);
    }
    .fnf-hero-infobox {
        bottom: 20px;
        width: 65%;
        padding: 12px 16px 12px 14px;
    }
    .fnf-hero-infobox-title {
        font-size: clamp(7px, 1.8vw, 9px);
    }
    .fnf-hero-infobox-desc {
        font-size: clamp(8px, 1.5vw, 10px);
    }
}

/* ---- University Stats Grid ---- */
.fnf-stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
}

.fnf-stats-cell {
    position: relative;
    height: 360px;
    overflow: hidden;
}

.fnf-stats-cell-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 110%; /* extra height so parallax shift doesn't show gaps */
    top: -5%;
    object-fit: cover;
    object-position: center;
    display: block;
    filter: brightness(0.55);
    transition: filter 0.4s ease;
    will-change: transform;
    transform-origin: center center;
}

.fnf-stats-cell:hover .fnf-stats-cell-img {
    filter: brightness(0.45);
}

/* Centered hexagon wrapper */
.fnf-stats-hex-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 210px;
    height: 242px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Semi-transparent hexagon shape */
.fnf-stats-hex {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(255, 37, 37, 0.55);
    border: none;
}

/* White hexagon border ring */
.fnf-stats-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(255, 255, 255, 0.18);
    transform: scale(1.04);
    transform-origin: center;
}

/* Text content layered above hex */
.fnf-stats-hex-content {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 22px;
    pointer-events: none;
}

.fnf-stats-hex-number {
    font-family: "Helvetica Neue", Arial, Helvetica, sans-serif;
    font-size: clamp(28px, 2.8vw, 36px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.5px;
}

.fnf-stats-hex-label {
    /* font-family: "Helvetica Neue", Arial, Helvetica, sans-serif; */
    font-size: clamp(13px, 0.9vw, 11px);
    font-weight: 600;
    color: #ffffff;
    text-transform: uppercase;
    letter-spacing: 1.8px;
    line-height: 1.4;
    text-align: center;
    margin-top: 8px;
}

@media (max-width: 768px) {
    .fnf-stats-grid {
        grid-template-columns: 1fr 1fr;
    }
    .fnf-stats-cell {
        height: 260px;
    }
    .fnf-stats-hex-wrap {
        width: 170px;
        height: 196px;
    }
}

@media (max-width: 480px) {
    .fnf-stats-grid {
        grid-template-columns: 1fr;
    }
    .fnf-stats-cell {
        height: 280px;
    }
    .fnf-stats-hex-wrap {
        width: 190px;
        height: 219px;
    }
}

/* =====================================================
   Programs Offered & Research Extension Section
   Honeycomb hex: W=150px H=172px (pointy-top)
   clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)

   horiz_step  = W + 14       = 164px
   vert_step   = H*0.75 + 14  = 143px
   row_offset  = horiz_step/2 = 82px

   2-3 layout (Programs Offered):
     r1c1: top=0,   left=82   r1c2: top=0,   left=246
     r2c1: top=143, left=0    r2c2: top=143, left=164   r2c3: top=143, left=328
   Container: 478 × 315px

   3-2 layout (Research & Extension):
     r1c1: top=0,   left=0    r1c2: top=0,   left=164   r1c3: top=0,   left=328
     r2c1: top=143, left=82   r2c2: top=143, left=246
   Container: 478 × 315px
   ===================================================== */

/* ---- Section Wrapper ---- */
.fnf-pgm-res-section {
    width: 100%;
    background: #fdfdfd;
    padding: 60px 0;
    overflow: hidden;
   
}

.fnf-pgm-res-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: flex-start;
    gap: 0;
}

/* ---- Column Divider ---- */
.fnf-pgm-res-divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: rgba(255, 255, 255, 0.1);
    margin: 0 40px;
}

/* ---- Each Column ---- */
.fnf-pgm-res-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 30px;
}

/* ---- Column Header ---- */
.fnf-pgm-res-colhdr {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 40px;
    align-self: flex-start;
}

.fnf-pgm-res-bar {
    flex: 0 0 5px;
    width: 5px;
    height: 80px;
    background: #ed1b2f;
    margin-top: 4px;
    border-radius: 2px;
}

.fnf-pgm-res-supertitle {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #da202b;
    margin-bottom: 6px;
}

.fnf-pgm-res-title {
    font-family: 'Arial', sans-serif;
    font-size: clamp(20px, 2.8vw, 27px);
    font-weight: 800;
    color: #000000;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ---- Honeycomb Hive Container ---- */
.fnf-pgm-hive {
    position: relative;
    width: 541px;
    height: 359px;
    flex-shrink: 0;
}

/* ---- Individual Hex Item ---- */
.fnf-prh-item {
    position: absolute;
    width: 170px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: default;
}

/* Hex Shell (wraps hex div + badge) */
.fnf-prh-shell {
    position: relative;
    width: 170px;
    height: 196px;
    flex-shrink: 0;
}

/* ---- Hex Image Cell ---- */
.fnf-prh-hex {
    position: absolute;
    inset: 0;
    overflow: visible;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.fnf-prh-hex img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    object-fit: cover;
    object-position: center;
    display: block;
}

/* White border via scale pseudo-element */
.fnf-prh-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ffffff;
    transform: scale(1.03);
    transform-origin: center;
    z-index: 0;
    border-radius: 0;
}

/* Yellow overlay for Programs Offered */
.fnf-prh-hex--yellow::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background:  #fbb026c2;
    z-index: 2;
    transition: background 0.3s ease;
}

.fnf-prh-hex--blue::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #0087cbb4;
    z-index: 2;
    transition: background 0.3s ease;
}


/* ---- Drop shadow on shell ---- */
.fnf-prh-shell {
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.65));
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* ---- Hover Effects ---- */
.fnf-prh-item:hover .fnf-prh-shell {
    transform: translateY(-6px) scale(1.04);
    filter: drop-shadow(0 12px 28px rgba(101, 101, 101, 0.55));
}

.fnf-prh-item:hover .fnf-prh-hex--yellow::after {
    background: #fbb02634;
}

.fnf-prh-item:hover .fnf-prh-hex--blue::after {
    background: #0087cb35;
}



/* ---- Number Badge ---- */
.fnf-prh-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #ffffff;
    color: #000000;
    font-family: 'Poppins', sans-serif;
    font-size: 15px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
    line-height: 1;
}

/* Badge at bottom-center for row 2 hexagons */
.fnf-prh-r2c1 .fnf-prh-badge,
.fnf-prh-r2c2 .fnf-prh-badge,
.fnf-prh-r2c3 .fnf-prh-badge {
    top: auto;
    bottom: -10px;
}

/* Red badge variant (Research side) */
.fnf-prh-badge--red {
    background: #da202b;
    color: #ffffff;
    border-color: #ffffff;
}

/* ---- Hex Label ---- */
.fnf-prh-label {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-family: 'Poppins', sans-serif;
    font-size: 13.5px;
    font-weight: 700;
    color: #ffffff;
    text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    text-align: center;
    line-height: 1.45;
    margin: 0;
    padding: 0;
    z-index: 3;
}

/* =====================================================
   2-over-3 Layout Positions (Programs Offered)
   ===================================================== */
.fnf-pgm-hive--2over3 .fnf-prh-r1c1 { top: 0px;   left: 92px;  }
.fnf-pgm-hive--2over3 .fnf-prh-r1c2 { top: 0px;   left: 278px; }
.fnf-pgm-hive--2over3 .fnf-prh-r2c1 { top: 163px; left: 0px;   }
.fnf-pgm-hive--2over3 .fnf-prh-r2c2 { top: 163px; left: 186px; }
.fnf-pgm-hive--2over3 .fnf-prh-r2c3 { top: 163px; left: 372px; }

/* =====================================================
   3-over-2 Layout Positions (Research & Extension)
   ===================================================== */
.fnf-pgm-hive--3over2 .fnf-prh-r1c1 { top: 0px;   left: 0px;   }
.fnf-pgm-hive--3over2 .fnf-prh-r1c2 { top: 0px;   left: 186px; }
.fnf-pgm-hive--3over2 .fnf-prh-r1c3 { top: 0px;   left: 372px; }
.fnf-pgm-hive--3over2 .fnf-prh-r2c1 { top: 163px; left: 92px;  }
.fnf-pgm-hive--3over2 .fnf-prh-r2c2 { top: 163px; left: 278px; }

/* =====================================================
   Responsive — tablet (≤ 1100px): scale hive down
   ===================================================== */
@media (max-width: 1100px) {
    .fnf-pgm-res-inner {
        padding: 0 24px;
    }
    .fnf-pgm-hive {
        transform: scale(0.85);
        transform-origin: top center;
        margin-bottom: -47px; /* compensate for scaled-down height */
    }
    .fnf-pgm-res-divider {
        margin: 0 20px;
    }
}

/* =====================================================
   Responsive — small tablet (≤ 820px): scale more
   ===================================================== */
@media (max-width: 820px) {
    .fnf-pgm-hive {
        transform: scale(0.68);
        transform-origin: top center;
        margin-bottom: -101px;
    }
    .fnf-pgm-res-divider {
        margin: 0 10px;
    }
    .fnf-pgm-res-title {
        font-size: 22px;
    }
}

/* =====================================================
   Responsive — mobile (≤ 640px): stack columns
   ===================================================== */
@media (max-width: 640px) {
    .fnf-pgm-res-section {
        padding: 50px 0 40px;
    }
    .fnf-pgm-res-inner {
        flex-direction: column;
        align-items: center;
        gap: 50px;
        padding: 0 20px;
    }
    .fnf-pgm-res-col {
        width: 100%;
        align-items: center;
    }
    .fnf-pgm-res-colhdr {
        align-self: center;
    }
    .fnf-pgm-res-divider {
        display: none;
    }
    .fnf-pgm-hive {
        transform: scale(0.78);
        transform-origin: top center;
        margin-bottom: -69px;
    }
}

/* =====================================================
   Faculty Profile & Teaching Personnel Section
   Hex: W=130px H=150px (pointy-top)
   clip-path: polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%)

   horiz_step = 130+12 = 142px
   vert_step  = 150*0.75+12 = 124.5 → 125px
   row_offset = 142/2 = 71px

   2-over-3 layout (Faculty Profile):
     r1c1: top=0,   left=71    r1c2: top=0,   left=213
     r2c1: top=125, left=0     r2c2: top=125, left=142   r2c3: top=125, left=284
   Container: 414 × 360px
   ===================================================== */

/* ---- Section Wrapper ---- */
.fnf-faculty-section {
    width: 100%;
    background: #d9d9d9;
    padding: 40px 0 50px;
    overflow: hidden;
    
}

.fnf-faculty-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ---- Column Divider ---- */
.fnf-faculty-divider {
    flex: 0 0 1px;
    align-self: stretch;
    background: rgba(0, 0, 0, 0.1);
    margin: 0 40px;
}

/* ---- Each Column ---- */
.fnf-faculty-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
    padding-bottom: 30px;
}

/* ---- Column Header ---- */
.fnf-faculty-colhdr {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 0;
    align-self: flex-start;
}

.fnf-faculty-bar {
    flex: 0 0 5px;
    width: 5px;
    height: 80px;
    background: #da202b;
    margin-top: 4px;
    border-radius: 2px;
}

.fnf-faculty-title {
    font-family: 'Arial', sans-serif;
    font-size: clamp(10px, 2.8vw, 28px);
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ---- Hexagon Hive Container ---- */
.fnf-fh-hive {
    position: relative;
    width: 414px;
    height: 360px;
    flex-shrink: 0;
}

/* ---- Individual Hex Item ---- */
.fnf-fh-item {
    position: absolute;
    width: 130px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    cursor: default;
}

/* ---- Hex Card (anchors the badge) ---- */
.fnf-fh-card {
    position: relative;
    width: 130px;
    height: 150px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.15));
}

/* ---- Hex Shell (outer colored border) ---- */
.fnf-fh-shell {
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    display: flex;
    align-items: center;
    justify-content: center;
    background: #da202b;
}

.fnf-fh-shell--gray {
    background: #999999;
}

/* ---- Hex Inner (white fill, creates outline effect) ---- */
.fnf-fh-inner {
    width: 116px;
    height: 136px;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---- Hex Icon ---- */
.fnf-fh-icon {
    font-size: 42px;
    color: #da202b;
    line-height: 1;
}

.fnf-fh-icon--gray {
    color: #999999;
}

/* ---- Number Badge ---- */
.fnf-fh-badge {
    position: absolute;
    bottom: -16px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 44px;
    height: 44px;
    border-radius: 22px;
    background: #da202b;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.25);
    padding: 0 10px;
    white-space: nowrap;
}

.fnf-fh-badge--gray {
    background: #999999;
}

/* ---- Hex Label ---- */
.fnf-fh-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: #444444;
    text-align: center;
    line-height: 1.45;
    margin: 0;
}

/* ---- 2-over-3 Hex Positions ---- */
.fnf-fh-r1c1 { top: 0px;   left: 71px;  }
.fnf-fh-r1c2 { top: 0px;   left: 213px; }
.fnf-fh-r2c1 { top: 125px; left: 0px;   }
.fnf-fh-r2c2 { top: 125px; left: 142px; }
.fnf-fh-r2c3 { top: 125px; left: 284px; }

/* ---- Teaching Personnel Chart Area — fixed layout, never stacks ---- */
.fnf-teaching-chart-area {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 36px;
    flex-wrap: nowrap !important;
    flex-direction: row !important;
}

/* ---- Donut Chart Wrapper ---- */
.fnf-teaching-chart-wrap {
    position: relative;
    width: 280px;
    height: 280px;
    flex-shrink: 0;
}

#teachingPersonnelChart {
    width: 280px !important;
    height: 280px !important;
    display: block;
}

/* ---- Center Image ---- */
.fnf-teaching-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160px;
    height: 160px;
    border-radius: 50%;
    overflow: hidden;
    border: 4px solid #ffffff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    z-index: 2;
}

.fnf-teaching-center img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.fnf-teaching-center-overlay {
    position: absolute;
    inset: 0;
    background: #0087cb67;
    border-radius: 50%;
}

/* ---- Legend ---- */
.fnf-teaching-legend {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.fnf-tl-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.fnf-tl-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    flex-shrink: 0;
    margin-top: 6px;
}

.fnf-tl-text {
    display: flex;
    flex-direction: column;
}

.fnf-tl-num {
    font-family: 'Poppins', sans-serif;
    font-size: 26px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
}

.fnf-tl-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #888888;
    margin-top: 4px;
}

.fnf-tl-item {
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.fnf-tl-item--active {
    transform: translateX(4px);
    opacity: 1 !important;
}

.fnf-tl-item--active .fnf-tl-num {
    color: #1a1a1a;
}

.fnf-tl-item--active .fnf-tl-label {
    color: #444444;
}

.fnf-teaching-legend:has(.fnf-tl-item--active) .fnf-tl-item:not(.fnf-tl-item--active) {
    opacity: 0.35;
}

/* =====================================================
   Faculty Section Responsive
   ===================================================== */
@media (max-width: 1100px) {
    .fnf-faculty-inner {
        padding: 0 24px;
    }
    .fnf-fh-hive {
        transform: scale(0.85);
        transform-origin: top center;
        margin-bottom: -54px;
    }
    .fnf-faculty-divider {
        margin: 0 20px;
    }
}

@media (max-width: 820px) {
    .fnf-fh-hive {
        transform: scale(0.70);
        transform-origin: top center;
        margin-bottom: -108px;
    }
    .fnf-faculty-divider {
        margin: 0 10px;
    }
    .fnf-faculty-title {
        font-size: 22px;
    }
}

@media (max-width: 640px) {
    .fnf-faculty-section {
        padding: 36px 0 45px;
    }
    .fnf-faculty-inner {
        flex-direction: column;
        align-items: center;
        gap: 40px;
        padding: 0 20px;
    }
    .fnf-faculty-col {
        width: 100%;
        align-items: center;
        gap: 24px;
    }
    .fnf-faculty-colhdr {
        align-self: center;
    }
    .fnf-faculty-divider {
        display: none;
    }
    .fnf-fh-hive {
        transform: scale(0.78);
        transform-origin: top center;
        margin-bottom: -79px;
    }
}

/* =====================================================
   Faculty Profile — Pentagon (House-Shape) Cards
   Shape: polygon(50% 0%, 100% 24%, 100% 100%, 0% 100%, 0% 24%)
   Outline via outer (border color) + inner (white fill) stacked elements
   ===================================================== */

/* ---- Cards Row ---- */
.fnf-fp-row {
    display: flex;
    align-items: flex-end;       /* bottoms aligned; center card sticks up higher */
    justify-content: center;
    gap: 12px;
    width: 100%;
    padding-bottom: 50px;        /* room for the badge that sticks out below */
}

.fnf-fp-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(40px) scale(0.88);
    transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.fnf-fp-card.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ---- Pentagon shape wrapper (normal / tall) ---- */
.fnf-fp-shape-wrap {
    position: relative;
    width: 200px;
    height: 210px;
}

.fnf-fp-shape-wrap--medium {
    height: 310px;
}

.fnf-fp-shape-wrap--tall {
    height: 410px;
}

/* Pentagon/house clip-path — flat bottom, pointed top */
.fnf-fp-shp-out,
.fnf-fp-shp-in {
    position: absolute;
    clip-path: polygon(50% 0%, 100% 15%, 100% 100%, 0% 100%, 0% 15%);
}

/* Outer layer = border/outline color */
.fnf-fp-shp-out {
    inset: 0;
}

.fnf-fp-shp--red  { background: #da202b; }
.fnf-fp-shp--gray { background: #aaaaaa; }

/* Inner layer = white fill (creates the 5-px outlined shape effect) */
.fnf-fp-shp-in {
    inset: 4px;
    background: #ffffff;
}

/* Content: icon + label, positioned in the rectangular body area */
.fnf-fp-shp-content {
    position: absolute;
    top: 28%;          /* start below the pointed roof area (shoulder at 24%) */
    left: 0;
    right: 0;
    bottom: 24px;      /* leave room above the badge */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 7px;
    z-index: 2;
}

/* ---- Icon ---- */
.fnf-fp-icon {
    font-size: 50px;
    line-height: 1;
    flex-shrink: 0;
}

.fnf-fp-icon--red  { color: #da202b; }
.fnf-fp-icon--gray { color: #aaaaaa; }

/* ---- Label inside card ---- */
.fnf-fp-card-label {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #555555;
    text-align: center;
    line-height: 1.4;
    margin: 0;
}

/* ---- Number Badge (pill shape at bottom of card) ---- */
.fnf-fp-badge {
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
    min-width: 52px;
    height: 27px;
    border-radius: 14px;
    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 18px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    padding: 0 10px;
    white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.fnf-fp-bdg--red  { background: #da202b; }
.fnf-fp-bdg--gray { background: #aaaaaa; }

/* ---- Responsive: medium tablet (≤ 1100px) ---- */
@media (max-width: 1100px) {
    .fnf-fp-row { gap: 10px; }
    .fnf-fp-shape-wrap { width: 80px; height: 142px; }
    .fnf-fp-shape-wrap--medium { height: 155px; }
    .fnf-fp-shape-wrap--tall { height: 173px; }
    .fnf-fp-icon { font-size: 26px; }
    .fnf-fp-card-label { font-size: 8.5px; }
}

/* ---- Responsive: small tablet (≤ 820px) ---- */
@media (max-width: 820px) {
    .fnf-fp-row { gap: 6px; }
    .fnf-fp-shape-wrap { width: 64px; height: 114px; }
    .fnf-fp-shape-wrap--medium { height: 124px; }
    .fnf-fp-shape-wrap--tall { height: 138px; }
    .fnf-fp-icon { font-size: 20px; }
    .fnf-fp-card-label { font-size: 7.5px; }
    .fnf-fp-badge { font-size: 10px; min-width: 42px; height: 23px; }
}

/* ---- Responsive: mobile (≤ 640px, columns stacked) ---- */
@media (max-width: 640px) {
    .fnf-fp-row { gap: 8px; }
    .fnf-fp-shape-wrap { width: 80px; height: 140px; }
    .fnf-fp-shape-wrap--medium { height: 153px; }
    .fnf-fp-shape-wrap--tall { height: 170px; }
    .fnf-fp-icon { font-size: 26px; }
    .fnf-fp-card-label { font-size: 8.5px; }
    .fnf-fp-badge { font-size: 11px; min-width: 48px; height: 25px; }
}

/* ---- Non-Teaching Personnel Banner ---- */
.fnf-nt-banner {
    position: absolute;
    bottom: 8%;
    left: 5%;
    width: clamp(280px, 55%, 550px);
    display: flex;
    flex-direction: column;
    box-shadow: 0px 10px 30px rgba(0,0,0,0.3);
    z-index: 10;
}

.fnf-nt-header {
    background-color: #da202b;
    color: #fff;
    padding: 13px;
    text-align: center;
}

.fnf-nt-title {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(18px, 2vw, 24px);
    line-height: 1.1;
    letter-spacing: 1px;
    margin: 0;
    text-transform: uppercase;
}

.fnf-nt-body {
    background-color: #f1f2f2;
    padding: 15px 30px;
    display: flex;
    justify-content: space-between;
}

.fnf-nt-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 48%;
}

.fnf-nt-item {
    display: flex;
    align-items: center;
    gap: 10px;
}

.fnf-nt-num {
    font-family: Impact, 'Poppins', sans-serif;
    font-size: clamp(14px, 1.8vw, 18px);
    color: #333;
    width: 30px;
    text-align: right;
    line-height: 1;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fnf-nt-num.visible {
    opacity: 1;
}

.fnf-nt-desc {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(11px, 1.2vw, 13px);
    font-weight: 400;
    color: #333;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}

.fnf-nt-desc.visible {
    opacity: 1;
}

@media (max-width: 768px) {
    .fnf-nt-banner {
        width: 85%;
    }
    .fnf-nt-body {
        padding: 15px 20px;
    }
}

@media (max-width: 480px) {
    .fnf-nt-banner {
        position: relative;
        width: 90%;
        bottom: 0;
        left: 0;
        margin: -20px auto 20px auto;
        box-shadow: 0px 5px 15px rgba(0,0,0,0.2);
    }
    .fnf-nt-body {
        flex-direction: column;
        gap: 15px;
    }
    .fnf-nt-col {
        width: 100%;
        gap: 10px;
    }
}

/* =====================================================
   SteerHub — Research & Extension Full-Page Section
   Background: steerhub-page.png
   Center: 5-hex honeycomb cluster (1 top, 2 mid, 2 offset bottom)
   Layout: left stat-cards | honeycomb | right stat-cards
   ===================================================== */

/* ---- Section Container ---- */
.fnf-steerhub-section {
    min-height: 700px;
}

/* ---- Dark overlay ---- */
.fnf-sh-overlay {
    position: absolute;
    inset: 0;
    background: rgba(10, 10, 10, 0.55);
    z-index: 1;
}

/* ---- Content wrapper (sits above overlay) ---- */
.fnf-sh-content {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 40px;
    box-sizing: border-box;
    gap: 32px;
}

/* ---- Section Title Block ---- */
.fnf-sh-title-block {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    align-self: flex-start;
}

.fnf-sh-title-bar {
    flex: 0 0 5px;
    width: 5px;
    height: 70px;
    background: #da202b;
    margin-top: 4px;
    border-radius: 2px;
}

.fnf-sh-supertitle {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: #da202b;
    margin-bottom: 5px;
}

.fnf-sh-title {
    font-family: 'Arial', sans-serif;
    font-size: clamp(22px, 3vw, 32px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 0;
}

/* ---- Three-column layout ---- */
.fnf-sh-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 40px;
    width: 100%;
    max-width: 1200px;
}

/* =====================================================
   SteerHub — Stat Cards (Left & Right columns)
   ===================================================== */
.fnf-sh-stats {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    max-width: 280px;
}

.fnf-sh-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255, 255, 255, 0.699);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    min-height: 90px;
}

.fnf-sh-card-bar {
    flex: 0 0 6px;
    background: #ed1b2f;
    border-radius: 0;
}

.fnf-sh-card-body {
    flex: 1;
    padding: 14px 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
}

.fnf-sh-card-num {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.2vw, 38px);
    font-weight: 800;
    color: #000000;
    line-height: 1;
    flex-shrink: 0;
    min-width: 50px;
    text-align: center;
}

.fnf-sh-card-label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1vw, 12px);
    font-weight: 600;
    color: rgba(0, 0, 0, 0.8);
    text-transform: uppercase;
    letter-spacing: 1.5px;
    line-height: 1.55;
}

/* Right-side cards: bar on the right */
.fnf-sh-card--right {
    flex-direction: row-reverse;
}

.fnf-sh-card--right .fnf-sh-card-bar {
    border-radius: 0;
}

.fnf-sh-card--right .fnf-sh-card-body {
    flex-direction: row-reverse;
    text-align: right;
}

.fnf-sh-card--right .fnf-sh-card-label {
    text-align: right;
}

/* =====================================================
   SteerHub — Central Honeycomb Cluster
   5 hexagons:
     top:       1 hex  (center-top)
     mid-left:  offset left
     mid-center: main center (slightly larger)
     mid-right: offset right
     bottom:    1 hex  (center-bottom)

   Hex sizes:
     Normal  W=150px, H=172px  (same as programs-research hexes)
     Center  W=180px, H=207px  (slightly larger, focal point)

   Cluster container: 420px × 430px
   Spacing math (normal 150px hex, gap ~8px):
     horiz_step = 150 + 8 = 158px,  row_offset = 79px
     vert_step  = 172 × 0.75 + 8 = 137px

   Positions (top-left of each .fnf-sh-hex div):
     top         : top=0,   left=135   (centered over mid row)
     mid-left    : top=130, left=20
     mid-center  : top=112, left=120   (larger, slightly up)
     mid-right   : top=130, left=280
     bottom      : top=265, left=135
   ===================================================== */
.fnf-sh-hive {
    position: relative;
    width: 450px;
    height: 450px;
    flex-shrink: 0;
}

/* ---- Base hex element ---- */
.fnf-sh-hex {
    position: absolute;
    width: 150px;
    height: 172px;
    filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
    transition: transform 0.3s ease, filter 0.3s ease;
    cursor: default;
}

.fnf-sh-hex:hover {
    transform: translateY(-6px) scale(1.04);
    
}

/* ---- Red hexagon fill (::before = white border ring, ::after = clip shape) ---- */
.fnf-sh-hex::before {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: #ffffff;
    transform: scale(1.04);
    transform-origin: center center;
    z-index: 0;
}

.fnf-sh-hex::after {
    content: "";
    position: absolute;
    inset: 0;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: rgba(190, 15, 22, 0.82);
    z-index: 1;
    transition: background 0.3s ease;
}

.fnf-sh-hex:hover::after {
    background: rgba(218, 32, 43, 0.65);
}

/* ---- Text content inside hex ---- */
.fnf-sh-hex-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 0 14px;
    text-align: center;
}

.fnf-sh-hex-num {
    font-family: 'Poppins', sans-serif;
    font-size: 32px;
    font-weight: 900;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
}

.fnf-sh-hex-lbl {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.92);
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 1.45;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.7);
}

/* ---- Hex positions (5-hex cluster) ---- */
.fnf-sh-hex--top       { top:   0px; left: 150px; }  /* centered */
.fnf-sh-hex--midleft   { top: 130px; left:  20px; }
.fnf-sh-hex--midcenter { top: 116px; left: 135px; width: 180px; height: 207px; }
.fnf-sh-hex--midright  { top: 130px; left: 280px; }
.fnf-sh-hex--bottom    { top: 262px; left: 150px; }  /* centered */

/* ---- Specific colors for top, midleft, bottom hexagons ---- */
.fnf-sh-hex--top::after {
    background:  #ed1b2f; /* Red */
}

.fnf-sh-hex--top:hover::after {
    background:  #ed1b30c6;
}

.fnf-sh-hex--midleft::after {
    background: #0088cb; /* Blue */
}

.fnf-sh-hex--midleft:hover::after {
    background: #0088cba6;
}

.fnf-sh-hex--bottom::after {
    background:   #fbaf26; /* Green */
}

.fnf-sh-hex--bottom:hover::after {
    background:   #fbaf26c6;
}

/* Center hex is slightly larger — scale its text */
.fnf-sh-hex--midcenter .fnf-sh-hex-num {
    font-size: 44px;
}

.fnf-sh-hex--midcenter .fnf-sh-hex-lbl {
    font-size: 10px;
}

/* =====================================================
   SteerHub Responsive

   Breakpoints:
     ≥ 1100px  — desktop 3-col (default)
     1100px    — squeeze cards & scale hive slightly
      960px    — SWITCH to stacked layout (image as bg cover,
                 content in normal flow, hive top + 2-col card grid)
      640px    — large mobile (hive smaller, cards still 2-col)
      480px    — small mobile (hive smallest, cards 1-col)
   ===================================================== */

/* ---- Tablet Landscape (≤ 1100px, 3-col still) ---- */
@media (max-width: 1100px) {
    .fnf-sh-layout {
        gap: 20px;
    }
    .fnf-sh-hive {
        transform: scale(0.82);
        transform-origin: center center;
    }
    .fnf-sh-stats {
        max-width: 235px;
        gap: 14px;
    }
    .fnf-sh-card {
        min-height: 80px;
    }
    .fnf-sh-card-body {
        padding: 12px 14px;
        gap: 10px;
    }
}

/* ---- Tablet Portrait (≤ 960px): switch to stacked layout ---- */
@media (max-width: 960px) {
    /* Section: let content drive height; image becomes bg cover */
    .fnf-steerhub-section {
        display: block;
        min-height: 0;
    }
    .fnf-steerhub-section .fnf-full-img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    }
    /* Content: back to normal flow so its height drives the section */
    .fnf-sh-content {
        position: relative;
        inset: auto;
        padding: 48px 36px 56px;
        gap: 28px;
        justify-content: flex-start;
        align-items: center;
    }
    /* Layout: column — hive on top, cards grid below */
    .fnf-sh-layout {
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
    }
    /* Hive: scaled down, compensate phantom layout space */
    .fnf-sh-hive {
        transform: scale(0.72);
        transform-origin: top center;
        margin-bottom: -126px; /* 450 × (1 - 0.72) = 126px */
        flex-shrink: 0;
    }
    /* Cards: 2-column wrap grid (4 left + 4 right = 8 total) */
    .fnf-sh-stats {
        max-width: 100%;
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 14px;
        justify-content: center;
    }
    .fnf-sh-card {
        flex: 1 1 calc(50% - 14px);
        max-width: calc(50% - 7px);
        min-width: 220px;
        min-height: 76px;
    }
    /* Normalise right cards to match left cards in grid (bar on left) */
    .fnf-sh-card--right {
        flex-direction: row;
    }
    .fnf-sh-card--right .fnf-sh-card-bar {
        order: -1;
    }
    .fnf-sh-card--right .fnf-sh-card-body {
        flex-direction: row;
        text-align: left;
    }
    .fnf-sh-card--right .fnf-sh-card-label {
        text-align: left;
    }
    .fnf-sh-card-num {
        font-size: clamp(22px, 3vw, 32px);
        min-width: 48px;
    }
    .fnf-sh-card-label {
        font-size: clamp(9px, 1.2vw, 12px);
    }
    .fnf-sh-card-body {
        padding: 12px 14px;
        gap: 10px;
    }
}

/* ---- Large Mobile (≤ 640px) ---- */
@media (max-width: 640px) {
    .fnf-sh-content {
        padding: 36px 18px 48px;
        gap: 22px;
    }
    .fnf-sh-hive {
        transform: scale(0.60);
        transform-origin: top center;
        margin-bottom: -180px; /* 450 × (1 - 0.60) = 180px */
    }
    .fnf-sh-card {
        flex: 1 1 calc(50% - 14px);
        min-width: 150px;
        min-height: 70px;
    }
    .fnf-sh-card-body {
        padding: 10px 12px;
        gap: 8px;
    }
    .fnf-sh-card-num {
        font-size: clamp(18px, 5vw, 26px);
        min-width: 40px;
    }
    .fnf-sh-card-label {
        font-size: clamp(8px, 2.2vw, 10px);
        letter-spacing: 1px;
    }
}

/* ---- Small Mobile (≤ 480px): single-column cards ---- */
@media (max-width: 480px) {
    .fnf-sh-content {
        padding: 28px 14px 40px;
        gap: 18px;
    }
    .fnf-sh-hive {
        transform: scale(0.52);
        transform-origin: top center;
        margin-bottom: -216px; /* 450 × (1 - 0.52) = 216px */
    }
    .fnf-sh-stats {
        gap: 10px;
    }
    .fnf-sh-card {
        flex: 1 1 100%;
        max-width: 100%;
        min-width: unset;
    }
    .fnf-sh-card-num {
        font-size: clamp(20px, 5.5vw, 26px);
        min-width: 36px;
    }
    .fnf-sh-card-label {
        font-size: 9px;
    }
}

/* ==========================================================================
   Faculty Profile by Campus — Bento Grid Section
   ========================================================================== */

.fnf-fpc-section {
    background-color: #f2f3f5;
    padding: 56px 60px 64px;
    position: relative;
}

/* ---- Section Header ---- */
.fnf-fpc-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 36px;
}

.fnf-fpc-title-bar {
    width: 5px;
    height: 64px;
    background-color: #da202b;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 3px;
}

.fnf-fpc-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(26px, 3.2vw, 40px);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.5px;
    color: #1a1a2e;
    margin: 0;
}

/* ---- Bento Grid ---- */
.fnf-fpc-grid {
    display: grid;
    grid-template-columns: 1fr 1.9fr 1.9fr 1fr 1fr;
    grid-template-rows: 180px 180px 185px;
    gap: 10px;
    grid-template-areas:
        "total     feat1     feat2     sm-lipa     sm-nasugbu"
        "total     feat1     feat2     sm-lemery   sm-tanauan"
        "sm-mabini sm-rosario sm-lobo  sm-malvar   sm-sanjuan";
}

/* ---- Base Card ---- */
.fnf-fpc-card {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
}

/* ==========================================================================
   Financial Highlights Section
   ========================================================================== */

.fnf-fin-section {
    position: relative;
    width: 100%;
    min-height: 1100px;
    display: flex;
    align-items: stretch;
    overflow: hidden;
    background: #f0f0f0;
}

/* ---- Background Image + Overlay ---- */
.fnf-fin-bg-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.fnf-fin-bg-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* .fnf-fin-bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(240, 240, 240, 0.97) 0%,
        rgba(240, 240, 240, 0.90) 45%,
        rgba(240, 240, 240, 0.20) 75%,
        rgba(240, 240, 240, 0.00) 100%
    );
} */

/* ---- Content Layout ---- */
.fnf-fin-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: flex-start;
    padding: 56px 60px;
    gap: 0;
}

.fnf-fin-left {
    flex: 0 0 56%;
    max-width: 56%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fnf-fin-right {
    flex: 1;
}

/* ---- Section Header ---- */
.fnf-fin-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.fnf-fin-title-bar {
    width: 5px;
    min-height: 70px;
    background-color: #da202b;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 4px;
}

.fnf-fin-sup {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 1vw, 12px);
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #888;
    margin: 0 0 4px;
}

.fnf-fin-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #1a1a2e;
    margin: 0;
}

/* ---- Cards Container ---- */
.fnf-fin-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
    
}

.fnf-fin-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---- Base Card ---- */
.fnf-fin-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    border: #00000055 3px solid;
}

/* ---- Card Header ---- */
.fnf-fin-card-header {
    background: #e8e8e8;
    padding: 10px 18px;
    display: flex;
    align-items: center;
}

.fnf-fin-card-label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #444;
    line-height: 1.3;
}

/* ---- Card Body (Red) ---- */
.fnf-fin-card-body {
    background: #da202b;
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

.fnf-fin-card--main .fnf-fin-card-body {
    padding: 22px 24px 18px;
}

.fnf-fin-card-amount {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}

.fnf-fin-card--main .fnf-fin-card-amount {
    font-size: clamp(24px, 3vw, 40px);
}

.fnf-fin-card-sublabel {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-top: 2px;
}

/* ---- Card Footer ---- */
.fnf-fin-card-footer {
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7f7f7;
    border-top: 1px solid #e0e0e0;
}

.fnf-fin-arrow {
    font-size: 15px;
}

.fnf-fin-arrow--up  { color: #22a85a; }
.fnf-fin-arrow--down { color: #da202b; }

.fnf-fin-pct {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.fnf-fin-pct--up   { color: #22a85a; }
.fnf-fin-pct--down { color: #da202b; }

.fnf-fin-vs {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #888;
    font-weight: 400;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .fnf-fin-left {
        flex: 0 0 72%;
        max-width: 72%;
    }
}

@media (max-width: 768px) {
    .fnf-fin-content {
        padding: 40px 28px;
    }
    .fnf-fin-left {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .fnf-fin-bg-overlay {
        background: rgba(240, 240, 240, 0.94);
    }
}

@media (max-width: 480px) {
    .fnf-fin-cards-row {
        grid-template-columns: 1fr;
    }
    .fnf-fin-content {
        padding: 32px 18px;
    }
}


/* ======================================================
   EXPENDITURE SECTION  (fnf-exp-*)
   Gold card bodies · Black vertical title accent bar
   Layout: 2 cards top row · 1 full-width card below
   ====================================================== */

/* ---- Content Layout ---- */
.fnf-exp-content {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: stretch;
    padding: 56px 60px;
    gap: 0;
}

.fnf-exp-left {
    flex: 0 0 56%;
    max-width: 56%;
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.fnf-exp-right {
    flex: 1;
}

/* ---- Section Header ---- */
.fnf-exp-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

/* Black vertical accent bar */
.fnf-exp-title-bar {
    width: 5px;
    min-height: 60px;
    background-color: #1a1a1a;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 4px;
}

.fnf-exp-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
}

/* ---- Cards Container ---- */
.fnf-exp-cards {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.fnf-exp-cards-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

/* ---- Base Card ---- */
.fnf-exp-card {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.10);
    display: flex;
    flex-direction: column;
    border: rgba(0,0,0,0.33) 3px solid;
}

/* ---- Card Header ---- */
.fnf-exp-card-header {
    background: #e8e8e8;
    padding: 10px 18px;
    display: flex;
    align-items: center;
}

.fnf-exp-card-label {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1vw, 13px);
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #444;
    line-height: 1.3;
}

/* ---- Card Body — Gold ---- */
.fnf-exp-card-body {
    background: #fbaf26;
    padding: 18px 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
}

/* Wide (bottom single card) has slightly more padding */
.fnf-exp-card-body--wide {
    padding: 22px 24px 18px;
}

.fnf-exp-card-amount {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(20px, 2.5vw, 34px);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    letter-spacing: -0.5px;
}

.fnf-exp-card-amount--wide {
    font-size: clamp(24px, 3vw, 40px);
}

.fnf-exp-card-sublabel {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 0.85vw, 11px);
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.78);
    margin-top: 2px;
}

/* ---- Card Footer ---- */
.fnf-exp-card-footer {
    padding: 8px 18px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #f7f7f7;
    border-top: 1px solid #e0e0e0;
}

.fnf-exp-arrow { font-size: 15px; }
.fnf-exp-arrow--up   { color: #22a85a; }
.fnf-exp-arrow--down { color: #da202b; }

.fnf-exp-pct {
    font-family: 'Poppins', sans-serif;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.fnf-exp-pct--up   { color: #22a85a; }
.fnf-exp-pct--down { color: #da202b; }

.fnf-exp-vs {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    color: #888;
    font-weight: 400;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .fnf-exp-left {
        flex: 0 0 72%;
        max-width: 72%;
    }
}

@media (max-width: 768px) {
    .fnf-exp-content {
        padding: 40px 28px;
    }
    .fnf-exp-left {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .fnf-exp-bg-overlay {
        background: rgba(240, 240, 240, 0.94);
    }
}

@media (max-width: 480px) {
    .fnf-exp-cards-row {
        grid-template-columns: 1fr;
    }
    .fnf-exp-content {
        padding: 32px 18px;
    }
}

/* ====================================================== */

.fnf-fpc-card-content {
    position: relative;
    z-index: 2;
    padding: 18px 20px;
    width: 100%;
}

/* ---- Background Photo ---- */
.fnf-fpc-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(100%) contrast(1.05);
    transition: transform 0.5s ease, filter 0.4s ease;
}

.fnf-fpc-card:hover .fnf-fpc-bg {
    transform: scale(1.06);
    filter: grayscale(80%) contrast(1.1);
}

/* ---- Overlay ---- */
.fnf-fpc-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10,10,15,0.78) 0%, rgba(10,10,15,0.28) 55%, rgba(10,10,15,0.10) 100%);
    z-index: 1;
}

.fnf-fpc-overlay--dark {
    background: linear-gradient(to top, rgba(10,10,15,0.88) 0%, rgba(10,10,15,0.40) 60%, rgba(10,10,15,0.14) 100%);
}

/* ---- Hover: Red overlay ---- */
.fnf-fpc-card:hover .fnf-fpc-overlay {
    background: linear-gradient(to top, rgba(218,32,43,0.9) 0%, rgba(218,32,43,0.4) 55%, rgba(218,32,43,0.1) 100%);
}

/* ---- TOTAL Card — Red ---- */
.fnf-fpc-card--total {
    grid-area: total;
    background: linear-gradient(145deg, #da202b 0%, #a8141d 100%);
    align-items: center;
    justify-content: center;
    flex-direction: column;
    border-radius: 6px;
}

.fnf-fpc-card--total .fnf-fpc-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 24px 16px;
    height: 100%;
}

.fnf-fpc-total-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.70);
    text-transform: uppercase;
    margin-bottom: 6px;
}

.fnf-fpc-total-num {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(44px, 5.5vw, 52px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
}

.fnf-fpc-total-sub {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(10px, 1.2vw, 13px);
    font-weight: 500;
    color: rgba(255,255,255,0.80);
    letter-spacing: 1px;
    margin-top: 6px;
    text-transform: uppercase;
}

.fnf-fpc-total-divider {
    width: 40px;
    height: 2px;
    background: rgba(255,255,255,0.40);
    margin: 12px auto;
    border-radius: 2px;
}

.fnf-fpc-total-footer {
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 400;
    color: rgba(255,255,255,0.55);
    letter-spacing: 2px;
    text-transform: uppercase;
}

/* ---- Feature Cards ---- */
.fnf-fpc-card--feat1 { grid-area: feat1; }
.fnf-fpc-card--feat2 { grid-area: feat2; }

.fnf-fpc-card--feature .fnf-fpc-card-content {
    padding: 22px 24px;
}

.fnf-fpc-feat-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(52px, 6.5vw, 62px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -2px;
    text-shadow: 0 2px 12px rgba(0,0,0,0.5);
}

.fnf-fpc-feat-campus {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(14px, 1.8vw, 20px);
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 0.5px;
    margin-top: 4px;
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.fnf-fpc-feat-badge {
    display: inline-block;
    font-family: 'Poppins', sans-serif;
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(218,32,43,0.75);
    padding: 3px 8px;
    border-radius: 2px;
    margin-top: 8px;
}

/* ---- Small Campus Cards ---- */
.fnf-fpc-card--sm .fnf-fpc-card-content {
    padding: 14px 16px;
}

.fnf-fpc-sm-num {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.2vw, 42px);
    font-weight: 800;
    color: #ffffff;
    line-height: 1;
    letter-spacing: -1px;
    text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.fnf-fpc-sm-label {
    display: block;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(9px, 1.1vw, 12px);
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-top: 4px;
}

/* ---- Grid area assignments for small cards ---- */
.fnf-fpc-card--lipa    { grid-area: sm-lipa; }
.fnf-fpc-card--nasugbu { grid-area: sm-nasugbu; }
.fnf-fpc-card--lemery  { grid-area: sm-lemery; }
.fnf-fpc-card--tanauan { grid-area: sm-tanauan; }
.fnf-fpc-card--mabini  { grid-area: sm-mabini; }
.fnf-fpc-card--rosario { grid-area: sm-rosario; }
.fnf-fpc-card--lobo    { grid-area: sm-lobo; }
.fnf-fpc-card--malvar  { grid-area: sm-malvar; }
.fnf-fpc-card--sanjuan { grid-area: sm-sanjuan; }

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .fnf-fpc-section {
        padding: 44px 36px 52px;
    }
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1.7fr 1.7fr 1fr;
        grid-template-rows: 160px 160px 170px 170px;
        grid-template-areas:
            "total    feat1    feat2    sm-lipa   "
            "total    feat1    feat2    sm-nasugbu"
            "sm-lemery sm-tanauan sm-mabini sm-rosario"
            "sm-lobo  sm-lobo   sm-malvar  sm-sanjuan";
    }
}

@media (max-width: 768px) {
    .fnf-fpc-section {
        padding: 36px 24px 44px;
    }
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 140px 140px 160px 160px;
        gap: 8px;
        grid-template-areas:
            "total      feat1      feat1     "
            "total      feat2      feat2     "
            "sm-lipa    sm-nasugbu sm-lemery "
            "sm-tanauan sm-mabini  sm-rosario";
    }
    .fnf-fpc-feat-num {
        font-size: clamp(36px, 6vw, 56px);
    }
    .fnf-fpc-card--lobo,
    .fnf-fpc-card--malvar,
    .fnf-fpc-card--sanjuan { display: none; }
}

@media (max-width: 540px) {
    .fnf-fpc-section {
        padding: 28px 16px 36px;
    }
    .fnf-fpc-grid {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 120px 120px 140px 140px 140px;
        gap: 7px;
        grid-template-areas:
            "total     total     "
            "feat1     feat2     "
            "sm-lipa   sm-nasugbu"
            "sm-lemery sm-tanauan"
            "sm-mabini sm-rosario";
    }
    .fnf-fpc-card--total {
        align-items: center;
    }
    .fnf-fpc-total-num {
        font-size: clamp(38px, 9vw, 58px);
    }
    .fnf-fpc-card--lobo,
    .fnf-fpc-card--malvar,
    .fnf-fpc-card--sanjuan { display: none; }
}

/* =============================================
   SDG Full-Page Section
   ============================================= */

.fnf-sdg-section {
    position: relative;
}

/* Absolutely-positioned content layer */
.fnf-sdg-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: clamp(24px, 4%, 56px) clamp(24px, 5%, 64px);
    pointer-events: none;
}

/* ---- Section Header ---- */
/* .fnf-sdg-header {
    position: absolute;
    left: clamp(24px, 5%, 64px);
    top: 20%;
    
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.fnf-sdg-title-bar {
    width: 5px;
    min-height: 60px;
    background-color: #da202b;
    border-radius: 3px;
    flex-shrink: 0;
    margin-top: 4px;
}

.fnf-sdg-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(28px, 3.5vw, 36px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.5px;
    text-transform: uppercase;
    color: #ffffff;
    margin: 0;
} */

.fnf-sdg-200 {
    font-weight: 800;
    color: #da202b;
}

/* ---- Bottom SDG cards row ---- */
.fnf-sdg-cards {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;
    gap: clamp(8px, 1.5%, 20px);
    width: 90%;
}

.fnf-sdg-card {
    flex: 1 1 0;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.fnf-sdg-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ---- Responsive ---- */
@media (max-width: 768px) {
    .fnf-sdg-content {
        padding: 16px;
    }
    .fnf-sdg-title {
        font-size: clamp(20px, 4vw, 28px);
    }
    .fnf-sdg-cards {
        gap: 6px;
    }
    .fnf-sdg-card {
        border-radius: 4px;
    }
}

/* =============================================
   Logo Carousel Section
   ============================================= */

.fnf-logo-carousel-section {
    width: 100%;
    padding: 32px 0 40px;
    background-color: #f8f9fa;
    border-top: 1px solid #e8eaed;
    border-bottom: 1px solid #e8eaed;
    overflow: hidden;
}

.fnf-carousel-heading {
    text-align: center;
    font-family: 'Poppins', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 600;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #555;
    margin: 0 0 24px;
}

.fnf-logo-track-wrapper {
    overflow: hidden;
    width: 100%;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

.fnf-logo-track {
    display: flex;
    align-items: center;
    width: max-content;
    animation: fnf-logo-scroll 18s linear infinite;
}

.fnf-logo-track:hover {
    animation-play-state: paused;
}

.fnf-logo-item {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 120px;
    padding: 0 8px;
    /* margin-right instead of gap so every item carries its own trailing space,
       making each set's width identical and -50% translateX perfectly seamless */
    margin-right: 56px;
}

.fnf-logo-item img {
    height: 110px;
    width: auto;
    max-width: 350px;
    object-fit: contain;
    display: block;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
}

.fnf-logo-item img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.07);
}

@keyframes fnf-logo-scroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (max-width: 768px) {
    .fnf-logo-carousel-section {
        padding: 24px 0;
    }
    .fnf-logo-item {
        height: 90px;
        margin-right: 36px;
    }
    .fnf-logo-item img {
        height: 70px;
        max-width: 200px;
    }
}

/* =============================================
   National Partners Section
   ============================================= */

.fnf-partners-section {
    width: 100%;
    padding: 56px clamp(32px, 6%, 96px) 64px;
    background-color: #ffffff;
    border-top: 1px solid #e8eaed;
}

/* ---- Header ---- */
.fnf-partners-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 40px;
}

.fnf-partners-accent-bar {
    width: 4px;
    height: 36px;
    background-color: #da202b;
    border-radius: 3px;
    flex-shrink: 0;
}

.fnf-partners-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(18px, 2vw, 36px);
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
    letter-spacing: -0.3px;
}

.fnf-partners-count {
    color: #da202b;
}

/* ---- Logo Grid ---- */
.fnf-partners-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 16px 24px;
}

/* ---- Individual Item ---- */
.fnf-partner-item {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
}

.fnf-partner-logo-wrap {
    width: 100%;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px 16px;
    box-sizing: border-box;
    transition: transform 0.25s ease;
    cursor: default;
}

.fnf-partner-logo-wrap img {
    max-height: 150px;
    max-width: 100%;
    width: auto;
    object-fit: contain;
    filter: grayscale(20%);
    opacity: 0.85;
    transition: filter 0.3s ease, opacity 0.3s ease, transform 0.3s ease;
    display: block;
}

.fnf-partner-item:hover .fnf-partner-logo-wrap img {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.07);
}

/* ---- Tooltip ---- */
.fnf-partner-tooltip {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background-color: #1a1a1a;
    color: #fff;
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
    padding: 5px 10px;
    border-radius: 5px;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 10;
}

.fnf-partner-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-bottom-color: #1a1a1a;
}

.fnf-partner-item:hover .fnf-partner-tooltip {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

/* ---- Responsive ---- */
@media (max-width: 1100px) {
    .fnf-partners-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

@media (max-width: 768px) {
    .fnf-partners-section {
        padding: 40px 24px 48px;
    }
    .fnf-partners-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 12px;
    }
    .fnf-partner-logo-wrap {
        height: 68px;
        padding: 10px 12px;
    }
    .fnf-partner-logo-wrap img {
        max-height: 40px;
    }
}

@media (max-width: 480px) {
    .fnf-partners-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* =============================================
   Foundational Statement Section
   ============================================= */

.fnf-fs-page {
    width: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 680px;
    overflow: hidden;
}

.fnf-fs-page-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    will-change: transform;
    transform-origin: top center;
}

.fnf-fs-page-content {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 860px;
    padding: clamp(48px, 7%, 80px) clamp(24px, 5%, 64px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
    text-align: center;
}

.fnf-fs-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.fnf-fs-label {
    font-family: 'Helvetica', sans-serif;
    font-size: clamp(16px, 2vw, 22px);
    font-weight: 800;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: #da202b;
    margin: 0;
}

.fnf-fs-text {
    font-family: 'Helvetica', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 500;
    color: #000000;
    line-height: 1.75;
    margin: 0;
    max-width: 720px;
}

.fnf-fs-divider {
    width: 60px;
    height: 2px;
    background-color: #da202b;
    border-radius: 2px;
    opacity: 0.7;
}

.fnf-fs-values {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}

.fnf-fs-values span {
    font-family: 'Helvetica', sans-serif;
    font-size: clamp(13px, 1.4vw, 16px);
    font-weight: 500;
    color: #000000;
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .fnf-fs-page-content {
        gap: 24px;
    }
    .fnf-fs-values {
        gap: 8px 20px;
    }
}

/* =====================================================
   Non-Teaching Personnel — Three-Column Icon Layout
   Left cards | Center 2×3 icon grid | Right cards
   ===================================================== */

/* ---- Main container ---- */
.fnf-nt-layout {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    width: 100%;
    padding: 28px 8px 20px;
    flex-wrap: nowrap;
}

/* ---- Cards column (left / right) ---- */
/* Use grid with rows matching the icon grid (3 × 90px, gap 16px) so each
   card aligns perfectly with the corresponding icon row */
.fnf-nt-cards-col {
    display: grid;
    grid-template-rows: repeat(3, 90px);
    gap: 16px;
    flex: 1;
    min-width: 0;
    justify-items: end;
    align-items: center;
}

.fnf-nt-cards-col--rt {
    justify-items: start;
}

/* ---- Individual stat card ---- */
.fnf-nt-icard {
    position: relative;
    display: flex;
    align-items: center;
    gap: 11px;
    padding: 12px 16px 12px 22px;
    border-radius: 12px;
    overflow: hidden;
    width: 115%;
    max-width: 240px;
    align-self: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.10);
}

.fnf-nt-icard--blue  { background: #ddeef9; }
.fnf-nt-icard--beige { background: #f5efe6; }

/* Mirrored right card */
.fnf-nt-icard--rt {
    flex-direction: row-reverse;
    padding: 12px 22px 12px 16px;
}

/* ---- Vertical accent bar ---- */
.fnf-nt-icard-accent {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 6px;
    background: #1565c0;
    border-radius: 12px 0 0 12px;
}

.fnf-nt-icard--beige .fnf-nt-icard-accent {
    background:  #f15a29;
}

.fnf-nt-icard-accent--rt {
    left: auto;
    right: 0;
    border-radius: 0 12px 12px 0;
}

/* ---- Large bold number ---- */
.fnf-nt-icard-num {
    font-family: 'Poppins', sans-serif;
    font-size: 25px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1;
    flex-shrink: 0;
}

/* ---- Category label ---- */
.fnf-nt-icard-label {
    font-family: 'Poppins', sans-serif;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: #555;
    line-height: 1.35;
    
    
}

/* ---- Center icons column ---- */
.fnf-nt-icons-col {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 2-column × 3-row grid of icons */
.fnf-nt-icons-grid {
    display: grid;
    grid-template-columns: repeat(2, 90px);
    gap: 16px;
}

/* ---- Individual icon wrapper ---- */
.fnf-nt-icon-wrap {
    position: relative;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* ---- Semi-circle "paint stroke" decoration ---- */
.fnf-nt-semi {
    position: absolute;
    height: 76px;
    width: 40px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 0;
}

/* Left D-shape: curved on left, flat on right */
.fnf-nt-semi--lft {
    border-radius: 48px 0 0 48px;
    left: 0;
}

/* Right D-shape: flat on left, curved on right */
.fnf-nt-semi--rgt {
    border-radius: 0 48px 48px 0;
    right: 0;
}

.fnf-nt-semi--blue   { background: #0088cb; }
.fnf-nt-semi--orange { background:  #f15a29; }

/* ---- Dark circular icon container ---- */
.fnf-nt-circle {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: #2a2a2a;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 26px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.30);
    flex-shrink: 0;
}

/* ---- Scroll-triggered slide-in animations ---- */

/* Left cards: hidden off to the left */
.fnf-nt-cards-col:not(.fnf-nt-cards-col--rt) .fnf-nt-icard {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fnf-nt-cards-col:not(.fnf-nt-cards-col--rt) .fnf-nt-icard:nth-child(1) { transition-delay:   0ms; }
.fnf-nt-cards-col:not(.fnf-nt-cards-col--rt) .fnf-nt-icard:nth-child(2) { transition-delay: 150ms; }
.fnf-nt-cards-col:not(.fnf-nt-cards-col--rt) .fnf-nt-icard:nth-child(3) { transition-delay: 300ms; }

/* Right cards: hidden off to the right */
.fnf-nt-cards-col--rt .fnf-nt-icard {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}
.fnf-nt-cards-col--rt .fnf-nt-icard:nth-child(1) { transition-delay:   0ms; }
.fnf-nt-cards-col--rt .fnf-nt-icard:nth-child(2) { transition-delay: 150ms; }
.fnf-nt-cards-col--rt .fnf-nt-icard:nth-child(3) { transition-delay: 300ms; }

/* Center icons: pop in with scale */
.fnf-nt-icon-wrap {
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.4s ease, transform 0.4s ease;
}
.fnf-nt-icon-wrap:nth-child(1) { transition-delay: 100ms; }
.fnf-nt-icon-wrap:nth-child(2) { transition-delay: 200ms; }
.fnf-nt-icon-wrap:nth-child(3) { transition-delay: 300ms; }
.fnf-nt-icon-wrap:nth-child(4) { transition-delay: 400ms; }
.fnf-nt-icon-wrap:nth-child(5) { transition-delay: 500ms; }
.fnf-nt-icon-wrap:nth-child(6) { transition-delay: 600ms; }

/* Triggered state — added by IntersectionObserver */
.fnf-nt-layout.fnf-nt--visible .fnf-nt-icard {
    opacity: 1;
    transform: translateX(0);
}
.fnf-nt-layout.fnf-nt--visible .fnf-nt-icon-wrap {
    opacity: 1;
    transform: scale(1);
}

/* ---- Responsive: tablet landscape (≤ 1100px) ---- */
@media (max-width: 1100px) {
    .fnf-nt-layout {
        gap: 12px;
    }
    .fnf-nt-cards-col {
        grid-template-rows: repeat(3, 76px);
        gap: 12px;
    }
    .fnf-nt-icard {
        max-width: 200px;
        padding: 10px 13px 10px 18px;
    }
    .fnf-nt-icard--rt {
        padding: 10px 18px 10px 13px;
    }
    .fnf-nt-icard-num {
        font-size: 24px;
    }
    .fnf-nt-icons-grid {
        grid-template-columns: repeat(2, 76px);
        gap: 12px;
    }
    .fnf-nt-icon-wrap {
        width: 76px;
        height: 76px;
    }
    .fnf-nt-circle {
        width: 62px;
        height: 62px;
        font-size: 22px;
    }
    .fnf-nt-semi {
        height: 80px;
        width: 40px;
    }
    .fnf-nt-semi--lft { border-radius: 40px 0 0 40px; }
    .fnf-nt-semi--rgt { border-radius: 0 40px 40px 0; }
}

/* ---- Responsive: tablet portrait (≤ 820px) ---- */
@media (max-width: 820px) {
    .fnf-nt-layout {
        gap: 8px;
        padding: 18px 4px 12px;
    }
    .fnf-nt-cards-col {
        grid-template-rows: repeat(3, 64px);
        gap: 10px;
    }
    .fnf-nt-icard {
        max-width: 160px;
        padding: 8px 10px 8px 15px;
    }
    .fnf-nt-icard--rt {
        padding: 8px 15px 8px 10px;
    }
    .fnf-nt-icard-num {
        font-size: 20px;
    }
    .fnf-nt-icard-label {
        font-size: 9px;
    }
    .fnf-nt-icons-grid {
        grid-template-columns: repeat(2, 64px);
        gap: 10px;
    }
    .fnf-nt-icon-wrap {
        width: 64px;
        height: 64px;
    }
    .fnf-nt-circle {
        width: 52px;
        height: 52px;
        font-size: 19px;
    }
    .fnf-nt-semi {
        height: 68px;
        width: 34px;
    }
    .fnf-nt-semi--lft { border-radius: 34px 0 0 34px; }
    .fnf-nt-semi--rgt { border-radius: 0 34px 34px 0; }
}

/* ---- Responsive: mobile (≤ 480px) ---- */
@media (max-width: 480px) {
    .fnf-nt-layout {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        padding: 14px 8px 10px;
    }
    .fnf-nt-icons-col {
        order: -1;
        flex: 0 0 100%;
    }
    .fnf-nt-cards-col,
    .fnf-nt-cards-col--rt {
        display: flex;
        flex-direction: column;
        gap: 10px;
        flex: 1;
        min-width: 120px;
        align-items: center;
        justify-items: unset;
    }
    .fnf-nt-icard {
        max-width: 150px;
    }
}