/* ===========================
       CSS VARIABLES
    =========================== */
:root {
    /* Page-level vars (from original index) */
    --clr-green-primary: #01403c;
    --clr-green-dark: #012b28;
    --clr-green-light: #025c56;
    --clr-black: #000000;
    --clr-gold: #FBB040;
    --clr-white: #ffffff;
    --clr-cream: #f8f8f6;
    --clr-off-white: #f5f8f7;
    --clr-text-dark: #1a1a1a;
    --clr-text-muted: #4d5e5c;
    --font-display: 'Poppins', sans-serif;
    --font-body: 'Poppins', sans-serif;
    --transition-base: 0.35s ease;
    --navbar-height: 80px;

    /* Navbar / footer vars (from style.css) */
    --green-dark: #01403c;
    --green-mid: #015c55;
    --green-btn: #01574f;
    --green-accent: #01574f;
    --teal-bright: #33ead3;
    --black: #393e41;
    --white: #ffffff;
    --gray-light: #f4f4f4;
    --text-muted-css: #ccc;
    --yellow: #FBB040;
    --teal-mid: #548d87;
    --dark-gray: #393e41;

    --standard-spacing: 1.5;
    --standard-title: 22px;
    --standard-desc: 20px;
}

/* ===========================
       RESET / BASE
    =========================== */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

img {
    max-width: 100%;
    display: block;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--font-body);
    color: var(--clr-text-dark);
    background: var(--clr-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

h1,
h2,
h3,
h4 {
    font-family: var(--font-display);
    line-height: 1.15;
}

/* ===========================
       NAVBAR
    =========================== */
nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    backdrop-filter: blur(0px);
    border-bottom: 1px solid transparent;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 0 48px;
    height: var(--navbar-height);
    transition: background 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}

nav.scrolled {
    background: linear-gradient(135deg, rgba(1, 64, 60, 1) 37%, rgba(250, 175, 64, 1) 87%);
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(51, 234, 211, 0.15);
}

/* Logo images */
.logo-img {
    height: 48px;
    width: auto;
    display: block;
    object-fit: contain;
}

.mobile-logo-img {
    height: 34px;
    width: auto;
    display: block;
    object-fit: contain;
}

.footer-logo-img {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
    margin-bottom: 4px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: 36px;
    list-style: none;
    margin-left: auto;
    margin-top: 15px !important
}

.nav-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: color 0.2s;
    position: relative;
    display: inline-block;
}

.nav-links a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: var(--clr-cream);
    transition: width 0.3s ease;
}

.nav-links a:hover {
    color: var(--clr-cream);
}

.nav-links a:hover::after {
    width: 100%;
}

.nav-links li {
    position: relative;
}

.nav-links>li>a {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}

.nav-links>li>a .chevron {
    display: inline-block;
    width: 10px;
    height: 10px;
    transition: transform 0.25s ease;
    opacity: 0.75;
    flex-shrink: 0;
}

.nav-links>li.open>a .chevron {
    transform: rotate(180deg);
    opacity: 1;
}

/* Dropdown */
.dropdown {
    position: absolute;
    top: calc(100% + 10px);
    left: 50%;
    background: var(--green-mid);
    border-radius: 10px;
    min-width: 230px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(-50%) translateY(6px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
    z-index: 2000;
}

.dropdown::before {
    content: '';
    position: absolute;
    top: -7px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--green-mid);
}

.nav-links>li.open>.dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}

.dropdown li {
    position: relative;
}

.dropdown li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 22px;
    color: var(--white);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: none;
    transition: background 0.15s, padding-left 0.15s;
    white-space: nowrap;
    cursor: pointer;
}

.dropdown li a:hover {
    background: rgba(255, 255, 255, 0.12);
    padding-left: 28px;
    color: var(--white);
}

.dropdown li a .sub-arrow {
    font-size: 16px;
    opacity: 0.6;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.dropdown li.open>a .sub-arrow {
    transform: rotate(90deg);
    opacity: 1;
}

/* Sub-dropdown */
.sub-dropdown {
    position: absolute;
    top: 0;
    left: calc(100% + 4px);
    background: var(--green-dark);
    border-radius: 10px;
    min-width: 200px;
    padding: 8px 0;
    list-style: none;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateX(8px);
    transition: opacity 0.2s, transform 0.2s, visibility 0.2s;
    z-index: 2001;
}

.dropdown li.open>.sub-dropdown {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateX(0);
}

.sub-dropdown li a {
    padding: 10px 20px;
    font-size: 12.5px;
}

/* Flip sub-dropdown to the LEFT for the last two nav items
   so it never overflows off the right edge of the viewport */
.nav-links>li:nth-last-child(-n+2) .sub-dropdown {
    left: auto;
    right: calc(100% + 4px);
    transform: translateX(-8px);
}

.nav-links>li:nth-last-child(-n+2) .dropdown li.open>.sub-dropdown {
    transform: translateX(0);
}

/* Nav right */
.nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.nav-search {
    margin-left: 20px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--white);
    font-size: 18px;
    opacity: 0.7;
    transition: opacity 0.2s;
}

.nav-search:hover {
    opacity: 1;
}

/* ===========================
       HAMBURGER
    =========================== */
.hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    z-index: 1100;
}

.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
    transform-origin: center;
}

.hamburger.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.hamburger.open span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

.hamburger.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ===========================
       MOBILE BACKDROP
    =========================== */
.mobile-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 1049;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.38s ease;
}

.mobile-backdrop.open {
    opacity: 1;
}

/* ===========================
       MOBILE DRAWER — Redesigned
    =========================== */
.mobile-menu {
    display: none;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 100vw);
    z-index: 1050;
    background: rgba(1, 64, 60, 0.90);
    /* Transparent primary green */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-left: none;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    flex-direction: column;
    opacity: 0;
    pointer-events: none;
    transform: translateX(100%);
    transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    overflow: hidden;
    box-shadow: -15px 0 50px rgba(0, 0, 0, 0.5);
}

.mobile-menu.open {
    opacity: 1;
    pointer-events: all;
    transform: translateX(0);
}

.mobile-menu.open * {
    pointer-events: auto;
}

.mobile-nav {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* --- Header --- */
.mobile-header {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 32px 24px 24px 32px;
    flex-shrink: 0;
    width: 100%;
    background: transparent;
    border-bottom: none;
}

/* gold accent line at very top of drawer */
.mobile-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #FBB040, #f5d48b, #FBB040);
    border-radius: 0 0 4px 4px;
}

.mobile-header-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.mobile-close {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.9);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    flex-shrink: 0;
    backdrop-filter: blur(5px);
}

.mobile-close:hover {
    background: #FBB040;
    border-color: #FBB040;
    color: #01403c;
    transform: rotate(90deg) scale(1.1);
    box-shadow: 0 0 15px rgba(251, 176, 64, 0.4);
}

/* --- Scrollable body --- */
.mobile-nav-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mobile-nav-body::-webkit-scrollbar {
    width: 8px;
}

.mobile-nav-body::-webkit-scrollbar-track {
    background: transparent;
}

.mobile-nav-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 8px;
}

/* --- Section label --- */
.mobile-section-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.5);
    padding: 16px 12px 8px;
    margin-top: 6px;
    position: relative;
    display: inline-block;
}

/* --- Nav item card --- */
.mobile-item {
    border-radius: 0;
    overflow: visible; /* must be visible so the dropdown can expand freely */
    background: transparent;
    border: none;
    margin-bottom: 4px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    box-shadow: none;
}

.mobile-item:hover {
    background: transparent;
    border: none;
    transform: none;
}

.mobile-item:has(.mobile-toggle[aria-expanded="true"]) {
    border: none;
    background: transparent;
    box-shadow: none;
}

/* --- Toggle button --- */
.mobile-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    cursor: pointer;
    text-align: left;
    transition: all 0.3s ease;
    gap: 12px;
}

.mobile-toggle:hover {
    color: #FBB040;
    padding-left: 26px;
}

.mobile-toggle[aria-expanded="true"] {
    color: #FBB040;
}

/* --- Chevron icon --- */
.mobile-chevron {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    transition: transform 0.35s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0.7;
}

.mobile-toggle[aria-expanded="true"] .mobile-chevron {
    transform: rotate(180deg) scale(1.2);
    opacity: 1;
}

/* --- Direct link (no dropdown) --- */
.mobile-direct-link {
    display: flex;
    align-items: center;
    width: 100%;
    color: var(--white);
    font-size: 18px;
    font-weight: 500;
    letter-spacing: 0.5px;
    padding: 16px 20px;
    text-decoration: none;
    transition: all 0.3s ease;
    box-sizing: border-box;
    background: none;
    border: none;
}

.mobile-direct-link:hover {
    color: #FBB040;
    padding-left: 24px;
}

/* --- Dropdown list --- */
.mobile-dropdown {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    margin: 0 16px 12px 16px;
}

.mobile-dropdown.open,
.mobile-toggle[aria-expanded="true"] + .mobile-dropdown {
    max-height: 600px;
}

.mobile-dropdown li {
    display: flex;
}

.mobile-dropdown li a {
    display: flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    font-size: 15px;
    font-weight: 400;
    padding: 12px 16px 12px 24px;
    width: 100%;
    transition: all 0.25s ease;
    position: relative;
    border: none !important;
}

/* small dot bullet */
.mobile-dropdown li a::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    flex-shrink: 0;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.mobile-dropdown li a:hover {
    color: #FBB040;
    background: transparent;
    padding-left: 28px;
}

.mobile-dropdown li a:hover::before {
    background: #FBB040;
    transform: scale(1.6);
    box-shadow: 0 0 8px rgba(251, 176, 64, 0.6);
}

/* --- Sub toggle & sub-dropdown (unchanged, kept minimal) --- */
.mobile-sub-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12.5px;
    font-weight: 500;
    padding: 13px 18px 13px 20px;
    cursor: pointer;
    text-align: left;
    transition: color 0.15s, background 0.15s;
}

.mobile-sub-toggle:hover,
.mobile-sub-toggle[aria-expanded="true"] {
    color: #FBB040;
    background: rgba(251, 176, 64, 0.07);
}

.mobile-sub-toggle[aria-expanded="true"] .mobile-chevron {
    transform: rotate(180deg);
}

.mobile-sub-dropdown {
    list-style: none;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
    background: rgba(0, 0, 0, 0.12);
}

.mobile-sub-dropdown.open {
    max-height: 300px;
}

.mobile-sub-dropdown li a {
    padding-left: 36px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}

.mobile-sub-dropdown li a:hover {
    color: #FBB040;
}

/* --- Footer --- */
.mobile-footer {
    flex-shrink: 0;
    padding: 16px 24px 32px;
    border-top: none;
    background: transparent;
}

.mobile-footer-info {
    text-align: center;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.18);
    letter-spacing: 0.5px;
    line-height: 1.6;
}

/* ===========================
       SEARCH MODAL
    =========================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    justify-content: flex-end;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.active {
    pointer-events: all;
    opacity: 1;
}

/* Scoped to search modal overlay only — avoids colliding with Bootstrap's .modal-backdrop */
.modal-overlay .modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 0;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* ===========================
   BOOTSTRAP MODAL BACKDROP FIX
   Ensures blur covers the full viewport even when page is scrolled.
   The root cause was .modal-backdrop being overridden to position:absolute
   above — now scoped so Bootstrap's fixed backdrop is restored.
=========================== */
.modal-backdrop.show {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    backdrop-filter: blur(1px) !important;
    -webkit-backdrop-filter: blur(1px);
    background: rgba(0, 20, 19, 0.697) !important;
    opacity: 1 !important;
}

body.modal-open {
    overflow: hidden !important;
}

.modal-panel {
    position: relative;
    z-index: 1;
    width: 420px;
    max-width: 100vw;
    height: 100%;
    background: #01403C;
    border-left: 4px solid #faaf40;
    padding: 48px 40px;
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-y: auto;
}

.modal-overlay.active .modal-panel {
    transform: translateX(0);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    background: none;
    border: none;
    color: var(--white);
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s;
    padding: 4px;
}

.modal-close:hover {
    opacity: 1;
}

.modal-panel h2 {
    font-size: 32px;
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
    margin-top: 16px;
}

.modal-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--white);
    margin-bottom: 8px;
    letter-spacing: 0.3px;
}

.modal-input {
    width: 100%;
    padding: 16px 20px;
    border-radius: 50px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    background: transparent;
    color: var(--white);
    font-size: 15px;
    font-family: var(--font-body);
    outline: none;
    transition: border-color 0.2s;
    margin-bottom: 16px;
}

