.page-header {
background:linear-gradient(135deg,var(--org) 0%,#e07800 100%); padding:40px 0 36px;
}

.page-header-inner {
max-width:1200px; margin:0 auto; padding:0 32px; display:flex; align-items:center; gap:40px;
}

.page-header-text h1 {
font-family:'DM Serif Display',serif; font-size:40px; color:#fff; line-height:1.1; margin-bottom:8px;
}

.page-header-text p {
font-size:16px; color:rgba(255,255,255,.85); max-width:540px;
}

.controls {
background:#fff; border-bottom:1px solid #ede8e1; position:sticky; top:64px; z-index:90; box-shadow:var(--shadow);
}

.controls-inner {
max-width:1200px; margin:0 auto; padding:14px 32px; display:flex; align-items:center; gap:16px; flex-wrap:wrap;
}

.view-label {
font-size:13px; font-weight:600; color:#555; white-space:nowrap;
}

.view-toggle {
display:flex; background:#f5f0ea; border-radius:10px; padding:4px; gap:2px;
}

.view-btn {
padding:8px 20px; border-radius:8px; font-size:14px; font-weight:600;
    border:none; cursor:pointer; color:#888; background:transparent;
    transition:all .2s; display:flex; align-items:center; gap:6px; white-space:nowrap;
}

.view-btn.active {
background:#fff; color:var(--org); box-shadow:0 1px 4px rgba(0,0,0,.12);
}

.view-btn:hover:not(.active) {
color:var(--org-d);
}

.ctrl-spacer {
flex:1;
}

.search-box {
display:flex; align-items:center; gap:8px; border:1.5px solid #e5e0d8; border-radius:20px; padding:7px 16px; background:#fafaf8; font-size:14px; color:#999; width:240px;
}

.main {
max-width:1200px; margin:0 auto; padding:32px 32px 64px;
}

.view-panel {
display:none;
}

.view-panel.active {
display:block;
}

.company-section {
margin-bottom:40px;
}

.company-header {
display:flex; align-items:center; gap:16px;
    padding:16px 24px;
    background:#fff; border-radius:var(--radius) var(--radius) 0 0;
    border:1px solid #ede8e1; border-bottom:2px solid var(--org);
    margin-bottom:0;
}

.company-logo {
width:48px; height:48px; border-radius:10px;
    background:var(--org-l); border:1px solid var(--org-b);
    display:flex; align-items:center; justify-content:center;
    font-weight:800; font-size:13px; color:var(--org-d); flex-shrink:0;
}

.company-info {
flex:1;
}

.company-name {
font-size:18px; font-weight:700; color:#1a1a1a;
}

.company-meta {
font-size:13px; color:#999; margin-top:1px;
}

.volunteer-grid {
display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr));
    gap:0; border:1px solid #ede8e1; border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    overflow:hidden;
}

.vol-card {
background:#fff; padding:20px;
    border-right:1px solid #f2ede6; border-bottom:1px solid #f2ede6;
    transition:background .15s;
}

.vol-card:hover {
background:#fdf9f5;
}

.vol-card-top {
display:flex; align-items:flex-start; gap:12px; margin-bottom:12px;
}

.vol-avatar {
width:44px; height:44px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-weight:700; font-size:15px; flex-shrink:0;
    border:2px solid var(--org-b);
}

.vol-card-name-row {
display:flex; align-items:center; gap:7px;
}

.vol-card-name {
font-size:15px; font-weight:700; color:#1a1a1a;
}

.li-icon-link {
display:inline-flex; align-items:center; justify-content:center;
    width:22px; height:22px; border-radius:4px;
    background:var(--li); color:#fff;
    font-size:11px; font-weight:800; text-decoration:none; flex-shrink:0;
    transition:opacity .15s, transform .15s;
}

.li-icon-link:hover {
opacity:.85; transform:scale(1.1);
}

.vol-card-title {
font-size:12px; color:#777; margin-top:1px; line-height:1.3;
}

.vol-card-divider {
height:1px; background:#f2ede6; margin-bottom:10px;
}

.vol-card-nfps {
display:flex; flex-direction:column; gap:5px; margin-bottom:10px;
}

.vol-nfp-row {
display:flex; align-items:center; gap:6px;
}

.vol-nfp-dot {
width:6px; height:6px; border-radius:50%; background:var(--org); flex-shrink:0;
}

.vol-nfp-name {
font-size:12px; color:#555; flex:1;
}

.vol-nfp-hrs {
font-size:12px; font-weight:700; color:var(--org-d); white-space:nowrap;
}

