/* ============================================================================
   WDM Home — page-scoped styles (extracted from page-wdm-home.php on 2026-05-06)
   Linked from page-wdm-home.php via <link rel="stylesheet">.
   ============================================================================ */

/* ============================================================================
     WDM Canon Home — page-scoped styles
     Tokens repeat the canon for self-containment in case wdm-design-system.css
     fails to load.
     ============================================================================ */
  :root {
    /* Core canon */
    --wdm-ink: #1d1d1d;
    --wdm-ink-warm: #2a2318;
    --wdm-gold: #947f57;
    --wdm-cream: #f7f5f2;
    --wdm-highlight: #fff8e6;
    --wdm-text: #1a1a1a;
    --wdm-text-muted: #6b6b6b;
    --wdm-border: #e5e5e5;
    --wdm-white: #ffffff;

    /* Extended ink scale (deepest -> mid) */
    --wdm-ink-deeper: #0d0d0d;
    --wdm-ink-medium: #2d2d2d;
    --wdm-ink-soft: #3a3530;
    --wdm-ink-mid: #4a443e;

    /* Extended gold scale (deepest -> palest) */
    --wdm-gold-bronze: #6e5a3a;
    --wdm-gold-deep: #7d6a48;
    --wdm-gold-soft: #b8a67e;
    --wdm-gold-amber: #c9b690;
    --wdm-gold-pale: #e6dcc7;

    /* Cream + warm-neutral scale */
    --wdm-cream-warm: #ede5d8;
    --wdm-cream-deep: #efeae3;
    --wdm-olive-tint: #807058;

    /* Borders */
    --wdm-border-strong: #c7c7c7;
    --wdm-border-warm: #d8cfbf;

    /* Text-on-surface aliases (mandatory — prevents black-on-ink) */
    --wdm-text-on-ink: #ffffff;
    --wdm-text-on-ink-secondary: rgba(255,255,255,0.82);
    --wdm-text-on-ink-muted: rgba(255,255,255,0.58);
    --wdm-text-on-cream: #1a1a1a;
    --wdm-text-on-gold: #ffffff;
    --wdm-text-on-highlight: #1d1d1d;

    /* Legacy aliases */
    --wdm-text-inverse: var(--wdm-text-on-ink-secondary);
    --wdm-text-inverse-muted: var(--wdm-text-on-ink-muted);

    --font-body: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    --font-mono: Consolas, 'Courier New', monospace;
    --easing: cubic-bezier(0.4, 0, 0.2, 1);
  }

  /* Reset for this page */
  .wdm-canon-home, .wdm-canon-home *, .wdm-canon-home *::before, .wdm-canon-home *::after {
    box-sizing: border-box;
  }
  .wdm-canon-home {
    font-family: var(--font-body);
    color: var(--wdm-text);
    background: var(--wdm-white);
    line-height: 1.65;
    margin: 0; padding: 0;
    overflow-x: hidden;
  }
  .wdm-canon-home img { max-width: 100%; height: auto; display: block; }

  /* Mandatory text-on-surface contracts — every section sets these
     so no descendant ever inherits ink-on-ink or white-on-white */
  .wdm-section--ink, .wdm-section--ink * { color: var(--wdm-text-on-ink); }
  .wdm-section--ink h1, .wdm-section--ink h2, .wdm-section--ink h3, .wdm-section--ink h4 { color: var(--wdm-white); }
  .wdm-section--ink p, .wdm-section--ink li, .wdm-section--ink span:not(.wdm-eyebrow):not([class*="pill"]):not([class*="num"]):not([class*="hint"]):not([class*="meta"]):not([class*="metric"]) { color: var(--wdm-text-on-ink-secondary); }
  .wdm-section--ink small, .wdm-section--ink .muted { color: var(--wdm-text-on-ink-muted); }
  .wdm-section--ink a { color: var(--wdm-gold-soft); }
  .wdm-section--ink a:hover { color: var(--wdm-gold-amber); }

  .wdm-section--cream, .wdm-section--cream * { color: var(--wdm-text-on-cream); }
  .wdm-section--cream h1, .wdm-section--cream h2, .wdm-section--cream h3, .wdm-section--cream h4 { color: var(--wdm-ink); }
  .wdm-section--cream p, .wdm-section--cream li { color: var(--wdm-text); }

  .wdm-section--white, .wdm-section--white p, .wdm-section--white li { color: var(--wdm-text); }
  .wdm-section--white h1, .wdm-section--white h2, .wdm-section--white h3, .wdm-section--white h4 { color: var(--wdm-ink); }

  /* Eyebrow */
  .wdm-eyebrow {
    font-size: 11px;
    letter-spacing: 6px;
    text-transform: uppercase;
    font-weight: 500;
    color: var(--wdm-gold);
    display: block;
    margin: 0 0 16px 0;
  }
  .wdm-eyebrow--mono { font-family: var(--font-mono); letter-spacing: 4px; }

  /* Headings — canon (default colour) */
  .wdm-canon-home h1, .wdm-canon-home h2, .wdm-canon-home h3, .wdm-canon-home h4 {
    font-family: var(--font-body);
    color: var(--wdm-ink);
    margin: 0;
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -0.5px;
  }
  .wdm-canon-home h2 { font-size: clamp(28px, 4vw, 48px); line-height: 1.15; letter-spacing: -0.4px; }
  .wdm-canon-home h3 { font-size: clamp(22px, 2.5vw, 32px); line-height: 1.2; letter-spacing: -0.2px; }
  .wdm-canon-home h4 { font-size: clamp(18px, 1.5vw, 22px); font-weight: 700; line-height: 1.3; letter-spacing: -0.1px; }

  /* CRITICAL: heading colour override on dark sections — must come AFTER the
     general .wdm-canon-home heading rule above so it wins specificity battle.
     Without this rule, h2/h3 inside .wdm-section--ink renders as ink-on-ink
     (the bug we're fixing). */
  .wdm-canon-home .wdm-section--ink h1,
  .wdm-canon-home .wdm-section--ink h2,
  .wdm-canon-home .wdm-section--ink h3,
  .wdm-canon-home .wdm-section--ink h4,
  .wdm-canon-home .wdm-section--dark h1,
  .wdm-canon-home .wdm-section--dark h2,
  .wdm-canon-home .wdm-section--dark h3,
  .wdm-canon-home .wdm-section--dark h4,
  .wdm-canon-home .wdm-hero h1,
  .wdm-canon-home .wdm-hero h2,
  .wdm-canon-home .wdm-hero h3,
  .wdm-canon-home .wdm-final-cta h1,
  .wdm-canon-home .wdm-final-cta h2,
  .wdm-canon-home .wdm-final-cta h3 {
    color: var(--wdm-white) !important;
  }
  .wdm-canon-home .wdm-section--ink p,
  .wdm-canon-home .wdm-section--ink li,
  .wdm-canon-home .wdm-section--dark p,
  .wdm-canon-home .wdm-section--dark li,
  .wdm-canon-home .wdm-final-cta p {
    color: var(--wdm-text-on-ink-secondary) !important;
  }
  .wdm-canon-home .wdm-section--ink .wdm-eyebrow,
  .wdm-canon-home .wdm-section--dark .wdm-eyebrow,
  .wdm-canon-home .wdm-final-cta .wdm-eyebrow {
    color: var(--wdm-gold-soft) !important;
  }
  /* Industry card text contracts on dark — explicit, beats any cascade */
  .wdm-canon-home .wdm-section--ink .wdm-industry,
  .wdm-canon-home .wdm-section--dark .wdm-industry {
    color: var(--wdm-white) !important;
  }
  .wdm-canon-home .wdm-section--ink .wdm-industry__title,
  .wdm-canon-home .wdm-section--dark .wdm-industry__title {
    color: var(--wdm-white) !important;
  }
  .wdm-canon-home .wdm-section--ink .wdm-industry__desc,
  .wdm-canon-home .wdm-section--dark .wdm-industry__desc {
    color: rgba(255, 255, 255, 0.85) !important;
  }
  .wdm-canon-home .wdm-section--ink .wdm-industry__num,
  .wdm-canon-home .wdm-section--dark .wdm-industry__num {
    color: var(--wdm-gold-soft) !important;
  }
  .wdm-canon-home .wdm-section--ink .wdm-industry__hint,
  .wdm-canon-home .wdm-section--dark .wdm-industry__hint {
    color: var(--wdm-gold) !important;
  }

  .wdm-h2--ruled {
    text-transform: uppercase;
    letter-spacing: 1.2px;
    border-bottom: 2px solid var(--wdm-gold);
    padding-bottom: 12px;
    font-size: clamp(20px, 2.4vw, 28px);
    font-weight: 700;
  }

  /* Body */
  .wdm-canon-home p {
    font-size: 17px;
    line-height: 1.65;
    color: var(--wdm-text);
    margin: 0 0 20px 0;
  }
  .wdm-canon-home p.lead {
    font-size: clamp(18px, 2vw, 22px);
    line-height: 1.5;
    color: var(--wdm-text);
    font-weight: 400;
  }

  /* Container */
  .wdm-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .wdm-container--narrow { max-width: 820px; }

  /* Buttons */
  .wdm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.3px;
    padding: 14px 28px;
    border-radius: 4px;
    border: 1px solid transparent;
    text-decoration: none !important;
    cursor: pointer;
    min-height: 48px;
    transition: background-color 200ms var(--easing),
                border-color 200ms var(--easing),
                color 200ms var(--easing);
  }
  .wdm-btn--primary {
    background: var(--wdm-ink); border-color: var(--wdm-ink); color: var(--wdm-white);
  }
  .wdm-btn--primary:hover {
    background: var(--wdm-gold); border-color: var(--wdm-gold); color: var(--wdm-white);
  }
  .wdm-btn--secondary {
    background: transparent; border: 1.5px solid var(--wdm-gold); color: var(--wdm-ink);
  }
  .wdm-btn--secondary:hover {
    background: var(--wdm-gold); border-color: var(--wdm-gold); color: var(--wdm-white);
  }
  .wdm-btn--inverse-primary {
    background: var(--wdm-white); border-color: var(--wdm-white); color: var(--wdm-ink);
  }
  .wdm-btn--inverse-primary:hover {
    background: var(--wdm-gold); border-color: var(--wdm-gold); color: var(--wdm-white);
  }
  .wdm-btn--inverse-secondary {
    background: transparent; border: 1.5px solid var(--wdm-gold-soft); color: var(--wdm-white);
  }
  .wdm-btn--inverse-secondary:hover {
    background: var(--wdm-gold); border-color: var(--wdm-gold); color: var(--wdm-white);
  }
  .wdm-btn--ghost {
    background: transparent; border: none; color: var(--wdm-ink);
    padding: 10px 4px;
    min-height: auto;
  }
  .wdm-btn--ghost:hover {
    color: var(--wdm-gold);
    text-decoration: underline !important;
    text-decoration-color: var(--wdm-gold);
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
  }

  /* ===========================
     1. HERO — full-bleed, asymmetric
     =========================== */
  .wdm-hero {
    position: relative;
    background:
      radial-gradient(circle at 20% 30%, rgba(148,127,87,0.15) 0%, transparent 40%),
      radial-gradient(circle at 80% 70%, rgba(148,127,87,0.08) 0%, transparent 35%),
      linear-gradient(135deg, #1d1d1d 0%, #2a2318 100%);
    color: var(--wdm-white);
    border-bottom: 4px solid var(--wdm-gold);
    padding: clamp(96px, 14vh, 160px) 32px clamp(80px, 10vh, 120px);
    min-height: 88vh;
    display: flex;
    align-items: center;
    overflow: hidden;
  }
  /* Subtle grain texture */
  .wdm-hero::before {
    content: "";
    position: absolute; inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .04 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: 0.6;
    pointer-events: none;
  }
  /* Gold accent rule that animates in */
  .wdm-hero::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    height: 4px;
    background: var(--wdm-gold);
    width: 0;
    animation: wdmRuleDraw 1500ms var(--easing) 200ms forwards;
  }
  @keyframes wdmRuleDraw { to { width: 100%; } }

  .wdm-hero__inner {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 900px) {
    .wdm-hero__inner {
      grid-template-columns: 1.1fr 0.9fr;
      align-items: end;
    }
  }
  .wdm-hero__main {
    animation: wdmFadeUp 800ms var(--easing) both;
  }
  .wdm-hero__meta {
    text-align: left;
    animation: wdmFadeUp 800ms var(--easing) 200ms both;
  }
  @media (min-width: 900px) {
    .wdm-hero__meta { text-align: right; }
  }
  .wdm-hero h1 {
    color: var(--wdm-white);
    font-size: clamp(40px, 7vw, 88px);
    font-weight: 700;
    letter-spacing: -1.2px;
    line-height: 1.02;
    margin: 0 0 28px 0;
    max-width: 14ch;
  }
  .wdm-hero h1 em {
    font-style: normal;
    color: var(--wdm-gold-soft);
    position: relative;
  }
  .wdm-hero__subtitle {
    color: var(--wdm-text-inverse);
    font-size: clamp(17px, 1.6vw, 21px);
    line-height: 1.5;
    font-weight: 300;
    margin: 0 0 40px 0;
    max-width: 52ch;
  }
  .wdm-hero__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
  }
  .wdm-hero__meta-line {
    display: block;
    font-size: 13px;
    letter-spacing: 0.5px;
    color: var(--wdm-text-inverse-muted);
    font-family: var(--font-mono);
    margin: 0 0 8px 0;
  }
  .wdm-hero__location-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
    margin-top: 32px;
    padding-top: 32px;
    border-top: 1px solid rgba(255,255,255,0.12);
  }
  @media (min-width: 900px) { .wdm-hero__location-row { justify-content: flex-end; } }
  .wdm-hero__location {
    color: var(--wdm-text-inverse);
    font-size: 14px;
  }
  .wdm-hero__location strong {
    display: block;
    color: var(--wdm-gold-soft);
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 500;
    margin-bottom: 4px;
    font-family: var(--font-mono);
  }

  @keyframes wdmFadeUp {
    from { opacity: 0; transform: translateY(16px); }
    to { opacity: 1; transform: translateY(0); }
  }

  /* ===========================
     2. MANIFESTO — narrow, large reading
     =========================== */
  .wdm-manifesto {
    background: var(--wdm-white);
    padding: clamp(64px, 10vh, 120px) 32px;
  }
  .wdm-manifesto__inner {
    max-width: 820px;
    margin: 0 auto;
  }
  .wdm-manifesto p {
    font-size: clamp(20px, 2.2vw, 28px);
    line-height: 1.45;
    color: var(--wdm-ink);
    font-weight: 400;
    margin-bottom: 24px;
  }
  .wdm-manifesto p:last-child { margin-bottom: 0; }
  .wdm-manifesto strong {
    color: var(--wdm-gold);
    font-weight: 700;
  }
  .wdm-manifesto strong.mono { font-family: var(--font-mono); }

  /* ===========================
     3. BY THE NUMBERS — KPI strip with refined hierarchy
     =========================== */
  .wdm-numbers {
    background: var(--wdm-cream-warm);
    padding: clamp(64px, 9vh, 96px) 32px;
    border-top: 1px solid var(--wdm-border-warm);
    border-bottom: 1px solid var(--wdm-border-warm);
  }
  .wdm-numbers__head {
    max-width: 1200px;
    margin: 0 auto 40px auto;
  }
  .wdm-numbers__head .wdm-eyebrow { color: var(--wdm-gold-bronze); }
  .wdm-numbers__head h3 {
    font-size: clamp(20px, 2vw, 24px);
    color: var(--wdm-ink);
    font-weight: 500;
    line-height: 1.4;
    max-width: 24ch;
    margin: 0;
  }
  .wdm-numbers__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1px;
    background: var(--wdm-border-warm);
    border: 1px solid var(--wdm-border-warm);
  }
  .wdm-numbers__card {
    text-align: left;
    background: var(--wdm-cream);
    padding: 28px 24px 24px 24px;
    position: relative;
  }
  .wdm-numbers__card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 36px; height: 3px;
    background: var(--wdm-gold);
  }
  .wdm-numbers__value {
    font-family: var(--font-mono);
    font-size: clamp(40px, 5.2vw, 60px);
    font-weight: 700;
    color: var(--wdm-ink);
    line-height: 1;
    margin: 0 0 10px 0;
    letter-spacing: -1.5px;
  }
  .wdm-numbers__value-suffix {
    font-size: 0.5em;
    font-weight: 500;
    color: var(--wdm-gold-bronze);
    margin-left: 2px;
    letter-spacing: 0;
  }
  .wdm-numbers__label {
    font-size: 13px;
    line-height: 1.5;
    color: var(--wdm-ink-mid);
    font-weight: 500;
    margin: 0;
  }
  .wdm-numbers__label strong {
    display: block;
    color: var(--wdm-ink);
    font-weight: 700;
    margin-bottom: 2px;
  }

  /* ===========================
     4. SERVICE PILLARS — 3x4 grid with mono numbers
     =========================== */
  .wdm-pillars {
    background: var(--wdm-white);
    padding: clamp(80px, 12vh, 140px) 32px;
  }
  .wdm-pillars__head {
    max-width: 1200px;
    margin: 0 auto 56px auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 900px) {
    .wdm-pillars__head { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
  }
  .wdm-pillars__head h2 {
    max-width: 18ch;
  }
  .wdm-pillars__head .wdm-h2-meta {
    color: var(--wdm-text-muted);
    font-size: 16px;
    line-height: 1.6;
  }

  .wdm-pillars__grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(1, 1fr);
    gap: 1px;
    background: var(--wdm-border);
    border: 1px solid var(--wdm-border);
    border-radius: 4px;
    overflow: hidden;
  }
  @media (min-width: 600px) { .wdm-pillars__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .wdm-pillars__grid { grid-template-columns: repeat(3, 1fr); } }
  @media (min-width: 1300px) { .wdm-pillars__grid { grid-template-columns: repeat(4, 1fr); } }

  .wdm-pillar {
    background: var(--wdm-white);
    padding: 32px 28px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    transition: background-color 250ms var(--easing);
    position: relative;
    min-height: 240px;
  }
  .wdm-pillar:hover {
    background: var(--wdm-cream);
  }
  .wdm-pillar:hover .wdm-pillar__num {
    color: var(--wdm-gold);
  }
  .wdm-pillar:hover .wdm-pillar__cta::after {
    transform: translateX(4px);
  }
  .wdm-pillar__num {
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--wdm-text-muted);
    letter-spacing: 1px;
    transition: color 250ms var(--easing);
  }
  .wdm-pillar__title {
    font-size: 19px;
    font-weight: 700;
    color: var(--wdm-ink);
    line-height: 1.3;
    letter-spacing: -0.2px;
    margin: 0;
  }
  .wdm-pillar__desc {
    font-size: 14px;
    color: var(--wdm-text-muted);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
  }
  .wdm-pillar__cta {
    font-size: 13px;
    font-weight: 500;
    color: var(--wdm-gold);
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .wdm-pillar__cta::after {
    content: "→";
    font-family: var(--font-body);
    transition: transform 250ms var(--easing);
  }

  /* ===========================
     5. INDUSTRIES — mosaic with feature card for eco
     =========================== */
  .wdm-industries {
    background: var(--wdm-ink);
    color: var(--wdm-white);
    padding: clamp(80px, 12vh, 140px) 32px;
    position: relative;
  }
  .wdm-industries::before {
    content: "";
    position: absolute; inset: 0;
    background:
      radial-gradient(circle at 70% 20%, rgba(148,127,87,0.08) 0%, transparent 40%),
      radial-gradient(circle at 30% 80%, rgba(148,127,87,0.06) 0%, transparent 40%);
    pointer-events: none;
  }
  .wdm-industries__inner {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
  }
  .wdm-industries__head {
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 900px) {
    .wdm-industries__head { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
  }
  .wdm-industries h2 {
    color: var(--wdm-white);
    max-width: 18ch;
  }
  .wdm-industries__head .wdm-h2-meta {
    color: var(--wdm-text-inverse);
    font-size: 16px;
    line-height: 1.6;
  }

  .wdm-industries__grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(1, 1fr);
  }
  @media (min-width: 600px) { .wdm-industries__grid { grid-template-columns: repeat(2, 1fr); } }
  @media (min-width: 1000px) { .wdm-industries__grid { grid-template-columns: repeat(4, 1fr); } }

  .wdm-industry {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.10);
    padding: 28px 24px;
    text-decoration: none;
    color: var(--wdm-white);
    border-radius: 4px;
    transition: border-color 250ms var(--easing), background 250ms var(--easing);
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 200px;
  }
  .wdm-industry:hover {
    border-color: var(--wdm-gold);
    background: rgba(148,127,87,0.06);
  }
  .wdm-industry__num {
    font-family: var(--font-mono);
    font-size: 12px;
    color: var(--wdm-gold-soft);
    letter-spacing: 1.5px;
  }
  .wdm-industry__title {
    font-size: 17px;
    font-weight: 700;
    color: var(--wdm-white);
    line-height: 1.3;
    margin: 0;
  }
  .wdm-industry__desc {
    font-size: 13px;
    color: var(--wdm-text-inverse);
    line-height: 1.6;
    margin: 0;
    flex-grow: 1;
  }
  .wdm-industry__hint {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--wdm-gold);
    margin-top: auto;
  }

  /* Feature card — eco super-vertical, spans 2 cols on desktop */
  .wdm-industry--feature {
    background: linear-gradient(135deg, rgba(148,127,87,0.18) 0%, rgba(148,127,87,0.06) 100%);
    border-color: rgba(148,127,87,0.35);
    grid-column: span 1;
  }
  @media (min-width: 1000px) {
    .wdm-industry--feature { grid-column: span 2; grid-row: span 1; }
  }
  .wdm-industry--feature .wdm-industry__title {
    font-size: 22px;
  }
  .wdm-industry--feature .wdm-industry__desc {
    font-size: 14px;
  }

  /* ===========================
     6. PROGRAMMATIC SEO BAND — search demo
     =========================== */
  .wdm-prog {
    background: var(--wdm-white);
    padding: clamp(80px, 12vh, 140px) 32px;
    border-top: 1px solid var(--wdm-border);
  }
  .wdm-prog__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 900px) { .wdm-prog__inner { grid-template-columns: 0.9fr 1.1fr; align-items: center; } }

  .wdm-prog__copy h2 { max-width: 16ch; }
  .wdm-prog__copy p.lead {
    color: var(--wdm-text-muted);
    margin-top: 24px;
  }
  .wdm-prog__matrix {
    margin-top: 32px;
    border: 1px solid var(--wdm-border);
    border-radius: 4px;
    overflow: hidden;
  }
  .wdm-prog__matrix-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid var(--wdm-border);
  }
  .wdm-prog__matrix-row:last-child { border-bottom: 0; }
  .wdm-prog__matrix-row--head { background: var(--wdm-ink); }
  .wdm-prog__matrix-row--head > div {
    color: var(--wdm-white);
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    font-weight: 500;
    padding: 12px 16px;
  }
  .wdm-prog__matrix-row > div { padding: 14px 16px; font-size: 14px; }
  .wdm-prog__matrix-row--data > div:first-child { font-weight: 500; color: var(--wdm-ink); }
  .wdm-prog__matrix-row--data > div:nth-child(2) { font-family: var(--font-mono); color: var(--wdm-text-muted); }
  .wdm-prog__matrix-row--data > div:nth-child(3) { font-family: var(--font-mono); color: var(--wdm-gold); font-weight: 700; }
  .wdm-prog__matrix-row--data:nth-child(even) { background: var(--wdm-cream); }
  .wdm-prog__matrix-row--total > div { font-weight: 700; color: var(--wdm-ink); border-top: 2px solid var(--wdm-ink); }

  /* SERP demo — stylised search bar + result card */
  .wdm-serp {
    background: var(--wdm-cream);
    border: 1px solid var(--wdm-border);
    border-radius: 8px;
    padding: 32px;
    box-shadow: 0 12px 32px rgba(29,29,29,0.08);
  }
  .wdm-serp__bar {
    background: var(--wdm-white);
    border: 1px solid var(--wdm-border-strong);
    border-radius: 24px;
    padding: 14px 24px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 15px;
    color: var(--wdm-text-muted);
    font-family: var(--font-mono);
    margin-bottom: 24px;
    box-shadow: 0 1px 4px rgba(29,29,29,0.04);
  }
  .wdm-serp__bar svg { flex-shrink: 0; opacity: 0.5; }
  .wdm-serp__query {
    flex: 1;
    color: var(--wdm-ink);
    font-weight: 500;
  }
  .wdm-serp__result {
    background: var(--wdm-white);
    border-left: 3px solid var(--wdm-gold);
    padding: 20px 24px;
    border-radius: 0 4px 4px 0;
  }
  .wdm-serp__breadcrumb {
    font-size: 12px;
    color: var(--wdm-text-muted);
    margin-bottom: 6px;
    font-family: var(--font-mono);
  }
  .wdm-serp__title {
    font-size: 18px;
    font-weight: 700;
    color: var(--wdm-ink);
    line-height: 1.3;
    margin: 0 0 6px 0;
  }
  .wdm-serp__title a { color: inherit; text-decoration: none; }
  .wdm-serp__meta {
    font-size: 14px;
    color: var(--wdm-text-muted);
    line-height: 1.5;
    margin: 0;
  }
  .wdm-serp__pill {
    display: inline-block;
    margin-top: 12px;
    padding: 3px 10px;
    background: var(--wdm-highlight);
    border: 1px solid var(--wdm-gold);
    border-radius: 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wdm-gold-deep);
    font-weight: 500;
  }

  /* ===========================
     7. GEOGRAPHY — UK + ES split
     =========================== */
  .wdm-geo {
    background: var(--wdm-cream);
    padding: clamp(72px, 10vh, 120px) 32px;
    border-top: 1px solid var(--wdm-border);
    border-bottom: 1px solid var(--wdm-border);
  }
  .wdm-geo__head {
    max-width: 1200px;
    margin: 0 auto 48px auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
  }
  @media (min-width: 900px) {
    .wdm-geo__head { grid-template-columns: 1.1fr 0.9fr; align-items: end; }
  }
  .wdm-geo__head h2 { max-width: 18ch; }
  .wdm-geo__split {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 800px) { .wdm-geo__split { grid-template-columns: 1fr 1fr; } }
  .wdm-geo__col {
    background: var(--wdm-white);
    border: 1px solid var(--wdm-border);
    border-top: 3px solid var(--wdm-gold);
    padding: 32px;
    border-radius: 4px;
  }
  .wdm-geo__col h3 {
    font-size: 22px;
    margin-bottom: 4px;
  }
  .wdm-geo__col .wdm-geo__count {
    display: block;
    font-family: var(--font-mono);
    font-size: 13px;
    color: var(--wdm-gold);
    letter-spacing: 0.5px;
    margin-bottom: 24px;
  }
  .wdm-geo__col p {
    font-size: 15px;
    color: var(--wdm-text-muted);
    line-height: 1.6;
    margin-bottom: 20px;
  }
  .wdm-geo__towns {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 12px;
    font-size: 13px;
    color: var(--wdm-text);
    margin: 0 0 20px 0;
    padding: 0;
    list-style: none;
  }
  .wdm-geo__towns li {
    color: var(--wdm-text);
    position: relative;
  }
  .wdm-geo__towns li:not(:last-child)::after {
    content: " ·";
    color: var(--wdm-gold);
    margin-left: 4px;
  }

  /* ===========================
     8. CASE STUDY HIGHLIGHT — editorial
     =========================== */
  .wdm-case {
    background: var(--wdm-white);
    padding: clamp(80px, 12vh, 140px) 32px;
  }
  .wdm-case__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 900px) {
    .wdm-case__inner { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  }
  .wdm-case__visual {
    background: linear-gradient(135deg, var(--wdm-ink) 0%, var(--wdm-ink-warm) 100%);
    border: 1px solid var(--wdm-ink);
    border-radius: 4px;
    padding: 56px 40px;
    color: var(--wdm-white);
    position: relative;
    overflow: hidden;
  }
  .wdm-case__visual::after {
    content: "";
    position: absolute;
    bottom: 0; left: 0;
    height: 4px; width: 100%;
    background: var(--wdm-gold);
  }
  .wdm-case__metric {
    font-family: var(--font-mono);
    font-size: clamp(40px, 6vw, 72px);
    font-weight: 700;
    color: var(--wdm-gold);
    line-height: 1;
    margin: 0 0 12px 0;
    letter-spacing: -1px;
  }
  .wdm-case__metric-label {
    font-size: 13px;
    color: var(--wdm-text-inverse-muted);
    text-transform: uppercase;
    letter-spacing: 2px;
    margin: 0 0 36px 0;
  }
  .wdm-case__visual h3 {
    color: var(--wdm-white);
    font-size: 22px;
    line-height: 1.3;
    margin: 0 0 12px 0;
  }
  .wdm-case__visual p {
    color: var(--wdm-text-inverse);
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 24px 0;
  }
  .wdm-case__copy h2 { max-width: 18ch; }
  .wdm-case__quote {
    font-family: var(--font-body);
    font-size: clamp(20px, 2.2vw, 26px);
    line-height: 1.45;
    color: var(--wdm-ink);
    border-left: 4px solid var(--wdm-gold);
    padding: 8px 0 8px 32px;
    margin: 32px 0;
    font-weight: 400;
  }
  .wdm-case__quote-attr {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--wdm-gold);
    font-weight: 500;
    margin-top: 8px;
    display: block;
  }

  /* ===========================
     9. PORTAL TEASER — split
     =========================== */
  .wdm-portal {
    background: var(--wdm-cream);
    padding: clamp(80px, 12vh, 140px) 32px;
    border-top: 1px solid var(--wdm-border);
    border-bottom: 1px solid var(--wdm-border);
  }
  .wdm-portal__inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 48px;
  }
  @media (min-width: 900px) {
    .wdm-portal__inner { grid-template-columns: 1fr 1fr; align-items: center; }
  }
  .wdm-portal__copy h2 { max-width: 16ch; }
  .wdm-portal__steps {
    margin: 32px 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 20px;
  }
  .wdm-portal__steps li {
    display: grid;
    grid-template-columns: 36px 1fr;
    gap: 20px;
    align-items: start;
  }
  .wdm-portal__step-num {
    font-family: var(--font-mono);
    font-size: 14px;
    color: var(--wdm-gold);
    font-weight: 700;
    letter-spacing: 1px;
    line-height: 1.5;
    border-top: 2px solid var(--wdm-gold);
    padding-top: 10px;
  }
  .wdm-portal__step-body strong {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--wdm-ink);
    margin-bottom: 4px;
  }
  .wdm-portal__step-body span {
    font-size: 14px;
    color: var(--wdm-text-muted);
    line-height: 1.5;
  }
  /* Portal mock dashboard */
  .wdm-portal__mock {
    background: var(--wdm-white);
    border: 1px solid var(--wdm-border);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(29,29,29,0.10);
  }
  .wdm-portal__mock-bar {
    background: var(--wdm-ink);
    padding: 14px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 4px solid var(--wdm-gold);
  }
  .wdm-portal__mock-dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: rgba(255,255,255,0.18);
  }
  .wdm-portal__mock-url {
    margin-left: 12px;
    color: var(--wdm-text-inverse);
    font-size: 12px;
    font-family: var(--font-mono);
    letter-spacing: 0.3px;
  }
  .wdm-portal__mock-body {
    padding: 24px;
  }
  .wdm-portal__mock-eyebrow {
    font-size: 11px;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: var(--wdm-gold);
    font-weight: 500;
    margin: 0 0 4px 0;
  }
  .wdm-portal__mock-h {
    font-size: 18px;
    font-weight: 700;
    color: var(--wdm-ink);
    margin: 0 0 20px 0;
    padding-bottom: 12px;
    border-bottom: 2px solid var(--wdm-gold);
  }
  .wdm-portal__mock-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 24px;
  }
  .wdm-portal__mock-kpi {
    border: 1px solid var(--wdm-border);
    border-top: 3px solid var(--wdm-gold);
    padding: 14px 16px;
    border-radius: 4px;
  }
  .wdm-portal__mock-kpi-val {
    font-family: var(--font-mono);
    font-size: 22px;
    font-weight: 700;
    color: var(--wdm-ink);
    line-height: 1;
    margin: 0 0 4px 0;
  }
  .wdm-portal__mock-kpi-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--wdm-text-muted);
    font-weight: 500;
  }
  .wdm-portal__mock-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--wdm-border);
    font-size: 13px;
  }
  .wdm-portal__mock-row:last-child { border-bottom: 0; }
  .wdm-portal__mock-row-left { color: var(--wdm-ink); font-weight: 500; }
  .wdm-portal__mock-row-meta { color: var(--wdm-text-muted); font-size: 12px; font-family: var(--font-mono); }
  .wdm-portal__mock-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    font-weight: 500;
  }
  .wdm-portal__mock-pill--paid { background: #eaf3ec; color: #2e6e3a; }
  .wdm-portal__mock-pill--pending { background: #faf2dc; color: #a87c20; }
  .wdm-portal__mock-pill--signed { background: var(--wdm-highlight); color: var(--wdm-gold-deep); border: 1px solid var(--wdm-gold); }

  /* ===========================
     10. FINAL CTA — massive ink band
     =========================== */
  .wdm-final-cta {
    background:
      radial-gradient(circle at 30% 50%, rgba(148,127,87,0.15) 0%, transparent 50%),
      var(--wdm-ink);
    color: var(--wdm-white);
    padding: clamp(100px, 14vh, 160px) 32px;
    border-top: 4px solid var(--wdm-gold);
    border-bottom: 4px solid var(--wdm-gold);
    text-align: center;
  }
  .wdm-final-cta__inner {
    max-width: 820px;
    margin: 0 auto;
  }
  .wdm-final-cta h2 {
    color: var(--wdm-white);
    font-size: clamp(36px, 6vw, 72px);
    font-weight: 700;
    letter-spacing: -1.5px;
    line-height: 1.05;
    margin: 0 0 24px 0;
  }
  .wdm-final-cta h2 em {
    font-style: normal;
    color: var(--wdm-gold-soft);
  }
  .wdm-final-cta p {
    color: var(--wdm-text-inverse);
    font-size: 17px;
    line-height: 1.6;
    max-width: 56ch;
    margin: 0 auto 36px auto;
  }
  .wdm-final-cta__ctas {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
  }

  /* ===========================
     Animations + reduced motion
     =========================== */
  @media (prefers-reduced-motion: reduce) {
    .wdm-hero::after, .wdm-hero__main, .wdm-hero__meta {
      animation: none !important;
    }
  }

  /* Hide the Elementor hero/header that the parent theme template might still emit */
  .elementor-section.elementor-top-section.wdm-old-hero,
  .elementor-edit-area-active .wdm-canon-home { display: none; }

  /* ============================================================================
     CRITICAL — WCAG AA contrast fixes for the home page (added 2026-05-07)
     wdm-home.css loads AFTER wdm-design-system.css, so these rules win
     specificity battles cleanly.
     ============================================================================ */

  /* On LIGHT surfaces (white/cream) — gold needs to be at least #7d6a48 (gold-deep, 4.97:1).
     On cream-warm (#ede5d8) need bronze (#6e5a3a, 5.4:1) because the warm-cream is
     slightly darker than #f7f5f2. */
  .wdm-canon-home .wdm-section--white .wdm-eyebrow,
  .wdm-canon-home .wdm-pillars .wdm-eyebrow,
  .wdm-canon-home .wdm-prog .wdm-eyebrow,
  .wdm-canon-home .wdm-geo .wdm-eyebrow,
  .wdm-canon-home .wdm-case .wdm-eyebrow,
  .wdm-canon-home .wdm-portal .wdm-eyebrow,
  .wdm-canon-home .wdm-geo__count,
  .wdm-canon-home .wdm-case__quote-attr,
  .wdm-canon-home .wdm-portal__step-num,
  .wdm-canon-home .wdm-portal__mock-eyebrow {
    color: var(--wdm-gold-deep) !important;
  }
  /* Cream-warm and cream surfaces need an even darker gold (bronze) */
  .wdm-canon-home .wdm-section--cream .wdm-eyebrow,
  .wdm-canon-home .wdm-numbers .wdm-eyebrow,
  .wdm-canon-home .wdm-industries:not(.wdm-section--ink):not(.wdm-section--dark) .wdm-eyebrow {
    color: var(--wdm-gold-bronze) !important;
  }
  /* Pending pill on cream — needs warm-yellow background for legibility */
  .wdm-canon-home .wdm-portal__mock-pill--pending {
    color: var(--wdm-gold-bronze) !important;
    background: var(--wdm-highlight) !important;
  }
  /* Programmatic matrix — header row is ink (white text); data rows are cream/white;
     col 3 (the count) needs bronze for AA on cream. Total row gets ink-warm bg. */
  .wdm-canon-home .wdm-prog__matrix-row--head > div {
    color: var(--wdm-white) !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--data > div:first-child {
    color: var(--wdm-ink) !important;
    font-weight: 600 !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--data > div:nth-child(2) {
    color: var(--wdm-text) !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--data > div:nth-child(3) {
    color: var(--wdm-gold-bronze) !important;
    font-weight: 700 !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--total {
    background: var(--wdm-ink-warm) !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--total > div {
    color: var(--wdm-white) !important;
    font-weight: 700 !important;
  }
  .wdm-canon-home .wdm-prog__matrix-row--total > div:nth-child(3) {
    color: var(--wdm-gold-soft) !important;
  }

  /* Testimonial slider on cream — eyebrow must read */
  .wdm-canon-home .wdm-tr .wdm-tr__eyebrow {
    color: var(--wdm-gold-deep) !important;
  }

  /* Pending pill on light (portal mock — pill style) */
  .wdm-canon-home .wdm-portal__mock-pill--pending {
    color: var(--wdm-gold-deep) !important;
    background: var(--wdm-highlight) !important;
  }

  /* Inverse-primary CTA button text — must be white on ink button */
  .wdm-canon-home .wdm-btn.wdm-btn--inverse-primary {
    color: var(--wdm-white) !important;
    background: var(--wdm-ink) !important;
  }

  /* Footer "View all" link — gold on ink, needs to be lighter for AA */
  .wdm-canon-home .wdm-footer .wdm-footer__col-all a,
  .wdm-canon-home .wdm-footer__col-all a {
    color: var(--wdm-gold-soft) !important;
  }
  .wdm-canon-home .wdm-footer .wdm-footer__col-all a:hover,
  .wdm-canon-home .wdm-footer__col-all a:hover {
    color: var(--wdm-white) !important;
  }

  /* ===========================
     TRUST STRIP — named clients (Hormozi credibility move)
     =========================== */
  .wdm-trust-strip {
    background: var(--wdm-cream);
    border-top: 1px solid var(--wdm-border);
    border-bottom: 1px solid var(--wdm-border);
    padding: 24px 32px;
  }
  .wdm-trust-strip__inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
  }
  .wdm-trust-strip__label {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--wdm-gold-bronze);
    letter-spacing: 1.4px;
    text-transform: uppercase;
    font-weight: 600;
    flex-shrink: 0;
    white-space: nowrap;
  }
  .wdm-trust-strip__names {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 22px;
    flex: 1;
  }
  .wdm-trust-strip__names li {
    font-family: var(--font-body);
    font-size: 13.5px;
    color: var(--wdm-ink);
    font-weight: 500;
    letter-spacing: 0.1px;
    white-space: nowrap;
    position: relative;
  }
  .wdm-trust-strip__names li:not(:last-child)::after {
    content: "·";
    color: var(--wdm-border-strong);
    margin-left: 22px;
    position: absolute;
  }
  .wdm-trust-strip__plus {
    color: var(--wdm-gold-deep) !important;
    font-style: italic;
    font-weight: 400 !important;
  }
  @media (max-width: 720px) {
    .wdm-trust-strip { padding: 18px 16px; }
    .wdm-trust-strip__inner { gap: 14px; }
    .wdm-trust-strip__names { gap: 6px 16px; font-size: 12.5px; }
    .wdm-trust-strip__names li:not(:last-child)::after { margin-left: 16px; }
  }

  /* ===========================
     SPARKLINE — signal compounds chart
     =========================== */
  .wdm-spark-wrap {
    max-width: 720px;
    margin: 48px auto 0;
    padding: 24px 28px;
    background: var(--wdm-white);
    border: 1px solid var(--wdm-border);
    border-top: 3px solid var(--wdm-gold);
    border-radius: 4px;
    text-align: left;
  }
  .wdm-spark__label {
    display: block;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: var(--wdm-gold-bronze);
    margin-bottom: 16px;
    font-weight: 600;
  }
  .wdm-spark {
    width: 100%;
    height: 120px;
    display: block;
    margin: 8px 0 14px;
  }
  .wdm-spark__line {
    stroke-dasharray: 1200;
    stroke-dashoffset: 1200;
    transition: stroke-dashoffset 1800ms cubic-bezier(0.4, 0, 0.2, 1);
  }
  .wdm-spark.is-drawn .wdm-spark__line {
    stroke-dashoffset: 0;
  }
  .wdm-spark__area {
    opacity: 0;
    transition: opacity 800ms ease 1200ms;
  }
  .wdm-spark.is-drawn .wdm-spark__area {
    opacity: 1;
  }
  .wdm-spark__dot {
    opacity: 0;
    transform-origin: 600px 8px;
    transition: opacity 320ms ease 1600ms, transform 320ms ease 1600ms;
  }
  .wdm-spark.is-drawn .wdm-spark__dot {
    opacity: 1;
  }
  .wdm-spark__caption {
    display: block;
    font-size: 13.5px;
    color: var(--wdm-text);
    line-height: 1.55;
    margin-top: 8px;
  }
  @media (prefers-reduced-motion: reduce) {
    .wdm-spark__line { stroke-dashoffset: 0; transition: none; }
    .wdm-spark__area { opacity: 1; transition: none; }
    .wdm-spark__dot { opacity: 1; transition: none; }
  }