/*
	Theme Name: Na'amal
	Theme URI:
	Description: Na’amal partners with leading organisations to support refugees through skills training, mentorship and remote work placement opportunities.,
	Version: 1.2
	Author: Re:Coded Labs

	License: MIT
	License URI: http://opensource.org/licenses/mit-license.php
*/

/*------------------------------------*\
    MAIN
\*------------------------------------*/
@import url("https://fonts.googleapis.com/css2?family=Work+Sans:wght@300;400;500;600;700&display=swap");

/* global box-sizing */
*,
*:after,
*:before {
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body {
  font-family: "Inter", sans-serif;
  position: relative;
}
.sectionTitle {
  font-size: 42px;
  text-align: center;
  color: #000000;
}
.IntroPicPos{
	top:10px;
	margin: 3%;
    position: relative;
}

.IntroHeadingPos{
	
            position: relative;
            top: 17px;
            left: 100px;
}

.IntroTrianglePos{
	
            position: absolute;
            top: 510px;
            right: 400px;
}

.sectionMargin {
  margin-top: 180px;
  margin-bottom: 180px;
}
.marginTop50 {
  margin-top: 50px;
}
.fz-18 {
  font-size: 18px;
}

/*------------------------------------*\
    Navigation
\*------------------------------------*/
#header {
  height: 64px;
  width: 100%;
}

.shadowHeader {
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.22);
}
.navbar {
  background-color: #fff;
}

.navbar-brand img {
  height: 50px;
}

.nav .nav-item {
  margin-left: 40px;
}
.nav .nav-item .nav-link {
  color: #333;
  font-weight: 500;
  font-size: 15px;
  line-height: 150%;
}
.nav .nav-item .nav-link:hover {
  text-decoration: none;
  color: #f78e39;
}
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.active,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .show > .nav-link {
  color: #f78e39;
}

.navbar-dark .navbar-toggler {
  color: #333;
}
@media only screen and (max-width: 991px) {
  .navbar-nav {
    margin-top: 20px;
  }
}

/*------------------------------------*\
    Footer
\*------------------------------------*/
footer .style-1 {
  border-top: 1px solid #e6e6e6;
}
footer .copyRights {
  font-weight: 500;
  font-size: 12px;
  color: #939393;
}

.footer-icons {
  display: flex;
  margin-top: 30px;
}
@media only screen and (max-width: 991px) {
  .footerNavLinks {
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 20px;
  }
  .logoAndCopyRights {
    text-align: center;
  }
}

/*------------------------------------*\
    Front Page
\*------------------------------------*/

/* ----------- Intro Section -----------*/
.introHeadCaption h1 {
  font-size: 38px;
  line-height: 1.5em;
  margin-top: 120px;
  color: #000;
}
.introHeadCaption h1 span {
  display: block;
}
.introSecCaption {
  display: inline-block;
  font-size: 18px;
  line-height: 1.5em;
  font-weight: 300;
  width: 65%;
  margin-bottom: 80px;
  color: #241f21;
}

.introContainer {
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  justify-content: flex-end;
}
.col1 {
  display: flex;
  flex-direction: column;
  width: 44%;
}

@media only screen and (max-width: 1200px) {
  .col1 {
    width: 35%;
  }
  .introHeadCaption h1 {
    font-size: 32px;
  }
  .introSecCaption {
    width: 100%;
  }
}

@media only screen and (max-width: 1000px) {
  .introContainer {
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
  .col1 {
    width: 100%;
    text-align: center;
  }
  .introSecCaption {
    padding: 0 30px;
  }
  .introRectangle {
    display: none;
  }
  .intro {
    max-width: 100%;
    height: auto;
  }
}

/* -------------- What We Do Section ------------- */
.whatWeDoBox {
  margin-top: 100px;
}
.whatWeDoSection .whatWeDoBoxHeader {
  font-size: 20px;
  line-height: 32px;
  color: #000;
  margin-top: 20px;
  margin-bottom: 0;
}
.whatWeDoSection .whatWeDoBoxCaption {
  font-weight: 300;
  font-size: 14px;
  color: #000;
}

/* ------------- Our Impact Section -------------- */
.ourImpactContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
}

.exTheProblemSpan {
  font-size: 14px;
  color: #939393;
}
.ourImpactContainer .rightCol {
  margin-left: 50px;
  margin-right: 50px;
  max-width: 540px;
}

.ourImpactTitle {
  line-height: 1.5;
  font-size: 36px;
  color: #241f21;
}
.ourImpactcaption {
  color: #241f21;
  font-size: 18px;
}
a.readOurImpactLink {
  display: inline-block;
  margin-top: 36px;
  font-size: 16px;
  color: #000;
  text-decoration: none;
  border: 1px solid #333;
  border-radius: 50px;
  padding: 16px 36px;
}
a.readOurImpactLink:hover {
  text-decoration: underline;
}

@media only screen and (max-width: 1200px) {
  .ourImpactImg {
    max-width: 500px;
  }
}
@media only screen and (max-width: 991px) {
  .ourImpactContainer {
    flex-direction: column;
  }
  .ourImpactImg {
    max-width: 100%;
    height: auto;
    margin-bottom: 50px;
  }
  .rightCol {
    text-align: center;
  }
}

/* ------------- Our Partners Section -------------- */
.ourPartnersSection .carousel {
  margin: 50px auto 0;
}
.ourPartnersSection .carousel .carousel-item {
  min-height: 260px;
  text-align: center;
  overflow: hidden;
}


.ourPartnersSection .carousel .carousel-item .img-box {
  height: 84px;
  width: 100%;
  position: relative;
  padding-top:20px;
}

.ourPartnersSection .carousel .carousel-item img {
  max-width: 100%;
  max-height: 100%;
  display: inline-block;
  position: absolute;
  bottom: 0;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.ourPartnersSection .carousel .ourPartnersHeader {
  font-size: 20px;
  margin-top: 24px;
  color: #000;
}

.ourPartnersSection .carousel .ourPartnersCaption {
  font-size: 14px;
  font-weight: 300;
  color: #000;
}

.ourPartnersSection .carousel-control-prev,
.ourPartnersSection .carousel-control-next {
  width: 56px;
  height: 56px;
  border: 1px solid #333;
  border-radius: 56px;
}

.ourPartnersSection .carousel-control-next {
  right: 43%;
}
.ourPartnersSection .carousel-control-prev {
  left: 42%;
}

a.getInvolvedLink {
  display: inline-block;
  /* margin-top: 120px; */
  margin-top: 20px;
  font-size: 16px;
  text-decoration: none;
  text-align: center;
  border-radius: 50px;
  padding: 16px 76px;
  background-color: #1e787c;
  color: #fff;
}
a.getInvolvedLink:hover {
  text-decoration: underline;
}


@media only screen and (max-width: 991px) {
  .ourPartnersSection .carousel {
    margin-bottom: 50px;
  }
  .ourPartnersSection .carousel-control-next {
    right: 33%;
  }
  .ourPartnersSection .carousel-control-prev {
    left: 32%;
  }
}

/* ------------- Quotes Section -------------- */
.quotesSection #carouselContent {
  background-color: #ffe4d2;
  min-height: 593px;
  color: #1e787c;
  padding: 100px;
}
.quotesArrows {
  display: flex;
}
.quotesArrows .carousel-control-next,
.quotesArrows .carousel-control-prev {
  position: relative;
  width: 7%;
  margin-right: 10px;
}

.quotesSection .carousel-inner {
  margin-top: 55px;
}

.quotesSection .carousel-inner .carousel-item {
  width: 75%;
}
.quotesSection .carousel-inner .carousel-item h1 {
  margin-bottom: 65px;
}
.quotesSection .carousel-inner .carousel-item p {
  width: 50%;
}

/* ------------- Resources Section -------------- */
.thumbnail {
  min-height: 210px;
  /* max-height: 210px; */
  width: 100%;
}

/*------------------------------------*\
    About Page
\*------------------------------------*/

.teamRow {
  margin-top: 80px;
}
.memberName {
  margin-top: 16px;
  font-size: 20px;
  color: #000;
}
.memberTitle {
  font-size: 14px;
  width: 80%;
  margin: auto;
  font-weight: 300;
  color: #000;
}
.col-xs-15 {
  width: 20%;
}

/*------------------------------------*\
    Our Purpose Page
\*------------------------------------*/
.ourPurposeTitle {
  margin: 120px 0;
}
.ourVisionSection {
  background-color: #ffe4d2;
  padding: 84px;
  color: #1e787c;
}
.getInvolvedLinkOurPurpose {
  margin-bottom: 180px;
}

/*------------------------------------*\
    Our Impact Page
\*------------------------------------*/
.blogPostHeader {
  line-height: 1;
  margin-top: 20px;
  margin-bottom: 4px;
}
.blogPostTitle {
  font-weight: 500;
  font-size: 20px;
  color: #000;
}
.blogPostCaption {
  font-size: 14px;
  color: #241f21;
}
.blogPostDate {
  text-transform: uppercase;
  font-size: 14px;
  color: #7d7d7d;
  letter-spacing: 0.04rem;
}
.getInvolvedLinkBlog {
  margin-bottom: 100px;
}

.catList {
  display: flex;
  list-style: none;
  margin: 40px 0 80px;
  text-align: center;
  justify-content: center;
}

.catList .cat-item-1 {
  display: none;
}

.cat-item {
  margin-right: 24px;
}

.cat-item a {
  border: 1px solid #000;
  border-radius: 25px;
  padding: 15px 20px;
  color: #000;
  font-size: 16px;
  font-weight: 500;
}
.cat-item a:hover,
.current-cat a {
  background-color: #1e787c;
  color: #fff;
  border: 1px solid #1e787c;
  text-decoration: none;
}

@media only screen and (max-width: 992px) {
  .catList {
    flex-direction: column;
  }

  .cat-item {
    margin-right: 0;
    margin-bottom: 50px;
  }
}

