/* ==========================================================================
   BE-NeST design system.

   Same structure, type scale and component kit as the Noor Lehulu site, with
   the palette re-keyed to the BE-NeST logo: navy blue as the brand colour and
   the logo's yellow as the accent. Base font is "Exo 2" at the same sizes.
   ========================================================================== */

:root {
  /* Brand palette — the navy and yellow of the BE-NeST mark. One blue, one
     gold, used sparingly for accents and calls to action; everything else is
     ink, white or one neutral "paused" grey. --brand-tint is the single wash
     of that blue used for hover states, chips and small icon tiles — every
     section that merely alternates background uses --surface-alt instead, so
     a reader can tell "this is brand-coloured" from "this is just the next
     band" at a glance instead of the two tints blurring together. */
  --brand: #23308f;
  --brand-dark: #161d5e;
  --brand-tint: #e2e6f7;
  /* The one solid blue every page banner is painted in — the logo navy
     (#080860) lifted just enough to stay legible over a large area. No
     gradient: a single colour reads calmer and prints predictably. */
  --banner: #1d2478;
  --banner-ink: #ffffff;
  --banner-soft: rgba(255, 255, 255, .82);
  --gold: #f2c400;
  --gold-light: #ffdb4d;
  --gold-ink: #4a3b00;
  --gold-tint: #fdf4d3;
  --gold-tint-border: #f0dc8d;

  /* Neutrals */
  --ink: #10131f;
  --muted: #4a5063;
  --bg: #f5f6fa;
  --card: #ffffff;
  --line: #ccd1e0;
  --line-2: #e5e8f1;
  /* The one grey used to alternate a section's background against --card —
     deliberately not blue-tinted, so it reads as "paper", not "brand". */
  --surface-alt: #f4f5f9;
  --neutral-tint: #eef0f8;

  /* Status colours — one token trio per meaning, used everywhere that meaning
     appears instead of each component inventing its own shade of it. */
  --danger: #a12626;
  --danger-strong: #b3261e;
  --danger-dark: #8c1d17;
  --danger-bg: #fdeaea;
  --danger-border: #f3c6c6;
  --success: #1c6b41;
  --success-bg: #e9f8ef;
  --success-border: #bde9cd;
  --warning: #856404;
  --warning-bg: #fdf6e3;
  --warning-border: #f0e2b8;

  /* Radius / shadow / spacing.

     A card is defined by its elevation, not by a drawn border: each shadow
     opens with a 1px spread at 4% black, which reads as a soft edge rather
     than a line, and then lifts the surface with one tight and one wide
     layer. That is why no card rule below carries a `border` — the depth
     does the separating, the way it does on the sites this is modelled on.
     Deeper shadow = more important, which is the whole visual hierarchy. */
  --radius-sm: 12px;
  --radius: 18px;
  --radius-lg: 26px;
  --radius-pill: 999px;
  --shadow-sm: 0 0 0 1px rgba(16,20,40,.04), 0 1px 2px rgba(16,20,40,.04),
               0 4px 12px rgba(16,20,40,.05);
  --shadow-md: 0 0 0 1px rgba(16,20,40,.04), 0 2px 6px rgba(16,20,40,.06),
               0 12px 32px rgba(16,20,40,.08);
  --shadow-lg: 0 0 0 1px rgba(16,20,40,.04), 0 4px 12px rgba(16,20,40,.07),
               0 24px 56px rgba(16,20,40,.10);
  --ring: 0 0 0 3px rgba(35,48,143,.22);
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-8: 48px; --sp-10: 72px; --sp-12: 104px;
  /* The one gap every row of cards uses, whatever it's a row of. */
  --gap: var(--sp-5);

  /* Type — "Exo 2", same scale as the Noor site. */
  --font-ui: "Exo 2", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --fs-sm: 0.92rem; --fs-base: 1.06rem; --fs-md: 1.2rem;
  --fs-h3: 1.6rem;
  --fs-h2: clamp(1.85rem, 3.2vw, 2.5rem);
  --fs-h1: clamp(2.4rem, 5vw, 3.6rem);
  --fs-display: clamp(2.9rem, 6.2vw, 4.6rem);
  --maxw: 1400px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: var(--fs-base); line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { line-height: 1.12; color: var(--ink); font-weight: 800;
  letter-spacing: -0.022em; text-wrap: balance; }
h1 { font-size: var(--fs-h1); } h2 { font-size: var(--fs-h2); } h3 { font-size: var(--fs-h3); }
p { text-wrap: pretty; }
img { max-width: 100%; height: auto; }

.display { font-size: var(--fs-display); line-height: 1.02; letter-spacing: -0.03em; font-weight: 800; }
.eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand); }
.lead { font-size: var(--fs-md); color: var(--muted); line-height: 1.55; max-width: 62ch; }
.h2 { font-size: var(--fs-h2); margin: 0 0 var(--sp-3); }
.h3 { font-size: var(--fs-h3); margin: 0 0 var(--sp-2); }
.prose { color: var(--ink); line-height: 1.7; }
.prose p { margin: 0 0 var(--sp-4); }
.prose p:last-child { margin-bottom: 0; }
.prose ul, .prose ol { margin: 0 0 var(--sp-4); padding-inline-start: 22px; }
.prose li { margin-bottom: 6px; }
.prose h2, .prose h3 { margin: var(--sp-6) 0 var(--sp-3); }
.prose img { border-radius: var(--radius-sm); }
.section-sub { margin: 0 0 var(--sp-5); font-size: var(--fs-md); color: var(--muted);
  line-height: 1.5; max-width: 68ch; }
.text-muted { color: var(--muted); }
.text-center { text-align: center; }
.meta { font-size: var(--fs-sm); }
.sub-head { margin-top: var(--sp-8); }
.row-between { display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; }

