/* ═══════════════════════════════════════════════════════════════════════
   Projects Expert — Front-end Kit
   pe.css  ·  Phase 3 foundations
   ───────────────────────────────────────────────────────────────────────
   One stylesheet for the whole site. Namespaced with `pe-`, scoped under
   `.pe-site` (body) and organised in cascade layers so it can sit next to
   Oracle APEX Universal Theme without !important.

   Source of truth for values: 03 - Design System (tokens/*.css), brand
   guidelines June 2026. Extensions are marked  @extended  with a reason.

   Layers (later wins):
     pe.tokens → pe.reset → pe.base → pe.layout → pe.components
     → pe.templates → pe.utilities → pe.motion

   APEX: upload as Static Application File css/pe.css; asset URLs inside
   are relative (../assets/…) so #APP_FILES# substitution is a single
   find-and-replace.
   ═══════════════════════════════════════════════════════════════════════ */

@layer pe.tokens, pe.reset, pe.base, pe.layout, pe.components, pe.templates, pe.utilities, pe.motion;

/* ── Fonts (self-hosted, from the Design System) ─────────────────────── */
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/figtree-300.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/figtree-400.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 500; font-display: swap; src: url("../assets/fonts/figtree-500.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url("../assets/fonts/figtree-600.woff2") format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/figtree-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 300; font-display: swap; src: url("../assets/fonts/lato-300.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("../assets/fonts/lato-400.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 700; font-display: swap; src: url("../assets/fonts/lato-700.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 900; font-display: swap; src: url("../assets/fonts/lato-900.woff2") format("woff2"); }

/* ═══════════════════════════════════════════════════════════════════════
   1. TOKENS
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.tokens {
  :root {
    /* ── Brand core (verbatim, brand guidelines p.7) ── */
    --pe-teal-300: #49A5B8;
    --pe-teal-500: #3A7C8A;
    --pe-teal-600: #2A5862;
    --pe-teal-900: #072D33;
    --pe-ink:      #162026;
    --pe-orange:   #FF510A;
    --pe-white:    #FFFFFF;

    /* ── Extended (Design System, observed in collateral) ── */
    --pe-teal-700: #005A69;   /* panel teal */
    --pe-mist:     #DBE8EA;
    --pe-cloud:    #EEF3F4;
    --pe-silver:   #E4E9EB;
    --pe-teal-950: #04191D;   /* primary button active */

    /* ── Orange roles (Phase 3 decision) ──
       --pe-orange       #FF510A  BRAND ACCENT: one headline word (large text, white or dark
                                  surfaces only), decorative gear tint, accent icons. Never a fill
                                  behind white text (3.26:1).
       --pe-orange-deep  #C93D05  ACCESSIBLE CTA FILL and accent text on tinted surfaces.
                                  5.06:1 with white text, 4.4:1 on cloud.
       --pe-orange-deep-hover / -active: darker steps for the CTA fill only.
       There are no other orange tokens. */
    --pe-orange-deep: #C93D05;
    --pe-orange-deep-hover: #B03505;
    --pe-orange-deep-active: #962D04;

    /* ── @extended: text on dark ──
       teal-300 drops to 3.0:1 at the light end of the dark gradient.
       teal-200 stays ≥4.7:1 across the whole gradient, so eyebrows and
       small teal text on dark surfaces use it. Decorative teal on dark
       (rules, dots, gear tints) keeps teal-300. */
    --pe-teal-200: #8ECAD7;

    /* ── @extended: form feedback ──
       The brand set has no status colours. Error is a cool red so it can
       never be confused with the orange accent; success is a teal-family
       green. Both ≥4.9:1 on white. */
    --pe-error:   #B42318;
    --pe-success: #1B7F5A;

    /* ── Text (Design System semantic) ── */
    --pe-text-heading: var(--pe-ink);
    --pe-text-body:    #3D4A50;
    --pe-text-muted:   #5F6E74;            /* @extended (RB-01): 5.3:1 on white, 4.7:1 on cloud; DS value #6B7A80 was 4.45:1 */
    --pe-text-inverse: var(--pe-white);
    --pe-text-inverse-muted: rgba(255,255,255,0.72);
    --pe-text-inverse-faint: rgba(255,255,255,0.68); /* @extended (RB-02): ≥4.5:1 across the dark gradient for 13px text */
    --pe-line-inverse-faint: rgba(255,255,255,0.55); /* decorative only: cue word, hairlines */
    --pe-text-accent:  var(--pe-teal-500);
    --pe-text-highlight: var(--pe-orange);  /* large text on white or dark only */

    /* ── Surfaces ── */
    --pe-surface-page:   var(--pe-white);
    --pe-surface-subtle: var(--pe-cloud);
    --pe-surface-card:   var(--pe-white);
    --pe-surface-dark:   var(--pe-teal-900);
    --pe-surface-dark-panel: var(--pe-teal-700);
    --pe-surface-inverse-card: rgba(255,255,255,0.06);

    /* ── Interactive ── */
    --pe-primary:        var(--pe-teal-600);
    --pe-primary-hover:  var(--pe-teal-900);
    --pe-primary-active: var(--pe-teal-950);
    --pe-accent:         var(--pe-orange-deep);        /* CTA fill (accessible) */
    --pe-accent-hover:   var(--pe-orange-deep-hover);
    --pe-accent-active:  var(--pe-orange-deep-active);
    --pe-link:           var(--pe-teal-500);
    --pe-link-hover:     var(--pe-teal-900);
    --pe-link-inverse:   var(--pe-white);
    --pe-focus:          var(--pe-teal-500);   /* @extended: solid ring, 4.7:1 on white (WCAG 2.2 focus appearance) */
    --pe-focus-inverse:  var(--pe-white);

    /* ── Lines ── */
    --pe-line:          #DCE3E5;
    --pe-line-strong:   #B7C4C8;
    --pe-line-inverse:  rgba(255,255,255,0.18);
    --pe-line-inverse-soft: rgba(255,255,255,0.10);
    --pe-line-dark-on-light: rgba(7,45,51,0.15);

    /* ── Gradients (brand backgrounds) ── */
    --pe-gradient-dark:   linear-gradient(120deg, #0B3238 0%, #123E46 55%, #16535E 100%);
    --pe-gradient-silver: linear-gradient(120deg, #F4F7F7 0%, #E4E9EB 50%, #F7FAFA 100%);

    /* ── Typography ── */
    --pe-font-display: "Figtree", "Artific", "Helvetica Neue", Arial, sans-serif;
    --pe-font-body:    "Lato", "Helvetica Neue", Arial, sans-serif;

    --pe-weight-display: 600;   /* headings (draft-approved weight) */
    --pe-weight-display-medium: 500;
    --pe-weight-display-light: 300;
    --pe-weight-body: 400;
    --pe-weight-body-bold: 700;

    /* Fluid scale: design-system px at 1440, tightened towards 390.
       display 64→40 · h1 48→34 · h2 36→28 · h3 26→22 · h4 20→18 */
    --pe-text-display: clamp(2.5rem, 1.55rem + 3.3vw, 4rem);
    --pe-text-h1:      clamp(2.125rem, 1.6rem + 1.9vw, 3rem);
    --pe-text-h2:      clamp(1.75rem, 1.45rem + 1.1vw, 2.25rem);
    --pe-text-h3:      clamp(1.375rem, 1.28rem + 0.4vw, 1.625rem);
    --pe-text-h4:      clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
    --pe-text-lead:    clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
    --pe-text-base:    1rem;
    --pe-text-small:   0.875rem;
    --pe-text-caption: 0.75rem;
    --pe-text-eyebrow: 0.8125rem;

    --pe-leading-tight:   1.06;
    --pe-leading-heading: 1.15;
    --pe-leading-body:    1.6;
    --pe-leading-lede:    1.55;

    --pe-tracking-caps:  0.18em;
    --pe-tracking-wide:  0.04em;
    --pe-tracking-tight: -0.01em;

    /* ── Spacing ── */
    --pe-space-1: 4px;  --pe-space-2: 8px;  --pe-space-3: 12px; --pe-space-4: 16px;
    --pe-space-5: 24px; --pe-space-6: 32px; --pe-space-7: 48px; --pe-space-8: 64px;
    --pe-space-9: 96px; --pe-space-10: 128px;

    /* Section rhythm: 48 (mobile) → 96 (desktop); Home/storytelling: 64 → 128 */
    --pe-section:    clamp(3rem, 1.9rem + 3.8vw, 6rem);
    --pe-section-lg: clamp(4rem, 2.5rem + 5vw, 8rem);

    /* ── Layout ── */
    --pe-container:      1200px;   /* default content container */
    --pe-container-wide: 1320px;   /* wide-composition option (selective) */
    --pe-measure:        68ch;     /* long-form reading measure */
    --pe-measure-lede:   36rem;
    --pe-gutter: 24px;
    --pe-gap:    16px;
    /* Navigation breakpoint — ONE shared token. CSS media queries cannot
       read custom properties, so the same value is written once more in
       the header media query (Phase 4) under a matching comment, and
       pe.js reads this property for matchMedia. */
    --pe-bp-nav: 1200px;

    /* ── Radii ── */
    --pe-radius-sm: 6px; --pe-radius-md: 10px; --pe-radius-lg: 16px; --pe-radius-xl: 24px; --pe-radius-pill: 999px;

    /* ── Shadows (cool, quiet) ── */
    --pe-shadow-card:   0 1px 2px rgba(7,45,51,0.06), 0 8px 24px rgba(7,45,51,0.08);
    --pe-shadow-raised: 0 2px 6px rgba(7,45,51,0.10), 0 16px 40px rgba(7,45,51,0.14);
    --pe-shadow-dialog: 0 24px 64px rgba(7,45,51,0.28);

    /* ── Motion ── */
    --pe-ease-out:  cubic-bezier(0.22, 1, 0.36, 1);
    --pe-ease-expo: cubic-bezier(0.16, 1, 0.30, 1);
    --pe-dur-fast:  140ms;
    --pe-dur-base:  220ms;
    --pe-dur-slow:  400ms;
    --pe-dur-reveal: 900ms;
    --pe-reveal-y:  28px;
    --pe-gear-idle: 160s;

    /* ── Z-index ── */
    --pe-z-header: 50; --pe-z-drawer: 60; --pe-z-dialog: 100; --pe-z-skip: 1000;
  }

  @media (min-width: 768px)  { :root { --pe-gutter: 48px; --pe-gap: 24px; } }
  @media (min-width: 1280px) { :root { --pe-gutter: 64px; } }
}

/* ═══════════════════════════════════════════════════════════════════════
   2. RESET (scoped to .pe-site so Universal Theme is untouched)
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.reset {
  .pe-site, .pe-site *, .pe-site *::before, .pe-site *::after { box-sizing: border-box; }
  .pe-site { margin: 0; }
  .pe-site :where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote,fieldset) { margin: 0; }
  .pe-site :where(ul,ol) { padding: 0; list-style: none; }
  .pe-site :where(fieldset) { padding: 0; border: 0; min-width: 0; }
  .pe-site :where(img,svg,video,picture) { display: block; max-width: 100%; height: auto; }
  .pe-site :where(button,input,select,textarea) { font: inherit; color: inherit; }
  .pe-site :where(button) { background: none; border: 0; padding: 0; cursor: pointer; }
  .pe-site :where(a) { color: inherit; }
  .pe-site :where(address) { font-style: normal; }
}

/* ═══════════════════════════════════════════════════════════════════════
   3. BASE
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.base {
  .pe-site {
    font-family: var(--pe-font-body);
    font-size: var(--pe-text-base);
    line-height: var(--pe-leading-body);
    color: var(--pe-text-body);
    background: var(--pe-surface-page);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
  }
  .pe-site ::selection { background: var(--pe-teal-300); color: var(--pe-teal-900); }

  .pe-site :where(h1,h2,h3,h4,.pe-h1,.pe-h2,.pe-h3,.pe-h4) {
    font-family: var(--pe-font-display);
    font-weight: var(--pe-weight-display);
    color: var(--pe-text-heading);
    line-height: var(--pe-leading-heading);
    letter-spacing: var(--pe-tracking-tight);
    text-wrap: balance;
  }
  .pe-site :where(h1,.pe-h1) { font-size: var(--pe-text-h1); line-height: var(--pe-leading-tight); }
  .pe-site :where(h2,.pe-h2) { font-size: var(--pe-text-h2); line-height: 1.1; }
  .pe-site :where(h3,.pe-h3) { font-size: var(--pe-text-h3); }
  .pe-site :where(h4,.pe-h4) { font-size: var(--pe-text-h4); font-weight: var(--pe-weight-display); }
  .pe-display { font-family: var(--pe-font-display); font-weight: var(--pe-weight-display); font-size: var(--pe-text-display); line-height: var(--pe-leading-tight); letter-spacing: var(--pe-tracking-tight); color: var(--pe-text-heading); text-wrap: balance; }

  .pe-site :where(a) { text-decoration: none; }

  /* Focus: solid 2px ring, offset, high contrast on both surface families */
  .pe-site :focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 3px; border-radius: 2px; }
  .pe-on-dark :focus-visible, .pe-site .pe-on-dark :focus-visible { outline-color: var(--pe-focus-inverse); }

  /* Skip link */
  .pe-skip { position: absolute; left: var(--pe-space-4); top: -100px; z-index: var(--pe-z-skip); padding: 12px 20px; border-radius: var(--pe-radius-sm); background: var(--pe-teal-600); color: var(--pe-white); font-family: var(--pe-font-display); font-weight: 600; }
  .pe-skip:focus { top: var(--pe-space-4); }
}

/* ═══════════════════════════════════════════════════════════════════════
   4. LAYOUT
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.layout {
  .pe-container { width: 100%; max-width: calc(var(--pe-container) + var(--pe-gutter) * 2); margin-inline: auto; padding-inline: var(--pe-gutter); }
  .pe-container--wide   { max-width: calc(var(--pe-container-wide) + var(--pe-gutter) * 2); }
  .pe-container--narrow { max-width: calc(var(--pe-measure) + var(--pe-gutter) * 2); }

  .pe-grid { display: grid; gap: var(--pe-gap); grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .pe-grid > * { min-width: 0; }   /* long unbreakable content can never blow the track out */
  .pe-grid--2, .pe-grid--3, .pe-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .pe-grid--sidebar, .pe-grid--narrative, .pe-grid--split { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 768px) {
    .pe-grid--2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pe-grid--3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pe-grid--4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .pe-grid--split { grid-template-columns: repeat(2, minmax(0,1fr)); }
  }
  @media (min-width: 1024px) {
    .pe-grid--3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
    .pe-grid--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
    .pe-grid--sidebar   { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pe-space-8); }
    .pe-grid--narrative { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); }
  }

  .pe-section { position: relative; padding-block: var(--pe-section); background: var(--pe-surface-page); }
  .pe-section--lg     { padding-block: var(--pe-section-lg); }
  .pe-section--subtle { background: var(--pe-surface-subtle); }
  /* Small accent type on tinted surfaces uses teal-600 (7.0:1) — teal-500 is 4.2:1 on cloud (RB-45) */
  .pe-section--subtle, .pe-section--silver, .pe-download { --pe-text-accent: var(--pe-teal-600); --pe-link: var(--pe-teal-600); } /* links on tints too (A11Y-01) */
  .pe-section--silver { background-image: var(--pe-gradient-silver); }
  .pe-section--dark   { background: var(--pe-surface-dark); background-image: var(--pe-gradient-dark); color: var(--pe-text-inverse-muted); }
  .pe-section--dark-flat { background: var(--pe-surface-dark); color: var(--pe-text-inverse-muted); }
  .pe-section--panel  { background: var(--pe-surface-dark-panel); color: var(--pe-text-inverse-muted); }
  .pe-section--dark :where(h1,h2,h3,h4), .pe-section--dark-flat :where(h1,h2,h3,h4), .pe-section--panel :where(h1,h2,h3,h4) { color: var(--pe-text-inverse); }
  .pe-section--clip { overflow: hidden; }

  .pe-section__head { max-width: 46rem; margin-bottom: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-section__head { margin-bottom: var(--pe-space-8); } }
  .pe-section__head--center { margin-inline: auto; text-align: center; }
  .pe-section__head--split { max-width: none; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--pe-space-5); }
  .pe-section__head--split > :first-child { max-width: 46rem; }

  .pe-prose { max-width: var(--pe-measure); }
  .pe-prose > * + * { margin-top: 1.25em; }
  .pe-prose :where(h2) { margin-top: 2.25em; }
  .pe-prose :where(h3) { margin-top: 1.75em; }
  .pe-prose :where(ul,ol) { padding-left: 1.25em; }
  .pe-prose :where(ul) { list-style: disc; }
  .pe-prose :where(ol) { list-style: decimal; }
  .pe-prose :where(li + li) { margin-top: 0.4em; }
  .pe-prose :where(a) { color: var(--pe-link); text-decoration: underline; text-decoration-color: var(--pe-teal-300); text-underline-offset: 0.18em; }
  .pe-prose :where(a:hover) { color: var(--pe-link-hover); text-decoration-color: currentColor; }
  .pe-prose :where(blockquote) { padding-left: var(--pe-space-5); border-left: 2px solid var(--pe-teal-300); font-family: var(--pe-font-display); font-size: var(--pe-text-h4); color: var(--pe-text-heading); }
}

