/*
Theme Name: ORGX Clean — Design System v1.2
Theme URI: https://orgx.com
Author: H2LO
Version: 1.2
Text Domain: orgx-clean
Description: ORGX clean theme — ORGX Web Family design-system aligned build.
*/

/* ============================================================================
   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;  /* currently unreferenced — kept, not removed (see DESIGN-SYSTEM-CHANGELOG.md) */

  /* widths */
  --width-content: 1400px;
  --width-nav:     1600px;
  --width-section: calc(var(--width-nav) * 0.7);  /* 70% of nav width = 1120px */
  --width-broad:   calc(var(--width-nav) * 0.85); /* 85% of nav width = 1360px — broader editorial homepage sections (outcomes, human-consultancy) that need more width than --width-section without going edge-to-edge */

  /* 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);

  /* ==========================================================================
     ORGX FOUNDATION — shared semantic design tokens (ORGX Web Family)
     Added during the ORGX/Digital Services/Orbicul harmonisation project.
     These formalise the design language that already existed in the rules
     below; legacy tokens above are preserved untouched and referenced here
     so nothing breaks. See ORGX-DESIGN-SYSTEM.md for full documentation.
     ========================================================================== */

  /* -- typography: family -- */
  --orgx-font-primary: 'Raleway', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;

  /* -- typography: "big statement" hierarchy — five deliberate editorial
        roles. Values are unchanged from the current implementation; this
        pass names and centralises them, it does not re-size them. -- */
  --orgx-font-size-hero-title:       clamp(1.8rem, 3.5vw, 3.8rem);   /* primary hero H1 */
  --orgx-font-size-hero-title-home:  clamp(1.7rem, 4vw, 2.9rem);     /* homepage rotating hero H1 */
  --orgx-font-size-page-title:       clamp(1.7rem, 3.2vw, 2.6rem);   /* generic page.php title */
  --orgx-font-size-section-title:    clamp(1.75rem, 3.1vw, 2.75rem); /* default section title */
  --orgx-font-size-section-title-xl: clamp(2.2rem, 4.2vw, 3.4rem);   /* homepage editorial intro section title */

  /* -- typography: card-title hierarchy — consolidated from three
        near-duplicate literals down to two deliberate roles -- */
  --orgx-font-size-card-title:       1.1rem;                        /* dense/fixed family: outcome, values, service-feature, step cards */
  --orgx-font-size-card-title-fluid: clamp(1rem, 1.2vw, 1.125rem);  /* editorial/listing family: post, job cards */
  --orgx-font-size-card-title-compact: clamp(0.95rem, 1.05vw, 1.1rem); /* pillars cards — deliberately smaller, dense stacked layout */

  /* -- typography: prose/heading scale -- */
  --orgx-font-size-h3:    clamp(1.1rem, 1.6vw, 1.35rem);
  --orgx-font-size-h4:    1rem;
  --orgx-font-size-lead:  clamp(0.9rem, 1.15vw, 1.2rem);
  --orgx-font-size-body-lg: clamp(1rem, 1.3vw, 1.15rem);
  --orgx-font-size-body:    0.92rem;
  --orgx-font-size-body-sm: 0.88rem;
  --orgx-font-size-label:   0.82rem;
  --orgx-font-size-meta:    0.72rem;
  --orgx-font-size-micro:   0.66rem;

  /* -- spacing scale -- */
  --orgx-space-1:  4px;
  --orgx-space-2:  8px;
  --orgx-space-3:  12px;
  --orgx-space-4:  16px;
  --orgx-space-5:  24px;
  --orgx-space-6:  32px;
  --orgx-space-7:  48px;
  --orgx-space-8:  64px;
  --orgx-space-9:  80px;
  --orgx-space-10: 96px;
  --orgx-space-11: 128px;
  --orgx-space-12: 160px;

  /* -- layout widths — alias the existing, already-coherent width tokens -- */
  --orgx-width-reading: 800px;
  --orgx-width-content: var(--width-content);
  --orgx-width-section: var(--width-section);
  --orgx-width-wide:    var(--width-nav);
  --orgx-page-gutter:   var(--wrap-pad);

  /* -- colour: semantic text/surface/border roles mapped onto the existing
        white-opacity ramp. Consolidates ~30 near-duplicate opacity values
        into 4 deliberate tiers; a few genuinely-distinct one-offs (button
        outlines, placeholder ghost-text) are deliberately left untouched. -- */
  --orgx-color-ink:        var(--color-bg);
  --orgx-color-background: var(--color-bg);
  --orgx-color-text-primary:   rgba(255, 255, 255, 0.90);
  --orgx-color-text-secondary: rgba(255, 255, 255, 0.72);
  --orgx-color-text-tertiary:  rgba(255, 255, 255, 0.52);
  --orgx-color-text-disabled:  rgba(255, 255, 255, 0.32);
  --orgx-color-surface:          rgba(255, 255, 255, 0.03);
  --orgx-color-surface-elevated: rgba(255, 255, 255, 0.06);
  --orgx-color-border:        rgba(255, 255, 255, 0.08);
  --orgx-color-border-strong: rgba(255, 255, 255, 0.16);
  --orgx-color-accent: var(--color-green);
  --orgx-color-green:  var(--color-green);

  /* -- radius scale -- */
  --orgx-radius-sm:   8px;
  --orgx-radius-md:   12px;
  --orgx-radius-lg:   16px;
  --orgx-radius-xl:   20px;
  --orgx-radius-2xl:  24px;
  --orgx-radius-pill: 999px;

  /* -- imagery: canonical "ORGX cool-tone" photography treatment.
        Consolidates two near-duplicate filter formulas (88% vs 85%
        brightness) that were tuning the same intended effect independently.
        The simpler job-single-thumbnail treatment and the full-colour
        content-split default are deliberately left as their own literals —
        see DESIGN-SYSTEM-CHANGELOG.md. -- */
  --orgx-filter-photo-cool: grayscale(100%) contrast(105%) brightness(88%) hue-rotate(200deg) saturate(120%);

  /* -- motion — three tiers matching the de-facto rhythm already in use:
        ~0.2s hovers, ~0.25s standard, ~0.4s colour/fill transitions
        (button + nav-pill fills). Card-reveal animations (0.42–0.55s)
        are a fourth, slower tier and are intentionally left as their
        own literals rather than folded in here — see DESIGN-SYSTEM-CHANGELOG.md -- */
  --orgx-duration-fast:    0.2s;
  --orgx-duration-default: 0.25s;
  --orgx-duration-slow:    0.4s;
  --orgx-ease-standard:    cubic-bezier(0.22, 0.8, 0.24, 1);

  /* ==========================================================================
     ORGX FOUNDATION — Step C.2 completion pass (v1.2)
     Closes gaps left by the first pass: weight/line-height/letter-spacing
     were declared as a spec but never tokenised; the fixed spacing scale
     had zero adoption; nav/footer had not been mapped onto the system.
     These are concise role-based sets, not one token per literal — see
     DESIGN-SYSTEM-CHANGELOG.md v1.2 for the exact literals each merges.
     ========================================================================== */

  /* -- typography: weight — five roles, matching the existing Raleway
        weight range in use (300/400/500/600/700). A single 900 outlier
        (stat-figure emphasis) is intentionally left as a literal. -- */
  --orgx-font-weight-light:    300;
  --orgx-font-weight-regular:  400;
  --orgx-font-weight-medium:   500;
  --orgx-font-weight-semibold: 600;
  --orgx-font-weight-bold:     700;

  /* -- typography: line-height — six roles spanning the real dominant
        clusters found on inspection (display/heading tight end, two
        real body tiers, one relaxed reading tier, one compact UI tier).
        Values in between (1.05/1.15/1.2/1.25/1.35/1.4/1.55/1.58/1.65/
        1.68/1.72/1.75/1.8/1.85/1.88) are deliberately left as literals —
        collapsing them further would be forcing distinct compositions
        together, not removing an accident. -- */
  --orgx-line-height-compact: 1;    /* single-line UI: buttons, badges, pills, icons */
  --orgx-line-height-tight:   1.1;  /* display / hero / big-statement headings */
  --orgx-line-height-heading: 1.3;  /* h3/h4, card titles, subheadings */
  --orgx-line-height-body:    1.5;  /* default prose baseline — matches body{} */
  --orgx-line-height-body-lg: 1.6;  /* secondary body tier — card/prose copy */
  --orgx-line-height-relaxed: 1.7;  /* longer-form reading copy */

  /* -- typography: letter-spacing — three tracking roles. The 0.09em
        cluster (4 sites) is merged into the 0.1em label tier (0.01em
        delta, sub-perceptible, same all-caps-label role, consistent
        with the sub-pixel merges already accepted in the v1.1 pass).
        0.02/0.03rem/0.04/0.05/0.06/0.07/0.08/0.14/0.15em are each too
        small a cluster or too large a delta to merge safely — left as
        literals. -- */
  --orgx-letter-spacing-body:    0.01em; /* body copy / nav-link default tracking */
  --orgx-letter-spacing-label:   0.1em;  /* uppercase label / meta tracking */
  --orgx-letter-spacing-eyebrow: 0.12em; /* widest eyebrow / badge tracking */

  /* -- spacing: fluid curves — several components independently repeat
        the exact same responsive clamp() curve. The two curves that
        already had a legacy token (--space-sm/-md) are aliased here
        under the --orgx- naming convention; three more recurring
        curves that had NO token at all are named for the first time.
        This does not touch the many single-use or genuinely distinct
        curves elsewhere — those remain intentional, component-specific
        fluid spacing, per the brief. -- */
  --orgx-space-fluid-sm:  var(--space-sm);          /* clamp(12px, 1.5vw, 20px) */
  --orgx-space-fluid-md:  var(--space-md);          /* clamp(16px, 2vw, 24px) */
  --orgx-space-fluid-lg:  clamp(20px, 2.5vw, 32px); /* new — 3 exact-duplicate sites */
  --orgx-space-fluid-xl:  clamp(24px, 3vw, 36px);   /* new — 3 exact-duplicate sites */
  --orgx-space-fluid-2xl: clamp(28px, 3.5vw, 48px); /* new — 3 exact-duplicate sites (incl. footer) */

  /* -- radius: secondary families, reviewed per-cluster (not blanket
        converted). 14px and 18px are real, consistently-reused component
        families (exit-calculator/dense cards; dark-glass panels) — given
        their own tokens rather than forced onto the primary scale. 10px
        recurs identically across three unrelated small-UI contexts
        (form input, form message box, thumbnail) — named for the same
        reason. 11px was a single 1px outlier from the same input role
        and is merged into --orgx-radius-input. 28px remains a true
        single one-off and is left as a literal; 24px already matched
        --orgx-radius-2xl exactly and just needed pointing at it, not a
        new token — see DESIGN-SYSTEM-CHANGELOG.md v1.2. -- */
  --orgx-radius-input: 10px;
  --orgx-radius-dense: 14px;
  --orgx-radius-glass: 18px;

  /* -- colour: footer meta — #767676 recurs 3x (footer body copy, footer
        links/legal, bottom-bar text) as the footer's own muted tone. It
        does not numerically match text-tertiary or text-disabled once
        blended against the dark background (tertiary renders visibly
        lighter, disabled visibly darker) — named as its own role rather
        than forced onto the white-opacity ramp. -- */
  --orgx-color-meta: #767676;

  /* -- motion: hover-lift — seven card-hover interactions independently
        use the identical -3px lift; named so it reads as one intended
        interaction rather than seven coincidences. Other lift/entrance
        distances (-1/-5/-6/-8/-10px) serve different, genuinely distinct
        interactions (carets, dropdown/drawer entrances, reveal keyframes)
        and are intentionally left as literals — not every component
        should move identically. -- */
  --orgx-hover-lift: -3px;
}

/* ============================================================================
   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: var(--orgx-line-height-body);
  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:          var(--orgx-color-text-primary); /* was #fff + opacity:0.9 — rgba(255,255,255,0.90) is the identical render, see DESIGN-SYSTEM-CHANGELOG.md v1.2 */
  font-size:      0.85rem; /* the shared --orgx-font-size-label token (0.82rem) reads slightly too small for the primary nav */
  font-weight:    var(--orgx-font-weight-regular);
  letter-spacing: var(--orgx-letter-spacing-body);
  display:     inline-flex;
  align-items: center;
  gap:     0.45rem;
  padding: 10px 0;
  transition:      transform var(--orgx-duration-fast) ease, color var(--orgx-duration-fast) ease, opacity var(--orgx-duration-fast) 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: var(--orgx-font-weight-medium);
}

/* 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: var(--orgx-radius-md);
  box-shadow:    0 10px 30px rgba(0, 0, 0, 0.35);

  opacity:    0;
  visibility: hidden;
  transform:  translateY(-6px);
  transition: opacity var(--orgx-duration-fast) ease, transform var(--orgx-duration-fast) ease, visibility var(--orgx-duration-fast) 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:     var(--orgx-font-size-label); /* exact match, was 0.82rem literal */
  color:         var(--orgx-color-text-primary); /* was #fff + opacity:0.9, identical render */
  border-radius: var(--orgx-radius-sm);
  white-space:   nowrap;
  transition:    background var(--orgx-duration-fast) ease, color var(--orgx-duration-fast) ease, opacity var(--orgx-duration-fast) 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:      var(--orgx-font-size-label); /* exact match, was 0.82rem literal */
  letter-spacing: 0.03rem; /* rem-based tracking, distinct convention from the em-based scale — left as-is */
  font-weight:    var(--orgx-font-weight-light);
  color:          var(--color-muted);
  white-space:    nowrap;
}

.orgx-nav__contact {
  background:     #000;
  color:          #fff;
  padding:        0.2rem 1.4rem;
  border-radius:  var(--orgx-radius-md);
  border:         1px solid var(--color-green);
  font-weight:    var(--orgx-font-weight-medium);
  font-size:      0.75rem;
  letter-spacing: 0.05rem;
  line-height:    1rem;
  white-space:    nowrap;
  transition:     background var(--orgx-duration-slow) ease, color var(--orgx-duration-slow) ease, transform var(--orgx-duration-slow) 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 var(--orgx-duration-fast) ease, color var(--orgx-duration-fast) 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 var(--orgx-color-border-strong);
  color:         #fff;
  border-radius: var(--orgx-radius-pill);
  padding:       8px 12px;
  cursor:        pointer;
}

.orgx-nav__toggle-label {
  font-size:      var(--orgx-font-size-label); /* exact match, was 0.82rem literal */
  letter-spacing: 0.06em; /* single-site tracking, distinct from the 0.01/0.1/0.12em roles — left as-is */
  text-transform: uppercase;
  color:          var(--orgx-color-text-primary);
}

.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 var(--orgx-color-border);
  }

}

/* ============================================================================
   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:      var(--orgx-font-weight-medium);
  font-size:        0.9rem;
  line-height:      var(--orgx-line-height-compact);
  border-radius:    var(--orgx-radius-pill);
  padding:          0.5rem 1.6rem;
  border:           1px solid currentColor;
  cursor:           pointer;
  white-space:      nowrap;
  transition:       background var(--orgx-duration-slow) ease, color var(--orgx-duration-slow) ease,
                    border-color var(--orgx-duration-slow) ease, transform var(--orgx-duration-slow) ease;
  transform-origin: center;
}

.orgx-button--primary,
.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;
  font-weight:      var(--orgx-font-weight-medium);
  font-size:        0.9rem;
  line-height:      var(--orgx-line-height-compact);
  border-radius:    var(--orgx-radius-pill);
  padding:          0.5rem 1.6rem;
  cursor:           pointer;
  white-space:      nowrap;
  color:            var(--color-green);
  border:           1px solid rgba(255, 255, 255, 0.65);
  background:       transparent;
  font-family:      inherit;
  letter-spacing:   0.02em;
  transition:       background var(--orgx-duration-slow) ease, color var(--orgx-duration-slow) ease,
                    border-color var(--orgx-duration-slow) ease, transform var(--orgx-duration-slow) ease;
  transform-origin: center;
}

.orgx-button--primary i {
  color:      var(--orgx-color-text-secondary);
  transition: color var(--orgx-duration-slow) ease;
}

.orgx-button--primary:hover,
.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);
}

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

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

.orgx-button--secondary i {
  color:      var(--orgx-color-text-tertiary);
  transition: color var(--orgx-duration-slow) 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);
}

/* ORGX__digital_bg.webp has a hard edge baked into the file itself —
   the boundary between its plain dark upper area and the mesh "floor"
   below (visible by opening the image directly). Its one existing
   sitewide usage (.orgx-section--digital__bg) masks it under two
   FIXED-HEIGHT gradient fades (80px / 200px) tuned for that section's
   own, much shorter box. `.orgx-hero--page .orgx-hero__bg` (below,
   higher specificity) stretches this hero's bg layer to
   calc(100% + 600px) to bleed into the next section — on the 404 page
   that's 1000px+ tall, so the same fixed-height fades leave a large
   stretch of raw, un-faded texture (and its baked-in seam) exposed.
   Selector is 3 classes deep specifically to outrank that height/
   position rule. Fades are sized in % of the box instead of fixed px
   so they scale with whatever height the bg layer ends up at. */
.orgx-hero--404 .orgx-hero__bg.orgx-404__bg {
  height:               100%;   /* this page has nothing below to bleed into */
  /* Dimming/fading the seam in place kept failing because its landing
     point shifts with hero height and viewport width (measured at ~29%
     down the raw image via direct pixel sampling of
     ORGX__digital_bg.webp, but its ON-SCREEN position after cover-fit
     scaling moves around depending on box proportions). Instead of
     masking it, crop it out entirely: background-size's height is a %
     of THIS box, so "auto 450%" always scales the image to ~4.5x this
     box's height and anchors it to the top — the visible slice is
     always the top ~22% of the image, safely above the ~29% seam,
     regardless of how tall the hero ends up being. */
  background-image:
    linear-gradient(to bottom, var(--color-bg) 0%, transparent 50%),
    linear-gradient(to top,    var(--color-bg) 0%, transparent 50%),
    url('/images/ORGX__digital_bg.webp');
  background-size:     100% 100%, 100% 100%, auto 450%;
  background-position: center, center, top center;
  background-repeat:   no-repeat, no-repeat, no-repeat;
  opacity:              0.5;
}

