/* ==========================================================================
   RS Society — design system v3

   Taken from the co-working template the society picked: white ground, one
   royal blue, deep navy type, Poppins throughout, white cards with a soft
   shadow and a tinted icon chip, photographs in rounded frames with a floating
   blue card over a corner, and a navy footer.

   Every class name is the same as before, so no template or widget markup had
   to change to wear this. Colours live in the block below and nowhere else —
   changing the palette is editing these lines, not hunting through the file.
   ========================================================================== */

:root{
  /* ground */
  --rs-paper:#FFFFFF;
  --rs-surface:#FFFFFF;
  --rs-sunk:#F7F7FC;
  --rs-glass:rgba(255,255,255,.92);
  --rs-glass-line:#E8E9F2;
  --rs-deep:#282C4F;          /* footer, dark panels */

  /* type */
  --rs-ink:#16193B;
  --rs-ink-2:#6A6C86;
  --rs-ink-3:#9A9CB2;
  --rs-on-deep:rgba(255,255,255,.74);
  --rs-on-deep-2:rgba(255,255,255,.55);

  /* brand */
  --rs-brand:#3B4EE3;
  --rs-brand-dark:#2D3ECB;
  --rs-brand-lift:#6A78EE;
  --rs-brand-soft:#EBEDFD;
  --rs-brand-rgb:59,78,227;

  /* accents */
  --rs-warm:#3B4EE3;
  --rs-warm-soft:#EBEDFD;
  --rs-em-on-dark:#B9C2FA;

  --rs-ok:#1F8A5B;
  --rs-bad:#D2402A;
  --rs-bad-soft:#FCEDEA;

  --rs-line:#E8E9F2;
  --rs-line-2:#DCDEEC;

  --rs-shadow-1:0 1px 2px rgba(22,25,59,.05);
  --rs-shadow-2:0 4px 10px rgba(22,25,59,.04), 0 18px 40px rgba(22,25,59,.07);
  --rs-shadow-3:0 6px 14px rgba(22,25,59,.06), 0 26px 54px rgba(22,25,59,.12);
  --rs-shadow-brand:0 8px 20px rgba(var(--rs-brand-rgb),.28);

  --rs-r-sm:6px;
  --rs-r:10px;
  --rs-r-lg:14px;
  --rs-r-xl:20px;
  --rs-pill:999px;

  --rs-sans:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  --rs-serif:"Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;

  --rs-wrap:1140px;
  --rs-gut:24px;

  --rs-t-xs:.75rem;
  --rs-t-sm:.83rem;
  --rs-t-md:.95rem;
  --rs-header-h:78px;
}

/* ==========================================================================
   BASE
   ========================================================================== */
*,*::before,*::after{ box-sizing:border-box }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth }
body{
  margin:0; background:var(--rs-paper); color:var(--rs-ink-2);
  font-family:var(--rs-sans); font-size:15px; line-height:1.75;
  -webkit-font-smoothing:antialiased; overflow-x:clip;
}
img{ max-width:100%; height:auto; display:block }
a{ color:var(--rs-brand); text-decoration:none }
a:hover{ color:var(--rs-brand-dark) }
h1,h2,h3,h4,h5,h6{
  font-family:var(--rs-sans); color:var(--rs-ink);
  font-weight:700; line-height:1.28; margin:0 0 .5em; letter-spacing:-.005em;
}
h1{ font-size:clamp(2rem,4.4vw,3.2rem) }
h2{ font-size:clamp(1.5rem,2.8vw,2.1rem) }
h3{ font-size:1.05rem }
h4{ font-size:.98rem }
p{ margin:0 0 1em }
p:last-child{ margin-bottom:0 }
ul,ol{ margin:0; padding:0 }
blockquote{ margin:0 }
:focus-visible{ outline:2px solid var(--rs-brand); outline-offset:3px; border-radius:4px }

.rs-wrap{ width:100%; max-width:var(--rs-wrap); margin-inline:auto; padding-inline:var(--rs-gut) }

/* An italic serif word does not belong in a geometric sans design; the accent
   is carried by colour instead. */
