/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;600&family=Montserrat:wght@300;400;500;600&display=swap');
.hh-root { font-family: 'Montserrat', sans-serif; background: #0a0a0a; color: #e8e0d0; margin: 0; padding: 0; }
.serif { font-family: 'Cormorant Garamond', serif; }
.gold { color: #c9a84c; text-shadow: 0 0 10px rgba(201, 168, 76, 0.4); }
.gold-light { color: #e8c96d; text-shadow: 0 0 10px rgba(232, 201, 109, 0.4); }
.divider { width: 60px; height: 2px; background: linear-gradient(90deg, #c9a84c, #e8c96d); margin: 0 auto 1.5rem; box-shadow: 0 0 10px rgba(201, 168, 76, 0.5); }
.divider-left { margin: 0 0 1.5rem; }
.btn-gold { background: linear-gradient(135deg, #c9a84c, #a8863a); color: #0a0a0a; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 2px; text-transform: uppercase; border: none; padding: 14px 32px; cursor: pointer; transition: all 0.2s; box-shadow: 0 0 15px rgba(201, 168, 76, 0.3); }
.btn-gold:hover { background: linear-gradient(135deg, #e8c96d, #c9a84c); box-shadow: 0 0 8px rgba(232, 201, 109, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.5); }
.btn-outline { background: transparent; color: #c9a84c; font-family: 'Montserrat', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 2px; text-transform: uppercase; border: 1px solid #c9a84c; padding: 13px 32px; cursor: pointer; transition: all 0.2s; box-shadow: inset 0 0 10px rgba(201, 168, 76, 0.1), 0 0 10px rgba(201, 168, 76, 0.1); text-shadow: 0 0 5px rgba(201, 168, 76, 0.3); }
.btn-outline:hover { background: rgba(201, 168, 76, 0.15); box-shadow: inset 0 0 5px rgba(232, 201, 109, 0.5), 0 0 5px rgba(232, 201, 109, 0.5); color: #e8c96d; border-color: #e8c96d; text-shadow: 0 0 5px rgba(232, 201, 109, 0.5); }
.card-dark { background: #111; border: 1px solid #c9a84c33; padding: 2rem; }
.card-dark:hover { border-color: #c9a84c88; box-shadow: 0 0 20px rgba(201, 168, 76, 0.1); }
.sector-tag { background: #c9a84c15; border: 1px solid #c9a84c44; color: #c9a84c; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; padding: 6px 14px; display: inline-block; margin: 4px; transition: all 0.2s; }
.sector-tag:hover { box-shadow: 0 0 10px rgba(201, 168, 76, 0.2); text-shadow: 0 0 5px rgba(201, 168, 76, 0.4); }
.stat-num { font-family: 'Cormorant Garamond', serif; font-size: 48px; font-weight: 300; color: #c9a84c; line-height: 1; text-shadow: 0 0 15px rgba(201, 168, 76, 0.4); }
.nav-link { color: #b8a88a; font-size: 11px; letter-spacing: 2px; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: all 0.2s; }
.nav-link:hover { color: #c9a84c; text-shadow: 0 0 8px rgba(201, 168, 76, 0.5); }
.section-label { font-size: 11px; letter-spacing: 3px; text-transform: uppercase; color: #c9a84c; margin-bottom: 0.75rem; text-shadow: 0 0 5px rgba(201, 168, 76, 0.3); }