/* .orgx-hero--page is deliberately overflow:visible (its ::after bottom
   fade bleeds height:calc(100% + 600px) past the hero's own edge so it
   finishes fading to solid smoothly in the section below) — clipping
   the whole hero to contain the oversized numeral would cut that fade
   off mid-transition and leave a visible hard seam. This wrapper clips
   only the numeral, sized to the hero itself, leaving the hero's own
   overflow untouched. */
.orgx-404__numeral-clip {
  position: absolute;
  inset:    0;
  overflow: hidden;
  z-index:  1;
  pointer-events: none;
}

.orgx-404__numeral {
  position:  absolute;
  right:     clamp(-20px, 1vw, 40px);
  bottom:    clamp(-30px, -1vw, 0px);
  font-family: var(--orgx-font-primary);
  font-size:   clamp(180px, 30vw, 420px);
  font-weight: var(--orgx-font-weight-bold);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Outline only, not a fill — the rest of the site never uses green as
     a large solid shape except at one or two deliberate CTA moments;
     this keeps that same restraint at a much bigger size. Faint fallback
     fill for browsers without text-stroke support. */
  color:                 rgba(147, 192, 39, 0.05);
  -webkit-text-stroke:   1.5px rgba(147, 192, 39, 0.35);
  pointer-events: none;
  user-select:    none;
}

.orgx-hero--404 .orgx-hero__content {
  position: relative;
  z-index:  2;
}

/* .orgx-hero--page::after bleeds 600px past the hero expecting the bg
   image underneath it to bleed the same amount (see .orgx-hero--page
   .orgx-hero__bg above) — its gradient only reaches meaningful opacity
   well into that bled zone. The 404 bg image is capped at the hero's
   own height (nothing below it needs the bleed), so past that point the
   texture just stops while this fade is still mostly transparent,
   showing as a hard edge exactly at the hero's bottom. The 404 bg's own
   two internal fades already resolve fully to the page background by
   the bottom of the hero, so this shared fade is redundant here. */
.orgx-hero--404::after {
  content: none;
}

@media (max-width: 640px) {
  .orgx-404__numeral {
    right:  -10px;
    bottom: -10px;
  }
}

/* ============================================================================
   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: var(--orgx-font-weight-medium);
  color:       var(--color-green);
  transition:  opacity var(--orgx-duration-fast) 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:      var(--orgx-font-size-hero-title);
  font-weight:    var(--orgx-font-weight-medium);
  line-height:    1.05;
  letter-spacing: var(--orgx-letter-spacing-body);
  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: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-body-lg);
  color:       var(--color-green);
  max-width:   640px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.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: var(--orgx-font-weight-medium);
  line-height: 1.8;
  color:       #d3d3cf;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.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: var(--orgx-font-weight-semibold);
  line-height: var(--orgx-line-height-body);
  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: var(--orgx-radius-xl);
  overflow:      hidden;
  isolation:     isolate;
  margin:        0 auto;
  background:    rgba(80, 80, 80, 0.10);
  border:        1px solid var(--orgx-color-border);
  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:  var(--orgx-filter-photo-cool);
  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: var(--orgx-radius-lg);
  }

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

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

.orgx-section__head {
  position:      relative; /* keeps title/intro text above the sticky
                               .orgx-hero-transition glow that sits between
                               sections — see z-index note there */
  z-index:       2;
  width:         100%;
  max-width:     var(--width-section);
  margin-inline: auto;
  margin-bottom: clamp(40px, 5vw, 64px);
  text-align:    center;
}

.orgx-section__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    1.15;
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  margin:         0;
}

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

.orgx-list {
  list-style:    none;
  margin:        0 0 var(--orgx-space-fluid-lg) 0;
  padding:       0;
  display:       grid;
  gap:           10px;
}

.orgx-list li {
  position:     relative;
  padding-left: 24px;
  font-size:    0.92rem;
  line-height:  1.65;
  color:        var(--orgx-color-text-secondary);
}

/* 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: var(--orgx-font-weight-medium);
  color:       var(--orgx-color-text-primary);
}

/* --- 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;
  /* Explicit (not auto) so this section's own box compares unambiguously
     against the connecting .orgx-hero-transition glow (z-index:1) that
     sits just outside it as a sibling — without this, the two tied at
     the same implicit level and DOM order made this section win,
     hiding the glow behind its background instead of letting it bridge
     visibly across the section boundary. */
  z-index:  0;
}

.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,
.orgx-section--digital .orgx-insight-box,
.orgx-section--digital .orgx-icon-list-split__header,
.orgx-section--digital .orgx-icon-list-split,
.orgx-section--digital .orgx-callout-note,
.orgx-section--digital .orgx-section__subhead,
.orgx-section--digital .orgx-funnel-split,
.orgx-section--digital .orgx-about-manifesto,
.orgx-section--digital .orgx-home-digital__ctas {
  position: relative;
  /* Content tier (2) — must stay above both the section's own __bg
     layer (0) and the connecting .orgx-hero-transition glow (1) that
     sits just outside this section as a preceding sibling. */
  z-index:  2;
}

.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 */
  /* Three explicit layers site-wide: 0 = section backgrounds (incl.
     .orgx-section--digital, which is itself position:relative for its
     own __bg layer — without an explicit z-index here this glow would
     tie with it and lose to whichever section comes later in the DOM,
     hiding the glow behind the next section's fill instead of bridging
     across it), 1 = this connecting glow, 2 = actual text content
     (.orgx-section__head, .orgx-hero__content). Nav is z-index:9000,
     well above all of this regardless. */
  z-index:   1;
  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: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-body-lg);
  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:   var(--orgx-radius-xl);
  border:          1px solid var(--orgx-color-border);
  background:      var(--orgx-color-surface);
  backdrop-filter: blur(6px);
  position:        relative;
  overflow:        hidden;
  transition:      border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease, transform var(--orgx-duration-default) 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 */
.orgx-values__card::after,
.orgx-outcome-card::after,
.orgx-job-card::after,
.orgx-pillars__card::after,
.orgx-service__feature-card::after,
.orgx-service__step::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 var(--orgx-duration-default) 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(var(--orgx-hover-lift));
}

.orgx-values__card:hover::after,
.orgx-outcome-card:hover::after,
.orgx-job-card:hover::after,
.orgx-pillars__card:hover::after,
.orgx-service__feature-card:hover::after,
.orgx-service__step: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:       var(--orgx-color-text-tertiary);
  margin:      0 0 clamp(10px, 1.4vw, 16px);
  line-height: var(--orgx-line-height-body-lg);
}

.orgx-outcome-card h3,
.orgx-values__card h3 {
  font-size:   var(--orgx-font-size-card-title);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  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: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

/* 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: var(--orgx-space-fluid-md);
  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:    var(--orgx-color-surface);
  border:        1px solid var(--orgx-color-border);
  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: var(--orgx-font-weight-bold);
  line-height: var(--orgx-line-height-tight);
  color:       var(--color-green);
  margin:      0 0 var(--space-sm) 0;
}

.orgx-approach__subtitle {
  font-size:   clamp(1rem, 1.4vw, 1.2rem);
  font-weight: var(--orgx-font-weight-regular);
  line-height: var(--orgx-line-height-body);
  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:     var(--orgx-font-weight-bold);
  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:       var(--orgx-color-text-secondary);
  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 var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) 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: var(--orgx-font-weight-bold);
  line-height: 1.15;
  color:       #000;
}

.orgx-approach__cta-text {
  font-size:   0.72rem;
  font-weight: var(--orgx-font-weight-semibold);
  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(var(--orgx-hover-lift));
}

/* ---- 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:      var(--orgx-space-fluid-xl);
}

.orgx-values__control {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  border:          1px solid var(--orgx-color-border-strong);
  background:      transparent;
  color:           var(--orgx-color-text-secondary);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.85rem;
  transition:      background var(--orgx-duration-default) ease, border-color var(--orgx-duration-default) ease, color var(--orgx-duration-default) 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;
  /* 100% (of .orgx-closer's own padded content box), not 98vw — vw
     ignores that .orgx-closer carries the standard --wrap-pad inline
     padding, so a vw-based width can exceed the actual available space;
     when it does, the auto margins below can't centre it (per the CSS
     spec they collapse to 0 once width > containing block), and the
     stage sits flush against the left padding edge instead, overflowing
     off-centre to the right — clipped by .orgx-closer's overflow:hidden,
     but visibly off-axis from the heading above it. */
  width:         min(100%, 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 var(--orgx-duration-default) 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:   var(--orgx-font-weight-semibold);
  line-height:   1.2;
  color:         #fff;
  margin-bottom: 0.4rem;
}

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

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

.orgx-closer__cta i {
  font-size:  0.75rem;
  transition: transform var(--orgx-duration-fast) 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:  var(--orgx-radius-sm);
}

/* ---- 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(100%, 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%; }
}

/* The hover/pointermove interaction this component is built around
   (rotate the cross, dim the other three labels) doesn't exist on touch
   — nothing ever activates on the homepage here (no default arm). Below
   this breakpoint the four labels sit at the four ends of the X itself
   (top-left/bottom-left/top-right/bottom-right), same idea as desktop's
   edge-centred labels but moved to the corners the legs actually point
   at, since a larger mobile cross has the room for it. Note this corner
   arrangement (left side: Private equity above SMEs; right side:
   Corporates above ORGX) is a deliberately different pairing from
   desktop's top/right/bottom/left quadrants — chosen for how it reads
   at this size, not a responsive re-layout of the same positions. */
@media (max-width: 580px) {
  .orgx-closer__stage {
    position:      relative;
    display:       block;
    /* 100% of .orgx-closer's own padded content box, not a vw value —
       see the base-rule comment above on why vw ignores that padding
       and causes exactly this kind of off-centre overflow. */
    width:         min(380px, 100%);
    aspect-ratio:  1 / 1;
    margin-inline: auto;
    margin-top:    clamp(16px, 4vw, 32px);
  }

  /* Decorative quadrant glow is tuned for the desktop top/right/bottom/
     left wedges — left off here rather than reworked for the new corner
     layout; the cross-idle/-beam swap on the dedicated arm pages already
     communicates the active state without it. */
  .orgx-closer__fills { display: none; }

  /* The source image (ORGX__cross_clean/light.webp) has a large built-in
     transparent margin — the drawn X only occupies the middle ~40% of
     its own canvas (measured: ~30%-70% on both axes). A small negative
     inset crops some of that dead space so the X reads bigger within
     the stage instead of floating tiny in the middle of it. */
  .orgx-closer__cross {
    position: absolute;
    inset:    -8%;
  }

  /* The idle image is already opacity:1 — its strokes are just drawn
     with a soft, semi-translucent glow rather than a solid fill, which
     reads as faint at this smaller mobile size. A brightness/contrast
     boost plus a matching glow makes the X feel more solid/present
     without touching the desktop or tablet versions of the same image. */
  .orgx-closer__cross-idle {
    filter: brightness(1.2) contrast(1.15) drop-shadow(0 0 6px rgba(147, 192, 39, 0.45));
  }

  .orgx-closer__label {
    position:    absolute;
    width:       min(140px, 40vw);
    text-align:  left;
    align-items: flex-start;
    /* Cancel the base --top/--right/--bottom/--left translateX/Y(±50%)
       (used to centre the label on an edge-midpoint on desktop) — these
       labels anchor from a corner instead, so no centring transform. */
    transform: none;
  }

  /* With the -8% cross inset above, the image's own ~30%/70% margins
     land at roughly 27%/73% of the stage — labels sit just outside that,
     at 20%, so they read as "at the end of the leg" with a small gap
     rather than touching the stroke. */
  .orgx-closer__label--left {
    /* Private equity → bottom-left leg */
    bottom: 20%;
    left:   0;
    right:  auto;
    top:    auto;
  }

  .orgx-closer__label--top {
    /* SMEs → top-left leg */
    top:    20%;
    left:   0;
    bottom: auto;
    right:  auto;
  }

  .orgx-closer__label--right {
    /* Corporates → top-right leg */
    top:        20%;
    right:      0;
    left:       auto;
    bottom:     auto;
    text-align: right;
    align-items: flex-end;
  }

  .orgx-closer__label--bottom {
    /* ORGX → bottom-right leg */
    bottom:     20%;
    right:      0;
    left:       auto;
    top:        auto;
    text-align: right;
    align-items: flex-end;
  }

  .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;
    gap:       4px;
  }

  .orgx-closer__label--right  .orgx-closer__cta,
  .orgx-closer__label--bottom .orgx-closer__cta {
    justify-content: flex-end;
  }
}


/* ============================================================
 * 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:    var(--orgx-font-weight-regular);
  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:  var(--orgx-radius-2xl);
  padding:        var(--orgx-space-fluid-2xl) clamp(24px, 3.5vw, 56px) var(--orgx-space-fluid-md);
  box-shadow:     0 10px 30px rgba(0, 0, 0, 0.4);
  display:        flex;
  flex-direction: column;
  gap:            var(--orgx-space-fluid-2xl); /* exact match, was clamp(28px, 3.5vw, 48px) literal */
}

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

.orgx-footer__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--orgx-space-6) var(--orgx-space-7); /* was 2rem 3rem, exact match (32px 48px) */
  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:      var(--orgx-font-size-label); /* was 0.8rem — 0.02rem merge, sub-perceptible */
  letter-spacing: 0.04em;
  font-weight:    var(--orgx-font-weight-regular);
}

.orgx-footer__col h4 a {
  color:           inherit;
  text-decoration: none;
  transition:      color var(--orgx-duration-default) ease;
}

.orgx-footer__col h4 a:hover { color: var(--color-green); }

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

.orgx-footer__col p {
  font-size:   var(--orgx-font-size-meta); /* was 0.7rem — 0.02rem merge, sub-perceptible */
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-meta);
  margin:      0;
}

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

.orgx-footer__col ul li { line-height: var(--orgx-line-height-tight); margin-bottom: 0.2em; }

.orgx-footer__col ul li a,
.orgx-footer__col ul li span,
.orgx-footer__legal a {
  font-size:       var(--orgx-font-size-meta); /* was 0.7rem — 0.02rem merge, sub-perceptible */
  line-height:     var(--orgx-line-height-body-lg);
  color:           var(--orgx-color-meta);
  text-decoration: none;
  transition:      color var(--orgx-duration-default) 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:            var(--orgx-space-2); /* was 0.5rem, exact match (8px) */
  margin-top:     var(--orgx-space-2); /* was 0.5rem, exact match (8px) */
}

.orgx-footer__social-link {
  display:         flex;
  align-items:     center;
  gap:             0.6rem; /* 9.6px — no exact scale match, left as-is */
  color:           var(--color-muted);
  font-size:       var(--orgx-font-size-meta); /* was 0.75rem — 0.03rem merge, sub-perceptible */
  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:     var(--orgx-space-4); /* was 1rem, exact match (16px) */
  border-top:      1px solid var(--orgx-color-border);
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--orgx-space-4); /* was 1rem, exact match (16px) */
}

.orgx-footer__bottom span {
  font-size: var(--orgx-font-size-micro); /* was 0.62rem — 0.04rem merge, sub-perceptible */
  color:     var(--orgx-color-meta);
  opacity:   0.9;
}

.orgx-footer__legal {
  display: flex;
  gap:     var(--orgx-space-4); /* was 1rem, exact match (16px) */
}

/* ---- 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; }

  .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: var(--orgx-font-weight-medium);
}

@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%;
}

/* Intro section now holds only a header (no body content below it) —
   drop the header's own bottom margin so the section's vertical
   padding doesn't double up into an oversized empty gap. */
[aria-labelledby="orgx-wwd-intro-title"] .orgx-section__head {
  margin-bottom: 0;
}

/* ============================================================
 * 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:      var(--orgx-space-fluid-md) 0 0;
  font-size:   clamp(0.88rem, 0.95vw, 1rem);
  line-height: var(--orgx-line-height-relaxed);
  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: var(--orgx-font-weight-medium);
  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:  var(--orgx-font-weight-regular);
  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: var(--orgx-font-weight-medium);
  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: var(--orgx-color-text-secondary);
}

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

/* Breathing room when a manifesto paragraph follows the card grid directly
   (About page: "Combining expertise with technology") */
.orgx-method-grid + .orgx-about-manifesto {
  margin-top: clamp(32px, 4vw, 48px);
}

/* About page: smaller, tighter cards than the default method-grid size */
.orgx-about__digital-section .orgx-method-grid .orgx-values__card {
  padding: clamp(22px, 2.4vw, 28px);
}

/* 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: var(--orgx-radius-lg);
  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 var(--orgx-color-border-strong);
  border-radius:           var(--orgx-radius-2xl);
  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: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--orgx-color-text-tertiary);
}

.orgx-exitcalc__title {
  margin-top:  4px;
  font-size:   0.96rem;
  color:       var(--orgx-color-text-primary);
  font-weight: var(--orgx-font-weight-medium);
}

/* 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 var(--orgx-color-border);
  border-radius: var(--orgx-radius-dense);
  padding:       12px;
}

.orgx-exitcalc__colTitle {
  font-size:      0.68rem;
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-secondary);
  margin-bottom:  10px;
}

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

.orgx-exitcalc__field label {
  display:        block;
  font-size:      0.66rem;
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-tertiary);
  margin-bottom:  5px;
}

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

.orgx-exitcalc__field input::-webkit-inner-spin-button,
.orgx-exitcalc__field input::-webkit-outer-spin-button {
  opacity: 0;
  transition: opacity var(--orgx-duration-fast);
}

.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 var(--orgx-color-border);
  display:         flex;
  justify-content: space-between;
  gap:             10px;
}

.orgx-exitcalc__miniLabel {
  font-size: 0.80rem;
  color:     var(--orgx-color-text-secondary);
}

.orgx-exitcalc__miniValue {
  font-size:   0.86rem;
  color:       #fff;
  font-weight: var(--orgx-font-weight-bold);
  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:      var(--orgx-color-text-tertiary);
}

/* Results — big EV uplift block */
.orgx-exitcalc__big {
  border-radius: var(--orgx-radius-dense);
  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: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--orgx-color-text-secondary);
  margin-bottom:  6px;
}

