/* Shared HTR brand layer: derived from the blue, gold, and white logo palette. */
:root { --ink: #073f67; --navy: #005783; --blue: #005783; --mist: #e7f1f6; --paper: #ffffff; --gold: #f5c518; --line: #b9d3df; }
body { background: #fff; color: #073f67; }
.topline { background: #005783; }
nav, .bar { max-width: 1600px !important; }
nav { border-bottom: 5px solid var(--gold); }
/* The supplied JPG has a white background; blend it into the white navigation instead of presenting it as a card. */
nav .brand img { width: 110px !important; height: 73px !important; object-position: center 30% !important; filter: none !important; mix-blend-mode: multiply; }
footer .brand img { width: 103px !important; height: 68px !important; filter: none !important; mix-blend-mode: normal; background: #fff; }
.navlinks a:hover, .navlinks a[aria-current="page"] { color: #005783; text-decoration: underline 3px var(--gold); text-underline-offset: 8px; }
.nav-cta, .button.primary, .button { background: #005783; color: #fff; border-radius: 0; box-shadow: none; }
.nav-cta:hover, .button.primary:hover, .button:hover { background: #073f67; }
.button.secondary { border: 2px solid #005783; color: #005783; background: #fff; border-radius: 0; }
.eyebrow, .label, .card:not(.primary) .label { color: #005783; }
.hero h1 em, .number { color: #005783; }
.art-card { border-radius: 0; border-bottom: 10px solid var(--gold); }
.help, .page-head { background: #e7f1f6; border-top: 1px solid #c3dce7; }
.page-head { padding-left: max(28px, calc((100vw - 1200px) / 2 + 28px)) !important; padding-right: max(28px, calc((100vw - 1200px) / 2 + 28px)) !important; }
.help-card, .card, .resource { border-radius: 0; border-top: 6px solid var(--gold); box-shadow: 0 8px 20px rgba(0, 87, 131, .10); }
.help-card.primary, .card.primary { background: #005783; border-top-color: var(--gold); }
.resource:hover { transform: translateY(-4px); box-shadow: 0 13px 28px rgba(0, 87, 131, .17); }
.resource .icon { background: var(--gold); color: #073f67; border-radius: 0; }
.notice, .note { border-left-color: var(--gold); background: #fff8d9; }
footer { background: #005783; border-top: 8px solid var(--gold); }
.instagram { display: inline-flex; align-items: center; gap: 8px; font-weight: 750; text-decoration: none; }
.instagram svg { width: 19px; height: 19px; flex: 0 0 auto; }
.instagram:hover { color: var(--gold); }
.page-head h1, h1, h2, h3 { color: #073f67; }
h1 { letter-spacing: -.04em !important; }
.card.primary h2, .help-card.primary-card h3 { color: #fff; }
@media (max-width: 800px) { nav { border-bottom-width: 4px; } }
@media (max-width: 480px) { nav .brand img { width: 90px !important; height: 60px !important; } footer .brand img { width: 85px !important; height: 56px !important; } }

/* Homepage: turn the supplied awareness illustration into a distinct, soft-focus backdrop. */
main#home > .hero { position: relative; isolation: isolate; max-width: none; width: 100%; margin: 10px 0 0; padding-left: max(130px, calc((100vw - 1550px)/2 + 88px)); padding-right: max(70px, calc((100vw - 1550px)/2 + 28px)); grid-template-columns: 1fr; min-height: 570px; overflow: hidden; background: #005783; border-bottom: 10px solid var(--gold); }
main#home > .hero::before { content: ""; position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.99) 16%, rgba(255,255,255,.88) 35%, rgba(255,255,255,.48) 54%, rgba(255,255,255,.10) 73%, rgba(255,255,255,0) 100%), url("TIP.png") right center / min(78vw, 950px) auto no-repeat; filter: blur(1.5px); transform: scale(1.01); }
main#home > .hero::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient(90deg, rgba(255,255,255,.10), transparent 70%); }
main#home > .hero .art-card { display: none; }
main#home > .hero h1, main#home > .hero h1 em { color: #073f67; }
main#home > .hero h1 { letter-spacing: -.04em; }
main#home > .hero .eyebrow { color: #005783; }
main#home > .hero .lead { max-width: 600px; color: #244e67; font-weight: 550; }
main#home > .hero .hero-note { color: #244e67; font-weight: 600; }
main#home > .hero .button.secondary { border-color: #005783; color: #005783; background: #fff; }
@media (max-width: 800px) { main#home > .hero { min-height: 520px; } main#home > .hero::before { background: linear-gradient(180deg, rgba(255,255,255,.92), rgba(255,255,255,.50)), url("TIP.png") 70% center / cover no-repeat; filter: blur(1px); } }