/* Stage 4: SAE heritage black, gold and deep-red brand update. */
:root{--sae-gold:#d59b37;--sae-red:#8e1018;--sae-black:#0a0c10}
body{background:#f7f6f3}
.top,header,.hero,.contact,footer{background-color:var(--sae-black)}
header{border-bottom:2px solid var(--sae-gold)}
.brand{display:flex;align-items:center;gap:12px}.brand .sae-logo{width:94px;height:auto;max-height:64px;object-fit:contain;mix-blend-mode:screen;border-radius:4px}
footer .brand .sae-logo{width:72px}
.hero{background:radial-gradient(circle at 80% 50%,#3a1117 0%,#111821 42%,#090b0f 100%)}
.hero h1 em,.feature h2 em,.intro h2 span{color:var(--sae-gold)}
.eyebrow,.sectionhead>a,.contactbox>a{color:#b97a20}
.btn.primary,.navcta,.mobile-action a{background:var(--sae-red);color:white}
.btn.primary:hover,.navcta:hover{background:#b51922}
.btn.secondary{border-color:var(--sae-gold)}
.hero-art{overflow:hidden;border-radius:20px;box-shadow:0 20px 60px #0009}
.hero-art img{width:100%;height:100%;object-fit:cover;object-position:center;opacity:.9}
.quickbar{background:#181b20;color:#e8c48d}
.services{background:#f4f2ed}.cards article{border-top:3px solid var(--sae-gold)}
.symbol,.steps b{color:var(--sae-red)}
.mobile-action a+a{background:#111820}
a:focus-visible,button:focus-visible,summary:focus-visible{outline-color:var(--sae-gold)}
@media(max-width:800px){.hero-art{opacity:.18;right:-12vw;top:115px;width:85vw}.brand .sae-logo{width:72px}}
@media(max-width:520px){.brand .sae-logo{width:56px}.hero-art{opacity:.13}}

/* Stage 5: accessible high-contrast header text on the dark SAE masthead. */
header,header .brand,header .brand span,header .brand small,header nav a,header .menu{color:#fff}
header .brand small{color:#f2d5a2}
header nav a:not(.navcta):hover,header nav a:not(.navcta):focus-visible{color:#ffd17a}
header .menu{border:1px solid #d59b37;border-radius:6px;padding:6px 11px;cursor:pointer}
header .navcta{color:#fff}
.top,.top span{color:#f4f0e8}.top a{color:#fff;text-decoration:underline;text-underline-offset:3px}
footer .brand,footer .brand span{color:#fff}footer .brand small{color:#f2d5a2}
@media(max-width:800px){header nav{background:#101419;border-top:1px solid #d59b37;box-shadow:0 10px 24px #0008}header nav a{color:#fff}header nav a:not(.navcta){padding:10px 0;border-bottom:1px solid #ffffff26}header .menu{color:#fff}}

/* Stage 6: responsive masthead, clear actions, and readable content. */
header{min-height:88px;height:auto;gap:16px}
header .brand{min-width:0;flex:0 1 auto}
header .brand span{overflow-wrap:anywhere}
header nav{gap:clamp(10px,2vw,30px)}
header nav a{white-space:nowrap}
header nav a:not(.navcta){color:#fff}
header nav a:not(.navcta):hover{color:#f6c66d}
header .navcta{background:#9d1720;color:#fff}
.hero .eyebrow{color:#f1c97e}
.hero .lead{color:#f4f6f8}
.hero .trust{color:#e4e7ed}
.hero .trust span:before{color:#f1c97e}
.quickbar{border-top:1px solid #d59b3750}
.sectionhead>a{color:#81500e;text-decoration:underline;text-underline-offset:3px}
.contactbox a{color:#f4d194;text-decoration:underline;text-underline-offset:3px}
footer a{color:#f4d194}
@media(max-width:1000px){header nav{gap:12px;font-size:12px}header .brand{font-size:13px}header .brand small{font-size:11px}}
@media(max-width:800px){
 header{min-height:76px;padding:10px 5%}
 header .brand{max-width:calc(100% - 64px);font-size:13px}
 header .brand small{font-size:11px}
 header nav{left:0;right:0;top:100%;padding:18px 5% 22px;max-height:calc(100dvh - 76px);overflow-y:auto}
 header nav a{white-space:normal;min-height:42px;display:flex;align-items:center}
 header .menu{flex-shrink:0;min-width:44px;min-height:44px;font-size:23px}
 .hero-inner{padding-top:75px}
 .hero-art{pointer-events:none}
}
@media(max-width:390px){header .brand .sae-logo{width:48px}header .brand{font-size:11px}header .brand small{font-size:10px}.top{gap:8px;flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Stage 7: final readability, touch-target and keyboard-focus polish. */
:root{color-scheme:light}
header .brand,header .brand:visited,header .brand span,header .brand small{opacity:1;text-shadow:0 1px 2px #000b}
header nav a,header nav a:visited{opacity:1;text-shadow:0 1px 2px #000a}
header nav a.navcta,header nav a.navcta:visited{color:#fff;background:#9d1720;text-shadow:none}
header nav a.navcta:hover,header nav a.navcta:focus-visible{background:#c5222d}
.top a,.top a:visited{color:#fff}
.hero h1,.hero h1 em{position:relative;z-index:1;text-shadow:0 2px 12px #000b}
.hero .lead,.hero .eyebrow{position:relative;z-index:1}
.hero .btn.secondary{color:#fff;background:#141920;border:2px solid #e6b45d}
.hero .btn.secondary:hover{background:#29323c}
.sectionhead>a:hover,.contactbox a:hover,footer a:hover{text-decoration-thickness:2px}
:where(a,button,summary):focus-visible{outline:3px solid #f2b544!important;outline-offset:4px!important}
.skip-link:focus{z-index:9999;background:#fff;color:#111;outline:3px solid #d59b37}
@media(max-width:800px){
 header{position:relative;z-index:100}
 header nav{z-index:101;background:#0a0c10}
 header nav a,header nav a:visited{color:#fff!important;font-size:15px;line-height:1.4}
 header nav a.navcta{background:#9d1720}
 .top{line-height:1.5}
 .hero-art{z-index:0}
 .hero-inner{position:relative;z-index:1}
 .hero .lead{color:#fff}
}
@media(max-width:520px){
 header .brand span{line-height:1.25}
 .hero h1{font-size:clamp(38px,10vw,58px)}
 .mobile-action a{min-height:48px;display:flex;align-items:center;justify-content:center}
}