/*
Theme Name: ORGX Digital Services — Design System v3.1
Theme URI: https://digital-services.orgx.com
Author: ORGX
Version: 3.1
Text Domain: orgx-ds
Description: ORGX Digital Services — ORGX Web Family design-system aligned build. (Note: corrected from stale "ORGX partner site" header inherited from source theme; Text Domain corrected from "orgx-partner" to "orgx-ds" to match all 59 in-code translation calls — see DESIGN-SYSTEM-CHANGELOG.md.)
*/

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

/* ============================================================================
   02) DESIGN TOKENS
   ============================================================================ */
:root {
  /* ── Backgrounds — warm charcoal, no blue tint */
  --bg:            #04060a;
  --bg-surface:    #141413;
  --bg-surface-2:  #1a1918;
  --bg-hover:      #202019;

  /* ── Borders */
  --border:        rgba(255, 255, 255, 0.07);
  --border-hover:  rgba(255, 255, 255, 0.13);
  --border-active: rgba(255, 255, 255, 0.22);

  /* ── Text — warm neutral tones, no blue-grey */
  --text:           rgba(252, 250, 246, 0.96);   /* warm bright white — stronger titles */
  --text-muted:     rgba(230, 225, 215, 0.82);   /* warm readable grey — clearer descriptions */
  --text-dim:       rgba(192, 187, 177, 0.58);   /* warm muted — metadata */

  /* Semantic aliases for card typography — aliased to --text/--text-muted
     rather than repeating the literal value (was a duplicate pair) */
  --text-primary:   var(--text);         /* titles */
  --text-secondary: var(--text-muted);   /* descriptions */

  /* ── ORGX brand green */
  --orgx-green:    #95C11F;

  /* ── Accent — aliased to --orgx-green rather than repeating the literal
     (was a duplicate pair: same hex, two names) */
  --accent:        var(--orgx-green);
  --accent-dim:    rgba(149, 193, 31, 0.14);

  /* ── Domain theme colours ───────────────────────────────────────────────
        Strategic Direction    →  ORGX green       (direction, growth, positioning)
        Organisational Perf.   →  warm orange/gold (value creation, EBITDA, commercial)
        Intelligent Edge       →  sky cyan         (AI, data, technology, intelligence)
        Responsible Impact     →  teal             (ESG, CSRD, sustainability, resilience)
        Execution              →  purple/violet    (transformation, programme delivery, PMO)

        Use for: labels · dots · hover glow · icons · chart colours
        Avoid:   large card fills, full backgrounds                       */
  --theme-strategy:                #95C11F;   /* ORGX green */
  --theme-strategy-bg:             rgba(149, 193,  31, 0.07);

  --theme-performance:             #E89A2F;   /* warm orange/gold */
  --theme-performance-bg:          rgba(232, 154,  47, 0.07);

  --theme-intelligent-edge:        #5BB8D6;   /* sky cyan */
  --theme-intelligent-edge-bg:     rgba( 91, 184, 214, 0.07);

  --theme-responsible-impact:      #37C7B9;   /* muted teal */
  --theme-responsible-impact-bg:   rgba( 55, 199, 185, 0.07);

  --theme-execution:               #D76AB8;   /* magenta-violet — transformation, delivery */
  --theme-execution-bg:            rgba(215, 106, 184, 0.07);

  /* Execution tag system — softer than the primary accent for visual hierarchy */
  --theme-execution-tag-text:      #E58BC9;
  --theme-execution-tag-border:    rgba(215, 106, 184, 0.35);
  --theme-execution-tag-bg:        rgba(215, 106, 184, 0.10);

  /* ── Status colours */
  --status-ready:         #95C11F;                    /* ORGX green */
  --status-ready-bg:      rgba(149, 193,  31, 0.12);
  --status-partial:       #c9943a;                    /* muted amber */
  --status-partial-bg:    rgba(201, 148,  58, 0.12);
  --status-blocked:       #c94a4a;                    /* muted red */
  --status-blocked-bg:    rgba(201,  74,  74, 0.12);
  --status-pending:       #7d7d73;                    /* warm neutral grey */
  --status-pending-bg:    rgba(125, 125, 115, 0.10);

  /* ── Tag states — two states only: inactive and active */
  --tag-inactive-opacity: 0.60;
  --tag-active-opacity:   1;

  /* ── Card tokens — all four were the identical literal value under four
     names (hover state was never actually differentiated despite the
     naming). Aliased to --card-bg rather than repeating the literal;
     all four names are kept since they're referenced throughout by role
     (rest/hover/solid) even though the value is currently shared. */
  --card-bg:             rgb(22, 23, 26);
  --card-bg-hover:       var(--card-bg);
  --card-bg-solid:       var(--card-bg);
  --card-bg-hover-solid: var(--card-bg);
  --card-border:         rgba(255, 255, 255, 0.07);
  --card-border-hover:   rgba(255, 255, 255, 0.13);

  /* ── Filter animation timing */
  --filter-fade-out-duration: 360ms;
  --filter-fade-in-duration:  520ms;

  /* ── Portal background */
  --portal-bg-opacity:      0.70;   /* cards are the focus; background atmospheric */
  --portal-overlay-opacity: 0.60;   /* slightly heavier overlay — cards pop more */

  /* ── Navigation */
  --nav-h:         96px;
  --current-nav-h: 96px;   /* updated by JS on scroll; used for sticky title row */
  --domain-nav-h:  0px;             /* domain-nav-bar removed */

  /* ── Layout */
  --max-w:         1400px;   /* content grid and page wrappers */
  --nav-max-w:     1480px;   /* nav shell — 40px wider each side than content */
  --gutter:        clamp(20px, 4vw, 56px);
  --section-pad:   clamp(56px, 8vw, 112px);
  --card-gap:      40px;

  /* ── Shape */
  --radius:        8px;
  --radius-sm:     4px;
  --radius-lg:     12px;

  /* ── Elevation */
  --shadow:        0 4px 24px rgba(0, 0, 0, 0.35);   /* declared, barely used — see ORGX-DESIGN-SYSTEM.md */
  --shadow-hover:  0 8px 40px rgba(0, 0, 0, 0.50);

  /* -- elevation: named after the audit's "at least 6 distinct recipes for
        one conceptual elevated card" finding. `--orgx-shadow-card` names
        the front-page .service-card recipe (the highest-craft, most
        fully-realised implementation) EXACTLY as-is — zero value change.
        `--orgx-shadow-panel`/-hover names two truly identical literal
        recipes that were independently duplicated across 5 card classes
        (.svc-process-card/.svc-deliverables-card/.svc-orgx-card/
        .svc-cta-card/.about-deepdive-card) — also zero value change, pure
        dedup. `--orgx-shadow-subtle` names a third exact duplicate found
        at 2 sites (.sdp-module/.sdp-cta-block). The remaining recipes
        (.service-detail, the svc-orgx-card-alt 3-layer variant, the
        deepdive-shift/pricing cards, the scheduler modal) are each a
        genuinely different weight, not a duplicate, and are deliberately
        left as their own literals — see ORGX-DESIGN-SYSTEM.md. -- */
  --orgx-shadow-card:        0 4px 32px rgba(0, 0, 0, 0.68), 0 0 56px rgba(0, 0, 0, 0.48), 0 0 0 1px rgba(255, 255, 255, 0.08), 0 0 24px rgba(255, 255, 255, 0.03);
  --orgx-shadow-card-hover:  0 18px 64px rgba(0, 0, 0, 0.82), 0 0 88px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.12), 0 0 48px rgba(255, 255, 255, 0.04);
  --orgx-shadow-panel:       0 2px 20px rgba(0, 0, 0, 0.40), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
  --orgx-shadow-panel-hover: 0 4px 28px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
  --orgx-shadow-subtle:      0 2px 16px rgba(0, 0, 0, 0.28);

  /* ── Motion */
  --ease:          0.18s ease;

  /* ==========================================================================
     ORGX FOUNDATION — shared semantic design tokens (ORGX Web Family)
     Added during the ORGX/Digital Services/Orbicul harmonisation project.
     Token NAMES match ORGX Clean's semantic convention; VALUES are Digital
     Services' own — this shares the system, not the appearance. Domain
     colours, status colours, card tokens, --radius/-sm/-lg and --ease
     above are untouched: they are genuinely DS-specific or were already
     found well-disciplined. See ORGX-DESIGN-SYSTEM.md for full documentation.
     ========================================================================== */

  /* -- typography: family (alias — matches body{} exactly, no change) -- */
  --orgx-font-primary: 'Raleway', sans-serif;

  /* -- typography: the real repeated "deep-dive section title" role found
        across 8 components (wyg-card__heading, deepdive-shift-card__title,
        deepdive-media-steps__title, etc.) — same value, previously unnamed -- */
  --orgx-font-size-section-title: clamp(1.25rem, 2vw, 1.625rem);

  /* -- typography: body/label — the two largest exact-duplicate literal
        clusters in the file (38 and 37 call sites before this pass) -- */
  --orgx-font-size-body:  0.875rem;
  --orgx-font-size-label: 0.8125rem;

  /* -- typography: eyebrow/micro-label — shared by .eyebrow, .theme-label,
        and the deep-dive card eyebrows (32 call sites) -- */
  --orgx-font-size-eyebrow: 0.6875rem;

  /* -- typography: weight roles — DS already uses a clean, small set of
        plain integers (no inconsistency flagged by the audit); this only
        names them to match the ORGX Web Family convention. No "light"(300)
        role: grepped and confirmed zero real font-weight:300 declarations
        in this stylesheet (300 is only ever loaded via the @import, never
        applied) — not declaring an unused token here. -- */
  --orgx-font-weight-regular:  400;
  --orgx-font-weight-medium:   500;
  --orgx-font-weight-semibold: 600;
  --orgx-font-weight-bold:     700;

  /* -- typography: line-height — the two dominant "comfortable copy" values
        (body{} base + card/excerpt tier at 1.6; longer-form prose/intro
        tier at 1.75). Other line-heights (1.13/1.2/1.25/1.35 etc.) are each
        a distinct heading-tier value and are left as literals. -- */
  --orgx-line-height-body:    1.6;
  --orgx-line-height-relaxed: 1.75;

  /* -- typography: letter-spacing — the dominant uppercase-eyebrow tracking
        value; the file's other tracking values are each smaller, genuinely
        distinct clusters and are left as literals. -- */
  --orgx-letter-spacing-eyebrow: 0.1em;

  /* -- radius: no new --orgx-radius-* aliases declared. DS's existing
        --radius-sm/--radius/--radius-lg (4/8/12px) system was already found
        well-adopted throughout the file under its own names; adding
        parallel-named aliases with zero real call sites would repeat the
        exact "declared but unused" mistake this project corrected in ORGX
        Clean v1.2. Shared family discipline here means "same 3-tier radius
        philosophy," not "same variable name." -- */

  /* -- motion — DS's own de-facto duration bands. The audit found 12+
        hardcoded values; on inspection the two real dominant general-purpose
        clusters are 180ms (20 sites, "fast") and 220ms (21 sites, "default"),
        with 320ms as a smaller but real "slower" tier (4 sites). The
        scheduler modal's own 140ms cluster is intentionally distinct (its
        own internally-consistent sub-system, not folded in here). --ease is
        kept as-is (it is a shorthand, not a pure duration) —
        --orgx-duration-fast is its equivalent pure-duration form for use in
        multi-property transitions. -- */
  --orgx-duration-fast:    0.18s;
  --orgx-duration-default: 220ms;
  --orgx-duration-slow:    320ms;
  --orgx-ease-standard:    cubic-bezier(.22, .61, .36, 1);
}

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

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background-color: #04060a; /* fallback when image hasn't loaded */
}

html,
body {
  overflow-x: clip;
}

body {
  background:  transparent; /* fixed layers below handle the bg */
  color:       var(--text);
  font-family: var(--orgx-font-primary);
  font-size:   16px;
  line-height: var(--orgx-line-height-body);
  min-height:  100vh;
  display:     flex;
  flex-direction: column;
}

/* ── Portal background: image layer ──────────────────────────────────────── */
/* Tune visibility: --portal-bg-opacity in :root                              */
.portal-bg-image {
  position:              fixed;
  inset:                 0;
  z-index:               -2;
  background-image:      url('/images/ORGX__digital_bg.webp');
  background-attachment: fixed;
  background-position:   center center;
  background-size:       cover;
  background-repeat:     no-repeat;
  opacity:               var(--portal-bg-opacity);
  filter:                saturate(0.55) brightness(0.82) blur(1px);
  pointer-events:        none;
}

/* ── Portal background: dark gradient overlay ─────────────────────────────── */
/* Tune darkness: --portal-overlay-opacity in :root                           */
.portal-bg-overlay {
  position:       fixed;
  inset:          0;
  z-index:        -1;
  background:     linear-gradient(
    to bottom,
    rgba(10, 10, 8, 0.80)  0%,
    rgba(10, 10, 8, 0.60)  40%,
    rgba(10, 10, 8, 0.60)  60%,
    rgba(10, 10, 8, 0.85) 100%
  );
  opacity:        var(--portal-overlay-opacity);
  pointer-events: none;
}

/* ── Decorative blur accent — fixed top-right ──────────────────────────────── */
.portal-blur-right {
  position:            fixed;
  top:                 -150px;
  right:               0;
  width:               clamp(280px, 35vw, 520px);
  height:              auto;
  aspect-ratio:        1 / 1;
  background-image:    url('/images/ORGX__blur_right.webp');
  background-size:     contain;
  background-position: top right;
  background-repeat:   no-repeat;
  z-index:             -1;
  opacity:             0.50;
  pointer-events:      none;
}

img,
svg {
  display:   block;
  max-width: 100%;
}

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

ul {
  list-style: none;
}

button {
  font-family: inherit;
  cursor:      pointer;
}

/* ============================================================================
   04) TYPOGRAPHY
   ============================================================================ */
h1 {
  font-size:      clamp(2rem, 5vw, 3.5rem);
  font-weight:    var(--orgx-font-weight-bold);
  line-height:    1.13;
  letter-spacing: -0.025em;
}

h2 {
  font-size:      clamp(1.35rem, 3vw, 2rem);
  font-weight:    var(--orgx-font-weight-semibold);
  line-height:    1.25;
  letter-spacing: -0.01em;
}

h3 {
  font-size:      clamp(1rem, 2vw, 1.25rem);
  font-weight:    var(--orgx-font-weight-semibold);
  line-height:    1.35;
}

h4 {
  font-size:   1rem;
  font-weight: var(--orgx-font-weight-semibold);
}

p {
  line-height: 1.72;
}

.eyebrow {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  0.75rem;
  display:        block;
}

.text-muted { color: var(--text-muted); }
.text-dim   { color: var(--text-dim); }

/* ============================================================================
   05) LAYOUT UTILITIES
   ============================================================================ */
.portal-wrap {
  width:          100%;
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: var(--gutter);
}

/* ============================================================================
   06) BUTTONS
   ============================================================================ */
.btn {
  display:         inline-flex;
  align-items:     center;
  gap:             8px;
  padding:         11px 22px; /* was 10px 22px — aligned to the family's dominant pair (.sdp-btn-primary/.scheduler-submit), see DESIGN-SYSTEM-CHANGELOG.md */
  border-radius:   var(--radius); /* was --radius-sm (4px) — accidental miss per audit; .btn-sm exists separately for an intentionally smaller variant */
  font-family:     inherit;
  font-size:       var(--orgx-font-size-body);
  font-weight:     var(--orgx-font-weight-semibold);
  letter-spacing:  0.04em;
  cursor:          pointer;
  transition:      background var(--ease), color var(--ease),
                   border-color var(--ease), box-shadow var(--ease);
  border:          1px solid transparent;
  text-decoration: none;
  white-space:     nowrap;
  line-height:     1;
}

.btn-primary {
  background:   var(--accent);
  color:        #0c0e13;
  border-color: var(--accent);
}

.btn-primary:hover {
  /* was hardcoded #a5d42a — every other hover-lighten in this family uses
     color-mix(); this one was the odd implementation, not an odd colour */
  background:   color-mix(in srgb, var(--accent) 82%, #fff);
  border-color: color-mix(in srgb, var(--accent) 82%, #fff);
}

.btn-ghost {
  background:   transparent;
  color:        var(--text);
  border-color: var(--border-hover);
}

.btn-ghost:hover {
  border-color: var(--border-active);
  background:   var(--bg-surface);
}

.btn-sm {
  padding:   7px 16px;
  font-size: var(--orgx-font-size-label);
}

/* ============================================================================
   07) NAVIGATION
   ============================================================================ */
.site-nav {
  position:              fixed;
  top:                   0;
  left:                  0;
  right:                 0;
  z-index:               100;
  height:                var(--nav-h);
  background:            rgba(22, 23, 26, 0.93);
  border-bottom:         1px solid var(--border);
  backdrop-filter:       blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:            0 4px 32px rgba(0, 0, 0, 0.45),
                         0 1px 0 rgba(255, 255, 255, 0.04);
  transition:            background var(--ease), border-color var(--ease),
                         height 0.25s ease;
}

.site-nav.is-scrolled {
  background:   rgba(22, 23, 26, 0.93);
  border-color: var(--border-hover);
  height:       68px;
}

.nav-inner {
  display:        flex;
  align-items:    center;
  height:         100%;
  max-width:      var(--nav-max-w);   /* slightly wider than content */
  margin-inline:  auto;
  padding-inline: var(--gutter);
  gap:            48px;
}

/* ── Brand — functions as the first nav item; logo is just its icon ─────────── */
.nav-brand {
  display:         flex;
  align-items:     center;
  gap:             10px;
  flex-shrink:     0;
  text-decoration: none;
  /* No extra margin — nav-inner gap (28px) is the only spacing, same as between links */
}

.nav-brand:hover .nav-site-name,
.nav-brand.is-current .nav-site-name { color: var(--text); }

.nav-logo {
  height:     54px;
  width:      auto;
  display:    block;
  transition: height 0.25s ease;
}

.site-nav.is-scrolled .nav-logo {
  height: 34px;
}

/* Matches nav-links typography exactly so all items belong to one system */
.nav-site-name {
  font-size:   var(--orgx-font-size-body);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--text-muted);
  transition:  color var(--ease);
  white-space: nowrap;
}

/* ── Primary menu ───────────────────────────────────────────────────────────── */
.nav-menu {
  flex:            0 auto;       /* sits next to brand, doesn't fill space */
  display:         flex;
  justify-content: flex-start;
}

.nav-links {
  display:     flex;
  align-items: center;
  gap:         48px;   /* matches nav-inner gap so all items are equally spaced */
  list-style:  none;
  margin:      0;
  padding:     0;
}

.nav-links li { position: relative; }

/* Nav links match nav-site-name exactly — same family, same weight, same colour */
.nav-links > li > a {
  font-size:   var(--orgx-font-size-body);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--text-muted);
  padding:     0;                /* spacing comes from gap only — equal to brand */
  transition:  color var(--ease);
  display:     block;
  line-height: inherit;
}

.nav-links > li > a:hover,
.nav-links .current-menu-item > a,
.nav-links .current-page-ancestor > a,
.nav-links .current-menu-ancestor > a {
  color:      var(--text);
  background: none;
}

/* ── Dropdown ───────────────────────────────────────────────────────────────── */
.nav-links .sub-menu {
  position:      absolute;
  top:           calc(100% + 6px);
  left:          0;
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-hover);
  border-radius: var(--radius);
  min-width:     180px;
  padding:       6px 0;
  opacity:       0;
  visibility:    hidden;
  transform:     translateY(-6px);
  transition:    opacity var(--ease), transform var(--ease), visibility var(--ease);
  z-index:       10;
  list-style:    none;
}

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

.nav-links .sub-menu a {
  display:       block;
  padding:       8px 16px;
  font-size:     var(--orgx-font-size-label);
  color:         var(--text-muted);
  transition:    color var(--ease), background var(--ease);
  white-space:   nowrap;
}

.nav-links .sub-menu a:hover {
  color:      var(--text);
  background: var(--bg-hover);
}

/* ── Nav right actions ──────────────────────────────────────────────────────── */
.nav-actions {
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Hamburger ──────────────────────────────────────────────────────────────── */
.nav-hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           40px;
  height:          40px;
  background:      transparent;
  border:          1px solid var(--border-hover);
  border-radius:   var(--radius-sm);
  cursor:          pointer;
  padding:         0;
  flex-shrink:     0;
}

.nav-hamburger span {
  display:    block;
  width:      18px;
  height:     1.5px;
  background: var(--text-muted);
  transition: transform var(--ease), opacity var(--ease);
  border-radius: 1px;
}

.nav-hamburger.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav-hamburger.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-hamburger.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ============================================================================
   07b) DOMAIN FILTER ITEMS (dashboard row + mobile)
   ============================================================================ */
/* ── Domain nav item — dot + neutral text, mirrors card label pattern ─────── */
.nav-domain-item {
  --domain-colour: var(--text-muted);   /* overridden per domain class */

  display:         inline-flex;
  align-items:     center;
  gap:             7px;
  font-size:       0.75rem;
  font-weight:     var(--orgx-font-weight-medium);
  letter-spacing:  0.02em;
  color:           rgba(210, 205, 195, 0.72);
  padding:         4px 10px;
  border-radius:   var(--radius-sm);
  text-decoration: none;
  white-space:     nowrap;
  cursor:          pointer;
  transition:      color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) ease;
  position:        relative;
  border:          none;
  background:      none;
  font-family:     inherit;
}

/* Dashboard has no dot; slightly stronger default */
.nav-domain-item.is-dashboard {
  --domain-colour: var(--text);
  color:           var(--text-muted);
  font-weight:     var(--orgx-font-weight-semibold);
  letter-spacing:  0.03em;
  margin-right:    8px;
  padding-right:   18px;
}

/* Separator after Dashboard */
.nav-domain-item.is-dashboard::after {
  content:    '';
  position:   absolute;
  right:      0;
  top:        20%;
  height:     60%;
  width:      1px;
  background: var(--border-hover);
}

/* Domain-specific accent colours */
.nav-domain-item.theme-strategy,
.nav-domain-item.theme-strategic-direction  { --domain-colour: var(--theme-strategy); }
.nav-domain-item.theme-org-performance      { --domain-colour: var(--theme-performance); }
.nav-domain-item.theme-intelligent-edge     { --domain-colour: var(--theme-intelligent-edge); }
.nav-domain-item.theme-responsible-impact   { --domain-colour: var(--theme-responsible-impact); }
.nav-domain-item.theme-execution            { --domain-colour: var(--theme-execution); }

/* Hover + active: text adopts domain colour — no backgrounds, no pills */
.nav-domain-item:hover,
.nav-domain-item.is-active  { color: var(--domain-colour); }

/* Domain icon in nav — small FA icon, colour inherits from --domain-colour */
.domain-dot {
  font-size:   0.6rem;
  color:       var(--domain-colour);
  flex-shrink: 0;
  line-height: 1;
  width:       auto;
  height:      auto;
}

@keyframes dot-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.5); }
  100% { transform: scale(1); }
}