/* ═══════════════════════════════════════════════════════════════════════
   5. COMPONENTS
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.components {

  /* ── Eyebrow, accent, lede ─────────────────────────────────────────── */
  .pe-eyebrow { display: flex; align-items: center; gap: var(--pe-space-3); font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-eyebrow); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-eyebrow__index { font-variant-numeric: tabular-nums; white-space: nowrap; }
  .pe-eyebrow__rule { width: 40px; height: 1px; flex: none; background: var(--pe-line-dark-on-light); }
  @media (max-width: 479.98px) { .pe-eyebrow__rule { display: none; } }   /* RB-08: no orphaned rule when the label wraps */
  .pe-eyebrow--inverse, .pe-section--dark .pe-eyebrow, .pe-section--dark-flat .pe-eyebrow, .pe-section--panel .pe-eyebrow, .pe-on-dark .pe-eyebrow { color: var(--pe-teal-200); }
  .pe-eyebrow--inverse .pe-eyebrow__rule, .pe-section--dark .pe-eyebrow__rule, .pe-section--dark-flat .pe-eyebrow__rule, .pe-on-dark .pe-eyebrow__rule { background: rgba(255,255,255,0.25); }
  .pe-eyebrow__dot { position: relative; width: 8px; height: 8px; flex: none; }
  .pe-eyebrow__dot::before, .pe-eyebrow__dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--pe-teal-300); }
  .pe-eyebrow__dot::before { opacity: 0.6; }

  .pe-section__head .pe-eyebrow + :where(h1,h2,.pe-display) { margin-top: var(--pe-space-5); }

  /* Orange accent word — large text only, on white or dark surfaces only
     (2.7–2.9:1 on cloud/silver/mist, which fails even for large text). */
  .pe-accent { color: var(--pe-text-highlight); }
  .pe-section--subtle .pe-accent, .pe-section--silver .pe-accent, .pe-on-tint .pe-accent { color: var(--pe-orange-deep); }
  /* Selective 700 weight: major numbers, key emphasis, exceptional hero moments */
  .pe-u-bold { font-weight: 700; }

  .pe-lede { max-width: var(--pe-measure-lede); font-size: var(--pe-text-lead); line-height: var(--pe-leading-lede); color: var(--pe-text-body); }
  .pe-section--dark .pe-lede, .pe-section--dark-flat .pe-lede, .pe-section--panel .pe-lede, .pe-on-dark .pe-lede { color: var(--pe-text-inverse-muted); }
  .pe-section__head :where(h1,h2,.pe-display) + .pe-lede { margin-top: var(--pe-space-5); }
  .pe-section__head--center .pe-lede { margin-inline: auto; }
  .pe-section__head--center .pe-eyebrow { justify-content: center; }

  /* ── Buttons ────────────────────────────────────────────────────────── */
  .pe-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--pe-space-2);
    height: 44px; padding: 0 22px; border-radius: var(--pe-radius-md);
    font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; line-height: 1; white-space: nowrap;
    color: var(--pe-white); background: var(--pe-primary); border: 1px solid transparent;
    text-decoration: none; cursor: pointer; user-select: none;
    transition: background var(--pe-dur-fast) var(--pe-ease-out), border-color var(--pe-dur-fast) var(--pe-ease-out), color var(--pe-dur-fast) var(--pe-ease-out);
  }
  .pe-btn:hover  { background: var(--pe-primary-hover); }
  .pe-btn:active { background: var(--pe-primary-active); }
  .pe-btn--sm { height: 36px; padding: 0 16px; font-size: 14px; }
  .pe-btn--lg { height: 52px; padding: 0 28px; font-size: 16px; }
  /* Narrow screens: long labels wrap instead of overflowing the container (stress test 360/390) */
  @media (max-width: 479.98px) { .pe-btn { white-space: normal; height: auto; min-height: 44px; padding-block: 10px; line-height: 1.25; text-align: center; max-width: 100%; } .pe-btn--lg { min-height: 52px; padding: 12px 22px; } }
  .pe-btn--accent { background: var(--pe-accent); }
  .pe-btn--accent:hover  { background: var(--pe-accent-hover); }
  .pe-btn--accent:active { background: var(--pe-accent-active); }
  .pe-btn--secondary { background: transparent; color: var(--pe-primary); border-color: var(--pe-line-strong); }
  .pe-btn--secondary:hover  { background: transparent; color: var(--pe-primary-hover); border-color: var(--pe-primary); }
  .pe-btn--secondary:active { background: var(--pe-cloud); color: var(--pe-primary-hover); }
  .pe-btn--ghost { background: transparent; color: var(--pe-primary); }
  .pe-btn--ghost:hover  { background: var(--pe-cloud); color: var(--pe-primary-hover); }
  .pe-btn--ghost:active { background: var(--pe-silver); }
  .pe-btn--inverse { background: transparent; color: var(--pe-white); border-color: var(--pe-line-inverse); }
  .pe-btn--inverse:hover  { background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.4); }
  .pe-btn--inverse:active { background: rgba(255,255,255,0.14); }
  .pe-btn:disabled, .pe-btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; pointer-events: none; }
  .pe-btn__icon { width: 17px; height: 17px; flex: none; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-btn:hover .pe-btn__icon { transform: translateX(4px); }
  .pe-btn--block { width: 100%; }
  .pe-btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-4); }

  /* ── Text links ─────────────────────────────────────────────────────── */
  .pe-link { color: var(--pe-link); font-weight: 700; text-decoration: none; background-image: linear-gradient(currentColor, currentColor); background-repeat: no-repeat; background-size: 0% 1.5px; background-position: 0 100%; transition: background-size var(--pe-dur-slow) var(--pe-ease-out), color var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-link:hover { color: var(--pe-link-hover); background-size: 100% 1.5px; }
  .pe-link--arrow { display: inline-flex; align-items: center; gap: var(--pe-space-2); background: none; }
  .pe-link--arrow .pe-link__icon { width: 16px; height: 16px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-link--arrow:hover .pe-link__icon { transform: translateX(4px); }
  .pe-link--arrow.pe-link--up:hover .pe-link__icon { transform: translate(3px,-3px); }
  .pe-link--inverse { color: var(--pe-white); }
  .pe-link--inverse:hover { color: var(--pe-white); }
  .pe-link--quiet { font-weight: 400; color: var(--pe-text-body); }
  .pe-link--quiet:hover { color: var(--pe-text-heading); }
  .pe-link--inline { text-decoration: underline; text-decoration-color: var(--pe-teal-300); text-underline-offset: 0.18em; background: none; font-weight: inherit; }
  .pe-link--inline:hover { text-decoration-color: currentColor; }

  /* ── Icons ──────────────────────────────────────────────────────────── */
  .pe-icon { display: inline-block; width: 24px; height: 24px; flex: none; }
  .pe-icon--sm { width: 18px; height: 18px; }
  .pe-icon--lg { width: 32px; height: 32px; }
  .pe-icon--xl { width: 48px; height: 48px; }
  .pe-icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--pe-radius-md); background: var(--pe-surface-dark-panel); flex: none; }
  .pe-icon-tile > img, .pe-icon-tile > svg { width: 24px; height: 24px; filter: brightness(0) invert(1); }
  .pe-icon-tile--lg { width: 64px; height: 64px; border-radius: var(--pe-radius-lg); }
  .pe-icon-tile--lg > img, .pe-icon-tile--lg > svg { width: 32px; height: 32px; }
  .pe-icon-tile--light { background: var(--pe-cloud); }
  .pe-icon-tile--light > img, .pe-icon-tile--light > svg { filter: none; }
  .pe-icon-tile--inverse { background: rgba(255,255,255,0.08); border: 1px solid var(--pe-line-inverse); }

  /* ── Tags / categories / filters ───────────────────────────────────── */
  .pe-tag { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--pe-radius-sm); font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-teal-600); background: var(--pe-cloud); white-space: nowrap; }
  .pe-tag--outline { background: transparent; border: 1px solid var(--pe-line-strong); }
  .pe-tag--inverse { color: var(--pe-white); background: rgba(255,255,255,0.10); border: 1px solid var(--pe-line-inverse); }
  .pe-tag--live { color: var(--pe-white); background: var(--pe-teal-700); }
  .pe-tag--live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pe-white); }
  .pe-tag--on-demand { color: var(--pe-teal-900); background: var(--pe-mist); }
  .pe-tag--solution { color: var(--pe-text-body); background: transparent; border: 1px solid var(--pe-line); letter-spacing: 0.06em; text-transform: none; font-weight: 400; font-size: var(--pe-text-small); height: 30px; padding: 0 12px; }
  .pe-tag-list { display: flex; flex-wrap: wrap; gap: var(--pe-space-2); }

  .pe-filter { display: flex; gap: var(--pe-space-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
  .pe-filter::-webkit-scrollbar { display: none; }
  @media (min-width: 768px) { .pe-filter--chips { flex-wrap: wrap; overflow: visible; } }
  .pe-filter__chip { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: var(--pe-radius-pill); border: 1px solid var(--pe-line-strong); font-family: var(--pe-font-display); font-weight: 500; font-size: 15px; color: var(--pe-text-body); background: var(--pe-white); white-space: nowrap; text-decoration: none; transition: border-color var(--pe-dur-fast), color var(--pe-dur-fast), background var(--pe-dur-fast); }
  .pe-filter__chip:hover { border-color: var(--pe-teal-500); color: var(--pe-teal-900); }
  .pe-filter__chip[aria-current], .pe-filter__chip[aria-pressed="true"] { background: var(--pe-teal-900); border-color: var(--pe-teal-900); color: var(--pe-white); }
  .pe-filter__count { margin-left: 8px; font-size: 12px; opacity: 0.7; }
  .pe-filter--select, .pe-field.pe-filter--select { display: none; }
  .pe-filter__controls { display: flex; gap: var(--pe-space-2); align-items: center; }
  .pe-filter__controls .pe-field__control { flex: 1 1 auto; min-width: 0; }
  .pe-js .pe-filter__go { display: none; } /* JS submits on change; the button is the no-JS path */
  @media (max-width: 767px) {
    .pe-filter--chips { display: none; }
    .pe-filter--select, .pe-field.pe-filter--select { display: flex; }
  }

  /* ── Breadcrumb ─────────────────────────────────────────────────────── */
  .pe-breadcrumb { font-size: var(--pe-text-small); color: var(--pe-text-muted); }
  .pe-breadcrumb ol { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
  .pe-breadcrumb li { display: inline-flex; align-items: center; gap: 6px; }
  .pe-breadcrumb li + li::before { content: ""; width: 5px; height: 5px; border-right: 1px solid var(--pe-line-strong); border-bottom: 1px solid var(--pe-line-strong); transform: rotate(-45deg); margin-right: 2px; }
  .pe-breadcrumb a { color: var(--pe-text-body); text-decoration: none; }
  .pe-breadcrumb a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.18em; }
  .pe-breadcrumb [aria-current="page"] { color: var(--pe-text-heading); font-weight: 700; }
  .pe-breadcrumb--inverse { color: var(--pe-text-inverse-faint); }
  .pe-breadcrumb--inverse a { color: var(--pe-text-inverse-muted); }
  .pe-breadcrumb--inverse a:hover, .pe-breadcrumb--inverse [aria-current="page"] { color: var(--pe-white); }
  .pe-breadcrumb--inverse li + li::before { border-color: rgba(255,255,255,0.4); }
  /* Mobile: first › … › last two */
  @media (max-width: 767px) {
    .pe-breadcrumb li:not(:first-child):not(:nth-last-child(-n+2)) { display: none; }
    .pe-breadcrumb li:nth-last-child(2):not(:first-child):not(:nth-child(2))::before { content: "…"; width: auto; height: auto; border: 0; transform: none; }
  }

  /* ── Cards & surfaces ───────────────────────────────────────────────── */
  .pe-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: var(--pe-space-6); border-radius: var(--pe-radius-lg); background: var(--pe-surface-card); border: 1px solid var(--pe-line); overflow: hidden; }
  .pe-card--flat   { border: 0; border-radius: 0; padding: 0; background: transparent; }
  .pe-card--subtle { background: var(--pe-surface-subtle); border-color: transparent; }
  .pe-card--shadow { border-color: transparent; box-shadow: var(--pe-shadow-card); }
  .pe-card--inverse { background: var(--pe-surface-inverse-card); border-color: var(--pe-line-inverse); color: var(--pe-text-inverse-muted); }
  .pe-card--inverse :where(h2,h3,h4) { color: var(--pe-white); }
  .pe-card--panel { background: var(--pe-surface-dark-panel); border-color: transparent; color: var(--pe-text-inverse-muted); }
  .pe-card--panel :where(h2,h3,h4) { color: var(--pe-white); }
  .pe-card--interactive { transition: transform var(--pe-dur-base) var(--pe-ease-out), box-shadow var(--pe-dur-base) var(--pe-ease-out), border-color var(--pe-dur-base) var(--pe-ease-out); }
  .pe-card--interactive:hover { transform: translateY(-4px); border-color: var(--pe-teal-500); box-shadow: var(--pe-shadow-card); }
  .pe-card--inverse.pe-card--interactive:hover { border-color: rgba(255,255,255,0.35); box-shadow: none; }
  .pe-card--interactive:has(a:focus-visible) { border-color: var(--pe-focus); }
  .pe-card--lg { padding: var(--pe-space-7); }
  @media (max-width: 767px) { .pe-card, .pe-card--lg { padding: var(--pe-space-5); } }

  .pe-card__eyebrow { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-card--inverse .pe-card__eyebrow, .pe-card--panel .pe-card__eyebrow { color: var(--pe-teal-200); }
  .pe-card__title { margin-top: var(--pe-space-4); font-size: var(--pe-text-h3); line-height: 1.2; }
  .pe-card__title--sm { font-size: var(--pe-text-h4); }
  .pe-card__headline { margin-top: var(--pe-space-3); font-family: var(--pe-font-body); font-weight: 700; font-size: 1.0625rem; color: var(--pe-teal-600); }
  .pe-card__body { margin-top: var(--pe-space-3); flex: 1; font-size: 15px; line-height: 1.6; }
  .pe-card__meta { margin-top: var(--pe-space-5); font-size: var(--pe-text-caption); color: var(--pe-text-muted); display: flex; gap: var(--pe-space-3); align-items: center; }
  .pe-card--inverse .pe-card__meta { color: var(--pe-text-inverse-faint); }
  .pe-card__footer { margin-top: var(--pe-space-6); padding-top: var(--pe-space-5); border-top: 1px solid var(--pe-line); }
  .pe-card--inverse .pe-card__footer { border-color: var(--pe-line-inverse); }
  .pe-card__link { position: static; color: inherit; text-decoration: none; }
  .pe-card__link::after { content: ""; position: absolute; inset: 0; }   /* whole card clickable, one tab stop */
  .pe-card__actions { margin-top: auto; padding-top: var(--pe-space-6); display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-3); position: relative; z-index: 1; }
  .pe-card__corner { position: absolute; top: -48px; right: -48px; width: 170px; opacity: 0.5; pointer-events: none; transition: transform 2400ms var(--pe-ease-out); }
  .pe-card--interactive:hover .pe-card__corner { transform: rotate(45deg); }
  .pe-card__media { margin: calc(var(--pe-space-6) * -1) calc(var(--pe-space-6) * -1) var(--pe-space-5); aspect-ratio: 16 / 10; overflow: hidden; background: var(--pe-cloud); }
  .pe-card__media img { width: 100%; height: 100%; object-fit: cover; }
  @media (max-width: 767px) { .pe-card__media { margin: calc(var(--pe-space-5) * -1) calc(var(--pe-space-5) * -1) var(--pe-space-4); } }
  .pe-card__icon { margin-bottom: var(--pe-space-5); }
  .pe-card__arrow { color: var(--pe-line-strong); transition: transform var(--pe-dur-base) var(--pe-ease-out), color var(--pe-dur-base); }
  .pe-card--interactive:hover .pe-card__arrow { color: var(--pe-teal-500); transform: translate(3px,-3px); }

  /* Metric pair inside story cards */
  .pe-metric { display: flex; flex-direction: column; gap: 6px; }
  .pe-metric__value { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.75rem; line-height: 1; color: var(--pe-teal-600); letter-spacing: var(--pe-tracking-tight); }
  .pe-card--inverse .pe-metric__value { color: var(--pe-teal-200); }
  .pe-metric__label { font-size: var(--pe-text-caption); line-height: 1.4; color: var(--pe-text-muted); }
  .pe-card--inverse .pe-metric__label { color: var(--pe-text-inverse-faint); }
  .pe-metric-pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pe-space-4); }

  /* Check list (orange check icon is the single accent in a card) */
  .pe-check-list { display: grid; gap: var(--pe-space-3); }
  /* Icon is absolutely placed so the text keeps normal inline flow (inline code, links, strong…) */
  .pe-check-list li { position: relative; padding-left: 30px; font-size: 15px; line-height: 1.5; }
  .pe-check-list li > img:first-child, .pe-check-list li > svg:first-child { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; }

  /* Spec rows — the engineering list pattern (services, sub-services) */
  .pe-spec { border-top: 1px solid var(--pe-line); }
  .pe-spec__row { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--pe-space-3) var(--pe-space-5); align-items: center; padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); color: inherit; text-decoration: none; transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  /* Hairline-row hover (shared): only the divider lines change colour — no background fill, no shift, no title tint */
  .pe-spec__row, .pe-list__row, .pe-story-row, .pe-job { transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-spec__row:hover, .pe-list__row:hover, .pe-story-row:hover, .pe-job:hover { border-bottom-color: var(--pe-teal-500); box-shadow: 0 -1px 0 0 var(--pe-teal-500); }
  .pe-spec--inverse .pe-spec__row:hover, .pe-on-dark .pe-list__row:hover, .pe-on-dark .pe-story-row:hover { border-bottom-color: var(--pe-teal-200); box-shadow: 0 -1px 0 0 var(--pe-teal-200); }
  .pe-spec__title { font-size: var(--pe-text-h4); }
  .pe-spec__text { grid-column: 1 / -1; font-size: 15px; color: var(--pe-text-body); }
  .pe-spec__arrow { display: none; color: var(--pe-line-strong); transition: transform var(--pe-dur-base) var(--pe-ease-out), color var(--pe-dur-base); }
  @media (min-width: 768px) {
    .pe-spec__row { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 2fr) 32px; padding: var(--pe-space-6) 0; }
    .pe-spec__text { grid-column: auto; }
    .pe-spec__arrow { display: block; justify-self: end; }
  }
  .pe-spec--inverse { border-color: var(--pe-line-inverse-soft); }
  .pe-spec--inverse .pe-spec__row { border-color: var(--pe-line-inverse-soft); }
  .pe-spec--inverse .pe-spec__title { color: var(--pe-white); }
  .pe-spec--inverse .pe-spec__text { color: var(--pe-text-inverse-muted); }
  .pe-spec--inverse .pe-spec__arrow { color: rgba(255,255,255,0.4); }

  /* ── Stats ──────────────────────────────────────────────────────────── */
  .pe-stat-row { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--pe-space-6) var(--pe-space-5); }
  @media (min-width: 768px) { .pe-stat-row { grid-template-columns: repeat(var(--pe-stat-cols, 3), minmax(0,1fr)); } }
  .pe-stat { padding-left: var(--pe-space-5); border-left: 1px solid var(--pe-line); }
  .pe-stat__value { font-family: var(--pe-font-display); font-weight: 600; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; letter-spacing: var(--pe-tracking-tight); color: var(--pe-text-heading); font-variant-numeric: tabular-nums; }
  .pe-stat__label { margin-top: var(--pe-space-2); font-size: var(--pe-text-small); line-height: 1.4; color: var(--pe-text-muted); }
  .pe-stat--inverse, .pe-on-dark .pe-stat { border-color: rgba(255,255,255,0.12); }
  .pe-stat--inverse .pe-stat__value, .pe-on-dark .pe-stat__value { color: var(--pe-white); }
  .pe-stat--inverse .pe-stat__label, .pe-on-dark .pe-stat__label { color: var(--pe-text-inverse-faint); }
  .pe-stat--accent .pe-stat__value { color: var(--pe-teal-600); }

  /* ── Quote ──────────────────────────────────────────────────────────── */
  .pe-quote { position: relative; max-width: 52rem; }
  .pe-quote__text { font-family: var(--pe-font-display); font-weight: 300; font-size: clamp(1.375rem, 1.1rem + 1vw, 1.95rem); line-height: 1.4; color: var(--pe-text-heading); text-wrap: balance; }
  .pe-quote__text::before { content: "\201C"; }
  .pe-quote__text::after  { content: "\201D"; }
  .pe-quote__cite { margin-top: var(--pe-space-6); display: flex; align-items: center; gap: var(--pe-space-4); }
  .pe-quote__rule { width: 40px; height: 1px; background: var(--pe-teal-300); }
  .pe-quote__author { font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; color: var(--pe-text-heading); }
  .pe-quote__org { font-size: var(--pe-text-small); color: var(--pe-text-muted); }
  .pe-quote--inverse .pe-quote__text, .pe-quote--inverse .pe-quote__author { color: var(--pe-white); }
  .pe-quote--inverse .pe-quote__org { color: var(--pe-text-inverse-faint); }

  /* ── Logo proof strip ───────────────────────────────────────────────── */
  .pe-proof { text-align: center; }
  .pe-proof__label { font-size: var(--pe-text-caption); letter-spacing: 0.24em; text-transform: uppercase; font-weight: 700; color: var(--pe-text-muted); }
  .pe-on-dark .pe-proof__label { color: var(--pe-text-inverse-faint); }
  .pe-proof__track { position: relative; margin-top: var(--pe-space-6); overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); }
  .pe-proof__row { display: flex; width: max-content; gap: var(--pe-space-9); padding-right: var(--pe-space-9); align-items: center; }
  .pe-proof__logo { height: 28px; width: auto; opacity: 0.55; filter: grayscale(1); transition: opacity var(--pe-dur-base); }
  .pe-proof__logo:hover { opacity: 0.9; }
  .pe-proof__word { font-family: var(--pe-font-display); font-weight: 600; font-size: 22px; color: var(--pe-text-muted); white-space: nowrap; }
  .pe-on-dark .pe-proof__word { color: rgba(255,255,255,0.45); }

  /* ── CTA band & tile ────────────────────────────────────────────────── */
  .pe-cta-band { position: relative; overflow: hidden; padding-block: var(--pe-section-lg); background: var(--pe-surface-dark); background-image: var(--pe-gradient-dark); color: var(--pe-text-inverse-muted); text-align: center; }
  .pe-cta-band__inner { position: relative; z-index: 1; max-width: 46rem; margin-inline: auto; }
  .pe-cta-band__title { font-size: clamp(2.25rem, 1.6rem + 2.4vw, 3.5rem); line-height: 1.06; color: var(--pe-white); }
  .pe-cta-band__lede { margin: var(--pe-space-5) auto 0; max-width: 34rem; font-size: var(--pe-text-lead); }
  .pe-cta-band__actions { margin-top: var(--pe-space-7); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--pe-space-5); }
  .pe-cta-band__glow { position: absolute; left: 50%; top: 50%; width: 42rem; height: 42rem; transform: translate(-50%,-50%); border-radius: 50%; opacity: 0.25; background: radial-gradient(closest-side, rgba(73,165,184,0.4), transparent 70%); pointer-events: none; }
  .pe-cta-band .pe-gear { display: none; }
  @media (min-width: 768px)  { .pe-cta-band .pe-gear--left { display: block; } }
  @media (min-width: 1024px) { .pe-cta-band .pe-gear { display: block; } }

  .pe-cta-tile { display: flex; flex-direction: column; justify-content: space-between; gap: var(--pe-space-8); height: 100%; padding: var(--pe-space-6); border-radius: var(--pe-radius-lg); background: var(--pe-surface-dark-panel); color: var(--pe-white); text-decoration: none; transition: background var(--pe-dur-base), transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-cta-tile:hover { background: var(--pe-teal-900); transform: translateY(-4px); }
  .pe-cta-tile__title { color: var(--pe-white); font-size: var(--pe-text-h4); }
  .pe-cta-tile__link { display: inline-flex; align-items: center; gap: var(--pe-space-2); font-weight: 700; font-size: var(--pe-text-small); color: rgba(255,255,255,0.88); }
  .pe-cta-tile .pe-card__eyebrow, .pe-card--panel .pe-card__eyebrow { color: rgba(255,255,255,0.88); } /* teal-200 on teal-700 was 4.3:1 (A11Y-03) */

  .pe-cta-inline { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-5); padding: var(--pe-space-6); border-radius: var(--pe-radius-lg); background: var(--pe-surface-dark-panel); color: var(--pe-white); }
  .pe-cta-inline__title { color: var(--pe-white); font-size: var(--pe-text-h4); }
  .pe-cta-inline__text { margin-top: 4px; font-size: 15px; color: var(--pe-text-inverse-muted); max-width: 40rem; }

  /* ── Forms ──────────────────────────────────────────────────────────── */
  .pe-form { display: grid; gap: var(--pe-space-5); }
  .pe-form__row { display: grid; gap: var(--pe-space-5); }
  @media (min-width: 768px) { .pe-form__row { grid-template-columns: 1fr 1fr; } }
  .pe-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-4); margin-top: var(--pe-space-2); }
  .pe-form__note { font-size: var(--pe-text-caption); color: var(--pe-text-muted); }
  .pe-form__status { display: none; padding: var(--pe-space-4) var(--pe-space-5); border-radius: var(--pe-radius-md); font-size: 15px; }
  .pe-form__status.is-visible { display: block; }
  .pe-form__status--success { background: #E8F3EE; color: var(--pe-success); border: 1px solid #BFE0D0; }
  .pe-form__status--error   { background: #FBECEA; color: var(--pe-error); border: 1px solid #F1C2BD; }
  .pe-form__honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

  .pe-field { display: flex; flex-direction: column; gap: 8px; }
  .pe-field__label { font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; color: var(--pe-text-heading); }
  .pe-field__optional { font-family: var(--pe-font-body); font-weight: 400; font-size: 13px; color: var(--pe-text-muted); margin-left: 6px; }
  .pe-field__control { width: 100%; min-height: 48px; padding: 12px 14px; border-radius: var(--pe-radius-sm); border: 1px solid var(--pe-line-strong); background: var(--pe-white); color: var(--pe-text-heading); font-family: var(--pe-font-body); font-size: 16px; line-height: 1.4; transition: border-color var(--pe-dur-fast), box-shadow var(--pe-dur-fast); }
  .pe-field__control::placeholder { color: #6B7A80; }
  .pe-field__control:hover { border-color: var(--pe-teal-500); }
  .pe-field__control:focus { outline: none; border-color: var(--pe-teal-500); box-shadow: 0 0 0 3px rgba(73,165,184,0.30); }
  .pe-field__control:focus-visible { outline: none; }
  .pe-field__control:disabled { background: var(--pe-cloud); color: var(--pe-text-muted); cursor: not-allowed; border-color: var(--pe-line); }
  textarea.pe-field__control { min-height: 140px; resize: vertical; }
  .pe-field--select { position: relative; }
  .pe-field--select select.pe-field__control { appearance: none; -webkit-appearance: none; padding-right: 44px; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%233A7C8A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>"); background-repeat: no-repeat; background-position: right 14px center; }
  .pe-field__hint  { font-size: 13px; color: var(--pe-text-muted); }
  .pe-field__error { display: none; font-size: 13px; font-weight: 700; color: var(--pe-error); }
  .pe-field.is-invalid .pe-field__error { display: block; }
  .pe-field.is-invalid .pe-field__control { border-color: var(--pe-error); }
  .pe-field.is-invalid .pe-field__control:focus { box-shadow: 0 0 0 3px rgba(180,35,24,0.20); }
  .pe-field.is-valid .pe-field__control { border-color: var(--pe-success); }
  .pe-field--check { flex-direction: row; align-items: flex-start; gap: 12px; }
  .pe-field--check input { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin-top: 2px; border: 1px solid var(--pe-line-strong); border-radius: 4px; background: var(--pe-white); display: grid; place-content: center; cursor: pointer; transition: border-color var(--pe-dur-fast), background var(--pe-dur-fast); }
  .pe-field--check input[type="radio"] { border-radius: 50%; }
  .pe-field--check input::before { content: ""; width: 10px; height: 10px; transform: scale(0); transition: transform var(--pe-dur-fast) var(--pe-ease-out); background: var(--pe-white); clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); }
  .pe-field--check input[type="radio"]::before { clip-path: none; border-radius: 50%; width: 8px; height: 8px; }
  .pe-field--check input:checked { background: var(--pe-teal-600); border-color: var(--pe-teal-600); }
  .pe-field--check input:checked::before { transform: scale(1); }
  .pe-field--check input:focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 2px; }
  .pe-field--check .pe-field__label { font-family: var(--pe-font-body); font-weight: 400; font-size: 15px; color: var(--pe-text-body); }
  .pe-field--check .pe-field__label a { color: var(--pe-link); text-decoration: underline; text-underline-offset: 0.18em; }
  .pe-fieldset__legend { font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; color: var(--pe-text-heading); margin-bottom: 10px; }
  .pe-fieldset__options { display: grid; gap: 10px; }

  /* Inverse form (on dark) */
  .pe-form--inverse .pe-field__label { color: var(--pe-white); }
  .pe-form--inverse .pe-field__control { background: rgba(255,255,255,0.06); border-color: var(--pe-line-inverse); color: var(--pe-white); }
  .pe-form--inverse .pe-field__control::placeholder { color: rgba(255,255,255,0.45); }
  .pe-form--inverse .pe-field__control:focus { border-color: var(--pe-teal-200); box-shadow: 0 0 0 3px rgba(142,202,215,0.25); }
  .pe-form--inverse .pe-field__hint, .pe-form--inverse .pe-form__note { color: var(--pe-text-inverse-faint); }
  .pe-form--inverse .pe-field--check .pe-field__label { color: var(--pe-text-inverse-muted); }

  /* ── Anchor nav (sticky in-page) ────────────────────────────────────── */
  .pe-anchor-nav { position: sticky; top: 96px; }
  .pe-anchor-nav__label { font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; font-weight: 700; color: var(--pe-text-muted); margin-bottom: var(--pe-space-4); }
  .pe-anchor-nav ul { display: flex; flex-direction: column; border-left: 1px solid var(--pe-line); }
  .pe-anchor-nav a { display: block; padding: 8px 0 8px 18px; margin-left: -1px; border-left: 2px solid transparent; font-size: 15px; color: var(--pe-text-body); text-decoration: none; transition: color var(--pe-dur-fast), border-color var(--pe-dur-fast); }
  .pe-anchor-nav a:hover { color: var(--pe-text-heading); }
  .pe-anchor-nav a.is-current { color: var(--pe-teal-900); border-left-color: var(--pe-teal-500); font-weight: 700; }
  @media (max-width: 1023px) {
    .pe-anchor-nav { position: sticky; top: var(--pe-header-h); z-index: 5; background: var(--pe-white); padding: var(--pe-space-3) 0; border-bottom: 1px solid var(--pe-line); }
    .pe-anchor-nav__label { display: none; }
    .pe-anchor-nav ul { flex-direction: row; gap: var(--pe-space-2); overflow-x: auto; border-left: 0; scrollbar-width: none; }
    .pe-anchor-nav a { white-space: nowrap; padding: 8px 14px; margin: 0; border-left: 0; border-bottom: 2px solid transparent; }
    .pe-anchor-nav a.is-current { border-bottom-color: var(--pe-teal-500); }
  }

  /* ── Pagination ─────────────────────────────────────────────────────── */
  .pe-pagination ul { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .pe-pagination a, .pe-pagination span { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 12px; border-radius: var(--pe-radius-sm); font-family: var(--pe-font-display); font-weight: 500; font-size: 15px; color: var(--pe-text-body); text-decoration: none; transition: background var(--pe-dur-fast), color var(--pe-dur-fast); }
  .pe-pagination a:hover { background: var(--pe-cloud); color: var(--pe-teal-900); }
  .pe-pagination [aria-current="page"] { background: var(--pe-teal-900); color: var(--pe-white); }
  .pe-pagination .is-disabled { color: var(--pe-line-strong); pointer-events: none; }

  /* ── Empty state ────────────────────────────────────────────────────── */
  .pe-empty { padding: var(--pe-space-8) var(--pe-space-5); border: 1px dashed var(--pe-line-strong); border-radius: var(--pe-radius-lg); text-align: center; }
  .pe-empty__title { font-size: var(--pe-text-h4); }
  .pe-empty__text { margin-top: var(--pe-space-2); color: var(--pe-text-muted); }

  /* ── Table wrapper ──────────────────────────────────────────────────── */
  .pe-table-wrap:focus-visible { outline: 2px solid var(--pe-focus); outline-offset: 2px; }
  .pe-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-md); }
  .pe-table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: 15px; }
  .pe-table th, .pe-table td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--pe-line); vertical-align: top; }
  .pe-table th { font-family: var(--pe-font-display); font-weight: 600; color: var(--pe-text-heading); background: var(--pe-cloud); white-space: nowrap; }
  .pe-table tr:last-child td { border-bottom: 0; }
  .pe-table th:first-child, .pe-table td:first-child { position: sticky; left: 0; background: inherit; }
  .pe-table td:first-child { background: var(--pe-white); font-weight: 700; color: var(--pe-text-heading); }

  /* ── Accordion (disclosure) ─────────────────────────────────────────── */
  .pe-accordion { border-top: 1px solid var(--pe-line); }
  .pe-accordion__item { border-bottom: 1px solid var(--pe-line); }
  .pe-accordion__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--pe-space-4); padding: var(--pe-space-5) 0; text-align: left; font-family: var(--pe-font-display); font-weight: 600; font-size: var(--pe-text-h4); color: var(--pe-text-heading); }
  .pe-accordion__trigger:hover { color: var(--pe-teal-900); }
  .pe-accordion__index { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); margin-right: var(--pe-space-4); }
  .pe-accordion__icon { flex: none; width: 24px; height: 24px; color: var(--pe-teal-500); transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-accordion__trigger[aria-expanded="true"] .pe-accordion__icon { transform: rotate(45deg); }
  .pe-accordion__panel { padding-bottom: var(--pe-space-5); max-width: var(--pe-measure); color: var(--pe-text-body); }
  .pe-accordion__panel[hidden] { display: none; }
  [hidden] { display: none !important; }

  /* ── Gears (brand pattern in motion) ────────────────────────────────── */
  .pe-gear { position: absolute; width: var(--gear-size, 20rem); pointer-events: none; will-change: transform; user-select: none; }
  .pe-gear img { width: 100%; height: auto; }
  .pe-gear--idle img { animation: pe-idle-spin var(--pe-gear-idle) linear infinite; }
  .pe-gear--idle-reverse img { animation-direction: reverse; }
  .pe-gear--static { position: relative; }
  @keyframes pe-idle-spin { to { transform: rotate(360deg); } }
  .pe-drive-joint { position: absolute; left: 50%; top: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; pointer-events: none; }
  .pe-drive-joint__shaft { width: 1px; height: 56px; background: var(--pe-line-dark-on-light); }
  .pe-drive-joint__shaft--short { height: 24px; }
  .pe-drive-joint .pe-gear { position: relative; width: 40px; }
  .pe-on-dark .pe-drive-joint__shaft, .pe-section--dark .pe-drive-joint__shaft { background: rgba(255,255,255,0.2); }

  /* ── Hero (foundation shapes; variants finalised in Phases 5–6) ─────── */
  .pe-hero { position: relative; overflow: hidden; }
  .pe-hero--dark { background: var(--pe-surface-dark); background-image: var(--pe-gradient-dark); color: var(--pe-text-inverse-muted); }
  .pe-hero--dark :where(h1,h2) { color: var(--pe-white); }
  .pe-hero--light { background: var(--pe-surface-page); }
  .pe-hero__content { position: relative; z-index: 2; }
  .pe-hero__inner { max-width: 48rem; }
  .pe-hero__title { margin-top: var(--pe-space-5); }
  .pe-hero__lede { margin-top: var(--pe-space-5); }
  .pe-hero__actions { margin-top: var(--pe-space-7); display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-4); }
  .pe-hero__proof { margin-top: var(--pe-space-9); display: flex; flex-wrap: wrap; gap: var(--pe-space-6) var(--pe-space-6); max-width: 38rem; }
  .pe-hero__proof .pe-stat { border-left: 1px solid rgba(255,255,255,0.12); padding: 0 0 0 var(--pe-space-5); flex: 1 1 9rem; }
  .pe-hero__proof .pe-stat:first-child { border-left: 0; padding-left: 0; }
  .pe-hero__glow { position: absolute; top: 25%; right: -25%; width: 56rem; height: 56rem; border-radius: 50%; opacity: 0.3; background: radial-gradient(closest-side, rgba(73,165,184,0.35), transparent 70%); pointer-events: none; }
  .pe-hero--drivetrain { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; }
  .pe-hero--drivetrain .pe-hero__content { flex: 1; display: flex; flex-direction: column; justify-content: center; padding-top: 11rem; padding-bottom: 6rem; }
  .pe-hero--editorial .pe-hero__content { padding-top: clamp(9rem, 7rem + 5vw, 12rem); padding-bottom: var(--pe-section); }
  .pe-hero--compact .pe-hero__content { padding-top: clamp(8rem, 6rem + 4vw, 10rem); padding-bottom: var(--pe-space-8); }
  .pe-hero__cue { position: absolute; bottom: 2rem; left: 50%; transform: translateX(-50%); display: none; flex-direction: column; align-items: center; gap: 12px; }
  @media (min-width: 1024px) { .pe-hero__cue { display: flex; } }
  .pe-hero__cue-word { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; text-transform: uppercase; color: var(--pe-line-inverse-faint); }
  .pe-hero__cue-track { position: relative; width: 1px; height: 48px; background: rgba(255,255,255,0.15); overflow: hidden; }
  .pe-hero__cue-track::after { content: ""; position: absolute; top: 0; width: 1px; height: 16px; background: var(--pe-teal-300); animation: pe-cue-drop 1.6s ease-in infinite; }
  @keyframes pe-cue-drop { to { transform: translateY(48px); } }
  .pe-hero__gears { position: absolute; top: 50%; right: -12rem; width: 38rem; height: 38rem; transform: translateY(-50%); display: none; }
  @media (min-width: 1024px) { .pe-hero__gears { display: block; } }
  @media (min-width: 1440px) { .pe-hero__gears { right: -7rem; width: 42rem; height: 42rem; } }

  /* ── Logo ───────────────────────────────────────────────────────────── */
  .pe-logo { display: inline-flex; align-items: center; }
  .pe-logo img { height: 36px; width: auto; }
  @media (min-width: 768px) { .pe-logo img { height: 40px; } }
  .pe-logo--sm img { height: 28px; }

  /* ── Misc ───────────────────────────────────────────────────────────── */
  .pe-rule { border: 0; border-top: 1px solid var(--pe-line); }
  .pe-on-dark .pe-rule { border-color: var(--pe-line-inverse); }
  .pe-kicker { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-small); color: var(--pe-teal-600); }
  .pe-index { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); }
}