.modal-input::placeholder {
    color: rgba(255, 255, 255, 0.45);
}

.modal-input:focus {
    border-color: rgba(255, 255, 255, 0.9);
}

.modal-btn {
    width: 100%;
    padding: 18px;
    border-radius: 50px;
    border: none;
    background: var(--dark-gray);
    color: var(--white);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    cursor: pointer;
    margin-top: 8px;
    transition: background 0.2s, transform 0.15s;
}

.modal-btn:hover {
    background: #111;
    transform: translateY(-1px);
}

/* ===========================
       HERO — VIDEO BACKGROUND
    =========================== */
.hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    display: flex;
    align-items: center;
}

.hero-video-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hero-video-fallback {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            #012f2c 0%,
            /* darker shade */
            #01403c 50%,
            /* base color */
            #01665f 100%
            /* lighter shade */
        );
    z-index: -1;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right,
            rgba(1, 64, 60, 0.39) 0%,
            rgba(1, 64, 60, 0.45) 60%,
            rgba(1, 64, 60, 0.15) 100%);
    z-index: 1;
}

.hero-bottom-fade {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    background: linear-gradient(to top, var(--clr-off-white), transparent);
    z-index: 2;
}

@keyframes heroReveal {
    0% {
        opacity: 0;
        transform: translateY(24px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero-content {
    position: relative;
    z-index: 3;
    padding: 0 clamp(2rem, 5vw, 8rem);
    max-width: min(1600px, 96vw);
    margin: 0 auto;
    width: 100%;
    padding-top: var(--navbar-height);
    /* Hidden for 5s, then fades + rises in over 1s */
    opacity: 0;
    animation: heroReveal 1s ease forwards;
    animation-delay: 2s;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: clamp(0.65rem, 0.72vw, 1rem);
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 1.25rem;
}

.hero-eyebrow-line {
    width: 32px;
    height: 1px;
    background: var(--clr-gold);
}

.hero-heading {
    font-size: clamp(2.5rem, 3.47vw, 9rem);
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1.08;
    margin-bottom: 1.5rem;
    /* max-width: clamp(480px, 58vw, 1100px); */
}

.hero-heading span {
    color: var(--clr-gold);
}

.hero-subtext {
    font-size: 25px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.7;
    margin-bottom: 2.5rem;
    font-weight: 600;
}

.hero-cta-group {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
}

.btn-hero-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--clr-green-primary);
    color: var(--clr-white);
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.94vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid var(--clr-green-light);
    padding: clamp(0.7rem, 0.94vw, 1.05rem) clamp(1.5rem, 2.22vw, 2.8rem);
    border-radius: 20px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-hero-primary:hover {
    background: var(--clr-green-light);
    border-color: var(--clr-green-light);
    color: var(--clr-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 107, 60, 0.4);
}

.btn-hero-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--clr-white);
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.94vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid rgba(255, 255, 255, 0.45);
    padding: clamp(0.7rem, 0.94vw, 1.05rem) clamp(1.5rem, 2.22vw, 2.8rem);
    border-radius: 20px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.75);
    color: var(--clr-white);
}

.btn-hero-outline-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--clr-black);
    font-family: var(--font-body);
    font-size: clamp(0.8rem, 0.94vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: 2px solid var(--clr-gold);
    padding: clamp(0.7rem, 0.94vw, 1.05rem) clamp(1.5rem, 2.22vw, 2.8rem);
    border-radius: 20px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-hero-outline-gold:hover {
    background: transparent;
    border-color: var(--clr-gold);
    color: var(--clr-gold);
}

.hero-scroll-hint {
    position: absolute;
    bottom: 2.5rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.65rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    animation: bounce 2s infinite;
}

@keyframes bounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(6px);
    }
}

/* ===========================
       SECTION SHARED
    =========================== */
.section-padding {
    padding: clamp(3rem, 5vw, 5.5rem) 0;
}

.section-label {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--clr-green-primary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.section-label::before {
    content: '';
    display: inline-block;
    width: 24px;
    height: 2px;
    background: var(--clr-green-primary);
    border-radius: 2px;
}

.section-title {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--clr-green-dark);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.section-title-impact {
    font-size: clamp(2rem, 3.33vw, 6rem);
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.section-title-service {
    font-size: clamp(2rem, 3.33vw, 6rem);
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.loan-title-service {
    font-size: 40px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.savings-title-service {
    font-size: 40px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.branches-title-service {
    font-size: 40px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.15;
    margin-bottom: 1rem;
}

.section-head {
    font-size: 25px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.75;
}

.section-caption {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--clr-off-white);
    line-height: 1.75;
}

.section-body {
    font-size: 20px;
    color: var(--clr-black);
    line-height: var(--standard-spacing);
    text-align: justify;
}

/* ===========================
       Mission SECTION
    =========================== */
.mission-section {
    background: var(--clr-white);
}

.mission-title {
    font-size: 25px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.5;
}

.mission-title-header {
    font-size: 25px;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.5;
}

.mission-title-service {
    font-size: 40px;
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.mission-head {
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--clr-gold);
    line-height: 1.75;
}

.mission-body {
    font-size: 1rem;
    color: var(--clr-green-primary);
    line-height: 1.75;
}

/* ===========================
       SERVICES SECTION
    =========================== */
.services-section {
    background: var(--clr-cream);
}

.service-card {
    background: var(--clr-white);
    border-radius: 16px;
    padding: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.service-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--clr-green-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-base);
    z-index: 1;
}

.service-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(26, 107, 60, 0.18);
}


/* Image wrapper — matches actual image ratio 700×500 */
.service-card .card-img-wrap {
    width: 100%;
    aspect-ratio: 700 / 500;
    overflow: hidden;
    flex-shrink: 0;
}

.service-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Body gets the padding instead of the card */
.service-card .card-body {
    padding: clamp(1.25rem, 2vw, 2.5rem) clamp(1.25rem, 2vw, 2.5rem) clamp(1.5rem, 2.2vw, 2.8rem);
    display: flex;
    flex-direction: column;
    flex: 1;
}

.service-card-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--clr-white);
    margin-bottom: 1.25rem;
}

.service-card-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--clr-green-primary);
}

.service-card-text {
    font-size: 20px;
    color: var(--clr-text-dark);
    line-height: var(--standard-spacing);
    text-align: justify;
}

.service-card-text span {
    font-size: 20px;
    font-weight: 700;
    font-style: italic;
    color: var(--clr-text-dark);
}

.service-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-green-primary);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-top: auto;
    padding-top: 1.25rem;
    transition: gap var(--transition-base), color var(--transition-base);
}

.service-card-link:hover {
    gap: 0.6rem;
    color: var(--clr-gold);
}

/* ===========================
       BOD CARDS SECTION
    =========================== */

.bod-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 0.75rem;
}

.bod-section-tag::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--clr-gold);
    border-radius: 2px;
}

/* Clickable card wrapper */
.bod-card-link-wrap {
    display: block;
    text-decoration: none;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /* subtle shadow at rest */
    box-shadow: 0 4px 20px rgba(1, 64, 60, 0.10);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.bod-card-link-wrap:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 50px rgba(1, 64, 60, 0.22), 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* The card itself */
.bod-card {
    position: relative;
    width: 100%;
    aspect-ratio: 683 / 900;
    overflow: hidden;
    border-radius: 20px;
    background: var(--clr-green-dark);
}

/* Photo */
.bod-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.bod-card-link-wrap:hover .card-img-top {
    transform: scale(1.06);
}

/* Gradient overlay — always visible at bottom, expands on hover */
.bod-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(1, 40, 38, 0.82) 0%,
            rgba(1, 64, 60, 0.40) 40%,
            rgba(1, 64, 60, 0.04) 65%,
            transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem 1.6rem 1.6rem;
    transition: background 0.38s ease;
}

.bod-card-link-wrap:hover .bod-card-overlay {
    background: linear-gradient(to top,
            rgba(1, 30, 28, 0.90) 0%,
            rgba(1, 64, 60, 0.55) 45%,
            rgba(1, 64, 60, 0.10) 70%,
            transparent 100%);
}

/* Gold accent bar */
.bod-card-accent {
    width: 36px;
    height: 3px;
    background: var(--clr-gold);
    border-radius: 2px;
    margin-bottom: 0.7rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.bod-card-link-wrap:hover .bod-card-accent {
    transform: scaleX(1);
}

/* Name */
.bod-card-title {
    font-family: var(--font-display);
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

/* Role / position tag — revealed on hover */
.bod-card-role {
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-gold);
    /* opacity: 0; */
    transform: translateY(6px);
    transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
    margin-bottom: 30px;
}

.bod-card-link-wrap:hover .bod-card-role {
    opacity: 1;
    transform: translateY(0);
}

/* Corner arrow icon */
.bod-card-arrow {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.bod-card-link-wrap:hover .bod-card-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ===========================
       STAFFS CARDS SECTION
    =========================== */

.staff-section-tag {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 0.75rem;
}

.staff-section-tag::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--clr-gold);
    border-radius: 2px;
}

/* Clickable card wrapper */
.staff-card-link-wrap {
    display: block;
    text-decoration: none;
    height: 100%;
    border-radius: 20px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    /* subtle shadow at rest */
    box-shadow: 0 4px 20px rgba(1, 64, 60, 0.10);
    transition: transform 0.38s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.38s cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-card-link-wrap:hover {
    transform: translateY(-8px) scale(1.015);
    box-shadow: 0 20px 50px rgba(1, 64, 60, 0.22), 0 4px 12px rgba(0, 0, 0, 0.10);
}

/* The card itself */
.staff-card {
    position: relative;
    width: 100%;
    aspect-ratio: 683 / 900;
    overflow: hidden;
    border-radius: 20px;
    background: var(--clr-green-dark);
}

/* Photo */
.staff-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-card-link-wrap:hover .card-img-top {
    transform: scale(1.06);
}

/* Gradient overlay — always visible at bottom, expands on hover */
.staff-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(1, 40, 38, 0.82) 0%,
            rgba(1, 64, 60, 0.40) 40%,
            rgba(1, 64, 60, 0.04) 65%,
            transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.75rem 1.6rem 1.6rem;
    transition: background 0.38s ease;
}

.staff-card-link-wrap:hover .staff-card-overlay {
    background: linear-gradient(to top,
            rgba(1, 30, 28, 0.90) 0%,
            rgba(1, 64, 60, 0.55) 45%,
            rgba(1, 64, 60, 0.10) 70%,
            transparent 100%);
}

/* Gold accent bar */
.staff-card-accent {
    width: 36px;
    height: 3px;
    background: var(--clr-gold);
    border-radius: 2px;
    margin-bottom: 0.7rem;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1) 0.05s;
}

.staff-card-link-wrap:hover .staff-card-accent {
    transform: scaleX(1);
}

/* Name */
.staff-card-title {
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: #ffffff;
    line-height: 1.3;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

/* Role / position tag — revealed on hover */
.staff-card-role {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-gold);
    opacity: 1;
    transform: translateY(6px);
    transition: opacity 0.3s ease 0.08s, transform 0.3s ease 0.08s;
    margin-bottom: 0;
}

.staff-card-link-wrap:hover .staff-card-role {
    opacity: 1;
    transform: translateY(0);
}

/* Corner arrow icon */
.staff-card-arrow {
    position: absolute;
    top: 1.1rem;
    right: 1.1rem;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.85rem;
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.staff-card-link-wrap:hover .staff-card-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ===================================================
   STAFF PROFILE MODAL — Custom Styles
   Add these after the existing .staff-card-* rules
   =================================================== */

/* ---- Card: change arrow icon hint on hover ---- */
.staff-card-link-wrap {
    cursor: pointer;
}

/* ===================================================
   FIX: Prevent staff section header colors from
   changing when the Bootstrap modal backdrop opens.

   Bootstrap's backdrop sits at z-index 1040 and
   visually dims everything beneath it. We lift the
   section header above the backdrop (z-index 1041)
   so it is unaffected, then pin its colors with
   !important so no cascade can override them.
   =================================================== */
.staff-section-header {
    position: relative;
    z-index: 1041;
    /* above Bootstrap backdrop (1040), below modal (1050) */
    isolation: isolate;
    /* own stacking context — immune to parent opacity */
}

/* Pin heading color — survives reveal animation resets & modal-open side effects */
.staff-section-header .mission-title-service {
    color: var(--clr-green-primary) !important;
    opacity: 1 !important;
    transform: none !important;
}

/* Pin paragraph color */
.staff-section-header .mission-title {
    font-size: var(--standard-desc) !important;
    color: var(--clr-text-muted) !important;
    margin: 0 auto 20px !important;
    line-height: var(--standard-spacing) !important;
}

/* ---- Modal backdrop blur ---- */
/* ===========================================
   STAFF PROFILE MODAL — REDESIGNED
   =========================================== */

/* ---- Backdrop ---- */
.staff-profile-modal .modal-backdrop,
.modal-backdrop {
    backdrop-filter: blur(4px);
}

/* ---- Dialog sizing ---- */
.staff-profile-modal .modal-dialog {
    max-width: 860px;
}

/* ---- Modal card shell ---- */
.staff-modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow:
        0 40px 100px rgba(1, 40, 38, 0.28),
        0 8px 24px rgba(0, 0, 0, 0.10);
    position: relative;
    background: #ffffff;
}

