/* ==========================================================================
   VIBRANIUM RESOURCES design system.

   Two colours do the work: PURPLE carries the structure (every banner, every
   dark band, every tinted surface) and GOLD — the colour of the lion in the
   mark — is the accent on top of it. Purple and gold rather than purple alone,
   because the logo is gold and a purple-only site would leave the mark looking
   like it came from somewhere else.

   Contrast is the constraint both are chosen against:

   * --banner #8b3a8e carries white text at 6.79:1 — comfortably past AA, so
     the banner can be this bright rather than a near-black compromise.
   * Gold is a FILL, never text on a light ground: --gold #c49132 is only
     2.8:1 on white. --gold-deep #7a5612 (6.6:1) carries gold lettering.
   * On the purple banner the ordinary gold drops to 2.4:1, so gold text there
     uses --gold-light #f2d79a (4.8:1) — a paler tone than the one used on
     white, which is why there are two.
   ========================================================================== */

:root {
  /* Brand — the purple that carries the structure. --brand-tint is the single
     wash of it used for hover states, chips and small icon tiles; a section
     that merely alternates background uses --surface-alt instead, so "this is
     brand-coloured" stays distinguishable from "this is just the next band". */
  --brand: #8b3a8e;
  --brand-dark: #6e2d72;
  --brand-tint: #f3e7f4;
  /* Text-safe purple: 8.5:1 on white. --brand itself is fine as text too
     (6.8:1) but this holds up on the tinted surfaces as well. */
  --brand-deep: #763078;

  /* The one purple every page banner is painted in. No gradient: a single
     colour reads calmer and prints predictably. */
  --banner: #8b3a8e;
  --banner-ink: #ffffff;
  --banner-soft: rgba(255, 255, 255, .84);
  /* The deeper purple for a band that has to sit *behind* a photograph, where
     a scrim is doing the contrast work and brightness would fight the image. */
  --banner-deep: #4a1f4d;

  /* Gold — the accent, from the lion in the mark. */
  --gold: #c49132;
  /* On white: for FILLS only (2.8:1 as text). --gold-deep is the text tone. */
  --gold-deep: #7a5612;
  /* On the purple banner: the pale tone, 4.8:1 there. */
  --gold-light: #f2d79a;
  --gold-ink: #2a1e06;
  --gold-tint: #faf3e6;
  --gold-tint-border: #e7d2a6;

  /* Neutrals — very slightly purple-tinted, so white space reads as part of
     the same family as the banners rather than as cold screen grey. */
  --ink: #1a141b;
  --muted: #5a4f5c;
  --bg: #faf7fa;
  --card: #ffffff;
  --line: #ddd2de;
  --line-2: #ece4ed;
  /* The one tone used to alternate a section against --card. */
  --surface-alt: #f4eef5;
  --neutral-tint: #efe6f0;

  /* 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(35,20,37,.04), 0 1px 2px rgba(35,20,37,.04),
               0 4px 12px rgba(35,20,37,.05);
  --shadow-md: 0 0 0 1px rgba(35,20,37,.04), 0 2px 6px rgba(35,20,37,.06),
               0 12px 32px rgba(35,20,37,.08);
  --shadow-lg: 0 0 0 1px rgba(35,20,37,.04), 0 4px 12px rgba(35,20,37,.07),
               0 24px 56px rgba(35,20,37,.10);
  --ring: 0 0 0 3px rgba(139,58,142,.32);
  --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. Headings in a condensed grotesque, echoing the wide thin capitals
     of the wordmark; body text in Inter, which stays out of its way. */
  --font-ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
             Oxygen, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
  --font-display: "Barlow Condensed", "Inter", -apple-system, BlinkMacSystemFont,
             "Segoe UI", Roboto, "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-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
/* A condensed face is already tight; negative tracking would close it up. */
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.08; color: var(--ink);
  font-weight: 700; letter-spacing: 0; 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-family: var(--font-display); font-size: var(--fs-display);
  line-height: 1.02; letter-spacing: 0; font-weight: 700; }
.eyebrow { display: inline-block; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--brand-deep); }
.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(--gold-deep);
  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(35,20,37,.03), 0 6px 20px rgba(35,20,37,.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(--gold-deep); }
/* The header shows the logo file itself. Height is fixed and width is `auto`
   so the lockup keeps its own proportions whatever the file is replaced with;
   the tagline sits under it in the site's own type, which is the one piece of
   wording an editor changes without re-exporting artwork. */
