/* ============================================================================
   RAKHSHANDA MEMORIAL — DESIGN SYSTEM v3
   ----------------------------------------------------------------------------
   Primary #122f2a. Fraunces (display) + Plus Jakarta Sans (UI/body).

   v3 changes the LAYOUT LANGUAGE, not the palette or the type:
     · sticky split-screen storytelling replaces stacked bands
     · a programme index replaces the card grid
     · data gets its own architecture (impact wall, SDG grid, growth ribbon)
     · header: utility bar + logo left, nav CENTRED, actions right
     · footer: v2 structure, restyled to match

   Every class is assignable to ONE native Elementor Free widget.
   See ELEMENTOR-MAPPING.md.
   ========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root{
  --forest:#122F2A;
  --forest-900:#081713;
  --forest-800:#0E211C;
  --forest-700:#1B4239;
  --forest-600:#265A4D;
  --forest-400:#4F8C7B;
  --forest-200:#A9C7BD;
  --forest-100:#D8E5E0;
  --forest-050:#EDF3F0;

  --red:#E11B1B;
  --red-dark:#B81414;
  --red-050:#FDECEC;
  /* The hairline that goes with --red-050, matching --forest-100's role on the
     green tint: visible enough to read as an edge, quiet enough not to box the
     panel in. */
  --red-100:#F7CFCF;

  --sand:#F1EADE;
  --sand-2:#E3D6C0;

  --logo-navy:#00006D;
  --logo-red:#FE0000;
  --logo-green:#077B3E;

  --paper:#FBFBF9;
  --surface:#FFFFFF;
  --ink:#12201C;
  --ink-2:#48605A;
  --ink-3:#7C918B;
  --line:#E2E8E5;
  --line-2:#C9D6D1;
  --on-dark:#FFFFFF;
  --on-dark-2:#B8CEC7;
  --on-dark-3:#88A69C;

  --f-display:"Fraunces",Georgia,"Times New Roman",serif;
  --f-sans:"Plus Jakarta Sans","Segoe UI",Helvetica,Arial,sans-serif;

  --gutter:clamp(1.15rem,4vw,4rem);
  --maxw:1360px;
  --measure:60ch;
  --sec-y:clamp(4rem,8vw,8rem);
  /* The gap under a section title, before the content it introduces. One token
     so section heads and gallery heads cannot drift apart again: they used to
     carry separate values (2.8rem against 2.4rem), and the ~5px difference read
     as inconsistent between two headings doing the same job. */
  --sechead-gap:clamp(1.8rem,3.4vw,2.8rem);

  --r-sm:10px;
  --r:18px;
  --r-lg:28px;
  --pill:999px;

  --sh-sm:0 1px 2px rgba(18,47,42,.05), 0 4px 14px -8px rgba(18,47,42,.18);
  --sh:0 2px 6px rgba(18,47,42,.05), 0 22px 48px -28px rgba(18,47,42,.4);
  --sh-lg:0 40px 90px -40px rgba(8,23,19,.6);

  --ease:cubic-bezier(.22,.68,.32,1);
  --util-h:38px;
  --p-gap:1.1rem;
  --bar-h:96px;
  --header-h:calc(var(--util-h) + var(--bar-h));
}
@media(max-width:900px){:root{--util-h:0px}}

/* ------------------------------------------------------------------ 2. BASE */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-sans);
  font-size:clamp(1rem,.97rem + .16vw,1.0625rem);
  line-height:1.68;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video{max-width:100%;height:auto;display:block}
a{color:var(--forest-700);text-underline-offset:.2em}
a:hover{color:var(--red)}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--forest-400);outline-offset:3px;border-radius:4px}
::selection{background:var(--forest-100)}

/* ONE container. Everything aligns to its left edge — including the hero
   text block and the hero navigation dots. */
.rm-wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.rm-sec{padding-block:var(--sec-y);position:relative}
.rm-sec--sm{padding-block:clamp(2.5rem,5vw,4.5rem)}
.rm-sec--paper{background:var(--paper)}
.rm-sec--white{background:var(--surface)}
.rm-sec--sand{background:var(--sand)}
.rm-sec--forest{background:var(--forest);color:var(--on-dark)}
.rm-sec--deep{background:var(--forest-900);color:var(--on-dark)}
.rm-sec--forest p,.rm-sec--deep p{color:var(--on-dark-2)}

.rm-sec--forest::before,.rm-sec--deep::before,.rm-hero::before{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E");
}
.rm-sec>*{position:relative;z-index:1}

.rm-skip{position:absolute;left:-9999px;background:var(--surface);padding:.9rem 1.3rem;z-index:400;border-radius:var(--r-sm)}
.rm-skip:focus{left:1rem;top:1rem}