/* ═══════════════════════════════════════════════════════════════════════
   5b. IMAGE TREATMENTS (Phase 3 decision 6) — choose per storytelling need
   A natural  · B brand-treated · C teal duotone · D product/interface · E illustration
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.components {
  .pe-media { position: relative; overflow: hidden; border-radius: var(--pe-radius-lg); background: var(--pe-cloud); }
  .pe-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .pe-media--16x10 { aspect-ratio: 16 / 10; } .pe-media--4x3 { aspect-ratio: 4 / 3; } .pe-media--1x1 { aspect-ratio: 1; } .pe-media--21x9 { aspect-ratio: 21 / 9; }
  .pe-media--square { border-radius: 0; }
  /* A. Natural: no treatment. */
  /* B. Brand-treated: gentle teal cast, keeps skin tones. */
  .pe-media--brand::after { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(7,45,51,0.35), rgba(73,165,184,0.12)); mix-blend-mode: multiply; pointer-events: none; }
  /* C. Teal duotone: graphic, for hero/section backdrops and story headers. */
  .pe-media--duotone { background: var(--pe-teal-900); }
  .pe-media--duotone img { filter: grayscale(1) contrast(1.05); mix-blend-mode: luminosity; opacity: 0.9; }
  .pe-media--duotone::after { content: ""; position: absolute; inset: 0; background: linear-gradient(120deg, rgba(7,45,51,0.55), rgba(22,83,94,0.25)); pointer-events: none; }
  /* D. Product / interface: framed, never filtered. */
  .pe-media--product { background: var(--pe-white); border: 1px solid var(--pe-line); box-shadow: var(--pe-shadow-card); }
  .pe-media--product img { object-fit: contain; }
  .pe-media--product-dark { background: var(--pe-teal-900); border-color: var(--pe-line-inverse); }
  /* E. Technical / mechanical illustration: flat, on cloud or dark. */
  .pe-media--illustration { background: var(--pe-cloud); padding: var(--pe-space-6); }
  .pe-media--illustration img { object-fit: contain; }
  .pe-media--illustration-dark { background: var(--pe-teal-900); }
  .pe-media__caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 12px 16px; font-size: var(--pe-text-caption); color: var(--pe-white); background: linear-gradient(transparent, rgba(7,45,51,0.7)); }
}

