:root { --blue: #173f70; --red: #b02b2b; --ink: #303b47; --muted: #586575; --line: #b8c4cf; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; padding-top: 0; color: var(--ink); background: #e4e9ed; font: 14px/1.55 Arial, Tahoma, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
img { display: block; width: 100%; height: 100%; object-fit: cover; }
figure { margin: 0; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid #d29624; outline-offset: 4px; }
[hidden] { display: none !important; }
section[id], details[id] { scroll-margin-top: 20px; }
body:has(dialog[open]) { overflow: hidden; }
.shell { width: 980px; max-width: calc(100% - 32px); margin-left: auto; margin-right: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: absolute; left: -9999px; }
.skip-link:focus { left: 16px; top: 16px; z-index: 100; padding: 10px; background: white; }
.crisis-bar { background: #f4f6f8; border-bottom: 1px solid #c3ccd5; color: #56616c; font-size: 12px; }
.crisis-bar .shell { padding: 7px 0; text-align: right; }
.crisis-bar a { color: #a02626; font-weight: bold; padding: 2px 6px; background: white; border: 1px solid #d1b4b4; border-radius: 3px; }
.site-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 23px 25px; background: linear-gradient(#fff, #f0f3f6); border: 1px solid var(--line); border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 2px 7px #20394c26; }
.brand { display: flex; align-items: center; gap: 12px; }
.brand-mark { display: grid; place-items: center; flex-shrink: 0; width: 52px; height: 52px; background: linear-gradient(#4f82b9, #1a477f); border: 1px solid #133860; border-radius: 50%; color: white; font: bold 38px Georgia,serif; box-shadow: inset 0 1px #ffffff70, 0 2px 4px #0003; }
.brand strong { display: block; font: bold 29px/1 Georgia,serif; color: var(--blue); letter-spacing: .04em; }
.brand small { display: block; font-size: 11px; margin-top: 5px; color: #596575; }
.main-nav { display: flex; border: 1px solid #123966; border-radius: 4px; background: linear-gradient(#447bb3, #1b4b80 52%, #123c6b 53%, #1f548c); box-shadow: inset 0 1px #ffffff60, 0 2px 3px #0002; }
.main-nav a { padding: 10px 16px; color: white; font-size: 13px; font-weight: bold; white-space: nowrap; border-right: 1px solid #163d66; text-shadow: 0 -1px #0004; }
.main-nav a:hover { background: #366ba3; }
.main-nav a:last-child { border-right: 0; }
.main-nav .nav-cta { background: linear-gradient(#d95555, #ac2929); border-radius: 0 3px 3px 0; }
.menu-button { display: none; }
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); margin-top: 24px; overflow: hidden; background: linear-gradient(125deg,#fff,#eff3f6); border: 1px solid #adbcc9; border-radius: 5px; box-shadow: 0 3px 10px #20394c22; }
.hero-copy { padding: 42px 34px; align-self: center; }
.eyebrow { margin: 0 0 16px; font-size: 11px; font-weight: bold; text-transform: uppercase; letter-spacing: .08em; color: var(--red); }
h1, h2, h3 { color: var(--blue); font-family: Georgia, "Times New Roman", serif; }
h1 { margin: 0; font-size: 48px; line-height: 1.08; letter-spacing: -.03em; }
h1 em { color: var(--red); font-style: normal; }
.hero-lead { margin: 22px 0 25px; font-size: 16px; line-height: 1.7; color: #4b5865; max-width: 360px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 44px; padding: 10px 20px; border: 1px solid #16416f; border-radius: 4px; font-weight: bold; font-size: 14px; box-shadow: inset 0 1px #ffffff60, 0 2px 3px #0002; }
.button-primary { background: linear-gradient(#538cc8, #245c98 52%, #1c4f87 53%, #2864a2); color: white; text-shadow: 0 -1px #0004; }
.button-primary:hover { background: linear-gradient(#689dd3,#2a659f); }
.button-white { background: linear-gradient(#fff,#e6edf4); color: #163f6f; border-color: #aabacc; }
.contact-note { font-size: 12px; color: #626e7c; margin: 14px 0 0; }
.photo-frame { position: relative; overflow: hidden; background: #d1dce5; }
.hero-photo { min-height: 420px; border-left: 1px solid #b3c2cf; }
.hero-photo img { position: absolute; inset: 0; }
.photo-label { position: absolute; top: 13px; left: 13px; padding: 4px 8px; color: #38526a; background: #ffffffe0; border: 1px solid #a9b9c8; border-radius: 3px; font-size: 11px; }
.hero-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 19px 25px; color: white; background: linear-gradient(#214e7eea, #15385fec); border-top: 1px solid #ffffff50; }
.hero-photo figcaption strong { display: block; font: bold 23px Georgia,serif; }
.hero-photo figcaption span { display: block; margin-top: 5px; color: #e0eaf3; font-size: 12px; }
.directions, .team, .project, .process, .faq { padding-top: 38px; }
.section-title { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 18px; padding-bottom: 11px; border-bottom: 1px solid var(--line); }
.section-title h2 { font-size: 28px; line-height: 1.2; margin: 0; }
.section-title > span { color: var(--muted); font-size: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.service-card { display: flex; align-items: flex-start; gap: 14px; padding: 20px 17px; background: linear-gradient(#fff,#f0f4f7); border: 1px solid var(--line); border-radius: 4px; box-shadow: 0 2px 4px #20394c17; }
.service-card > div, .steps li > div, .contact-card > div { min-width: 0; }
.service-icon { flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; color: #2e5d91; background: linear-gradient(#fff,#dfe8f0); border: 1px solid #aebdcb; border-radius: 4px; }
.service-icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; }
.service-card h3 { margin: 0 0 8px; font-size: 17px; line-height: 1.25; }
.service-card p { margin: 0; font-size: 13px; color: #586575; }
.medical-details { margin-top: 14px; border: 1px solid var(--line); border-radius: 3px; background: #f4f7f9; }
summary { position: relative; padding: 12px 40px 12px 16px; color: #365675; font-weight: bold; cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; position: absolute; right: 16px; top: 9px; font-size: 20px; }
details[open] summary::after { content: "−"; }
.details-body { padding: 0 16px 16px; font-size: 13px; color: #52606f; }
.details-body a { text-decoration: underline; color: #1f4e84; }
.people-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 18px; }
.person-card { overflow: hidden; background: white; border: 1px solid #b4c0cb; border-radius: 4px; box-shadow: 0 2px 6px #20394c1f; }
.portrait-photo { aspect-ratio: 5 / 6; border-bottom: 1px solid #bcc7d1; background: linear-gradient(#d6e1ea,#a6bdce); }
.portrait-photo img { object-fit: cover; }
.portrait-sand { background: linear-gradient(#e7e2d9,#c5bdae); }
.portrait-slate { background: linear-gradient(#d9dfe4,#a7b4c1); }
.portrait-warm { background: linear-gradient(#e8dddc,#c7b6b6); }
.person-caption { padding: 17px 17px 18px; border-top: 3px solid #2d5d91; background: linear-gradient(#fff,#f2f5f7); }
.person-caption h3 { margin: 0 0 4px; font-size: 18px; }
.person-caption p { margin: 0; color: #626f7d; font-size: 12px; }
.project-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 18px; }
.project-photo { aspect-ratio: 4 / 3; border: 4px solid white; border-radius: 4px; outline: 1px solid #bcc7d0; box-shadow: 0 3px 7px #20394c1f; }
.project-photo img { object-position: center 35%; }
.project-sand { background: #dcd5c8; }
.project-photo figcaption { position: absolute; bottom: 0; left: 0; right: 0; padding: 11px 14px; color: white; background: #173f70ed; border-top: 1px solid #ffffff30; font: bold 16px Georgia,serif; }
.steps { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: linear-gradient(#fafcfd,#ecf1f5); border: 1px solid #b8c4cf; border-radius: 4px; }
.steps li { display: flex; gap: 14px; padding: 23px 19px; border-right: 1px solid #c6d0d9; }
.steps li:last-child { border-right: 0; }
.steps li > span { display: grid; place-items: center; flex-shrink: 0; width: 32px; height: 32px; color: white; font-weight: bold; background: linear-gradient(#497cb2,#1c4b80); border: 1px solid #174069; border-radius: 50%; box-shadow: inset 0 1px #ffffff60; }
.steps h3 { margin: 2px 0 6px; font-size: 18px; line-height: 1.2; }
.steps p { margin: 0; font-size: 13px; color: #586575; }
.support { padding-top: 38px; }
.contact-card { display: flex; justify-content: space-between; align-items: center; gap: 28px; padding: 30px; color: white; background: linear-gradient(#3e73ad,#1c4c80); border: 1px solid #15385f; border-radius: 5px; box-shadow: inset 0 1px #ffffff50, 0 3px 7px #20394c26; }
.contact-card .eyebrow { color: #dbe8f4; margin-bottom: 8px; }
.contact-card h2 { margin: 0; font-size: 32px; color: white; text-shadow: 0 -1px #0003; }
.contact-card p:not(.eyebrow) { margin: 11px 0 0; color: #e7eef6; }
.contact-actions { display: flex; align-items: center; flex-direction: column; gap: 9px; flex-shrink: 0; }
.contact-actions small { font-size: 11px; color: #e1ebf5; }
.family-link { border: 0; padding: 2px; color: white; background: transparent; text-decoration: underline; font-size: 13px; }
.symptoms { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; }
.symptoms > span { margin-right: 6px; font-size: 12px; color: #52606f; }
.help-chip { padding: 7px 11px; font-size: 12px; background: linear-gradient(#fff,#eef3f7); color: #30567e; border: 1px solid #bac6d1; border-radius: 3px; box-shadow: 0 1px 2px #20394c12; }
.help-chip:hover { border-color: #4b7cad; background: white; }
.faq { padding-bottom: 36px; }
.faq .section-title h2 { font-size: 23px; }
.faq-list { background: #f7f9fb; border: 1px solid #bac5cf; border-radius: 4px; }
.faq-list details + details { border-top: 1px solid #c8d1da; }
.faq-list p { margin: 0; padding: 0 16px 17px; font-size: 13px; color: #52606f; }
.site-footer { border-top: 1px solid #122f50; background: linear-gradient(#1c426e,#102e53); color: #d8e3ef; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; padding: 24px 0; font-size: 12px; }
.footer-brand { font: bold 22px Georgia,serif; color: white; }
.dialog { width: 500px; max-width: calc(100% - 32px); max-height: calc(100dvh - 32px); padding: 30px; overflow-y: auto; color: #52606f; background: linear-gradient(#fff,#edf2f6); border: 1px solid #8d9eaf; border-radius: 5px; box-shadow: 0 10px 40px #0006; }
.dialog::backdrop { background: #081e38b8; }
.dialog-close { position: absolute; top: 9px; right: 10px; width: 29px; height: 29px; border: 1px solid #842020; border-radius: 3px; color: white; background: linear-gradient(#d65454,#a42727); font-size: 20px; }
.dialog h2 { margin: 0 0 16px; font-size: 27px; line-height: 1.2; }
.message-example { margin-top: 18px; padding: 16px; background: white; border: 1px solid #b8c7d4; }
.message-example small { font-size: 11px; color: #576677; }
.message-example p { margin: 9px 0 0; color: #234769; font: italic 16px/1.6 Georgia,serif; }
.copy-message { display: block; padding: 0; margin: 14px 0 19px; background: transparent; border: 0; text-decoration: underline; color: #22517f; }
.dialog .contact-note { padding-top: 14px; border-top: 1px dotted #bac6d1; }
@media (max-width: 820px) {
  .site-header { padding: 18px; }
  .menu-button { display: block; padding: 4px 11px; color: #244c78; border: 1px solid #a9b9c8; border-radius: 3px; background: linear-gradient(#fff,#dce6ee); font-size: 24px; }
  .main-nav { display: none; flex-direction: column; width: 100%; }
  .main-nav.open { display: flex; }
  .main-nav a { border-right: 0; border-bottom: 1px solid #163d66; }
  .main-nav .nav-cta { border-radius: 0 0 3px 3px; }
  .hero { grid-template-columns: 1fr 1fr; }
  .hero-copy { padding: 30px 24px; }
  h1 { font-size: 39px; }
  .hero-lead { font-size: 14px; }
  .hero-photo { min-height: 360px; }
  .hero-photo figcaption { padding: 16px; }
  .hero-photo figcaption strong { font-size: 20px; }
  .service-grid { grid-template-columns: 1fr; }
  .people-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .project-grid { gap: 12px; }
  .project-photo figcaption { font-size: 13px; padding: 8px; }
  .steps { grid-template-columns: 1fr; }
  .steps li { border-right: 0; border-bottom: 1px solid #c6d0d9; padding: 17px; }
  .steps li:last-child { border-bottom: 0; }
  .contact-card { padding: 24px; flex-wrap: wrap; }
  .contact-card h2 { font-size: 28px; }
}
@media (max-width: 540px) {
  .shell { max-width: calc(100% - 24px); }
  .crisis-bar .shell { text-align: left; font-size: 11px; }
  .brand strong { font-size: 25px; }
  .brand-mark { width: 43px; height: 43px; font-size: 31px; }
  .brand small { font-size: 10px; }
  .hero { grid-template-columns: 1fr; margin-top: 16px; }
  .hero-copy { padding: 29px 24px; }
  .hero-lead { max-width: none; }
  .hero-photo { min-height: 310px; border-left: 0; border-top: 1px solid #b3c2cf; }
  .section-title { align-items: flex-start; flex-direction: column; gap: 6px; }
  .section-title h2 { font-size: 25px; }
  .people-grid { gap: 12px; }
  .portrait-photo .photo-label { left: 7px; top: 7px; padding: 3px 5px; font-size: 10px; }
  .person-caption { padding: 12px 10px; }
  .person-caption h3 { font-size: 16px; }
  .person-caption p { font-size: 11px; }
  .project-grid { grid-template-columns: 1fr; gap: 18px; }
  .project-photo figcaption { font-size: 17px; padding: 12px; }
  .contact-card { align-items: flex-start; flex-direction: column; gap: 20px; }
  .contact-actions { align-items: flex-start; }
  .symptoms > span { width: 100%; }
  .footer-inner { align-items: flex-start; flex-direction: column; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Reference-led theme: calm paper surfaces, dark hero, clear next steps.
   Original styling retained above; medical content and behaviour are unchanged. */
:root { --blue: #163447; --red: #a33f35; --ink: #223a46; --muted: #59696e; --line: #d7dfdb; --teal: #246862; --paper: #f6f3ec; }
body { background: var(--paper); font: 15px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; }
.shell { width: 1140px; max-width: calc(100% - 48px); }
.crisis-bar { background: #fffdf8; color: #52626a; border-color: #dedfd8; }
.crisis-bar a { background: transparent; border: 0; color: #9c392f; }
.site-header { padding: 23px 0; background: transparent; box-shadow: none; border: 0; border-radius: 0; gap: 20px; }
.brand-mark { width: 56px; height: 56px; border-radius: 0; background: transparent; border: 0; box-shadow: none; }
.brand-mark img,.about-mark img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand strong { font: 800 27px/1.1 -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: -.025em; }
.brand small { font-size: 11px; }
.main-nav { align-items: center; gap: 2px; border: 0; background: transparent; box-shadow: none; }
.main-nav a { color: var(--ink); padding: 10px 14px; border: 0; font-size: 13px; text-shadow: none; border-radius: 8px; }
.main-nav a:hover { background: #e7ebe4; }
.main-nav .nav-cta { margin-left: 12px; color: white; background: #246862; border-radius: 10px; }
.main-nav .nav-cta:hover { background: #194f4b; }
h1,h2,h3 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; letter-spacing: -.035em; }
.hero { grid-template-columns: minmax(0,1.1fr) minmax(0,.9fr); margin-top: 10px; border: 0; border-radius: 24px; box-shadow: none; background: linear-gradient(125deg,#12384a,#152d3c); }
.hero-copy { padding: 55px 42px; }
.hero .eyebrow { color: #d8d2bb; font-size: 11px; letter-spacing: .065em; }
.hero h1 { font-size: clamp(37px,4.7vw,59px); line-height: 1.09; color: #fff; letter-spacing: -.055em; }
.hero h1 em { color: #e3c9a3; }
.hero-lead { max-width: 455px; color: #d6e0e4; font-size: 16px; line-height: 1.7; margin: 25px 0; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.button { min-height: 47px; border-radius: 10px; font-size: 14px; text-shadow: none; box-shadow: none; gap: 16px; }
.button-primary { background: #246862; border-color: #246862; }
.button-primary:hover { background: #194f4b; }
.button-white,.button-ghost { background: #fffdf8; border-color: #bac9c5; color: #194e49; }
.hero .button-primary { background: #e3c9a3; border-color: #e3c9a3; color: #203b47; }
.hero .button-primary:hover { background: #f0ddbe; }
.hero .button-ghost { color: #f1f4ed; background: transparent; border-color: #6c878e; }
.hero .button-ghost:hover { background: #ffffff12; }
.hero .contact-note { color: #b8cbd1; }
.hero-topics { display: flex; flex-wrap: wrap; gap: 9px 17px; margin-top: 23px; color: #c4d7d9; font-size: 12px; }
.hero-topics a { border-bottom: 1px solid #6e8e92; padding-bottom: 3px; }
.hero-photo { margin: 24px 24px 24px 0; border: 0; border-radius: 17px; min-height: 400px; background: #d4dfdc; }
.hero-photo img { opacity: .96; }
.hero-photo.hero-photo-team { align-self: center; aspect-ratio: 1; min-height: 0; }
.hero-photo-team img { opacity: 1; object-fit: contain; }
.hero-photo figcaption { background: #163447ed; border: 0; padding: 22px; }
.hero-photo figcaption strong { font-family: inherit; font-size: 22px; }
.photo-label { border: 0; border-radius: 6px; background: #fffdf8e8; color: #384e57; }
.route-home,.team,.project,.process,.support,.faq { padding-top: 55px; }
.section-title { border: 0; align-items: center; margin-bottom: 24px; padding-bottom: 0; }
.section-title h2 { font-size: 30px; letter-spacing: -.04em; }
.section-title > span { font-size: 13px; }
.route-grid { gap: 20px; }
.route-card { background: #fffdf9; border: 1px solid #d6dfd9; border-radius: 16px; box-shadow: none; padding: 26px 26px 42px; }
.route-card:hover { border-color: #678f87; background: #f7faf4; }
.route-index { color: #9b4338; font-weight: 800; font-size: 13px; }
.route-card h3 { font-size: 27px; margin: 17px 0 13px; }
.route-card p { color: #59696e; }
.route-arrow { color: #246862; right: 24px; bottom: 16px; }
.home-search { border-radius: 14px; padding: 24px; background: #edf1eb; border-color: #d5ddd5; }
.home-search label { color: #25473f; }
input:not([type=checkbox]),select { border-color: #b9c8c1; border-radius: 8px; min-height: 46px; box-shadow: none; color: #253f49; }
.home-note { max-width: 800px; }
.quick-links a,.home-resources a,.guide-links a { color: #24645e; }
.team-intro { color: #59696e; max-width: 840px; font-size: 13px; margin: -7px 0 22px; }
.section-source { color: #246862; font-size: 12px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.volunteers-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 22px; }
.person-card { display: flex; flex-direction: column; border-color: #d7dfdb; border-radius: 16px; box-shadow: none; }
.volunteers-grid .portrait-photo { aspect-ratio: 1 / 1; border-bottom: 0; background: #e7e7df; }
.volunteers-grid .portrait-photo img { object-fit: cover; object-position: center 30%; }
.person-caption { display: flex; flex: 1; flex-direction: column; padding: 22px; border: 0; background: #fffdf9; }
.person-caption .person-role { font-size: 11px; color: #42685f; margin: 0 0 9px; }
.person-caption h3 { font-size: 22px; line-height: 1.2; margin: 0 0 13px; }
.person-caption .person-specialty { font-size: 13px; line-height: 1.6; color: #566970; margin: 0 0 20px; }
.person-contact { margin-top: auto; display: flex; align-items: center; justify-content: space-between; border-top: 1px solid #dce4df; padding-top: 15px; color: #246862; font-weight: 700; font-size: 13px; }
.volunteer-note { display: flex; flex-direction: column; border: 1px solid #cddad2; border-radius: 16px; padding: 32px; background: #e7eee7; }
.volunteer-note .eyebrow { color: #4d6d60; }
.volunteer-note h3 { font-size: 28px; line-height: 1.22; margin: 5px 0 20px; }
.volunteer-note p:not(.eyebrow) { font-size: 14px; color: #4d646a; }
.volunteer-note a { color: #245d51; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; margin: auto 0 24px; padding-top: 20px; font-size: 13px; }
.volunteer-note small { color: #526b65; font-size: 11px; line-height: 1.6; }
.project-photo { border-radius: 14px; outline: none; box-shadow: none; border: 1px solid #d7dfdb; }
.project-photo figcaption { background: #163447e8; border: 0; font: 600 16px/1.4 -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; }
.steps { background: #fffdf9; border-color: #d6dfd9; border-radius: 14px; }
.steps li { border-color: #d6dfd9; padding: 26px; }
.steps li > span { background: #e3ede5; color: #246052; border: 0; box-shadow: none; }
.steps h3 { font-size: 20px; }
.contact-card { background: #173f48; border: 0; border-radius: 20px; padding: 40px; box-shadow: none; }
.contact-card h2 { font-size: 35px; text-shadow: none; }
.help-chip { border-radius: 8px; background: #fffdf9; box-shadow: none; border-color: #cedad2; color: #355b52; }
.faq-list { background: #fffdf9; border-color: #d6dfd9; border-radius: 14px; }
.faq-list details + details { border-color: #d6dfd9; }
summary { color: #2c4e55; padding-top: 16px; padding-bottom: 16px; }
details[open] > summary::after { content: "−"; }
details:not([open]) > summary::after { content: "+"; }
.site-footer { background: #15313f; border: 0; }
.footer-brand { font-family: inherit; font-weight: 800; }
.dialog { border: 1px solid #b5c9c1; border-radius: 16px; background: #fffdf9; box-shadow: 0 15px 70px #0005; }
.dialog h2 { font-size: 29px; }
.dialog-close { display: grid; place-items: center; width: 32px; height: 32px; padding: 0; line-height: 1; border: 0; border-radius: 8px; background: #a33f35; }
.dialog-close svg { display: block; width: 18px; height: 18px; pointer-events: none; }
.dialog-close:hover { background: #87342c; }
.dialog::backdrop { background: #0d263ac2; }
.menu-button { background: #fffdf9; border-color: #b8c9c0; border-radius: 9px; color: #23494b; }
.page-heading { border-color: #d0d9d2; margin-bottom: 28px; }
.page-heading h1 { font-size: 42px; }
.route-facts > div,.guide-panel,.route-steps,.guide-contact,.catalog-filters,.diagnosis-card,.route-check-form { border-color: #d2ddd5; border-radius: 13px; background: #fffdf9; box-shadow: none; }
.diagnosis-card > header { background: #f1f4ed; }
.diagnosis-card h2 { font-size: 25px; }
.article-badge { color: #315f52; background: #e4ede4; border-color: #b8cec0; border-radius: 5px; }
.legal-warning { border-radius: 10px; }
.guide-contact { background: #e9f0e8; }
.guide-links { padding-bottom: 10px; }
.route-result { background: #e9f3eb; border-color: #598875; border-radius: 14px; }
.emergency-number { border-radius: 12px; }
@media (max-width: 1000px) {
 .site-header { gap: 12px; }
 .main-nav a { padding: 10px; font-size: 12px; }
 .main-nav .nav-cta { margin-left: 3px; }
 .hero-copy { padding: 38px 28px; }
 .hero-photo { margin: 20px 20px 20px 0; }
 .volunteers-grid { gap: 16px; }
 .person-caption { padding: 19px; }
}
@media (max-width: 820px) {
 .site-header { padding: 19px 0; }
 .main-nav { align-items: stretch; background: #fffdf9; border: 1px solid #d2ddd5; padding: 9px; border-radius: 12px; }
 .main-nav a { border: 0; padding: 12px; font-size: 14px; }
 .main-nav .nav-cta { margin: 5px 0 0; text-align: center; border-radius: 8px; }
 .hero { grid-template-columns: minmax(0,1fr) minmax(0,.8fr); }
 .hero h1 { font-size: 40px; }
 .hero-actions { flex-direction: column; align-items: flex-start; }
 .hero-actions .button { min-width: 190px; }
 .hero-photo { min-height: 380px; }
 .volunteers-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .volunteer-note { padding: 26px; }
 .route-card h3 { font-size: 25px; }
 .page-heading h1 { font-size: 34px; }
}
@media (max-width: 600px) {
 .shell { max-width: calc(100% - 28px); }
 .hero { grid-template-columns: minmax(0,1fr); border-radius: 17px; }
 .hero-copy { padding: 32px 25px; }
 .hero h1 { font-size: clamp(34px,8vw,44px); }
 .hero-lead { font-size: 15px; }
 .hero-actions { flex-direction: row; }
 .hero-actions .button { min-width: 0; }
 .hero-photo { margin: 0 17px 17px; min-height: 295px; border-radius: 12px; }
 .hero-topics { margin-top: 21px; }
 .route-home,.team,.project,.process,.support,.faq { padding-top: 38px; }
 .section-title { align-items: flex-start; flex-direction: column; gap: 10px; }
 .section-title h2 { font-size: 27px; }
 .volunteers-grid { grid-template-columns: minmax(0,1fr); gap: 22px; }
 .person-caption { padding: 23px; }
 .person-caption h3 { font-size: 25px; }
 .person-caption .person-specialty { font-size: 14px; }
 .volunteer-note { padding: 26px; }
 .contact-card { padding: 27px; }
 .contact-card h2 { font-size: 30px; }
 .page-heading h1 { font-size: 30px; }
}

/* Decorative motion stays behind the content and never intercepts input. */
body.with-ambient { isolation: isolate; }
.with-ambient > .crisis-bar,.with-ambient > .site-header,.with-ambient > main,.with-ambient > .site-footer { position: relative; z-index: 1; }
.ambient-background { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.ambient-orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 29% 24%,#ffffffb3 0%,#c4e4dd80 34%,#8fc9bf3d 67%,#8fc9bf0a 100%); box-shadow: inset 0 0 45px #ffffff85; animation: ambient-drift 30s ease-in-out infinite alternate; }
.ambient-orb-one { width: clamp(230px,34vw,520px); aspect-ratio: 1; top: 7%; left: -12%; opacity: .7; }
.ambient-orb-two { width: clamp(210px,29vw,460px); aspect-ratio: 1; bottom: -9%; right: -7%; opacity: .65; background: radial-gradient(circle at 29% 24%,#fff9e2ad,#ead8b875 40%,#dabb8233 74%,#dabb820a); animation-duration: 38s; animation-delay: -15s; }
.ambient-orb-three { width: clamp(120px,17vw,270px); aspect-ratio: 1; left: 44%; top: 33%; opacity: .38; background: radial-gradient(circle at 28% 24%,#ffffffb0,#efc6b872 48%,#dc9e8522 78%,#dc9e850a); animation-duration: 26s; animation-delay: -9s; }
.hero { position: relative; }
.hero-copy,.hero-photo { position: relative; z-index: 1; min-width: 0; }
.hero-orbs { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-orb { position: absolute; border-radius: 50%; border: 1px solid #ffffff18; background: radial-gradient(circle at 29% 23%,#f7fffe9c,#a1ddd367 28%,#317d8052 58%,#0f3b491a 85%); box-shadow: inset -20px -20px 40px #09253329,inset 13px 13px 28px #ffffff20; animation: hero-drift 25s ease-in-out infinite alternate; }
.hero-orb-one { width: 270px; aspect-ratio: 1; left: -90px; top: -105px; opacity: .37; }
.hero-orb-two { width: 190px; aspect-ratio: 1; left: 36%; bottom: -75px; opacity: .32; background: radial-gradient(circle at 29% 23%,#fff4d9bd,#e0c49366 36%,#b2775445 70%,#b2775409); animation-duration: 31s; animation-delay: -12s; }
.hero-orb-three { width: 94px; aspect-ratio: 1; left: 45%; top: 20%; opacity: .42; animation-duration: 22s; animation-delay: -8s; }
.motion-toggle { display: inline-flex; align-items: center; gap: 10px; padding: 6px 0; margin-top: 15px; color: #c4d7d9; background: transparent; border: 0; font-size: 11px; text-align: left; }
.motion-toggle:hover { color: #fff; }
.motion-toggle span:last-child { display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid #6d8b92; border-radius: 50%; }
.motion-paused .ambient-orb,.motion-paused .hero-orb { animation-play-state: paused; }
.with-ambient:not(.motion-ready) .ambient-orb,.with-ambient:not(.motion-ready) .hero-orb { animation-play-state: paused; }
@keyframes ambient-drift { from { transform: translate3d(-14px,-18px,0) scale(.93); } to { transform: translate3d(55px,65px,0) scale(1.07); } }
@keyframes hero-drift { from { transform: translate3d(-16px,-14px,0) scale(.93); } to { transform: translate3d(36px,32px,0) scale(1.06); } }
.book-section { padding-top: 55px; }
.book-card { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); align-items: center; gap: 34px; padding: 36px; border: 1px solid #d9e0d8; border-radius: 26px; background: radial-gradient(circle at 9% 12%,#e4f0ecb3,transparent 46%),linear-gradient(135deg,#fffdfb,#f6f1e7); box-shadow: 0 18px 55px #1634470b; }
.book-media { display: block; min-width: 0; overflow: hidden; border-radius: 18px; background: #e6edeb; }
.book-media img { width: 100%; height: auto; object-fit: contain; }
.book-copy { min-width: 0; }
.book-badges { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.book-badges span { border-radius: 999px; background: #e4f0ed; color: #23635e; padding: 7px 13px; font-size: 11px; font-weight: 750; }
.book-badges span:first-child { background: #e8d5b3; color: #654821; }
.book-copy h2 { margin: 0; color: #15313f; font-size: clamp(29px,3.6vw,44px); line-height: 1.12; letter-spacing: -.055em; }
.book-lead { margin: 24px 0; color: #586b71; font-size: 15px; line-height: 1.75; }
.book-facts { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0 0 26px; gap: 8px; }
.book-facts li { padding: 8px 13px; border: 1px solid #e0e6e3; border-radius: 999px; background: #fff; color: #203e4c; font-size: 12px; font-weight: 750; }
.book-bottom { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.book-price { margin-right: auto; }
.book-price small { display: block; color: #5a6c73; font-size: 11px; }
.book-price strong { display: block; color: #15313f; font-size: 39px; line-height: 1.2; letter-spacing: -.045em; }
.book-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.book-actions .button { font-size: 12px; padding: 10px 15px; min-height: 45px; }
.book-buy { color: #fff; background: #aa4a3d; border-color: #aa4a3d; }
.book-buy:hover { background: #8d392e; }
.book-source { margin: 20px 0 0; max-width: 460px; color: #596b72; font-size: 11px; line-height: 1.65; }
@media (max-width: 820px) {
 .book-card { gap: 25px; padding: 25px; }
 .book-copy h2 { font-size: 30px; }
 .book-badges { margin-bottom: 16px; }
 .book-lead { font-size: 14px; margin: 17px 0; }
 .book-facts { margin-bottom: 19px; }
 .book-price strong { font-size: 33px; }
 .hero-orb-three { left: 35%; }
}
@media (max-width: 600px) {
 .book-section { padding-top: 38px; }
 .book-card { grid-template-columns: minmax(0,1fr); border-radius: 18px; padding: 20px; gap: 27px; }
 .book-media { width: 100%; max-width: 400px; margin: 0 auto; border-radius: 13px; }
 .book-copy h2 { font-size: clamp(28px,7vw,37px); }
 .book-actions { width: 100%; }
 .book-actions .button { flex: 1 1 150px; }
 .ambient-orb-one { width: 250px; }
 .ambient-orb-two { width: 220px; }
 .hero-orb-one { width: 210px; }
}
@media (prefers-reduced-motion: reduce) {
 .ambient-orb,.hero-orb { animation: none; }
 .motion-toggle { display: none; }
}

/* Route interiors share the homepage palette, with a distinct accent per route. */
.route-page { --route-accent: #246862; --route-deep: #163447; --route-orb: #43877c; background: radial-gradient(ellipse at 100% 0%,#dceae280,transparent 650px),var(--paper); }
.route-page-transfer { --route-deep: #1c514e; --route-orb: #5b9e8e; }
.route-page-dismissal { --route-accent: #a33f35; --route-deep: #583a3c; --route-orb: #bd8075; }
.route-page .page-heading { position: relative; isolation: isolate; overflow: hidden; padding: 36px; border: 0; border-radius: 26px; background: linear-gradient(125deg,var(--route-deep),#173c50); box-shadow: 0 12px 35px #16344710; }
.route-page .page-heading::after { content: ""; position: absolute; z-index: -1; top: -100px; right: -65px; width: 300px; height: 300px; border: 35px solid #ffffff09; border-radius: 50%; background: var(--route-orb); opacity: .3; pointer-events: none; }
.route-page .page-heading .eyebrow { display: inline-block; margin-bottom: 18px; padding: 6px 13px; border: 1px solid #ffffff26; border-radius: 999px; color: #f0dfbd; background: #ffffff0c; }
.route-page .page-heading h1 { max-width: 850px; color: #fff; font-size: clamp(29px,4vw,42px); }
.route-page .page-heading > p:last-child { color: #e0e9e8; line-height: 1.75; }
.route-page .route-facts { gap: 18px; }
.route-page .route-facts > div { padding: 25px; border-radius: 20px; border-color: #dce4df; box-shadow: 0 5px 18px #16344704; }
.route-page .route-facts > div:nth-child(1) { background: #eaf3ef; }
.route-page .route-facts > div:nth-child(2) { background: #faf2e5; border-color: #e8ddc9; }
.route-page .route-facts > div:nth-child(3) { background: #fffdfa; }
.route-page .route-facts > div:nth-child(4) { background: #ecf2f7; border-color: #d9e3ec; }
.route-page .route-facts dt { color: var(--route-accent); letter-spacing: .055em; }
.route-page .legal-warning { border-radius: 18px; padding: 20px 24px; background: #fff6e7; }
.route-page .route-steps { display: grid; gap: 12px; border: 0; background: transparent; }
.route-page .route-steps li { padding: 25px; border: 1px solid #dde5df; border-radius: 20px; background: #fffdf9; }
.route-page .route-steps li:nth-child(even) { background: #f0f5f2; }
.route-page .route-steps li > span { width: 40px; height: 40px; border-radius: 13px; color: #fff; background: var(--route-accent); }
.route-page .route-steps h2 { font-size: 23px; }
.route-page .guide-section { padding: 26px; border: 1px solid #d9e5df; border-radius: 22px; background: linear-gradient(135deg,#eaf2ed,#fffdf8); }
.route-page .guide-section .document-list { margin-bottom: 0; }
.route-page .document-list li::marker { color: var(--route-accent); }
.route-page .guide-details { border: 1px solid #e3d5c9; border-radius: 20px; overflow: hidden; background: #fbf1e9; box-shadow: 0 5px 18px #16344704; }
.route-page .guide-details > summary { padding: 21px 55px 21px 24px; color: #764c39; line-height: 1.5; }
.route-page .guide-details > summary::after { top: 50%; right: 24px; transform: translateY(-50%); }
.route-page .guide-details > summary:focus-visible { outline-offset: -4px; border-radius: 18px; }
.route-page .guide-details[open] > summary { border-bottom: 1px solid #e8dbd0; }
.route-page .guide-details > p { padding: 20px 24px 24px; color: #5a514c; }
.route-page .source-note { padding: 22px 24px; border: 1px solid #e2e3d8; border-radius: 18px; background: #f1f0e8; overflow-wrap: anywhere; }
.route-page .source-note strong { color: #3d585e; }
.route-page .guide-contact { padding: 30px; border: 0; border-radius: 24px; background: var(--route-deep); color: #e1ebe8; }
.route-page .guide-contact h2 { color: #fff; }
.route-page .guide-contact small { color: #c0d4cf; }
@media (max-width: 600px) {
 .route-page .page-heading { padding: 27px 23px; border-radius: 22px; }
 .route-page .page-heading::after { right: -180px; }
 .route-page .route-facts { grid-template-columns: minmax(0,1fr); gap: 12px; }
 .route-page .route-facts > div,.route-page .guide-section { padding: 22px; }
 .route-page .route-steps li { gap: 14px; padding: 21px 18px; }
 .route-page .route-steps h2 { font-size: 21px; }
 .route-page .guide-details > summary { padding-left: 21px; }
 .route-page .guide-details > p,.route-page .source-note { padding: 20px 21px; }
 .route-page .guide-contact { padding: 25px; }
}

.about-section { padding-top: 55px; }
.about-card { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: 76px minmax(0,1fr); align-items: start; gap: 30px; padding: 40px; border: 1px solid #d7e2dc; border-radius: 28px; background: linear-gradient(125deg,#ffffffed,#f0f6f2f2); box-shadow: 0 14px 45px #16344709; }
.about-card::before,.about-card::after { content: ""; position: absolute; z-index: -1; pointer-events: none; border-radius: 50%; }
.about-card::before { width: 240px; height: 240px; top: -150px; right: -55px; background: #cce5de66; }
.about-card::after { width: 150px; height: 150px; bottom: -115px; left: 55%; background: #e8d9bf55; }
.about-mark { display: grid; place-items: center; width: 76px; height: 76px; background: transparent; }
.about-copy h2 { margin: 0 0 14px; font-size: 30px; line-height: 1.2; letter-spacing: -.04em; }
.about-copy p { max-width: 72ch; margin: 0; color: #526870; font-size: 16px; line-height: 1.8; }
@media (max-width: 600px) {
 .about-section { padding-top: 38px; }
 .about-card { grid-template-columns: minmax(0,1fr); gap: 20px; padding: 26px; border-radius: 24px; }
 .about-mark { width: 58px; height: 58px; border-radius: 18px; font-size: 30px; }
 .about-copy h2 { font-size: 27px; }
 .about-copy p { font-size: 15px; }
}

/* Route cards: retain the three medical pathways, adopt the supplied card style. */
.route-grid { align-items: stretch; gap: 22px; }
.route-card { display: flex; flex-direction: column; position: relative; isolation: isolate; overflow: hidden; padding: 30px; min-height: 415px; border: 1px solid #e0e6e3; border-radius: 28px; background: #ffffffed; box-shadow: 0 12px 38px #15313f05; }
.route-card::before,.route-card::after { content: ""; position: absolute; pointer-events: none; z-index: -1; border-radius: 50%; }
.route-card::before { width: 205px; height: 205px; top: -110px; right: -95px; background: #e5f1efb8; }
.route-card::after { width: 180px; height: 180px; bottom: -110px; left: -85px; background: #f1e7d887; }
.route-symbol { display: grid; place-items: center; width: 62px; height: 62px; flex-shrink: 0; border-radius: 20px; background: #e5f2ef; color: #2b7973; margin-bottom: 29px; }
.route-symbol svg { width: 32px; height: 32px; }
.route-card .route-index { display: inline-flex; align-self: flex-start; padding: 6px 12px; border-radius: 999px; background: #eaf2ef; color: #28645e; font-size: 11px; line-height: 1.5; font-weight: 750; }
.route-card h3 { position: relative; font-size: 30px; line-height: 1.14; margin: 21px 0 17px; letter-spacing: -.045em; }
.route-card p { font-size: 14px; line-height: 1.65; color: #5a6d74; margin: 0 0 24px; }
.route-link { display: inline-flex; align-items: center; gap: 14px; padding-top: 14px; margin-top: auto; color: #246d64; font-size: 13px; font-weight: 750; }
.route-link .route-arrow { position: static; font-size: 24px; line-height: 1; color: inherit; }
.route-card:hover { background: #fff; border-color: #b4d0c5; }
.route-card-dark { background: linear-gradient(145deg,#142f40,#183d59); border-color: #244558; }
.route-card-dark::before { background: #367f8259; }
.route-card-dark::after { background: #e0cc9a29; }
.route-card-dark .route-symbol { background: #ffffff16; color: #fff; }
.route-card-dark .route-index { background: #ffffff18; color: #d9e7e6; }
.route-card-dark h3 { color: #fff; }
.route-card-dark p { color: #c9d9e2; }
.route-card-dark .route-link { color: #eed4a5; }
.route-card-dark:hover { background: linear-gradient(145deg,#1a3a4d,#1b4765); border-color: #547b85; }
.route-card-coral { border-color: #eed7d0; }
.route-card-coral::before { background: #f3e4dfa1; }
.route-card-coral .route-symbol { color: #a24538; background: #f9eeea; }
.route-card-coral .route-index { color: #954133; background: #f9eeea; }
.route-card-coral .route-link { color: #a0473a; }
.route-card-coral:hover { border-color: #d8b5a9; }
@media (min-width: 601px) and (max-width: 820px) {
 .route-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 13px; }
 .route-card { min-height: 400px; padding: 22px 18px; border-radius: 23px; }
 .route-card h3 { font-size: 25px; }
 .route-card p { font-size: 13px; }
 .route-card .route-index { padding: 6px 9px; font-size: 10px; }
 .route-link { font-size: 12px; gap: 9px; }
}
@media (max-width: 600px) {
 .route-grid { grid-template-columns: minmax(0,1fr); gap: 18px; }
 .route-card { min-height: 345px; padding: 28px; border-radius: 26px; }
 .route-symbol { margin-bottom: 21px; }
 .route-card h3 { font-size: 31px; }
 .route-card p { font-size: 15px; }
}