/* JAS Foundation website.
   Colours come from the logos: navy #35375d and gold #ce893e (Foundation), maroon #a31f3b (college crest).
   Gold is an accent or a button fill, never small text on a light page (--gold-dark is used for that). */

:root {
  --navy: #35375d;
  --navy-dark: #26274a;
  --navy-900: #1b1c38;
  --gold: #ce893e;
  --gold-dark: #8f5c1b;
  --gold-soft: #f6e8d3;
  --maroon: #a31f3b;
  --maroon-dark: #7d172d;
  --ink: #2a2c3f;
  --muted: #565a71;
  --line: #e6e1d5;
  --bg: #fbf8f2;
  --tint: #f4eee2;
  --surface: #fff;
  --radius: 14px; --radius-s: 8px; --radius-m: 12px;
  --shadow: 0 1px 2px rgba(38, 39, 74, 0.06), 0 10px 28px rgba(38, 39, 74, 0.09);
  --font-body: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-head: "Source Serif 4", Georgia, "Times New Roman", serif;
  --header-h: 76px;
}
html[lang="bn"] {
  --font-body: "Noto Sans Bengali", "Nirmala UI", "Vrinda", "Source Sans 3", system-ui, sans-serif;
  --font-head: "Noto Serif Bengali", "Nirmala UI", "Source Serif 4", serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}
html[lang="bn"] body { font-size: 1.0625rem; line-height: 1.9; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); text-underline-offset: 3px; }
a:hover { color: var(--maroon); }
[id] { scroll-margin-top: calc(var(--header-h) + 64px); }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

h1, h2, h3 { font-family: var(--font-head); color: var(--navy); line-height: 1.2; margin: 0 0 0.5em; font-weight: 700; }
html[lang="bn"] h1, html[lang="bn"] h2, html[lang="bn"] h3 { line-height: 1.45; }
h1 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
h2 { font-size: clamp(1.55rem, 3vw, 2.2rem); }
h3 { font-size: 1.15rem; }
html[lang="bn"] h3 { font-size: 1.2rem; }
p { margin: 0 0 1em; }
/* Running text is justified (owner, 2026-11-09). English words may break with a hyphen at the end of a line, so the gaps between words stay small in narrow columns
   (the browser knows no Bangla break points, so Bangla only stretches its gaps). Headings, labels, centred text, text on photos, buttons, forms, small cards and the sign-off are not touched. */
:where(.narrow:not(.center)) p, .prose p, .prose li, .split-text p, .activity-text p, .work-text p, .founder-text p, .give-text p, .reach p,
.message-quote, .section-head .lead, .objectives li { text-align: justify; text-justify: inter-word; hyphens: auto; overflow-wrap: break-word; }
/* Small cards (areas, values, timeline, SDGs, activity cards) stay left-aligned: their columns are only 190 to 330 px wide, and justified text there opens big gaps and stretches headings. */
.prose p.small, .founder-text .signoff, .pay-after { text-align: start; }
ul, ol { padding-inline-start: 1.25em; }

.container { width: min(100% - 40px, 1160px); margin-inline: auto; }
.narrow { max-width: 780px; }
.center { text-align: center; }
.center.narrow { margin-inline: auto; }
.small { font-size: 0.88rem; color: var(--muted); }