/* ═══════════════════════════════════════════════════════════════════════
   6. TEMPLATES (populated from Phase 5 onward)
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.templates { }

/* ═══════════════════════════════════════════════════════════════════════
   7. UTILITIES
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.utilities {
  .pe-u-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
  .pe-u-center { text-align: center; }
  .pe-u-measure { max-width: var(--pe-measure); }
  .pe-u-measure-lede { max-width: var(--pe-measure-lede); }
  .pe-u-mt-2 { margin-top: var(--pe-space-2); } .pe-u-mt-3 { margin-top: var(--pe-space-3); } .pe-u-mt-4 { margin-top: var(--pe-space-4); }
  .pe-u-mt-5 { margin-top: var(--pe-space-5); } .pe-u-mt-6 { margin-top: var(--pe-space-6); } .pe-u-mt-7 { margin-top: var(--pe-space-7); }
  .pe-u-mt-8 { margin-top: var(--pe-space-8); } .pe-u-mt-9 { margin-top: var(--pe-space-9); }
  .pe-u-muted { color: var(--pe-text-muted); }
  .pe-u-small { font-size: var(--pe-text-small); }
  .pe-u-caption { font-size: var(--pe-text-caption); }
  .pe-u-tabular { font-variant-numeric: tabular-nums; }
  .pe-u-flex { display: flex; align-items: center; gap: var(--pe-space-3); flex-wrap: wrap; }
  .pe-u-between { justify-content: space-between; }
  .pe-u-relative { position: relative; }
  .pe-u-mt-0 { margin-top: 0; }
  .pe-u-text-left { text-align: left; }
  .pe-u-pt-0 { padding-top: 0; }
  .pe-u-block { display: block; }
  .pe-form__note a, .pe-field__label a, .pe-prose a, .pe-next__text a, .pe-empty__text a { text-decoration: underline; text-underline-offset: 0.18em; }
  .pe-u-clip { overflow: hidden; }
  .pe-u-hide-mobile { } .pe-u-hide-desktop { }
  @media (max-width: 767px) { .pe-u-hide-mobile { display: none !important; } }
  @media (min-width: 1024px) { .pe-u-hide-desktop { display: none !important; } }
}

/* ═══════════════════════════════════════════════════════════════════════
   8. MOTION
   Reveal states only exist when JS has initialised (html.pe-js) and the
   motion mode is not "off"; the no-JS page is fully visible.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.motion {
  .pe-js:not(.pe-motion-off) [data-pe-reveal] { opacity: 0; transform: translateY(var(--pe-reveal-y)); transition: opacity var(--pe-dur-reveal) var(--pe-ease-expo), transform var(--pe-dur-reveal) var(--pe-ease-expo); transition-delay: var(--pe-reveal-delay, 0ms); will-change: opacity, transform; }
  .pe-js:not(.pe-motion-off) [data-pe-reveal].is-revealed { opacity: 1; transform: none; will-change: auto; }
  .pe-js.pe-motion-reduced [data-pe-reveal] { transform: none; transition-duration: var(--pe-dur-slow); }
  .pe-eyebrow__dot::before { animation: pe-ping 1.6s cubic-bezier(0,0,0.2,1) infinite; }
  @keyframes pe-ping { 75%, 100% { transform: scale(2.4); opacity: 0; } }
  .pe-proof__row { animation: pe-marquee 42s linear infinite; }
  .pe-proof__track:hover .pe-proof__row { animation-play-state: paused; }
  @keyframes pe-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

  @media (prefers-reduced-motion: reduce) {
    .pe-site *, .pe-site *::before, .pe-site *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
    .pe-js [data-pe-reveal] { opacity: 1 !important; transform: none !important; }
    .pe-proof__row { animation: none; width: auto; flex-wrap: wrap; justify-content: center; }
    .pe-proof__track { mask-image: none; -webkit-mask-image: none; }
  }
  .pe-motion-off .pe-site *, .pe-motion-off .pe-site *::before, .pe-motion-off .pe-site *::after { animation: none !important; transition: none !important; }
  .pe-motion-off .pe-proof__row { width: auto; flex-wrap: wrap; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════
   9. GLOBAL SHELL (Phase 4) — header, mega menu, search shell, drawer,
   footer. All navigation renders from ONE structure (SITE_NAV): the
   desktop nav markup is canonical; pe.js derives the drawer and footer
   columns from it. APEX renders all three from the same list.
   Navigation breakpoint: the number below equals --pe-bp-nav (1200px).
   Change both together.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.components {
  :root { --pe-header-h: 64px; }
  @media (min-width: 768px) { :root { --pe-header-h: 76px; } }

  /* ── Header bar ─────────────────────────────────────────────────────── */
  .pe-header { position: fixed; inset-inline: 0; top: 0; z-index: var(--pe-z-header); color: var(--pe-white); border-bottom: 1px solid transparent; transition: background var(--pe-dur-slow) var(--pe-ease-out), border-color var(--pe-dur-slow) var(--pe-ease-out); }
  .pe-header.is-scrolled, .pe-header.is-open { background: rgba(7,45,51,0.92); border-bottom-color: rgba(255,255,255,0.10); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .pe-header--light { color: var(--pe-ink); }
  .pe-header--light.is-scrolled, .pe-header--light.is-open { background: rgba(255,255,255,0.94); border-bottom-color: var(--pe-line); }
  .pe-header__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--pe-space-4); height: var(--pe-header-h); }
  .pe-header__logo { display: inline-flex; align-items: center; flex: none; }
  .pe-header__logo img { height: 30px; width: auto; }
  @media (min-width: 768px) { .pe-header__logo img { height: 36px; } }
  .pe-header__logo--on-light { display: none; }
  .pe-header--light .pe-header__logo--on-dark { display: none; }
  .pe-header--light .pe-header__logo--on-light { display: block; }
  .pe-header__utility { display: flex; align-items: center; gap: var(--pe-space-2); flex: none; }
  .pe-header__search { display: none; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--pe-radius-md); color: inherit; opacity: 0.85; transition: opacity var(--pe-dur-fast), background var(--pe-dur-fast); }
  .pe-header__search:hover { opacity: 1; background: rgba(255,255,255,0.08); }
  .pe-header--light .pe-header__search:hover { background: var(--pe-cloud); }
  .pe-header__search[aria-expanded="true"] { opacity: 1; background: rgba(255,255,255,0.12); }
  .pe-header--light .pe-header__search[aria-expanded="true"] { background: var(--pe-cloud); }
  @media (min-width: 768px) { .pe-header__search { display: inline-flex; } }
  /* Header CTA (DR-01, approved 2026-09-13): outline while the header is transparent so the
     hero's accent button is the only orange on screen; fills with the accent once the page has
     scrolled 24px (.is-scrolled) or on pages that opt in with .pe-header--cta-filled (utility
     templates without a hero CTA). The border is always 1px, so the swap moves nothing; the
     transition is zeroed by the reduced-motion rules in section 8. Markup, classes and the
     data-pe-header-cta hook are unchanged. */
  .pe-header__cta { height: 40px; padding: 0 16px; font-size: 14px; background: transparent; border-color: rgba(255,255,255,0.45); color: var(--pe-white); transition: background var(--pe-dur-slow) var(--pe-ease-out), border-color var(--pe-dur-slow) var(--pe-ease-out), color var(--pe-dur-slow) var(--pe-ease-out); }
  @media (min-width: 768px) { .pe-header__cta { height: 44px; padding: 0 20px; font-size: 15px; } }
  /* 360-wide phones: keep logo, CTA and burger on one row */
  @media (max-width: 399.98px) { .pe-header__logo img { height: 26px; } .pe-header__cta { padding: 0 12px; font-size: 13px; height: 38px; min-height: 38px; white-space: nowrap; } .pe-header__utility { gap: 4px; } }
  .pe-header__cta:hover  { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.70); }
  .pe-header__cta:active { background: rgba(255,255,255,0.16); }
  .pe-header--light .pe-header__cta { color: var(--pe-ink); border-color: var(--pe-line-strong); }
  .pe-header--light .pe-header__cta:hover  { background: var(--pe-cloud); border-color: var(--pe-teal-600); }
  .pe-header--light .pe-header__cta:active { background: var(--pe-silver); }
  .pe-header.is-scrolled .pe-header__cta, .pe-header--cta-filled .pe-header__cta { background: var(--pe-accent); border-color: transparent; color: var(--pe-white); }
  .pe-header.is-scrolled .pe-header__cta:hover, .pe-header--cta-filled .pe-header__cta:hover { background: var(--pe-accent-hover); border-color: transparent; }
  .pe-header.is-scrolled .pe-header__cta:active, .pe-header--cta-filled .pe-header__cta:active { background: var(--pe-accent-active); }

  /* Burger */
  .pe-header__burger { position: relative; display: inline-flex; width: 44px; height: 44px; border-radius: var(--pe-radius-md); color: inherit; flex: none; }
  .pe-header__burger-icon, .pe-header__burger-icon::before, .pe-header__burger-icon::after { position: absolute; left: 11px; width: 22px; height: 2px; background: currentColor; border-radius: 2px; transition: transform var(--pe-dur-base) var(--pe-ease-out), opacity var(--pe-dur-base); }
  .pe-header__burger-icon { top: 21px; }
  .pe-header__burger-icon::before, .pe-header__burger-icon::after { content: ""; left: 0; }
  .pe-header__burger-icon::before { top: -7px; }
  .pe-header__burger-icon::after { top: 7px; }
  .pe-header__burger[aria-expanded="true"] .pe-header__burger-icon { background: transparent; }
  .pe-header__burger[aria-expanded="true"] .pe-header__burger-icon::before { transform: translateY(7px) rotate(45deg); }
  .pe-header__burger[aria-expanded="true"] .pe-header__burger-icon::after { transform: translateY(-7px) rotate(-45deg); }

  /* ── Primary nav (desktop from --pe-bp-nav) ────────────────────────── */
  .pe-nav { display: none; }
  .pe-nav__list { display: flex; align-items: center; gap: 2px; }
  .pe-nav__item { position: static; }
  .pe-nav__trigger { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 14px; border-radius: var(--pe-radius-md); font-family: var(--pe-font-display); font-weight: 500; font-size: 15px; color: inherit; opacity: 0.85; text-decoration: none; white-space: nowrap; transition: opacity var(--pe-dur-fast); }
  .pe-nav__trigger::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 6px; height: 2px; border-radius: 2px; background: var(--pe-teal-300); transform: scaleX(0); transform-origin: left; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-header--light .pe-nav__trigger::after { background: var(--pe-teal-500); }
  .pe-nav__trigger:hover, .pe-nav__trigger[aria-expanded="true"], .pe-nav__item.is-current > .pe-nav__trigger { opacity: 1; }
  .pe-nav__trigger:hover::after, .pe-nav__trigger[aria-expanded="true"]::after, .pe-nav__item.is-current > .pe-nav__trigger::after { transform: scaleX(1); }
  .pe-nav__chevron { width: 14px; height: 14px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-nav__trigger[aria-expanded="true"] .pe-nav__chevron { transform: rotate(180deg); }

  @media (min-width: 1200px) { /* = --pe-bp-nav */
    .pe-nav { display: block; }
    .pe-header__burger { display: none; }
  }
  /* No JS: pillar links stay useful; panels stay hidden; burger hidden */
  html:not(.pe-js) .pe-nav { display: block; }
  html:not(.pe-js) .pe-header__burger { display: none; }
  @media (max-width: 1199.98px) {
    /* No JS below the breakpoint: the bar wraps and the pillar links sit on a second row */
    html:not(.pe-js) .pe-header__bar { flex-wrap: wrap; height: auto; min-height: var(--pe-header-h); padding-block: 8px; }
    html:not(.pe-js) .pe-nav { order: 3; flex-basis: 100%; }
    html:not(.pe-js) .pe-nav__list { flex-wrap: wrap; gap: 0; margin-left: -8px; }
    html:not(.pe-js) .pe-nav__trigger { height: 36px; padding: 0 8px; font-size: 14px; }
    html:not(.pe-js) .pe-nav__chevron { display: none; }
  }

  /* ── Mega panel ─────────────────────────────────────────────────────── */
  /* RB-05 (visual layer only; markup, SITE_NAV mapping and keyboard model unchanged):
     every panel shares one footprint, groups are numbered like sheets in a drawing set
     via CSS counters, the intro column states the pillar once and carries a cropped
     pattern mark instead of empty space. */
  .pe-mega { position: absolute; left: 0; right: 0; top: 100%; overflow: hidden; background: var(--pe-white); color: var(--pe-text-body); border-top: 1px solid var(--pe-line); box-shadow: 0 24px 48px rgba(7,45,51,0.18); }
  .pe-mega:not([hidden]) { animation: pe-mega-in var(--pe-dur-base) var(--pe-ease-out); }
  @keyframes pe-mega-in { from { opacity: 0; transform: translateY(-6px); } }
  .pe-mega__inner { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--pe-space-8); padding-block: var(--pe-space-7); min-height: 36.25rem; }   /* = the Solutions panel's natural height at 1440, so all four panels share one footprint */
  .pe-mega__intro { position: relative; padding-right: var(--pe-space-6); border-right: 1px solid var(--pe-line); }
  /* Contextual mark: the supplied silver pattern (light-surface asset, used as shipped) cropped into the lower-left, as on the brand-in-use page */
  .pe-mega__intro::after { content: ""; position: absolute; left: -8rem; bottom: -9rem; width: 18rem; height: 18rem; background: url("../assets/brand/blue-gear.png") center / contain no-repeat; opacity: 0.9; pointer-events: none; }
  .pe-mega__title { display: block; font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); text-decoration: none; }
  .pe-mega__title:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.2em; }
  .pe-mega__desc { position: relative; margin-top: var(--pe-space-3); font-family: var(--pe-font-display); font-weight: 600; font-size: 22px; line-height: 1.25; letter-spacing: var(--pe-tracking-tight); color: var(--pe-ink); max-width: 16rem; text-wrap: balance; }
  .pe-mega__all { position: relative; margin-top: var(--pe-space-5); }
  .pe-mega__groups { display: grid; grid-template-columns: repeat(var(--mega-cols, 3), minmax(0, 1fr)); gap: var(--pe-space-7); align-content: start; counter-reset: pe-mega-group; }
  .pe-mega__group { counter-increment: pe-mega-group; padding-top: var(--pe-space-3); border-top: 1px solid var(--pe-line); }
  .pe-mega__heading { display: flex; align-items: baseline; gap: var(--pe-space-3); font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); margin-bottom: var(--pe-space-3); }
  .pe-mega__heading::before { content: counter(pe-mega-group, decimal-leading-zero); font-variant-numeric: tabular-nums; color: var(--pe-text-muted); }
  .pe-mega__heading a { color: inherit; text-decoration: none; }
  .pe-mega__heading a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.2em; }
  .pe-mega__list { display: grid; gap: 0; border-top: 1px solid var(--pe-line); }
  /* Mega panel links are hairline rows: hover recolours the two divider lines only (same rule as every hairline row) */
  .pe-mega__link { display: block; padding: 9px 0; border-bottom: 1px solid var(--pe-line); color: var(--pe-ink); text-decoration: none; transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-mega__link:hover { border-bottom-color: var(--pe-teal-500); box-shadow: 0 -1px 0 0 var(--pe-teal-500); }
  .pe-mega__name { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--pe-ink); }
  .pe-mega__meta { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--pe-text-muted); }
  .pe-mega__link--compact { padding: 7px 0; }
  .pe-mega__link--compact .pe-mega__name { font-weight: 500; font-size: 14px; }
  .pe-mega__link--featured { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; padding: 14px; margin: 8px 0; background: transparent; border: 1px solid var(--pe-line-strong); border-radius: var(--pe-radius-md); transition: border-color var(--pe-dur-fast), background var(--pe-dur-fast); }   /* RB-05: hairline frame, not a cloud slab */
  .pe-mega__link--featured:hover { background: transparent; border-color: var(--pe-teal-500); box-shadow: none; }
  .pe-mega__link--featured .pe-icon-tile { width: 40px; height: 40px; border-radius: 8px; }
  .pe-mega__link--featured .pe-icon-tile > img { width: 22px; height: 22px; }
  .pe-mega__note { margin-top: var(--pe-space-3); font-size: 13px; line-height: 1.5; color: var(--pe-text-muted); }
  /* Anchor list: deep links into one page; deliberately quieter than page links */
  .pe-mega__list--anchors { margin-top: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--pe-space-4); }
  .pe-mega__link--anchor { padding: 6px 0; }
  .pe-mega__link--anchor .pe-mega__name { font-family: var(--pe-font-body); font-weight: 400; font-size: 13px; color: var(--pe-text-body); }
  .pe-mega__link--anchor .pe-mega__name::before { content: "↳ "; color: var(--pe-teal-300); }
  .pe-mega__feature { margin-top: var(--pe-space-4); }
  .pe-mega__feature:empty, .pe-mega__feature:not(:has(*)) { display: none; }
  .pe-mega__card { display: block; padding: 16px; border-radius: var(--pe-radius-md); background: var(--pe-teal-900); color: var(--pe-white); text-decoration: none; transition: background var(--pe-dur-fast); }
  .pe-mega__card:hover { background: var(--pe-teal-700); }
  .pe-mega__card .pe-mega__name { color: var(--pe-white); }
  .pe-mega__card .pe-mega__meta { color: var(--pe-text-inverse-muted); }
  .pe-mega__card-eyebrow { display: block; font-size: 11px; letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; font-weight: 700; color: var(--pe-teal-200); margin-bottom: 8px; }
  .pe-mega__contact { font-size: 14px; line-height: 1.6; color: var(--pe-text-body); }
  .pe-mega__contact a { color: var(--pe-link); font-weight: 700; text-decoration: none; }
  .pe-mega__contact a:hover { color: var(--pe-link-hover); }
  @media (max-width: 1199.98px) { .pe-mega { display: none !important; } }

  /* ── Search shell ───────────────────────────────────────────────────── */
  .pe-search { position: absolute; left: 0; right: 0; top: 100%; background: var(--pe-white); color: var(--pe-ink); border-top: 1px solid var(--pe-line); box-shadow: 0 24px 48px rgba(7,45,51,0.18); }
  .pe-search:not([hidden]) { animation: pe-mega-in var(--pe-dur-base) var(--pe-ease-out); }
  .pe-search__form { display: flex; gap: var(--pe-space-3); align-items: center; padding: var(--pe-space-5) 0; }
  .pe-search__form .pe-field { flex: 1; }
  .pe-search__hint { font-size: 13px; color: var(--pe-text-muted); padding-bottom: var(--pe-space-5); }
  /* RB-07: static "Popular" links so the shell is useful before typing; APEX may replace the row with a region */
  .pe-search__popular { display: flex; flex-wrap: wrap; align-items: center; gap: var(--pe-space-2) var(--pe-space-3); padding-bottom: var(--pe-space-5); }
  .pe-search__popular-label { margin-right: var(--pe-space-2); font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; font-weight: 700; color: var(--pe-text-muted); }

  /* ── Drawer (below --pe-bp-nav) ─────────────────────────────────────── */
  /* Anchored to the header (which is the containing block anyway because of its backdrop-filter) */
  .pe-drawer { position: absolute; left: 0; right: 0; top: 100%; height: calc(100vh - var(--pe-header-h)); height: calc(100dvh - var(--pe-header-h)); z-index: var(--pe-z-drawer); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; background: var(--pe-white); color: var(--pe-ink); border-top: 1px solid var(--pe-line); }
  .pe-drawer:not([hidden]) { animation: pe-drawer-in var(--pe-dur-base) var(--pe-ease-out); }
  @keyframes pe-drawer-in { from { opacity: 0; transform: translateY(-8px); } }
  .pe-drawer__inner { padding-block: var(--pe-space-3) var(--pe-space-8); }
  .pe-drawer__list { border-bottom: 1px solid var(--pe-line); }
  .pe-drawer__item { border-top: 1px solid var(--pe-line); }
  .pe-drawer__trigger { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--pe-space-3); min-height: 56px; padding: 12px 0; font-family: var(--pe-font-display); font-weight: 600; font-size: 18px; color: var(--pe-ink); text-align: left; }
  .pe-drawer__trigger .pe-nav__chevron { width: 18px; height: 18px; color: var(--pe-teal-500); }
  .pe-drawer__trigger[aria-expanded="true"] .pe-nav__chevron { transform: rotate(180deg); }
  .pe-drawer__panel { padding: 0 0 var(--pe-space-5); }
  .pe-drawer__panel[hidden] { display: none; }
  .pe-drawer__all { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-weight: 700; color: var(--pe-link); text-decoration: none; }
  .pe-drawer__all:hover { color: var(--pe-link-hover); }
  .pe-drawer__heading { margin: var(--pe-space-4) 0 4px; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; font-weight: 700; color: var(--pe-text-accent); }
  .pe-drawer__heading a { color: inherit; text-decoration: none; }
  .pe-drawer__link { display: flex; align-items: center; min-height: 44px; padding: 8px 0; font-size: 16px; color: var(--pe-ink); text-decoration: none; }
  .pe-drawer__link:hover { color: var(--pe-teal-900); }
  .pe-drawer__extras { display: grid; gap: var(--pe-space-5); padding-top: var(--pe-space-6); }
  .pe-drawer__contact { font-size: 14px; color: var(--pe-text-body); line-height: 1.6; }
  .pe-drawer__contact a { color: var(--pe-link); font-weight: 700; text-decoration: none; }
  @media (min-width: 1200px) { /* = --pe-bp-nav */ .pe-drawer { display: none !important; } }
  .pe-scroll-lock { overflow: hidden; position: fixed; width: 100%; }   /* RB-09: top is set inline from scrollY by pe.js */

  /* ── Footer ─────────────────────────────────────────────────────────── */
  .pe-footer { position: relative; overflow: hidden; background: var(--pe-surface-dark); color: var(--pe-text-inverse-muted); }
  .pe-footer__top { display: grid; gap: var(--pe-space-8); padding: var(--pe-space-9) 0 var(--pe-space-8); border-bottom: 1px solid var(--pe-line-inverse-soft); }
  @media (min-width: 1024px) { .pe-footer__top { grid-template-columns: minmax(0, 1.3fr) minmax(0, 2.4fr); gap: var(--pe-space-9); } }
  .pe-footer__tagline { margin-top: var(--pe-space-5); max-width: 22rem; font-size: 15px; line-height: 1.6; }
  .pe-footer__contact { margin-top: var(--pe-space-6); display: grid; gap: 8px; font-size: 14px; }
  .pe-footer__contact a { color: var(--pe-text-inverse-muted); text-decoration: none; }
  .pe-footer__contact a:hover { color: var(--pe-white); }
  .pe-footer__partner { margin-top: var(--pe-space-7); height: 44px; width: auto; opacity: 0.9; }
  .pe-footer__nav { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pe-space-7) var(--pe-space-6); }
  @media (min-width: 768px) { .pe-footer__nav { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .pe-footer__heading { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-teal-200); }
  .pe-footer__heading a { color: inherit; text-decoration: none; }
  .pe-footer__heading a:hover { color: var(--pe-white); }
  .pe-footer__links { margin-top: var(--pe-space-4); display: grid; gap: 10px; }
  .pe-footer__links a { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; color: var(--pe-text-inverse-muted); text-decoration: none; transition: color var(--pe-dur-fast); }
  .pe-footer__links a:hover { color: var(--pe-white); }
  .pe-footer__bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--pe-space-4); padding: var(--pe-space-6) 0; font-size: 13px; color: var(--pe-text-inverse-faint); }
  .pe-footer__legal { display: flex; flex-wrap: wrap; gap: var(--pe-space-5); }
  .pe-footer__legal a { color: inherit; text-decoration: none; }
  .pe-footer__legal a:hover { color: var(--pe-white); }
  .pe-footer .pe-gear { display: none; }
  @media (min-width: 1024px) { .pe-footer .pe-gear { display: block; } }

  /* ── Page shell ─────────────────────────────────────────────────────── */
  .pe-main { position: relative; }
  /* Pages with a light hero start below the fixed header instead of behind it */
  .pe-main--offset { padding-top: var(--pe-header-h); }
  .pe-site--reduced .pe-nav, .pe-site--reduced .pe-header__search, .pe-site--reduced .pe-header__burger { display: none !important; }
  .pe-site--reduced .pe-footer__top { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   10. COMPOSITIONS introduced on Home (Phase 5) and reused by inner templates:
   flagship + family, typographic index, services lanes, why layout, story, resources.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.templates {
  /* ── Hero: the drivetrain moment ────────────────────────────────────── */
  .pe-home-hero { min-height: 100vh; min-height: 100svh; }
  .pe-home-hero .pe-hero__content { padding-top: calc(var(--pe-header-h) + 4rem); padding-bottom: 7rem; }
  .pe-home-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; }
  @media (min-width: 1024px) { .pe-home-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); } }
  .pe-home-hero__title { font-size: clamp(2.75rem, 1.7rem + 3.6vw, 4.75rem); line-height: 1.04; letter-spacing: -0.015em; color: var(--pe-white); text-wrap: balance; }
  .pe-home-hero__title .pe-accent { color: var(--pe-orange); }
  .pe-home-hero .pe-hero__lede { max-width: 34rem; }
  /* H-08: between 1024 and 1279 the 7/5 grid leaves the pinion a few pixels from the lede; shorten the measure and slide the cluster right (it already bleeds off-canvas) */
  @media (min-width: 1024px) and (max-width: 1279.98px) { .pe-home-hero .pe-hero__lede { max-width: 30rem; } .pe-drivetrain { transform: translateX(2.5rem); } }
  .pe-home-hero .pe-hero__proof { margin-top: var(--pe-space-8); }
  @media (min-width: 1280px) { .pe-home-hero .pe-hero__proof { margin-top: var(--pe-space-9); } }
  .pe-home-hero .pe-hero__proof .pe-stat__value { font-size: 1.9rem; }
  .pe-home-hero .pe-hero__proof .pe-stat__label { max-width: 11rem; }
  /* Drivetrain cluster: wheel + pinion + idler, joined by hairline shafts */
  /* Drivetrain geometry: gear sizes and positions are custom properties; shafts and nodes are computed from the gear centres */
  .pe-drivetrain { position: relative; display: none; height: 34rem; --wheel-w: 34rem; --wheel-r: -15rem; --pin-w: 11rem; --pin-r: 16rem; --pin-top: 7%; --idl-w: 6.5rem; --idl-r: 19rem; --idl-bottom: 4%; }
  @media (min-width: 1024px) { .pe-drivetrain { display: block; } }
  @media (min-width: 1280px) { .pe-drivetrain { height: 38rem; } }
  @media (min-width: 1440px) { .pe-drivetrain { --wheel-w: 37rem; --wheel-r: -14rem; --pin-w: 12rem; --pin-r: 20rem; --idl-w: 7rem; --idl-r: 24rem; } }
  .pe-drivetrain__wheel { position: absolute; top: 50%; right: var(--wheel-r); width: var(--wheel-w); margin-top: calc(var(--wheel-w) / -2); opacity: 0.9; }
  .pe-drivetrain__pinion { position: absolute; top: var(--pin-top); right: var(--pin-r); width: var(--pin-w); }
  .pe-drivetrain__idler { position: absolute; bottom: var(--idl-bottom); right: var(--idl-r); width: var(--idl-w); opacity: 0.85; }
  /* Idle spin meshed to the wheel: angular speed inverse to size, opposite direction (wheel 37rem : pinion 12rem : idler 7rem) */
  .pe-drivetrain__pinion img { animation-duration: calc(var(--pe-gear-idle) * 0.32); }
  .pe-drivetrain__idler img { animation-duration: calc(var(--pe-gear-idle) * 0.19); }
  .pe-drivetrain__shaft { position: absolute; width: 1px; background: rgba(255,255,255,0.14); }
  .pe-drivetrain__shaft--a { top: calc(var(--pin-top) + var(--pin-w) / 2); right: calc(var(--pin-r) + var(--pin-w) / 2); height: 22%; }
  .pe-drivetrain__shaft--b { bottom: calc(var(--idl-bottom) + var(--idl-w) / 2); right: calc(var(--idl-r) + var(--idl-w) / 2); height: 30%; }
  .pe-drivetrain__node { position: absolute; width: 7px; height: 7px; border-radius: 50%; background: var(--pe-teal-300); transform: translate(50%, -50%); }
  .pe-drivetrain__node--a { top: calc(var(--pin-top) + var(--pin-w) / 2); right: calc(var(--pin-r) + var(--pin-w) / 2); }
  .pe-drivetrain__node--b { bottom: calc(var(--idl-bottom) + var(--idl-w) / 2); right: calc(var(--idl-r) + var(--idl-w) / 2); transform: translate(50%, 50%); }
  /* Corner gear only where the cluster is hidden, so it never sits behind the logo on desktop */
  .pe-home-hero__corner { top: -10rem; right: -9rem; left: auto; opacity: 0.3; }
  @media (min-width: 1024px) { .pe-home-hero__corner { display: none; } }
  /* Shaft from the hero into the proof strip */
  .pe-home-hero .pe-hero__cue { bottom: 1.75rem; }

  /* ── Proof strip ────────────────────────────────────────────────────── */
  .pe-proof-strip { background: var(--pe-surface-dark); color: var(--pe-text-inverse-muted); border-top: 1px solid var(--pe-line-inverse-soft); }
  .pe-proof-strip__row { display: grid; gap: var(--pe-space-5); padding: var(--pe-space-6) 0; }
  @media (min-width: 768px) { .pe-proof-strip__row { grid-template-columns: auto 1fr; align-items: center; gap: var(--pe-space-8); } }
  @media (min-width: 1024px) { .pe-proof-strip__row { grid-template-columns: auto 1fr auto; } }
  .pe-proof-strip__partner img { height: 40px; width: auto; opacity: 0.95; }
  .pe-proof-strip__statement { font-size: 15px; line-height: 1.5; max-width: 34rem; }
  .pe-proof-strip__names { display: flex; flex-wrap: wrap; gap: var(--pe-space-3) var(--pe-space-6); margin-top: 10px; }
  .pe-proof-strip__name { font-family: var(--pe-font-display); font-weight: 600; font-size: 18px; letter-spacing: 0.01em; color: var(--pe-white); opacity: 0.9; }
  .pe-proof-strip__facts { display: flex; gap: var(--pe-space-6); }
  .pe-proof-strip__fact { padding-left: var(--pe-space-5); border-left: 1px solid var(--pe-line-inverse); font-size: 13px; line-height: 1.4; color: var(--pe-text-inverse-faint); }
  .pe-proof-strip__fact b { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 20px; color: var(--pe-white); }

  /* ── Solutions: flagship + family ───────────────────────────────────── */
  .pe-flagship { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-flagship { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); align-items: start; } }
  .pe-flagship__main { position: relative; overflow: hidden; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-xl); background: var(--pe-white); padding: var(--pe-space-7); }
  @media (max-width: 767px) { .pe-flagship__main { padding: var(--pe-space-5); border-radius: var(--pe-radius-lg); } }
  .pe-flagship__main .pe-card__corner { width: 220px; top: -70px; right: -70px; opacity: 0.45; }
  /* H-02: the flagship has two destinations, so the block itself is not interactive; the corner gear answers the primary action only */
  /* Flagship card hover: the card is not a single link (two CTAs), so it takes the interactive-card outline and shadow without the lift (the reveal owns its transform) */
  .pe-flagship__main { transition: border-color var(--pe-dur-base) var(--pe-ease-out), box-shadow var(--pe-dur-base) var(--pe-ease-out); }
  .pe-flagship__main:hover, .pe-flagship__main:has(a:focus-visible) { border-color: var(--pe-teal-500); box-shadow: var(--pe-shadow-card); }
  .pe-flagship__main:hover .pe-card__corner, .pe-flagship__main:has(.pe-btn:focus-visible) .pe-card__corner { transform: rotate(45deg); }
  .pe-flagship__name { margin-top: var(--pe-space-4); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.4rem); }
  .pe-flagship__headline { margin-top: var(--pe-space-3); font-family: var(--pe-font-body); font-weight: 700; font-size: 1.125rem; color: var(--pe-teal-600); }
  .pe-flagship__body { margin-top: var(--pe-space-3); max-width: 34rem; font-size: 15px; line-height: 1.6; }
  .pe-flagship__areas { margin-top: var(--pe-space-5); }
  .pe-flagship__media { margin-top: var(--pe-space-6); }
  .pe-flagship__media.pe-media--16x10 { aspect-ratio: 21 / 10; }
  .pe-flagship__aside { margin-top: var(--pe-space-6); }
  .pe-flagship__actions { margin-top: var(--pe-space-6); display: flex; flex-wrap: wrap; gap: var(--pe-space-4); align-items: center; }
  .pe-flagship__family-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pe-space-4); margin-bottom: var(--pe-space-4); }
  .pe-flagship__family-head h3 { font-size: var(--pe-text-h4); }
  .pe-family .pe-spec__row { grid-template-columns: 40px 1fr 24px; padding: var(--pe-space-5) 0; }
  .pe-family .pe-spec__text { grid-column: 2; }
  .pe-family .pe-spec__arrow { display: block; grid-column: 3; grid-row: 1; }
  .pe-family .pe-spec__index { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); grid-row: 1 / span 2; align-self: start; padding-top: 6px; }
  .pe-family .pe-spec__title { font-size: 1.2rem; }
  .pe-family .pe-spec__text { font-size: 14px; }
  @media (min-width: 768px) and (max-width: 1023.98px) { .pe-family { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--pe-space-7); border-top: 0; } .pe-family .pe-spec__row:nth-child(-n+2) { border-top: 1px solid var(--pe-line); } }

  /* ── Functions and industries: typographic index ────────────────────── */
  /* Typographic index composition (Home, landings). Renamed from .pe-index (RB-40): .pe-index is the small index label. */
  .pe-tindex { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 768px) { .pe-tindex { grid-template-columns: 1fr 1fr; gap: var(--pe-space-8); } }
  .pe-tindex__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pe-space-4); padding-bottom: var(--pe-space-4); border-bottom: 2px solid var(--pe-teal-900); }
  .pe-tindex__head h3 { font-size: var(--pe-text-h4); }
  .pe-tindex__head h3 a { color: inherit; text-decoration: none; }
  .pe-tindex__head h3 a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.2em; }
  .pe-tindex__list { counter-reset: pe-index; }
  .pe-tindex__list li { border-bottom: 0; }
  .pe-tindex__link { display: grid; grid-template-columns: 40px 1fr 24px; align-items: center; gap: var(--pe-space-3); padding: 18px 0; border-bottom: 1px solid var(--pe-line); color: var(--pe-text-heading); text-decoration: none; font-family: var(--pe-font-display); font-weight: 600; font-size: 1.15rem; transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-tindex__link::before { counter-increment: pe-index; content: "0" counter(pe-index); font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); }
  .pe-tindex__link:hover { border-bottom-color: var(--pe-teal-500); box-shadow: 0 -1px 0 0 var(--pe-teal-500); }
  .pe-tindex__link .pe-card__arrow { justify-self: end; }

  /* ── Services ───────────────────────────────────────────────────────── */
  .pe-services { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-services { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); align-items: start; } }
  .pe-services__lane-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--pe-space-4); margin-bottom: var(--pe-space-3); }
  .pe-services__lane-head h3 { font-size: var(--pe-text-h4); color: var(--pe-white); }
  .pe-managed { padding: var(--pe-space-7); }
  @media (max-width: 767px) { .pe-managed { padding: var(--pe-space-5); } }
  .pe-managed__title { font-size: var(--pe-text-h3); }
  .pe-caps { margin-top: var(--pe-space-6); display: grid; gap: 12px 24px; }
  @media (min-width: 480px) { .pe-caps { grid-template-columns: 1fr 1fr; } }
  .pe-caps li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; line-height: 1.45; color: var(--pe-white); }
  .pe-caps li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pe-teal-200); }

  /* ── Why ────────────────────────────────────────────────────────────── */
  .pe-why { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-why { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pe-space-9); } .pe-why__narrative { position: sticky; top: calc(var(--pe-header-h) + 2rem); } }
  .pe-gear-pair { position: relative; display: none; height: 15rem; margin-top: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-gear-pair { display: block; } }
  .pe-gear-pair__rod { position: absolute; top: 7.3rem; left: 12rem; width: 6rem; height: 1px; background: var(--pe-line-dark-on-light); transform: rotate(28deg); transform-origin: left center; }
  .pe-pillars { display: grid; gap: var(--pe-space-7) var(--pe-space-6); }
  @media (min-width: 640px) { .pe-pillars { grid-template-columns: 1fr 1fr; } }
  .pe-pillars--stacked { grid-template-columns: 1fr; }
  .pe-pillar { padding-top: var(--pe-space-5); border-top: 2px solid var(--pe-line-dark-on-light); transition: border-color var(--pe-dur-slow); }
  .pe-pillar:hover { border-top-color: var(--pe-teal-300); }
  .pe-pillar h3 { margin-top: var(--pe-space-3); font-size: 1.35rem; line-height: 1.25; }
  .pe-pillar p { margin-top: var(--pe-space-3); font-size: 15px; line-height: 1.6; }

  /* ── Customer story ─────────────────────────────────────────────────── */
  .pe-story { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-story { grid-template-columns: minmax(0, 6fr) minmax(0, 6fr); gap: var(--pe-space-9); align-items: center; } .pe-story__media { order: 2; } }
  @media (max-width: 1023.98px) { .pe-story__media { order: -1; } }
  .pe-story__headline { margin-top: var(--pe-space-5); font-family: var(--pe-font-display); font-weight: 300; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.5rem); line-height: 1.25; color: var(--pe-white); text-wrap: balance; }
  .pe-story__headline strong { font-weight: 600; }
  .pe-story__text { margin-top: var(--pe-space-5); max-width: 34rem; color: var(--pe-text-inverse-muted); }
  .pe-story__stats { margin-top: var(--pe-space-7); }
  .pe-story__media .pe-media { border-radius: var(--pe-radius-xl); }
  .pe-placeholder-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: var(--pe-radius-sm); border: 1px dashed rgba(255,255,255,0.35); font-size: var(--pe-text-caption); letter-spacing: 0.08em; text-transform: uppercase; font-weight: 700; color: var(--pe-teal-200); }
  .pe-placeholder-tag--quiet { color: var(--pe-teal-600); border-color: var(--pe-line-strong); }

  /* ── Resources ──────────────────────────────────────────────────────── */
  .pe-resources { display: grid; gap: var(--pe-space-5); }
  @media (min-width: 1024px) { .pe-resources { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
  .pe-resources__insights { display: grid; gap: var(--pe-space-5); }
  @media (min-width: 640px) { .pe-resources__insights { grid-template-columns: 1fr 1fr; } }
  .pe-resources__side { display: grid; gap: var(--pe-space-5); }
  @media (min-width: 640px) and (max-width: 1023.98px) { .pe-resources__side { grid-template-columns: 1fr 1fr; } }
  .pe-event { display: flex; flex-direction: column; }
  .pe-event__date { margin-top: var(--pe-space-4); font-family: var(--pe-font-display); font-weight: 600; font-size: 1.5rem; color: var(--pe-text-heading); line-height: 1; }
  .pe-event__date small { display: block; margin-top: 4px; font-family: var(--pe-font-body); font-weight: 400; font-size: 13px; color: var(--pe-text-muted); }
  .pe-resources__lanes { margin-top: var(--pe-space-7); display: flex; flex-wrap: wrap; gap: var(--pe-space-4) var(--pe-space-7); padding-top: var(--pe-space-5); border-top: 1px solid var(--pe-line); }

  /* Section index numbers get the drivetrain connectors */
  .pe-home .pe-section--joint { padding-top: calc(var(--pe-section-lg) + 2rem); }
}

/* ═══════════════════════════════════════════════════════════════════════
   11. INNER TEMPLATES — Batch A (Solutions): product hero, rail layout,
   anchored blocks, solution areas, feature grid, process steps, category
   nodes (function / industry). Tier 2 motion only.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.templates {
  /* ── Hero: product (dark) and editorial with breadcrumb ────────────── */
  .pe-hero .pe-breadcrumb { margin-bottom: var(--pe-space-7); }
  .pe-hero--product .pe-hero__content { padding-top: calc(var(--pe-header-h) + 2.5rem); padding-bottom: var(--pe-section); }
  .pe-hero__grid { display: grid; gap: var(--pe-space-7); align-items: center; }
  @media (min-width: 1024px) { .pe-hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); } }
  .pe-hero__tagline { margin-top: var(--pe-space-4); font-family: var(--pe-font-body); font-weight: 700; font-size: 1.125rem; line-height: 1.4; color: var(--pe-teal-200); }
  .pe-hero__visual .pe-media { box-shadow: 0 24px 64px rgba(0,0,0,0.35); }
  .pe-hero__tags { margin-top: var(--pe-space-6); }
  .pe-hero__corner { top: -9rem; right: -9rem; opacity: 0.3; }
  .pe-hero--editorial.pe-hero--light .pe-hero__content { padding-top: calc(var(--pe-header-h) + 2.5rem); }
  /* Inside an offset main the header height is already paid (RB-43) */
  .pe-main--offset .pe-hero--light .pe-hero__content { padding-top: clamp(2.5rem, 2rem + 1.5vw, 3.5rem); }
  .pe-hero__corner--light { top: -7rem; right: -8rem; opacity: 1; }
  .pe-hero__inner--narrow { max-width: 52rem; }
  .pe-anchor-nav .pe-index { margin-right: 8px; }
  .pe-spec__tagline { display: block; color: var(--pe-text-heading); margin-bottom: 4px; }
  .pe-spec__title--sm { font-size: 1.1rem; }
  .pe-section--tight-top { padding-top: var(--pe-space-6); }
  .pe-gear--band { --gear-size: 26rem; top: -10rem; right: -11rem; opacity: 0.4; }
  .pe-gear--footer { --gear-size: 36rem; right: -13rem; bottom: -18rem; opacity: 0.3; }
  .pe-gear--cta-left { --gear-size: 30rem; top: -14rem; left: -12rem; opacity: 0.9; }
  .pe-gear--cta-right { --gear-size: 34rem; top: 50%; right: -15rem; margin-top: -17rem; opacity: 0.6; }
  .pe-hero__index { margin-top: var(--pe-space-6); display: flex; flex-wrap: wrap; gap: var(--pe-space-2) var(--pe-space-5); }
  .pe-hero__index a { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; color: var(--pe-teal-600); text-decoration: none; }
  .pe-hero__index a:hover { color: var(--pe-teal-900); }
  .pe-hero__index .pe-index { color: var(--pe-text-muted); }

  /* ── Rail layout: sticky anchor nav + long-form content ────────────── */
  .pe-layout-rail { display: grid; gap: var(--pe-space-6); }
  /* Grid items default to min-width:auto; a wide table inside would force the page wider than the viewport */
  .pe-layout-rail > *, .pe-block__narrative > *, .pe-node__grid > *, .pe-hero__grid > * { min-width: 0; }
  @media (min-width: 1024px) {
    .pe-layout-rail { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: var(--pe-space-8); align-items: start; }
    .pe-layout-rail__rail { position: sticky; top: calc(var(--pe-header-h) + 2rem); }
    .pe-layout-rail__rail .pe-anchor-nav { position: static; }
  }
  @media (max-width: 1023.98px) { .pe-layout-rail__rail { margin-inline: calc(var(--pe-gutter) * -1); padding-inline: var(--pe-gutter); } }

  /* ── Anchored block ─────────────────────────────────────────────────── */
  .pe-block { padding-block: var(--pe-space-8); border-top: 1px solid var(--pe-line); scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); }
  .pe-block:first-child { border-top: 0; padding-top: var(--pe-space-2); }
  .pe-block__head { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--pe-space-4); align-items: baseline; margin-bottom: var(--pe-space-6); }
  .pe-block__index { font-family: var(--pe-font-display); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--pe-teal-500); /* was teal-300 (2.85:1); teal-500 is 4.7:1 (A11Y-02) */ font-variant-numeric: tabular-nums; }
  .pe-block__head h2 { font-size: var(--pe-text-h3); }
  .pe-block__lede { margin-top: var(--pe-space-2); max-width: var(--pe-measure-lede); color: var(--pe-text-body); }
  .pe-block__narrative { display: grid; gap: var(--pe-space-6); }
  @media (min-width: 1024px) { .pe-block__narrative { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); align-items: start; } }
  .pe-block__aside h3 { font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; font-family: var(--pe-font-body); font-weight: 700; color: var(--pe-text-accent); }
  .pe-block__aside ul { margin-top: var(--pe-space-3); }
  .pe-block__aside li { padding: 10px 0; border-bottom: 1px solid var(--pe-line); font-size: 15px; }
  .pe-block__aside .pe-check-list li { padding-left: 30px; }

  /* ── Solution areas ─────────────────────────────────────────────────── */
  .pe-areas { display: grid; gap: var(--pe-space-6) var(--pe-space-7); }
  @media (min-width: 768px) { .pe-areas { grid-template-columns: 1fr 1fr; } }
  .pe-area { padding-top: var(--pe-space-5); border-top: 2px solid var(--pe-line-dark-on-light); scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); transition: border-color var(--pe-dur-slow); }
  .pe-area:hover { border-top-color: var(--pe-teal-300); }
  .pe-area h3 { margin-top: var(--pe-space-2); font-size: 1.25rem; }
  .pe-area p { margin-top: var(--pe-space-2); font-size: 15px; line-height: 1.6; }
  .pe-area .pe-tag-list { margin-top: var(--pe-space-4); }

  /* ── Feature / capability grid ──────────────────────────────────────── */
  .pe-features { display: grid; gap: var(--pe-space-6) var(--pe-space-6); }
  @media (min-width: 640px) { .pe-features { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1024px) { .pe-features { grid-template-columns: repeat(var(--pe-feature-cols, 2), minmax(0,1fr)); } }
  .pe-feature { padding-top: var(--pe-space-5); border-top: 1px solid var(--pe-line); }
  .pe-feature h3 { margin-top: var(--pe-space-4); font-size: 1.2rem; }
  .pe-feature p { margin-top: var(--pe-space-2); font-size: 15px; line-height: 1.6; }

  /* ── Process steps ──────────────────────────────────────────────────── */
  .pe-steps { display: grid; gap: var(--pe-space-6); }
  @media (min-width: 768px) { .pe-steps { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (min-width: 1024px) { .pe-steps { grid-template-columns: repeat(var(--pe-steps-cols, 4), minmax(0,1fr)); gap: var(--pe-space-6); } }
  /* Five-step processes: three across at 1024–1279, five from 1280 */
  .pe-steps--5 { --pe-steps-cols: 5; }
  @media (min-width: 1024px) and (max-width: 1279.98px) { .pe-steps--5 { --pe-steps-cols: 3; } }
  .pe-step { position: relative; padding-top: var(--pe-space-5); border-top: 1px solid var(--pe-line); }
  .pe-step::before { content: ""; position: absolute; top: -4px; left: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pe-teal-500); }
  .pe-step__num { font-family: var(--pe-font-display); font-weight: 300; font-size: 2.5rem; line-height: 1; color: var(--pe-teal-500); font-variant-numeric: tabular-nums; }
  .pe-step h3 { margin-top: var(--pe-space-3); font-size: 1.15rem; }
  .pe-step p { margin-top: var(--pe-space-2); font-size: 15px; line-height: 1.6; }
  .pe-on-dark .pe-step { border-color: var(--pe-line-inverse-soft); }
  .pe-on-dark .pe-step::before { background: var(--pe-teal-200); }
  .pe-on-dark .pe-step__num { color: var(--pe-teal-200); }

  /* ── Category node (function / industry) ───────────────────────────── */
  .pe-node { padding-block: var(--pe-space-8); border-top: 1px solid var(--pe-line); scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); }
  .pe-node:first-of-type { border-top: 0; padding-top: var(--pe-space-2); }
  .pe-node__grid { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-node__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--pe-space-9); align-items: start; } }
  .pe-node h2 { margin-top: var(--pe-space-3); font-size: var(--pe-text-h2); }
  .pe-node__lede { margin-top: var(--pe-space-4); max-width: 30rem; }
  .pe-node__media { margin-top: var(--pe-space-6); }
  .pe-node__actions { margin-top: var(--pe-space-6); display: flex; flex-wrap: wrap; gap: var(--pe-space-4); align-items: center; }
  .pe-node__fits-title { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-node__fits-title + * { margin-top: var(--pe-space-3); }
  .pe-node__fits + .pe-node__fits { margin-top: var(--pe-space-7); }
  .pe-node__list li { padding: 12px 0; border-bottom: 1px solid var(--pe-line); font-size: 15px; display: flex; gap: 12px; align-items: flex-start; }
  .pe-node__list li::before { content: ""; flex: none; width: 6px; height: 6px; margin-top: 8px; border-radius: 50%; background: var(--pe-teal-300); }
  .pe-node__links { display: flex; flex-wrap: wrap; gap: var(--pe-space-2) var(--pe-space-5); }
  .pe-node .pe-family .pe-spec__row { padding: var(--pe-space-4) 0; }

  /* ── Comparison table on product pages ─────────────────────────────── */
  .pe-table--compare td:nth-child(2) { color: var(--pe-text-muted); }
  .pe-table--compare td:nth-child(3) { color: var(--pe-teal-900); font-weight: 700; }

  /* ── Mechanism diagram slot (static in Batch A) ────────────────────── */
  .pe-mechanism { position: relative; }
  .pe-mechanism .pe-media { aspect-ratio: 4 / 3; }
  .pe-mechanism__legend { margin-top: var(--pe-space-3); display: flex; flex-wrap: wrap; gap: var(--pe-space-2) var(--pe-space-5); font-size: var(--pe-text-caption); color: var(--pe-text-muted); }
}