.rs-em{ font-style:normal; color:var(--rs-brand); font-weight:700 }

.rs-skip{
  position:absolute; left:-9999px; top:0; z-index:999;
  background:var(--rs-brand); color:#fff; padding:12px 18px; border-radius:0 0 var(--rs-r) 0;
}
.rs-skip:focus{ left:0; color:#fff }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.rs-btn{
  display:inline-flex; align-items:center; gap:10px; justify-content:center;
  font-family:var(--rs-sans); font-size:var(--rs-t-sm); font-weight:600;
  padding:14px 26px; border-radius:var(--rs-r-sm); border:0; cursor:pointer;
  background:var(--rs-brand); color:#fff; text-decoration:none;
  box-shadow:var(--rs-shadow-brand);
  transition:background .18s ease, transform .18s ease, box-shadow .18s ease, color .18s ease;
}
.rs-btn:hover{ background:var(--rs-brand-dark); color:#fff; transform:translateY(-1px) }
.rs-btn:active{ transform:translateY(0) }
.rs-btn--primary{ background:var(--rs-brand); color:#fff }
.rs-btn--sm{ padding:11px 20px; font-size:var(--rs-t-xs) }
.rs-btn--ghost{
  background:#fff; color:var(--rs-ink); border:1px solid var(--rs-line);
  box-shadow:var(--rs-shadow-1);
}
.rs-btn--ghost:hover{ background:#fff; color:var(--rs-brand); border-color:var(--rs-brand); box-shadow:var(--rs-shadow-2) }
.rs-btn--light{ background:var(--rs-brand-soft); color:var(--rs-brand); box-shadow:none }
.rs-btn--light:hover{ background:#E0E4FC; color:var(--rs-brand-dark) }
/* on a blue or navy panel */
.rs-btn--on-deep{ background:#fff; color:var(--rs-brand); box-shadow:0 8px 20px rgba(0,0,0,.14) }
.rs-btn--on-deep:hover{ background:#fff; color:var(--rs-brand-dark) }
.rs-btn__arrow{ font-size:1rem; line-height:1; transition:transform .18s ease }
.rs-btn:hover .rs-btn__arrow{ transform:translateX(3px) }

/* ==========================================================================
   HEADER
   ========================================================================== */
.rs-header{
  position:sticky; top:0; z-index:50;
  background:var(--rs-glass); backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--rs-line);
}
.rs-header__inner{
  display:flex; align-items:center; gap:26px; min-height:var(--rs-header-h);
}

/* On the front page the header floats over the hero photograph, as the
   reference does, and only turns solid once the page is scrolled. */
.home .rs-header{
  position:absolute; inset:0 0 auto; background:transparent;
  backdrop-filter:none; border-bottom-color:transparent;
}
.home .rs-header.is-stuck{
  position:fixed; background:var(--rs-glass); backdrop-filter:saturate(150%) blur(10px);
  border-bottom-color:var(--rs-line); animation:rs-drop .28s ease;
}
@keyframes rs-drop{ from{ transform:translateY(-100%) } to{ transform:translateY(0) } }

.rs-brand{ display:inline-flex; align-items:center; gap:11px; color:var(--rs-ink); font-weight:700 }
.rs-brand:hover{ color:var(--rs-ink) }
.rs-brand__mark{
  display:grid; place-items:center; width:38px; height:38px; border-radius:9px;
  background:var(--rs-brand); color:#fff; font-size:.86rem; font-weight:700; letter-spacing:.02em;
}
/* The society's name. The thing a visitor reads to know whose site this is, so
   it carries rather more weight than the navigation beside it. */
.rs-brand__text{
  display:flex; flex-direction:column; line-height:1.15;
  font-size:1.34rem; letter-spacing:-.005em;
}
@media (max-width:600px){ .rs-brand__text{ font-size:1.12rem } }
.rs-brand__text small{ font-size:.72rem; font-weight:500; color:var(--rs-ink-3); letter-spacing:.04em; margin-top:2px }
/* A logo of any shape or size, held to the header's height and never wider
   than it needs to be. object-fit is deliberately absent: the picture keeps its
   own proportions rather than being squared off. */
.rs-brand__logo,
.rs-brand img{ max-height:44px; width:auto; height:auto; display:block }
@media (max-width:600px){ .rs-brand__logo, .rs-brand img{ max-height:36px } }

.rs-nav{ margin-left:auto }
.rs-nav ul{ display:flex; align-items:center; gap:28px; list-style:none }
.rs-nav a{
  color:var(--rs-ink); font-size:var(--rs-t-sm); font-weight:500; padding-block:6px;
  position:relative;
}
.rs-nav a:hover,
.rs-nav .current-menu-item > a{ color:var(--rs-brand) }
.rs-nav .current-menu-item > a::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--rs-brand); border-radius:2px;
}
.rs-header__cta{ flex:none }

.home .rs-header:not(.is-stuck) .rs-brand,
.home .rs-header:not(.is-stuck) .rs-brand:hover{ color:#fff }
.home .rs-header:not(.is-stuck) .rs-brand__mark{ background:rgba(255,255,255,.16); color:#fff }
.home .rs-header:not(.is-stuck) .rs-brand__text small{ color:rgba(255,255,255,.66) }
.home .rs-header:not(.is-stuck) .rs-nav a{ color:rgba(255,255,255,.86) }
.home .rs-header:not(.is-stuck) .rs-nav a:hover,
.home .rs-header:not(.is-stuck) .rs-nav .current-menu-item > a{ color:#fff }
.home .rs-header:not(.is-stuck) .rs-nav .current-menu-item > a::after{ background:#fff }
.home .rs-header:not(.is-stuck) .rs-burger span,
.home .rs-header:not(.is-stuck) .rs-burger span::before,
.home .rs-header:not(.is-stuck) .rs-burger span::after{ background:#fff }

/* burger */
.rs-burger{
  display:none; width:44px; height:44px; border:0; background:transparent;
  cursor:pointer; padding:0; place-items:center;
}
.rs-burger span,
.rs-burger span::before,
.rs-burger span::after{
  content:''; display:block; width:20px; height:2px; border-radius:2px;
  background:var(--rs-ink); position:relative; transition:transform .2s ease, opacity .2s ease;
}
.rs-burger span::before{ position:absolute; top:-6px }
.rs-burger span::after{ position:absolute; top:6px }
.rs-burger[aria-expanded="true"] span{ background:transparent }
.rs-burger[aria-expanded="true"] span::before{ transform:translateY(6px) rotate(45deg) }
.rs-burger[aria-expanded="true"] span::after{ transform:translateY(-6px) rotate(-45deg) }

.rs-mobile{
  display:none; padding:8px var(--rs-gut) 22px; background:#fff;
  border-top:1px solid var(--rs-line);
}
.rs-mobile.is-open{ display:block }
.rs-mobile ul{ list-style:none; margin:0 0 16px }
.rs-mobile li a{
  display:block; padding:13px 2px; color:var(--rs-ink); font-weight:500;
  border-bottom:1px solid var(--rs-line);
}

@media (max-width:1000px){
  .rs-nav{ display:none }
  .rs-burger{ display:grid; margin-left:auto }
  .rs-header__cta{ display:none }
  /* On a phone the home header is solid white from the first pixel — it never
     sits over the photograph, so it never gets the white-on-transparent
     treatment above.

     These carry :not(.is-stuck) for one reason: without it they are a class
     less specific than the rules that paint the header white, and those win no
     matter that they come first. The result on a phone was a white site name
     and a white hamburger on a white bar — both present, both invisible, which
     is why the header looked like a bare logo and there was no way to open the
     menu. Matching the specificity and coming later is what makes these apply. */
  .home .rs-header{ position:sticky; background:var(--rs-glass); border-bottom-color:var(--rs-line) }
  .home .rs-header:not(.is-stuck) .rs-brand,
  .home .rs-header:not(.is-stuck) .rs-brand:hover{ color:var(--rs-ink) }
  .home .rs-header:not(.is-stuck) .rs-brand__text small{ color:var(--rs-ink-3) }
  .home .rs-header:not(.is-stuck) .rs-brand__mark{ background:var(--rs-brand); color:#fff }
  .home .rs-header:not(.is-stuck) .rs-burger span,
  .home .rs-header:not(.is-stuck) .rs-burger span::before,
  .home .rs-header:not(.is-stuck) .rs-burger span::after{ background:var(--rs-ink) }
}

/* ==========================================================================
   LAYOUT
   ========================================================================== */
.rs-main{ display:block }
.rs-section{ padding:clamp(56px,7vw,96px) 0 }
.rs-section--tight{ padding:clamp(36px,4vw,56px) 0 }
.rs-layout{ width:100%; max-width:var(--rs-wrap); margin-inline:auto; padding:clamp(40px,6vw,72px) var(--rs-gut) }
.rs-head{ max-width:52ch }
.rs-head--center{ margin-inline:auto; text-align:center }
.rs-lede{ font-size:1.02rem; color:var(--rs-ink-2) }
.rs-eyebrow,.rs-kicker{
  display:inline-flex; align-items:center; gap:8px;
  font-size:var(--rs-t-xs); font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--rs-brand); margin-bottom:14px;
}
.rs-eyebrow__dot{ width:6px; height:6px; border-radius:50%; background:var(--rs-brand) }

.rs-grid{ display:grid; gap:26px; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)) }
.rs-card{
  background:var(--rs-surface); border-radius:var(--rs-r); padding:28px 26px;
  box-shadow:var(--rs-shadow-2);
}

.rs-page-header{ padding:calc(var(--rs-header-h) + 40px) 0 24px }
.rs-page-header h1{ margin-bottom:.2em }

/* ==========================================================================
   POSTS
   ========================================================================== */
.rs-post{
  background:var(--rs-surface); border-radius:var(--rs-r); overflow:hidden;
  box-shadow:var(--rs-shadow-2); margin-bottom:26px;
}
.rs-post__media img{ width:100%; aspect-ratio:16/9; object-fit:cover }
.rs-post__body{ padding:24px 26px 28px }
.rs-post__meta{ font-size:var(--rs-t-xs); color:var(--rs-ink-3); text-transform:uppercase; letter-spacing:.1em }
.rs-post__more{ font-weight:600; font-size:var(--rs-t-sm) }
.rs-prose{ font-size:1rem }
.rs-prose h2,.rs-prose h3{ margin-top:1.6em }
.rs-prose img{ border-radius:var(--rs-r) }
.rs-prose blockquote{
  border-left:3px solid var(--rs-brand); padding:6px 0 6px 20px;
  color:var(--rs-ink); font-weight:500;
}

.rs-pagination{ display:flex; gap:8px; flex-wrap:wrap; margin-top:32px }
.rs-pagination .page-numbers{
  min-width:42px; height:42px; display:grid; place-items:center; padding-inline:12px;
  border-radius:var(--rs-r-sm); background:#fff; border:1px solid var(--rs-line);
  color:var(--rs-ink); font-size:var(--rs-t-sm); font-weight:600;
}
.rs-pagination .page-numbers.current,
.rs-pagination .page-numbers:hover{ background:var(--rs-brand); border-color:var(--rs-brand); color:#fff }

/* widgets + search */
.widget{ margin-bottom:28px }
.widget-title{ font-size:.9rem; text-transform:uppercase; letter-spacing:.12em; color:var(--rs-ink) }
.rs-searchform{ display:flex; gap:8px }
.rs-searchform input[type="search"]{
  flex:1; min-width:0; font-size:16px; padding:13px 16px; font-family:inherit;
  border:1px solid var(--rs-line-2); border-radius:var(--rs-r-sm); background:#fff; color:var(--rs-ink);
}

.rs-comments{ margin-top:56px }
.rs-comments ol{ list-style:none; margin:0; padding:0 }
.rs-comments .comment-body{
  background:#fff; border:1px solid var(--rs-line); border-radius:var(--rs-r);
  padding:20px 22px; margin-bottom:16px;
}
.rs-comments input:not([type="checkbox"]):not([type="submit"]),
.rs-comments textarea{
  width:100%; font-size:16px; font-family:inherit; padding:13px 15px;
  border:1px solid var(--rs-line-2); border-radius:var(--rs-r-sm); background:#fff;
}

/* ==========================================================================
   FOOTER — the navy block from the reference: four columns, then a thin bar
   ========================================================================== */
.rs-footer{ background:var(--rs-deep); color:var(--rs-on-deep); font-size:var(--rs-t-sm) }
.rs-footer__panel{ max-width:var(--rs-wrap); margin-inline:auto; padding-inline:var(--rs-gut) }
.rs-footer__top{
  display:grid; gap:36px; padding:clamp(48px,6vw,74px) 0 clamp(30px,4vw,44px);
}
@media (min-width:860px){
  .rs-footer__top{ grid-template-columns:1.7fr 1fr 1fr 1.2fr; gap:44px }
}
.rs-footer a{ color:var(--rs-on-deep) }
.rs-footer a:hover{ color:#fff }
.rs-footer h4{
  color:#fff; font-size:.95rem; font-weight:600; margin-bottom:16px; letter-spacing:0;
  text-transform:none;
}
.rs-footer ul{ list-style:none }
.rs-footer li{ margin-bottom:9px }
.rs-footer li a{ display:inline-block; padding:2px 0 }
.rs-footer__about p{ color:var(--rs-on-deep); max-width:40ch; margin-top:16px; line-height:1.8 }
.rs-footer .rs-brand,
.rs-footer .rs-brand:hover{ color:#fff }
.rs-footer .rs-brand__mark{ background:var(--rs-brand); color:#fff }
.rs-footer .rs-brand__text small{ color:var(--rs-on-deep-2) }
.rs-footer__bottom{
  border-top:1px solid rgba(255,255,255,.10); padding:20px 0;
  display:flex; flex-wrap:wrap; gap:8px 22px; justify-content:space-between;
  font-size:var(--rs-t-xs); color:var(--rs-on-deep-2);
}
/* the oversized wordmark belonged to the old footer; this design does not use it */
.rs-footer__wordmark{ display:none }

/* the four round social buttons, under the blurb */
.rs-socials{ display:flex; gap:10px; margin-top:22px }
.rs-socials a,
.rs-socials .is-empty{
  width:36px; height:36px; border-radius:50%; background:var(--rs-brand);
  display:grid; place-items:center; color:#fff;
  transition:background .18s ease, opacity .18s ease;
}
.rs-socials a:hover{ background:var(--rs-brand-dark); color:#fff }
/* a network with no link yet: same shape, visibly waiting for its URL */
.rs-socials .is-empty{ background:rgba(255,255,255,.10); color:rgba(255,255,255,.42) }
.rs-socials svg{ width:16px; height:16px; fill:currentColor; stroke:none }

/* the last column: a label above each value, so four different kinds of
   contact detail do not read as one undifferentiated list */
.rs-footer__reach{ display:grid; gap:16px }
.rs-footer__reach li{ margin:0; display:grid; gap:3px }
.rs-footer__k{
  font-size:var(--rs-t-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--rs-on-deep-2);
}
.rs-footer__reach a{ color:#fff }
.rs-footer__reach a:hover{ color:var(--rs-em-on-dark) }

/* ==========================================================================
   ELEMENTOR CO-EXISTENCE
   ========================================================================== */
.elementor-section.elementor-section-boxed>.elementor-container{ max-width:var(--rs-wrap) }
.rs-full-width .rs-main{ padding:0 }
.elementor-widget-container>:last-child{ margin-bottom:0 }

/* ==========================================================================
   PHONES
   ========================================================================== */
@media (max-width:640px){
  :root{ --rs-gut:18px; --rs-header-h:64px }
  .rs-brand__text{ font-size:1rem }
  .rs-brand__text small{ display:none }
  .rs-footer__bottom{ font-size:.72rem }
  .rs-page-header{ padding-top:calc(var(--rs-header-h) + 26px) }
}

/* ==========================================================================
   THE WORDPRESS ADMIN BAR

   The admin bar is a fixed 32px strip, and a header positioned against the
   viewport knows nothing about it — which is why, logged in, the header sat
   underneath it and the navigation was sliced in half. Only logged-in users
   ever see this; a visitor's page is unaffected.
   ========================================================================== */
.admin-bar .rs-header{ top:32px }
.admin-bar.home .rs-header{ top:32px }
.admin-bar.home .rs-header.is-stuck{ top:32px }
@media screen and (max-width:782px){
  .admin-bar .rs-header,
  .admin-bar.home .rs-header,
  .admin-bar.home .rs-header.is-stuck{ top:46px }
}

/* ============================================================== WhatsApp button
   A fixed link in the bottom corner. On a computer the words sit beside the
   circle and slide out on hover; on a phone there is only the circle, because
   a pill wide enough to read would cover the content it is sitting on. */
.rs-wa{
  position:fixed; right:22px; bottom:22px; z-index:900;
  display:inline-flex; align-items:center; gap:0;
  text-decoration:none; color:#fff;
  border-radius:999px;
  background:#25D366;
  box-shadow:0 10px 24px rgba(18,140,70,.34), 0 2px 6px rgba(0,0,0,.12);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.rs-wa:hover,
.rs-wa:focus-visible{
  background:#1FBE59; color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px rgba(18,140,70,.42), 0 3px 8px rgba(0,0,0,.14);
}
.rs-wa:focus-visible{ outline:3px solid var(--rs-brand); outline-offset:3px }

.rs-wa__ic{
  display:grid; place-items:center;
  width:56px; height:56px;
  flex:0 0 56px;
}
.rs-wa__ic svg{ display:block }

/* The label is laid out at zero width and grows on hover, so the button is a
   plain circle at rest and never pushes the layout about. */
.rs-wa__label{
  max-width:0; overflow:hidden; white-space:nowrap;
  font:600 15px/1 var(--rs-sans); letter-spacing:.01em;
  opacity:0;
  transition:max-width .26s ease, opacity .18s ease, padding .26s ease;
  padding:0;
}
.rs-wa:hover .rs-wa__label,
.rs-wa:focus-visible .rs-wa__label{
  max-width:220px; opacity:1; padding:0 4px 0 20px;
}

@media (max-width:782px){
  .rs-wa{ right:16px; bottom:16px }
  .rs-wa__ic{ width:52px; height:52px; flex-basis:52px }
  /* No hover on a touch screen, so the label would never open — and a tap must
     go straight to the chat rather than to a label. */
  .rs-wa__label{ display:none }
}

@media (prefers-reduced-motion:reduce){
  .rs-wa, .rs-wa__label{ transition:none }
  .rs-wa:hover, .rs-wa:focus-visible{ transform:none }
}

@media print{ .rs-wa{ display:none } }

/* ==========================================================================
   TOUCH TARGETS
   ==========================================================================
   Measured on the real page at 375px: "Apply for this" was 23px tall, the
   footer menu and the phone number 27px. Guidance is 44px, which is roughly a
   thumb; a stacked column of 27px links is how somebody taps Contact and lands
   on About.

   Behind (pointer:coarse) so a mouse-driven layout is untouched — on a desktop
   these are precise targets already and padding them out would only loosen the
   footer. */
@media (pointer:coarse){
  .rs-card-item__link{ min-height:44px }

  /* The Explore column is a WordPress menu with no class of its own, so the
     columns are reached through the footer rather than by name. */
  .rs-footer__top li a,
  .rs-mobile li a{
    display:flex; align-items:center; min-height:44px;
  }

  /* The brand is a link too, and it is the one people hit to get home. */
  .rs-brand{ min-height:44px }
}

/* The footer's mark sits in a quieter place than the header's, so it is a size
   down. Height only: a width as well would square off a logo that is not. */
.rs-footer .rs-brand__logo{ max-height:38px; width:auto }
@media (max-width:600px){ .rs-footer .rs-brand__logo{ max-height:32px } }