/* Layout */
.container { width: 92%; max-width: var(--maxw); margin: 0 auto; }
.narrow { max-width: 780px; margin-inline: auto; }
.stack > * + * { margin-top: var(--sp-4); }
.section { padding: clamp(40px, 6vw, 76px) 0; }
.section-tint { background: var(--surface-alt); }
.grid { display: grid; gap: var(--sp-4); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1000px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 820px) { .grid-2, .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .grid-4 { grid-template-columns: 1fr; } }

.skip-link { position: absolute; left: -999px; top: 8px; background: #fff; color: var(--brand-dark);
  padding: 8px 14px; border-radius: 8px; z-index: 100; }
.skip-link:focus { left: 8px; }

/* ==========================================================================
   Header / navigation
   ========================================================================== */
.site-header {
  background: color-mix(in srgb, var(--card) 88%, transparent);
  -webkit-backdrop-filter: saturate(1.15) blur(12px);
  backdrop-filter: saturate(1.15) blur(12px);
  border-bottom: 1px solid var(--line-2);
  box-shadow: 0 1px 0 rgba(16,20,40,.03), 0 6px 20px rgba(16,20,40,.05);
  position: sticky; top: 0; z-index: 40;
}
.nav { display: flex; align-items: center; gap: var(--sp-4); padding: var(--sp-3) 0; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: var(--brand-dark); }
.brand:hover { text-decoration: none; }
.brand-mark { width: 46px; height: 46px; flex: 0 0 auto; display: block; object-fit: contain; }
.brand-name { display: flex; flex-direction: column; line-height: 1.15; font-weight: 800;
  font-size: 1.32rem; letter-spacing: -.01em; }
.brand-name small { font-weight: 600; color: var(--muted); font-size: .72rem;
  letter-spacing: .04em; text-transform: uppercase; }
.nav .spacer { flex: 1; }
.nav-panel { display: flex; align-items: center; gap: var(--sp-2); flex: 1; }
.nav-panel nav { display: flex; align-items: center; gap: 2px; }
a.navlink, button.navlink {
  color: var(--ink); padding: 9px 13px; border-radius: var(--radius-sm);
  font-size: 1.04rem; font-weight: 600; font-family: inherit;
  background: transparent; border: 0; cursor: pointer; white-space: nowrap;
}
a.navlink:hover, button.navlink:hover { background: var(--brand-tint); text-decoration: none; }
a.navlink.active, a.navlink[aria-current="page"], button.navlink.active {
  background: var(--brand-tint); color: var(--brand-dark); font-weight: 700;
}
.navlink-menu { display: inline-flex; align-items: center; gap: 5px; }
.caret { width: .66em; height: .66em; flex: 0 0 auto; transition: transform .15s ease; }
.navlink-menu[aria-expanded="true"] .caret { transform: rotate(180deg); }
.navlink-cta { background: var(--brand); color: #fff; font-weight: 700; }
.navlink-cta:hover { background: var(--brand-dark); color: #fff; }
/* An inline SVG rather than an emoji — a tools/wrench emoji is missing
   entirely on some systems (no colour-emoji font installed), which renders
   as a "notdef" placeholder box instead of an icon; an SVG using
   stroke="currentColor" always matches and never falls back to tofu. */
.navlink-manage { display: inline-flex; align-items: center; gap: 6px;
  color: var(--gold-ink); background: var(--gold-tint); border: 1px solid var(--gold-tint-border); font-weight: 700; }
.navlink-manage:hover { background: var(--gold); }
.navlink-manage svg { width: 15px; height: 15px; flex: 0 0 auto; }

.nav-toggle { display: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-inline-start: auto; padding: 0;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--card); color: var(--ink); cursor: pointer; flex: 0 0 auto; }
.nav-toggle:hover { background: var(--brand-tint); }
.nav-toggle:focus-visible { outline: none; box-shadow: var(--ring); }

.menu { position: relative; display: inline-flex; }
.menu-panel { position: absolute; inset-inline-start: 0; top: calc(100% + 6px);
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-md); min-width: 230px; padding: 8px; z-index: 50; }
.menu-panel::before { content: ""; position: absolute; inset-inline: 0; top: -8px; height: 8px; }
.menu-panel.menu-end { inset-inline-start: auto; inset-inline-end: 0; }
.menu-panel a, .menu-panel button { display: block; width: 100%; text-align: start;
  padding: 9px 12px; border-radius: var(--radius-sm); background: none; border: none;
  font: inherit; color: var(--ink); cursor: pointer; }
.menu-panel a:hover, .menu-panel button:hover { background: var(--brand-tint); text-decoration: none; }
.menu-panel a.active { background: var(--brand-tint); color: var(--brand-dark); font-weight: 700; }
.menu-panel hr { border: none; border-top: 1px solid var(--line-2); margin: 6px 4px; }
.menu-label { display: block; padding: 6px 12px 2px; font-size: .74rem; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase; color: var(--muted); }

/* Two-column dropdown — About's list, and Projects' once there is more than a
   couple of them. width:max-content so the panel sizes to both columns rather
   than collapsing to one column's width behind the trigger. */
.nav-menu-panel-2col { width: max-content; min-width: 320px; max-width: min(92vw, 560px);
  display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 2px 6px; }
/* Setting `display` here (needed for the grid) otherwise beats the browser's
   own `[hidden] { display: none }` rule — author styles always win over the
   user-agent stylesheet regardless of source order, so without this the panel
   would show even while `hidden` is set. */
.nav-menu-panel-2col[hidden] { display: none; }
.nav-menu-panel-2col a { white-space: normal; overflow-wrap: anywhere; line-height: 1.3; }
.nav-menu-panel-2col .nav-menu-all { grid-column: 1 / -1; margin-top: 6px;
  border-top: 1px solid var(--line-2); padding-top: 11px; font-weight: 700; color: var(--brand); }
@media (max-width: 1040px) {
  /* The mobile nav panel is already a full-width single column; two columns
     there would cramp each link rather than help. */
  .nav-menu-panel-2col { grid-template-columns: 1fr; width: 100%; min-width: 0; max-width: none; }
}