/*------------------------------------*\
    Single Post Page
\*------------------------------------*/
.singlePost {
  color: #000;
}
.singlePost .postTitle a {
  display: inline-block;
  margin-top: 100px;
  color: #000;
}
.singlePost p {
  font-size: 18px;
  text-align: left;
}
.singlePost p > img {
  margin: 20px 0;
}

.shareOnSocialMedia {
  margin-top: 180px;
  font-size: 24px;
}

.socialLinks {
  margin-bottom: 180px;
}

.socialLinks li {
  display: inline-block;
  margin: 17px;
}

.socialLinks li a {
  border: 1px solid #e6e6e6;
  padding: 20px;
  border-radius: 30px;
  color: #333;
}

.socialLinks li a img {
  margin-right: 10px;
}

/*------------------------------------*\
    Get Involved Page
\*------------------------------------*/
.getInvolved {
  margin-bottom: 180px;
}
div.wpforms-container-full .wpforms-form input:not([type="checkbox"]) {
  height: 56px !important;
}
div.wpforms-container-full .wpforms-form input {
  padding: 16px 20px !important;
}
div.wpforms-container-full .wpforms-form textarea {
  min-height: 200px !important;
}
div.wpforms-container-full .wpforms-form input,
div.wpforms-container-full .wpforms-form textarea {
  border: 1px solid #e6e6e6 !important;
  box-sizing: border-box !important;
  border-radius: 12px !important;
}

div.wpforms-container-full .wpforms-form input:focus,
div.wpforms-container-full .wpforms-form textarea:focus {
  border: 1px solid #f59c50 !important;
  box-shadow: 0 0 3pt 2pt rgba(247, 143, 56, 0.16);
}

div.wpforms-container-full .wpforms-form button[type="submit"] {
  margin-top: 48px;
  font-size: 16px !important;
  background: transparent !important;
  padding: 10px 73px !important;
  border: 1px solid #000000 !important;
  border-radius: 69px !important;
  color: #000 !important;
}

/* Our Impact page */
article#post-1 {
  max-width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

article#post-2 {
  max-width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

article#post-3 {
  max-width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
/*
 * 
 * the code for content full width*/

.alignwide { margin-left: 0px; width: calc(100% + 50px); max-width: calc(100% + 50px);
}
.alignfull {	margin-left: calc( -100vw / 2 + 100% / 2 );	margin-right: calc( -100vw / 2 + 100% / 2 );	max-width: 100vw;	width: auto;
}

/* Position the blue rectangle behind the intro text */
.col1 {
    position: relative;  /* needed so the rectangle stays inside */
}

/* Disabled. Kept for reference; the inner notes were removed because CSS
   comments cannot nest, which previously broke the rule following this block.
   .introRectangle {
     position: absolute;
     bottom: 0;
     right: 0;
     z-index: -1;
     width: 700px;
     height: 150px;
     border-radius: 10px;
   }
*/

/* .custom-built {
  text-align: center;
}


@media only screen and (min-width: 1024px) {
  .custom-built {
    text-align: right;
    padding-right: 35px;
  }
} */


/*------------------------------------*\
    BRAND TOKENS
\*------------------------------------*/

/* Palette is taken verbatim from the brand guidelines. The guidelines reserve
   orange/peach for Na'amal Agency, so on naamal.org the greens lead and the
   warm tones are used only as supporting accents. */
:root {
  --nm-teal: #1e787c;
  --nm-teal-dark: #003d40;
  --nm-teal-soft: #e6f1f1;
  --nm-orange: #e36307;
  /* Darkened brand orange, used only where small text needs 4.5:1 contrast. */
  --nm-orange-dark: #b34b05;
  --nm-peach: #feeadc;
  --nm-ink: #241f21;
  --nm-muted: #5f585b;
  --nm-line: #ece7e3;
  --nm-cream: #fffdfb;

  --nm-radius: 22px;
  --nm-radius-lg: 32px;

  --nm-shadow-sm: 0 4px 16px rgba(36, 31, 33, 0.05);
  --nm-shadow: 0 18px 44px rgba(36, 31, 33, 0.09);
  --nm-shadow-lg: 0 30px 70px rgba(0, 61, 64, 0.18);

  --nm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}


/* Work Sans is the brand typeface, so it is applied site-wide. This is the one
   rule here that reaches beyond the homepage; scope it to `.nm-home` instead if
   you want the rest of the site left on Inter for now. */
body {
  font-family: "Work Sans", "Inter", sans-serif;
}


/*------------------------------------*\
    PAGE SHELL
\*------------------------------------*/
/* .nm-home is the homepage's own shell class (its scroll-reveal script keys off
   it). Every other template puts .nm-page on <main> to inherit the same base,
   so this list doesn't have to grow with each new page. */
.nm-home,
.nm-page {
  background-color: var(--nm-cream);
  color: var(--nm-ink);
  overflow-x: clip;
}

.nm-home *,
.nm-home *::before,
.nm-home *::after,
.nm-page *,
.nm-page *::before,
.nm-page *::after {
  box-sizing: border-box;
}

.nm-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}

.nm-section {
  padding: clamp(72px, 9vw, 130px) 0;
}

/* For a section that reads as a continuation of the one above it, rather than
   as a new band of the page. */
.nm-section--tight {
  padding-top: 0;
}


/*------------------------------------*\
    SHARED TYPE
\*------------------------------------*/
.nm-eyebrow {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nm-orange-dark);
}

.nm-sectionHead {
  max-width: 720px;
  margin: 0 auto clamp(48px, 6vw, 76px);
  text-align: center;
}

.nm-sectionTitle {
  margin: 0 0 18px;
  font-size: clamp(2rem, 3.6vw, 2.85rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--nm-ink);
}

.nm-sectionLead {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-muted);
}

.nm-mark {
  white-space: nowrap;
  background-image: linear-gradient(
    to top,
    rgba(227, 99, 7, 0.26) 0,
    rgba(227, 99, 7, 0.26) 0.3em,
    transparent 0.3em
  );
}


/*------------------------------------*\
    BUTTONS
\*------------------------------------*/
.nm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 15px 34px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: transform 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease),
    background-color 0.25s var(--nm-ease), color 0.25s var(--nm-ease),
    border-color 0.25s var(--nm-ease);
}

.nm-btn:hover,
.nm-btn:focus {
  text-decoration: none;
  transform: translateY(-2px);
}

.nm-btn:focus-visible {
  outline: 3px solid rgba(247, 142, 57, 0.45);
  outline-offset: 3px;
}

.nm-btn--primary {
  background-color: var(--nm-teal);
  color: #fff;
  box-shadow: 0 12px 26px rgba(30, 120, 124, 0.26);
}
.nm-btn--primary:hover,
.nm-btn--primary:focus {
  background-color: var(--nm-teal-dark);
  color: #fff;
  box-shadow: 0 18px 34px rgba(30, 120, 124, 0.32);
}

.nm-btn--ghost,
.nm-btn--outline {
  background-color: transparent;
  border-color: rgba(36, 31, 33, 0.22);
  color: var(--nm-ink);
}
.nm-btn--ghost:hover,
.nm-btn--ghost:focus,
.nm-btn--outline:hover,
.nm-btn--outline:focus {
  border-color: var(--nm-teal);
  background-color: var(--nm-teal-soft);
  color: var(--nm-teal-dark);
}

/* Sits on the peach CTA panel, so it needs a solid fill rather than a tint. */
.nm-btn--onPeach {
  background-color: transparent;
  border-color: var(--nm-teal-dark);
  color: var(--nm-teal-dark);
}
.nm-btn--onPeach:hover,
.nm-btn--onPeach:focus {
  background-color: var(--nm-teal-dark);
  border-color: var(--nm-teal-dark);
  color: #fff;
}


/*------------------------------------*\
    NAVIGATION
\*------------------------------------*/
/* The bar itself is position:fixed, so #header is only a spacer holding its
   place in the flow. It was 64px against a bar that renders 76px, so the top
   12px of every inner page sat underneath the bar. The two are now tied to one
   value; change --nm-navH and both follow.

   All destinations except Donate live behind the expandable menu button on
   every viewport. Donate stays in the top bar next to that button. */
:root {
  --nm-navH: 70px;
  /* Horizontal breathing room inside the bar. Held in a variable because the
     open menu panel has to cancel it out to reach the window edges. */
  --nm-navPad: clamp(16px, 2.2vw, 36px);
}

/* The +1px is the bar's bottom hairline, which sits outside its min-height. */
#header {
  height: calc(var(--nm-navH) + 1px);
}

#stickyNav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
  padding: 0;
  background-color: rgba(255, 253, 251, 0.88);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: background-color 0.3s var(--nm-ease), box-shadow 0.3s var(--nm-ease),
    border-color 0.3s var(--nm-ease);
}

/* footer.php has an inline script that adds .shadowHeader as soon as the page
   is scrolled away from the top. */
.shadowHeader {
  background-color: rgba(255, 253, 251, 0.96);
  border-bottom-color: var(--nm-line);
  box-shadow: 0 10px 30px rgba(36, 31, 33, 0.08);
}

#stickyNav .container {
  position: relative;
  display: flex;
  /* Keep logo + Donate + menu on one row at every width (menu panel is
     absolutely positioned, so it does not need a wrap slot). */
  flex-wrap: nowrap;
  align-items: center;
  min-height: var(--nm-navH);
  max-width: 100%;
  padding: 0 var(--nm-navPad);
}

#stickyNav .navbar-brand {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  margin-right: 12px;
}

#stickyNav .navbar-brand img {
  display: block;
  height: 44px;
  width: auto;
  max-width: 100%;
}

.nm-nav__actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  margin-left: 0;
}

/* Donate sits outside the collapse so it is always visible. Additional CSS
   still styles `.custom-donate`; keep that class on the standalone link. */