/* ---- Two-column layout ---- */
.staff-modal-body {
    display: flex;
    flex-direction: row;
    min-height: 480px;
}

/* ==========================================
   QUOTE-BELOW VARIANT
   Desktop: quote sits below the photo frame as a separate block.
   Mobile:  quote overlays the bottom of the photo frame.
   Apply modifier class  .staff-modal-photo-col--quote-below  to the col.
   ========================================== */

/* The photo frame in this variant takes all available height
   above the quote block — no fixed aspect-ratio needed here,
   the flex-grow handles it */
.staff-modal-photo-col--quote-below {
    justify-content: flex-start;
    /* children stack from top */
    gap: 0;
    padding-bottom: 0;
    /* quote block owns its own padding */
}

.staff-modal-photo-col--quote-below .staff-modal-photo-frame {
    flex: 1 1 0;
    /* grow to fill available column height */
    aspect-ratio: unset;
    /* let the frame stretch to the flex size  */
    border-radius: 0;
    /* flush against the quote block below    */
    width: 100%;
    min-height: 0;
    box-shadow: none;
}

/* Quote block — BELOW image on desktop */
.staff-modal-quote-block {
    width: 100%;
    flex-shrink: 0;
    position: relative;
    /* normal flow on desktop */
    z-index: 1;
    padding: 1.2rem 1.4rem 1.4rem;
    background: rgba(1, 20, 18, 0.55);
    /* dark tint that blends with col bg */
    border-top: 2px solid rgba(251, 176, 64, 0.25);
}

.staff-modal-quote-block .staff-modal-quote-mark {
    font-size: 2.4rem;
    color: var(--clr-gold);
    line-height: 0.5;
    margin-bottom: 0.55rem;
    display: block;
    opacity: 0.9;
}

.staff-modal-quote-block .staff-modal-quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.7;
    font-weight: 400;
    margin: 0;
}

/* ---- Mobile override: quote overlays the image ---- */
@media (max-width: 580px) {

    /* The column needs relative context so the quote can overlay */
    .staff-modal-photo-col--quote-below {
        position: relative;
        padding: 0;
    }

    /* Restore the photo frame to full-width portrait dimensions */
    .staff-modal-photo-col--quote-below .staff-modal-photo-frame {
        flex: none;
        width: 100%;
        aspect-ratio: 1023 / 1537;
        max-height: 70vh;
        height: auto;
        border-radius: 0;
        box-shadow: none;
    }

    /* Pull the quote block out of normal flow and overlay it */
    .staff-modal-quote-block {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 3rem 1rem 1.1rem;
        background: linear-gradient(to top,
                rgba(1, 20, 18, 0.95) 0%,
                rgba(1, 40, 36, 0.70) 50%,
                transparent 100%);
        border-top: none;
    }
}


.staff-modal-photo-col {
    width: 280px;
    flex-shrink: 0;
    background: linear-gradient(170deg, var(--clr-green-light) 0%, var(--clr-green-dark) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 2.25rem 1.5rem 2rem;
    position: relative;
    gap: 0;
    overflow: hidden;
}

/* Dot-grid texture */
.staff-modal-photo-col::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(circle, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 18px 18px;
    pointer-events: none;
    z-index: 0;
}

/* Gold top accent bar */
.staff-modal-photo-col::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--clr-gold) 0%, #ffdb82 50%, var(--clr-gold) 100%);
    z-index: 1;
}

/* ---- Photo frame with quote overlay ---- */
.staff-modal-photo-frame {
    position: relative;
    /* ← required for overlay positioning */
    z-index: 1;
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: var(--clr-green-dark);
    box-shadow:
        0 20px 50px rgba(0, 0, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.20);
    flex-shrink: 0;
}

/* ---- Image fills the frame ---- */
.staff-modal-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

/* ---- Quote gradient overlay at bottom of photo ---- */
.staff-modal-quote-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 3rem 1.25rem 1.25rem;
    background: linear-gradient(to top,
            rgba(1, 20, 18, 0.96) 0%,
            rgba(1, 40, 36, 0.75) 45%,
            transparent 100%);
    z-index: 2;
}

.staff-modal-quote-mark {
    font-size: 2.8rem;
    color: var(--clr-gold);
    line-height: 0.6;
    margin-bottom: 0.55rem;
    display: block;
    opacity: 0.9;
}

.staff-modal-quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.7;
    font-weight: 400;
    margin: 0;
    text-align: center;
}

/* ==========================================
   RIGHT: Info column
   ========================================== */
.staff-modal-info-col {
    flex: 1;
    padding: 2.75rem 2.5rem 2.25rem 2.25rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-y: auto;
    max-height: 540px;
    background: #fff;
}

.staff-modal-info-col::-webkit-scrollbar {
    width: 4px;
}

.staff-modal-info-col::-webkit-scrollbar-track {
    background: transparent;
}

.staff-modal-info-col::-webkit-scrollbar-thumb {
    background: rgba(1, 64, 60, 0.15);
    border-radius: 4px;
}

/* ---- Active staff tag ---- */
.staff-modal-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--clr-green-primary);
    background: rgba(1, 64, 60, 0.06);
    border: 1px solid rgba(1, 64, 60, 0.14);
    border-radius: 50px;
    padding: 5px 12px 5px 9px;
    margin-bottom: 1rem;
    width: fit-content;
}

.staff-modal-tag-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #22c55e;
    display: inline-block;
    box-shadow: 0 0 0 2.5px rgba(34, 197, 94, 0.22);
    animation: pulse-dot 2.5s ease-in-out infinite;
}

@keyframes pulse-dot {

    0%,
    100% {
        box-shadow: 0 0 0 2.5px rgba(34, 197, 94, 0.22);
    }

    50% {
        box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.10);
    }
}

/* ---- Name ---- */
.staff-modal-name {
    font-family: var(--font-display);
    font-weight: 800;
    color: var(--clr-text-dark);
    line-height: 1.15;
    margin-bottom: 0.35rem;
    letter-spacing: -0.025em;
}

/* ---- Role ---- */
.staff-modal-role {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 0;
}

/* ---- Gold + green divider ---- */
.staff-modal-divider {
    width: 52px;
    height: 3px;
    background: linear-gradient(90deg, var(--clr-green-primary), var(--clr-gold));
    border-radius: 3px;
    margin: 1.2rem 0;
}

/* ---- Years in service badge ---- */
.staff-modal-tenure {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 14px;
    font-weight: 700;
    color: var(--clr-green-primary);
    background: rgba(1, 64, 60, 0.05);
    border: 1px solid rgba(1, 64, 60, 0.12);
    border-radius: 50px;
    padding: 6px 14px;
    margin-bottom: 1.25rem;
    width: fit-content;
}

.staff-modal-tenure i {
    color: var(--clr-gold);
    font-size: 14px;
}

/* ---- Bio text ---- */
.staff-modal-bio {
    font-size: 20px;
    text-align: justify;
    color: var(--clr-text-muted);
    line-height: 1.85;
    margin-bottom: 0.75rem;
}

/* ---- Details 2-column grid ---- */
.staff-modal-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-top: 1.25rem;
}

.staff-detail-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 14px;
    border-radius: 12px;
    background: rgba(1, 64, 60, 0.04);
    border: 1px solid rgba(1, 64, 60, 0.08);
    transition: background 0.2s, border-color 0.2s;
}

.staff-detail-item:hover {
    background: rgba(1, 64, 60, 0.08);
    border-color: rgba(1, 64, 60, 0.16);
}

.staff-detail-item>i {
    font-size: 0.95rem;
    color: var(--clr-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

.staff-detail-item>div {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.detail-label {
    font-size: 0.63rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    display: block;
}

.detail-value {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--clr-text-dark);
    display: block;
}

/* ---- Close button ---- */
.staff-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 20;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.30);
    background: rgba(1, 30, 28, 0.50);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.20);
}

.staff-modal-close:hover {
    background: var(--clr-gold);
    border-color: var(--clr-gold);
    color: var(--clr-green-dark);
    transform: rotate(90deg);
}

/* ---- Modal enter animation ---- */
.staff-profile-modal .modal-dialog {
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
    transform: translateY(28px) scale(0.97);
    opacity: 0;
}

.staff-profile-modal.show .modal-dialog {
    transform: translateY(0) scale(1);
    opacity: 1;
}

/* ==========================================
   STAFF MODAL — RESPONSIVE (MOBILE)
   ========================================== */

/* Tablet: narrow the photo column */
@media (max-width: 768px) {
    .staff-profile-modal .modal-dialog {
        margin: 0.75rem;
        max-width: calc(100vw - 1.5rem);
    }

    .staff-modal-photo-col {
        width: 220px;
    }

    .staff-modal-info-col {
        padding: 2rem 1.75rem 1.75rem 1.75rem;
    }


}

/* Mobile: stack vertically */
@media (max-width: 580px) {
    .staff-profile-modal .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    /* Stack columns */
    .staff-modal-body {
        flex-direction: column;
    }

    /* Photo column becomes top band with fixed photo height */
    .staff-modal-photo-col {
        width: 100%;
        padding: 0;
        border-radius: 0;
        justify-content: flex-start;
        align-items: stretch;
    }

    /* Photo frame: use the actual image ratio (1023×1537 ≈ 2:3)
       so the full portrait is shown without any cropping */
    .staff-modal-photo-frame {
        border-radius: 0;
        aspect-ratio: 1023 / 1537;
        height: auto;
        width: 100%;
        max-height: 70vh;
        /* safety cap so it never overflows the screen */
    }

    /* Tighten quote overlay padding on mobile */
    .staff-modal-quote-overlay {
        padding: 2.5rem 1rem 1rem;
    }

    .staff-modal-quote-mark {
        font-size: 2rem;
    }

    .staff-modal-quote-text {
        font-size: 16px;
    }

    /* Info column: no scroll cap, comfortable padding */
    .staff-modal-info-col {
        padding: 1.5rem 1.25rem 1.75rem;
        max-height: none;
        overflow-y: visible;
    }


    .staff-modal-details {
        grid-template-columns: 1fr;
    }

    /* Move close button to top-right of whole modal (over photo) */
    .staff-modal-close {
        top: 12px;
        right: 12px;
    }
}

.people-section {
    background: var(--clr-cream);
}

/* ===========================
       ABOUT SECTION
    =========================== */
.about-section {
    background: var(--clr-white);
}

.about-image-wrap {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 4/3;
    background: linear-gradient(135deg, var(--clr-green-dark) 0%, var(--clr-green-primary) 100%);
}

.about-image-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.about-image-placeholder i {
    font-size: 5rem;
    color: rgba(255, 255, 255, 0.2);
}

.about-badge {
    position: absolute;
    bottom: 1.5rem;
    right: 1.5rem;
    background: var(--clr-gold);
    color: var(--clr-white);
    padding: 0.75rem 1.25rem;
    border-radius: 12px;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    line-height: 1.4;
}

.about-image-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(10, 35, 18, 0.5) 0%, transparent 60%);
}

.about-list {
    list-style: none;
    margin: 1.5rem 0 2rem;
}

.about-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    padding: 0.5rem 0;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.about-list li:last-child {
    border-bottom: none;
}

