:root {
    --brand-navy: #07192b;
    --brand-navy-deep: #03101c;
    --brand-navy-soft: #0d263b;
    --brand-section: #0e2438;
    --brand-card: #0b1f33;
    --brand-orange: #c8642a;
    --brand-white: #ffffff;
    --brand-steel: #a8b0b8;
    --brand-border: rgba(168, 176, 184, 0.14);
    --brand-glow: rgba(200, 100, 42, 0.1);
}

html {
    background: var(--brand-navy-deep);
}

body {
    min-height: 100vh;
    background-color: var(--brand-navy) !important;
    background-image:
        radial-gradient(circle at 18% 8%, rgba(21, 67, 98, 0.38), transparent 30rem),
        radial-gradient(circle at 86% 42%, rgba(200, 100, 42, 0.055), transparent 24rem),
        repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.018) 0 1px, transparent 1px 5px),
        repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.085) 0 1px, transparent 1px 5px) !important;
    background-position: center, center, 0 0, 0 0 !important;
    background-size: auto, auto, auto, auto !important;
    background-attachment: fixed !important;
    color: var(--brand-white) !important;
}

main {
    position: relative;
}

main::before {
    content: none;
}

.carbon-surface,
.card,
.section-card,
article[class*="bg-white"],
section[class*="bg-bone"],
div[class*="bg-bone"],
div[class*="bg-white"] {
    border-color: var(--brand-border) !important;
    background-color: var(--brand-card) !important;
    background-image: none !important;
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
    color: var(--brand-white) !important;
}

.card,
.section-card {
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

@media (hover: hover) {
    .card:hover,
    .section-card:hover {
        transform: translateY(-2px);
        border-color: rgba(200, 100, 42, 0.42) !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.32), 0 0 20px rgba(200, 100, 42, 0.1) !important;
    }
}

.glass,
header[class*="bg-bone"] {
    border-color: rgba(200, 100, 42, 0.3) !important;
    background: rgba(5, 20, 34, 0.9) !important;
    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.34) !important;
    backdrop-filter: blur(18px) saturate(120%) !important;
}

header a,
header p,
header nav,
header button {
    color: var(--brand-white) !important;
}

header p:last-child,
header nav a:not(:hover) {
    color: var(--brand-steel) !important;
}

header nav a[aria-current="page"],
header nav a.text-navy,
header nav a:hover {
    color: var(--brand-white) !important;
}

#mobile-menu {
    background: rgba(5, 20, 34, 0.97) !important;
}

#mobile-menu a {
    color: var(--brand-steel) !important;
}

#mobile-menu a:hover,
#mobile-menu a:first-child {
    color: var(--brand-white) !important;
    background: rgba(200, 100, 42, 0.12);
}

#menu-toggle {
    border-color: rgba(200, 100, 42, 0.5) !important;
}

.hero {
    background-image:
        linear-gradient(90deg, rgba(7, 25, 43, 0.97) 0%, rgba(7, 25, 43, 0.78) 50%, rgba(7, 25, 43, 0.34) 100%),
        linear-gradient(180deg, rgba(7, 25, 43, 0.2), rgba(3, 16, 28, 0.75)),
        url("/static/images/36E8E1E5-F1E7-4B9D-8A42-AAD8682919A3.jpg") !important;
}

section.bg-mist,
section.bg-navy,
section[class*="bg-mist"],
section[class*="bg-navy"] {
    background-color: rgba(14, 36, 56, 0.54) !important;
    background-image: none !important;
    border-top: 1px solid rgba(168, 176, 184, 0.06);
    border-bottom: 1px solid rgba(168, 176, 184, 0.06);
}

.home-page section.bg-mist,
.home-page section.bg-navy,
.home-page section[class*="bg-mist"],
.home-page section[class*="bg-navy"] {
    background-color: transparent !important;
    border-top-color: rgba(168, 176, 184, 0.05);
    border-bottom-color: rgba(168, 176, 184, 0.05);
}

h1,
h2,
h3,
h4,
.text-navy,
.text-ink {
    color: var(--brand-white) !important;
}