.avatar-chip { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 4px;
  border: 1px solid var(--line); border-radius: var(--radius-pill); background: var(--card);
  cursor: pointer; font: inherit; font-weight: 600; }
.avatar-chip:hover { background: var(--brand-tint); }
.avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700;
  font-size: .78rem; flex: 0 0 auto; object-fit: cover; }

@media (max-width: 1040px) {
  .nav { flex-wrap: wrap; }
  .nav-toggle { display: inline-flex; }
  .nav-panel { display: none; flex-basis: 100%; flex-direction: column;
    align-items: stretch; gap: var(--sp-2); padding-top: var(--sp-3); }
  .nav-panel.is-open { display: flex; max-height: calc(100dvh - 76px);
    overflow-y: auto; overscroll-behavior: contain; padding-bottom: var(--sp-5); }
  .nav-panel nav { flex-direction: column; align-items: stretch; gap: 2px; }
  .nav-panel .spacer { flex: none; }
  a.navlink, button.navlink, .avatar-chip { width: 100%; justify-content: flex-start;
    min-height: 44px; padding: var(--sp-3) var(--sp-4); }
  .menu { width: 100%; display: block; }
  .menu-panel { position: static; width: 100%; min-width: 0; margin-top: 6px;
    box-shadow: none; border-radius: var(--radius-sm); }
  .navlink-menu { justify-content: space-between; }
}

/* ==========================================================================
   Buttons, cards, badges, chips
   ========================================================================== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 26px; border-radius: var(--radius-pill); border: 1px solid transparent;
  font: inherit; font-weight: 700; font-size: 1.02rem; line-height: 1.1; cursor: pointer;
  transition: transform .12s ease, background .15s ease, box-shadow .15s ease;
  background: var(--brand); color: #fff; box-shadow: var(--shadow-sm); text-align: center; }
.btn:hover { background: var(--brand-dark); color: #fff; text-decoration: none;
  transform: translateY(-1px); box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-sm); }
.btn:focus-visible { outline: none; box-shadow: var(--ring); }
.btn-outline { background: transparent; color: var(--brand-dark); border-color: var(--line); box-shadow: none; }
.btn-outline:hover { background: var(--brand-tint); color: var(--brand-dark); border-color: var(--brand); box-shadow: none; }
.btn-ghost { background: transparent; color: var(--ink); box-shadow: none; }
.btn-ghost:hover { background: var(--brand-tint); color: var(--ink); box-shadow: none; }
.btn-gold { background: var(--gold); color: var(--gold-ink); }
.btn-gold:hover { background: var(--gold-light); color: var(--gold-ink); }
.btn-danger { background: var(--danger-strong); }
.btn-danger:hover { background: var(--danger-dark); }
.btn-lg { padding: 15px 32px; font-size: 1.08rem; }
.btn-sm { min-height: 38px; padding: 7px 15px; font-size: var(--fs-sm); box-shadow: none; }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

.card { background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--sp-5);
  transition: box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); text-decoration: none; }

.badge { display: inline-flex; align-items: center; gap: 5px; padding: 3px 11px;
  border-radius: var(--radius-pill); font-size: .74rem; font-weight: 700;
  background: var(--brand-tint); color: var(--brand-dark); }
.badge-gold { background: var(--gold-tint); color: var(--gold-ink); }
.badge-muted { background: var(--neutral-tint); color: var(--muted); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-ok { background: var(--success-bg); color: var(--success); }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px;
  border-radius: var(--radius-pill); font-size: var(--fs-sm); font-weight: 600;
  border: 1px solid var(--line); background: var(--card); }
.chip-brand { background: var(--brand-tint); color: var(--brand-dark); border-color: transparent; }
.chip-gold { background: var(--gold-tint); color: var(--gold-ink); border-color: transparent; }

/* About text beside a real photo — a picture fills the second column on its
   own terms (a fixed aspect ratio, not content-driven height), so the section
   never depends on matching two unrelated columns of text for its balance. */
.about-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: var(--sp-8); align-items: center; }
.about-figure { margin: 0; border-radius: var(--radius-lg); overflow: hidden; }
.about-figure img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; gap: var(--sp-5); } }

/* Areas of work / what we do — a plain two-column fact list (a dot and a
   label) rather than a wall of coloured pills, so it reads as reference
   information rather than decoration. */
.fact-grid { list-style: none; margin: var(--sp-3) 0 0; padding: 0; display: grid;
  grid-template-columns: repeat(2, 1fr); gap: 12px 20px; }
.fact-grid li { display: flex; align-items: center; gap: 10px; font-weight: 600; }
.fact-grid li::before { content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand); flex: 0 0 auto; }
@media (max-width: 480px) { .fact-grid { grid-template-columns: 1fr; } }

/* Areas / what-we-do sit side by side; equal-height stretch keeps their tops
   and bottoms aligned even where one list runs longer than the other. */
.about-cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap);
  margin-top: var(--sp-6); align-items: stretch; }
.about-cards .card { height: 100%; }
@media (max-width: 640px) { .about-cards { grid-template-columns: 1fr; } }

/* Registration & bank details — the one thing on this page a funder or donor
   actually comes looking for, so it gets its own full-width panel below the
   two reference cards rather than competing with them for the same space.
   What marks it as the important one is that it sits higher off the page
   (--shadow-lg against the cards' --shadow-sm) and is given more room to
   breathe — not a coloured stripe down one edge. */
.registration-panel { margin-top: var(--gap); background: var(--card);
  border-radius: var(--radius-lg); padding: clamp(var(--sp-6), 4vw, var(--sp-8));
  box-shadow: var(--shadow-lg); }
.registration-panel h3 { margin: 0 0 var(--sp-5); font-size: 1.44rem; }
/* A fixed column count rather than auto-fit/minmax: with seven facts, letting
   the track count grow with a wide container produced a five-across row
   whose second row trailed off into a wide, empty-looking gap. Four columns
   keeps that trailing gap small and the same at every width. */