#stickyNav .nm-navDonate,
#stickyNav a.custom-donate {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--nm-teal);
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 8px 20px rgba(30, 120, 124, 0.26);
  transition: background-color 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease),
    transform 0.25s var(--nm-ease);
}

@media (min-width: 768px) {
  #stickyNav .nm-navDonate,
  #stickyNav a.custom-donate {
    padding: 12px 26px;
    font-size: 15px;
  }
}

#stickyNav .nm-navDonate:hover,
#stickyNav .nm-navDonate:focus,
#stickyNav a.custom-donate:hover,
#stickyNav a.custom-donate:focus {
  background-color: var(--nm-teal-dark);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(30, 120, 124, 0.32);
}

.nav .nav-item .nav-link {
  color: var(--nm-ink);
  font-weight: 500;
  letter-spacing: -0.01em;
  transition: color 0.25s var(--nm-ease);
}

.nav .nav-item .nav-link:hover,
.nav .nav-item .nav-link:focus {
  color: var(--nm-teal);
  text-decoration: none;
}

.navbar-light .navbar-nav .nav-item.active > .nav-link,
.navbar-light .navbar-nav .nav-item .nav-link.active,
.navbar-light .navbar-nav .nav-item.show > .nav-link {
  color: var(--nm-teal);
}

#stickyNav .nav-link:focus-visible,
#stickyNav .navbar-brand:focus-visible,
#stickyNav .navbar-toggler:focus-visible,
#stickyNav .nm-navDonate:focus-visible {
  outline: 3px solid rgba(30, 120, 124, 0.4);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Menu button — always visible (no expand breakpoint). */
#stickyNav .navbar-toggler {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 42px;
  padding: 0;
  border: 1px solid var(--nm-line);
  border-radius: 12px;
  background-color: #fff;
  transition: border-color 0.25s var(--nm-ease);
}

#stickyNav .navbar-toggler:hover {
  border-color: var(--nm-teal);
}

#stickyNav .navbar-toggler-icon {
  position: relative;
}

#stickyNav .navbar-toggler-icon,
#stickyNav .navbar-toggler-icon::before,
#stickyNav .navbar-toggler-icon::after {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background-color: var(--nm-ink);
  background-image: none;
  transition: transform 0.3s var(--nm-ease), background-color 0.2s var(--nm-ease);
}

#stickyNav .navbar-toggler-icon::before,
#stickyNav .navbar-toggler-icon::after {
  content: "";
  position: absolute;
  left: 0;
}

#stickyNav .navbar-toggler-icon::before {
  transform: translateY(-6px);
}

#stickyNav .navbar-toggler-icon::after {
  transform: translateY(6px);
}

#stickyNav .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
  background-color: transparent;
}

#stickyNav .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before {
  transform: rotate(45deg);
}

#stickyNav .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after {
  transform: rotate(-45deg);
}

/* Expandable list panel under the bar — same floating panel on mobile and
   desktop so the header never grows to two rows when the menu opens. */
#stickyNav .navbar-collapse {
  position: absolute;
  top: 100%;
  right: var(--nm-navPad);
  left: auto;
  width: min(360px, calc(100vw - (var(--nm-navPad) * 2)));
  max-height: calc(100vh - var(--nm-navH) - 12px);
  overflow-y: auto;
  margin: 8px 0 0;
  padding: 12px 18px 16px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: var(--nm-cream);
  box-shadow: var(--nm-shadow);
}

#stickyNav .navbar-collapse.collapsing,
#stickyNav .navbar-collapse.show {
  display: block;
}

.navbar-nav {
  margin-top: 0;
}

#stickyNav .navbar-nav {
  align-items: stretch;
  width: 100%;
}

#stickyNav .nav .nav-item {
  margin: 0;
  padding: 0;
}

#stickyNav .nav .nav-item .nav-link {
  display: block;
  padding: 12px 8px;
  border-bottom: 1px solid var(--nm-line);
  font-size: 1rem;
  font-weight: 500;
}

#stickyNav .nav .nav-item:last-child .nav-link {
  border-bottom: 0;
}


/*------------------------------------*\
    HERO
\*------------------------------------*/
.nm-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(130px, 15vh, 175px) 0 clamp(70px, 9vw, 120px);
  background:
    radial-gradient(60% 60% at 12% 0%, rgba(254, 234, 220, 0.8) 0%, rgba(254, 234, 220, 0) 70%),
    radial-gradient(50% 50% at 95% 25%, rgba(230, 241, 241, 0.85) 0%, rgba(230, 241, 241, 0) 70%),
    var(--nm-cream);
}

.nm-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(40px, 6vw, 84px);
}

.nm-hero__title {
  margin: 0 0 24px;
  font-size: clamp(2.35rem, 4.9vw, 3.9rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--nm-ink);
}

.nm-hero__titleLine {
  display: block;
  margin-top: 0.12em;
}

.nm-hero__lead {
  max-width: 46ch;
  margin: 0 0 38px;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-muted);
}

.nm-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* --- Hero visual --- */
.nm-hero__media {
  position: relative;
  isolation: isolate;
}

.nm-hero__frame {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: var(--nm-radius-lg);
  box-shadow: var(--nm-shadow-lg);
}

.nm-hero__frame img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 5 / 4;
  object-fit: cover;
  transform: scale(1.001);
  transition: transform 0.9s var(--nm-ease);
}

.nm-hero__media:hover .nm-hero__frame img {
  transform: scale(1.045);
}

.nm-hero__shape {
  position: absolute;
  z-index: 1;
  left: -34px;
  bottom: -34px;
  width: clamp(140px, 20vw, 230px);
  height: clamp(140px, 20vw, 230px);
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal);
}

.nm-hero__dots {
  position: absolute;
  z-index: 1;
  top: -30px;
  right: -26px;
  width: 132px;
  height: 132px;
  background-image: radial-gradient(var(--nm-orange) 1.8px, transparent 1.9px);
  background-size: 15px 15px;
  opacity: 0.45;
}


/*------------------------------------*\
    WHAT WE DO
\*------------------------------------*/
.nm-cardGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(232px, 1fr));
  gap: 26px;
}

.nm-card {
  padding: 34px 28px 30px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-card:hover {
  transform: translateY(-8px);
  border-color: rgba(30, 120, 124, 0.28);
  box-shadow: var(--nm-shadow);
}

.nm-card__icon {
  margin-bottom: 24px;
}

.nm-card__icon img {
  display: block;
  width: 88px;
  height: 88px;
  object-fit: contain;
}

.nm-card__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--nm-ink);
}

.nm-card__text {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-muted);
}


/*------------------------------------*\
    WHY REMOTE WORK
\*------------------------------------*/
.nm-impact {
  background-color: #fff;
  border-top: 1px solid var(--nm-line);
  border-bottom: 1px solid var(--nm-line);
}

.nm-impact__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  align-items: center;
  gap: clamp(40px, 6vw, 80px);
}

.nm-impact__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nm-radius-lg);
  box-shadow: var(--nm-shadow);
}

.nm-impact__title {
  margin: 0 0 22px;
  font-size: clamp(1.75rem, 3.1vw, 2.5rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: var(--nm-ink);
}

.nm-impact__text {
  margin: 0 0 18px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--nm-muted);
}

.nm-impact__copy .nm-btn {
  margin-top: 18px;
}


/*------------------------------------*\
    QUOTES
\*------------------------------------*/
.nm-quotes__panel {
  position: relative;
  padding: clamp(44px, 6vw, 84px);
  border-radius: var(--nm-radius-lg);
  background:
    radial-gradient(75% 120% at 88% 0%, rgba(30, 120, 124, 0.55) 0%, rgba(30, 120, 124, 0) 62%),
    var(--nm-teal-dark);
  overflow: hidden;
}

.nm-quotes__panel::before {
  content: "\201C";
  position: absolute;
  top: 0;
  right: 0.08em;
  font-size: clamp(8rem, 14vw, 13rem);
  font-family: Georgia, "Times New Roman", serif;
  line-height: 1;
  color: #fff;
  opacity: 0.14;
  pointer-events: none;
}

/* Every slide sits in the same grid cell, so the panel is always as tall as the
   longest quote and does not resize as the slides change. Centring keeps the
   leftover space on a short quote balanced instead of dumping it all below. */
.nm-quotes__inner {
  position: relative;
  z-index: 1;
  display: grid;
  align-items: center;
  min-height: clamp(240px, 22vw, 300px);
}

.nm-quotes__slide {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s var(--nm-ease), visibility 0.5s var(--nm-ease);
}

.nm-quotes__slide.is-active {
  opacity: 1;
  visibility: visible;
}

.nm-quote {
  max-width: 62ch;
  margin: 0;
}

.nm-quote__text {
  margin: 0 0 34px;
  font-size: clamp(1.3rem, 2.15vw, 1.85rem);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -0.015em;
  color: #fff;
}

.nm-quote__by {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
  border-left: 3px solid var(--nm-orange);
}

.nm-quote__name {
  font-size: 1.0625rem;
  font-weight: 600;
  font-style: normal;
  color: #fff;
}

.nm-quote__role {
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.75);
}

/* Controls sit in normal flow so a long quote can never run underneath them. */
.nm-quotes__controls {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 44px;
}

.nm-quotes__nav {
  display: flex;
  gap: 12px;
}

.nm-quotes__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  padding: 0;
  appearance: none;
  border: 1.5px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  color: #fff;
  background-color: transparent;
  cursor: pointer;
  transition: background-color 0.25s var(--nm-ease), color 0.25s var(--nm-ease),
    transform 0.25s var(--nm-ease);
}

.nm-quotes__arrow svg {
  width: 22px;
  height: 22px;
}

.nm-quotes__arrow:hover,
.nm-quotes__arrow:focus {
  background-color: #fff;
  border-color: #fff;
  color: var(--nm-teal-dark);
  transform: translateY(-2px);
}

