:root {
  --teal: #258e89;
  --teal-dark: #14736f;
  --teal-pale: #e4f3f1;
  --ink: #2d3d40;
  --muted: #64777a;
  --line: #d5e1e0;
  --surface: #ffffff;
  --page: #f4f7f6;
  --shell: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; color: var(--ink); background: var(--page); font-family: "Avenir Next", "Segoe UI", sans-serif; line-height: 1.5; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
.shell { width: min(calc(100% - 40px), var(--shell)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 10; top: 12px; left: 12px; padding: 10px 14px; color: #fff; background: var(--ink); transform: translateY(-160%); transition: transform 160ms ease; }
.skip-link:focus { transform: translateY(0); }
.site-header { background: #fff; border-bottom: 1px solid var(--line); }
.site-header__inner { min-height: 88px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-logo { width: 160px; max-height: 64px; object-fit: contain; object-position: left center; }
.site-header__label { padding: 7px 12px; color: var(--teal-dark); background: var(--teal-pale); border: 1px solid #c4e2de; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hero { position: relative; overflow: hidden; color: #fff; background: linear-gradient(118deg, #14736f, #43aaa3); }
.hero__inner { position: relative; min-height: 290px; display: grid; align-content: center; padding-block: 46px; }
.hero__ring { position: absolute; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; }
.hero__ring--one { width: 430px; height: 430px; right: -100px; top: -220px; box-shadow: 0 0 0 70px rgba(255,255,255,.035); }
.hero__ring--two { width: 210px; height: 210px; right: 23%; bottom: -150px; }
.eyebrow { margin: 0 0 12px; font-size: .77rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow--dark { color: var(--teal-dark); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 720px; margin-bottom: 16px; font-size: clamp(2.4rem, 5vw, 4.5rem); line-height: 1.05; letter-spacing: 0; }
.hero__title-row { display: flex; align-items: center; gap: clamp(24px, 5vw, 64px); }
.hero__title-row h1 { flex: 1; }
.hero__tips-logo { width: min(180px, 22vw); max-height: 140px; object-fit: contain; }
.hero__lede { max-width: 620px; margin: 0; color: rgba(255,255,255,.9); font-size: 1.1rem; }
.organization-section { padding: 70px 0 78px; background: var(--surface); }
.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 30px; margin-bottom: 34px; }
.section-heading h2, .process-section h2 { margin: 0; font-size: clamp(1.85rem, 3.4vw, 2.8rem); line-height: 1.12; letter-spacing: 0; }
.section-heading__note { max-width: 310px; margin: 0 0 3px; color: var(--muted); }
.organization-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.organization-card { position: relative; min-height: 250px; display: grid; grid-template-rows: 1fr auto; padding: 22px; overflow: hidden; text-decoration: none; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 0 rgba(24,75,72,.025); transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease; }
.organization-card--wide { grid-column: span 2; }
.organization-card::before { content: ""; position: absolute; inset: 0 22px auto; height: 4px; background: var(--teal); transform: scaleX(0); transform-origin: left; transition: transform 180ms ease; }
.state-illustration, .organization-logo { min-height: 140px; display: grid; place-items: center; padding: 6px 10px 16px; }
.state-illustration svg { width: 100%; max-width: 215px; height: 132px; overflow: visible; }
.state-illustration path { fill: var(--teal-pale); stroke: var(--teal); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 180ms ease; }
.state-illustration .state-shape { width: 100%; max-width: 215px; height: 132px; overflow: visible; color: var(--teal); }
.state-illustration .state-shape path { fill: var(--teal-pale); stroke: currentColor; stroke-width: 2.1; stroke-linejoin: round; vector-effect: non-scaling-stroke; transition: fill 180ms ease; }
.organization-logo img { width: min(210px, 100%); max-height: 104px; object-fit: contain; }
.organization-card__content { display: grid; gap: 2px; padding-right: 44px; }
.organization-card__name { font-size: 1.1rem; font-weight: 750; }
.organization-card__action { color: var(--muted); font-size: .88rem; }
.organization-card__arrow { position: absolute; right: 18px; bottom: 18px; width: 34px; height: 34px; display: grid; place-items: center; color: var(--teal-dark); background: var(--teal-pale); border-radius: 50%; font-size: 1.25rem; transition: transform 180ms ease, color 180ms ease, background 180ms ease; }
.organization-card:hover, .organization-card:focus-visible { border-color: #7bbdb8; box-shadow: 0 14px 30px rgba(22,88,84,.12); transform: translateY(-5px); outline: none; }
.organization-card:hover::before, .organization-card:focus-visible::before { transform: scaleX(1); }
.organization-card:hover .state-illustration path, .organization-card:focus-visible .state-illustration path { fill: #abdcd7; }
.organization-card:hover .organization-card__arrow, .organization-card:focus-visible .organization-card__arrow { color: #fff; background: var(--teal); transform: translateX(3px); }
.organization-card:focus-visible { outline: 3px solid rgba(37,142,137,.28); outline-offset: 4px; }
.process-section { padding: 70px 0; color: #fff; background: #258e89; }
.process-section h2 { margin-bottom: 34px; text-align: center; }
.process-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.process-item { text-align: center; }
.process-item__number { display: inline-grid; width: 42px; height: 42px; place-items: center; margin-bottom: 14px; color: #258e89; background: #fff; border-radius: 50%; font-size: .78rem; font-weight: 800; }
.process-item h3 { margin-bottom: 8px; font-size: 1.1rem; }
.process-item p { max-width: 280px; margin-inline: auto; color: rgba(255,255,255,.88); font-size: .93rem; }
.process-note { max-width: 820px; margin: 34px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.3); color: rgba(255,255,255,.88); text-align: center; font-size: .88rem; }
.site-footer { color: #fff; background: #2d3d40; }
.site-footer__inner { min-height: 106px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.site-footer img { width: 116px; max-height: 52px; object-fit: contain; filter: brightness(0) invert(1); }
.site-footer p { margin: 0; color: rgba(255,255,255,.75); font-size: .9rem; }
@media (max-width: 860px) { .organization-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .organization-card--wide { grid-column: span 2; } }
@media (max-width: 620px) { .shell { width: min(calc(100% - 28px), var(--shell)); } .site-header__inner { min-height: 74px; } .site-logo { width: 132px; } .site-header__label { display: none; } .hero__inner { min-height: 320px; padding-block: 54px; } .hero__title-row { align-items: flex-start; gap: 18px; } .hero__tips-logo { width: 94px; max-height: 104px; } .organization-section, .process-section { padding-block: 52px; } .section-heading { display: block; } .section-heading__note { margin-top: 14px; } .organization-grid, .process-grid { grid-template-columns: 1fr; } .organization-card, .organization-card--wide { grid-column: auto; min-height: 226px; } .process-grid { gap: 20px; } .site-footer__inner { min-height: 124px; flex-direction: column; justify-content: center; text-align: center; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; } }