/* Explain: Premium component styling for cards, seals, dropdowns, and forms */
.brand-seal {
    background: linear-gradient(135deg, var(--accent-color), #f2d98b 44%, #a9872d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 12px 28px rgba(201, 166, 70, 0.22);
    font-family: var(--font-heading);
    letter-spacing: 0.04em;
}

.nav-anchor.is-active,
.vault-link.is-active {
    background: rgba(201, 166, 70, 0.18);
    color: var(--gold-soft);
}

.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.26em;
    text-transform: uppercase;
}

.eyebrow span {
    display: inline-block;
    height: 1px;
    width: 3rem;
    background: currentColor;
}

.metric-tile {
    border: 1px solid rgba(247, 241, 227, 0.12);
    border-radius: 1.25rem;
    background: rgba(247, 241, 227, 0.06);
    padding: 1rem;
    backdrop-filter: blur(12px);
}

.metric-tile strong {
    display: block;
    color: var(--gold-soft);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700;
    line-height: 1;
}

.metric-tile span {
    margin-top: 0.35rem;
    display: block;
    color: var(--ivory-muted);
    font-size: 0.72rem;
    line-height: 1.35;
}

.shield-monogram {
    clip-path: polygon(50% 0, 88% 14%, 88% 54%, 50% 100%, 12% 54%, 12% 14%);
    background:
        linear-gradient(135deg, rgba(201, 166, 70, 0.95), rgba(247, 241, 227, 0.78) 48%, rgba(151, 113, 25, 0.92)),
        radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.75), transparent 22%);
    box-shadow: var(--shadow-gold);
}

.shield-monogram span {
    color: var(--midnight-color);
    font-family: var(--font-heading);
    font-size: 8rem;
    font-weight: 700;
    line-height: 1;
    transform: translateY(-0.08em);
}

.editorial-card {
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.62);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.editorial-card h3,
.contact-note span {
    color: var(--midnight-color);
}

.editorial-card h3 {
    margin-top: 0.8rem;
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 600;
}

.editorial-card p {
    margin-top: 0.8rem;
    color: var(--text-muted);
    line-height: 1.8;
}

.section-number,
.service-index {
    color: var(--accent-color);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.24em;
}

.service-vault-card {
    min-height: 23rem;
    border: 1px solid rgba(247, 241, 227, 0.14);
    border-radius: 2rem;
    background: linear-gradient(180deg, rgba(247, 241, 227, 0.1), rgba(247, 241, 227, 0.045));
    padding: 2rem;
    transition: transform 300ms ease, border-color 300ms ease, background 300ms ease;
}

.service-vault-card:hover {
    transform: translateY(-6px);
    border-color: var(--gold-border);
    background: linear-gradient(180deg, rgba(247, 241, 227, 0.15), rgba(247, 241, 227, 0.07));
}

.service-icon {
    color: var(--gold-soft);
    font-size: 1.35rem;
}

.process-card,
.testimonial-card {
    border: 1px solid var(--border-color);
    border-radius: 2rem;
    background: rgba(255, 255, 255, 0.7);
    padding: 2rem;
    box-shadow: var(--shadow-soft);
}

.process-dot {
    display: inline-flex;
    height: 3rem;
    width: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--primary-color);
    color: var(--ivory-color);
    font-family: var(--font-heading);
    font-size: 1.4rem;
    font-weight: 700;
    box-shadow: 0 14px 30px rgba(59, 20, 95, 0.22);
}

.testimonial-card {
    background: linear-gradient(180deg, #fffdf8, rgba(255, 255, 255, 0.72));
}

.contact-note {
    display: flex;
    min-height: 5.5rem;
    align-items: center;
    gap: 1rem;
    border: 1px solid var(--border-color);
    border-radius: 1.5rem;
    background: rgba(255, 255, 255, 0.58);
    padding: 1.25rem;
    line-height: 1.6;
}

.status-success {
    border: 1px solid rgba(34, 197, 94, 0.25);
    background: rgba(34, 197, 94, 0.1);
    color: #166534;
}

.status-error {
    border: 1px solid rgba(185, 28, 28, 0.25);
    background: rgba(185, 28, 28, 0.08);
    color: #991b1b;
}