:root {
  --slate: #2B3241;
  --offwhite: #FAF9F6;
  --tan: #B0A18B;
  --brown: #251F19;
  --cream: #F5EEE3;
  --label: #9c8a6e;
  --radius: 2px;
  --radius-lg: 14px;
  --tan-deep: #978a72;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --shadow-tint: 43, 50, 65;
  --header-h: 110px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 10px); }
body {
  margin: 0;
  font-family: 'Amiri', Georgia, 'Times New Roman', serif;
  font-size: 18px;
  line-height: 1.8;
  color: #000;
  background: var(--offwhite);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: var(--slate); }
h1, h2, h3, h4 { font-family: 'Amiri', Georgia, serif; font-weight: 700; color: var(--slate); line-height: 1.1; margin: 0 0 20px; }
p { margin: 0 0 1em; }
.wrap { width: 80%; max-width: 1080px; margin: 0 auto; }
.wrap-wide { width: 90%; max-width: 1280px; margin: 0 auto; }
.pattern { background-image: url('../img/pattern.svg'); background-size: 300px 300px; background-color: var(--offwhite); }

/* Header */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: #fff; height: var(--header-h);
  box-shadow: 0 1px 0 rgba(var(--shadow-tint),0.08), 0 4px 14px rgba(var(--shadow-tint),0.04);
  border-bottom: 3px solid var(--slate);
}
.site-header .inner { height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 32px; }
.site-header .logo img { width: 345px; height: auto; }
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 30px; }
.site-nav a {
  font-family: 'Amiri', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: 1px;
  color: var(--slate); text-decoration: none; display: block; padding: 6px 0; white-space: nowrap;
}
@media (hover: hover) and (pointer: fine) { .site-nav a:hover { opacity: 0.7; } }

.site-nav .btn-donate { background: var(--slate); color: #fff; padding: 15px 20px; }
@media (hover: hover) and (pointer: fine) { .site-nav .btn-donate:hover { opacity: 0.88; } }

.has-sub { position: relative; }
.has-sub > a::after { content: ''; display: inline-block; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg) translateY(-3px); margin-left: 9px; }
.has-sub .sub {
  display: none; position: absolute; top: 100%; left: -20px; min-width: 200px; background: #fff;
  padding: 14px 20px; border-top: 3px solid var(--slate); box-shadow: 0 8px 20px rgba(var(--shadow-tint),0.1);
  flex-direction: column; align-items: flex-start; gap: 4px;
}

.has-sub .sub a { font-size: 17px; padding: 8px 0; white-space: nowrap; }
.nav-toggle { display: none; background: none; border: 0; padding: 8px; cursor: pointer; }
.nav-toggle span { display: block; width: 26px; height: 3px; background: var(--slate); margin: 5px 0; }