.site-header .brand { flex-direction: column; align-items: flex-start; gap: 2px; }
.brand-logo { display: block; height: 46px; width: auto; }
.brand-tagline { font-size: .66rem; font-weight: 600; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); padding-left: 2px; }
@media (max-width: 560px) { .brand-logo { height: 34px; } .brand-tagline { font-size: .58rem; } }
.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(--gold-deep); 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: var(--gold-ink); 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(--gold-deep); 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(--gold-deep); }
@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: var(--gold-ink);
  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: var(--gold-ink); 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(--gold-deep); border-color: var(--line); box-shadow: none; }
.btn-outline:hover { background: var(--brand-tint); color: var(--gold-deep); 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(--gold-deep); }
.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(--gold-deep); 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: letting the track count
   grow with a wide container leaves the last row trailing off into an
   empty-looking gap. Three columns for six facts gives two even rows — and,
   more importantly, cells wide enough that the email address fits on one line
   instead of breaking mid-word. */
.registration-grid { display: grid; grid-template-columns: repeat(3, 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; }
.captcha-row { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: 8px; }
.captcha-img { border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; }
.captcha-refresh { font-size: 1.1rem; line-height: 1; padding: 8px 12px; }
.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: var(--gold-tint-border); color: var(--gold-deep); }
.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; }

/* --------------------------------------------------------------------------
   Mega menu — the full-width header panels, after research.google.

   A plain dropdown can only list link text. A panel with a line of
   explanation under each entry answers "what is that?" before the click,
   which matters here because "VIBRANIUM RCT" and "DoBerti Science Café" do
   not explain themselves.
   -------------------------------------------------------------------------- */
.menu-mega { position: static; }
/* `position: static` above and `left/right: 0` here is what makes the panel
   span the header rather than hang off the button: it positions against
   .site-header (the nearest positioned ancestor) instead of the .menu. */
.mega-panel { position: absolute; left: 0; right: 0; top: 100%;
  width: auto; min-width: 0; max-width: none; padding: var(--sp-6) 0 var(--sp-5);
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  box-shadow: var(--shadow-lg); background: var(--card); }
.mega-cols { max-width: var(--maxw); margin: 0 auto;
  padding: 0 clamp(var(--sp-4), 3vw, var(--sp-8));
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-5) var(--sp-6); align-items: start; }
.mega-col-title { margin: 0 0 var(--sp-3); padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--line-2);
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--muted); }
/* Each entry is a two-line block, not a link in a list — so the whole tile is
   the hit area and the description is part of what you are clicking. */
/* `a.mega-item`, not `.mega-item`: `.menu-panel a` (a class+element selector,
   specificity 0,1,1) sets `display: block` on every link inside any dropdown
   panel, mega or not, and would otherwise beat a bare `.mega-item` (0,1,0)
   regardless of source order — collapsing the flex row and stacking the icon
   above the text instead of beside it, icon-on-top rather than icon-left.
   Matching that selector's specificity here, and staying below it in source
   order, is what actually wins the tie. */
a.mega-item { display: flex; gap: 12px; align-items: flex-start;
  padding: 10px 12px; margin: 0 -12px; border-radius: var(--radius-sm);
  color: var(--ink); }
a.mega-item:hover { background: var(--brand-tint); text-decoration: none; }
a.mega-item.active { background: var(--brand-tint); }
a.mega-item.active .mega-label { color: var(--brand-deep); }
.mega-ic { flex: 0 0 auto; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 9px; font-size: 16px;
  background: var(--surface-alt); }
.mega-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mega-label { font-weight: 600; line-height: 1.25; }
.mega-note { font-size: .82rem; line-height: 1.35; color: var(--muted); }

@media (max-width: 900px) {
  /* In the mobile drawer the panel is just another stacked block: absolute
     positioning would take it out of the drawer's flow and off the screen. */
  .mega-panel { position: static; padding: var(--sp-3) 0; box-shadow: none;
    background: transparent; border-radius: 0; }
  .mega-cols { padding: 0; grid-template-columns: 1fr; gap: var(--sp-4); }
  a.mega-item { margin: 0; }
}

/* ==========================================================================
   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
   ========================================================================== */
/* A flat band of the brand colour — the same purple every page-banner uses —
   rather than a full-bleed photograph. A photo hero here ran very tall (the
   image needed room to read as a photograph) and put the headline's contrast
   at the mercy of whatever picture was loaded; a solid colour needs neither,
   and is a fraction of the height. */
