/*
Theme Name: ORGX clean
Theme URI: https://orgx.com
Author: H2LO
Version: 0.3
Text Domain: orgx-clean
Description: ORGX clean theme
*/

/* ============================================================================
   01) IMPORTS
   ============================================================================ */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@300;400;500;600;700&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css');

/* ============================================================================
   02) TOKENS
   ============================================================================ */
:root {
  /* colors */
  --color-bg:      #070a0f;
  --color-text:    #e7efe9;
  --color-muted:   #d3d3cf;
  --color-green:   #93c027;
  --color-line:    #1b221e;

  /* widths */
  --width-content: 1400px;
  --width-nav:     1600px;
  --width-section: calc(var(--width-nav) * 0.7); /* 70% of nav width = 1120px */

  /* spacing */
  --space-xs:  clamp(8px,  1vw,  12px);
  --space-sm:  clamp(12px, 1.5vw, 20px);
  --space-md:  clamp(16px, 2vw,  24px);
  --space-lg:  clamp(24px, 3vw,  48px);
  --space-xl:  clamp(48px, 6vw,  96px);
  --wrap-pad:  clamp(16px, 2vw,  32px);

  /* masonry */
  --orgx-gap:     30px;

  /* navigation */
  --nav-h:        96px;
  --nav-h-mobile: 64px;
  --nav-pad-x:    clamp(40px, 4.5vw, 120px);
  --nav-gap:      clamp(40px, 4.3vw, 75px);
  --menu-gap:     clamp(30px, 3.4vw, 56px);
}

/* ============================================================================
   03) RESET
   ============================================================================ */
*,
*::before,
*::after {
  box-sizing: border-box;
}

:where(body, h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote) {
  margin:  0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
}

html:focus-within {
  scroll-behavior: smooth;
}

html,
body {
  overflow-x: clip;
}

body {
  min-height: 100vh;
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  font-family: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
}

img,
picture,
svg,
video {
  display:   block;
  max-width: 100%;
  height:    auto;
}

input,
button,
textarea,
select {
  font:  inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

a {
  color:           inherit;
  text-decoration: none;
}

a:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration:        0.01ms !important;
    animation-iteration-count: 1      !important;
    transition-duration:       0.01ms !important;
    scroll-behavior:           auto   !important;
  }
}

/* ============================================================================
   04) NAV — desktop
   ============================================================================ */

.orgx-header {
  position: relative;
  z-index:  9000;
}

.orgx-nav {
  position: fixed;
  top:  0;
  left: 0;
  width:  100%;
  height: var(--nav-h);
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  backdrop-filter:         blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9000;
}

/* gradient overlay — keeps nav legible over hero images */
.orgx-nav::before {
  content:  "";
  position: absolute;
  inset:    0;
  background: linear-gradient(
    to bottom,
    rgba(7, 10, 15, 0.92) 0%,
    rgba(7, 10, 15, 0.62) 60%,
    rgba(7, 10, 15, 0.00) 100%
  );
  z-index:        -1;
  pointer-events: none;
}

.orgx-nav__inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:        var(--nav-gap);
  width:      100%;
  max-width:  var(--width-nav);
  height:     100%;
  margin-inline:  auto;
  padding-inline: var(--nav-pad-x);
  padding-top:    clamp(12px, 1.2vw, 18px);
}

/* logo */
.orgx-nav__logo {
  display:     flex;
  align-items: center;
  flex:  0 0 auto;
  width: 120px;
}

.orgx-nav__logo img {
  width:  120px;
  height: auto;
}

/* panel — desktop: flex row; mobile: full-screen drawer */
.orgx-nav__panel {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:  22px;
  flex: 1 1 auto;
}

/* menu wrapper — transparent on desktop so panel flex still works;
   on mobile the grid gap already handles spacing */
.orgx-nav__menu {
  display:     flex;
  align-items: center;
  flex:        1 1 auto;
  min-width:   0;
}

/* menu list */
.orgx-nav__list {
  display:    flex;
  gap:        var(--menu-gap);
  list-style: none;
  margin:  0;
  padding: 0;
}

.orgx-nav__list > li {
  position: relative;
}

.orgx-nav__list > li > a {
  color:          #fff;
  font-size:      0.85rem;
  font-weight:    400;
  opacity:        0.9;
  letter-spacing: 0.01em;
  display:     inline-flex;
  align-items: center;
  gap:     0.45rem;
  padding: 10px 0;
  transition:      transform 0.2s ease, color 0.2s ease, opacity 0.2s ease;
  transform-origin: left center;
}

.orgx-nav__list > li:hover > a,
.orgx-nav__list > li:focus-within > a {
  color:     var(--color-green);
  opacity:   1;
  transform: scale(1.08);
}

.orgx-nav__list > li.current-menu-item > a,
.orgx-nav__list > li.current-menu-parent > a,
.orgx-nav__list > li.current-menu-ancestor > a {
  color:       var(--color-green);
  opacity:     1;
  font-weight: 500;
}

/* dropdown caret */
.orgx-nav__list > li.menu-item-has-children > a::after {
  content:       "";
  display:       inline-block;
  width:  0.45rem;
  height: 0.45rem;
  margin-left:   0.15rem;
  border-right:  2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-1px) rotate(45deg);
  opacity: 0.75;
}

/* dropdown panel */
.orgx-nav__list li .sub-menu {
  position:  absolute;
  top:       calc(100% + 12px);
  left:      0;
  width:     max-content;
  max-width: 360px;
  margin:  0;
  padding: 10px;
  list-style: none;

  background:              rgba(7, 10, 15, 0.88);
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:        1px solid rgba(147, 192, 39, 0.25);
  border-radius: 12px;
  box-shadow:    0 10px 30px rgba(0, 0, 0, 0.35);

  opacity:    0;
  visibility: hidden;
  transform:  translateY(-6px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
  z-index: 9999;
}

.orgx-nav__list li:hover > .sub-menu,
.orgx-nav__list li:focus-within > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateY(0);
}

.orgx-nav__list li .sub-menu li {
  position: relative;
  margin:   2px 0;
}

.orgx-nav__list li .sub-menu li a {
  display:       block;
  padding:       10px 16px;
  font-size:     0.82rem;
  color:         #fff;
  opacity:       0.9;
  border-radius: 8px;
  white-space:   nowrap;
  transition:    background 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.orgx-nav__list li .sub-menu li:hover > a,
.orgx-nav__list li .sub-menu li.current-menu-item   > a,
.orgx-nav__list li .sub-menu li.current-menu-parent   > a,
.orgx-nav__list li .sub-menu li.current-menu-ancestor > a,
.orgx-nav__list li .sub-menu li.current_page_item     > a,
.orgx-nav__list li .sub-menu li.current_page_parent   > a,
.orgx-nav__list li .sub-menu li.current_page_ancestor > a {
  color:      var(--color-green);
  opacity:    1;
  background: rgba(147, 192, 39, 0.08);
}

/* nested sub-submenu (flyout) */
.orgx-nav__list li .sub-menu li > .sub-menu {
  top:  -12px;
  left: calc(100% - 6px);
  transform:  translateX(8px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
}

.orgx-nav__list li .sub-menu li:hover > .sub-menu,
.orgx-nav__list li .sub-menu li:focus-within > .sub-menu {
  opacity:    1;
  visibility: visible;
  transform:  translateX(0);
}

/* right cluster */
.orgx-nav__right {
  display:     flex;
  align-items: center;
  gap:  1.2rem;
  flex: 0 0 auto;
}

.orgx-nav__tagline {
  font-size:      0.82rem;
  letter-spacing: 0.03rem;
  font-weight:    300;
  color:          var(--color-muted);
  white-space:    nowrap;
}

.orgx-nav__contact {
  background:     #000;
  color:          #fff;
  padding:        0.2rem 1.4rem;
  border-radius:  12px;
  border:         1px solid var(--color-green);
  font-weight:    500;
  font-size:      0.75rem;
  letter-spacing: 0.05rem;
  line-height:    1rem;
  white-space:    nowrap;
  transition:     background 0.4s ease, color 0.4s ease, transform 0.4s ease;
}

.orgx-nav__contact:hover {
  background: var(--color-green);
  color:      #000;
  transform:  scale(1.1);
}

.orgx-nav__icons {
  display:     flex;
  align-items: center;
  gap: 0.55rem;
}

.orgx-icon {
  color:    var(--color-muted);
  font-size: 1rem;
  display:         flex;
  align-items:     center;
  justify-content: center;
  transform:  scale(0.9);
  transition: transform 0.2s ease, color 0.2s ease;
}

.orgx-icon:hover {
  color:     var(--color-green);
  transform: scale(1.12);
}

/* mobile toggle — hidden on desktop */
.orgx-nav__toggle {
  display:       none;
  align-items:   center;
  gap:           10px;
  background:    rgba(0, 0, 0, 0.25);
  border:        1px solid rgba(255, 255, 255, 0.18);
  color:         #fff;
  border-radius: 999px;
  padding:       8px 12px;
  cursor:        pointer;
}

.orgx-nav__toggle-label {
  font-size:      0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.85);
}

.orgx-nav__toggle-icon {
  width:    18px;
  height:   12px;
  position: relative;
  display:  inline-block;
}

.orgx-nav__toggle-icon::before,
.orgx-nav__toggle-icon::after {
  content:       "";
  position:      absolute;
  left:  0;
  right: 0;
  height:        2px;
  background:    rgba(255, 255, 255, 0.85);
  border-radius: 2px;
}

.orgx-nav__toggle-icon::before { top: 2px; }
.orgx-nav__toggle-icon::after  { top: 8px; }

/* open state */
html.orgx-nav-open { overflow: hidden; }

html.orgx-nav-open .orgx-nav {
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
}

html.orgx-nav-open .orgx-nav::before {
  background: rgba(4, 8, 13, 0.99);
}

/* hide tagline at mid-width before hamburger kicks in;
   1260px ensures nav items + contact button + icons have comfortable room */
@media (max-width: 1260px) {
  .orgx-nav__tagline { display: none; }
}

/* ============================================================================
   04b) NAV — mobile drawer (≤ 980px)
   ============================================================================ */
@media (max-width: 980px) {

  :root {
    --nav-pad-x: clamp(16px, 3vw, 22px);
    --wrap-pad:  clamp(22px, 5vw, 44px);
  }

  .orgx-nav         { height: var(--nav-h-mobile); }
  .orgx-nav__inner  { padding-top: 6px; padding-inline: var(--nav-pad-x); }
  .orgx-nav__toggle { display: inline-flex; margin-left: auto; }

  .orgx-nav__logo     { width: 96px; }
  .orgx-nav__logo img { width: 96px; }

  /* full-screen drawer */
  .orgx-nav__panel {
    position: fixed;
    top:    var(--nav-h-mobile);
    left:   0;
    right:  0;
    bottom: 0;

    display:       grid;
    align-content: start;
    gap:           18px;
    overflow-y:    auto;

    padding: 24px var(--wrap-pad) 40px;
    background: linear-gradient(
      to bottom,
      rgba(4, 8, 13, 0.98) 0%,
      rgba(5, 9, 14, 0.99) 100%
    );
    backdrop-filter:         blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(147, 192, 39, 0.18);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);

    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translateY(-8px);
    transition:     opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease;
  }

  .orgx-nav__panel.is-open {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translateY(0);
  }

  /* stacked menu */
  .orgx-nav__list {
    flex-direction: column;
    gap: 10px;
  }

  .orgx-nav__list > li > a {
    font-size: 1.05rem;
    padding:   10px 6px;
    transform: none;
  }

  /* sub-menus reveal inline — no flyout on touch */
  .orgx-nav__list li .sub-menu,
  .orgx-nav__list li .sub-menu li > .sub-menu {
    position:                static;
    opacity:                 1;
    visibility:              visible;
    transform:               none;
    border:                  none;
    box-shadow:              none;
    background:              transparent;
    backdrop-filter:         none;
    -webkit-backdrop-filter: none;
    padding:                 6px 0 0 14px;
    max-width:               none;
    width:                   auto;
  }

  .orgx-nav__list li .sub-menu li a {
    padding:   8px 6px;
    font-size: 0.95rem;
    opacity:   0.85;
  }

  /* right cluster stacks vertically */
  .orgx-nav__right {
    flex-direction: column;
    align-items:    flex-start;
    gap:        12px;
    padding-top: 10px;
    border-top:  1px solid rgba(255, 255, 255, 0.10);
  }

}

/* ============================================================================
   05) HERO
   ============================================================================ */

.orgx-hero {
  position:   relative;
  width:      100%;
  /* svh = small viewport height: excludes mobile browser chrome, prevents jump */
  height:     calc(100vh  + 120px); /* fallback */
  height:     calc(100svh + 120px);
  min-height: 500px;
  overflow:   hidden;
  isolation:  isolate;   /* self-contained stacking context */
  z-index:    0;
}

/* background image layer */
.orgx-hero__bg {
  position:            absolute;
  inset:               0;
  background-image:    url('/images/ORGX__hero.png');
  background-size:     cover;
  background-position: center 40%;   /* pull the composition slightly above centre */
  background-repeat:   no-repeat;
  z-index:             0;
}

/* bottom fade — transitions hero into site background with no hard edge.
   200px gives a gradual, premium gradient that begins above the 120px seam. */
.orgx-hero::after {
  content:        "";
  position:       absolute;
  bottom:         0;
  left:           0;
  width:          100%;
  height:         200px;
  background:     linear-gradient(to bottom, transparent 0%, var(--color-bg) 100%);
  z-index:        1;
  pointer-events: none;
}

/* tablet — tighten min-height, keep composition centred */
@media (max-width: 980px) {
  .orgx-hero {
    min-height: 420px;
  }

  .orgx-hero__bg {
    background-position: center 35%;
  }
}

/* mobile — portrait orientation, pull focus toward subject */
@media (max-width: 480px) {
  .orgx-hero {
    min-height: 360px;
  }

  .orgx-hero__bg {
    background-position: center top;
  }
}

/* ============================================================================
   06) BUTTON
   ============================================================================ */

.orgx-button {
  display:          inline-flex;
  align-items:      center;
  width:            fit-content;
  gap:              0.5rem;
  font-weight:      500;
  font-size:        0.9rem;
  line-height:      1;
  border-radius:    999px;
  padding:          0.5rem 1.6rem;
  border:           1px solid currentColor;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background 0.4s ease, color 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
  transform-origin: center;
}

.orgx-button--primary {
  color:        var(--color-green);
  border-color: rgba(255, 255, 255, 0.65);
  background:   transparent;
}

.orgx-button--primary i {
  color:      rgba(255, 255, 255, 0.80);
  transition: color 0.4s ease;
}

.orgx-button--primary:hover {
  background:   var(--color-green);
  border-color: var(--color-green);
  color:        #000;
  transform:    scale(1.05);
}

.orgx-button--primary:hover i {
  color: #000;
}

/* Ghost / secondary button variant — same shape, muted border, white text */
.orgx-button--secondary {
  color:        rgba(255, 255, 255, 0.70);
  border-color: rgba(255, 255, 255, 0.25);
  background:   transparent;
}

.orgx-button--secondary i {
  color:      rgba(255, 255, 255, 0.50);
  transition: color 0.4s ease;
}

.orgx-button--secondary:hover {
  background:   rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.55);
  color:        #fff;
  transform:    scale(1.05);
}

.orgx-button--secondary:hover i { color: #fff; }

/* 404 page: side-by-side CTA pair */
.orgx-404__ctas {
  display:   flex;
  flex-wrap: wrap;
  gap:       1rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* ============================================================================
   06b) INLINE LINK — small green arrow link for card footers and body copy
   ============================================================================ */

.orgx-link {
  display:     inline-flex;
  align-items: center;
  gap:         0.45rem;
  margin-top:  16px;
  font-size:   0.82rem;
  font-weight: 500;
  color:       var(--color-green);
  transition:  opacity 0.2s ease;
}

.orgx-link:hover { opacity: 0.72; }

.orgx-link i { font-size: 0.72rem; flex-shrink: 0; }

/* horizontal group of links — resets per-link margin-top */
.orgx-link-group {
  display:    flex;
  flex-wrap:  wrap;
  gap:        1.2rem;
  margin-top: 20px;
}

.orgx-link-group .orgx-link { margin-top: 0; }

/* ============================================================================
   07) HERO — content + typography
   ============================================================================ */

.orgx-hero__content {
  position:        relative;
  z-index:         2;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  text-align:      center;

  /* height matches the visible viewport so flex-centering lands on screen,
     not inside the extra 120px fade zone below */
  height:         100vh;   /* fallback */
  height:         100svh;
  padding-top:    var(--nav-h);      /* clear fixed nav */
  padding-bottom: 80px;              /* keep clear of fade start */
  padding-inline: var(--wrap-pad);

  width:         100%;
  max-width:     var(--width-content);
  margin-inline: auto;
}

.orgx-hero__title {
  margin:         0 0 14px 0;
  font-size:      clamp(1.8rem, 3.5vw, 3.8rem);
  font-weight:    500;
  line-height:    1.05;
  letter-spacing: 0.01em;
  color:          #fff;
  max-width:      820px;
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.45);
}

.orgx-hero__subtitle {
  margin:      0 0 14px 0;
  font-size:   clamp(0.9rem, 1.15vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  color:       var(--color-green);
  max-width:   640px;
}

.orgx-hero__text {
  margin:    0 0 var(--space-lg) 0;
  max-width: 560px;
}

.orgx-hero__text p {
  margin:      0 0 14px 0;
  font-size:   clamp(0.85rem, 1vw, 1rem);
  font-weight: 500;
  line-height: 1.8;
  color:       #d3d3cf;
}

.orgx-hero__text p:last-child {
  margin-bottom: 0;
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  .orgx-hero__content {
    padding-top:    var(--nav-h-mobile);
    padding-bottom: 60px;
  }
}

@media (max-width: 480px) {
  .orgx-hero__content {
    padding-inline: clamp(20px, 5vw, 32px);
  }

  .orgx-hero__subtitle {
    font-size: 1rem;
  }
}

/* ============================================================================
   08) SECTION — base vertical wrapper
   ============================================================================ */

.orgx-section {
  padding-block:  clamp(80px, 10vw, 140px);
  padding-inline: var(--wrap-pad);
  background:     var(--color-bg);   /* continues seamlessly from hero fade */
}

/* ============================================================================
   09) CONTENT SPLIT — text left / image right
   ============================================================================ */

.orgx-content-split {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  align-items:           center;
  gap:                   clamp(48px, 7vw, 112px);
  max-width:             var(--width-section);
  margin-inline:         auto;
}

.orgx-content-split__content {
  display:        flex;
  flex-direction: column;
  gap:            var(--space-md);
  max-width:      460px;
}

/* kicker — reusable label above section headings */
.orgx-kicker {
  font-size:   1.3rem;
  font-weight: 600;
  line-height: 1.5;
  color:       var(--color-green);
  margin:      0;
}


.orgx-content-split__body p {
  font-size:   0.92rem;
  line-height: 1.85;
  color:       var(--color-text);
  margin:      0 0 0.75em 0;
}

.orgx-content-split__body p:last-child {
  margin-bottom: 0;
}

/* image card — square, rounded, slight colour treatment */
.orgx-content-split__media {
  display:       block;
  width:         100%;
  max-width:     520px;
  aspect-ratio:  1 / 1;
  border-radius: 20px;
  overflow:      hidden;
  isolation:     isolate;
  margin:        0 auto;
  background:    rgba(80, 80, 80, 0.10);
  border:        1px solid rgba(255, 255, 255, 0.10);
  box-shadow:    0 12px 36px rgba(0, 0, 0, 0.44);
}

.orgx-content-split__media img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: 40% center;
  display:         block;
  border-radius:   inherit;
  filter:          contrast(105%) saturate(115%);
  opacity:         0.88;
}

/* Cool-tone greyscale treatment shared by SME, Corporates, What We Do photography.
   The compound selector wins over .orgx-content-split__media img (0,2,1 vs 0,1,0). */
.orgx-image--cool,
.orgx-content-split__media img.orgx-image--cool {
  filter:  grayscale(100%) contrast(105%) brightness(88%) hue-rotate(200deg) saturate(120%);
  opacity: 0.62;
}

/* Dashboard/portrait image: fit within frame rather than cover-cropping */
.orgx-content-split__media--contain { aspect-ratio: 520 / 440; }
.orgx-content-split__media--contain img {
  object-fit:      contain;
  object-position: center;
  opacity:         0.62;
  filter:          none;
}

/* reversed layout modifier: image left, text right on desktop */
.orgx-content-split--reversed .orgx-content-split__media {
  order: -1;
}

/* --- responsive ------------------------------------------------------------ */

/* tablet: single column, text first */
@media (max-width: 980px) {
  .orgx-content-split {
    grid-template-columns: 1fr;
    max-width:             600px;
  }

  .orgx-content-split--reversed .orgx-content-split__media {
    order: 0;
  }

  /* content fills full column — removes leftover gap from desktop max-width */
  .orgx-content-split__content {
    max-width: 100%;
  }

  .orgx-content-split__media {
    max-width:     460px;
    margin-inline: auto;
  }

  /* section titles left-align on tablet for better readability */
  .orgx-section__head {
    text-align: left;
  }
}

/* small mobile */
@media (max-width: 480px) {
  .orgx-section {
    padding-block: clamp(60px, 8vw, 100px);
  }

  .orgx-content-split__media {
    max-width:     100%;
    border-radius: 16px;
  }

  /* outcomes cards: tighter padding on small screens */
  .orgx-outcome-card {
    padding: 20px;
  }
}

/* ============================================================================
   10) SECTION HEADER — centered title above two-column content
   ============================================================================ */

.orgx-section__head {
  width:         100%;
  max-width:     var(--width-section);
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align:    center;
}

.orgx-section__title {
  font-size:      clamp(1.75rem, 3.1vw, 2.75rem);
  font-weight:    400;
  line-height:    1.15;
  letter-spacing: 0.01em;
  color:          #fff;
  margin:         0;
}

/* ============================================================================
   11) ARROW LIST — reusable bullet list with FA icon
   ============================================================================ */

.orgx-list {
  list-style:    none;
  margin:        0 0 clamp(20px, 2.5vw, 32px) 0;
  padding:       0;
  display:       grid;
  gap:           10px;
}

.orgx-list li {
  position:     relative;
  padding-left: 24px;
  font-size:    0.92rem;
  line-height:  1.65;
  color:        rgba(255, 255, 255, 0.70);
}

/* arrow-right-long icon via Font Awesome unicode */
.orgx-list li::before {
  content:     "\f178";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position:    absolute;
  left:        0;
  top:         2px;
  font-size:   0.88rem;
  color:       var(--color-green);
}