.skip { position: absolute; left: -999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 16px; z-index: 200; border-radius: var(--radius-s); }
.skip:focus { left: 8px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 2px solid transparent;
  font: 600 0.95rem/1.2 var(--font-body); text-decoration: none; cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
}
html[lang="bn"] .btn { font-size: 1rem; }
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-dark); color: #fff; }
.btn-gold { background: var(--gold); color: var(--navy-900); }
.btn-gold:hover { background: #dc9a52; color: var(--navy-900); }
.btn-outline { border-color: var(--navy); color: var(--navy); background: transparent; }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-ghost { border-color: rgba(255, 255, 255, 0.7); color: #fff; background: transparent; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); }
.btn-light:hover { background: var(--gold-soft); color: var(--navy); }
.btn-maroon { background: var(--maroon); color: #fff; }
.btn-maroon:hover { background: var(--maroon-dark); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 0.88rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.more { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--gold-dark); text-decoration: none; }
.more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.more:hover { color: var(--maroon); }
.more:hover svg { transform: translateX(3px); }

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.site-header .container { width: min(100% - 32px, 1280px); }
.bar { display: flex; align-items: center; gap: 18px; min-height: var(--header-h); }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--navy); flex: none; }
.brand img { height: 52px; width: auto; }
.brand-text { display: flex; flex-direction: column; line-height: 1.2; }
.brand-name { font: 700 1.25rem/1.15 var(--font-head); color: var(--navy); }
.brand-sub { font-size: 0.72rem; color: var(--gold-dark); font-weight: 600; margin-top: 2px; }
html[lang="bn"] .brand-sub { font-size: 0.8rem; }

.nav { margin-inline-start: auto; }
.nav ul { display: flex; flex-wrap: wrap; gap: 2px; list-style: none; margin: 0; padding: 0; }
.nav a { display: block; padding: 9px 11px; border-radius: var(--radius-s); text-decoration: none; color: var(--ink); font-weight: 500; font-size: 0.93rem; white-space: nowrap; }
/* Noto Sans Bengali runs wider than the old Bangla font: a little less side padding keeps the eight menu words on one line from 1340 px up */
html[lang="bn"] .nav a { padding-inline: 9px; font-size: 0.9rem; }
.nav a:hover { background: var(--tint); color: var(--navy); }
.nav a[aria-current="page"] { color: var(--navy); background: var(--gold-soft); font-weight: 600; }
.header-actions { display: flex; align-items: center; gap: 10px; flex: none; }

.lang-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; background: #fff; }
.lang-switch a { padding: 6px 12px; font-size: 0.85rem; font-weight: 600; text-decoration: none; color: var(--muted); line-height: 1.4; }
.lang-switch a:hover { background: var(--tint); color: var(--navy); }
.lang-switch a[aria-current="true"] { background: var(--navy); color: #fff; }

.nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--line); background: #fff; border-radius: var(--radius-m); cursor: pointer; align-items: center; justify-content: center; }
.nav-toggle .bars, .nav-toggle .bars::before, .nav-toggle .bars::after { display: block; width: 20px; height: 2px; background: var(--navy); border-radius: 2px; content: ""; position: relative; transition: transform 0.2s, top 0.2s; }
.nav-toggle .bars::before { position: absolute; top: -6px; }
.nav-toggle .bars::after { position: absolute; top: 6px; }
.nav-toggle[aria-expanded="true"] .bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .bars::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .bars::after { top: 0; transform: rotate(-45deg); }

.js .nav-toggle { display: inline-flex; }

/* the drop ribbon opened by the three-bar button: pages on small screens, extras on all, the editors' sign-in always last */
.menu-ribbon { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 18px 30px rgba(38, 39, 74, 0.14); max-height: calc(100vh - var(--header-h)); max-height: calc(100svh - var(--header-h)); overflow-y: auto; }
.menu-ribbon.is-open { display: block; }
.menu-ribbon [hidden] { display: none !important; }
.no-js .menu-ribbon { display: none; }
.ribbon-inner { padding: 8px 0 18px; }
.ribbon-list { list-style: none; margin: 0; padding: 0; }
.ribbon-list a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; color: var(--ink); text-decoration: none; font-weight: 500; font-size: 1.02rem; border-bottom: 1px solid var(--line); }
.ribbon-list a:hover { background: var(--tint); color: var(--navy); }
.ribbon-list a[aria-current="page"] { color: var(--navy); background: var(--gold-soft); font-weight: 600; }
.ribbon-list svg { width: 18px; height: 18px; flex: none; color: var(--gold-dark); }
.ribbon-h { margin: 16px 12px 2px; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold-dark); }
html[lang="bn"] .ribbon-h { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
.ribbon-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 16px; }
.ribbon-reg { margin: 0 12px; font-size: 0.85rem; color: var(--muted); }
.ribbon-login { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--navy); background: transparent; color: var(--navy); border-radius: 999px; padding: 9px 18px; font: 600 0.92rem/1.2 var(--font-body); cursor: pointer; margin-inline-start: 12px; }
.ribbon-login:hover { background: var(--navy); color: #fff; }
.ribbon-login svg { width: 16px; height: 16px; }

@media (max-width: 1339px) {
  .js .nav { display: none; }
  .no-js .nav { flex-basis: 100%; order: 3; }
  .no-js .bar { flex-wrap: wrap; padding-block: 8px; }
  .header-actions { margin-inline-start: auto; }
}
@media (min-width: 1340px) {
  .ribbon-pages { display: none; }
  .ribbon-inner { padding: 22px 0 18px; }
  .ribbon-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .ribbon-h { margin: 0 0 6px 12px; }
  .ribbon-list a { padding: 9px 12px; border: 0; border-radius: var(--radius-s); font-size: 0.95rem; }
  .ribbon-foot { flex-direction: row; justify-content: space-between; align-items: center; gap: 20px; margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
  .ribbon-reg { margin: 0 0 0 12px; }
  .ribbon-login { margin-inline-start: 0; }
}

/* home page: the header sits on the photo until the visitor scrolls (script adds .is-solid); without script it stays a normal solid header */
.js .page-home .site-header { position: fixed; left: 0; right: 0; transition: background-color 0.25s, border-color 0.25s; }
.js .page-home .site-header:not(.is-solid):not(.is-open) { background: transparent; border-bottom-color: transparent; backdrop-filter: none; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .brand-name { color: #fff; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .brand-sub { color: #f0c690; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .brand img { background: #fbf8f2; padding: 4px 8px; border-radius: var(--radius-m); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav a { color: rgba(255, 255, 255, 0.92); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.2); color: #fff; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .lang-switch { background: transparent; border-color: rgba(255, 255, 255, 0.55); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .lang-switch a { color: rgba(255, 255, 255, 0.9); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .lang-switch a:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.js .page-home .site-header:not(.is-solid):not(.is-open) .lang-switch a[aria-current="true"] { background: #fff; color: var(--navy); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav-toggle { background: transparent; border-color: rgba(255, 255, 255, 0.55); }
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav-toggle .bars,
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav-toggle .bars::before,
.js .page-home .site-header:not(.is-solid):not(.is-open) .nav-toggle .bars::after { background: #fff; }

@media (max-width: 560px) {
  .header-donate { display: none; }
  .brand-sub { display: none; }
  .brand img { height: 44px; }
  .brand-name { font-size: 1.1rem; }
  .header-actions { gap: 8px; }
}
/* very small phones (320 to 380 px): keep the language switch and the menu button on screen */
@media (max-width: 380px) {
  .bar { gap: 8px; }
  .brand { gap: 8px; }
  .brand img { height: 38px; }
  .brand-name { font-size: 0.98rem; }
  .header-actions { gap: 6px; }
  .lang-switch a { padding: 5px 9px; font-size: 0.8rem; }
  .nav-toggle { width: 40px; height: 40px; }
  .js .page-home .site-header:not(.is-solid):not(.is-open) .brand img { padding: 3px 5px; border-radius: var(--radius-s); }
}

/* ---------- hero slideshow ---------- */
.hero { position: relative; min-height: 78vh; min-height: 78svh; color: #fff; overflow: hidden; background: var(--navy-900); display: flex; }
.no-js .hero { min-height: clamp(560px, 86vh, 780px); }
.slides { position: absolute; inset: 0; overflow: hidden; }
/* the slides change by themselves: the next one comes in from the right while the current one leaves to the left (main.js sets the movement) */
.slide { position: absolute; inset: 0; overflow: hidden; visibility: hidden; will-change: transform; transition: transform 0.95s cubic-bezier(0.65, 0, 0.35, 1); }
.slide.is-active, .slide.is-moving { visibility: visible; }
.slide-img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 8s ease-out; }
.slide.is-active .slide-img { transform: scale(1.1); }
/* for visitors whose device asks for less motion: a gentle cross-fade, no sliding and no zoom */
.hero.is-calm .slide { transform: none !important; visibility: visible; opacity: 0; transition: opacity 0.9s ease !important; }
.hero.is-calm .slide.is-active { opacity: 1; }
.hero.is-calm .slide-img, .hero.is-calm .slide.is-active .slide-img { transform: none; transition: none !important; }
/* the title, line and buttons rise gently from below each time a slide arrives */
.js .hero .rise { opacity: 0; transform: translate3d(0, 28px, 0); }
.js .hero.is-in .rise { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 120ms), transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) calc(var(--i, 0) * 120ms); }
.js .hero.is-out .rise { opacity: 0; transform: none; transition: opacity 0.3s ease; }
.js .hero.is-calm .rise { transform: none !important; }
.js .hero.is-calm.is-in .rise { transition: opacity 0.8s ease calc(var(--i, 0) * 80ms) !important; }
.js .hero.is-calm.is-out .rise { transition: opacity 0.3s ease !important; }
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(27, 28, 56, 0.6) 0%, rgba(27, 28, 56, 0) 24%),
    linear-gradient(90deg, rgba(27, 28, 56, 0.84) 0%, rgba(27, 28, 56, 0.48) 48%, rgba(27, 28, 56, 0.08) 100%),
    linear-gradient(0deg, rgba(27, 28, 56, 0.82) 0%, rgba(27, 28, 56, 0) 42%);
}
.hero-inner { position: relative; z-index: 2; display: flex; align-items: flex-end; padding: 104px 0 150px; }
.hero-copy { max-width: 800px; }
.hero h1 { color: #fff; font-size: clamp(2.7rem, min(7vw, 9.6vh), 5.6rem); line-height: 1.03; letter-spacing: -0.01em; margin-bottom: 0.3em; text-wrap: balance; }
html[lang="bn"] .hero h1 { font-size: clamp(2.4rem, min(6vw, 8vh), 4.5rem); line-height: 1.3; letter-spacing: 0; }
.hero-lead { font-size: clamp(1.05rem, 1.7vw, 1.3rem); color: rgba(255, 255, 255, 0.93); max-width: 46ch; margin-bottom: 1.5em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.eyebrow { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase; color: var(--gold-dark); margin: 0 0 0.8em; }
html[lang="bn"] .eyebrow { font-size: 0.98rem; letter-spacing: 0; text-transform: none; font-weight: 600; }
.nb { white-space: nowrap; }
.eyebrow-light { color: #f0c690; }
.eyebrow-maroon { color: var(--maroon); }

.hero-controls { position: absolute; left: 0; right: 0; bottom: 28px; margin-inline: auto; z-index: 3; display: flex; flex-direction: column; gap: 14px; }
.hero-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.slide-caption { display: inline-flex; align-items: center; gap: 10px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.95); text-decoration: none; font-size: 0.95rem; font-weight: 500; min-width: 0; max-width: 100%; }
.slide-caption:hover { color: #fff; border-bottom-color: var(--gold); }
.slide-caption svg { width: 16px; height: 16px; flex: none; }
.slide-ctrl { display: flex; align-items: center; gap: 8px; flex: none; }
.ctrl-btn { width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.5); background: rgba(27, 28, 56, 0.45); color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; }
.ctrl-btn:hover { background: #fff; color: var(--navy); }
.ctrl-btn svg { width: 18px; height: 18px; fill: none; }
.hero-progress { display: flex; align-items: center; gap: 14px; }
.slide-count { flex: none; font-size: 0.85rem; font-weight: 600; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.92); font-variant-numeric: tabular-nums; }
.dots { display: flex; gap: 6px; align-items: center; flex: 1; }
.dot { flex: 1; height: 3px; border-radius: 2px; border: 0; background: rgba(255, 255, 255, 0.35); padding: 0; cursor: pointer; position: relative; }
.dot::after { content: ""; position: absolute; inset: -14px 0; }
/* the bar of the slide on show fills in gold over the 5 seconds until the next slide */
.dot::before { content: ""; position: absolute; inset: 0; border-radius: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left center; }
.dot.is-active::before { animation: dotfill var(--slide-delay, 5s) linear forwards; }
@keyframes dotfill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hero.is-held .dot.is-active::before, .hero.is-calm .dot.is-active::before { animation: none; transform: scaleX(1); }
.no-js .slide-ctrl, .no-js .hero-progress { display: none; }

.slide-caption span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .hero-shade { background: linear-gradient(180deg, rgba(27, 28, 56, 0.55) 0%, rgba(27, 28, 56, 0) 18%), linear-gradient(0deg, rgba(27, 28, 56, 0.93) 0%, rgba(27, 28, 56, 0.72) 55%, rgba(27, 28, 56, 0.25) 100%); }
  .hero-inner { padding: 96px 0 168px; }
  .hero-controls { bottom: 22px; gap: 12px; }
  .slide-caption { flex: 1; }
  .slide-ctrl .ctrl-btn[data-prev], .slide-ctrl .ctrl-btn[data-next] { display: none; }
}

/* ---------- facts strip ---------- */
.facts { position: relative; background: var(--surface); border-bottom: 1px solid var(--line); }
.facts-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.fact { padding: 26px 24px; border-inline-start: 1px solid var(--line); }
.fact:first-child { border-inline-start: 0; }
.fact-k { margin: 0 0 4px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold-dark); }
html[lang="bn"] .fact-k { letter-spacing: 0; text-transform: none; font-size: 0.92rem; }
.fact-v { margin: 0; font-weight: 600; color: var(--navy); line-height: 1.4; }
@media (max-width: 900px) {
  .facts-grid { grid-template-columns: repeat(2, 1fr); }
  .fact:nth-child(3) { border-inline-start: 0; }
  .fact:nth-child(n + 3) { border-top: 1px solid var(--line); }
}
@media (max-width: 480px) {
  .facts-grid { grid-template-columns: 1fr; }
  .fact { border-inline-start: 0; border-top: 1px solid var(--line); padding: 14px 20px; }
  .fact:first-child { border-top: 0; }
}

/* ---------- sections ---------- */
.section { padding: clamp(52px, 7vw, 92px) 0; }
.tint { background: var(--tint); }
.section-head { max-width: 740px; margin-bottom: 36px; }
.section-head .lead { font-size: 1.08rem; color: var(--muted); }
.lead { font-size: 1.1rem; }
.section > .container > p.center { margin-top: 36px; }

.page-head { position: relative; color: #fff; padding: clamp(48px, 7vw, 84px) 0; background: radial-gradient(900px 320px at 88% -30%, rgba(206, 137, 62, 0.4), transparent 62%), linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%); border-bottom: 4px solid var(--gold); }
.page-head h1 { color: #fff; margin-bottom: 0.3em; text-wrap: balance; }
.page-head .eyebrow { color: #f0c690; }
.page-head .lead { color: rgba(255, 255, 255, 0.88); max-width: 62ch; margin: 0; }
/* inner pages with a photo behind the title, in the same spirit as the home page */
.page-head.has-photo { display: flex; align-items: flex-end; min-height: clamp(300px, 40vh, 440px); padding: 0; overflow: hidden; background: var(--navy-900); border-bottom: 0; }
.page-head-media { position: absolute; inset: 0; }
.page-head-img { width: 100%; height: 100%; object-fit: cover; }
.page-head.has-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(27, 28, 56, 0.9) 0%, rgba(27, 28, 56, 0.58) 55%, rgba(27, 28, 56, 0.2) 100%), linear-gradient(0deg, rgba(27, 28, 56, 0.6) 0%, rgba(27, 28, 56, 0) 55%); }
.page-head-inner { position: relative; z-index: 2; }
.page-head.has-photo .page-head-inner { padding-block: clamp(44px, 6vw, 76px); }
.page-head.has-photo h1 { font-size: clamp(2.1rem, 4.8vw, 3.5rem); line-height: 1.1; max-width: 22ch; }
html[lang="bn"] .page-head.has-photo h1 { line-height: 1.35; max-width: 26ch; }
.page-head.has-photo .lead { font-size: clamp(1.02rem, 1.5vw, 1.2rem); max-width: 56ch; }

/* a slim pointer to a related page */
.seealso-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px 36px; flex-wrap: wrap; }
.seealso h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); margin-bottom: 0.3em; }
.seealso p:last-child { margin-bottom: 0; }
.seealso-inner > div { flex: 1 1 420px; }