.hero { position: relative; color: var(--banner-ink); background: var(--banner); }
.hero-inner { padding: clamp(40px, 6vw, 76px) 0; }
/* No max-width here — the heading and the button/chip rows run the full
   container width instead of sitting in a narrower reading column; only the
   lead paragraph (a full sentence, not a headline) keeps its own measure,
   set on `.hero-lead` below. */
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-eyebrow { margin: 0; font-size: var(--fs-sm); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--gold-light); }
.hero-title { margin: 0; font-family: var(--font-display); font-size: var(--fs-display);
  line-height: 1.0; letter-spacing: 0; text-transform: uppercase; color: #fff; }
.hero-lead { margin: 0; max-width: 70ch; font-size: var(--fs-md); line-height: 1.6;
  color: rgba(255,255,255,.9); }
.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 six departments, named under the hero. They were a one-at-a-time
   animation on the site this design came from; here they are all six at once,
   because six is a short list and the whole point is that the firm does all
   of them — showing one at a time hides the argument. Each is an ordinary
   editable block. */
.hero-keywords { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 0;
  padding: 0; list-style: none; }
.hero-keyword { display: inline-block; padding: 7px 16px;
  border: 1px solid rgba(242,215,154,.55); border-radius: var(--radius-pill);
  background: rgba(255,255,255,.08);
  font-size: var(--fs-sm); font-weight: 600; letter-spacing: .06em;
  text-transform: uppercase; color: var(--gold-light); }

/* Long, unbreakable strings — an email address, a URL — in a narrow grid
   cell. `anywhere` rather than `break-word` so the cell can also *shrink* to
   the broken width instead of forcing the panel wider than its column. */
.contact-value, .contact-list a { overflow-wrap: anywhere; }

/* A dark section, used where a band of the page is a story rather than a list
   of facts — the "where the name comes from" passage on About. Same colour as
   the page banner, so the site still only has one dark. */
.section-dark { background: var(--banner); color: var(--banner-ink); }
.section-dark h2, .section-dark h3 { color: #fff; }
.eyebrow-on-dark { color: var(--gold-light); }
.prose-on-dark { color: rgba(255,255,255,.88); }
.prose-on-dark strong { color: #fff; }
.prose-on-dark em { color: var(--gold-light); font-style: italic; }
/* A reading measure for a passage of prose that has no picture beside it. */
.container.narrow { max-width: 78ch; }

/* 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(--gold-deep); 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(--gold-deep); }
.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; } }

/* The /services/ page groups its six departments under the two identities
   (pages.models.Service.entity) rather than listing all six flat — this is
   the heading for each group. */
.dept-group-head { max-width: 62ch; margin-bottom: var(--sp-2); }
.dept-group-badge { display: inline-block; margin-bottom: var(--sp-2);
  padding: 3px 11px; border-radius: var(--radius-pill);
  font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.dept-group-badge-foundation { background: var(--brand-tint); color: var(--brand-deep); }
.dept-group-badge-company { background: var(--gold-tint); color: var(--gold-ink); }

/* The banner pointing at whichever identity is NOT currently active — see the
   comment beside it in home.html for why it exists at all. */
.entity-crosslink { display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5); flex-wrap: wrap; margin: var(--sp-6) 0; padding: var(--sp-5) var(--sp-6);
  background: var(--surface-alt); border-radius: var(--radius); }
.entity-crosslink-copy { max-width: 56ch; }
.entity-crosslink-copy h3 { margin: 0 0 4px; }
.entity-crosslink-copy p { margin: 0; }
.entity-crosslink .btn { flex: 0 0 auto; }

/* Departments — a card each, led by its photograph.

   The grid is `auto-fit` with a 300px floor rather than a fixed column count,
   so six cards land as 3x2 on a wide screen and reflow to 2 and then 1 without
   a breakpoint per step. Adding a seventh department needs no CSS change. */
/* The 380px floor is chosen so six cards land as 3x2 in the 1400px container
   rather than 4+2, which leaves a ragged half-row. */
.dept-grid { list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
  gap: var(--gap); }
.dept-card { display: flex; flex-direction: column; overflow: hidden;
  background: var(--card); border-radius: var(--radius);
  box-shadow: var(--shadow-sm); transition: transform .18s ease, box-shadow .18s ease; }
.dept-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* A fixed 3:2 window, so a portrait book cover and a landscape photograph
   still produce cards of the same height. */
.dept-img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.dept-img-empty { display: grid; place-items: center; font-size: 46px;
  background: linear-gradient(140deg, var(--brand-tint), var(--surface-alt)); }
.dept-body { padding: var(--sp-5); display: flex; flex-direction: column; gap: 8px; flex: 1; }
/* The emoji repeats on the body as a small tile: it is what tells the six
   departments apart at a glance once you have scrolled past the pictures. */
.dept-icon { display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 11px; font-size: 19px;
  background: var(--brand-tint); }
.dept-title { margin: 0; font-size: 1.28rem; text-transform: uppercase;
  letter-spacing: .01em; color: var(--ink); }
.dept-desc { margin: 0; color: var(--muted); line-height: 1.6; font-size: var(--fs-sm); }
/* A department with a site of its own links to it. `margin-top: auto` pins the
   link to the bottom of the card, so the six cards' links line up however
   uneven the descriptions above them are. */
.dept-link { display: inline-flex; align-items: center; gap: 5px; margin-top: auto;
  padding-top: var(--sp-3); font-size: var(--fs-sm); font-weight: 600;
  color: var(--brand-deep); }

/* The eight capability cards. Two lines each, so a plain bordered tile rather
   than an elevated card — they are a reference list, not eight things competing
   with each other for a click. */
.capability-grid { list-style: none; margin: var(--sp-6) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--sp-4); }
.capability { background: var(--card); border-radius: var(--radius-sm);
  padding: var(--sp-5); box-shadow: var(--shadow-sm);
  border-inline-start: 3px solid var(--brand); }
.capability-title { margin: 0 0 6px; font-size: 1.08rem; }
.capability-body { margin: 0; color: var(--muted); line-height: 1.55;
  font-size: var(--fs-sm); }

/* The contact-page map. */
.map-figure { margin: 0; }
.map-img { display: block; width: 100%; border-radius: var(--radius);
  box-shadow: var(--shadow-sm); }
.map-caption { margin: var(--sp-3) 0 0; color: var(--muted); font-size: var(--fs-sm); }

/* Testimonials — a quotation per card, the mark set large behind the words. */
.quote-grid { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.quote-card { position: relative; overflow: hidden; background: var(--card);
  border-radius: var(--radius); padding: var(--sp-6) var(--sp-5) var(--sp-5);
  box-shadow: var(--shadow-sm); display: flex; flex-direction: column;
  gap: var(--sp-4); }
/* Decorative, and aria-hidden in the markup: the quotation itself is the
   content, and a screen reader announcing a stray quote mark helps nobody. */
.quote-mark { position: absolute; top: -18px; left: 10px; font-size: 120px;
  line-height: 1; color: var(--brand-tint); pointer-events: none; user-select: none; }
.quote-text { position: relative; margin: 0; font-size: var(--fs-md);
  line-height: 1.6; color: var(--ink); }
.quote-by { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.quote-avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover;
  flex: 0 0 auto; }
.quote-avatar-initials { display: grid; place-items: center;
  background: var(--brand-tint); color: var(--brand-deep); font-weight: 700; }
.quote-name { display: block; line-height: 1.2; }
.quote-role { display: block; font-size: var(--fs-sm); color: var(--muted); }

/* 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(--gold-deep);
  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(--gold-deep); }
.footer-brand .brand { margin-bottom: var(--sp-3); }
.footer-social-title { margin: var(--sp-5) 0 var(--sp-3); }

/* The footer sign-up. One field and one button on a single line, wrapping to
   two on a narrow column rather than squeezing the input to nothing. */
.subscribe-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.subscribe-form .input { flex: 1 1 11rem; min-width: 0; }
.subscribe-note { margin: 0; font-size: .8rem; color: var(--muted); }

/* Social row — a square tile per channel. Tiles rather than bare glyphs so
   the four have a consistent hit area (40px, comfortably over the 24px
   minimum) whatever the shape of the icon inside them. */
/* `ul.social-row`, not `.social-row`: `.footer-grid ul` (a class+element
   selector, specificity 0,1,1) sits inside the same footer column and would
   otherwise beat a bare `.social-row` (0,1,0) on `flex-direction` regardless
   of which rule comes later in the file — the icons stacked into a vertical
   strip because of exactly this. Matching its specificity here and staying
   below it in source order is what actually wins the tie. */
ul.social-row { list-style: none; margin: 0; padding: 0; display: flex;
  flex-direction: row; flex-wrap: wrap; gap: 10px; }
.social-link { display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--brand-tint); color: var(--gold-deep);
  transition: background .15s ease, color .15s ease; }
.social-link:hover { background: var(--brand); color: var(--gold-ink); text-decoration: none; }
.social-link svg { width: 20px; height: 20px; display: block; }
.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(139,58,142,.30); cursor: text;
}
body.can-edit.edit-armed [data-blk]:hover {
  box-shadow: 0 0 0 2px var(--brand); background: rgba(243,231,244,.6);
}
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(35,20,37,.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; }
}