.orgx-list strong {
  font-weight: 500;
  color:       rgba(255, 255, 255, 0.88);
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  .orgx-section__title {
    font-size: clamp(1.5rem, 4vw, 2rem);
  }
}

/* ============================================================================
   12) SECTION BACKGROUND MODIFIERS — digital section
   ============================================================================ */

.orgx-section--digital {
  position: relative;
  overflow: hidden;
}

.orgx-section--digital__bg {
  position:            absolute;
  inset:               0;
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 100%),
    url('/images/ORGX__digital_bg.webp');
  background-size:
    100% 80px,
    100% 200px,
    cover;
  background-position:
    top    center,
    bottom center,
    top    center;
  background-repeat:   no-repeat, no-repeat, no-repeat;
  opacity:             0.55;
  pointer-events:      none;
  z-index:             0;
}

/* Archive section: fixed height so bg does not stretch on load more */
.orgx-archive__section .orgx-section--digital__bg {
  bottom:  auto;
  height:  clamp(600px, 70vh, 900px);
  background-size:
    100% 0,
    100% 200px,
    cover;
}

.orgx-section--digital .orgx-section__head,
.orgx-section--digital .orgx-content-split {
  position: relative;
  z-index:  1;
}

.orgx-section--digital .orgx-posts-toolbar,
.orgx-section--digital .orgx-masonry,
.orgx-section--digital .orgx-loadmore-wrap {
  position: relative;
  z-index:  1;
}

/* ============================================================================
   13) HERO TRANSITION — sticky green blur/glow overlay between hero & content
   ============================================================================ */

.orgx-hero-transition {
  position: sticky;
  top:       0;
  width:     100%;
  height:    0;          /* zero layout height — purely visual */
  z-index:   2;
  pointer-events: none;
}

.orgx-hero-transition__glow {
  position:            absolute;
  right:               0;
  bottom:              -300px;
  width:               100%;
  height:              1100px;
  background-image:    url('/images/ORGX__blur_right.webp');
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: right center;
  opacity:             0.6;
  pointer-events:      none;
}

/* Left variant — sits between two content sections */
.orgx-hero-transition--left .orgx-hero-transition__glow {
  left:                0;
  right:               auto;
  bottom:              -600px;
  background-image:    url('/images/ORGX__blur_left.webp');
  background-position: left center;
}

/* ============================================================================
   14) OUTCOMES GRID — numbered card grid
   ============================================================================ */

.orgx-section--outcomes {
  position: relative;
  overflow: hidden;
}

/* decorative background image — shared with transformation section */
.orgx-outcomes__bg,
.orgx-transformation__bg {
  position:        absolute;
  inset:           0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  pointer-events:  none;
  z-index:         0;
}

.orgx-outcomes__bg img {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  opacity:    0.75;
}

/* green subtitle below section title — matches hero subtitle scale/weight */
.orgx-outcomes__accent,
.orgx-closer__intro {
  margin:      8px 0 0;
  font-size:   clamp(0.9rem, 1.15vw, 1.2rem);
  font-weight: 500;
  line-height: 1.6;
  color:       var(--color-green);
}

/* 3-column card grid */
.orgx-outcomes__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  max-width:             var(--width-section);
  margin-inline:         auto;
  position:              relative;
  z-index:               1;
}

/* 4-column variant — responsive rules from base grid still apply */
.orgx-outcomes__grid--4col {
  grid-template-columns: repeat(4, 1fr);
}

/* Shared visual base — outcome cards and values/method cards */
.orgx-outcome-card,
.orgx-values__card {
  border-radius:   20px;
  border:          1px solid rgba(255, 255, 255, 0.08);
  background:      rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  position:        relative;
  overflow:        hidden;
  transition:      border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}

/* Premium card system: green border + gradient bg + hover glow */
.orgx-outcome-card {
  padding:    clamp(24px, 2.5vw, 32px);
  border:     1px solid rgba(147, 192, 39, 0.18);
  background: linear-gradient(160deg, rgba(147, 192, 39, 0.07) 0%, rgba(255, 255, 255, 0.01) 55%);
}

/* top-edge green glow line — interactive cards (not used on feature-card/step
   which already carry a permanent solid green top border) */
.orgx-values__card::after,
.orgx-outcome-card::after,
.orgx-job-card::after,
.orgx-pillars__card::after {
  content:        '';
  position:       absolute;
  top:            0;
  left:           5%;
  right:          5%;
  height:         1px;
  background:     linear-gradient(
    90deg,
    transparent                0%,
    rgba(147, 192, 39, 0.50)  50%,
    transparent               100%
  );
  opacity:        0;
  transition:     opacity 0.25s ease;
  pointer-events: none;
}

.orgx-outcome-card:hover,
.orgx-values__card:hover {
  border-color: rgba(147, 192, 39, 0.38);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
  transform:    translateY(-3px);
}

.orgx-values__card:hover::after,
.orgx-outcome-card:hover::after,
.orgx-job-card:hover::after,
.orgx-pillars__card:hover::after {
  opacity: 1;
}

.orgx-outcome-card__nr {
  display:        block;
  margin-bottom:  14px;
  font-size:      0.75rem;
  letter-spacing: 0.15em;
  color:          var(--color-green);
}

/* Circular icon container for outcome cards */
.orgx-outcome-card__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      rgba(147, 192, 39, 0.10);
  border:          1px solid rgba(147, 192, 39, 0.28);
  color:           var(--color-green);
  font-size:       1rem;
  margin-bottom:   20px;
  flex-shrink:     0;
}

/* Small italic bridge text above a section title */
.orgx-section__eyebrow {
  font-size:   clamp(0.82rem, 0.90vw, 0.95rem);
  font-style:  italic;
  color:       rgba(255, 255, 255, 0.48);
  margin:      0 0 clamp(10px, 1.4vw, 16px);
  line-height: 1.6;
}

.orgx-outcome-card h3,
.orgx-values__card h3 {
  font-size:   1.1rem;
  font-weight: 500;
  line-height: 1.3;
  color:       #fff;
}

.orgx-outcome-card h3 { margin: 0 0 10px; }

.orgx-outcome-card p,
.orgx-values__card p {
  margin:      0;
  font-size:   0.92rem;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.70);
}

/* footer: closing text + CTA */
.orgx-outcomes__footer {
  max-width:  var(--width-section);
  margin:     clamp(40px, 5vw, 60px) auto 0;
  text-align: center;
  position:   relative;
  z-index:    1;
}

.orgx-outcomes__closing {
  font-size:     1.1rem;
  margin-bottom: clamp(16px, 2vw, 24px);
  color:         #fff;
}

/* ensure section head renders above bg image */
.orgx-section--outcomes .orgx-section__head {
  position: relative;
  z-index:  1;
}

/* --- responsive ------------------------------------------------------------ */
@media (max-width: 980px) {
  .orgx-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 480px) {
  .orgx-outcomes__grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* ============================================================================
   15) APPROACH — horizontal panel: intro / numbered steps / CTA circle
   ============================================================================ */

.orgx-approach__panel {
  display:       flex;
  align-items:   center;
  gap:           clamp(28px, 3.5vw, 52px);
  max-width:     var(--width-content);
  margin-inline: auto;
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 28px;
  padding:       clamp(36px, 4.5vw, 56px) clamp(32px, 4vw, 52px);
}

/* ---- intro ---------------------------------------------------------------- */

.orgx-approach__intro {
  flex-shrink: 0;
  width:       clamp(150px, 17vw, 210px);
}

.orgx-approach__tagline {
  font-size:   clamp(1.2rem, 2vw, 1.7rem);
  font-weight: 700;
  line-height: 1.1;
  color:       var(--color-green);
  margin:      0 0 var(--space-sm) 0;
}

.orgx-approach__subtitle {
  font-size:   clamp(1rem, 1.4vw, 1.2rem);
  font-weight: 400;
  line-height: 1.5;
  color:       #fff;
  margin:      0;
}

/* ---- steps ---------------------------------------------------------------- */

.orgx-approach__steps {
  display:  flex;
  flex:     1;
  gap:      clamp(16px, 2.5vw, 36px);
  position: relative;
  min-width: 0;
}

/* horizontal connector line behind the numbered circles */
.orgx-approach__steps::before {
  content:    '';
  position:   absolute;
  top:        13px;          /* vertical centre of the 28px circle */
  left:       0;
  right:      0;
  height:     1px;
  background: rgba(255, 255, 255, 0.12);
  z-index:    0;
}

.orgx-approach__step {
  flex:           1;
  display:        flex;
  flex-direction: column;
  gap:            14px;
  position:       relative;
  z-index:        1;
  min-width:      0;
}

.orgx-approach__number {
  width:           28px;
  height:          28px;
  border-radius:   50%;
  background:      var(--color-green);
  color:           #000;
  font-size:       0.68rem;
  font-weight:     700;
  letter-spacing:  0.06em;
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.orgx-approach__step p {
  font-size:   0.88rem;
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.62);
  margin:      0;
}

/* ---- CTA circle ----------------------------------------------------------- */

.orgx-approach__cta {
  flex-shrink: 0;
}

.orgx-approach__cta-link {
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  width:           clamp(152px, 14vw, 192px);
  height:          clamp(152px, 14vw, 192px);
  border-radius:   50%;
  background:      var(--color-green);
  text-align:      center;
  padding:         clamp(20px, 2vw, 28px);
  gap:             6px;
  transition:      transform 0.25s ease, box-shadow 0.25s ease;
}

.orgx-approach__cta-link:hover {
  transform:  scale(1.05);
  box-shadow: 0 0 48px rgba(147, 192, 39, 0.30);
}

.orgx-approach__cta-title {
  font-size:   1rem;
  font-weight: 700;
  line-height: 1.15;
  color:       #000;
}

.orgx-approach__cta-text {
  font-size:   0.72rem;
  font-weight: 600;
  line-height: 1.35;
  color:       #fff;
}

.orgx-approach__cta-link i {
  font-size:  0.85rem;
  color:      rgba(0, 0, 0, 0.65);
  margin-top: 4px;
}

/* ---- responsive ----------------------------------------------------------- */

/* tablet: intro + CTA in top row, steps span full width below */
@media (max-width: 980px) {
  .orgx-approach__panel {
    flex-wrap: wrap;
    gap:       clamp(28px, 4vw, 44px);
  }

  .orgx-approach__intro {
    flex:      1;
    width:     auto;
    min-width: 150px;
  }

  .orgx-approach__steps {
    width:    100%;
    order:    3;
    flex-wrap: wrap;
  }

  .orgx-approach__step {
    min-width: 180px;
  }
}

/* mobile: full vertical stack, connector line hidden */
@media (max-width: 640px) {
  .orgx-approach__panel {
    flex-direction: column;
    align-items:    flex-start;
    padding-inline: clamp(20px, 5vw, 36px);
  }

  .orgx-approach__intro {
    width: 100%;
  }

  .orgx-approach__steps {
    flex-direction: column;
    order:          0;
    gap:            clamp(20px, 5vw, 28px);
  }

  .orgx-approach__steps::before {
    display: none;
  }

  .orgx-approach__step {
    flex-direction: row;
    align-items:    flex-start;
    gap:            16px;
  }

  .orgx-approach__step p {
    margin-top: 4px;
  }

  .orgx-approach__cta {
    width:   100%;
    display: flex;
    justify-content: center;
  }
}


/* ============================================================
 * 16) VALUES CAROUSEL
 * ============================================================ */

.orgx-values {
  --vgap: 20px;
}

/* ---- viewport (scrollable window) --------------------------------- */

.orgx-values__viewport {
  overflow-x:       auto;
  scroll-snap-type: x mandatory;
  scrollbar-width:  none;
  max-width:        calc(var(--width-section) + 2 * var(--wrap-pad));
  margin-inline:    auto;
  padding-inline:   var(--wrap-pad);
  box-sizing:       border-box;
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wrap-pad),
    #000 calc(100% - var(--wrap-pad)),
    transparent 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0,
    #000 var(--wrap-pad),
    #000 calc(100% - var(--wrap-pad)),
    transparent 100%
  );
}

.orgx-values__viewport::-webkit-scrollbar { display: none; }

/* ---- track (flex row of cards) ------------------------------------ */

.orgx-values__track {
  display: flex;
  gap:     var(--vgap);
  width:   max-content;
}

/* ---- card --------------------------------------------------------- */

.orgx-values__card {
  flex:              0 0 calc((min(var(--width-section), 100vw - 2 * var(--wrap-pad)) - 2 * var(--vgap)) / 3);
  scroll-snap-align: start;
  padding:           clamp(28px, 3vw, 40px);
  box-sizing:        border-box;
}

/* active card — green fill */
.orgx-values__card--active {
  background:   var(--color-green);
  border-color: var(--color-green);
}

.orgx-values__card--active::after  { display: none; }

.orgx-values__card--active:hover {
  border-color: var(--color-green);
  transform:    translateY(-3px);
}

/* ---- card typography ---------------------------------------------- */

.orgx-values__card h3 { margin: 0 0 14px; }

.orgx-values__card--active h3,
.orgx-values__card--active p {
  color: #000;
}

/* ---- controls ----------------------------------------------------- */

.orgx-values__controls {
  display:         flex;
  justify-content: center;
  gap:             12px;
  margin-top:      clamp(24px, 3vw, 36px);
}

.orgx-values__control {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          1px solid rgba(255, 255, 255, 0.20);
  background:      transparent;
  color:           rgba(255, 255, 255, 0.70);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.85rem;
  transition:      background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

.orgx-values__control:hover {
  background:   var(--color-green);
  border-color: var(--color-green);
  color:        #000;
}

/* ---- responsive --------------------------------------------------- */

@media (max-width: 980px) {
  .orgx-values__card {
    flex-basis: calc((min(var(--width-section), 100vw - 2 * var(--wrap-pad)) - var(--vgap)) / 2);
  }
}

@media (max-width: 480px) {
  .orgx-values__card {
    flex-basis: calc(100vw - 2 * var(--wrap-pad));
    text-align: left;   /* full-width cards: paragraphs read better left-aligned */
  }
}




/* ============================================================
 * 17) CLOSER — X NAVIGATION
 * ============================================================ */

.orgx-closer {
  position:       relative;
  overflow:       hidden;
  padding-bottom: 0;
}

.orgx-closer__bg {
  position:            absolute;
  inset:               0;
  background-image:    url('/images/ORGX__digital_bg.webp');
  background-repeat:   no-repeat;
  background-position: center center;
  background-size:     cover;
  opacity:             0.35;
  pointer-events:      none;
  z-index:             0;
}

/* ---- stage (square container) ----------------------------- */

.orgx-closer .orgx-section__head {
  margin-bottom: 0;
  position:      relative;
  z-index:       1;
  text-align:    center;
}

.orgx-closer__stage {
  position:      relative;
  width:         min(98vw, 1260px);
  aspect-ratio:  1 / 1;
  margin-inline: auto;
  margin-top:    -160px;
  isolation:     isolate;
}

/* ---- decorative quadrant fills ---------------------------- */

.orgx-closer__fills {
  position:       absolute;
  inset:          0;
  z-index:        1;
  pointer-events: none;
}

.orgx-closer__fill {
  position:            absolute;
  inset:               0;
  opacity:             0;
  transition:          opacity 0.25s ease, transform 0.35s ease;
  background-repeat:   no-repeat;
  background-position: center;
  background-size:     60% 50%;
}

.orgx-closer__fill--top {
  clip-path:           polygon(50% 50%, 24% 24%, 76% 24%);
  background-image:    url('/images/ORGX__cross_top.png');
  background-position: 50% 55%;
}

.orgx-closer__fill--right {
  clip-path:           polygon(50% 50%, 76% 24%, 76% 76%);
  background-image:    url('/images/ORGX__cross_right.png');
  background-position: 45% 50%;
}

.orgx-closer__fill--bottom {
  clip-path:           polygon(50% 50%, 76% 76%, 24% 76%);
  background-image:    url('/images/ORGX__cross_bottom.png');
  background-position: 52% 45%;
}

.orgx-closer__fill--left {
  clip-path:           polygon(50% 50%, 24% 76%, 24% 24%);
  background-image:    url('/images/ORGX__cross_left.png');
  background-position: 55% 50%;
}

.orgx-closer--active .orgx-closer__fill.is-active {
  opacity:   1;
  transform: scale(1.02);
}

/* ---- X graphic -------------------------------------------- */

.orgx-closer__cross {
  position:         absolute;
  inset:            2%;
  z-index:          3;
  pointer-events:   none;
  transform-origin: 50% 50%;
  transition:       transform 0.45s cubic-bezier(0.22, 0.8, 0.24, 1);
}

.orgx-closer__cross-idle,
.orgx-closer__cross-beam {
  position:   absolute;
  inset:      0;
  width:      100%;
  height:     100%;
  object-fit: contain;
  transition: opacity 0.28s ease;
}

.orgx-closer__cross-idle { opacity: 1; }
.orgx-closer__cross-beam { opacity: 0; }

.orgx-closer--active .orgx-closer__cross-idle { opacity: 0; }
.orgx-closer--active .orgx-closer__cross-beam { opacity: 1; }

/* ---- labels ----------------------------------------------- */

.orgx-closer__label {
  position:        absolute;
  z-index:         4;
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  width:           min(300px, 36vw);
  text-align:      center;
  text-decoration: none;
  color:           inherit;
  transition:      opacity 0.22s ease, transform 0.22s ease;
}

.orgx-closer__label strong {
  display:       block;
  font-size:     clamp(1rem, 1.4vw, 1.2rem);
  font-weight:   600;
  line-height:   1.2;
  color:         var(--color-green);
  margin-bottom: 0.4rem;
}

.orgx-closer__tagline {
  display:     block;
  font-size:   clamp(0.78rem, 1vw, 0.88rem);
  line-height: 1.5;
  color:       var(--color-muted);
}

.orgx-closer__cta {
  display:     flex;
  align-items: center;
  gap:         6px;
  margin-top:  8px;
  font-size:   0.82rem;
  font-weight: 500;
  color:       var(--color-green);
}

.orgx-closer__cta i {
  font-size:  0.75rem;
  transition: transform 0.2s ease;
}

.orgx-closer__label:hover        .orgx-closer__cta i,
.orgx-closer__label:focus-visible .orgx-closer__cta i,
.orgx-closer__label.is-active    .orgx-closer__cta i { transform: translateX(4px); }

.orgx-closer--active .orgx-closer__label:not(.is-active) { opacity: 0.4; }

.orgx-closer__label:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 8px;
  border-radius:  8px;
}

/* ---- label positions -------------------------------------- */

.orgx-closer__label--top    { top: 25%;    left: 50%;   transform: translateX(-50%); }
.orgx-closer__label--right  { top: 50%;    right: 10%;  transform: translateY(-50%); }
.orgx-closer__label--bottom { bottom: 25%; left: 50%;   transform: translateX(-50%); }
.orgx-closer__label--left   { top: 50%;    left: 10%;   transform: translateY(-50%); }

.orgx-closer__label--top.is-active    { transform: translateX(-50%) translateY(-5px); }
.orgx-closer__label--bottom.is-active { transform: translateX(-50%) translateY(5px);  }
.orgx-closer__label--right.is-active  { transform: translateY(-50%) translateX(5px);  }
.orgx-closer__label--left.is-active   { transform: translateY(-50%) translateX(-5px); }

@media (max-width: 900px) {
  .orgx-closer__stage { width: min(98vw, 1020px); }

  .orgx-closer__label { width: min(210px, 30vw); }

  .orgx-closer__label strong {
    font-size: clamp(0.85rem, 1.6vw, 1rem);
  }

  .orgx-closer__tagline { display: none; }

  .orgx-closer__cta { font-size: 0.76rem; }

  .orgx-closer__label--top    { top: 28%; }
  .orgx-closer__label--bottom { bottom: 28%; }
  .orgx-closer__label--left   { left: 13%; }
  .orgx-closer__label--right  { right: 13%; }
}

@media (max-width: 580px) {
  /* Break out of orgx-section's padding-inline so the 100vw stage is truly
     viewport-centred instead of being shifted right by wrap-pad pixels. */
  .orgx-closer__stage {
    width:         100vw;
    margin-top:    -60px;
    margin-inline: calc(-1 * var(--wrap-pad));
  }

  .orgx-closer__label { width: min(120px, 30vw); text-align: center; align-items: center; }

  .orgx-closer__label strong {
    font-size: clamp(0.72rem, 3vw, 0.85rem);
    margin-bottom: 0.2rem;
  }

  .orgx-closer__tagline { display: none; }

  .orgx-closer__cta {
    font-size:       0.7rem;
    justify-content: center;
    margin-top:      4px;
    gap:             4px;
  }

  .orgx-closer__label--top    { top: 30%; }
  .orgx-closer__label--bottom { bottom: 30%; }
  .orgx-closer__label--left   { left: 4%; }
  .orgx-closer__label--right  { right: 4%; }
}


/* ============================================================
 * 18) FOOTER
 * ============================================================ */

.orgx-footer {
  position:         relative;
  width:            100%;
  background-color: var(--color-bg);
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  padding:          260px var(--wrap-pad) 80px;
  box-sizing:       border-box;
  overflow:         visible;
}

/* seamless top fade — extends above footer into last section */
.orgx-footer::before {
  content:        '';
  position:       absolute;
  top:            -160px;
  left:           0;
  right:          0;
  height:         160px;
  background:     linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%);
  z-index:        1;
  pointer-events: none;
}

/* ---- background image ------------------------------------- */

.orgx-footer__bg {
  position:             absolute;
  inset:                0;
  background-image:     url('/images/ORGX__footer_bg.png');
  background-repeat:    no-repeat;
  background-position:  center top;
  background-size:      cover;
  z-index:              0;
  pointer-events:       none;
  -webkit-mask-image:   linear-gradient(to bottom, transparent 0%, black 18%);
  mask-image:           linear-gradient(to bottom, transparent 0%, black 18%);
}

/* darken bottom of image so card sits on solid dark */
.orgx-footer__bg::after {
  content:    '';
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent             50%,
    rgba(7, 10, 15, 0.65)   80%,
    rgba(7, 10, 15, 1)     100%
  );
}

/* ---- CTA above card --------------------------------------- */

.orgx-footer__cta,
.orgx-footer__card { position: relative; z-index: 2; }

.orgx-footer__cta {
  width:         100%;
  max-width:     var(--width-section);
  text-align:    center;
  margin-bottom: 240px;
}

.orgx-footer__cta h3 {
  font-size:      clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight:    400;
  letter-spacing: 0.02em;
  color:          var(--color-green);
  margin:         0 0 1.75rem;
}

/* ---- dark card -------------------------------------------- */