/* ------------------------------------------------------------ 3. TYPOGRAPHY */
h1,h2,h3,h4{margin:0 0 .5em;color:var(--ink);text-wrap:balance}
.rm-d0{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-size:clamp(3rem,1.2rem + 7vw,7rem);line-height:.92;letter-spacing:-.038em;
}
.rm-d1,h1{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 120;
  font-size:clamp(2.5rem,1.4rem + 4.6vw,5rem);line-height:.98;letter-spacing:-.032em;
}
.rm-d2,h2{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:clamp(1.95rem,1.35rem + 2.4vw,3.3rem);line-height:1.02;letter-spacing:-.028em;
}
.rm-d3,h3{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 30;
  font-size:clamp(1.25rem,1.1rem + .7vw,1.65rem);line-height:1.15;letter-spacing:-.018em;
}
h4{font-family:var(--f-sans);font-weight:700;font-size:1.05rem;line-height:1.3;letter-spacing:-.01em}
.rm-sec--forest h1,.rm-sec--forest h2,.rm-sec--forest h3,.rm-sec--forest h4,
.rm-sec--deep h1,.rm-sec--deep h2,.rm-sec--deep h3,.rm-sec--deep h4{color:#fff}

/* The gap between stacked paragraphs, as a variable rather than a literal.
   The WordPress build has to restate this value - Elementor puts each text
   block's paragraphs in a wrapper of their own, so every paragraph is a
   last-child and the reset below zeroed all of them - and a variable lets the
   compatibility layer say "the gap that applies here" instead of copying a
   number that a component like .rm-tight overrides. */
p{margin:0 0 var(--p-gap);max-width:var(--measure)}
p:last-child{margin-bottom:0}
/* margin-bottom is stated rather than inherited from the bare `p` rule. In the
   static build the lede IS a paragraph and picks the gap up for free; in
   WordPress the class lands on the Text Editor widget - a div - and a rule
   written for `p` never reaches it, so the hero lede sat flush against the
   buttons below it. `.rm-sechead > *:last-child` still closes the gap where
   the lede ends a block, in both builds. */
.rm-lede{font-size:clamp(1.08rem,1rem + .5vw,1.32rem);line-height:1.55;
  color:var(--ink-2);max-width:54ch;margin-bottom:var(--p-gap)}
/* and closed again where it ends a block - the counterpart of `p:last-child`,
   which cannot see the lede once the class is on a widget div. */
.rm-lede:last-child{margin-bottom:0}
.rm-sec--forest .rm-lede,.rm-sec--deep .rm-lede{color:var(--on-dark-2)}
strong,b{font-weight:700}

.rm-eyebrow{
  display:inline-flex;align-items:center;gap:.55rem;
  font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;
  color:var(--forest-700);margin:0 0 1.1rem;
}
.rm-eyebrow::before{content:"";width:26px;height:2px;background:var(--red);flex:none}
.rm-sec--forest .rm-eyebrow,.rm-sec--deep .rm-eyebrow{color:var(--forest-200)}
/* Hero eyebrows use the warm sand so the programme label reads as a label,
   not as more body copy. Applies to every page hero. */
.rm-hero .rm-eyebrow,.rm-phero .rm-eyebrow{color:var(--sand)}
.rm-hero .rm-eyebrow::before,.rm-phero .rm-eyebrow::before{background:var(--red);width:34px;height:3px}

/* ---------------------------------------------------------------- 4. BUTTONS */
.rm-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55rem;
  font-family:var(--f-sans);font-weight:700;font-size:.94rem;
  padding:.92rem 1.7rem;border:1.5px solid transparent;border-radius:var(--pill);
  text-decoration:none;cursor:pointer;white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease);
}
.rm-btn:hover{transform:translateY(-2px)}
.rm-btn svg{width:1.05em;height:1.05em;flex:none}
.rm-btn--donate{background:var(--red);color:#fff;border-color:var(--red)}
.rm-btn--donate:hover{background:var(--red-dark);border-color:var(--red-dark);color:#fff}
.rm-btn--forest{background:var(--forest);color:#fff;border-color:var(--forest)}
.rm-btn--forest:hover{background:var(--forest-700);border-color:var(--forest-700);color:#fff}
.rm-btn--outline{background:transparent;color:var(--forest);border-color:var(--line-2)}
.rm-btn--outline:hover{background:var(--forest);color:#fff;border-color:var(--forest)}
.rm-btn--ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.42)}
.rm-btn--ghost:hover{background:#fff;color:var(--forest);border-color:#fff}
.rm-btn--lg{padding:1.08rem 2.1rem;font-size:1rem}
.rm-btn--xl{padding:1.28rem 2.7rem;font-size:1.12rem;font-weight:800}
.rm-btn--sm{padding:.58rem 1.15rem;font-size:.84rem}
.rm-btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:1.8rem}

/* ===================================================== 5. HEADER (v1 shape) ==
   Utility bar (social + contact) above a main bar with the logo left,
   navigation CENTRED, and Get Involved + Donate Now on the right. */
.rm-header{position:sticky;top:0;z-index:150;background:var(--forest-900);
  transition:box-shadow .3s var(--ease)}
.rm-header.is-stuck{box-shadow:0 14px 40px -26px rgba(0,0,0,.95)}

.rm-util{border-bottom:1px solid rgba(255,255,255,.1);height:var(--util-h);display:none}
@media(min-width:900px){.rm-util{display:block}}
.rm-util__in{display:flex;align-items:center;justify-content:space-between;height:100%;gap:1.5rem}
.rm-util__contact{display:flex;gap:1.5rem;font-size:.78rem;color:var(--on-dark-3)}
.rm-util__contact a{color:var(--on-dark-3);text-decoration:none;display:flex;align-items:center;gap:.4rem}
.rm-util__contact a:hover{color:#fff}
.rm-util__contact svg{width:13px;height:13px}
.rm-util__social{display:flex;gap:.15rem}
.rm-util__social a{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  color:var(--on-dark-3);transition:color .18s,background .18s}
.rm-util__social a:hover{color:#fff;background:rgba(255,255,255,.12)}
.rm-util__social svg{width:14px;height:14px}

/* Equal side columns, so the nav is centred in the BAR rather than in the
   leftover space between the logo and the buttons. With the text lockup gone
   the logo is ~82px and the buttons ~273px, and the old `auto 1fr auto` left
   the nav sitting ~96px left of true centre. The logo still sits hard left and
   the buttons hard right (.rm-actions has justify-self:end). */
.rm-bar{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1.2rem;height:var(--bar-h)}

/* Each of the three sits in a NAMED column, rather than wherever automatic
   placement happens to put it.

   Below 1180px the navigation is `display:none`, which takes it out of grid
   placement entirely — so the buttons fell back into the middle column, and
   `justify-self:end` dutifully aligned them to the right edge of THAT, leaving
   the whole third column empty. On a 390px phone the Donate button and the
   menu ended 98px short of the right edge and read as floating in the middle
   of the bar; the same gap grew to 376px by 1100px wide.

   Naming the columns makes the layout independent of which children happen to
   be visible, which is the point: the header should look the same whether the
   nav is there or not. Same lesson as the programme index and the flex
   defaults — state what you are relying on. */
.rm-bar > .rm-logo{grid-column:1}
.rm-bar > .rm-nav{grid-column:2}
.rm-bar > .rm-actions{grid-column:3}

/* v1 logo lockup: mark on a white tile + name + tagline */
.rm-logo{display:flex;align-items:center;gap:.7rem;text-decoration:none;flex:none}
.rm-logo img{height:51px;width:auto;display:block;background:#fff;padding:6px 9px;
  border-radius:var(--r-sm);box-sizing:content-box}
.rm-logo__txt{display:flex;flex-direction:column;line-height:1}
.rm-logo__name{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 24;
  font-size:1.25rem;color:#fff;letter-spacing:-.015em;
  /* The wordmark is brand text and must never break across lines. It now
     renders only as the no-logo fallback, but the rule stays: it was landing
     ~9px short of its natural width once the nav stopped wrapping. */
  white-space:nowrap}
.rm-logo__tag{font-size:.66rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase;
  color:var(--forest-400);margin-top:.32rem}
/* .rm-logo__txt now renders only as the no-logo fallback (see header.php), so
   it must NOT be hidden on small screens — that would leave an empty link. */
@media(max-width:600px){.rm-logo img{height:40px}}

/* Centred navigation */
.rm-nav{display:none;justify-self:center}
/* 1180, not 1140, since 5 Sep: the menu gained a sixth item ("The Club") and
   at 1140 the row needed about 25px more than the header had. Rather than let
   it overflow, the burger takes over 40px sooner — the drawer has every one of
   these links in it, so nothing becomes unreachable, and 40px is a window size
   almost nobody sits at.

   The three rules that switch — the menu, the burger and the drawer — must
   ALWAYS carry the same number. Two of them at one width and one at another
   gives you either two menus at once or none at all. */
@media(min-width:1180px){.rm-nav{display:block}}

/* And between 1180 and 1320 the links sit a little tighter. Six items at the
   full .9rem of side padding is 38px more than the header has to give at the
   narrow end; the alternative was pushing the burger up to 1220 and taking the
   full menu away from more people. Above 1320 there is room, so the spacing
   goes back to what the design says. */
@media(min-width:1180px) and (max-width:1319px){
  .rm-nav__link{padding-inline:.7rem}
  .rm-nav>ul{gap:.1rem}
}
.rm-nav>ul{display:flex;align-items:center;gap:.15rem;list-style:none;margin:0;padding:0}
.rm-nav li{position:relative}
.rm-nav__link{
  display:flex;align-items:center;gap:.35rem;font-size:.92rem;font-weight:600;
  color:var(--on-dark-2);text-decoration:none;padding:.6rem .9rem;border-radius:var(--pill);
  transition:color .18s,background .18s;
  /* The nav sits in the centre column of .rm-bar. Before the logo lockup was
     removed it landed within a pixel of its own natural width, and sub-pixel
     rounding was enough to break "Our Team", "What We Do" and "Contact Us"
     onto two lines. Labels must never wrap. */
  white-space:nowrap;
}
.rm-nav__link:hover,.rm-nav li:focus-within>.rm-nav__link,
.rm-nav__link[aria-current="page"]{color:#fff;background:rgba(255,255,255,.1)}
.rm-nav__link svg{width:.62em;height:.62em;opacity:.75;transition:transform .2s var(--ease)}
.rm-nav li:hover>.rm-nav__link svg,.rm-nav li:focus-within>.rm-nav__link svg{transform:rotate(180deg)}

/* v1 mega menu — each project carries its own number */
/* SIZED BY WHAT IS IN IT, NOT BY A NUMBER TYPED ONCE (1 Sep)
   -----------------------------------------------------------
   This was `min-width:380px`, chosen when the panel held two columns: the
   programme name on the left and its short line on the right. In WordPress the
   short line never arrived — the builder didn't fill it in — so the panel was
   380px of card holding 221px of names, and the right-hand half was empty.
   The names have been given their lines back, but a fixed width was the wrong
   instrument either way: RM can edit those lines, and a panel measured for
   text somebody else typed goes wrong the first time they change it.

   `width:max-content` sizes the card to its widest row, so it shrinks if the
   lines are shortened and collapses to a plain list of names if they are
   cleared altogether — no CSS change needed to remove them. `min-width` keeps
   a names-only panel from looking mean, and `max-width` keeps one long line
   from running the card off the screen; past that the names wrap and the
   lines, which must not break, stay whole. */
.rm-mega{
  position:absolute;top:calc(100% + 10px);left:50%;translate:-50% 0;
  width:max-content;min-width:250px;max-width:min(440px,calc(100vw - 2rem));
  background:var(--surface);border-radius:var(--r);box-shadow:var(--sh-lg);padding:.55rem;
  list-style:none;margin:0;opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;
}
.rm-nav li:hover>.rm-mega,.rm-nav li:focus-within>.rm-mega{opacity:1;visibility:visible;transform:none}
/* THE BRIDGE — see .rm-involved__menu::before below for the full reasoning.
   The panel is dropped 10px clear of the menu item, and that 10px belongs to
   nobody: cross it and the hover is lost. This invisible strip gives it to the
   panel, so the pointer is never outside the thing that keeps the panel open. */
.rm-mega::before{
  content:"";position:absolute;left:0;right:0;top:-11px;height:11px;
}
/* The 2.4rem is the breathing room between a name and its line. It used to come
   free from the 380px: the name column was `1fr`, so it swallowed whatever the
   fixed width left over. With the card sized by its content that slack is gone,
   and the gap has to be stated or the widest row reads as two words jammed
   together. */
.rm-mega a{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem 2.4rem;
  padding:.65rem .85rem;border-radius:var(--r-sm);text-decoration:none;color:var(--ink);
  font-weight:700;font-size:.9rem;transition:background .15s;
}
.rm-mega a:hover{background:var(--forest-050);color:var(--forest)}
.rm-mega__stat{font-family:var(--f-sans);font-size:.72rem;font-weight:600;color:var(--forest-400);
  letter-spacing:.02em;text-align:right;white-space:nowrap}

.rm-actions{display:flex;align-items:center;gap:.55rem;justify-self:end}
/* Get Involved keeps its dropdown, as on the reference site. */
.rm-involved{position:relative}
/* Plain dropdown navigation — no slide, no fade, no moving bullets.
   Same behaviour as the Projects mega menu.

   REACHABLE, NOT JUST VISIBLE (1 Sep)
   -----------------------------------
   The panel opens on hover of the wrapper, and it is drawn 8px below the
   button so it reads as a separate card. Measured on the home page: button
   ends at y=140, panel starts at y=148. Those eight pixels belonged to
   nothing — not the button, not the panel — so the moment the pointer left
   the button on its way down, the wrapper stopped being hovered and the panel
   was removed. It could be seen and never reached.

   Two changes, and both are needed:

   1. `::before` puts an invisible strip over the gap. It is part of the panel,
      the panel is inside the wrapper, so hovering the strip keeps the wrapper
      hovered. The pointer now travels from button to panel without ever
      leaving the hover area. Nothing moves on screen — the strip has no
      background.

   2. The panel fades instead of switching `display`. `display:none` is
      instant and cannot be transitioned, so there was no forgiveness at all;
      `visibility` transitioned over .18s keeps the panel present and hoverable
      for a moment after the pointer strays, which is what makes a diagonal
      move to a lower item work. This also makes it behave exactly like the
      Projects mega menu, which is why that one never had the complaint. */
.rm-involved__menu{
  position:absolute;top:100%;left:0;min-width:210px;margin-top:.5rem;padding:.4rem;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--sh);list-style:none;z-index:60;display:block;
  opacity:0;visibility:hidden;
  transition:opacity .18s var(--ease),visibility .18s}
/* The strip is the gap plus one pixel, no more: it sits on top of the button,
   so any extra would eat into the button's own clickable area. */
.rm-involved__menu::before{
  content:"";position:absolute;left:0;right:0;
  top:calc(-.5rem - 1px);height:calc(.5rem + 1px);
}
.rm-involved:hover>.rm-involved__menu,
.rm-involved:focus-within>.rm-involved__menu{opacity:1;visibility:visible}
.rm-involved__menu a,.rm-involved__menu button{
  display:block;width:100%;text-align:left;background:none;border:none;cursor:pointer;
  font:inherit;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:none;
  padding:.62rem .85rem;border-radius:var(--r-sm)}
.rm-involved__menu a:hover,.rm-involved__menu button:hover,
.rm-involved__menu a:focus-visible,.rm-involved__menu button:focus-visible{
  background:var(--forest-050);color:var(--forest)}
.rm-involved .rm-btn svg{width:13px;height:13px}
.rm-actions .rm-btn--outline{color:#fff;border-color:rgba(255,255,255,.4)}
.rm-actions .rm-btn--outline:hover{background:#fff;color:var(--forest);border-color:#fff}
@media(max-width:760px){.rm-actions .rm-btn--involved{display:none}}

/* align-content:center is doing real work here, not tidying.

   Three bars, 2px tall, 4px apart — 14px of content in a 46px button. A grid's
   rows stretch to fill spare space by default, so the three auto rows became
   ~15px each and the bars ended up 15px apart instead of 6. The open state
   moves the outer two by 6px each to meet in the middle and cross; from 15px
   apart, 6px is not enough. They stopped 9px short and crossed nowhere,
   drawing two diagonal strokes that read as "›" — a close button shaped like
   a next arrow. Centring the rows instead of stretching them puts the bars at
   the 6px pitch the open state was written for, and it closes as an ✕. */
.rm-burger{display:grid;place-items:center;align-content:center;
  width:46px;height:46px;flex:none;background:transparent;
  border:1.5px solid rgba(255,255,255,.28);border-radius:var(--pill);cursor:pointer}
@media(min-width:1180px){.rm-burger{display:none}}
.rm-burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;
  transition:transform .24s var(--ease),opacity .18s}
.rm-burger span+span{margin-top:4px}
.rm-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.rm-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.rm-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

.rm-drawer{position:fixed;inset:var(--header-h) 0 0 0;background:var(--forest-900);z-index:140;
  padding:1.6rem var(--gutter) 3rem;overflow-y:auto;opacity:0;visibility:hidden;transform:translateY(-10px);
  transition:opacity .25s var(--ease),transform .25s var(--ease),visibility .25s}
.rm-drawer.is-open{opacity:1;visibility:visible;transform:none}
@media(min-width:1180px){.rm-drawer{display:none}}
.rm-drawer ul{list-style:none;margin:0;padding:0}
.rm-drawer>ul>li{border-bottom:1px solid rgba(255,255,255,.12)}
/* Menu rows only — `li a`, not every `a` in the drawer.

   The drawer ends with two buttons, and "Get Involved" is an <a> while "Donate
   Now" is a <button>. `.rm-drawer a` was therefore landing on one of the pair
   and not the other: it replaced the button's `inline-flex` with `block`, its
   `.92rem 1.7rem` padding with `1rem 0`, and its type size — so the label sat
   hard against the left edge of its own pill, while the button beside it,
   identical in every other respect, was centred correctly. A styling rule for
   navigation links had quietly redefined a button because the button happened
   to be a link.

   Scoping to `li a` fixes it at the source and keeps the button row out of the
   menu's business entirely. */
.rm-drawer li a{display:block;padding:1rem 0;color:#fff;text-decoration:none;font-weight:700;font-size:1.08rem}
.rm-drawer li a:hover{color:var(--forest-400)}
/* The programmes are menu items, not a footnote under one.

   They used to be indented behind a 2px rule that ran the full height of the
   list — a single line down the side of all seven names — and set two steps
   quieter than everything else: 500 weight against 700, .96rem against 1.08,
   and a dimmed grey against white. Next to "Our Team" and "Contact Us" they
   read as small print rather than as places you can go, and the rule down the
   side was the loudest thing in the menu.

   There is no override left: they inherit `.rm-drawer a` exactly, so they are
   the same size, weight and colour as every other row by construction rather
   than by a second set of numbers kept in step by hand. The hairline between
   them matches the top-level rows too; the last one is left off because the
   group's own row already draws one. "PROJECTS" above them is what marks the
   group — a heading does that job without a diagram.

   It also fixes a target size: these rows were about 30px tall, under the 44px
   a thumb hits reliably. They are ~52px now, like the rest. */
.rm-drawer__sub{padding:0;margin:0}
.rm-drawer__sub > li:not(:last-child){border-bottom:1px solid rgba(255,255,255,.12)}
.rm-drawer__lbl{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);padding:1.4rem 0 .55rem;display:block}
.rm-drawer .rm-btnrow{flex-direction:column}
.rm-drawer .rm-btn{width:100%}

/* ============================================================== 6. HERO ==== */
.rm-hero{position:relative;background:var(--forest-900);color:#fff;overflow:hidden;isolation:isolate}
.rm-hero__viewport{position:relative;min-height:clamp(560px,82vh,900px);display:grid}
.rm-slide{grid-area:1/1;position:relative;display:grid;align-items:center;
  opacity:0;visibility:hidden;transition:opacity .9s var(--ease),visibility .9s}
.rm-slide.is-active{opacity:1;visibility:visible}
.rm-slide__media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.rm-slide__media img,.rm-slide__media video{width:100%;height:100%;object-fit:cover;
  transform:scale(1.07);transition:transform 8s linear}
.rm-slide.is-active .rm-slide__media img,.rm-slide.is-active .rm-slide__media video{transform:scale(1)}
.rm-slide::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--forest-900) 2%,rgba(8,23,19,.9) 42%,rgba(8,23,19,.4) 100%)}
/* Text block uses the SAME .rm-wrap as the dots, so both share a left edge. */
.rm-slide__inner{padding-block:clamp(4.5rem,10vw,8rem)}
.rm-slide__body{max-width:760px}
.rm-slide__title{color:#fff;margin-bottom:1.1rem;max-width:14ch}
.rm-slide__text{color:var(--on-dark-2);font-size:clamp(1.05rem,.98rem + .45vw,1.24rem);
  line-height:1.6;max-width:52ch;margin-bottom:1.1rem}
.rm-slide.is-active .rm-eyebrow{animation:rmUp .7s var(--ease) .1s both}
.rm-slide.is-active .rm-slide__title{animation:rmUp .7s var(--ease) .2s both}
.rm-slide.is-active .rm-slide__text{animation:rmUp .7s var(--ease) .32s both}
.rm-slide.is-active .rm-btnrow{animation:rmUp .7s var(--ease) .44s both}
@keyframes rmUp{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

.rm-hero__ui{position:absolute;left:0;right:0;bottom:clamp(1.6rem,4vw,3rem);z-index:3}
.rm-hero__ui .rm-wrap{display:flex;align-items:center;gap:1.2rem}
.rm-dots{display:flex;gap:.5rem;list-style:none;margin:0;padding:0}
.rm-dot{width:34px;height:4px;border-radius:var(--pill);border:none;padding:0;cursor:pointer;
  background:rgba(255,255,255,.32);transition:background .25s,width .25s var(--ease)}
.rm-dot[aria-selected="true"]{background:#fff;width:56px}
.rm-arrows{display:flex;gap:.5rem;margin-left:auto}
.rm-arrow{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  background:rgba(255,255,255,.1);border:1.5px solid rgba(255,255,255,.28);color:#fff;
  transition:background .2s,border-color .2s,transform .2s var(--ease)}
.rm-arrow:hover{background:#fff;color:var(--forest);border-color:#fff;transform:scale(1.06)}
.rm-arrow svg{width:18px;height:18px}
@media(max-width:640px){.rm-arrows{display:none}}

/* Inner-page hero — same text block treatment as the home hero */
.rm-phero{position:relative;background:var(--forest-900);color:#fff;overflow:hidden;isolation:isolate}
.rm-phero__media{position:absolute;inset:0;z-index:-2}
.rm-phero__media img{width:100%;height:100%;object-fit:cover}
.rm-phero::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(100deg,var(--forest-900) 4%,rgba(8,23,19,.9) 45%,rgba(8,23,19,.48) 100%)}
.rm-phero__inner{padding-block:clamp(4rem,9vw,7rem);position:relative;z-index:1}
.rm-phero__body{max-width:760px}
/* The hero sits on a photograph, not on a section tone, so the dark-section
   rules above do not reach it. */
.rm-phero__body .rm-lede{color:var(--on-dark-2)}
.rm-phero h1{color:#fff;max-width:15ch}
.rm-crumb{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;margin:0 0 clamp(2.2rem,4.5vw,3.4rem);padding:0;
  font-size:.78rem;font-weight:600;color:var(--on-dark-3)}
.rm-crumb a{color:var(--on-dark-3);text-decoration:none}
.rm-crumb a:hover{color:#fff}
.rm-crumb li::after{content:"/";margin-left:.4rem;opacity:.5}
.rm-crumb li:last-child{color:var(--forest-400)}
.rm-crumb li:last-child::after{display:none}
/* Bottom rail on inner heroes — mirrors the hero dots position.
   Ruled cells with vertical separators; values are placeholders staff edit. */
.rm-phero__rail{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin-top:clamp(2.2rem,5vw,3.5rem);
  border-top:1px solid rgba(255,255,255,.22);
  border-bottom:1px solid rgba(255,255,255,.22);
}
.rm-phero__rail > div{
  padding:1.5rem clamp(.9rem,1.8vw,1.4rem);
  border-right:1px solid rgba(255,255,255,.16);position:relative;
  text-align:center;
  opacity:0;transform:translateY(-16px);
  animation:rmDrop .7s cubic-bezier(.22,.68,.32,1) both;
}
.rm-phero__rail > div:nth-child(1){animation-delay:.45s}
.rm-phero__rail > div:nth-child(2){animation-delay:.58s}
.rm-phero__rail > div:nth-child(3){animation-delay:.71s}
.rm-phero__rail > div:nth-child(4){animation-delay:.84s}
.rm-phero__rail > div:nth-child(5){animation-delay:.97s}
@keyframes rmDrop{
  0%{opacity:0;transform:translateY(-18px)}
  60%{opacity:1;transform:translateY(3px)}
  100%{opacity:1;transform:none}
}
.rm-phero__rail > div:last-child{border-right:none}
@media(max-width:640px){
  .rm-phero__rail > div:nth-child(2n){border-right:none}
  .rm-phero__rail > div:nth-child(-n+2){border-bottom:1px solid rgba(255,255,255,.16)}
}
.rm-phero__rail b{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:clamp(1.9rem,1.4rem + 1.7vw,2.8rem);line-height:1;color:#fff;letter-spacing:-.04em;
  font-variant-numeric:tabular-nums}
.rm-phero__rail b small{font-size:.42em;font-weight:700;letter-spacing:0;margin-left:.1em;
  color:var(--red);vertical-align:.5em}
.rm-phero__rail span{display:block;font-size:.72rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--on-dark-3);margin-top:.6rem;line-height:1.4}

/* Programme-specific donate button under the hero description */
.rm-phero__cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.7rem}

/* ============================================ 7. STICKY SPLIT-SCREEN STORY ==
   Left panel pins; the right column of "beats" scrolls past it.
   Pure CSS position:sticky — no scroll library. */
.rm-story{display:grid;gap:clamp(2rem,5vw,5rem);grid-template-columns:1fr}
@media(min-width:960px){
  .rm-story{grid-template-columns:minmax(300px,.85fr) 1.15fr;align-items:start}
  .rm-story--rev .rm-story__panel{order:2}
  .rm-story__panel{
    position:sticky;top:calc(var(--header-h) + clamp(2rem,5vw,4.5rem));
    max-height:calc(100vh - var(--header-h) - 4rem);
  }
}
.rm-story__panel h2{margin-bottom:1rem}
.rm-story__figure{margin-top:2rem;padding-top:1.8rem;border-top:1px solid var(--line)}
.rm-sec--forest .rm-story__figure,.rm-sec--deep .rm-story__figure{border-color:rgba(255,255,255,.2)}
.rm-story__figure b{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-size:clamp(3rem,2rem + 3.5vw,4.8rem);line-height:.9;letter-spacing:-.045em;
  color:var(--forest);font-variant-numeric:tabular-nums}
.rm-sec--forest .rm-story__figure b,.rm-sec--deep .rm-story__figure b{color:#fff}
.rm-story__figure span{display:block;font-size:.78rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);margin-top:.7rem}
.rm-sec--forest .rm-story__figure span,.rm-sec--deep .rm-story__figure span{color:var(--forest-200)}

/* Progress ticks in the sticky panel */
.rm-story__ticks{display:flex;gap:.4rem;margin-top:1.6rem}
.rm-tick{width:26px;height:3px;border-radius:var(--pill);background:var(--line-2);transition:background .3s,width .3s var(--ease)}
.rm-tick.is-on{background:var(--forest);width:40px}
.rm-sec--forest .rm-tick,.rm-sec--deep .rm-tick{background:rgba(255,255,255,.28)}
.rm-sec--forest .rm-tick.is-on,.rm-sec--deep .rm-tick.is-on{background:#fff}

.rm-beats{display:grid;gap:clamp(2.5rem,6vw,5rem)}
.rm-beat{display:grid;gap:1.2rem}
.rm-beat__n{font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);display:flex;align-items:center;gap:.6rem}
.rm-beat__n::after{content:"";flex:1;height:1px;background:var(--line)}
.rm-sec--forest .rm-beat__n::after,.rm-sec--deep .rm-beat__n::after{background:rgba(255,255,255,.22)}
.rm-sec--forest .rm-beat__n,.rm-sec--deep .rm-beat__n{color:var(--forest-200)}
.rm-beat h3{margin-bottom:.4rem}

/* Focus effect — the beat nearest the middle of the viewport comes forward and
   the others recede. JS adds .is-focus; without JS everything stays at 1. */
@media(min-width:960px){
  .rm-beat--focusable{
    transform-origin:left center;
    transition:opacity .55s var(--ease),transform .55s var(--ease),filter .55s var(--ease);
    opacity:.42;filter:saturate(.75);
  }
  .rm-beat--focusable.is-focus{opacity:1;filter:none;transform:scale(1.045)}
  .rm-beat--focusable .rm-beat__n{transition:color .45s var(--ease)}
  .rm-beat--focusable.is-focus .rm-beat__n{color:var(--red)}
  .rm-sec--forest .rm-beat--focusable.is-focus .rm-beat__n,
  .rm-sec--deep .rm-beat--focusable.is-focus .rm-beat__n{color:#fff}
  .rm-beat--focusable.is-focus h3{color:var(--forest)}
  .rm-sec--forest .rm-beat--focusable.is-focus h3,
  .rm-sec--deep .rm-beat--focusable.is-focus h3{color:#fff}
}
@media (prefers-reduced-motion:reduce){
  .rm-beat--focusable{opacity:1;filter:none;transform:none}
}

/* Paragraph pairs that should read as one block, not two spaced ones. */
.rm-tight{--p-gap:.55rem}
.rm-tight p{margin-bottom:var(--p-gap)}
.rm-tight p:last-child{margin-bottom:0}
.rm-beat img{width:100%;border-radius:var(--r-lg);aspect-ratio:16/10;object-fit:cover;background:var(--forest-050)}
.rm-beat--tall img{aspect-ratio:4/5}
.rm-beat p{max-width:56ch}

/* =========================================== 8. PROGRAMME INDEX (not cards) */
/* --peek-w is set here, on the list, because the row grid and the photo inside
   it both need the same number: the row reserves a track that wide, the photo
   fills it. A child cannot hand a value up to its parent. */
.rm-index{border-top:1px solid var(--line);--peek-w:190px}
.rm-sec--forest .rm-index,.rm-sec--deep .rm-index{border-color:rgba(255,255,255,.2)}
/* Narrow screens: the number, then the name beside it, and the figure directly
   under the name — indented to line up with it, not with the number.

   Two things had to be true at once. The first column must be sized by the
   NUMBER and nothing else: it was `auto`, and an auto column is as wide as the
   widest thing in it — the figure wraps onto the second row into that same
   column, so "25+ businesses started" was sizing the column that holds "02",
   leaving a two-character number in 154px of empty space. Moving the figure
   into the second column fixes that at the root, and `auto` then means what it
   was meant to mean, adjusting itself to whatever the numbers are.

   The column gap comes down from 1.5rem to .7rem as well. 1.5rem is right on a
   wide row where it separates four columns of content; on a phone, next to a
   26px number, it read as a gap rather than as a pair.

   The figure sharing the name's column is what lines the two up: name and
   figure now start on the same left edge, with the number sitting outside them
   both.

   The number column is a fixed 1.7rem rather than `auto`, because each row is
   its own grid: with `auto`, every row sized that column to its own number, and
   Fraunces has no tabular figures — "01" measured 20px and "02" 23px — so the
   programme names started on four different left edges down the list.
   (`font-variant-numeric:tabular-nums` was tried first and the font ignores
   it.) 1.7rem holds a two-digit number at 1.15rem with room to spare, and
   because it is in rem it scales with the number if the reader enlarges text. */
.rm-index__row{
  display:grid;grid-template-columns:1.7rem 1fr;gap:.3rem .7rem;align-items:center;
  padding:clamp(1.3rem,2.6vw,2rem) 0;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;position:relative;transition:padding-left .35s var(--ease);
}
.rm-index__stat{grid-column:2}
@media(min-width:820px){
  .rm-index__row{grid-template-columns:76px 1fr minmax(150px,auto) 40px;gap:.4rem 1.5rem}
  /* Back to one line: number, name, figure, arrow. */
  .rm-index__stat{grid-column:auto}
}
.rm-sec--forest .rm-index__row,.rm-sec--deep .rm-index__row{border-color:rgba(255,255,255,.2)}
.rm-index__row:hover{padding-left:1.2rem;color:inherit}
.rm-index__row::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--forest-050);
  border-radius:var(--r);opacity:0;transition:opacity .3s;
}
.rm-index__row:hover::before{opacity:1}
.rm-sec--forest .rm-index__row::before,.rm-sec--deep .rm-index__row::before{background:rgba(255,255,255,.07)}
.rm-index__n{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 40;
  font-size:1.15rem;color:var(--ink-3);letter-spacing:-.02em}
.rm-index__name{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 60;
  font-size:clamp(1.5rem,1.2rem + 1.3vw,2.3rem);line-height:1.05;letter-spacing:-.03em;color:var(--forest)}
.rm-sec--forest .rm-index__name,.rm-sec--deep .rm-index__name{color:#fff}
.rm-index__stat{font-size:.86rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rm-sec--forest .rm-index__stat,.rm-sec--deep .rm-index__stat{color:var(--forest-200)}
/* Photo peeks in on hover — desktop only.

   It used to be absolutely positioned at `right:14%` of the row. A percentage
   of the row cannot know where the row's text is: on a 1112px row the photo
   landed at 812–1009px and the statistic ("Rs. 100 per meal") ran 947–1097px,
   so the photo covered the first 62px of it. Widening the window moved the
   collision around rather than removing it, and every row sizes its own
   statistic column, so no single percentage could clear all seven.

   So the photo now has a COLUMN OF ITS OWN in the row grid, between the name
   and the statistic. It cannot overlap anything, at any width, for any length
   of statistic, because the grid reserves the space.

   The negative block margins cancel its own height so it still contributes
   nothing to the row: the margin box is 0 tall and centred, the border box is
   142.5px tall and hangs symmetrically over the row, exactly as the absolute
   version did. Without them every row would grow to the height of a photo that
   is invisible until hover. */
.rm-index__peek{display:none}
@media(min-width:1100px){
  .rm-index__row{grid-template-columns:76px 1fr var(--peek-w) minmax(150px,auto) 40px}
  .rm-index__n{grid-column:1}
  .rm-index__name{grid-column:2}
  .rm-index__peek{
    display:block;grid-column:3;grid-row:1;justify-self:end;align-self:center;
    width:var(--peek-w);aspect-ratio:4/3;
    margin-block:calc(var(--peek-w) * 3 / -8);   /* half of 4:3 height */
    border-radius:var(--r);overflow:hidden;
    opacity:0;transform:translateY(14px) rotate(-3deg);pointer-events:none;
    transition:opacity .35s var(--ease),transform .35s var(--ease);box-shadow:var(--sh);
  }
  .rm-index__stat{grid-column:4}
  .rm-index__row:hover .rm-index__peek{opacity:1;transform:translateY(0) rotate(-3deg)}
  .rm-index__peek img{width:100%;height:100%;object-fit:cover}
}

/* ================================================== 9. IMPACT DATA WALL ==== */
/* The separator lines used to be the container's own background showing through
   1px gaps. That works only when the cells fill every row: with, say, 6 stats in
   a 5-column layout the four unused cells painted as one large grey slab.
   The cells now draw their own right/bottom hairlines instead, and the container
   is paper-coloured, so an unfilled tail is simply blank. overflow:hidden clips
   the trailing hairline off the last column and last row, leaving the outer edge
   exactly as before — top and bottom rules only. Works at any item count. */
.rm-wall{display:grid;gap:1px;background:var(--paper);overflow:hidden;
  border-block:1px solid var(--line);
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.rm-sec--forest .rm-wall,.rm-sec--deep .rm-wall{background:transparent;border-color:rgba(255,255,255,.2)}
.rm-wall__cell{background:var(--paper);padding:clamp(1.6rem,3vw,2.4rem) clamp(1.2rem,2vw,1.8rem);
  box-shadow:1px 0 0 var(--line),0 1px 0 var(--line);
  transition:background .3s}
.rm-sec--forest .rm-wall__cell,.rm-sec--deep .rm-wall__cell{
  box-shadow:1px 0 0 rgba(255,255,255,.2),0 1px 0 rgba(255,255,255,.2)}

/* Six-item walls.
   auto-fit lands on five columns at desktop width, which orphans the sixth
   onto a row of its own. A wall holding exactly six cells gets column counts
   that divide six evenly instead — 6 / 3 / 2 / 1 — so it never leaves a short
   row at any width. Keyed on the cell count, so every other wall on the site
   keeps the shared auto-fit behaviour untouched. */
/* Two across on phones, not one.

   It used to drop to a single column below 480px, which turned six figures
   into six full-width bands and about 1,300px of scrolling for what is meant to
   be a glanceable summary — the whole point of the wall is that you take it in
   at once. Two columns hold together down to the narrowest phones: the figures
   are display type and the labels are short. */
.rm-wall:has(> .rm-wall__cell:nth-child(6):last-child){grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){
  .rm-wall:has(> .rm-wall__cell:nth-child(6):last-child){grid-template-columns:repeat(3,1fr)}}
@media(min-width:1100px){
  .rm-wall:has(> .rm-wall__cell:nth-child(6):last-child){grid-template-columns:repeat(6,1fr)}}
.rm-wall__cell:hover{background:var(--surface)}
.rm-sec--forest .rm-wall__cell{background:var(--forest)}
.rm-sec--deep .rm-wall__cell{background:var(--forest-900)}
.rm-sec--forest .rm-wall__cell:hover,.rm-sec--deep .rm-wall__cell:hover{background:var(--forest-700)}
.rm-wall__n{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-size:clamp(2.4rem,1.6rem + 2.6vw,3.8rem);line-height:.92;letter-spacing:-.045em;
  color:var(--forest);font-variant-numeric:tabular-nums;display:block;
  text-wrap:nowrap;overflow-wrap:normal}
/* Word values ("Rs. 100", "No Profit") need a smaller size or they wrap and
   break the baseline the numbers sit on. */
.rm-wall__n--word{font-size:clamp(1.6rem,1.1rem + 1.6vw,2.4rem)}
.rm-sec--forest .rm-wall__n,.rm-sec--deep .rm-wall__n{color:#fff}
.rm-wall__l{display:block;font-size:.82rem;font-weight:700;color:var(--ink);margin-top:.8rem;line-height:1.35}
.rm-sec--forest .rm-wall__l,.rm-sec--deep .rm-wall__l{color:#fff}
.rm-wall__src{display:block;font-size:.72rem;font-weight:600;letter-spacing:.06em;
  color:var(--ink-3);margin-top:.45rem}
.rm-sec--forest .rm-wall__src,.rm-sec--deep .rm-wall__src{color:var(--forest-200)}

/* ================================================ 10. SDG INTERACTIVE GRID = */
.rm-sdg{display:grid;gap:.6rem;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.rm-sdg__cell{
  position:relative;border-radius:var(--r);padding:1.15rem 1.2rem 1.2rem;overflow:hidden;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  transition:background .3s var(--ease),transform .3s var(--ease),border-color .3s;
  min-height:120px;display:flex;flex-direction:column;justify-content:space-between;
}
.rm-sdg__cell:hover{background:#fff;border-color:#fff;transform:translateY(-4px)}
.rm-sdg__n{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:2.4rem;line-height:.9;letter-spacing:-.04em;color:var(--forest-200);
  transition:color .3s;font-variant-numeric:tabular-nums}
.rm-sdg__cell:hover .rm-sdg__n{color:var(--red)}
.rm-sdg__l{font-size:.86rem;font-weight:700;color:#fff;line-height:1.3;transition:color .3s}
.rm-sdg__cell:hover .rm-sdg__l{color:var(--forest)}
.rm-sdg__top{display:flex;align-items:flex-start;justify-content:space-between;gap:.6rem}

/* ================================================== 11. GROWTH RIBBON ====== */
.rm-growth{display:grid;gap:1.1rem}
.rm-growth__row{display:grid;grid-template-columns:64px 1fr auto;gap:1rem;align-items:center}
.rm-growth__yr{font-weight:700;font-size:.95rem;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rm-growth__track{height:38px;border-radius:var(--r-sm);background:var(--forest-050);overflow:hidden;position:relative}
.rm-growth__fill{height:100%;border-radius:var(--r-sm);background:var(--forest);width:0;
  transition:width 1.1s var(--ease)}
.rm-growth__row--now .rm-growth__fill{background:var(--red)}
.rm-growth__v{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 48;
  font-size:1.35rem;color:var(--forest);letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  min-width:80px;text-align:right}
.rm-growth__row--now .rm-growth__v{color:var(--red)}
.rm-sec--forest .rm-growth__yr{color:var(--on-dark-2)}
.rm-sec--forest .rm-growth__track{background:rgba(255,255,255,.14)}
.rm-sec--forest .rm-growth__fill{background:#fff}
.rm-sec--forest .rm-growth__v{color:#fff}

/* ================================================= 12. SPLIT RATIO (75/25) = */
.rm-ratio{display:flex;border-radius:var(--r);overflow:hidden;height:76px;box-shadow:var(--sh-sm)}
.rm-ratio__part{display:flex;flex-direction:column;justify-content:center;padding:0 1.3rem;
  color:#fff;transition:flex .9s var(--ease)}
.rm-ratio__part--a{background:var(--forest);flex:0 0 0%}
.rm-ratio__part--b{background:var(--red);flex:0 0 0%}
.rm-ratio.is-on .rm-ratio__part--a{flex:0 0 75%}
.rm-ratio.is-on .rm-ratio__part--b{flex:0 0 25%}
.rm-ratio__pct{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 60;
  font-size:1.5rem;line-height:1;letter-spacing:-.03em}
.rm-ratio__lbl{font-size:.7rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  opacity:.85;margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-ratio__key{display:flex;flex-wrap:wrap;gap:1.5rem;margin-top:1.3rem}
.rm-ratio__key > div{display:grid;grid-template-columns:auto 1fr;gap:.6rem;align-items:start;max-width:30ch}
/* The legend swatch. It used to be an <i> with an inline background, which
   Elementor Free has no control for - so on the WordPress side the two colour
   chips simply were not there. As a modifier class the swatch is CSS on both
   builds and the colours cannot drift apart. */
.rm-ratio__legend::before{content:"";width:12px;height:12px;border-radius:3px;
  margin-top:.4rem;background:var(--line-2)}
.rm-ratio__legend--a::before{background:var(--forest)}
.rm-ratio__legend--b::before{background:var(--red)}
.rm-ratio__key p{font-size:.92rem;margin:0}

/* ================================================== 13. FOUNDER LETTER ===== */
.rm-letter{display:grid;gap:clamp(2rem,5vw,4.5rem);grid-template-columns:1fr}
@media(min-width:960px){.rm-letter{grid-template-columns:.75fr 1.25fr;align-items:start}}
.rm-letter__aside{position:sticky;top:calc(var(--header-h) + 3rem)}
@media(max-width:959px){.rm-letter__aside{position:static}}
.rm-letter__portrait{border-radius:var(--r-lg);overflow:hidden;aspect-ratio:3/3.6;background:var(--forest-700)}
.rm-letter__portrait img{width:100%;height:100%;object-fit:cover}
.rm-letter__who{margin-top:1.5rem}
.rm-letter__who b{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 30;font-size:1.3rem;color:#fff;letter-spacing:-.02em}
.rm-letter__who span{display:block;font-size:.74rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest-400);margin-top:.45rem}
/* Opening quote mark sits BEHIND the heading — white, very low opacity. */
.rm-letter__head{position:relative}
/* The oversized quote mark is decoration — a pseudo-element rather than a span,
   so it is not an empty HTML widget in the Elementor panel. */
.rm-letter__head::before{
  content:"\201C";
  position:absolute;left:-.09em;top:-.2em;z-index:0;
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-size:clamp(8rem,5rem + 11vw,15rem);line-height:.62;
  color:#fff;opacity:.13;user-select:none;pointer-events:none;
}
.rm-letter__head h2{position:relative;z-index:1}
/* First paragraph set large — an editorial lede, not a wall of text */
.rm-letter__body p:first-of-type{
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 60;
  font-size:clamp(1.3rem,1.1rem + 1vw,1.85rem);line-height:1.32;letter-spacing:-.018em;
  color:#fff;max-width:26ch;margin-bottom:2rem;
}
.rm-letter__body p{max-width:58ch}
.rm-letter__sign{margin-top:2.2rem;padding-top:1.5rem;border-top:1px solid rgba(255,255,255,.2);
  font-size:.86rem;color:var(--on-dark-3)}

/* ================================================= 14. EDGE-TO-EDGE SCROLLER */
.rm-scroller{display:flex;gap:.8rem;overflow-x:auto;padding-inline:var(--gutter);
  scroll-snap-type:x mandatory;scrollbar-width:thin;padding-bottom:1rem}
.rm-scroller::-webkit-scrollbar{height:6px}
.rm-scroller::-webkit-scrollbar-thumb{background:var(--line-2);border-radius:var(--pill)}

/* --- The gallery's own navigation ------------------------------------------
   The native scrollbar was the only way to move through the photographs, and
   on Windows it is a grey system bar drawn the full width of the page directly
   under a run of full-bleed images — browser furniture sitting inside a
   designed page, in a style nothing else on the site shares. `scrollbar-width:
   thin` makes it thinner; it cannot make it belong.

   So rm.js adds a progress rail and a pair of round buttons, in the design's
   own materials, and marks the row `--nav`. The native bar is hidden ONLY on
   that class: if the script does not run, the scrollbar is still there and the
   gallery still works. Nothing is taken away before its replacement arrives.

   Touch, trackpad and shift-wheel scrolling are unaffected either way — this
   is for the mouse-only visitor, who otherwise had a system scrollbar or
   nothing. */
.rm-scroller--nav{scrollbar-width:none;-ms-overflow-style:none;padding-bottom:0}
.rm-scroller--nav::-webkit-scrollbar{display:none}

.rm-scrollnav{display:flex;align-items:center;gap:clamp(1rem,3vw,2rem);
  padding-inline:var(--gutter);margin-top:1.15rem}
.rm-scrollnav[hidden]{display:none}
/* The rail is the full width of the row it scrolls, so its filled part reads
   as "how much of the gallery you are looking at", not as decoration. */
.rm-scrollnav__rail{position:relative;flex:1;height:4px;border-radius:var(--pill);
  background:var(--line);cursor:pointer;touch-action:none}
.rm-scrollnav__rail::before{content:"";position:absolute;inset:-11px 0;}
.rm-scrollnav__bar{position:absolute;top:0;bottom:0;border-radius:var(--pill);
  background:var(--forest);min-width:28px}
.rm-scrollnav__btns{display:flex;gap:.5rem;flex:none}
.rm-scrollnav__btn{width:46px;height:46px;border-radius:50%;flex:none;
  border:1.5px solid var(--line-2);background:var(--surface);color:var(--forest);
  display:grid;place-items:center;cursor:pointer;padding:0;
  transition:background .25s var(--ease),color .25s var(--ease),
             border-color .25s var(--ease),opacity .25s var(--ease)}
.rm-scrollnav__btn:hover:not(:disabled){background:var(--forest);color:#fff;
  border-color:var(--forest)}
.rm-scrollnav__btn:disabled{opacity:.3;cursor:default}
.rm-scrollnav__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;
  stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
/* On the dark bands the same three parts, inverted. */
.rm-sec--forest .rm-scrollnav__rail,.rm-sec--deep .rm-scrollnav__rail{background:rgba(255,255,255,.22)}
.rm-sec--forest .rm-scrollnav__bar,.rm-sec--deep .rm-scrollnav__bar{background:#fff}
.rm-sec--forest .rm-scrollnav__btn,.rm-sec--deep .rm-scrollnav__btn{
  background:transparent;color:#fff;border-color:rgba(255,255,255,.35)}
.rm-sec--forest .rm-scrollnav__btn:hover:not(:disabled),
.rm-sec--deep .rm-scrollnav__btn:hover:not(:disabled){background:#fff;color:var(--forest);border-color:#fff}
/* The photograph you are looking at settles in the MIDDLE of the screen.

   It used to snap to the left edge (`start`), so the picture that had just
   arrived sat hard against the side of the screen with everything still to come
   filling the rest — you were always looking at the edge of the set rather than
   at a photograph. Centred, the current one is the thing in front of you and
   its neighbours peek in on both sides, which is also how it reads as something
   you can swipe.

   The two ends are the exception, and deliberately so: a browser cannot scroll
   past 0 or past the end, so the first and last photographs come to rest
   against their own edge rather than centred. Reserving enough padding to
   centre them would leave a gap the width of half the screen at each end of the
   row, which is far worse on a wide screen where three or four are visible at
   once. */
.rm-scroller__item{flex:0 0 clamp(240px,32vw,380px);aspect-ratio:4/5;border-radius:var(--r-lg);text-align:center;
  overflow:hidden;scroll-snap-align:center;background:var(--forest-050);border:none;padding:0;cursor:zoom-in}
.rm-scroller__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rm-scroller__item:hover img{transform:scale(1.05)}

/* Grid gallery (kept for pages that want it) */
.rm-gallery{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fill,minmax(190px,1fr))}
.rm-gallery__item{position:relative;aspect-ratio:1;overflow:hidden;border-radius:var(--r);
  background:var(--forest-050);border:none;padding:0;cursor:zoom-in;display:block}
.rm-gallery__item img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.rm-gallery__item:hover img{transform:scale(1.07)}
.rm-gallery__item--big{grid-column:span 2;grid-row:span 2}
@media(max-width:620px){.rm-gallery__item--big{grid-row:span 1}}

.rm-lightbox{position:fixed;inset:0;z-index:400;background:rgba(8,23,19,.96);
  display:none;align-items:center;justify-content:center;padding:clamp(1rem,4vw,3rem)}
.rm-lightbox.is-open{display:flex}
.rm-lightbox img{max-width:100%;max-height:86vh;border-radius:var(--r);object-fit:contain}
.rm-lightbox__btn{position:absolute;width:52px;height:52px;border-radius:50%;cursor:pointer;
  display:grid;place-items:center;background:rgba(255,255,255,.12);
  border:1.5px solid rgba(255,255,255,.28);color:#fff;font-size:1.4rem;transition:background .2s}
.rm-lightbox__btn:hover{background:rgba(255,255,255,.28)}
.rm-lightbox__close{top:1.3rem;right:1.3rem}
.rm-lightbox__prev{left:1.3rem;top:50%;translate:0 -50%}
.rm-lightbox__next{right:1.3rem;top:50%;translate:0 -50%}
.rm-lightbox__count{position:absolute;bottom:1.5rem;left:50%;translate:-50% 0;
  font-size:.82rem;font-weight:600;letter-spacing:.1em;color:var(--on-dark-2)}

/* ==================================================== 15. SMALL COMPONENTS = */
.rm-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rm-card:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rm-card p{font-size:.96rem;color:var(--ink-2);margin-bottom:0}
.rm-card--sand{background:var(--sand);border-color:transparent}
.rm-grid{display:grid;gap:clamp(1rem,2vw,1.5rem)}
.rm-grid--2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.rm-grid--3{grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}

.rm-quote{font-family:var(--f-display);font-weight:500;
  font-variation-settings:"SOFT" 60,"WONK" 1,"opsz" 72;
  font-size:clamp(1.4rem,1.1rem + 1.3vw,2.2rem);line-height:1.22;letter-spacing:-.025em;
  color:var(--forest);margin:0;max-width:24ch}
.rm-sec--forest .rm-quote,.rm-sec--deep .rm-quote{color:#fff}

.rm-quote-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.6rem,2.6vw,2.3rem);position:relative}
.rm-quote-card::before{content:"”";position:absolute;top:.2rem;right:1.4rem;font-family:var(--f-display);
  font-size:6rem;line-height:1;color:var(--forest-050)}
.rm-quote-card__label{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--red);display:block;margin-bottom:.7rem}
.rm-quote-card h3{margin-bottom:.9rem;position:relative}
.rm-quote-card p{position:relative;color:var(--ink-2);margin:0}
.rm-quote-card--sand{background:var(--sand);border-color:transparent}
.rm-quote-card--sand::before{color:rgba(18,47,42,.07)}

.rm-list{list-style:none;margin:0;padding:0;display:grid;gap:.75rem}
.rm-list li{display:grid;grid-template-columns:22px 1fr;gap:.75rem;align-items:start;color:var(--ink-2)}
.rm-list li::before{content:"";width:22px;height:22px;border-radius:50%;background:var(--forest-050);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23122F2A' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center;margin-top:.2rem}
.rm-sec--forest .rm-list li,.rm-sec--deep .rm-list li{color:var(--on-dark-2)}
.rm-sec--forest .rm-list li::before,.rm-sec--deep .rm-list li::before{background-color:rgba(255,255,255,.16);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m20 6-11 11-5-5'/%3E%3C/svg%3E")}

.rm-rows{display:grid}
.rm-row{display:grid;gap:.2rem 1.5rem;grid-template-columns:1fr;padding:1.1rem 0;border-bottom:1px solid var(--line)}
@media(min-width:640px){.rm-row{grid-template-columns:1fr auto;align-items:baseline}}
.rm-row:first-child{border-top:1px solid var(--line)}
.rm-row__k{font-weight:700;color:var(--forest)}
.rm-row__v{font-weight:600;color:var(--ink-2);font-variant-numeric:tabular-nums}
.rm-sec--forest .rm-row,.rm-sec--deep .rm-row{border-color:rgba(255,255,255,.2)}
.rm-sec--forest .rm-row__k,.rm-sec--deep .rm-row__k{color:#fff}
.rm-sec--forest .rm-row__v,.rm-sec--deep .rm-row__v{color:var(--on-dark-2)}

.rm-acc-wrap{display:grid;gap:.7rem}
.rm-acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
/* display is stated because the static build's header is a <button>, which is
   inline-block by default, and the WordPress one is a widget div, which is
   not. Nothing wrote the value down, so the two builds sat a line-box
   descender apart on every accordion row. */
.rm-acc__btn{display:inline-block;width:100%;background:none;border:none;text-align:left;cursor:pointer;
  padding:1.25rem 3.2rem 1.25rem 1.4rem;position:relative;font-weight:700;font-size:1.02rem;color:var(--forest)}
/* The question is plain text inside the button in the static build and a
   Heading widget's <h3> in WordPress. Without this the WordPress accordion
   set every question in h3 type - four pixels taller per row, eleven rows a
   page. Inert where there is no h3. */
.rm-acc__btn h3{font:inherit;letter-spacing:inherit;color:inherit;margin:0}
.rm-acc__btn:hover{color:var(--red)}
.rm-acc__btn::after,.rm-acc__btn::before{content:"";position:absolute;right:1.3rem;top:50%;
  width:12px;height:2px;background:currentColor;translate:0 -50%}
.rm-acc__btn::before{rotate:90deg;transition:rotate .3s var(--ease),opacity .3s}
.rm-acc__btn[aria-expanded="true"]::before{rotate:0deg;opacity:0}
.rm-acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .34s var(--ease)}
.rm-acc__panel[data-open="true"]{grid-template-rows:1fr}
.rm-acc__panel>div{overflow:hidden}
.rm-acc__panel>div>div{padding:0 1.4rem 1.35rem;color:var(--ink-2)}

.rm-video{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--forest-900);aspect-ratio:16/9}
.rm-video video{width:100%;height:100%;object-fit:cover}
.rm-video__play{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,23,19,.32);
  border:none;cursor:pointer;transition:background .25s,opacity .3s}
.rm-video__play:hover{background:rgba(8,23,19,.16)}
.rm-video.is-playing .rm-video__play{opacity:0;pointer-events:none}
.rm-video__ring{width:104px;height:104px;border-radius:50%;background:var(--red);color:#fff;
  display:grid;place-items:center;transition:transform .3s var(--ease)}
.rm-video__play:hover .rm-video__ring{transform:scale(1.08)}
.rm-video__ring svg{width:28px;height:28px;margin-left:5px}
.rm-video__label{position:absolute;inset:auto 0 1.4rem 0;text-align:center;color:#fff;
  font-size:.74rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;opacity:.85}

.rm-marquee{background:var(--forest);color:#fff;overflow:hidden;padding:1.1rem 0}
.rm-marquee__track{display:flex;width:max-content;animation:rmScroll 36s linear infinite}
.rm-marquee:hover .rm-marquee__track{animation-play-state:paused}
.rm-marquee__item{display:flex;align-items:center;gap:1.6rem;padding-inline:1.6rem;flex:none;
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 60;
  font-size:clamp(1.1rem,1rem + .55vw,1.5rem);letter-spacing:-.02em;white-space:nowrap}
.rm-marquee__item::after{content:"";width:7px;height:7px;border-radius:50%;background:var(--forest-400);flex:none}
@keyframes rmScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.rm-bank{background:var(--sand);border-radius:var(--r-lg);padding:1.7rem 1.8rem}
.rm-bank__row{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;justify-content:space-between;
  padding:.85rem 0;border-bottom:1px dashed var(--sand-2)}
.rm-bank__row:last-child{border-bottom:none;padding-bottom:0}
.rm-bank__k{font-size:.74rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.rm-bank__v{font-weight:700;color:var(--forest);word-break:break-all}
.rm-copy{display:inline-flex;align-items:center;gap:.4rem;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--pill);cursor:pointer;font-size:.75rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--forest);padding:.42rem .85rem;
  transition:background .2s,color .2s,border-color .2s}
.rm-copy:hover{background:var(--forest);color:#fff;border-color:var(--forest)}
.rm-copy.is-done{background:var(--forest-050);border-color:var(--forest);color:var(--forest)}

.rm-cta{background:var(--forest);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.rm-cta::after{content:"";position:absolute;right:-10%;top:-55%;width:60%;aspect-ratio:1;z-index:-1;
  background:radial-gradient(circle,rgba(225,27,27,.3),transparent 68%)}
.rm-cta__inner{padding-block:clamp(3.4rem,7vw,5.5rem);display:grid;gap:2.2rem;align-items:center;grid-template-columns:1fr}
@media(min-width:940px){.rm-cta__inner{grid-template-columns:1.6fr auto}}
.rm-cta h2{color:#fff;max-width:18ch;margin-bottom:.8rem}
.rm-cta p{color:var(--on-dark-2);max-width:52ch;margin:0}

/* Stacked layout: the whole band centres.

   Side by side, the words sit left and the buttons sit right of them, and each
   half is anchored to its own edge. Once it stacks there is no right-hand side
   to be anchored to, and buttons left in place read as the leftovers of a
   layout that is no longer there — two pills of different widths ragged against
   the left edge under a heading. Centred, the band reads as one closing
   statement, which is what it is.

   The text centres with them. Centred buttons under left-aligned words is the
   half-measure that looks like a mistake rather than a decision. */
/* Stacked, the buttons are one column, and every button is as wide as the
   widest label.

   Side by side each pill is its own width, which is right when they sit in a
   row. Stacked one above the other, two different widths centred on each other
   read as a mistake — nothing lines up, on either edge. A single `auto` column
   is exactly the tool for this: the column takes the width of the widest
   button, the rest stretch to fill it, and `justify-content:center` centres the
   pair as a block. No fixed width to guess at, and it re-measures itself if a
   label is ever reworded. */
.rm-cta .rm-btnrow{margin:0;display:grid;grid-template-columns:minmax(0,auto);
  justify-content:center}
.rm-cta__inner{text-align:center;justify-items:center}
.rm-cta h2,.rm-cta p{margin-inline:auto}
@media(min-width:940px){
  .rm-cta__inner{text-align:left;justify-items:stretch}
  .rm-cta h2,.rm-cta p{margin-inline:0}
  .rm-cta .rm-btnrow{display:flex;justify-content:flex-start}
}

/* The primary button on this band was invisible.

   Where the closing call has no donation button — Our Team, Contact Us, Become
   a Volunteer, Partner With Us — the first button is given the solid forest
   treatment. This band's background is also forest: measured, both were
   rgb(18,47,42) exactly. The button was there, it was clickable, and all anyone
   could see was white text floating on green with no shape around it. On the
   four pages where it is the main thing to press.

   On a dark band the solid button is white. `.rm-btn--forest` is correct
   everywhere else it is used — the contact panels, on white — so this is scoped
   to the band that collides with it rather than changing the variant. */
.rm-cta .rm-btn--forest{background:#fff;color:var(--forest);border-color:#fff}
.rm-cta .rm-btn--forest:hover{background:var(--paper);color:var(--forest);border-color:var(--paper)}

/* ---------------------------------------------------------------- 16. FORMS */
.rm-form,.wpcf7-form{display:grid;gap:1.15rem}
.rm-label,.wpcf7-form label{font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}
.rm-input,.rm-select,.rm-textarea,
.wpcf7-form input[type=text],.wpcf7-form input[type=email],.wpcf7-form input[type=tel],
.wpcf7-form input[type=number],.wpcf7-form select,.wpcf7-form textarea{
  width:100%;font-family:var(--f-sans);font-size:1rem;color:var(--ink);background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:var(--r-sm);padding:.85rem 1.05rem;
  transition:border-color .2s,box-shadow .2s}
.rm-input:focus,.wpcf7-form input:focus,.wpcf7-form select:focus,.wpcf7-form textarea:focus{
  outline:none;border-color:var(--forest);box-shadow:0 0 0 4px var(--forest-050)}
.rm-textarea,.wpcf7-form textarea{resize:vertical;min-height:130px}
.wpcf7-form input[type=submit]{display:inline-flex;font-weight:700;font-size:.94rem;padding:.95rem 1.9rem;
  border:1.5px solid var(--forest);border-radius:var(--pill);background:var(--forest);color:#fff;cursor:pointer}
.wpcf7-form input[type=submit]:hover{background:var(--forest-700)}
.wpcf7-not-valid-tip{color:var(--red);font-size:.85rem;font-weight:600}
.wpcf7-response-output{border:1.5px solid var(--line-2)!important;border-radius:var(--r-sm)!important;
  padding:.9rem 1.1rem!important;margin:.4rem 0 0!important}

/* --------------------------------------------------------------- 17. FOOTER */
.rm-footer{background:var(--forest-900);color:var(--on-dark-2);padding-top:clamp(3.5rem,7vw,5rem)}
.rm-footer__top{display:grid;gap:2.6rem;grid-template-columns:1fr;padding-bottom:3rem}
@media(min-width:720px){.rm-footer__top{grid-template-columns:1.6fr 1fr 1.1fr}}
@media(min-width:1060px){.rm-footer__top{grid-template-columns:1.8fr 1fr 1fr 1.1fr}}
.rm-footer h4{font-size:.76rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--on-dark-3);margin:0 0 1.2rem}
.rm-footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.65rem}
.rm-footer a{color:var(--on-dark-2);text-decoration:none;font-size:.96rem;transition:color .18s}
.rm-footer a:hover{color:#fff}
.rm-footer .rm-logo{margin-bottom:1.3rem}
.rm-footer .rm-logo img{height:60px}
.rm-footer__promise{font-size:1rem;max-width:32ch;margin-bottom:1.6rem}
.rm-social{display:flex;gap:.55rem}
.rm-social a{width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);
  display:grid;place-items:center;color:var(--on-dark-2);
  transition:background .2s,color .2s,border-color .2s,transform .2s var(--ease)}
.rm-social a:hover{background:#fff;color:var(--forest);border-color:#fff;transform:translateY(-2px)}
.rm-social svg{width:17px;height:17px}
.rm-footer__line{display:grid;gap:.3rem;margin-bottom:1.2rem}
.rm-footer__line span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--on-dark-3)}
.rm-footer__line a,.rm-footer__line p{color:#fff;font-size:1rem;margin:0}
.rm-footer__bottom{border-top:1px solid rgba(255,255,255,.14);padding-block:1.6rem;
  display:flex;flex-wrap:wrap;gap:.7rem 1.5rem;justify-content:space-between;align-items:center;
  font-size:.85rem;color:var(--on-dark-3)}

/* ------------------------------------------------------------- 18. DONATION */
.rm-overlay{display:none;position:fixed;inset:0;z-index:300;background:rgba(8,23,19,.8);
  backdrop-filter:blur(4px);padding:clamp(.75rem,3vw,2rem);overflow-y:auto}
.rm-overlay.rm-open{display:flex;align-items:flex-start;justify-content:center}
.rm-modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:640px;margin:auto;
  position:relative;box-shadow:var(--sh-lg);animation:rmIn .34s var(--ease);overflow:hidden}
@keyframes rmIn{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}
.rm-modal__head{background:var(--forest);color:#fff;padding:1.7rem 1.9rem 1.5rem;position:relative}
.rm-modal__body{padding:1.7rem 1.9rem 2rem}
@media(max-width:600px){.rm-modal__head{padding:1.3rem 1.2rem 1.2rem}.rm-modal__body{padding:1.3rem 1.2rem 1.6rem}}
.rm-modal__tag{font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--forest-400);margin-bottom:.55rem;display:block}
.rm-modal h2{color:#fff;font-size:clamp(1.4rem,1.2rem + .7vw,1.85rem);margin:0}
.rm-modal-close{position:absolute;top:1.1rem;right:1.1rem;width:38px;height:38px;border-radius:50%;
  background:rgba(255,255,255,.14);border:1.5px solid rgba(255,255,255,.26);color:#fff;
  font-size:1.3rem;cursor:pointer;display:grid;place-items:center}
.rm-modal-close:hover{background:rgba(255,255,255,.3)}

/* Phones: the close button stays on screen.

   The donation form is 1728px tall in a 759px phone window — the card is more
   than twice the height of the screen. The close button is pinned to the top of
   the CARD, so it scrolled away with it: from the phone-number field downwards
   there was no way out at all. No keyboard, so no Escape; and the backdrop you
   are meant to tap is a 15px strip down either side of the card.

   So on small screens it is fixed to the screen instead — dark enough to read
   against the white form body rather than only against the green header, and
   44px rather than 38px, which is the smallest a thumb hits reliably.

   The entry animation loses its transform here and fades instead. A transform
   on the card makes the card the containing block for a fixed child, so the
   button would have travelled with the card for 0.34s and then jumped to the
   screen corner the moment the animation ended.

   Only on small screens: above this width the card is a centred panel with
   clear space around it, and a button pinned to the corner of the screen would
   float away from the thing it closes. There, Escape and a large backdrop do
   the job. (The card scrolls at every size — 348px of overflow even on a
   1440×1200 desktop — so the button leaves the screen there too; it is just
   not a trap, because both other ways out work with a mouse and keyboard.) */
@keyframes rmInFade{from{opacity:0}to{opacity:1}}
@media(max-width:600px){
  /* `position:fixed` is not always fixed. An ancestor with a transform, a
     filter or a BACKDROP-FILTER becomes the containing block for fixed
     descendants — and the overlay carries `backdrop-filter:blur(4px)`. The
     overlay is also the thing that scrolls, so the button went on scrolling
     away exactly as before, just with `position: fixed` in the inspector
     saying otherwise. Measured: top −1278px once the form was scrolled to the
     bottom.

     The blur is dropped here, so the button is fixed to the screen for real.
     Almost nothing is lost: the overlay is already 80% opaque dark, and on a
     phone the card covers most of the screen, so there is very little visible
     background left to blur. */
  .rm-overlay{backdrop-filter:none;-webkit-backdrop-filter:none}
  .rm-modal{animation-name:rmInFade}
  .rm-modal-close{position:fixed;top:.8rem;right:.8rem;width:44px;height:44px;
    z-index:5;background:var(--forest);border-color:rgba(255,255,255,.45);
    box-shadow:0 8px 22px rgba(8,23,19,.55)}
}
.rm-modal-back{background:none;border:none;cursor:pointer;padding:0;margin-bottom:.9rem;
  display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--forest-400)}
.rm-modal-back:hover{color:#fff}
/* The form step's header, re-weighted.
   "Complete Your Donation" is identical on every donation; the programme is the
   only line that changes, and it is what the donor is checking before they pay.
   So the fixed line steps down to a supporting size and the programme becomes
   the headline. .rm-modal h2 keeps the display face for the picker step, where
   "Choose Where to Give" IS the headline — only the form step is modified. */
/* Written as `.rm-modal h2.rm-modal__h--sub`, not as the bare class. The
   hardened mirror repeats `.rm-modal h2` four times over, which lands at
   (0,4,1); a lone class mirrors to (0,4,0) and loses on the trailing element
   selector, so the heading stayed at its full display size. Naming the element
   here puts this rule above it whatever the load order turns out to be. */
.rm-modal h2.rm-modal__h--sub{font-family:var(--f-sans);font-size:.95rem;font-weight:600;
  letter-spacing:0;color:var(--on-dark-2);margin:0}
.rm-modal-program{margin-top:.45rem}
.rm-modal-program__k{display:block;font-size:.66rem;font-weight:700;letter-spacing:.16em;
  text-transform:uppercase;color:var(--forest-400);margin-bottom:.2rem}
.rm-modal-program strong{display:block;color:#fff;font-family:var(--f-display);font-weight:600;
  font-size:clamp(1.45rem,1.2rem + .9vw,1.95rem);line-height:1.15}
.rm-program-grid{display:grid;grid-template-columns:1fr 1fr;gap:.6rem}
@media(max-width:560px){.rm-program-grid{grid-template-columns:1fr}}
.rm-program-btn{display:flex;align-items:center;gap:.6rem;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-sm);padding:.9rem 1rem;
  font-weight:700;font-size:.92rem;color:var(--forest);
  transition:border-color .2s,background .2s,transform .2s var(--ease)}
.rm-program-btn:hover{border-color:var(--forest);background:var(--forest-050);transform:translateY(-2px)}
.rm-program-btn.rm-featured{grid-column:1/-1;background:var(--forest);border-color:var(--forest);
  color:#fff;justify-content:center}
.rm-field-group{margin-bottom:1.3rem}
.rm-field-group>label{display:block;font-size:.74rem;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--ink-2);margin-bottom:.6rem}
.rm-pills,.rm-amounts{display:grid;gap:.5rem;grid-template-columns:repeat(3,1fr)}
@media(max-width:520px){.rm-pills,.rm-amounts{grid-template-columns:repeat(2,1fr)}}
.rm-pills label,.rm-amounts label{position:relative;margin:0;display:block}
.rm-pills input,.rm-amounts input{position:absolute;opacity:0;width:0;height:0}
.rm-pills span,.rm-amounts span{display:block;text-align:center;cursor:pointer;font-weight:700;font-size:.9rem;
  color:var(--forest);background:var(--surface);border:1.5px solid var(--line);border-radius:var(--pill);
  padding:.62rem .4rem;transition:background .16s,border-color .16s,color .16s;font-variant-numeric:tabular-nums}
.rm-pills input:checked+span,.rm-amounts input:checked+span{background:var(--forest);border-color:var(--forest);color:#fff}
.rm-pills input:focus-visible+span,.rm-amounts input:focus-visible+span,
.rm-toggle input:focus-visible+.rm-toggle-opt{outline:3px solid var(--forest-400);outline-offset:2px}
.rm-toggle{display:flex;border:1.5px solid var(--line);border-radius:var(--pill);overflow:hidden}
.rm-toggle label{flex:1;position:relative;margin:0}
.rm-toggle input{position:absolute;opacity:0;width:0;height:0}
.rm-toggle-opt{display:block;text-align:center;padding:.7rem;cursor:pointer;font-weight:700;font-size:.9rem;
  color:var(--forest);background:var(--surface)}
.rm-toggle input:checked+.rm-toggle-opt{background:var(--forest);color:#fff}
.rm-checkbox{display:grid!important;grid-template-columns:auto 1fr;gap:.65rem;align-items:start;
  font-size:.94rem!important;color:var(--ink-2)!important;text-transform:none!important;
  letter-spacing:0!important;font-weight:400!important}
.rm-checkbox input{margin-top:.25rem;width:17px;height:17px;accent-color:var(--red)}
.rm-required{color:var(--red)}
.rm-submit{width:100%}
/* Red, not green: this note is the one thing on the form that changes what
   happens to the donor's money, so it should read as a flag rather than as
   another quiet green panel.
   The text is --red-dark rather than --red. At this size (.88rem) --red on the
   red tint measures 4.20:1, under the 4.5:1 floor for body text; --red-dark
   reaches 5.84:1 and still reads unmistakably as the theme's red. The shield
   icon inherits it. */
.rm-zakat-note{display:none;gap:.65rem;align-items:flex-start;margin-top:.75rem;background:var(--red-050);
  border:1px solid var(--red-100);border-radius:var(--r-sm);padding:.8rem .95rem;
  font-size:.88rem;color:var(--red-dark);line-height:1.55}
.rm-zakat-note strong{color:var(--red-dark)}
.rm-zakat-note.is-shown{display:flex}
.rm-zakat-note svg{width:17px;height:17px;flex:none;margin-top:.15rem}
.rm-form-message{font-size:.94rem;padding:.9rem 1.1rem;border-radius:var(--r-sm);margin-bottom:1.2rem}
.rm-form-message.rm-success{background:var(--forest-050);color:var(--forest);border:1.5px solid var(--forest-100)}
.rm-form-message.rm-error{background:var(--red-050);color:var(--red-dark);border:1.5px solid #F3C4C4}
.rm-bank-note{background:var(--sand);border-radius:var(--r);padding:1.2rem 1.4rem;margin-top:1.5rem;
  font-size:.92rem;color:var(--ink-2);line-height:1.7}
.rm-bank-note strong{color:var(--forest);display:block;margin-bottom:.6rem}
.rm-bank-note__row{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:.45rem}
.rm-bank-note code{font-family:var(--f-sans);font-size:.9rem;font-weight:700;color:var(--forest);
  background:var(--surface);border-radius:var(--r-sm);padding:.2rem .55rem}
/* Optional sentence under the rows, and the last thing inside the panel.
   WordPress only — Donations → Settings → Bank transfer has a free-text note
   field, left empty by default so the approved design renders unchanged. It
   carries its own top margin rather than borrowing the row gap. */
.rm-bank-note__note{margin:.7rem 0 0}
/* Full width, and the same size as the form's own submit button above it.
   It sits OUTSIDE the sand panel, as its sibling: the panel is the reference
   card (the account to pay into) and this is the action taken afterwards, so
   it spans the full width of the form rather than being inset by the panel's
   padding. On the bank-transfer route this IS the action — the donor transfers
   the money at their bank and sends the receipt here — so it should not look
   like an afterthought tacked under the account number. Matches .rm-btn--lg's
   padding and type size so the two read as one pair whether or not the submit
   button is being shown. The gap above it is deliberately smaller than the gap
   above the panel, so the panel and the button still read as one step. */
.rm-whatsapp{display:flex;width:100%;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;background:#25D366;color:#04361A;border:none;border-radius:var(--pill);
  font-family:var(--f-sans);font-weight:700;font-size:1rem;line-height:1.2;
  padding:1.08rem 1.6rem;text-decoration:none;text-align:center;
  transition:filter .2s,transform .2s var(--ease)}
.rm-whatsapp:hover{filter:brightness(.94);color:#04361A}
.rm-whatsapp:active{transform:translateY(1px)}
.rm-whatsapp svg{width:20px;height:20px;flex:none}

/* ======================================================= 18b. TEAM GRID ====
   Our Team. Portrait tiles; the role slides up over the photo on hover.
   Elementor: Image Box widget per member inside a 3/4-column container. */
.rm-team{display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.rm-team__card{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--forest-900);
  isolation:isolate}
.rm-team__card::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(to top,rgba(8,23,19,.94) 6%,rgba(8,23,19,.45) 42%,rgba(8,23,19,0) 72%)}
.rm-team__card img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:top center;display:block;
  transition:transform .65s var(--ease),filter .45s var(--ease);filter:saturate(.92)}
.rm-team__card:hover img{transform:scale(1.06);filter:saturate(1)}
.rm-team__body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:1.3rem 1.25rem 1.35rem}
.rm-team__n{display:block;font-size:.7rem;font-weight:800;letter-spacing:.14em;color:var(--forest-400);
  margin-bottom:.55rem}
.rm-team__name{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:1.22rem;line-height:1.15;color:#fff;letter-spacing:-.02em}
.rm-team__role{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  color:var(--on-dark-2);margin-top:.4rem;
  max-height:0;opacity:0;overflow:hidden;
  transition:max-height .4s var(--ease),opacity .35s var(--ease),margin-top .4s var(--ease)}
.rm-team__card:hover .rm-team__role,.rm-team__card:focus-within .rm-team__role{max-height:4rem;opacity:1}
.rm-team__body::after{content:"";display:block;width:26px;height:3px;background:var(--red);border-radius:2px;margin-top:.75rem;
  transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.rm-team__card:hover .rm-team__body::after{transform:scaleX(1)}
@media(hover:none){
  .rm-team__role{max-height:4rem;opacity:1}
  .rm-team__body::after{transform:scaleX(1)}
}

/* ========================================================= 18c. TIER LIST ==
   Donation tiers / sponsorship levels read as a ledger, not as cards: amount,
   name, what it covers. A red rule grows down the left edge on hover.
   Elementor: Text Editor rows inside a container (or an Icon List). */
.rm-tiers{border-top:1px solid var(--line)}
.rm-tiers__row{display:grid;gap:.4rem 1.6rem;padding:clamp(1.15rem,2.2vw,1.7rem) 0 clamp(1.15rem,2.2vw,1.7rem) 1.4rem;
  border-bottom:1px solid var(--line);position:relative;transition:padding-left .35s var(--ease)}
.rm-tiers__row::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:3px;border-radius:3px;
  background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .45s var(--ease)}
.rm-tiers__row:hover::before{transform:scaleY(1)}
.rm-tiers__row:hover{padding-left:1.9rem}
.rm-tiers__amt{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:clamp(1.5rem,1.2rem + 1vw,2.05rem);line-height:1;color:var(--forest);letter-spacing:-.035em;
  font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-tiers__name{font-weight:800;font-size:1.02rem;color:var(--ink);letter-spacing:-.01em}
.rm-tiers__cov{font-size:.74rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--forest-600);margin-top:.15rem}
.rm-tiers__txt{font-size:.95rem;color:var(--ink-2);line-height:1.75;margin:0}
@media(min-width:860px){
  .rm-tiers__row{grid-template-columns:minmax(150px,auto) minmax(180px,1fr) 1.5fr;align-items:start}
}
.rm-sec--forest .rm-tiers,.rm-sec--deep .rm-tiers{border-color:rgba(255,255,255,.16)}
.rm-sec--forest .rm-tiers__row,.rm-sec--deep .rm-tiers__row{border-color:rgba(255,255,255,.16)}
.rm-sec--forest .rm-tiers__amt,.rm-sec--deep .rm-tiers__amt{color:#fff}
.rm-sec--forest .rm-tiers__name,.rm-sec--deep .rm-tiers__name{color:#fff}
.rm-sec--forest .rm-tiers__cov,.rm-sec--deep .rm-tiers__cov{color:var(--forest-400)}
.rm-sec--forest .rm-tiers__txt,.rm-sec--deep .rm-tiers__txt{color:var(--on-dark-2)}

/* ================================================ 18d. YES / NO (retired) ==
   Superseded by the v3.5 block in section 21 — the client asked for this
   section to be redesigned. The old rules are gone so they cannot fight the
   new ones; the anchor stays so ELEMENTOR-MAPPING.md still lines up.
   ========================================================================= */

/* ========================================================== 18e. COUPON ====
   Ramadan's Rs 300 bag and the Wasl-e-Rehmat plate are literally coupons on
   the client's page, so they are drawn as tickets — notched edge, dashed tear
   line, contents listed on the stub.
   Elementor: one HTML widget, or an Image Box + Icon List inside a container. */
  border-radius:var(--r-lg);overflow:hidden;display:grid}
  color:var(--ink-3);margin-bottom:1rem;display:block}
  font-variation-settings:"SOFT" 55,"WONK" 1,"opsz" 96;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);line-height:1.08;letter-spacing:-.035em;color:var(--forest);
  margin:0 0 .35rem}
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 144;
  font-size:clamp(2.6rem,1.6rem + 3.4vw,4.2rem);line-height:.95;letter-spacing:-.05em;color:var(--red);
  display:block;margin:.6rem 0 .1rem;font-variant-numeric:tabular-nums}
  color:var(--ink-3)}
  border-left:2px dashed rgba(18,47,42,.22)}
  color:var(--forest-600);margin:0 0 1rem}
  color:var(--forest)}
  font-size:.66rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;
  border:1.5px solid var(--forest-400);color:var(--forest-600);border-radius:var(--pill);
  padding:.34rem .8rem;rotate:-4deg}
/* notches, so it reads as a torn ticket */
  background:var(--paper);z-index:2;display:none}
@media(min-width:760px){
}

/* =========================================================== 18f. TABLE ====
   Year-on-year table (Ramadan). Elementor: Text Editor widget — it keeps
   <table> markup, so staff edit it in the visual editor. */
.rm-table{width:100%;border-collapse:collapse;font-size:.98rem}
/* Container form of the same table — Elementor has no table widget, so on
   WordPress the rows are containers and the cells are Text Editors. rm.js puts
   the table/row/cell roles back so it is still announced as a table. */
div.rm-table{display:table}
.rm-table__row{display:table-row}
.rm-table__th,.rm-table__td{display:table-cell;vertical-align:top}
.rm-table th,.rm-table__th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3);padding:0 1rem .9rem 0;border-bottom:1.5px solid var(--line-2)}
.rm-table td,.rm-table__td{padding:1.05rem 1rem 1.05rem 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.rm-table td:first-child,.rm-table__td:first-child{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:1.35rem;color:var(--forest);letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.rm-table tr:last-child td,.rm-table__row:last-child .rm-table__td{border-bottom:none}
.rm-table tr.is-now td,.rm-table__row.is-now .rm-table__td{color:var(--ink)}
.rm-table tr.is-now td:first-child,.rm-table__row.is-now .rm-table__td:first-child{color:var(--red)}
.rm-table tr.is-now td:nth-child(2),.rm-table__row.is-now .rm-table__td:nth-child(2){font-weight:800}
.rm-tablewrap{overflow-x:auto}

/* ========================================================= 18g. MOMENTS ====
   The client's own "moments" captions, each with the emoji they wrote.
   Elementor: Icon List, or Text Editor rows. */
.rm-moments{display:grid;gap:.7rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.rm-moment{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1.1rem 1.2rem;
  transition:border-color .3s var(--ease),transform .3s var(--ease)}
.rm-moment:hover{border-color:var(--forest-200);transform:translateY(-3px)}
.rm-moment b{flex:none;font-size:1.4rem;line-height:1.2}
.rm-moment span{font-size:.94rem;color:var(--ink-2);line-height:1.6}
.rm-sec--forest .rm-moment,.rm-sec--deep .rm-moment{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14)}
.rm-sec--forest .rm-moment span,.rm-sec--deep .rm-moment span{color:var(--on-dark-2)}

/* ======================================================== 18h. FEATURES ====
   Numbered feature cards with a hover rule (ambulance, volunteer, partner).
   Elementor: Icon Box widgets inside a container. */
.rm-num{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(265px,1fr))}
.rm-num__card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);position:relative;overflow:hidden;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease)}
.rm-num__card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--forest-100)}
.rm-num__card::before{content:"";position:absolute;left:0;top:0;height:3px;width:100%;background:var(--red);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.rm-num__card:hover::before{transform:scaleX(1)}
.rm-num__n{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:2.1rem;line-height:1;color:var(--forest-200);letter-spacing:-.04em;margin-bottom:.9rem;
  transition:color .35s var(--ease)}
.rm-num__card:hover .rm-num__n{color:var(--red)}
.rm-num__card h3{font-size:1.1rem;margin-bottom:.6rem;letter-spacing:-.015em}
.rm-num__card p{font-size:.95rem;color:var(--ink-2);line-height:1.75;margin:0}
.rm-sec--forest .rm-num__card,.rm-sec--deep .rm-num__card{background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14)}
.rm-sec--forest .rm-num__card h3,.rm-sec--deep .rm-num__card h3{color:#fff}
.rm-sec--forest .rm-num__card p,.rm-sec--deep .rm-num__card p{color:var(--on-dark-2)}
.rm-sec--forest .rm-num__n,.rm-sec--deep .rm-num__n{color:var(--forest-600)}

/* ======================================================== 18i. HELPLINE ====
   Ambulance: the number is the point of the page, so it gets its own band.
   Elementor: Heading + Button inside a container with a background. */
.rm-help{display:grid;gap:1.4rem;align-items:center;background:var(--red);color:#fff;
  border-radius:var(--r-lg);padding:clamp(1.7rem,3vw,2.6rem)}
@media(min-width:860px){.rm-help{grid-template-columns:1.5fr auto}}
.rm-help h3{color:#fff;font-size:clamp(1.4rem,1.1rem + 1vw,1.95rem);margin-bottom:.5rem}
.rm-help p{color:rgba(255,255,255,.88);font-size:.98rem;margin:0;max-width:52ch;line-height:1.7}
.rm-help__btn{display:inline-flex;align-items:center;gap:.6rem;background:#fff;color:var(--red);
  border-radius:var(--pill);font-weight:800;font-size:1.05rem;padding:.95rem 1.7rem;text-decoration:none;
  white-space:nowrap;transition:transform .25s var(--ease)}
.rm-help__btn:hover{transform:translateY(-2px);color:var(--red)}
.rm-help__btn svg{width:19px;height:19px}
.rm-help__pulse{position:relative}
.rm-help__pulse::after{content:"";position:absolute;inset:-6px;border-radius:var(--pill);
  border:2px solid rgba(255,255,255,.55);animation:rmPulse 2.4s var(--ease) infinite;pointer-events:none}
@keyframes rmPulse{0%{opacity:.8;transform:scale(.96)}70%{opacity:0;transform:scale(1.09)}100%{opacity:0}}

/* ========================================================= 18j. CONTACT ====
   Contact boxes + map. Elementor: Icon Box widgets + Google Maps widget. */
.rm-boxes{display:grid;gap:clamp(.9rem,1.8vw,1.4rem);
  grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}
.rm-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.5rem,2.4vw,2rem);transition:transform .3s var(--ease),box-shadow .3s var(--ease)}
.rm-box:hover{transform:translateY(-4px);box-shadow:var(--sh)}
.rm-box__ico{width:46px;height:46px;border-radius:50%;background:var(--forest-050);color:var(--forest);
  display:grid;place-items:center;margin-bottom:1.1rem;transition:background .3s var(--ease),color .3s var(--ease)}
.rm-box:hover .rm-box__ico{background:var(--red);color:#fff}
.rm-box__ico svg{width:21px;height:21px}
.rm-box h3{font-size:1.05rem;margin-bottom:.45rem;letter-spacing:-.01em;word-break:break-word}
.rm-box p,.rm-box a{font-size:.95rem;color:var(--ink-2);line-height:1.7;margin:0;text-decoration:none;
  word-break:break-word}
.rm-box a:hover{color:var(--red)}
.rm-map{border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line);background:var(--forest-050);
  min-height:340px;position:relative}
.rm-map iframe{width:100%;height:100%;min-height:340px;border:0;display:block}
.rm-formcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(1.6rem,3vw,2.6rem)}

/* ========================================================== 18k. PULLOUT ====
   A single sentence the client wrote, given a band of its own (vision lines,
   closing quotes). Elementor: Heading widget on a coloured container. */
.rm-pull{max-width:22ch}
.rm-pullband{text-align:center}
.rm-pullband .rm-quote{margin-inline:auto;max-width:24ch}
.rm-pullband cite{display:block;font-style:normal;font-size:.74rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest-400);margin-top:1.4rem}
.rm-notice{display:inline-flex;align-items:flex-start;gap:.7rem;background:var(--sand);
  border-left:3px solid var(--red);border-radius:var(--r-sm);padding:.95rem 1.3rem;font-size:.95rem;
  font-weight:600;color:var(--forest);line-height:1.6;margin-top:1.6rem}

/* ------------------------------------------------------ 19. FALLBACK/REVEAL */
.rm-imgfail{position:relative;background:linear-gradient(135deg,var(--forest-700),var(--forest-900));
  border-radius:var(--r-lg);display:grid;place-items:center;overflow:hidden;min-height:180px}
.rm-imgfail__note{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;
  color:var(--on-dark-3);padding:1rem 1.4rem;text-align:center;max-width:26ch;line-height:1.7}
.rm-slide__media.rm-imgfail,.rm-phero__media.rm-imgfail{border-radius:0}
.rm-slide__media.rm-imgfail .rm-imgfail__note,.rm-phero__media.rm-imgfail .rm-imgfail__note{display:none}

.rm-rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rm-rv.is-in{opacity:1;transform:none}
.rm-rv:nth-child(2){transition-delay:.07s}
.rm-rv:nth-child(3){transition-delay:.14s}
.rm-rv:nth-child(4){transition-delay:.21s}
.rm-rv:nth-child(5){transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important}
  .rm-rv{opacity:1;transform:none}
  .rm-marquee__track{animation:none}
  .rm-ratio__part--a{flex:0 0 75%}
  .rm-ratio__part--b{flex:0 0 25%}
}
@media print{.rm-header,.rm-drawer,.rm-overlay,.rm-cta,.rm-marquee{display:none!important}}

/* ------------------------------------------------- 20. v3.4 CORRECTIONS */
/* CF7 prints an empty response box until the form is submitted, and this hides
   it until there is something in it.

   IT USED TO ALSO MATCH [aria-hidden="true"], AND THAT WAS A BUG (found live,
   17 Sep): after a successful send the form showed no confirmation at all. The
   message was written into the box correctly and the box stayed invisible.

   Contact Form 7 marks that box aria-hidden="true" in the markup and never
   changes it — the announcement to screen readers is made elsewhere, and
   sighted visitors are meant to see the box because the FORM gains a class
   (sent, invalid) that its own stylesheet keys off. So the attribute is not a
   signal about visibility at all, and treating it as one hid the confirmation
   permanently, for everyone, on all three forms.

   `:empty` alone is the right test and is version-proof: CF7 puts text in the
   box at the moment it should appear, so the box stops being empty exactly
   then. */
.wpcf7-response-output:empty{display:none!important}
/* The coupon keeps its own light card even on a dark band. */
/* Numbered cards on a dark band need a lighter numeral. */
.rm-sec--forest .rm-num__n,.rm-sec--deep .rm-num__n{color:var(--forest-400)}
/* Contact: the map fills the column beside the form. */
.rm-sticky-col{display:flex;flex-direction:column;gap:1.2rem}
.rm-sticky-col .rm-map{flex:1 1 auto}
@media(min-width:900px){.rm-sticky-col{position:sticky;top:calc(var(--bar-h) + 1.4rem)}}
/* Coupon price and its rate sit on one line. */

/* ============================================== 21. v3.5 — NEW / REWORKED */

/* --- Scroll colour transition on the big sticky figures -----------------
   The figure starts red and travels to the primary green as the beats beside
   it scroll past. rm.js sets --t (0 → 1); the colour-mix does the rest, and
   the fallback colour below is what shows if JS never runs. */
.rm-story__figure b[data-rm-tint]{
  color:var(--red);
  transition:color .18s linear;
}
@supports (color:color-mix(in oklab,red,blue)){
  .rm-story__figure b[data-rm-tint]{
    color:color-mix(in oklab,var(--forest) calc(var(--t,0) * 100%),var(--red));
  }
  .rm-sec--forest .rm-story__figure b[data-rm-tint],
  .rm-sec--deep .rm-story__figure b[data-rm-tint]{
    /* on a dark band the destination is the light green, not the near-black */
    color:color-mix(in oklab,var(--forest-200) calc(var(--t,0) * 100%),var(--red));
  }
}
@media (prefers-reduced-motion:reduce){
  .rm-story__figure b[data-rm-tint]{color:var(--forest)!important;transition:none}
  .rm-sec--forest .rm-story__figure b[data-rm-tint],
  .rm-sec--deep .rm-story__figure b[data-rm-tint]{color:var(--forest-200)!important}
}

/* --- Tier ledger: name and coverage stack, never run inline ------------- */
.rm-tiers__name{display:block}
.rm-tiers__cov{display:block}

/* --- Numbered cards, emphasised variant (Wedding "How Your Donation Works") */
.rm-num--big .rm-num__n{
  font-size:clamp(3.2rem,2.2rem + 3.4vw,5rem);font-weight:700;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 144;
  color:var(--forest);line-height:.85;margin-bottom:1.1rem;letter-spacing:-.05em;
}
.rm-num--big .rm-num__card:hover .rm-num__n{color:var(--red)}
.rm-num--big .rm-num__card h3{font-size:1.18rem}
.rm-num--big .rm-num__amt{
  display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:1.3rem;color:var(--red);letter-spacing:-.03em;margin:.5rem 0 .7rem;
  font-variant-numeric:tabular-nums;
}

/* --- Community sponsorship: one bar filling toward PKR 50,000 ---------- */
.rm-dg{--fill:0%}
.rm-dg__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;
  gap:.8rem;margin-bottom:.9rem}
.rm-dg__goal{font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}
.rm-dg__live{display:inline-flex;align-items:baseline;gap:.6rem}
.rm-dg__now{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:clamp(1.6rem,1.2rem + 1.4vw,2.3rem);line-height:1;letter-spacing:-.04em;
  color:var(--forest);font-variant-numeric:tabular-nums;transition:color .25s var(--ease)}
.rm-dg__pct{font-style:normal;font-size:.78rem;font-weight:800;letter-spacing:.1em;
  color:var(--red)}
.rm-dg__track{display:flex;height:86px;border-radius:var(--r);overflow:hidden;
  background:var(--forest-050);border:1px solid var(--line)}
.rm-dg__seg{position:relative;border:none;cursor:pointer;padding:0;min-width:74px;
  background:var(--forest-600);color:#fff;text-align:left;
  border-right:2px solid var(--surface);
  display:flex;flex-direction:column;justify-content:center;gap:.15rem;
  padding-inline:clamp(.5rem,1.2vw,1rem);
  transition:background .3s var(--ease),filter .3s var(--ease)}
.rm-dg__seg:last-child{border-right:none}
.rm-dg__seg:nth-child(1){background:var(--forest)}
.rm-dg__seg:nth-child(2){background:var(--forest-700)}
.rm-dg__seg:nth-child(3){background:var(--forest-600)}
.rm-dg__seg:nth-child(4){background:var(--forest-400)}
.rm-dg__seg:nth-child(5){background:var(--forest-200);color:var(--forest)}
.rm-dg__seg:hover,.rm-dg__seg:focus-visible{background:var(--red);color:#fff;outline:none}
.rm-dg.is-hovering .rm-dg__seg:not(:hover){filter:saturate(.35) opacity(.55)}
.rm-dg__amt{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:clamp(.9rem,.75rem + .5vw,1.15rem);line-height:1;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-dg__who{font-size:.64rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  opacity:.78;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rm-dg__foot{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;
  margin-top:.7rem;font-size:.7rem;font-weight:800;letter-spacing:.09em;color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.rm-dg__foot>span:last-child{color:var(--forest)}
.rm-dg__hint{font-size:.78rem;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--ink-3);margin:0;text-align:center}
@media(max-width:820px){
  .rm-dg__track{height:auto;flex-direction:column}
  .rm-dg__seg{flex:none!important;width:100%;flex-direction:row;align-items:baseline;
    justify-content:space-between;padding:.75rem 1rem;border-right:none;
    border-bottom:2px solid var(--surface)}
  .rm-dg__foot{display:none}
}

/* --- "What your donation covers" — reworked -------------------------- */
.rm-yesno{display:grid;gap:clamp(1rem,2.4vw,1.6rem)}
@media(min-width:900px){.rm-yesno{grid-template-columns:1fr 1.15fr;align-items:stretch}}
.rm-yn{border-radius:var(--r-lg);padding:clamp(1.7rem,3vw,2.6rem);position:relative;
  overflow:hidden;display:flex;flex-direction:column}
.rm-yn--do{background:var(--forest);color:#fff}
.rm-yn--do::after{content:"";position:absolute;right:-70px;bottom:-70px;width:240px;height:240px;
  border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.09),transparent 70%);
  pointer-events:none}
.rm-yn--dont{background:var(--surface);border:1px solid var(--line)}
.rm-yn__badge{display:inline-flex;align-items:center;gap:.4rem;align-self:flex-start;
  font-size:.66rem;font-weight:900;letter-spacing:.14em;text-transform:uppercase;
  border-radius:var(--pill);padding:.36rem .8rem;margin-bottom:1.2rem;
  background:rgba(255,255,255,.14);color:#fff}
.rm-yn__badge svg{width:13px;height:13px;stroke-width:2.6}
.rm-yn__badge--no{background:var(--red-050);color:var(--red)}
.rm-yn h3{font-size:1.02rem;font-family:var(--f-sans);font-weight:800;letter-spacing:.01em;
  text-transform:none;margin-bottom:1.1rem;color:var(--ink)}
.rm-yn--do h3{color:rgba(255,255,255,.72)}
.rm-yn__hero{list-style:none;margin:0;padding:0;flex:1;display:flex;align-items:center}
.rm-yn__hero li{display:flex;gap:.9rem;align-items:flex-start}
.rm-yn__tick{flex:none;width:34px;height:34px;border-radius:50%;background:#fff;color:var(--forest);
  display:grid;place-items:center;margin-top:.25rem}
.rm-yn__tick svg{width:17px;height:17px;stroke-width:2.8}
.rm-yn__word{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 55,"WONK" 1,"opsz" 96;
  font-size:clamp(1.6rem,1.15rem + 1.7vw,2.5rem);line-height:1.1;letter-spacing:-.035em;
  color:#fff}
.rm-yn--dont ul{list-style:none;margin:0;padding:0;display:grid;gap:.5rem;
  grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.rm-yn--dont li{display:flex;gap:.6rem;align-items:center;font-size:.92rem;color:var(--ink-2);
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:.6rem .8rem;transition:border-color .25s var(--ease),color .25s var(--ease)}
.rm-yn--dont li:hover{border-color:#F3C4C4;color:var(--ink)}
.rm-yn--dont li::before{content:"\00d7";flex:none;width:18px;height:18px;border-radius:50%;
  background:var(--red-050);color:var(--red);display:grid;place-items:center;
  font-size:.85rem;font-weight:900;line-height:1}
.rm-yn__note{font-size:.9rem;line-height:1.7;margin:1.3rem 0 0}
.rm-yn--do .rm-yn__note{color:rgba(255,255,255,.8)}
.rm-yn--dont .rm-yn__note{color:var(--ink-3)}

/* --- Notice tones ----------------------------------------------------- */
.rm-notice--warn{background:#FDF4E3;border-left-color:#C98A16;color:#6B4A06}
.rm-notice--forest{background:var(--forest-050);border-left-color:var(--forest);
  color:var(--forest)}
.rm-sec--forest .rm-notice,.rm-sec--deep .rm-notice{background:rgba(255,255,255,.08);
  border-left-color:var(--forest-400);color:#fff}

/* --- Invitation + closing quote, side by side (Scholarship) ------------- */
.rm-invite{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  border-radius:var(--r-lg);padding:clamp(1.7rem,3vw,2.6rem);
  display:flex;flex-direction:column;justify-content:center}
.rm-invite p{color:var(--on-dark-2)}
.rm-invite--quote{background:var(--sand);border-color:var(--sand-2);position:relative;
  overflow:hidden}
.rm-invite--quote::before{content:"\201C";position:absolute;top:-.28em;left:.02em;
  font-family:var(--f-display);font-weight:400;
  font-variation-settings:"SOFT" 100,"WONK" 1,"opsz" 144;
  font-size:clamp(9rem,6rem + 10vw,15rem);line-height:.62;color:var(--forest);opacity:.1;
  user-select:none;pointer-events:none}
.rm-invite--quote .rm-quote{position:relative;z-index:1;color:var(--forest);margin:0}
.rm-invite--quote cite{display:block;position:relative;z-index:1;font-style:normal;
  font-size:.72rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--forest-600);margin-top:1.4rem}

.rm-num--big .rm-num__sub{display:block;font-size:.98rem;color:var(--ink-2);line-height:1.7;
  margin:.4rem 0 .5rem;font-weight:600}

/* ============================================== 22. v3.6 — NEW / REWORKED */

/* --- Get Involved is a navigation menu, so it does not move ------------- */
.rm-involved>.rm-btn{transition:background-color .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease)}
.rm-involved>.rm-btn:hover,.rm-involved>.rm-btn:focus-visible{transform:none}

/* --- Vision / Mission / Values, one treatment across the whole site ----
   Heading in the theme red, statement set smaller than a display quote. */
.rm-beat--focusable h3{
  color:var(--red);font-size:clamp(1.15rem,1rem + .55vw,1.5rem);letter-spacing:-.015em;
  margin-bottom:.7rem;
}
.rm-beat--focusable .rm-quote{
  font-size:clamp(1.05rem,.95rem + .5vw,1.35rem);line-height:1.55;font-weight:400;
  font-variation-settings:"SOFT" 40,"WONK" 0,"opsz" 48;
  max-width:44ch;color:var(--ink-2);
}
.rm-sec--forest .rm-beat--focusable .rm-quote,
.rm-sec--deep .rm-beat--focusable .rm-quote{color:var(--on-dark-2)}
@media(min-width:960px){
  /* the focus pass no longer recolours the heading — red is now its resting state */
  .rm-beat--focusable.is-focus h3,
  .rm-sec--forest .rm-beat--focusable.is-focus h3,
  .rm-sec--deep .rm-beat--focusable.is-focus h3{color:var(--red)}
}

/* --- What We Do: the six program areas -------------------------------- */
.rm-areas .rm-acc{border-radius:var(--r-lg)}
.rm-areas .rm-acc__btn{display:grid;gap:.15rem .9rem;padding:clamp(1.2rem,2.2vw,1.7rem) 3.4rem
  clamp(1.2rem,2.2vw,1.7rem) clamp(1.2rem,2.2vw,1.8rem);align-items:baseline}
@media(min-width:760px){
  .rm-areas .rm-acc__btn{grid-template-columns:auto minmax(200px,1fr) 1.4fr}
}
.rm-areas .rm-acc__btn::after,.rm-areas .rm-acc__btn::before{right:1.6rem}
.rm-area__n{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 96;
  font-size:1.5rem;line-height:1;color:var(--forest-200);letter-spacing:-.04em;
  transition:color .3s var(--ease)}
.rm-areas .rm-acc__btn[aria-expanded="true"] .rm-area__n{color:var(--red)}
.rm-area__name{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:clamp(1.15rem,1rem + .6vw,1.5rem);line-height:1.15;letter-spacing:-.025em;
  color:var(--forest)}
.rm-areas .rm-acc__btn:hover .rm-area__name{color:var(--red)}
/* font-family is stated because this line inherits it, and the two builds
   inherit from different places: a <button> in the static markup, an
   Elementor Heading widget's <h3> in WordPress - which is set in the display
   face, so the tagline came out in Fraunces. */
.rm-area__tag{font-family:var(--f-sans);letter-spacing:normal;font-size:.92rem;
  color:var(--ink-2);line-height:1.5;font-weight:500}
.rm-areas .rm-acc__panel>div>div{padding:0 clamp(1.2rem,2.2vw,1.8rem)
  clamp(1.4rem,2.4vw,1.9rem)}
.rm-areas .rm-num{grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:.8rem}
.rm-areas .rm-num__card{padding:clamp(1.1rem,1.8vw,1.4rem);background:var(--paper)}

/* --- Contact page ------------------------------------------------------ */
.rm-contact{display:grid;gap:clamp(1.4rem,3vw,2.4rem)}
@media(min-width:980px){.rm-contact{grid-template-columns:.85fr 1.15fr;align-items:start}}
.rm-cstack{display:grid;gap:.8rem}
.rm-crow{display:flex;gap:1rem;align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--r);padding:1.15rem 1.25rem;
  text-decoration:none;transition:border-color .3s var(--ease),transform .3s var(--ease)}
.rm-crow:hover{border-color:var(--forest-200);transform:translateX(4px)}
.rm-crow__ico{flex:none;width:40px;height:40px;border-radius:50%;background:var(--forest-050);
  color:var(--forest);display:grid;place-items:center;transition:background .3s var(--ease),
  color .3s var(--ease)}
.rm-crow:hover .rm-crow__ico{background:var(--red);color:#fff}
.rm-crow__ico svg{width:18px;height:18px}
.rm-crow__k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.28rem}
.rm-crow__v{display:block;font-weight:700;color:var(--ink);font-size:1rem;line-height:1.4;
  word-break:break-word}
.rm-crow__note{display:block;font-size:.85rem;color:var(--ink-3);margin-top:.25rem}
/* .rm-csocial's own rules live in section 25 — the links became mask-glyph
   buttons rather than inline SVG. The earlier `.rm-csocial a` block that stood
   here was dead: `.rm-csocial .rm-social` out-specified every line of it. */
.rm-mapband{position:relative}
.rm-mapband .rm-map{min-height:420px;border-radius:0;border-left:none;border-right:none}
.rm-mapband .rm-map iframe{min-height:420px}

/* ============================================== 23. v3.7 — CONTACT REWORK */

/* --- Tabbed switcher: choices on the left, one live panel on the right -- */
.rm-switch{display:grid;gap:clamp(1rem,2.4vw,1.8rem)}
@media(min-width:900px){.rm-switch{grid-template-columns:.62fr 1.38fr;align-items:start}}
.rm-switch__tabs{display:grid;gap:.6rem}
/* Left-aligned, vertically centred. `justify-content` is the vertical axis
   here because the tab is a column — with one line of text it centres it in
   the box, and with a subtitle it keeps the pair centred as a unit rather
   than hanging from the top edge. */
.rm-switch__tab{display:flex;flex-direction:column;justify-content:center;
  align-items:flex-start;gap:.3rem;text-align:left;cursor:pointer;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:1.05rem 1.2rem;position:relative;overflow:hidden;
  transition:border-color .3s var(--ease),background .3s var(--ease)}
.rm-switch__tab::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:var(--red);transform:scaleY(0);transform-origin:center;
  transition:transform .4s var(--ease)}
.rm-switch__tab:hover{border-color:var(--forest-200)}
.rm-switch__tab[aria-selected="true"]{background:var(--forest);border-color:var(--forest)}
.rm-switch__tab[aria-selected="true"]::before{transform:scaleY(1)}
/* The tab's label: what you would do. One line, and that is the whole tab.

   It began as a tiny uppercase kicker over the detail set large in the display
   face — so the biggest words on the first tab were "Our Address" under a
   kicker reading "ADDRESS", and the three boxes led with a street, an email
   address and a phone number. Nobody arrives at this section wanting to read an
   address; they arrive wanting to choose between visiting, writing and phoning.
   The choice is the label, and the details it used to repeat are printed in
   full in the panel beside it.

   Weight 500, not 700. Fraunces is a high-contrast serif and at 27px its bold
   is very heavy — three of them stacked read as a headline block rather than
   as three things to choose between. 500 keeps the display face and lets the
   selected tab's dark fill do the emphasis instead of the ink.

   The second line, where a tab still has one, is --forest-200 when selected,
   not --forest-400: on the forest fill 400 measures 3.66:1, under the 4.5:1
   floor for body text, and 200 measures 7.91:1. See theme-gotchas.md. */
.rm-switch__k{font-family:var(--f-display);font-weight:500;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 72;
  font-size:clamp(1.3rem,1.1rem + .65vw,1.6rem);line-height:1.15;
  letter-spacing:-.02em;color:var(--forest);transition:color .3s var(--ease)}
.rm-switch__tab[aria-selected="true"] .rm-switch__k{color:#fff}
.rm-switch__l{font-size:.86rem;font-weight:500;line-height:1.4;
  color:var(--ink-2);transition:color .3s var(--ease);word-break:break-word}
.rm-switch__tab[aria-selected="true"] .rm-switch__l{color:var(--forest-200)}
.rm-switch__body{position:relative}
.rm-switch__panel{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-lg);overflow:hidden;animation:rmFade .45s var(--ease) both}
@keyframes rmFade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.rm-switch__panel .rm-map{border:none;border-radius:0;min-height:330px}
.rm-switch__panel .rm-map iframe{min-height:330px}
.rm-swp{padding:clamp(1.6rem,3vw,2.4rem)}
.rm-swp__k{display:block;font-size:.68rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--ink-3);margin-bottom:.7rem}
.rm-swp__v{display:block;font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 55,"WONK" 1,"opsz" 96;
  font-size:clamp(1.5rem,1.1rem + 1.6vw,2.3rem);line-height:1.15;letter-spacing:-.035em;
  color:var(--forest);word-break:break-word}
.rm-swp__note{font-size:.98rem;color:var(--ink-2);line-height:1.7;margin:.9rem 0 0;max-width:46ch}
.rm-swp .rm-btnrow{margin-top:1.5rem}
@media (prefers-reduced-motion:reduce){.rm-switch__panel{animation:none}}

/* --- Choice chips that fill the subject field -------------------------- */
.rm-chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:.35rem}
.rm-chip{cursor:pointer;background:var(--paper);border:1.5px solid var(--line);
  border-radius:var(--pill);font:inherit;font-size:.85rem;font-weight:700;color:var(--ink-2);
  padding:.5rem 1rem;transition:background .25s var(--ease),color .25s var(--ease),
  border-color .25s var(--ease)}
.rm-chip:hover{border-color:var(--forest-200);color:var(--forest)}
.rm-chip[aria-pressed="true"]{background:var(--forest);border-color:var(--forest);color:#fff}

/* --- Form completion meter --------------------------------------------- */
.rm-fprog{display:flex;align-items:center;gap:.8rem;margin-bottom:1.3rem}
.rm-fprog__track{flex:1;height:6px;border-radius:3px;background:var(--forest-050);overflow:hidden}
.rm-fprog__fill{height:100%;width:0;border-radius:3px;background:var(--red);
  transition:width .4s var(--ease),background .4s var(--ease)}
.rm-fprog.is-done .rm-fprog__fill{background:var(--forest)}
.rm-fprog__n{font-size:.72rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.rm-fprog.is-done .rm-fprog__n{color:var(--forest)}

/* ==========================================================================
   24. LAYOUT UTILITIES
   The static build carried these as inline style="" on wrapper divs. Elementor
   has nowhere to put an inline style that survives editing, so the same values
   become classes — used by both builds, so the two cannot drift apart.
   ========================================================================== */
.rm-sechead{max-width:46ch;margin-bottom:var(--sechead-gap)}
.rm-sechead--tight{max-width:40ch}
.rm-sechead--mid{max-width:44ch}
.rm-sechead--wide{max-width:52ch}
.rm-sechead--wider{max-width:56ch}
.rm-sechead--long{max-width:60ch}
.rm-sechead--full{max-width:74ch}
/* The gallery heading. It was an inline style on one build and a
   .rm-sechead--auto container on the other - the same two lines of type,
   spelled two ways, which is exactly the drift the shared class prevents. */
/* Same gap as .rm-sechead — a gallery heading introduces its content exactly
   the way a section heading does, so it should sit the same distance above it. */
.rm-galhead{margin-bottom:var(--sechead-gap)}
.rm-sechead > *:last-child{margin-bottom:0}

/* Block spacing.
   These were inline styles in the static build and a rounded three-step scale
   in the WordPress one, so the same block sat 1.4rem below its heading on one
   site and 1.6rem on the other, and a 2rem gap became a 2.6-4rem fluid one.
   Small differences, but the design was approved with the values on the left,
   so the scale carries them exactly. Fixed steps are named for their size in
   rem x 10; fluid steps take an f and their minimum and maximum. */
.rm-blk--12{margin-top:1.2rem}
.rm-blk--14{margin-top:1.4rem}
.rm-blk--16{margin-top:1.6rem}
.rm-blk--18{margin-top:1.8rem}
.rm-blk--20{margin-top:2rem}
.rm-blk--24{margin-top:2.4rem}
.rm-blk--f18-26{margin-top:clamp(1.8rem,3.4vw,2.6rem)}
.rm-blk--f20-30{margin-top:clamp(2rem,4vw,3rem)}
.rm-blk--f22-34{margin-top:clamp(2.2rem,4.5vw,3.4rem)}
.rm-blk--f24-36{margin-top:clamp(2.4rem,5vw,3.6rem)}
.rm-blk--f24-40{margin-top:clamp(2.4rem,5vw,4rem)}
.rm-blk--f26-40{margin-top:clamp(2.6rem,5vw,4rem)}
.rm-blk--f28-45{margin-top:clamp(2.8rem,5.5vw,4.5rem)}
.rm-measure--60{max-width:60ch}

.rm-duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:clamp(2rem,5vw,4.5rem);align-items:start}
.rm-duo--close{gap:clamp(2rem,4vw,3.4rem)}


/* ==========================================================================
   25. SOCIAL LINK ROW
   The glyphs are CSS masks (build/mk_icons_css.py) rather than inline SVG, so
   each link is an ordinary Button widget with an editable URL instead of a
   block of markup.
   ========================================================================== */
.rm-csocial{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.4rem}
/* 42px and --line, so these sit identically to the same five icons in the
   header and footer. They had drifted to 40px on a lighter border, which read
   as a second, slightly smaller set of the same thing. */
/* The link still contains its label as text — that text IS the accessible name
   here, so it cannot be removed from the markup. font-size:0 hides it, but a
   non-empty text node inside a grid container is still an anonymous grid item:
   the circle came out as TWO rows (24.4px for the glyph, 7.4px for the invisible
   label), and place-items:center centred the glyph in row one rather than in the
   circle. It sat about 4px high — visible the moment these are seen beside the
   header and footer icons, which hold an <svg> and no text.

   So the glyph is centred against the box itself rather than against a grid
   track: inset:0 with auto margins on a fixed 17px square lands it dead centre
   whatever else is in the flow. */
.rm-csocial .rm-social{position:relative;display:grid;place-items:center;width:42px;height:42px;
  border-radius:50%;border:1px solid var(--line);color:var(--forest);
  font-size:0;line-height:0;text-decoration:none;
  transition:background .25s,border-color .25s,color .25s,transform .25s var(--ease)}
.rm-csocial .rm-social::before{content:"";position:absolute;inset:0;margin:auto;
  width:17px;height:17px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}
.rm-csocial .rm-social:hover{background:var(--forest);border-color:var(--forest);
  color:#fff;transform:translateY(-2px)}
.rm-sec--forest .rm-csocial .rm-social,.rm-sec--deep .rm-csocial .rm-social{
  color:#fff;border-color:rgba(255,255,255,.3)}

/* The helpline number is a Button widget; its phone glyph is a mask too. */
.rm-help__btn::before{content:"";width:19px;height:19px;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain}

/* ================================================== 22. OFFER (v3.6) ======
   "Here is an amount, here is what it covers, here is how to give."

   reference site — punched notches, a dashed perforation, an ORDER NO. and a
   DELIVERED badge. None of that language appears anywhere else on this site,
   and the badge made a donation prompt read as a receipt for something already
   done. The two coupons were not even consistent with each other: one had a
   status pill and no title, the other a title and no pill.

   Everything here is the system's existing vocabulary: the eyebrow rule, the
   display face for the figure at the .rm-tiers__amt scale one step up, the
   .rm-lede measure for the note, and the wall's hairline for the divider. No
   new metaphor, no new colours. ------------------------------------------ */
.rm-offer{display:grid;gap:clamp(1.8rem,4vw,3rem);align-items:start}
@media(min-width:860px){
  .rm-offer{grid-template-columns:1.05fr .95fr;gap:clamp(2.4rem,5vw,4.5rem)}
  .rm-offer__aside{border-left:1px solid var(--line);padding-left:clamp(2rem,4vw,3.5rem)}
}
.rm-sec--forest .rm-offer__aside,.rm-sec--deep .rm-offer__aside{border-color:rgba(255,255,255,.18)}

.rm-offer__title{font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 30,"WONK" 0,"opsz" 72;
  font-size:clamp(1.6rem,1.3rem + 1.1vw,2.2rem);line-height:1.1;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 1.1rem}
.rm-sec--forest .rm-offer__title,.rm-sec--deep .rm-offer__title{color:#fff}

.rm-offer__figure{display:flex;align-items:baseline;gap:.6rem;flex-wrap:wrap;margin-bottom:1.1rem}
.rm-offer__amt{font-family:var(--f-display);font-weight:700;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 144;
  font-size:clamp(2.6rem,1.9rem + 2.6vw,4rem);line-height:.9;letter-spacing:-.045em;
  color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.rm-offer__unit{font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--ink-3)}
/* On a dark band the red figure falls to 2.98:1 against the forest — under the
   3:1 floor for large text. Every other big figure in the design already turns
   white there (.rm-tiers__amt, .rm-wall__n); this follows them. 14.33:1. */
.rm-sec--forest .rm-offer__amt,.rm-sec--deep .rm-offer__amt{color:#fff}
.rm-sec--forest .rm-offer__unit,.rm-sec--deep .rm-offer__unit{color:var(--forest-200)}

.rm-offer__note{font-size:1rem;color:var(--ink-2);line-height:1.75;margin:0 0 1.6rem;max-width:44ch}
.rm-sec--forest .rm-offer__note,.rm-sec--deep .rm-offer__note{color:var(--on-dark-2)}

.rm-offer__lbl{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--forest-600);margin:0 0 1.1rem}
.rm-sec--forest .rm-offer__lbl,.rm-sec--deep .rm-offer__lbl{color:var(--forest-200)}

.rm-offer__list{list-style:none;margin:0;padding:0;display:grid;gap:0}
.rm-offer__list li{display:flex;gap:.85rem;align-items:baseline;
  font-size:1rem;font-weight:600;color:var(--ink);
  padding:.7rem 0;border-bottom:1px solid var(--line)}
.rm-offer__list li:last-child{border-bottom:none}
.rm-sec--forest .rm-offer__list li,.rm-sec--deep .rm-offer__list li{
  color:#fff;border-color:rgba(255,255,255,.18)}
.rm-offer__list li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;
  background:var(--red);transform:translateY(-2px)}

/* ==================================== 24. DONATION PROGRAMME CARDS (1 Sep) ==
   The eleven programmes from the donation form, as a page.

   In the form they are eleven names in a grid — no pictures, no explanation,
   and only reachable after pressing Donate. Here each one is a photograph, a
   name and a line, and choosing one opens the form already set to it.

   Three things about the markup drive the CSS, and all three are deliberate:

   1. `.rm-dcard img` is a DESCENDANT selector, never a child one. In the static
      build the <img> sits directly in the card; in WordPress the photograph is
      a real Image widget, so Elementor wraps it in two divs. Staff being able
      to change the picture is the whole point, so the wrapper is not going
      away — the selector has to reach through it.

   2. The card is a flex column with the body pushed down by `margin-top:auto`,
      so cards of different text lengths still line their buttons up.

   3. The whole card is clickable (rm.js forwards a click to the card's own
      donate button), but the BUTTON is still a real button — that is what
      keyboards and screen readers use, and what carries the programme name. The
      card is a convenience on top, never the only way in. */
.rm-dcards{
  display:grid;gap:clamp(1rem,2vw,1.6rem);
  grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
}
.rm-dcard{
  display:flex;flex-direction:column;flex-wrap:nowrap;
  position:relative;isolation:isolate;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;cursor:pointer;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),
             border-color .35s var(--ease);
}
.rm-dcard:hover,.rm-dcard:focus-within{
  transform:translateY(-6px);box-shadow:var(--sh-lg);border-color:transparent;
}
.rm-dcard img{
  width:100%;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .7s var(--ease);
}
.rm-dcard:hover img{transform:scale(1.06)}

/* The lead card is the "where needed most" choice — the same one the donation
   form highlights first. It takes two columns where there is room, and its
   photograph is wider than tall so the extra width is not just empty card. */
@media(min-width:760px){
  .rm-dcard--lead{grid-column:span 2}
  .rm-dcard--lead img{aspect-ratio:16/9}
  .rm-dcard--lead /* WordPress rewrites an emoji in page content into an <img class="emoji">
   served from s.w.org. That image is inside the card, so `.rm-dcard img` —
   which has to be a descendant selector, see above — was about to size a
   programme icon like a photograph: full width, 4:3. WordPress's own emoji
   rules are all `!important` and happen to win today, but a design that only
   works because somebody else's stylesheet shouted louder is not a design.
   State it here, where it is legible. */
.rm-dcard__icon img{
  width:1em;height:1em;aspect-ratio:auto;margin:0;display:inline-block;
  vertical-align:-.1em;
}
.rm-dcard__name{font-size:1.5rem}
}

.rm-dcard__body{
  display:flex;flex-direction:column;flex-wrap:nowrap;align-items:flex-start;
  gap:.55rem;padding:1.15rem 1.15rem 1.25rem;flex:1 1 auto;
}
/* The icon sits half over the photograph, so the card reads as one object
   rather than a picture with a caption under it. The negative margin is
   cancelled from the body's own padding, not from the photograph, so a longer
   name never pushes it back down over the image. */
.rm-dcard__icon{
  display:grid;place-items:center;width:46px;height:46px;border-radius:50%;
  background:var(--surface);box-shadow:0 8px 22px -12px rgba(8,23,19,.5);
  font-size:1.35rem;line-height:1;margin-top:-2.6rem;
}
.rm-dcard__name{
  font-family:var(--f-display);font-weight:600;
  font-variation-settings:"SOFT" 45,"WONK" 1,"opsz" 60;
  font-size:1.18rem;line-height:1.15;letter-spacing:-.02em;
  color:var(--forest);margin:0;
}
.rm-dcard__text{font-size:.9rem;line-height:1.55;color:var(--ink-2);margin:0}
/* margin-top:auto is what lines every button up along the bottom of the row
   however long the line above it runs. */
.rm-dcard__btn{margin-top:auto}
/* The button is the visible affordance, but the click target is the card, so
   the button must not swallow a click meant for it — rm.js checks. Pointer
   events stay on: keyboard focus and the hover state both need them. */
.rm-dcard:hover .rm-dcard__btn{background:var(--red-dark)}

/* Eleven cards in one column is a long page. On a phone the photograph goes
   from 4:3 to 16:9, which takes roughly 150px off every card — about a screen
   and a half off the whole page — without making any of them harder to read.
   Two columns would fit at this width arithmetically and be miserable to use. */
@media(max-width:599px){
  .rm-dcard img,.rm-dcard--lead img{aspect-ratio:16/9}
  .rm-dcard__body{padding:1rem 1rem 1.1rem}
}

@media(hover:none){
  .rm-dcard{transform:none}
  .rm-dcard:hover{transform:none;box-shadow:none;border-color:var(--line)}
  .rm-dcard:hover img{transform:none}
}

/* When the form is opened from one of those cards, the programme has already
   been chosen — on a whole page devoted to choosing. So the form opens on the
   form alone: no "Choose Where to Give" step behind it, and no "Change
   program" link offering to ask again. rm.js and the plugin's binder both put
   this class on the overlay before opening. */
.rm-overlay.rm-nopicker .rm-modal-back{display:none}

/* ============================ 25. THE CLUB — JOIN ON WHATSAPP (5 Sep) ======
   The club's Join button. WhatsApp green, because that is where it goes and a
   green bubble is what people recognise; everything else about it is the
   site's ordinary large button, so it sits in a row with the ghost links
   without looking like a different piece of furniture.

   The glyph is a mask on the ::before, not an SVG in the markup, exactly like
   the helpline number's phone icon — that keeps the button a plain link with
   editable text in the Elementor panel instead of a block of markup.

   `.rm-whatsapp` already exists for the donation form, but it is full-width by
   design: it is the last thing in a form, and a form's final action fills the
   form. On a page the button sits in a row beside other links, so it is the
   ordinary button and only the colour and the glyph are borrowed. */
.rm-wabtn{background:#25D366;border-color:#25D366;color:#04361A}
.rm-wabtn:hover,.rm-wabtn:focus-visible{
  background:#1FBA57;border-color:#1FBA57;color:#04361A}
.rm-wabtn::before{
  content:"";width:20px;height:20px;flex:none;background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* On the dark closing band the site's other solid button turns white; this one
   must not, or it stops reading as WhatsApp. Stated so the band's own rule
   cannot claim it. */
.rm-cta .rm-wabtn{background:#25D366;border-color:#25D366;color:#04361A}
.rm-cta .rm-wabtn:hover{background:#1FBA57;border-color:#1FBA57;color:#04361A}

/* The club's logo. It is a tall mark on a white ground, so it is capped by
   HEIGHT rather than width — capping the width of a portrait logo inside a
   wide column makes it enormous. */
/* The photograph beside "Be Part of the Movement". Every other picture on the
   site that sits in a column of text gets this treatment from `.rm-beat img`,
   but that rule only reaches images inside a story beat — this one is in a
   plain two-column block, so it arrived square-cornered and full-bleed while
   everything around it was rounded. Same three properties, stated for it.

   Square, not the beats' 16/10 and not the source photograph's own 3/4. The
   text beside it is 394px tall; at 4/5 the picture came out 704px and hung
   300px below the button, which reads as a mistake rather than as a choice. A
   square is 563px — still taller than the text, which is what stops the block
   looking like two things of equal weight, but not so much that the column
   below it is empty. The photograph is a circle of hands, dead centre, so a
   square crop loses nothing.

   Written for both builds for the same reason as the logo below. */
.rm-clubshot,.rm-clubshot img{
  width:100%;border-radius:var(--r-lg);aspect-ratio:1/1;object-fit:cover;
  background:var(--forest-050);display:block;
}

/* Written for BOTH builds. In the static page the class is on the <img>; in
   WordPress the picture is an Image widget, so the class lands on Elementor's
   wrapper and the <img> is two levels inside it. Naming the element as well as
   the class covers both, and neither one gets a rule that would hurt it: a
   capped height on a wrapper that has nothing to cap does nothing. Without
   this the logo came out 531px wide and spilled out of its own box. */
.rm-clublogo,.rm-clublogo img{
  display:block;max-height:260px;width:auto;margin-inline:auto;
}
@media(max-width:599px){
  .rm-clublogo,.rm-clublogo img{max-height:190px}
}