:root {
  --hf-pastel-1: #7cc6b6;
  --hf-pastel-2: #9fd8cb;
  --hf-pastel-3: #b8e3da;
  --hf-sky-1: #a7d8ff;
  --hf-sky-2: #c5e6ff;
  --hf-accent-warm: #ffd6a5;
  --hf-ink: #1e3340;
  --hf-chart-green: #7cc6b6;
  --hf-chart-sky: #9ec8f5;
  --hf-chart-warm: #ffd6a5;
  --hf-chart-mint: #9fd8cb;
  --hf-chart-soft-red: #fca5a5;
  --hf-primary: #5aaf9c;
  --hf-primary-dark: #3d8f7f;
  --hf-accent: var(--hf-pastel-2);
  --hf-sky: #7ab8f0;
  --hf-bg: #f7fafc;
  --hf-surface-2: #fdfefe;
  --hf-card: #fdfefe;
  --hf-text: #1e293b;
  --hf-muted: #64748b;
  --hf-border: rgba(30, 41, 59, 0.08);
  --hf-shadow: 0 18px 45px rgba(30, 41, 59, 0.08);
  --hf-soft-shadow: 0 10px 28px rgba(30, 41, 59, 0.06);
  --hf-radius: 22px;
}
.hf-public-body { background: var(--hf-bg); color: var(--hf-text); font-family: "Prompt", "Sarabun", "Noto Sans Thai", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.65; }
/* Top contact strip — pastel enterprise (matches navbar / inner page heroes) */
.hf-topbar {
  background: linear-gradient(90deg, rgba(184, 227, 218, 0.5) 0%, rgba(167, 216, 255, 0.38) 55%, rgba(253, 254, 254, 0.92) 100%);
  color: #334155;
  border-bottom: 1px solid rgba(124, 198, 182, 0.28);
}
.hf-topbar i { color: var(--hf-primary-dark); opacity: 0.9; }
.hf-navbar { background: linear-gradient(180deg, rgba(253,254,254,.96), rgba(184,227,218,.35)); backdrop-filter: blur(16px); box-shadow: 0 8px 28px rgba(30,41,59,.05); border-bottom: 1px solid rgba(124,198,182,.25); }
.hf-navbar .navbar-brand strong { display: block; color: var(--hf-primary-dark); font-weight: 900; }
.hf-navbar .navbar-brand small { display: block; color: var(--hf-muted); font-size: .72rem; }
.hf-brand-mark { width: 42px; height: 42px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, var(--hf-primary), var(--hf-sky)); color: #fff; box-shadow: 0 10px 24px rgba(15,118,110,.25); flex: 0 0 auto; }
.hf-navbar .nav-link { border-radius: 999px; font-weight: 700; color: #334155; padding: .55rem .75rem !important; }
.hf-navbar .nav-link:hover, .hf-navbar .nav-link.active { background: rgba(20,184,166,.12); color: var(--hf-primary-dark); }
.btn-hf-primary { background: linear-gradient(135deg, var(--hf-primary), var(--hf-primary-dark)); border: 0; color: #fff; box-shadow: 0 10px 24px rgba(15,118,110,.24); }
.btn-hf-primary:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 16px 30px rgba(15,118,110,.32); }
.btn-hf-light { background: #fff; border: 0; color: var(--hf-primary-dark); font-weight: 800; box-shadow: 0 8px 22px rgba(30,41,59,.08); }
.btn-hf-primary.btn-lg, .btn-hf-light.btn-lg, .hf-hero .btn-outline-light.btn-lg { min-height: 48px; }
.btn-hf-primary, .btn-hf-light, .hf-hero .btn-outline-light { min-height: 44px; }
.hf-mobile-actions .btn { min-height: 44px; }
.hf-hero .btn-outline-light { color: var(--hf-ink); border-color: rgba(15,23,42,.2); }
.hf-hero .btn-outline-light:hover { background: rgba(255,255,255,.75); color: var(--hf-ink); }
/* Home hero — same base band as .hf-page-hero so index matches projects/news/documents */
.hf-hero {
  background: linear-gradient(135deg, var(--hf-pastel-1), var(--hf-sky-1));
  color: var(--hf-ink);
  padding: 78px 0 118px;
  position: relative;
  overflow: hidden;
}
.hf-hero.hf-hero--has-bg {
  background-image: linear-gradient(120deg, rgba(253, 254, 254, 0.94) 0%, rgba(253, 254, 254, 0.82) 42%, rgba(230, 245, 250, 0.72) 100%), var(--hf-hero-bg);
  background-size: cover;
  background-position: center;
}
/* Homepage: stronger pastel band + KPI card lift (matches project-page hero family) */
.hf-hero.hf-hero--home-band:not(.hf-hero--has-bg) {
  background: linear-gradient(135deg, rgba(124, 198, 182, 0.92) 0%, rgba(159, 216, 203, 0.88) 40%, rgba(167, 216, 255, 0.9) 100%);
}
.hf-hero.hf-hero--home-band.hf-hero--has-bg {
  background-image: linear-gradient(118deg, rgba(253, 254, 254, 0.55) 0%, rgba(184, 227, 218, 0.4) 36%, rgba(167, 216, 255, 0.45) 100%), var(--hf-hero-bg);
  background-size: cover;
  background-position: center;
}
.hf-hero--home-band .hf-hero-card {
  box-shadow: 0 22px 52px rgba(15, 23, 42, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.72);
  background: rgba(253, 254, 254, 0.98);
}
.hf-hero--home-band .hf-eyebrow {
  background: rgba(255, 255, 255, 0.72);
  border-color: rgba(255, 255, 255, 0.55);
}
.hf-hero.hf-hero--has-bg .container { position: relative; z-index: 1; }
.hf-hero:after { content: ""; position: absolute; inset: auto -10% -36% -10%; height: 180px; background: var(--hf-bg); border-radius: 50% 50% 0 0; }
.hf-hero h1 { font-size: clamp(2.25rem, 5vw, 4.9rem); line-height: 1.12; font-weight: 800; letter-spacing: -.03em; color: var(--hf-ink); }
.hf-hero .lead { color: rgba(15, 23, 42, 0.82); max-width: 720px; }
.hf-eyebrow, .hf-eyebrow-dark { display: inline-flex; align-items: center; gap: .35rem; border-radius: 999px; padding: .35rem .75rem; font-weight: 800; font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; }
.hf-eyebrow { background: rgba(255,255,255,.55); color: var(--hf-ink); border: 1px solid rgba(255,255,255,.45); }
.hf-eyebrow-dark { background: rgba(255,255,255,.14); color: #ecfeff; }
.hf-hero-card, .hf-content-card, .hf-side-card, .hf-filter-bar, .hf-project-card, .hf-news-card { background: var(--hf-card); border: 1px solid var(--hf-border); border-radius: var(--hf-radius); box-shadow: var(--hf-shadow); }
.hf-hero-card { padding: 30px; color: var(--hf-text); position: relative; z-index: 1; }
.hf-pulse-icon { width: 58px; height: 58px; border-radius: 20px; background: rgba(20,184,166,.13); color: var(--hf-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.75rem; }
.hf-progress-list { display: grid; gap: 12px; }
.hf-progress-list div { border: 1px solid var(--hf-border); border-radius: 18px; padding: 14px 16px; display: flex; justify-content: space-between; gap: 12px; }
.hf-progress-list span { color: var(--hf-muted); }
.hf-section-negative { margin-top: -70px; position: relative; z-index: 2; }
.hf-section { padding-top: 64px; padding-bottom: 20px; }
.hf-soft-section { background: linear-gradient(180deg, rgba(20,184,166,.07), rgba(14,165,233,.07)); padding: 72px 0; margin-top: 54px; }
.hf-section-title { display: flex; align-items: end; justify-content: space-between; gap: 18px; margin-bottom: 24px; }
.hf-section-title span { color: var(--hf-primary); font-weight: 900; text-transform: uppercase; font-size: .78rem; letter-spacing: .06em; }
.hf-section-title h2 { font-weight: 950; letter-spacing: -.03em; margin: .25rem 0 0; }
.hf-section-title a { color: var(--hf-primary-dark); font-weight: 800; text-decoration: none; }
.hf-stat-card { background: #fff; border: 1px solid var(--hf-border); border-radius: 22px; padding: 22px; box-shadow: var(--hf-soft-shadow); min-height: 132px; }
.hf-stat-card i { color: var(--hf-primary); font-size: 1.8rem; }
.hf-stat-card span { display: block; color: var(--hf-muted); margin-top: 14px; }
.hf-stat-card strong { display: block; font-size: 1.8rem; font-weight: 950; }
.hf-project-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.hf-project-card:hover { transform: translateY(-4px); box-shadow: 0 22px 48px rgba(15,23,42,.13); }
.hf-project-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(20,184,166,.18), rgba(14,165,233,.12)); overflow: hidden; }
.hf-project-cover img, .hf-gallery-tile img, .hf-gallery-card img, .hf-detail-cover { width: 100%; height: 100%; object-fit: cover; display: block; }
.hf-project-card h3 { font-size: 1.1rem; line-height: 1.35; font-weight: 950; min-height: 3rem; }
.hf-project-card p { color: var(--hf-muted); min-height: 4.8rem; }
.hf-badge, .hf-status, .hf-file-type { border-radius: 999px; padding: .28rem .7rem; font-size: .75rem; font-weight: 900; }
.hf-badge { background: rgba(20,184,166,.12); color: var(--hf-primary-dark); }
.hf-status { background: rgba(167,216,255,.22); color: #2d6a87; }
.hf-file-type { background: rgba(167,216,255,.28); color: #3d6fa8; display: inline-flex; }
.hf-project-meta { display: flex; flex-wrap: wrap; gap: 12px; color: var(--hf-muted); font-size: .9rem; }
.hf-news-row { background: #fff; border: 1px solid var(--hf-border); border-radius: 22px; padding: 16px; display: flex; gap: 16px; text-decoration: none; color: inherit; box-shadow: var(--hf-soft-shadow); }
.hf-news-row:hover { color: inherit; transform: translateX(2px); }
.hf-datebox { width: 62px; height: 62px; border-radius: 18px; background: linear-gradient(135deg, var(--hf-primary), var(--hf-sky)); color: #fff; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 1.45rem; font-weight: 950; }
.hf-datebox small { font-size: .65rem; font-weight: 700; }
.hf-news-row strong { display: block; font-weight: 950; }
.hf-news-row em { display: block; color: var(--hf-muted); font-style: normal; font-size: .92rem; margin-top: .25rem; }
.hf-document-panel { border-radius: var(--hf-radius); padding: 28px; color: #fff; background: linear-gradient(135deg, #3d7a72, #2d5c5a); box-shadow: var(--hf-shadow); }
.hf-doc-link { display: flex; justify-content: space-between; gap: 14px; align-items: center; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.14); padding: 13px 0; }
.hf-doc-link:hover { color: #ccfbf1; }
.hf-doc-link b { background: rgba(255,255,255,.14); border-radius: 999px; padding: .2rem .55rem; font-size: .75rem; }
.hf-gallery-tile, .hf-gallery-card { position: relative; overflow: hidden; border-radius: 22px; border: 0; padding: 0; background: #fff; box-shadow: var(--hf-soft-shadow); text-align: left; width: 100%; }
.hf-gallery-tile img, .hf-gallery-card img { aspect-ratio: 4/3; }
.hf-gallery-tile div, .hf-gallery-card span { display: block; padding: 14px 16px; font-weight: 900; }
.hf-gallery-card small { display: block; color: var(--hf-muted); padding: 0 16px 14px; }
.hf-cta-card { border-radius: 32px; padding: 38px; color: #fff; background: radial-gradient(circle at top right, rgba(255,255,255,.22), transparent 38%), linear-gradient(135deg, var(--hf-pastel-1), #4a8a7e); display: flex; align-items: center; justify-content: space-between; gap: 24px; box-shadow: var(--hf-shadow); }
.hf-page-hero { padding: 70px 0; background: linear-gradient(135deg, var(--hf-pastel-1), var(--hf-sky-1)); color: var(--hf-ink); }
.hf-page-hero span { color: #334155; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; }
.hf-page-hero h1 { font-weight: 950; letter-spacing: -.035em; font-size: clamp(2rem, 4vw, 4rem); color: var(--hf-ink); }
.hf-page-hero p { max-width: 760px; color: rgba(15,23,42,.78); font-size: 1.12rem; }
.hf-filter-bar { padding: 20px; }
.hf-empty { background: #fff; border: 1px dashed rgba(15,118,110,.3); border-radius: var(--hf-radius); padding: 50px 20px; text-align: center; color: var(--hf-muted); }
.hf-empty i { font-size: 3rem; color: var(--hf-primary); }
.hf-news-card { padding: 24px; height: 100%; }
.hf-news-card h2 { margin-top: 14px; font-size: 1.2rem; font-weight: 950; }
.hf-news-card p { color: var(--hf-muted); }
.hf-content-card, .hf-side-card { padding: 28px; }
.hf-content-card h2, .hf-side-card h2 { font-size: 1.35rem; font-weight: 950; margin-top: 0; }
.hf-detail-cover { border-radius: 28px; box-shadow: var(--hf-shadow); aspect-ratio: 16/9; background: #fff; }
.hf-side-card dl { display: grid; gap: 12px; }
.hf-side-card dt { color: var(--hf-muted); font-size: .82rem; }
.hf-side-card dd { margin: 0; font-weight: 800; }
.hf-doc-tabs .nav-link { border-radius: 999px; color: var(--hf-primary-dark); font-weight: 800; }
.hf-doc-tabs .nav-link.active { background: var(--hf-primary); }
.hf-doc-list { display: grid; gap: 12px; }
.hf-doc-item { background: #fff; border: 1px solid var(--hf-border); border-radius: 20px; padding: 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; box-shadow: var(--hf-soft-shadow); }
.hf-doc-item strong { display: block; margin-top: 6px; }
.hf-doc-item small { color: var(--hf-muted); }
.hf-person-card { background: #fff; border: 1px solid var(--hf-border); border-radius: var(--hf-radius); padding: 26px; height: 100%; box-shadow: var(--hf-soft-shadow); text-align: center; }
.hf-avatar { width: 76px; height: 76px; border-radius: 28px; margin: 0 auto 16px; display: flex; align-items: center; justify-content: center; background: rgba(20,184,166,.12); color: var(--hf-primary); font-size: 2rem; }
.hf-person-card h3 { font-size: 1.05rem; font-weight: 950; }
.hf-person-card strong { color: var(--hf-primary-dark); display: block; margin-bottom: .5rem; }
.hf-person-card p { color: var(--hf-muted); margin: 0; }
.hf-feature-list { display: grid; gap: 12px; }
.hf-feature-list span { display: flex; gap: 10px; align-items: center; font-weight: 800; }
.hf-feature-list i { color: var(--hf-primary); }
.hf-map-placeholder { height: 220px; border-radius: 24px; background: linear-gradient(135deg, rgba(20,184,166,.12), rgba(14,165,233,.12)); display: flex; align-items: center; justify-content: center; flex-direction: column; color: var(--hf-primary-dark); font-weight: 900; margin-top: 20px; }
.hf-map-placeholder i { font-size: 2.4rem; }
.hf-footer { background: linear-gradient(180deg, #1e293b 0%, var(--hf-ink) 100%); color: #fff; padding: 54px 0 0; border-top: 4px solid rgba(124,198,182,.35); }
.text-white-75 { color: rgba(255,255,255,.75); }
.hf-footer-links a { color: rgba(255,255,255,.76); text-decoration: none; display: inline-block; padding: .25rem 0; }
.hf-footer-links a:hover { color: #fff; }
.hf-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); color: rgba(255,255,255,.65); margin-top: 34px; padding: 20px 0; font-size: .9rem; }
@media (max-width: 991.98px) {
  .hf-hero { padding: 64px 0 110px; }
  .hf-hero--home-band .hf-hero-card {
    margin-top: 0.5rem;
  }
  .hf-section-title, .hf-cta-card { align-items: flex-start; flex-direction: column; }
  .hf-doc-item { align-items: stretch; flex-direction: column; }
  .hf-navbar .nav-link { border-radius: 14px; }
}

/* Phase 3.1: compact single-row public navbar + logo/favicons + citizen exercise check-in cards */
.hf-navbar { min-height: 66px; }
.hf-navbar-container { gap: 18px; }
.hf-logo-brand { flex: 0 0 auto; padding: .35rem 0 !important; margin-right: 1rem; }
.hf-logo-img {
    display: block;
    width: auto !important;
    height: 48px !important;
    max-height: 48px !important;
    object-fit: contain;
    object-position: left center;
}
.hf-nav-menu { gap: .25rem; }
.hf-navbar .nav-link { white-space: nowrap; font-size: .94rem; padding: .48rem .68rem !important; line-height: 1.2; }
.hf-login-btn { white-space: nowrap; padding: .55rem 1rem !important; border-radius: 14px; }
.hf-nav-dropdown { border: 1px solid var(--hf-border); border-radius: 18px; padding: .55rem; box-shadow: var(--hf-shadow); }
.hf-nav-dropdown .dropdown-item { border-radius: 12px; font-weight: 700; padding: .62rem .8rem; color: #334155; }
.hf-nav-dropdown .dropdown-item:hover { background: rgba(20,184,166,.12); color: var(--hf-primary-dark); }
.hf-exercise-card, .hf-report-card { background: #fff; border: 1px solid var(--hf-border); border-radius: var(--hf-radius); box-shadow: var(--hf-soft-shadow); padding: 24px; display: flex; flex-direction: column; }
.hf-exercise-card h3, .hf-report-card h3 { font-size: 1.15rem; font-weight: 950; margin: 18px 0 12px; line-height: 1.35; }
.hf-exercise-card p, .hf-report-card p { color: var(--hf-muted); margin-bottom: .65rem; }
.hf-exercise-icon { width: 52px; height: 52px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--hf-primary-dark); background: rgba(20,184,166,.12); font-size: 1.65rem; }
.hf-checkin-badge { display: inline-flex; align-items: center; border-radius: 999px; padding: .35rem .7rem; color: #047857; background: #ecfdf5; border: 1px solid #bbf7d0; font-size: .78rem; font-weight: 900; }
.hf-checkin-soft-warn { background: rgba(254, 252, 232, 0.92) !important; border-color: rgba(250, 204, 21, 0.35) !important; }
.hf-consent-box { box-shadow: 0 8px 28px rgba(15, 118, 110, 0.06); }
.hf-consent-check { border-radius: 10px !important; border: 2px solid rgba(45, 212, 191, 0.55) !important; }
.hf-exercise-actions { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.hf-report-card i { width: 54px; height: 54px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--hf-primary), var(--hf-sky)); font-size: 1.55rem; box-shadow: 0 12px 24px rgba(15,118,110,.22); }

/* Phase 4.2 enterprise public project detail */
.hf-project-detail-hero { background: linear-gradient(135deg, var(--hf-pastel-1) 0%, #6bb8a8 45%, #5a9aa8 100%); color: #fff; padding: 42px 0; }
.hf-detail-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .68fr); gap: 28px; align-items: center; }
.hf-detail-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.hf-detail-hero-grid h1 { font-size: clamp(1.7rem, 3vw, 3rem); font-weight: 950; line-height: 1.15; margin-bottom: 12px; }
.hf-detail-hero-grid p { color: rgba(255,255,255,.86); font-size: 1.02rem; line-height: 1.75; margin-bottom: 18px; }
.hf-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hf-detail-hero-image { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 22px; background: #fff; box-shadow: 0 18px 44px rgba(0,0,0,.24); }
.hf-project-detail-wrap { padding-top: 30px; padding-bottom: 22px; }
.hf-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 22px; align-items: start; }
.hf-detail-layout.has-timeline-col { grid-template-columns: 220px minmax(0, 1fr) 300px; gap: 18px; }
.hf-detail-timeline-col { min-width: 0; }
.hf-detail-timeline-card { padding: 16px; position: sticky; top: 86px; max-height: calc(100vh - 100px); overflow-y: auto; }
.hf-detail-main { display: grid; gap: 14px; min-width: 0; }
.hf-detail-sidebar { min-width: 0; max-width: 100%; overflow: hidden; }
.hf-detail-card, .hf-detail-side-card { background: #fff; border: 1px solid var(--hf-border); border-radius: 18px; box-shadow: var(--hf-soft-shadow); padding: 20px; }
.hf-detail-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; margin-bottom: 12px; border-bottom: 1px solid var(--hf-border); padding-bottom: 10px; }
.hf-detail-section-title span { color: var(--hf-primary); font-size: .76rem; font-weight: 950; text-transform: uppercase; letter-spacing: .04em; }
.hf-detail-section-title h2 { font-size: 1.2rem; font-weight: 950; margin: 0; }
.hf-detail-card p { color: #334155; line-height: 1.78; margin-bottom: 0; }
.hf-summary-grid, .hf-mini-metrics, .hf-indicator-grid, .hf-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.hf-summary-grid div, .hf-mini-metrics div, .hf-indicator-grid div, .hf-contact-grid div { border: 1px solid var(--hf-border); border-radius: 14px; background: #f8fafc; padding: 12px 14px; }
.hf-summary-grid span, .hf-mini-metrics span, .hf-indicator-grid span, .hf-contact-grid span { display: block; color: var(--hf-muted); font-size: .78rem; font-weight: 800; }
.hf-summary-grid strong, .hf-mini-metrics strong, .hf-indicator-grid strong, .hf-contact-grid strong { display: block; color: var(--hf-text); font-weight: 950; margin-top: 4px; }
.hf-clean-list { margin: 0; padding-left: 1.35rem; display: grid; gap: 8px; }
.hf-process-list { display: grid; gap: 10px; }
.hf-process-list article { display: grid; grid-template-columns: 120px 1fr; gap: 14px; border: 1px solid var(--hf-border); border-radius: 14px; padding: 14px; background: #f8fafc; }
.hf-process-list b { color: var(--hf-primary-dark); font-size: .8rem; }
.hf-process-list h3 { font-size: 1rem; font-weight: 950; margin: 0 0 4px; }
.hf-process-list p { margin: 0; }
.hf-process-list small { color: var(--hf-muted); }
.hf-detail-table { margin-bottom: 0; }
.hf-detail-table thead th { background: #f8fafc; color: #334155; font-size: .82rem; white-space: nowrap; }
.hf-attachment-list { display: grid; gap: 8px; }
.hf-attachment-list a { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; color: inherit; text-decoration: none; border: 1px solid var(--hf-border); border-radius: 14px; padding: 12px; background: #f8fafc; }
.hf-attachment-list i { color: var(--hf-primary); font-size: 1.2rem; }
.hf-attachment-list small { color: var(--hf-muted); }
.hf-detail-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.hf-detail-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 14px; border: 1px solid var(--hf-border); background: #f8fafc; }
.hf-detail-sidebar { position: sticky; top: 86px; display: grid; gap: 14px; }
.hf-detail-side-card h2 { font-size: 1.05rem; font-weight: 950; margin-bottom: 12px; }
.hf-detail-side-card dl { display: grid; gap: 10px; margin-bottom: 16px; }
.hf-detail-side-card dt { color: var(--hf-muted); font-size: .78rem; margin: 0; }
.hf-detail-side-card dd { margin: 0; font-weight: 850; }
.hf-qr-box { border: 1px dashed rgba(15,118,110,.35); border-radius: 16px; background: #f0fdfa; min-height: 160px; display: grid; place-items: center; text-align: center; padding: 16px; color: var(--hf-primary-dark); overflow-wrap: anywhere; }
.hf-qr-box i { font-size: 4rem; line-height: 1; }
.hf-qr-box span { display: block; font-size: .78rem; color: var(--hf-ink); }
.hf-share-row { display: flex; gap: 10px; }
.hf-share-row a { width: 42px; height: 42px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--hf-primary), var(--hf-sky)); text-decoration: none; font-size: 1.15rem; }
@media (max-width: 1199.98px) {
  .hf-detail-layout.has-timeline-col { grid-template-columns: minmax(0, 1fr) 280px; }
  .hf-detail-timeline-col { grid-column: 1 / -1; order: 3; }
  .hf-detail-timeline-card { position: static; max-height: none; }
}
@media (max-width: 991.98px) {
  .hf-detail-hero-grid, .hf-detail-layout, .hf-detail-layout.has-timeline-col { grid-template-columns: 1fr; }
  .hf-detail-sidebar { position: static; }
  .hf-detail-timeline-col { order: unset; }
  .hf-detail-hero-image { aspect-ratio: 16 / 9; }
}
@media (max-width: 575.98px) {
  .hf-project-detail-hero { padding: 28px 0; }
  .hf-summary-grid, .hf-mini-metrics, .hf-indicator-grid, .hf-contact-grid, .hf-detail-gallery { grid-template-columns: 1fr; }
  .hf-process-list article { grid-template-columns: 1fr; }
  .hf-detail-card, .hf-detail-side-card { padding: 16px; }
}
@media (min-width: 992px) and (max-width: 1199.98px) {
  .hf-logo-img { width: 205px; }
  .hf-navbar .nav-link { font-size: .88rem; padding: .42rem .5rem !important; }
  .hf-login-btn { padding: .48rem .72rem !important; }
}
@media (max-width: 991.98px) {
  .hf-logo-img {
    width: auto !important;
    height: 48px !important;
    max-height: 48px !important;
}
  .hf-navbar .navbar-collapse { margin-top: .75rem; padding: .75rem 0 1rem; border-top: 1px solid var(--hf-border); }
  .hf-navbar .nav-link { border-radius: 14px; padding: .75rem .85rem !important; }
  .hf-login-btn { width: 100%; margin-top: .4rem; padding: .8rem 1rem !important; }
}

/* Phase 5.1 — pastel polish, exercise map strip, mobile actions */
.hf-status-pill { border-radius: 999px; padding: .3rem .75rem; font-weight: 800; font-size: .78rem; border: 1px solid rgba(124,198,182,.35); background: rgba(184,227,218,.35); color: var(--hf-ink); }
.hf-footer-social .hf-social-pill { width: 40px; height: 40px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,.08); color: #e2e8f0; text-decoration: none; transition: transform .15s ease, background .15s ease; }
.hf-footer-social .hf-social-pill:hover { background: rgba(124,198,182,.25); color: #fff; transform: translateY(-2px); }
.hf-location-list .list-group-item { background: var(--hf-surface-2); }
@media (min-width: 992px) {
  .hf-collapse-lg.collapse:not(.show),
  .hf-collapse-lg.collapsing { display: block !important; height: auto !important; visibility: visible !important; transition: none !important; }
}
@media (max-width: 991.98px) {
  .hf-mobile-actions { position: sticky; bottom: 0; z-index: 5; background: linear-gradient(180deg, transparent, var(--hf-bg) 18%); padding-top: .75rem; margin-top: auto; }
}

.hf-activity-card { background: #fff; border: 1px solid var(--hf-border); border-radius: var(--hf-radius); box-shadow: var(--hf-soft-shadow); padding: 24px; display: flex; flex-direction: column; min-height: 100%; }
.hf-activity-card h3 { font-size: 1.15rem; font-weight: 950; margin: 18px 0 12px; line-height: 1.35; }
.hf-activity-meta { display: grid; gap: 8px; color: var(--hf-muted); font-size: .92rem; }
.hf-activity-icon { width: 52px; height: 52px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; color: var(--hf-primary-dark); background: rgba(124,198,182,.18); font-size: 1.65rem; }