.domain-dot.is-pulsing {
  animation: dot-pulse 260ms var(--orgx-ease-standard) forwards;
}

/* ── Hidden card state (domain filter) ──────────────────────────────────────── */
.service-card.card-hidden {
  display: none;
}


/* ============================================================================
   08) MOBILE MENU
   ============================================================================ */
.mobile-menu {
  display:        none;
  position:       fixed;
  top:            calc(var(--nav-h) + var(--domain-nav-h));
  left:           0;
  right:          0;
  bottom:         0;
  background:     var(--bg);
  border-top:     1px solid var(--border);
  z-index:        99;
  padding:        28px var(--gutter) 48px;
  flex-direction: column;
  gap:            28px;
  overflow-y:     auto;
}

.mobile-menu.is-open {
  display: flex;
}

.mobile-links {
  display:        flex;
  flex-direction: column;
  gap:            2px;
  list-style:     none;
  margin:         0;
  padding:        0;
}

.mobile-links a {
  display:       block;
  font-size:     1rem;
  font-weight:   var(--orgx-font-weight-medium);
  color:         var(--text-muted);
  padding:       12px 16px;
  border-radius: var(--radius-sm);
  transition:    color var(--ease), background var(--ease);
}

.mobile-links a:hover {
  color:      var(--text);
  background: var(--bg-surface);
}

body.menu-open {
  overflow: hidden;
}

/* ============================================================================
   09) DASHBOARD PAGE — homepage portal view
   ============================================================================ */

/* Full-page portal wrapper */
.dashboard-page {
  flex:           1;
  padding-top:    calc(var(--nav-h) + var(--domain-nav-h) + clamp(40px, 4vw, 52px));
  padding-bottom: clamp(56px, 8vw, 112px);
}

/* Dashboard header — title + domain filters, glass control-bar feel */
.dashboard-title-row {
  display:               flex;
  align-items:           center;
  gap:                   4px;
  flex-wrap:             wrap;
  margin-bottom:         20px;
  padding:               10px 16px 12px;
  background:            rgba(12, 13, 15, 0.68);
  border:                none;
  border-radius:         var(--radius-lg);
  background:            transparent;
  backdrop-filter:       none;
  -webkit-backdrop-filter: none;
  box-shadow:            none;
  min-height:            56px;
}

.dashboard-title__label {
  font-size:      1.3125rem;
  font-weight:    800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text);
  line-height:    1.2;
  white-space:    nowrap;
  flex-shrink:    0;
  margin-right:   8px;
  transition:     opacity var(--orgx-duration-fast) ease;
}

/* Thin vertical separator between title and domain items */
.dashboard-title__sep {
  display:     block;
  width:       1px;
  height:      12px;
  background:  var(--border-active);
  opacity:     0.5;
  flex-shrink: 0;
  margin:      0 6px;
  align-self:  center;
}

/* Domain filter items — inherit all .nav-domain-item styles */
.dashboard-domains {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         0;
  transition:  opacity var(--orgx-duration-fast) ease;
}

/* Header content crossfade: only opacity changes, no position/height movement */
.dashboard-title-row.is-switching .dashboard-title__label,
.dashboard-title-row.is-switching .dashboard-domains {
  opacity: 0;
}

/* ── Portal intro — left-aligned executive introduction ─────────────────────
   Visible only in the Digital Services (All) state.
   Uses display:none when hidden so layout collapses instantly — this ensures
   the scroll position is measured after the final layout, not mid-transition.
   Opacity fade is handled in JS so the visual remains smooth.              */
.portal-intro {
  max-width:      900px;
  padding-bottom: clamp(32px, 4vw, 48px);
  transition:     opacity 200ms ease;
}

.portal-intro.is-hidden {
  display: none;   /* instant layout removal — scroll calculation is always correct */
}

.portal-intro__headline {
  font-size:      clamp(2rem, 4vw, 3.125rem);
  font-weight:    var(--orgx-font-weight-bold);
  line-height:    1.1;
  letter-spacing: -0.025em;
  color:          var(--text);
  margin-bottom:  clamp(16px, 2vw, 22px);
}

.portal-intro__accent {
  color: var(--orgx-green);
}

.portal-intro__text {
  font-size:   clamp(0.9375rem, 1.1vw, 1.0625rem);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   860px;  /* reading width, not centered */
}

/* Mobile: compact but present */
@media (max-width: 640px) {
  .portal-intro {
    padding-bottom: 24px;
  }
  .portal-intro__headline {
    font-size: clamp(1.625rem, 7vw, 2.25rem);
  }
}

/* Tags state — shown when a category is active */
.dashboard-domains--tags {
  display:     flex;
  align-items: center;
  gap:         8px 10px;
  flex-wrap:   wrap;
  /* No container opacity — each tag handles its own opacity state */
}

/* Tags in the domain row — two states only: inactive and active */
.dashboard-domains--tags .topic-tag {
  font-size:  0.5625rem;
  padding:    7px 8px 5px 8px;
  cursor:     pointer;
  transition: opacity var(--orgx-duration-fast) ease;
  /* Default (inactive) opacity comes from .dashboard-title-row .topic-tag below */
}

/* Hover → active state, always wins including over is-tag-inactive */
.dashboard-title-row .dashboard-domains--tags .topic-tag:hover {
  opacity: var(--tag-active-opacity) !important;
}

/* Selected tag → active state */
.dashboard-domains--tags .topic-tag.is-tag-active {
  opacity: var(--tag-active-opacity) !important;
}

/* Unselected when another is active → inactive state */
.dashboard-domains--tags .topic-tag.is-tag-inactive {
  opacity: var(--tag-inactive-opacity) !important;
}

/* Title label is clickable when a category is active — no underlines */
.dashboard-title__label.is-clickable {
  cursor: pointer;
}

/* Dashboard title-row tags: inactive by default, active on hover/selection */
.dashboard-title-row .topic-tag {
  opacity:    var(--tag-inactive-opacity);
  transition: opacity var(--orgx-duration-fast) ease, border-color var(--orgx-duration-fast) ease,
              color var(--orgx-duration-fast) ease, background-color var(--orgx-duration-fast) ease;
}

.dashboard-title-row .topic-tag:hover,
.dashboard-title-row .topic-tag.is-active {
  opacity: var(--tag-active-opacity);
}

/* ── "← All services" reset button ────────────────────────────────────────── */
.portal-back-all {
  display:         none;   /* hidden by default */
  align-items:     center;
  gap:             5px;
  font-family:     inherit;
  font-size:       var(--orgx-font-size-label);
  font-weight:     var(--orgx-font-weight-medium);
  color:           var(--text-dim);
  background:      none;
  border:          none;
  padding:         0 4px;
  cursor:          pointer;
  white-space:     nowrap;
  flex-shrink:     0;
  transition:      color var(--ease);
  text-decoration: none;
}

.portal-back-all.is-visible {
  display: inline-flex;
}

/* Adopts the active domain colour — set via JS adding theme-* class */
.portal-back-all.theme-strategy,
.portal-back-all.theme-strategic-direction  { color: var(--theme-strategy); }
.portal-back-all.theme-org-performance      { color: var(--theme-performance); }
.portal-back-all.theme-intelligent-edge     { color: var(--theme-intelligent-edge); }
.portal-back-all.theme-responsible-impact   { color: var(--theme-responsible-impact); }
.portal-back-all.theme-execution            { color: var(--theme-execution); }

.portal-back-all:hover { opacity: 0.75; }

.portal-back-all:focus-visible {
  outline:        2px solid var(--orgx-green);
  outline-offset: 3px;
  border-radius:  2px;
}

/* Slightly more compact padding than the fixed nav bar */
.dashboard-domains .nav-domain-item {
  padding: 3px 9px;
}

/* Stable scroll anchor — zero-size, never reflows */
#dashboard-anchor {
  display:  block;
  height:   0;
  overflow: hidden;
}

/* Mobile: allow wrapping so items don't overflow */
@media (max-width: 640px) {
  .dashboard-title-row   { gap: 6px; }
  .dashboard-title__sep  { display: none; }
  .dashboard-domains     { flex-wrap: wrap; gap: 2px; }
}

/* ── Topic tags ─────────────────────────────────────────────────────────────
   Static domain-vocabulary tags that communicate the scope of the portal.
   Not interactive filters — purely visual indicators.                      */
.topic-tags {
  display:   flex;
  flex-wrap: wrap;
  gap:       5px;
}

.topic-tag {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        7px 8px 5px;
  border-radius:  5px;
  border:         1px solid;
  display:        inline-flex;
  align-items:    center;
  white-space:    nowrap;
  line-height:    1;
  cursor:         default;
  transition:     opacity var(--orgx-duration-fast) ease;
}

.topic-tag:hover { opacity: 0.75; }

/* Per-domain tag colours — bg ~11%, border ~32%, text = theme colour */
.topic-tag.domain-strategy {
  color:        var(--theme-strategy);
  background:   rgba(149, 193,  31, 0.11);
  border-color: rgba(149, 193,  31, 0.32);
}
.topic-tag.domain-performance {
  color:        var(--theme-performance);
  background:   rgba(232, 154,  47, 0.11);
  border-color: rgba(232, 154,  47, 0.32);
}
.topic-tag.domain-edge {
  color:        var(--theme-intelligent-edge);
  background:   rgba( 91, 184, 214, 0.11);
  border-color: rgba( 91, 184, 214, 0.32);
}
.topic-tag.domain-impact {
  color:        var(--theme-responsible-impact);
  background:   rgba( 55, 199, 185, 0.11);
  border-color: rgba( 55, 199, 185, 0.32);
}
.topic-tag.domain-execution {
  color:        var(--theme-execution-tag-text);
  background:   var(--theme-execution-tag-bg);
  border-color: var(--theme-execution-tag-border);
}
.topic-tag.domain-red {
  color:        #C94A4A;
  background:   rgba(201,  74,  74, 0.11);
  border-color: rgba(201,  74,  74, 0.32);
}


/* ============================================================================
   11) SERVICES GRID
   ============================================================================ */
.services-grid {
  display:               grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items:           stretch;
  gap:                   var(--card-gap);
  position:              relative;
  z-index:               1;

  /* Fade transition — controlled via inline style in JS for instant hide,
     CSS transition handles the fade-back-in                                 */
  transition: opacity var(--filter-fade-out-duration) var(--orgx-ease-standard);
}

.services-grid.is-fading-out {
  opacity:        0;
  pointer-events: none;
}

/* No per-card reveal — grid opacity transition handles the full fade in/out */

/* ============================================================================
   12) SERVICE CARDS
   ============================================================================ */

/* Each card exposes --card-accent for its theme colour.
   The image overlay gradient ends at --card-bg-solid, which matches the card
   body, eliminating any visible seam at rest or on hover.                  */
.service-card {
  --card-accent: transparent;

  width:           100%;
  min-width:       0;
  height:          100%;
  background:      var(--card-bg);
  border:          1px solid var(--card-border);
  border-radius:   var(--radius-lg);
  display:         flex;
  flex-direction:  column;
  position:                relative;
  /* Ambient shadow separates the card surface from the background */
  box-shadow:              var(--orgx-shadow-card);
  /* no overflow:hidden — glow lives at top:-1px outside the box;
     image corner-clipping is handled on .service-card__image directly      */
  transition:
    transform        var(--orgx-duration-default) ease,
    background-color var(--orgx-duration-default) ease,
    border-color     var(--orgx-duration-default) ease,
    box-shadow       var(--orgx-duration-default) ease;
}

/* Intro hidden when filtered OR after any interaction (stays hidden for session) */
.dashboard-page.is-filtered .portal-intro,
.dashboard-page.has-interacted .portal-intro {
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  .services-grid {
    transition: none;
  }
}

/* ── Theme colour injection ──────────────────────────────────────────────── */
.service-card.theme-strategy,
.service-card.theme-strategic-direction   { --card-accent: var(--theme-strategy); }
.service-card.theme-org-performance       { --card-accent: var(--theme-performance); }
.service-card.theme-intelligent-edge      { --card-accent: var(--theme-intelligent-edge); }
.service-card.theme-responsible-impact    { --card-accent: var(--theme-responsible-impact); }
.service-card.theme-execution             { --card-accent: var(--theme-execution); }

/* ── Hover illumination — centered, top edge, theme colour ─────────────── */
/* Invisible at rest. No layout shift (position:absolute).
   Width 40%, centered, soft gradient + 1px blur = no hard line.            */
.service-card::before {
  content:    '';
  position:   absolute;
  top:        -1px;
  left:       50%;
  width:      72%;
  height:     2px;
  z-index:    1;

  transform:  translateX(-50%) scaleX(0.6);
  opacity:    0;

  background: linear-gradient(
    90deg,
    transparent         0%,
    var(--card-accent) 25%,
    var(--card-accent) 75%,
    transparent        100%
  );

  filter:     blur(1px);

  transition:
    opacity   var(--orgx-duration-slow) var(--orgx-ease-standard),
    transform var(--orgx-duration-slow) var(--orgx-ease-standard);
}

.service-card:hover::before {
  opacity:   0.75;
  transform: translateX(-50%) scaleX(1);
}

/* ── Full-card domain colour glow — radial from top ─────────────────────── */
/* No mix-blend-mode — card is solid so blending is not needed and would     */
/* risk showing the page background through the card surface.                */
.service-card::after {
  content:        '';
  position:       absolute;
  inset:          0;
  pointer-events: none;
  z-index:        2;
  border-radius:  var(--radius-lg);
  opacity:        0;
  background:     radial-gradient(
    ellipse at 50% 0%,
    color-mix(in srgb, var(--card-accent) 10%, transparent),
    transparent 35%
  );
  transition:     opacity var(--orgx-duration-default) ease;
}

.service-card:hover::after {
  opacity: 1;
}

/* ── Card hover — depth through shadow/border/glow, minimal movement ────── */
.service-card:hover {
  border-color: rgba(255, 255, 255, 0.18);
  background:   var(--card-bg-hover);
  transform:    translateY(-2px);
  box-shadow:   var(--orgx-shadow-card-hover);
}

/* ── Card image area — bg layer + dark overlay + title/label ────────────────
   Three sub-elements, all absolute inside the wrapper:
     __img-bg      — the actual image (filtered, zooms on hover)
     __img-overlay — the gradient that darkens towards the bottom
     __img-content — title + category label anchored to the bottom edge     */

.service-card__img-wrap {
  position:         relative;
  overflow:         hidden;
  flex-shrink:      0;
  width:            100%;
  aspect-ratio:     16 / 9;
  border-radius:    calc(var(--radius-lg) - 1px)
                    calc(var(--radius-lg) - 1px)
                    0 0;
  background: var(--card-bg-solid);   /* solid warm charcoal behind every image */
}

/* Variant overrides — available for future use if needed */
.service-card--compact .service-card__img-wrap  { height: 130px; }
.service-card--standard .service-card__img-wrap { height: 200px; }

/* Subtiele luxe overlay — donkerder bovenaan, verloopt naar transparant onderaan */
.service-card__img-wrap::before {
  content:        '';
  position:       absolute;
  top:            0;
  left:           0;
  width:          100%;
  height:         100%;
  pointer-events: none;
  z-index:        1;
  background:     linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.66)  0%,
    rgba(0, 0, 0, 0.18) 40%,
    rgba(0, 0, 0, 0.00) 75%
  );
}

/* Background image: greyscale, full opacity — solid, no transparency.       */
.service-card__img-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center top;
  filter:              grayscale(100%) contrast(1.02) brightness(1.28);
  transform:           scale(1.02);
  transform-origin:    center center;
  transition:          transform var(--orgx-duration-slow) var(--orgx-ease-standard);
  will-change:         transform;
  /* NO mask-image — image stays fully opaque so portal bg never shows through */
}

.service-card:hover .service-card__img-bg {
  transform: scale(1.07);
}

/* Gradient overlay — fades image into the exact card surface colour.        */
/* Uses --card-bg-solid throughout so the fade is natural and the final stop */
/* is identical to the card body below — zero seam, zero transparency.       */
.service-card__img-overlay {
  position:   absolute;
  inset:      0;
  z-index:    1;
  background: linear-gradient(
    to bottom,
    rgba(22, 23, 26, 0.12)  0%,
    rgba(22, 23, 26, 0.10) 35%,
    rgba(22, 23, 26, 0.20) 62%,
    rgba(22, 23, 26, 0.62) 82%,
    var(--card-bg-solid)  100%
  );
}

/* Title + label anchored to the bottom of the image */
.service-card__img-content {
  position:       absolute;
  bottom:         0;
  left:           0;
  right:          0;
  z-index:        2;
  padding:        20px 22px;
  display:        flex;
  flex-direction: column;
  gap:            6px;
}

/* Compact variant adjustments — only applied when explicitly added */
.service-card--compact .service-card__img-content { padding: 10px 16px; }

/* Title — strong, warm white, slightly lifted from the dark gradient */
.service-card__title {
  font-size:   1.1875rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text-primary);
  line-height: 1.25;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.50);
}

.service-card--compact .service-card__title { font-size: 0.9375rem; font-weight: var(--orgx-font-weight-semibold); }

/* Theme label on image: slightly brighter than default --text-dim  */
.service-card__img-content .theme-label {
  color: rgba(210, 205, 195, 0.72);
}

/* On hover: label text adopts domain colour (overrides the above) */
.service-card:hover .service-card__img-content .theme-label {
  color: var(--card-accent);
}

/* ── Card body — stable flex column; no height changes from content/fonts ──────── */
.service-card__body {
  flex:           1;
  padding:        16px 22px 10px;
  display:        flex;
  flex-direction: column;
  gap:            10px;
  min-width:      0;
  overflow:       hidden;   /* contain any overflow so body doesn't grow unexpectedly */
}

.service-card--compact .service-card__body { padding: 10px 16px 8px; }

.service-card__excerpt {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-secondary);
  line-height: var(--orgx-line-height-body);
  /* Clamp at 3 lines so font-metric changes don't alter height */
  display:                -webkit-box;
  -webkit-line-clamp:     3;
  -webkit-box-orient:     vertical;
  overflow:               hidden;
}

/* ── Card body tags ─────────────────────────────────────────────────────────── */
.card-body-tags {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         4px 8px;
  min-height:  22px;
  min-width:   0;
  overflow:    hidden;
  opacity:     var(--tag-inactive-opacity);   /* inactive by default */
  transition:  opacity var(--orgx-duration-slow) var(--orgx-ease-standard);
}

/* Card hover → all tags become active */
.service-card:hover .card-body-tags {
  opacity: var(--tag-active-opacity);
}

/* Card hover + tag hover → that tag returns to inactive (shows it's clickable) */
.service-card:hover .card-body-tags .topic-tag:hover {
  opacity:    var(--tag-inactive-opacity);
  transition: opacity 120ms ease;
}

.card-body-tags .topic-tag {
  font-size:    0.5625rem;
  padding:      7px 8px 5px 8px;
  cursor:       pointer;
  white-space:  normal;
  color:        var(--card-accent);
  background:   color-mix(in srgb, var(--card-accent) 11%, transparent);
  border-color: color-mix(in srgb, var(--card-accent) 32%, transparent);
}

/* ── Card value statement — reserves 2-line height, only opacity animates ───
   Always fully readable: wraps instead of truncating. min-height reserves
   space for 2 lines up front so a 1-line value doesn't shift card height
   relative to a 2-line value elsewhere in the same grid row.                */
.service-card__value {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   0.9375rem;
  font-weight: var(--orgx-font-weight-semibold);
  line-height: 1.35;
  min-height:  calc(1.35em * 2);
  white-space: normal;
  overflow:    visible;
  text-overflow: unset;
  color:       var(--card-accent);
  margin-top:  auto;
  opacity:     0.62;
  transition:  opacity var(--orgx-duration-default) ease;
}

.service-card:hover .service-card__value {
  opacity: 1;
}

.service-card__value i,
.service-card__value span {
  color: var(--card-accent);
}

/* ── Card footer — "Learn more" bottom-right ─────────────────────────────────── */
.service-card__footer {
  display:         flex;
  justify-content: flex-end;
  align-items:     center;
  padding:         10px 22px 14px;
  border-top:      1px solid rgba(255, 255, 255, 0.06);
  margin-top:      auto;
  min-width:       0;
}

.service-card--compact .service-card__footer { padding: 8px 16px 12px; }

.card-cta {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--text-dim);
  transition:  color var(--ease);
  white-space: nowrap;
  flex-shrink: 0;
}

/* On hover: CTA adopts the card's domain colour */
.service-card:hover .card-cta {
  color: var(--card-accent);
}

.card-cta--disabled {
  color:  var(--text-dim);
  cursor: default;
}

/* Card with a real permalink — whole surface is a click target via JS */
.service-card[data-permalink] {
  cursor: pointer;
}

/* ============================================================================
   13) THEME LABELS
   ============================================================================ */
/* ── Theme label — dot + neutral text, no pill, no button ───────────────
   The coloured dot is the permanent category signal.
   The text is neutral at rest and transitions to the domain colour on hover.
   No border, no background, no fill — ever.                               */
.theme-label {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
  transition:     color 190ms ease;
}

/* On card hover: only the text colour changes — nothing else */
.service-card:hover .theme-label {
  color: var(--card-accent);
}

/* Hovering the label itself reverts the highlight — signals it's a separate click target */
.service-card:hover .theme-label:hover {
  color: var(--text-dim);
}

/* Clickable domain label on card */
.service-card .theme-label[data-filter] {
  cursor: pointer;
}

.service-card .theme-label[data-filter]:hover {
  color: var(--text-dim);
  opacity: 1;
}

/* ── Theme icon — small FA icon, colour inherits from theme-label parent ─── */
.theme-dot {
  font-size:   0.55rem;
  color:       rgba(255, 255, 255, 0.4);   /* fallback for unthemed */
  flex-shrink: 0;
  line-height: 1;
  width:       auto;
  height:      auto;
}

/* Each domain icon shows its theme colour */
.theme-label--strategy .theme-dot,
.theme-label--strategic-direction .theme-dot  { color: var(--theme-strategy); }
.theme-label--org-performance .theme-dot      { color: var(--theme-performance); }
.theme-label--intelligent-edge .theme-dot     { color: var(--theme-intelligent-edge); }
.theme-label--responsible-impact .theme-dot   { color: var(--theme-responsible-impact); }
.theme-label--execution .theme-dot            { color: var(--theme-execution); }

/* Plain variant — no dot, no uppercase; keeps domain colour on text */
.theme-label--plain {
  text-transform: none;
  letter-spacing: 0.02em;
  font-weight:    var(--orgx-font-weight-semibold);
}

/* ============================================================================
   14) STATUS BADGES
   ============================================================================ */
.status-badge {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        3px 9px 3px 7px;
  border-radius:  20px;
  white-space:    nowrap;
  flex-shrink:    0;
}

.status-badge::before {
  content:       '';
  width:         5px;
  height:        5px;
  border-radius: 50%;
  flex-shrink:   0;
}

.status-badge--ready   { color: var(--status-ready);   background: var(--status-ready-bg); }
.status-badge--ready::before   { background: var(--status-ready); }