.orgx-footer__card {
  width:          100%;
  max-width:      var(--width-section);
  background:     #000;
  border-radius:  24px;
  padding:        clamp(28px, 3.5vw, 48px) clamp(24px, 3.5vw, 56px) clamp(16px, 2vw, 24px);
  box-shadow:     0 10px 30px rgba(0, 0, 0, 0.4);
  display:        flex;
  flex-direction: column;
  gap:            clamp(28px, 3.5vw, 48px);
}

/* ---- column grids ----------------------------------------- */

.orgx-footer__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   2rem 3rem;
  align-items:           start;
}

.orgx-footer__col--wide { grid-column: span 2; }

/* ---- column typography ------------------------------------ */

.orgx-footer__col h4 {
  margin:         0 0 0.75rem;
  color:          var(--color-muted);
  font-size:      0.8rem;
  letter-spacing: 0.04em;
  font-weight:    400;
}

.orgx-footer__col--wide p + h4 { margin-top: 2rem; }

.orgx-footer__col p {
  font-size:   0.7rem;
  line-height: 1.7;
  color:       #767676;
  margin:      0;
}

.orgx-footer__col ul {
  list-style: none;
  margin:     0;
  padding:    0;
}

.orgx-footer__col ul li { line-height: 1.1em; margin-bottom: 0.2em; }

.orgx-footer__col ul li a,
.orgx-footer__col ul li span,
.orgx-footer__legal a {
  font-size:       0.7rem;
  line-height:     1.6;
  color:           #767676;
  text-decoration: none;
  transition:      color 0.25s ease;
}

.orgx-footer__col ul li a:hover,
.orgx-footer__col ul li span:hover,
.orgx-footer__legal a:hover { color: var(--color-green); }

/* green animated underline link */
.orgx-footer__link-green {
  color:           var(--color-green);
  text-decoration: none;
  position:        relative;
}

.orgx-footer__link-green::after {
  content:          '';
  position:         absolute;
  left:             0;
  bottom:           -1px;
  width:            0;
  height:           1px;
  background-color: var(--color-green);
  transition:       width 0.35s ease;
}

.orgx-footer__link-green:hover::after { width: 100%; }

/* ---- social ----------------------------------------------- */

.orgx-footer__social {
  display:        flex;
  flex-direction: column;
  gap:            0.5rem;
  margin-top:     0.5rem;
}

.orgx-footer__social-link {
  display:         flex;
  align-items:     center;
  gap:             0.6rem;
  color:           var(--color-muted);
  font-size:       0.75rem;
  text-decoration: none;
}

.orgx-footer__social-link i {
  flex:            0 0 28px;
  height:          24px;
  border-radius:   5px;
  background:      #222;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.85rem;
  transition:      transform 0.3s ease, color 0.3s ease;
}

.orgx-footer__social-link:hover span { color: var(--color-green); }
.orgx-footer__social-link:hover i    { transform: scale(1.2); color: var(--color-green); }

/* ---- bottom bar ------------------------------------------- */

.orgx-footer__bottom {
  padding-top:     1rem;
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
}

.orgx-footer__bottom span {
  font-size: 0.62rem;
  color:     #767676;
  opacity:   0.9;
}

.orgx-footer__legal {
  display: flex;
  gap:     1rem;
}

/* ---- tablet ----------------------------------------------- */

@media (max-width: 900px) {
  .orgx-footer         { padding: 180px var(--wrap-pad) 60px; }
  .orgx-footer__cta    { margin-bottom: 100px; }

  .orgx-footer__grid {
    grid-template-columns: 1fr 1fr;
    gap:                   1.5rem 2rem;
  }
}

/* ---- mobile ----------------------------------------------- */

@media (max-width: 640px) {
  .orgx-footer         { padding: 120px var(--wrap-pad) 48px; }
  .orgx-footer::before { top: -80px; height: 80px; }
  .orgx-footer__cta    { margin-bottom: 56px; text-align: left; }

  .orgx-footer__card {
    padding: 24px 20px 20px;
    gap:     24px;
  }

  .orgx-footer__grid         { grid-template-columns: 1fr; gap: 1.5rem; }
  .orgx-footer__col--wide    { grid-column: auto; }

  .orgx-footer__col p,
  .orgx-footer__col ul li a,
  .orgx-footer__col ul li span,
  .orgx-footer__legal a      { font-size: 0.78rem; }

  .orgx-footer__bottom       { flex-direction: column; align-items: flex-start; gap: 0.75rem; }
  .orgx-footer__legal        { flex-wrap: wrap; gap: 0.75rem 1rem; }
}


/* ============================================================
 * 19) HERO X — decorative X image on page hero sections
 * ============================================================ */

.orgx-hero__x {
  position:            absolute;
  top:                 40%;
  transform:           translateY(-50%);
  right:               0;
  width:               min(1900px, 90vw);
  height:              min(1900px, 116vh);
  background-image:    url('/images/ORGX__X_right.webp');
  background-repeat:   no-repeat;
  background-size:     contain;
  background-position: right center;
  z-index:             1;
  pointer-events:      none;
  opacity:             0.9;
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .orgx-hero__x {
    width:  min(1900px, 96vw);
    height: min(1900px, 126vh);
    right:  40px;
  }
}

@media (min-width: 1600px) {
  .orgx-hero__x {
    /* midpoint between previous ((100vw - 1600px) / 2) and -80px */
    right: max(0px, calc((100vw - var(--width-nav)) / 4 - 40px));
  }
}

@media (max-width: 900px) {
  .orgx-hero__x { opacity: 0.5; }
}

@media (max-width: 580px) {
  .orgx-hero__x { opacity: 0.25; }
}

/* X on the left side — uses dedicated left-facing image, no transform flip */
.orgx-hero--x-left .orgx-hero__x {
  right:               auto;
  left:                0;
  background-image:    url('/images/ORGX__X_left.webp');
  background-position: left center;
  transform:           translateY(-50%);
}

@media (min-width: 1024px) and (max-width: 1600px) {
  .orgx-hero--x-left .orgx-hero__x {
    left:  40px;
    right: auto;
  }
}

@media (min-width: 1600px) {
  .orgx-hero--x-left .orgx-hero__x {
    left:  max(0px, calc((100vw - var(--width-nav)) / 4 - 40px));
    right: auto;
  }
}


/* ============================================================
 * 20) HERO ALIGNMENT MODIFIERS
 *     Reusable classes applied directly to the hero section.
 *       orgx-hero--right  →  right-bottom (SME style)
 *       orgx-hero--left   →  left-top     (Corporates style)
 * ============================================================ */

/* Extended hero height — shared by both orientations */
.orgx-hero--right,
.orgx-hero--left {
  height: calc(100vh  + 260px);
  height: calc(100svh + 260px);
}

/* Taller hero: override the bottom fade height and guarantee it paints above the side overlay */
.orgx-hero--right::after,
.orgx-hero--left::after {
  content: "";
  height:  140px;
  z-index: 2;
}

/* Left/corporate hero image is lighter at the bottom, so the fade needs to reach
   full opacity well before the digital section edge (120px from hero bottom).
   Accelerated gradient: solid from 75% onward = 300px from bottom on a 400px element,
   meaning the image is completely hidden 180px before the seam. */
.orgx-hero--left::after {
  height:     400px;
  background: linear-gradient(to bottom,
    transparent          0%,
    rgba(7, 10, 15, 0.7) 50%,
    var(--color-bg)      75%,
    var(--color-bg)      100%
  );
}

/* Right-side overlay: darkens the right half for text readability */
.orgx-hero--right::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to left, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 45%, transparent 70%);
  z-index:        1;
  pointer-events: none;
}

/* Left-side overlay: darkens the left half for text readability */
.orgx-hero--left::before {
  content:        '';
  position:       absolute;
  inset:          0;
  background:     linear-gradient(to right, rgba(0,0,0,0.45) 0%, rgba(0,0,0,0.2) 45%, transparent 70%);
  z-index:        1;
  pointer-events: none;
}

/* Right-bottom content */
.orgx-hero--right .orgx-hero__content {
  justify-content: flex-start;
  padding-top:     57vh;
  padding-top:     57svh;
  padding-right:   clamp(50px, 10vw, 160px);
  align-items:     flex-end;
  text-align:      right;
  max-width:       var(--width-nav);
}

/* Left-top content */
.orgx-hero--left .orgx-hero__content {
  justify-content: flex-start;
  padding-top:     clamp(140px, 20vh, 240px);
  padding-left:    clamp(50px, 10vw, 160px);
  align-items:     flex-start;
  text-align:      left;
  max-width:       var(--width-nav);
}

/* Wider text blocks for both aligned hero styles */
.orgx-hero--right .orgx-hero__title,
.orgx-hero--right .orgx-hero__subtitle,
.orgx-hero--right .orgx-hero__text,
.orgx-hero--left  .orgx-hero__title,
.orgx-hero--left  .orgx-hero__subtitle,
.orgx-hero--left  .orgx-hero__text {
  max-width: 900px;
}

.orgx-hero--right .orgx-hero__title,
.orgx-hero--left  .orgx-hero__title  { margin-bottom: 32px; }

.orgx-hero--right .orgx-hero__subtitle,
.orgx-hero--left  .orgx-hero__subtitle { margin-bottom: 28px; }

.orgx-hero--right .orgx-hero__text,
.orgx-hero--left  .orgx-hero__text  { margin-bottom: 32px; }

/* --- responsive: tablet ----------------------------------------- */
@media (max-width: 980px) {
  .orgx-hero--right .orgx-hero__content {
    padding-top:   48vh;
    padding-top:   48svh;
    padding-right: clamp(24px, 5vw, 80px);
    align-items:   flex-start;
    text-align:    left;
  }
  .orgx-hero--left .orgx-hero__content {
    padding-top:  clamp(100px, 18vh, 180px);
    padding-left: clamp(24px, 5vw, 80px);
  }
}

/* --- responsive: small mobile ----------------------------------- */
@media (max-width: 480px) {
  .orgx-hero--right .orgx-hero__content {
    padding-top:   38vh;
    padding-top:   38svh;
    padding-right: clamp(16px, 4vw, 40px);
  }
  .orgx-hero--left .orgx-hero__content {
    padding-top:  clamp(80px, 15vh, 140px);
    padding-left: clamp(16px, 4vw, 40px);
  }
}

/* --- Exit-calc hero variant ------------------------------------ */
/* Cancel the fixed height so the hero grows to contain the calculator */
.orgx-hero--right.orgx-hero--exitcalc {
  height: auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* Re-anchor the X to the same absolute position as on fixed-height heroes.
   Other pages: top = 40% of calc(100svh + 260px) = calc(40svh + 104px).
   PE hero is auto-height so we pin the same value in viewport units. */
.orgx-hero--exitcalc .orgx-hero__x {
  top: calc(40vh  + 104px);
  top: calc(40svh + 104px);
}

/* Digital texture — fades in from the top, fully visible at the bottom */
.orgx-hero--exitcalc .orgx-hero__digital {
  position:              absolute;
  inset:                 0;
  background-image:      url('/images/ORGX__digital_bg.webp');
  background-size:       cover;
  background-position:   center bottom;
  background-repeat:     no-repeat;
  opacity:               0.7;
  z-index:               1;
  pointer-events:        none;
  -webkit-mask-image:    linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 35%, black 75%);
  mask-image:            linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.4) 35%, black 75%);
}

/* Override right-hero content position: left-aligned, starts near top */
.orgx-hero--right.orgx-hero--exitcalc .orgx-hero__content {
  height:          auto;
  padding-top:     clamp(150px, calc(13vh + 50px), 200px);
  padding-right:   var(--wrap-pad);
  padding-left:    clamp(50px, 10vw, 160px);
  padding-bottom:  clamp(60px, 8vw, 120px);
  align-items:     flex-start;
  text-align:      left;
  max-width:       1380px;
  justify-content: flex-start;
}

.orgx-hero--right.orgx-hero--exitcalc .orgx-hero__title,
.orgx-hero--right.orgx-hero--exitcalc .orgx-hero__subtitle,
.orgx-hero--right.orgx-hero--exitcalc .orgx-hero__text {
  max-width: none;
}

@media (min-width: 861px) and (max-width: 1900px) {
  .orgx-hero--right.orgx-hero--exitcalc .orgx-hero__content {
    padding-top: clamp(90px, calc(13vh - 10px), 140px);
  }

  .orgx-hero--right.orgx-hero--exitcalc .orgx-hero__title    { margin-bottom: 14px; }
  .orgx-hero--right.orgx-hero--exitcalc .orgx-hero__subtitle { margin-bottom: 12px; }
  .orgx-hero--right.orgx-hero--exitcalc .orgx-hero__text     { margin-bottom: 14px; }
}

@media (max-width: 860px) {
  .orgx-hero--right.orgx-hero--exitcalc .orgx-hero__content {
    padding-top:   clamp(80px, 12vh, 120px);
    padding-right: clamp(24px, 5vw, 60px);
    padding-left:  clamp(24px, 5vw, 60px);
  }
}

/* --- Page-header hero variant --------------------------------
   Shorter than feature heroes; for inner pages (expertise etc.).
   Auto-height grows with content; ~55 vh minimum.            */
.orgx-hero--page {
  height:     auto;
  min-height: clamp(220px, 36vh, 320px);
  overflow:   visible; /* allow bg image to bleed into section below */
}

/* Extended bg layer bleeds into the expertise section below */
.orgx-hero--page .orgx-hero__bg {
  height:              calc(100% + 600px);
  background-position: center top;
}

/* Fade covers both the hero and the extended 600px below it */
.orgx-hero--page::after {
  top:        0;
  bottom:     auto;
  height:     calc(100% + 600px);
  background: linear-gradient(
    to bottom,
    transparent              0%,
    transparent             28%,
    rgba(7, 10, 15, 0.55)   55%,
    rgba(7, 10, 15, 0.88)   72%,
    #070a0f                 88%
  );
}

/* X graphic: hidden on the compact page hero — fits full-height heroes only */
.orgx-hero--page .orgx-hero__x { display: none; }

/* Left-side darkening overlay — fades out before the hero's bottom edge so
   there is no hard horizontal seam where the overlay ends */
.orgx-hero--page::before {
  content:                '';
  position:               absolute;
  inset:                  0;
  background:             linear-gradient(to right, rgba(0,0,0,0.50) 0%, rgba(0,0,0,0.18) 45%, transparent 72%);
  -webkit-mask-image:     linear-gradient(to bottom, black 0%, black 50%, transparent 88%);
  mask-image:             linear-gradient(to bottom, black 0%, black 50%, transparent 88%);
  z-index:                1;
  pointer-events:         none;
}

/* Left-aligned, vertically padded content — left edge tracks expertise layout */
.orgx-hero--page .orgx-hero__content {
  height:          auto;
  justify-content: flex-start;
  align-items:     flex-start;
  text-align:      left;
  padding-top:     calc(var(--nav-h) + clamp(64px, 8vh, 120px));
  padding-bottom:  clamp(32px, 4vh, 56px);
  padding-left:    max(var(--wrap-pad), calc((100vw - var(--width-section)) / 2));
  padding-right:   max(var(--wrap-pad), calc((100vw - var(--width-section)) / 2));
  max-width:       100%;
}

/* Constrain text blocks */
.orgx-hero--page .orgx-hero__title,
.orgx-hero--page .orgx-hero__subtitle,
.orgx-hero--page .orgx-hero__text {
  max-width: none;
}

.orgx-hero--page .orgx-hero__title    { margin-bottom: 12px; }
.orgx-hero--page .orgx-hero__subtitle { margin-bottom: 10px; }
.orgx-hero--page .orgx-hero__text     { margin-bottom: 0; }

@media (max-width: 980px) {
  .orgx-hero--page .orgx-hero__content {
    padding-top: calc(var(--nav-h-mobile) + clamp(44px, 6vh, 88px));
  }
}


/* ============================================================
 * 21) FEATURE PAGE SHARED OVERRIDES
 *     SMEs, Corporates, Private Equity: all use the extended hero,
 *     sharing footer curtain suppression and reduced padding-top.
 * ============================================================ */

:is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-private-equity, .page-template-page-what-we-do, .page-template-page-contact, .page-template-page-expertise, .page-template-page-service, .page-template-page-about, .page-template-page-join-us) .orgx-footer::before {
  display: none;
}

:is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-private-equity, .page-template-page-what-we-do, .page-template-page-contact, .page-template-page-expertise, .page-template-page-service, .page-template-page-about, .page-template-page-join-us) .orgx-footer {
  padding-top: 80px;
}

/* Generic content pages (page.php) — same footer treatment as named templates */
.page-template-default .orgx-footer::before { display: none; }
.page-template-default .orgx-footer          { padding-top: 80px; }

.page-template-page-expertise .orgx-footer__cta,
.page-template-page-service   .orgx-footer__cta,
.page-template-page-about     .orgx-footer__cta,
.page-template-page-join-us   .orgx-footer__cta {
  display: none;
}

/* Footer background bleeds upward into expertise + service content sections */
.page-template-page-expertise .orgx-footer__bg,
.page-template-page-service   .orgx-footer__bg {
  top:                 -520px;
  height:              calc(100% + 520px);
  -webkit-mask-image:  linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.5) 220px, black 420px);
  mask-image:          linear-gradient(to bottom, transparent 0px, rgba(0,0,0,0.5) 220px, black 420px);
}

:is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-what-we-do) .orgx-section--digital {
  margin-top: -120px;
}

:is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-private-equity, .page-template-page-what-we-do, .page-template-page-contact) .orgx-content-split__body p,
:is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-private-equity, .page-template-page-what-we-do, .page-template-page-contact) .orgx-content-split__body li {
  font-weight: 500;
}

@media (max-width: 980px) {
  :is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-what-we-do) .orgx-section--digital {
    margin-top: -60px;
  }

  .page-template-page-what-we-do .orgx-hero__title,
  .page-template-page-what-we-do .orgx-hero__subtitle,
  .page-template-page-what-we-do .orgx-hero__text {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  :is(.page-template-page-smes, .page-template-page-corporates, .page-template-page-what-we-do) .orgx-section--digital {
    margin-top: 0;
  }
}

/* What We Do: vertically centre within the viewport */
.page-template-page-what-we-do .orgx-hero--left .orgx-hero__content {
  justify-content: center;
  padding-top:     var(--nav-h);
}

/* Constrain hero text width so it doesn't span the full hero */
.page-template-page-what-we-do .orgx-hero__title,
.page-template-page-what-we-do .orgx-hero__subtitle,
.page-template-page-what-we-do .orgx-hero__text {
  max-width: 50%;
}

/* ============================================================
 * 22) TRANSFORMATION SECTION — Corporate: 5-column icon-card grid
 * ============================================================ */

.orgx-section--transformation {
  position: relative;
  overflow: hidden;
}

.orgx-section--transformation .orgx-section__head,
.orgx-transformation__grid,
.orgx-transformation__midline,
.orgx-transformation__closing {
  position: relative;
  z-index:  1;
}

/* Green accent word inside the section title */
.orgx-section--transformation .orgx-section__title span {
  color: var(--color-green);
}

/* Intro paragraph beneath the green subtitle */
.orgx-transformation__intro {
  margin:      clamp(16px, 2vw, 24px) 0 0;
  font-size:   clamp(0.88rem, 0.95vw, 1rem);
  line-height: 1.7;
  color:       #fff;
}

.orgx-section--transformation .orgx-section__head {
  margin-bottom: clamp(24px, 3vw, 40px);
}

/* Decorative atmospheric background — container rules shared with §14 */
.orgx-transformation__bg img {
  max-width:  100%;
  max-height: 100%;
  width:      auto;
  height:     auto;
  object-fit: contain;
  opacity:    0.45;
}

/* 5-column icon-card grid */
.orgx-transformation__grid {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   clamp(12px, 1.4vw, 18px);
  max-width:             var(--width-content);
  margin-inline:         auto;
}

/* Icon + title layout over the existing orgx-outcome-card visual base */
.orgx-transformation__card {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        clamp(20px, 2.2vw, 28px) clamp(12px, 1.2vw, 18px);
}

.orgx-transformation__card i {
  font-size:     clamp(1.4rem, 1.7vw, 1.85rem);
  color:         var(--color-green);
  margin-bottom: 14px;
  flex-shrink:   0;
}

.orgx-transformation__card h3 {
  margin:      0;
  font-size:   clamp(0.76rem, 0.82vw, 0.88rem);
  font-weight: 500;
  line-height: 1.4;
  color:       #fff;
}

/* Italic separator between the two card rows */
.orgx-transformation__midline {
  margin-block: clamp(28px, 3.5vw, 48px);
  text-align:   center;
  font-size:    clamp(1.1rem, 1.45vw, 1.35rem);
  font-weight:  400;
  font-style:   italic;
  color:        #fff;
}

/* Closing green result line */
.orgx-transformation__closing {
  margin-top:  clamp(36px, 4.5vw, 56px);
  text-align:  center;
  font-size:   clamp(0.95rem, 1.05vw, 1.05rem);
  font-weight: 500;
  color:       var(--color-green);
}

/* Pull first section under the hero bottom fade */
.page-template-page-corporates .orgx-section--transformation {
  margin-top: -120px;
}

/* PE hero is auto-height; give the transformation section breathing room */
.page-template-page-private-equity .orgx-section--transformation {
  margin-top: clamp(40px, 6vw, 80px);
}

/* --- tablet: 3 columns ------------------------------------------ */
@media (max-width: 980px) {
  .orgx-transformation__grid {
    grid-template-columns: repeat(3, 1fr);
  }
  /* keep title centred on tablet (base rule left-aligns section heads) */
  .orgx-section--transformation .orgx-section__head {
    text-align: center;
  }
  .page-template-page-corporates .orgx-section--transformation {
    margin-top: -60px;
  }
}