.orgx-exitcalc__bigValue {
  font-size:   1.34rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       #fff;
  line-height: var(--orgx-line-height-tight);
}

.orgx-exitcalc__bigMeta {
  margin-top: 10px;
  font-size:  0.82rem;
  color:      var(--orgx-color-text-secondary);
}

/* 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 var(--orgx-color-border);
  border-radius: var(--orgx-radius-dense);
  padding:       12px;
}

.orgx-exitcalc__cardLabel {
  font-size:      0.66rem;
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--orgx-color-text-tertiary);
  margin-bottom:  8px;
}

.orgx-exitcalc__cardValue {
  color:       #fff;
  font-weight: var(--orgx-font-weight-bold);
  font-size:   0.98rem;
}

.orgx-exitcalc__cardMeta {
  margin-top: 6px;
  font-size:  0.76rem;
  color:      var(--orgx-color-text-tertiary);
}

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

.orgx-exitcalc__note {
  margin-top: 10px;
  font-size:  0.72rem;
  color:      var(--orgx-color-text-tertiary);
}

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

/* Value bridge */
.orgx-bridge {
  margin-top:  10px;
  padding-top: 10px;
  border-top:  1px solid var(--orgx-color-border);
}

.orgx-bridge__bar {
  height:        10px;
  border-radius: var(--orgx-radius-pill);
  overflow:      hidden;
  border:        1px solid var(--orgx-color-border-strong);
  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:       var(--orgx-color-text-secondary);
  font-size:   0.80rem;
}

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

.orgx-bridge__dot {
  width:         10px;
  height:        10px;
  border-radius: var(--orgx-radius-pill);
  border:        1px solid var(--orgx-color-border-strong);
}

.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:            var(--orgx-radius-glass);
  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: var(--orgx-line-height-body-lg);
  color:       var(--orgx-color-text-secondary);
  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: var(--orgx-line-height-body);
}

/* 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:       var(--orgx-color-text-secondary);
  font-weight: var(--orgx-font-weight-regular);
  margin:      0 0 8px;
}

.orgx-contact-meta p {
  color:       var(--orgx-color-text-tertiary);
  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:       var(--orgx-color-text-secondary);
  font-size:   0.85rem;
  transition:  opacity var(--orgx-duration-fast) 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: var(--orgx-line-height-relaxed);
  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:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-tertiary);
  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:   var(--orgx-color-surface-elevated);
  border:       1px solid var(--orgx-color-border-strong);
  border-radius: var(--orgx-radius-input);
  color:        var(--orgx-color-text-primary);
  padding:      10px 14px;
  font-family:  inherit;
  font-size:    0.88rem;
  line-height:  var(--orgx-line-height-body);
  transition:   border-color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) 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 button shape/hover now shares .orgx-button--primary's rule (see §06 BUTTON)
   instead of a hand-duplicated copy — see DESIGN-SYSTEM-CHANGELOG.md */
.orgx-contact-form .frm_submit { margin-top: clamp(8px, 1vw, 14px); }

/* 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: var(--orgx-radius-sm);
  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: var(--orgx-radius-input);
  padding:       14px 18px;
  color:         var(--color-green);
  font-size:     0.88rem;
  line-height:   var(--orgx-line-height-body-lg);
}

@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;
  }
}

/* ============================================================
 * CONSULTANT BOOKING WIDGET (orgx-consultant-booking plugin)
 *     Network-wide plugin shared across every ORGX proposition
 *     site — its own booking.css is never edited here. That CSS
 *     already reads --accent/--text/--muted/--surface/--border/
 *     --bg/--radius/--accent-strong/--accent-ink custom
 *     properties with generic fallbacks for themes that don't
 *     define them (see that file's own header comment); bridging
 *     those to this theme's real tokens re-skins its colours,
 *     and the rules below go further, replacing its plain
 *     single-column day list and bare form with this theme's own
 *     card/pill/glow language so it reads as a native section
 *     rather than a bolted-on plugin.
 * ============================================================ */

/* .orgx-cb-step-pick below sets display:grid at the same specificity as
   the browser's native [hidden] rule, which would otherwise win only by
   source order — this guarantees a hidden step always stays hidden
   regardless of stylesheet load order. */
.orgx-cb-step[hidden] { display: none; }

/* NOTE ON SPECIFICITY: the plugin's own booking.css is enqueued inside
   render_shortcode() (i.e. from inside page content), which WordPress
   ends up printing AFTER this theme's style.css — so on any selector
   below that the plugin ALSO styles directly (not through the --token
   bridge), a same-specificity rule here would lose on load order alone.
   Every such selector is therefore prefixed with .orgx-cb-widget to
   guarantee it wins regardless of enqueue order, rather than relying on
   which stylesheet happens to print last. */

.orgx-cb-widget {
  --accent:        var(--color-green);
  --accent-strong: var(--color-green);
  --accent-ink:    #000;
  --text:          var(--orgx-color-text-primary);
  --muted:         var(--orgx-color-text-secondary);
  --surface:       var(--orgx-color-surface-elevated);
  --border:        var(--orgx-color-border-strong);
  --bg:            var(--color-bg);
  --radius:        var(--orgx-radius-input);

  max-width: var(--width-content);
  margin:    0 auto;
}

/* Header — no eyebrow line (dropped sitewide), heading matches the
   standard centred .orgx-section__head title scale. */
.orgx-cb-widget .orgx-cb-label { display: none; }

.orgx-cb-widget .orgx-cb-heading {
  font-family: var(--orgx-font-primary);
  font-size:   var(--orgx-font-size-section-title);
  font-weight: var(--orgx-font-weight-medium);
  text-align:  center;
}

.orgx-cb-widget .orgx-cb-intro {
  max-width:   640px;
  margin:      0 auto var(--orgx-space-fluid-xl);
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  text-align:  center;
}

.orgx-cb-widget .orgx-cb-tz-note {
  text-align: center;
  font-size:  var(--orgx-font-size-meta);
  color:      var(--orgx-color-text-tertiary);
}

/* Day-by-day list → a responsive card grid inside one framed panel,
   height-capped with an internal scroll — 12 weeks of open slots
   would otherwise turn the page into one endless column of times. */
.orgx-cb-widget .orgx-cb-step-pick {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  align-content:         start;
  gap:                   var(--orgx-space-fluid-lg);
  max-height:            640px;
  overflow-y:            auto;
  padding:               var(--orgx-space-fluid-lg);
  background:            var(--orgx-color-surface);
  border:                1px solid var(--orgx-color-border);
  border-radius:         var(--orgx-radius-xl);
}

.orgx-cb-widget .orgx-cb-day { margin-bottom: 0; }

.orgx-cb-widget .orgx-cb-day h4 {
  font-size:   0.95rem;
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--orgx-color-text-primary);
}

.orgx-cb-widget .orgx-cb-slots { gap: 0.6rem; }

.orgx-cb-widget .orgx-cb-slot {
  position:      relative;
  border-radius: var(--orgx-radius-pill);
  font-family:   inherit;
  transition:    border-color var(--orgx-duration-default) ease,
                 background   var(--orgx-duration-default) ease,
                 transform    var(--orgx-duration-default) ease,
                 color        var(--orgx-duration-default) ease;
}

.orgx-cb-widget .orgx-cb-slot:hover,
.orgx-cb-widget .orgx-cb-slot:focus-visible,
.orgx-cb-widget .orgx-cb-slot.is-selected {
  outline:      none;
  background:   rgba(147, 192, 39, 0.08);
  border-color: rgba(147, 192, 39, 0.45);
  transform:    translateY(var(--orgx-hover-lift));
}

.orgx-cb-widget .orgx-cb-empty {
  grid-column: 1 / -1;
  text-align:  center;
  padding:     var(--orgx-space-fluid-lg) 0;
}

/* Form step — quiet, low-key field captions (not the heavier uppercase
   label style used on the main Formidable contact form) — matches how
   forms read on orgx.com/contact, where the field itself carries the
   visual weight, not the text above it. */
.orgx-cb-widget .orgx-cb-step-form { max-width: 480px; margin: 0 auto; }

.orgx-cb-widget .orgx-cb-back { font-size: var(--orgx-font-size-label); }

.orgx-cb-widget .orgx-cb-selected-time {
  display:        table;
  margin:          0 auto var(--orgx-space-fluid-lg);
  padding:        0.4rem 1.1rem;
  font-size:      0.9rem;
  font-weight:    var(--orgx-font-weight-medium);
  color:          var(--color-green);
  background:     rgba(147, 192, 39, 0.08);
  border:         1px solid rgba(147, 192, 39, 0.45);
  border-radius:  var(--orgx-radius-pill);
}

.orgx-cb-widget .orgx-cb-form label {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-regular);
  color:       var(--orgx-color-text-tertiary);
}

.orgx-cb-widget .orgx-cb-form input,
.orgx-cb-widget .orgx-cb-form textarea {
  font-size: 0.88rem;
}

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

.orgx-cb-widget .orgx-cb-form input:focus,
.orgx-cb-widget .orgx-cb-form textarea:focus {
  outline:      none;
  border-color: var(--color-green);
  background:   rgba(147, 192, 39, 0.05);
}

/* Compact centred pill button — matches .orgx-button--primary's shape
   and weight instead of the plugin's own full-width block button. */
.orgx-cb-widget .orgx-cb-submit {
  display:        block;
  margin:         0 auto;
  font-family:    inherit;
  font-size:      0.9rem;
  padding:        0.5rem 1.6rem;
  border-radius:  var(--orgx-radius-pill);
  transition:     background var(--orgx-duration-slow) ease,
                  border-color var(--orgx-duration-slow) ease,
                  transform var(--orgx-duration-slow) ease;
}

.orgx-cb-widget .orgx-cb-submit:hover:not([disabled]) { transform: scale(1.05); }

.orgx-cb-widget .orgx-cb-step-done {
  max-width:     560px;
  margin:        0 auto;
  padding:       var(--orgx-space-fluid-xl);
  text-align:    center;
  background:    var(--orgx-color-surface);
  border:        1px solid var(--orgx-color-border);
  border-radius: var(--orgx-radius-xl);
}

@media (max-width: 640px) {
  .orgx-cb-widget .orgx-cb-step-pick {
    grid-template-columns: 1fr;
    max-height:            480px;
  }
}

/* ── 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%; }
}


/* ============================================================
 * SCHEDULER MODAL
 *     Popup chrome for the "Book a…" CTAs sitewide (see
 *     inc/scheduler.php / assets/scheduler.js). Same modal pattern
 *     used across the ORGX family (Digital Services runs the
 *     identical chrome, just with its own domain-accent colours).
 *     Sits OUTSIDE .orgx-cb-widget, so it can't inherit that
 *     element's local --accent/--surface/etc. bridge variables
 *     (those cascade to descendants only) — references the real
 *     theme tokens directly instead.
 * ============================================================ */

body.scheduler-body-lock { overflow: hidden; }

.scheduler-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  /* Same near-opaque + blur treatment as .orgx-search-overlay__backdrop —
     the launch-theme original's plain 72%-opacity backdrop let page
     content bleed through behind the modal's own translucent surface
     tint, reading as a double-exposure rather than a solid popup. */
  background: rgba(7, 10, 15, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  visibility: hidden;
  opacity: 0;
  transition: opacity .2s ease, visibility .2s ease;
}
.scheduler-backdrop.is-open { visibility: visible; }
.scheduler-backdrop.is-visible { opacity: 1; }

.scheduler-modal {
  position: relative;
  /* Solid, not --orgx-color-surface-elevated (a 6%-white tint meant to
     lift a panel off this theme's solid page background) — here the
     modal sits on the translucent backdrop above, so it needs its own
     opaque card surface to read as a card rather than more translucency
     stacked on translucency. */
  background: var(--color-bg);
  border: 1px solid var(--orgx-color-border-strong);
  border-radius: var(--orgx-radius-lg);
  box-shadow: 0 32px 96px rgba(0, 0, 0, .5);
  width: 100%;
  max-width: 840px;
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 3rem);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  transform: translateY(16px);
  transition: transform .2s ease;
}
.scheduler-backdrop.is-visible .scheduler-modal { transform: translateY(0); }

.scheduler-modal__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.scheduler-modal__heading { flex: 1; min-width: 0; }
.scheduler-modal__title { margin-bottom: .4rem; }
.scheduler-modal__subtitle { color: var(--orgx-color-text-secondary); margin: 0; }
.scheduler-modal__close {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: var(--orgx-radius-sm);
  border: 1px solid var(--orgx-color-border-strong);
  background: transparent;
  color: var(--orgx-color-text-secondary);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color .15s ease, color .15s ease;
}
.scheduler-modal__close:hover { border-color: var(--color-green); color: var(--color-green); }
.scheduler-modal__close:focus-visible { outline: 2px solid var(--color-green); outline-offset: 2px; }

.scheduler-cb-wrap .orgx-cb-widget { max-width: none; }

.scheduler-cb-fallback { color: var(--orgx-color-text-secondary); }
.scheduler-cb-fallback a { color: var(--color-green); }

/* ── Weekly grid layout for the shared widget's day list ──────────────
   Built by assets/scheduler.js by moving (never cloning) the plugin's
   own .orgx-cb-day elements into Mon–Fri columns, one week at a time —
   same pattern as Digital Services, plain ORGX green throughout since
   this theme has no per-domain accent system. Nested inside
   .orgx-cb-widget, so it DOES inherit that element's local tokens. */