.status-badge--partial { color: var(--status-partial); background: var(--status-partial-bg); }
.status-badge--partial::before { background: var(--status-partial); }

.status-badge--blocked { color: var(--status-blocked); background: var(--status-blocked-bg); }
.status-badge--blocked::before { background: var(--status-blocked); }

.status-badge--pending { color: var(--status-pending); background: var(--status-pending-bg); }
.status-badge--pending::before { background: var(--status-pending); }

/* ============================================================================
   15) SINGLE SERVICE PAGE — premium proposition layout
   ============================================================================ */
.service-single {
  padding-top:    calc(var(--nav-h) + var(--domain-nav-h) + clamp(24px, 3vw, 40px));
  padding-bottom: clamp(56px, 8vw, 112px);
  flex:           1;
  display:        flex;
  flex-direction: column;
  position:       relative;
  z-index:        1;
}

.service-single .portal-wrap {
  display:        flex;
  flex-direction: column;
  gap:            clamp(16px, 2.5vw, 28px);
}

/* Anchor scroll offset — keeps target below the fixed navigation */
.service-single .portal-wrap [id] {
  scroll-margin-top: calc(var(--nav-h) + var(--domain-nav-h) + 16px);
}

/* Domain accent colour — cascades to all sdp-* children */
.service-single.theme-strategy,
.service-single.theme-strategic-direction   { --card-accent: var(--theme-strategy); }
.service-single.theme-org-performance       { --card-accent: var(--theme-performance); }
.service-single.theme-intelligent-edge      { --card-accent: var(--theme-intelligent-edge); }
.service-single.theme-responsible-impact    { --card-accent: var(--theme-responsible-impact); }
.service-single.theme-execution             { --card-accent: var(--theme-execution); }

/* Proposition card: reset padding (sdp-split handles layout); kill top glow */
.service-single .service-detail {
  padding:       0 0 clamp(28px, 4vw, 40px);
  margin-bottom: clamp(12px, 1.8vw, 18px);
}

.service-single .service-detail::before {
  display: none;
}

/* ── Back link ───────────────────────────────────────────────────────────── */
.sdp-back {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       var(--orgx-font-size-label);
  font-weight:     var(--orgx-font-weight-medium);
  color:           var(--text-dim);
  text-decoration: none;
  margin-bottom:   -12px;
  transition:      color 200ms ease;
}

.sdp-back:hover { color: var(--text-muted); }

/* ── Proposition split layout ────────────────────────────────────────────── */
.sdp-split {
  display:               grid;
  grid-template-columns: 1fr 400px;
  min-height:            460px;
}

/* ── Content side (left) ─────────────────────────────────────────────────── */
.sdp-content {
  padding:        clamp(40px, 5.5vw, 64px) clamp(36px, 5vw, 60px);
  display:        flex;
  flex-direction: column;
  gap:            clamp(18px, 2.5vw, 24px);
}

/* Domain label in domain colour on single page */
.sdp-domain .theme-label {
  color:           var(--card-accent);
  font-size:       0.75rem;
  text-decoration: none;
  cursor:          pointer;
  transition:      opacity var(--orgx-duration-fast) ease;
}

.sdp-domain .theme-label:hover { opacity: 0.75; }

/* Topic tags on single page — clickable links, no underline */
.sdp-topics .topic-tag {
  text-decoration: none;
  cursor:          pointer;
}

.sdp-title {
  font-size:      clamp(1.0625rem, 1.6vw, 1.375rem);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: -0.01em;
  color:          var(--text);
  line-height:    1.2;
  margin:         0;
}

.sdp-excerpt {
  font-size:   clamp(0.8125rem, 0.9vw, 0.875rem);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   52ch;
  margin:      0;
}

/* Value statement — plain, domain colour, separated from excerpt */
.sdp-value {
  display:     flex;
  align-items: flex-start;
  gap:         10px;
  padding-top: clamp(14px, 2vw, 20px);
  border-top:  1px solid rgba(255, 255, 255, 0.07);
  margin-top:  auto;
}

.sdp-value__icon {
  color:       var(--card-accent);
  font-size:   1.0625rem;
  flex-shrink: 0;
  margin-top:  3px;
}

.sdp-value__text {
  font-size:   clamp(1.0625rem, 1.5vw, 1.25rem);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--card-accent);
  line-height: 1.3;
}

.sdp-topics {
  display:   flex;
  flex-wrap: wrap;
  gap:       6px 8px;
}

/* ── Image column (right) — image + CTA stacked ─────────────────────────── */
.sdp-image-col {
  display:        flex;
  flex-direction: column;
}

.sdp-image {
  flex:     1;
  position: relative;
  overflow: hidden;
  min-height: 260px;
}

/* CTA panel — sits below the image in the right column */
.sdp-cta {
  padding:          clamp(22px, 3vw, 30px) clamp(24px, 3vw, 32px) clamp(24px, 3vw, 32px);
  display:          flex;
  flex-direction:   column;
  gap:              10px;
  background:       rgba(0, 0, 0, 0.22);
  border-top:       1px solid rgba(255, 255, 255, 0.06);
}

/* Shared button base — consistent height, radius and font */
.sdp-btn-primary,
.sdp-btn-tool {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             8px;
  padding:         11px 22px;
  font-family:     inherit;
  font-size:       var(--orgx-font-size-body);
  font-weight:     var(--orgx-font-weight-semibold);
  letter-spacing:  0.02em;
  border-radius:   var(--radius);
  text-decoration: none;
  cursor:          pointer;
  white-space:     nowrap;
  line-height:     1;
}

/* Primary — uses the active domain/category accent colour */
.sdp-btn-primary {
  background:   var(--card-accent, var(--accent));
  color:        #0c0e13;
  border:       1px solid var(--card-accent, var(--accent));
  transition:   background 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.sdp-btn-primary:hover {
  background:   color-mix(in srgb, var(--card-accent, var(--accent)) 82%, #fff);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 82%, #fff);
  box-shadow:   0 0 22px color-mix(in srgb, var(--card-accent, var(--accent)) 22%, transparent);
  color:        #0c0e13;
}

.sdp-btn-primary:focus-visible {
  outline:        2px solid color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent);
  outline-offset: 2px;
}

/* Secondary — subtle outline ghost */
.sdp-btn-tool {
  background:  transparent;
  color:       var(--text-muted);
  border:      1px solid var(--border-hover);
  font-weight: var(--orgx-font-weight-medium);
  transition:  background 200ms ease, border-color 200ms ease, color 200ms ease;
}

.sdp-btn-tool:hover {
  background:   var(--bg-surface);
  border-color: var(--border-active);
  color:        var(--text);
}

.sdp-btn-tool:focus-visible {
  outline:        2px solid rgba(255, 255, 255, 0.28);
  outline-offset: 2px;
}

.sdp-image__bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  filter:              grayscale(100%) contrast(1.02) brightness(1.15);
  transform:           scale(1.02);
}

/* Gradient: blends from card bg on the left, darkens at right and bottom */
.sdp-image__overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to right,
    var(--card-bg)          0%,
    rgba(16, 17, 19, 0.40) 18%,
    rgba(16, 17, 19, 0.10) 55%,
    rgba(16, 17, 19, 0.42) 100%
  );
}

/* ── Content section cards (below proposition) ───────────────────────────── */
.sdp-sections {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   clamp(14px, 2vw, 20px);
  margin-top:            clamp(20px, 3vw, 28px);
}

.sdp-sections--prose {
  grid-template-columns: 1fr;
  max-width:             720px;
}

.sdp-section-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       clamp(20px, 3vw, 32px);
}

.sdp-section-card--full {
  grid-column: 1 / -1;
}

.sdp-section-card h2 {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--card-accent);
  margin-bottom:  12px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--border);
}

.sdp-section-card .prose {
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  font-size:   0.9375rem;
}

.sdp-section-card .prose p              { margin-bottom: 1em; }
.sdp-section-card .prose p:last-child   { margin-bottom: 0; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .sdp-split {
    grid-template-columns: 1fr;
  }

  /* Image column above content on tablet/mobile */
  .sdp-image-col {
    order:      -1;
  }

  .sdp-image {
    min-height: 240px;
  }

  .sdp-image__overlay {
    background: linear-gradient(
      to bottom,
      rgba(22, 23, 26, 0.12)  0%,
      rgba(22, 23, 26, 0.72) 100%
    );
  }
}

@media (max-width: 640px) {
  .sdp-content { gap: 14px; }
  .sdp-image   { min-height: 200px; }
  .sdp-cta     { padding: 16px 18px 20px; }
}

/* ── Floating detail card ────────────────────────────────────────────────────── */
.service-detail {
  --card-accent: transparent;

  position:      relative;
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow:    0 4px 28px rgba(0, 0, 0, 0.60),
                 0 0 48px rgba(0, 0, 0, 0.40),
                 0 0 0 1px rgba(255, 255, 255, 0.06),
                 0 0 32px rgba(255, 255, 255, 0.03);
  padding:       clamp(32px, 5vw, 56px) clamp(28px, 5vw, 56px) clamp(40px, 5vw, 64px);
  overflow:      hidden;
}

/* Domain colour injection */
.service-detail.theme-strategy,
.service-detail.theme-strategic-direction   { --card-accent: var(--theme-strategy); }
.service-detail.theme-org-performance       { --card-accent: var(--theme-performance); }
.service-detail.theme-intelligent-edge      { --card-accent: var(--theme-intelligent-edge); }
.service-detail.theme-responsible-impact    { --card-accent: var(--theme-responsible-impact); }
.service-detail.theme-execution             { --card-accent: var(--theme-execution); }

/* Full-width domain colour glow at top edge — mirrors card ::before */
.service-detail::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     2px;
  background: linear-gradient(
    90deg,
    transparent         0%,
    var(--card-accent) 20%,
    var(--card-accent) 80%,
    transparent        100%
  );
  filter:     blur(1px);
}

/* ── Back link ───────────────────────────────────────────────────────────────── */
.service-detail__back {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       var(--orgx-font-size-label);
  font-weight:     var(--orgx-font-weight-medium);
  color:           var(--text-dim);
  text-decoration: none;
  margin-bottom:   clamp(28px, 4vw, 40px);
  transition:      color 200ms ease;
}

.service-detail__back:hover {
  color: var(--text-muted);
}

/* ── Header ──────────────────────────────────────────────────────────────────── */
.service-detail__header {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.service-detail__domain {
  margin-bottom: 14px;
}

.service-detail__title {
  font-size:      clamp(1.5rem, 3.5vw, 2.25rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  line-height:    1.15;
  margin-bottom:  16px;
}

.service-detail__topics {
  display:     flex;
  flex-wrap:   wrap;
  gap:         6px 8px;
  margin-bottom: 20px;
  opacity:     var(--tag-active-opacity);
}

.service-detail__value {
  display:     inline-flex;
  align-items: center;
  gap:         8px;
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--text-dim);
}

.service-detail__value i {
  color:     var(--card-accent);
  font-size: 0.75rem;
  opacity:   0.85;
}

/* ── Intro ───────────────────────────────────────────────────────────────────── */
.service-detail__intro {
  margin-bottom: clamp(24px, 3vw, 36px);
}

.service-detail__intro p {
  font-size:   clamp(0.9375rem, 1.3vw, 1.0625rem);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   72ch;
}

/* ── Divider ─────────────────────────────────────────────────────────────────── */
.service-detail__divider {
  border:        none;
  border-top:    1px solid var(--border);
  margin-block:  clamp(28px, 4vw, 44px);
}

/* ── Content sections ────────────────────────────────────────────────────────── */
.service-detail__body {
  display:        flex;
  flex-direction: column;
  gap:            clamp(32px, 4vw, 48px);
}

.service-detail__section {
  max-width: 720px;
}

.service-detail__section h2 {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  14px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--border);
}

.service-detail__section .prose {
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  font-size:   0.9375rem;
}

.service-detail__section .prose p {
  margin-bottom: 1em;
}

.service-detail__section .prose p:last-child {
  margin-bottom: 0;
}

/* ── CTA ─────────────────────────────────────────────────────────────────────── */
.service-detail__cta {
  display:      flex;
  align-items:  center;
  gap:          14px;
  flex-wrap:    wrap;
  margin-top:   clamp(36px, 5vw, 56px);
  padding-top:  clamp(28px, 4vw, 40px);
  border-top:   1px solid var(--border);
}

.service-detail__btn {
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  font-size:       var(--orgx-font-size-body);
  font-weight:     var(--orgx-font-weight-semibold);
  letter-spacing:  0.01em;
  padding:         11px 22px; /* was 10px 20px — aligned to the family's dominant pair, see DESIGN-SYSTEM-CHANGELOG.md */
  border-radius:   var(--radius);
  text-decoration: none;
  transition:      background var(--orgx-duration-default) ease, color var(--orgx-duration-default) ease, border-color var(--orgx-duration-default) ease;
  cursor:          pointer;
}

.service-detail__btn--primary {
  background: var(--card-accent);
  color:      #0c0e13; /* was #000 — aligned to the near-black used by every other primary button in this family */
  border:     1px solid transparent;
}

.service-detail__btn--primary:hover {
  /* was opacity:0.88 — every other primary button in this family lightens
     via color-mix(); aligned so the family shares one hover technique */
  background: color-mix(in srgb, var(--card-accent) 82%, #fff);
}

.service-detail__btn--ghost {
  background:   transparent;
  color:        var(--text-muted);
  border:       1px solid var(--card-border);
}

.service-detail__btn--ghost:hover {
  border-color: var(--card-border-hover);
  color:        var(--text);
}

/* Fallback for no domain colour — ghost style for primary button */
.service-detail:not([class*="theme-"]) .service-detail__btn--primary {
  background:   transparent;
  color:        var(--text-muted);
  border-color: var(--card-border);
}

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .service-detail__cta {
    flex-direction: column;
    align-items:    flex-start;
  }

  .service-detail__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── Related services ───────────────────────────────────────────────────────── */
.service-related {
  margin-top:  clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top:  1px solid var(--border);
}

.service-related__header {
  margin-bottom: clamp(20px, 3vw, 28px);
}

.service-related__label {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

.services-related-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--card-gap);
}

@media (max-width: 900px) {
  .services-related-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 580px) {
  .services-related-grid { grid-template-columns: 1fr; }
}

/* ── Legacy hero/section styles kept for backward compat ─────────────────────── */
/* ── Hero header ────────────────────────────────────────────────────────────── */
.service-single__hero {
  padding-block:  clamp(48px, 7vw, 96px);
  background:     linear-gradient(to bottom, var(--bg-surface-2) 0%, transparent 100%);
  border-bottom:  1px solid var(--border);
}

.service-single__meta {
  display:       flex;
  align-items:   center;
  gap:           12px;
  margin-bottom: 20px;
}

.service-single__title {
  margin-bottom: 20px;
}

.service-single__excerpt {
  font-size:     clamp(1rem, 1.4vw, 1.125rem);
  color:         var(--text-muted);
  max-width:     640px;
  margin-bottom: 32px;
  line-height:   var(--orgx-line-height-relaxed);
}

.service-single__actions {
  display:     flex;
  align-items: center;
  gap:         14px;
  flex-wrap:   wrap;
}

/* ── Featured image ─────────────────────────────────────────────────────────── */
.service-single__image {
  margin-block: 40px;
}

.service-single__image img {
  width:         100%;
  border-radius: var(--radius-lg);
  border:        1px solid var(--border);
}

/* ── Structured sections ────────────────────────────────────────────────────── */
.service-sections {
  padding-block: clamp(40px, 6vw, 80px);
  display:       flex;
  flex-direction: column;
  gap:           52px;
}

.service-section {
  max-width: 720px;
}

.service-section > h2 {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  16px;
  padding-bottom: 12px;
  border-bottom:  1px solid var(--border);
}

/* ── Main content ────────────────────────────────────────────────────────────── */
.service-content {
  padding-bottom: clamp(40px, 6vw, 80px);
}

/* ============================================================================
   ABOUT PAGE — Digital Services onboarding template
   ============================================================================ */
.about-header {
  padding-bottom:  clamp(40px, 5vw, 64px);
  border-bottom:   1px solid var(--border);
  margin-bottom:   clamp(48px, 6vw, 72px);
  max-width:       720px;
}

.about-header__intro {
  font-size:   clamp(1rem, 1.4vw, 1.125rem);
  color:       var(--text-muted);
  margin-top:  16px;
  line-height: var(--orgx-line-height-relaxed);
}