.nm-quotes__dots {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nm-quotes__dot {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  appearance: none;
  border: 0;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.35;
  cursor: pointer;
  transition: width 0.3s var(--nm-ease), opacity 0.3s var(--nm-ease);
}

.nm-quotes__dot:hover,
.nm-quotes__dot:focus {
  opacity: 0.7;
}

/* Last so it wins over the hover state at equal specificity. */
.nm-quotes__dot.is-active {
  width: 28px;
  border-radius: 999px;
  opacity: 1;
}


/*------------------------------------*\
    PARTNER LOGOS
\*------------------------------------*/
/* Full-bleed strip that scrolls continuously. It sits outside .nm-container so
   the logos run edge to edge; the mask fades them out at both ends. */
.nm-marquee {
  position: relative;
  overflow: hidden;
  padding: 8px 0;
  -webkit-mask-image: linear-gradient(
    to right, transparent 0, #000 7%, #000 93%, transparent 100%
  );
  mask-image: linear-gradient(
    to right, transparent 0, #000 7%, #000 93%, transparent 100%
  );
}

.nm-marquee__track {
  display: flex;
  width: max-content;
  animation: nm-marquee-scroll 40s linear infinite;
}

/* Pause so a visitor can read a logo they are pointing at. */
.nm-marquee:hover .nm-marquee__track,
.nm-marquee:focus-within .nm-marquee__track {
  animation-play-state: paused;
}

.nm-marquee__group {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Spacing is a margin on each item, not a flex gap. A gap would not be applied
   between the two copies, making the join visibly wider than the other gaps. */
.nm-logo {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  margin-right: clamp(48px, 6vw, 96px);
}

.nm-logo img {
  width: auto;
  height: 54px;
  max-width: 230px;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.6;
  transition: filter 0.35s var(--nm-ease), opacity 0.35s var(--nm-ease);
}

.nm-logo:hover img {
  filter: grayscale(0);
  opacity: 1;
}

.nm-logo__name {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
  white-space: nowrap;
  color: var(--nm-muted);
}

/* The track holds four identical copies, so -25% is exactly one copy's width.
   That lands on the start of the next copy, making the reset invisible. Keep
   this in sync with the copy count in front-page.php. */
@keyframes nm-marquee-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}


/*------------------------------------*\
    CLOSING CTA
\*------------------------------------*/
.nm-ctaSection {
  padding-top: 0;
}

.nm-cta {
  padding: clamp(52px, 7vw, 88px) clamp(28px, 6vw, 72px);
  border-radius: var(--nm-radius-lg);
  text-align: center;
  background-color: var(--nm-peach);
}

.nm-cta__title {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--nm-teal-dark);
}

.nm-cta__text {
  max-width: 56ch;
  margin: 0 auto 36px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-ink);
}

.nm-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}


/*------------------------------------*\
    SCROLL REVEAL
\*------------------------------------*/
/* The hidden state is applied by JS (.nm-anim) so that content stays fully
   visible if scripts are blocked or fail. */
.nm-reveal {
  transition: opacity 0.75s var(--nm-ease), transform 0.75s var(--nm-ease);
}

.nm-anim .nm-reveal {
  opacity: 0;
  transform: translateY(26px);
}

.nm-anim .nm-reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* Cards are both reveal targets and hover targets, so they need a single
   transition list and a hover rule that outranks .nm-reveal.is-visible. */
.nm-cardGrid .nm-card {
  transition: opacity 0.55s var(--nm-ease), transform 0.45s var(--nm-ease),
    box-shadow 0.35s var(--nm-ease), border-color 0.35s var(--nm-ease);
}

.nm-cardGrid .nm-card:hover {
  transform: translateY(-8px);
}

.nm-cardGrid .nm-card:nth-child(2) {
  transition-delay: 0.09s;
}
.nm-cardGrid .nm-card:nth-child(3) {
  transition-delay: 0.18s;
}
.nm-cardGrid .nm-card:nth-child(4) {
  transition-delay: 0.27s;
}

@media (prefers-reduced-motion: reduce) {
  .nm-home *,
  .nm-home *::before,
  .nm-home *::after,
  .nm-page *,
  .nm-page *::before,
  .nm-page *::after {
    animation-duration: 0.001ms !important;
    /* Without this, an infinite animation restarts every 0.001ms and strobes
       instead of stopping. */
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .nm-anim .nm-reveal {
    opacity: 1;
    transform: none;
  }
  /* Park the logo strip and let it be scrolled by hand instead. */
  .nm-marquee {
    overflow-x: auto;
  }
  .nm-marquee__track {
    animation: none !important;
  }
  .nm-marquee__group[aria-hidden="true"] {
    display: none;
  }
}


/*------------------------------------*\
    THANK YOU PAGE
\*------------------------------------*/
/* Kept self-contained, including its own breakpoint, because this template is
   the landing spot for the Mailchimp confirmation redirect and nothing else. */
.nm-thanks__section {
  padding-top: clamp(96px, 10vw, 150px);
}

.nm-thanks__panel {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(52px, 7vw, 80px) clamp(28px, 6vw, 72px);
  border-radius: var(--nm-radius-lg);
  text-align: center;
  background-color: var(--nm-peach);
}

/* Block-level so the badge takes a line of its own above the eyebrow rather
   than sitting alongside it. */
.nm-thanks__badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 66px;
  height: 66px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background-color: var(--nm-teal);
  color: #fff;
  box-shadow: 0 12px 26px rgba(30, 120, 124, 0.26);
}

.nm-thanks__title {
  margin: 0 0 16px;
  font-size: clamp(1.75rem, 3.2vw, 2.6rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: -0.02em;
  color: var(--nm-teal-dark);
}

.nm-thanks__text {
  max-width: 52ch;
  margin: 0 auto 36px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-ink);
}

.nm-thanks__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

.nm-thanks__note {
  margin: 28px 0 0;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--nm-muted);
}

.nm-thanks__note a {
  color: var(--nm-teal-dark);
  text-decoration: underline;
}

/* auto-fit means the row collapses to two cards, then one, without a
   breakpoint of its own. */
.nm-thanks__links {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  max-width: 760px;
  margin: clamp(36px, 5vw, 60px) auto 0;
  padding: 0;
  list-style: none;
}

.nm-thanks__links a {
  display: block;
  height: 100%;
  padding: 26px 28px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  text-decoration: none;
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-thanks__links a:hover,
.nm-thanks__links a:focus {
  transform: translateY(-4px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
  text-decoration: none;
}

.nm-thanks__linkTitle {
  display: block;
  margin-bottom: 8px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
}

.nm-thanks__linkText {
  display: block;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--nm-muted);
}


/*------------------------------------*\
    RESEARCH PAGE
\*------------------------------------*/
/* Publication index. The brand guidelines reserve orange and peach for Na'amal
   Agency, so the greens lead here and peach appears only as an accent on the
   dark featured panel. */
.nm-research__head {
  padding-top: clamp(96px, 10vw, 150px);
  padding-bottom: clamp(32px, 4vw, 52px);
}

.nm-pageHead {
  max-width: 760px;
}

.nm-pageTitle {
  margin: 0 0 20px;
  font-size: clamp(2.25rem, 4.4vw, 3.4rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--nm-ink);
}

.nm-pageLead {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-muted);
}

/* Screen-reader-only text, defined here rather than borrowing Bootstrap's
   .sr-only so the pages don't depend on the CDN stylesheet loading. */
.nm-srOnly {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  white-space: nowrap;
  border: 0;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
}


/* Featured report
   ------------------------------------ */
/* The actions column is sized to the button rather than given a share of the
   panel, so the report title gets the rest of the width. */
.nm-featured {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
  padding: clamp(40px, 5vw, 68px) clamp(28px, 4.5vw, 64px);
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal-dark);
  color: #fff;
  box-shadow: var(--nm-shadow-lg);
}

.nm-featured__icon {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 88px;
  height: 88px;
  border-radius: 24px;
  background-color: rgba(254, 234, 220, 0.12);
  border: 1px solid rgba(254, 234, 220, 0.28);
  color: var(--nm-peach);
}

.nm-featured__icon .nm-icon {
  width: 40px;
  height: 40px;
}

.nm-featured__tag {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--nm-peach);
}

.nm-featured__title {
  margin: 0 0 14px;
  font-size: clamp(1.55rem, 2.9vw, 2.3rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #fff;
}

.nm-featured__meta {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.72);
}

.nm-featured__text {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.88);
}

.nm-featured__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

/* White fill so the button still reads as primary against the dark panel. */
.nm-btn--onDark {
  background-color: #fff;
  border-color: #fff;
  color: var(--nm-teal-dark);
}
.nm-btn--onDark:hover,
.nm-btn--onDark:focus {
  background-color: var(--nm-peach);
  border-color: var(--nm-peach);
  color: var(--nm-teal-dark);
}


/* Publication groups
   ------------------------------------ */
.nm-pubGroup + .nm-pubGroup {
  margin-top: clamp(56px, 7vw, 92px);
}

.nm-pubGroup__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  margin-bottom: clamp(26px, 3vw, 38px);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--nm-line);
}

.nm-pubGroup__title {
  margin: 0;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--nm-ink);
}

.nm-pubGroup__count {
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--nm-muted);
}


/* Report cards
   ------------------------------------ */
.nm-pubGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-pub {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 30px 26px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  text-decoration: none;
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-pub:hover,
.nm-pub:focus {
  transform: translateY(-4px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
  text-decoration: none;
}

.nm-pub__type {
  display: inline-block;
  align-self: flex-start;
  margin-bottom: 16px;
  padding: 5px 12px;
  border-radius: 999px;
  background-color: var(--nm-teal-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--nm-teal-dark);
}

.nm-pub__title {
  margin: 0 0 10px;
  font-size: 1.1875rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--nm-ink);
}

.nm-pub__meta {
  margin: 0 0 14px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nm-teal);
}