.vol-card-total {
display:flex; align-items:center; gap:6px;
    background:var(--org-l); border-radius:var(--radius-sm);
    padding:6px 10px;
}

.vol-total-hrs {
font-size:15px; font-weight:700; color:var(--org-d);
}

.vol-total-label {
font-size:11px; color:var(--org-d); opacity:.7;
}

.nfp-section {
margin-bottom:36px;
}

.nfp-header {
display:flex; align-items:center; gap:16px;
    padding:16px 24px;
    background:#fff; border-radius:var(--radius) var(--radius) 0 0;
    border:1px solid #ede8e1; border-bottom:2px solid var(--thf-teal);
}

.nfp-logo-lg {
width:48px; height:48px; border-radius:10px;
    background:var(--thf-teal);
    display:flex; align-items:center; justify-content:center;
    flex-shrink:0;
}

.nfp-logo-lg svg {
width:24px; height:24px; stroke:#fff; fill:none; stroke-width:2;
}

.nfp-header-info {
flex:1;
}

.nfp-header-name {
font-size:18px; font-weight:700; color:#1a1a1a;
}

.nfp-header-cause {
font-size:13px; color:#999; margin-top:1px;
}

.nfp-total-box {
background:#e6f6f4; border:1px solid #a8ddd7; border-radius:var(--radius-sm); padding:8px 16px; text-align:center;
}

.nfp-total-num {
font-size:22px; font-weight:700; color:var(--thf-teal); line-height:1;
}

.nfp-total-label {
font-size:11px; color:#2a9d8f;
}

.nfp-vol-list {
background:#fff; border:1px solid #ede8e1; border-top:none;
    border-radius:0 0 var(--radius) var(--radius); overflow:hidden;
}

.nfp-vol-row {
display:flex; align-items:center; gap:14px;
    padding:14px 24px; border-bottom:1px solid #f2ede6;
    transition:background .15s;
}

.nfp-vol-row:last-child {
border-bottom:none;
}

.nfp-vol-row:hover {
background:#faf7f4;
}

.nfp-vol-avatar {
width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; border:2px solid var(--org-b);
}

.nfp-vol-info {
flex:1;
}

.nfp-vol-name-row {
display:flex; align-items:center; gap:8px;
}

.nfp-vol-name {
font-size:15px; font-weight:600; color:#1a1a1a;
}

.nfp-vol-meta {
font-size:13px; color:#999; margin-top:1px;
}

.nfp-vol-hrs {
background:var(--org-l); color:var(--org-d); border:1px solid var(--org-b);
    padding:5px 14px; border-radius:20px; font-size:13px; font-weight:700; white-space:nowrap;
}

.hours-table {
background:#fff; border-radius:var(--radius); border:1px solid #ede8e1;
    overflow:hidden; box-shadow:var(--shadow);
}

.hours-table-head {
display:grid; grid-template-columns:56px 1fr 200px 140px 120px;
    background:var(--org-l); padding:12px 24px;
    border-bottom:2px solid var(--org-b);
    font-size:12px; font-weight:700; color:var(--org-d);
    text-transform:uppercase; letter-spacing:.06em;
}

.hours-table-row {
display:grid; grid-template-columns:56px 1fr 200px 140px 120px;
    padding:14px 24px; border-bottom:1px solid #f2ede6;
    align-items:center; transition:background .15s; cursor:pointer;
}

.hours-table-row:last-child {
border-bottom:none;
}

.hours-table-row:hover {
background:#fdf9f5;
}

.hours-table-row.gold-row {
background:#fffbf5;
}

.rank-cell {
display:flex; align-items:center;
}

.rank-badge {
width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:14px; font-weight:700;
}

.rank-1 {
background:var(--org-l); color:var(--org); border:2px solid var(--org-b);
}

.rank-2 {
background:#f5f5f5; color:#777; border:2px solid #e0e0e0;
}

.rank-3 {
background:#fdf2ec; color:#a0603a; border:2px solid #f5c9a8;
}

.rank-n {
background:#fafafa; color:#aaa; border:2px solid #eee;
}

.vol-cell {
display:flex; align-items:center; gap:12px;
}

.tbl-avatar {
width:38px; height:38px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:13px; flex-shrink:0; border:2px solid var(--org-b);
}

.tbl-vol-name {
font-size:15px; font-weight:600; color:#1a1a1a; display:flex; align-items:center; gap:7px;
}

.tbl-vol-title {
font-size:12px; color:#999; margin-top:1px;
}