.orgx-cb-weekgrid__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin-bottom: .8rem;
}
.orgx-cb-weekgrid__label {
  font-size: .85rem;
  font-weight: 700;
  color: var(--muted);
  min-width: 140px;
  text-align: center;
}
.orgx-cb-weekgrid__navbtn {
  width: 28px;
  height: 28px;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.orgx-cb-weekgrid__navbtn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.orgx-cb-weekgrid__navbtn:disabled { opacity: .35; cursor: not-allowed; }

.orgx-cb-weekgrid__panel {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  margin-bottom: 1.8rem;
}
.orgx-cb-weekgrid__panel[hidden] { display: none; }

.orgx-cb-weekgrid__col.orgx-cb-day { margin-bottom: 0; }
.orgx-cb-weekgrid__col h4 { text-align: center; font-size: .78rem; margin: 0 0 .6rem; }
.orgx-cb-weekgrid__col .orgx-cb-slots { display: flex; flex-direction: column; gap: .4rem; }
.orgx-cb-weekgrid__col .orgx-cb-slot { width: 100%; }

.orgx-cb-weekgrid__col--empty { display: flex; flex-direction: column; align-items: center; }
.orgx-cb-weekgrid__col--empty h4 { text-align: center; font-size: .78rem; font-weight: 700; color: var(--text); margin: 0 0 .6rem; }
.orgx-cb-weekgrid__daydate { display: block; font-weight: 400; color: var(--muted); font-size: .7rem; margin-top: .2rem; }
.orgx-cb-weekgrid__noavail { color: var(--muted); opacity: .4; padding-top: .5rem; }

@media (max-width: 680px) {
  .orgx-cb-weekgrid__panel { grid-template-columns: repeat(5, minmax(56px, 1fr)); gap: .3rem; overflow-x: auto; }
  .orgx-cb-weekgrid__label { min-width: 0; font-size: .75rem; }

  /* The plugin's own day heading is a full "Wednesday 16 September" —
     fine in a 5-per-row desktop grid, but overlaps the next column at
     these narrower widths. Truncate rather than let it collide. */
  .orgx-cb-weekgrid__col h4,
  .orgx-cb-weekgrid__col--empty h4 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

@media (max-width: 640px) {
  .scheduler-modal { padding: 1.25rem 1rem; max-height: 96vh; }
  .scheduler-modal__subtitle { display: none; }
}


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


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

/* 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;
}

/* Mobile: the composition is the whole point (cat casting a lion's
   shadow), and .orgx-hero--left's mobile height (100svh + 260px, often
   >1000px) is so much taller than it is wide that neither "auto 92%"
   (scales to hero *height* — renders the image thousands of px wide,
   losing the cat off one edge) nor a plain "cover" crop (same problem)
   can show both subjects — the aspect mismatch is too extreme. Sizing
   by *width* instead keeps the whole composition intact and legible,
   docked near the bottom of the tall hero below the text/button. */
@media (max-width: 640px) {
  .page-template-page-about .orgx-hero__bg {
    background-size:     150% auto;
    /* "bottom" would dock it at the foot of the ~1000px+ hero, well
       below the fold — this keeps it inside the first viewport, under
       the title/button, on typical mobile screen heights. */
    background-position: center 420px;
  }
}

/* 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:    var(--orgx-font-weight-bold);
  line-height:    1.15;
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          var(--orgx-color-text-primary);
  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: var(--orgx-font-weight-medium);
  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:                   var(--orgx-space-fluid-md);
  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: var(--orgx-font-weight-semibold);
  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:        var(--orgx-color-text-primary);
  margin:       0 0 1.4em;
}

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

.orgx-about-manifesto p strong {
  color:       #fff;
  font-weight: var(--orgx-font-weight-medium);
}

/* ── 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 behind the manifesto text for readability */
.orgx-about__why-section .orgx-section--digital__bg {
  opacity: 0.30;
}

/* Tighter head-to-body gap */
.orgx-about__why-section .orgx-section__head {
  margin-bottom: var(--orgx-space-fluid-xl);
}

/* 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:       var(--orgx-color-text-primary);
  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 var(--orgx-color-border);
  border-bottom: 1px solid var(--orgx-color-border);
  margin-block:  clamp(4px, 0.5vw, 8px);
}

/* When this is the last line in the manifesto (e.g. "Combining expertise
   with technology", directly followed by CTA buttons outside the block),
   the closing rule line has nothing to divide and reads as a stray line —
   drop it there, but keep both rules when more text follows below. */
.orgx-about-manifesto .orgx-about-why__highlight:last-child {
  border-bottom: none;
  padding-bottom: 0;
  margin-bottom:  0;
}

/* Higher specificity needed to override .orgx-about-manifesto p strong.
   Not scoped to .orgx-about__why-section — this highlight treatment is
   reused wherever an .orgx-about-manifesto needs one emphasised line
   (e.g. the "Where digital fits" section), not just "Why we exist". */
.orgx-about-manifesto .orgx-about-why__highlight strong {
  color:       var(--color-green);
  font-size:   clamp(1.05rem, 1.45vw, 1.25rem);
  font-weight: var(--orgx-font-weight-medium);
}

/* 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: var(--orgx-font-weight-medium);
  margin-bottom: 1.3em;
}

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

/* ── About: "See what keeps us sharp…" team-update cards ──
   Images stay in full colour here (same reasoning as
   .orgx-home-insights__card) rather than the shared
   .orgx-post-card__image default's cool-grayscale treatment —
   this showcase wants the photography to pop, not read as an
   editorial archive listing. */
.page-template-page-about .orgx-post-card__image img {
  filter:  none;
  opacity: 1;
}

.page-template-page-about .orgx-post-card:hover .orgx-post-card__image img {
  filter:    none;
  opacity:   1;
  transform: scale(1.04);
}


/* ============================================================
   §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 var(--orgx-color-border);
  border-radius:           var(--orgx-radius-glass);
  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: var(--orgx-font-weight-regular);
  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:    var(--orgx-font-weight-regular);
  color:          var(--orgx-color-text-tertiary);
  letter-spacing: 0.07em;
}

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

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

/* ── Green eyebrow variant ───────────────────────────────── */
.orgx-section__eyebrow.is-green {
  color:       var(--color-green);
  font-style:  normal;
  font-weight: var(--orgx-font-weight-medium);
  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:            var(--orgx-space-fluid-xl);
  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: var(--orgx-space-fluid-md);
}

.orgx-join__org-text {
  font-size:     clamp(0.95rem, 1.15vw, 1.05rem);
  line-height:   1.8;
  color:         var(--orgx-color-text-secondary);
  margin:        0 0 var(--orgx-space-fluid-xl);
}

/* 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: var(--orgx-space-fluid-md);
}

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

.orgx-join__org-item p {
  font-size:   0.92rem;
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  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:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-disabled);
  margin:         0 0 14px;
}

.orgx-expertise__nav {
  list-style:  none;
  margin:      0;
  padding:     0;
  border-left: 1px solid var(--orgx-color-border);
}

.orgx-expertise__nav li { margin: 0; }

.orgx-expertise__nav-link {
  display:      block;
  padding:      8px 0 8px 16px;
  font-size:    0.82rem;
  font-weight:  var(--orgx-font-weight-regular);
  color:        var(--orgx-color-text-tertiary);
  border-left:  2px solid transparent;
  margin-left:  -1px;
  line-height:  1.4;
  transition:   color var(--orgx-duration-fast) ease, border-color var(--orgx-duration-fast) ease;
}

.orgx-expertise__nav-link:hover {
  color:        var(--orgx-color-text-primary);
  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:  var(--orgx-font-weight-medium);
}

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

.orgx-expertise__nav-desc {
  display:     block;
  font-size:   0.72rem;
  line-height: var(--orgx-line-height-heading);
  color:       var(--orgx-color-text-disabled);
  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:    var(--orgx-font-weight-regular);
  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);
}

/* Card title accent — these cards dropped their 01/02/… index number,
   so the title itself carries the green accent instead. */
.orgx-expertise__item h3 {
  color: var(--color-green);
}

/* 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:   var(--orgx-font-weight-regular);
  line-height:   var(--orgx-line-height-body-lg);
  color:         #fff;
  margin:        0 0 var(--orgx-space-fluid-md);
}

/* ── 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 var(--orgx-color-border-strong);
    border-left:  1px solid var(--orgx-color-border-strong);
    border-radius: var(--orgx-radius-pill);
    font-size:    0.78rem;
    white-space:  nowrap;
    color:        var(--orgx-color-text-tertiary);
  }

  .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:       var(--orgx-color-text-secondary);
}

.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:       var(--orgx-color-text-secondary);
}

.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;
  padding:            clamp(24px, 2.5vw, 36px); /* was unset — matches sibling .orgx-service__step; see DESIGN-SYSTEM-CHANGELOG.md */
  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%);
  transition:         border-color var(--orgx-duration-default) ease,
                      box-shadow var(--orgx-duration-default) ease,
                      transform var(--orgx-duration-default) ease;
}

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

.orgx-service__card-tag {
  display:         inline-flex;
  align-self:      flex-start;
  font-size:       0.70rem;
  font-weight:     var(--orgx-font-weight-semibold);
  letter-spacing:  var(--orgx-letter-spacing-label);
  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:   var(--orgx-radius-pill);
  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:       var(--orgx-color-text-secondary);
}

.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:           var(--orgx-space-fluid-md);
  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-radius: var(--orgx-radius-lg);
  align-items:   start;
  transition:    border-color var(--orgx-duration-default) ease,
                 box-shadow var(--orgx-duration-default) ease,
                 transform var(--orgx-duration-default) ease;
}

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

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

.orgx-service__step-body h3 {
  font-size:   var(--orgx-font-size-card-title-fluid);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  color:       #fff;
  margin:      0 0 6px;
}

.orgx-service__step-subtitle {
  font-size:      0.70rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  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:       var(--orgx-color-text-secondary);
}

.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) var(--orgx-space-fluid-md);
  background:    var(--orgx-color-surface);
  border:        1px solid var(--orgx-color-border);
  border-radius: var(--orgx-radius-md);
  font-size:     0.92rem;
  font-weight:   var(--orgx-font-weight-regular);
  line-height:   1.4;
  color:         var(--orgx-color-text-secondary);
  transition:    border-color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) 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) var(--orgx-space-fluid-md);
  background:     var(--orgx-color-surface);
  border:         1px solid var(--orgx-color-border);
  border-radius:  var(--orgx-radius-dense);
  transition:     border-color var(--orgx-duration-default) ease, background var(--orgx-duration-default) 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: var(--orgx-line-height-compact);
}

.orgx-service__deliver-card p {
  margin:      0;
  font-size:   0.92rem;
  line-height: 1.65;
  color:       var(--orgx-color-text-secondary);
}

/* ── 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: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-body);
  color:       var(--orgx-color-text-primary);
  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:    var(--orgx-font-weight-medium);
  letter-spacing: 0.05em;
  color:          var(--orgx-color-text-secondary);
  background:     var(--orgx-color-surface);
  border:         1px solid var(--orgx-color-border-strong);
  border-radius:  var(--orgx-radius-pill);
  cursor:         pointer;
  transition:     color var(--orgx-duration-fast) ease, border-color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) 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:   var(--orgx-radius-xl);
  border:          1px solid var(--orgx-color-border);
  background:      var(--orgx-color-surface);
  backdrop-filter: blur(6px);
  overflow:        hidden;
  position:        relative;
  opacity:         0;
  transform:       translateY(10px);
  transition:      transform var(--orgx-duration-default) ease, border-color var(--orgx-duration-default) ease,
                   box-shadow var(--orgx-duration-default) 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 var(--orgx-duration-default) ease;
  pointer-events: none;
}

.orgx-post-card:hover {
  transform:    translateY(var(--orgx-hover-lift));
  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:     var(--orgx-filter-photo-cool);
  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:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  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:  var(--orgx-radius-pill);
  padding:        3px 12px;
}

/* Title */
.orgx-post-card__title {
  font-size:   var(--orgx-font-size-card-title-fluid);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  margin:      0;
}

.orgx-post-card__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) 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:       var(--orgx-color-text-tertiary);
  margin:      0;
  flex:        1;
}

/* Meta: date + read time */
.orgx-post-card__meta {
  display:  flex;
  gap:      12px;
  font-size: 0.72rem;
  color:    var(--orgx-color-text-disabled);
  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:       var(--orgx-color-text-tertiary);
  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:   var(--orgx-radius-pill);
  border:          1px solid var(--orgx-color-border-strong);
  background:      var(--orgx-color-surface);
  color:           var(--orgx-color-text-secondary);
  font-size:       0.82rem;
  text-decoration: none;
  transition:      all var(--orgx-duration-fast) 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:  var(--orgx-radius-lg);
  border:         1px solid var(--orgx-color-border);
  background:     var(--orgx-color-surface);
  transition:     transform var(--orgx-duration-default) ease, border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease;
}

.orgx-job-card:hover {
  transform:    translateY(var(--orgx-hover-lift));
  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:   var(--orgx-font-size-card-title-fluid);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  margin:      0;
}

.orgx-job-card__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) 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:       var(--orgx-color-text-tertiary);
  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:    var(--orgx-font-weight-semibold);
  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:  var(--orgx-radius-pill);
  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: var(--orgx-space-fluid-lg);
  display:       flex;
  flex-wrap:     wrap;
  gap:           var(--orgx-space-fluid-sm);
  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:    var(--orgx-font-weight-medium);
  letter-spacing: 0.05em;
  color:          var(--orgx-color-text-secondary);
  background:     var(--orgx-color-surface);
  border:         1px solid var(--orgx-color-border-strong);
  border-radius:  var(--orgx-radius-pill);
  cursor:         pointer;
  transition:     color var(--orgx-duration-fast) ease, border-color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) 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:         var(--orgx-color-text-secondary);
  background:    var(--orgx-color-surface)
                 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 var(--orgx-color-border-strong);
  border-radius: var(--orgx-radius-sm);
  cursor:        pointer;
  transition:    border-color var(--orgx-duration-fast) 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:       var(--orgx-color-text-disabled);
  background:  transparent;
  border:      none;
  cursor:      pointer;
  font-family: inherit;
  padding:     4px 8px;
  transition:  color var(--orgx-duration-fast) 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:         var(--orgx-color-text-disabled);
  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:  var(--orgx-radius-lg);
  border:         1px solid var(--orgx-color-border);
  background:     var(--orgx-color-surface);
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.orgx-single__meta-item {
  font-size: 0.75rem;
  color:     var(--orgx-color-text-disabled);
}

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

.orgx-single__meta-label {
  font-size:      0.64rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-disabled);
}

.orgx-single__meta-link {
  color:           var(--orgx-color-text-secondary);
  font-size:       0.80rem;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) 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:           var(--orgx-color-text-tertiary);
  text-decoration: none;
  background:      transparent;
  border:          none;
  cursor:          pointer;
  font-family:     inherit;
  padding:         0;
  transition:      color var(--orgx-duration-fast) ease;
}

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

/* Related posts (in sidebar) */
.orgx-single__related {
  margin-top:  var(--orgx-space-fluid-lg);
  padding-top: var(--orgx-space-fluid-md);
  border-top:  1px solid var(--orgx-color-border);
}

.orgx-single__related-label {
  display:        block;
  font-size:      0.64rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-disabled);
  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:           var(--orgx-color-text-secondary);
  font-size:       0.82rem;
  line-height:     1.4;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) ease;
}

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

.orgx-single__related-date {
  display:    block;
  font-size:  0.68rem;
  color:      var(--orgx-color-text-disabled);
  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:         var(--orgx-color-text-secondary);
}

/* ── 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:   var(--orgx-font-size-page-title);
  font-weight: var(--orgx-font-weight-regular);
  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:       var(--orgx-color-text-secondary);
}

.orgx-prose h2,
.orgx-prose h3,
.orgx-prose h4 {
  color:       #fff;
  font-weight: var(--orgx-font-weight-medium);
  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: var(--orgx-font-weight-semibold); }

.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:         var(--orgx-color-text-secondary);
}

.orgx-prose img {
  max-width:     100%;
  height:        auto;
  border-radius: var(--orgx-radius-md);
  margin:        1em 0;
}

.orgx-prose figcaption {
  font-size:  0.78rem;
  color:      var(--orgx-color-text-disabled);
  text-align: center;
  margin-top: 6px;
}

.orgx-prose hr {
  border:     none;
  border-top: 1px solid var(--orgx-color-border);
  margin:     2em 0;
}

.orgx-prose pre {
  background:    var(--orgx-color-surface);
  border:        1px solid var(--orgx-color-border);
  border-radius: var(--orgx-radius-sm);
  padding:       1em 1.2em;
  overflow-x:    auto;
  font-size:     0.85rem;
  line-height:   var(--orgx-line-height-body-lg);
  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:  var(--orgx-radius-lg);
  border:         1px solid var(--orgx-color-border);
  background:     var(--orgx-color-surface);
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.orgx-job-single__kicker {
  font-size:      0.64rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  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, centres both axes. The copy block
   (.orgx-hero__slides) is centred horizontally here via flexbox — its
   midpoint always sits at the true horizontal centre of the hero, at any
   viewport width, with no per-breakpoint offset. Text inside the block
   stays left-aligned (see .orgx-hero__slide below); only the block itself
   is centred. --hero-copy-width is the single source of truth for that
   block's width, shared with .orgx-hero__slides so the X's formula below
   can derive the copy's exact left edge from the same value. */
.orgx-hero--home {
  --hero-copy-width: min(640px, 88vw);
  /* Visual distance between the X and the copy's left edge. The X's own
     rendered width is driven mostly by viewport HEIGHT (see .orgx-hero__x
     sizing — background-size:contain against a height(vh)-led box), so it
     stays roughly 650-780px even as the viewport narrows from 1600px down
     to 768px (tablets are proportionally tall) — a vw-scaled gap alone
     would shrink exactly where the X does not, and let it drift under the
     copy. 55vw tracks that flat middle band closely enough; the 500px cap
     stops it growing needlessly on very wide screens, and the 250px floor
     stops it collapsing to near-zero on phones, where the X's own width
     shrinks with the viewport instead (crops off-screen, never overlaps). */
  --hero-x-copy-gap: clamp(250px, 55vw, 500px);
}

/* Below ~900px the 250px gap floor above pushes the X far enough left
   that only empty margin around the graphic's own right edge remains
   on-screen — none of the actual diagonal strokes. Shrinking the floor
   (and the vw-tracking curve with it) lets a real, visible slice of the
   X sit on screen instead of vanishing entirely, at the cost of sitting
   a bit closer to the copy — an acceptable trade below this width. */
@media (max-width: 900px) {
  .orgx-hero--home {
    --hero-x-copy-gap: clamp(120px, 40vw, 350px);
  }
}

@media (max-width: 580px) {
  .orgx-hero--home {
    --hero-x-copy-gap: clamp(60px, 30vw, 220px);
  }
}

.orgx-hero--home .orgx-hero__content {
  flex:             1;
  display:          flex;
  flex-direction:   column;
  align-items:      center;  /* centres the copy block; text inside stays left-aligned */
  justify-content:  center;
  padding-top:      calc(var(--nav-h) + clamp(20px, 3.5vh, 48px) - 20px); /* -20px: shifts the whole flex-centred block up */
  padding-bottom:   0;
  height:           auto;
  max-width:        none;
  padding-inline:   0;
}

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

/* Below ~900px the X sits close enough behind the copy (see the reduced
   --hero-x-copy-gap above) that full opacity fights with text legibility
   — dialled back a little at each step down, on top of the existing
   text-shadow the copy already carries. */
@media (max-width: 900px) {
  .orgx-hero--home .orgx-hero__x { opacity: 0.6; }
}

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

/* The shared .orgx-hero__x sizing (base rule, used by every hero variant)
   caps at 1900px — deliberately left untouched for those other variants.
   On the homepage specifically that cap reads oversized on very large
   screens, so it's brought down a notch here rather than lowering the
   shared cap everywhere. */
@media (min-width: 1601px) {
  .orgx-hero--home .orgx-hero__x {
    width:  min(1500px, 78vw);
    height: min(1500px, 100vh);
  }
}

/* Homepage left-X: positioned --hero-x-copy-gap to the left of the copy
   block's own left edge (50% of the hero, minus half the copy's width) —
   one shared composition, not two independently positioned objects. As
   the viewport narrows, the copy's centred midpoint (and therefore its
   left edge) moves left with it, and the X follows by the same amount,
   so the gap never drifts; it only crops further off the left edge. */
.orgx-hero--home.orgx-hero--x-left .orgx-hero__x {
  top:  calc(50% - 75px);
  left: calc(50vw - (var(--hero-copy-width) / 2) - var(--hero-x-copy-gap));
}

/* ── 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 — all
   3 slides share this one box, so none of them can change the carousel's
   rendered height. Width narrowed and height increased (was
   min(860px,90vw) / clamp(190px,24vh,250px)) for the left-aligned layout
   with a stacked, two-button CTA group; needs a visual QA pass. */
.orgx-hero__slides {
  position:   relative;
  width:      var(--hero-copy-width);
  height:     clamp(280px, 34vh, 340px);
}

/* Each slide fills the reserved box above and centres its own content
   vertically with flexbox (was top:50%/left:50%/transform:translate — a
   centring trick that also horizontally centred the slide, which doesn't
   work for left-aligned content). No new keyframes: opacity is still
   driven entirely by the existing .orgx-hero__slide--1/2/3 animations
   below, which target this same class. */
.orgx-hero__slide {
  position:        absolute;
  inset:           0;
  width:           100%;
  height:          100%;
  display:         flex;
  flex-direction:  column;
  justify-content: center;
  align-items:     flex-start;
  text-align:      left;
  opacity:         0;
  /* Base/fallback state only — the animations below drive the real value
     per-slide via keyframes. Without this, all 3 slides (stacked via
     inset:0 so they can cross-fade) stay fully interactive at all times,
     and since they share no z-index, the LAST one in the DOM (slide 3)
     always sits on top and silently intercepts clicks/hovers meant for
     slide 1 or 2, regardless of which is actually visible. */
  pointer-events:  none;
}