.registration-grid { display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5) var(--sp-6); }
@media (max-width: 980px) { .registration-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .registration-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Forms, tables, flashes
   ========================================================================== */
.field { margin-bottom: var(--sp-4); }
.field > label, .field .label { display: block; font-weight: 600; font-size: var(--fs-sm);
  margin-bottom: 6px; }
.input, .select, .textarea, .file {
  width: 100%; padding: 11px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); font: inherit; background: #fff; color: var(--ink); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.textarea { min-height: 110px; resize: vertical; }
.textarea.rich { min-height: 260px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .92rem; line-height: 1.6; }
.checkbox { width: 18px; height: 18px; accent-color: var(--brand); }
.check-row { display: flex; align-items: center; gap: 9px; }
.check-row label { margin: 0; font-weight: 600; font-size: var(--fs-sm); }
.help { color: var(--muted); font-size: .82rem; margin-top: 5px; }
.form-error, .errorlist { color: var(--danger); font-size: var(--fs-sm); list-style: none;
  margin: 5px 0 0; padding: 0; }

.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); }
table.table { width: 100%; border-collapse: collapse; background: var(--card); }
table.table th, table.table td { padding: 11px 14px; text-align: start;
  border-bottom: 1px solid var(--line-2); font-size: var(--fs-sm); vertical-align: middle; }
table.table th { background: var(--neutral-tint); font-weight: 700; color: var(--muted); white-space: nowrap; }
table.table tr:last-child td { border-bottom: none; }
.cell-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }

.flashes { margin: var(--sp-4) 0 0; }
.flash { padding: 11px 15px; border-radius: var(--radius-sm); margin-bottom: 8px;
  font-size: var(--fs-sm); border: 1px solid var(--line); }
.flash.success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.flash.error, .flash.danger { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); }
.flash.info { background: var(--brand-tint); border-color: #c3ccec; color: var(--brand-dark); }
.flash.warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }

.empty-state { text-align: center; padding: var(--sp-8) var(--sp-5);
  border: 1px dashed var(--line); border-radius: var(--radius); background: var(--card); }
.empty-state-icon { font-size: 2.4rem; margin-bottom: var(--sp-3); line-height: 1; }

/* ==========================================================================
   Page banner — the blue band at the top of every page. The home hero is the
   tall variant of the same thing, so the whole site shares one colour.
   ========================================================================== */
.page-banner { background: var(--banner); color: var(--banner-ink);
  padding: clamp(34px, 5vw, 60px) 0 clamp(38px, 5.5vw, 66px); }
.page-banner .banner-eyebrow { margin: 0 0 10px; font-size: var(--fs-sm);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--gold-light); }
.page-banner .banner-eyebrow a { color: var(--gold-light); }
.banner-title { margin: 0; color: var(--banner-ink); max-width: 22ch;
  font-size: clamp(2.1rem, 4.4vw, 3.1rem); }
.banner-sub { margin: 14px 0 0; font-size: var(--fs-md); line-height: 1.5;
  color: var(--banner-soft); max-width: 66ch; }
