/* Explain: App-specific layout utilities for containers, sections, and background styles. */
.container {
    width: 100%;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.section { padding: 4.25rem 0; }
.section-tight { padding: 3rem 0; }

@media (min-width: 768px) {
    .container { padding-left: 2rem; padding-right: 2rem; }
    .section { padding: 6rem 0; }
    .section-tight { padding: 4rem 0; }
}

.bg-navy {
    background: linear-gradient(155deg, var(--navy-900) 0%, var(--navy-700) 58%, var(--navy-600) 100%);
    color: #fff;
}

.bg-surface { background: var(--surface-color); }

.on-dark h1, .on-dark h2, .on-dark h3, .on-dark h4 { color: #fff; }
.on-dark p { color: rgba(255, 255, 255, .76); }

.gold-rule {
    width: 58px;
    height: 2px;
    background: linear-gradient(90deg, var(--gold-500), rgba(201, 162, 39, 0));
}

/* Hero */
.hero { position: relative; overflow: hidden; background: var(--navy-900); }
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(102deg, rgba(5, 14, 31, .96) 0%, rgba(5, 14, 31, .86) 42%, rgba(11, 37, 69, .58) 100%);
}
.hero-accent {
    position: absolute;
    right: -12%;
    top: -20%;
    width: 46rem;
    height: 46rem;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 39, .16) 0%, rgba(201, 162, 39, 0) 68%);
    pointer-events: none;
}

/* Page hero */
.page-hero { position: relative; overflow: hidden; background: var(--navy-900); }
.page-hero-bg { position: absolute; inset: 0; }
.page-hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.page-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, rgba(5, 14, 31, .95) 0%, rgba(5, 14, 31, .8) 55%, rgba(11, 37, 69, .62) 100%);
}

.stack-relative { position: relative; z-index: 2; }