.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. Opacity values/timing unchanged — only
   pointer-events added at the same keyframe stops, so the slide is only
   clickable while it's actually the visible one. */
@keyframes orgxHeroText1 {
  0%   { opacity: 0; pointer-events: none; }
  4%   { opacity: 1; pointer-events: auto; }
  28%  { opacity: 1; pointer-events: auto; }
  32%  { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}

/* Slide 2: visible ~8.6 – 14.4s */
@keyframes orgxHeroText2 {
  0%   { opacity: 0; pointer-events: none; }
  32%  { opacity: 0; pointer-events: none; }
  36%  { opacity: 1; pointer-events: auto; }
  60%  { opacity: 1; pointer-events: auto; }
  64%  { opacity: 0; pointer-events: none; }
  100% { opacity: 0; pointer-events: none; }
}

/* Slide 3: visible ~16.3 – 23s */
@keyframes orgxHeroText3 {
  0%   { opacity: 0; pointer-events: none; }
  64%  { opacity: 0; pointer-events: none; }
  68%  { opacity: 1; pointer-events: auto; }
  96%  { opacity: 1; pointer-events: auto; }
  100% { opacity: 0; pointer-events: none; }
}

/* The old 20px "shift lower than geometric center" offset used top:calc(50%+20px)
   on .orgx-hero__slide, which no longer applies now that each slide centres
   itself with flexbox (justify-content:center) instead of top/transform —
   removed rather than left as dead/conflicting CSS. */

/* Slide typography — homepage-specific scale */
.orgx-hero--home .orgx-hero__title {
  font-size:   var(--orgx-font-size-hero-title-home);
  font-weight: var(--orgx-font-weight-regular);
  line-height: 1.2;
  color:       #fff;
  margin:      0 0 1rem;   /* was 0.7rem — slightly more room for the now-longer, left-aligned titles */
  text-align:  left;       /* was center */
  max-width:   none;
}

/* Highlighted phrase within a hero title — one per slide, existing ORGX
   green only, no inline styles. */
.orgx-hero__title-accent {
  color: var(--color-green);
}

.orgx-hero--home .orgx-hero__subtitle {
  font-size:   clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: var(--orgx-font-weight-regular);
  color:       var(--orgx-color-text-primary); /* was var(--color-green) — subtitles are now white (~90% white token) per spec, not green */
  line-height: var(--orgx-line-height-body);
  text-align:  left;       /* was center */
  margin:      0;
  max-width:   none;
  font-style:  normal;
}

/* CTA group — sits inside each slide, fades with it automatically since
   it's a child of .orgx-hero__slide (no new animation rules needed).
   Row layout, left-aligned — the two buttons sit side by side on desktop.
   flex-wrap is the mobile fallback: if both buttons don't fit on one line,
   the second wraps to its own line automatically, with no extra breakpoint
   needed ("stack only when necessary for usability"). */
.orgx-hero__slide-ctas {
  display:         flex;
  flex-direction:  row;
  flex-wrap:       wrap;
  align-items:     center;
  gap:             var(--orgx-space-4);
  margin-top:      clamp(1.2rem, 2.4vw, 1.75rem);
}

/* Hero-specific button treatment: more explicit/visible than the sitewide
   default, scoped to the hero only via this ancestor selector — same
   .orgx-button classes and markup, no duplicate button family. Transition
   property itself is inherited from .orgx-button--primary/--secondary
   above (var(--orgx-duration-slow)); only colour/background/border/transform
   values are overridden here, reusing the existing --orgx-hover-lift token
   instead of the sitewide scale(1.05) hover. */
.orgx-hero__slide-ctas .orgx-button--primary {
  background:   rgba(147, 192, 39, 0.16);
  border-color: rgba(147, 192, 39, 0.55);
  color:        #fff;
}
.orgx-hero__slide-ctas .orgx-button--primary i { color: #fff; }
.orgx-hero__slide-ctas .orgx-button--primary:hover {
  background:   rgba(147, 192, 39, 0.26);
  border-color: rgba(147, 192, 39, 0.85);
  color:        #fff;
  transform:    translateY(var(--orgx-hover-lift));
}
.orgx-hero__slide-ctas .orgx-button--primary:hover i { color: #fff; }

.orgx-hero__slide-ctas .orgx-button--secondary {
  background:   rgba(7, 10, 15, 0.35);  /* dark translucent — reuses the hero's own near-black (--color-bg) tone */
  border-color: rgba(255, 255, 255, 0.65);
  color:        #fff;
}
.orgx-hero__slide-ctas .orgx-button--secondary i { color: #fff; }
.orgx-hero__slide-ctas .orgx-button--secondary:hover {
  background:   rgba(7, 10, 15, 0.5);
  border-color: rgba(255, 255, 255, 0.92);
  color:        #fff;
  transform:    translateY(var(--orgx-hover-lift));
}
.orgx-hero__slide-ctas .orgx-button--secondary:hover i { color: #fff; }

/* .orgx-hero__home-cta: no longer used on the homepage (each slide now
   carries its own CTA pair via .orgx-hero__slide-ctas above) — left in
   place rather than deleted, since removing CSS was outside this task's
   content-only scope. Safe to remove in a future pass. */
.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:          var(--orgx-color-text-tertiary);
  font-size:      0.74rem;
  font-weight:    var(--orgx-font-weight-medium);
  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 {
    /* was clamp(90px, 18vh, 130px) originally — increased for the stacked,
       two-button CTA group and because titles/subtitles are more likely to
       wrap to 2 lines at this width; needs a visual QA pass. */
    height: clamp(320px, 46vh, 380px);
  }
}

@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; }
  /* pointer-events:auto added — animation:none above means the keyframes
     that normally grant slide 1 interactivity never run, so it must be
     restored explicitly here or its buttons become unreachable. */
  .orgx-hero__slide--1    { opacity: 1; pointer-events: auto; }
}

/* ── Homepage intro — "how we work" editorial section ───────────────────
   Human counterpart to the hero above: one composition where copy sits in
   front of real ORGX photography (not beside it), three editorial
   principles, one closing belief. No cards, no X. ──────────────────────

   .orgx-home-intro__composition is the shared relative container: the
   photo is absolutely positioned inside it and reaches left, underneath
   where the copy sits, instead of occupying its own separate column. The
   copy's own box has no background, so wherever it overlaps the photo's
   (heavily faded, near-transparent-to-dark there) left edge, the photo
   shows through around the letterforms rather than being blocked by a
   panel — this is what makes the two feel like one canvas instead of
   "text | gap | photo". */

.orgx-section--home-intro {
  padding-top:    clamp(56px, 7vw, 100px);
  padding-bottom: clamp(72px, 9vw, 128px);
}

/* ── Composition: copy in front of photography ──────────────────────── */

/* .orgx-home-intro__composition IS the centred editorial container now —
   text and photo are positioned relative to this one box (max-width:
   --width-broad, margin-inline:auto), so "copy + photo" reads as a
   single centred unit instead of two independently-placed halves.
   --width-broad (not --width-section) so this section uses more of the
   viewport, per the homepage-wide width-rhythm pass — same broadened
   width as .orgx-home-outcomes__layout above it. */
.orgx-home-intro__composition {
  position:        relative;
  isolation:        isolate; /* local stacking context: media(0) / copy(2) */
  overflow:         hidden;  /* clips the photo to the composition's own box — no page overflow */
  display:          flex;
  flex-direction:   column;
  justify-content:  center;
  max-width:        var(--width-broad);
  margin-inline:    auto;
  min-height:       clamp(320px, 28vw, 420px);
}

/* Text sits inside the composition with its own gutter; stays left-aligned
   internally (this is not about centring the text itself). */
.orgx-home-intro__top {
  position:       relative;
  z-index:        2;
  padding-inline: var(--wrap-pad);
  margin-top:     clamp(8px, 1.2vw, 20px);
}

/* Comfortable editorial reading width — no wider than it needs to be. */
.orgx-home-intro__copy {
  max-width: 460px;
}

/* Heading size is derived from the hero title token (x0.85) rather than its
   own clamp: this guarantees it can never out-size the homepage hero title
   above it at any viewport width, instead of hoping two independent clamp
   curves never cross. text-shadow matches .orgx-hero__title's own value —
   the copy now sometimes sits over photography, not flat background only,
   so it needs the same legibility precedent the hero already established. */
.orgx-home-intro__heading {
  font-size:      calc(var(--orgx-font-size-hero-title-home) * 0.85);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.45);
  margin:         0 0 clamp(20px, 2.4vw, 28px);
}

.orgx-home-intro__heading-accent {
  color: var(--color-green);
}

.orgx-home-intro__lead {
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
  margin:      0; /* width is already constrained by .orgx-home-intro__copy */
}

/* Photograph: absolutely positioned behind the copy, inside the same
   centred composition box (see above) — left:38% (was 45%, was 52%
   before that) pulls the box further left each pass so more of it sits
   in the fade behind the copy, reading as a background layer the text
   partly sits over rather than a photo beside the text. right:0 sits
   exactly at the composition's own edge (no bleed) — it naturally reads
   as reaching a little further than the principles/closing text below,
   since those have their own inset padding and this does not.

   top is deliberately 0, not a negative offset: a negative top would push
   the start of the top fade above this element's own overflow:hidden clip
   line, clipping off the most-transparent part of the fade and leaving
   only an already-partway-opaque remainder visible — that read as a hard
   edge no matter how the mask percentages were tuned. bottom:4% has no
   such issue (it only shortens the box, it doesn't clip the fade), so the
   "photo sits higher/shorter" asymmetry is kept there. No border, no
   radius, no shadow: it stays a background layer, never a visible
   rectangle. */
.orgx-home-intro__media {
  position:   absolute;
  top:        0;
  right:      0;
  bottom:     1%;
  left:       30%;
  z-index:    0;
  background: var(--color-bg);
  /* Left/right fade lives here, on the container, not on the img — see the
     img rule below for why the two are split across container/child
     rather than combined with mask-composite on one element.

     left/bottom keep being pulled out further each pass (52%→45%→38%→30%,
     8%→4%→1%) so the photo reads more like a background layer the text
     sits partly over, in the fade — the mask stops below are recalculated
     each time (were 44/85, then 50/87) so the sharp/opaque window stays
     anchored at the same absolute position: box width grew from 62% to
     70% of the composition, so the same absolute opaque band (~69–92%)
     is now ~56–88% of this wider box. */
  mask-image:          linear-gradient(to right, transparent 0%, black 56%, black 88%, transparent 100%);
  -webkit-mask-image:  linear-gradient(to right, transparent 0%, black 56%, black 88%, transparent 100%);
}

/* Filter is deliberately NOT the sitewide --orgx-filter-photo-cool token
   (full grayscale + hue-rotate) — this photo's people and ORGX screen are
   the point, so only brightness/contrast/saturation are eased back to sit
   inside the dark page; skin tones and the on-screen ORGX branding stay
   intact. No colour of any kind is added — any green crossing the photo
   is the page's own pre-existing atmosphere (the hero transition glow,
   which lives outside this section entirely) showing through, never a
   treatment applied here.

   Top/bottom (this element) and left/right (the parent, above) are two
   separate single-gradient masks rather than one two-layer mask with
   mask-composite — masking a parent that contains an already-masked child
   naturally multiplies the two alpha values during compositing, giving
   the same 4-sided result as an intersect composite without depending on
   mask-composite's real-world support. */
.orgx-home-intro__media img {
  position:            absolute;
  inset:               0;
  width:               100%;
  height:              100%;
  object-fit:          cover;
  object-position:     62% 34%; /* presenter, ORGX screen and table interaction in frame */
  filter:              contrast(108%) saturate(90%) brightness(80%);
  /* Top stop pulled in from 18% to 8% — at 18% the fade was dissolving
     the presenter's head near the top of the frame; a shorter top ramp
     keeps the fade but reaches full opacity soon enough to keep the head
     intact. Bottom stop (56%) unchanged. */
  mask-image:          linear-gradient(to bottom, transparent 0%, black 8%, black 56%, transparent 100%);
  -webkit-mask-image:  linear-gradient(to bottom, transparent 0%, black 8%, black 56%, transparent 100%);
}

/* ── Three principles — editorial beliefs, not cards ─────────────────────
   No backgrounds, no borders-as-boxes, no numbers, no icons: just titles
   and body copy on whitespace. max-width is --width-broad (not
   --width-section) so this row spans almost the full width of the
   broadened section container — a deliberate strong horizontal line
   under the narrower text/photo composition above it, not a repeat of
   the same width. */
.orgx-home-intro__principles {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(24px, 3vw, 40px);
  max-width:             var(--width-broad);
  margin:                clamp(20px, 2.8vw, 36px) auto 0;
  padding-inline:        var(--wrap-pad);
}

.orgx-home-intro__principle-title {
  font-size:   var(--orgx-font-size-h3);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  color:       #fff;
  margin:      0;
}

.orgx-home-intro__principle-rule {
  display:    block;
  width:      24px;
  height:     2px;
  background: var(--color-green);
  margin:     clamp(10px, 1.2vw, 14px) 0 clamp(10px, 1.2vw, 14px);
}

.orgx-home-intro__principle p {
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0;
}

/* ── Closing belief — quiet, not a card ──────────────────────────────── */
.orgx-home-intro__closing {
  max-width:      var(--width-broad);
  margin:         clamp(24px, 3vw, 40px) auto 0;
  padding-inline: var(--wrap-pad);
  padding-top:    clamp(20px, 2.5vw, 32px);
  font-size:      var(--orgx-font-size-h3);
  font-weight:    var(--orgx-font-weight-medium);
  color:          var(--orgx-color-text-primary);
  text-align:     center;
}

.orgx-home-intro__closing-accent {
  color: var(--color-green);
}

/* No separate laptop breakpoint here anymore — .orgx-home-intro__media's
   left is already a formula relative to --width-section, so it narrows
   the visible photo column continuously as the viewport shrinks, with no
   discrete jump to tune or maintain. */

/* ── Tablet (≤900px): side-by-side overlap no longer has room — stack
   instead, with the photo pulled up under the copy's last line so the
   two still read as one composition rather than two sequential blocks.
   It keeps a soft fade on every side (not just top/bottom) — full-bleed
   width does not mean a hard rectangle. */
@media (max-width: 900px) {
  .orgx-home-intro__composition {
    display:    block;
    min-height: 0;
    overflow:   visible;
  }

  .orgx-home-intro__media {
    position:      relative;
    top:           auto;
    right:         auto;
    bottom:        auto;
    left:          auto;
    width:         100%;
    aspect-ratio:  16 / 10;
    margin-top:    clamp(-56px, -6vw, -28px);
    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%);
  }

  .orgx-home-intro__media img {
    object-position:     62% 30%;
    mask-image:          linear-gradient(to bottom, transparent 0%, black 26%, black 62%, transparent 100%);
    -webkit-mask-image:  linear-gradient(to bottom, transparent 0%, black 26%, black 62%, transparent 100%);
  }

  .orgx-home-intro__principles {
    margin-top: clamp(24px, 4vw, 40px);
  }
}

/* ── Mobile: full hierarchy stack, principles single-column ──────────── */
@media (max-width: 600px) {
  .orgx-section--home-intro {
    padding-top:    clamp(20px, 5vw, 36px);
    padding-bottom: clamp(56px, 9vw, 100px);
  }

  .orgx-home-intro__copy {
    max-width: none;
  }

  .orgx-home-intro__media {
    aspect-ratio: 4 / 3;
    margin-top:   clamp(-32px, -5vw, -16px);
    mask-image:          linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    -webkit-mask-image:  linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
  }

  .orgx-home-intro__media img {
    object-position:     64% 26%; /* tighter crop: presenter, screen, nearest interaction */
    mask-image:          linear-gradient(to bottom, transparent 0%, black 20%, black 58%, transparent 100%);
    -webkit-mask-image:  linear-gradient(to bottom, transparent 0%, black 20%, black 58%, transparent 100%);
  }

  .orgx-home-intro__principles {
    grid-template-columns: 1fr;
    gap: clamp(28px, 6vw, 40px);
  }

  .orgx-home-intro__closing {
    text-align: left;
  }
}

/* ── Homepage: outcomes — broad analytical/typographic composition ──────
   Sits directly below the hero, before "how we work". Deliberately plain
   (no cards, no numbers): five outcomes as typography and whitespace.
   .orgx-home-outcomes__layout is the left/right editorial grid — heading
   + intro sit in the narrower left column, the five outcomes spread
   across the wider right column, so the section uses --width-broad
   instead of the narrower --width-section other homepage sections use. */

.orgx-section--home-outcomes {
  padding-top:    clamp(34px, calc(8vw - 30px), 82px);
  padding-bottom: clamp(80px, 9vw, 128px);
}

.orgx-home-outcomes__layout {
  max-width:      var(--width-broad);
  margin-inline:  auto;
  padding-inline: var(--wrap-pad);
}

.orgx-home-outcomes__head {
  max-width:  640px;
  margin:     0 auto clamp(40px, 5vw, 64px);
  text-align: center;
}

/* Derived from the same hero token as .orgx-home-intro__heading, at a
   smaller multiplier (0.8 vs 0.85) — guarantees this heading stays a
   visible tier below the "how we work" heading at every viewport,
   rather than tuning two independent clamp curves to never cross. */
.orgx-home-outcomes__heading {
  font-size:      calc(var(--orgx-font-size-hero-title-home) * 0.8);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  margin:         0 0 clamp(16px, 2vw, 24px);
}

.orgx-home-outcomes__heading-accent {
  color: var(--color-green);
}

.orgx-home-outcomes__intro {
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0;
}

.orgx-home-outcomes__icon {
  display: block;
  color:   var(--color-green);
  margin:  0 0 clamp(10px, 1.2vw, 16px);
}

