/* ── ABOUT PAGE STYLES ── */

/* Page Hero */
.page-hero { background: linear-gradient(135deg, #0a1f14 0%, #1a3a28 60%, #0f2018 100%); padding: 120px 0 70px; margin-top:80px; }
.page-hero .crumb { list-style:none; padding:0; margin:0; }
.page-hero .crumb li { display:inline; color:#ccc; }
.page-hero .crumb li + li::before { content:" / "; color:#666; }
.page-hero .crumb a { color:#ccc; text-decoration:none; }
.page-hero .crumb a:hover { color:var(--mga); }
.anchor-offset { scroll-margin-top: 160px; }

/* Sticky Sub-Nav */
.about-subnav {
    position: sticky;
    top: 72px;
    z-index: 490;
    border-bottom: 2px solid #e8e8e8;
    background-color: #ffffff !important;
    background-image: none !important;
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}
.about-subnav::before {
    content: '';
    position: absolute;
    inset: 0;
    background: #ffffff;
    z-index: -1;
}
.about-subnav ul { list-style:none; padding:0; margin:0; display:flex; gap:0; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; }
.about-subnav ul::-webkit-scrollbar { display:none; }
.about-subnav ul li a { display:block; padding:14px 18px; font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; color:#222; text-decoration:none; white-space:nowrap; border-bottom:3px solid transparent; transition:all .2s; }
.about-subnav ul li a:hover, .about-subnav ul li a.active { color:var(--mg); border-bottom-color:var(--mg); }

/* Mission-Vision cards */
.mission-box { background:#fff; border-radius:22px; box-shadow:0 10px 30px rgba(0,0,0,.04); padding:34px; }
.mv-card { background:#f6f8f5; border-radius:6px; padding:40px 36px; height:100%; position:relative; overflow:hidden; }
.mv-card::before { content:''; position:absolute; top:0; left:0; width:4px; height:100%; background:var(--mg); }
.mv-label { font-size:10px; font-weight:800; letter-spacing:3px; text-transform:uppercase; color:var(--mg); margin-bottom:12px; }

/* Philosophy */
.philosophy-quote { font-size:22px; line-height:1.6; font-style:italic; color:#2a2a2a; border-left:4px solid var(--mga); padding-left:28px; }

/* Value Cards */
.val-card { border-left:3px solid var(--mg); padding:24px 28px; background:#1a2e22; height:100%; transition:box-shadow .25s; border-radius:0 4px 22px 0; }
.val-card:hover { box-shadow:0 6px 24px rgba(45,106,79,.22); }
.val-num { font-size:10px; font-weight:800; letter-spacing:2px; color:var(--mga); text-transform:uppercase; margin-bottom:6px; }
.val-title { font-size:15px; font-weight:700; color:#fff; margin-bottom:8px; }
.val-title span { color:var(--mga); }

/* Section Backgrounds */
.section-about-bg { position:relative; z-index:0; }
.section-about-bg::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.6); z-index:0; }
.section-about-bg .container { position:relative; z-index:1; }
.section-values-bg { position:relative; z-index:0; background:url('/wp-content/themes/mabuco/images/slider/da.jpg') center center / cover no-repeat; }
.section-values-bg::before { content:""; position:absolute; inset:0; background:rgba(0,0,0,.65); z-index:0; }
.section-values-bg .container { position:relative; z-index:1; }

/* Animated Timeline */
.tl-bg-grid { position:absolute; inset:0; pointer-events:none; z-index:1; background-image:linear-gradient(rgba(82,183,136,.04) 1px, transparent 1px), linear-gradient(90deg,rgba(82,183,136,.04) 1px, transparent 1px); background-size:48px 48px; }
.tl-spine { width:3px; background:linear-gradient(to bottom,transparent,var(--mga) 5%,var(--mga) 95%,transparent); position:absolute; left:50%; transform:translateX(-50%); top:0; bottom:0; z-index:3; }
#tl-progress-fill { width:3px; background:linear-gradient(to bottom,#52b788,#f0c040); position:absolute; left:50%; transform:translateX(-50%); top:0; height:0; z-index:4; transition:height .05s linear; }
.tl-v-wrap { position:relative; padding:20px 0 60px; }
.tl-row { display:flex; align-items:flex-start; gap:0; margin-bottom:0; position:relative; }
.tl-row.left { flex-direction:row; }
.tl-row.right { flex-direction:row-reverse; }
.tl-card { width:calc(50% - 52px); background:rgba(255,255,255,.04); border:1px solid rgba(82,183,136,.18); border-radius:22px; padding:22px 26px; position:relative; opacity:0; transform:translateY(30px) scale(.97); transition:opacity .55s ease, transform .55s ease, box-shadow .3s, border-color .3s; }
.tl-card.visible { opacity:1; transform:translateY(0) scale(1); }
.tl-card:hover { box-shadow:0 8px 32px rgba(82,183,136,.18); border-color:rgba(82,183,136,.4); }
.tl-row.left .tl-card::after { content:''; position:absolute; right:-10px; top:24px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-left:10px solid rgba(82,183,136,.25); }
.tl-row.right .tl-card::after { content:''; position:absolute; left:-10px; top:24px; border-top:10px solid transparent; border-bottom:10px solid transparent; border-right:10px solid rgba(82,183,136,.25); }
.tl-node-wrap { width:104px; flex-shrink:0; display:flex; flex-direction:column; align-items:center; padding-top:18px; position:relative; z-index:5; }
.tl-node { width:44px; height:44px; border-radius:50%; background:var(--mga); border:4px solid #071a10; box-shadow:0 0 0 3px var(--mga), 0 0 18px rgba(82,183,136,.5); display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; color:#071a10; letter-spacing:.5px; cursor:default; transition:transform .3s, box-shadow .3s; }
.tl-node:hover { transform:scale(1.18); box-shadow:0 0 0 4px var(--mga), 0 0 28px rgba(82,183,136,.75); }
.tl-node.gold { background:#f0c040; box-shadow:0 0 0 3px #f0c040, 0 0 18px rgba(240,192,64,.5); color:#3a2800; }
.tl-node.gold:hover { box-shadow:0 0 0 4px #f0c040, 0 0 28px rgba(240,192,64,.75); }
.tl-node.big { width:54px; height:54px; font-size:13px; }
.tl-year-tag { margin-top:8px; font-size:13px; font-weight:800; color:#fff; letter-spacing:.5px; }
.tl-year-tag.gold-text { color:#f0c040; }
.tl-tag { font-size:10px; font-weight:800; letter-spacing:2px; text-transform:uppercase; color:var(--mga); margin-bottom:8px; }
.tl-tag.gold-tag { color:#f0c040; }
.tl-card h5 { font-size:16px; font-weight:700; color:#fff; margin-bottom:8px; }
.tl-card p, .tl-card li { font-size:13px; line-height:1.6; color:rgba(255,255,255,.72); margin:0; }
.tl-card ul { padding-left:18px; margin:6px 0 0; }
.tl-card ul li { margin-bottom:3px; }
.tl-card .tl-sub { font-size:12px; font-weight:700; color:rgba(255,255,255,.9); margin:8px 0 2px; text-transform:uppercase; letter-spacing:.5px; }
@keyframes pulse-ring { 0%{transform:scale(1);opacity:.6} 100%{transform:scale(2.2);opacity:0} }
.tl-node-pulse { position:absolute; width:44px; height:44px; border-radius:50%; border:2px solid var(--mga); animation:pulse-ring 2s ease-out infinite; }

/* Board of Directors */
.bod-card { background:rgba(255,255,255,.06); border:1px solid rgba(82,183,136,.22); border-radius:22px; overflow:hidden; height:100%; transition:transform .3s, box-shadow .3s, border-color .3s; }
.bod-card:hover { transform:translateY(-5px); box-shadow:0 12px 36px rgba(0,0,0,.3); border-color:rgba(82,183,136,.55); }
.bod-img-wrap { position:relative; width:100%; height:260px; overflow:hidden; background:linear-gradient(135deg,#1a3a28 0%,#0b1f16 100%); }
.bod-img-wrap .tc-img { width:100%; height:100%; object-fit:cover; object-position:top center; }
.bod-initials { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:64px; font-weight:800; color:var(--mga); opacity:.25; letter-spacing:-2px; }
.bod-body { padding:24px 22px; border-top:3px solid var(--mg); }
.bod-name { font-size:15px; font-weight:700; color:#fff; margin-bottom:5px; }
.bod-pos { font-size:10px; font-weight:700; letter-spacing:1.4px; text-transform:uppercase; color:var(--mga); margin-bottom:12px; }
.bod-bio { font-size:13px; color:#aaa; line-height:1.7; }

/* Team Cards */
.team-card { background:#fff; border-radius:6px; overflow:hidden; box-shadow:0 2px 16px rgba(0,0,0,.08); transition:transform .3s, box-shadow .3s; height:100%; }
.team-card:hover { transform:translateY(-4px); box-shadow:0 8px 32px rgba(0,0,0,.13); }
.team-card .tc-img { width:100%; height:260px; object-fit:cover; object-position:top center; }
.team-card .tc-body { padding:22px; }
.team-card .tc-name { font-size:16px; font-weight:700; margin-bottom:4px; color:#1a1a1a; }
.team-card .tc-pos { font-size:11px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--mg); margin-bottom:10px; }

/* Responsive */
@media (max-width:991px) {
    .about-subnav { top:60px; }
    .anchor-offset { scroll-margin-top:120px; }
    #section-about { padding-top:80px !important; }
}
@media (max-width:767px) {
    .about-subnav ul li a { padding:11px 12px; font-size:9.5px; letter-spacing:1px; color:#111 !important; }
    .philosophy-quote { font-size:18px; }
    .bod-img-wrap { height:220px; }
    .bod-body { padding:18px 16px; }
    .tl-spine, #tl-progress-fill { display:none; }
    .tl-row { flex-direction:column !important; align-items:center; margin-bottom:16px; }
    .tl-row.right { flex-direction:column !important; }
    .tl-node-wrap { padding-top:0; margin-bottom:10px; width:auto; flex-shrink:0; }
    .tl-year-tag { display:block; text-align:center; margin-top:6px; }
    .tl-card { width:100%; max-width:100%; }
    .tl-card::after { display:none !important; }
    .tl-row > div[style*="width:calc(50%"] { display:none !important; }
    .tl-node-wrap { order:-1; }
    .tl-node-pulse { width:44px; height:44px; }
    #section-structure [style*="height:2px;background:var(--mga);width:72%"] { display:none !important; }
}