/* Numbered section layout: number label left, content right */
.about-section {
  display:       grid;
  grid-template-columns: 40px 1fr;
  gap:           0 40px;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.about-section__label {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  color:          var(--text-dim);
  padding-top:    8px;
}

.about-section__content h2 {
  margin-bottom: 20px;
}

.about-section__intro {
  color:         var(--text-muted);
  margin-bottom: 28px;
}

/* Domain cards in the about page */
.about-domains {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.about-domain {
  padding:        16px 20px;
  background:     var(--card-bg);
  border:         1px solid var(--card-border);
  border-radius:  var(--radius);
  display:        grid;
  grid-template-columns: 220px 1fr;
  align-items:    center;
  gap:            24px;
  transition:     border-color var(--ease);
}

.about-domain:first-child { border-radius: var(--radius) var(--radius) var(--radius-sm) var(--radius-sm); }
.about-domain:last-child  { border-radius: var(--radius-sm) var(--radius-sm) var(--radius) var(--radius); }

.about-domain:hover {
  border-color: var(--card-border-hover);
}

.about-domain p {
  font-size:  var(--orgx-font-size-body);
  color:      var(--text-muted);
  margin:     0;
  line-height: var(--orgx-line-height-body);
}

/* FAQ list */
.about-faq {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.about-faq__item {
  padding:       20px 0;
  border-bottom: 1px solid var(--border);
}

.about-faq__item:last-child {
  border-bottom: none;
}

.about-faq__item h3 {
  font-size:     0.9375rem;
  font-weight:   var(--orgx-font-weight-semibold);
  color:         var(--text);
  margin-bottom: 8px;
}

.about-faq__item p {
  font-size:  var(--orgx-font-size-body);
  color:      var(--text-muted);
  line-height: 1.65;
}

/* Responsive */
@media (max-width: 640px) {
  .about-section {
    grid-template-columns: 1fr;
    gap: 12px 0;
  }

  .about-domain {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ── Bottom CTA ──────────────────────────────────────────────────────────────── */
.service-single__cta {
  padding-block:  clamp(40px, 5vw, 64px);
  border-top:     1px solid var(--border);
  display:        flex;
  align-items:    center;
  gap:            24px;
  flex-wrap:      wrap;
  margin-top:     auto;
}

/* ── Back link ────────────────────────────────────────────────────────────────── */
.back-link {
  font-size:       var(--orgx-font-size-body);
  font-weight:     var(--orgx-font-weight-medium);
  color:           var(--text-muted);
  transition:      color var(--ease);
  display:         inline-flex;
  align-items:     center;
  gap:             6px;
  margin-bottom:   24px;
  text-decoration: none;
}

.back-link:hover {
  color: var(--text);
}

.service-single__cta .back-link {
  margin-bottom: 0;
}

/* ============================================================================
   16) ARCHIVE PAGES
   ============================================================================ */
.archive-services,
.archive-default {
  padding-top:    calc(var(--nav-h) + var(--domain-nav-h) + var(--section-pad));
  padding-bottom: var(--section-pad);
  min-height:     80vh;
  flex:           1;
}

.archive-header {
  margin-bottom: 40px;
}

.archive-header h1 {
  margin-bottom: 8px;
}

/* Pagination */
.nav-links-pagination {
  margin-top: 48px;
  display:    flex;
  gap:        8px;
  flex-wrap:  wrap;
}

.page-numbers {
  display:       inline-flex;
  align-items:   center;
  padding:       7px 14px;
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  font-size:     var(--orgx-font-size-body);
  font-weight:   var(--orgx-font-weight-medium);
  color:         var(--text-muted);
  transition:    border-color var(--ease), color var(--ease), background var(--ease);
}

.page-numbers:hover {
  border-color: var(--border-hover);
  color:        var(--text);
  background:   var(--bg-surface);
}

.page-numbers.current {
  background:   var(--accent);
  border-color: var(--accent);
  color:        #0c0e13;
  font-weight:  var(--orgx-font-weight-bold);
}

/* ============================================================================
   17) GENERIC PAGE / 404
   ============================================================================ */
.page-content,
.error-404 {
  padding-top:    calc(var(--nav-h) + var(--domain-nav-h) + var(--section-pad));
  padding-bottom: var(--section-pad);
  min-height:     80vh;
  flex:           1;
}

.page-article h1 {
  margin-bottom: 32px;
}

.error-404 .eyebrow {
  font-size: 1rem;
}

.error-404 h1 {
  margin-bottom: 16px;
}

.error-404 p.text-muted {
  margin-bottom: 32px;
  font-size:     1.0625rem;
}

/* ============================================================================
   18) PROSE (WordPress editor content)
   ============================================================================ */
.prose {
  color: var(--text-muted);
}

.prose > * + * { margin-top: 1.25em; }

.prose h2,
.prose h3 {
  color:      var(--text);
  margin-top: 2em;
}

.prose ul,
.prose ol {
  padding-left: 1.5em;
}

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

.prose ul li { list-style-type: disc; }
.prose ol li { list-style-type: decimal; }

.prose li::marker { color: var(--accent); }

.prose a {
  color: var(--accent);
}

.prose a:hover {
  text-decoration: underline;
}

.prose strong {
  color:       var(--text);
  font-weight: var(--orgx-font-weight-semibold);
}

.prose em { font-style: italic; }

.prose blockquote {
  border-left: 3px solid var(--border-active);
  padding-left: 1.25em;
  color:        var(--text-dim);
  font-style:   italic;
}

.prose code {
  background:    var(--bg-surface-2);
  padding:       2px 6px;
  border-radius: var(--radius-sm);
  font-size:     0.875em;
  color:         var(--accent);
  font-family:   ui-monospace, 'Cascadia Code', monospace;
}

.prose pre {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       18px 22px;
  overflow-x:    auto;
}

.prose pre code {
  background: none;
  padding:    0;
  font-size:  0.9em;
  color:      var(--text-muted);
}

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

.prose img {
  border-radius: var(--radius);
  border:        1px solid var(--border);
}

.prose table {
  width:           100%;
  border-collapse: collapse;
  font-size:       0.9375rem;
}

.prose th,
.prose td {
  padding:     10px 14px;
  border:      1px solid var(--border);
  text-align:  left;
}

.prose th {
  background: var(--bg-surface);
  color:      var(--text);
  font-weight: var(--orgx-font-weight-semibold);
}

/* ============================================================================
   19) POST LIST (index.php fallback)
   ============================================================================ */
.post-list {
  display:        flex;
  flex-direction: column;
}

.post-item {
  padding-block: 20px;
  border-bottom: 1px solid var(--border);
}

.post-item h2 {
  font-size:     1.125rem;
  margin-bottom: 8px;
}

.post-item h2 a {
  color:      var(--text);
  transition: color var(--ease);
}

.post-item h2 a:hover {
  color: var(--accent);
}

.post-item p {
  color:     var(--text-muted);
  font-size: 0.9375rem;
}

/* ============================================================================
   20) FOOTER
   ============================================================================ */
.site-footer {
  border-top: 1px solid var(--border);
  padding:    28px 0;
  margin-top: auto;
}

.footer-inner {
  max-width:      var(--max-w);
  margin-inline:  auto;
  padding-inline: var(--gutter);
  display:        flex;
  align-items:    center;
  justify-content: space-between;
  gap:            24px;
  flex-wrap:      wrap;
}

.footer-brand {
  display:     flex;
  align-items: center;
  gap:         10px;
}

.footer-logo {
  height:  20px;
  width:   auto;
  opacity: 0.55;
}

.footer-tagline {
  font-size:      var(--orgx-font-size-eyebrow);
  letter-spacing: 0.07em;
  color:          var(--text-dim);
  text-transform: lowercase;
  border-left:    1px solid var(--border-hover);
  padding-left:   10px;
}

.footer-copy {
  font-size: var(--orgx-font-size-label);
  color:     var(--text-dim);
}

.footer-nav {
  display:     flex;
  align-items: center;
  gap:         20px;
}

.footer-nav a {
  font-size:  var(--orgx-font-size-label);
  color:      var(--text-dim);
  transition: color var(--ease);
}

.footer-nav a:hover {
  color: var(--text-muted);
}

/* ============================================================================
   21) WORDPRESS DEFAULT: alignment, captions etc.
   ============================================================================ */
.aligncenter { margin-inline: auto; text-align: center; }
.alignleft   { float: left; margin-right: 1.5em; }
.alignright  { float: right; margin-left: 1.5em; }

.wp-caption {
  max-width: 100%;
}

.wp-caption-text {
  font-size:  var(--orgx-font-size-body);
  color:      var(--text-dim);
  margin-top: 8px;
}

/* ============================================================================
   22) TAG COLOUR LEGEND (homepage bottom)
   ============================================================================ */
.tag-legend {
  display: none;
  margin-top:  clamp(48px, 6vw, 72px);
  padding-top: clamp(28px, 4vw, 40px);
  border-top:  1px solid var(--border);
}

.tag-legend__title {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  clamp(20px, 3vw, 28px);
}

.tag-legend__grid {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.tag-legend__domain {
  --domain-colour: var(--text-dim);
  display:         flex;
  align-items:     flex-start;
  gap:             20px;
}

.tag-legend__domain.theme-strategy           { --domain-colour: var(--theme-strategy); }
.tag-legend__domain.theme-org-performance    { --domain-colour: var(--theme-performance); }
.tag-legend__domain.theme-intelligent-edge   { --domain-colour: var(--theme-intelligent-edge); }
.tag-legend__domain.theme-responsible-impact { --domain-colour: var(--theme-responsible-impact); }
.tag-legend__domain.theme-execution          { --domain-colour: var(--theme-execution); }
.tag-legend__domain.theme-red                { --domain-colour: #C94A4A; }

.tag-legend__domain-head {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  flex-shrink: 0;
  width:       260px;
  padding-top: 1px;
}

.tag-legend__domain-head .domain-dot {
  margin-top: 3px;
}

.tag-legend__domain-info {
  display:        flex;
  flex-direction: column;
  gap:            3px;
}

.tag-legend__domain-name {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--text-muted);
  white-space: nowrap;
}

.tag-legend__meta {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.tag-legend__hex {
  font-family:    ui-monospace, 'Cascadia Code', monospace;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-regular);
  letter-spacing: 0.04em;
  color:          var(--domain-colour);
  background:     transparent;
  padding:        0;
}

.tag-legend__opacity {
  font-family:    ui-monospace, 'Cascadia Code', monospace;
  font-size:      0.625rem;
  letter-spacing: 0.03em;
  color:          var(--text-dim);
  white-space:    nowrap;
}

.tag-legend__tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  flex:        1;
  padding-top: 1px;
}

/* ============================================================================
   23) RESPONSIVE — TABLET (<= 1024px)
   ============================================================================ */
@media (max-width: 1024px) {

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

  .nav-menu {
    display: none;
  }

  .nav-actions {
    display: none;
  }

  .nav-hamburger {
    display:     flex;
    margin-left: auto;
  }


  /* Hide the domain filter bar on tablet/mobile — it lives in the hamburger menu */
  .domain-nav-bar {
    display: none;
  }

  :root {
    --domain-nav-h: 0px;
  }

}

/* ============================================================================
   24) RESPONSIVE — MOBILE (<= 640px)
   ============================================================================ */
@media (max-width: 640px) {

  :root {
    --section-pad: clamp(40px, 10vw, 64px);
  }

  .services-grid {
    grid-template-columns: 1fr;   /* explicit 1-col safety below 640px */
    gap:                   16px;
  }

  .dashboard-page {
    padding-top: calc(var(--nav-h) + 14px);
  }

  .dashboard-title-row {
    margin-bottom: 16px;
    padding-bottom: 12px;
  }

  .topic-tags {
    gap: 4px;
  }

  /* Category row scrolls horizontally on mobile — no overflow or wrap issues */
  .dashboard-domains {
    overflow-x:                 auto;
    flex-wrap:                  nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width:            none;
    padding-bottom:             2px;
  }
  .dashboard-domains::-webkit-scrollbar { display: none; }

  .dashboard-domains--tags {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  /* iOS Safari / Android: background-attachment: fixed causes rendering bugs */
  .portal-bg-image {
    background-attachment: scroll;
  }

  .palette-preview__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .tag-legend__domain {
    flex-direction: column;
    gap:            8px;
  }

  .tag-legend__domain-head {
    width: auto;
  }

  .tag-legend__domain-head .domain-dot {
    margin-top: 4px;
  }

  .footer-inner {
    flex-direction:  column;
    align-items:     flex-start;
    gap:             16px;
  }

  .service-single__cta {
    flex-direction: column;
    align-items:    flex-start;
  }

  .service-sections {
    gap: 36px;
  }

  .service-single__hero {
    padding-block: 40px;
  }

}

/* ============================================================================
   24) SERVICE DETAIL PROTOTYPE (page-about.php — Strategic Pressure Test)
       Main panel reuses sdp-* classes from section 15.
       Only unique additions below. Safe to delete entirely.
   ============================================================================ */

/* ── Section label — reusable eyebrow ─────────────────────────────────────── */
.assd-section-label {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  clamp(12px, 1.5vw, 16px);
}

/* ── Prose lists inside sdp-section-card ───────────────────────────────────── */
.sdp-section-card .prose ol,
.sdp-section-card .prose ul {
  padding-left: 1.25em;
  color:        var(--text-muted);
  font-size:    0.9375rem;
  line-height:  var(--orgx-line-height-relaxed);
}

.sdp-section-card .prose li          { margin-bottom: 0.45em; }
.sdp-section-card .prose li:last-child { margin-bottom: 0; }

/* ── Outcome tiles — compact dashboard cards ───────────────────────────────── */
.assd-tiles {
  margin-top: clamp(18px, 2.5vw, 24px);
}

.assd-tiles__grid {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   clamp(10px, 1.5vw, 14px);
}

.assd-tile {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       clamp(14px, 2vw, 20px);
}

.assd-tile h4 {
  font-size:      var(--orgx-font-size-label);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--text);
  margin-bottom:  5px;
  line-height:    1.3;
}

.assd-tile p {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-body);
}

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .assd-tiles__grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .assd-tiles__grid { grid-template-columns: 1fr; }
}

/* ============================================================================
   25) ORBICUL PLATFORM PROTOTYPE
       Scoped under .orbicul-platform-prototype — safe to remove entirely.
       Design rule: every title, label and data point lives inside its card.
   ============================================================================ */

.orbicul-platform-prototype {
  --opp-accent: var(--orgx-green);
  --opp-card:   var(--card-bg);
  --opp-border: var(--card-border);
}

/* ── Dashboard shell — consistent vertical gap ─────────────────────────────── */
.opp__dash {
  display:        flex;
  flex-direction: column;
  gap:            clamp(10px, 1.5vw, 14px);
}

/* ── Navigation row ────────────────────────────────────────────────────────── */
.opp__nav {
  display:       flex;
  align-items:   center;
  gap:           6px;
  flex-wrap:     wrap;
  margin-bottom: 10px;
  min-height:    36px;
}

.opp__back {
  font-size:       var(--orgx-font-size-label);
  font-weight:     var(--orgx-font-weight-medium);
  color:           var(--text-dim);
  text-decoration: none;
  transition:      color var(--orgx-duration-fast) ease;
  display:         inline-flex;
  align-items:     center;
  gap:             5px;
}

.opp__back:hover { color: var(--text-muted); }

.opp__nav-sep {
  display:     block;
  width:       1px;
  height:      12px;
  background:  var(--border-active);
  opacity:     0.5;
  margin:      0 4px;
  flex-shrink: 0;
  align-self:  center;
}

.opp__domain-pill {
  display:        inline-flex;
  align-items:    center;
  gap:            7px;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--opp-accent);
}

.opp__dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  background:    var(--opp-accent);
  flex-shrink:   0;
}

.opp__nav-tags {
  display:     flex;
  flex-wrap:   wrap;
  gap:         5px;
  margin-left: 4px;
}

.opp__tag {
  display:        inline-flex;
  align-items:    center;
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding:        7px 8px 5px;
  border-radius:  5px;
  border:         1px solid rgba(255,255,255,0.10);
  background:     rgba(255,255,255,0.04);
  color:          var(--text-dim);
  white-space:    nowrap;
  line-height:    1;
}

/* ── Main platform card ─────────────────────────────────────────────────────── */
.opp__main {
  background:    var(--opp-card);
  border:        1px solid var(--opp-border);
  border-radius: var(--radius-lg);
  box-shadow:    0 4px 28px rgba(0,0,0,0.60),
                 0 0 48px rgba(0,0,0,0.40),
                 0 0 0 1px rgba(255,255,255,0.06);
  overflow:      hidden;
}

/* ── Platform identity bar (inside the main card) ──────────────────────────── */
.opp__main-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  padding:         16px 22px 0;
}

.opp__main-id {
  display:     flex;
  align-items: center;
  gap:         9px;
}

.opp__main-name {
  font-size:   var(--orgx-font-size-body);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  letter-spacing: 0.01em;
}

.opp__main-tagline {
  font-size:   0.75rem;
  color:       var(--text-dim);
  font-weight: var(--orgx-font-weight-regular);
}

.opp__main-meta {
  display:     flex;
  align-items: center;
  gap:         12px;
}

.opp__active-pill {
  display:       inline-flex;
  align-items:   center;
  gap:           6px;
  padding:       4px 10px 4px 8px;
  background:    rgba(149,193,31,0.08);
  border:        1px solid rgba(149,193,31,0.20);
  border-radius: 20px;
  font-size:     0.5625rem;
  font-weight:   var(--orgx-font-weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:         rgba(149,193,31,0.90);
}

.opp__active-pulse {
  width:         6px;
  height:        6px;
  border-radius: 50%;
  background:    var(--opp-accent);
  flex-shrink:   0;
  box-shadow:    0 0 5px rgba(149,193,31,0.55);
}

.opp__main-period {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

/* ── Visualization wrapper ──────────────────────────────────────────────────── */
.opp-viz {
  width:       100%;
  padding:     clamp(20px,3vw,36px) clamp(20px,3vw,44px) clamp(110px,14vw,160px);
  cursor:      default;
  display:     flex;
  align-items: center;
  min-height:  clamp(320px,48vw,580px);
}

.opp-viz svg {
  width:   100%;
  height:  auto;
  display: block;
}

/* Sequential reveal — source: assets/orgx_orbicul framework.html */
.opp-viz .c-fade { opacity: 0; transition: opacity 0.6s ease; }

.opp-viz:hover .c-r1  { opacity: 0.5; transition-delay: 0s; }
.opp-viz:hover .c-r2  { opacity: 0.5; transition-delay: 0.2s; }
.opp-viz:hover .c-r3  { opacity: 0.5; transition-delay: 0.4s; }
.opp-viz:hover .c-r4  { opacity: 0.5; transition-delay: 0.6s; }
.opp-viz:hover .c-dl1 { opacity: 0.5; transition-delay: 0.8s; }
.opp-viz:hover .c-dr1 { opacity: 0.5; transition-delay: 1.0s; }
.opp-viz:hover .c-dl2 { opacity: 0.5; transition-delay: 1.2s; }
.opp-viz:hover .c-dr2 { opacity: 0.5; transition-delay: 1.4s; }
.opp-viz:hover .c-dl3 { opacity: 0.5; transition-delay: 1.6s; }
.opp-viz:hover .c-dr3 { opacity: 0.5; transition-delay: 1.8s; }
.opp-viz:hover .c-ol  { opacity: 0.5; transition-delay: 2.0s; }
.opp-viz:hover .c-or1 { opacity: 0.5; transition-delay: 2.2s; }
.opp-viz:hover .c-or2 { opacity: 0.5; transition-delay: 2.4s; }


/* ── KPI row ───────────────────────────────────────────────────────────────── */
.opp__kpi-row {
  display:               grid;
  grid-template-columns: repeat(4,1fr);
  gap:                   clamp(10px,1.5vw,14px);
}

.opp__kpi-card {
  background:     var(--opp-card);
  border:         1px solid var(--opp-border);
  border-radius:  var(--radius-lg);
  padding:        clamp(18px,2.2vw,26px);
  display:        flex;
  flex-direction: column;
  gap:            8px;
  position:       relative;
  box-shadow:     0 2px 16px rgba(0,0,0,0.32);
}

/* Single neutral top line — no domain colour differentiation */
.opp__kpi-card::before {
  content:    '';
  position:   absolute;
  top:        -1px;
  left:       50%;
  width:      60%;
  height:     1px;
  z-index:    1;
  transform:  translateX(-50%);
  opacity:    0.4;
  background: linear-gradient(
    90deg,
    transparent              0%,
    rgba(255,255,255,0.55)  25%,
    rgba(255,255,255,0.55)  75%,
    transparent             100%
  );
}

.opp__kpi-eyebrow {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

.opp__kpi-number {
  font-size:   1.875rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  line-height: 1;
  letter-spacing: -0.02em;
}

.opp__kpi-delta       { font-size: 0.625rem; font-weight: var(--orgx-font-weight-medium); color: var(--text-dim); }
.opp__kpi-delta--up   { color: var(--opp-accent); }
.opp__kpi-delta--down { color: rgba(201,74,74,0.85); }
.opp__kpi-delta--flat { color: var(--text-dim); }

/* ── Layout grid rows ──────────────────────────────────────────────────────── */
.opp__row        { display: grid; gap: clamp(10px,1.5vw,14px); }
.opp__row--6-4   { grid-template-columns: 3fr 2fr; }
.opp__row--3col  { grid-template-columns: repeat(3,1fr); }

/* ── Generic panel card ────────────────────────────────────────────────────── */
.opp__panel {
  background:     var(--opp-card);
  border:         1px solid var(--opp-border);
  border-radius:  var(--radius-lg);
  padding:        clamp(18px,2.5vw,24px);
  display:        flex;
  flex-direction: column;
  gap:            14px;
  box-shadow:     0 2px 16px rgba(0,0,0,0.32);
}

.opp__panel-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding-bottom:  11px;
  border-bottom:   1px solid rgba(255,255,255,0.06);
}

.opp__panel-title { font-size: 0.75rem; font-weight: var(--orgx-font-weight-bold); letter-spacing: 0.04em; color: var(--text-muted); }
.opp__panel-meta  { font-size: 0.5625rem; font-weight: var(--orgx-font-weight-semibold); letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-dim); flex-shrink: 0; }

/* Eyebrow — one unified muted colour, no domain differentiation */
.opp__panel-eyebrow {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

/* ── Bar chart ─────────────────────────────────────────────────────────────── */
.opp__chart-wrap  { display: flex; gap: 14px; flex: 1; }

.opp__chart-bars {
  display:     flex;
  align-items: flex-end;
  gap:         8px;
  flex:        1;
  height:      120px;
  padding-top: 8px;
}

.opp__chart-col { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; flex: 1; height: 100%; gap: 5px; }

.opp__chart-bar {
  width:         100%;
  border-radius: 3px 3px 0 0;
  height:        var(--h,40%);
  opacity:       0.62;
  min-height:    4px;
}

/* All chart bars use the single platform accent — no domain colour differentiation */
.opp__chart-bar--strategy,
.opp__chart-bar--performance,
.opp__chart-bar--edge,
.opp__chart-bar--impact    { background: var(--opp-accent); }
.opp__chart-bar--current   { opacity: 1; }

.opp__chart-label { font-size: 0.5rem; font-weight: var(--orgx-font-weight-semibold); color: var(--text-dim); white-space: nowrap; }

.opp__chart-scale { display: flex; flex-direction: column; justify-content: space-between; height: 120px; padding-top: 8px; padding-bottom: 20px; }
.opp__chart-scale span { font-size: 0.5rem; color: var(--text-dim); text-align: right; line-height: 1; }

.opp__chart-legend { display: flex; align-items: center; gap: 6px; padding-top: 4px; }
.opp__legend-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.opp__legend-dot--strategy,
.opp__legend-dot--performance { background: var(--opp-accent); }
.opp__legend-label { font-size: 0.5625rem; font-weight: var(--orgx-font-weight-semibold); color: var(--text-dim); }
.opp__legend-value { font-size: 0.5625rem; font-weight: var(--orgx-font-weight-bold); color: var(--opp-accent); margin-left: auto; }

/* ── Status list ───────────────────────────────────────────────────────────── */
.opp__status-list { display: flex; flex-direction: column; flex: 1; }

.opp__status-item { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.05); font-size: var(--orgx-font-size-label); color: var(--text-muted); }
.opp__status-item:last-child { border-bottom: none; }

.opp__status-dot  { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.opp__status-dot--on   { background: var(--theme-strategy); }
.opp__status-dot--risk { background: var(--theme-performance); }
.opp__status-dot--dim  { background: rgba(255,255,255,0.20); }

.opp__status-name { flex: 1; }

.opp__status-badge { font-size: 0.5rem; font-weight: var(--orgx-font-weight-bold); letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 7px; border-radius: 3px; flex-shrink: 0; }
.opp__status-badge--on   { color: var(--theme-strategy);    background: rgba(149,193,31,0.10); }
.opp__status-badge--risk { color: var(--theme-performance); background: rgba(232,154,47,0.12); }
.opp__status-badge--dim  { color: var(--text-dim);          background: rgba(255,255,255,0.05); }

/* ── Metric stack ──────────────────────────────────────────────────────────── */
.opp__metric-stack { display: flex; flex-direction: column; flex: 1; }

.opp__metric { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 9px 0; border-bottom: 1px solid rgba(255,255,255,0.05); }
.opp__metric:last-child { border-bottom: none; }

.opp__metric-label { font-size: 0.75rem; color: var(--text-muted); font-weight: var(--orgx-font-weight-medium); }
.opp__metric-val             { font-size: 0.9375rem; font-weight: var(--orgx-font-weight-bold); color: var(--text); text-align: right; }
.opp__metric-val--performance { color: var(--text); }
.opp__metric-delta { font-size: 0.5625rem; font-weight: var(--orgx-font-weight-semibold); color: var(--text-dim); text-align: right; white-space: nowrap; }
.opp__metric-delta--up   { color: var(--theme-strategy); }
.opp__metric-delta--down { color: rgba(201,74,74,0.80); }

/* ── Execution list ────────────────────────────────────────────────────────── */
.opp__exec-list { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.opp__exec-item { display: flex; flex-direction: column; gap: 4px; }
.opp__exec-top  { display: flex; align-items: center; gap: 8px; }
.opp__exec-name { font-size: 0.75rem; font-weight: var(--orgx-font-weight-medium); color: var(--text-muted); flex: 1; }
.opp__exec-pct  { font-size: 0.625rem; font-weight: var(--orgx-font-weight-bold); color: var(--theme-strategy); flex-shrink: 0; }
.opp__exec-pct--risk { color: var(--theme-performance); }
.opp__exec-pct--dim  { color: var(--text-dim); }

.opp__progress      { height: 3px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; }
.opp__progress-fill { height: 100%; border-radius: 2px; width: var(--w,0%); background: var(--theme-strategy); }
.opp__progress-fill--risk { background: var(--theme-performance); }
.opp__progress-fill--done { background: rgba(149,193,31,0.45); }
.opp__progress-fill--dim  { background: rgba(255,255,255,0.18); }

/* ── Operating rhythm panel ────────────────────────────────────────────────── */
.opp__rhythm-panel { overflow-x: auto; scrollbar-width: none; }
.opp__rhythm-panel::-webkit-scrollbar { display: none; }

.opp__rhythm-flow { display: flex; align-items: center; min-width: max-content; }

.opp__rhythm-step { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 18px; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.07); border-radius: var(--radius); min-width: 96px; }
.opp__rhythm-num  { font-size: 0.5rem; font-weight: var(--orgx-font-weight-bold); letter-spacing: 0.07em; color: var(--opp-accent); }
.opp__rhythm-name { font-size: var(--orgx-font-size-eyebrow); font-weight: var(--orgx-font-weight-semibold); color: var(--text-muted); white-space: nowrap; }

.opp__rhythm-arrow           { flex-shrink: 0; width: 24px; text-align: center; font-size: 0.75rem; color: rgba(149,193,31,0.32); }
.opp__rhythm-arrow::after    { content: '\2192'; }

/* ── Responsive ────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .opp-viz         { min-height: clamp(220px,38vw,380px); }
  .opp__kpi-row    { grid-template-columns: repeat(2,1fr); }
  .opp__row--6-4   { grid-template-columns: 1fr; }
  .opp__row--3col  { grid-template-columns: repeat(2,1fr); }
}

@media (max-width: 640px) {
  .opp-viz         { min-height: 200px; padding: 12px 14px 16px; }
  .opp__main-header { padding: 12px 14px 0; flex-wrap: wrap; gap: 8px; }
  .opp__kpi-row    { grid-template-columns: repeat(2,1fr); }
  .opp__row--3col  { grid-template-columns: 1fr; }
  .opp__chart-bars { height: 80px; }
  .opp__kpi-number { font-size: 1.5rem; }
}

/* ============================================================================
   26) SERVICE DETAIL PAGE — proposition structure
       svc-* classes — scoped through .service-single — safe to remove.
       Pattern: Problem → Solution → Value → Process → Deliverables → ORGX → CTA
   ============================================================================ */

/* Shared card base used by all svc-* cards */
.svc-process-card,
.svc-deliverables-card,
.svc-orgx-card,
.svc-cta-card {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow:    var(--orgx-shadow-panel);
  transition:    border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease;
}

.svc-process-card:hover,
.svc-deliverables-card:hover,
.svc-orgx-card:hover,
.svc-cta-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:   var(--orgx-shadow-panel-hover);
}

/* Shared card head — title + meta — used inside svc-* cards */
.svc-card-head {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             10px;
  padding-bottom:  12px;
  border-bottom:   1px solid rgba(255, 255, 255, 0.06);
  margin-bottom:   clamp(18px, 2.5vw, 24px);
}

.svc-card-title {
  font-size:      0.75rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.04em;
  color:          var(--text-muted);
}

.svc-card-meta {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

/* ── About page — deep-dive card ────────────────────────────────────────── */
.about-deepdive-card {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow:    var(--orgx-shadow-panel);
  overflow:      hidden;
  margin-bottom: clamp(12px, 1.8vw, 18px);
  transition:    border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease;
}

.about-deepdive-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:   var(--orgx-shadow-panel-hover);
}

/* Header: text left, image right */
.about-deepdive-card__header {
  display:               grid;
  grid-template-columns: 65fr 35fr;
  align-items:           stretch;
  border-bottom:         1px solid rgba(255, 255, 255, 0.06);
  overflow:              hidden;
}

.about-deepdive-card__header-text {
  padding: clamp(32px, 4.5vw, 52px) clamp(36px, 5vw, 60px) clamp(24px, 3.5vw, 36px);
}

.about-deepdive-card__header .about-deepdive-card__img {
  height:        100%;
  min-height:    clamp(160px, 16vw, 220px);
  border-radius: 0;
  flex-shrink:   0;
}

.about-deepdive-card__title {
  font-size:      clamp(1.375rem, 2vw, 1.875rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  line-height:    1.15;
  margin:         0 0 clamp(10px, 1.4vw, 16px);
}

.about-deepdive-card__intro {
  font-size:   clamp(0.8125rem, 0.9vw, 0.9375rem);
  color:       var(--text-muted);
  line-height: 1.7;
  max-width:   72ch;
  margin:      0;
}

/* Inner 65/35 split */
.about-deepdive-card__inner {
  display:               grid;
  grid-template-columns: 65fr 35fr;
}

/* Left: content column */
.about-deepdive-card__content {
  padding:        clamp(24px, 3.5vw, 40px) clamp(36px, 5vw, 60px);
  border-right:   1px solid rgba(255, 255, 255, 0.06);
  display:        flex;
  flex-direction: column;
  gap:            clamp(16px, 2.2vw, 22px);
}

.about-deepdive-card__section-label {
  display:        block;
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--card-accent);
  opacity:        0.8;
}

.about-deepdive-card__problem {
  font-size:      clamp(1.0625rem, 1.4vw, 1.375rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.015em;
  color:          var(--text);
  line-height:    1.25;
  margin:         0;
}

.about-deepdive-card__text p {
  font-size:     clamp(0.8125rem, 0.85vw, 0.875rem);
  color:         var(--text-muted);
  line-height:   1.7;
  margin-bottom: 0.875em;
}

.about-deepdive-card__text p:last-child { margin-bottom: 0; }

.about-deepdive-card__insights {
  display:        flex;
  flex-direction: column;
  margin-top:     auto;
  padding-top:    clamp(12px, 1.8vw, 18px);
  border-top:     1px solid rgba(255, 255, 255, 0.05);
  gap:            0;
}

.about-deepdive-card__insight {
  display:     flex;
  gap:         14px;
  padding:     clamp(11px, 1.6vw, 16px) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.about-deepdive-card__insight:last-child { border-bottom: none; padding-bottom: 0; }

.about-deepdive-card__insight-num {
  font-size:      0.5rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.06em;
  color:          var(--card-accent);
  opacity:        0.6;
  flex-shrink:    0;
  padding-top:    2px;
  min-width:      16px;
}

.about-deepdive-card__insight-label {
  display:        block;
  font-size:      0.75rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.005em;
  color:          var(--text);
  margin-bottom:  3px;
}

.about-deepdive-card__insight-text {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-body);
  margin:      0;
}

/* Right: context column */
.about-deepdive-card__context {
  padding:        clamp(20px, 2.8vw, 32px);
  display:        flex;
  flex-direction: column;
  gap:            clamp(14px, 2vw, 20px);
  background:     rgba(0, 0, 0, 0.10);
}

/* Service image */
.about-deepdive-card__img {
  position:      relative;
  width:         100%;
  height:        clamp(180px, 18vw, 280px);
  border-radius: var(--radius);
  overflow:      hidden;
  flex-shrink:   0;
}

.about-deepdive-card__img-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  filter:              grayscale(0.55) brightness(0.65);
  transition:          filter 400ms ease;
}

.about-deepdive-card:hover .about-deepdive-card__img-bg {
  filter: grayscale(0.35) brightness(0.72);
}

.about-deepdive-card__img-fade {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent 40%,
    rgba(10, 10, 14, 0.80) 100%
  );
}