/* --- mobile: 2 columns ------------------------------------------ */
@media (max-width: 640px) {
  .orgx-transformation__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* --- small mobile: single column -------------------------------- */
@media (max-width: 380px) {
  .orgx-transformation__grid {
    grid-template-columns: 1fr;
  }
  .page-template-page-corporates .orgx-section--transformation {
    margin-top: 0;
  }
}


/* ============================================================
 * 23) METHOD CARDS — "How we make it move" (corporates)
 *     Reuses .orgx-values__card visual language; static 3-col.
 * ============================================================ */

/* Section stacking context — lets the digital bg div work
   without the negative margin-top that orgx-section--digital
   would inherit from section 21 on the corporate template. */
.orgx-section:has(.orgx-method-grid) {
  position: relative;
  overflow: hidden;
}

.orgx-section:has(.orgx-method-grid) .orgx-section__head,
.orgx-section:has(.orgx-method-grid) .orgx-method-grid,
.orgx-section:has(.orgx-method-grid) .orgx-method__closing {
  position: relative;
  z-index:  1;
}

/* Static flex row — no scroll, no snap */
.orgx-method-grid {
  display:         flex;
  gap:             20px;
  max-width:       var(--width-section);
  margin-inline:   auto;
  justify-content: center;
  align-items:     stretch;
}

/* Cards — slightly translucent dark glass over the digital bg */
.orgx-method-grid .orgx-values__card {
  flex:              1 1 0;
  min-width:         0;
  scroll-snap-align: none;
  background:        rgba(7, 10, 15, 0.52);
  backdrop-filter:   blur(14px);
}

/* Icon above card title */
.orgx-method-card__icon {
  display:       block;
  font-size:     1.5rem;
  color:         var(--color-green);
  margin-bottom: 18px;
}

/* Spacing between intro p and the list inside method cards */
.orgx-method-grid .orgx-values__card p {
  margin-bottom: 16px;
}

.orgx-method-grid .orgx-values__card .orgx-list {
  margin-bottom: 0;
}


/* Active (green) card: invert list colours for readability */
.orgx-values__card--active .orgx-list li {
  color: rgba(0, 0, 0, 0.72);
}

.orgx-values__card--active .orgx-list li::before {
  color: #000;
}

/* Translucent green glass highlighted card */
.orgx-values__card--white,
.orgx-method-grid .orgx-values__card--white {
  background:      rgba(147, 192, 39, 0.10);
  border-color:    rgba(147, 192, 39, 0.55);
  backdrop-filter: blur(14px);
}

/* Keep top glow always subtly visible, intensify on hover */
.orgx-values__card--white::after {
  display: block;
  opacity: 0.55;
}

.orgx-values__card--white:hover {
  border-color: rgba(147, 192, 39, 0.60);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
}

.orgx-values__card--white:hover::after { opacity: 1; }

.orgx-values__card--white h3,
.orgx-values__card--white p {
  color: #fff;
}

.orgx-values__card--white .orgx-list li {
  color: rgba(255, 255, 255, 0.75);
}

.orgx-values__card--white .orgx-list li::before {
  color: var(--color-green);
}

/* Closing note below the three cards */
.orgx-method__closing {
  margin-top:    clamp(32px, 4vw, 48px);
  margin-inline: auto;
  max-width:     var(--width-section);
  text-align:    center;
  font-size:     clamp(0.85rem, 0.92vw, 0.95rem);
  line-height:   1.75;
  color:         #fff;
  font-style:    italic;
}

/* Full-width levers image row — hidden on mobile */
.orgx-levers-image {
  padding-inline: var(--wrap-pad);
  padding-block:  clamp(32px, 4vw, 56px);
}

.orgx-levers-image img {
  display:       block;
  width:         100%;
  max-width:     var(--width-content);
  height:        auto;
  margin-inline: auto;
  border-radius: 16px;
  opacity:       0.88;
}

@media (max-width: 640px) {
  .orgx-levers-image { display: none; }
}

/* --- tablet: single column ---------------------------------------- */
@media (max-width: 860px) {
  .orgx-method-grid {
    flex-direction: column;
    align-items:    center;
  }

  .orgx-method-grid .orgx-values__card {
    width:      100%;
    max-width:  560px;
    flex:       none;
    text-align: left;   /* paragraphs + lists read better left-aligned */
  }
}

/* =====================================================================
   § 24 – EXIT CALCULATOR
   ===================================================================== */

.orgx-exitcalc { margin-top: 18px; }

/* Two-panel layout — inputs slightly wider than results */
.orgx-exitcalc__layout {
  display:               grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap:                   16px;
  align-items:           stretch;
}

/* Shared glass card — matches old design: light frosted, green glow */
.orgx-exitcalc__panel,
.orgx-exitcalc__results {
  height:                  100%;
  background:              rgba(80, 80, 80, 0.1);
  border:                  1px solid rgba(255, 255, 255, 0.16);
  border-radius:           24px;
  padding:                 22px 20px;
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    0 0 0 1px rgba(147, 192, 39, 0.18),
    0 16px 40px rgba(0, 0, 0, 0.45),
    0 0 28px rgba(147, 192, 39, 0.10);
}

/* Head */
.orgx-exitcalc__head { margin-bottom: 12px; }

.orgx-exitcalc__eyebrow {
  font-size:      0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.55);
}

.orgx-exitcalc__title {
  margin-top:  4px;
  font-size:   0.96rem;
  color:       rgba(255, 255, 255, 0.92);
  font-weight: 500;
}

/* Current / Target columns — each in its own dark card */
.orgx-exitcalc__cols {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.orgx-exitcalc__col {
  background:    rgba(7, 10, 15, 0.35);
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding:       12px;
}

.orgx-exitcalc__colTitle {
  font-size:      0.68rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.65);
  margin-bottom:  10px;
}

/* Fields */
.orgx-exitcalc__field { margin-bottom: 10px; }

.orgx-exitcalc__field label {
  display:        block;
  font-size:      0.66rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.60);
  margin-bottom:  5px;
}

.orgx-exitcalc__field input {
  width:           100%;
  padding:         8px 11px;
  border-radius:   11px;
  background:      rgba(7, 10, 15, 0.65);
  border:          1px solid rgba(255, 255, 255, 0.16);
  color:           var(--color-green);
  outline:         none;
  font-family:     'Raleway', system-ui, sans-serif;
  font-size:       0.90rem;
  font-weight:     600;
  transition:      border 0.2s ease, box-shadow 0.2s ease;
  -moz-appearance: textfield;
}

.orgx-exitcalc__field input::-webkit-inner-spin-button,
.orgx-exitcalc__field input::-webkit-outer-spin-button {
  opacity: 0;
  transition: opacity 0.2s;
}

.orgx-exitcalc__field input:hover::-webkit-inner-spin-button,
.orgx-exitcalc__field input:hover::-webkit-outer-spin-button,
.orgx-exitcalc__field input:focus::-webkit-inner-spin-button,
.orgx-exitcalc__field input:focus::-webkit-outer-spin-button {
  opacity: 0.5;
}

.orgx-exitcalc__field input:focus {
  border-color: rgba(147, 192, 39, 0.85);
  box-shadow:   0 0 0 2px rgba(147, 192, 39, 0.14);
}

/* Mini EV display — border-top style, flush */
.orgx-exitcalc__mini {
  margin-top:      8px;
  padding-top:     8px;
  border-top:      1px solid rgba(255, 255, 255, 0.08);
  display:         flex;
  justify-content: space-between;
  gap:             10px;
}

.orgx-exitcalc__miniLabel {
  font-size: 0.80rem;
  color:     rgba(255, 255, 255, 0.65);
}

.orgx-exitcalc__miniValue {
  font-size:   0.86rem;
  color:       #fff;
  font-weight: 700;
  white-space: nowrap;
}

.orgx-exitcalc__divider {
  height:     1px;
  background: rgba(255, 255, 255, 0.10);
  margin:     10px 0;
}

.orgx-exitcalc__opts {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   12px;
}

.orgx-exitcalc__footnote {
  margin-top: 8px;
  font-size:  0.72rem;
  color:      rgba(255, 255, 255, 0.55);
}

/* Results — big EV uplift block */
.orgx-exitcalc__big {
  border-radius: 14px;
  padding:       12px;
  background:    rgba(147, 192, 39, 0.10);
  border:        1px solid rgba(147, 192, 39, 0.25);
  margin-bottom: 12px;
}

.orgx-exitcalc__bigTop {
  display:         flex;
  justify-content: space-between;
  gap:             12px;
  align-items:     flex-start;
}

.orgx-exitcalc__bigLabel {
  font-size:      0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.65);
  margin-bottom:  6px;
}

.orgx-exitcalc__bigValue {
  font-size:   1.34rem;
  font-weight: 700;
  color:       #fff;
  line-height: 1.1;
}

.orgx-exitcalc__bigMeta {
  margin-top: 10px;
  font-size:  0.82rem;
  color:      rgba(255, 255, 255, 0.70);
}

/* 2×2 result cards */
.orgx-exitcalc__cards {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   12px;
}

.orgx-exitcalc__card {
  background:    rgba(7, 10, 15, 0.35);
  border:        1px solid rgba(255, 255, 255, 0.10);
  border-radius: 14px;
  padding:       12px;
}

.orgx-exitcalc__cardLabel {
  font-size:      0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.55);
  margin-bottom:  8px;
}

.orgx-exitcalc__cardValue {
  color:       #fff;
  font-weight: 700;
  font-size:   0.98rem;
}

.orgx-exitcalc__cardMeta {
  margin-top: 6px;
  font-size:  0.76rem;
  color:      rgba(255, 255, 255, 0.55);
}

.orgx-exitcalc__sep { opacity: 0.6; padding: 0 6px; }

.orgx-exitcalc__note {
  margin-top: 10px;
  font-size:  0.72rem;
  color:      rgba(255, 255, 255, 0.55);
}

.orgx-exitcalc__cta {
  margin-top: 16px;
  text-align: right;
}

/* Value bridge */
.orgx-bridge {
  margin-top:  10px;
  padding-top: 10px;
  border-top:  1px solid rgba(255, 255, 255, 0.10);
}

.orgx-bridge__bar {
  height:        10px;
  border-radius: 999px;
  overflow:      hidden;
  border:        1px solid rgba(255, 255, 255, 0.14);
  background:    rgba(7, 10, 15, 0.55);
  display:       flex;
}

.orgx-bridge__seg { height: 100%; display: block; transition: width 0.35s ease; }
.orgx-bridge__seg--e { background: rgba(147, 192, 39, 0.80); }
.orgx-bridge__seg--m { background: rgba(147, 192, 39, 0.35); }

.orgx-bridge__legend {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   10px;
  margin-top:            10px;
}

.orgx-bridge__item {
  display:     flex;
  align-items: center;
  gap:         8px;
  color:       rgba(255, 255, 255, 0.70);
  font-size:   0.80rem;
}

.orgx-bridge__item strong {
  margin-left: auto;
  color:       #fff;
  font-weight: 700;
  white-space: nowrap;
}

.orgx-bridge__dot {
  width:         10px;
  height:        10px;
  border-radius: 999px;
  border:        1px solid rgba(255, 255, 255, 0.18);
}

.orgx-bridge__dot--e { background: rgba(147, 192, 39, 0.80); }
.orgx-bridge__dot--m { background: rgba(147, 192, 39, 0.35); }

/* ── Responsive ──────────────────────────────────── */
@media (max-width: 860px) {
  .orgx-exitcalc__layout { grid-template-columns: 1fr; }
  .orgx-exitcalc__opts   { grid-template-columns: 1fr; }
  .orgx-exitcalc__cards  { grid-template-columns: 1fr; }
  .orgx-bridge__legend   { grid-template-columns: 1fr; }
}

@media (max-width: 500px) {
  .orgx-exitcalc__cols { grid-template-columns: 1fr; }
}


/* ============================================================
   §25 — Contact hero
   ============================================================ */

/* Auto-height so the panels don't get clipped */
.orgx-hero--contact {
  height:     auto;
  min-height: 100vh;
  min-height: 100svh;
}

/* X anchored to same visual height as the fixed-height heroes */
.orgx-hero--contact .orgx-hero__x {
  top: calc(40vh  + 104px);
  top: calc(40svh + 104px);
}

/* Override orgx-hero--right content positioning: centre everything */
.orgx-hero--contact .orgx-hero__content {
  justify-content: center;
  align-items:     center;
  padding-top:     var(--nav-h);
  padding-bottom:  80px;
  padding-right:   clamp(20px, 5vw, 60px);
  padding-left:    clamp(20px, 5vw, 60px);
  max-width:       100%;
  width:           100%;
}

/* Constrained, left-aligned intro block — matches old 1000px container */
.orgx-contact-intro {
  max-width:  1000px;
  width:      100%;
  text-align: left;
}

/* H1 takes full intro width */
.orgx-hero--contact .orgx-hero__title {
  max-width:     100%;
  margin-bottom: 30px;
}

/* ── Two-column grid: 2fr left / 3fr right ─────────────── */
.orgx-contact-grid {
  display:               grid;
  grid-template-columns: 2fr 3fr;
  gap:                   2rem;
}

/* Dark glass card — same as old site rgba(0,0,0,0.5) */
.orgx-contact-dark {
  background:               rgba(0, 0, 0, 0.50);
  border-radius:            18px;
  padding:                  24px 40px 20px;
  backdrop-filter:          blur(12px);
  -webkit-backdrop-filter:  blur(12px);
}

/* Left panel: description text */
.orgx-contact-col--left .orgx-contact-dark p {
  font-size:   0.86rem;
  line-height: 1.6;
  color:       rgba(255, 255, 255, 0.75);
  margin:      0 0 16px;
}

/* Bullet list: icon + text in a two-column grid inside a <p> */
.orgx-contact-col--left .orgx-contact-dark p.orgx-contact-bullets {
  display:               grid;
  grid-template-columns: auto 1fr;
  column-gap:            0.75rem;
  row-gap:               0.6rem;
  align-items:           start;
  margin-bottom:         0;
}

.orgx-contact-col--left .orgx-contact-dark p.orgx-contact-bullets i {
  margin-top: 0.2em;
  color:      var(--color-green);
}

.orgx-contact-textlist {
  display:     block;
  line-height: 1.5;
}

/* Meta row below left card: address + socials */
.orgx-contact-meta {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   2rem;
  padding:               20px 40px;
}

.orgx-contact-meta h4 {
  font-size:   0.8rem;
  color:       rgba(255, 255, 255, 0.75);
  font-weight: 400;
  margin:      0 0 8px;
}

.orgx-contact-meta p {
  color:       rgba(255, 255, 255, 0.45);
  font-size:   0.8rem;
  line-height: 1.8;
  margin:      0;
}

.orgx-contact-social {
  display:     flex;
  align-items: center;
  gap:         0.6rem;
  margin:      0.35rem 0;
  color:       rgba(255, 255, 255, 0.75);
  font-size:   0.85rem;
  transition:  opacity 0.2s ease;
}

.orgx-contact-social:hover { opacity: 0.72; }

.orgx-contact-meta > div:last-child {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

/* Right panel: placeholder text in green */
.orgx-contact-col--right .orgx-contact-dark > p {
  font-size:   1.05rem;
  line-height: 1.7;
  color:       var(--color-green);
  margin:      0 0 24px;
}

/* ── Formidable Forms: contact form styling ─────────────── */

.orgx-contact-form .frm_forms,
.orgx-contact-form form { width: 100%; }

.orgx-contact-form .frm_form_field {
  margin-bottom: clamp(10px, 1.4vw, 16px);
}

.orgx-contact-form .frm_primary_label,
.orgx-contact-form label {
  display:        block;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.45);
  margin-bottom:  5px;
}

.orgx-contact-form .frm_required { color: var(--color-green); }

.orgx-contact-form input[type="text"],
.orgx-contact-form input[type="email"],
.orgx-contact-form input[type="tel"],
.orgx-contact-form input[type="url"],
.orgx-contact-form input[type="number"],
.orgx-contact-form textarea,
.orgx-contact-form select {
  display:      block;
  width:        100%;
  box-sizing:   border-box;
  background:   rgba(255, 255, 255, 0.06);
  border:       1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  color:        rgba(255, 255, 255, 0.90);
  padding:      10px 14px;
  font-family:  inherit;
  font-size:    0.88rem;
  line-height:  1.5;
  transition:   border-color 0.2s ease, background 0.2s ease;
  appearance:   none;
}

.orgx-contact-form textarea {
  resize:     vertical;
  min-height: 110px;
}

.orgx-contact-form input::placeholder,
.orgx-contact-form textarea::placeholder {
  color: rgba(255, 255, 255, 0.25);
}

.orgx-contact-form input[type="text"]:focus,
.orgx-contact-form input[type="email"]:focus,
.orgx-contact-form input[type="tel"]:focus,
.orgx-contact-form input[type="url"]:focus,
.orgx-contact-form input[type="number"]:focus,
.orgx-contact-form textarea:focus,
.orgx-contact-form select:focus {
  outline:      none;
  border-color: var(--color-green);
  background:   rgba(147, 192, 39, 0.05);
}

/* Submit — matches orgx-button--primary */
.orgx-contact-form .frm_submit { margin-top: clamp(8px, 1vw, 14px); }

.orgx-contact-form .frm_submit input[type="submit"],
.orgx-contact-form .frm_submit button[type="submit"],
.orgx-contact-form input[type="submit"],
.orgx-contact-form button[type="submit"] {
  display:          inline-flex;
  align-items:      center;
  gap:              0.5rem;
  padding:          0.5rem 1.6rem;
  border-radius:    999px;
  border:           1px solid rgba(255, 255, 255, 0.65);
  background:       transparent;
  color:            var(--color-green);
  font-family:      inherit;
  font-size:        0.9rem;
  font-weight:      500;
  letter-spacing:   0.02em;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background 0.4s ease, color 0.4s ease,
                    border-color 0.4s ease, transform 0.4s ease;
  transform-origin: center;
}

.orgx-contact-form .frm_submit input[type="submit"]:hover,
.orgx-contact-form .frm_submit button[type="submit"]:hover,
.orgx-contact-form input[type="submit"]:hover,
.orgx-contact-form button[type="submit"]:hover {
  background:   var(--color-green);
  border-color: var(--color-green);
  color:        #000;
  transform:    scale(1.05);
}

/* Validation errors */
.orgx-contact-form .frm_error {
  display:    block;
  color:      rgba(255, 100, 100, 0.85);
  font-size:  0.74rem;
  margin-top: 4px;
}

.orgx-contact-form .frm_error_style {
  background:    rgba(255, 60, 60, 0.10);
  border:        1px solid rgba(255, 60, 60, 0.28);
  border-radius: 8px;
  padding:       10px 14px;
  margin-bottom: 14px;
  font-size:     0.80rem;
  color:         rgba(255, 130, 130, 0.90);
}

/* Success message */
.orgx-contact-form .frm_message {
  background:    rgba(147, 192, 39, 0.08);
  border:        1px solid rgba(147, 192, 39, 0.28);
  border-radius: 10px;
  padding:       14px 18px;
  color:         var(--color-green);
  font-size:     0.88rem;
  line-height:   1.6;
}

@media (max-width: 480px) {
  .orgx-contact-form .frm_submit input[type="submit"],
  .orgx-contact-form .frm_submit button[type="submit"] {
    width:           100%;
    justify-content: center;
  }
}

/* ── Responsive ─────────────────────────────────────────── */

/* Prevent orgx-hero--right @media rules (same specificity) from
   overriding our centered content positioning on tablet/mobile */
@media (max-width: 980px) {
  .orgx-hero--contact .orgx-hero__content {
    padding-top:   var(--nav-h-mobile);
    padding-right: clamp(20px, 5vw, 60px);
    padding-left:  clamp(20px, 5vw, 60px);
    align-items:   center;
  }
}

@media (max-width: 860px) {
  .orgx-contact-grid { grid-template-columns: 1fr; }
  .orgx-contact-meta { padding: 20px 0; grid-template-columns: 1fr; }
  .orgx-contact-dark { padding: 20px 24px 16px; }
}

@media (max-width: 480px) {
  .orgx-hero--contact .orgx-hero__content {
    padding-top:   var(--nav-h-mobile);
    padding-right: clamp(16px, 4vw, 40px);
    padding-left:  clamp(16px, 4vw, 40px);
  }

  .orgx-contact-intro { max-width: 100%; }
}


/* ============================================================
   §25b — ABOUT PAGE
   ============================================================ */


/* Hero eyebrow — small green label above h1 */
.orgx-hero__eyebrow {
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-green);
  margin:         0 0 18px;
}

/* About page: align both columns from the top so kicker titles share the same baseline */
.page-template-page-about .orgx-content-split {
  align-items: start;
}


/* About page: transparent composition image — sized to height, pinned right */
.page-template-page-about .orgx-hero__bg {
  background-size:     auto 92%;
  background-position: right bottom;
  background-repeat:   no-repeat;
}

/* About page: large statement pinned to hero bottom-right */
.orgx-hero__statement {
  position:       absolute;
  bottom:         clamp(240px, 34vw, 420px);
  right:          clamp(80px, 14vw, 200px);
  z-index:        2;
  font-size:      clamp(1.4rem, 2.8vw, 2.4rem);
  font-weight:    700;
  line-height:    1.15;
  letter-spacing: 0.01em;
  color:          rgba(255, 255, 255, 0.82);
  text-align:     right;
  pointer-events: none;
  margin:         0;
}

@media (max-width: 860px) {
  .orgx-hero__statement {
    font-size: clamp(1.4rem, 3.5vw, 2.2rem);
    right:     clamp(40px, 8vw, 100px);
    bottom:    clamp(160px, 22vw, 260px);
  }
}

@media (max-width: 480px) {
  .orgx-hero__statement { display: none; }
}

/* ── About: manifesto quote block ──────────────────────── */
.orgx-about-quote {
  padding:       clamp(24px, 3.5vw, 44px) clamp(28px, 4vw, 52px);
  margin:        clamp(40px, 6vw, 72px) auto;
  max-width:     780px;
  border-left:   3px solid var(--color-green);
  background:    linear-gradient(135deg, rgba(147, 192, 39, 0.06) 0%, transparent 65%);
  border-radius: 0 16px 16px 0;
}

.orgx-about-quote p {
  font-size:   clamp(1.05rem, 1.65vw, 1.4rem);
  font-weight: 500;
  line-height: 1.58;
  font-style:  italic;
  color:       #fff;
  margin:      0;
}

/* ── About: scaling principles grid ────────────────────── */
.orgx-about-principles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(16px, 2vw, 24px);
  margin-top:            clamp(32px, 4vw, 52px);
}