.about-list-icon {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--clr-green-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-size: 0.65rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.btn-solid-green {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--clr-green-primary);
    color: var(--clr-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    padding: 0.85rem 2rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-solid-green:hover {
    background: var(--clr-green-light);
    color: var(--clr-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(26, 107, 60, 0.35);
}

/* ===========================
       STATS SECTION
    =========================== */
.stats-section {
    background: var(--clr-green-primary);
    position: relative;
    overflow: hidden;
}

.stats-section::before {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.stats-section::after {
    content: '';
    position: absolute;
    bottom: -80px;
    left: -40px;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.04);
}

.stat-item {
    text-align: center;
    position: relative;
    z-index: 1;
}

.stat-number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.stat-number span {
    color: var(--clr-gold);
}

.stat-label {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    max-width: 180px;
    margin: 0 auto;
    line-height: 1.5;
}

.stat-divider {
    width: 1px;
    height: 80px;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 auto;
}

/* ===========================
       TESTIMONIALS
    =========================== */
.testimonials-section {
    background: var(--clr-off-white);
}

.testimonial-card {
    background: var(--clr-white);
    border-radius: 16px;
    padding: 2rem 1.75rem;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.08);
}

.testimonial-quote-mark {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--clr-green-primary);
    opacity: 0.25;
    line-height: 1;
    margin-bottom: -0.5rem;
}

.testimonial-text {
    font-size: 0.95rem;
    color: var(--clr-text-muted);
    line-height: 1.75;
    margin-bottom: 1.5rem;
    font-style: italic;
}

.testimonial-avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-display);
    flex-shrink: 0;
}

.testimonial-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-dark);
}

.testimonial-role {
    font-size: 0.75rem;
    color: var(--clr-text-muted);
}

/* ===========================
       LOCATIONS SECTION
    =========================== */
.locations-section {
    background: var(--clr-white);
}

.location-map-placeholder {
    border-radius: 16px;
    overflow: hidden;
    height: 360px;
    background: linear-gradient(135deg, #e8f5ee 0%, #d1ead9 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(26, 107, 60, 0.1);
    position: relative;
}

.location-pin {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
}

.location-pin i {
    font-size: 3rem;
    color: var(--clr-green-primary);
    animation: pin-bounce 2s ease-in-out infinite;
}

@keyframes pin-bounce {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.location-pin p {
    font-size: 0.82rem;
    color: var(--clr-green-dark);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.location-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    margin-bottom: 1rem;
    transition: border-color var(--transition-base), background var(--transition-base);
}

.location-card:hover {
    border-color: var(--clr-green-primary);
    background: rgba(26, 107, 60, 0.03);
}

.location-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: rgba(26, 107, 60, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-green-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.location-card-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--clr-text-dark);
    margin-bottom: 0.2rem;
}

.location-card-detail {
    font-size: 0.8rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
}

/* ===========================
       CTA BANNER
    =========================== */
.cta-banner {
    background: linear-gradient(135deg, var(--clr-green-dark) 0%, var(--clr-green-primary) 100%);
    padding: 5rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.cta-banner::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -20%;
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.03);
}

.cta-banner-title {
    font-size: clamp(2rem, 4vw, 3.2rem);
    color: var(--clr-white);
    margin-bottom: 1rem;
}

.cta-banner-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.7);
    max-width: 480px;
    margin: 0 auto 2.5rem;
    line-height: 1.7;
}

.btn-gold {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--clr-gold);
    color: var(--clr-white);
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    padding: 0.9rem 2.25rem;
    border-radius: 50px;
    text-decoration: none;
    transition: all var(--transition-base);
}

.btn-gold:hover {
    background: #b8922e;
    color: var(--clr-white);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(201, 168, 76, 0.4);
}

/* ===========================
       FOOTER
   =========================== */
footer {
    background: linear-gradient(135deg, var(--clr-green-light, #025c56) 0%, var(--clr-green-dark, #012b28) 100%);
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 64px 80px 40px;
    color: rgba(255, 255, 255, 0.7);
}

.footer-top {
    display: grid;
    grid-template-columns: 160px 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
}

.footer-brand {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.footer-socials {
    display: flex;
    gap: 14px;
}

.social-icon {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    font-size: 14px;
    text-decoration: none;
    transition: border-color 0.2s, background 0.2s;
}

.social-icon:hover {
    border-color: var(--yellow);
    background: rgba(250, 175, 64, 0.15);
}

.footer-col h4 {
    font-size: 11px;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.4);
    margin-bottom: 20px;
    font-weight: 600;
}

.footer-col ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-col ul a {
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}

.footer-col ul a:hover {
    color: var(--white);
}

/* Desktop: hide accordion chrome */
.footer-details summary {
    display: none;
    list-style: none;
}

.footer-details summary::-webkit-details-marker {
    display: none;
}

/* ─────────────────────────────
   FOOTER BOTTOM  (Desktop)
───────────────────────────── */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding-top: 28px;
}

.footer-bottom-inner {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: nowrap;
}

/* Badge images */
.footer-reg-badges {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.footer-reg-img {
    height: 80px;
    width: auto;
    object-fit: contain;
    display: block;
}

/* Regulatory text */
.footer-reg-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.footer-reg-text p {
    margin: 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.65;
}

.footer-reg-text strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 700;
}

.footer-reg-text a {
    color: var(--white);
    text-decoration: underline;
    font-weight: 600;
    transition: color 0.2s;
}

.footer-reg-text a:hover {
    color: var(--white);
}

/* Copyright — pushed to the far right */
.copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.35);
    white-space: nowrap;
    margin-left: auto;
}


/* ===========================
   FOOTER — TABLET  (≤ 768px)
   =========================== */
@media (max-width: 768px) {

    footer {
        padding: 48px 20px 32px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 32px;
    }

    /* Brand */
    .footer-brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding-bottom: 32px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-logo-img {
        height: 44px;
        margin-bottom: 0;
    }

    .footer-socials {
        gap: 16px;
    }

    .social-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    /* Always-visible columns — no accordion on mobile/tablet */
    .footer-col {
        border-bottom: none;
        padding-top: 24px;
    }

    /* Non-interactive summary — renders as a plain heading */
    .footer-details summary {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0 0 10px 0;
        cursor: default;
        pointer-events: none;
        color: var(--white);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .footer-details summary h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--white);
    }

    /* Hide chevron — no toggle */
    .footer-chevron {
        display: none;
    }

    .footer-details[open] .footer-chevron {
        display: none;
    }

    /* Always show the list */
    .footer-details-content {
        display: block;
        opacity: 1;
    }

    .footer-details[open] .footer-details-content {
        display: block;
        opacity: 1;
    }

    .footer-details-content>ul {
        overflow: visible;
        padding-bottom: 0;
        gap: 14px;
    }

    .footer-details-content>ul a {
        display: block;
        padding: 6px 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
    }

    .footer-details-content>ul a:hover {
        color: var(--yellow);
    }

    /* ── Footer Bottom — Tablet ── */
    .footer-bottom {
        padding-top: 24px;
    }

    .footer-bottom-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
    }

    /* Badges: side-by-side, centred */
    .footer-reg-badges {
        justify-content: center;
        gap: 16px;
    }

    .footer-reg-img {
        height: 72px;
    }

    /* Text block */
    .footer-reg-text {
        align-items: center;
        gap: 6px;
    }

    .footer-reg-text p {
        font-size: 12px;
        text-align: center;
    }

    /* Copyright — full-width bottom strip with divider */
    .copyright {
        margin-left: 0;
        width: 100%;
        text-align: center;
        font-size: 11px;
        color: rgba(255, 255, 255, 0.3);
        padding-top: 14px;
        border-top: 1px solid rgba(255, 255, 255, 0.07);
    }
}


/* ===========================
   FOOTER — MOBILE  (≤ 480px)
   =========================== */
@media (max-width: 480px) {

    footer {
        padding: 40px 16px 28px;
    }

    .footer-reg-badges {
        gap: 12px;
    }

    .footer-reg-img {
        height: 58px;
    }

    .footer-reg-text p {
        font-size: 12px;
    }

    /* Prevent BSP URL from overflowing */
    .footer-reg-text a {
        word-break: break-all;
    }
}


/* ===========================
   FOOTER — EXTRA SMALL  (≤ 360px)
   =========================== */
@media (max-width: 360px) {

    .footer-reg-img {
        height: 48px;
    }

    .footer-reg-text p {
        font-size: 12px;
    }
}

/* ===========================
       SCROLL REVEAL
    =========================== */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.7s ease, transform 0.7s ease;
    /* Prevent sub-pixel blurring caused by translateY during/after animation */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    will-change: transform, opacity;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0) translateZ(0);
}

.reveal-delay-1 {
    transition-delay: 0.1s;
}

.reveal-delay-2 {
    transition-delay: 0.2s;
}

.reveal-delay-3 {
    transition-delay: 0.3s;
}

.reveal-delay-4 {
    transition-delay: 0.4s;
}

/* ===========================
       RESPONSIVE — TABLET ≤ 1024px
    =========================== */
@media (max-width: 1024px) {
    nav {
        padding: 0 28px;
    }

    .nav-links {
        gap: 24px;
    }

    .nav-links a {
        font-size: 12px;
        letter-spacing: 1px;
    }
}

/* ===========================
       RESPONSIVE — MOBILE ≤ 768px
    =========================== */
@media (max-width: 768px) {
    :root {
        --navbar-height: 60px;
    }

    nav {
        padding: 0 16px;
        height: 60px;
    }

    .logo-img {
        height: 36px;
    }

    .nav-links {
        display: none;
    }

    .nav-right {
        margin-left: auto;
    }

    .nav-search {
        display: none;
    }

    .hamburger {
        display: flex;
    }

    .section-padding {
        padding: 4rem 0;
    }

    .hero-subtext {
        font-size: 22px;
    }

    .stat-divider {
        display: none;
    }

    footer {
        padding: 48px 20px 28px;
    }

    .footer-top {
        grid-template-columns: 1fr;
        gap: 0;
        margin-bottom: 32px;
    }

    /* Brand block */
    .footer-brand {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding-bottom: 32px;
        margin-bottom: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }

    .footer-logo-img {
        height: 44px;
        margin-bottom: 0;
    }

    .footer-socials {
        gap: 16px;
    }

    .social-icon {
        width: 44px;
        height: 44px;
        font-size: 16px;
    }

    /* Always-visible columns — no accordion */
    .footer-col {
        border-bottom: none;
        padding-top: 24px;
    }

    /* Non-interactive summary */
    .footer-details summary {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 100%;
        padding: 0 0 10px 0;
        cursor: default;
        pointer-events: none;
        color: var(--white);
        user-select: none;
        -webkit-tap-highlight-color: transparent;
    }

    .footer-details summary h4 {
        margin: 0;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 2px;
        text-transform: uppercase;
        color: var(--white);
    }

    /* Hide chevron */
    .footer-chevron {
        display: none;
    }

    .footer-details[open] .footer-chevron {
        display: none;
    }

    /* Always show the list */
    .footer-details-content {
        display: block;
        opacity: 1;
    }

    .footer-details[open] .footer-details-content {
        display: block;
        opacity: 1;
    }

    .footer-details-content>ul {
        overflow: visible;
        padding-bottom: 0;
        gap: 14px;
    }

    .footer-details-content>ul a {
        display: block;
        padding: 6px 0;
        font-size: 14px;
        color: rgba(255, 255, 255, 0.75);
    }

    .footer-details-content>ul a:hover {
        color: var(--yellow);
    }

    .footer-bottom {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 20px;
        padding-top: 24px;
    }

    .footer-notice {
        font-size: 11px;
        line-height: 1.65;
        max-width: 100%;
        color: rgba(255, 255, 255, 0.4);
    }

    .footer-badges {
        justify-content: center;
        flex-wrap: wrap;
        gap: 10px;
    }

    .badge-chip {
        padding: 7px 14px;
        font-size: 11px;
        font-weight: 700;
    }

    .copyright {
        font-size: 11px;
        color: rgba(255, 255, 255, 0.35);
    }
}

/* AFTER */
@media (max-width: 576px) {
    .hero-heading {
        font-size: 2.5rem;
    }

    .hero-cta-group {
        flex-direction: column;
        align-items: center;
        width: 100%;
    }

    .btn-hero-primary,
    .btn-hero-outline {
        width: 100%;
        justify-content: center;
    }
}

@media (max-width: 420px) {
    nav {
        padding: 0 14px;
        height: 56px;
    }

    .logo-img {
        height: 30px;
    }

    footer {
        padding: 40px 16px 24px;
    }
}

.collage-imgs {
    border-radius: 15px;
}

.our-impact p {
    margin-bottom: 5px !important;
}