.banner-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  margin-top: 16px; font-size: var(--fs-sm); color: var(--banner-soft); }
.banner-meta .badge { background: rgba(255,255,255,.16); color: #fff; }
.banner-meta .badge-gold { background: var(--gold); color: var(--gold-ink); }
.banner-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.page-banner .btn-outline { color: #fff; border-color: rgba(255,255,255,.5); }
.page-banner .btn-outline:hover { background: rgba(255,255,255,.14); color: #fff;
  border-color: #fff; }
/* A banner is its own block of colour, so the section under it starts closer. */
.page-banner + .section { padding-top: clamp(30px, 4vw, 52px); }

/* ==========================================================================
   Home page
   ========================================================================== */
.hero { position: relative; overflow: hidden;
  color: var(--banner-ink); background: var(--banner); }
/* Two columns, side by side. The picture is a small, quiet accent, not a
   second focal point — it carries no card, frame or shadow of its own, and
   sits at low opacity so the blue shows through it; that's what keeps the
   words the only thing competing for attention. */
.hero-inner { position: relative; z-index: 1; display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 56px); align-items: center;
  padding: clamp(48px, 8vw, 104px) 0 clamp(56px, 9vw, 112px); }
.hero-copy { max-width: 62ch; display: flex; flex-direction: column; gap: 18px; }
.hero-eyebrow { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--gold-light); }
.hero-title { margin: 0; font-size: var(--fs-display); line-height: .99;
  letter-spacing: -.03em; color: #fff; }
.hero-lead { margin: 0; font-size: var(--fs-md); line-height: 1.55; color: rgba(255,255,255,.86); }
.hero .btn-outline { color: #fff; border-color: rgba(255,255,255,.55); }
.hero .btn-outline:hover { background: rgba(255,255,255,.14); color: #fff; border-color: #fff; }
/* The visual column is deliberately narrower than the copy column (see the
   1.3fr/1fr split above) so the small picture doesn't sit in a wide field of
   empty blue. Two concentric rings, centred behind it, give that column its
   own quiet composition instead of looking like unused space next to it. */
.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-visual::before, .hero-visual::after {
  content: ""; position: absolute; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.14); pointer-events: none;
}
.hero-visual::before { width: min(112%, 420px); aspect-ratio: 1 / 1; }
.hero-visual::after { width: min(148%, 500px); aspect-ratio: 1 / 1; border-color: rgba(255,255,255,.08); }
/* `overflow: hidden` on the figure itself, in addition to the photo's own
   border-radius, so the circle is guaranteed even if the image somehow ends
   up unstyled (a stale cached stylesheet, an editor-uploaded picture with
   unexpected markup, and so on) — two layers of the same clip. */
.hero-figure { position: relative; margin: 0; width: 100%; max-width: 300px;
  border-radius: 50%; overflow: hidden; }
/* A circular mask rather than the usual rounded rectangle: a square photo
   turning in place shows a different silhouette every few degrees (corners
   sweeping in and out of frame), but a circle looks identical at every angle
   of rotation — that's what makes the slow spin below read as calm rather
   than distracting. Clockwise (0deg -> 360deg) so the top of the circle —
   the part sitting nearest the eye — visibly travels left to right. */
.hero-figure .hero-photo { display: block; width: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border-radius: 50%; opacity: .35;
  animation: hero-spin 50s linear infinite; }
@keyframes hero-spin { to { transform: rotate(360deg); } }

/* One word visible at a time, centred over the spinning picture, each sliding
   in from the left and out to the right — decorative reinforcement of what
   the lead paragraph already says in full, so it's aria-hidden rather than
   announced. All six share one animation, staggered by delay so exactly one
   is ever visible. `pointer-events: none` on the wrapper lets a double-click
   land on the picture underneath rather than this decorative text, so
   replacing the picture still works with one double-click anywhere on it. A
   solid pill behind each word (rather than plain coloured text) keeps it
   readable regardless of which part of the busy illustration sits behind it
   at any moment. */
.hero-keywords { position: absolute; inset: 0; pointer-events: none; }
/* !important on position and border-radius: every block carries a
   [data-blk] attribute, and body.can-edit [data-blk] (further down, for the
   editor hover-outline) is two attribute/class selectors deep plus `body` —
   higher specificity than this single class — so without it, simply being
   signed in as an editor flips this from absolute to relative positioning
   and squares off its corners, sending the word drifting to one side
   instead of sitting centred on the picture. */
.hero-keyword { position: absolute !important; top: 50%; left: 50%; white-space: nowrap;
  padding: 8px 20px; border-radius: var(--radius-pill) !important;
  background: var(--brand-dark); box-shadow: 0 8px 20px rgba(0,0,0,.4);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--gold-light);
  opacity: 0; animation: hero-keyword-cycle 30s ease-in-out infinite; }
.hero-keyword:nth-child(1) { animation-delay: 0s; }
.hero-keyword:nth-child(2) { animation-delay: 5s; }
.hero-keyword:nth-child(3) { animation-delay: 10s; }
.hero-keyword:nth-child(4) { animation-delay: 15s; }
.hero-keyword:nth-child(5) { animation-delay: 20s; }
.hero-keyword:nth-child(6) { animation-delay: 25s; }
@keyframes hero-keyword-cycle {
  0%   { opacity: 0; transform: translate(calc(-50% - 28px), -50%); }
  5%   { opacity: 1; transform: translate(-50%, -50%); }
  12%  { opacity: 1; transform: translate(-50%, -50%); }
  17%  { opacity: 0; transform: translate(calc(-50% + 28px), -50%); }
  100% { opacity: 0; transform: translate(calc(-50% + 28px), -50%); }
}
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .hero-figure { max-width: 220px; margin-inline: auto; }
  .hero-visual::before { width: min(112%, 280px); }
  .hero-visual::after { width: min(148%, 340px); }
}

/* Impact figures */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap);
  margin-top: calc(-1 * clamp(28px, 5vw, 52px)); position: relative; z-index: 2; }
.stat { background: var(--card); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-md); text-align: center; }
.stat-value { display: block; font-size: clamp(2rem, 3.6vw, 2.9rem); font-weight: 800;
  color: var(--brand); letter-spacing: -.03em; line-height: 1; }
.stat-label { display: block; margin-top: 8px; font-size: var(--fs-sm); color: var(--muted);
  line-height: 1.4; }
.stats-edit { margin: 12px 0 0; text-align: end; font-size: var(--fs-sm); }
@media (max-width: 1000px) { .stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .stats { grid-template-columns: 1fr; } }

/* Goals — numbered editorial list */
.goal-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.goal { display: grid; grid-template-columns: auto 1fr; gap: 16px; align-items: start;
  padding-top: var(--sp-4); border-top: 1px solid var(--line-2); }
.goal-num { width: 42px; height: 42px; border-radius: 50%; background: var(--brand-tint);
  color: var(--brand-dark); font-weight: 800; display: grid; place-items: center;
  font-variant-numeric: tabular-nums; }
.goal-text { font-size: var(--fs-md); line-height: 1.5; }
@media (max-width: 860px) { .goal-grid { grid-template-columns: 1fr; } }

/* Mission / vision panels — the same plain card used everywhere else on the
   site (same border, same shadow, no accent bar), told apart only by the
   kicker's colour. No per-component decoration, so the pair reads as part of
   the same design system rather than a one-off treatment. */
.mv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.mv-panel { background: var(--card); border-radius: var(--radius-lg);
  padding: var(--sp-6); box-shadow: var(--shadow-sm); }
.mv-kicker { font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  font-size: var(--fs-sm); margin: 0 0 10px; }
.mv-mission .mv-kicker { color: var(--brand); }
.mv-vision .mv-kicker { color: var(--gold-ink); }
.mv-panel .prose { font-size: var(--fs-md); line-height: 1.6; }
@media (max-width: 760px) { .mv-grid { grid-template-columns: 1fr; } }

/* Services — one row per service (icon leading, title and description
   following) inside a single bordered panel, rather than a grid of separate
   boxes. Rows are told apart by a faint alternating background rather than
   colour, a border around each, or a hover-lift — this list isn't a set of
   links, so nothing here needs to look clickable. */
.service-list { list-style: none; margin: 0; padding: 0;
  border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.service-row { display: flex; align-items: flex-start; gap: var(--sp-4);
  padding: var(--sp-5); background: var(--card); }
.service-row:nth-child(even) { background: var(--surface-alt); }
/* No divider line: the alternating background already marks where one row
   ends and the next begins, and drawing both is one device too many. */
.service-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex: 0 0 auto; border-radius: 14px; font-size: 24px;
  background: var(--brand-tint); }