/* ═══════════════════════════════════════════════════════════════════════
   12. INNER TEMPLATES — Batch B (Services): relationship timeline,
   engagement facts, cadence tags. Services storytelling = expertise,
   process, engagement model, continuity. Tier 2 motion.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.templates {
  /* ── Relationship timeline: stages on one hairline, spans above ─────── */
  .pe-timeline { position: relative; display: grid; gap: var(--pe-space-6); }
  .pe-timeline__spans { display: none; }
  .pe-timeline__stages { display: grid; gap: var(--pe-space-6); position: relative; }
  .pe-timeline__stage { position: relative; padding-left: var(--pe-space-6); scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); }
  .pe-timeline__stage::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--pe-teal-500); }
  .pe-timeline__stage::after { content: ""; position: absolute; left: 4px; top: 20px; bottom: -28px; width: 1px; background: var(--pe-line-strong); }
  .pe-timeline__stage:last-child::after { display: none; }
  .pe-timeline__stage--managed::before { background: var(--pe-orange-deep); }
  .pe-timeline__num { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); }
  .pe-timeline__stage h3 { margin-top: 6px; font-size: 1.15rem; }
  .pe-timeline__stage p { margin-top: 6px; font-size: 14px; line-height: 1.55; color: var(--pe-text-body); }
  .pe-timeline__stage .pe-link { margin-top: 10px; display: inline-flex; font-size: 14px; }
  @media (min-width: 1024px) {
    .pe-timeline { gap: 0; }
    .pe-timeline__spans { display: grid; grid-template-columns: repeat(var(--pe-timeline-cols, 5), minmax(0, 1fr)); gap: var(--pe-space-5); margin-bottom: var(--pe-space-5); }
    .pe-timeline__span { position: relative; padding-bottom: 14px; font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-teal-600); }
    .pe-timeline__span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--pe-teal-600); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--pe-ease-expo) 0.2s; }
    .pe-timeline__span { grid-column: var(--pe-span, auto); }
    .pe-timeline__span--managed { color: var(--pe-orange-deep); }
    .pe-timeline__span--managed::after { background: var(--pe-orange-deep); transition-delay: 0.9s; }
    .is-revealed .pe-timeline__span::after, .pe-motion-off .pe-timeline__span::after { transform: scaleX(1); }
    .pe-timeline__stages { grid-template-columns: repeat(var(--pe-timeline-cols, 5), minmax(0, 1fr)); gap: var(--pe-space-5); }
    .pe-timeline__stages::before { content: ""; position: absolute; left: 0; right: 0; top: 4px; height: 1px; background: var(--pe-line-strong); }
    .pe-timeline__stage { padding-left: 0; padding-top: var(--pe-space-5); }
    .pe-timeline__stage::before { top: 0; left: 0; }
    .pe-timeline__stage::after { display: none; }
  }
  .pe-on-dark .pe-timeline__stages::before, .pe-on-dark .pe-timeline__stage::after { background: var(--pe-line-inverse); }
  .pe-on-dark .pe-timeline__stage p { color: var(--pe-text-inverse-muted); }
  .pe-on-dark .pe-timeline__span { color: var(--pe-teal-200); }
  .pe-on-dark .pe-timeline__span::after { background: var(--pe-teal-200); }

  /* ── Engagement facts (hero aside on service pages) ─────────────────── */
  .pe-facts { display: grid; gap: 0; border-top: 1px solid var(--pe-line); }
  .pe-facts > div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: var(--pe-space-4); padding: 12px 0; border-bottom: 1px solid var(--pe-line); font-size: 14px; }
  .pe-facts dt { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); padding-top: 2px; }
  .pe-facts dd { color: var(--pe-text-body); }
  .pe-facts__title { font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; color: var(--pe-text-heading); margin-bottom: var(--pe-space-3); }
  .pe-hero__aside { padding: var(--pe-space-6); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-lg); background: var(--pe-white); }
  @media (min-width: 1024px) { .pe-hero__grid--service { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: start; } }

  /* ── Cadence tag next to a block heading ───────────────────────────── */
  .pe-block__cadence { display: inline-flex; align-items: center; gap: 6px; margin-left: var(--pe-space-3); vertical-align: middle; padding: 3px 10px; border-radius: var(--pe-radius-pill); border: 1px solid var(--pe-line-strong); font-family: var(--pe-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-teal-600); }
  .pe-block__cadence::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pe-teal-300); }

  /* ── Outcomes list (qualitative, no numbers) ───────────────────────── */
  .pe-outcomes { display: grid; gap: 0; }
  @media (min-width: 768px) { .pe-outcomes { grid-template-columns: 1fr 1fr; gap: 0 var(--pe-space-7); } }
  .pe-outcomes--stacked { grid-template-columns: 1fr; }
  .pe-outcomes li { display: flex; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--pe-line); font-size: 15px; line-height: 1.5; }
  .pe-outcomes li img { width: 18px; height: 18px; flex: none; margin-top: 3px; }

  /* ── Dark band for the managed lane on the Services landing ────────── */
  .pe-caps--wide { grid-template-columns: 1fr; }
  @media (min-width: 640px) { .pe-caps--wide { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .pe-caps--wide { grid-template-columns: 1fr 1fr 1fr; } }
  .pe-caps--wide li { padding: 14px 0; border-bottom: 1px solid var(--pe-line-inverse-soft); }
  .pe-caps--wide li a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.22em; text-decoration-color: rgba(255,255,255,0.45); transition: color var(--pe-dur-fast), text-decoration-color var(--pe-dur-fast); }
  .pe-caps--wide li a:hover { color: var(--pe-teal-200); text-decoration-color: currentColor; }
}

