/* ══════════════════════════════
   UTILITIES
══════════════════════════════ */
.sec { padding: 70px 0; }
.tag { display: inline-block; background: rgba(var(--green-rgb),.1); color: var(--green); border: 1px solid rgba(var(--green-rgb),.22); padding: 3px 13px; border-radius: 20px; font-size: .72rem; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; }
.hdg { font-family: var(--font-heading); letter-spacing: 2px; line-height: 1; }
.hdg-xl { font-size: clamp(2.8rem,7vw,5rem); }
.hdg-lg { font-size: clamp(2rem,4vw,3.2rem); }
.hdg-md { font-size: 2rem; }
.accent { color: var(--green); }
.divider { width: 36px; height: 3px; background: var(--green); border-radius: 2px; margin-bottom: 10px; }
.sub { color: var(--muted); font-size: .875rem; margin-bottom: 32px; }
.bc { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 22px; }
.bc a { color: var(--muted); font-size: .8rem; text-decoration: none; transition: color .2s; cursor: pointer; }
.bc a:hover { color: var(--green); }
.bc .sep { color: var(--muted); font-size: .75rem; }
.bc .cur { color: var(--text); font-size: .8rem; font-weight: 500; }
.link-arrow { color: var(--muted); font-size: .75rem; flex-shrink: 0; }
.section-label { font-size: .68rem; font-weight: 700; color: var(--green); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.section-label-muted { font-size: .7rem; font-weight: 700; color: var(--muted); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; }
.text-stroke { -webkit-text-stroke: 1px var(--green); color: transparent; }
.surface-box { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 14px; }
.card-box { background: var(--card); border: 1px solid var(--border); border-radius: 14px; padding: 32px; }
.desc-muted { color: var(--muted); font-size: .875rem; line-height: 1.8; }
.desc-muted strong { color: var(--text); }

/* ── BUTTONS ── */
.btn-g { background: var(--green); color: #000; border: none; padding: 10px 22px; border-radius: 8px; font-weight: 700; font-size: .85rem; cursor: pointer; transition: background .2s, transform .15s; display: inline-block; text-decoration: none; }
.btn-g:hover { background: var(--green-d); color: #000; transform: translateY(-1px); }
.btn-o { background: transparent; border: 1px solid rgba(var(--green-rgb),.35); color: var(--green); padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: .85rem; cursor: pointer; transition: background .2s; display: inline-block; text-decoration: none; }
.btn-o:hover { background: rgba(var(--green-rgb),.08); color: var(--green); }
.btn-ghost { background: transparent; border: 1px solid var(--border); color: var(--text); padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: .8rem; cursor: pointer; transition: border-color .2s, color .2s; display: inline-block; }
.btn-ghost:hover { border-color: var(--green); color: var(--green); }
.btn-sm { padding: 6px 12px !important; font-size: .75rem !important; }

/* ── GSAP ── */
.gs-fade { opacity: 0; transform: translateY(20px); }
.gs-left { opacity: 0; transform: translateX(-20px); }
.gs-right { opacity: 0; transform: translateX(20px); }

/* ── RESPONSIVE ── */
@media(max-width:576px){
  .pb-portrait { width: 110px; }
  .pbh-portrait { width: 140px; min-height: 260px; }
  .pbh-info { padding: 18px 16px; }
  .pbh-name { font-size: 1.8rem; }
}