.company-cell {
font-size:14px; color:#555; font-weight:500;
}

.nfps-cell {
display:flex; flex-direction:column; gap:2px;
}

.nfp-mini {
font-size:12px; color:#777; display:flex; align-items:center; gap:4px;
}

.nfp-mini::before {
content:''; width:5px; height:5px; border-radius:50%; background:var(--org-b); flex-shrink:0;
}

.hours-cell {
display:flex; align-items:center; justify-content:flex-end;
}

.hours-badge {
background:var(--org); color:#fff;
    padding:6px 16px; border-radius:20px;
    font-size:15px; font-weight:700;
}

.hours-badge-sm {
background:var(--org-l); color:var(--org-d); border:1px solid var(--org-b);
    padding:5px 14px; border-radius:20px; font-size:14px; font-weight:700;
}

svg.icon-sm {
width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}

@keyframes notif-pulse {
0%,100% { transform:scale(1); }
    50% { transform:scale(1.15); }
}

@media(max-width:768px) {
.hero-inner,.page-header-inner {flex-direction:column!important;padding:0 16px!important;gap:20px!important;text-align:center}
.page-header-text h1 {font-size:26px!important}
.main {grid-template-columns:1fr!important;padding:14px 14px 48px!important;gap:16px!important}
.filter-inner,.controls-inner {padding:10px 14px!important;flex-wrap:wrap;gap:6px!important}
.search-box {width:100%!important;margin-top:4px}
.view-toggle {flex-wrap:wrap}
.view-btn {font-size:12px!important;padding:7px 10px!important}
.vol-avatar {width:36px!important;height:36px!important}
.card-title,.post-title {font-size:15px!important}
.volunteer-grid {grid-template-columns:1fr!important}
.company-header {flex-wrap:wrap!important;padding:12px!important}
.hours-table-head {display:none!important}
.company-cell,.nfps-cell {grid-column:2;font-size:12px!important}
.section {padding:28px 16px!important}
}

/* extracted inline styles */
.volunteers-i1 {
  display:inline-flex;align-items:center;gap:7px;background:rgba(245,166,35,.2);border:1px solid rgba(245,166,35,.5);border-radius:20px;padding:5px 14px;margin-bottom:14px;
}

.volunteers-i2 {
  font-size:14px;
}

.volunteers-i3 {
  font-size:12px;font-weight:700;color:#fff;letter-spacing:.02em;
}

.volunteers-i4 {
  background:#FEF6EC;color:#C4720D;
}

.volunteers-i5 {
  text-decoration:none;color:inherit;
}

.volunteers-i6 {
  color:var(--org);
}

.volunteers-i7 {
  background:#dbeafe;color:#1e40af;
}

.volunteers-i8 {
  background:#f3e8ff;color:#7c3aed;
}

.volunteers-i9 {
  background:#E6F1FB;color:#185FA5;
}

.volunteers-i10 {
  background:#ecfdf5;color:#065f46;
}

.volunteers-i11 {
  background:#FFF0F3;color:#BE123C;
}

.volunteers-i12 {
  background:#EAF3DE;color:#3B6D11;
}

.volunteers-i13 {
  background:#fce7f3;color:#be185d;
}

.volunteers-i14 {
  background:#fafaf8;cursor:default;
}

.volunteers-i15 {
  height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;color:#ccc;padding:20px;text-align:center;
}

.volunteers-i16 {
  width:28px;height:28px;opacity:.4;stroke:#ccc;fill:none;stroke-width:2;
}

.volunteers-i17 {
  font-size:12px;color:#bbb;
}

.volunteers-i18 {
  background:#185FA5;
}

.volunteers-i19 {
  background:#E6F1FB;border-color:#B5D4F4;
}

.volunteers-i20 {
  color:#185FA5;
}

.volunteers-i21 {
  background:#BE123C;
}

.volunteers-i22 {
  background:#FFF1F2;border-color:#FECDD3;
}

.volunteers-i23 {
  color:#BE123C;
}

.volunteers-i24 {
  background:var(--thf-teal);
}

.volunteers-i25 {
  background:#E6F6F4;border-color:#A8DDD7;
}

.volunteers-i26 {
  color:var(--thf-teal);
}

.volunteers-i27 {
  background:#A16207;
}

.volunteers-i28 {
  background:#FEFCE8;border-color:#FDE68A;
}

.volunteers-i29 {
  color:#A16207;
}

.volunteers-i30 {
  text-align:right;
}

.volunteers-i31 {
  width:20px;height:20px;font-size:10px;
}