.nm-pub__text {
  margin: 0 0 22px;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--nm-muted);
}

/* Pushed to the bottom so the cue sits on one line across a row of cards
   whatever length the summaries are. */
.nm-pub__cue {
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
}

.nm-pub__cue::after {
  content: "\2192";
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.35s var(--nm-ease);
}

.nm-pub:hover .nm-pub__cue::after {
  transform: translateX(4px);
}


/* Article list
   ------------------------------------ */
.nm-artList {
  padding: 0;
  margin: 0;
  list-style: none;
  border-top: 1px solid var(--nm-line);
}

.nm-art {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px 24px;
  align-items: center;
  padding: 24px 20px;
  border-bottom: 1px solid var(--nm-line);
  text-decoration: none;
  transition: background-color 0.3s var(--nm-ease),
    padding-left 0.3s var(--nm-ease);
}

.nm-art:hover,
.nm-art:focus {
  background-color: var(--nm-teal-soft);
  padding-left: 28px;
  text-decoration: none;
}

.nm-art__title {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.4;
  color: var(--nm-ink);
}

.nm-art:hover .nm-art__title,
.nm-art:focus .nm-art__title {
  color: var(--nm-teal-dark);
}

.nm-art__meta {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 300;
  color: var(--nm-muted);
}

.nm-art__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1px solid var(--nm-line);
  color: var(--nm-teal-dark);
  transition: transform 0.3s var(--nm-ease),
    background-color 0.3s var(--nm-ease), border-color 0.3s var(--nm-ease);
}

.nm-art:hover .nm-art__arrow,
.nm-art:focus .nm-art__arrow {
  transform: translateX(4px);
  border-color: var(--nm-teal);
  background-color: #fff;
}

/* The featured panel's two columns stop working well before the site's main
   991px breakpoint, so this section carries its own. */
@media only screen and (max-width: 860px) {
  .nm-featured {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
  .nm-art {
    padding-left: 6px;
    padding-right: 6px;
  }
  .nm-art:hover,
  .nm-art:focus {
    padding-left: 12px;
  }
}


/*------------------------------------*\
    RESPONSIVE
\*------------------------------------*/
@media only screen and (max-width: 991px) {
  .nm-hero {
    padding-top: 118px;
    text-align: center;
  }
  .nm-hero__grid,
  .nm-impact__grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nm-hero__media {
    max-width: 560px;
    margin: 12px auto 0;
  }
  .nm-hero__lead {
    margin-left: auto;
    margin-right: auto;
  }
  .nm-hero__actions {
    justify-content: center;
  }
  .nm-hero__shape {
    left: -20px;
    bottom: -20px;
  }
  .nm-hero__dots {
    top: -18px;
    right: -14px;
    width: 96px;
    height: 96px;
  }
  .nm-impact__copy {
    text-align: center;
  }
  .nm-impact__media {
    max-width: 560px;
    margin: 0 auto;
  }
  .nm-quotes__inner {
    min-height: 0;
  }
  .nm-quote {
    margin: 0 auto;
  }
  .nm-quotes__controls {
    flex-direction: column;
    align-items: center;
    gap: 22px;
  }
  .nm-quotes__dots {
    justify-content: center;
  }
}

@media only screen and (max-width: 575px) {
  .nm-container {
    padding: 0 18px;
  }
  .nm-hero__actions .nm-btn,
  .nm-cta__actions .nm-btn {
    width: 100%;
  }
  .nm-cardGrid {
    grid-template-columns: minmax(0, 1fr);
  }
  .nm-logo {
    margin-right: 40px;
  }
  .nm-logo img {
    height: 42px;
    max-width: 170px;
  }
  .nm-quotes__panel {
    border-radius: var(--nm-radius);
  }
}


/*------------------------------------*\
    FOOTER
\*------------------------------------*/

/* Everything above this point only touches the homepage. footer.php is shared
   by every page, so this block is the one section that changes the whole site.
   It needs no template edits — the existing markup is re-laid-out with CSS.

   Deep teal is the brand's primary colour and gives the page a proper anchor.
   The Na'amal logo and the social icons are flat dark artwork, so they are
   knocked out to white with a filter rather than swapped for new files.

   Every selector is anchored to `body > footer`. The quote attributions in the
   homepage carousel are <footer> elements too, so a bare `footer` selector
   would repaint those as well. */

body > footer {
  background-color: var(--nm-teal-dark);
  color: rgba(255, 255, 255, 0.72);
  padding: clamp(54px, 6vw, 88px) 0 clamp(26px, 3vw, 36px);
  font-size: 15px;
  line-height: 1.6;
}

body > footer *,
body > footer *::before,
body > footer *::after {
  box-sizing: border-box;
}

body > footer .container {
  max-width: 1200px;
  padding: 0 24px;
}

/* The theme's grey hairline is invisible here — the colour change now does the
   job of separating the footer from the page. */
body > footer .style-1 {
  display: none;
}

/* Small uppercase labels above the newsletter form and the social row. The
   markup has no headings to hang them on, so they are generated. */
body > footer .naamal-subscription::before,
body > footer .pathway-footer-link::before,
body > footer .footer-icons::before {
  display: block;
  margin-bottom: 16px;
  color: rgba(255, 255, 255, 0.55);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1.4;
  text-transform: uppercase;
}

/* --- Column 1: logos --- */
body > footer a.navbar-brand {
  display: inline-block;
  margin: 0;
  padding: 0;
}
body > footer a.navbar-brand img {
  height: 46px;
  filter: brightness(0) invert(1);
}

/* The Social Enterprise UK mark sits in its own .navbar-brand wrapper. It is a
   detailed badge rather than a flat silhouette, so knocking it out to white
   would destroy it — it gets a white chip to sit on instead. */
body > footer div.navbar-brand {
  display: block;
  margin: 26px 0 0;
  padding: 0;
}
body > footer div.navbar-brand img {
  width: 64px;
  height: auto;
  padding: 7px;
  border-radius: 50%;
  background-color: #fff;
  opacity: 0.82;
  transition: opacity 0.3s var(--nm-ease);
}
body > footer div.navbar-brand img:hover {
  opacity: 1;
}

/* --- Column 2: newsletter --- */
body > footer .naamal-subscription {
  text-align: left;
}
body > footer .naamal-subscription::before {
  content: "Stay in touch";
}
body > footer .naamal-subscription label {
  display: block;
  margin: 0;
  width: 100%;
}
body > footer .mc4wp-form-fields p {
  margin: 0 0 12px;
}
body > footer .mc4wp-form-fields p:last-child {
  margin: 0;
}

/* The theme sets these with !important from the Customizer, so matching
   !important is the only way to override them. */
body > footer .naamal-subscription-input {
  height: 52px !important;
  padding: 0 22px !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  border-radius: 999px !important;
  background-color: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 15px;
  transition: border-color 0.3s var(--nm-ease), background-color 0.3s var(--nm-ease);
}
body > footer .naamal-subscription-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
body > footer .naamal-subscription-input:focus {
  border-color: rgba(255, 255, 255, 0.75) !important;
  background-color: rgba(255, 255, 255, 0.13);
  outline: 2px solid rgba(255, 255, 255, 0.3);
  outline-offset: 2px;
}

/* Peach on deep teal clears 4.5:1 comfortably and echoes the CTA panel above. */
body > footer .naamal-subscription-btn {
  padding: 14px 36px !important;
  border: 1px solid transparent !important;
  border-radius: 999px !important;
  background-color: var(--nm-peach) !important;
  color: var(--nm-teal-dark) !important;
  font-size: 15px !important;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.3s var(--nm-ease), background-color 0.3s var(--nm-ease);
}
body > footer .naamal-subscription-btn:hover {
  background-color: #fff !important;
  transform: translateY(-2px);
}

body > footer .mc4wp-response {
  margin-top: 12px;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

/* --- Column 3: Pathway + social --- */

/* Wrapper left behind by the footer menu, which has no menu assigned. It can't
   be matched with :empty because it contains whitespace, and when logged in as
   an admin WordPress puts an "Add a menu" link inside it. Hidden only while it
   holds no real content, so assigning a footer menu later still works. */
body > footer .col-lg-6 > div:first-child:not(:has(a, ul, nav)) {
  display: none;
}

/* When an admin is logged in the wrapper is not empty: the theme's nav walker
   drops an "Add a menu" link into it, which inherits the theme's dark link
   colour and is unreadable on teal. Visitors never see it, but it should not
   look broken to whoever is editing the site. Assigning a menu to the Footer
   location replaces it, and these rules then style that menu. */
body > footer .col-lg-6 > div:first-child ul {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 26px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}
body > footer .col-lg-6 > div:first-child a {
  color: rgba(255, 255, 255, 0.72);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.25s var(--nm-ease);
}
body > footer .col-lg-6 > div:first-child a:hover,
body > footer .col-lg-6 > div:first-child a:focus {
  color: #fff;
  text-decoration: none;
}

/* Sits under its own label so the column reads as a pair of small blocks
   (label + control) matching the newsletter and social rows. */
body > footer .pathway-footer-link {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
  width: auto;
  margin: 0;
}
body > footer .pathway-footer-link::before {
  content: "Keep learning";
}

/* An outline pill, deliberately quieter than the peach Subscribe button so the
   newsletter stays the primary action.

   `background` and `width` are set explicitly rather than left to default:
   footer.php used to carry an inline <style> declaring `background: #ffffff`
   and `width: 255px` on this link. That block has been removed, but stating
   both here means the button still renders correctly if an older footer.php is
   ever restored — otherwise it is white text on a white pill and the label
   disappears. */
body > footer .pathway-footer-link a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 0;
  padding: 12px 30px;
  border: 1px solid rgba(255, 255, 255, 0.32);
  border-radius: 999px;
  background: transparent;
  color: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color 0.3s var(--nm-ease), border-color 0.3s var(--nm-ease),
    transform 0.3s var(--nm-ease);
}
body > footer .pathway-footer-link a:hover,
body > footer .pathway-footer-link a:focus {
  border-color: #fff;
  background-color: rgba(255, 255, 255, 0.12);
  color: #fff;
  text-decoration: none;
  transform: translateY(-2px);
}

body > footer .footer-icons {
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-start !important;
  margin-top: 0;
}
body > footer .footer-icons::before {
  content: "Follow us";
  flex: 0 0 100%;
}
/* Empty Bootstrap 3 spacer columns that survive in the markup. */
body > footer .footer-icons .col-xs-1 {
  display: none;
}
body > footer .footer-icons .col-xs-2 {
  padding: 0;
}
body > footer .footer-icons a {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 50%;
  transition: background-color 0.3s var(--nm-ease), border-color 0.3s var(--nm-ease);
}
body > footer .footer-icons a:hover,
body > footer .footer-icons a:focus {
  border-color: rgba(255, 255, 255, 0.5);
  background-color: rgba(255, 255, 255, 0.12);
}
/* The icons are requested from icongr.am already flattened to black, so they
   can only be recoloured with a filter. */
body > footer .footer-icons img {
  width: 19px;
  height: 19px;
  opacity: 0.75;
  filter: brightness(0) invert(1);
  transition: opacity 0.3s var(--nm-ease);
}
body > footer .footer-icons a:hover img,
body > footer .footer-icons a:focus img {
  opacity: 1;
}

/* --- Bottom bar --- */
body > footer .custom-built {
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  padding-top: 24px;
}
body > footer .copyRights {
  margin: 0 !important;
  color: rgba(255, 255, 255, 0.55);
  font-size: 13px;
  font-weight: 400;
}
body > footer .copyRights strong {
  color: rgba(255, 255, 255, 0.82);
  font-weight: 600;
}

/* --- Footer layout --- */

/* .col-lg-6 is unwrapped with display:contents so its three children become
   grid items in their own right. That lets the copyright run the full width as
   a bottom bar instead of being trapped in the right-hand column. */
body > footer .row > .col-lg-6 {
  display: contents;
}
body > footer .row > div {
  max-width: none;
  padding: 0;
}

@media only screen and (min-width: 992px) {
  body > footer .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 76px);
    row-gap: 30px;
    align-items: start;
    margin: 0;
  }
  /* Column 1 is the logo block, column 2 the newsletter; both span the two
     content rows on the right.

     The logo column only holds a wordmark and a certification badge, so left
     to itself it filled the top third of a full-height column and left an
     obvious hole underneath. Stretching it and spacing its two children apart
     puts the badge on the footer's baseline, which reads as deliberate. */
  body > footer .row > div:nth-child(2) {
    grid-column: 1;
    grid-row: 1 / 3;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
  }
  body > footer .row > div:nth-child(3) {
    grid-column: 2;
    grid-row: 1 / 3;
  }
  /* The third column is flushed right so the footer closes on a clean edge
     rather than trailing off mid-container. */
  body > footer .pathway-footer-link {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    align-items: flex-end;
    text-align: right;
  }
  body > footer .footer-icons {
    grid-column: 3;
    grid-row: 2;
    align-self: end;
    justify-self: end;
    justify-content: flex-end !important;
  }
  body > footer .footer-icons::before {
    text-align: right;
  }
  body > footer .custom-built {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: clamp(18px, 3vw, 34px);
  }
}