/* Context tags */
.about-deepdive-card__ctx-tags {
  display:  flex;
  flex-wrap: wrap;
  gap:      5px;
}

/* Metadata definition list */
.about-deepdive-card__meta {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding-top:    clamp(10px, 1.4vw, 14px);
  border-top:     1px solid rgba(255, 255, 255, 0.05);
}

.about-deepdive-card__meta-row {
  display:        flex;
  flex-direction: column;
  gap:            1px;
}

.about-deepdive-card__meta-key {
  font-size:      0.5rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--text-dim);
}

.about-deepdive-card__meta-val {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-medium);
  color:       var(--text-muted);
}

/* Full-width actions bar */
.about-deepdive-card__actions {
  padding:     clamp(18px, 2.5vw, 26px) clamp(36px, 5vw, 60px);
  border-top:  1px solid rgba(255, 255, 255, 0.06);
  display:     flex;
  align-items: center;
  gap:         12px;
  background:  rgba(0, 0, 0, 0.14);
}

@media (max-width: 820px) {
  .about-deepdive-card__header  { grid-template-columns: 1fr; }
  .about-deepdive-card__header .about-deepdive-card__img {
    min-height: clamp(160px, 40vw, 220px);
    order:      -1;
  }
  .about-deepdive-card__inner   { grid-template-columns: 1fr; }
  .about-deepdive-card__content { border-right: none; }
  .about-deepdive-card__context {
    order:         -1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }
}

@media (max-width: 480px) {
  .about-deepdive-card__actions  { flex-direction: column; align-items: stretch; }
  .about-deepdive-card__actions .sdp-btn-primary,
  .about-deepdive-card__actions .sdp-btn-tool    { justify-content: center; }
}

/* ============================================================================
   DEEP-DIVE CARD  (.deepdive-card)
   Reusable single-service deep-dive card.
   Card 1 prototype on the About page — designed to become the basis for
   single-digital_service.php when connected to WP custom fields.

   Future custom fields:
     service_title_white   → deepdive-card__title-white
     service_title_green   → deepdive-card__title-green
     service_description   → deepdive-card__description  (or post excerpt)
     featured image        → deepdive-card__image-bg
     service_challenge     → summary-row: Challenge
     service_solution      → summary-row: Solution
     service_audience      → summary-row: Audience
     service_duration      → summary-row: Duration
     service_output        → summary-row: Output
   ============================================================================ */

/* ── Outer card ──────────────────────────────────────────────────────────── */
.deepdive-card {
  position:      relative;
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  box-shadow:    0 4px 32px rgba(0, 0, 0, 0.55),
                 0 0 56px rgba(0, 0, 0, 0.38),
                 0 0 0 1px rgba(255, 255, 255, 0.06);
  overflow:      hidden;
  transition:    border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease;
}

.deepdive-card:hover {
  border-color: rgba(255, 255, 255, 0.13);
  box-shadow:   0 8px 48px rgba(0, 0, 0, 0.65),
                0 0 72px rgba(0, 0, 0, 0.44),
                0 0 0 1px rgba(255, 255, 255, 0.09);
}


/* ── Main two-column section ─────────────────────────────────────────────── */
.deepdive-card__main {
  display:               grid;
  grid-template-columns: 60fr 40fr;
  align-items:           stretch;
}

/* ── LEFT: content column ────────────────────────────────────────────────── */
.deepdive-card__content {
  padding:        clamp(36px, 5vw, 56px) clamp(36px, 5vw, 56px) clamp(32px, 4.5vw, 48px);
  display:        flex;
  flex-direction: column;
  gap:            clamp(18px, 2.5vw, 26px);
  border-right:   1px solid rgba(255, 255, 255, 0.06);
}

/* Domain label */
.deepdive-card__domain .theme-label {
  color:      var(--card-accent, var(--theme-strategy));
  font-size:  0.75rem;
}

/* ── Split title: white part + green part ────────────────────────────────── */
/*
   Semantic: one h1 element — one sentence.
   Visual:   two colour spans, each forced to its own line via display:block.
   Future:   replace spans with WP custom field output.
*/
.deepdive-card__title {
  font-size:      clamp(1.75rem, 3vw, 2.625rem);
  font-weight:    800;
  letter-spacing: -0.03em;
  line-height:    1.08;
  margin:         0;
}

.deepdive-card__title-white {
  display: block;
  color:   var(--text);
}

.deepdive-card__title-green {
  display: block;
  color:   var(--card-accent, var(--theme-strategy));
}

/* ── Description ─────────────────────────────────────────────────────────── */
.deepdive-card__description {
  font-size:   clamp(0.9375rem, 1.1vw, 1.0625rem);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   64ch;
  margin:      0;
}

/* ── Topic tags ──────────────────────────────────────────────────────────── */
.deepdive-card__tags {
  display:    flex;
  flex-wrap:  wrap;
  gap:        6px 8px;
  padding:    clamp(14px, 1.8vw, 20px) clamp(20px, 2.5vw, 28px) 0;
}

/* ── RIGHT: aside column — darker background ─────────────────────────────── */
.deepdive-card__aside {
  display:        flex;
  flex-direction: column;
  background:     rgba(0, 0, 0, 0.12);
  overflow:       hidden;
}

/* ── Image thumbnail: 16:9, greyscale, full-width flush ─────────────────── */
.deepdive-card__image {
  position:     relative;
  width:        100%;
  aspect-ratio: 16 / 9;
  overflow:     hidden;
  flex-shrink:  0;
}

.deepdive-card__image-bg {
  position:            absolute;
  inset:               0;
  background-size:     cover;
  background-position: center;
  filter:              grayscale(1) contrast(1.04) brightness(0.72);
  transform:           scale(1.02);
  transition:          filter 400ms ease, transform 400ms ease;
}

.deepdive-card:hover .deepdive-card__image-bg {
  filter:    grayscale(0.75) contrast(1.02) brightness(0.80);
  transform: scale(1.04);
}

/* Subtle bottom vignette — blends into the aside background */
.deepdive-card__image-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(
    to bottom,
    transparent              40%,
    rgba(10, 10, 14, 0.68)  100%
  );
}

/* ── Summary block: label/value rows ─────────────────────────────────────── */
.deepdive-card__summary {
  display:        flex;
  flex-direction: column;
  padding:        clamp(14px, 1.8vw, 20px) clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 32px);
}

.deepdive-card__summary-row {
  display:       grid;
  grid-template-columns: 82px 1fr;
  gap:           16px;
  padding:       11px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  align-items:   start;
}

.deepdive-card__summary-row:first-child { padding-top: 0; }
.deepdive-card__summary-row:last-child  { border-bottom: none; padding-bottom: 0; }

.deepdive-card__summary-key {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  line-height:    1.5;
  padding-top:    2px;
  text-align:     right;
}

.deepdive-card__summary-val {
  font-size:             var(--orgx-font-size-label);
  color:                 var(--text-muted);
  line-height:           1.55;
  font-weight:           var(--orgx-font-weight-regular);
  display:               -webkit-box;
  -webkit-box-orient:    vertical;
  -webkit-line-clamp:    2;
  overflow:              hidden;
}

/* ── Value statement — mirrors service-card__value ───────────────────────── */
.deepdive-card__value {
  display:     flex;
  align-items: center;
  gap:         8px;
  font-size:   0.9375rem;
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--card-accent, var(--accent));
  opacity:     0.8;
  transition:  opacity var(--orgx-duration-default) ease;
}
.deepdive-card__value i,
.deepdive-card__value span {
  color: var(--card-accent, var(--accent));
}
/* Inside a summary row the grid cell already provides spacing */
.deepdive-card__value--inline {
  padding:    0;
  border-top: none;
  margin-top: -3px;
}

/* ── Action row — pinned to the bottom of the content column ─────────────── */
.deepdive-card__actions {
  display:     flex;
  align-items: center;
  flex-wrap:   wrap;
  gap:         12px;
  margin-top:  auto;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {

  .deepdive-card__main {
    grid-template-columns: 1fr;
  }

  /* On tablet: aside moves below content */
  .deepdive-card__content {
    border-right:  none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: clamp(24px, 3.5vw, 36px);
  }

  /* Image stays 16:9, flush to all aside edges — aspect-ratio handles height */

}

@media (max-width: 540px) {

  .deepdive-card__summary-row {
    grid-template-columns: 68px 1fr;
  }

  .deepdive-card__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .deepdive-card__actions .sdp-btn-primary,
  .deepdive-card__actions .sdp-btn-tool {
    justify-content: center;
  }

}

/* ══════════════════════════════════════════════════════════════════════════
   WHAT YOU GET CARD
   ══════════════════════════════════════════════════════════════════════════ */

.wyg-card {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

.wyg-card__header {
  margin-bottom: clamp(28px, 3.5vw, 44px);
}

.wyg-card__eyebrow {
  display:       block;
  font-size:     var(--orgx-font-size-eyebrow);
  font-weight:   var(--orgx-font-weight-bold);
  color:         var(--card-accent, var(--theme-strategy));
  margin-bottom: 10px;
}

.wyg-card__heading {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 clamp(24px, 3vw, 36px);
}

/* ── 3-column item grid ──────────────────────────────────────────────────── */
.wyg-card__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(32px, 5vw, 56px);
  overflow:              visible;
}

/* ── Individual item box ─────────────────────────────────────────────────── */
.wyg-item {
  position:       relative;
  overflow:       visible;
  background:     rgba(0, 0, 0, 0.12);
  border:         1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 30%, transparent);
  border-radius:  var(--radius);
  padding:        clamp(24px, 3vw, 32px) clamp(16px, 2vw, 22px) clamp(16px, 2vw, 22px) clamp(24px, 3vw, 32px);
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.wyg-item__num {
  position:        absolute;
  top:             0;
  left:            0;
  transform:       translate(-50%, -50%);
  z-index:         3;
  display:         flex;
  align-items:     center;
  justify-content: center;
  width:           32px;
  height:          32px;
  border-radius:   50%;
  border:          1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 45%, transparent);
  background:      var(--card-bg);
  font-size:       0.75rem;
  font-weight:     var(--orgx-font-weight-bold);
  letter-spacing:  0.02em;
  color:           var(--card-accent, var(--theme-strategy));
}

.wyg-item__title {
  font-size:      1rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--card-accent, var(--theme-strategy));
  margin:         0;
}

.wyg-item__text {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.7;
  margin:      0;
}

@media (max-width: 820px) {
  .wyg-card__grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   PROBLEM VS SOLUTION — SHIFT CARD
   ══════════════════════════════════════════════════════════════════════════ */

.deepdive-shift-card {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
  box-shadow:    0 8px 48px rgba(0, 0, 0, 0.36), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

.deepdive-shift-card__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--card-accent, var(--theme-strategy));
  margin-bottom:  10px;
}

.deepdive-shift-card__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 clamp(28px, 3.5vw, 44px);
  max-width:      52ch;
}

/* ── Two-column grid ─────────────────────────────────────────────────────── */
.deepdive-shift-card__grid {
  display:               grid;
  grid-template-columns: 1fr 1px 1fr;
  gap:                   0 clamp(28px, 4vw, 52px);
  align-items:           start;
}

/* Vertical divider */
.deepdive-shift-card__divider {
  width:      1px;
  align-self: stretch;
  background: rgba(255, 255, 255, 0.07);
}

/* ── Each side ───────────────────────────────────────────────────────────── */
.deepdive-shift-card__side {
  display:        flex;
  flex-direction: column;
  gap:            14px;
}

.deepdive-shift-card__side-head {
  display:     flex;
  align-items: center;
  gap:         8px;
}

.deepdive-shift-card__icon {
  font-size:  var(--orgx-font-size-body);
  opacity:    0.55;
  flex-shrink: 0;
}

.deepdive-shift-card__side--problem .deepdive-shift-card__icon { color: #c45c5c; }
.deepdive-shift-card__side--solution .deepdive-shift-card__icon { color: var(--card-accent, var(--theme-strategy)); }

.deepdive-shift-card__label {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-semibold);
}

.deepdive-shift-card__side--problem .deepdive-shift-card__label  { color: #c45c5c; }
.deepdive-shift-card__side--solution .deepdive-shift-card__label { color: var(--card-accent, var(--theme-strategy)); }

.deepdive-shift-card__side-title {
  font-size:      clamp(0.9375rem, 1.2vw, 1.0625rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  margin:         0;
  line-height:    1.35;
}

.deepdive-shift-card__side-text {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  margin:      0;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .deepdive-shift-card__grid {
    grid-template-columns: 1fr;
    gap:                   0;
  }

  .deepdive-shift-card__divider {
    width:        auto;
    height:       1px;
    margin-block: clamp(24px, 3vw, 32px);
  }
}

/* ══════════════════════════════════════════════════════════════════════════
   MEDIA + STEPS CARD
   ══════════════════════════════════════════════════════════════════════════ */

.deepdive-media-steps-card {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.deepdive-media-steps__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--card-accent, var(--theme-strategy));
  margin-bottom:  10px;
}

.deepdive-media-steps__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 10px;
}

.deepdive-media-steps__intro {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-body);
  margin:      0 0 clamp(24px, 3vw, 36px);
}

/* ── Two-column grid — becomes one column when there's no video, so the
   steps simply take the full width instead of a slot standing in for
   the missing video. ─────────────────────────────────────────────────── */
.deepdive-media-steps__grid {
  display:               grid;
  grid-template-columns: auto 1fr;
  gap:                   clamp(20px, 3vw, 32px);
  align-items:           start;
}
.deepdive-media-steps__grid--no-video {
  grid-template-columns: 1fr;
}

/* ── Video embed ──────────────────────────────────────────────────────────── */
.deepdive-media-steps__video {
  position:        relative;
  width:           700px;
  aspect-ratio:    16 / 9;
  background:      #0a0a0c;
  border:          1px solid rgba(255, 255, 255, 0.07);
  border-radius:   var(--radius);
  display:         flex;
  flex-direction:  column;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  overflow:        hidden;
}

.deepdive-media-steps__video::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: radial-gradient(ellipse at 50% 40%, color-mix(in srgb, var(--card-accent, var(--theme-strategy)) 6%, transparent) 0%, transparent 70%);
  pointer-events: none;
}

/* ── Scrollable steps list ───────────────────────────────────────────────── */
/* overflow-y: auto sets min-height: 0 in grid context, so the video's
   aspect-ratio determines the row height and steps scroll within it.
   With no video, the grid is a single column instead (see --no-video
   above), so the height cap is dropped and the list grows naturally. ──── */
.deepdive-media-steps__grid--no-video .deepdive-media-steps__steps {
  max-height: none;
}
.deepdive-media-steps__steps {
  overflow-y:    auto;
  max-height:    394px;
  border:        1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--radius);
  background:    rgba(0, 0, 0, 0.12);
}

/* Custom scrollbar */
.deepdive-media-steps__steps::-webkit-scrollbar        { width: 4px; }
.deepdive-media-steps__steps::-webkit-scrollbar-track  { background: rgba(255,255,255,0.04); border-radius: 2px; }
.deepdive-media-steps__steps::-webkit-scrollbar-thumb  { background: color-mix(in srgb, var(--card-accent) 35%, transparent); border-radius: 2px; }
.deepdive-media-steps__steps::-webkit-scrollbar-thumb:hover { background: color-mix(in srgb, var(--card-accent) 60%, transparent); }

/* ── Individual step ─────────────────────────────────────────────────────── */
.deepdive-media-steps__step {
  display:    grid;
  grid-template-columns: 32px 1fr;
  gap:        0 14px;
  padding:    clamp(12px, 1.5vw, 16px) clamp(16px, 2vw, 22px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  align-items: start;
}

.deepdive-media-steps__step:last-child { border-bottom: none; }

.deepdive-media-steps__step-num {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.04em;
  color:          var(--card-accent, var(--theme-strategy));
  padding-top:    2px;
  line-height:    1;
}

.deepdive-media-steps__step-body {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.deepdive-media-steps__step-title {
  font-size:   var(--orgx-font-size-body);
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--text);
  line-height: 1.35;
}

.deepdive-media-steps__step-text {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.55;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .deepdive-media-steps__grid {
    grid-template-columns: 1fr;
  }

  .deepdive-media-steps__steps {
    max-height: 320px;
  }
}

/* ── 4. Process card ─────────────────────────────────────────────────────── */
.svc-process-card,
.svc-deliverables-card,
.svc-orgx-card {
  padding: clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

.svc-steps {
  display:               grid;
  grid-template-columns: repeat(6, 1fr);
  gap:                   clamp(12px, 1.5vw, 20px);
}

.svc-step {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding-left:   12px;
  border-left:    2px solid rgba(255, 255, 255, 0.06);
}

.svc-step__num {
  font-size:      0.5rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.07em;
  color:          var(--card-accent);
  opacity:        0.9;
}

.svc-step__name {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  line-height: 1.3;
}

.svc-step__desc {
  font-size:   0.75rem;
  color:       var(--text-muted);
  line-height: 1.55;
}

/* ── 5. Deliverables card ────────────────────────────────────────────────── */
.svc-deliverables {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   clamp(8px, 1.2vw, 12px);
}

.svc-deliverable {
  display:        flex;
  flex-direction: column;
  gap:            5px;
  padding:        clamp(12px, 1.5vw, 16px);
  background:     var(--bg-surface);
  border:         1px solid rgba(255, 255, 255, 0.06);
  border-radius:  var(--radius);
}

.svc-deliverable__name {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  line-height: 1.3;
}

.svc-deliverable__desc {
  font-size:   0.75rem;
  color:       var(--text-muted);
  line-height: 1.55;
}

/* ── 6. Why ORGX card ────────────────────────────────────────────────────── */
.svc-orgx-card__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 clamp(24px, 3vw, 36px);
}

.svc-orgx-grid {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   clamp(16px, 2vw, 24px);
}

.svc-orgx-point {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        clamp(16px, 2vw, 22px);
  background:     rgba(0, 0, 0, 0.14);
  border:         1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 30%, transparent);
  border-radius:  var(--radius);
}

.svc-orgx-point__label {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--card-accent, var(--accent));
}

.svc-orgx-point__text {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.65;
}

/* ── CTA section inside the merged orgx card ─────────────────────────────── */
.svc-orgx-card__cta {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            clamp(14px, 2vw, 20px);
  margin-top:     clamp(28px, 3.5vw, 44px);
  padding-top:    clamp(28px, 3.5vw, 44px);
  border-top:     1px solid rgba(255, 255, 255, 0.07);
}