/* ===========================
           MISSION HERO BANNER
        =========================== */
.mission-hero-banner {
    width: 100%;
    height: auto;
    /* lets the 1920x373 image dictate its own height — no forced crop */
    position: relative;
    overflow: hidden;
    line-height: 0;
    /* removes phantom gap under inline img */
}

.mission-hero-banner img {
    width: 100%;
    height: auto;
    /* preserves the natural 1920×373 aspect ratio */
    object-fit: unset;
    /* no zooming or cropping */
    display: block;
}

.mission-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(1, 64, 60, 0.35) 0%,
            rgba(1, 64, 60, 0.55) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0 1.5rem;
}

.mission-hero-text h1 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.1;
    margin-bottom: 0.75rem;
}

.mission-hero-text p {
    font-size: clamp(0.95rem, 2vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.7;
}

/* ===========================
           STORY CONTENT 
        =========================== */
.story-content-section {
    background: var(--clr-white);
    padding: 3rem 0;
}

.story-title-service {
    font-size: clamp(2rem, 3.5vw, 3rem);
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.story-bg-title-video {
    font-size: 22px;
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.story-bg-title-text {
    font-size: 30px !important;
    font-weight: 700;
    color: var(--clr-gold) !important;
    line-height: 1.15;
    margin-bottom: 1.25rem;
}

.story-text-side p,
.story-text-side b,
.story-text-side i {
    font-size: var(--standard-desc);
    color: var(--clr-text-muted);
    line-height: var(--standard-spacing);
    margin-bottom: 1.5rem;
    text-align: justify
}

.story-card {
    background: var(--clr-white);
    border-radius: 16px;
    padding: 0;
    height: 100%;
    border: 1px solid rgba(0, 0, 0, 0.06);
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.story-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 100%;
    background: var(--clr-green-primary);
    transform: scaleY(0);
    transform-origin: bottom;
    transition: transform var(--transition-base);
    z-index: 1;
}

.story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 48px rgba(26, 107, 60, 0.18);
}

.story-card:hover::before {
    transform: scaleY(1);
}

/* Image wrapper — matches actual image ratio 700×500 */
.story-card .card-img-wrap {
    width: 100%;
    aspect-ratio: 700 / 500;
    overflow: hidden;
    flex-shrink: 0;
}

.story-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Body gets the padding instead of the card */
.story-card .card-body {
    padding: 1.75rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.story-card-icon {
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--clr-white);
    margin-bottom: 1.25rem;
}

.story-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--clr-green-primary);
}

.story-card-caption {
    font-size: 1rem;
    font-weight: 600;
    color: var(--clr-text-muted);
    line-height: 1.65;
}

.story-card-text {
    font-size: 0.9rem;
    color: var(--clr-text-muted);
    line-height: 1.65;
}

.story-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-green-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-top: auto;
    padding-top: 1.25rem;
    transition: gap var(--transition-base), color var(--transition-base);
}

.story-card-link:hover {
    gap: 0.6rem;
    color: var(--clr-green-light);
}

.link-card-title {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 700;
    margin-bottom: 0.6rem;
    color: var(--clr-green-primary);
}

.link-card-direction {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--clr-green-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-decoration: none;
    margin-top: auto;
    padding-top: 1.25rem;
    transition: gap var(--transition-base), color var(--transition-base);
}

.link-card-direction:hover {
    gap: 0.6rem;
    color: var(--clr-green-light);
}

/* ===========================
           MISSION CONTENT — VIDEO LEFT / TEXT RIGHT
        =========================== */
.mission-content-section {
    background: transparent;
    padding: calc(var(--navbar-height) + 2.5rem) 0 5rem 0;
}

/* Mobile: override the padding since CSS vars don't update in media queries */
@media (max-width: 768px) {
    .mission-content-section {
        padding: 96px 0 3rem 0;
        /* 60px nav + 36px spacing */
    }
}

@media (max-width: 420px) {
    .mission-content-section {
        padding: 88px 0 2.5rem 0;
        /* 56px nav + 32px spacing */
    }
}

.mission-video-wrap {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    background: #000;
    aspect-ratio: 16/9;
    max-width: 640px;
    width: 100%;
    margin: 0 auto;
    box-shadow: 0 20px 60px rgba(1, 64, 60, 0.18);
}

.mission-video-wrap video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mission-text-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 2rem;
}

.mission-text-side p {
    font-size: 20px;
    color: var(--clr-green-dark);
    line-height: 1.85;
    margin-bottom: 1.25rem;
    text-align: justify;
    /* Sharper font rendering on gradient backgrounds */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.mission-text-side b {
    color: var(--clr-green-dark);
    font-size: 1rem;
    font-weight: 700;
    display: block;
    margin-bottom: 0.3rem;
    margin-top: 0.75rem;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.mission-text-side .section-label {
    color: var(--clr-green-primary);
}

.mission-text-side h2 {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--clr-green-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}



.mission-pillars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 0.5rem;
}

.mission-pillar-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(1, 64, 60, 0.08);
    color: var(--clr-green-primary);
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    padding: 0.45rem 1rem;
    border-radius: 50px;
    border: 1px solid rgba(1, 64, 60, 0.15);
}

/* ===========================
           MISSION RESPONSIVE
        =========================== */
@media (max-width: 991px) {
    .mission-text-side {
        padding-left: 0;
        padding-top: 2rem;
    }

    .mission-video-wrap {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    /* .mission-hero-banner height and img object-fit
       no longer needed here — the base styles already use
       height: auto and object-fit: unset for all viewports */

    .mission-text-side {
        padding-left: 0;
        padding-top: 1.75rem;
    }

    .mission-video-wrap {
        max-width: 100%;
    }

    /* Story section mobile: video stacks below text */
    .bg-pro-gradient .col-12.col-lg-5 {
        order: -1;
        /* Show video ABOVE text on mobile */
    }

    .story-bg-title-text {
        font-size: 22px !important;
        text-align: center;
    }

    .story-bg-title-video {
        font-size: 18px;
        text-align: center;
    }

    .mission-text-side p {
        text-align: left;
        /* justify can look bad on narrow screens */
        font-size: 0.95rem;
    }
}

@media (max-width: 480px) {
    /* .mission-hero-banner and img overrides removed —
       base styles handle responsive behaviour for all breakpoints */

    .mission-hero-text h1 {
        font-size: 1.6rem;
    }

    /* Story section on small phones */
    .bg-pro-gradient .mission-content-section .container-xl {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .story-bg-title-text {
        font-size: 20px !important;
    }

    .story-bg-title-video {
        font-size: 16px;
        margin-top: 1.5rem;
    }
}

/* ===========================
           GOVERNANCE LINK PANELS
        =========================== */
.link-panel {
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(1, 64, 60, 0.12);
    box-shadow: 0 2px 16px rgba(1, 64, 60, 0.06);
    transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.link-panel:hover {
    box-shadow: 0 8px 40px rgba(1, 64, 60, 0.13);
    transform: translateY(-2px);
}

/* Header */
.link-panel-header {
    background: linear-gradient(135deg, var(--clr-green-primary) 0%, var(--clr-green-light) 100%);
    padding: 1.25rem 1.75rem;
}

.link-panel-header--alt {
    background: linear-gradient(135deg, var(--clr-green-dark) 0%, var(--clr-green-primary) 100%);
}

.link-panel-header-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.link-panel-icon {
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-white);
    font-size: 1.2rem;
    flex-shrink: 0;
}

.link-panel-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--clr-white);
    margin: 0 0 2px;
    letter-spacing: 0.02em;
}

.link-panel-subtitle {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    letter-spacing: 0.01em;
}

/* Body */
.link-panel-body {
    background: var(--clr-white);
}

/* Column dividers on desktop */
.link-panel-col {
    border-right: 1px solid rgba(1, 64, 60, 0.07);
}

.link-panel-col-last {
    border-right: none;
}

/* Individual link items */
.link-item {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.9rem 1.4rem;
    text-decoration: none;
    color: var(--clr-text-dark);
    font-size: 0.875rem;
    font-weight: 500;
    border-bottom: 1px solid rgba(1, 64, 60, 0.05);
    transition: background 0.25s ease, color 0.25s ease, padding-left 0.25s ease;
    line-height: 1.4;
}

.link-item:last-child {
    border-bottom: none;
}

.link-item:hover {
    background: rgba(1, 64, 60, 0.04);
    color: var(--clr-green-primary);
    padding-left: 1.65rem;
}

.link-item-icon {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: rgba(1, 64, 60, 0.07);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-green-primary);
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: background 0.25s ease;
}

.link-item:hover .link-item-icon {
    background: rgba(1, 64, 60, 0.13);
}

.link-item-text {
    flex: 1;
    line-height: 1.45;
}

.link-item-arrow {
    font-size: 0.78rem;
    color: var(--clr-green-primary);
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    flex-shrink: 0;
}

.link-item:hover .link-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* OUR STORY left column vertical centering */
.story-content-section .story-title-service {
    position: relative;
}

.story-content-section .story-title-service::after {
    content: '';
    display: block;
    width: 48px;
    height: 3px;
    background: var(--clr-gold);
    border-radius: 2px;
    margin-top: 0.75rem;
}

@media (min-width: 992px) {
    .story-content-section .story-title-service::after {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 575px) {
    .story-content-section {
        padding: 3rem 0;
    }

    .story-title-service {
        font-size: clamp(1.6rem, 8vw, 2.2rem);
        margin-bottom: 1rem;
    }

    .story-text-side p,
    .story-text-side b,
    .story-text-side i {
        font-size: 19px;
        line-height: 1.5;
        text-align: justify;
        margin-bottom: 1rem;
    }
}

/* ===========================
           LINK PANEL RESPONSIVE
        =========================== */
@media (max-width: 767px) {
    .link-panel-col {
        border-right: none;
        border-bottom: 1px solid rgba(1, 64, 60, 0.07);
    }

    .link-panel-col:last-child {
        border-bottom: none;
    }

    .link-panel-header {
        padding: 1rem 1.25rem;
    }

    .link-panel-icon {
        width: 38px;
        height: 38px;
        font-size: 1rem;
    }

    .link-panel-title {
        font-size: 0.95rem;
    }

    .link-item {
        padding: 0.85rem 1.25rem;
        font-size: 0.85rem;
    }

    .link-item:hover {
        padding-left: 1.5rem;
    }

    .link-item-icon {
        width: 30px;
        height: 30px;
        font-size: 0.82rem;
    }
}

@media (max-width: 480px) {
    .link-item {
        padding: 0.8rem 1rem;
        gap: 0.7rem;
    }

    .link-item:hover {
        padding-left: 1.25rem;
    }
}

/* ============================================================
   PRO GRADIENT BACKGROUND — clean, eye-friendly version
   ============================================================ */

.bg-pro-gradient {
    position: relative;
    min-height: 100vh;
    width: 100%;
    overflow: hidden;
    /* Solid green navbar strip on top, then a smooth, uniform light gradient below.
               Keeping colours close in brightness eliminates the "hot spot" eye strain. */
    background:
        linear-gradient(to bottom,
            #01403c 0px,
            #01403c var(--navbar-height),
            transparent calc(var(--navbar-height) + 1px)),
        linear-gradient(160deg,
            #e8f3ee 0%,
            #eef5f0 40%,
            #f4f7ef 70%,
            #faf8f2 100%);
}

/* Single, very soft warm accent in the bottom-left corner — low opacity so it
           never fights with text. No competing hot spots. */
.bg-pro-gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 55% at -5% 110%,
            rgba(251, 176, 64, .13) 0%,
            transparent 65%),
        radial-gradient(ellipse 50% 40% at 105% 0%,
            rgba(1, 92, 86, .08) 0%,
            transparent 60%);
}

.bg-pro-gradient::after {
    content: none;
    /* removed — was the source of the clashing hot spots */
}


/* ============================================================
   MODAL TRIGGER BUTTON  (.btn-open-modal)
   ============================================================ */

.btn-open-modal {
    font-family: var(--font-body);
    font-size: .85rem;
    font-weight: 500;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--clr-white);
    background: linear-gradient(135deg, #d4882a 0%, var(--clr-gold) 100%);
    border: none;
    border-radius: 999px;
    padding: .75rem 2rem;
    box-shadow: 0 4px 20px rgba(212, 136, 42, .35), 0 1px 3px rgba(0, 0, 0, .12);
    cursor: pointer;
    transition: transform .2s ease, box-shadow .2s ease;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
}