/* ═══════════════════════════════════════════════════════════════════════
   13. INNER TEMPLATES — Batch C (Resources & customer proof).
   Three registers on one system: editorial (hub, detail), time
   (events), evidence (stories, case study). Tier 3 motion.
   ═══════════════════════════════════════════════════════════════════════ */
@layer pe.templates {
  /* ── Content status markers (dev aid; never styled on the live site) ── */
  [data-pe-status="required"] { color: var(--pe-teal-600); }
  .pe-on-dark [data-pe-status="required"], .pe-mega__card [data-pe-status="required"], .pe-section--dark [data-pe-status="required"] { color: var(--pe-teal-200); }

  /* ── Featured lead (hub, stories) ───────────────────────────────────── */
  .pe-lead { display: grid; gap: var(--pe-space-6); align-items: start; }
  @media (min-width: 1024px) { .pe-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); } }
  .pe-lead__media .pe-media { border-radius: var(--pe-radius-lg); }
  .pe-lead__title { margin-top: var(--pe-space-4); font-size: clamp(1.6rem, 1.3rem + 1.2vw, 2.25rem); line-height: 1.15; }
  .pe-lead__title a { color: inherit; text-decoration: none; }
  .pe-lead__title a:hover { color: var(--pe-teal-900); }
  .pe-lead__deck { margin-top: var(--pe-space-4); max-width: var(--pe-measure-lede); font-size: var(--pe-text-lead); line-height: 1.5; }
  .pe-lead__secondary { display: grid; gap: 0; border-top: 1px solid var(--pe-line); }
  .pe-lead__secondary-title { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); padding: var(--pe-space-4) 0 var(--pe-space-2); }

  /* ── Byline (optional fields collapse: render only what exists) ─────── */
  .pe-byline { display: flex; flex-wrap: wrap; align-items: center; gap: 6px var(--pe-space-3); font-size: var(--pe-text-small); color: var(--pe-text-muted); }
  .pe-byline > * + *::before { content: "·"; margin-right: var(--pe-space-3); color: var(--pe-line-strong); }
  .pe-byline__author { color: var(--pe-text-heading); font-weight: 700; }
  .pe-on-dark .pe-byline { color: var(--pe-text-inverse-muted); }
  .pe-on-dark .pe-byline > * + *::before { color: rgba(255,255,255,0.35); }
  .pe-byline--lg { font-size: 15px; }

  /* ── Hairline list rows (latest, related) ───────────────────────────── */
  .pe-list { border-top: 1px solid var(--pe-line); }
  .pe-list__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px var(--pe-space-5); padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); color: inherit; text-decoration: none; transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  @media (min-width: 768px) { .pe-list__row { grid-template-columns: 11rem minmax(0, 1fr) 24px; align-items: start; } }
  .pe-list__cat .pe-tag { white-space: normal; height: auto; min-height: 26px; padding-block: 4px; line-height: 1.2; max-width: 11rem; }
  .pe-list__cat { align-self: start; }
  .pe-list__title { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--pe-text-heading); }
  .pe-list__deck { margin-top: 6px; font-size: 15px; line-height: 1.55; color: var(--pe-text-body); max-width: var(--pe-measure); }
  .pe-list__meta { margin-top: 8px; }
  .pe-list__row .pe-card__arrow { display: none; }
  @media (min-width: 768px) { .pe-list__row .pe-card__arrow { display: block; justify-self: end; margin-top: 4px; } }
  .pe-list--compact .pe-list__row { padding: var(--pe-space-4) 0; }
  @media (min-width: 768px) { .pe-list--compact .pe-list__row { grid-template-columns: minmax(0, 1fr) 24px; } .pe-list--compact .pe-list__cat { grid-column: 1 / -1; margin-bottom: 8px; } .pe-list--compact .pe-list__row > .pe-card__arrow { grid-column: 2; grid-row: 2; } }
  .pe-list--compact .pe-list__title { font-size: 1rem; }
  .pe-on-dark .pe-list, .pe-on-dark .pe-list__row { border-color: var(--pe-line-inverse-soft); }
  .pe-on-dark .pe-list__title { color: var(--pe-white); }
  .pe-on-dark .pe-list__deck { color: var(--pe-text-inverse-muted); }

  /* ── Article hero and reading layout ────────────────────────────────── */
  .pe-hero--article .pe-hero__inner { max-width: 48rem; }
  .pe-hero__deck { margin-top: var(--pe-space-5); max-width: 40rem; font-size: var(--pe-text-lead); line-height: 1.5; color: var(--pe-text-body); }
  .pe-hero__media { margin-top: var(--pe-space-7); }
  .pe-hero__media .pe-media { border-radius: var(--pe-radius-lg); }
  .pe-article { display: grid; gap: var(--pe-space-7); }
  @media (min-width: 1024px) { .pe-article { grid-template-columns: minmax(0, 3fr) minmax(0, 7fr) minmax(0, 2fr); gap: var(--pe-space-8); align-items: start; } .pe-article__rail, .pe-article__aside { position: sticky; top: calc(var(--pe-header-h) + 2rem); } }
  .pe-article--no-toc { grid-template-columns: minmax(0, 1fr); }
  @media (min-width: 1024px) { .pe-article--no-toc { grid-template-columns: minmax(0, 8fr) minmax(0, 2fr); } .pe-article--plain { grid-template-columns: minmax(0, 1fr); } .pe-article--no-toc .pe-article__body, .pe-article--plain .pe-article__body { justify-self: start; } }
  .pe-article > * { min-width: 0; }
  @media (max-width: 1023.98px) { .pe-article__rail { margin-inline: calc(var(--pe-gutter) * -1); padding-inline: var(--pe-gutter); } .pe-article__rail .pe-download { display: none; } }
  .pe-article__body { max-width: var(--pe-measure); }
  /* RB-74: reading size for article prose */
  .pe-article__body .pe-prose { font-size: 1.0625rem; line-height: 1.65; }
  .pe-hero__media--capped .pe-media { max-height: 22rem; }
  .pe-hero__media--capped .pe-media img { max-height: 22rem; }
  /* Hub previews pair: when only one preview is rendered it takes the full width */
  .pe-hub-pair { gap: var(--pe-space-8); }
  .pe-hub-pair > :only-child { grid-column: 1 / -1; }
  @media (max-width: 1023.98px) { .pe-hub-pair { grid-template-columns: minmax(0, 1fr); } }
  /* Featured lead without secondary items spans the row */
  .pe-lead > .pe-lead__main:only-child { grid-column: 1 / -1; }
  .pe-article__body .pe-prose > h2 { scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); }
  .pe-article__body figure { margin: var(--pe-space-7) 0; }
  .pe-article__body figcaption { margin-top: var(--pe-space-3); font-size: var(--pe-text-caption); color: var(--pe-text-muted); }
  .pe-pullquote { margin: var(--pe-space-8) 0; padding-left: var(--pe-space-6); border-left: 2px solid var(--pe-orange); font-family: var(--pe-font-display); font-weight: 300; font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.75rem); line-height: 1.4; color: var(--pe-text-heading); }
  .pe-pullquote cite { display: block; margin-top: var(--pe-space-3); font-family: var(--pe-font-body); font-style: normal; font-weight: 700; font-size: var(--pe-text-small); color: var(--pe-text-muted); }
  .pe-share { display: flex; flex-wrap: wrap; gap: var(--pe-space-2); }
  .pe-share button { background: none; font: inherit; cursor: pointer; }
  .pe-share a, .pe-share button { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px solid var(--pe-line-strong); border-radius: var(--pe-radius-sm); color: var(--pe-teal-600); }
  .pe-share a:hover, .pe-share button:hover { border-color: var(--pe-teal-600); color: var(--pe-teal-900); }

  /* ── Download block: direct link or gated slot; optional ────────────── */
  .pe-download { padding: var(--pe-space-5); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-lg); background: var(--pe-cloud); }
  .pe-download__label { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-download__title { margin-top: var(--pe-space-2); font-size: 1.05rem; }
  .pe-download__meta { margin-top: 4px; font-size: var(--pe-text-caption); color: var(--pe-text-muted); }
  .pe-download .pe-btn { margin-top: var(--pe-space-4); }
  .pe-download--gated .pe-form { margin-top: var(--pe-space-4); }

  /* ── Time register: date block, state tags, event rows ─────────────── */
  .pe-date-block { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-width: 4.5rem; padding: 10px 8px; border: 1px solid var(--pe-line-strong); border-radius: var(--pe-radius-md); font-family: var(--pe-font-display); line-height: 1; text-align: center; }
  .pe-date-block__day { font-weight: 600; font-size: 1.75rem; color: var(--pe-text-heading); font-variant-numeric: tabular-nums; }
  .pe-date-block__month { margin-top: 4px; font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: 0.12em; text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-date-block--lg { min-width: 6rem; padding: 14px 12px; }
  .pe-date-block--lg .pe-date-block__day { font-size: 2.5rem; }
  .pe-on-dark .pe-date-block { border-color: var(--pe-line-inverse); }
  .pe-on-dark .pe-date-block__day { color: var(--pe-white); }
  .pe-on-dark .pe-date-block__month { color: var(--pe-teal-200); }
  .pe-tag--past { color: var(--pe-text-muted); background: transparent; border: 1px solid var(--pe-line-strong); }
  .pe-event-row { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--pe-space-4) var(--pe-space-5); padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); align-items: start; }
  @media (min-width: 768px) { .pe-event-row { grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; } }
  .pe-event-row__title { margin-top: 8px; font-size: 1.2rem; line-height: 1.3; }
  .pe-event-row__title a { color: inherit; text-decoration: none; }
  .pe-event-row__title a:hover { color: var(--pe-teal-900); }
  .pe-event-row__meta { margin-top: 6px; }
  .pe-event-row__cta { grid-column: 2; }
  @media (min-width: 768px) { .pe-event-row__cta { grid-column: auto; } }
  .pe-event-row--past .pe-date-block { border-style: dashed; }
  .pe-events { border-top: 1px solid var(--pe-line); }

  /* ── Speakers and agenda ────────────────────────────────────────────── */
  .pe-speakers { display: grid; gap: var(--pe-space-4); }
  @media (min-width: 640px) { .pe-speakers { grid-template-columns: 1fr 1fr; } }
  .pe-speaker { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: var(--pe-space-4); align-items: center; padding: var(--pe-space-4) 0; border-top: 1px solid var(--pe-line); }
  .pe-speaker__avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--pe-teal-700); color: var(--pe-white); display: grid; place-items: center; font-family: var(--pe-font-display); font-weight: 600; font-size: 1.1rem; overflow: hidden; }
  .pe-speaker__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pe-speaker__name { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.05rem; color: var(--pe-text-heading); }
  .pe-speaker__role { margin-top: 2px; font-size: var(--pe-text-small); color: var(--pe-text-muted); }
  .pe-agenda { border-top: 1px solid var(--pe-line); }
  .pe-agenda__row { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: var(--pe-space-4); padding: 14px 0; border-bottom: 1px solid var(--pe-line); font-size: 15px; }
  .pe-agenda__time { font-family: var(--pe-font-display); font-weight: 600; color: var(--pe-teal-600); font-variant-numeric: tabular-nums; }
  .pe-embed { position: relative; aspect-ratio: 16 / 9; border-radius: var(--pe-radius-lg); overflow: hidden; background: var(--pe-teal-900); display: grid; place-items: center; color: var(--pe-text-inverse-muted); font-size: var(--pe-text-small); }
  .pe-embed iframe, .pe-embed video { position: absolute; inset: 0; width: 100%; height: 100%; }

  /* ── Evidence register: context row, readouts, story rows ──────────── */
  .pe-context { display: flex; flex-wrap: wrap; gap: var(--pe-space-3) var(--pe-space-6); font-size: var(--pe-text-small); }
  .pe-context > div { display: grid; gap: 2px; }
  .pe-context dt { font-family: var(--pe-font-body); font-weight: 700; font-size: 11px; letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-context dd { color: var(--pe-text-heading); font-weight: 700; }
  .pe-context dd a { color: inherit; text-decoration: none; }
  .pe-context dd a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.18em; }
  .pe-on-dark .pe-context dt { color: var(--pe-teal-200); }
  .pe-on-dark .pe-context dd { color: var(--pe-white); }
  .pe-readouts { display: grid; gap: var(--pe-space-6) var(--pe-space-7); }
  @media (min-width: 640px) { .pe-readouts { grid-template-columns: repeat(var(--pe-readout-cols, 3), minmax(0, 1fr)); } }
  .pe-readout { padding-top: var(--pe-space-4); border-top: 1px solid var(--pe-line); }
  .pe-readout__value { font-family: var(--pe-font-display); font-weight: 700; font-size: clamp(2rem, 1.5rem + 1.6vw, 2.75rem); line-height: 1; color: var(--pe-text-heading); font-variant-numeric: tabular-nums; letter-spacing: var(--pe-tracking-tight); }
  .pe-readout__unit { margin-left: 4px; font-size: 1.1rem; font-weight: 500; color: var(--pe-teal-600); }
  .pe-readout__scale { position: relative; margin-top: var(--pe-space-3); height: 1px; background: var(--pe-line-strong); }
  .pe-readout__scale::after { content: ""; position: absolute; left: 0; top: -1px; height: 3px; width: calc(var(--pe-readout-fill, 0.6) * 100%); background: var(--pe-teal-500); transform-origin: left; transform: scaleX(0); transition: transform 1.2s var(--pe-ease-expo) 0.2s; }
  .is-revealed .pe-readout__scale::after, .pe-motion-off .pe-readout__scale::after { transform: scaleX(1); }
  .pe-readout__label { margin-top: var(--pe-space-2); font-size: var(--pe-text-small); line-height: 1.4; color: var(--pe-text-body); }
  .pe-on-dark .pe-readout { border-color: var(--pe-line-inverse); }
  .pe-on-dark .pe-readout__value { color: var(--pe-white); }
  .pe-on-dark .pe-readout__unit { color: var(--pe-teal-200); }
  .pe-on-dark .pe-readout__scale { background: var(--pe-line-inverse); }
  .pe-on-dark .pe-readout__scale::after { background: var(--pe-teal-200); }
  .pe-on-dark .pe-readout__label { color: var(--pe-text-inverse-muted); }
  .pe-story-lead { display: grid; gap: var(--pe-space-6); padding: var(--pe-space-7); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-xl); }
  @media (max-width: 767px) { .pe-story-lead { padding: var(--pe-space-5); border-radius: var(--pe-radius-lg); } }
  @media (min-width: 1024px) { .pe-story-lead { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-8); align-items: start; } }
  .pe-story-lead.pe-story-lead--compact { display: block; padding: var(--pe-space-6); }
  .pe-story-lead__headline { margin-top: var(--pe-space-4); font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); line-height: 1.15; }
  .pe-story-lead__headline a { color: inherit; text-decoration: none; }
  .pe-story-lead__headline a:hover { color: var(--pe-teal-900); }
  .pe-story-lead__summary { margin-top: var(--pe-space-4); max-width: var(--pe-measure-lede); font-size: 15px; line-height: 1.6; }
  .pe-story-rows { border-top: 1px solid var(--pe-line); }
  .pe-story-row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px var(--pe-space-5); padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); color: inherit; text-decoration: none; transition: border-color var(--pe-dur-fast) var(--pe-ease-out), box-shadow var(--pe-dur-fast) var(--pe-ease-out); }
  @media (min-width: 768px) { .pe-story-row { grid-template-columns: 12rem minmax(0, 1fr) 24px; align-items: start; } }
  .pe-story-row__client { font-family: var(--pe-font-display); font-weight: 600; font-size: 1rem; color: var(--pe-text-heading); }
  .pe-story-row__industry { display: block; margin-top: 2px; font-size: var(--pe-text-caption); color: var(--pe-text-muted); }
  .pe-story-row__headline { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; color: var(--pe-text-heading); }
  .pe-story-row__outcome { margin-top: 6px; font-size: 15px; color: var(--pe-text-body); }
  .pe-story-row .pe-card__arrow { display: none; }
  @media (min-width: 768px) { .pe-story-row .pe-card__arrow { display: block; justify-self: end; margin-top: 4px; } }
  .pe-hero--story .pe-hero__inner { max-width: 52rem; }
  .pe-hero__outcomes { margin-top: var(--pe-space-7); padding-top: var(--pe-space-6); border-top: 1px solid var(--pe-line-inverse-soft); }
  .pe-qualitative { display: grid; gap: 10px; }
  @media (min-width: 768px) { .pe-qualitative { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pe-space-5); } }
  .pe-qualitative li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; line-height: 1.5; }
  .pe-qualitative li img { width: 18px; height: 18px; flex: none; margin-top: 3px; }
  .pe-on-dark .pe-qualitative li { color: var(--pe-text-inverse-muted); }
}