.orgx-about-principles .orgx-values__card {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.orgx-about-principles .orgx-values__card h3 {
  display:     flex;
  align-items: baseline;
  gap:         12px;
}

.orgx-about-principles__nr {
  font-size:   0.72rem;
  font-weight: 600;
  color:       var(--color-green);
  letter-spacing: 0.08em;
  flex-shrink: 0;
}

@media (max-width: 860px) {
  .orgx-about-principles {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .orgx-about-principles {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

/* ── About: manifesto body copy ────────────────────────── */
.orgx-about-manifesto {
  max-width:   760px;
  margin:      0 auto;
  text-align:  center;
}

.orgx-about-manifesto p {
  font-size:    clamp(0.95rem, 1.2vw, 1.1rem);
  line-height:  1.85;
  color:        rgba(255, 255, 255, 0.90);
  margin:       0 0 1.4em;
}

.orgx-about-manifesto p:last-child { margin-bottom: 0; }

.orgx-about-manifesto p strong {
  color:       #fff;
  font-weight: 500;
}

/* ── About: Who we are — ORGX__ams background ───────────── */

/* 4-side gradient fades + image in one background-image stack.
   Gradients (topmost layers) blend into var(--color-bg) at all edges.
   opacity 0.40 keeps it atmospheric; section text stays readable
   via the existing z-index:1 rules on orgx-section--digital. */
.orgx-about__ams-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 100%),
    linear-gradient(to right,  var(--color-bg) 0%, transparent 100%),
    linear-gradient(to left,   var(--color-bg) 0%, transparent 100%),
    url('/images/ORGX__ams.webp');
  background-size:
    100% 30%,
    100% 30%,
    20% 100%,
    20% 100%,
    cover;
  background-position:
    top    center,
    bottom center,
    left   center,
    right  center,
    center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  opacity: 0.40;
}

/* ── About: Why we exist — enhanced readability ─────────── */

/* Dim the digital texture so the glass panel carries the scene */
.orgx-about__why-section .orgx-section--digital__bg {
  opacity: 0.30;
}

/* Glass panel — provides contrast over the busy bg */
.orgx-about-why__panel {
  position:                relative;
  z-index:                 1;
  max-width:               740px;
  margin:                  0 auto;
  padding:                 clamp(40px, 5vw, 64px) clamp(28px, 4vw, 52px);
  background:              rgba(0, 0, 0, 0.44);
  border:                  1px solid rgba(255, 255, 255, 0.07);
  border-radius:           18px;
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

/* Tighter head-to-body gap inside the panel */
.orgx-about__why-section .orgx-section__head {
  margin-bottom: clamp(24px, 3vw, 36px);
}

/* Larger, higher-contrast body text inside the panel */
.orgx-about__why-section .orgx-about-manifesto p {
  font-size:   clamp(1.0rem, 1.3vw, 1.15rem);
  line-height: 1.88;
  color:       rgba(255, 255, 255, 0.84);
  margin:      0 0 1.25em;
}

/* Key sentence: green, separated by subtle rule lines */
.orgx-about-why__highlight {
  padding-block: clamp(12px, 1.5vw, 18px);
  border-top:    1px solid rgba(255, 255, 255, 0.09);
  border-bottom: 1px solid rgba(255, 255, 255, 0.09);
  margin-block:  clamp(4px, 0.5vw, 8px);
}

/* Higher specificity needed to override .orgx-about-manifesto p strong */
.orgx-about__why-section .orgx-about-manifesto .orgx-about-why__highlight strong {
  color:       var(--color-green);
  font-size:   clamp(1.05rem, 1.45vw, 1.25rem);
  font-weight: 500;
}

/* Sub-statement: white, slightly larger */
.orgx-about__why-section .orgx-about-manifesto .orgx-about-why__statement {
  color:       #fff;
  font-size:   clamp(1.05rem, 1.4vw, 1.2rem);
  font-weight: 500;
  margin-bottom: 1.3em;
}

/* CTA wrapper */
.orgx-about-why__cta {
  text-align: center;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 540px) {
  .orgx-about-why__panel { border-radius: 14px; }
}


/* ============================================================
   §25c — JOIN US PAGE
   ============================================================ */

/* Secondary CTA link below primary button in hero */
/* ── Join Us hero: X left, content right ───────────────────
   Bottom fade:  orgx-hero--left::after (400px gradient).
   Right overlay: orgx-hero--left::before (darkens left, reveals right).
   Top: nav gradient.
   Left edge: mask fades the image on the left so the X stands out
              cleanly against the dark background.                      */
.page-template-page-join-us .orgx-hero__bg {
  -webkit-mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 38%,
    black 100%
  );
  mask-image: linear-gradient(
    to right,
    transparent 0%,
    black 38%,
    black 100%
  );
}

/* Content: rechts uitgelijnd, lager geplaatst */
.page-template-page-join-us .orgx-hero__content {
  align-items:   flex-end;
  text-align:    right;
  padding-top:   clamp(200px, 34vh, 400px);
  padding-left:  var(--wrap-pad);
  padding-right: clamp(50px, 10vw, 160px);
}

@media (max-width: 980px) {
  .page-template-page-join-us .orgx-hero__content {
    padding-top:   clamp(140px, 22vh, 240px);
    padding-right: clamp(24px, 5vw, 80px);
  }
}

@media (max-width: 480px) {
  .page-template-page-join-us .orgx-hero__content {
    align-items:   flex-start;
    text-align:    left;
    padding-top:   clamp(100px, 18vh, 160px);
    padding-right: clamp(16px, 4vw, 40px);
  }
}

.orgx-join__secondary-cta {
  margin-top:  20px;
  font-size:   0.85rem;
}

/* ── First content section: closer to tall hero ─────────── */
.orgx-section.orgx-join__builder {
  padding-top: clamp(40px, 5vw, 64px);
}

/* Align kicker labels to top on the join page content split */
.page-template-page-join-us .orgx-content-split {
  align-items: start;
}

/* ── Bridge image background for manifesto section ──────── */

/* 4-side fade: all gradients + image in one background-image stack.
   Gradients are topmost (first) and the image sits beneath.
   At edges the dark fade blends into var(--color-bg); opacity 0.50
   keeps the image atmospheric without overpowering the text. */
.orgx-join__bridge-bg {
  position:   absolute;
  inset:      0;
  z-index:    0;
  pointer-events: none;
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 100%),
    linear-gradient(to right,  var(--color-bg) 0%, transparent 100%),
    linear-gradient(to left,   var(--color-bg) 0%, transparent 100%),
    url('/images/ORGX__bridge.webp');
  background-size:
    100% 28%,
    100% 28%,
    18% 100%,
    18% 100%,
    cover;
  background-position:
    top    center,
    bottom center,
    left   center,
    right  center,
    center 40%;
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, no-repeat;
  opacity: 0.50;
}

/* ── Manifesto statement block ───────────────────────────── */
.orgx-join__manifesto {
  position:                relative;
  z-index:                 1;
  max-width:               800px;
  margin:                  0 auto;
  padding:                 clamp(40px, 5.5vw, 68px) clamp(28px, 4.5vw, 56px);
  background:              rgba(0, 0, 0, 0.42);
  border:                  1px solid rgba(255, 255, 255, 0.07);
  border-radius:           18px;
  backdrop-filter:         blur(12px);
  -webkit-backdrop-filter: blur(12px);
  text-align:              center;
  display:                 flex;
  flex-direction:          column;
  gap:                     clamp(22px, 2.8vw, 32px);
}

.orgx-join__manifesto-lead {
  font-size:   clamp(1.3rem, 2.2vw, 1.9rem);
  font-weight: 400;
  line-height: 1.35;
  color:       #fff;
  margin:      0;
}

/* Three separated impact lines */
.orgx-join__manifesto-points {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            clamp(4px, 0.6vw, 8px);
}

.orgx-join__manifesto-points span {
  display:        block;
  font-size:      clamp(0.95rem, 1.35vw, 1.2rem);
  font-weight:    400;
  color:          rgba(255, 255, 255, 0.46);
  letter-spacing: 0.07em;
}

.orgx-join__manifesto-belief {
  font-size:      clamp(1.15rem, 1.9vw, 1.6rem);
  font-weight:    500;
  color:          var(--color-green);
  margin:         0;
  letter-spacing: 0.01em;
}

.orgx-join__manifesto-close {
  font-size:      clamp(0.86rem, 1.0vw, 0.95rem);
  color:          rgba(255, 255, 255, 0.50);
  margin:         0;
  letter-spacing: 0.04em;
}

/* ── Green eyebrow variant ───────────────────────────────── */
.orgx-section__eyebrow.is-green {
  color:       var(--color-green);
  font-style:  normal;
  font-weight: 500;
  opacity:     1;
}

/* 7-card culture grid: 4-col desktop → 2-col tablet → 1-col mobile */
.orgx-join__cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   clamp(14px, 1.8vw, 22px);
  width:                 100%;
  max-width:             var(--width-section);
  margin-inline:         auto;
}

@media (max-width: 980px) {
  .orgx-join__cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
  .orgx-join__cards { grid-template-columns: 1fr; gap: 12px; }
}

/* Job CTA block: stack header + button centered */
.orgx-join__cta-block {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            clamp(24px, 3vw, 36px);
  text-align:     center;
}

.orgx-join__cta-block .orgx-section__head {
  margin-bottom: 0;
}

/* Shared inner wrapper — caps section content to section width, matching all other sections */
.orgx-section__nav-wrap {
  max-width:     var(--width-section);
  margin-inline: auto;
  width:         100%;
}

/* ── "Be part of our organisation" section ──────────────── */

.orgx-join__org {
  width: 100%;
}

/* Title + intro + button: left-aligned, max readable width */
.orgx-join__org-lead {
  max-width: 640px;
}

.orgx-join__org-title {
  text-align:    left;
  margin-bottom: clamp(16px, 2vw, 24px);
}

.orgx-join__org-text {
  font-size:     clamp(0.95rem, 1.15vw, 1.05rem);
  line-height:   1.8;
  color:         rgba(255, 255, 255, 0.72);
  margin:        0 0 clamp(24px, 3vw, 36px);
}

/* Three pillars row */
.orgx-join__org-items {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(20px, 3vw, 40px);
  margin-top:            clamp(48px, 6vw, 80px);
}

.orgx-join__org-item {
  border-top:  2px solid var(--color-green);
  padding-top: clamp(16px, 2vw, 24px);
}

.orgx-join__org-item h3 {
  font-size:     clamp(1rem, 1.3vw, 1.15rem);
  font-weight:   600;
  color:         #fff;
  margin:        0 0 10px;
  letter-spacing: 0.01em;
}

.orgx-join__org-item p {
  font-size:   0.92rem;
  line-height: 1.7;
  color:       rgba(255, 255, 255, 0.62);
  margin:      0;
}

@media (max-width: 860px) {
  .orgx-join__org-items {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 540px) {
  .orgx-join__org-items {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

/* Open application: constrain and centre the manifesto text */
.orgx-join__open-application {
  width:     100%;
  max-width: var(--width-section);
  margin:    0 auto;
}


/* ============================================================
   §26 — EXPERTISE PAGE — sidebar + content layout
   ============================================================ */

/* Expertise body section */
.orgx-section--expertise-body {
  padding-top: clamp(28px, 3.5vw, 48px);
  background:  transparent; /* hero bg bleeds in from above */
}

/* Two-column layout: narrow sticky sidebar + main content */
.orgx-expertise__layout {
  display:               grid;
  grid-template-columns: 220px 1fr;
  gap:                   clamp(40px, 5vw, 80px);
  max-width:             var(--width-section);
  margin-inline:         auto;
  align-items:           start;
  position:              relative;
  z-index:               1;
}

/* ── Sticky sidebar ──────────────────────────────────────── */
.orgx-expertise__sidebar {
  position:    sticky;
  top:         calc(var(--nav-h) + 24px);
  align-self:  start;
  padding-top: clamp(48px, 5vw, 72px); /* sit below the "What we offer" heading */
}

.orgx-expertise__nav-title {
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.38);
  margin:         0 0 14px;
}

.orgx-expertise__nav {
  list-style:  none;
  margin:      0;
  padding:     0;
  border-left: 1px solid rgba(255, 255, 255, 0.08);
}

.orgx-expertise__nav li { margin: 0; }

.orgx-expertise__nav-link {
  display:      block;
  padding:      8px 0 8px 16px;
  font-size:    0.82rem;
  font-weight:  400;
  color:        rgba(255, 255, 255, 0.45);
  border-left:  2px solid transparent;
  margin-left:  -1px;
  line-height:  1.4;
  transition:   color 0.2s ease, border-color 0.2s ease;
}

.orgx-expertise__nav-link:hover {
  color:        rgba(255, 255, 255, 0.82);
  border-color: rgba(147, 192, 39, 0.40);
}

.orgx-expertise__nav-link.is-active {
  color:        var(--color-green);
  border-color: var(--color-green);
  font-weight:  500;
}

/* ── Other expertise sidebar block ──────────────────────── */
.orgx-expertise__other-nav {
  margin-top:  28px;
  padding-top: 20px;
  border-top:  1px solid rgba(255, 255, 255, 0.08);
}

.orgx-expertise__nav-desc {
  display:     block;
  font-size:   0.72rem;
  line-height: 1.3;
  color:       rgba(255, 255, 255, 0.28);
  margin-top:  2px;
}

@media (max-width: 860px) {
  .orgx-expertise__nav-desc { display: none; }
}

/* ── Section heading inside the content column ───────────── */
.orgx-expertise__heading {
  font-size:      clamp(1.5rem, 2.2vw, 2rem);
  font-weight:    400;
  line-height:    1.2;
  color:          #fff;
  margin:         0 0 clamp(20px, 2vw, 28px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* ── Main content column ─────────────────────────────────── */
.orgx-expertise__content {
  display:        flex;
  flex-direction: column;
  gap:            clamp(14px, 1.8vw, 20px);
}

/* Scroll offset so sticky nav doesn't cover anchored cards */
.orgx-expertise__item {
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

/* Override orgx-outcome-card p { margin: 0 } for multi-paragraph cards */
.orgx-expertise__item p              { margin: 0 0 0.75em; }
.orgx-expertise__item p:last-child   { margin-bottom: 0; }

/* orgx-list inside cards and intro: match paragraph rhythm */
.orgx-expertise__item .orgx-list,
.orgx-expertise__intro .orgx-list            { margin-top: 0.4em; margin-bottom: 0.75em; }
.orgx-expertise__item .orgx-list:last-child,
.orgx-expertise__intro .orgx-list:last-child { margin-bottom: 0; }

/* "Why it matters" intro block — plain text, no card chrome */
.orgx-expertise__intro {
  margin-bottom: clamp(28px, 3.5vw, 48px);
}
.orgx-expertise__intro p              { margin: 0 0 0.75em; color: rgba(255,255,255,0.72); line-height: 1.75; }
.orgx-expertise__intro p:last-child   { margin-bottom: 0; }

/* ── CTA block ───────────────────────────────────────────── */
.orgx-expertise__cta {
  margin-top: clamp(24px, 3vw, 40px);
  text-align: left;
}

.orgx-expertise__cta p {
  font-size:     clamp(1rem, 1.2vw, 1.2rem);
  font-weight:   400;
  line-height:   1.6;
  color:         #fff;
  margin:        0 0 clamp(16px, 2vw, 24px);
}

/* ── Responsive ─────────────────────────────────────────── */

/* Tablet: sidebar moves above content, becomes pill-nav row */
@media (max-width: 860px) {
  .orgx-expertise__layout {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .orgx-expertise__sidebar {
    position:    static;
    padding-top: 0;
    margin-bottom: clamp(28px, 4vw, 40px);
  }

  /* Horizontal pill-style nav */
  .orgx-expertise__nav {
    display:        flex;
    flex-wrap:      wrap;
    gap:            8px;
    border-left:    none;
    padding-bottom: 4px;
  }

  .orgx-expertise__nav li { flex: 0 0 auto; }

  .orgx-expertise__nav-link {
    padding:      6px 14px;
    margin-left:  0;
    border:       1px solid rgba(255, 255, 255, 0.12);
    border-left:  1px solid rgba(255, 255, 255, 0.12);
    border-radius: 999px;
    font-size:    0.78rem;
    white-space:  nowrap;
    color:        rgba(255, 255, 255, 0.55);
  }

  .orgx-expertise__nav-link:hover {
    border-color: rgba(147, 192, 39, 0.45);
  }

  .orgx-expertise__nav-link.is-active {
    border-color: var(--color-green);
    background:   rgba(147, 192, 39, 0.08);
  }

  /* Reset scroll margin for mobile nav-h */
  .orgx-expertise__heading,
  .orgx-expertise__item {
    scroll-margin-top: calc(var(--nav-h-mobile) + 16px);
  }
}

/* ============================================================
 * §27 — SERVICE TEMPLATE
 *     Leaflet-style pages: Strategic Pressure Test,
 *     ORGX Framework, 6-Week Execution Sprints.
 *     Reuses: orgx-hero--page, orgx-method-grid, orgx-values__card,
 *             orgx-outcome-card, orgx-list, orgx-button, orgx-link.
 * ============================================================ */

/* Hero: restore text-to-button gap removed by --page modifier */
.orgx-hero--service .orgx-hero__text {
  margin-bottom: clamp(24px, 3vh, 40px);
}

/* ── Hero split: text left + optional image right ────────── */

.orgx-hero--service .orgx-hero__content {
  flex-direction: row;
  align-items:    flex-start;
  gap:            clamp(40px, 6vw, 80px);
}

.orgx-service-hero__text {
  flex:           1 1 0;
  min-width:      0;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
}

.orgx-service-hero__visual {
  flex:       0 0 clamp(280px, 40%, 480px);
  align-self: flex-start;
  margin-top: -40px;
}

.orgx-service-hero__img {
  display:    block;
  width:      100%;
  height:     auto;
  max-height: clamp(320px, 48vh, 520px);
  object-fit: contain;
}

/* ── Intro note ─────────────────────────────────────────────── */

.orgx-service__note-wrap {
  background:     var(--color-bg);
  padding-inline: var(--wrap-pad);
  padding-block:  clamp(24px, 3vw, 40px);
}

.orgx-service__note {
  max-width:     var(--width-section);
  margin-inline: auto;
  padding:       clamp(18px, 2vw, 28px) clamp(20px, 2.5vw, 36px);
  border-left:   3px solid rgba(147, 192, 39, 0.45);
  background:    rgba(147, 192, 39, 0.04);
  border-radius: 0 12px 12px 0;
}

.orgx-service__note p {
  margin:      0 0 0.75em;
  font-size:   clamp(0.88rem, 1vw, 1rem);
  line-height: 1.75;
  color:       rgba(255, 255, 255, 0.68);
}

.orgx-service__note p:last-child { margin-bottom: 0; }

.orgx-service__note .orgx-list            { margin-top: 0.4em; margin-bottom: 0.5em; }
.orgx-service__note .orgx-list:last-child { margin-bottom: 0; }


/* ── "Why" section cards — body text & list rhythm ─────────── */

.orgx-service__why-card {
  padding: clamp(24px, 2.5vw, 36px);
}

.orgx-service__why-card p {
  margin:      0 0 0.75em;
  font-size:   0.92rem;
  line-height: 1.72;
  color:       rgba(255, 255, 255, 0.65);
}

.orgx-service__why-card p:last-child          { margin-bottom: 0; }
.orgx-service__why-card .orgx-list            { margin-top: 0.3em; margin-bottom: 0.5em; }
.orgx-service__why-card .orgx-list:last-child { margin-bottom: 0; }

/* ── Feature cards (2-col, SPT) ─────────────────────────────── */

.orgx-service__features {
  display:         grid;
  grid-template-columns: 1fr 1fr;
  gap:             clamp(20px, 3vw, 40px);
  max-width:       var(--width-section);
  margin-inline:   auto;
}

.orgx-service__feature-card {
  display:            flex;
  flex-direction:     column;
  position:           relative;
  border:             1px solid rgba(147, 192, 39, 0.18);
  border-top:         2px solid var(--color-green);
  background:         linear-gradient(160deg, rgba(147, 192, 39, 0.07) 0%, rgba(255, 255, 255, 0.01) 55%);
  transition:         border-right-color 0.25s ease,
                      border-bottom-color 0.25s ease,
                      border-left-color 0.25s ease,
                      box-shadow 0.25s ease,
                      transform 0.25s ease;
}

.orgx-service__feature-card:hover {
  /* preserve solid green top; only brighten side/bottom borders */
  border-right-color:  rgba(147, 192, 39, 0.38);
  border-bottom-color: rgba(147, 192, 39, 0.38);
  border-left-color:   rgba(147, 192, 39, 0.38);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
  transform:    translateY(-3px);
}

.orgx-service__card-tag {
  display:         inline-flex;
  align-self:      flex-start;
  font-size:       0.70rem;
  font-weight:     600;
  letter-spacing:  0.09em;
  text-transform:  uppercase;
  color:           var(--color-green);
  background:      rgba(147, 192, 39, 0.08);
  border:          1px solid rgba(147, 192, 39, 0.24);
  border-radius:   999px;
  padding:         4px 14px;
  margin-bottom:   16px;
}

.orgx-service__feature-card h3 { margin: 0 0 14px; }

.orgx-service__feature-card p {
  margin:      0 0 0.75em;
  font-size:   0.92rem;
  line-height: 1.72;
  color:       rgba(255, 255, 255, 0.65);
}

.orgx-service__feature-card p:last-child          { margin-bottom: 0; }
.orgx-service__feature-card .orgx-list            { margin-top: 0.3em; margin-bottom: 0.75em; }
.orgx-service__feature-card .orgx-list:last-child { margin-bottom: 0; }

.orgx-service__card-answer {
  margin-top:  auto;
  padding-top: 16px;
  border-top:  1px solid rgba(147, 192, 39, 0.2);
  font-size:   0.82rem !important;
  font-style:  italic;
  color:       var(--color-green) !important;
  opacity:     0.85;
}

/* ── Steps (ORGX Framework, 6-Week) ────────────────────────── */

.orgx-service__steps {
  display:       flex;
  flex-direction: column;
  gap:           clamp(16px, 2vw, 24px);
  max-width:     var(--width-section);
  margin-inline: auto;
}

.orgx-service__step {
  display:       grid;
  grid-template-columns: 52px 1fr;
  gap:           clamp(20px, 2.5vw, 36px);
  padding:       clamp(24px, 2.5vw, 36px);
  position:      relative;
  background:    linear-gradient(160deg, rgba(147, 192, 39, 0.07) 0%, rgba(255, 255, 255, 0.01) 55%);
  border:        1px solid rgba(147, 192, 39, 0.18);
  border-top:    2px solid var(--color-green);
  border-radius: 16px;
  align-items:   start;
  transition:    border-right-color 0.25s ease,
                 border-bottom-color 0.25s ease,
                 border-left-color 0.25s ease,
                 box-shadow 0.25s ease,
                 transform 0.25s ease;
}

.orgx-service__step:hover {
  /* preserve solid green top; only brighten side/bottom borders */
  border-right-color:  rgba(147, 192, 39, 0.38);
  border-bottom-color: rgba(147, 192, 39, 0.38);
  border-left-color:   rgba(147, 192, 39, 0.38);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
  transform:    translateY(-3px);
}

.orgx-service__step-nr {
  font-size:      1.8rem;
  font-weight:    600;
  line-height:    1;
  letter-spacing: -0.02em;
  color:          var(--color-green);
  padding-top:    4px;
}

.orgx-service__step-body h3 {
  font-size:   clamp(1rem, 1.2vw, 1.15rem);
  font-weight: 500;
  line-height: 1.3;
  color:       #fff;
  margin:      0 0 6px;
}

.orgx-service__step-subtitle {
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--color-green);
  margin:         0 0 14px;
}

.orgx-service__step-body p {
  margin:      0 0 0.75em;
  font-size:   0.92rem;
  line-height: 1.72;
  color:       rgba(255, 255, 255, 0.65);
}

.orgx-service__step-body p:last-child          { margin-bottom: 0; }
.orgx-service__step-body .orgx-list            { margin-top: 0.3em; margin-bottom: 0.75em; }
.orgx-service__step-body .orgx-list:last-child { margin-bottom: 0; }

.orgx-service__step-closing {
  margin-top:    16px;
  padding-top:   14px;
  border-top:    1px solid rgba(147, 192, 39, 0.2);
  font-size:     0.82rem;
  font-style:    italic;
  color:         var(--color-green);
  opacity:       0.85;
  margin-bottom: 0 !important;
}

/* ── Steps: 3-column horizontal variant ────────────────────── */

.orgx-service__steps--columns {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(16px, 2.5vw, 28px);
  align-items:           stretch;
}

.orgx-service__steps--columns .orgx-service__step {
  display:        flex;
  flex-direction: column;
  gap:            0;
  padding:        clamp(24px, 2.5vw, 32px);
}

.orgx-service__steps--columns .orgx-service__step-nr {
  font-size:     2.2rem;
  padding-top:   0;
  margin-bottom: 14px;
}

.orgx-service__steps--columns .orgx-service__step-body {
  display:        flex;
  flex-direction: column;
  flex:           1;
}

.orgx-service__steps--columns .orgx-service__step-closing {
  margin-top:       auto;
  padding-top:      14px;
  border-top-color: rgba(147, 192, 39, 0.2);
  color:            var(--color-green);
  opacity:          0.85;
}

@media (max-width: 860px) {
  .orgx-service__steps--columns {
    grid-template-columns: 1fr;
  }
}

/* ── Focus list (6-Week) ────────────────────────────────────── */

.orgx-service__focus-list {
  list-style:      none;
  margin:          0 auto;
  padding:         0;
  max-width:       var(--width-section);
  display:         grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap:             12px;
}

.orgx-service__focus-item {
  display:       flex;
  align-items:   center;
  gap:           14px;
  padding:       clamp(14px, 1.5vw, 20px) clamp(16px, 2vw, 24px);
  background:    rgba(255, 255, 255, 0.03);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  font-size:     0.92rem;
  font-weight:   400;
  line-height:   1.4;
  color:         rgba(255, 255, 255, 0.72);
  transition:    border-color 0.2s ease, background 0.2s ease;
}

.orgx-service__focus-item .fa-solid {
  color:       var(--color-green);
  font-size:   1rem;
  flex-shrink: 0;
  width:       1.1em;
  text-align:  center;
}

.orgx-service__focus-item:hover {
  border-color: rgba(147, 192, 39, 0.28);
  background:   rgba(147, 192, 39, 0.04);
}

/* ── Delivers card grid ─────────────────────────────────────── */

.orgx-service__delivers {
  display:        flex;
  flex-direction: column;
  gap:            clamp(24px, 3vw, 40px);
  max-width:      var(--width-section);
  margin-inline:  auto;
}

.orgx-service__deliver-grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   clamp(14px, 1.8vw, 22px);
}

.orgx-service__deliver-card {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  padding:        clamp(20px, 2.5vw, 30px) clamp(16px, 2vw, 24px);
  background:     rgba(255, 255, 255, 0.03);
  border:         1px solid rgba(255, 255, 255, 0.08);
  border-radius:  14px;
  transition:     border-color 0.25s ease, background 0.25s ease;
}

.orgx-service__deliver-card:hover {
  border-color: rgba(147, 192, 39, 0.22);
  background:   rgba(147, 192, 39, 0.04);
}

.orgx-service__deliver-icon {
  font-size: 1.25rem;
  color:     var(--color-green);
  line-height: 1;
}

.orgx-service__deliver-card p {
  margin:      0;
  font-size:   0.92rem;
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.72);
}

/* ── Navigator ──────────────────────────────────────────────── */

.orgx-service__navigator-section {
  padding-top: clamp(32px, 4vw, 56px);
}

.orgx-service__navigator {
  display:       grid;
  grid-template-columns: 1fr 1fr;
  gap:           clamp(20px, 3vw, 36px);
  max-width:     var(--width-section);
  margin-inline: auto;
}

.orgx-service__nav-card {
  display:        flex;
  flex-direction: column;
  justify-content: space-between;
  gap:            20px;
  text-decoration: none;
}

.orgx-service__nav-question {
  font-size:   clamp(0.92rem, 1.1vw, 1.05rem);
  font-weight: 500;
  line-height: 1.5;
  color:       rgba(255, 255, 255, 0.85);
  margin:      0;
}

/* orgx-link inside nav card */
.orgx-service__nav-card .orgx-link {
  align-self: flex-start;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 860px) {

  .orgx-hero--service .orgx-hero__content {
    flex-direction: column;
    align-items:    flex-start;
    gap:            clamp(24px, 4vw, 40px);
  }

  .orgx-service-hero__visual {
    width:      100%;
    flex-basis: auto;
    margin-top: 0;
  }

  .orgx-service-hero__img {
    max-height: clamp(200px, 40vw, 300px);
  }

  .orgx-service__features {
    grid-template-columns: 1fr;
  }

  .orgx-service__deliver-grid {
    grid-template-columns: 1fr 1fr;
  }

  .orgx-service__navigator {
    grid-template-columns: 1fr;
  }

  .orgx-service__step {
    grid-template-columns: 40px 1fr;
    gap: 16px;
  }

  .orgx-service__step-nr { font-size: 1.5rem; }

}

@media (max-width: 480px) {

  .orgx-service__focus-list {
    grid-template-columns: 1fr;
  }

  .orgx-service__deliver-grid {
    grid-template-columns: 1fr;
  }

  .orgx-service__step {
    grid-template-columns: 1fr;
  }

  .orgx-service__step-nr {
    font-size: 1rem;
    padding-top: 0;
  }

}

/* ============================================================================
 * §28 — ARCHIVE / CATEGORY / SINGLE / JOB TEMPLATES
 *     Post cards, job cards, archive grids, single post/job layouts,
 *     pagination, filter toolbar, prose typography.
 *     New classes follow the orgx- BEM prefix throughout.
 * ============================================================================ */

/* ── Accessibility utility ──────────────────────────────────── */

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

/* ── Hero modifiers: archive + single ───────────────────────────
   Reuse orgx-hero--page; reset the 600 px expertise bleed
   because the first section below is opaque.                    */

.orgx-hero--archive .orgx-hero__bg,
.orgx-hero--single  .orgx-hero__bg {
  height: 100%;
}

.orgx-hero--archive::after,
.orgx-hero--single::after {
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent             0%,
    rgba(7, 10, 15, 0.42)  42%,
    rgba(7, 10, 15, 0.82)  72%,
    #070a0f                95%
  );
}

/* Archive hero: compact, no bg image — wrapper provides the digital texture */
.orgx-hero--archive {
  min-height: 0;
}

.orgx-hero--archive::after { display: none; }

.orgx-hero--archive .orgx-hero__content {
  padding-top:    calc(var(--nav-h) + clamp(24px, 2.5vh, 40px));
  padding-bottom: clamp(12px, 1.5vh, 20px);
}

/* ── Archive wrap: one digital bg behind hero + masonry ─────────── */

.orgx-archive-wrap {
  position:    relative;
  overflow-x:  hidden;  /* clip horizontaal, niet verticaal */
}

/* Fixed-height bg: starts at top of hero, never stretches on load more */
.orgx-archive-wrap__bg {
  position:            absolute;
  top:                 -80px;
  left:                0;
  right:               0;
  height:              clamp(800px, 105vh, 1300px);
  background-image:
    linear-gradient(to top, var(--color-bg) 0%, transparent 25%),
    url('/images/ORGX__digital_bg.webp');
  background-size:     100% 100%, 100% auto;
  background-position: bottom center, top center;
  background-repeat:   no-repeat, no-repeat;
  opacity:             0.35;
  pointer-events:      none;
  z-index:             0;
}

/* Hero + archive section float above the digital bg layer */
.orgx-archive-wrap > .orgx-hero--archive {
  position: relative;
  z-index:  1;
}

/* Archive section above footer::before gradient (z-index:1) so load more stays visible */
.orgx-archive-wrap > .orgx-section.orgx-archive__section {
  position:   relative;
  z-index:    2;
  background: transparent;
}

/* Single hero: slightly taller for featured image impact */
.orgx-hero--single {
  min-height: clamp(280px, 40vh, 440px);
}

/* ── Archive section: tighter top padding (below hero) ──────── */

.orgx-section.orgx-archive__section {
  padding-top:    clamp(20px, 2.5vw, 36px);
  padding-bottom: clamp(48px, 5vw, 72px);
}

/* ── Archive toolbar (tag filter row) ───────────────────────── */

.orgx-archive__toolbar {
  max-width:     var(--width-section);
  margin-inline: auto;
  margin-bottom: clamp(20px, 2.5vw, 36px);
}

.orgx-archive__filters {
  display:   flex;
  flex-wrap: wrap;
  gap:       10px;
}

.orgx-archive__filter {
  display:        inline-flex;
  align-items:    center;
  padding:        6px 18px;
  font-family:    inherit;
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.05em;
  color:          rgba(255, 255, 255, 0.68);
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.12);
  border-radius:  999px;
  cursor:         pointer;
  transition:     color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.orgx-archive__filter:hover,
.orgx-archive__filter.is-active {
  color:        var(--color-green);
  border-color: rgba(147, 192, 39, 0.45);
  background:   rgba(147, 192, 39, 0.08);
}

.orgx-archive__filter:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 2px;
}

/* ── Post card grid ─────────────────────────────────────────── */

.orgx-post-grid {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           clamp(16px, 2.5vw, 28px);
  max-width:     var(--width-section);
  margin-inline: auto;
}

/* ── Post card ──────────────────────────────────────────────── */

.orgx-post-card {
  display:         flex;
  flex-direction:  column;
  border-radius:   20px;
  border:          1px solid rgba(255, 255, 255, 0.08);
  background:      rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(6px);
  overflow:        hidden;
  position:        relative;
  opacity:         0;
  transform:       translateY(10px);
  transition:      transform 0.25s ease, border-color 0.25s ease,
                   box-shadow 0.25s ease, opacity 0.42s ease;
}

.orgx-post-card.is-in {
  opacity:   1;
  transform: translateY(0);
}

/* Top glow line on hover */
.orgx-post-card::after {
  content:    '';
  position:   absolute;
  top:        0;
  left:       5%;
  right:      5%;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent                 0%,
    rgba(147, 192, 39, 0.50)   50%,
    transparent                100%
  );
  opacity:    0;
  transition: opacity 0.25s ease;
  pointer-events: none;
}