/* ── 7. CTA card (standalone, kept for other contexts) ───────────────────── */
.svc-cta-card {
  position:       relative;
  padding:        clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            clamp(14px, 2vw, 20px);
  overflow:       hidden;
}


.svc-cta-card__headline {
  font-size:      clamp(1.125rem, 1.7vw, 1.5rem);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: -0.015em;
  color:          var(--text);
  line-height:    1.25;
  max-width:      44ch;
}

.svc-cta-card__sub {
  font-size:   clamp(0.75rem, 0.9vw, 0.875rem);
  color:       var(--text-muted);
  line-height: 1.7;
  max-width:   80%;
}

.svc-cta-card__actions {
  display:         flex;
  align-items:     center;
  gap:             12px;
  flex-wrap:       wrap;
  justify-content: center;
  margin-top:      8px;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .svc-steps       { grid-template-columns: repeat(3, 1fr); }
  .svc-deliverables { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 640px) {
  .svc-steps        { grid-template-columns: repeat(2, 1fr); }
  .svc-deliverables { grid-template-columns: repeat(2, 1fr); }
  .svc-orgx-grid    { grid-template-columns: 1fr; }
  .svc-cta-card__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .svc-cta-card__actions .sdp-btn-primary,
  .svc-cta-card__actions .sdp-btn-tool { justify-content: center; }
  .sdp-cta .sdp-btn-primary,
  .sdp-cta .sdp-btn-tool                { justify-content: center; }
}

/* ============================================================================
   ENGAGEMENT MODELS / PRICING
   ============================================================================ */

.deepdive-pricing {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

/* ── Header ──────────────────────────────────────────────────────────────── */
.deepdive-pricing__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--card-accent, var(--theme-strategy));
  margin-bottom:  10px;
}

.deepdive-pricing__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 8px;
}

.deepdive-pricing__intro {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-body);
  margin:      0 0 clamp(24px, 3vw, 36px);
}

/* ── 3-column grid ───────────────────────────────────────────────────────── */
.deepdive-pricing__grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(16px, 2vw, 22px);
  align-items:           stretch;
}

/* ── Individual pricing card ─────────────────────────────────────────────── */
.deepdive-pricing-card {
  position:       relative;
  background:     rgba(0, 0, 0, 0.14);
  border:         1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 30%, transparent);
  border-radius:  var(--radius);
  padding:        clamp(20px, 2.5vw, 28px);
  display:        flex;
  flex-direction: column;
  gap:            16px;
  transition:     border-color var(--orgx-duration-default) ease, box-shadow var(--orgx-duration-default) ease;
}

.deepdive-pricing-card:hover {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 50%, transparent);
  box-shadow:   0 4px 24px rgba(0, 0, 0, 0.32);
}

.deepdive-pricing-card .sdp-btn-tool:hover {
  background:   color-mix(in srgb, var(--card-accent, var(--accent)) 15%, transparent);
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 55%, transparent);
  color:        var(--card-accent, var(--accent));
}

/* Featured card — subtly brighter surface + domain-coloured top glow */
.deepdive-pricing-card--featured {
  background:   color-mix(in srgb, var(--card-accent) 4%, transparent);
  border-color: color-mix(in srgb, var(--card-accent) 20%, transparent);
}

.deepdive-pricing-card--featured:hover {
  border-color: color-mix(in srgb, var(--card-accent) 35%, transparent);
  box-shadow:   0 4px 28px rgba(0, 0, 0, 0.32), 0 0 20px color-mix(in srgb, var(--card-accent) 6%, transparent);
}

.deepdive-pricing-card--featured::before {
  content:    '';
  position:   absolute;
  top:        -1px;
  left:       50%;
  width:      72%;
  height:     2px;
  transform:  translateX(-50%);
  opacity:    0.7;
  background: linear-gradient(
    90deg,
    transparent                              0%,
    var(--card-accent, var(--theme-strategy)) 25%,
    var(--card-accent, var(--theme-strategy)) 75%,
    transparent                             100%
  );
  filter: blur(1px);
}

/* ── Badge ───────────────────────────────────────────────────────────────── */
.deepdive-pricing-card__badge {
  display:        inline-block;
  align-self:     flex-start;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.04em;
  color:          var(--card-accent, var(--theme-strategy));
  background:     color-mix(in srgb, var(--card-accent) 10%, transparent);
  border:         1px solid color-mix(in srgb, var(--card-accent) 20%, transparent);
  border-radius:  var(--radius-sm);
  padding:        3px 9px;
}

/* ── Card head ───────────────────────────────────────────────────────────── */
.deepdive-pricing-card__title {
  font-size:      1rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  margin:         0 0 5px;
}

.deepdive-pricing-card__subtitle {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-dim);
  line-height: 1.5;
  margin:      0;
}

/* ── Feature list ────────────────────────────────────────────────────────── */
.deepdive-pricing-card__features {
  list-style: none;
  margin:     0;
  padding:    0;
  display:    flex;
  flex-direction: column;
  gap:        8px;
  flex:       1;
}

.deepdive-pricing-card__features li {
  display:     flex;
  align-items: flex-start;
  gap:         8px;
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.45;
}

.deepdive-pricing-card__features li .fa-check {
  color:       var(--card-accent, var(--theme-strategy));
  font-size:   0.625rem;
  margin-top:  3px;
  flex-shrink: 0;
}

/* ── Price ───────────────────────────────────────────────────────────────── */
.deepdive-pricing-card__price {
  display:     flex;
  align-items: baseline;
  gap:         4px;
}

.deepdive-pricing-card__amount {
  font-size:   1.0625rem;
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--text);
}

.deepdive-pricing-card__period {
  font-size: var(--orgx-font-size-label);
  color:     var(--text-dim);
}

/* ── Button — full width inside card ────────────────────────────────────── */
.deepdive-pricing-card__button {
  display:         flex;
  justify-content: center;
  width:           100%;
}


/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 820px) {
  .deepdive-pricing__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .deepdive-pricing-card:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 540px) {
  .deepdive-pricing__grid {
    grid-template-columns: 1fr;
  }
  .deepdive-pricing-card:last-child {
    grid-column: auto;
  }
}

/* ============================================================================
   FAQ CARD
   ============================================================================ */

.deepdive-faq {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

.deepdive-faq__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: var(--orgx-letter-spacing-eyebrow);
  text-transform: uppercase;
  color:          var(--card-accent, var(--theme-strategy));
  margin-bottom:  10px;
}

.deepdive-faq__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 8px;
}

.deepdive-faq__intro {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-body);
  margin:      0 0 clamp(24px, 3vw, 36px);
}

/* ── List ────────────────────────────────────────────────────────────────── */
.deepdive-faq__list {
  border-top:    1px solid rgba(255, 255, 255, 0.07);
  counter-reset: faq-counter;
}

.deepdive-faq__item {
  border-bottom:  1px solid rgba(255, 255, 255, 0.07);
  counter-increment: faq-counter;
  border-radius:  var(--radius-sm);
  padding-inline: clamp(12px, 1.5vw, 18px);
  margin-inline:  calc(-1 * clamp(12px, 1.5vw, 18px));
  transition:     background 200ms ease, box-shadow 200ms ease;
}

.deepdive-faq__item:hover {
  background: rgba(255, 255, 255, 0.025);
}

.deepdive-faq__item:has([aria-expanded="true"]) {
  background: rgba(0, 0, 0, 0.14);
  box-shadow: inset 2px 0 0 var(--card-accent, var(--theme-strategy));
}

/* ── Question button ─────────────────────────────────────────────────────── */
.deepdive-faq__question {
  display:         flex;
  align-items:     center;
  gap:             clamp(12px, 1.8vw, 20px);
  width:           100%;
  padding:         clamp(16px, 2vw, 20px) 0;
  background:      none;
  border:          none;
  cursor:          pointer;
  text-align:      left;
  color:           var(--text);
  font-size:       0.9375rem;
  font-weight:     var(--orgx-font-weight-medium);
  font-family:     inherit;
  line-height:     1.4;
  transition:      color var(--orgx-duration-fast) ease;
}

/* Counter number injected via CSS */
.deepdive-faq__question::before {
  content:        counter(faq-counter, decimal-leading-zero);
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.04em;
  color:          var(--card-accent, var(--theme-strategy));
  opacity:        0.5;
  flex-shrink:    0;
  width:          22px;
  transition:     opacity var(--orgx-duration-fast) ease;
}

.deepdive-faq__question:hover::before,
.deepdive-faq__question[aria-expanded="true"]::before {
  opacity: 1;
}

/* Question text — takes all remaining space */
.deepdive-faq__question > span:first-of-type {
  flex: 1;
}

.deepdive-faq__question:hover {
  color: var(--text);
}

.deepdive-faq__question[aria-expanded="true"] {
  color: var(--text);
  font-weight: var(--orgx-font-weight-semibold);
}

/* ── Circular icon badge ─────────────────────────────────────────────────── */
.deepdive-faq__icon {
  position:        relative;
  width:           28px;
  height:          28px;
  flex-shrink:     0;
  border-radius:   50%;
  border:          1px solid color-mix(in srgb, var(--card-accent, var(--accent)) 25%, transparent);
  background:      color-mix(in srgb, var(--card-accent, var(--accent)) 5%, transparent);
  transition:      border-color var(--orgx-duration-fast) ease, background var(--orgx-duration-fast) ease;
}

.deepdive-faq__question:hover .deepdive-faq__icon,
.deepdive-faq__question[aria-expanded="true"] .deepdive-faq__icon {
  border-color: color-mix(in srgb, var(--card-accent, var(--accent)) 50%, transparent);
  background:   color-mix(in srgb, var(--card-accent, var(--accent)) 10%, transparent);
}

.deepdive-faq__icon::before,
.deepdive-faq__icon::after {
  content:       '';
  position:      absolute;
  top:           50%;
  left:          50%;
  background:    var(--card-accent, var(--theme-strategy));
  border-radius: 1px;
  transition:    transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                 opacity   280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deepdive-faq__icon::before {
  width:     10px;
  height:    1.5px;
  transform: translate(-50%, -50%);
}

.deepdive-faq__icon::after {
  width:     1.5px;
  height:    10px;
  transform: translate(-50%, -50%);
}

.deepdive-faq__question[aria-expanded="true"] .deepdive-faq__icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity:   0;
}

/* ── Answer panel ────────────────────────────────────────────────────────── */
.deepdive-faq__answer {
  height:     0;
  overflow:   hidden;
  transition: height 300ms cubic-bezier(0.4, 0, 0.2, 1);
}

.deepdive-faq__answer p {
  padding:     0 0 clamp(16px, 2vw, 22px);
  padding-left: calc(22px + clamp(12px, 1.8vw, 20px));
  margin:      0;
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   72ch;
}

/* ============================================================================
   DEEP-DIVE PAGE — COMPREHENSIVE MOBILE RESPONSIVE
   Targets: 360px Android / 390px iPhone / 430px iPhone Plus / 768px tablet
   Breakpoints: 900 / 768 / 640 / 480
   Desktop (>900px) is NOT touched here.
   ============================================================================ */

/* ── Safety net: prevent any rogue element from scrolling the page sideways ─ */
.service-single {
  overflow-x: hidden;
}

/* ══ 900px — fluid video before grid stacks ═══════════════════════════════════
   The video has width:700px and sits in an `auto 1fr` grid.
   Below ~880px the card content area is narrower than 700px + gap → overflow.
   Fix: make the video fluid here, before the grid stacks at 720px.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
  .deepdive-media-steps__video {
    width: min(700px, 58vw);
  }
}

/* ══ 768px — tablet portrait ══════════════════════════════════════════════════
   Grid stacking for shift + media-steps already fires at 720px (existing rule).
   Here we add the missing video width fix and other tablet polish.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Video: full width once the grid becomes single-column */
  .deepdive-media-steps__video {
    width: 100%;
    max-width: 100%;
  }

  /* Steps list: comfortable height on tablet */
  .deepdive-media-steps__steps {
    max-height: 360px;
  }

  /* Shift card title: no need to cap at 52ch on tablet */
  .deepdive-shift-card__title {
    max-width: 100%;
  }

  /* Wyg grid: tighter gap when items stack */
  .wyg-card__grid {
    gap: clamp(24px, 3vw, 32px);
  }

  /* CTA sub-text: full width when centred on tablet */
  .svc-cta-card__sub {
    max-width: 100%;
  }
}

/* ══ 640px — large phones ═════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* ── Portal gap tighter on phone ─────────────────────────────────────── */
  .service-single .portal-wrap {
    gap: 16px;
  }

  /* ── Hero card ────────────────────────────────────────────────────────── */
  .deepdive-card__content {
    padding: 26px 20px 22px;
    gap:     16px;
  }

  /* Summary values: remove line-clamp so nothing is truncated on small screens */
  .deepdive-card__summary-val {
    -webkit-line-clamp: unset;
    display:  block;
    overflow: visible;
  }

  /* ── Three things card ────────────────────────────────────────────────── */
  /* Extra top padding so the absolute corner badges aren't hidden by the card */
  .wyg-card {
    padding-top: clamp(40px, 5vw, 52px);
  }

  .wyg-card__grid {
    gap: 28px;
  }

  /* ── FAQ ──────────────────────────────────────────────────────────────── */
  /* Reduce the negative inset so hover-bg doesn't risk a scrollbar */
  .deepdive-faq__item {
    padding-inline: 8px;
    margin-inline:  -8px;
  }

  /* Answer indent: slim down on phone */
  .deepdive-faq__answer p {
    padding-left: 4px;
    max-width:    100%;
  }

  /* Question text: slightly smaller on phone for wrapping comfort */
  .deepdive-faq__question {
    font-size: var(--orgx-font-size-body);
  }
}

/* ══ 480px — small phones ═════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  /* ── Hero card ────────────────────────────────────────────────────────── */
  .deepdive-card__content {
    padding: 20px 16px 18px;
    gap:     14px;
  }

  .deepdive-card__summary {
    padding: 12px 14px 18px;
  }

  .deepdive-card__tags {
    padding: 10px 14px 0;
  }

  /* ── Three things card ────────────────────────────────────────────────── */
  .wyg-card {
    padding:     16px;
    padding-top: 36px;
  }

  .wyg-card__grid {
    gap: 24px;
  }

  /* ── Shift card ───────────────────────────────────────────────────────── */
  .deepdive-shift-card {
    padding: 22px 16px;
  }

  /* ── Media + steps card ───────────────────────────────────────────────── */
  .deepdive-media-steps-card {
    padding: 22px 16px;
  }

  .deepdive-media-steps__steps {
    max-height: 260px;
  }

  /* ── Pricing card ─────────────────────────────────────────────────────── */
  .deepdive-pricing {
    padding: 22px 16px;
  }

  /* Ensure pricing buttons are full-width with a decent tap height */
  .deepdive-pricing-card__button {
    width: 100%;
  }

  .deepdive-pricing-card__button .sdp-btn-primary,
  .deepdive-pricing-card__button .sdp-btn-tool {
    width:           100%;
    min-height:      44px;
    justify-content: center;
  }

  /* ── FAQ ──────────────────────────────────────────────────────────────── */
  .deepdive-faq {
    padding: 22px 16px;
  }

  .deepdive-faq__item {
    padding-inline: 4px;
    margin-inline:  -4px;
  }

  .deepdive-faq__question {
    gap:       10px;
    font-size: var(--orgx-font-size-body);
    padding:   14px 0;
  }

  /* ── ORGX + CTA cards ─────────────────────────────────────────────────── */
  .svc-orgx-card,
  .svc-cta-card {
    padding: 22px 16px;
  }

  .svc-cta-card__headline {
    max-width: 100%;
  }

  .svc-cta-card__sub {
    max-width:  100%;
    font-size:  var(--orgx-font-size-body);
  }

  /* ── Global button tap targets (min 44px per WCAG) ────────────────────── */
  .sdp-btn-primary,
  .sdp-btn-tool {
    min-height: 44px;
  }
}

/* ============================================================================

/* ============================================================================
   27) CEO EXECUTIVE BRIEFING PANEL
       Glass surface — temporary context layer, visually separate from cards.
       Reset: localStorage.removeItem('orbicul_ceo_briefing_dismissed')
   ============================================================================ */

/* Load animation: gentle fade + subtle rise */
@keyframes ceo-briefing-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Outer glass panel ───────────────────────────────────────────────────────── */
.ceo-briefing {
  background:              rgba(149, 193, 31, 0.20);
  backdrop-filter:         none;
  -webkit-backdrop-filter: none;
  border:                  1px solid rgba(149, 193, 31, 0.50);
  border-radius:           var(--radius-lg);
  box-shadow:              none;
  padding:                 clamp(16px, 2.2vw, 22px) clamp(18px, 2.5vw, 28px);

  /* Load */
  opacity:   0;
  transform: translateY(6px);
  animation: ceo-briefing-in 600ms ease 120ms forwards;

  /* Dismiss */
  max-height:  600px;
  overflow:    hidden;
  transition:  max-height   300ms cubic-bezier(.16,1,.3,1),
               opacity      240ms ease,
               padding      300ms cubic-bezier(.16,1,.3,1),
               margin       300ms cubic-bezier(.16,1,.3,1),
               border-width 300ms ease,
               box-shadow   300ms ease;
}

.ceo-briefing.is-dismissed {
  max-height:   0;
  opacity:      0;
  padding:      0;
  margin:       0 !important;
  border-width: 0;
  box-shadow:   none;
}

/* ── Top bar: title + timestamp + dismiss ───────────────────────────────────── */
.ceo-briefing__top {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             14px;
  margin-bottom:   clamp(12px, 1.8vw, 16px);
  padding-bottom:  clamp(10px, 1.5vw, 13px);
  border-bottom:   1px solid rgba(255, 255, 255, 0.08);
}

.ceo-briefing__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.01em;
  color:          var(--orgx-green);
}

.ceo-briefing__top-right {
  display:     flex;
  align-items: center;
  gap:         10px;
  flex-shrink: 0;
}

.ceo-briefing__time {
  display:        inline-flex;
  align-items:    center;
  gap:            5px;
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-medium);
  letter-spacing: 0.05em;
  color:          var(--text-dim);
}

.ceo-briefing__time i { font-size: 0.5rem; }

.ceo-briefing__dismiss {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           22px;
  height:          22px;
  background:      transparent;
  border:          1px solid rgba(149, 193, 31, 0.40);
  border-radius:   4px;
  color:           var(--orgx-green);
  font-size:       0.9375rem;
  font-family:     inherit;
  cursor:          pointer;
  line-height:     1;
  padding:         0;
  transition:      color 140ms ease, border-color 140ms ease, background 140ms ease;
}

.ceo-briefing__dismiss:hover {
  color:        var(--orgx-green);
  border-color: rgba(149, 193, 31, 0.65);
  background:   rgba(149, 193, 31, 0.08);
}

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

/* ── 2-column body: [intro+metrics] | [need to know] ───────────────────────── */
.ceo-briefing__body {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   clamp(24px, 3vw, 36px);
  align-items:           start;
}

/* LEFT column wrapper */
.ceo-briefing__left {
  display:        flex;
  flex-direction: column;
  gap:            12px;
}

.ceo-briefing__intro {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.65;
}

/* Metrics column wrapper — right-aligned */
.ceo-briefing__metrics-col {
  display:         flex;
  flex-direction:  column;
  align-items:     flex-end;
}

/* Metric tiles — 2×2 grid */
.ceo-briefing__metrics {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   7px;
  width:                 60%;
}

.ceo-briefing__metric {
  background:     rgba(149, 193, 31, 0.20);
  border:         1px solid rgba(149, 193, 31, 0.50);
  border-radius:  var(--radius);
  padding:        16px 12px;
  display:        flex;
  flex-direction: column;
  gap:            5px;
  cursor:         pointer;
  transition:     background var(--orgx-duration-fast) ease, border-color var(--orgx-duration-fast) ease, box-shadow var(--orgx-duration-fast) ease;
}

.ceo-briefing__metric:hover {
  background:   rgba(149, 193, 31, 0.20);
  border-color: rgba(149, 193, 31, 0.50);
  box-shadow:   none;
}

.ceo-briefing__metric--alert:hover {
  background:   rgba(220, 80, 80, 0.32);
  border-color: rgba(220, 80, 80, 0.70);
  box-shadow:   none;
}

.ceo-briefing__metric--alert {
  background:   rgba(220, 80, 80, 0.32);
  border-color: rgba(220, 80, 80, 0.70);
  opacity:      1;
}

.ceo-briefing__metric-val {
  font-size:      1.375rem;
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--text);
  line-height:    1;
  letter-spacing: -0.02em;
}

.ceo-briefing__metric-val--mono {
  font-size:      1.125rem;
  letter-spacing: 0.02em;
}

.ceo-briefing__metric-val--alert { color: #ffffff; }

.ceo-briefing__metric-den {
  font-size:   0.9rem;
  font-weight: var(--orgx-font-weight-regular);
  color:       var(--text-dim);
}

.ceo-briefing__metric-label {
  font-size:      0.5rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--text-dim);
  line-height:    1.3;
}

.ceo-briefing__metric--alert .ceo-briefing__metric-label {
  color: rgba(255, 255, 255, 0.85);
}

/* RIGHT: need to know ──────────────────────────────────────────────────────── */
.ceo-briefing__nk {
  display:        flex;
  flex-direction: column;
}

.ceo-briefing__nk-head {
  font-size:      var(--orgx-font-size-label);
  font-weight:    var(--orgx-font-weight-regular);
  letter-spacing: normal;
  text-transform: none;
  color:          var(--text-muted);
  line-height:    1.65;
  margin-bottom:  10px;
  padding-bottom: 8px;
  border-bottom:  1px solid rgba(255, 255, 255, 0.08);
}

.ceo-briefing__nk-item {
  font-size:     var(--orgx-font-size-label);
  color:         var(--text);
  line-height:   var(--orgx-line-height-body);
  padding:       5px 0 5px 16px;
  position:      relative;
}

.ceo-briefing__nk-item::before {
  content:     '•';
  position:    absolute;
  left:        0;
  top:         5px;
  color:       rgba(149, 193, 31, 0.80);
  font-size:   0.75rem;
  line-height: var(--orgx-line-height-body);
}

.ceo-briefing__nk-item:last-of-type { border-bottom: none; }

.ceo-briefing__nk-item--action {
  color: var(--text);
}

.ceo-briefing__nk-item--risk {
  color:       #ff8080;
  font-weight: var(--orgx-font-weight-semibold);
}

.ceo-briefing__footer {
  padding-top: 10px;
  text-align:  right;
  width:       60%;
}

.ceo-briefing__view-all {
  font-size:       var(--orgx-font-size-eyebrow);
  font-weight:     var(--orgx-font-weight-semibold);
  color:           var(--orgx-green);
  text-decoration: none;
  opacity:         0.80;
  transition:      opacity 140ms ease;
}

.ceo-briefing__view-all:hover { opacity: 1; }

