/* Bootstrap 5 handles layout, spacing utilities and the responsive grid.
   These classes reproduce the reference's colors, type and decorative details. */
:root { --profile-gold: #e9c96b; --profile-green: #50b969; --profile-text: #f5f7f5; }
body { min-height: 100vh; min-height: 100svh; margin: 0; padding: 35px 0; background: radial-gradient(ellipse at 9% 23%, rgba(28,84,47,.42), transparent 55%), radial-gradient(ellipse at 92% 88%, rgba(107,95,48,.13), transparent 50%), #06150f; color: var(--profile-text); font-family: 'Outfit', sans-serif; -webkit-font-smoothing: antialiased; }
.profile-container { max-width: 1048px; }
.profile-card { padding: 48px; overflow: hidden; border: 1px solid rgba(176,169,99,.16); border-radius: 25px; background: radial-gradient(ellipse at 0% 100%, rgba(150,149,78,.18), transparent 45%), linear-gradient(115deg, rgba(16,44,31,.8), rgba(9,31,23,.92)); box-shadow: 0 24px 80px rgba(0,0,0,.08); }
.profile-header { gap: 48px; }
.profile-photo-wrap { width: 208px; height: 208px; padding: 6px; border-radius: 50%; background: linear-gradient(125deg, #4a824b 10%, #d0ca8e 52%, #778947 95%); }
.profile-photo { object-fit: cover; object-position: 50% 50%; border: 4px solid #0b2118; }
.profile-leaf { width: 40px; height: 40px; right: 7px; bottom: 4px; color: var(--profile-gold); background: #254a2f; border: 2px solid var(--profile-gold); font-size: 17px; }
.profile-intro { min-width: 0; }
.volunteer-label { gap: 8px; padding: 4px 12px; background: rgba(38,107,66,.18); border: 1px solid rgba(52,143,83,.2); color: var(--profile-green); font-size: 12px; line-height: 16px; letter-spacing: 1.1px; }
.volunteer-dot { width: 8px; height: 8px; background: #328253; }
.profile-name { margin-top: 12px; color: #fff; font-family: 'Syncopate', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.25; letter-spacing: -1.8px; white-space: nowrap; width: max-content; transform: scaleX(1.4); transform-origin: left center; }
.profile-name span { color: var(--profile-gold); }
.profile-title { margin-top: 8px; color: #d6cb98; font-size: 20px; line-height: 1.4; }
.profile-divider { height: 1px; margin: 32px 0; background: rgba(49,117,72,.19); }
.contact-card { padding: 17px 16px; gap: 16px; border: 1px solid rgba(37,113,66,.22); border-radius: 17px; background: rgba(4,24,17,.28); }
.contact-icon { width: 48px; height: 48px; color: var(--profile-gold); background: rgba(187,165,89,.14); border: 1px solid rgba(214,191,101,.22); font-size: 19px; }
.contact-content { flex: 1; min-width: 0; }
.contact-label { margin: 0 0 6px; color: #b7a04f; font-size: 12px; line-height: 16px; letter-spacing: .4px; }
.contact-lines { gap: 4px; }
.contact-link, .contact-address { color: var(--profile-text); font-size: 16px; line-height: 24px; }
.contact-link { overflow-wrap: anywhere; transition: color .18s ease; }
.contact-link:hover { color: var(--profile-gold); }
.contact-address { font-style: normal; }
.address-city, .social-handle { color: #ecdb9e; }
.social-links { gap: 12px; }
.social-link { width: 32px; height: 32px; flex-shrink: 0; font-size: 15px; border: 1px solid; transition: transform .18s ease, filter .18s ease; }
.social-link:hover { transform: translateY(-2px); filter: brightness(1.3); }
.social-facebook { color: #2384ff; background: rgba(15,105,221,.18); border-color: rgba(15,105,221,.4); }
.social-instagram { color: #f05b76; background: rgba(218,67,95,.19); border-color: rgba(218,67,95,.35); }
.social-x { color: #c7d2d7; background: rgba(131,149,158,.17); border-color: rgba(131,149,158,.3); }
.social-handle { margin-left: 4px; font-size: 16px; }
.profile-divider-bottom { margin: 32px 0 24px; }
.environment-note { gap: 16px; padding: 16px 24px; border: 1px solid rgba(39,135,66,.3); border-radius: 17px; background: rgba(2,23,13,.58); }
.recycle-icon { width: 40px; height: 40px; font-size: 21px; color: var(--profile-green); background: rgba(70,158,83,.19); border: 1px solid rgba(90,170,92,.3); }
.environment-note p { color: #29ad50; font-size: 14px; line-height: 1.6; }
.environment-note strong { color: var(--profile-green); }
.environment-note p span { margin-left: 8px; }
a:focus-visible { outline: 2px solid var(--profile-gold); outline-offset: 5px; border-radius: 3px; }
@media (min-width: 768px) and (max-width: 991.98px) { .profile-card { padding: 36px; } .profile-header { gap: 30px; } .profile-photo-wrap { width: 170px; height: 170px; } .profile-name { font-size: 34px; } .profile-title { font-size: 17px; } .contact-card { gap: 12px; } .contact-icon { width: 42px; height: 42px; } .contact-link, .contact-address { font-size: 15px; } }
@media (max-width: 767.98px) { body { padding: 24px 0; } .profile-container { max-width: 576px; padding-inline: 16px; } .profile-card { padding: 32px 24px; border-radius: 22px; } .profile-header { gap: 26px; } .profile-photo-wrap { width: 180px; height: 180px; } .profile-name { width: auto; transform: none; font-size: clamp(25px, 6.7vw, 40px); letter-spacing: -1px; margin-top: 15px; } .profile-title { max-width: 360px; font-size: 17px; margin-top: 12px; } .volunteer-label { font-size: 10px; letter-spacing: .9px; } .profile-divider { margin: 28px 0; } .contact-card { padding: 17px 16px; } .profile-divider-bottom { margin: 28px 0 20px; } .environment-note { padding: 16px; gap: 12px; align-items: flex-start !important; } .environment-note p { font-size: 13px; } .environment-note p span { display: block; margin: 6px 0 0; } }
@media (max-width: 374.98px) { .profile-card { padding: 28px 16px; } .contact-card { padding: 16px 12px; gap: 12px; } .contact-icon { width: 40px; height: 40px; } .contact-link, .contact-address { font-size: 14px; } .social-links { gap: 8px; } .social-handle { font-size: 14px; } }
@media (prefers-reduced-motion: reduce) { .contact-link, .social-link { transition: none; } .social-link:hover { transform: none; } }