.orgx-post-card:hover {
  transform:    translateY(-3px);
  border-color: rgba(147, 192, 39, 0.38);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
}

.orgx-post-card:hover::after { opacity: 1; }

/* Featured image */
.orgx-post-card__image {
  display:      block;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  flex-shrink:  0;
}

.orgx-post-card__image img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  filter:     grayscale(100%) contrast(105%) brightness(85%) hue-rotate(200deg) saturate(120%);
  opacity:    0.65;
  transition: filter 0.32s ease, opacity 0.32s ease, transform 0.32s ease;
}

.orgx-post-card:hover .orgx-post-card__image img {
  filter:    grayscale(40%) contrast(105%) brightness(92%);
  opacity:   0.85;
  transform: scale(1.04);
}

/* Card body */
.orgx-post-card__body {
  display:        flex;
  flex-direction: column;
  flex:           1;
  padding:        clamp(18px, 2vw, 26px);
  gap:            10px;
}

/* Category badge */
.orgx-post-card__cat {
  display:        inline-flex;
  align-self:     flex-start;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--color-green);
  background:     rgba(147, 192, 39, 0.08);
  border:         1px solid rgba(147, 192, 39, 0.24);
  border-radius:  999px;
  padding:        3px 12px;
}

/* Title */
.orgx-post-card__title {
  font-size:   clamp(1rem, 1.2vw, 1.12rem);
  font-weight: 500;
  line-height: 1.3;
  margin:      0;
}

.orgx-post-card__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-post-card__title a:hover { color: var(--color-green); }

/* Excerpt */
.orgx-post-card__excerpt {
  font-size:   0.88rem;
  line-height: 1.72;
  color:       rgba(255, 255, 255, 0.58);
  margin:      0;
  flex:        1;
}

/* Meta: date + read time */
.orgx-post-card__meta {
  display:  flex;
  gap:      12px;
  font-size: 0.72rem;
  color:    rgba(255, 255, 255, 0.32);
  margin-top: auto;
}

/* Read-more arrow link — uses global .orgx-link */
.orgx-post-card__body .orgx-link { margin-top: 4px; }

/* ── Load more ──────────────────────────────────────────────── */

.orgx-archive__more {
  display:         flex;
  justify-content: center;
  margin-top:      clamp(32px, 4vw, 56px);
}

/* Empty state */
.orgx-archive__empty {
  grid-column: 1 / -1;
  color:       rgba(255, 255, 255, 0.42);
  font-size:   0.92rem;
  text-align:  center;
  padding:     clamp(32px, 4vw, 56px) 0;
}

/* ── Pagination ─────────────────────────────────────────────── */

.orgx-pagination {
  margin-top:    clamp(32px, 4vw, 56px);
  max-width:     var(--width-section);
  margin-inline: auto;
}

.orgx-pagination__list {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             8px;
  list-style:      none;
  margin:          0;
  padding:         0;
}

.orgx-pagination__list .page-numbers {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-width:       38px;
  height:          38px;
  padding:         0 10px;
  border-radius:   999px;
  border:          1px solid rgba(255, 255, 255, 0.12);
  background:      rgba(255, 255, 255, 0.03);
  color:           rgba(255, 255, 255, 0.62);
  font-size:       0.82rem;
  text-decoration: none;
  transition:      all 0.2s ease;
}

.orgx-pagination__list .page-numbers:hover,
.orgx-pagination__list .page-numbers.current {
  color:        var(--color-green);
  border-color: rgba(147, 192, 39, 0.45);
  background:   rgba(147, 192, 39, 0.08);
}

.orgx-pagination__list .page-numbers:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 2px;
}

/* ── Job pages: archive-wrap integration ────────────────────── */

/* Single hero inside the archive-wrap: floats above the digital bg layer. */
.orgx-archive-wrap > .orgx-hero--single {
  position: relative;
  z-index:  1;
}

/* Override the default ::after so the hero bottom fades to transparent
   instead of solid #070a0f.  Without this the solid bottom edge sits right
   above the transparent section, creating a hard visible cut.
   The digital bg from orgx-archive-wrap__bg then flows through seamlessly. */
.orgx-archive-wrap > .orgx-hero--single::after {
  background: linear-gradient(
    to bottom,
    transparent             0%,
    rgba(7, 10, 15, 0.40)  45%,
    rgba(7, 10, 15, 0.80)  78%,
    transparent            100%
  );
}

/* Single job details section: transparent so the digital bg flows through,
   same behaviour as orgx-archive__section inside the archive-wrap. */
.orgx-archive-wrap > .orgx-section.orgx-single__section {
  position:   relative;
  z-index:    2;
  background: transparent;
}

/* Safety fallbacks — redundant once archive-wrap wraps these sections,
   kept for any edge case where the wrapper is absent. */
.post-type-archive-job .orgx-section.orgx-archive__section {
  position: relative;
  z-index:  2;
}

.single-job .orgx-section.orgx-single__section {
  position: relative;
  z-index:  2;
}

/* ── Job grid ───────────────────────────────────────────────── */

.orgx-job-grid {
  display:       grid;
  grid-template-columns: repeat(3, 1fr);
  gap:           clamp(16px, 2.5vw, 28px);
  max-width:     var(--width-section);
  margin-inline: auto;
}

/* ── Job card ───────────────────────────────────────────────── */