/* ── Responsive ──────────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ceo-briefing__body    { grid-template-columns: 1fr; }
  .ceo-briefing__metrics { grid-template-columns: repeat(4, 1fr); }
  .ceo-briefing__footer  { text-align: left; }
}

@media (max-width: 640px) {
  .ceo-briefing__time    { display: none; }
  .ceo-briefing__metrics { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================================
   28) VALUE TRAJECTORY CARD — Orbicul CEO Dashboard
       Scoped to .vt-* — safe to remove entirely.
   ============================================================================ */

.vt-card {
  background:    var(--card-bg);
  border:        1px solid var(--card-border);
  border-radius: var(--radius-lg);
  box-shadow:    0 4px 32px rgba(0,0,0,0.65),
                 0 0 56px rgba(0,0,0,0.45),
                 0 0 0 1px rgba(255,255,255,0.07);
  overflow:      hidden;
}

/* Header */
.vt-card__header {
  display:         flex;
  align-items:     flex-start;
  justify-content: space-between;
  gap:             16px;
  padding:         clamp(18px,2.5vw,24px) clamp(20px,3vw,28px) 0;
}

.vt-eyebrow {
  display:      block;
  font-size:    0.75rem;
  font-weight:  var(--orgx-font-weight-regular);
  color:        var(--text-dim);
  margin-bottom: 6px;
}

.vt-title {
  font-size:      clamp(0.9375rem,1.4vw,1.125rem);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--text);
  letter-spacing: -0.01em;
  line-height:    1.2;
  margin:         0 0 4px;
}

.vt-subtitle {
  font-size:   0.75rem;
  color:       var(--text-dim);
  line-height: 1.4;
}

.vt-updated {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-medium);
  letter-spacing: 0.05em;
  color:          var(--text-dim);
  flex-shrink:    0;
  padding-top:    2px;
}

/* Body: chart (2/3) + panels (1/3) */
.vt-body {
  display:    grid;
  grid-template-columns: 2fr 1fr;
  gap:        0;
  padding:    clamp(16px,2vw,22px) 0 0;
  min-height: 320px;
}

/* Chart container */
.vt-chart-container {
  position: relative;
  padding:  0 0 clamp(28px,3.5vw,36px) clamp(20px,3vw,28px);
  overflow: visible;
}

.vt-svg {
  width:   100%;
  height:  auto;
  display: block;
}

/* Tooltip */
.vt-tooltip {
  display:       none;
  position:      absolute;
  padding:       8px 11px;
  background:    rgba(14,16,18,0.92);
  border:        1px solid rgba(255,255,255,0.10);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
  font-size:     var(--orgx-font-size-eyebrow);
  line-height:   1.7;
  color:         var(--text-muted);
  pointer-events: none;
  z-index:       10;
  white-space:   nowrap;
  box-shadow:    0 4px 20px rgba(0,0,0,0.40);
}

.vt-tip-month {
  font-size:      0.5625rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color:          var(--text-dim);
  display:        block;
  margin-bottom:  3px;
}

/* Right panels */
.vt-panels {
  display:        flex;
  flex-direction: column;
  border-left:    1px solid rgba(255,255,255,0.06);
  padding:        0 clamp(16px,2.5vw,24px) clamp(16px,2vw,22px);
}

.vt-panel {
  flex:    1;
  display: flex;
  flex-direction: column;
  gap:     8px;
  padding-block: clamp(14px,2vw,20px);
}

.vt-panel + .vt-panel {
  border-top: 1px solid rgba(255,255,255,0.06);
}

.vt-panel__title {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.07em;
  text-transform: uppercase;
  display:        flex;
  align-items:    center;
  gap:            6px;
  margin-bottom:  2px;
}

.vt-panel--risk .vt-panel__title  { color: rgba(220,100,100,0.90); }
.vt-panel--opp  .vt-panel__title  { color: rgba(149,193,31,0.90); }

/* Signal cards */
.vt-signal {
  display:       flex;
  gap:           10px;
  padding:       10px 12px;
  border-radius: var(--radius);
  border:        1px solid;
}

.vt-signal--risk {
  background:   rgba(220,80,80,0.06);
  border-color: rgba(220,80,80,0.22);
}

.vt-signal--opp {
  background:   rgba(149,193,31,0.06);
  border-color: rgba(149,193,31,0.22);
}

.vt-signal__name {
  display:     block;
  font-size:   0.75rem;
  font-weight: var(--orgx-font-weight-semibold);
  line-height: 1.35;
}

.vt-signal--risk .vt-signal__name { color: rgba(255,160,160,0.95); }
.vt-signal--opp  .vt-signal__name { color: rgba(200,230,140,0.95); }

.vt-signal__desc {
  display:   block;
  font-size: var(--orgx-font-size-eyebrow);
  color:     var(--text-dim);
  margin-top: 2px;
}

/* Responsive */
@media (max-width: 960px) {
  .vt-body {
    grid-template-columns: 1fr;
  }
  .vt-panels {
    border-left:  none;
    border-top:   1px solid rgba(255,255,255,0.06);
    flex-direction: row;
    gap: 12px;
    padding: clamp(14px,2vw,20px) clamp(16px,2.5vw,24px);
  }
  .vt-panel { padding-block: 0; }
  .vt-panel + .vt-panel { border-top: none; border-left: 1px solid rgba(255,255,255,0.06); padding-left: 12px; }
}

@media (max-width: 640px) {
  .vt-panels { flex-direction: column; }
  .vt-panel + .vt-panel { border-left: none; border-top: 1px solid rgba(255,255,255,0.06); padding-left: 0; }
}

/* ============================================================================
   29) VALUE-DRIVEN OPERATING MODEL — interactive framework
       Scoped to .vmf-* — replaces static opp-viz placeholder.
   ============================================================================ */

/* SVG container: stacked layers */
.vmf-wrap {
  width:   100%;
  padding: clamp(20px,3vw,36px) clamp(20px,3vw,44px) 0;
}

.vmf-svg-container {
  position: relative;
  width:    100%;
}

.vmf-layer1 {
  width:   100%;
  height:  auto;
  display: block;
}

.vmf-layer2 {
  position: absolute;
  top:  0; left: 0;
  width: 100%; height: 100%;
}

/* Segment interactivity — scoped, never leaks */
.vmf-wrap [data-seg] {
  transition:     opacity 0.3s ease;
  opacity:        0;
  cursor:         pointer;
}

/* Controls panel — temporarily hidden; remove display:none to restore */
.vmf-controls { display: none !important; }
.vmf-controls {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(8px, 1.2vw, 12px);
  padding:               clamp(14px,2vw,20px) 0 clamp(16px,2vw,22px);
}

.vmf-ctrl-group {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       12px 14px;
}

.vmf-ctrl-title {
  display:        block;
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color:          var(--orgx-green);
  margin-bottom:  10px;
}

.vmf-ctrl-row {
  display:       flex;
  align-items:   center;
  gap:           6px;
  margin-bottom: 5px;
}

.vmf-ctrl-row:last-child { margin-bottom: 0; }

.vmf-ctrl-label {
  font-size:   0.5625rem;
  color:       var(--text-dim);
  width:       44px;
  flex-shrink: 0;
}

.vmf-btn-group {
  display:   flex;
  gap:       3px;
  flex-wrap: wrap;
}

.vmf-btn {
  padding:      3px 7px;
  border-radius: 3px;
  border:       1px solid transparent;
  cursor:       pointer;
  font-size:    0.5rem;
  font-weight:  var(--orgx-font-weight-semibold);
  letter-spacing: 0.04em;
  font-family:  inherit;
  transition:   all 0.15s ease;
  background:   rgba(255,255,255,0.05);
  color:        var(--text-dim);
  line-height:  1.4;
}

.vmf-btn:hover           { background: rgba(255,255,255,0.09); color: var(--text-muted); }
.vmf-btn--active         { background: rgba(255,255,255,0.08); color: var(--text-muted); }
.vmf-btn--data.vmf-btn--active   { background: rgba(149,193,31,0.10); color: rgba(149,193,31,0.75); border-color: rgba(149,193,31,0.22); }
.vmf-btn--green.vmf-btn--active  { background: rgba(149,193,31,0.22); color: #c8e88a;              border-color: rgba(149,193,31,0.48); }
.vmf-btn--orange.vmf-btn--active { background: rgba(232,154,47,0.18); color: #f0c070;              border-color: rgba(232,154,47,0.42); }

/* Responsive */
@media (max-width: 640px) {
  .vmf-controls { grid-template-columns: 1fr; }
}
/* ============================================================================
   30) DOMAIN TABS CARD (dct-*)
       Orbicul CEO Dashboard — value domains tabbed interface.
       Premium raised-tab design with domain colour accents.
   ============================================================================ */

/* Connected pair: framework card sits on top, tabs card connects underneath */
.dct-module-pair {
  display:        flex;
  flex-direction: column;
}

.dct-module-pair > .opp__main {
  border-bottom-left-radius:  0;
  border-bottom-right-radius: 0;
  border-bottom:              none;
}

/* Card wrapper — flat top, rounded bottom, no top border or shadow */
.dct-card {
  background:                 var(--card-bg);
  border:                     1px solid var(--card-border);
  border-top:                 none;
  border-top-left-radius:     0;
  border-top-right-radius:    0;
  border-bottom-left-radius:  var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
  box-shadow:    none;
  overflow:      hidden;
}

/* Card header */
.dct-card__header {
  padding:       clamp(18px,2.5vw,24px) clamp(20px,3vw,28px) clamp(14px,2vw,18px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.dct-card__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--text);
  letter-spacing: 0.01em;
  margin-bottom:  4px;
}

.dct-card__subtitle {
  font-size:   0.75rem;
  color:       var(--text-dim);
  line-height: 1.5;
}

/* Interface: tabs + panel */
.dct-interface {
  display:   flex;
  flex-direction: column;
}

/* Panel bg token — used by active tab + mask + panel to guarantee exact match */
.dct-card { --dct-panel-bg: #141313; }

/* ── Tab bar ───────────────────────────────────────────────────────────── */
.dct-tablist {
  display:         flex;
  align-items:     flex-end;
  gap:             2px;
  padding:         clamp(12px,1.8vw,16px) clamp(20px,3vw,28px) 0;
  overflow-x:      auto;
  scrollbar-width: none;
  position:        relative;   /* establishes stacking context */
  background:      var(--card-bg);
  border-bottom:   none;       /* line drawn by ::after so children can cover it */
}

/* Divider drawn as pseudo-element — can be covered by child z-index */
.dct-tablist::after {
  content:    '';
  position:   absolute;
  left:       0;
  right:      0;
  bottom:     0;
  height:     1px;
  background: rgba(255,255,255,0.08);
  z-index:    0;
  pointer-events: none;
}

.dct-tablist::-webkit-scrollbar { display: none; }

.dct-tab {
  position:      relative;
  z-index:       1;            /* sits above the ::after divider */
  display:       inline-flex;
  align-items:   center;
  padding:       9px 16px 10px;
  font-family:   inherit;
  font-size:     var(--orgx-font-size-eyebrow);
  font-weight:   var(--orgx-font-weight-semibold);
  letter-spacing: 0.01em;
  color:         var(--text-muted);
  background:    transparent;
  border:        1px solid transparent;
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  cursor:        pointer;
  white-space:   nowrap;
  opacity:       0.55;
  flex-shrink:   0;
  transition:    color 160ms ease, opacity 160ms ease,
                 background 160ms ease, border-color 160ms ease;
  margin-bottom: -1px;
}

.dct-tab:hover {
  opacity:    0.85;
  color:      var(--text);
  background: rgba(255,255,255,0.03);
}

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

/* Active tab: sits ABOVE the ::after divider line */
.dct-tab--active {
  opacity:             1 !important;
  color:               var(--dct-c) !important;
  background:          var(--dct-panel-bg) !important;
  border:              1px solid rgba(255,255,255,0.10) !important;
  border-bottom-color: var(--dct-panel-bg) !important;
  border-radius:       6px 6px 0 0;
  transform:           translateY(1px);
  z-index:             2;      /* above ::after (z-index:0) and other tabs (z-index:1) */
}

/* Bottom mask — fills the gap between tab bottom edge and panel top */
.dct-tab--active::after {
  content:        '';
  position:       absolute;
  left:           -1px;
  right:          -1px;
  bottom:         -3px;
  height:         4px;
  background:     var(--dct-panel-bg);
  z-index:        3;
  pointer-events: none;
}

/* Domain accent colours */
.dct-tab--all                        { --dct-c: var(--orgx-green); }
.dct-tab--growth-engine              { --dct-c: var(--theme-strategy); }
.dct-tab--market-reality             { --dct-c: var(--theme-performance); }
.dct-tab--value-delivery             { --dct-c: var(--theme-intelligent-edge); }
.dct-tab--customer-lifetime          { --dct-c: var(--theme-responsible-impact); }
.dct-tab--operational-performance    { --dct-c: var(--theme-execution); }
.dct-tab--human-machine              { --dct-c: #5BB8D6; }
.dct-tab--external-leverage          { --dct-c: #37C7B9; }
.dct-tab--innovation-engine          { --dct-c: #b39ddb; }

/* ── Panel wrapper — exact same bg as active tab via shared token ──────── */
.dct-panel-wrap {
  background: var(--dct-panel-bg);
  padding:    clamp(18px,2.5vw,24px) clamp(20px,3vw,28px) clamp(18px,2.5vw,24px);
  min-height: 120px;
}

/* ── Panels ────────────────────────────────────────────────────────────── */
.dct-panel { display: none; }

.dct-panel--active {
  display:   block;
  animation: dct-fade 200ms ease forwards;
}

@keyframes dct-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.dct-panel__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--text);
  margin-bottom:  8px;
  line-height:    1.3;
}

.dct-panel__summary {
  font-size:     var(--orgx-font-size-label);
  color:         var(--text-muted);
  line-height:   1.65;
  margin-bottom: 16px;
  max-width:     72ch;
}

/* Signal list — transparent inside the dark panel-wrap */
.dct-signals {
  display:        flex;
  flex-direction: column;
  gap:            0;
  margin-bottom:  14px;
  border:         1px solid rgba(255,255,255,0.07);
  border-radius:  var(--radius);
  overflow:       hidden;
}

.dct-signal {
  display:       flex;
  align-items:   center;
  gap:           10px;
  font-size:     0.75rem;
  color:         var(--text-muted);
  line-height:   1.5;
  padding:       8px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
  background:    var(--card-bg);
}

.dct-signal:last-child { border-bottom: none; }

.dct-signal__dot {
  width:         7px;
  height:        7px;
  border-radius: 50%;
  flex-shrink:   0;
  background:    rgba(255,255,255,0.18);
}

.dct-signal--on   .dct-signal__dot { background: var(--theme-strategy); }
.dct-signal--risk .dct-signal__dot { background: rgba(220,80,80,0.90); }
.dct-signal--dim  .dct-signal__dot { background: rgba(255,255,255,0.18); }
.dct-signal--risk                  { color: rgba(255,175,175,0.80); }

.dct-cta {
  display:         block;
  text-align:      right;
  font-size:       var(--orgx-font-size-eyebrow);
  font-weight:     var(--orgx-font-weight-semibold);
  color:           var(--orgx-green);
  text-decoration: none;
  opacity:         0.75;
  transition:      opacity 150ms ease;
}

.dct-cta:hover { opacity: 1; }

/* Responsive */
@media (max-width: 640px) {
  .dct-tablist { padding-inline: clamp(14px,4vw,20px); }
  .dct-panel-wrap { padding-inline: clamp(14px,4vw,20px); }
}

/* ============================================================================
   26) SERVICE DETAIL — STRUCTURED SECTIONS
       Extends section 15 with new components:
         - sdp-challenge      (inline challenge block inside main card)
         - sdp-meta-strip     (key numbers strip inside main card)
         - sdp-module         (section cards below main card)
         - sdp-steps-h        (horizontal step timeline)
         - sdp-deliverables   (numbered deliverable grid)
         - sdp-reasons        (why ORGX compact grid)
         - sdp-cta-block      (final closing CTA card)
   ============================================================================ */

/* ── Challenge block (inside sdp-content) ─────────────────────────────────── */
.sdp-challenge {
  display:        flex;
  flex-direction: column;
  gap:            8px;
  padding:        clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px);
  background:     var(--bg-surface-2);
  border:         1px solid var(--border);
  border-left:    2px solid var(--card-accent);
  border-radius:  var(--radius);
}

.sdp-challenge__label {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--card-accent);
  opacity:        0.80;
}

.sdp-challenge__text {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.72;
  margin:      0;
}

/* ── Metadata strip (inside sdp-content, below tags) ──────────────────────── */
.sdp-meta-strip {
  display:    flex;
  gap:        clamp(20px, 3.5vw, 36px);
  flex-wrap:  wrap;
  padding-top: clamp(16px, 2vw, 22px);
  margin-top: auto;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
}

.sdp-meta-item {
  display:        flex;
  flex-direction: column;
  gap:            4px;
}

.sdp-meta-num {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    800;
  color:          var(--card-accent);
  letter-spacing: -0.02em;
  line-height:    1;
}

.sdp-meta-label {
  font-size:  var(--orgx-font-size-eyebrow);
  color:      var(--text-dim);
  font-weight: var(--orgx-font-weight-medium);
  white-space: nowrap;
}

/* ── Module card — shared wrapper for section cards below main card ─────────── */
.sdp-module {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       clamp(24px, 3.5vw, 40px);
  margin-top:    clamp(14px, 1.8vw, 20px);
  box-shadow:    var(--orgx-shadow-subtle);
}

/* Section header label — eyebrow + horizontal rule */
.sdp-module__label {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--text-dim);
  display:        flex;
  align-items:    center;
  gap:            14px;
  margin-bottom:  clamp(20px, 3vw, 32px);
}

.sdp-module__label::after {
  content:    '';
  flex:       1;
  height:     1px;
  background: var(--border);
}

/* ── Horizontal step timeline ─────────────────────────────────────────────── */
/*
   Desktop: 6 columns in a row, number circles connected by a horizontal line.
   Steps 1–3 = client (dim circle), steps 4–6 = ORGX (accent circle).
   Mobile: stacked vertical list.
*/
.sdp-steps-h {
  display:  flex;
  gap:      0;
  position: relative;
}

/* Horizontal connector thread behind the circles */
.sdp-steps-h::before {
  content:    '';
  position:   absolute;
  top:        15px; /* half the 30px circle height */
  left:       calc(100% / 12);
  right:      calc(100% / 12);
  height:     1px;
  background: var(--border);
  z-index:    0;
}

.sdp-step-h {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  padding:        0 clamp(6px, 1vw, 12px);
  position:       relative;
  z-index:        1;
}

/* Step number circle */
.sdp-step-h__num {
  width:         30px;
  height:        30px;
  border-radius: 50%;
  display:       flex;
  align-items:   center;
  justify-content: center;
  font-size:     0.75rem;
  font-weight:   var(--orgx-font-weight-bold);
  flex-shrink:   0;
  margin-bottom: clamp(10px, 1.5vw, 16px);
  background:    var(--bg-surface-2);
  border:        1px solid var(--border-hover);
  color:         var(--text-dim);
}

/* ORGX-delivered step: accent circle */
.sdp-step-h__num--orgx {
  background:   var(--accent-dim);
  border-color: var(--accent);
  color:        var(--accent);
}

/* Step inner wrapper — holds tag, title, desc */
.sdp-step-h__inner {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            4px;
}

/* Step actor tag */
.sdp-step-h__tag {
  font-size:      0.5625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color:          var(--text-dim);
  line-height:    1.2;
}

.sdp-step-h__tag--orgx { color: var(--accent); opacity: 0.85; }

/* Step title */
.sdp-step-h__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  line-height:    1.3;
  margin:         0;
}

/* Step description */
.sdp-step-h__desc {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

/* Optional callout note */
.sdp-step-h__note {
  margin-top:    8px;
  background:    var(--bg-surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius-sm);
  padding:       8px 12px;
  font-size:     0.75rem;
  color:         var(--text-dim);
  line-height:   var(--orgx-line-height-body);
  font-style:    italic;
  text-align:    left;
}

/* ── Deliverables grid ───────────────────────────────────────────────────────── */
.sdp-deliverables {
  display:    grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:        2px;
  background: var(--border);
  border:     1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow:   hidden;
}

.sdp-deliverable {
  background: var(--bg-surface);
  padding:    clamp(18px, 2.5vw, 26px) clamp(16px, 2vw, 22px);
  display:    flex;
  flex-direction: column;
  gap:        6px;
}

.sdp-deliverable__num {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.08em;
  color:          var(--accent);
  opacity:        0.65;
  line-height:    1;
}

.sdp-deliverable__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  line-height:    1.35;
  margin:         0;
}