.service-row-body { min-width: 0; }
.service-title { margin: 0 0 4px; font-size: 1.16rem; font-weight: 800; }
.service-desc { margin: 0; color: var(--muted); line-height: 1.55; }
@media (max-width: 560px) {
  .service-row { gap: var(--sp-3); padding: var(--sp-4); }
  .service-icon { width: 40px; height: 40px; font-size: 20px; border-radius: 12px; }
}

/* How we work — three steps. The number is the same circular badge as the
   goals list above (same size, same two colours) rather than a second,
   unrelated "ghost numeral" style — one numbered-list language for the whole
   site, not one per section. */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); counter-reset: step; }
.step { position: relative; padding-top: 64px; }
.step::before { counter-increment: step; content: counter(step);
  position: absolute; top: 0; inset-inline-start: 0; width: 42px; height: 42px;
  border-radius: 50%; background: var(--brand-tint); color: var(--brand-dark);
  display: grid; place-items: center; font-weight: 800; font-size: 1.05rem;
  font-variant-numeric: tabular-nums; }
.step-title { margin: 0 0 8px; font-size: 1.28rem; position: relative; }
.step-body { margin: 0; color: var(--muted); line-height: 1.6; }
@media (max-width: 860px) { .steps { grid-template-columns: 1fr; gap: var(--sp-6); } }

/* Project cards */
.project-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
@media (max-width: 980px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .project-grid { grid-template-columns: 1fr; } }
.project-card { display: flex; flex-direction: column; background: var(--card);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); color: inherit;
  transition: box-shadow .2s ease, transform .2s ease; }
.project-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.project-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block;
  background: var(--brand-tint); }
.project-cover-fallback { display: grid; place-items: center; font-size: 3rem;
  background: linear-gradient(140deg, var(--brand-tint), var(--surface-alt)); }
.project-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.project-title { margin: 0; font-size: 1.22rem; font-weight: 800; color: var(--brand-dark); }
.project-summary { margin: 0; color: var(--muted); line-height: 1.55; flex: 1; }
.project-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* News */
.news-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: var(--gap); }
.news-card { display: flex; flex-direction: column; background: var(--card);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-sm); color: inherit;
  transition: box-shadow .2s ease, transform .2s ease; }
.news-card:hover { text-decoration: none; box-shadow: var(--shadow-lg); transform: translateY(-4px); }
.news-cover { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.news-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
.news-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--brand-dark); line-height: 1.3; }
.news-excerpt { margin: 0; color: var(--muted); line-height: 1.55; }
/* The date sits flush with the card's bottom edge (margin-top:auto absorbs
   whatever's left, rather than the excerpt above it stretching) so every
   card sharing a row lines its date up on the same baseline whether its own
   excerpt runs one line or four. */
.news-body > .meta { margin-top: auto; padding-top: 6px; }
.article { max-width: 780px; margin: 0 auto; }
.article-hero { width: 100%; max-height: 440px; object-fit: cover;
  border-radius: var(--radius); display: block; margin: var(--sp-5) 0; }
.article-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  color: var(--muted); font-size: var(--fs-sm); margin-top: 10px; }

/* Team */
.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: var(--gap); }
.member { background: var(--card); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px; }
.member-photo { width: 104px; height: 104px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--brand-tint); background: var(--brand-tint); display: grid;
  place-items: center; font-size: 1.9rem; font-weight: 800; color: var(--brand-dark);
  margin-bottom: 6px; }
.member-name { margin: 0; font-size: 1.12rem; font-weight: 800; }
.member-role { color: var(--brand); font-weight: 700; font-size: var(--fs-sm); }
.member-city { color: var(--muted); font-size: var(--fs-sm); }
.member-bio { color: var(--muted); font-size: var(--fs-sm); line-height: 1.55; margin: 6px 0 0; }
.member-links { display: flex; gap: 10px; margin-top: 8px; }

/* Team — full profiles */
.profiles { display: grid; grid-template-columns: 1fr; gap: var(--gap); margin-top: var(--sp-4); }
.profile { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: var(--gap);
  background: var(--card); border-radius: var(--radius-lg);
  padding: var(--sp-5); box-shadow: var(--shadow-sm); align-items: start; }
.profile-side { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.profile-photo { width: 150px; height: 150px; border-radius: 50%; object-fit: cover;
  border: 3px solid var(--brand-tint); background: var(--brand-tint); }
.profile-photo-initials { display: grid; place-items: center; font-size: 2.6rem;
  font-weight: 800; color: var(--brand-dark); }
.profile-links { display: flex; flex-direction: column; gap: 4px; align-items: center;
  font-size: var(--fs-sm); font-weight: 600; }
.profile-body { min-width: 0; }
.profile-name { margin: 0 0 8px; font-size: 1.42rem; }
.profile-role { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 6px; font-size: var(--fs-sm); }
.profile-institution { margin: 0 0 12px; color: var(--brand); font-weight: 600; }
.profile-chips { margin-bottom: 14px; }
.profile-chips .chip { padding: 5px 13px; font-size: .82rem; }
.profile-lead { margin: 0; line-height: 1.65; }
.profile-more { margin-top: 12px; }
.profile-more > summary { cursor: pointer; font-weight: 700; color: var(--brand);
  list-style: none; display: inline-flex; align-items: center; gap: 6px; }
.profile-more > summary::-webkit-details-marker { display: none; }
.profile-more > summary::after { content: "▾"; font-size: .8em; transition: transform .15s ease; }
.profile-more[open] > summary::after { transform: rotate(180deg); }
.profile-more[open] > summary { margin-bottom: 12px; }
.profile-more .prose p { margin: 0 0 var(--sp-3); }
@media (max-width: 760px) {
  .profile { grid-template-columns: 1fr; gap: var(--sp-4); }
  .profile-side { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; }
  .profile-photo { width: 96px; height: 96px; }
  .profile-links { align-items: flex-start; }
}

/* Partners */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--gap); }
.partner { background: var(--card); border-radius: var(--radius);
  padding: var(--sp-5); display: flex; flex-direction: column; align-items: center;
  gap: 10px; text-align: center; box-shadow: var(--shadow-sm); color: inherit; }