.orgx-home-outcomes__icon svg {
  width:  clamp(24px, 2.2vw, 30px);
  height: clamp(24px, 2.2vw, 30px);
}

/* Five in a single row, scoped inside .orgx-home-outcomes__layout's
   right-hand column (no own max-width/centring — the layout grid above
   handles the section's overall width and gutter). Deliberately even,
   no 2/1/2 stagger. */
.orgx-home-outcomes__grid {
  list-style:      none;
  display:         grid;
  grid-template-columns: repeat(5, 1fr);
  column-gap:      clamp(10px, 1.4vw, 18px);
  row-gap:         clamp(32px, 4vw, 48px);
}

/* Card treatment, scoped to this component so homepage tuning (padding,
   gap) stays independent of other card components elsewhere in the
   design system. The glow lives only at the TOP edge — no border-colour
   shift or all-round box-shadow on hover, only ::before (a soft blurred
   wash bleeding down from the top) and ::after (a crisp top-edge line)
   fade in; sides and bottom stay completely neutral. */
.orgx-home-outcomes__item {
  position:      relative;
  overflow:      hidden;
  border-radius: var(--orgx-radius-lg);
  border:        1px solid var(--orgx-color-border);
  background:    var(--orgx-color-surface);
  padding:       clamp(14px, 1.4vw, 22px);
  transition:    transform var(--orgx-duration-default) ease;
}

/* Soft blurred glow, anchored to the top edge and fading downward —
   kept inside the card by the item's own overflow:hidden above. */
.orgx-home-outcomes__item::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           10%;
  right:          10%;
  height:         60%;
  background:     radial-gradient(ellipse at top, rgba(147, 192, 39, 0.30) 0%, transparent 75%);
  opacity:        0;
  transition:     opacity var(--orgx-duration-default) ease;
  pointer-events: none;
}

/* Crisp top-edge line on top of the soft wash above. */
.orgx-home-outcomes__item::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 var(--orgx-duration-default) ease;
  pointer-events: none;
}

.orgx-home-outcomes__item:hover {
  transform: translateY(var(--orgx-hover-lift));
}

.orgx-home-outcomes__item:hover::before,
.orgx-home-outcomes__item:hover::after {
  opacity: 1;
}

/* Sized down from --orgx-font-size-h3 specifically for this row: five
   narrow columns wrap a full h3 size too aggressively (2-4 words each),
   so this uses its own smaller clamp — still clearly a title (medium
   weight, white) relative to the smaller body copy below it, just not
   on the shared h3 scale other sections use for the same tag. */
.orgx-home-outcomes__title {
  font-size:   clamp(0.92rem, 1vw, 1.05rem);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  color:       #fff;
  margin:      0 0 clamp(6px, 0.8vw, 10px);
}

.orgx-home-outcomes__item p {
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0;
}

/* ── Laptop (≤1024px): five columns across the full section width get
   too narrow — drop to 3 (wrapping to a 3+2 arrangement) first, still
   clearly "side by side" rather than the old 2/1/2 stagger. */
@media (max-width: 1024px) {
  .orgx-home-outcomes__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── Tablet (≤900px): drop to 2 columns. */
@media (max-width: 900px) {
  .orgx-home-outcomes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Mobile: single column ────────────────────────────────────────────── */
@media (max-width: 600px) {
  .orgx-home-outcomes__grid {
    grid-template-columns: 1fr;
    row-gap: clamp(32px, 7vw, 44px);
  }
}

/* ── Homepage: latest insights — a horizontal strip, not another vertical
   centred block. Deliberately calmer/darker than the rest of the homepage
   so the post photography (not a new glow) carries the visual weight —
   no new .orgx-hero-transition glow is introduced for this section; it
   sits on the same flat --color-bg as everything else. The card itself
   reuses the existing (previously unused) .orgx-post-card component
   as-is — image, category pill, title, hover glow/lift — rather than
   inventing a new card treatment; only .orgx-home-insights__card adds
   the horizontal-strip sizing on top of it. */

.orgx-home-insights {
  padding-top:    clamp(40px, 5vw, 72px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.orgx-home-insights__head {
  display:         flex;
  align-items:     flex-end;
  justify-content: space-between;
  flex-wrap:       wrap;
  gap:             clamp(16px, 3vw, 40px);
  max-width:       var(--width-broad);
  margin:          0 auto clamp(28px, 3.5vw, 48px);
  padding-inline:  var(--wrap-pad);
}

/* Sized down from the section-title tokens used by the two sections
   above it — this heading is deliberately the smallest of the three
   homepage section headings (never larger than the hero title either,
   which those two tokens already guarantee by construction). */
.orgx-home-insights__heading {
  font-size:      clamp(1.3rem, 1.8vw, 1.7rem);
  font-weight:    var(--orgx-font-weight-medium);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  margin:         0 0 clamp(6px, 0.8vw, 10px);
}

.orgx-home-insights__intro {
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-body);
  color:       var(--orgx-color-text-secondary);
  margin:      0;
}

.orgx-home-insights__all {
  flex-shrink: 0;
  white-space: nowrap;
  margin-top:  0; /* .orgx-link's own margin-top:16px is for stacking under body copy; not wanted here */
}

/* ---- horizontal scroll track — same mask-fade/scroll-snap mechanics as
   .orgx-values__viewport/__track, renamed for this component. ────────── */

.orgx-home-insights__viewport {
  --gap: clamp(28px, 3.5vw, 44px);
  overflow-x:         auto;
  scroll-snap-type:   x mandatory;
  scrollbar-width:    none;
  max-width:          var(--width-broad);
  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-home-insights__viewport::-webkit-scrollbar { display: none; }

.orgx-home-insights__track {
  display:     flex;
  gap:         var(--gap);
  width:       max-content;
  list-style:  none;
  margin:      0;
  padding:     0;
}

/* Five across on desktop/laptop — width derived from the viewport's own
   available space (mirroring .orgx-values__card's technique), not a
   percentage of .orgx-home-insights__track, since the track is sized to
   max-content and percentages can't resolve against that. */
.orgx-home-insights__card {
  flex: 0 0 calc((min(var(--width-broad), 100vw) - 2 * var(--wrap-pad) - 4 * var(--gap)) / 5);
  scroll-snap-align: start;
  opacity:   1;   /* .orgx-post-card defaults to opacity:0 pending a .is-in
                     scroll-reveal class this homepage usage doesn't add via
                     JS — .is-in is applied statically in the markup instead,
                     but this belt-and-braces override keeps it visible even
                     if that class is ever dropped from the markup. */
  transform: none;
  /* Image + text read as one connected field again (border, subtle
     surface, top-edge glow line on hover) via the shared .orgx-post-card
     rules this class also carries. Corners: square on top (the image
     sits flush against the top edge, so a rounded top corner clips
     straight into the hover glow line sitting right at that edge),
     kept at the shared --orgx-radius-md on the bottom. */
  border-radius: 0 0 var(--orgx-radius-md) var(--orgx-radius-md);
}

/* No hover-lift here — the shared .orgx-post-card:hover translateY, on
   top of the image's own hover-scale, was what let the image render
   over the top border/glow line during the transition. Border-colour
   and box-shadow from that shared rule still apply; only the lift is
   cancelled. */
.orgx-home-insights__card:hover {
  transform: none;
}

/* Belt-and-braces: force the top-edge glow line above the image even if
   its hover transform gives it its own stacking context. */
.orgx-home-insights__card::after {
  z-index: 2;
}

.orgx-home-insights__card-link {
  display:         flex;
  flex-direction:  column;
  height:          100%;
  text-decoration: none;
  color:           inherit;
}

.orgx-home-insights__card-link:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 3px;
  border-radius:  inherit;
}

/* Same width, ~80% of the shared component's default 16:9 height
   (16/(9*0.8) = 20/9) — wider-looking, more cinematic than the default. */
.orgx-home-insights__card .orgx-post-card__image {
  aspect-ratio: 20 / 9;
}

.orgx-home-insights__card .orgx-post-card__body {
  padding: clamp(14px, 1.6vw, 20px);
  gap:     8px;
}

.orgx-home-insights__card .orgx-post-card__title {
  display:             -webkit-box;
  -webkit-line-clamp:  2;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  color:               var(--color-green);
  font-size:           0.95rem;
}

/* Supporting text from the "large" custom field (or the excerpt/content
   fallback) — clamped to 3 lines so a long field value can't make one
   card noticeably taller than its neighbours. */
.orgx-home-insights__card .orgx-post-card__excerpt {
  display:             -webkit-box;
  -webkit-line-clamp:  3;
  -webkit-box-orient:  vertical;
  overflow:            hidden;
  font-size:           0.8rem;
}

/* Images stay in full colour here — the shared .orgx-post-card__image
   default (--orgx-filter-photo-cool + 0.65 opacity, richer on hover) is
   the masonry/editorial-listing convention elsewhere; this strip wants
   the photography readable and colourful at rest. display:block closes
   off the classic "stray gap under an inline img" possibility so the
   photo fills its box with no sliver of the page background showing. */
.orgx-home-insights__card .orgx-post-card__image img {
  display: block;
  filter:  none;
  opacity: 1;
}

.orgx-home-insights__card:hover .orgx-post-card__image img {
  filter:    none;
  opacity:   1;
  transform: scale(1.04);
}

/* Card-level lift/border/glow come from the reused .orgx-post-card:hover
   rules (triggered by :hover bubbling up from the link inside it, same
   as elsewhere) — the title is green at rest now, so no separate
   hover-colour rewiring is needed for it any more. */

/* ── Laptop (≤1280px): still five across, just a narrower gap than the
   full desktop rhythm — kept generous rather than squeezed further, so
   the strip doesn't feel cramped at in-between widths. ───────────────── */
@media (max-width: 1280px) {
  .orgx-home-insights__viewport { --gap: clamp(20px, 2.5vw, 32px); }
}

/* ── Tablet (≤900px): 2-3 cards visible, rest peek/scroll. ────────────── */
@media (max-width: 900px) {
  .orgx-home-insights__card {
    flex-basis: calc((100vw - 2 * var(--wrap-pad) - var(--gap)) * 0.4);
  }
}

/* ── Mobile (≤600px): stacked, not scrolled — one column, full width. */
@media (max-width: 600px) {
  .orgx-home-insights__head {
    align-items: flex-start;
  }

  .orgx-home-insights__viewport {
    overflow-x:         visible;
    -webkit-mask-image: none;
    mask-image:         none;
  }

  .orgx-home-insights__track {
    flex-direction: column;
    width:          auto;
    /* Wider than the horizontal --gap — stacked posts need real vertical
       separation, not the same tight gutter used between side-by-side
       cards. */
    gap:            clamp(32px, 9vw, 48px);
  }

  .orgx-home-insights__card {
    flex-basis:        auto;
    width:              100%;
    scroll-snap-align: none;
  }
}

/* ── Homepage: Digital Services — hybrid consultancy ─────────────────────
   Sits between "how we work" (human/photographic) and "who we work with"
   (the X). Reuses the existing .orgx-section--digital / __bg component
   (already used on 6 other page templates, never the homepage) for the
   subtle network-texture backdrop, rather than inventing a new one —
   this IS the theme's "digital section" pattern. Padding here overrides
   only .orgx-home-digital, not the shared .orgx-section--digital class,
   so those other pages are untouched. */

.orgx-home-digital {
  padding-top:    clamp(64px, 8vw, 112px);
  padding-bottom: clamp(64px, 8vw, 112px);
}

.orgx-home-digital__layout {
  position:       relative;
  z-index:        1; /* above .orgx-section--digital__bg (z-index:0) */
  display:        grid;
  grid-template-columns: minmax(0, 42%) minmax(0, 1fr);
  align-items:    center;
  column-gap:     clamp(40px, 6vw, 96px);
  max-width:      var(--width-broad);
  margin-inline:  auto;
  padding-inline: var(--wrap-pad);
}

/* Comfortable editorial reading width — same convention as the other
   homepage sections' copy columns. */
.orgx-home-digital__copy {
  max-width: 480px;
}

/* Derived from the same hero token as the outcomes section's heading, at
   the same 0.8 multiplier — guarantees this stays a visible tier below
   the hero title, comparable to (not larger than) the other major
   homepage section headings, without tuning independent clamp curves. */
.orgx-home-digital__heading {
  font-size:      calc(var(--orgx-font-size-hero-title-home) * 0.8);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  margin:         0 0 clamp(16px, 2vw, 24px);
}

.orgx-home-digital__heading-accent { color: var(--color-green); }

.orgx-home-digital__lead {
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0 0 clamp(16px, 2vw, 24px);
}

.orgx-home-digital__body {
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0 0 clamp(16px, 2vw, 24px);
}

.orgx-home-digital__closing {
  font-size:   var(--orgx-font-size-h3);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--orgx-color-text-primary);
  margin:      0 0 clamp(20px, 2.5vw, 32px);
}

.orgx-home-digital__closing-accent { color: var(--color-green); }

.orgx-home-digital__ctas {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--orgx-space-4);
}

.orgx-home-digital__visual {
  display:         flex;
  justify-content: center;
}

/* ── Digital dashboard visual ─────────────────────────────────────────────
   A faithful HTML/CSS rebuild of the live orbicul.com hero visualisation
   (.orb-hero__visual / .orb-dash and children), not a screenshot — real
   markup, real (if illustrative) data, so it reads as "a sophisticated
   digital interface emerging from the dark background" rather than a
   placed image. Two deliberate departures from the source for ORGX
   cohesion: the accent colour is ORGX green (not Orbicul's own lime —
   two different "brand greens" on one page would read as a mismatch),
   and the UI font is Raleway (not Inter), both mapped via the local
   custom properties below; the category colours (blue/amber/teal) and
   dark panel/border/shadow values are kept as authored, since those are
   the dashboard's own internal data-visualisation identity, not ORGX
   site chrome. Radii already coincide exactly with --orgx-radius-md/-xl,
   reused directly rather than by coincidence-only literal values. */
.orgx-digital-dash {
  --dash-accent:     var(--color-green);
  --dash-accent-rgb: 147, 192, 39;
  --dash-dim:        #62676E;
  --dash-muted:      #9EA3AA;
  --dash-text:       #EDEFF1;
  --dash-navy:       #0D0F12;
  --dash-panel:      rgba(13, 15, 18, 0.9);

  width:            100%;
  max-width:        480px;
  font-family:      var(--orgx-font-primary);
  background:       rgba(22, 24, 28, 0.82);
  backdrop-filter:  blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border:           1px solid var(--orgx-color-border);
  border-radius:    var(--orgx-radius-xl);
  padding:          22px;
  position:         relative;
  overflow:         hidden;
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.02),
    0 32px 80px rgba(0, 0, 0, 0.65),
    0 0 60px rgba(var(--dash-accent-rgb), 0.014);
}

.orgx-digital-dash::before {
  content:    '';
  position:   absolute;
  top: 0; left: 0; right: 0;
  height:     1px;
  background: linear-gradient(90deg, transparent 5%, rgba(var(--dash-accent-rgb), 0.42) 50%, transparent 95%);
}

.orgx-digital-dash__header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-bottom:   14px;
}

.orgx-digital-dash__label {
  font-size:      0.62rem;
  letter-spacing: 0.07em;
  color:          var(--dash-dim);
}

.orgx-digital-dash__live {
  display:        flex;
  align-items:    center;
  gap:            5px;
  font-size:      0.6rem;
  letter-spacing: 0.06em;
  color:          var(--dash-accent);
}

.orgx-digital-dash__dot {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--dash-accent);
}

/* Animations stay off until the section scrolls into view — see the
   IntersectionObserver script in front-page.php that adds .is-in. */
.orgx-digital-dash.is-in .orgx-digital-dash__dot {
  animation: orgx-digital-pulse-glow 2s ease-in-out infinite;
}

.orgx-digital-dash__kpis {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   1px;
  background:            var(--orgx-color-border);
  border-radius:         var(--orgx-radius-md);
  overflow:              hidden;
  margin-bottom:         16px;
}

.orgx-digital-dash__kpi {
  background:     var(--dash-panel);
  padding:        10px 12px;
  display:        flex;
  flex-direction: column;
  gap:            2px;
}

.orgx-digital-dash__kpi-label {
  font-size:      0.52rem;
  letter-spacing: 0.06em;
  color:          var(--dash-dim);
}

.orgx-digital-dash__kpi-val {
  font-size:      0.95rem;
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--dash-text);
  letter-spacing: -0.01em;
  line-height:    1.1;
}

.orgx-digital-dash__kpi-delta { font-size: 0.56rem; margin-top: 1px; }

.orgx-digital-dash__kpi-up      { color: var(--dash-accent); }
.orgx-digital-dash__kpi-neutral { color: var(--dash-muted); }

.orgx-digital-dash__main {
  display:        flex;
  gap:            18px;
  align-items:    flex-start;
  margin-bottom:  16px;
}

.orgx-digital-dash__orb-wrap { flex-shrink: 0; text-align: center; }

.orgx-digital-dash__orb {
  position: relative;
  width:    100px;
  height:   100px;
  margin:   0 auto 6px;
}

.orgx-digital-dash__orb-ring {
  position:      absolute;
  border-radius: 50%;
  border:        1px solid;
}
.orgx-digital-dash__orb-ring--1 {
  inset:       0;
  border-color: rgba(var(--dash-accent-rgb), 0.38);
  box-shadow:  0 0 8px rgba(var(--dash-accent-rgb), 0.07);
}
.orgx-digital-dash__orb-ring--2 {
  inset:       12px;
  border-color: rgba(var(--dash-accent-rgb), 0.18);
}
.orgx-digital-dash__orb-ring--3 {
  inset:       24px;
  border-color: rgba(var(--dash-accent-rgb), 0.09);
}

.orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--1 { animation: orgx-digital-spin 24s linear infinite; }
.orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--2 { animation: orgx-digital-spin-rev 38s linear infinite; }
.orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--3 { animation: orgx-digital-spin 56s linear infinite; }

