.hero { padding: 0; overflow: hidden; gap: 0; margin-top: -12px; }
.hero__media { height: 300px; background: var(--c-photo); position: relative; display: flex; align-items: flex-end; padding: 16px; }
.hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__ph { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--c-text-2); text-align: center; padding: 0 40px; font-size: 13px; }
.hero__tag { position: relative; font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-2); background: var(--c-card); padding: 6px 10px; border-radius: var(--r-pill); }
.hero__body { padding: 24px 22px; display: flex; flex-direction: column; gap: 14px; }
.hero__cta { display: flex; gap: 10px; margin-top: 6px; }
.hero__cta .btn { flex: 1; padding: 0; }
.header { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 4px; }
.wordmark { font-family: var(--f-display); font-size: 24px; font-weight: 500; letter-spacing: -0.01em; }
.tg { display: flex; gap: 14px; align-items: flex-start; }
@media (min-width: 1024px) {
  .hero { display: grid; grid-template-columns: 1fr 1fr; margin-top: 0; }
  .hero__media { order: 2; height: auto; min-height: 480px; }
  .hero__body { padding: 56px 48px; justify-content: center; gap: 20px; }
  .hero__cta .btn { flex: none; padding: 0 26px; }
  .grid-3 > .card { justify-content: space-between; }
}
.tg__icon { flex: none; width: 48px; height: 48px; border-radius: 16px; background: var(--c-accent-soft); color: var(--c-accent-text); display: flex; align-items: center; justify-content: center; }