/* Buttons */
.btn {
  display: inline-block; font-family: 'Amiri', Georgia, serif; font-weight: 700; font-size: 18px; letter-spacing: 1px;
  text-decoration: none; padding: 12px 28px; border: 2px solid var(--slate); color: var(--slate); background: transparent;
  cursor: pointer; line-height: 1.3;
}
@media (hover: hover) and (pointer: fine) { .btn:hover { background: var(--slate); color: #fff; } }

.btn-light { border-color: #fff; color: #fff; text-transform: uppercase; font-size: 20px; }
@media (hover: hover) and (pointer: fine) { .btn-light:hover { background: #fff; color: var(--slate); } }

.btn-solid { background: var(--slate); color: #fff; }
@media (hover: hover) and (pointer: fine) { .btn-solid:hover { background: #3b4558; border-color: #3b4558; } }

.btn:disabled { opacity: .5; cursor: not-allowed; }

/* Page title banner (inner pages) */
.page-banner {
  background-color: var(--tan);
  background-image: url('../img/pattern-light.svg');
  background-size: 300px 300px;
  padding: 10vh 20px;
  text-align: center;
}
.page-banner h1 { color: #fff; font-size: clamp(56px, 9vw, 144px); margin: 0; line-height: 1.05; }
.page-banner.tall { padding: 12vh 20px; }

/* Home hero */
.hero {
  position: relative; min-height: 640px; display: flex; align-items: flex-end;
  background: linear-gradient(rgba(2,2,2,0.29), rgba(2,2,2,0.29)), url('../img/Group-photo.jpeg') center/cover no-repeat;
  color: #fff;
}
.hero .hero-text { padding: 0 0 60px 6vw; max-width: 760px; }
.hero h1 { color: #fff; font-size: 51px; text-transform: uppercase; line-height: 1.05; margin: 0 0 14px; max-width: 300px; }
.hero h2 { color: #fff; font-size: 26px; margin: 0 0 18px; }
.hero h3 { color: #fff; font-size: 22px; margin: 0 0 2px; }
.hero p { margin: 0 0 26px; font-size: 18px; }
.hero .btn-light { padding: 12px 28px; }

/* Two-column feature */
.hero + .feature { margin-top: 36px; }
.feature { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; background: var(--offwhite); }
.feature .photo { background-size: cover; background-position: 50% 0; min-height: 520px; }
/* Parallax: a slightly taller copy of the photo slides inside the frame as the page scrolls.
   Same cropping as the plain photo, so nobody gets cut off. Browsers without support just show the photo. */
.feature .photo { position: relative; overflow: clip; }
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .feature .photo::before {
      content: ''; position: absolute; left: 0; right: 0; top: -5%; bottom: -5%;
      background: inherit; background-position: 50% 0;
      animation: photoDrift linear both; animation-timeline: view(); animation-range: cover 0% cover 100%;
    }
    @keyframes photoDrift { from { transform: translateY(-4.5%); } to { transform: translateY(4.5%); } }
  }
}
.feature .copy { padding: 54px 6vw 54px 40px; }
.feature .copy .inner { max-width: 470px; }
.feature h2 { font-size: 50px; margin-bottom: 26px; }
.feature p { text-align: justify; }

/* Testimonials */
.testimonials { padding: 54px 0 70px; text-align: center; }
.testimonials h2 { font-size: 50px; margin-bottom: 40px; }
.slider { background: #fff; width: 80%; max-width: 1080px; margin: 0 auto; text-align: left; box-shadow: 0 4px 24px rgba(var(--shadow-tint),0.06); position: relative; }
.slide { display: none; padding: 80px 140px 70px; min-height: 360px; }
.slide.active { display: block; }
.slide p { font-size: 18px; line-height: 1.5; margin-bottom: 16px; }
.slide .who { font-style: italic; font-weight: 700; font-size: 18px; line-height: 1.5; margin: 0; }
.dots { display: flex; justify-content: center; gap: 10px; padding: 0 0 24px; }
.dots button { width: 9px; height: 9px; border-radius: 50%; border: 0; background: rgba(0,0,0,0.3); padding: 0; cursor: pointer; }
.dots button.active { background: #2b3241; }

/* Contact */
.contact-section { background: var(--tan) url('../img/conference-20.png') center/cover; padding: 54px 0 80px; }
.contact-card { background: #fff; width: 80%; max-width: 1080px; margin: 0 auto; padding: 50px 50px 56px; border-radius: var(--radius-lg); }
.contact-card h2 { font-size: 46px; text-align: center; margin-bottom: 8px; }
.contact-card .lead { text-align: center; margin-bottom: 26px; }

/* Forms */
.form-note { font-size: 16px; color: #444; margin-bottom: 14px; }
.form-note b { color: #c0392b; font-weight: 400; }
.f-row { display: grid; gap: 16px; margin-bottom: 20px; }
.f-row.two { grid-template-columns: 1fr 1fr; }
.f-row.three { grid-template-columns: 1fr 1fr 1fr; }
.field { display: block; }
.field > .lbl, .field legend.lbl { display: block; font-size: 17px; font-weight: 700; color: var(--slate); margin-bottom: 6px; line-height: 1.35; padding: 0; }
.field .req { color: #c0392b; margin-left: 3px; font-weight: 400; }
.field .desc { font-size: 15px; color: #555; margin: 0 0 6px; line-height: 1.4; }
.field fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
input[type=text], input[type=email], input[type=tel], input[type=date], input[type=number], select, textarea {
  width: 100%; font-family: 'Amiri', Georgia, serif; font-size: 18px; color: #1d2330; background: #fff;
  border: 1px solid #a9a9a9; border-radius: var(--radius); padding: 11px 13px; line-height: 1.4;
}
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--slate); outline-offset: 1px; border-color: var(--slate); }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #c0392b; }
.err-msg { color: #c0392b; font-size: 15px; margin-top: 4px; display: none; }
.field.invalid .err-msg { display: block; }
.choices { display: flex; flex-wrap: wrap; gap: 8px 26px; }
.choices label { display: flex; align-items: center; gap: 8px; font-size: 18px; cursor: pointer; }
.choices input { width: 18px; height: 18px; accent-color: var(--slate); }
.sec-title { font-size: 30px; margin: 40px 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--tan); }
.form-status { margin: 18px 0 0; padding: 14px 18px; display: none; font-size: 17px; }
.form-status.ok { display: block; background: #e8f3ea; color: #1d5a2a; }
.form-status.bad { display: block; background: #fbeaea; color: #8a1f1f; }
.hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.sig-box { border: 1px solid #a9a9a9; border-radius: var(--radius); background: #fff; position: relative; }
.sig-box canvas { width: 100%; height: 200px; display: block; touch-action: none; cursor: crosshair; }
.sig-actions { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.sig-actions button { background: none; border: 0; font-family: inherit; font-size: 16px; color: var(--slate); text-decoration: underline; cursor: pointer; padding: 0; }
.consent-box { background: var(--offwhite); border: 1px solid #ddd; padding: 20px 24px; margin-bottom: 20px; font-size: 17px; line-height: 1.6; }
.consent-box p { margin-bottom: 0.8em; }
.app-intro { max-width: 860px; margin: 0 auto; padding: 56px 0 20px; font-size: 18px; }
.form-wrap { max-width: 860px; margin: 0 auto; padding: 20px 0 80px; }

/* Program page */
.prose { max-width: 960px; margin: 0 auto; padding: 64px 0 30px; }
.prose h2 { font-size: 46px; }
.sample-sched { background: var(--cream); padding: 30px 36px; margin: 30px 0; }
.sample-sched h3 { font-size: 30px; }
.sample-sched p { margin: 0 0 6px; font-size: 18px; line-height: 1.5; }
.faculty-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; margin-top: 30px; text-align: center; }
.faculty-grid img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 50%; margin-bottom: 14px; }
.faculty-grid h4 { font-size: 22px; margin-bottom: 4px; }
.faculty-grid p { font-size: 16px; line-height: 1.4; }
.band { padding: 20px 0; }
.photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 24px; }
.photo-grid img { width: 100%; height: 210px; object-fit: cover; }
.accordion details { border-bottom: 1px solid rgba(43,50,65,0.25); }
.accordion summary { cursor: pointer; padding: 18px 40px 18px 0; font-weight: 700; font-size: 21px; color: var(--slate); list-style: none; position: relative; line-height: 1.35; }
.accordion summary::-webkit-details-marker { display: none; }
.accordion summary::after { content: '+'; position: absolute; right: 8px; top: 14px; font-size: 28px; font-weight: 400; }
.accordion details[open] summary::after { content: '\2212'; }
.accordion .ans { padding: 0 0 20px; font-size: 18px; }
.accordion .ans p:last-child { margin-bottom: 0; }

/* Gallery */
.gallery-grid { columns: 3 280px; column-gap: 14px; padding: 50px 0 80px; }
.gallery-grid a { display: block; margin-bottom: 14px; break-inside: avoid; }
.gallery-grid img { width: 100%; height: auto; }
.lightbox { position: fixed; inset: 0; background: rgba(0,0,0,0.88); display: none; align-items: center; justify-content: center; z-index: 100; padding: 30px; }
.lightbox.open { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox button { position: absolute; top: 18px; right: 24px; background: none; border: 0; color: #fff; font-size: 40px; cursor: pointer; line-height: 1; }

/* Donate */
.donate-body { background: #fff; padding: 95px 0 90px; }
#jsf2-wrap { font-family: 'Amiri', Georgia, serif; max-width: 560px; margin: 0 auto; color: var(--slate); }
.donate-body h2 { text-align: center; font-size: 36px; margin-bottom: 30px; }
.jsf2-toggle-row { display: flex; border: 2px solid var(--slate); border-radius: 2px; overflow: hidden; margin-bottom: 28px; }
.jsf2-toggle { flex: 1; padding: 14px 10px; border: none; background: #fff; color: var(--slate); font-family: inherit; font-size: 16px; font-weight: 700; letter-spacing: 1.5px; text-transform: uppercase; cursor: pointer; }
.jsf2-toggle.active { background: var(--slate); color: #fff; }
.jsf2-amounts { display: grid; gap: 10px; margin-bottom: 18px; }
.jsf2-amt { padding: 15px 18px; border: 2px solid #d3d0c8; background: #fff; text-align: left; font-family: inherit; font-size: 18px; color: var(--slate); cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .jsf2-amt:hover { border-color: var(--slate); } }

.jsf2-amt.active { border-color: var(--slate); background: var(--slate); color: #fff; }
.jsf2-note { font-size: 16px; color: #555; margin: -6px 0 18px; display: none; }
#jsf2-custom-wrap { display: none; margin-bottom: 18px; position: relative; }
#jsf2-custom-wrap span { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); font-size: 18px; }
#jsf2-custom-input { padding-left: 30px; }
#jsf2-submit { width: 100%; margin-top: 8px; }
.jsf2-err { color: #c0392b; min-height: 22px; font-size: 16px; margin: 10px 0 0; }
.jsf2-pay-head { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; border-bottom: 2px solid var(--slate); padding-bottom: 12px; margin-bottom: 22px; font-size: 20px; font-weight: 700; }
.jsf2-link { background: none; border: 0; padding: 0; font: inherit; font-size: 16px; font-weight: 400; color: var(--slate); text-decoration: underline; cursor: pointer; }
#jsf2-pay[hidden], #jsf2-picker[hidden] { display: none; }
#jsf2-checkout { min-height: 320px; }
.jsf2-secure { text-align: center; font-size: 15px; color: #666; margin-top: 18px; }

/* Message pages */
.message-page { padding: 120px 20px; text-align: center; max-width: 720px; margin: 0 auto; }
.message-page h2 { font-size: 44px; }

/* Footer */
.site-footer { background: var(--slate); padding: 92px 0 90px; position: relative; overflow: hidden; }
.site-footer .hexes { position: absolute; right: -40px; top: 0; width: 320px; height: 100%; pointer-events: none; }
.footer-card { position: relative; background: var(--tan); width: 80%; max-width: 1100px; margin: 0 auto; }
.footer-top { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding: 50px 60px; align-items: center; }
.footer-logo { text-align: center; }
.footer-logo img { width: 360px; margin: 0 auto 26px; }
.social { display: flex; gap: 8px; justify-content: center; }
.social a { width: 34px; height: 34px; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 2px; }
.social svg { width: 18px; height: 18px; fill: var(--slate); }
.footer-info h3 { color: #fff; font-size: 28px; margin-bottom: 18px; }
.footer-info p { color: #fff; font-weight: 700; font-size: 20px; line-height: 1.75; margin: 0 0 16px; }
.footer-info .row { display: flex; align-items: center; gap: 16px; color: #fff; font-weight: 700; font-size: 20px; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
.footer-info .row svg { width: 20px; height: 20px; fill: #fff; flex: none; margin-left: 16px; }
.footer-info a { color: #fff; text-decoration: none; }
.footer-info a.dark { color: #000; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,0.8); padding: 26px 20px; text-align: center; color: #fff; font-weight: 700; text-transform: uppercase; letter-spacing: 0.3px; font-size: 17px; }

/* Responsive */
@media (max-width: 1240px) {
  .site-header .logo img { width: 280px; }
  .site-nav ul { gap: 20px; }
  .site-nav a { font-size: 16px; }
  .site-nav .btn-donate { padding: 13px 16px; }
}
@media (max-width: 1100px) {
  .site-header .logo img { width: 230px; }
  .site-header .inner { padding: 0 20px; }
  .site-nav ul { gap: 14px; }
  .site-nav a { font-size: 15px; letter-spacing: 0.5px; }
}
@media (max-width: 980px) {
  :root { --header-h: 84px; }
  .site-header .inner { padding: 0 18px; }
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: var(--header-h); left: 0; right: 0; background: #fff; border-bottom: 3px solid var(--slate); padding: 10px 24px 24px; }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; align-items: flex-start; gap: 4px; }
  .site-nav a { font-size: 19px; padding: 10px 0; }
  .site-nav .btn-donate { display: inline-block; margin: 8px 0; }
  .has-sub .sub { display: flex; position: static; box-shadow: none; border-top: 0; padding: 0 0 0 16px; min-width: 0; }
  .has-sub > a::after { display: none; }
  .feature { grid-template-columns: 1fr; }
  .feature .photo { min-height: 380px; }
  .feature .copy { padding: 40px 8vw; }
  .feature .copy .inner { max-width: none; }
  .slide { padding: 50px 40px 40px; }
  .footer-top { grid-template-columns: 1fr; padding: 40px 28px; }
  .faculty-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 17px; }
  .site-header .logo img { width: 220px; }
  .hero { min-height: 520px; background: linear-gradient(rgba(2,2,2,0.18), rgba(2,2,2,0.62)), url('../img/Group-photo.jpeg') 62% center/cover no-repeat; }
  .hero .hero-text { padding: 0 6vw 44px; }
  .hero h1 { font-size: 40px; }
  .feature h2, .testimonials h2 { font-size: 38px; }
  .slide { padding: 36px 24px 28px; min-height: 0; }
  .slider, .contact-card, .wrap { width: 92%; }
  .contact-card { padding: 30px 20px 36px; }
  .f-row.two, .f-row.three { grid-template-columns: 1fr; }
  .footer-card { width: 92%; }
  .footer-info .row { font-size: 17px; flex-wrap: wrap; }
  .footer-bottom { font-size: 14px; }
  .site-footer .hexes { display: none; }
  .prose h2 { font-size: 38px; }
  .faculty-grid { gap: 16px; }
}


/* Motion */
@keyframes fadeUp { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.slide.active { animation: fadeUp .35s var(--ease-out) both; }
.site-header::after { content: ''; position: absolute; left: 0; right: 0; bottom: -3px; height: 14px; pointer-events: none; opacity: 0; box-shadow: 0 6px 14px rgba(var(--shadow-tint), .10); transition: opacity .25s var(--ease-out); }
.site-header.scrolled::after { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .slide.active { animation: none; }
  .site-header::after { transition: none; }
}


/* ===== Proposed refinements ===== */
html { interpolate-size: allow-keywords; }
button, input, select, textarea { font-family: inherit; }
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* Skip link */
.skip-link { position: absolute; left: 16px; top: -64px; z-index: 200; background: var(--slate); color: #fff; padding: 12px 18px; text-decoration: none; font-weight: 700; transition: top .15s var(--ease-out); }
.skip-link:focus { top: 12px; }
main:focus { outline: none; }

/* Footer: readable text, no clipping on phones */
.footer-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.footer-logo img { max-width: 100%; height: auto; }
.footer-info h3, .footer-info p, .footer-info .row, .footer-info a, .footer-bottom { color: var(--slate); }
.footer-info .row svg { fill: var(--slate); }
.footer-info a { text-decoration: underline; text-decoration-color: rgba(var(--shadow-tint), .35); text-underline-offset: 3px; display: inline-block; padding: 10px 0; }
.footer-info .row { font-size: 19px; letter-spacing: .2px; }
.footer-info a.dark { color: var(--slate); }
.footer-bottom { border-top-color: rgba(var(--shadow-tint), .35); }
.social { gap: 10px; }
.social a { width: 44px; height: 44px; }
.social svg { width: 20px; height: 20px; }
.page-banner { background-color: var(--tan-deep); }

/* Hero: darker where the small text sits */
.hero { background: linear-gradient(to top, rgba(2,2,2,0.62), rgba(2,2,2,0.30) 55%, rgba(2,2,2,0.22)), url('../img/Group-photo.jpeg') center/cover no-repeat; }

/* Comfortable reading width, no justified text */
.feature p { text-align: left; }
.prose p, .app-intro p, .accordion .ans p, .consent-box p, .sample-sched p { max-width: 70ch; }
.prose, .app-intro, .consent-box { hyphens: manual; }

/* Touch targets (visible size stays the same) */
.dots { gap: 22px; padding-bottom: 14px; }
.dots button { position: relative; }
.dots button::after { content: ''; position: absolute; inset: -17px -11px; }
.choices label { min-height: 44px; }
.choices input { width: 22px; height: 22px; }
.site-nav a { padding: 10px 0; }

/* Heading levels: faculty names are H3 now */
.faculty-grid h3 { font-size: 22px; margin-bottom: 4px; }

/* Motion */
.btn, .jsf2-toggle, .jsf2-amt { transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--ease-out); }
.btn:active, .jsf2-toggle:active, .jsf2-amt:active, .dots button:active { transform: scale(.97); }
.jsf2-amt, #jsf2-pay-summary, .jsf2-pay-head { font-variant-numeric: tabular-nums; }

/* About Us menu opens from its top edge */
.has-sub .sub { display: flex; visibility: hidden; opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: 20px 0; pointer-events: none;
  transition: opacity .15s ease-out, transform .18s var(--ease-out), visibility 0s linear .18s; }
.has-sub:focus-within .sub { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
@media (hover: hover) and (pointer: fine) {
  .has-sub:hover .sub { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition-delay: 0s; }
}

/* FAQ answers ease open */
@supports (interpolate-size: allow-keywords) {
  .accordion details::details-content { block-size: 0; overflow: clip; transition: block-size .25s var(--ease-out), content-visibility .25s allow-discrete; }
  .accordion details[open]::details-content { block-size: auto; }
}
.accordion summary::after { transition: transform .2s var(--ease-out); }

@media (max-width: 640px) {
  .footer-info .row { flex-wrap: nowrap; font-size: 17px; gap: 12px; }
  .footer-info .row svg { margin-left: 0; }
  .footer-info .row a { text-transform: none; letter-spacing: 0; overflow-wrap: anywhere; min-width: 0; }
}
@media (max-width: 980px) {
  .footer-top { grid-template-columns: minmax(0, 1fr); }
  .has-sub .sub { visibility: visible; opacity: 1; transform: none; pointer-events: auto; transition: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn:active, .jsf2-toggle:active, .jsf2-amt:active, .dots button:active { transform: none; }
  .has-sub .sub { transform: none; transition: opacity .01s; }
  .accordion details::details-content { transition: none; }
  .skip-link { transition: none; }
}

/* Donate: optional name and message */
.jsf2-extra { display: grid; gap: 16px; margin: 4px 0 18px; }
.jsf2-extra .opt { font-weight: 400; color: #666; }
.jsf2-extra textarea { min-height: 96px; }

/* Phone hero: photo on top, words below on a plain background (as on the old site) */
@media (max-width: 640px) {
  .hero { display: block; min-height: 0; background: var(--offwhite); color: var(--slate); }
  .hero::before { content: ""; display: block; aspect-ratio: 16 / 10; background: url('../img/Group-photo.jpeg') 62% center/cover no-repeat; }
  .hero .hero-text { padding: 30px 6vw 44px; max-width: none; }
  .hero h1, .hero h2, .hero h3 { color: var(--slate); }
  .hero h1 { max-width: none; font-size: 38px; }
  .hero h2 { font-size: 24px; }
  .hero h3 { font-size: 20px; }
  .hero p { color: var(--slate); }
  .hero .btn-light { border-color: var(--slate); color: var(--slate); }
  .hero + .feature { margin-top: 0; }
}