.btn-open-modal:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(212, 136, 42, .40), 0 2px 6px rgba(0, 0, 0, .14);
    color: var(--clr-white);
}

.btn-open-modal:active {
    transform: translateY(0);
}


/* ============================================================
   BOOTSTRAP MODAL BACKDROP OVERRIDE
   ============================================================ */

.modal-backdrop.show {
    opacity: .55;
    backdrop-filter: blur(3px);
}


/* ============================================================
   MODAL CONTENT — gradient shell
   ============================================================ */

.modal-dialog {
    max-width: 520px;
}

.modal-content {
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow:
        0 32px 72px rgba(1, 64, 60, .18),
        0 8px 20px rgba(1, 64, 60, .10),
        0 0 0 .5px rgba(1, 64, 60, .12);

    /* gradient base */
    position: relative;
    background:
        linear-gradient(150deg,
            #f8f4ee 0%,
            #edf3eb 38%,
            #e4ede7 70%,
            #dce8e1 100%);
}

/* warm gold glow — bottom-left of modal */
.modal-content::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 100% 80% at -10% 115%,
            rgba(251, 176, 64, .28) 0%,
            rgba(251, 176, 64, .10) 40%,
            transparent 65%),
        radial-gradient(ellipse 50% 45% at 4% 96%,
            rgba(218, 154, 50, .18) 0%,
            transparent 50%);
}

/* sage green fade — top-right of modal */
.modal-content::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 75% 65% at 108% -5%,
            rgba(1, 92, 86, .22) 0%,
            rgba(1, 64, 60, .08) 45%,
            transparent 68%),
        radial-gradient(ellipse 35% 30% at 50% 50%,
            rgba(255, 253, 248, .24) 0%,
            transparent 80%);
}

/* stack all modal sections above pseudo-elements */
.modal-header,
.modal-body,
.modal-footer {
    position: relative;
    z-index: 1;
}


/* ============================================================
   MODAL HEADER
   ============================================================ */

.modal-header {
    padding: 1.6rem 1.75rem 1.1rem;
    border-bottom: .5px solid rgba(1, 64, 60, .13);
    align-items: flex-start;
}

.modal-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #d4882a;
    background: rgba(251, 176, 64, .12);
    border: .5px solid rgba(251, 176, 64, .30);
    border-radius: 999px;
    padding: 4px 12px;
    margin-bottom: .55rem;
}

.modal-eyebrow i {
    font-size: 11px;
}

.modal-title-main {
    font-family: var(--font-display);
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--clr-text-dark);
    line-height: 1.25;
    letter-spacing: -.015em;
}

.modal-subtitle {
    font-size: .82rem;
    color: var(--clr-text-muted);
    margin-top: .3rem;
    line-height: 1.55;
}

.btn-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: .5px solid rgba(1, 64, 60, .13);
    background: rgba(255, 255, 255, .55);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    margin-left: auto;
    transition: background .18s ease;
    color: var(--clr-text-muted);
    font-size: 14px;
    margin-top: 2px;
}

.btn-modal-close:hover {
    background: rgba(255, 255, 255, .85);
    color: var(--clr-text-dark);
}


/* ============================================================
   MODAL BODY
   ============================================================ */

.modal-body {
    padding: 1.5rem 1.75rem;
}

.modal-body .form-label {
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    color: var(--clr-text-muted);
    text-transform: uppercase;
    margin-bottom: .4rem;
}

.modal-body .form-control,
.modal-body .form-select {
    font-family: var(--font-body);
    font-size: .88rem;
    color: var(--clr-text-dark);
    background: rgba(255, 255, 255, .60);
    border: .5px solid rgba(1, 64, 60, .18);
    border-radius: 10px;
    padding: .65rem 1rem;
    transition: border-color .18s ease, background .18s ease, box-shadow .18s ease;
}

.modal-body .form-control:focus,
.modal-body .form-select:focus {
    background: rgba(255, 255, 255, .82);
    border-color: var(--clr-gold);
    box-shadow: 0 0 0 3px rgba(251, 176, 64, .18);
    outline: none;
}

.modal-body .form-control::placeholder {
    color: rgba(77, 94, 92, .45);
}

/* stat strip — 3-column summary row inside modal body */
.modal-stat-strip {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 1.25rem;
}

.modal-stat-card {
    background: rgba(255, 255, 255, .45);
    border: .5px solid rgba(1, 64, 60, .13);
    border-radius: 12px;
    padding: .75rem .9rem;
    text-align: center;
}

.modal-stat-val {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--clr-text-dark);
    line-height: 1;
}

.modal-stat-lbl {
    font-size: .72rem;
    color: var(--clr-text-muted);
    margin-top: 4px;
    letter-spacing: .03em;
}

.modal-stat-card--gold .modal-stat-val {
    color: #d4882a;
}

.modal-stat-card--green .modal-stat-val {
    color: var(--clr-green-primary);
}

.modal-divider {
    border: none;
    border-top: .5px solid rgba(1, 64, 60, .13);
    margin: 1.2rem 0;
}


/* ============================================================
   MODAL FOOTER
   ============================================================ */

.modal-footer {
    padding: 1rem 1.75rem 1.5rem;
    border-top: .5px solid rgba(1, 64, 60, .13);
    gap: 10px;
}

.btn-modal-cancel {
    font-family: var(--font-body);
    font-size: .84rem;
    font-weight: 500;
    color: var(--clr-text-muted);
    background: rgba(255, 255, 255, .50);
    border: .5px solid rgba(1, 64, 60, .13);
    border-radius: 999px;
    padding: .6rem 1.4rem;
    cursor: pointer;
    transition: background .18s ease, color .18s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.btn-modal-cancel:hover {
    background: rgba(255, 255, 255, .80);
    color: var(--clr-text-dark);
}

.btn-modal-confirm {
    font-family: var(--font-body);
    font-size: .84rem;
    font-weight: 600;
    color: var(--clr-white);
    background: linear-gradient(135deg, #d4882a 0%, var(--clr-gold) 100%);
    border: none;
    border-radius: 999px;
    padding: .6rem 1.6rem;
    box-shadow: 0 3px 14px rgba(212, 136, 42, .32);
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-modal-confirm:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(212, 136, 42, .38);
    color: var(--clr-white);
}

.btn-modal-confirm i {
    font-size: 13px;
}

.modal-footer-note {
    font-size: .72rem;
    color: var(--clr-text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin-top: 4px;
}

.modal-footer-note i {
    color: var(--clr-green-light);
    font-size: 12px;
}


/* ============================================================
   RESPONSIVE — stack footer buttons on mobile
   ============================================================ */

@media (max-width: 480px) {
    .modal-dialog {
        margin: 1rem;
    }

    .modal-header {
        padding: 1.25rem 1.25rem .9rem;
    }

    .modal-body {
        padding: 1.25rem;
    }

    .modal-footer {
        padding: .9rem 1.25rem 1.25rem;
        flex-direction: column;
        align-items: stretch;
    }

    .btn-modal-cancel,
    .btn-modal-confirm {
        width: 100%;
        justify-content: center;
    }

    .modal-stat-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .modal-title-main {
        font-size: 1.25rem;
    }
}

/* =============================================================
   BOD PROFILE PAGE — bod-profile.css
   Copy-paste this into your main style.css
   ============================================================= */

/* ===========================
   BREADCRUMB BANNER
=========================== */
.profile-banner {
    width: 100%;
    height: var(--navbar-height);
    background: linear-gradient(135deg, rgba(1, 64, 60, 1) 37%, rgba(250, 175, 64, 1) 87%);
    position: relative;
    overflow: hidden;
}

.profile-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(circle at 70% 50%, rgba(251, 176, 64, 0.12) 0%, transparent 60%),
        radial-gradient(circle at 10% 80%, rgba(51, 234, 211, 0.08) 0%, transparent 50%);
}

.profile-banner::after {
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 45%;
    background: repeating-linear-gradient(-45deg,
            transparent,
            transparent 40px,
            rgba(255, 255, 255, 0.025) 40px,
            rgba(255, 255, 255, 0.025) 41px);
}



/* ===========================
   MAIN PROFILE LAYOUT
=========================== */
.profile-section {
    background: var(--clr-white);
    padding: 80px 0 100px;
}

.profile-grid {
    display: grid;
    grid-template-columns: 400px 1fr;
    gap: 72px;
    align-items: start;
}

/* ===========================
   LEFT COLUMN — PHOTO
=========================== */
.profile-photo-col {
    position: sticky;
    top: calc(var(--navbar-height) + 32px);
}

.profile-photo-frame {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 683 / 900;
    background: var(--clr-green-primary);
    box-shadow:
        0 32px 80px rgba(1, 64, 60, 0.22),
        0 8px 20px rgba(0, 0, 0, 0.12);
}

.profile-photo-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.profile-quote-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2.5rem 2rem 2rem;
    background: linear-gradient(to top,
            rgba(1, 30, 28, 0.92) 0%,
            rgba(1, 64, 60, 0.55) 55%,
            transparent 100%);
}

.quote-mark {
    font-family: var(--font-display);
    font-size: 4rem;
    color: var(--clr-gold);
    line-height: 0.5;
    margin-bottom: 0.6rem;
    opacity: 0.8;
}

.quote-text {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.92);
    line-height: 1.65;
    font-weight: 500;
    text-align: center;
}

/* Meta chips below photo */
.profile-meta-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 20px;
}

.meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 30px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
    background: rgba(1, 64, 60, 0.07);
    color: var(--clr-green-primary);
    border: 1px solid rgba(1, 64, 60, 0.14);
}

.meta-chip i {
    font-size: 12px;
    color: var(--clr-gold);
}

/* Social row */
.profile-social-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 18px;
}

.social-label {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
}

.social-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 16px;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.25s ease;
}

.social-btn.linkedin {
    background: #0A66C2;
    color: #fff;
}

.social-btn.linkedin:hover {
    background: #084b94;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(10, 102, 194, 0.35);
    color: #fff;
}

/* Back button */
.back-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    text-decoration: none;
    margin-top: 20px;
    transition: color 0.2s, gap 0.2s;
}

.back-btn i {
    font-size: 14px;
    transition: transform 0.2s;
}

.back-btn:hover {
    color: var(--clr-green-primary);
}

.back-btn:hover i {
    transform: translateX(-3px);
}

/* ===========================
   RIGHT COLUMN — DETAILS
=========================== */
.profile-info-col {
    padding-top: 4px;
}

.profile-role-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: var(--standard-desc);
    font-weight: 700;
    letter-spacing: 3.5px;
    color: var(--clr-gold);
    margin-bottom: 14px;
}

.profile-role-badge::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--clr-gold);
    border-radius: 2px;
}

.profile-name {
    font-family: var(--font-display);
    font-size: 40px;
    font-weight: 700;
    color: var(--clr-text-dark);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.profile-divider {
    width: 80px;
    height: 3px;
    background: linear-gradient(to right, var(--clr-green-primary), var(--clr-gold));
    border-radius: 3px;
    margin-bottom: 28px;
}

.profile-bio p {
    font-size: var(--standard-desc);
    text-align: justify;
    color: var(--clr-text-muted);
    line-height: var(--standard-spacing);
    margin-bottom: 1rem;
}

.profile-bio p:last-child {
    margin-bottom: 0;
}

.profile-bio i {
    font-size: var(--standard-desc);
    text-align: justify;
    color: var(--clr-text-muted);
    line-height: var(--standard-spacing);
    margin-bottom: 1rem;
}

.profile-bio i:last-child {
    margin-bottom: 0;
}

.profile-bio span {
    font-size: var(--standard-desc);
    font-style: italic;
    text-align: justify;
    color: var(--clr-text-muted);
    line-height: var(--standard-spacing);
    margin-bottom: 1rem;
    font-weight: 600;
}

.profile-bio span:last-child {
    margin-bottom: 0;
}

/* Section blocks: Accreditations / Education */
.profile-block {
    margin-top: 44px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
}

.profile-block-label {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-green-primary);
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile-block-label::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(1, 64, 60, 0.12);
}

/* Credential grid */
.credential-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 24px;
}

.credential-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 18px;
    color: var(--clr-text-dark);
    line-height: 1.5;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(1, 64, 60, 0.035);
    border: 1px solid rgba(1, 64, 60, 0.07);
    transition: background 0.2s, border-color 0.2s;
}

.credential-item:hover {
    background: rgba(1, 64, 60, 0.07);
    border-color: rgba(1, 64, 60, 0.15);
}