.orgx-job-card {
  display:        flex;
  flex-direction: column;
  gap:            14px;
  padding:        clamp(20px, 2.2vw, 28px);
  position:       relative;
  border-radius:  16px;
  border:         1px solid rgba(255, 255, 255, 0.08);
  background:     rgba(255, 255, 255, 0.03);
  transition:     transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.orgx-job-card:hover {
  transform:    translateY(-3px);
  border-color: rgba(147, 192, 39, 0.38);
  box-shadow:   0 8px 32px rgba(147, 192, 39, 0.13);
}

.orgx-job-card__top {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.orgx-job-card__title {
  font-size:   1.05rem;
  font-weight: 500;
  line-height: 1.3;
  margin:      0;
}

.orgx-job-card__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-job-card__title a:hover { color: var(--color-green); }

.orgx-job-card__badges {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.orgx-job-card__excerpt {
  font-size:   0.88rem;
  line-height: 1.68;
  color:       rgba(255, 255, 255, 0.56);
  margin:      0;
  flex:        1;
}

.orgx-job-card .orgx-link { margin-top: auto; }

/* ── Badge (location / type / tag pill) ─────────────────────── */

.orgx-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      0.68rem;
  font-weight:    600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--color-green);
  background:     rgba(147, 192, 39, 0.07);
  border:         1px solid rgba(147, 192, 39, 0.20);
  border-radius:  999px;
  padding:        3px 10px;
}

.orgx-badge .fa-solid { font-size: 0.58rem; opacity: 0.75; }

/* ── Job archive toolbar ────────────────────────────────────── */

.orgx-jobs-toolbar {
  max-width:     var(--width-section);
  margin-inline: auto;
  margin-bottom: clamp(20px, 2.5vw, 32px);
  display:       flex;
  flex-wrap:     wrap;
  gap:           clamp(12px, 1.5vw, 20px);
  align-items:   center;
}

.orgx-jobs-filters {
  display:   flex;
  flex-wrap: wrap;
  gap:       8px;
  flex:      1;
}

.orgx-jobs-filter {
  display:        inline-flex;
  align-items:    center;
  padding:        6px 18px;
  font-family:    inherit;
  font-size:      0.78rem;
  font-weight:    500;
  letter-spacing: 0.05em;
  color:          rgba(255, 255, 255, 0.68);
  background:     rgba(255, 255, 255, 0.04);
  border:         1px solid rgba(255, 255, 255, 0.12);
  border-radius:  999px;
  cursor:         pointer;
  transition:     color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.orgx-jobs-filter:hover,
.orgx-jobs-filter.is-active {
  color:        var(--color-green);
  border-color: rgba(147, 192, 39, 0.45);
  background:   rgba(147, 192, 39, 0.08);
}

.orgx-jobs-filter:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 2px;
}

.orgx-jobs-selects {
  display:     flex;
  gap:         10px;
  align-items: center;
  flex-wrap:   wrap;
}

/* SVG arrow baked into bg-image so no extra element is needed */
.orgx-jobs-select {
  appearance:    none;
  padding:       8px 36px 8px 14px;
  font-family:   inherit;
  font-size:     0.80rem;
  color:         rgba(255, 255, 255, 0.78);
  background:    rgba(255, 255, 255, 0.04)
                 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2393c027' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E")
                 no-repeat right 12px center;
  border:        1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  cursor:        pointer;
  transition:    border-color 0.2s ease;
}

.orgx-jobs-select option { background: #070a0f; }

.orgx-jobs-select:hover,
.orgx-jobs-select:focus {
  border-color: rgba(147, 192, 39, 0.40);
  outline:      none;
}

.orgx-jobs-reset {
  font-size:   0.75rem;
  color:       rgba(255, 255, 255, 0.35);
  background:  transparent;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  padding:     4px 8px;
  transition:  color 0.2s ease;
}

.orgx-jobs-reset:hover { color: var(--color-green); }

/* Job count */
.orgx-jobs-count {
  max-width:     var(--width-section);
  margin-inline: auto;
  margin-bottom: clamp(14px, 1.8vw, 20px);
  font-size:     0.78rem;
  color:         rgba(255, 255, 255, 0.35);
  text-align:    right;
}

/* ── Single post: layout ────────────────────────────────────── */

/* tighter section spacing for single pages */
.orgx-section.orgx-single__section {
  padding-top:    clamp(32px, 4vw, 52px);
  padding-bottom: clamp(180px, 14vw, 240px);
}

.orgx-single__layout {
  display:       grid;
  grid-template-columns: 240px 1fr;
  gap:           clamp(32px, 5vw, 72px);
  max-width:     var(--width-section);
  margin-inline: auto;
  align-items:   start;
}

.orgx-single__sidebar {
  position:   sticky;
  top:        calc(var(--nav-h) + 24px);
  align-self: start;
}

/* Sidebar meta card */
.orgx-single__meta {
  padding:        clamp(20px, 2vw, 28px);
  border-radius:  16px;
  border:         1px solid rgba(255, 255, 255, 0.08);
  background:     rgba(255, 255, 255, 0.02);
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.orgx-single__meta-item {
  font-size: 0.75rem;
  color:     rgba(255, 255, 255, 0.36);
}

.orgx-single__meta-group {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.orgx-single__meta-label {
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
}

.orgx-single__meta-link {
  color:           rgba(255, 255, 255, 0.70);
  font-size:       0.80rem;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-single__meta-link:hover { color: var(--color-green); }

.orgx-single__back,
.orgx-single__share {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       0.78rem;
  color:           rgba(255, 255, 255, 0.45);
  text-decoration: none;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
  padding:         0;
  transition:      color 0.2s ease;
}

.orgx-single__back:hover,
.orgx-single__share:hover { color: var(--color-green); }

/* Related posts (in sidebar) */
.orgx-single__related {
  margin-top:  clamp(20px, 2.5vw, 32px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top:  1px solid rgba(255, 255, 255, 0.08);
}

.orgx-single__related-label {
  display:        block;
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  margin-bottom:  12px;
}

.orgx-single__related-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.orgx-single__related-list a {
  display:         block;
  color:           rgba(255, 255, 255, 0.70);
  font-size:       0.82rem;
  line-height:     1.4;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-single__related-list a:hover { color: var(--color-green); }

.orgx-single__related-date {
  display:    block;
  font-size:  0.68rem;
  color:      rgba(255, 255, 255, 0.28);
  margin-top: 2px;
}

/* Hero meta line (date · read time) */
.orgx-single__hero-meta {
  margin-bottom: 0;
  font-size:     clamp(0.78rem, 1vw, 0.90rem);
  color:         rgba(255, 255, 255, 0.65);
}

/* ── Prose — rich content typography ────────────────────────── */

/* ── Generic page (page.php) — title header + content ──────────────────── */

/* Title header: nav clearance + generous vertical padding, no bg image */
.orgx-page__header {
  padding-top:    calc(var(--nav-h) + clamp(40px, 6vh, 80px));
  padding-bottom: clamp(28px, 4vh, 52px);
  padding-inline: var(--wrap-pad);
  background:     var(--color-bg);
}

.orgx-page__header-inner {
  max-width:     820px;
  margin-inline: auto;
}

.orgx-page__heading {
  font-size:   clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 400;
  line-height: 1.15;
  color:       #fff;
  margin:      0;
}

/* Content section: sits in normal flow, no z-index needed without a hero */
.orgx-page__section {
  background: var(--color-bg);
}

/* Content column: single readable width, centred */
.orgx-page__content {
  max-width:     820px;
  margin-inline: auto;
}

.orgx-prose {
  font-size:   clamp(0.95rem, 1.05vw, 1.05rem);
  line-height: 1.85;
  color:       rgba(255, 255, 255, 0.80);
}

.orgx-prose h2,
.orgx-prose h3,
.orgx-prose h4 {
  color:       #fff;
  font-weight: 500;
  line-height: 1.25;
  margin:      1.5em 0 0.5em;
}

.orgx-prose h2 { font-size: clamp(1.3rem, 2vw, 1.75rem); }
.orgx-prose h3 { font-size: clamp(1.1rem, 1.6vw, 1.35rem); }
.orgx-prose h4 { font-size: 1rem; }

.orgx-prose p               { margin: 0 0 1em; }
.orgx-prose p:last-child    { margin-bottom: 0; }
.orgx-prose strong          { color: #fff; font-weight: 600; }

.orgx-prose a {
  color:                 var(--color-green);
  text-decoration:       underline;
  text-underline-offset: 3px;
}

.orgx-prose a:hover { text-decoration: none; }

.orgx-prose ul,
.orgx-prose ol {
  margin:       0 0 1em;
  padding-left: 1.4em;
}

.orgx-prose li { margin-bottom: 0.4em; }

.orgx-prose blockquote {
  margin:        0 0 1em;
  padding:       0.8em 1.2em;
  border-left:   3px solid rgba(147, 192, 39, 0.45);
  background:    rgba(147, 192, 39, 0.04);
  border-radius: 0 8px 8px 0;
  font-style:    italic;
  color:         rgba(255, 255, 255, 0.68);
}

.orgx-prose img {
  max-width:     100%;
  height:        auto;
  border-radius: 12px;
  margin:        1em 0;
}

.orgx-prose figcaption {
  font-size:  0.78rem;
  color:      rgba(255, 255, 255, 0.36);
  text-align: center;
  margin-top: 6px;
}

.orgx-prose hr {
  border:     none;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  margin:     2em 0;
}

.orgx-prose pre {
  background:    rgba(255, 255, 255, 0.04);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding:       1em 1.2em;
  overflow-x:    auto;
  font-size:     0.85rem;
  line-height:   1.6;
  margin:        0 0 1em;
}

.orgx-prose code {
  background:    rgba(147, 192, 39, 0.10);
  border-radius: 4px;
  padding:       0.1em 0.4em;
  font-size:     0.88em;
  color:         var(--color-green);
}

.orgx-prose pre code {
  background: transparent;
  padding:    0;
  color:      inherit;
}

/* ── Job single: layout ─────────────────────────────────────── */

.orgx-job-single__layout {
  display:       grid;
  grid-template-columns: 240px 1fr;
  gap:           clamp(32px, 5vw, 72px);
  max-width:     var(--width-section);
  margin-inline: auto;
  align-items:   start;
}

.orgx-job-single__sidebar {
  position:   sticky;
  top:        calc(var(--nav-h) + 24px);
  align-self: start;
}

.orgx-job-single__details {
  padding:        clamp(20px, 2.2vw, 28px);
  border-radius:  16px;
  border:         1px solid rgba(255, 255, 255, 0.08);
  background:     rgba(255, 255, 255, 0.02);
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.orgx-job-single__kicker {
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-green);
  opacity:        0.72;
}


/* ============================================================================
   §35 — HOMEPAGE — rotating hero + logo carousel
   Pure CSS animations, no JavaScript required.
   ============================================================================ */

/* ── Hero container ─────────────────────────────────────────────────────── */

/* Homepage overrides: extends 120px below fold (matches old template) so the
   bottom gradient has visual room, same as .orgx-hero base class. */
.orgx-hero--home {
  height:              calc(100vh  + 120px);
  height:              calc(100svh + 120px);
  min-height:          600px;
  align-items:         stretch;
  justify-content:     stretch;
  /* Instant fallback — city-plain shows before bg-slides fade in */
  background-image:    url('/images/ORGX__City plain.webp');
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
}

/* Inner wrapper: column layout — text area above, logo carousel below.
   Pinned to 100svh so content stays in the viewport; the extra 120px of the
   section shows only bg image + bottom gradient, exactly like old template. */
.orgx-hero__home-inner {
  display:         flex;
  flex-direction:  column;
  justify-content: space-between;
  width:           100%;
  height:          100svh;
  min-height:      600px;
  max-width:       var(--width-section);
  margin-inline:   auto;
  padding-inline:  var(--wrap-pad);
  padding-bottom:  clamp(12px, 2vw, 20px);
  box-sizing:      border-box;
  position:        relative;
  z-index:         2;
}

/* Text content: fills remaining space, centers vertically.
   Extra padding-top shifts the flex-center downward so the text
   sits closer to the visual midpoint of the hero. */
.orgx-hero--home .orgx-hero__content {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  align-items:      center;
  justify-content:  center;
  text-align:       center;
  padding-top:      calc(var(--nav-h) + clamp(20px, 3.5vh, 48px));
  padding-bottom:   0;
  height:           auto;
  max-width:        none;
  padding-inline:   0;
}

/* X graphic: full opacity on homepage */
.orgx-hero--home .orgx-hero__x {
  opacity: 1;
  z-index: 1;
}

/* Homepage left-X: match old template's vertical midpoint and
   nav-aligned left offset formula (--x-out equivalent = 25px) */
.orgx-hero--home.orgx-hero--x-left .orgx-hero__x {
  top:  calc(50% - 75px);
  left: calc(max(clamp(40px, 4.5vw, 120px), (100vw - var(--width-nav)) / 2) - 25px);
}

/* ── Gradient overlay for readability ──────────────────────────────────── */

.orgx-hero__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    rgba(7, 10, 15, 0.40) 0%,
    rgba(7, 10, 15, 0.15) 45%,
    rgba(7, 10, 15, 0.60) 100%
  );
  z-index:        1;
  pointer-events: none;
}

/* ── Rotating background slides ────────────────────────────────────────── */

.orgx-hero__bg-slides {
  position: absolute;
  inset:    0;
  z-index:  0;
}

.orgx-hero__bg-slide {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  background-repeat:   no-repeat;
  opacity:             0;
  animation:           orgxHeroBgFade 24s ease-in-out infinite;
}

/* ORGX city image sequence — plain → synergy → data → all */
.orgx-hero__bg-slide--1 { background-image: url('/images/ORGX__City plain.webp');   animation-delay: -2s; }
.orgx-hero__bg-slide--2 { background-image: url('/images/ORGX__City synergy.webp'); animation-delay:  6s; }
.orgx-hero__bg-slide--3 { background-image: url('/images/ORGX__City Data.jpg');     animation-delay: 12s; }
.orgx-hero__bg-slide--4 { background-image: url('/images/ORGX__City all.webp');     animation-delay: 18s; }

@keyframes orgxHeroBgFade {
  0%    { opacity: 0; }
  12.5% { opacity: 1; }
  25%   { opacity: 1; }
  37.5% { opacity: 0; }
  100%  { opacity: 0; }
}

/* ── Rotating text slides ───────────────────────────────────────────────── */

/* Container: fixed height prevents layout shift while slides cycle */
.orgx-hero__slides {
  position:   relative;
  width:      min(860px, 90vw);
  height:     clamp(110px, 16vh, 150px);
}

.orgx-hero__slide {
  position:   absolute;
  top:        50%;
  left:       50%;
  transform:  translate(-50%, -50%);
  width:      100%;
  opacity:    0;
  text-align: center;
}

.orgx-hero__slide--1 { animation: orgxHeroText1 24s ease-in-out infinite; }
.orgx-hero__slide--2 { animation: orgxHeroText2 24s ease-in-out infinite; }
.orgx-hero__slide--3 { animation: orgxHeroText3 24s ease-in-out infinite; }

/* Slide 1: visible ~0 – 6.7s */
@keyframes orgxHeroText1 {
  0%   { opacity: 0; }
  4%   { opacity: 1; }
  28%  { opacity: 1; }
  32%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Slide 2: visible ~8.6 – 14.4s */
@keyframes orgxHeroText2 {
  0%   { opacity: 0; }
  32%  { opacity: 0; }
  36%  { opacity: 1; }
  60%  { opacity: 1; }
  64%  { opacity: 0; }
  100% { opacity: 0; }
}

/* Slide 3: visible ~16.3 – 23s */
@keyframes orgxHeroText3 {
  0%   { opacity: 0; }
  64%  { opacity: 0; }
  68%  { opacity: 1; }
  96%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Shift homepage text slides 20px lower than geometric center — old template
   uses top: calc(50% + 20px) on its homepage slide override */
.orgx-hero--home .orgx-hero__slide {
  top: calc(50% + 20px);
}

/* Slide typography — homepage-specific scale */
.orgx-hero--home .orgx-hero__title {
  font-size:   clamp(1.7rem, 4vw, 2.9rem);
  font-weight: 400;
  line-height: 1.2;
  color:       #fff;
  margin:      0 0 0.7rem;
  text-align:  center;
  max-width:   none;
}

.orgx-hero--home .orgx-hero__subtitle {
  font-size:   clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 400;
  color:       var(--color-green);
  line-height: 1.5;
  text-align:  center;
  margin:      0;
  max-width:   none;
  font-style:  normal;
}

/* CTA: sits below the slides container.
   Formula matches old template: calc(clamp(5rem, 10vw, 9rem) - 20px)
   The -20px compensates for the 20px slide offset above, keeping visual
   spacing proportionate across viewport widths. */
.orgx-hero__home-cta {
  margin-top: calc(clamp(2.5rem, 5vw, 4.5rem) - 20px);
}

/* ── Logo carousel ──────────────────────────────────────────────────────── */

.orgx-home-logos {
  flex-shrink:  0;
  width:        100%;
  height:       110px;
  display:      flex;
  align-items:  center;
}

.orgx-home-logos__inner {
  display:     flex;
  align-items: center;
  gap:         1.5rem;
  width:       100%;
  overflow:    hidden;
}

.orgx-home-logos__label {
  color:          rgba(255, 255, 255, 0.42);
  font-size:      0.74rem;
  font-weight:    500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space:    nowrap;
  flex-shrink:    0;
}

/* Viewport: clips scrolling track, soft fades at edges */
.orgx-home-logos__viewport {
  flex:     1;
  overflow: hidden;
  height:   70px;
  position: relative;
  mask-image:
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, black 10%, black 90%, transparent 100%);
}

/* Track: doubled logos, scrolls -50% = one full logo set, infinite loop */
.orgx-home-logos__track {
  display:   flex;
  flex-wrap: nowrap;
  width:     max-content;
  animation: orgxLogosScroll 40s linear infinite;
}

@keyframes orgxLogosScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.orgx-home-logos__logo {
  flex:            0 0 auto;
  width:           140px;
  height:          70px;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

/* Make any logo white on dark — brightness(0) blacks it, invert(1) flips to white */
.orgx-home-logos__logo img {
  max-width:  65%;
  max-height: 48px;
  width:      auto;
  height:     auto;
  filter:     brightness(0) invert(1);
  opacity:    0.52;
  transition: opacity 0.3s ease;
}

.orgx-home-logos__logo img:hover { opacity: 0.85; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .orgx-home-logos__label  { display: none; }
  .orgx-home-logos__logo   { width: 110px; }
}

@media (max-width: 640px) {
  .orgx-hero__slides {
    height: clamp(90px, 18vh, 130px);
  }
}

@media (max-width: 480px) {
  .orgx-home-logos          { height: 80px; }
  .orgx-home-logos__logo    { width: 90px; }
  .orgx-hero__home-cta      { margin-top: 4rem; }
}

/* ── Reduced motion — a11y ──────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .orgx-hero__bg-slide,
  .orgx-hero__slide,
  .orgx-home-logos__track { animation: none; }

  /* Show first bg slide and first text slide statically */
  .orgx-hero__bg-slide--1 { opacity: 0.55; }
  .orgx-hero__slide--1    { opacity: 1; }
}

/* ── Homepage intro — editorial narrative block ─────────────────────────── */

/* Section: slightly more vertical breathing room than the base orgx-section */
.orgx-section--home-intro {
  padding-block: clamp(80px, 11vw, 160px);
}

/* Head: extra margin below the title to separate it from the body text */
.orgx-section--home-intro .orgx-section__head {
  margin-bottom: clamp(48px, 6vw, 80px);
}

/* Title: editorial scale — larger than the default orgx-section__title */
.orgx-section--home-intro .orgx-section__title {
  font-size:      clamp(2.2rem, 4.2vw, 3.4rem);
  font-weight:    400;
  letter-spacing: -0.025em;
  line-height:    1.1;
  max-width:      860px;
  margin-inline:  auto;
}

/* Single-column body: centered, constrained width for comfortable reading */
.orgx-home-intro__body {
  max-width:     660px;
  margin-inline: auto;
  text-align:    center;
}

.orgx-home-intro__body p {
  font-size:   clamp(1rem, 1.4vw, 1.18rem);
  line-height: 1.85;
  color:       var(--color-muted);
  margin:      0 0 1.2em;
}

.orgx-home-intro__body p:last-child {
  margin-bottom: 0;
}

/* Accent closing statement — green, confident, set apart by extra top margin */
.orgx-home-intro__body .orgx-home-intro__accent {
  color:       var(--color-green);
  font-weight: 500;
  margin-top:  clamp(32px, 4vw, 52px);
}

/* Small decorative rule above the accent lines */
.orgx-home-intro__accent::before {
  content:    '';
  display:    block;
  width:      28px;
  height:     1px;
  background: var(--color-green);
  margin:     0 auto clamp(14px, 2vw, 22px);
  opacity:    0.5;
}

@media (max-width: 600px) {
  .orgx-home-intro__body        { text-align: left; }
  .orgx-home-intro__accent::before { display: none; }
}

/* ── Search overlay ─────────────────────────────────────────────────────── */

.orgx-search-overlay {
  position:        fixed;
  inset:           0;
  z-index:         9999;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.orgx-search-overlay[hidden] { display: none; }

/* Prevent body scroll when overlay is open */
html.orgx-search-open { overflow: hidden; }

.orgx-search-overlay__backdrop {
  position:           absolute;
  inset:              0;
  background:         rgba(7, 10, 15, 0.92);
  backdrop-filter:    blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.orgx-search-overlay__box {
  position: relative;
  z-index:  1;
  width:    min(680px, 90vw);
  padding:  clamp(32px, 5vw, 56px) clamp(24px, 4vw, 48px);
}

@keyframes orgxSearchIn {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.orgx-search-overlay:not([hidden]) .orgx-search-overlay__box {
  animation: orgxSearchIn 0.22s ease;
}

.orgx-search-overlay__close {
  position:   absolute;
  top:        0;
  right:      0;
  background: none;
  border:     none;
  color:      rgba(255, 255, 255, 0.42);
  font-size:  1.05rem;
  cursor:     pointer;
  padding:    8px;
  line-height: 1;
  transition: color 0.2s ease, transform 0.2s ease;
}

.orgx-search-overlay__close:hover {
  color:     #fff;
  transform: rotate(90deg);
}

.orgx-search-overlay__label {
  display:        block;
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-green);
  margin-bottom:  clamp(20px, 3vw, 32px);
}

.orgx-search-overlay__input-wrap {
  display:        flex;
  align-items:    center;
  gap:            12px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.18);
  padding-bottom: 12px;
}

.orgx-search-overlay__input {
  flex:           1;
  background:     none;
  border:         none;
  outline:        none;
  color:          #fff;
  font-family:    inherit;
  font-size:      clamp(1.5rem, 3.5vw, 2.4rem);
  font-weight:    300;
  letter-spacing: -0.01em;
  padding:        0;
  caret-color:    var(--color-green);
  -webkit-appearance: none;
  appearance:     none;
}

.orgx-search-overlay__input::placeholder { color: rgba(255, 255, 255, 0.18); }
.orgx-search-overlay__input::-webkit-search-cancel-button { display: none; }

.orgx-search-overlay__submit {
  background:  none;
  border:      none;
  color:       var(--color-green);
  font-size:   1.3rem;
  cursor:      pointer;
  padding:     0;
  flex-shrink: 0;
  line-height: 1;
  opacity:     0.65;
  transition:  transform 0.2s ease, opacity 0.2s ease;
}

.orgx-search-overlay__submit:hover { transform: translateX(5px); opacity: 1; }

/* ── Search results ─────────────────────────────────────────────────────── */

.orgx-search-results {
  max-width:      var(--width-section);
  margin-inline:  auto;
  display:        flex;
  flex-direction: column;
  gap:            0;
}

.orgx-search-results--empty {
  text-align: center;
  padding:    clamp(48px, 8vw, 96px) 0;
}

.orgx-search-results--empty p {
  font-size: clamp(0.95rem, 1.3vw, 1.1rem);
  color:     var(--color-muted);
  margin:    0 0 0.75em;
}

.orgx-search-results--empty a {
  color:           var(--color-green);
  text-decoration: underline;
}

.orgx-search-result {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding-block:  clamp(28px, 3.5vw, 44px);
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
}

.orgx-search-result:last-child { border-bottom: none; }

.orgx-search-result__type {
  font-size:      0.70rem;
  font-weight:    600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--color-green);
}

.orgx-search-result__title {
  margin:      0;
  font-size:   clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
}

.orgx-search-result__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-search-result__title a:hover { color: var(--color-green); }

.orgx-search-result__excerpt {
  font-size:   clamp(0.875rem, 1.05vw, 0.97rem);
  line-height: 1.75;
  color:       var(--color-muted);
  margin:      0;
}

.orgx-search-result__link { margin-top: 4px; }

/* ── Nav search button: reset browser button styles to match icon links ──── */

.orgx-nav__search-btn {
  background: none;
  border:     none;
  padding:    0;
  cursor:     pointer;
  font:       inherit;
  color:      inherit;
  line-height: 1;
}

/* ─────────────────────────────────────────────────────────────────────────── */

.orgx-job-single__title {
  font-size:   clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 500;
  line-height: 1.25;
  color:       #fff;
  margin:      0;
}

.orgx-job-single__intro {
  font-size:   0.88rem;
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.60);
  margin:      0;
}

.orgx-job-single__badge-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px;
}

.orgx-job-single__divider {
  height:     1px;
  background: rgba(255, 255, 255, 0.08);
  border:     none;
  margin:     0;
}

.orgx-job-single__back {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       0.78rem;
  color:           rgba(255, 255, 255, 0.42);
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-job-single__back:hover { color: var(--color-green); }

/* Related jobs */
.orgx-job-single__related {
  margin-top:  clamp(20px, 2.5vw, 32px);
  padding-top: clamp(16px, 2vw, 24px);
  border-top:  1px solid rgba(255, 255, 255, 0.08);
}

.orgx-job-single__related-label {
  display:        block;
  font-size:      0.64rem;
  font-weight:    600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          rgba(255, 255, 255, 0.28);
  margin-bottom:  12px;
}

.orgx-job-single__related-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.orgx-job-single__related-list a {
  display:         block;
  color:           rgba(255, 255, 255, 0.68);
  font-size:       0.82rem;
  line-height:     1.4;
  text-decoration: none;
  transition:      color 0.2s ease;
}

.orgx-job-single__related-list a:hover { color: var(--color-green); }

/* Apply footer CTA */
.orgx-job-single__apply-footer {
  margin-top:  clamp(40px, 5vw, 64px);
  padding-top: clamp(24px, 3vw, 36px);
  border-top:  1px solid rgba(255, 255, 255, 0.08);
}

.orgx-job-single__apply-cue {
  font-size:    0.88rem;
  color:        rgba(255, 255, 255, 0.52);
  margin:       0 0 16px;
}

/* Content column — min-width prevents grid overflow on long words */
.orgx-job-single__content {
  min-width: 0;
}

/* Featured image thumbnail in sidebar */
.orgx-job-single__thumb {
  border-radius: 10px;
  overflow:      hidden;
}

.orgx-job-single__thumb img {
  width:      100%;
  height:     auto;
  display:    block;
  filter:     grayscale(100%) brightness(80%);
  transition: filter 0.3s ease;
}

.orgx-job-single__thumb:hover img {
  filter: grayscale(30%) brightness(90%);
}

/* Back + share action row */
.orgx-job-single__actions {
  display:     flex;
  align-items: center;
  gap:         20px;
  flex-wrap:   wrap;
}

/* ── Responsive ─────────────────────────────────────────────── */

@media (max-width: 860px) {

  .orgx-post-grid { grid-template-columns: repeat(2, 1fr); }
  .orgx-job-grid  { grid-template-columns: repeat(2, 1fr); }

  .orgx-single__layout,
  .orgx-job-single__layout {
    grid-template-columns: 1fr;
  }

  .orgx-single__sidebar,
  .orgx-job-single__sidebar {
    position: relative;
    top: auto;
  }

  .orgx-jobs-toolbar { flex-direction: column; align-items: flex-start; }
  .orgx-jobs-selects { flex-wrap: wrap; }

}

@media (max-width: 540px) {

  .orgx-post-grid { grid-template-columns: 1fr; }
  .orgx-job-grid  { grid-template-columns: 1fr; }

}

/* ── SERVICE TEMPLATE — compact / flyer layout ─────────────────
   Scoped to .page-template-page-service (WordPress body class).
   ─────────────────────────────────────────────────────────────── */

/* 1 — Hero background: remove the 600 px expertise-style bleed.
        Service sections are opaque so the extended image hides
        behind them and makes the transition look hard-cut.       */
.page-template-page-service .orgx-hero__bg {
  height: 100%;
}

.page-template-page-service .orgx-hero--page::after {
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent             0%,
    rgba(7, 10, 15, 0.42)  42%,
    rgba(7, 10, 15, 0.82)  72%,
    #070a0f                95%
  );
}

/* 2 — Hero content: tighter bottom padding */
.page-template-page-service .orgx-hero--page .orgx-hero__content {
  padding-bottom: clamp(20px, 2.5vh, 32px);
}

/* 3 — Sections: comfortable rhythm matching proposal visuals */
.page-template-page-service .orgx-service__section {
  padding-block: clamp(36px, 4vw, 60px);
}

.page-template-page-service .orgx-service__section:first-of-type {
  padding-top: clamp(20px, 2.5vw, 32px);
}

/* 4 — Section head: left-aligned and tight */
.page-template-page-service .orgx-section__head {
  margin-bottom: clamp(14px, 1.8vw, 22px);
  text-align:    left;
}

/* 5 — Section title: one size step down — guides scanning, doesn't dominate */
.page-template-page-service .orgx-section__title {
  font-size: clamp(1.3rem, 2vw, 1.75rem);
}

/* 6 — Navigator section: transparent so the footer background shows through
   naturally. Content (header + grid) is lifted to z-index 1 so it composites
   above the footer bg and remains fully readable. Matches expertise approach. */

.page-template-page-service .orgx-service__navigator-section {
  background:     transparent;
  padding-top:    clamp(36px, 5vw, 64px);
  padding-bottom: clamp(80px, 10vw, 140px);
}

/* Lift inner content above the footer background */
.page-template-page-service .orgx-service__navigator-section .orgx-section__head,
.page-template-page-service .orgx-service__navigator-section .orgx-service__navigator {
  position: relative;
  z-index:  1;
}

.page-template-page-service .orgx-service__navigator-section .orgx-section__head {
  margin-bottom: clamp(20px, 2.5vw, 32px);
}

.page-template-page-service .orgx-service__navigator-section .orgx-section__title {
  color: #fff;
}

/* Cards: follow base orgx-outcome-card style, just with slightly more padding */
.page-template-page-service .orgx-service__nav-card {
  padding: clamp(28px, 3vw, 40px);
}

/* Question text: fully legible */
.page-template-page-service .orgx-service__nav-question {
  color:       rgba(255, 255, 255, 0.94);
  font-size:   clamp(0.95rem, 1.15vw, 1.08rem);
  line-height: 1.55;
}

/* CTA link: always green, margin pushed to bottom of card */
.page-template-page-service .orgx-service__nav-card .orgx-link {
  color:      var(--color-green);
  margin-top: auto;
}

/* 7 — Note wrap: minimal height, tight against hero */
.page-template-page-service .orgx-service__note-wrap {
  padding-block: clamp(12px, 1.5vw, 18px);
}

/* =====================================================================
   § 32 — THREE PILLARS OF EXPERTISE (scroll scene)
   ===================================================================== */

/* Outer: 280 vh of scroll room so the sticky inner pins for ~180 vh
   then naturally slides away — no JS phase-switching needed. */
.orgx-pillars {
  position:   relative;
  background: var(--color-bg);
  overflow:   clip; /* clip bg visually without creating a scroll container (sticky needs viewport scrolling) */
}

@media (min-width: 861px) {
  .orgx-pillars { height: 280vh; }
}

/* ── Background image — reuses same treatment as orgx-section--digital ── */
.orgx-pillars__bg {
  position: absolute;
  inset:    0;
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 100%),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 100%),
    linear-gradient(to left,   var(--color-bg) 0%, transparent 100%),
    linear-gradient(to right,  var(--color-bg) 0%, transparent 100%),
    url('/images/ORGX__expertise_bg.png');
  background-size:
    100% 52%,
    100% 220px,
    280px 100%,
    280px 100%,
    cover;
  background-position:
    top    center,
    bottom center,
    left   center,
    right  center,
    center 58%;
  background-repeat: no-repeat;
  opacity:           0.28;
  pointer-events:    none;
  z-index:           0;
}

/* Sticky inner: containing block for __bg; pins at viewport top on desktop,
   then releases naturally when the 280vh outer section scrolls off. */
.orgx-pillars__sticky {
  position:       relative; /* containing block for __bg on mobile */
  padding-block:  clamp(60px, 8vw, 120px);
  padding-inline: var(--wrap-pad);
}

@media (min-width: 861px) {
  .orgx-pillars__sticky {
    position:       sticky;
    top:            0;
    height:         100vh;      /* exact scene frame — bg fills this precisely */
    box-sizing:     border-box; /* padding inside the 100vh */
    display:        flex;
    align-items:    center;
    padding-top:    calc(var(--nav-h) + clamp(20px, 2.5vw, 36px));
    padding-bottom: clamp(80px, 10vw, 140px);
  }
}

/* Content centering wrapper — must be above __bg via z-index */
.orgx-pillars__inner {
  width:     100%;
  max-width: var(--width-section);
  margin:    0 auto;
  position:  relative;
  z-index:   1;
}

/* Intro paragraph: always visible; provides context before stage enters */
.orgx-pillars__intro-text {
  font-size:   clamp(0.92rem, 1.05vw, 1.05rem);
  font-weight: 400;
  line-height: 1.80;
  color:       var(--color-green);
  max-width:   900px;
  margin:      0 auto clamp(52px, 6.5vw, 88px);
  text-align:  center;
}

/* Stage: two-column flex row on desktop */
.orgx-pillars__stage {
  display:     flex;
  gap:         clamp(40px, 6vw, 88px);
  align-items: center;
}

/* ── Left panel: title + subtitle, fades in just before cards ─────── */
.orgx-pillars__left {
  flex:       0 0 clamp(200px, 28%, 320px);
  text-align: right;
  opacity:    0;
  transition: opacity 1.0s ease;
}

.orgx-pillars__left.is-visible {
  opacity: 1;
}

.orgx-pillars__title {
  font-size:      clamp(1.2rem, 1.8vw, 1.8rem);
  font-weight:    600;
  line-height:    1.1;
  letter-spacing: 0.01em;
  color:          var(--color-green);
  margin:         0 0 clamp(10px, 1.2vw, 16px);
}

.orgx-pillars__subtitle {
  font-size:   clamp(0.92rem, 1.1vw, 1.05rem);
  font-weight: 400;
  line-height: 1.5;
  color:       #fff;
  margin:      0;
}

/* ── Right column: stacked cards, each reveals from right ────────── */
.orgx-pillars__right {
  flex:           1 1 0;
  display:        flex;
  flex-direction: column;
  gap:            clamp(12px, 1.6vw, 20px);
  min-width:      0;
}

/* Card base — hidden initial state */
.orgx-pillars__card {
  display:             block;
  text-decoration:     none;
  color:               inherit;
  cursor:              pointer;
  position:            relative;
  background:          linear-gradient(160deg, rgba(147, 192, 39, 0.07) 0%, rgba(255, 255, 255, 0.01) 55%);
  backdrop-filter:     blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border:              1px solid rgba(147, 192, 39, 0.18);
  border-radius:       20px;
  padding:             clamp(16px, 1.8vw, 24px);
  opacity:             0;
  transform:           translateX(64px);
  transition:          opacity 0.55s cubic-bezier(0.22, 0.8, 0.24, 1),
                       transform 0.55s cubic-bezier(0.22, 0.8, 0.24, 1),
                       border-color 0.25s ease,
                       box-shadow 0.25s ease;
}

/* Revealed state */
.orgx-pillars__card.is-visible {
  opacity:   1;
  transform: none;
}

/* Hover lift — works once card is visible */
.orgx-pillars__card:hover {
  border-color: rgba(147, 192, 39, 0.42);
  box-shadow:   0 8px 36px rgba(147, 192, 39, 0.16);
  transform:    translateY(-3px);
}

/* Keyboard focus */
.orgx-pillars__card:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 3px;
}

.orgx-pillars__card-title {
  font-size:   clamp(0.95rem, 1.05vw, 1.1rem);
  font-weight: 500;
  color:       #fff;
  margin:      0 0 clamp(6px, 0.7vw, 8px);
  line-height: 1.3;
}

.orgx-pillars__card p {
  font-size:   clamp(0.85rem, 0.93vw, 0.94rem);
  line-height: 1.65;
  color:       rgba(255, 255, 255, 0.62);
  margin:      0 0 0.4em;
}

.orgx-pillars__card p:last-of-type {
  margin-bottom: 0;
}

.orgx-pillars__card .orgx-link {
  display:    inline-block;
  margin-top: 8px;
}

.orgx-pillars__card .orgx-link i {
  transition: transform 0.22s ease;
}

.orgx-pillars__card:hover .orgx-link i {
  transform: translateX(4px);
}

/* ── Tablet (≤ 860px): single column, no sticky ─────────────────── */
@media (max-width: 860px) {
  .orgx-pillars__stage {
    flex-direction: column;
    gap:            clamp(28px, 4vw, 44px);
  }

  .orgx-pillars__left {
    flex:       none;
    text-align: left; /* left-align title/subtitle when stacked above cards */
  }

  .orgx-pillars__card {
    transform: translateY(20px); /* vertical reveal on mobile */
  }
}

/* ── Small mobile (≤ 540px) ─────────────────────────────────────── */
@media (max-width: 540px) {
  .orgx-pillars__intro-text { text-align: left; }
}

/* ── Reduced motion: skip all reveal transitions ────────────────── */
@media (prefers-reduced-motion: reduce) {
  .orgx-pillars__left,
  .orgx-pillars__card {
    opacity:    1 !important;
    transform:  none !important;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
  }
}

/* ============================================================================
 * §33 — MASONRY CARD SYSTEM
 *     Shared by category.php, category-insights.php, archive.php.
 *     JS engine: assets/orgx-archive.js (layout + load-more + search).
 * ============================================================================ */

/* ── CSS custom properties (card-specific) ──────────────────────── */
:root {
  --orgx-surface:            rgba(5, 8, 10, 0.55);
  --orgx-surface-strong:     rgba(5, 8, 10, 0.75);
  --orgx-surface-hero:       rgba(15, 18, 16, 0.55);
  --orgx-surface-hero-strong:rgba(15, 18, 16, 0.75);
  --orgx-blur:               6px;
  --orgx-blur-soft:          2px;
  --orgx-text-card:          rgba(255, 255, 255, 0.85);
  --orgx-text-card-soft:     rgba(255, 255, 255, 0.80);
  --orgx-ease-card:          cubic-bezier(.2,.8,.2,1);
  --orgx-trans-fast:         0.25s;
  --orgx-trans-med:          0.35s;
  --orgx-card-fade-dur:      420ms;
  --orgx-card-fade-y:        10px;

  /* gradient layers */
  --orgx-card-overlay-grad: linear-gradient(
    to bottom,
    rgba(0,0,0,0.55) 0%,
    rgba(0,0,0,0.18) 55%,
    rgba(0,0,0,0.0)  100%
  );
  --orgx-pos25-base: linear-gradient(
    to bottom,
    rgba(147,192,39,0.7) 0%,
    rgba(147,192,39,0.9) 100%
  );
  --orgx-pos25-hover: linear-gradient(
    135deg,
    rgba(147,192,39,0.85),
    rgba(110,160,30,0.95)
  );
  --orgx-pos6-bottomfade: linear-gradient(
    to top,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.45) 35%,
    rgba(0,0,0,0)    65%
  );
}

/* ── Toolbar (tag filters + search pill) ────────────────────────── */

.orgx-posts-toolbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             24px;
  max-width:       var(--width-section);
  margin-inline:   auto;
  margin-bottom:   clamp(20px, 2.5vw, 40px);
  width:           100%;
}