/* ════════════════════════════════════════════════════════════════════
   14. INNER TEMPLATES — Batch D (Company, conversion and utility).
   People rows, partner marks, job rows, contact layout and form panel,
   search results, legal, thank-you and error states. Tier 3 motion.
   ════════════════════════════════════════════════════════════════════ */
@layer pe.templates {
  /* ── People (leadership / team) — optional region, self-hiding when empty ── */
  .pe-people { display: grid; gap: var(--pe-space-5); }
  @media (min-width: 640px) { .pe-people { grid-template-columns: 1fr 1fr; } }
  @media (min-width: 1024px) { .pe-people--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .pe-people--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .pe-person { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: var(--pe-space-4); align-items: center; padding: var(--pe-space-4) 0; border-top: 1px solid var(--pe-line); }
  .pe-person__avatar { width: 64px; height: 64px; border-radius: 50%; background: var(--pe-cloud); color: var(--pe-teal-600); display: inline-flex; align-items: center; justify-content: center; font-family: var(--pe-font-display); font-weight: 600; font-size: 1.1rem; overflow: hidden; }
  .pe-person__avatar img { width: 100%; height: 100%; object-fit: cover; }
  .pe-person__name { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.05rem; color: var(--pe-text-heading); }
  .pe-person__role { margin-top: 2px; font-size: 14px; color: var(--pe-text-muted); }
  .pe-person__link { margin-top: 4px; font-size: 14px; }

  /* ── Partner marks — content-governed; text fallback when no approved logo ── */
  .pe-logos { display: grid; gap: var(--pe-space-4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
  @media (min-width: 768px) { .pe-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  @media (min-width: 1024px) { .pe-logos--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  .pe-logo { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: var(--pe-space-4); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-md); background: var(--pe-white); text-align: center; }
  .pe-logo img { max-height: 44px; width: auto; max-width: 80%; }
  .pe-logo__img--dark { filter: invert(1) brightness(0.2); }
  .pe-speakers--stacked { grid-template-columns: 1fr; }
  .pe-download--link { display: block; text-decoration: none; }
  .pe-search__form--drawer { padding: 0; }
  .pe-on-dark .pe-facts, .pe-on-dark .pe-facts > div { border-color: var(--pe-line-inverse); }
  .pe-on-dark .pe-facts__title { color: var(--pe-white); }
  .pe-on-dark .pe-facts dt { color: var(--pe-teal-200); }
  .pe-on-dark .pe-facts dd { color: var(--pe-text-inverse-muted); }
  .pe-story-lead__headline--sm { font-size: 1.4rem; }
  .pe-qualitative--stacked { grid-template-columns: 1fr; }
  .pe-media--21x9 { aspect-ratio: 21 / 9; }
  .pe-quote__text--sm { font-size: 1.35rem; }
  .pe-tag a { color: inherit; text-decoration: none; }
  .pe-media__caption--quiet { color: var(--pe-text-muted); background: none; }
  .pe-speaker--flush { border-top: 0; padding-top: var(--pe-space-3); }
  .pe-on-dark .pe-hero__aside--panel { background: rgba(255,255,255,0.06); border-color: var(--pe-line-inverse); }
  .pe-field__error--full { flex-basis: 100%; }
  .pe-cta-inline--stacked { display: block; }
  .pe-logo__name { font-family: var(--pe-font-display); font-weight: 600; font-size: 1rem; color: var(--pe-text-heading); }
  .pe-logo__note { display: block; margin-top: 4px; font-size: 12px; color: var(--pe-text-muted); }
  .pe-on-dark .pe-logo { background: rgba(255,255,255,0.06); border-color: var(--pe-line-inverse); }
  .pe-on-dark .pe-logo__name { color: var(--pe-white); }

  /* ── Job rows (Careers) — APEX region "jobs"; empty state shipped hidden ── */
  .pe-jobs { border-top: 1px solid var(--pe-line); }
  .pe-job { display: grid; grid-template-columns: minmax(0, 1fr) 24px; gap: var(--pe-space-2) var(--pe-space-5); padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); align-items: center; text-decoration: none; color: inherit; }
  @media (min-width: 768px) { .pe-job { grid-template-columns: minmax(0, 1fr) 11rem 9rem 24px; } }
  .pe-job__title { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.15rem; color: var(--pe-text-heading); }
  .pe-job__meta { font-size: 14px; color: var(--pe-text-muted); }
  .pe-job .pe-card__arrow { justify-self: end; grid-row: 1; grid-column: -2; }
  @media (max-width: 767px) { .pe-job .pe-card__arrow { grid-row: 1 / span 3; } }

  /* ── Contact / Demo layout: form (7) + aside (5) ── */
  .pe-contact { display: grid; gap: var(--pe-space-8); align-items: start; }
  @media (min-width: 1024px) { .pe-contact { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-9); } }
  .pe-form-panel { padding: var(--pe-space-6); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-lg); background: var(--pe-white); }
  @media (min-width: 768px) { .pe-form-panel { padding: var(--pe-space-7); } }
  .pe-form-panel__title { font-size: var(--pe-text-h4); }
  .pe-form-panel__lede { margin-top: var(--pe-space-2); color: var(--pe-text-muted); font-size: 15px; }
  .pe-form__done { display: none; padding: var(--pe-space-6) 0; }
  .pe-form.is-done > :not(.pe-form__done) { display: none; }
  .pe-form.is-done .pe-form__done { display: block; }
  .pe-form__done-icon { width: 48px; height: 48px; border-radius: 50%; background: #E8F3EE; display: inline-flex; align-items: center; justify-content: center; }
  .pe-form__done-icon img { width: 24px; height: 24px; }
  .pe-field__control:autofill, .pe-field__control:-webkit-autofill { box-shadow: 0 0 0 1000px var(--pe-white) inset; }
  .pe-next { display: grid; gap: var(--pe-space-4); counter-reset: pe-next; }
  .pe-next li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: var(--pe-space-4); align-items: start; }
  .pe-next li::before { counter-increment: pe-next; content: "0" counter(pe-next); font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-text-accent); padding-top: 5px; }
  .pe-next__title { font-family: var(--pe-font-display); font-weight: 600; color: var(--pe-text-heading); }
  .pe-next__text { margin-top: 2px; font-size: 15px; color: var(--pe-text-muted); }
  .pe-contact-details { display: grid; gap: var(--pe-space-4); }
  .pe-contact-details a { color: var(--pe-teal-600); }
  .pe-contact-details dt { font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-accent); }
  .pe-contact-details dd { margin-top: 4px; }

  /* ── Search results shell ── */
  .pe-search-hero__form { display: grid; gap: var(--pe-space-3); margin-top: var(--pe-space-6); max-width: 44rem; }
  @media (min-width: 640px) { .pe-search-hero__form { grid-template-columns: minmax(0, 1fr) auto; align-items: end; } }
  .pe-results__meta { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--pe-space-3); padding-bottom: var(--pe-space-4); border-bottom: 2px solid var(--pe-teal-900); }
  .pe-results__count { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.05rem; color: var(--pe-text-heading); }
  .pe-result { display: grid; gap: var(--pe-space-2); padding: var(--pe-space-5) 0; border-bottom: 1px solid var(--pe-line); }
  .pe-result__title { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.2rem; line-height: 1.3; }
  .pe-result__title a { color: var(--pe-text-heading); text-decoration: none; }
  .pe-result__title a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.2em; }
  .pe-result__snippet { color: var(--pe-text-body); font-size: 15px; max-width: 68ch; }
  .pe-result__snippet mark { background: rgba(255,81,10,0.14); color: inherit; padding: 0 2px; border-radius: 2px; }
  .pe-result__path { font-size: 13px; color: var(--pe-text-muted); word-break: break-all; }

  /* ── Legal ── */
  .pe-legal__updated { margin-top: var(--pe-space-4); font-size: 14px; color: var(--pe-text-muted); }
  .pe-legal .pe-prose { max-width: var(--pe-measure); }
  .pe-legal .pe-prose h2 { scroll-margin-top: calc(var(--pe-header-h) + 1.5rem); }
  .pe-legal .pe-prose > h2:not(:first-child) { margin-top: var(--pe-space-8); padding-top: var(--pe-space-6); border-top: 1px solid var(--pe-line); }

  /* ── Thank you / 404 ── */
  .pe-utility { max-width: 44rem; }
  .pe-utility__mark { width: 56px; height: 56px; border-radius: 50%; background: #E8F3EE; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--pe-space-5); }
  .pe-utility__mark img { width: 28px; height: 28px; }
  .pe-utility__code { font-family: var(--pe-font-display); font-weight: 600; font-size: clamp(4rem, 3rem + 5vw, 7rem); line-height: 1; letter-spacing: var(--pe-tracking-tight); color: var(--pe-teal-900); }
  .pe-routes { display: grid; gap: 0; border-top: 1px solid var(--pe-line); }
  @media (min-width: 640px) { .pe-routes { grid-template-columns: 1fr 1fr; gap: 0 var(--pe-space-7); } }
  .pe-routes a { display: grid; grid-template-columns: minmax(0, 1fr) 24px; align-items: center; gap: var(--pe-space-3); padding: 16px 0; border-bottom: 1px solid var(--pe-line); font-family: var(--pe-font-display); font-weight: 600; color: var(--pe-text-heading); text-decoration: none; }
  .pe-routes__desc { display: block; font-family: var(--pe-font-body); font-weight: 400; font-size: 14px; color: var(--pe-text-muted); margin-top: 2px; }
  .pe-routes a:hover { border-bottom-color: var(--pe-teal-500); box-shadow: 0 -1px 0 0 var(--pe-teal-500); }

  /* ── Company landing ── */
  .pe-company-pair { display: grid; gap: var(--pe-space-8); }
  @media (min-width: 1024px) { .pe-company-pair { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-9); } }
  .pe-company-pair > :only-child { grid-column: 1 / -1; }
  .pe-hero__inner--wide { max-width: 60rem; }
  /* Light island inside a dark section (campaign form panel) */
  .pe-on-light { color: var(--pe-text-body); }
  .pe-on-light h1, .pe-on-light h2, .pe-on-light h3, .pe-on-light h4, .pe-on-light .pe-field__label { color: var(--pe-text-heading); }
  .pe-on-light p { color: inherit; }
  .pe-on-light [data-pe-status="required"] { color: var(--pe-teal-600); }
  .pe-on-light .pe-form__note, .pe-on-light .pe-field__hint, .pe-on-light .pe-form-panel__lede { color: var(--pe-text-muted); }
  .pe-on-light a { color: var(--pe-teal-600); }
  .pe-on-light :focus-visible { outline-color: var(--pe-focus); }
  .pe-on-dark .pe-contact .pe-lede { color: var(--pe-text-inverse-muted); }
}