.text-navy\/70,
.text-navy\/72,
.text-navy\/76,
.text-navy\/64,
.text-navy\/58,
.text-navy\/50,
.text-ink\/72,
.text-ink\/70,
.text-ink\/68,
.text-ink\/64,
.text-ink\/55,
.text-ink\/52,
.text-ink\/50,
.text-ink\/48,
.text-ink\/45,
.text-ink\/40 {
    color: var(--brand-steel) !important;
}

p,
li {
    text-wrap: pretty;
}

.text-orange,
.text-orange2,
.text-rust,
.text-brass {
    color: var(--brand-orange) !important;
}

.bg-orange,
.bg-orange2,
.bg-rust,
a[class*="bg-orange"],
a[class*="bg-rust"] {
    background-color: var(--brand-orange) !important;
    color: var(--brand-white) !important;
    box-shadow: 0 10px 26px rgba(200, 100, 42, 0.24);
}

.bg-orange:hover,
.bg-orange2:hover,
.bg-rust:hover,
a[class*="bg-orange"]:hover,
a[class*="bg-rust"]:hover {
    background-color: #dc7439 !important;
}

a[class*="border-navy"],
a[class*="border-bone"] {
    border-color: rgba(200, 100, 42, 0.46) !important;
    color: var(--brand-white) !important;
    background: rgba(255, 255, 255, 0.025);
}

.field {
    border-color: rgba(168, 176, 184, 0.28) !important;
    background: rgba(3, 16, 28, 0.78) !important;
    color: var(--brand-white) !important;
}

.field:focus {
    border-color: var(--brand-orange) !important;
    background: rgba(4, 20, 34, 0.96) !important;
    box-shadow: 0 0 0 4px rgba(200, 100, 42, 0.17) !important;
}

.field::placeholder {
    color: rgba(168, 176, 184, 0.62) !important;
}

.field option {
    background: var(--brand-navy);
    color: var(--brand-white);
}

input[type="file"]::file-selector-button {
    background: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}

label {
    color: var(--brand-steel);
}

.message-box {
    border-color: rgba(200, 100, 42, 0.42) !important;
    background: rgba(200, 100, 42, 0.12) !important;
    color: var(--brand-white) !important;
}

.trust-card {
    color: var(--brand-white) !important;
}

.trust-card p:not(:first-child) {
    color: var(--brand-steel) !important;
}

#turnstile-widget {
    overflow: hidden;
    max-width: 100%;
    border-radius: 8px;
}

#submit-button {
    border: 1px solid rgba(200, 100, 42, 0.54);
    background: var(--brand-orange) !important;
}

#submit-button:disabled {
    border-color: rgba(168, 176, 184, 0.2);
    background: #344452 !important;
}

.filter-active,
.tab-active,
.auth-mode-active {
    border-color: var(--brand-orange) !important;
    background: var(--brand-orange) !important;
    color: var(--brand-white) !important;
}

#filters button:not(.filter-active),
[data-tab]:not(.tab-active),
[data-auth-mode]:not(.auth-mode-active) {
    border-color: rgba(168, 176, 184, 0.28) !important;
    color: var(--brand-steel) !important;
    background: rgba(7, 25, 43, 0.68) !important;
}

.portal-intro {
    background-image:
        linear-gradient(90deg, rgba(7, 25, 43, 0.97), rgba(7, 25, 43, 0.82), rgba(7, 25, 43, 0.48)),
        url("/static/images/6C4428AD-D2E7-46EB-8E5C-A97CB8CD119C.jpg") !important;
}

footer {
    border-top: 1px solid rgba(200, 100, 42, 0.26);
}

@media (max-width: 639px) {
    header .glass {
        gap: 0.55rem !important;
    }

    header img {
        width: 2.5rem !important;
        height: 2.5rem !important;
    }

    header a[href="/request-service/"] {
        padding: 0.7rem 0.85rem !important;
        font-size: 0.72rem !important;
    }

    #menu-toggle {
        padding: 0.7rem 0.75rem !important;
        font-size: 0.72rem !important;
    }

    .card,
    .section-card {
        border-radius: 0.9rem !important;
    }
}