@media only screen and (max-width: 991px) {
  body > footer .row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    row-gap: 32px;
    justify-items: center;
    margin: 0;
    text-align: center;
  }
  body > footer .row > div,
  body > footer .col-lg-6 > div {
    width: 100%;
    max-width: 380px;
  }
  /* Logo first, then newsletter, then Pathway, social and copyright — the
     source order puts the copyright block near the top otherwise. */
  body > footer .row > div:nth-child(2) {
    order: 1;
  }
  body > footer .row > div:nth-child(3) {
    order: 2;
  }
  /* Centred to match the newsletter and social blocks; the desktop rule pins
     this to the right instead. */
  body > footer .pathway-footer-link {
    order: 3;
    align-items: center;
  }
  body > footer .footer-icons {
    order: 4;
    justify-content: center !important;
  }
  body > footer .custom-built {
    order: 5;
    width: 100%;
    max-width: none;
    margin-top: 4px;
  }
  body > footer .naamal-subscription {
    text-align: center;
  }
  body > footer .naamal-subscription-btn {
    width: 100%;
  }
}


/*------------------------------------*\
    RESEARCH LIBRARY
\*------------------------------------*/
/* The filterable publication grid on /research-2/. Greens lead here as they do
   in the rest of the section; peach appears only on the dark card covers, which
   matches how the featured panel above already uses it. */

/* Section nav
   ------------------------------------ */
/* Stands in for the theme's wp_list_categories() output, which rendered as two
   bare pills that gave no clue where they led or which one you were on. */
.nm-sectionNav {
  display: inline-flex;
  gap: 4px;
  margin-top: clamp(26px, 3vw, 38px);
  padding: 5px;
  border-radius: 999px;
  background-color: var(--nm-teal-soft);
}

.nm-sectionNav__item {
  padding: 11px 24px;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nm-teal-dark);
  text-decoration: none;
  transition: background-color 0.25s var(--nm-ease), color 0.25s var(--nm-ease);
}

.nm-sectionNav__item--current {
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
}

a.nm-sectionNav__item:hover,
a.nm-sectionNav__item:focus {
  background-color: rgba(255, 255, 255, 0.6);
  color: var(--nm-teal-dark);
  text-decoration: none;
}


/* Filter bar
   ------------------------------------ */
.nm-library__head {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  align-items: baseline;
  margin-bottom: clamp(20px, 2.4vw, 28px);
}

.nm-filters {
  display: grid;
  gap: 18px;
  margin-bottom: clamp(28px, 3.4vw, 44px);
  padding: clamp(20px, 2.4vw, 28px);
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: var(--nm-cream);
}

.nm-search {
  position: relative;
  display: flex;
  align-items: center;
}

.nm-search__icon {
  position: absolute;
  left: 18px;
  color: var(--nm-muted);
  pointer-events: none;
}

.nm-search__input {
  width: 100%;
  min-height: 54px;
  /* Right padding leaves room for the Clear button to sit inside the field. */
  padding: 14px 96px 14px 48px;
  border: 1.5px solid var(--nm-line);
  border-radius: 999px;
  background-color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 400;
  color: var(--nm-ink);
  transition: border-color 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease);
}

.nm-search__input::placeholder {
  color: var(--nm-muted);
  font-weight: 300;
}

.nm-search__input:focus {
  outline: none;
  border-color: var(--nm-teal);
  box-shadow: 0 0 0 4px rgba(30, 120, 124, 0.13);
}

/* Chrome and Safari add their own clear affordance to type="search"; ours is
   the labelled button, so the native one is removed to avoid two of them. */
.nm-search__input::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

.nm-search__clear {
  position: absolute;
  right: 8px;
  padding: 9px 18px;
  border: 0;
  border-radius: 999px;
  background-color: var(--nm-teal-soft);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
  cursor: pointer;
  transition: background-color 0.25s var(--nm-ease);
}

.nm-search__clear:hover,
.nm-search__clear:focus {
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
}

.nm-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.nm-chips--topics {
  padding-top: 16px;
  border-top: 1px solid var(--nm-line);
}

.nm-chips__label {
  margin-right: 4px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-muted);
}

.nm-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: 1.5px solid var(--nm-line);
  border-radius: 999px;
  background-color: #fff;
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--nm-ink);
  cursor: pointer;
  transition: border-color 0.25s var(--nm-ease),
    background-color 0.25s var(--nm-ease), color 0.25s var(--nm-ease);
}

.nm-chip:hover,
.nm-chip:focus {
  border-color: var(--nm-teal);
  color: var(--nm-teal-dark);
}

.nm-chip--on {
  background-color: var(--nm-teal);
  border-color: var(--nm-teal);
  color: #fff;
}

.nm-chip--on:hover,
.nm-chip--on:focus {
  background-color: var(--nm-teal-dark);
  border-color: var(--nm-teal-dark);
  color: #fff;
}

.nm-chip__n {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--nm-muted);
}

.nm-chip--on .nm-chip__n {
  color: rgba(255, 255, 255, 0.75);
}

.nm-chip--topic {
  padding: 8px 15px;
  font-size: 0.875rem;
  font-weight: 500;
}

.nm-filters__count {
  margin: 0;
  font-size: 0.9375rem;
  font-weight: 300;
  color: var(--nm-muted);
}


/* Publication cards
   ------------------------------------ */
.nm-research .nm-cardGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* The hidden attribute alone would be enough, but being an explicit grid item
   makes it worth restating so a filtered-out card cannot leave a gap. */
.nm-research .nm-cardGrid__cell[hidden] {
  display: none;
}

.nm-research .nm-card {
  position: relative;
  display: grid;
  grid-template-columns: 172px minmax(0, 1fr);
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-research .nm-card:hover,
.nm-research .nm-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
}

.nm-research .nm-card__media {
  position: relative;
  overflow: hidden;
  background-color: var(--nm-teal-soft);
}

.nm-research .nm-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s var(--nm-ease);
}

.nm-research .nm-card:hover .nm-card__img {
  transform: scale(1.04);
}

/* Cover panel. The marks are the same Tabler icons used on the Research
   Linktree, redrawn in peach on teal so they read as brand rather than as
   Linktree chrome. */
.nm-icon {
  display: block;
  width: 1em;
  height: 1em;
}

.nm-research .nm-card__cover {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 200px;
  padding: 18px;
  background-image: linear-gradient(
    150deg,
    var(--nm-teal) 0%,
    var(--nm-teal-dark) 100%
  );
  color: #fff;
}