.credential-item i {
    font-size: 18px;
    color: var(--clr-gold);
    flex-shrink: 0;
    margin-top: 2px;
}

/* Education list */
.education-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.education-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 12px;
    background: rgba(1, 64, 60, 0.035);
    border: 1px solid rgba(1, 64, 60, 0.07);
    transition: background 0.2s, border-color 0.2s;
}

.education-item:hover {
    background: rgba(1, 64, 60, 0.07);
    border-color: rgba(1, 64, 60, 0.15);
}

.edu-icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #fff;
    font-size: 14px;
}

.edu-text {
    flex: 1;
}

.edu-degree {
    font-size: 18px;
    font-weight: 600;
    color: var(--clr-text-dark);
    line-height: 1.4;
}

.edu-school {
    font-size: 16px;
    color: var(--clr-text-muted);
    margin-top: 2px;
}

/* ===========================
   RELATED MEMBERS STRIP
=========================== */
.related-section {
    background: var(--clr-off-white);
    padding: 72px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

.related-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.related-label::before {
    content: '';
    display: block;
    width: 28px;
    height: 2px;
    background: var(--clr-gold);
    border-radius: 2px;
}

.related-heading {
    font-family: var(--font-display);
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--clr-text-dark);
    margin-bottom: 36px;
    letter-spacing: -0.02em;
}

.related-card-link {
    display: block;
    text-decoration: none;
    border-radius: 16px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    box-shadow: 0 4px 18px rgba(1, 64, 60, 0.10);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s;
}

.related-card-link:hover {
    transform: translateY(-6px) scale(1.012);
    box-shadow: 0 18px 44px rgba(1, 64, 60, 0.18);
}

.related-card {
    position: relative;
    width: 100%;
    aspect-ratio: 683 / 820;
    overflow: hidden;
    border-radius: 16px;
    background: var(--clr-green-dark);
}

.related-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card-link:hover .related-card img {
    transform: scale(1.05);
}

.related-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top,
            rgba(1, 30, 28, 0.82) 0%,
            rgba(1, 64, 60, 0.35) 45%,
            transparent 100%);
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 1.4rem 1.4rem 1.25rem;
    transition: background 0.35s ease;
}

.related-card-link:hover .related-card-overlay {
    background: linear-gradient(to top,
            rgba(1, 20, 18, 0.92) 0%,
            rgba(1, 64, 60, 0.55) 50%,
            transparent 100%);
}

.related-card-name {
    font-family: var(--font-body);
    font-size: 0.92rem;
    font-weight: 700;
    color: #fff;
    line-height: 1.3;
}

.related-card-role {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--clr-gold);
    margin-top: 3px;
    opacity: 0;
    transform: translateY(5px);
    transition: opacity 0.28s ease 0.05s, transform 0.28s ease 0.05s;
}

.related-card-link:hover .related-card-role {
    opacity: 1;
    transform: translateY(0);
}

