:root { --teal-900: #075f6b; --teal-800: #087786; --teal-700: #098b9b; --teal-100: #dff3f5; --teal-050: #f2fafb; --ink: #203136; --muted: #5c6c71; --line: #c8dde1; --white: #fff; --shadow: 0 8px 24px rgba(12, 82, 92, .11); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; color: var(--ink); background: #f7fbfc; font-family: Arial, Helvetica, sans-serif; line-height: 1.5; } a { color: var(--teal-900); } a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #f2b134; outline-offset: 3px; } .skip-link { position: fixed; left: 1rem; top: -5rem; z-index: 1000; padding: .7rem 1rem; color: #fff; background: #222; border-radius: .35rem; } .skip-link:focus { top: 1rem; } .site-header { position: sticky; top: 0; z-index: 100; color: #fff; background: linear-gradient(135deg, var(--teal-900), var(--teal-800)); box-shadow: 0 3px 15px rgba(0,0,0,.18); } .header-inner { max-width: 1200px; margin: auto; padding: .7rem 1rem; display: flex; align-items: center; gap: 1rem; } .brand { color: #fff; text-decoration: none; font-weight: 700; font-size: 1.08rem; } .brand a { color: #fff; text-decoration: none; } .brand a:hover { text-decoration: underline; } .brand-separator { margin: 0 .3rem; } .menu-toggle { display: none; margin-left: auto; border: 1px solid rgba(255,255,255,.55); background: transparent; color: white; border-radius: .4rem; padding: .45rem .65rem; font: inherit; font-weight: 700; cursor: pointer; } .main-nav { margin-left: auto; } .main-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .25rem; } .main-nav a { display: block; padding: .48rem .68rem; color: #fff; text-decoration: none; border-radius: .35rem; font-size: .93rem; } .main-nav a:hover { background: rgba(255,255,255,.16); } .hero { background: radial-gradient(circle at top right, #d8f0f3, transparent 45%), var(--white); border-bottom: 1px solid var(--line); } .hero-inner { max-width: 1100px; margin: auto; padding: 3rem 1rem 2.35rem; text-align: center; } .eyebrow { margin: 0 0 .45rem; color: var(--teal-800); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .8rem; } h1 { margin: 0; color: var(--teal-900); font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.08; } .hero p { max-width: 760px; margin: 1rem auto 0; color: var(--muted); font-size: 1.08rem; } .quick-links { max-width: 1100px; margin: -1.15rem auto 0; padding: 0 1rem; position: relative; } .quick-links-inner { display: flex; flex-wrap: wrap; justify-content: center; gap: .55rem; padding: .85rem; border: 1px solid var(--line); border-radius: .8rem; background: #fff; box-shadow: var(--shadow); } .quick-links a { min-width: 112px; padding: .63rem .85rem; text-align: center; text-decoration: none; color: #fff; background: var(--teal-800); border-radius: .42rem; font-weight: 700; } .quick-links a:hover { background: var(--teal-900); } main { max-width: 1200px; margin: auto; padding: 2rem 1rem 3rem; } .search-wrap { max-width: 720px; margin: 0 auto 1.6rem; } .search-label { display: block; margin-bottom: .4rem; font-weight: 700; color: var(--teal-900); } .search-row { display: flex; gap: .5rem; } #resourceSearch { width: 100%; padding: .78rem .9rem; border: 1px solid #9bbfc5; border-radius: .45rem; background: #fff; font: inherit; } #clearSearch { padding: .7rem .9rem; border: 1px solid #9bbfc5; border-radius: .45rem; background: #fff; color: var(--teal-900); font: inherit; cursor: pointer; } #clearSearch:hover { background: var(--teal-050); } #searchStatus { min-height: 1.35rem; margin: .45rem 0 0; color: var(--muted); font-size: .92rem; } .card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem; } .card-grid.single-card { display: block; max-width: 900px; margin: 0 auto; } .resource-card { overflow: hidden; border: 1px solid var(--line); border-radius: .8rem; background: #fff; box-shadow: var(--shadow); } .card-heading { margin: 0; padding: 1rem 1.1rem; color: #fff; background: linear-gradient(135deg, var(--teal-800), var(--teal-700)); font-size: 1.18rem; line-height: 1.28; } .card-body { padding: .45rem 1rem .85rem; } .card-body ul { margin: 0; padding: 0; list-style: none; } .card-body li + li { border-top: 1px solid #e5eff1; } .card-body a { position: relative; display: block; padding: .72rem 1.45rem .72rem .15rem; text-decoration: none; font-weight: 600; } .card-body a::after { content: "›"; position: absolute; right: .2rem; top: .6rem; font-size: 1.35rem; color: var(--teal-700); } .card-body a:hover { color: #034650; text-decoration: underline; } .resource-card[hidden] { display: none; } .notice { margin: 2rem 0 0; padding: 1rem 1.1rem; border-left: 5px solid var(--teal-700); background: var(--teal-050); border-radius: .3rem; color: var(--muted); } .site-footer { padding: 1.6rem 1rem; text-align: center; color: #d8edf0; background: #063f47; font-size: .9rem; } .site-footer a { color: #fff; } .site-footer p { margin: .35rem auto; max-width: 900px; } @media (max-width: 820px) { .header-inner {  flex-wrap: wrap; }  .menu-toggle {  display: block; }  .main-nav {  display: none;  width: 100%;  margin-left: 0; }  .main-nav.open {  display: block; }  .main-nav ul {  display: grid;  grid-template-columns: repeat(2, minmax(0, 1fr)); }  .main-nav a {  text-align: center;  background: rgba(255,255,255,.09); }  .card-grid {  grid-template-columns: 1fr; } } @media (max-width: 500px) { .hero-inner {  padding-top: 2.2rem; }  .quick-links-inner {  display: grid;  grid-template-columns: 1fr 1fr; }  .quick-links a {  min-width: 0; }  .search-row {  align-items: stretch; } } @media print { .site-header, .quick-links, .search-wrap, .site-footer {  display: none; }  body {  background: #fff; }  main {  max-width: none;  padding: 0; }  .card-grid {  display: block; }  .resource-card {  break-inside: avoid;  margin-bottom: 1rem;  box-shadow: none; } } /* Compact card layout to reduce vertical scrolling */.card-grid { gap: .85rem; } .card-heading { padding: .72rem .9rem; font-size: 1.08rem; line-height: 1.2; } .card-body { padding: .25rem .85rem .5rem; } .card-body a { padding: .48rem 1.25rem .48rem .1rem; line-height: 1.28; font-size: .96rem; } .card-body a::after { top: .34rem; } main { padding-top: 1.45rem; padding-bottom: 2rem; } .search-wrap { margin-bottom: 1.1rem; } .notice { margin-top: 1.35rem; padding: .8rem 1rem; } @media (max-width: 820px) { .card-grid {  gap: .7rem; }  .card-heading {  padding: .68rem .82rem; }  .card-body a {  padding-top: .46rem;  padding-bottom: .46rem; } } .specialist-title { display: block; padding: .48rem .1rem .18rem; color: var(--teal-800); font-weight: 700; } .specialist-links { padding-left: 1rem; } .specialist-links a { padding-top: .35rem; padding-bottom: .35rem; } .index-button-wrap { max-width: 720px; margin: 0 auto 1.25rem; text-align: center; } .index-button { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .72rem 1.15rem; color: #fff; background: var(--teal-800); border: 1px solid var(--teal-900); border-radius: .5rem; box-shadow: 0 4px 12px rgba(12, 82, 92, .16); font-weight: 700; text-decoration: none; } .index-button:hover { color: #fff; background: var(--teal-900); text-decoration: none; } .index-button-icon { font-size: 1.2rem; line-height: 1; } .inline-links a { display: inline; padding: 0; font-weight: 600; } .inline-links a::after { content: none; } .inline-links { display: block; padding: .48rem 1.25rem .48rem .1rem; line-height: 1.28; font-size: .96rem; } .inline-links a { display: inline; padding: 0; font-weight: 600; } .inline-links a::after { content: none; }