:root { --green: #284735; --deep: #20382b; --olive: #657b40; --lime: #dbeaaf; --paper: #fafbf7; --soft: #f0f3e8; --ink: #243a2b; --muted: #627063; --line: #d7ddcf; --sans: Arial,'PingFang SC','Microsoft YaHei',sans-serif; --serif: Georgia,'Noto Serif CJK SC','Songti SC','SimSun',serif; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 26px; }
body { margin: 0px; background: var(--paper); color: var(--ink); font: 16px/1.8 var(--sans); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a, summary { touch-action: manipulation; }
button { cursor: pointer; }
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: rgb(130, 152, 84) solid 3px; outline-offset: 4px; }
h1, h2, h3, p { margin: 0px; }
h1, h2 { font-family: var(--serif); font-weight: 400; }
h2 { font-size: 38px; line-height: 1.6; letter-spacing: 1px; }
p { color: var(--muted); }
.wrap { max-width: 1232px; width: calc(100% - 112px); margin: auto; }
.skip { position: fixed; top: -100px; background: white; padding: 10px; z-index: 30; }
.skip:focus { top: 10px; }
.topbar { background: var(--green); color: rgb(232, 238, 223); font-size: 12px; letter-spacing: 1.2px; padding: 9px 0px; }
.topbar > .wrap { display: flex; justify-content: space-between; gap: 20px; }
header { background: rgb(255, 255, 255); border-bottom: 1px solid var(--line); }
.header-row { display: flex; justify-content: space-between; align-items: center; min-height: 104px; gap: 24px; }
.brand { display: flex; align-items: center; gap: 15px; flex-shrink: 0; }
.logo-crop { position: relative; width: 72px; height: 72px; overflow: hidden; display: block; background: white; }
.logo-crop img { position: absolute; width: 100%; height: auto; max-width: none; left: 0px; top: -62.04%; }
.brand strong { display: block; font-family: var(--serif); font-size: 24px; letter-spacing: 3px; line-height: 1.5; }
.brand small { display: block; font-size: 10px; letter-spacing: 1px; color: var(--muted); }
nav { display: flex; align-items: center; gap: 27px; font-size: 14px; }
nav a { padding: 10px 0px; }
nav a:hover { color: var(--olive); }
nav .nav-cta { border: 1px solid var(--green); padding: 10px 19px; display: flex; gap: 22px; }
.menu { display: none; }
.hero { padding: 56px 0px 66px; background: var(--soft); }
.hero-grid { display: grid; grid-template-columns: 1.18fr 1fr; gap: 85px; align-items: center; }
.eyebrow { font-size: 14px; letter-spacing: 2.1px; color: var(--olive); margin-bottom: 23px; }
.hero .eyebrow { display: flex; gap: 12px; align-items: center; }
.eyebrow > span { width: 23px; height: 1px; background: var(--olive); }
h1 { font-size: 59px; line-height: 1.55; letter-spacing: 3px; }
.accent { color: var(--olive); }
.period { color: rgb(156, 170, 121); }
.hero-en { font: italic 32px / 1.2 Georgia, serif; color: rgb(113, 130, 89); margin: 20px 0px 26px; letter-spacing: -0.5px; }
.intro { font-size: 16px; line-height: 2; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 30px; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 35px; background: var(--green); color: white; padding: 15px 23px; font-size: 14px; border: 0px; min-height: 52px; transition: background 0.2s; }
.btn:hover { background: rgb(63, 94, 65); }
.btn > span { font-size: 21px; line-height: 1; }
.quiet-link { font-size: 14px; display: flex; gap: 15px; }
.hero-foot { font-size: 12px; margin-top: 36px; letter-spacing: 2px; }
.hero-foot > span { display: block; font-size: 12px; letter-spacing: 0.4px; margin-top: 2px; color: rgb(116, 128, 107); }
.mobile-break { display: none; }
.hero-poster { padding-top: 3px; max-width: 475px; }
.poster-label, .poster-bottom { display: flex; justify-content: space-between; gap: 12px; align-items: center; font-size: 11px; letter-spacing: 1px; color: rgb(115, 129, 94); }
.poster-label { margin-bottom: 12px; }
.poster-crop { aspect-ratio: 685 / 856; display: block; overflow: hidden; position: relative; background: rgb(63, 87, 45); border-radius: 120px 4px 4px; box-shadow: rgba(49, 71, 43, 0.08) 0px 14px 40px; }
.poster-crop img { position: absolute; width: 100%; height: auto; top: -39.84%; left: 0px; max-width: none; }
.poster-bottom { margin-top: 16px; }
.poster-bottom > span:first-child { font-family: var(--serif); font-size: 16px; letter-spacing: 1px; }
.about { border-bottom: 1px solid var(--line); padding: 64px 0px; background: rgb(255, 255, 255); }
.about-grid { display: grid; grid-template-columns: 1fr 1.3fr 0.55fr; gap: 50px; }
.about h2 { font-size: 30px; }
.about-grid > div:nth-child(2) { padding-top: 7px; }
.english-copy { font-size: 14px; margin: 18px 0px 21px; line-height: 1.8; }
.underlined { display: inline-flex; gap: 20px; align-items: center; border-bottom: 1px solid rgb(157, 168, 137); padding-bottom: 6px; font-size: 14px; color: var(--green); }
.about-side { border-left: 1px solid var(--line); padding-left: 28px; align-self: center; }
.about-side > span { font-size: 14px; }
.about-side b { font-size: 11px; letter-spacing: 2px; font-weight: 400; color: var(--olive); }
.about-side > p { font-size: 14px; margin-top: 17px; }
.section { padding: 83px 0px; }
.section-head { display: flex; justify-content: space-between; gap: 40px; align-items: flex-end; margin-bottom: 40px; }
.section-head .eyebrow { margin-bottom: 13px; }
.section-head > p { font-size: 16px; text-align: left; margin-bottom: 6px; }
.section-head > p span { font: italic 18px Georgia, serif; color: rgb(122, 134, 104); }
.section-head > .underlined { margin-bottom: 12px; }
.service-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.service-grid article { padding: 30px 33px 10px 0px; }
.service-grid article + article { border-left: 1px solid var(--line); padding-left: 34px; }
.service-grid article:last-child { padding-right: 0px; }
.number { font: italic 26px Georgia; color: rgb(130, 149, 100); display: block; margin-bottom: 18px; }
.service-grid h3 { font-family: var(--serif); font-size: 26px; font-weight: 400; letter-spacing: 1px; }
.subhead { font: italic 16px Georgia; color: rgb(119, 130, 104); display: block; margin: 4px 0px 18px; }
.service-grid p { font-size: 16px; line-height: 1.9; margin-bottom: 20px; }
.service-grid article > a { font-size: 14px; color: var(--olive); }
.service-note { font-size: 12px; margin-top: 34px; }
.events { background: rgb(234, 240, 223); }
.events h2 > span { color: var(--olive); }
.event-card { border-top: 1px solid rgb(190, 201, 175); padding: 32px 0px; display: grid; grid-template-columns: 115px 1fr 65px; gap: 30px; align-items: center; }
.event-card:last-child { border-bottom: 1px solid rgb(190, 201, 175); }
.event-date { display: flex; flex-direction: column; gap: 4px; }
.event-date strong { font: 42px Georgia; white-space: nowrap; color: rgb(83, 107, 57); }
.event-date strong span { font: 12px var(--sans); letter-spacing: 1px; }
.event-date i { font: italic 18px Georgia; color: rgb(123, 136, 102); }
.tag { font-size: 12px; letter-spacing: 1px; color: var(--olive); margin-bottom: 8px; }
.event-details h3 { font-size: 25px; font-family: var(--serif); font-weight: 400; line-height: 1.55; margin-bottom: 10px; }
.event-details > p:not(.tag):not(.fine) { font-size: 16px; }
.event-meta { display: flex; gap: 20px; flex-wrap: wrap; font-size: 14px; color: var(--green); margin-top: 20px; }
.event-meta > span + span { border-left: 1px solid rgb(188, 200, 172); padding-left: 20px; }
.fine { font-size: 12px; color: var(--muted); margin-top: 12px; }
.round-link { border: 1px solid rgb(177, 189, 159); width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-size: 24px; transition: background 0.2s; }
.round-link:hover { background: rgb(217, 228, 200); }
.event-image { width: 115px; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 5px; }
.course-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 29px; }
.course-card { display: block; }
.course-image { aspect-ratio: 16 / 9; position: relative; overflow: hidden; background: rgb(230, 235, 219); }
.course-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.25s; }
.course-card:hover .course-image img { transform: scale(1.04); }
.play-icon { width: 42px; height: 42px; border: 1px solid rgba(255, 255, 255, 0.7); background: rgba(39, 65, 50, 0.796); color: white; border-radius: 50%; display: grid; place-items: center; position: absolute; inset: 0px; margin: auto; font-size: 16px; }
.course-card .tag { margin: 18px 0px 6px; }
.course-card h3 { font-size: 20px; line-height: 1.6; font-weight: 400; font-family: var(--serif); margin-bottom: 7px; }
.course-card > p:not(.tag) { font-size: 14px; }
.course-card .watch { font-size: 13px; display: flex; justify-content: space-between; color: var(--olive); margin-top: 15px; border-top: 1px solid var(--line); padding-top: 12px; }
.image-fallback { display: none; position: absolute; inset: 0px; align-items: center; justify-content: center; font: 24px var(--serif); color: var(--green); }
.course-image.no-image .image-fallback { display: flex; }
.course-image.no-image img { display: none; }
.course-image.no-image .play-icon { inset: auto 14px 14px auto; width: 30px; height: 30px; font-size: 12px; }
.contact { background: var(--green); color: rgb(241, 245, 232); padding: 77px 0px; }
.contact-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 100px; }
.contact .eyebrow { color: rgb(199, 216, 170); font-size: 14px; }
.contact h2 { font-size: 34px; line-height: 1.65; }
.contact p { color: rgb(209, 219, 199); margin: 21px 0px; font-size: 16px; }
.btn.light { background: var(--lime); color: var(--green); margin-top: 8px; }
.btn.light:hover { background: rgb(234, 242, 211); }
.contact-details { border-left: 1px solid rgb(97, 115, 90); padding-left: 48px; display: flex; flex-direction: column; gap: 24px; }
.contact-details > div > span { font-size: 11px; letter-spacing: 1.2px; color: rgb(187, 206, 164); display: block; margin-bottom: 8px; }
.contact-details > div > a { font: 24px Georgia; }
.contact-details p { margin: 0px; font-size: 16px; }
footer { background: rgb(245, 246, 239); padding: 35px 0px 20px; }
.footer-main { display: flex; justify-content: space-between; align-items: center; gap: 30px; padding-bottom: 27px; }
.footer-main strong { font-family: var(--serif); font-size: 22px; letter-spacing: 2px; font-weight: 400; }
.footer-main p { font-size: 12px; }
.footer-main > p { font-size: 15px; }
.footer-main > p > span { font: italic 15px Georgia; color: var(--olive); }
.footer-main > a { font-size: 12px; }
.footer-base { display: flex; justify-content: space-between; gap: 25px; font-size: 12px; border-top: 1px solid var(--line); padding-top: 17px; color: var(--muted); }
[hidden] { display: none !important; }
@media (max-width: 1150px) {
  .wrap { width: calc(100% - 72px); }
  .brand strong { font-size: 21px; letter-spacing: 2px; }
  .brand small { font-size: 9px; }
  .logo-crop { width: 60px; height: 60px; }
  .brand { gap: 9px; }
  nav { gap: 20px; font-size: 13px; }
  .hero-grid { gap: 45px; }
  h1 { font-size: 48px; }
  .hero-en { font-size: 29px; }
  .about-grid { gap: 30px; }
  .about h2 { font-size: 27px; }
  .contact-grid { gap: 50px; }
  .hero-actions { gap: 20px; }
  .hero-poster .poster-label { font-size: 9px; }
  .course-grid { gap: 22px; }
}
@media (max-width: 900px) {
  .header-row { flex-wrap: wrap; min-height: 92px; }
  .menu { display: block; background: none; border: 1px solid var(--line); width: 44px; height: 44px; color: var(--green); font-size: 22px; }
  nav { display: none; width: 100%; flex-direction: column; align-items: stretch; gap: 0px; padding: 5px 0px 22px; }
  nav.open { display: flex; }
  nav a { padding: 10px; }
  nav .nav-cta { justify-content: space-between; margin-top: 10px; }
  .hero-grid { gap: 30px; grid-template-columns: 1.1fr 1fr; }
  h1 { font-size: 39px; letter-spacing: 1px; }
  .hero-en { font-size: 25px; }
  .hero .eyebrow { font-size: 10px; letter-spacing: 1.5px; }
  .hero-actions { flex-wrap: wrap; gap: 16px; }
  .hero-foot { margin-top: 25px; }
  .poster-label span:first-child { display: none; }
  .poster-label { justify-content: flex-end; }
  .poster-crop { border-top-left-radius: 85px; }
  .poster-bottom > span:last-child { display: none; }
  .about-grid { grid-template-columns: 1fr 1.3fr; }
  .about-side { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; border-left: 0px; border-top: 1px solid var(--line); padding: 20px 0px 0px; }
  .about-side > p { margin: 0px; }
  .about-side > p br { display: none; }
  .about-side > p { word-spacing: 10px; }
  .section { padding: 62px 0px; }
  h2 { font-size: 32px; }
  .service-grid article { padding-right: 22px; }
  .service-grid article + article { padding-left: 22px; }
  .service-grid h3 { font-size: 23px; }
  .subhead { font-size: 14px; min-height: 34px; }
  .contact h2 { font-size: 28px; }
  .contact-details { padding-left: 30px; }
  .course-grid { gap: 18px; }
  .course-card h3 { font-size: 18px; }
  .event-card { gap: 24px; grid-template-columns: 90px 1fr 50px; }
  .event-details h3 { font-size: 23px; }
}
@media (max-width: 640px) {
  .wrap { width: calc(100% - 40px); }
  .topbar { font-size: 10px; padding: 7px 0px; letter-spacing: 0.8px; }
  .topbar .wrap > span:nth-child(2) { display: none; }
  .brand strong { font-size: 21px; }
  .brand small { font-size: 8px; letter-spacing: 0.5px; }
  .logo-crop { width: 52px; height: 52px; }
  .header-row { min-height: 86px; }
  .hero { padding: 35px 0px 37px; }
  .hero-grid { grid-template-columns: 1fr; gap: 34px; }
  .hero .eyebrow { font-size: 11px; margin-bottom: 19px; }
  h1 { font-size: clamp(36px, 10vw, 49px); line-height: 1.5; letter-spacing: 2px; }
  .hero-en { font-size: 28px; margin: 17px 0px 23px; }
  .intro { font-size: 16px; }
  .hero-actions { gap: 25px; margin-top: 26px; }
  .btn { padding: 14px 18px; gap: 25px; }
  .hero-foot { font-size: 12px; margin-top: 28px; }
  .hero-foot > span { display: inline; margin-left: 10px; font-size: 10px; }
  .hero-poster { width: 100%; max-width: none; }
  .poster-label span:first-child { display: block; }
  .poster-label { font-size: 10px !important; justify-content: space-between; }
  .poster-crop { border-top-left-radius: 90px; max-width: 440px; margin: auto; }
  .poster-bottom > span:last-child { display: block; font-size: 10px; }
  .poster-bottom > span:first-child { font-size: 15px; }
  .about { padding: 42px 0px; }
  .about-grid { grid-template-columns: 1fr; gap: 24px; }
  .about .eyebrow { margin-bottom: 12px; }
  .about h2 { font-size: 30px; }
  .about h2 br { display: none; }
  .about-grid > div:nth-child(2) { padding-top: 0px; }
  .about-side { grid-column: auto; }
  .about-side > p br { display: block; }
  .about-side > p { word-spacing: normal; font-size: 13px; }
  .section { padding: 48px 0px; }
  .section-head { display: block; margin-bottom: 30px; }
  .section-head > p, .section-head > .underlined { margin-top: 20px; }
  .eyebrow { font-size: 14px; letter-spacing: 1.5px; }
  .section-head > p { font-size: 15px; }
  .section-head > p span { font-size: 17px; }
  h2 { font-size: 30px; line-height: 1.6; }
  .service-grid { grid-template-columns: 1fr; }
  .service-grid article, .service-grid article + article { border-left: 0px; border-bottom: 1px solid var(--line); padding: 23px 0px; }
  .service-grid article:last-child { border-bottom: 0px; padding-bottom: 0px; }
  .number { float: right; margin-bottom: 0px; font-size: 25px; }
  .service-grid h3 { font-size: 25px; }
  .subhead { min-height: 0px; font-size: 16px; margin: 4px 0px 16px; }
  .service-grid p { margin-bottom: 14px; }
  .service-note { font-size: 12px; margin-top: 26px; }
  .event-card { grid-template-columns: 65px 1fr; gap: 19px; align-items: start; padding: 24px 0px; position: relative; }
  .event-date strong { font-size: 32px; }
  .event-date strong span { font-size: 10px; display: block; margin-top: 2px; }
  .event-date { gap: 7px; }
  .event-details h3 { font-size: 23px; }
  .event-details > p:not(.tag):not(.fine) { font-size: 15px; }
  .event-meta { gap: 7px; margin-top: 16px; font-size: 13px; display: block; }
  .event-meta > span { display: block; }
  .event-meta > span + span { border: 0px; padding: 0px; }
  .event-card > .round-link { grid-column: 2; width: auto; height: auto; border-radius: 0px; justify-self: start; font-size: 25px; border: 0px; margin-top: -10px; }
  .event-card > .round-link::before { content: "查看 Facebook "; font: 14px var(--sans); display: inline; }
  .event-card > .round-link { display: flex; gap: 14px; }
  .event-image { width: 65px; aspect-ratio: 1 / 1; }
  .course-grid { grid-template-columns: 1fr; gap: 29px; }
  .course-image { max-height: none; }
  .course-card h3 { font-size: 22px; }
  .course-card .tag { margin-top: 13px; }
  .course-card > p:not(.tag) { font-size: 15px; }
  .contact { padding: 45px 0px; }
  .contact-grid { grid-template-columns: 1fr; gap: 35px; }
  .contact h2 { font-size: 26px; letter-spacing: 0.3px; }
  .contact p { font-size: 15px; }
  .contact-details { border-left: 0px; border-top: 1px solid rgb(97, 115, 90); padding: 28px 0px 0px; gap: 23px; }
  .contact-details > div > a { font-size: 26px; }
  .footer-main { display: grid; grid-template-columns: 1fr auto; gap: 20px; }
  .footer-main > p { grid-area: 2 / 1 / auto / -1; font-size: 15px; }
  .footer-main strong { font-size: 21px; }
  .footer-main > a { font-size: 12px; }
  .footer-base { flex-direction: column; gap: 6px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}
.editable-copy { white-space: pre-line; overflow-wrap: anywhere; }
.logo-crop.original-image img { top: 0px; height: 100%; object-fit: contain; }
.poster-crop.original-image img { top: 0px; height: 100%; object-fit: contain; }
.hero h1.editable-copy { font-size: clamp(2rem, 4.1vw, 3.7rem); }
@media (max-width: 640px) {
  .hero h1.editable-copy { font-size: clamp(2rem, 9.5vw, 3rem); }
}
nav { gap: 18px; font-size: 13px; }
.hero-grid { grid-template-columns: 1fr 1.1fr; gap: 55px; }
.hero-poster { max-width: none; }
.hero .poster-crop { aspect-ratio: 1.1 / 1; border-radius: 100px 4px 4px; }
.hero .poster-crop.original-image img { object-fit: cover; object-position: 70% center; }
.hotline { background: var(--green); color: white; padding: 32px 0px; }
.hotline-grid { display: grid; grid-template-columns: 1fr 1.25fr; gap: 40px; align-items: center; }
.hotline .eyebrow { color: var(--lime); margin-bottom: 8px; letter-spacing: 1px; }
.hotline h2 { font-size: 28px; }
.hotline p { color: rgb(220, 230, 208); }
.hotline-en { font: italic 16px Georgia; margin-top: 4px; }
.hotline-numbers { display: flex; gap: 15px; align-items: center; font: 30px Georgia; flex-wrap: wrap; }
.hotline-numbers a { border-bottom: 1px solid rgba(219, 234, 175, 0.44); padding: 4px 0px; }
.hotline-numbers span { font-size: 20px; color: var(--lime); }
.hotline-hours { font-size: 13px; margin-top: 8px; white-space: pre-line; }
.map-link { margin-top: 12px; margin-left: 18px; }
.map-panel { margin-top: 35px; }
.map-panel iframe { display: block; width: 100%; height: 240px; border: 0px; border-radius: 4px; background: var(--soft); }
.service-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 0px 40px; }
.service-grid article, .service-grid article + article { border-top: 0px; border-right: 0px; border-left: 0px; border-image: none; border-bottom: 1px solid var(--line); padding: 28px 0px; }
.service-grid h3 { font-size: 26px; }
.service-grid .subhead { min-height: 24px; }
.service-links { display: flex; flex-wrap: wrap; gap: 12px; font-size: 14px; color: var(--olive); }
.team { background: white; border-top: 1px solid var(--line); }
.team-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.team-grid article { border-top: 1px solid var(--line); padding: 25px 0px; }
.team-grid h3 { font: 26px var(--serif); }
.team-grid .number { margin-bottom: 15px; }
.education-intro { max-width: 760px; margin-bottom: 40px; }
.education-types { display: flex; flex-wrap: wrap; gap: 12px; margin: 22px 0px; }
.education-types span { border: 1px solid var(--line); padding: 8px 16px; font-size: 14px; }
.learning .section-head > p { max-width: 320px; }
.activity-gallery { margin-bottom: 36px; }
.gallery-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border-radius: 4px; background: rgb(221, 230, 207); }
.gallery-track::-webkit-scrollbar { display: none; }
.gallery-slide { margin: 0px; flex: 0 0 100%; scroll-snap-align: start; min-width: 0px; }
.gallery-slide a { display: block; }
.gallery-slide img { width: 100%; height: 360px; display: block; object-fit: contain; background: rgb(218, 227, 206); }
.gallery-slide figcaption { padding: 14px 20px; font-size: 14px; color: var(--green); border-top: 1px solid rgb(199, 209, 185); }
.gallery-slide.community-photo img { object-fit: cover; object-position: center 45%; }
.gallery-controls { display: flex; align-items: center; justify-content: flex-end; gap: 18px; margin-top: 14px; }
.gallery-controls button { width: 44px; height: 44px; border: 1px solid rgb(177, 189, 159); border-radius: 50%; background: transparent; color: var(--green); }
.gallery-controls button:disabled { opacity: 0.35; cursor: default; }
.gallery-controls p { font-size: 12px; min-width: 44px; text-align: center; }
.donation { background: var(--soft); border-top: 1px solid var(--line); }
.donation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; }
.donation h2 { margin-bottom: 20px; }
.donation-accounts article { border-bottom: 1px solid var(--line); padding: 0px 0px 22px; margin-bottom: 24px; }
.donation-accounts h3 { font-size: 16px; font-weight: 400; color: var(--olive); }
.account-number { font: 32px Georgia; margin: 6px 0px 10px; color: var(--green); overflow-wrap: anywhere; }
.donation-accounts article > p:last-child { font-size: 13px; }
.spay { font-size: 14px; }
.faq-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 70px; }
.faq-list details { border-top: 1px solid var(--line); padding: 20px 0px; }
.faq-list details:last-child { border-bottom: 1px solid var(--line); }
.faq-list summary { cursor: pointer; list-style: none; font-size: 17px; display: flex; align-items: baseline; gap: 18px; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; margin-left: auto; color: var(--olive); font-size: 24px; flex-shrink: 0; }
.faq-list details[open] summary::after { content: "−"; }
.faq-number { font: italic 16px Georgia; color: var(--olive); }
.faq-list details > div { padding: 17px 30px 0px 38px; font-size: 15px; }
.faq-list .underlined { margin-top: 16px; }
summary:focus-visible { outline: rgb(130, 152, 84) solid 3px; outline-offset: 4px; }
@media (max-width: 1150px) {
  .header-row { gap: 14px; }
  nav { gap: 12px; font-size: 12px; }
  .brand strong { font-size: 20px; }
  nav .nav-cta { padding: 9px 12px; }
  .hero-grid { gap: 35px; }
  .hotline-numbers { font-size: 25px; }
  .faq-grid { gap: 35px; }
  .donation-grid { gap: 40px; }
}
@media (max-width: 900px) {
  .hotline-grid { grid-template-columns: 1fr; gap: 18px; }
  .hero-grid { gap: 28px; }
  .hero .poster-crop { aspect-ratio: 0.85 / 1; }
  .map-link { margin-left: 0px; }
  .map-panel iframe { height: 220px; }
  .faq-grid { grid-template-columns: 1fr; gap: 25px; }
  .donation-grid { gap: 35px; }
}
@media (max-width: 640px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero .poster-crop { aspect-ratio: 1.3 / 1; border-radius: 65px 4px 4px; max-width: none; }
  .hero .poster-crop.original-image img { object-position: 70% center; }
  .hotline { padding: 26px 0px; }
  .hotline h2 { font-size: 24px; }
  .hotline-numbers { font-size: 23px; gap: 10px; }
  .hotline .eyebrow { font-size: 10px; }
  .service-grid { grid-template-columns: 1fr; gap: 0px; }
  .service-grid article:last-child { padding-bottom: 24px; border-bottom: 1px solid var(--line); }
  .team-grid { grid-template-columns: 1fr; gap: 12px; }
  .team-grid h3 { font-size: 24px; }
  .donation-grid { grid-template-columns: 1fr; gap: 30px; }
  .account-number { font-size: 29px; }
  .gallery-slide img { height: 250px; }
  .gallery-slide figcaption { padding: 12px; font-size: 13px; }
  .faq-list summary { font-size: 16px; gap: 12px; }
  .faq-list details > div { padding-left: 29px; padding-right: 5px; }
  .education-types { gap: 8px; }
  .education-types span { font-size: 12px; padding: 6px 10px; }
  .map-panel { margin-top: 26px; }
  .hotline-en { font-size: 15px; }
  .hero-en { font-size: 27px; }
}
.gallery-image { height: 360px; }
.poster-source .gallery-image { height: 360px; width: 288px; max-width: 100%; margin: auto; position: relative; overflow: hidden; }
.poster-source .gallery-image img { position: absolute; width: 100%; height: auto; top: -39.84%; left: 0px; }
.gallery-track:focus-visible { outline: rgb(130, 152, 84) solid 3px; outline-offset: 4px; }
@media (max-width: 640px) {
  .gallery-image { height: 250px; }
  .poster-source .gallery-image { height: 250px; width: 200px; }
}
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: calc(-144px + 100svh); padding: 54px 0px; background: var(--deep); color: white; overflow: hidden; }
.hero-media { position: absolute; inset: 0px; z-index: -2; }
.hero-media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; }
.hero::before { content: ""; position: absolute; inset: 0px; z-index: -1; background: linear-gradient(90deg, rgba(15, 35, 25, 0.9) 0%, rgba(15, 35, 25, 0.77) 32%, rgba(15, 35, 25, 0.35) 62%, rgba(15, 35, 25, 0.08) 100%); }
.hero-grid { display: block; position: relative; }
.hero-copy { max-width: 580px; }
.hero h1, .hero .accent, .hero .period { color: rgb(255, 255, 255); }
.hero h1 { line-height: 1.4; text-shadow: rgba(16, 38, 25, 0.25) 0px 2px 20px; }
.hero .eyebrow, .hero .hero-en { color: rgb(224, 237, 199); }
.hero .eyebrow > span { background: rgb(224, 237, 199); }
.hero .intro, .hero .hero-foot, .hero .hero-foot > span { color: rgb(242, 245, 237); }
.hero .quiet-link { color: rgb(255, 255, 255); border-bottom: 1px solid rgba(255, 255, 255, 0.44); padding-bottom: 5px; }
.hero .btn { background: var(--lime); color: var(--deep); }
.hero .btn:hover { background: rgb(239, 246, 221); }
.hero-caption { position: absolute; right: 0px; bottom: 0px; color: rgb(255, 255, 255); font-size: 12px; letter-spacing: 2px; }
.hero a:focus-visible { outline-color: var(--lime); }
@media (max-width: 1150px) {
  .hero-copy { max-width: 520px; }
  .hero-caption { display: none; }
}
@media (max-width: 900px) {
  .hero { min-height: calc(-132px + 100svh); padding: 48px 0px; }
  .hero-copy { max-width: 470px; }
  .hero-media img { object-position: 60% center; }
  .hero::before { background: linear-gradient(90deg, rgba(15, 35, 25, 0.88), rgba(15, 35, 25, 0.64) 60%, rgba(15, 35, 25, 0.2)); }
}
@media (max-width: 640px) {
  .hero { min-height: calc(-118px + 100svh); padding: 42px 0px; }
  .hero-copy { max-width: none; }
  .hero-media img { object-position: 68% center; }
  .hero::before { background: linear-gradient(90deg, rgba(15, 35, 25, 0.85), rgba(15, 35, 25, 0.65)), linear-gradient(0deg, rgba(15, 35, 25, 0.3), transparent); }
  .hero h1.editable-copy { font-size: clamp(32px, 9.5vw, 42px); }
  .hero .hero-en { font-size: 27px; margin: 18px 0px 25px; }
  .hero .hero-actions { gap: 22px; }
  .hero .hero-foot { margin-top: 30px; }
  .hero .hero-foot > span { display: block; margin: 4px 0px 0px; font-size: 12px; }
  .hero .intro { font-size: 15px; }
}
nav a[aria-current="page"] { color: var(--olive); border-bottom: 2px solid var(--olive); }
.breadcrumbs { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 30px; font-size: 12px; color: var(--muted); }
.breadcrumbs a { color: var(--olive); }
.about-page .about { padding-top: 44px; border-bottom: 0px; }
.about-page .about-grid { grid-template-columns: 0.9fr 1.4fr 0.55fr; }
.about-page #about h1 { font-size: clamp(32px, 4vw, 50px); line-height: 1.4; letter-spacing: 1px; white-space: pre-line; }
.about-page #about h1 span { font: italic 32px Georgia; color: var(--olive); }
.about-page .map-panel { margin-top: 45px; }
.about-page .map-panel iframe { height: 320px; }
.about-page .team { background: var(--soft); }
@media (max-width: 900px) {
  .about-page .about-grid { grid-template-columns: 1fr 1.3fr; }
}
@media (max-width: 640px) {
  .breadcrumbs { padding-top: 22px; }
  .about-page .about { padding-top: 28px; }
  .about-page .about-grid { grid-template-columns: 1fr; }
  .about-page .map-panel iframe { height: 250px; }
}
nav { gap: 20px; }
nav a[aria-current="page"] { color: var(--olive); border-bottom: 2px solid var(--olive); }
@media (max-width: 1150px) {
  nav { gap: 12px; }
}
@media (max-width: 900px) {
  nav { gap: 0px; }
}
.topbar-contact { font-weight: 700; white-space: nowrap; text-decoration: underline; text-underline-offset: 4px; }
.topbar-contact:hover { color: var(--lime); }
.social-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.social-links .social-button { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 11px 16px; border: 1px solid rgb(219, 234, 175); background: rgb(240, 245, 229); color: var(--deep); border-radius: 6px; font-size: 16px; font-weight: 700; line-height: 1.5; transition: background 0.2s, transform 0.2s; }
.social-button svg { width: 23px; height: 23px; flex-shrink: 0; }
.social-button:hover { background: var(--lime); transform: translateY(-2px); }
.social-button > span:last-child { margin-left: 4px; }
@media (max-width: 640px) {
  .social-links { gap: 10px; }
  .social-links .social-button { padding: 11px 14px; }
}
.back-to-top { position: fixed; right: 28px; bottom: 28px; z-index: 25; display: grid; place-items: center; width: 42px; height: 42px; padding: 0px; border: 1px solid rgb(219, 234, 175); border-radius: 50%; background: var(--green); color: rgb(255, 255, 255); box-shadow: rgba(16, 42, 36, 0.2) 0px 4px 18px; transition: background 0.2s, transform 0.2s; }
.back-to-top svg { width: 20px; height: 20px; }
.back-to-top:hover { background: rgb(63, 94, 65); transform: translateY(-3px); }
@media (max-width: 640px) {
  .back-to-top { right: 18px; bottom: calc(18px + env(safe-area-inset-bottom)); width: 40px; height: 40px; }
  .footer-main { grid-template-columns: 1fr; }
  .footer-main > p { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .back-to-top { transition: none; }
}
.hero .intro { max-width: 670px; line-height: 1.8; font-size: 15px; }
.focus-services { margin: 38px 0px 44px; padding: 28px 0px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.focus-services h3 { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-weight: 400; margin-bottom: 22px; }
.focus-services h3 > span { font: italic 16px Georgia; color: var(--olive); margin-left: 12px; }
.focus-services ul { list-style: none; padding: 0px; margin: 0px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px 24px; }
.focus-services li strong { display: block; font-size: 17px; font-weight: 400; }
.focus-services li > span { font-size: 13px; color: var(--muted); }
.supervision { background: var(--soft); }
.supervision h2 > span { display: block; font: italic 24px Georgia; color: var(--olive); margin: 8px 0px 32px; }
.supervisor-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.supervisor-grid article { border-top: 1px solid rgb(185, 197, 167); padding: 24px 0px; }
.supervisor-grid h3 { font-style: ; font-variant-ligatures: ; font-variant-caps: ; font-variant-numeric: ; font-variant-east-asian: ; font-variant-alternates: ; font-variant-position: ; font-variant-emoji: ; font-stretch: ; font-size: ; line-height: ; font-family: ; font-optical-sizing: ; font-size-adjust: ; font-kerning: ; font-feature-settings: ; font-variation-settings: ; font-language-override: ; font-weight: 400; }
.supervisor-name { font: italic 18px Georgia; margin: 8px 0px 18px; color: var(--olive); }
.supervisor-grid article > p:last-child { font-size: 15px; }
.supervisor-grid article > p:last-child span { font-size: 13px; }
.donation-qr-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin-top: 42px; }
.donation-qr-grid article { border: 1px solid var(--line); padding: 26px; background: rgb(255, 255, 255); text-align: center; }
.donation-qr-grid h3 { font-size: 19px; font-weight: 400; margin-bottom: 20px; }
.qr-image { display: block; max-width: 280px; margin: 0px auto 20px; }
.qr-image img { width: 100%; height: auto; display: block; }
.contact-details > div > .contact-map { display: inline-block; font: 14px var(--sans); margin-top: 12px; border-bottom: 1px solid rgb(187, 206, 164); }
@media (max-width: 900px) {
  .focus-services ul { grid-template-columns: repeat(3, 1fr); }
  .supervisor-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .hero .intro { font-size: 14px; line-height: 1.75; }
  .focus-services ul { grid-template-columns: repeat(2, 1fr); gap: 18px; }
  .focus-services h3 > span { display: block; margin: 8px 0px 0px; }
  .supervisor-grid { grid-template-columns: 1fr; gap: 4px; }
  .donation-qr-grid { grid-template-columns: 1fr; gap: 20px; }
  .donation-qr-grid article { padding: 24px 18px; }
  .qr-image { max-width: 260px; }
}
nav .nav-about { display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 10px 17px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: rgb(255, 255, 255); line-height: 1.4; font-weight: 600; white-space: nowrap; }
nav .nav-about small { display: block; font-size: 10px; font-weight: 400; letter-spacing: 0.6px; margin-top: 3px; color: rgb(232, 238, 223); }
nav .nav-about:hover, nav .nav-about[aria-current="page"] { color: rgb(255, 255, 255); background: rgb(63, 94, 65); border: 1px solid var(--green); }
.supervisor-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 24px; }
.supervisor-grid article { border: 1px solid var(--line); border-radius: 8px; background: rgb(255, 255, 255); padding: 30px 34px; min-width: 0px; }
.supervisor-grid h3 { font-size: 28px; line-height: 1.5; }
.supervisor-name { font-size: 20px; margin: 8px 0px 22px; line-height: 1.5; }
@media (max-width: 900px) {
  nav .nav-about { justify-content: space-between; margin: 10px 0px; padding: 12px 18px; width: 100%; }
  .supervisor-grid article { padding: 26px; }
}
@media (max-width: 640px) {
  .supervisor-grid { grid-template-columns: 1fr; gap: 16px; }
  .supervisor-grid h3 { font-size: 26px; }
  .supervisor-name { font-size: 19px; }
  .supervisor-grid article { padding: 26px 24px; }
}
.services-overview { background: var(--soft); }
.service-category-grid { display: grid; grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 28px; }
.service-category-grid article { display: flex; flex-direction: column; align-items: flex-start; padding: 34px 36px; background: rgb(255, 255, 255); border: 1px solid var(--line); border-radius: 8px; }
.service-category-grid h3 { font: 30px/1.5 var(--serif); }
.service-category-grid .number { margin-bottom: 12px; }
.category-en { font: italic 19px / 1.5 Georgia; color: var(--olive); margin: 8px 0px 20px; }
.category-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0px 28px; }
.category-tags span { font-size: 12px; padding: 5px 10px; border-radius: 3px; background: var(--soft); color: var(--green); }
.service-category-grid .btn { margin-top: auto; gap: 24px; }
.about-focus { padding: 64px 0px; background: rgb(255, 255, 255); }
.about-focus .focus-services { margin: 0px; padding: 0px; border: 0px; }
.about-focus h2 { margin-bottom: 34px; font-size: 32px; }
.about-focus h2 > span { display: block; font: italic 22px Georgia; color: var(--olive); margin-top: 8px; }
.about-focus .focus-services ul { grid-template-columns: repeat(4, minmax(0px, 1fr)); gap: 16px; }
.about-focus .focus-services li { padding: 22px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); }
.annual-reports { background: var(--soft); }
.report-grid { display: grid; grid-template-columns: repeat(3, minmax(0px, 1fr)); gap: 28px; }
.report-card { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: rgb(255, 255, 255); }
.report-cover { display: block; aspect-ratio: 512 / 725; overflow: hidden; background: rgb(255, 255, 255); }
.report-cover img { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform 0.25s; }
.report-cover:hover img { transform: scale(1.025); }
.report-details { padding: 22px 24px; }
.report-details h3 { font: 32px Georgia; color: var(--green); }
.report-details p { font-size: 13px; margin: 6px 0px 18px; }
.administrative-hours { line-height: 1.8; white-space: pre-line; font-size: 14px !important; }
@media (max-width: 900px) {
  .service-category-grid article { padding: 28px; }
  .about-focus .focus-services ul { grid-template-columns: repeat(3, minmax(0px, 1fr)); }
  .report-grid { grid-template-columns: repeat(2, minmax(0px, 1fr)); }
  .annual-reports .section-head { align-items: flex-start; flex-direction: column; gap: 12px; }
}
@media (max-width: 640px) {
  .service-category-grid { grid-template-columns: 1fr; gap: 18px; }
  .service-category-grid article { padding: 26px 24px; }
  .service-category-grid h3 { font-size: 26px; }
  .category-en { font-size: 17px; }
  .about-focus h2 { font-size: 27px; }
  .about-focus .focus-services ul { grid-template-columns: repeat(2, minmax(0px, 1fr)); gap: 12px; }
  .about-focus .focus-services li { padding: 18px 14px; }
  .report-grid { grid-template-columns: 1fr; gap: 22px; }
  .report-card { max-width: 400px; width: 100%; margin: auto; }
  .report-details { padding: 20px; }
  .about-focus { padding: 48px 0px; }
}
@media (prefers-reduced-motion: reduce) {
  .report-cover img { transition: none; }
}
/* Clear page navigation, carousel controls and consistent number typography. */
.breadcrumbs { align-items: center; }
.breadcrumbs .home-button { display: inline-flex; align-items: center; justify-content: center; padding: 10px 22px; border: 1px solid var(--green); border-radius: 4px; background: var(--green); color: #fff; font-size: 14px; font-weight: 600; line-height: 1.4; text-align: center; }
.home-button small { display: block; margin-top: 3px; color: #e8eedf; font-size: 10px; font-weight: 400; letter-spacing: .6px; }
.breadcrumbs .home-button:hover { background: #365b43; }
.gallery-controls button { display: inline-flex; align-items: center; justify-content: center; width: 50px; height: 50px; border: 1px solid var(--green); background: var(--green); color: #fff; transition: background .2s; }
.gallery-controls button svg { width: 26px; height: 26px; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.gallery-controls button:hover:not(:disabled) { background: #365b43; }
.gallery-controls button:disabled { opacity: 1; background: #e3e8da; border-color: #c6cebd; color: #87927d; }
.hotline-numbers, .account-number, .contact-details > div > a[href^="tel:"], .contact-details > div > a[href*="wa.me"] { font-family: var(--sans); font-weight: 500; font-variant-numeric: lining-nums tabular-nums; letter-spacing: .02em; line-height: 1.4; }
.hotline-numbers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; font-size: 26px; }
.hotline-numbers span { display: none; }
.hotline-numbers a { text-align: center; white-space: nowrap; padding: 10px 12px; border: 1px solid rgba(219,234,175,.44); border-radius: 4px; }
.account-number { font-size: 28px; overflow-wrap: normal; white-space: nowrap; }
.contact-details > div > a[href^="tel:"], .contact-details > div > a[href*="wa.me"] { font-size: 24px; white-space: nowrap; }
@media (max-width: 640px) {
 .hotline-numbers { grid-template-columns: 1fr; max-width: 300px; gap: 10px; font-size: 24px; }
 .account-number { font-size: 26px; }
 .contact-details > div > a[href^="tel:"], .contact-details > div > a[href*="wa.me"] { font-size: 23px; }
}

/* October final design: shared navigation and homepage sections. */
header nav { gap: 18px; }
header nav a { white-space: nowrap; }
.hero { min-height: calc(100svh - 104px); }
#services { background: #DCE6D2; }
#services .service-grid { grid-template-columns: repeat(4,minmax(0,1fr)); gap: 24px; }
#services .service-grid article { padding: 28px 0 0; border-bottom: 0; }
#services .service-grid h3 { font-size: 25px; }
#services .service-grid .subhead { min-height: 52px; display: block; font-size: 14px; }
#services .service-grid p { font-size: 14px; }
.hotline-grid { grid-template-columns: 1fr 1.4fr; gap: 32px; align-items: center; }
.hotline h2 { font-size: 28px; }
.hotline-numbers { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 22px; }
.hotline-numbers span { display: inline; }
.hotline-numbers a { padding: 0; border: 0; }
.hotline-hours { font-size: 13px; margin-top: 14px; }
.learning .section-head { display: block; }
.learning .section-head h2 { font-size: clamp(24px,3vw,38px); }
.learning .section-head p:last-child { margin-top: 14px; }
.learning .activity-gallery { margin-top: 32px; }
.learning .gallery-track { gap: 16px; background: transparent; }
.learning .gallery-slide { flex: 0 0 calc((100% - 48px)/4); }
.learning .gallery-image { height: auto; aspect-ratio: 4/3; }
.learning .gallery-image img { height: 100%; object-fit: cover; }
.learning .gallery-slide figcaption { padding: 12px 0; font-size: 12px; }
.gallery-controls progress { flex: 1; height: 4px; max-width: none; accent-color: var(--green); border: 0; background: #c6cebd; }
.gallery-controls progress::-webkit-progress-bar { background: #c6cebd; }
.gallery-controls progress::-webkit-progress-value { background: var(--green); }
.event-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.event-track::-webkit-scrollbar { display: none; }
.event-track .event-card { flex: 0 0 100%; min-width: 0; box-sizing: border-box; scroll-snap-align: start; grid-template-columns: 130px minmax(0,1fr) 280px; gap: 32px; border: 0; padding: 0 0 12px; }
.events .section-head { margin-bottom: 20px; }
.event-date strong { font-size: 24px; line-height: 1.5; white-space: pre-line; overflow-wrap: anywhere; }
.event-poster { display: block; }
.event-poster img { width: 100%; max-height: 350px; object-fit: contain; display: block; }
.poster-placeholder { min-height: 180px; display: grid; place-items: center; background: var(--soft); color: var(--green); }
.event-details .underlined { margin-top: 16px; }
/* Support Bodhi: text, bank accounts and QR codes in three columns. */
.donation-grid { grid-template-columns: minmax(0,1.3fr) minmax(0,1fr) auto; gap: 56px; align-items: start; }
.donation-grid > div:first-child > p:last-child { line-height: 2; }
.donation-accounts { display: flex; flex-direction: column; gap: 40px; }
.donation-accounts article { margin: 0; padding: 0; border: 0; text-align: left; }
.donation-qrs { display: flex; gap: 32px; }
.bank-qr { margin: 0; }
.bank-qr figcaption strong { display: block; margin-top: 14px; font-size: 16px; font-weight: 400; color: var(--olive); }
.bank-qr figcaption { white-space: nowrap; }
.bank-qr figcaption span { display: block; margin-top: 4px; font-size: 13px; color: var(--muted); }
/* Crop the original QR in CSS; retain its exact modules and a white quiet zone. */
.qr-code { position: relative; width: 150px; aspect-ratio: 1; overflow: hidden; background: white; }
.qr-code img { position: absolute; max-width: none; width: 215%; height: 320%; left: -57.5%; top: -62.5%; filter: grayscale(1) brightness(.7) contrast(100); }
/* The QR uses high error correction, so a small centre logo still scans. */
.qr-code .qr-logo { width: 20%; height: auto; left: 40%; top: 40%; filter: none; border-radius: 3px; }
.qr-code.full-qr .qr-logo { display: none; }
.contact-grid { grid-template-columns: 1fr 1fr; gap: 64px; }
.contact-map-panel { display: flex; flex-direction: column; gap: 20px; }
.contact-map-panel .contact-map { align-self: flex-start; border-bottom: 1px solid currentColor; }
.contact-map-panel iframe { width: 100%; min-height: 370px; flex: 1; border: 0; border-radius: 4px; }
.contact-details>div:nth-child(2)>p { font-size: 17px; line-height: 1.8; }
@media(max-width:1150px){header nav { gap: 12px; } .event-track .event-card { grid-template-columns: 100px minmax(0,1fr) 230px; gap: 24px; }}
@media(max-width:900px){
 header nav { gap: 0; }
 #services .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
 .hotline-grid { grid-template-columns: 1fr; gap: 20px; }
 .learning .gallery-slide { flex-basis: calc((100% - 16px)/2); }
 .event-track .event-card { grid-template-columns: 80px minmax(0,1fr) 180px; gap: 20px; }
 .donation-grid { grid-template-columns: minmax(0,1fr) auto; gap: 40px; }
 .donation-grid > div:first-child { grid-column: 1 / -1; }
 .contact-grid { gap: 32px; }
}
@media(max-width:640px){
 .hero { min-height: calc(100svh - 86px); }
 #services .service-grid { grid-template-columns: 1fr; gap: 0; }
 #services .service-grid article { padding: 24px 0; border-bottom: 1px solid var(--line); }
 #services .service-grid .subhead { min-height: 0; }
 .hotline-numbers { max-width: none; font-size: 19px; gap: 8px; }
 .learning .gallery-slide { flex-basis: 100%; }
 .gallery-controls { gap: 12px; }
 .event-track .event-card { grid-template-columns: 64px minmax(0,1fr); gap: 18px; }
 .event-date strong { font-size: 18px; }
 .event-poster { grid-column: 2; }
 .event-poster img { max-height: 300px; }
 .donation-grid { grid-template-columns: 1fr; gap: 32px; }
 .donation-accounts { gap: 28px; }
 .contact-grid { grid-template-columns: 1fr; }
 .contact-map-panel iframe { min-height: 300px; }
}
#contact .contact-details { border-left: 0; padding-left: 0; }
.learning .section-head>div>p:last-child { color: var(--muted); font: italic 18px/1.6 Georgia,serif; }
[hidden]{display:none!important}
.qr-code.full-qr img{position:static;width:100%;height:100%;max-width:100%;object-fit:contain;filter:none}

/* About Us · final design */
.about-page .about { background: var(--paper); }
.about-page #about h1 { font: italic clamp(22px,2.4vw,28px)/1.6 Georgia,serif; color: var(--olive); letter-spacing: 0; }
.about-page #about h1::first-line { font: normal clamp(36px,4.2vw,52px)/1.4 var(--serif); color: var(--ink); letter-spacing: 3px; }
.about-page .about-grid > div:nth-child(2) > p:first-child { font-size: 17px; line-height: 2.1; color: var(--ink); }
.about-page .about .english-copy { font-size: 14px; line-height: 1.95; margin-top: 18px; }
.about-page .supervision { background: #DCE6D2; }
.about-page .supervision .eyebrow { margin-bottom: 44px; }
.about-page .supervisor-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 44px 28px; }
.about-page .supervisor-grid article { flex: 0 1 calc((100% - 112px) / 5); min-width: 0; padding: 0; border: 0; border-radius: 0; background: none; text-align: center; }
.advisor-photo { width: min(100%, 168px); aspect-ratio: 1; margin: 0 auto 22px; border-radius: 50%; overflow: hidden; background: #c8d5bb url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23f5f6ef'%3E%3Ccircle cx='12' cy='8.5' r='4.5'/%3E%3Cpath d='M3 23c0-5 4-8.5 9-8.5s9 3.5 9 8.5z'/%3E%3C/svg%3E") center 70% / 64% no-repeat; }
.advisor-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.about-page .supervisor-grid h3 { font: 23px/1.5 var(--serif); letter-spacing: 1px; }
.about-page .supervisor-name { font: italic 17px/1.5 Georgia,serif; margin: 4px 0 12px; color: var(--olive); }
.about-page .advisor-title { font-size: 14px; line-height: 1.8; color: var(--ink); }
.about-page .advisor-title span { font-size: 13px; color: var(--muted); }
.about-page .team { background: var(--paper); }
.about-page .team .section-head { margin-bottom: 28px; }
.about-page .about-focus { background: var(--soft); }
.about-page .about-focus .eyebrow { margin-bottom: 28px; }
.about-page .about-focus .focus-services li { background: #fff; border-radius: 2px; }
.about-page .annual-reports { background: var(--paper); }
.about-page .annual-reports .eyebrow { margin-bottom: 36px; }
.about-page .report-grid { grid-template-columns: repeat(5, minmax(0,1fr)); gap: 22px; }
.about-page .report-card { border: 0; border-radius: 0; background: none; overflow: visible; }
.about-page .report-cover { border: 1px solid var(--line); }
.about-page .report-details { padding: 14px 0 0; }
.about-page .report-details h3 { font: 26px/1.3 Georgia,serif; color: var(--ink); }
@media (max-width: 1000px) {
  .about-page .supervisor-grid article { flex-basis: calc((100% - 56px) / 3); }
  .about-page .report-grid { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
  .about-page .about-grid > div:nth-child(2) > p:first-child { font-size: 16px; line-height: 1.95; }
  .about-page .supervision .eyebrow { margin-bottom: 30px; }
  .about-page .supervisor-grid { gap: 32px 16px; }
  .about-page .supervisor-grid article { flex-basis: calc((100% - 16px) / 2); }
  .advisor-photo { width: min(100%, 132px); margin-bottom: 16px; }
  .about-page .supervisor-grid h3 { font-size: 20px; }
  .about-page .supervisor-name { font-size: 15px; }
  .about-page .advisor-title { font-size: 13px; }
  .about-page .report-grid { grid-template-columns: repeat(2, minmax(0,1fr)); gap: 24px 14px; }
  .about-page .report-card { max-width: none; }
  .about-page .report-details h3 { font-size: 21px; }
}