.nm-research .nm-card__icon {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin-bottom: auto;
  border-radius: 20px;
  background-color: rgba(254, 234, 220, 0.14);
  border: 1px solid rgba(254, 234, 220, 0.32);
  color: var(--nm-peach);
  transition: background-color 0.35s var(--nm-ease), transform 0.35s var(--nm-ease);
}

.nm-research .nm-card__icon .nm-icon {
  width: 34px;
  height: 34px;
}

.nm-research .nm-card:hover .nm-card__icon,
.nm-research .nm-choice:hover .nm-card__icon {
  background-color: rgba(254, 234, 220, 0.24);
  transform: scale(1.04);
}

.nm-research .nm-card__coverMark {
  width: 24px;
  height: 24px;
  margin-bottom: auto;
  border-top: 2px solid rgba(255, 255, 255, 0.55);
  border-left: 2px solid rgba(255, 255, 255, 0.55);
}

.nm-research .nm-card__coverSource {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.nm-research .nm-card__coverType {
  margin-top: 6px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-peach);
}

.nm-research .nm-card__body {
  display: flex;
  flex-direction: column;
  padding: 26px 26px 22px;
}

.nm-research .nm-card__title {
  margin: 0 0 8px;
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.35;
}

.nm-research .nm-card__link {
  color: var(--nm-ink);
  text-decoration: none;
}

/* Stretched so the whole card is the hit area for the publication, while the
   topic buttons below stay clickable by sitting above it. */
.nm-research .nm-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}

.nm-research .nm-card:hover .nm-card__link,
.nm-research .nm-card__link:focus {
  color: var(--nm-teal-dark);
  text-decoration: none;
}

.nm-research .nm-card__link:focus-visible {
  outline: 3px solid rgba(30, 120, 124, 0.4);
  outline-offset: 3px;
}

.nm-research .nm-card__meta {
  margin: 0 0 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nm-teal);
}

.nm-research .nm-card__text {
  margin: 0 0 20px;
  font-size: 0.9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--nm-muted);
}

/* Pinned to the bottom so the tags and the cue line up across a row whatever
   length the summaries are. */
.nm-research .nm-card__foot {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: center;
  justify-content: space-between;
  margin-top: auto;
}

.nm-research .nm-tagList {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-research .nm-tag {
  padding: 5px 12px;
  border: 1px solid var(--nm-line);
  border-radius: 999px;
  background-color: transparent;
  font-family: inherit;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--nm-muted);
  cursor: pointer;
  transition: border-color 0.25s var(--nm-ease),
    background-color 0.25s var(--nm-ease), color 0.25s var(--nm-ease);
}

.nm-research .nm-tag:hover,
.nm-research .nm-tag:focus {
  border-color: var(--nm-teal);
  background-color: var(--nm-teal-soft);
  color: var(--nm-teal-dark);
}

.nm-research .nm-card__cue {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
  white-space: nowrap;
}

.nm-research .nm-card__cue::after {
  content: "\2192";
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.35s var(--nm-ease);
}

.nm-research .nm-card:hover .nm-card__cue::after {
  transform: translateX(4px);
}

.nm-research .nm-card__pdf {
  margin-left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  background-color: var(--nm-teal-soft);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--nm-teal-dark);
}


/* Empty state
   ------------------------------------ */
.nm-library__empty {
  margin: 0;
  padding: clamp(40px, 5vw, 64px) 24px;
  border: 1px dashed var(--nm-line);
  border-radius: var(--nm-radius);
  text-align: center;
  font-size: 1.0625rem;
  font-weight: 300;
  color: var(--nm-muted);
}

.nm-library__reset {
  margin-left: 8px;
  padding: 0;
  border: 0;
  background: none;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  color: var(--nm-teal-dark);
  text-decoration: underline;
  cursor: pointer;
}


/* The card's two columns run out of room before the site's 991px breakpoint,
   so this section carries its own. */
@media only screen and (max-width: 1040px) {
  .nm-research .nm-cardGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media only screen and (max-width: 620px) {
  .nm-research .nm-card {
    grid-template-columns: minmax(0, 1fr);
  }
  .nm-research .nm-card__cover {
    min-height: 132px;
  }
  .nm-research .nm-card__img {
    height: 168px;
  }
  .nm-research .nm-card__body {
    padding: 22px 20px 20px;
  }
  .nm-search__input {
    padding-right: 88px;
  }
  .nm-sectionNav {
    display: flex;
    width: 100%;
  }
  .nm-sectionNav__item {
    flex: 1;
    text-align: center;
  }
}


/* Research hub choice cards (option B)
   ------------------------------------ */
/* Only used by page-research-hub.php, the alternative structure for
   /research-2/. Harmless if that template is never deployed. */
.nm-choiceGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-choice {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius-lg);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  text-decoration: none;
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-choice:hover,
.nm-choice:focus {
  transform: translateY(-5px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
  text-decoration: none;
}

.nm-choice__cover {
  display: flex;
  flex-direction: column;
  min-height: 190px;
  padding: 22px;
  background-image: linear-gradient(
    150deg,
    var(--nm-teal) 0%,
    var(--nm-teal-dark) 100%
  );
  color: #fff;
}

.nm-choice__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: clamp(24px, 3vw, 34px);
}

.nm-choice__eyebrow {
  margin-bottom: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-muted);
}

.nm-choice__title {
  margin-bottom: 12px;
  font-size: clamp(1.4rem, 2.2vw, 1.85rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--nm-ink);
}

.nm-choice:hover .nm-choice__title {
  color: var(--nm-teal-dark);
}

.nm-choice__text {
  margin-bottom: 22px;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-muted);
}

.nm-choice__cue {
  margin-top: auto;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
}

.nm-choice__cue::after {
  content: "\2192";
  display: inline-block;
  margin-left: 7px;
  transition: transform 0.35s var(--nm-ease);
}

.nm-choice:hover .nm-choice__cue::after {
  transform: translateX(4px);
}

@media only screen and (max-width: 820px) {
  .nm-choiceGrid {
    grid-template-columns: minmax(0, 1fr);
  }
}


/*------------------------------------*\
    OUR IMPACT (category/insights)
\*------------------------------------*/
/* The old archive dumped a screenshot, a paragraph of default-blue links and
   the podcast into Bootstrap columns. This page uses the same tokens as
   Research: greens lead, peach only as an accent on the dark quote panel. */

/* The workshop screenshot is 16:9. Filling the taller text column with
   object-fit: cover crops the slide and the participant grid. Keep the same
   column width, pin the frame to the photo's ratio so the whole screenshot
   stays visible, and let the height sit a little under the copy. Desktop
   only; the stacked layout already uses the image's natural height. */
.nm-impactPage .nm-impact__media {
  overflow: hidden;
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal-dark);
  box-shadow: var(--nm-shadow);
}

.nm-impactPage .nm-impact__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
  box-shadow: none;
}

@media (min-width: 992px) {
  .nm-impactPage .nm-impact__grid {
    align-items: start;
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  }

  .nm-impactPage .nm-impact__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
  }

  .nm-impactPage .nm-impact__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
  }
}

.nm-programGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-program {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 28px 24px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  transition: transform 0.35s var(--nm-ease), box-shadow 0.35s var(--nm-ease),
    border-color 0.35s var(--nm-ease);
}

.nm-program:hover,
.nm-program:focus-within {
  transform: translateY(-4px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
}

.nm-program__brand {
  display: flex;
  gap: 16px;
  align-items: center;
  margin-bottom: 16px;
}

.nm-program__logo {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  object-fit: contain;
  padding: 8px;
  border: 1px solid var(--nm-line);
  border-radius: 18px;
  background-color: var(--nm-cream);
}

.nm-program__name {
  margin: 0 0 6px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.nm-program__link {
  color: var(--nm-ink);
  text-decoration: none;
}

.nm-program__link:hover,
.nm-program__link:focus {
  color: var(--nm-teal-dark);
  text-decoration: none;
}

.nm-program__meta {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--nm-teal);
}

.nm-program__text {
  margin: 0 0 18px;
  font-size: 0.9875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-muted);
}

.nm-program__years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
  padding: 0;
  list-style: none;
}

.nm-program__years a {
  display: inline-flex;
  padding: 7px 14px;
  border: 1.5px solid var(--nm-line);
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--nm-teal-dark);
  text-decoration: none;
  transition: border-color 0.25s var(--nm-ease),
    background-color 0.25s var(--nm-ease);
}

.nm-program__years a:hover,
.nm-program__years a:focus {
  border-color: var(--nm-teal);
  background-color: var(--nm-teal-soft);
  text-decoration: none;
}


/* Podcast
   ------------------------------------ */
.nm-podcast {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: clamp(32px, 5vw, 72px);
  padding: clamp(28px, 4vw, 48px);
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-cream);
  border: 1px solid var(--nm-line);
}

.nm-podcast__media img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--nm-radius);
  box-shadow: var(--nm-shadow);
}

.nm-podcast__title {
  margin: 0 0 18px;
  font-size: clamp(1.75rem, 3vw, 2.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--nm-ink);
}

.nm-podcast__text {
  margin: 0 0 16px;
  font-size: 1.0625rem;
  font-weight: 300;
  line-height: 1.75;
  color: var(--nm-muted);
}

.nm-podcast__copy .nm-btn {
  margin-top: 10px;
}


/* Pull quote
   ------------------------------------ */
.nm-pullquote {
  position: relative;
  margin: 0;
  padding: clamp(40px, 5vw, 68px) clamp(28px, 5vw, 72px);
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal-dark);
  color: #fff;
  overflow: hidden;
}

.nm-pullquote::before {
  content: "\201C";
  position: absolute;
  top: -0.12em;
  right: 0.12em;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(7rem, 12vw, 11rem);
  line-height: 1;
  color: #fff;
  opacity: 0.12;
  pointer-events: none;
}