.partner:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.partner-logo { height: 62px; max-width: 160px; object-fit: contain; }
.partner-logo-fallback { height: 62px; width: 62px; border-radius: 16px;
  background: var(--brand-tint); color: var(--brand-dark); display: grid; place-items: center;
  font-size: 1.5rem; font-weight: 800; }
.partner-name { font-weight: 700; }
.partner-agreement { margin-top: 2px; white-space: normal; text-align: center; }

/* Call to action band — the same padding scale as every other big panel
   (.mv-panel included), just fluid between its two ends rather than fixed,
   because a full-width band earns a bit more air than a half-width card. */
.cta-band { background: linear-gradient(140deg, var(--brand-dark), var(--brand));
  color: #fff; border-radius: var(--radius-lg); padding: clamp(var(--sp-6), 5vw, var(--sp-8));
  display: flex; align-items: center; justify-content: space-between; gap: var(--gap);
  flex-wrap: wrap; }
.cta-band h2 { color: #fff; margin: 0 0 8px; }
.cta-band p { margin: 0; color: rgba(255,255,255,.85); max-width: 62ch; }
.cta-band .btn-gold { flex: 0 0 auto; }

/* Contact page */
.contact-grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: var(--sp-5); align-items: start; }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } }
.contact-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-4); }
.contact-row { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: start; }
.contact-ic { width: 40px; height: 40px; border-radius: 12px; background: var(--brand-tint);
  display: grid; place-items: center; font-size: 1.1rem; }
.contact-label { display: block; font-size: .76rem; font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-value { display: block; font-weight: 600; overflow-wrap: anywhere; }
.contact-value.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: .95em; letter-spacing: .01em; }
.contact-list.facts { gap: var(--sp-3); }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { border-top: 1px solid var(--line-2); background: var(--card);
  margin-top: var(--sp-10); padding: var(--sp-8) 0 var(--sp-6); color: var(--muted);
  font-size: var(--fs-sm); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: var(--sp-6); align-items: start; }
.footer-grid h3 { font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em;
  color: var(--muted); margin: 0 0 var(--sp-3); }
.footer-grid ul { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: column; gap: var(--sp-2); }
.footer-grid a { color: var(--ink); }
.footer-grid a:hover { color: var(--brand); }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-bottom { border-top: 1px solid var(--line-2); margin-top: var(--sp-6);
  padding-top: var(--sp-5); display: flex; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; } }

/* ==========================================================================
   Manage area
   ========================================================================== */
.manage-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  margin-bottom: var(--sp-4); }
.manage-head h1 { margin: 0; font-size: clamp(1.7rem, 3vw, 2.2rem); }
.manage-nav { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--sp-5); }
.manage-nav a { padding: 7px 14px; border-radius: var(--radius-pill); font-size: var(--fs-sm);
  font-weight: 600; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.manage-nav a:hover { background: var(--brand-tint); text-decoration: none; }
.manage-nav a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.manage-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--gap); }
.manage-card { display: flex; align-items: center; gap: 14px; padding: 18px;
  border-radius: var(--radius); background: var(--card);
  color: inherit; box-shadow: var(--shadow-sm); }
.manage-card:hover { text-decoration: none; box-shadow: var(--shadow-md); }
.manage-card .ic { font-size: 26px; flex: 0 0 auto; }
.manage-card .body { flex: 1; min-width: 0; }
.manage-card .t { display: block; font-weight: 800; color: var(--brand-dark); }
.manage-card .d { display: block; font-size: var(--fs-sm); color: var(--muted); }
.count-pill { min-width: 28px; height: 28px; padding: 0 9px; border-radius: var(--radius-pill);
  background: var(--gold); color: var(--gold-ink); font-weight: 800; font-size: var(--fs-sm);
  display: inline-grid; place-items: center; }
.count-pill.zero { background: var(--neutral-tint); color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 var(--sp-4); }
.form-grid .field.wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .form-grid { grid-template-columns: 1fr; } }

/* Rich-text editor on the manage forms (core/static/core/js/editor.js) */
.rte { border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; overflow: hidden; }
.rte:focus-within { border-color: var(--brand); box-shadow: var(--ring); }
.rte-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  padding: 6px 8px; background: var(--neutral-tint); border-bottom: 1px solid var(--line-2); }
.rte-bar button { min-width: 34px; height: 32px; padding: 0 9px; border: 1px solid transparent;
  border-radius: 8px; background: transparent; color: var(--ink); font: inherit;
  font-size: .92rem; font-weight: 700; cursor: pointer; }
.rte-bar button:hover { background: var(--card); border-color: var(--line); }
.rte-bar button:disabled { opacity: .35; cursor: not-allowed; background: transparent; }
.rte-sep { width: 1px; height: 20px; margin: 0 5px; background: var(--line); }
.rte-surface { min-height: 300px; max-height: 60vh; overflow-y: auto;
  padding: 16px 18px; outline: none; font-size: 1rem; }
/* The surface always holds a paragraph, so :empty never matches — key the
   placeholder off that single empty paragraph instead. */
.rte-surface:empty::before,
.rte-surface:has(> p:only-child:empty)::before {
  content: "Write here — paste or drop a picture to add one."; color: var(--muted); }
.rte-surface.is-dropping { background: var(--brand-tint); }
.rte-surface img { max-width: 100%; height: auto; border-radius: var(--radius-sm); }
.rte-surface blockquote { margin: 0 0 var(--sp-4); padding-inline-start: 16px;
  border-inline-start: 3px solid var(--brand-tint); color: var(--muted); }
.rte .rte-source { border: 0; border-radius: 0; min-height: 320px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .88rem;
  line-height: 1.6; }
.rte .rte-source:focus { box-shadow: none; }
.rte.is-source .rte-bar { background: var(--brand-tint); }
.rte-status { padding: 6px 12px; font-size: var(--fs-sm); color: var(--muted);
  min-height: 26px; }