.orgx-digital-dash__orb-center {
  position:        absolute;
  inset:           30px;
  border-radius:   50%;
  background:      radial-gradient(circle, rgba(22, 24, 28, 0.9) 60%, var(--dash-navy) 100%);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
}

.orgx-digital-dash__score {
  font-size:   1.2rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--dash-accent);
  line-height: 1;
}

.orgx-digital-dash__score-sub { font-size: 0.48rem; color: var(--dash-dim); margin-top: 2px; }

.orgx-digital-dash__orb-label { font-size: 0.54rem; color: var(--dash-dim); letter-spacing: 0.04em; margin: 0; }

.orgx-digital-dash__metrics { flex: 1; display: flex; flex-direction: column; gap: 10px; padding-top: 2px; }

.orgx-digital-dash__metric { display: flex; align-items: center; gap: 8px; }

.orgx-digital-dash__metric-name { font-size: 0.6rem; color: var(--dash-muted); width: 68px; flex-shrink: 0; }

.orgx-digital-dash__bar-track {
  flex:          1;
  height:        3px;
  background:    rgba(255, 255, 255, 0.05);
  border-radius: 2px;
  overflow:      hidden;
}

.orgx-digital-dash__bar {
  height:        100%;
  border-radius: 2px;
  background:    linear-gradient(90deg, rgba(var(--dash-accent-rgb), 0.5), var(--dash-accent));
  width:         0;
}

.orgx-digital-dash.is-in .orgx-digital-dash__bar {
  animation: orgx-digital-bar-in 1.4s 0.7s ease forwards;
}

.orgx-digital-dash__metric-val { font-size: 0.6rem; font-weight: var(--orgx-font-weight-semibold); color: var(--dash-accent); width: 18px; text-align: right; }

.orgx-digital-dash__sparkline {
  display:          flex;
  align-items:      center;
  gap:              10px;
  padding:          11px 0;
  border-top:       1px solid var(--orgx-color-border);
  border-bottom:    1px solid var(--orgx-color-border);
  margin-bottom:    14px;
}

.orgx-digital-dash__sp-label { font-size: 0.54rem; color: var(--dash-dim); flex-shrink: 0; }

.orgx-digital-dash__sp-bars {
  flex:            1;
  display:         flex;
  align-items:     flex-end;
  gap:             2px;
  height:          22px;
}

.orgx-digital-dash__sp-bars span {
  flex:          1;
  height:        var(--h, 50%);
  background:    rgba(var(--dash-accent-rgb), 0.18);
  border-radius: 2px 2px 0 0;
}

.orgx-digital-dash__sp-bars span:last-child { background: rgba(var(--dash-accent-rgb), 0.62); }

.orgx-digital-dash__sp-val { font-size: 0.6rem; font-weight: var(--orgx-font-weight-semibold); color: var(--dash-accent); flex-shrink: 0; }

.orgx-digital-dash__cards {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   7px;
}

.orgx-digital-dash__card {
  background:     var(--dash-panel);
  border:         1px solid var(--orgx-color-border);
  border-radius:  6px;
  padding:        8px 6px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            5px;
  font-size:      0.54rem;
  color:          var(--dash-dim);
  text-align:     center;
}