.nm-pullquote blockquote {
  margin: 0 0 22px;
}

.nm-pullquote p {
  position: relative;
  margin: 0;
  max-width: 34em;
  font-size: clamp(1.35rem, 2.6vw, 1.85rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.02em;
}

.nm-pullquote figcaption {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nm-pullquote cite {
  font-style: normal;
  font-weight: 600;
  color: var(--nm-peach);
}

.nm-pullquote figcaption span {
  font-size: 0.9375rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.72);
}

@media only screen and (max-width: 860px) {
  .nm-programGrid,
  .nm-podcast {
    grid-template-columns: minmax(0, 1fr);
  }
}


/*------------------------------------*\
    ABOUT (template-about.php)
\*------------------------------------*/
/* Same tokens as Research / Our Impact: greens lead, Work Sans, peach only on
   the dark belief panel. The old page was a centred title, a tall photo beside
   short copy, then a Bootstrap team grid with external LinkedIn icons. */

.nm-about__story {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(36px, 5vw, 72px);
}

.nm-about__media {
  overflow: hidden;
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal-dark);
  box-shadow: var(--nm-shadow);
}

.nm-about__media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  object-position: center;
}

.nm-about__copy .nm-impact__title {
  margin-bottom: 18px;
}

.nm-about__belief {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.nm-aboutPillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-aboutPillar {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 26px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
}

.nm-aboutPillar__num {
  display: inline-block;
  margin-bottom: 18px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--nm-teal);
}

.nm-aboutPillar__title {
  margin: 0 0 12px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nm-ink);
}

.nm-aboutPillar__text {
  margin: 0;
  font-size: 0.9875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-muted);
}

.nm-about__teamSection {
  background-color: #fff;
  border-top: 1px solid var(--nm-line);
  border-bottom: 1px solid var(--nm-line);
}

.nm-teamGrid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-person {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: var(--nm-cream);
  box-shadow: var(--nm-shadow-sm);
  transition: transform 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease);
}

.nm-person:hover {
  transform: translateY(-3px);
  box-shadow: var(--nm-shadow);
}

.nm-person__photo {
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background-color: var(--nm-teal-soft);
}

.nm-person__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.nm-person__body {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  gap: 6px;
  padding: 18px 18px 20px;
}

.nm-person__name {
  margin: 0;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nm-ink);
}

.nm-person__role {
  margin: 0 0 8px;
  font-size: 0.875rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--nm-muted);
}

.nm-person__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-top: auto;
  border-radius: 999px;
  color: var(--nm-teal);
  background-color: var(--nm-teal-soft);
  transition: background-color 0.2s var(--nm-ease), color 0.2s var(--nm-ease);
}

.nm-person__link .nm-icon {
  width: 16px;
  height: 16px;
}

.nm-person__link:hover,
.nm-person__link:focus {
  color: #fff;
  background-color: var(--nm-teal);
  outline: none;
}

@media only screen and (max-width: 1100px) {
  .nm-teamGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 991px) {
  .nm-about__story {
    grid-template-columns: minmax(0, 1fr);
  }

  .nm-about__media {
    max-width: 640px;
    margin: 0 auto;
  }

  .nm-about__copy {
    text-align: center;
  }

  .nm-aboutPillars {
    grid-template-columns: minmax(0, 1fr);
  }

  .nm-teamGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media only screen and (max-width: 560px) {
  .nm-teamGrid {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
}


/*------------------------------------*\
    GET INVOLVED (template-contactForm.php)
\*------------------------------------*/
/* Page 409 was incorrectly set as page_for_posts, which forced index.php and
   the empty "Our Impact" archive look. With that fixed, this template renders
   the contact routes and the existing WPForms form (id 402). */

.nm-involveWays {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-involveWay {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 28px 26px 24px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease),
    border-color 0.25s var(--nm-ease);
}

.nm-involveWay:hover,
.nm-involveWay:focus {
  transform: translateY(-3px);
  border-color: rgba(30, 120, 124, 0.35);
  box-shadow: var(--nm-shadow);
  text-decoration: none;
  color: inherit;
  outline: none;
}

.nm-involveWay__title {
  margin: 0 0 10px;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nm-ink);
}

.nm-involveWay__text {
  margin: 0 0 18px;
  font-size: 0.9875rem;
  font-weight: 300;
  line-height: 1.7;
  color: var(--nm-muted);
}

.nm-involveWay__cue {
  margin-top: auto;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--nm-teal);
}

.nm-involveWay:hover .nm-involveWay__cue,
.nm-involveWay:focus .nm-involveWay__cue {
  text-decoration: underline;
}

.nm-involveForm {
  max-width: 760px;
  margin: 0 auto;
  padding: clamp(36px, 5vw, 56px) clamp(24px, 4vw, 48px);
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius-lg);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
}

.nm-involveForm__head {
  max-width: none;
  margin: 0 0 28px;
  text-align: center;
}

.nm-involveForm__head .nm-sectionLead {
  margin-top: 12px;
}

.nm-involveForm__head a {
  color: var(--nm-teal);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nm-involveForm__body .wpforms-container {
  margin: 0 !important;
}

.nm-involveForm__body .wpforms-field {
  padding: 10px 0 !important;
}

.nm-involveForm__body .wpforms-field-label {
  font-family: "Work Sans", sans-serif !important;
  font-weight: 600 !important;
  color: var(--nm-ink) !important;
}

.nm-involveForm__body input[type="text"],
.nm-involveForm__body input[type="email"],
.nm-involveForm__body input[type="tel"],
.nm-involveForm__body textarea,
.nm-involveForm__body select {
  border: 1px solid var(--nm-line) !important;
  border-radius: 14px !important;
  background-color: var(--nm-cream) !important;
  color: var(--nm-ink) !important;
  font-family: "Work Sans", sans-serif !important;
  box-shadow: none !important;
}

.nm-involveForm__body input[type="text"],
.nm-involveForm__body input[type="email"],
.nm-involveForm__body input[type="tel"],
.nm-involveForm__body select {
  height: 52px !important;
  padding: 0 16px !important;
}

.nm-involveForm__body textarea {
  min-height: 140px !important;
  padding: 14px 16px !important;
}

.nm-involveForm__body .wpforms-submit {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  padding: 0 28px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background-color: var(--nm-teal) !important;
  color: #fff !important;
  font-family: "Work Sans", sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
  transition: background-color 0.2s var(--nm-ease) !important;
}

.nm-involveForm__body .wpforms-submit:hover,
.nm-involveForm__body .wpforms-submit:focus {
  background-color: var(--nm-teal-dark) !important;
}

.nm-involveMeta {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;
  padding: clamp(28px, 4vw, 40px);
  border-radius: var(--nm-radius-lg);
  background-color: var(--nm-teal-dark);
  color: #fff;
}

.nm-involveMeta__title {
  margin: 0 0 10px;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nm-peach);
}

.nm-involveMeta__text {
  margin: 0;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.86);
}

.nm-involveMeta__text span {
  display: block;
  margin-top: 6px;
}

.nm-involveMeta__text a {
  color: #fff;
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.nm-involveSocial {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-involveSocial a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  color: var(--nm-peach);
  background-color: rgba(254, 234, 220, 0.12);
  transition: background-color 0.2s var(--nm-ease), color 0.2s var(--nm-ease);
}

.nm-involveSocial a:hover,
.nm-involveSocial a:focus {
  color: var(--nm-teal-dark);
  background-color: var(--nm-peach);
  outline: none;
}

.nm-involveSocial .nm-icon {
  width: 18px;
  height: 18px;
}

@media only screen and (max-width: 991px) {
  .nm-involveWays,
  .nm-involveMeta {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media only screen and (max-width: 640px) {
  .nm-involveForm {
    padding: 28px 18px;
  }
}


/*------------------------------------*\
    NA'AMAL FOUNDATION (template-naamal-foundation.php)
\*------------------------------------*/
/* Same tokens as About: greens lead, Work Sans, peach only on the dark
   governance note. Documents are interactive rows — not decorative cards. */

.nm-pageHead__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.nm-foundation__board {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.nm-foundation__note {
  max-width: 920px;
  margin-left: auto;
  margin-right: auto;
}

.nm-foundationDocs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.nm-foundationDoc {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  height: 100%;
  padding: 26px 24px;
  border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius);
  background-color: #fff;
  box-shadow: var(--nm-shadow-sm);
  color: inherit;
  text-decoration: none;
  transition: transform 0.25s var(--nm-ease), box-shadow 0.25s var(--nm-ease),
    border-color 0.25s var(--nm-ease);
}

.nm-foundationDoc:hover,
.nm-foundationDoc:focus {
  transform: translateY(-3px);
  border-color: var(--nm-teal);
  box-shadow: var(--nm-shadow);
  outline: none;
  text-decoration: none;
  color: inherit;
}

.nm-foundationDoc__mark {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52px;
  height: 52px;
  padding: 0 10px;
  border-radius: 14px;
  background-color: var(--nm-teal);
  color: var(--nm-peach);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.nm-foundationDoc__body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}

.nm-foundationDoc__title {
  font-size: 1.1875rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.25;
  color: var(--nm-ink);
}

.nm-foundationDoc__text {
  font-size: 0.9875rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--nm-muted);
}

.nm-foundationDoc__cue {
  margin-top: 6px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--nm-teal);
}

.nm-foundationDoc:hover .nm-foundationDoc__cue,
.nm-foundationDoc:focus .nm-foundationDoc__cue {
  color: var(--nm-teal-dark);
}

@media only screen and (max-width: 991px) {
  .nm-foundation__board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .nm-foundationDocs {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media only screen and (max-width: 560px) {
  .nm-foundation__board {
    grid-template-columns: minmax(0, 1fr);
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }

  .nm-pageHead__actions .nm-btn {
    width: 100%;
    justify-content: center;
  }
}