.related-card-arrow {
    position: absolute;
    top: 0.9rem;
    right: 0.9rem;
    width: 32px;
    height: 32px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.8rem;
    opacity: 0;
    transform: scale(0.7) rotate(-45deg);
    transition: opacity 0.28s ease, transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.related-card-link:hover .related-card-arrow {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* ===========================
   BOD PROFILE — RESPONSIVE
=========================== */

/* Large tablet */
@media (max-width: 1100px) {
    .profile-grid {
        grid-template-columns: 320px 1fr;
        gap: 48px;
    }
}

/* Tablet portrait */
@media (max-width: 900px) {
    .profile-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .profile-photo-col {
        position: relative;
        top: auto;
        max-width: 420px;
        margin: 0 auto;
    }

    /* Unstick the photo on smaller screens */
    .profile-photo-col {
        position: static;
    }

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

    .profile-section {
        padding: 48px 0 72px;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .profile-section {
        padding: 36px 0 60px;
    }

    .profile-grid {
        gap: 32px;
    }

    .profile-photo-col {
        max-width: 100%;
    }

    .profile-name {
        font-size: 1.8rem;
    }

    .profile-block {
        margin-top: 32px;
        padding-top: 28px;
    }

    .related-section {
        padding: 48px 0;
    }

    .related-heading {
        font-size: 1.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {

    .credential-grid {
        gap: 8px;
    }

    .credential-item {
        font-size: 18px;
    }

    .education-item {
        padding: 12px 14px;
    }

    .profile-meta-chips {
        gap: 6px;
    }

    .meta-chip {
        font-size: 10px;
        padding: 5px 10px;
    }

    .profile-social-row {
        flex-wrap: wrap;
    }
}

/* ===========================
   BRANCH CARDS — CLICKABLE
=========================== */

.branch-card {
    cursor: pointer;
}

/* Image wrap needs relative for the subtle hover tint */
.service-card .card-img-wrap {
    position: relative;
}

/* Subtle image tint on hover (no button — whole card is clickable) */
.branch-card .card-img-wrap::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(1, 40, 38, 0.28);
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.branch-card:hover .card-img-wrap::after {
    opacity: 1;
}

/* Equal-height card text: clamp to 3 lines so all card bodies match */
.branch-card .service-card-text {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* stylelint-disable-next-line property-no-vendor-prefix */
    -webkit-box-orient: vertical;
    line-clamp: 3;
    overflow: hidden;
    flex-shrink: 0;
}

/* Branch count badge inside card body */
.branch-count-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--clr-green-primary);
    letter-spacing: 0.04em;
}

.branch-count-badge i {
    color: var(--clr-gold);
    font-size: 0.82rem;
}


/* ===========================
   BRANCH MODAL
=========================== */

/* Dialog sizing */
.branch-modal-dialog {
    max-width: 640px;
}

/* Modal content panel */
.branch-modal-content {
    background: #fff;
    border: none;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(1, 40, 38, 0.22);
}

/* Header */
.branch-modal-header {
    background: linear-gradient(135deg, var(--clr-green-dark, #012b28) 0%, var(--clr-green-primary, #01403c) 100%);
    border-bottom: 3px solid var(--clr-gold, #FBB040);
    padding: 1.75rem 2rem;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.branch-modal-header-inner {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.branch-modal-eyebrow {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--clr-gold, #FBB040);
    display: flex;
    align-items: center;
    gap: 6px;
}

.branch-modal-title {
    font-family: 'Poppins', sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}

/* Close button */
.branch-modal-close {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: #ffffff;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    margin-top: 2px;
}

.branch-modal-close:hover {
    background: rgba(251, 176, 64, 0.2);
    border-color: var(--clr-gold, #FBB040);
    color: var(--clr-gold, #FBB040);
}

/* Body */
.branch-modal-body {
    padding: 1.5rem 2rem 1rem;
    max-height: 60vh;
    overflow-y: auto;
    background: #fff;
}

/* Custom scrollbar */
.branch-modal-body::-webkit-scrollbar {
    width: 5px;
}

.branch-modal-body::-webkit-scrollbar-track {
    background: rgba(1, 64, 60, 0.05);
    border-radius: 10px;
}

.branch-modal-body::-webkit-scrollbar-thumb {
    background: rgba(1, 64, 60, 0.2);
    border-radius: 10px;
}

.branch-modal-body::-webkit-scrollbar-thumb:hover {
    background: rgba(1, 64, 60, 0.35);
}

/* Subtitle hint */
.branch-modal-subtitle {
    font-size: 18px;
    color: var(--clr-text-muted, #4d5e5c);
    margin-bottom: 1.25rem;
    display: flex;
    align-items: center;
    gap: 5px;
}

.branch-modal-subtitle i {
    color: var(--clr-green-primary, #01403c);
}

/* Branch list */
.branch-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Single branch item — acts as a link to Google Maps */
.branch-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(1, 64, 60, 0.09);
    background: #fff;
    text-decoration: none;
    color: inherit;
    transition: background 0.22s, border-color 0.22s, box-shadow 0.22s;
    position: relative;
}

.branch-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-radius: 3px 0 0 3px;
    background: var(--clr-green-primary, #01403c);
    opacity: 0;
    transition: opacity 0.22s;
}

.branch-item:hover {
    background: rgba(1, 64, 60, 0.04);
    border-color: rgba(1, 64, 60, 0.22);
    box-shadow: 0 4px 16px rgba(1, 64, 60, 0.08);
    color: inherit;
    text-decoration: none;
}

.branch-item:hover::before {
    opacity: 1;
}

/* Index number */
.branch-item-index {
    font-size: 0.68rem;
    font-weight: 800;
    color: var(--clr-text-muted, #4d5e5c);
    background: rgba(1, 64, 60, 0.07);
    border-radius: 8px;
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0.02em;
    transition: background 0.22s, color 0.22s;
}

.branch-item:hover .branch-item-index {
    background: rgba(1, 64, 60, 0.12);
    color: var(--clr-green-primary, #01403c);
}

/* Text body */
.branch-item-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.branch-item-name {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--clr-text-dark, #1a1a1a);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.22s;
}

.branch-item:hover .branch-item-name {
    color: var(--clr-green-primary, #01403c);
}

/* Special styling for Head Office */
.branch-item:first-child {
    background: rgba(1, 64, 60, 0.03);
    border-color: rgba(1, 64, 60, 0.14);
}

.branch-item:first-child .branch-item-name {
    color: var(--clr-green-primary, #01403c);
}

.branch-item:first-child .branch-item-index {
    background: linear-gradient(135deg, var(--clr-green-primary, #01403c), var(--clr-green-light, #025c56));
    color: #fff;
}

/* Maps badge that appears on hover */
.branch-item-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 1px;
}

.branch-item-address {
    font-size: 0.73rem;
    color: var(--clr-text-muted, #4d5e5c);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: flex;
    align-items: center;
    gap: 4px;
}

.branch-item-address i {
    font-size: 0.68rem;
    color: var(--clr-green-primary, #01403c);
    flex-shrink: 0;
    opacity: 0.6;
}

/* Arrow icon */
.branch-item-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.22s, transform 0.22s;
    transform: translateX(-4px);
}

.branch-item:hover .branch-item-arrow {
    opacity: 1;
    transform: translateX(0);
}

.branch-item-arrow i {
    color: var(--clr-green-primary, #01403c);
    font-size: 0.8rem;
}

.branch-item-maps-label {
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--clr-green-primary, #01403c);
    white-space: nowrap;
}

/* Footer */
.branch-modal-footer {
    background: rgba(1, 64, 60, 0.04);
    border-top: 1px solid rgba(1, 64, 60, 0.09);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.branch-modal-total {
    font-size: 15px;
    font-weight: 600;
    color: var(--clr-text-muted, #4d5e5c);
    display: flex;
    align-items: center;
    gap: 5px;
}

.branch-modal-total i {
    color: var(--clr-gold, #FBB040);
}

.branch-modal-btn-close {
    background: var(--clr-green-primary, #01403c);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 22px;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    transition: background 0.2s;
}

.branch-modal-btn-close:hover {
    background: var(--clr-green-dark, #012b28);
    color: #fff;
}


/* ===========================
   BRANCH MODAL RESPONSIVE
=========================== */
@media (max-width: 576px) {
    .branch-modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    .branch-modal-header,
    .branch-modal-body,
    .branch-modal-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .branch-modal-title {
        font-size: 1.35rem;
    }

    .branch-item-address {
        white-space: normal;
    }

    .branch-modal-footer {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }

    .branch-modal-btn-close {
        width: 100%;
        text-align: center;
    }
}

/* ===========================
   LOAN PAGE CARDS (loans.php)
   Uses .loan-service-card alongside .service-card
   so other pages are NOT affected.
=========================== */

/* Square image wrap — matches 512×512 px source images */
.loan-service-card .card-img-wrap {
    aspect-ratio: 1 / 1;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--clr-off-white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.25rem;
}

/* Contain so the full icon/illustration is always visible */
.loan-service-card .card-img-top {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
    transition: transform var(--transition-base);
}

.loan-service-card:hover .card-img-top {
    transform: scale(1.06);
}

/* Tighter body padding — cards were too tall/skinny */
.loan-service-card .card-body {
    padding: 1rem 1.25rem 1.25rem;
}

/* Slightly smaller title so it fits compactly */
.loan-service-card .service-card-title {
    font-size: 1.1rem;
    margin-bottom: 0.4rem;
}

/* Tighten description text */
.loan-service-card .service-card-text {
    font-size: 0.85rem;
    line-height: 1.55;
}

/* Keep learn-more link snug */
.loan-service-card .service-card-link {
    padding-top: 0.85rem;
}

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


/* ==============================================
   FLUID LARGE-SCREEN — Container & Layout fixes
   Handles zoomed-out viewports (≥ 1400px) where
   Bootstrap's fixed container-xl (1320px) leaves
   content floating in too much empty space.
   All typography is already fluid via clamp() above.
   ============================================== */

/* Override Bootstrap container max-width to grow with viewport */
@media (min-width: 1400px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: min(90vw, 1600px);
    }

    /* Hero: allow col-lg-7 to expand a bit more */
    .hero-content .col-lg-7 {
        flex: 0 0 auto;
        width: 62%;
    }

    /* Service card link scales with viewport */
    .service-card-link {
        font-size: 15px;
    }

    /* collage image in Our Impact */
    .collage-imgs {
        width: 100%;
        object-fit: cover;
        max-height: clamp(420px, 40vw, 700px);
    }

    /* Give Our Impact right column breathing room */
    .our-impact {
        padding-left: clamp(1rem, 3vw, 4rem);
    }
}

@media (min-width: 1800px) {

    .container-xl,
    .container-lg,
    .container-md,
    .container-sm,
    .container {
        max-width: min(88vw, 2000px);
    }

    /* Hero column takes more width on ultra-wide */
    .hero-content .col-lg-7 {
        width: 65%;
    }

    /* Bigger gap in hero CTA row */
    .hero-cta-group {
        gap: clamp(1rem, 1.5vw, 2rem);
    }

    /* service-card image ratio stays balanced */
    .service-card .card-img-wrap {
        aspect-ratio: 700 / 420;
    }
}

/* ===========================
       CUSTOM SCROLLBAR
   =========================== */

/* Chrome, Edge, Safari */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--clr-green-light);
    border-radius: 999px;
    transition: background 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--clr-gold);
}

/* Firefox */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--clr-green-light) transparent;
}

.contentblock-heading {
    font-size: 35px;
    line-height: 49px;
    margin-top: 16px;
    font-weight: 600;
}

.contentblock-title {
    font-size: 16px;
    color: var(--clr-green-primary);
    line-height: 18px;
    font-weight: 700;
}

.title-col {
    color: var(--clr-black);
    font-size: 1.5625rem;
    font-weight: 600;
    line-height: 1.9375rem;
    margin-top: 0;
    margin-bottom: 8px;
}

/* ===========================
   STORY BACKGROUND — REDESIGN
   =========================== */

/* ── Section Header ── */
.sbg-section-header {
    text-align: center;
    margin-bottom: 3.5rem;
}

.sbg-label-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(1, 64, 60, 0.10);
    color: var(--clr-green-primary);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.35rem 1.05rem;
    border-radius: 999px;
    border: 1px solid rgba(1, 64, 60, 0.18);
    margin-bottom: 1rem;
}

.sbg-main-title {
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 800;
    color: var(--clr-green-primary);
    line-height: 1.1;
    margin-bottom: 0.85rem;
    letter-spacing: -0.02em;
}

.sbg-subtitle {
    font-size: clamp(0.92rem, 1.5vw, 1.05rem);
    color: var(--clr-text-muted);
    max-width: 560px;
    margin: 0 auto 1.5rem;
    line-height: 1.7;
}

.sbg-title-divider {
    width: 52px;
    height: 3.5px;
    background: linear-gradient(90deg, var(--clr-green-primary), var(--clr-gold));
    border-radius: 999px;
    margin: 0 auto;
}

/* ── Text Column ── */
.sbg-text-column {
    padding-left: 0 !important;
}

.sbg-text-column p {
    font-size: 18px;
    color: var(--clr-green-dark);
    line-height: 1.85;
    margin-bottom: 1.25rem;
    text-align: justify;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ── Video Card ── */
.sbg-video-card {
    background: #fff;
    border-radius: 20px;
    border: 1px solid rgba(1, 64, 60, 0.10);
    box-shadow: 0 12px 48px rgba(1, 64, 60, 0.10);
    overflow: hidden;
    padding: 1.6rem;
    position: sticky;
    top: calc(var(--navbar-height) + 1.5rem);
}

.sbg-video-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.32rem 0.9rem;
    border-radius: 999px;
    margin-bottom: 0.9rem;
}

.sbg-video-badge i {
    font-size: 0.85rem;
}

.sbg-video-title {
    font-size: clamp(1rem, 1.6vw, 1.2rem);
    font-weight: 700;
    color: var(--clr-green-primary);
    line-height: 1.35;
    margin-bottom: 1.1rem;
}

.sbg-video-frame {
    border-radius: 12px !important;
    box-shadow: 0 8px 28px rgba(1, 64, 60, 0.14) !important;
}

/* ── Milestones Strip ── */
.sbg-milestones {
    margin-top: 1.4rem;
    padding-top: 1.25rem;
    border-top: 1px solid rgba(1, 64, 60, 0.09);
}

.sbg-milestones-label {
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--clr-text-muted);
    margin-bottom: 0.85rem;
}

.sbg-milestone-item {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(1, 64, 60, 0.06);
}

.sbg-milestone-item:last-child {
    border-bottom: none;
}

.sbg-milestone-year {
    flex-shrink: 0;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--clr-green-primary);
    background: rgba(1, 64, 60, 0.08);
    border-radius: 6px;
    padding: 0.2rem 0.55rem;
    letter-spacing: 0.04em;
    min-width: 44px;
    text-align: center;
}

.sbg-milestone-text {
    font-size: 0.82rem;
    color: var(--clr-text-muted);
    line-height: 1.5;
}

.sbg-milestone-item--highlight {
    background: rgba(1, 64, 60, 0.04);
    border-radius: 10px;
    padding: 0.65rem 0.75rem;
    margin: 0 -0.75rem;
    border-bottom: none !important;
}

.sbg-milestone-item--highlight .sbg-milestone-year {
    background: linear-gradient(135deg, var(--clr-green-primary), var(--clr-green-light));
    color: #fff;
}

.sbg-milestone-item--highlight .sbg-milestone-text {
    color: var(--clr-text-dark);
    font-weight: 500;
}

.sbg-milestone-item--highlight strong {
    color: var(--clr-green-primary);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .sbg-video-card {
        position: static;
        margin-top: 0.5rem;
    }

    .sbg-section-header {
        margin-bottom: 2.5rem;
    }
}

@media (max-width: 768px) {
    .sbg-main-title {
        font-size: 1.7rem;
    }

    .sbg-video-card {
        padding: 1.25rem;
    }

    .sbg-text-column p {
        text-align: justify;
        font-size: 0.95rem;
    }
}

.card-img-link {
    display: block;
    text-decoration: none;
    overflow: hidden;
}

.card-img-link img {
    transition: transform 0.4s ease;
}

.card-img-link:hover img {
    transform: scale(1.05);
}

/* ===========================
   CONTACT US MODAL
   =========================== */

.footer-contact-trigger {
    cursor: pointer;
    position: relative;
    transition: color 0.2s ease;
}

.footer-contact-trigger::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 0;
    height: 2px;
    background-color: var(--clr-gold);
    transition: width 0.3s ease;
}

.footer-contact-trigger:hover::after {
    width: 100%;
}

/* ── Modal Shell ── */
.contact-modal-content {
    background: var(--clr-white);
    border: none;
    border-radius: 18px;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.22);
    overflow: hidden;
}

/* ── Header ── */
.contact-modal-header {
    background: var(--clr-green-primary);
    border-bottom: none;
    padding: 1.6rem 1.6rem 1.4rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    position: relative;
}

/* Gold icon box — mirrors the briefcase box in the reference */
.contact-modal-icon-box {
    flex-shrink: 0;
    width: 58px;
    height: 58px;
    background: var(--clr-gold);
    border-radius: 14px;
    border: 2px solid rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--clr-green-primary);
}

.contact-modal-title-group {
    flex: 1;
    min-width: 0;
}

/* Pill badge — mirrors "NOW HIRING" badge in the reference */
.contact-modal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 999px;
    padding: 0.22rem 0.7rem;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--clr-white);
    margin-bottom: 0.45rem;
}

.contact-modal-badge-dot {
    width: 7px;
    height: 7px;
    background: #4ade80;
    border-radius: 50%;
    flex-shrink: 20;
    font-size: ;
}

.contact-modal-header .modal-title {
    font-size: 1.55rem;
    font-weight: 700;
    color: var(--clr-white);
    line-height: 1.2;
    margin: 0;
    letter-spacing: -0.01em;
}

/* Circular close button */
.contact-modal-header .btn-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 30px;
    height: 30px;
    background: rgba(255, 255, 255, 0.18)
        url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
        center / 9px no-repeat;
    border-radius: 50%;
    opacity: 1;
    transition: background 0.2s ease;
    padding: 0;
    flex-shrink: 0;
}

.contact-modal-header .btn-close:hover {
    background-color: rgba(255, 255, 255, 0.32);
}

/* ── Body ── */
.contact-modal-body {
    background: var(--clr-white);
    padding: 1.6rem 1.6rem 0.75rem;
}

/* Section heading — mirrors "WHAT WE'RE LOOKING FOR" in the reference */
.contact-section-title {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
    color: var(--clr-green-primary);
    margin: 0 0 0.6rem 0;
}

.contact-section-divider {
    height: 2px;
    background: rgba(1, 64, 60, 0.1);
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* Item list — mirrors the card rows in the reference */
.contact-items-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.contact-item-card {
    display: flex;
    align-items: center;
    gap: 0.875rem;
    background: var(--clr-off-white);
    border: 1px solid rgba(1, 64, 60, 0.08);
    border-radius: 12px;
    padding: 0.875rem 1rem;
    text-decoration: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.contact-item-card:hover {
    border-color: rgba(1, 64, 60, 0.22);
    box-shadow: 0 4px 16px rgba(1, 64, 60, 0.08);
    transform: translateY(-1px);
}

/* Gold bullet dot — mirrors the orange dots in the reference */
.contact-item-dot {
    flex-shrink: 0;
    width: 10px;
    height: 10px;
    background: var(--clr-gold);
    border-radius: 50%;
}

/* Small icon beside the dot */
.contact-item-icon-wrap {
    flex-shrink: 0;
    color: var(--clr-gold);
    opacity: 0.9;
    display: flex;
    align-items: center;
    transition: opacity 0.2s ease;
    font-size: 20px;
}

.contact-item-content {
    flex: 1;
    min-width: 0;
}

.contact-item-label {
    font-size: 18px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--clr-green-primary);
    margin: 0 0 0.15rem 0;
}

.contact-item-value {
    font-size: 0.875rem;
    color: var(--clr-text-muted);
    text-decoration: underline;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chevron arrow */
.contact-item-arrow {
    flex-shrink: 0;
    color: var(--clr-green-primary);
    opacity: 0.35;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.contact-item-card:hover .contact-item-arrow {
    opacity: 0.8;
    transform: translateX(3px);
}

/* ── Footer Strip ── mirrors the "Send your resume to" bar in the reference */
.contact-modal-footer {
    border-top: 1px solid rgba(1, 64, 60, 0.08);
    padding: 0.9rem 1.6rem;
    background: var(--clr-white);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    text-align: center;
}

.contact-footer-send-icon {
    color: var(--clr-text-muted);
    opacity: 0.55;
    flex-shrink: 0;
}

.contact-footer-copy {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.contact-footer-text {
    font-size: 0.78rem;
    color: var(--clr-text-muted);
}

.contact-footer-email {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--clr-green-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.contact-footer-email:hover {
    color: var(--clr-green-light);
    text-decoration: underline;
}

/* ── Modal Animation ── */
.modal.fade .modal-dialog {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.modal.show .modal-dialog {
    animation: slideInModal 0.3s ease forwards;
}

@keyframes slideInModal {
    from {
        transform: translateY(-40px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ── Responsive ── */
@media (max-width: 576px) {
    .contact-modal-header {
        padding: 1.25rem 1.25rem 1.1rem;
        gap: 0.75rem;
    }

    .contact-modal-icon-box {
        width: 50px;
        height: 50px;
        border-radius: 12px;
    }

    .contact-modal-header .modal-title {
        font-size: 1.3rem;
    }

    .contact-modal-body {
        padding: 1.25rem 1.25rem 0.5rem;
    }

    .contact-item-value {
        font-size: 0.8rem;
    }

    .contact-modal-footer {
        padding: 0.85rem 1.25rem;
    }
}