.orgx-posts-filters {
  display:   flex;
  flex-wrap: wrap;
  gap:       14px;
}

.orgx-filter {
  display:        inline-flex;
  align-items:    center;
  gap:            10px;
  padding:        4px 20px 4px 14px;
  border-radius:  999px;
  background:     var(--orgx-surface);
  border:         1px solid rgba(255, 255, 255, 1);
  color:          var(--color-green);
  font-family:    inherit;
  font-size:      0.85rem;
  font-weight:    500;
  text-decoration:none;
  cursor:         pointer;
  backdrop-filter: blur(var(--orgx-blur));
  -webkit-backdrop-filter: blur(var(--orgx-blur));
  transition:     border-color var(--orgx-trans-fast) ease,
                  background   var(--orgx-trans-fast) ease;
}

.orgx-filter__arrow {
  font-size:  0.85rem;
  opacity:    0.8;
  color:      #fff;
  transition: transform  var(--orgx-trans-fast) ease,
              opacity    var(--orgx-trans-fast) ease,
              color      var(--orgx-trans-fast) ease;
}

.orgx-filter:hover {
  border-color: var(--color-green);
  background:   var(--orgx-surface-strong);
}

.orgx-filter:hover .orgx-filter__arrow {
  transform: translateX(3px);
  opacity:   1;
  color:     var(--color-green);
}

.orgx-filter.is-active {
  border-color: var(--color-green);
  background:   rgba(147, 192, 39, 0.15);
  color:        var(--color-green);
}

.orgx-filter.is-active .orgx-filter__arrow {
  color: var(--color-green);
}

/* Search pill */
.orgx-search-pill {
  display:        flex;
  align-items:    center;
  gap:            14px;
  width:          300px;
  padding:        6px 20px;
  border-radius:  999px;
  background:     var(--orgx-surface-hero);
  backdrop-filter: blur(var(--orgx-blur));
  -webkit-backdrop-filter: blur(var(--orgx-blur));
}

.orgx-search-icon {
  display:     inline-flex;
  align-items: center;
  color:       #fff;
  font-size:   0.9rem;
  opacity:     0.9;
}

.orgx-search-pill input {
  flex:        1;
  background:  transparent;
  border:      none;
  outline:     none;
  color:       var(--color-green);
  font-family: inherit;
  font-size:   0.85rem;
}

.orgx-search-pill input::placeholder {
  color: rgba(147, 192, 39, 0.8);
}

.orgx-search-pill input::-webkit-search-cancel-button,
.orgx-search-pill input::-webkit-search-decoration {
  -webkit-appearance: none;
  appearance:         none;
  display:            none;
}

.orgx-search-pill input[type="search"] { appearance: textfield; }

.orgx-search-arrow {
  display:     inline-flex;
  align-items: center;
  color:       #fff;
  font-size:   0.85rem;
  opacity:     0.8;
  transition:  transform var(--orgx-trans-fast) ease,
               opacity   var(--orgx-trans-fast) ease;
}

.orgx-search-pill:hover .orgx-search-arrow    { transform: translateX(4px); opacity: 1; }
.orgx-search-pill:focus-within                { background: var(--orgx-surface-hero-strong); }

/* ── Masonry container ──────────────────────────────────────────── */

.orgx-masonry {
  position:      relative;
  width:         100%;
  max-width:     var(--width-section);
  margin-inline: auto;
}

/* ── Card base ──────────────────────────────────────────────────── */

.orgx-card {
  position:  absolute; /* JS sets left/top/width/height */
  overflow:  hidden;
  opacity:   0;
  transform: translateY(var(--orgx-card-fade-y));
  transition: opacity   var(--orgx-card-fade-dur) ease,
              transform var(--orgx-card-fade-dur) ease;
  will-change: opacity, transform;
}

.orgx-card.is-in {
  opacity:   1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .orgx-card { transition: none; transform: none; }
}

.orgx-card__link {
  display:          block;
  position:         relative;
  overflow:         hidden;
  height:           100%;
  text-decoration:  none;
  background-color: var(--color-bg);
}

/* Media layer (background image) */
.orgx-card__media {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: top center;
  filter:              grayscale(100%);
  transform:           scale(1.02);
  transition:          transform var(--orgx-trans-med) ease,
                       filter   var(--orgx-trans-med) ease;
}

.orgx-card__media--fallback {
  background: var(--orgx-pos25-hover);
}

/* Overlay */
.orgx-card__overlay {
  position:        relative;
  z-index:         2;
  height:          100%;
  padding:         25px 35px;
  display:         flex;
  flex-direction:  column;
  justify-content: flex-start;
  gap:             10px;
  overflow:        hidden;
  background:      var(--orgx-card-overlay-grad);
}

.orgx-card__overlay > * {
  position: relative;
  z-index:  1;
}

/* Category label */
.orgx-card__cat {
  font-size:      0.72rem;
  font-weight:    600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-green);
  opacity:        0.9;
}

/* Title */
.orgx-card__title {
  margin:      0;
  color:       var(--color-green);
  font-size:   1.35rem;
  line-height: 1.15;
}

/* Excerpt */
.orgx-card__excerpt {
  margin:    0;
  color:     var(--orgx-text-card);
  font-size: 0.95rem;
  max-width: 42ch;
}

/* Custom field subtitle (small/medium/large) */
.orgx-card__meta {
  margin:      0;
  color:       var(--orgx-text-card);
  font-size:   0.95rem;
  max-width:   42ch;
  font-weight: 300;
}

.orgx-card[data-pos="2"] .orgx-card__meta,
.orgx-card[data-pos="3"] .orgx-card__meta { margin-top: -6px; }

.orgx-card[data-pos="3"] .orgx-card__meta { width: 250px; }

/* CTA arrow circle */
.orgx-card__cta {
  position:      absolute;
  z-index:       3;
  left:          30px;
  bottom:        25px;
  width:         32px;
  height:        32px;
  border-radius: 999px;
  border:        1px solid rgba(255, 255, 255, 0.8);
  display:       grid;
  place-items:   center;
  color:         #fff;
  transition:    border-color var(--orgx-trans-fast) ease,
                 color        var(--orgx-trans-fast) ease,
                 background   var(--orgx-trans-fast) ease;
}

/* Hover */
.orgx-card__link:hover .orgx-card__media {
  filter:    grayscale(0%);
  transform: scale(1.05);
}

.orgx-card__link:hover .orgx-card__cta {
  border-color: var(--color-green);
  background:   rgba(0, 0, 0, 0.25);
  color:        var(--color-green);
}

/* ── Position overrides ─────────────────────────────────────────── */

.orgx-card[data-pos="1"] .orgx-card__title { font-size: 1.6rem;  line-height: 1.3; width: 250px; }
.orgx-card[data-pos="2"] .orgx-card__title { font-size: 1rem;    line-height: 1.3; color: #000; width: 100%; }
.orgx-card[data-pos="3"] .orgx-card__title { font-size: 1rem;    line-height: 1.3; width: 380px; }
.orgx-card[data-pos="4"] .orgx-card__title { font-size: 1.6rem;  line-height: 1.3; width: 100%; }
.orgx-card[data-pos="5"] .orgx-card__title { font-size: 1.6rem;  line-height: 1.3; color: #000; width: 230px; }
.orgx-card[data-pos="6"] .orgx-card__title { font-size: 1rem;    line-height: 1.3; width: 380px; }

/* CTA: positions 2, 4, 6 align right */
.orgx-card[data-pos="2"] .orgx-card__cta,
.orgx-card[data-pos="4"] .orgx-card__cta,
.orgx-card[data-pos="6"] .orgx-card__cta {
  left:  auto;
  right: 30px;
}

/* Pos 2 + 5: green gradient, no image */
.orgx-card[data-pos="2"] .orgx-card__media,
.orgx-card[data-pos="5"] .orgx-card__media { display: none; }

.orgx-card[data-pos="2"] .orgx-card__link,
.orgx-card[data-pos="5"] .orgx-card__link {
  background:              rgba(0, 0, 0, 0.1);
  backdrop-filter:         blur(var(--orgx-blur-soft));
  -webkit-backdrop-filter: blur(var(--orgx-blur-soft));
}

/* Pos 2/5 gradient overlay (base + hover fade) */
.orgx-card[data-pos="2"] .orgx-card__overlay::before,
.orgx-card[data-pos="5"] .orgx-card__overlay::before,
.orgx-card[data-pos="2"] .orgx-card__overlay::after,
.orgx-card[data-pos="5"] .orgx-card__overlay::after {
  content:        "";
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        0;
}

.orgx-card[data-pos="2"] .orgx-card__overlay::before,
.orgx-card[data-pos="5"] .orgx-card__overlay::before {
  background: var(--orgx-pos25-base);
  opacity:    1;
}

.orgx-card[data-pos="2"] .orgx-card__overlay::after,
.orgx-card[data-pos="5"] .orgx-card__overlay::after {
  background:  var(--orgx-pos25-hover);
  opacity:     0;
  transition:  opacity 0.9s var(--orgx-ease-card);
}

.orgx-card[data-pos="2"]:hover .orgx-card__overlay::after,
.orgx-card[data-pos="5"]:hover .orgx-card__overlay::after { opacity: 1; }

.orgx-card[data-pos="2"] .orgx-card__overlay,
.orgx-card[data-pos="5"] .orgx-card__overlay { background: transparent; }

/* Pos 6: content anchored to bottom */
.orgx-card[data-pos="6"] .orgx-card__overlay { justify-content: flex-end; }

.orgx-card[data-pos="6"] .orgx-card__overlay::before {
  content:        "";
  position:       absolute;
  inset:          0;
  background:     var(--orgx-pos6-bottomfade);
  z-index:        0;
  pointer-events: none;
}

/* ── Load more ──────────────────────────────────────────────────── */

.orgx-loadmore-wrap {
  display:         flex;
  justify-content: center;
  max-width:       var(--width-section);
  margin-inline:   auto;
  margin-top:      clamp(16px, 1.8vw, 28px);
}

.orgx-loadmore {
  background:    transparent;
  color:         #fff;
  border:        1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  padding:       0.55rem 1.8rem;
  cursor:        pointer;
  font-family:   inherit;
  font-size:     0.9rem;
  transition:    border-color 0.2s ease, color 0.2s ease;
}

.orgx-loadmore:hover         { border-color: var(--color-green); color: var(--color-green); }
.orgx-loadmore.is-loading    { opacity: 0.65; cursor: wait; }
.orgx-loadmore:disabled      { opacity: 0.35; cursor: not-allowed; }

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 900px) {

  .orgx-masonry {
    height: auto !important;
  }

  .orgx-card {
    position:      relative !important;
    left:          auto !important;
    top:           auto !important;
    width:         100% !important;
    height:        auto !important;
    margin-bottom: var(--orgx-gap);
    opacity:       1;
    transform:     none;
  }

  .orgx-card__link     { height: auto; min-height: 320px; }
  .orgx-card__media    { position: absolute; inset: 0; }
  .orgx-card__overlay  { min-height: 320px; }

  .orgx-posts-toolbar  { flex-direction: column; align-items: flex-start; }
  .orgx-search-pill    { width: 100%; }

}

@media (max-width: 680px) {
  .orgx-card[data-pos="1"] .orgx-card__title,
  .orgx-card[data-pos="3"] .orgx-card__title,
  .orgx-card[data-pos="4"] .orgx-card__title,
  .orgx-card[data-pos="5"] .orgx-card__title,
  .orgx-card[data-pos="6"] .orgx-card__title { width: 100%; }
}