.rte-status.error { color: var(--danger); font-weight: 600; }

/* Language tabs on a translated form / the page-text catalog */
.lang-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 var(--sp-4); }
.lang-tabs a { padding: 7px 15px; border-radius: var(--radius-pill); font-size: var(--fs-sm);
  font-weight: 600; border: 1px solid var(--line); color: var(--ink); background: var(--card); }
.lang-tabs a:hover { background: var(--brand-tint); text-decoration: none; }
.lang-tabs a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.lang-tabs .progress { font-weight: 400; opacity: .75; }
.lang-fieldset { border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: var(--sp-4) var(--sp-5); margin: 0 0 var(--sp-4); }
.lang-fieldset > legend { padding: 0 10px; font-weight: 800; color: var(--brand-dark);
  font-size: var(--fs-sm); text-transform: uppercase; letter-spacing: .05em; }
.lang-fieldset .help { margin-bottom: var(--sp-3); }

/* Language switcher in the header */
.lang-switch .menu-panel { min-width: 180px; }
.lang-switch button.navlink { gap: 7px; }
.lang-native { font-weight: 700; }
.lang-english { color: var(--muted); font-size: .8rem; }
.menu-panel form { margin: 0; }

/* Manage → Page text catalog */
.blk-group { margin-bottom: var(--sp-5); }
.blk-row { display: grid; grid-template-columns: 240px 1fr auto; gap: 14px; align-items: start;
  padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  background: var(--card); margin-bottom: 8px; }
.blk-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .82rem;
  color: var(--brand-dark); overflow-wrap: anywhere; }
.blk-value { color: var(--muted); font-size: var(--fs-sm); overflow-wrap: anywhere; }
@media (max-width: 760px) { .blk-row { grid-template-columns: 1fr; } }

/* ==========================================================================
   Inline editor — only active for signed-in editors (see js/cms.js)
   ========================================================================== */
body.can-edit [data-blk] { position: relative; border-radius: 4px;
  transition: box-shadow .12s ease, background .12s ease; }
body.can-edit.edit-armed [data-blk] {
  box-shadow: 0 0 0 1px rgba(35,48,143,.22); cursor: text;
}
body.can-edit.edit-armed [data-blk]:hover {
  box-shadow: 0 0 0 2px var(--brand); background: rgba(226,230,247,.4);
}
body.can-edit.edit-armed [data-blk][data-blk-kind="image"]:hover { cursor: pointer; }
/* While a block is being edited it becomes a field: white paper, dark ink.
   Without forcing the colour, white text on the dark hero stayed white on the
   white editing background and the editor typed blind. */
[data-blk].blk-editing {
  outline: 2px solid var(--brand) !important; outline-offset: 4px;
  background: #fff !important; box-shadow: none !important;
  border-radius: 4px; padding: 2px 6px; margin: -2px -6px;
  caret-color: var(--brand);
}
[data-blk].blk-editing,
[data-blk].blk-editing * { color: var(--ink) !important; -webkit-text-fill-color: var(--ink) !important; }
[data-blk].blk-editing a { color: var(--brand) !important; -webkit-text-fill-color: var(--brand) !important; }
[data-blk].blk-editing::selection, [data-blk].blk-editing *::selection {
  background: var(--brand-tint); color: var(--ink); }
[data-blk].blk-saved { animation: blk-flash .9s ease; }
@keyframes blk-flash {
  0% { box-shadow: 0 0 0 3px rgba(28,107,65,.5); }
  100% { box-shadow: 0 0 0 3px rgba(28,107,65,0); }
}
.blk-img-empty { display: inline-grid; place-items: center; min-width: 200px;
  min-height: 120px; padding: 18px; border: 2px dashed var(--line);
  border-radius: var(--radius-sm); color: var(--muted); font-size: var(--fs-sm);
  text-align: center; cursor: pointer; }

/* The floating edit-mode bar */
.edit-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 11px 18px; background: var(--brand-dark); color: #fff;
  box-shadow: 0 -6px 24px rgba(16,20,40,.24); font-size: var(--fs-sm); flex-wrap: wrap; }
.edit-bar strong { color: var(--gold-light); }
.edit-bar button { font: inherit; font-weight: 700; border-radius: var(--radius-pill);
  border: 1px solid rgba(255,255,255,.4); background: transparent; color: #fff;
  padding: 6px 16px; cursor: pointer; }
.edit-bar button:hover { background: rgba(255,255,255,.16); }
.edit-bar button.on { background: var(--gold); color: var(--gold-ink); border-color: var(--gold); }
body.can-edit { padding-bottom: 54px; }

/* Rich-text mini toolbar shown while editing an html block */
.blk-toolbar { position: absolute; z-index: 70; display: flex; gap: 3px; padding: 5px;
  background: var(--brand-dark); border-radius: var(--radius-pill); box-shadow: var(--shadow-md); }
.blk-toolbar button { width: 32px; height: 32px; border: none; border-radius: 50%;
  background: transparent; color: #fff; font: inherit; font-weight: 700; cursor: pointer;
  display: grid; place-items: center; font-size: .9rem; }
.blk-toolbar button:hover { background: rgba(255,255,255,.2); }

/* Toast */
.blk-toast { position: fixed; inset-inline-end: 18px; bottom: 68px; z-index: 80;
  background: var(--ink); color: #fff; padding: 10px 18px; border-radius: var(--radius-pill);
  font-size: var(--fs-sm); box-shadow: var(--shadow-md); opacity: 0;
  transform: translateY(8px); transition: opacity .18s ease, transform .18s ease;
  pointer-events: none; }
.blk-toast.show { opacity: 1; transform: translateY(0); }
.blk-toast.error { background: var(--danger); }

[x-cloak] { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.visually-hidden, .sr-only { position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

@media print {
  .site-header, .site-footer, .edit-bar, .btn { display: none !important; }
  body { background: #fff; }
}