.sdp-deliverable__desc {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

/* ── Why ORGX reasons ────────────────────────────────────────────────────────── */
.sdp-reasons {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   clamp(10px, 1.5vw, 14px);
}

.sdp-reason {
  background:    var(--bg-surface-2);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       clamp(16px, 2.5vw, 22px);
  display:       flex;
  flex-direction: column;
  gap:           8px;
  transition:    border-color var(--ease);
}

.sdp-reason:hover { border-color: var(--border-hover); }

.sdp-reason__icon {
  font-size: 0.9375rem;
  color:     var(--accent);
  opacity:   0.80;
}

.sdp-reason__title {
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.01em;
  color:          var(--text);
  margin:         0;
  line-height:    1.3;
}

.sdp-reason__desc {
  font-size:   var(--orgx-font-size-label);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

/* ── Closing CTA block ───────────────────────────────────────────────────────── */
.sdp-cta-block {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       clamp(28px, 4vw, 48px);
  margin-top:    clamp(14px, 1.8vw, 20px);
  display:       flex;
  flex-direction: column;
  gap:           clamp(10px, 1.5vw, 16px);
  position:      relative;
  overflow:      hidden;
  box-shadow:    var(--orgx-shadow-subtle);
}

/* Subtle accent glow at top edge */
.sdp-cta-block::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       0;
  right:      0;
  height:     1px;
  background: linear-gradient(
    90deg,
    transparent       0%,
    var(--accent)    25%,
    var(--accent)    75%,
    transparent      100%
  );
  opacity:    0.45;
}

.sdp-cta-block__eyebrow {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color:          var(--accent);
  opacity:        0.80;
}

.sdp-cta-block__title {
  font-size:      clamp(1.1875rem, 2.2vw, 1.5rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  line-height:    1.25;
  max-width:      56ch;
  margin:         0;
}

.sdp-cta-block__text {
  font-size:   clamp(0.875rem, 1.1vw, 0.9375rem);
  color:       var(--text-muted);
  line-height: 1.72;
  max-width:   60ch;
  margin:      0;
}

.sdp-cta-block__actions {
  display:    flex;
  gap:        12px;
  flex-wrap:  wrap;
  margin-top: 4px;
}

/* ── Responsive: steps collapse to vertical on narrow screens ────────────────── */
@media (max-width: 900px) {

  .sdp-steps-h {
    flex-direction: column;
    gap:            0;
  }

  /* Remove the horizontal connector */
  .sdp-steps-h::before {
    display: none;
  }

  .sdp-step-h {
    flex-direction: row;
    align-items:    flex-start;
    text-align:     left;
    padding:        clamp(16px, 2.5vw, 22px) 0;
    border-bottom:  1px solid var(--border);
    gap:            clamp(14px, 2.5vw, 20px);
  }

  .sdp-step-h:last-child { border-bottom: none; }

  .sdp-step-h__num {
    flex-shrink:   0;
    margin-bottom: 0;
    margin-top:    2px;
  }

  .sdp-step-h__inner { align-items: flex-start; }

}

@media (max-width: 640px) {

  .sdp-meta-strip { gap: 16px; }

  .sdp-deliverables {
    grid-template-columns: 1fr 1fr;
  }

  .sdp-reasons {
    grid-template-columns: 1fr;
  }

  .sdp-cta-block__actions {
    flex-direction: column;
    align-items:    stretch;
  }

  .sdp-cta-block__actions .sdp-btn-primary,
  .sdp-cta-block__actions .sdp-btn-tool {
    justify-content: center;
  }

  .sdp-challenge { border-left-width: 2px; }

}

@media (max-width: 400px) {
  .sdp-deliverables { grid-template-columns: 1fr; }
}

/* ============================================================================
   ABOUT DIGITAL SERVICES PAGE (.about-ds-page)
   ============================================================================ */

/* ── Page wrapper ─────────────────────────────────────────────────────────── */
.about-ds-page {
  flex:           1;
  padding-top:    calc(var(--nav-h) + clamp(40px, 4vw, 52px));
  padding-bottom: clamp(56px, 8vw, 112px);
}

.about-ds-page .portal-wrap {
  display:        flex;
  flex-direction: column;
  gap:            clamp(20px, 3vw, 32px);
}

/* ── Hero — text-only, no card wrapper ───────────────────────────────────── */
.about-ds-hero {
  padding-bottom: clamp(44px, 5vw, 64px);
  border-bottom:  1px solid var(--border);
  max-width:      860px;
}

.about-ds-hero__headline {
  font-size:      clamp(2rem, 4.5vw, 3rem);
  font-weight:    800;
  line-height:    1.1;
  letter-spacing: -0.03em;
  color:          var(--text);
  margin:         14px 0 22px;
}

.about-ds-hero__headline--green {
  color: var(--orgx-green);
}

.about-ds-hero__sub {
  font-size:   clamp(0.9375rem, 1.2vw, 1.0625rem);
  color:       var(--text-muted);
  line-height: 1.78;
  max-width:   72ch;
}

/* ── Generic section card ────────────────────────────────────────────────── */
.about-ds-block {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(32px, 4vw, 52px) clamp(28px, 4vw, 52px);
}

.about-ds-block__eyebrow {
  display:        block;
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color:          var(--text-dim);
  margin-bottom:  10px;
}

.about-ds-block__title {
  font-size:      var(--orgx-font-size-section-title);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 clamp(16px, 2vw, 22px);
}

.about-ds-block__lead-group {
  display:        flex;
  flex-direction: column;
  gap:            12px;
  max-width:      72ch;
  margin-bottom:  clamp(24px, 3vw, 38px);
}

.about-ds-block__lead {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  margin:      0;
}

/* ── Hybrid model: 3 connected cards ─────────────────────────────────────── */
.about-hybrid-grid {
  display:     grid;
  grid-template-columns: 1fr 48px 1fr 48px 1fr;
  align-items: center;
  gap:         0;
}

.about-hybrid-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       clamp(20px, 2.5vw, 28px) clamp(18px, 2.5vw, 26px);
  display:       flex;
  flex-direction: column;
  gap:           12px;
  height:        100%;
}

.about-hybrid-card--advantage {
  border-color: rgba(149, 193, 31, 0.28);
  background:   rgba(149, 193, 31, 0.05);
}

.about-hybrid-card__icon {
  font-size: 1.125rem;
  color:     var(--text-dim);
}

.about-hybrid-card--advantage .about-hybrid-card__icon {
  color: var(--orgx-green);
}

.about-hybrid-card__title {
  font-size:   0.9375rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  margin:      0;
}

.about-hybrid-card__text {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

.about-hybrid-connector {
  display:         flex;
  align-items:     center;
  justify-content: center;
  color:           var(--text-dim);
  font-size:       1rem;
  opacity:         0.40;
}

/* ── Why benefits list — 2-column grid ──────────────────────────────────── */
.about-why-benefits {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   0;
}

.about-why-benefit {
  display:     flex;
  align-items: flex-start;
  gap:         12px;
  padding:     14px 16px 14px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: 1.5;
}

.about-why-benefit i {
  color:       var(--orgx-green);
  font-size:   0.625rem;
  flex-shrink: 0;
  margin-top:  5px;
}

/* ── Process steps — 3-column × 2-row grid ──────────────────────────────── */
.about-process-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(10px, 1.5vw, 16px);
}

.about-process-step {
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius-lg);
  padding:        clamp(18px, 2.5vw, 24px) clamp(16px, 2.5vw, 22px);
  display:        flex;
  flex-direction: column;
  gap:            8px;
}

.about-process-step__num {
  font-size:      var(--orgx-font-size-eyebrow);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.08em;
  color:          var(--orgx-green);
  opacity:        0.72;
  line-height:    1;
}

.about-process-step__title {
  font-size:   0.9375rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  line-height: 1.3;
  margin:      0;
}

.about-process-step__desc {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

/* ── Platform diagram — account → 5 services ────────────────────────────── */
.about-platform-diagram {
  margin-top: clamp(20px, 2.5vw, 32px);
  display:    flex;
  flex-direction: column;
  align-items: flex-start;
  gap:         0;
}

.about-platform-top {
  display:     flex;
  align-items: center;
  padding-left: 24px;
}

.about-platform-account {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     rgba(149, 193, 31, 0.08);
  border:         1px solid rgba(149, 193, 31, 0.28);
  border-radius:  var(--radius);
  padding:        10px 18px;
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--orgx-green);
  letter-spacing: 0.02em;
  white-space:    nowrap;
}

.about-platform-account i {
  font-size: var(--orgx-font-size-body);
  opacity:   0.75;
}

/* Vertical connector + horizontal bar */
.about-platform-branch {
  position:   relative;
  width:      calc(100% - 24px);
  height:     36px;
  margin-left: 24px;
  border-left:   1px solid rgba(255, 255, 255, 0.12);
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 0 0 0 var(--radius-sm);
  margin-bottom: 1px;
}

.about-platform-services {
  display:               grid;
  grid-template-columns: repeat(5, 1fr);
  gap:                   clamp(8px, 1.2vw, 12px);
  width:                 100%;
}

.about-platform-service {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius);
  padding:       14px 12px;
  display:       flex;
  flex-direction: column;
  align-items:   center;
  gap:           8px;
  text-align:    center;
}

.about-platform-service i {
  font-size: var(--orgx-font-size-body);
  color:     var(--text-dim);
}

.about-platform-service span {
  font-size:   0.75rem;
  font-weight: var(--orgx-font-weight-semibold);
  color:       var(--text-muted);
  line-height: 1.35;
}

/* Domain accent colours for platform services */
.about-platform-service.theme-strategy i     { color: var(--theme-strategy); }
.about-platform-service.theme-org-performance i { color: var(--theme-performance); }
.about-platform-service.theme-responsible-impact i { color: var(--theme-responsible-impact); }
.about-platform-service.theme-intelligent-edge i { color: var(--theme-intelligent-edge); }
.about-platform-service.theme-execution i   { color: var(--theme-execution); }

/* ── Organogram — Single Account → 5 services ───────────────────────────── */
.about-orgchart {
  margin-top: clamp(24px, 3vw, 36px);
  display:    flex;
  flex-direction: column;
  align-items: center;
  user-select: none;
}

/* Root node wrapper: centers the box + provides the stem below it */
.about-orgchart__root {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  position:       relative;
  z-index:        1;
}

.about-orgchart__root-node {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  background:     rgba(149, 193, 31, 0.08);
  border:         1px solid rgba(149, 193, 31, 0.30);
  border-radius:  var(--radius);
  padding:        11px 20px;
  font-size:      var(--orgx-font-size-body);
  font-weight:    var(--orgx-font-weight-bold);
  color:          var(--orgx-green);
  letter-spacing: 0.02em;
  white-space:    nowrap;
}

.about-orgchart__root-node i {
  font-size: var(--orgx-font-size-body);
  opacity:   0.75;
}

/* Vertical stem from root node down to the horizontal bar */
.about-orgchart__stem {
  width:      1px;
  height:     32px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

/* Children level — flex row, full width, relative for the horizontal bar */
.about-orgchart__level {
  display:  flex;
  width:    100%;
  position: relative;
}

/* Horizontal connecting bar, drawn from center of first child to center of last.
   With 5 equal flex children, each is 20% wide → centers at 10% and 90%. */
.about-orgchart__level::before {
  content:    '';
  position:   absolute;
  top:        0;
  left:       10%;
  right:      10%;
  height:     1px;
  background: rgba(255, 255, 255, 0.14);
}

/* Each child column: centered, flex-column */
.about-orgchart__child {
  flex:           1;
  display:        flex;
  flex-direction: column;
  align-items:    center;
}

/* Vertical stem from horizontal bar down to the child card */
.about-orgchart__child-stem {
  width:      1px;
  height:     32px;
  background: rgba(255, 255, 255, 0.14);
  flex-shrink: 0;
}

/* Child card */
.about-orgchart__child-card {
  width:          calc(100% - 12px);   /* 6px gap each side */
  background:     var(--bg-surface);
  border:         1px solid var(--border);
  border-radius:  var(--radius);
  padding:        16px 12px;
  display:        flex;
  flex-direction: column;
  align-items:    center;
  gap:            8px;
  text-align:     center;
  transition:     border-color var(--orgx-duration-fast) ease;
}

.about-orgchart__child-card i {
  font-size: 1rem;
  color:     var(--text-dim);
}

.about-orgchart__child-name {
  font-size:   0.75rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  line-height: 1.35;
}

.about-orgchart__child-sub {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color:          var(--text-dim);
  line-height:    1;
}

/* Domain accent colours on child cards */
.about-orgchart__child-card.theme-strategy i          { color: var(--theme-strategy); }
.about-orgchart__child-card.theme-org-performance i   { color: var(--theme-performance); }
.about-orgchart__child-card.theme-responsible-impact i { color: var(--theme-responsible-impact); }
.about-orgchart__child-card.theme-intelligent-edge i  { color: var(--theme-intelligent-edge); }
.about-orgchart__child-card.theme-execution i         { color: var(--theme-execution); }

/* Domain border tint on hover */
.about-orgchart__child-card.theme-strategy:hover          { border-color: rgba(149, 193,  31, 0.30); }
.about-orgchart__child-card.theme-org-performance:hover   { border-color: rgba(232, 154,  47, 0.30); }
.about-orgchart__child-card.theme-responsible-impact:hover { border-color: rgba( 55, 199, 185, 0.30); }
.about-orgchart__child-card.theme-intelligent-edge:hover  { border-color: rgba( 91, 184, 214, 0.30); }
.about-orgchart__child-card.theme-execution:hover         { border-color: rgba(215, 106, 184, 0.30); }

/* ── Responsive — organogram ─────────────────────────────────────────────── */
@media (max-width: 640px) {
  /* On mobile: stack children vertically, lose horizontal bar */
  .about-orgchart__level {
    flex-direction: column;
    align-items:    center;
    gap:            0;
    width:          100%;
  }

  /* Hide the horizontal bar */
  .about-orgchart__level::before {
    display: none;
  }

  /* Each child spans full (narrower) width */
  .about-orgchart__child {
    width: 100%;
    flex:  none;
  }

  .about-orgchart__child-card {
    width:          100%;
    flex-direction: row;
    text-align:     left;
    justify-content: flex-start;
    align-items:    center;
    gap:            12px;
  }

  .about-orgchart__child-card i {
    flex-shrink: 0;
  }

  .about-orgchart__child-name,
  .about-orgchart__child-sub {
    display: inline;
  }

  .about-orgchart__child-sub::before {
    content: ' ';
  }
}

/* ── Trust cards — 3-column grid ────────────────────────────────────────── */
.about-trust-grid {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   clamp(10px, 1.5vw, 16px);
}

.about-trust-card {
  background:    var(--bg-surface);
  border:        1px solid var(--border);
  border-radius: var(--radius-lg);
  padding:       clamp(18px, 2.5vw, 24px) clamp(16px, 2.5vw, 22px);
  display:       flex;
  flex-direction: column;
  gap:           10px;
}

.about-trust-card__icon {
  font-size: 1rem;
  color:     var(--orgx-green);
}

.about-trust-card__title {
  font-size:   0.9375rem;
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
  margin:      0;
}

.about-trust-card__text {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
}

/* ── CTA block ────────────────────────────────────────────────────────────── */
.about-ds-cta {
  background:    var(--card-bg);
  border:        1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius-lg);
  padding:       clamp(40px, 5vw, 64px) clamp(28px, 4vw, 52px);
  text-align:    center;
  display:       flex;
  flex-direction: column;
  align-items:   center;
}

.about-ds-cta__headline {
  font-size:      clamp(1.375rem, 2.5vw, 2rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.025em;
  color:          var(--text);
  margin:         0 0 14px;
}

.about-ds-cta__text {
  font-size:   0.9375rem;
  color:       var(--text-muted);
  line-height: var(--orgx-line-height-relaxed);
  max-width:   56ch;
  margin:      0 0 clamp(24px, 3vw, 36px);
}

.about-ds-cta__actions {
  display:         flex;
  align-items:     center;
  justify-content: center;
  gap:             14px;
  flex-wrap:       wrap;
}

/* ── Responsive — tablet (≤ 900px) ──────────────────────────────────────── */
@media (max-width: 900px) {

  /* Hybrid: drop to single column, rotate connectors */
  .about-hybrid-grid {
    grid-template-columns: 1fr;
  }

  .about-hybrid-connector {
    transform:       rotate(90deg);
    justify-content: center;
    padding:         2px 0;
  }

  .about-platform-services {
    grid-template-columns: repeat(3, 1fr);
  }

  .about-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

/* ── Responsive — mobile (≤ 640px) ──────────────────────────────────────── */
@media (max-width: 640px) {

  .about-why-benefits {
    grid-template-columns: 1fr;
  }

  .about-process-grid {
    grid-template-columns: 1fr;
  }

  .about-trust-grid {
    grid-template-columns: 1fr;
  }

  .about-platform-services {
    grid-template-columns: repeat(2, 1fr);
  }

  .about-platform-branch {
    width:       calc(100% - 12px);
    margin-left: 12px;
  }

  .about-platform-top {
    padding-left: 12px;
  }

  .about-ds-cta__actions {
    flex-direction: column;
    align-items:    stretch;
    width:          100%;
    max-width:      320px;
  }

  .about-ds-cta__actions .sdp-btn-primary,
  .about-ds-cta__actions .sdp-btn-tool {
    justify-content: center;
  }

}

/* ============================================================================
   ORGX SCHEDULER MODAL
   ============================================================================ */

/* ── Body lock (no scroll when modal is open) ────────────────────────────── */
body.scheduler-body-lock { overflow: hidden; }

/* ── Backdrop ─────────────────────────────────────────────────────────────── */
.scheduler-backdrop {
  position:        fixed;
  inset:           0;
  z-index:         9000;
  display:         flex;
  align-items:     center;
  justify-content: center;
  padding:         20px 16px;
  background:      rgba(0, 0, 0, 0.76);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  opacity:         0;
  visibility:      hidden;
  transition:      opacity var(--orgx-duration-default) ease, visibility var(--orgx-duration-default) ease;
}
.scheduler-backdrop.is-open    { visibility: visible; }
.scheduler-backdrop.is-visible { opacity: 1; }

/* ── Modal card ───────────────────────────────────────────────────────────── */
.scheduler-modal {
  position:      relative;
  background:    var(--card-bg);
  border:        1px solid color-mix(in srgb, var(--sched-accent) 28%, transparent);
  border-radius: var(--radius-lg);
  box-shadow:    0 32px 96px rgba(0, 0, 0, 0.64),
                 0 0 0 1px rgba(255, 255, 255, 0.04) inset;
  width:         100%;
  max-width:     840px;
  max-height:    92vh;
  overflow-y:    auto;
  padding:       clamp(24px, 4vw, 48px) clamp(20px, 4vw, 48px);
  display:       flex;
  flex-direction: column;
  gap:           clamp(20px, 2.5vw, 28px);
  transform:     translateY(16px);
  transition:    transform var(--orgx-duration-default) ease;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.scheduler-backdrop.is-visible .scheduler-modal { transform: translateY(0); }

/* --sched-accent: domain accent, cascades to all modal children.
   JS writes data-domain on .scheduler-modal on every open.                */
.scheduler-modal                            { --sched-accent: var(--orgx-green); }
.scheduler-modal[data-domain="performance"] { --sched-accent: var(--theme-performance); }
.scheduler-modal[data-domain="edge"]        { --sched-accent: var(--theme-intelligent-edge); }
.scheduler-modal[data-domain="impact"]      { --sched-accent: var(--theme-responsible-impact); }
.scheduler-modal[data-domain="execution"]   { --sched-accent: var(--theme-execution); }

/* ── Header ───────────────────────────────────────────────────────────────── */
.scheduler-modal__header {
  display: flex;
  /* leave room on the right for the absolute close button */
  padding-right: 48px;
}
.scheduler-modal__heading { flex: 1; min-width: 0; }
.scheduler-modal__title {
  font-size:      clamp(1.125rem, 2vw, 1.5rem);
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: -0.02em;
  color:          var(--text);
  margin:         0 0 6px;
}
.scheduler-modal__subtitle {
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1.65;
  margin:      0;
  max-width:   58ch;
}
.scheduler-modal__close {
  position:        absolute;
  top:             clamp(14px, 2.5vw, 20px);
  right:           clamp(14px, 2.5vw, 20px);
  width:           32px;
  height:          32px;
  border-radius:   var(--radius);
  border:          1px solid color-mix(in srgb, var(--sched-accent) 32%, transparent);
  background:      color-mix(in srgb, var(--sched-accent) 8%, transparent);
  color:           var(--sched-accent);
  cursor:          pointer;
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       0.75rem;
  transition:      background 150ms ease, border-color 150ms ease;
}
.scheduler-modal__close:hover {
  background:   color-mix(in srgb, var(--sched-accent) 16%, transparent);
  border-color: color-mix(in srgb, var(--sched-accent) 55%, transparent);
}
.scheduler-modal__close:focus-visible { outline: 2px solid var(--sched-accent); outline-offset: 2px; }

/* ── Service context badge ────────────────────────────────────────────────── */
/* bg/border derived from --sched-accent which is set on .scheduler-modal   */
.scheduler-service-context {
  display:       none;
  align-items:   center;
  gap:           8px;
  padding:       7px 14px;
  border-radius: var(--radius);
  width:         fit-content;
  background:    color-mix(in srgb, var(--sched-accent) 9%, transparent);
  border:        1px solid color-mix(in srgb, var(--sched-accent) 28%, transparent);
}
.scheduler-service-context.is-visible { display: flex; }

.scheduler-service-name {
  font-size:      0.625rem;
  font-weight:    var(--orgx-font-weight-bold);
  letter-spacing: 0.09em;
  color:          var(--sched-accent);
}

/* ── Field groups ─────────────────────────────────────────────────────────── */
.scheduler-field-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;
}
.scheduler-field-label {
  font-size:   var(--orgx-font-size-label);
  font-weight: var(--orgx-font-weight-bold);
  color:       var(--text);
}

/* ── Interest selector (pill radio buttons) ───────────────────────────────── */
.scheduler-interest-options {
  display:   flex;
  gap:       8px;
  flex-wrap: wrap;
}
.scheduler-interest-option { cursor: pointer; }
.scheduler-interest-option input[type=radio] {
  position: absolute;
  opacity:  0;
  width:    0;
  height:   0;
}
.scheduler-interest-text {
  display:     block;
  padding:     9px 16px;
  border-radius: var(--radius);
  border:      1px solid var(--border);
  background:  var(--bg-surface);
  font-size:   var(--orgx-font-size-body);
  color:       var(--text-muted);
  line-height: 1;
  white-space: nowrap;
  cursor:      pointer;
  user-select: none;
  transition:  border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.scheduler-interest-option:hover .scheduler-interest-text {
  border-color: color-mix(in srgb, var(--sched-accent) 40%, transparent);
  color:        var(--text);
}
.scheduler-interest-option input:checked + .scheduler-interest-text {
  border-color: var(--sched-accent);
  background:   color-mix(in srgb, var(--sched-accent) 10%, transparent);
  color:        var(--sched-accent);
  font-weight:  var(--orgx-font-weight-semibold);
}
.scheduler-interest-option input:focus-visible + .scheduler-interest-text {
  outline:        2px solid var(--sched-accent);
  outline-offset: 2px;
}

@media (max-width: 680px) {
  .scheduler-interest-options { flex-direction: column; }
  .scheduler-interest-text    { white-space: normal; }
}

/* ── Shared booking widget — real, consultant-managed availability ───────────
   The widget (from the network-wide ORGX Consultant Booking plugin) ships
   its own layout/spacing; it only needs its colour custom properties
   re-pointed at this theme's existing tokens so it reads as native rather
   than a bolted-on plugin. --accent follows --sched-accent specifically so
   the widget picks up whichever domain colour this modal was opened with. */
.scheduler-cb-wrap .orgx-cb-widget {
  /* --bg, --border, --text and --radius are deliberately NOT redeclared
     here — the widget already inherits those from :root under the exact
     same names, and writing e.g. `--bg: var(--bg)` on this same element
     would be a self-reference: per the CSS custom-properties spec that's
     a cycle, which makes the property invalid rather than "keep the
     inherited value". Only the names that differ from this theme's own
     tokens need remapping below. */
  --surface:        var(--card-bg);
  --surface-raised: var(--bg-hover);
  --muted:          var(--text-muted);
  --accent:         var(--sched-accent);
  --accent-strong:  color-mix(in srgb, var(--sched-accent) 82%, #fff);
  --accent-ink:     var(--bg);
  max-width: none;
}

.scheduler-cb-fallback {
  font-size: var(--orgx-font-size-body);
  color:     var(--text-muted);
}
.scheduler-cb-fallback a { color: var(--sched-accent); }

/* ── Weekly grid layout for the shared widget's day list ─────────────────────
   Built by scheduler.js by moving (never cloning) the plugin's own
   .orgx-cb-day elements into Mon–Fri columns, one week at a time — the
   original week-grid layout this modal used before the real widget
   replaced the placeholder calendar. Colours/spacing reuse the same
   remapped tokens as the rest of the widget above. */
.orgx-cb-weekgrid__nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             12px;
  margin-bottom:   .8rem;
}
.orgx-cb-weekgrid__label {
  font-size:   var(--orgx-font-size-label, .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; }
}

/* ── Responsive — tablet ──────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .scheduler-modal {
    padding:       18px 14px;
    max-height:    96vh;
    gap:           16px;
  }
  .scheduler-modal__subtitle { display: none; }
}