.yre-section {
    position: relative;
    padding: clamp(56px, 7vw, 110px) 0;
}

.section-header {
    margin-bottom: clamp(28px, 4vw, 60px);
    text-align: center;
}

.section-title {
    color: var(--text-primary);
    font-size: clamp(1.7rem, 4vw, 2.75rem);
    line-height: 1.2;
    margin: 0 0 12px;
}

.section-subtitle {
    color: var(--text-secondary);
}

.section-badge,
.project-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--badge-bg);
    color: var(--badge-text);
    border: 1px solid var(--border-subtle);
}

.yre-btn,
.hp1-btn-primary,
.hp1-btn-secondary,
.hp2-btn,
.hp3-btn,
.hp4-btn,
.hp5-btn {
    border-radius: var(--radius-full);
    font-weight: 700;
    transition: all 0.3s ease;
}

.yre-btn-primary,
.hp1-btn-primary,
.hp2-btn,
.hp4-btn,
.hp5-btn-primary {
    background: var(--gradient-secondary);
    color: var(--text-inverse);
    border: 1px solid transparent;
}

.yre-btn-primary:hover,
.hp1-btn-primary:hover,
.hp2-btn:hover,
.hp4-btn:hover,
.hp5-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(var(--color-secondary-rgb), 0.26);
}

.yre-btn-outline,
.hp1-btn-secondary,
.hp3-btn,
.hp5-btn-outline {
    background: transparent;
    color: var(--text-inverse);
    border: 1px solid var(--border-subtle);
}

.hp1-btn-secondary:hover,
.hp3-btn:hover,
.hp5-btn-outline:hover {
    background: var(--surface-elevated);
    border-color: var(--border-hover);
}


/* HP1 hero: comfortable touch targets + vertical rhythm (WCAG ~44px, UI/UX Pro Max spacing) */

.hp1-btn-primary,
.hp1-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.85rem;
    min-height: 48px;
    box-sizing: border-box;
    line-height: 1.25;
    font-size: clamp(0.9375rem, 1.4vw, 1.0625rem);
    text-decoration: none;
}

.hp1-btn-primary svg,
.hp1-btn-secondary svg {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    stroke: currentColor !important;
    fill: none !important;
}

.hp1-btn-primary svg *,
.hp1-btn-secondary svg * {
    stroke: currentColor !important;
    fill: none !important;
}

.project-card,
.yre-stat-item,
.yre-feature-card,
.yre-testimonial-card,
.footer-contact-card {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    box-shadow: var(--yre-card-shadow);
}

.project-card:hover,
.yre-stat-item:hover,
.yre-feature-card:hover,
.footer-contact-card:hover {
    border-color: var(--border-hover);
}

.project-title,
.yre-feature-title,
.yre-testimonial-name,
.hp4-card-title,
.hp5-feature-title {
    color: var(--text-primary);
}

.project-location,
.yre-feature-desc,
.yre-testimonial-role,
.yre-testimonial-text,
.hp4-card-meta,
.hp5-feature-text {
    color: var(--text-secondary);
}

.hp1,
.hp2,
.hp3,
.hp4,
.hp5 {
    --home-accent: var(--color-secondary);
    --home-accent-contrast: var(--text-inverse);
}

.hp1-badge,
.hp2-badge,
.hp4-card-badge,
.hp5-pretitle {
    background: var(--home-accent);
    color: var(--home-accent-contrast);
}

.hp1-title span,
.hp2-search-title,
.hp3-title strong,
.hp3-label,
.hp5-title span {
    color: var(--home-accent);
}

.hp2-input,
.filter-control,
.toggle-btn {
    background: var(--surface-elevated);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
}

.hp2-input::placeholder {
    color: var(--text-secondary);
}