.orgx-digital-dash__card-dot { width: 6px; height: 6px; border-radius: 50%; }
.orgx-digital-dash__card-dot[data-c="lime"]  { background: var(--dash-accent); }
.orgx-digital-dash__card-dot[data-c="blue"]  { background: #4B9EE8; }
.orgx-digital-dash__card-dot[data-c="amber"] { background: #E8A84B; }
.orgx-digital-dash__card-dot[data-c="teal"]  { background: #4BE8B0; }

.orgx-digital-dash__metric[data-c="blue"]  .orgx-digital-dash__metric-val { color: #4B9EE8; }
.orgx-digital-dash__metric[data-c="amber"] .orgx-digital-dash__metric-val { color: #E8A84B; }
.orgx-digital-dash__metric[data-c="teal"]  .orgx-digital-dash__metric-val { color: #4BE8B0; }

.orgx-digital-dash__metric[data-c="blue"]  .orgx-digital-dash__bar { background: linear-gradient(90deg, rgba(75, 158, 232, 0.4), #4B9EE8); }
.orgx-digital-dash__metric[data-c="amber"] .orgx-digital-dash__bar { background: linear-gradient(90deg, rgba(232, 168, 75, 0.4), #E8A84B); }
.orgx-digital-dash__metric[data-c="teal"]  .orgx-digital-dash__bar { background: linear-gradient(90deg, rgba(75, 232, 176, 0.4), #4BE8B0); }

@keyframes orgx-digital-spin     { to { transform: rotate(360deg);  } }
@keyframes orgx-digital-spin-rev { to { transform: rotate(-360deg); } }

@keyframes orgx-digital-pulse-glow {
  0%, 100% { box-shadow: 0 0 10px rgba(var(--dash-accent-rgb), 0.16); }
  50%      { box-shadow: 0 0 22px rgba(var(--dash-accent-rgb), 0.16), 0 0 48px rgba(var(--dash-accent-rgb), 0.09); }
}

@keyframes orgx-digital-bar-in {
  from { width: 0; }
  to   { width: var(--w, 100%); }
}

@media (prefers-reduced-motion: reduce) {
  .orgx-digital-dash__dot,
  .orgx-digital-dash__orb-ring--1,
  .orgx-digital-dash__orb-ring--2,
  .orgx-digital-dash__orb-ring--3,
  .orgx-digital-dash.is-in .orgx-digital-dash__dot,
  .orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--1,
  .orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--2,
  .orgx-digital-dash.is-in .orgx-digital-dash__orb-ring--3 {
    animation: none;
  }
  .orgx-digital-dash__bar,
  .orgx-digital-dash.is-in .orgx-digital-dash__bar {
    animation: none;
    width:     var(--w, 100%);
  }
}

/* ── Laptop (≤1024px): scale down a notch rather than let the fixed
   480px card crowd a narrower right column — same idea the source site
   uses at its own tablet breakpoint. ─────────────────────────────────── */
@media (max-width: 1024px) {
  .orgx-digital-dash {
    transform:        scale(0.92);
    transform-origin: center top;
  }
}

/* ── Tablet (≤900px): text first, visual underneath — same breakpoint
   the other homepage sections switch out of their side-by-side layouts
   at. No cramped two-column squeeze. ─────────────────────────────────── */
@media (max-width: 900px) {
  .orgx-home-digital__layout {
    display: block;
  }

  .orgx-home-digital__copy {
    max-width: none;
  }

  .orgx-home-digital__visual {
    margin-top: clamp(32px, 5vw, 48px);
  }
}

/* ── 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:      var(--orgx-color-text-tertiary);
  font-size:  1.05rem;
  cursor:     pointer;
  padding:    8px;
  line-height: var(--orgx-line-height-compact);
  transition: color var(--orgx-duration-fast) ease, transform var(--orgx-duration-fast) ease;
}

.orgx-search-overlay__close:hover {
  color:     #fff;
  transform: rotate(90deg);
}

.orgx-search-overlay__label {
  display:        block;
  font-size:      0.70rem;
  font-weight:    var(--orgx-font-weight-semibold);
  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 var(--orgx-color-border-strong);
  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:    var(--orgx-font-weight-light);
  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: var(--orgx-line-height-compact);
  opacity:     0.65;
  transition:  transform var(--orgx-duration-fast) ease, opacity var(--orgx-duration-fast) 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 var(--orgx-color-border);
}

.orgx-search-result:last-child { border-bottom: none; }

.orgx-search-result__type {
  font-size:      0.70rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--color-green);
}

.orgx-search-result__title {
  margin:      0;
  font-size:   clamp(1.05rem, 1.7vw, 1.45rem);
  font-weight: var(--orgx-font-weight-medium);
  line-height: 1.25;
}

.orgx-search-result__title a {
  color:           #fff;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) 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: var(--orgx-line-height-compact);
}

/* ─────────────────────────────────────────────────────────────────────────── */

.orgx-job-single__title {
  font-size:   clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: var(--orgx-font-weight-medium);
  line-height: 1.25;
  color:       #fff;
  margin:      0;
}

.orgx-job-single__intro {
  font-size:   0.88rem;
  line-height: 1.65;
  color:       var(--orgx-color-text-tertiary);
  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:           var(--orgx-color-text-tertiary);
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) ease;
}

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

/* Related jobs */
.orgx-job-single__related {
  margin-top:  var(--orgx-space-fluid-lg);
  padding-top: var(--orgx-space-fluid-md);
  border-top:  1px solid var(--orgx-color-border);
}

.orgx-job-single__related-label {
  display:        block;
  font-size:      0.64rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  text-transform: uppercase;
  color:          var(--orgx-color-text-disabled);
  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:           var(--orgx-color-text-secondary);
  font-size:       0.82rem;
  line-height:     1.4;
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) 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: var(--orgx-space-fluid-xl);
  border-top:  1px solid var(--orgx-color-border);
}

.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: var(--orgx-radius-input);
  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%;
  /* Percentage stops relative to hero height, which is content-driven
     (auto) and grows well past the ~320px min-height on large screens —
     a flat transparent top zone keeps the background image visible
     regardless of how tall the hero ends up. */
  background: linear-gradient(
    to bottom,
    transparent              0%,
    transparent             35%,
    rgba(7, 10, 15, 0.45)   62%,
    rgba(7, 10, 15, 0.82)   82%,
    #070a0f                 97%
  );
}

/* 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: var(--orgx-space-fluid-lg);
}

/* 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);
}

/* 5b — Accent word inside section titles, matching the <span> convention
   used on the other rebuilt pages (SMEs/Corporates/PE/What We Do). Scoped
   to this template's own section titles rather than the sitewide
   per-ID list those pages use, since these headings' ids are generated
   from the heading text at render time (orgx-s-{slug}) and can't be
   hardcoded into that list. */
.page-template-page-service .orgx-service__section .orgx-section__title span {
  color: var(--color-green);
}

/* 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: var(--orgx-space-fluid-lg);
}

.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:       var(--orgx-color-text-primary);
  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) {
  /* Fallback only (e.g. JS disabled) — orgx-pillars.js measures the
     sticky scene's actual content height on load/resize and sets this
     inline instead, sized to that content plus a fixed scroll-reveal
     runway, so the reveal pacing stays correct at any content length. */
  .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;
    /* min-height, not height: 100vh is the default "scene frame" size,
       but content taller than that (e.g. longer pillar copy) must be
       able to grow the frame instead of overflowing it — a sticky box
       has no scroll of its own, so a hard height here would just let
       overflowing content spill out and overlap whatever follows.
       orgx-pillars.js measures the actual content on load/resize and
       sets both this and .orgx-pillars' own height inline to match;
       this value is the fallback for that measurement. */
    min-height:     100vh;
    box-sizing:     border-box; /* padding inside the min-height */
    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: var(--orgx-font-weight-regular);
  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:    var(--orgx-font-weight-semibold);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  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: var(--orgx-font-weight-regular);
  line-height: var(--orgx-line-height-body);
  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:       var(--orgx-radius-xl);
  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 var(--orgx-duration-default) ease,
                       box-shadow var(--orgx-duration-default) 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(var(--orgx-hover-lift));
}

/* Keyboard focus */
.orgx-pillars__card:focus-visible {
  outline:        2px solid var(--color-green);
  outline-offset: 3px;
}

.orgx-pillars__card-title {
  font-size:   var(--orgx-font-size-card-title-compact);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
  margin:      0 0 clamp(6px, 0.7vw, 8px);
  line-height: var(--orgx-line-height-heading);
}

.orgx-pillars__card p {
  font-size:   clamp(0.85rem, 0.93vw, 0.94rem);
  line-height: 1.65;
  color:       var(--orgx-color-text-secondary);
  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 var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) 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:         var(--orgx-duration-default);
  --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:  var(--orgx-radius-pill);
  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:    var(--orgx-font-weight-medium);
  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:  var(--orgx-radius-pill);
  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:    var(--orgx-font-weight-semibold);
  letter-spacing: var(--orgx-letter-spacing-label);
  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: var(--orgx-font-weight-light);
}

.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: var(--orgx-radius-pill);
  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: var(--orgx-line-height-heading); width: 250px; }
.orgx-card[data-pos="2"] .orgx-card__title { font-size: 1rem;    line-height: var(--orgx-line-height-heading); color: #000; width: 100%; }
.orgx-card[data-pos="3"] .orgx-card__title { font-size: 1rem;    line-height: var(--orgx-line-height-heading); width: 380px; }
.orgx-card[data-pos="4"] .orgx-card__title { font-size: 1.6rem;  line-height: var(--orgx-line-height-heading); width: 100%; }
.orgx-card[data-pos="5"] .orgx-card__title { font-size: 1.6rem;  line-height: var(--orgx-line-height-heading); color: #000; width: 230px; }
.orgx-card[data-pos="6"] .orgx-card__title { font-size: 1rem;    line-height: var(--orgx-line-height-heading); 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: var(--orgx-radius-pill);
  padding:       0.55rem 1.8rem;
  cursor:        pointer;
  font-family:   inherit;
  font-size:     0.9rem;
  transition:    border-color var(--orgx-duration-fast) ease, color var(--orgx-duration-fast) 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%; }
}

/* ============================================================
 * 41) SECTION INTRO / SUBHEAD — reusable helpers for a centered
 *     intro paragraph pair and a mid-section card-grid label.
 * ============================================================ */

.orgx-section__intro {
  max-width:     760px;
  margin:        clamp(16px, 2vw, 24px) auto 0;
  text-align:    center;
}

.orgx-section__intro p {
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0 0 0.75em 0;
}

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

.orgx-section__subhead {
  margin:      clamp(40px, 5vw, 56px) 0 clamp(24px, 3vw, 32px);
  font-size:   1.3rem;
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--color-green);
  text-align:  center;
}

/* ============================================================
 * 42) INSIGHT BOX — dark "why does this happen" callout
 *     icon + bold question + explanatory paragraph.
 * ============================================================ */

.orgx-insight-box {
  display:       flex;
  gap:           18px;
  align-items:   flex-start;
  max-width:     var(--width-section);
  margin:        clamp(32px, 4vw, 48px) auto 0;
  padding:       clamp(22px, 2.6vw, 30px) clamp(24px, 3vw, 34px);
  background:    var(--orgx-color-surface-elevated);
  border:        1px solid var(--orgx-color-border);
  border-radius: var(--orgx-radius-lg);
}

.orgx-insight-box__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           40px;
  height:          40px;
  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:       0.95rem;
  flex-shrink:     0;
}

.orgx-insight-box__title {
  margin:      0 0 8px;
  font-size:   var(--orgx-font-size-h3);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  color:       #fff;
}

.orgx-insight-box__body {
  margin:      0;
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

@media (max-width: 600px) {
  .orgx-insight-box { flex-direction: column; gap: 12px; }
}

/* Centered variant — no icon, copy + CTA stacked and centered
   (e.g. Digital Marketplace teaser on the What We Do page). */
.orgx-insight-box--centered {
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  max-width:      760px;
  gap:            20px;
}

/* ============================================================
 * 42b) CASE PLACEHOLDER — empty-state card for a "Client cases"
 *     section that has no real case studies loaded in yet.
 *     Dashed border + muted copy read as "not filled in", not broken.
 * ============================================================ */

.orgx-case-placeholder-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   24px;
  max-width:             var(--width-section);
  margin-inline:         auto;
}

.orgx-case-placeholder {
  padding:       clamp(28px, 3vw, 36px) clamp(20px, 2.4vw, 28px);
  border:        1px dashed var(--orgx-color-border);
  border-radius: var(--orgx-radius-xl);
  text-align:    center;
  color:         var(--orgx-color-text-secondary);
}

.orgx-case-placeholder__label {
  display:       inline-block;
  margin-bottom: 10px;
  font-size:     0.8rem;
  font-weight:   var(--orgx-font-weight-medium);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color:         var(--color-green);
}

.orgx-case-placeholder p {
  margin:      0;
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-relaxed);
}

@media (max-width: 900px) {
  .orgx-case-placeholder-grid { grid-template-columns: 1fr; }
}

/* ============================================================
 * 43) CALLOUT NOTE — light left-border closing remark.
 *     Same border/tint idiom as .orgx-about-quote, but body-copy
 *     weight instead of a large italic pull-quote.
 * ============================================================ */

.orgx-callout-note {
  padding:       clamp(18px, 2.2vw, 24px) clamp(24px, 3vw, 32px);
  margin:        clamp(32px, 4vw, 48px) auto 0;
  max-width:     var(--width-section);
  border-left:   3px solid var(--color-green);
  background:    linear-gradient(135deg, rgba(147, 192, 39, 0.05) 0%, transparent 65%);
  border-radius: 0 var(--orgx-radius-md) var(--orgx-radius-md) 0;
}

.orgx-callout-note p {
  margin:      0;
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

/* ============================================================
 * 44) TRANSFORMATION CARD — description line
 *     Additive: existing corporates/PE usages omit <p>, unaffected.
 * ============================================================ */

.orgx-transformation__card p {
  margin:      8px 0 0;
  font-size:   0.82rem;
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

/* ============================================================
 * 45) SMES — scaling section card grid text sizing
 * ============================================================ */

/* Match the homepage outcomes row (.orgx-home-outcomes__title/item p) —
   the shared .orgx-transformation__card defaults are tuned for
   corporates/PE's icon+title-only, 5-across layout and read too small
   once a description line is added, so this page reads its own cards
   at the same size/weight/spacing as the homepage row instead. */
.page-template-page-smes .orgx-transformation__card h3 {
  font-size: clamp(0.92rem, 1vw, 1.05rem);
}

.page-template-page-smes .orgx-transformation__card p {
  font-size: var(--orgx-font-size-body-sm);
}

.page-template-page-smes .orgx-transformation__grid {
  row-gap: clamp(32px, 4vw, 48px);
}

/* This section is much taller than the homepage's Digital Services block
   that .orgx-section--digital__bg was tuned for — its top/bottom fades
   are fixed-height, so a tall section exposes a large fully-lit stretch
   of the busy texture right behind the copy. Same fix as the About
   page's "why" section: dim the texture so text stays legible. */
.page-template-page-smes .orgx-section--digital__bg {
  opacity: 0.30;
}

/* ============================================================
 * 46) RADAR CHART — competitive maturity diagnostic visual.
 *     Same glass-panel language as .orgx-digital-dash.
 * ============================================================ */

.orgx-radar {
  --radar-accent:     var(--color-green);
  --radar-accent-rgb: 147, 192, 39;
  --radar-bench:      rgba(160, 185, 220, 0.75);
  width:           100%;
  max-width:       560px;
  margin-inline:   auto;
  margin-top:      15px;
  font-family:     var(--orgx-font-primary);
  background:      rgba(22, 24, 28, 0.82);
  backdrop-filter:          blur(14px);
  -webkit-backdrop-filter:  blur(14px);
  border:          1px solid var(--orgx-color-border);
  border-radius:   var(--orgx-radius-xl);
  padding:         clamp(24px, 3vw, 36px);
  box-shadow:      0 0 0 1px rgba(255,255,255,0.02), 0 32px 80px rgba(0,0,0,0.55);
}

.orgx-radar__head {
  text-align:    left;
  margin-bottom: 10px;
}

.orgx-radar__eyebrow {
  display:        block;
  font-size:      0.62rem;
  font-weight:    var(--orgx-font-weight-medium);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--color-green);
  opacity:        0.9;
  margin-bottom:  6px;
}

.orgx-radar__title {
  margin:      0;
  font-size:   var(--orgx-font-size-h4);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
}

.orgx-radar__svg { display: block; width: 100%; height: auto; overflow: visible; }

.orgx-radar__legend {
  display:         flex;
  align-items:     center;
  justify-content: flex-start;
  gap:             24px;
  margin-top:      10px;
}

.orgx-radar__legend-item {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   var(--orgx-font-size-body-sm);
  font-weight: var(--orgx-font-weight-regular);
  color:       var(--dash-muted, #9EA3AA);
}

.orgx-radar__dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.orgx-radar__dot--current   { background: var(--color-green); }
.orgx-radar__dot--benchmark { background: rgba(160, 185, 220, 0.75); }

@media (max-width: 1024px) {
  .orgx-radar { max-width: 460px; padding: 22px 18px 16px; }
}

/* ============================================================
 * 47) FAQ ACCORDION — native <details>/<summary>, no JS.
 * ============================================================ */

.orgx-faq {
  max-width:     var(--width-section);
  margin-inline: auto;
}

.orgx-faq-list {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.orgx-faq-item {
  background:    var(--orgx-color-surface);
  border:        1px solid var(--orgx-color-border);
  border-radius: var(--orgx-radius-md);
  transition:    border-color var(--orgx-duration-fast) ease;
}

.orgx-faq-item[open] { border-color: rgba(147, 192, 39, 0.28); }

.orgx-faq-item summary {
  cursor:      pointer;
  list-style:  none;
  display:     flex;
  align-items: center;
  gap:         14px;
  padding:     18px 22px;
  user-select: none;
}

.orgx-faq-item summary::-webkit-details-marker { display: none; }

.orgx-faq-item__num {
  font-size:      var(--orgx-font-size-meta);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.1em;
  color:          var(--color-green);
  flex-shrink:    0;
  min-width:      20px;
}

.orgx-faq-item__q {
  flex:        1;
  font-size:   0.92rem;
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
  line-height: 1.45;
}

.orgx-faq-item__icon {
  width:           22px;
  height:          22px;
  flex-shrink:     0;
  display:         flex;
  align-items:     center;
  justify-content: center;
  border:          1px solid var(--orgx-color-border);
  border-radius:   50%;
  font-size:       0.9rem;
  line-height:     1;
  color:           var(--orgx-color-text-tertiary);
  transition:      border-color var(--orgx-duration-default) ease, color var(--orgx-duration-default) ease, transform var(--orgx-duration-default) ease;
}

.orgx-faq-item[open] .orgx-faq-item__icon {
  transform:    rotate(45deg);
  border-color: rgba(147, 192, 39, 0.35);
  color:        var(--color-green);
}

.orgx-faq-answer {
  padding:    0 22px 20px 56px;
  border-top: 1px solid var(--orgx-color-border);
  padding-top: 14px;
}

.orgx-faq-answer p {
  margin:      0;
  font-size:   0.88rem;
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

@media (max-width: 600px) {
  .orgx-faq-item summary { padding: 16px 18px; gap: 12px; }
  .orgx-faq-answer        { padding: 14px 18px 18px 48px; }
  .orgx-faq-item__q       { font-size: 0.86rem; }
}

/* ============================================================
 * 48) ICON LIST SPLIT — heading + lead + CTA on the left, a
 *     2-column icon list with divider lines (no card boxes),
 *     paired with a visual (e.g. the radar chart) on the right.
 * ============================================================ */

.orgx-icon-list-split__header {
  max-width: var(--width-section);
  margin:    clamp(64px, 8vw, 96px) auto 0;
}

.orgx-icon-list-split__heading {
  font-size:      calc(var(--orgx-font-size-hero-title-home) * 0.8);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
  text-shadow:    0 2px 24px rgba(0, 0, 0, 0.55);
  margin:         0 0 clamp(16px, 2vw, 24px);
}

.orgx-icon-list-split__heading-accent { color: var(--color-green); }

#orgx-smes-advantage-title span,
#orgx-smes-scale-title span,
#orgx-corporates-fails-title span,
#orgx-corporates-method-title span,
#orgx-corporates-deliver-title span,
#orgx-pe-support-title span,
#orgx-pe-performance-title span,
#orgx-pe-premium-title span,
#orgx-pe-iceberg-title span,
#orgx-pe-method-title span,
#orgx-wwd-how-title span,
#orgx-wwd-outcomes-title span,
#orgx-wwd-marketplace-title span { color: var(--color-green); }

.orgx-icon-list-split__lead {
  font-size:   var(--orgx-font-size-body-lg);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  margin:      0;
}

.orgx-icon-list-split {
  display:               grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items:           start;
  gap:                   clamp(40px, 5vw, 72px);
  max-width:             var(--width-section);
  margin:                clamp(32px, 4vw, 40px) auto 0;
}

.orgx-icon-list {
  list-style:            none;
  margin:                0 0 clamp(28px, 3.5vw, 40px);
  padding:               0;
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap:            clamp(24px, 3vw, 40px);
}

.orgx-icon-list__item {
  display: flex;
  gap:     16px;
  padding: clamp(16px, 1.8vw, 22px) 0;
}

.orgx-icon-list__item:nth-child(odd) {
  padding-right: clamp(16px, 2vw, 24px);
}

.orgx-icon-list__item:nth-child(even) {
  padding-left: clamp(16px, 2vw, 24px);
}

.orgx-icon-list__icon {
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           44px;
  height:          44px;
  flex-shrink:     0;
  border-radius:   var(--orgx-radius-sm);
  background:      var(--orgx-color-surface-elevated);
  border:          1px solid var(--orgx-color-border);
  color:           var(--color-green);
  font-size:       1.05rem;
}

.orgx-icon-list__text h4 {
  margin:      0 0 6px;
  font-size:   var(--orgx-font-size-card-title);
  font-weight: var(--orgx-font-weight-medium);
  line-height: var(--orgx-line-height-heading);
  color:       #fff;
}

.orgx-icon-list__text p {
  margin:      0;
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

@media (max-width: 980px) {
  .orgx-icon-list-split { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .orgx-icon-list { grid-template-columns: 1fr; }
  .orgx-icon-list__item:nth-child(odd)  { padding-right: 0; }
  .orgx-icon-list__item:nth-child(even) { padding-left: 0; }
}

/* Standalone use (not nested in .orgx-icon-list-split__copy's own
   column) — needs its own max-width instead of inheriting a split
   column's. Same width the card grid it replaces used to sit in. */
.orgx-icon-list--wide {
  max-width:     var(--width-content);
  margin-inline: auto;
}

/* ============================================================
 * PAGE CLOSER — one oversized, page-specific statement placed
 *     directly before the shared FAQ/contact sequence, so every
 *     page peaks on an argument that belongs only to it instead
 *     of handing straight off to shared utility sections. See
 *     CLAUDE.md, "page-specific closing statement".
 * ============================================================ */
.orgx-page-closer {
  max-width:      880px;
  margin:         0 auto;
  padding-block:  clamp(8px, 1vw, 16px);
  text-align:     center;
  font-family:    var(--orgx-font-primary);
  font-size:      var(--orgx-font-size-section-title-xl);
  font-weight:    var(--orgx-font-weight-regular);
  line-height:    var(--orgx-line-height-tight);
  letter-spacing: var(--orgx-letter-spacing-body);
  color:          #fff;
}

.orgx-page-closer .accent { color: var(--color-green); }

/* ============================================================
 * 49) FUNNEL CHART — narrowing path with numbered blockers,
 *     paired with the matching numbered list.
 * ============================================================ */

.orgx-funnel-split {
  display:               grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap:                   clamp(32px, 4vw, 52px);
  align-items:           center;
  max-width:             var(--width-section);
  margin:                clamp(40px, 5vw, 56px) auto 0;
}

.orgx-funnel {
  max-width:     300px;
  margin-inline: auto;
}

.orgx-funnel__svg { display: block; width: 100%; height: auto; overflow: visible; }

.orgx-funnel__cap {
  font-family:    var(--orgx-font-primary);
  font-size:      9px;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.12em;
  fill:           var(--color-green);
}

.orgx-funnel__cap--bottom { fill: rgba(147, 192, 39, 0.55); }

.orgx-funnel__num-txt {
  font-family:       var(--orgx-font-primary);
  font-size:         11px;
  font-weight:       var(--orgx-font-weight-semibold);
  fill:              #fff;
  text-anchor:       middle;
  dominant-baseline: middle;
}

.orgx-funnel__obstruct {
  opacity:          0;
  transform:        translateX(-14px);
  transition:       opacity 0.6s ease, transform 0.6s ease;
  transform-box:    fill-box;
  transform-origin: center;
}

.orgx-funnel__svg.is-in .orgx-funnel__obstruct {
  opacity:   1;
  transform: translateX(0);
}

.orgx-funnel__drip {
  transform-box:    fill-box;
  transform-origin: center;
}

.orgx-funnel__svg.is-in .orgx-funnel__drip {
  animation: orgx-funnel-drip 2.6s ease-in infinite;
}

@keyframes orgx-funnel-drip {
  0%   { transform: translateY(-14px); opacity: 0; }
  12%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(26px); opacity: 0; }
}

.orgx-funnel-list {
  list-style:     none;
  margin:         0;
  padding:        0;
  counter-reset:  orgxfunnel;
  display:        flex;
  flex-direction: column;
  gap:            16px;
}

.orgx-funnel-list__item {
  counter-increment: orgxfunnel;
  display:            flex;
  gap:                15px;
  align-items:        flex-start;
}

.orgx-funnel-list__num {
  width:           30px;
  height:          30px;
  border-radius:   50%;
  background:      rgba(147, 192, 39, 0.12);
  border:          1px solid rgba(147, 192, 39, 0.35);
  color:           var(--color-green);
  font-size:       0.72rem;
  font-weight:     var(--orgx-font-weight-semibold);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.orgx-funnel-list__num::before { content: counter(orgxfunnel); }

.orgx-funnel-list__item h4 {
  margin:      0 0 4px;
  font-size:   var(--orgx-font-size-card-title);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
}

.orgx-funnel-list__item p {
  margin:      0;
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

@media (prefers-reduced-motion: reduce) {
  .orgx-funnel__obstruct { opacity: 1; transform: none; transition: none; }
  .orgx-funnel__svg.is-in .orgx-funnel__drip { animation: none; opacity: 0.6; }
}

@media (max-width: 780px) {
  .orgx-funnel-split { grid-template-columns: 1fr; }
}

/* ============================================================
 * 50) ICEBERG GRID — "operational value creation levers" visual:
 *     6 drivers flanking a center callout, dashed-border card
 *     language reused from .orgx-insight-box's tokens.
 * ============================================================ */

.orgx-iceberg { position: relative; overflow: hidden; }

.orgx-iceberg__tip {
  position:      relative;
  z-index:       1;
  max-width:     280px;
  margin:        clamp(24px, 3vw, 36px) auto 0;
  text-align:    center;
  padding-top:   8px;
}

.orgx-iceberg__tip-svg {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  z-index:  0;
}

.orgx-iceberg__tip-content { position: relative; z-index: 1; padding: 14px 10px 22px; }

.orgx-iceberg__tip-icon {
  width:           34px;
  height:          34px;
  margin:          0 auto 10px;
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           #fff;
  font-size:       1rem;
}

.orgx-iceberg__tip-content h4 {
  margin:      0;
  font-size:   var(--orgx-font-size-card-title);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
}

.orgx-iceberg__tip-content p {
  margin:      6px 0 0;
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

.orgx-iceberg__waterline {
  position:      relative;
  z-index:       1;
  max-width:     var(--width-content);
  margin:        clamp(28px, 3vw, 40px) auto;
  border-top:    1.5px dashed rgba(255, 255, 255, 0.2);
}

.orgx-iceberg__body { position: relative; }

.orgx-iceberg__body-svg {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  z-index:        0;
  pointer-events: none;
}

.orgx-iceberg__grid {
  position:               relative;
  z-index:                1;
  display:                grid;
  grid-template-columns:  1fr 1.2fr 1fr;
  gap:                    40px 28px;
  align-items:            center;
  max-width:              var(--width-content);
  margin:                 0 auto;
  padding-bottom:         clamp(20px, 2.5vw, 32px);
}

.orgx-iceberg__item { max-width: 260px; }
.orgx-iceberg__item--left  { grid-column: 1; }
.orgx-iceberg__item--right { grid-column: 3; margin-left: auto; text-align: right; }
.orgx-iceberg__item--right .orgx-iceberg__icon { margin-left: auto; }

.orgx-iceberg__item--row-1 { grid-row: 1; }
.orgx-iceberg__item--row-2 { grid-row: 2; }
.orgx-iceberg__item--row-3 { grid-row: 3; }

.orgx-iceberg__icon {
  width:         28px;
  height:        28px;
  color:         var(--color-green);
  margin-bottom: 10px;
}

.orgx-iceberg__icon svg { width: 100%; height: 100%; }

.orgx-iceberg__item h4 {
  margin:      0 0 6px;
  font-size:   var(--orgx-font-size-card-title);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
}

.orgx-iceberg__item p {
  margin:      0;
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

.orgx-iceberg__center {
  grid-column: 2;
  grid-row:    1 / 4;
  align-self:  center;
  border:      1.5px dashed rgba(147, 192, 39, 0.45);
  border-radius: var(--orgx-radius-lg);
  background:  rgba(147, 192, 39, 0.06);
  padding:     clamp(24px, 3vw, 32px);
  text-align:  center;
}

.orgx-iceberg__center h4 {
  margin:      0 0 10px;
  font-size:   var(--orgx-font-size-h4);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--color-green);
}

.orgx-iceberg__center p {
  margin:      0;
  font-size:   var(--orgx-font-size-body-sm);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
}

@media (max-width: 780px) {
  .orgx-iceberg__grid { grid-template-columns: 1fr; }
  .orgx-iceberg__item--left,
  .orgx-iceberg__item--right {
    grid-column: auto;
    grid-row:    auto;
    margin-left: 0;
    text-align:  center;
    max-width:   100%;
  }
  .orgx-iceberg__item--right .orgx-iceberg__icon { margin-left: auto; margin-right: auto; }
  .orgx-iceberg__icon { margin-left: auto; margin-right: auto; }
  .orgx-iceberg__center { grid-column: auto; grid-row: auto; }
}

/* ============================================================
 * 51) TAG ROW — small pill list ("Sustainable performance
 *     comes from: …").
 * ============================================================ */

.orgx-tag-row {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: center;
  gap:             10px;
  max-width:       var(--width-section);
  margin:          clamp(20px, 2.5vw, 28px) auto 0;
}

.orgx-tag-row__item {
  display:        inline-flex;
  align-items:    center;
  gap:             8px;
  padding:         8px 18px;
  border-radius:   var(--orgx-radius-pill);
  border:          1px solid rgba(147, 192, 39, 0.32);
  background:      rgba(147, 192, 39, 0.08);
  color:           var(--orgx-color-text-primary);
  font-size:       var(--orgx-font-size-label);
  font-weight:     var(--orgx-font-weight-medium);
}

.orgx-tag-row__item i { color: var(--color-green); font-size: 0.82em; }

/* ============================================================
 * 52) ORBICUL PANEL — "Powered by Orbicul" cross-promo block.
 * ============================================================ */

.orgx-orbicul-panel {
  position:       relative;
  max-width:      var(--width-section);
  margin:         clamp(40px, 5vw, 56px) auto 0;
  padding:        clamp(28px, 3.2vw, 40px) clamp(28px, 3.5vw, 44px);
  border:         1px solid var(--orgx-color-border);
  border-radius:  var(--orgx-radius-xl);
  background:     linear-gradient(160deg, rgba(147, 192, 39, 0.07) 0%, rgba(255, 255, 255, 0.02) 60%);
}

.orgx-orbicul-panel__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-meta);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color:          var(--color-green);
  margin-bottom:  10px;
}

.orgx-orbicul-panel__title {
  margin:      0 0 12px;
  font-size:   var(--orgx-font-size-h3);
  font-weight: var(--orgx-font-weight-medium);
  color:       #fff;
}

.orgx-orbicul-panel__body {
  margin:      0 0 18px;
  font-size:   var(--orgx-font-size-body);
  line-height: var(--orgx-line-height-relaxed);
  color:       var(--orgx-color-text-secondary);
  max-width:   640px;
}

.orgx-orbicul-panel .orgx-list { max-width: 640px; }