.split { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 68px); align-items: center; }
.split-reverse { grid-template-columns: 0.95fr 1.05fr; }
.split-reverse .split-media { order: -1; }
.split-media .rounded { width: 100%; }
.rounded { border-radius: var(--radius); box-shadow: var(--shadow); }
.rounded.portrait { aspect-ratio: 4 / 4.4; object-fit: cover; }
@media (max-width: 860px) {
  .split, .split-reverse { grid-template-columns: 1fr; }
  .split-reverse .split-media { order: 0; }
}

.grid { display: grid; gap: 20px; list-style: none; padding: 0; margin: 0; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
/* a row of cards that does not fill the last line (the seven core values) centres that last line instead of leaving a hole */
@media (min-width: 1041px) {
  .grid-4.values { grid-template-columns: repeat(8, 1fr); }
  .grid-4.values > li { grid-column: span 2; }
  .grid-4.values > li:nth-last-child(3):nth-child(4n+1) { grid-column: 2 / span 2; }
}
@media (min-width: 601px) and (max-width: 1040px) {
  .grid-4.values > li:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 900px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .grid-3, .grid-4 { grid-template-columns: 1fr; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 1px 2px rgba(38, 39, 74, 0.04); }
.area { padding: 26px 24px; }
.area h3 { margin-bottom: 0.35em; }
.area p { margin: 0; color: var(--muted); }
.area-ico { display: inline-flex; width: 50px; height: 50px; border-radius: var(--radius); align-items: center; justify-content: center; background: var(--gold-soft); color: var(--navy); margin-bottom: 14px; }
.area-ico svg { width: 26px; height: 26px; }
.area-ico.maroon { background: #f6dde2; color: var(--maroon); }
.value { padding: 22px 22px 20px; border-top: 3px solid var(--gold); }
.value p { margin: 0; color: var(--muted); }
.maroon-top { border-top-color: var(--maroon); }

.post { overflow: hidden; transition: transform 0.2s, box-shadow 0.2s; }
.post:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.post > a { display: block; color: inherit; text-decoration: none; height: 100%; }
.post-img { aspect-ratio: 3 / 2; overflow: hidden; background: var(--tint); }
.post-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.post:hover .post-img img { transform: scale(1.05); }
.post-body { padding: 18px 20px 20px; }
.post-body h3 { margin-bottom: 0.3em; }
.post-body p { color: var(--muted); font-size: 0.95rem; margin-bottom: 0.8em; }

.college-feature { background: linear-gradient(180deg, #fff 0%, var(--bg) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.message { display: grid; grid-template-columns: 300px 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.message-quote { margin: 0; position: relative; }
.quote-ico { display: inline-flex; width: 44px; height: 44px; color: var(--gold); margin-bottom: 6px; }
.quote-ico svg { width: 44px; height: 44px; fill: currentColor; stroke: none; }
.message-quote blockquote { margin: 0 0 18px; }
.message-quote blockquote p { font: 600 clamp(1.35rem, 2.6vw, 1.9rem)/1.4 var(--font-head); color: var(--navy); }
html[lang="bn"] .message-quote blockquote p { line-height: 1.65; }
.message-quote figcaption { margin-bottom: 20px; color: var(--muted); }
@media (max-width: 760px) { .message { grid-template-columns: 1fr; } .message-photo { max-width: 260px; } }

.cta-band { background: radial-gradient(800px 260px at 12% 120%, rgba(206, 137, 62, 0.35), transparent 60%), var(--navy-dark); color: #fff; text-align: center; padding: clamp(48px, 6vw, 76px) 0; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 58ch; margin: 0 auto 1.6em; color: rgba(255, 255, 255, 0.86); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ---------- about ---------- */
.timeline { list-style: none; padding: 0; margin: 40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; counter-reset: tl; }
.timeline li { background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--gold); border-radius: var(--radius); padding: 20px; }
.timeline h3 { margin: 4px 0 6px; }
.timeline p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.tl-k { font: 700 1.5rem/1.2 var(--font-head); color: var(--gold-dark); }
@media (max-width: 760px) { .timeline { grid-template-columns: 1fr; } }

.glance { margin: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.glance > div { display: grid; grid-template-columns: 240px 1fr; gap: 16px; padding: 14px 22px; border-top: 1px solid var(--line); }
.glance > div:first-child { border-top: 0; }
.glance dt { font-weight: 600; color: var(--muted); }
.glance dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 640px) { .glance > div { grid-template-columns: 1fr; gap: 2px; } }

.vm { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.vm-card { padding: clamp(26px, 4vw, 40px); border-radius: var(--radius); background: var(--navy); color: #fff; }
.vm-card .eyebrow { color: #f0c690; }
.vm-card.vm-alt { background: var(--gold-soft); color: var(--navy-900); }
.vm-card.vm-alt .eyebrow { color: var(--gold-dark); }
.vm-statement { font: 600 clamp(1.15rem, 2vw, 1.45rem)/1.55 var(--font-head); margin: 0; }
html[lang="bn"] .vm-statement { line-height: 1.75; }
@media (max-width: 760px) { .vm { grid-template-columns: 1fr; } }

.founder { display: grid; grid-template-columns: 330px 1fr; gap: clamp(28px, 5vw, 64px); align-items: start; }
.founder-photo { position: sticky; top: calc(var(--header-h) + 24px); }
.founder-cap { margin: 14px 0 0; color: var(--muted); }
.signoff { margin-top: 1.6em; color: var(--muted); }
.signoff strong { color: var(--navy); font-size: 1.1rem; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder-photo { position: static; max-width: 300px; } }
.committee { list-style: none; padding: 0; display: grid; gap: 10px; }
.committee li { display: flex; justify-content: space-between; gap: 16px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.committee span { color: var(--muted); }

/* ---------- work ---------- */
.work-row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 5vw, 60px); align-items: center; margin-bottom: clamp(40px, 6vw, 72px); }
.work-row:last-child { margin-bottom: 0; }
.work-row.flip .work-media { order: 2; }
.work-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.work-text p { color: var(--ink); }
@media (max-width: 860px) { .work-row { grid-template-columns: 1fr; } .work-row.flip .work-media { order: 0; } }

.objectives { list-style: none; counter-reset: ob; padding: 0; margin: 28px 0 0; }
.objectives li { counter-increment: ob; position: relative; padding: 14px 0 14px 56px; border-top: 1px solid var(--line); }
html[dir="rtl"] .objectives li { padding: 14px 56px 14px 0; }
.objectives li:first-child { border-top: 0; }
.objectives li::before { content: counter(ob); position: absolute; left: 0; top: 12px; width: 36px; height: 36px; border-radius: 50%; background: var(--gold-soft); color: var(--navy); font: 700 1rem/36px var(--font-head); text-align: center; }
html[lang="bn"] .objectives li::before { content: counter(ob, bengali); }

/* ---------- activities ---------- */
.jump { background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: var(--header-h); z-index: 20; }
.jump ul { display: flex; gap: 8px; list-style: none; margin: 0; padding: 10px 0; overflow-x: auto; scrollbar-width: thin; }
.jump a { display: block; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: var(--tint); color: var(--navy); text-decoration: none; font-size: 0.9rem; font-weight: 500; border: 1px solid var(--line); }
.jump a:hover { background: var(--gold-soft); }
.activity { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(24px, 4vw, 48px); padding: clamp(32px, 5vw, 52px) 0; border-top: 1px solid var(--line); align-items: start; }
.activity:first-child { border-top: 0; padding-top: 0; }
.activity h2 { font-size: clamp(1.4rem, 2.6vw, 1.9rem); }
.tags { list-style: none; padding: 0; margin: 0 0 1em; display: flex; flex-wrap: wrap; gap: 8px; }
.tags li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: 999px; background: var(--tint); border: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; line-height: 1.5; }
.tags svg { width: 14px; height: 14px; flex: none; }
.gallery { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; }
.gallery.g1 { grid-template-columns: 1fr; }
.g-item { display: block; overflow: hidden; border-radius: var(--radius-m); background: var(--tint); cursor: zoom-in; position: relative; }
.g-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.4s; }
.g1 .g-item img { aspect-ratio: 16 / 11; }
.g-item:hover img { transform: scale(1.04); }
@media (max-width: 900px) { .activity { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .gallery { grid-template-columns: 1fr; } }

/* ---------- impact ---------- */
.reach { display: flex; gap: 18px; align-items: flex-start; margin-top: 28px; padding: 22px; background: var(--tint); border-radius: var(--radius); border: 1px solid var(--line); }
.reach p { margin: 0; }
.reach .area-ico { margin: 0; flex: none; }
.sdgs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.sdg { display: flex; gap: 16px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px 14px 14px; }
.sdg-n { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: var(--radius-m); background: var(--navy); color: #fff; font: 700 1.35rem/1 var(--font-head); }
.sdg h3 { font-size: 1rem; margin: 0 0 2px; font-family: var(--font-body); font-weight: 600; }
html[lang="bn"] .sdg h3 { font-family: var(--font-body); }
.sdg p { margin: 0; font-size: 0.92rem; color: var(--muted); line-height: 1.5; }
html[lang="bn"] .sdg p { line-height: 1.7; }
@media (max-width: 760px) { .sdgs { grid-template-columns: 1fr; } }

/* ---------- get involved ---------- */
.give { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 60px); align-items: start; }
.checks { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.checks li { display: flex; gap: 12px; align-items: flex-start; }
.checks svg { width: 22px; height: 22px; color: #fff; background: var(--gold-dark); border-radius: 50%; padding: 4px; flex: none; margin-top: 3px; }
.give-card { background: var(--surface); border: 2px solid var(--gold); border-radius: var(--radius); padding: 28px; box-shadow: var(--shadow); }
.give-card p:last-child { margin-bottom: 0; }
.pay-grid { display: grid; gap: 14px; }
.pay { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.pay ul { list-style: none; padding: 0; margin: 0; }
.pay li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; font-weight: 600; }
.copy { border: 1px solid var(--line); background: #fff; border-radius: var(--radius-s); width: 36px; height: 36px; cursor: pointer; color: var(--navy); display: inline-flex; align-items: center; justify-content: center; }
.copy svg { width: 18px; height: 18px; }
@media (max-width: 860px) { .give { grid-template-columns: 1fr; } }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.contact-cards { display: grid; gap: 16px; }
.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 24px; }
.contact-card h2 { margin-bottom: 0.2em; font-size: 1.15rem; }
html[lang="bn"] .contact-card h2 { font-size: 1.2rem; }
.contact-card p { margin-bottom: 0.5em; }
.big-link { font-weight: 600; font-size: 1.1rem; word-break: break-word; }
.copy-text { display: inline-flex; gap: 8px; align-items: center; border: 0; background: none; color: var(--gold-dark); font: 600 0.9rem var(--font-body); cursor: pointer; padding: 4px 0; min-height: 28px; }
.copy-text svg { width: 16px; height: 16px; }
.mail-form { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.mail-form label { display: block; font-weight: 600; margin: 16px 0 6px; font-size: 0.95rem; }
.mail-form input, .mail-form select, .mail-form textarea { width: 100%; padding: 12px 14px; border: 1px solid #cfc9ba; border-radius: var(--radius-m); font: 400 1rem var(--font-body); color: var(--ink); background: #fff; }
.mail-form input:focus, .mail-form select:focus, .mail-form textarea:focus { outline: 3px solid rgba(206, 137, 62, 0.5); border-color: var(--gold-dark); }
.mail-form .btn { margin: 20px 0 10px; }
.mail-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mail-form .form-error { margin: 14px 0 0; padding: 10px 14px; border-radius: var(--radius-m); background: #fdecea; color: #8a1c1c; border: 1px solid #f1b9b3; font-weight: 500; }
.mail-form .form-error[hidden], .mail-form .form-done[hidden] { display: none; }
.mail-form.is-sent > :not(.form-done) { display: none; }
.mail-form .form-done { text-align: center; padding: 18px 0 6px; outline: none; }
.mail-form .form-done .area-ico { margin: 0 auto 12px; background: #e6f4ea; color: #1f7a42; }
.mail-form .form-done h2 { margin-bottom: 8px; }
.mail-form .form-done .btn { margin-top: 14px; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }

/* ---------- footer ---------- */
.site-footer { background: var(--navy-900); color: #cfd0e2; padding-top: 56px; }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #f0c690; text-decoration: underline; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 0.9fr 1.3fr 1fr; gap: 36px; }
.footer-logo { background: #fbf8f2; padding: 8px 10px; border-radius: var(--radius-m); margin-bottom: 14px; height: 84px; width: auto; }
.footer-name { font: 700 1.3rem var(--font-head); color: #fff; margin: 0 0 6px; }
.footer-h { font: 600 0.82rem var(--font-body); letter-spacing: 0.12em; text-transform: uppercase; color: #f0c690; margin: 0 0 14px; }
html[lang="bn"] .footer-h { letter-spacing: 0; text-transform: none; font-size: 1rem; }
.footer-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.contact-list li { display: flex; gap: 10px; align-items: flex-start; }
.contact-list svg, .footer-list svg { width: 18px; height: 18px; flex: none; margin-top: 4px; color: #f0c690; }
.footer-list a svg { display: inline; vertical-align: -3px; margin: 0 0 0 6px; }
.footer-bottom { margin-top: 44px; padding: 20px 0 28px; border-top: 1px solid rgba(255, 255, 255, 0.14); font-size: 0.88rem; color: #aeb0c9; }
.footer-bottom p { margin: 0; }
@media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* the "Foundation profile" download button in the footer: gold, with navy text (the footer's own link colour would be white on gold) */
.footer-profile { margin-top: 18px; }
.site-footer a.footer-profile-btn { display: inline-flex; align-items: center; gap: 12px; padding: 10px 20px 10px 14px; border-radius: var(--radius); background: var(--gold); color: var(--navy-900); text-decoration: none; transition: background 0.2s, transform 0.2s; }
.site-footer a.footer-profile-btn:hover { background: #dc9a52; color: var(--navy-900); text-decoration: none; transform: translateY(-1px); }
.site-footer a.footer-profile-btn:focus-visible { outline-color: #fff; }
.footer-profile-btn svg { width: 22px; height: 22px; flex: none; }
.fp-text { display: flex; flex-direction: column; line-height: 1.25; }
.fp-text strong { font-weight: 700; font-size: 0.98rem; }
.fp-text small { font-size: 0.78rem; font-weight: 500; }
html[lang="bn"] .fp-text small { font-size: 0.85rem; }


/* ---------- the documents list ---------- */
.docs { list-style: none; padding: 0; margin: 18px 0 0; display: grid; gap: 10px; }
.docs li { display: flex; align-items: center; justify-content: space-between; gap: 14px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); padding: 14px 18px; }
.docs a { font-weight: 600; }
.docs-type { flex: none; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; color: var(--gold-dark); background: var(--gold-soft); border-radius: 999px; padding: 3px 10px; }

/* ---------- lightbox ---------- */
.lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(15, 16, 32, 0.94); display: flex; align-items: center; justify-content: center; padding: 16px; }
.lightbox figure { margin: 0; max-width: min(1200px, 92vw); text-align: center; }
.lightbox img { max-height: 80vh; max-width: 100%; width: auto; margin: 0 auto; border-radius: var(--radius-m); object-fit: contain; }
.lightbox figcaption { color: #e9e9f4; margin-top: 12px; font-size: 0.95rem; }
.lb-close, .lb-prev, .lb-next { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.1); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: #fff; color: var(--navy); }
.lb-close svg, .lb-prev svg, .lb-next svg { width: 22px; height: 22px; }
.lb-close { top: 16px; right: 16px; }
.lb-prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 16px; top: 50%; transform: translateY(-50%); }
@media (max-width: 600px) { .lb-prev, .lb-next { top: auto; bottom: 20px; transform: none; } .lb-prev { left: 24px; } .lb-next { right: 24px; } }
body.lb-open { overflow: hidden; }

/* ---------- parts the editors can hide, sections they add, facts that can be empty ---------- */
[data-hidden]:not(.jas-ghost), [data-fact-row][hidden], [data-committee][hidden], nav.jump li[hidden] { display: none !important; }
.custom-body ul { padding-inline-start: 1.3em; }
.custom-body p:last-child, .custom-body ul:last-child { margin-bottom: 0; }
.custom-gallery { margin-top: 24px; }
.custom-body + .btn-row, .custom-gallery + .btn-row { margin-top: 20px; }
.activity-text .btn-row { margin-top: 14px; }
.activity:not(:has(.gallery)) { grid-template-columns: 1fr; }
.pay .small { margin: 10px 0 0; color: var(--muted); }
.pay-line { display: flex; flex-direction: column; min-width: 0; }
.pay-k { font-weight: 500; font-size: 0.82rem; color: var(--muted); }
.pay-v { overflow-wrap: anywhere; }
.pay li + li { border-top: 1px solid var(--line); }

/* ways to give, one at a time: each method is a heading you press; the first is open. Without JavaScript every card simply shows. */
.pay-grid.is-acc { gap: 10px; }
.pay-grid.is-acc .pay { padding: 0; overflow: hidden; transition: border-color 0.2s; }
.pay-grid.is-acc .pay.is-open { border-color: var(--gold); }
.pay-grid.is-acc .pay h3 { margin: 0; }
.pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 54px; padding: 12px 20px; border: 0; background: transparent; color: var(--navy); font: inherit; text-align: start; cursor: pointer; }
.pay-head::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform 0.2s; }
.pay-head[aria-expanded="true"]::after { transform: rotate(-135deg); }
.pay-head:hover { background: var(--gold-soft); }
.pay-head:focus-visible { outline: 3px solid var(--gold); outline-offset: -3px; }
.pay-panel { padding: 0 20px 16px; }
.pay-panel[hidden] { display: none; }
.pay-after { margin: 16px 0 0; color: var(--muted); font-size: 0.95rem; }
.pay-wrap:has(.give-card) ~ .pay-after { display: none; }
@media (prefers-reduced-motion: reduce) { .pay-head::after, .pay-grid.is-acc .pay { transition: none; } }

/* Short links and the QR code on the Donate page (only drawn once the Foundation's short links are set) */
.short-links { display: grid; gap: 14px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.short-item { display: flex; align-items: center; gap: 18px; }
.short-qr { flex: none; width: 132px; height: 132px; padding: 8px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-m); }
.short-h { margin: 0 0 4px; font-weight: 700; color: var(--navy); }
.short-l { margin: 0 0 8px; overflow-wrap: anywhere; }
@media (max-width: 420px) { .short-item { flex-direction: column; align-items: flex-start; } }

/* "Share on WhatsApp" (only drawn once the website has its public address) */
/* Share (2026-11-14): one button; resting the pointer on it (or pressing it) opens WhatsApp, Facebook, Messenger and Copy link. Without script the list still opens on hover and focus. */
.share { position: relative; display: inline-block; margin: 16px 0 0; }
.share .btn svg { width: 18px; height: 18px; flex: none; }
.share .share-caret { width: 16px; height: 16px; margin-inline-start: 2px; transition: transform 0.18s ease; }
.share:hover .share-caret, .share.is-open .share-caret { transform: rotate(180deg); }
.share-menu { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 6px); min-width: 218px; margin: 0; padding: 6px; list-style: none; background: #fff; border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 16px 36px rgba(38, 39, 74, 0.18); opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; }
.share-menu::before { content: ""; position: absolute; inset-inline: 0; top: -10px; height: 10px; }   /* a bridge, so the list stays open while the pointer travels from the button to it */
.share:hover .share-menu, .share:focus-within .share-menu, .share.is-open .share-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.share-item { display: flex; align-items: center; gap: 12px; width: 100%; padding: 10px 12px; border: 0; border-radius: 9px; background: none; color: var(--navy); font: inherit; font-weight: 600; font-size: 0.95rem; text-align: start; text-decoration: none; cursor: pointer; }
.share-item:hover, .share-item:focus-visible { background: var(--tint); }
.share-item svg { width: 20px; height: 20px; flex: none; }
.share-item[data-share-via="whatsapp"] svg { color: #1c9d4f; }
.share-item[data-share-via="facebook"] svg { color: #1877f2; }
.share-item[data-share-via="messenger"] svg { color: #0a7cff; }
.share-note { position: absolute; inset-inline-start: 0; top: calc(100% + 6px); z-index: 31; padding: 8px 12px; border-radius: 10px; background: var(--navy); color: #fff; font-size: 0.88rem; font-weight: 600; white-space: nowrap; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity 0.16s ease, transform 0.16s ease, visibility 0s linear 0.16s; pointer-events: none; }
.share-note.on { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .share-menu, .share-note, .share .share-caret { transition: none; } }
.jas-hl { outline: 3px solid var(--gold); outline-offset: 6px; border-radius: var(--radius-s); animation: jas-pulse 1.4s ease-in-out 3; }
@keyframes jas-pulse { 0%, 100% { outline-color: var(--gold); } 50% { outline-color: transparent; } }

/* ---------- motion preferences ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-duration: 0.01ms !important; }
  .slide-img, .slide.is-active .slide-img { transform: none; }
}
@media print {
  .site-header, .hero-controls, .cta-band, .lightbox, .jump, .help { display: none !important; }
  body { background: #fff; }
}

/* long-form text pages (Privacy) */
.prose h2 { margin-bottom: 14px; }
.prose ul { margin: 0 0 1em; padding-inline-start: 1.25em; }
.prose li { margin: 0.55em 0; }
.prose li::marker { color: var(--gold-dark); }
.prose p.small { color: var(--muted); font-size: 0.92rem; margin-top: 1.4em; }
.site-footer .footer-bottom a { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- "Ask for help" button (every page) ---------- */
.help { position: fixed; right: 16px; bottom: 16px; z-index: 45; transition: bottom 0.3s ease, transform 0.25s ease; }
/* on a phone it slides out of the way while the visitor scrolls down (so it never sits on a button), and returns on the first scroll up */
.help.is-tucked { transform: translateY(calc(100% + 32px)); }
.help.is-tucked:focus-within { transform: none; }
@media (prefers-reduced-motion: reduce) { .help { transition: bottom 0.3s ease; } }
/* the Home page shows two recent activities on a phone; "All activities" is right below them */
@media (max-width: 600px) { .page-home .posts > li:nth-child(n+3) { display: none; } }
.page-home:not(.is-scrolled) .help { bottom: 120px; }   /* above the slide controls (they reach about 102 px up from the bottom of the photo) */
@media (max-width: 640px) { .page-home:not(.is-scrolled) .help { bottom: 112px; } }
html.jas-admin .help { bottom: calc(var(--jas-bar-h, 0px) + 16px) !important; }
.no-js .help { display: none; }
.help-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 22px 0 18px; border: 0; border-radius: 999px; background: var(--maroon); color: #fff; font: 700 1rem var(--font-body); cursor: pointer; box-shadow: 0 8px 24px rgba(27, 28, 56, 0.38); }
.help-btn:hover, .help.is-open .help-btn { background: var(--maroon-dark); }
.help-btn svg { width: 22px; height: 22px; flex: none; }
.help-btn:focus-visible, .help-opt:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.help-panel { position: absolute; right: 0; bottom: calc(100% + 12px); width: min(340px, calc(100vw - 32px)); background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 18px 48px rgba(27, 28, 56, 0.34); padding: 16px; }
.help-panel[hidden], .help-call[hidden], .help [hidden] { display: none; }
.help-title { margin: 0 0 12px; font-weight: 700; color: var(--navy); }
.help-opt { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px; margin: 0 0 8px; border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--bg); color: var(--ink); text-align: start; text-decoration: none; font: inherit; cursor: pointer; }
.help-opt:hover { background: var(--gold-soft); border-color: var(--gold); color: var(--ink); }
.help-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; background: var(--gold-soft); color: var(--gold-dark); display: inline-flex; align-items: center; justify-content: center; }
.help-ico svg { width: 20px; height: 20px; }
.help-txt { display: grid; gap: 1px; min-width: 0; }
.help-txt strong { color: var(--navy); }
.help-txt small { color: var(--muted); font-size: 0.86rem; }
.help-call { margin: 0 0 4px; padding: 14px 14px 12px; border-radius: var(--radius-m); background: var(--tint); text-align: center; }
.help-who { margin: 0; color: var(--muted); font-size: 0.88rem; font-weight: 600; }
.help-num { display: block; margin: 2px 0 10px; font: 700 1.55rem var(--font-body); letter-spacing: 0.02em; color: var(--navy); text-decoration: none; }
.help-call-act { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; justify-content: center; }
@media (max-width: 480px) { .help { right: 12px; } .help-btn { padding: 0 18px 0 14px; } }

/* ---------- Gentle entrance for boxes (2026-11-08) ----------
   Boxes that start below the fold rise into view as the visitor scrolls (main.js adds .reveal, then .is-in when the box is on screen). The motion is an
   animation that waits, paused at its first frame, until the box is on screen: with no script, with "reduce motion", in print and with every animation
   switched off, nothing is ever hidden. Boxes that are not links answer a pointer with a soft shadow only (a lift would suggest they can be clicked). */
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
/* 2026-11-14 (owner's wish): boxes slide in from the left or the right as the page reaches them; main.js picks the side from where the box sits (the left box of a row
   from the left, the right box from the right, the middle one rises; a single column takes turns). */
@keyframes slide-l { from { opacity: 0; transform: translateX(-64px); } to { opacity: 1; transform: none; } }
@keyframes slide-r { from { opacity: 0; transform: translateX(64px); } to { opacity: 1; transform: none; } }
.reveal { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) backwards; animation-delay: var(--d, 0s); animation-play-state: paused; }
.reveal.from-l { animation-name: slide-l; animation-duration: 0.75s; }
.reveal.from-r { animation-name: slide-r; animation-duration: 0.75s; }
.reveal.is-in { animation-play-state: running; }
main { overflow-x: clip; }   /* a box that is still sliding in must never widen the page */
.card { transition: box-shadow 0.2s ease, transform 0.2s ease; }
.card:not(.post):hover { box-shadow: 0 8px 22px rgba(38, 39, 74, 0.1); }
.sdg { transition: box-shadow 0.2s ease; }
.sdg:hover { box-shadow: 0 6px 18px rgba(38, 39, 74, 0.1); }
@media (prefers-reduced-motion: reduce), print {
  .reveal { animation: none; }
  .card, .sdg { transition: none; }
}

/* ---------- Loading screen (2026-11-14): the icon in grey, filling with colour from the bottom while the page loads ----------
   Hidden unless the small script in the page shows it (see SPLASH_SCRIPT in layout.py): never on a fast connection, never twice in a visit, never with "reduce motion". */
.preload { position: fixed; inset: 0; z-index: 1000; display: none; align-items: center; justify-content: center; background: var(--bg, #fbf8f2); opacity: 1; transition: opacity 0.3s ease; }
.preload.on { display: flex; animation: pl-in 0.25s ease backwards; }
.preload.out { opacity: 0; pointer-events: none; }
@keyframes pl-in { from { opacity: 0; } to { opacity: 1; } }
.pl-mark { position: relative; width: 88px; height: 101px; }
.pl-mark img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pl-grey { filter: grayscale(1) opacity(0.3); }
.pl-color { clip-path: inset(100% 0 0 0); }
.preload.go .pl-color { clip-path: inset(16% 0 0 0); transition: clip-path 2.8s cubic-bezier(0.12, 0.6, 0.2, 1); }
.preload.full .pl-color { clip-path: inset(0 0 0 0); transition: clip-path 0.24s linear; }
@media print { .preload { display: none !important; } }

/* ---------- Back to top (2026-11-09): a small round button on the left, after a long scroll; the Ask for help button keeps the right ---------- */
.to-top { position: fixed; left: 16px; bottom: 18px; z-index: 40; width: 46px; height: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; background: var(--navy); color: #fff; cursor: pointer; box-shadow: 0 6px 18px rgba(38, 39, 74, 0.3); transition: transform 0.15s ease, background 0.15s ease; }
.to-top[hidden] { display: none; }
.to-top:hover { background: var(--navy-dark); transform: translateY(-2px); }
.to-top svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
html.jas-admin .to-top { bottom: calc(var(--jas-bar-h, 0px) + 16px); }
@media print { .to-top { display: none; } }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } .to-top:hover { transform: none; } }

/* ---------- Contact cards (2026-11-09): the icon sits beside the words, so the four cards are no taller than the form ---------- */
@media (min-width: 861px) {
  .contact-card { display: grid; grid-template-columns: auto 1fr; column-gap: 16px; align-items: start; padding: 16px 20px; }
  .contact-card > .area-ico { grid-column: 1; grid-row: 1 / span 4; margin: 2px 0 0; }
  .contact-card > :not(.area-ico) { grid-column: 2; }
  .contact-card h2 { margin-bottom: 0.1em; }
  .contact-card p { margin-bottom: 0.35em; }
  .contact-cards { gap: 12px; }
}