/* ═══════════════════════════════════════════════════════════════════════
   Projects Expert — Daria R2 review delta
   pe-r2.css  ·  loaded AFTER the unchanged css/pe.css, on review pages only
   ───────────────────────────────────────────────────────────────────────
   pe.css declares the cascade layers; these rules join the same layers
   and win on source order at equal specificity. No approved template
   loads this file. If Daria approves, the rules fold into pe.css as a
   separate, deliberate step.

    1. Icon masks (brand icon library recoloured with currentColor)
    2. Header states (white sheet when a panel is open; solid when scrolled)
    3. Mega menu panels (.pe-menu)
    4. Mobile drawer (server-rendered, nested disclosures)
    5. Footer
    6. Hero structure and artwork placements (banner, side, background)
    7. Gears (approved connector, card-corner and CTA band gears)
    8. Interface illustration (Solutions flagship)
    9. Home sections: product family, services path, service lanes on dark
   10. Why: layer diagram
   11. Customer story pending state
   12. Resource covers and CTA tiles
   13. Review-only aids
   14. Motion (full motion mode only)
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════ 1. ICON MASKS ═══════════════════════════════════════════════════
   Brand icons are single-colour SVGs; as masks they take currentColor, so
   one file serves teal-on-light and teal-200-on-dark without filters.
   One modifier per icon (URLs resolve relative to this stylesheet). */
@layer pe.components {
  .pe-ico { display: block; width: 100%; height: 100%; background-color: currentColor; -webkit-mask: var(--pe-ico) center / contain no-repeat; mask: var(--pe-ico) center / contain no-repeat; }
  .pe-ico--advisory-consult { --pe-ico: url("../assets/icons/advisory-consult.svg"); }
  .pe-ico--bar-chart { --pe-ico: url("../assets/icons/bar-chart.svg"); }
  .pe-ico--certificate { --pe-ico: url("../assets/icons/certificate.svg"); }
  .pe-ico--chart-cycle { --pe-ico: url("../assets/icons/chart-cycle.svg"); }
  .pe-ico--chat-bubbles { --pe-ico: url("../assets/icons/chat-bubbles.svg"); }
  .pe-ico--checklist-pen { --pe-ico: url("../assets/icons/checklist-pen.svg"); }
  .pe-ico--cloud-data { --pe-ico: url("../assets/icons/cloud-data.svg"); }
  .pe-ico--dashboard-monitor { --pe-ico: url("../assets/icons/dashboard-monitor.svg"); }
  .pe-ico--data-distribution { --pe-ico: url("../assets/icons/data-distribution.svg"); }
  .pe-ico--doc-check { --pe-ico: url("../assets/icons/doc-check.svg"); }
  .pe-ico--document { --pe-ico: url("../assets/icons/document.svg"); }
  .pe-ico--folders { --pe-ico: url("../assets/icons/folders.svg"); }
  .pe-ico--gear-tools { --pe-ico: url("../assets/icons/gear-tools.svg"); }
  .pe-ico--gears-cycle { --pe-ico: url("../assets/icons/gears-cycle.svg"); }
  .pe-ico--gears-wrench { --pe-ico: url("../assets/icons/gears-wrench.svg"); }
  .pe-ico--link-chain { --pe-ico: url("../assets/icons/link-chain.svg"); }
  .pe-ico--mind-gears-check { --pe-ico: url("../assets/icons/mind-gears-check.svg"); }
  .pe-ico--presenter-gear { --pe-ico: url("../assets/icons/presenter-gear.svg"); }
  .pe-ico--target-arrow { --pe-ico: url("../assets/icons/target-arrow.svg"); }
  .pe-ico--team { --pe-ico: url("../assets/icons/team.svg"); }
  .pe-ico--training-laptop { --pe-ico: url("../assets/icons/training-laptop.svg"); }

  /* Shared icon tile for menus and drawer: teal line icon on a light tile (replaces white-on-teal) */
  .pe-menu__icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; padding: 9px; border-radius: 10px; background: var(--pe-cloud); color: var(--pe-teal-600); transition: background var(--pe-dur-fast) var(--pe-ease-out), color var(--pe-dur-fast) var(--pe-ease-out); }
}

/* ═══════ 2. HEADER STATES ═════════════════════════════════════════════ */
@layer pe.components {
  .pe-header--r2 .pe-nav__trigger { opacity: 1; }
  .pe-header--r2 { transition: background var(--pe-dur-base) var(--pe-ease-out), color var(--pe-dur-base) var(--pe-ease-out), border-color var(--pe-dur-base) var(--pe-ease-out); }

  /* Scrolled: a solid, crisp bar instead of a translucent blur */
  .pe-header--r2.is-scrolled { background: rgba(7,45,51,0.97); border-bottom-color: rgba(255,255,255,0.08); -webkit-backdrop-filter: none; backdrop-filter: none; }

  /* Open (mega panel, search or drawer): the bar turns white so bar and panel read as one sheet */
  .pe-header--r2.is-open { background: var(--pe-white); color: var(--pe-ink); border-bottom-color: var(--pe-line); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .pe-header--r2.is-open .pe-header__logo--on-dark { display: none; }
  .pe-header--r2.is-open .pe-header__logo--on-light { display: block; }
  .pe-header--r2.is-open .pe-nav__trigger::after { background: var(--pe-teal-500); }
  .pe-header--r2.is-open .pe-header__search:hover,
  .pe-header--r2.is-open .pe-header__search[aria-expanded="true"] { background: var(--pe-cloud); }
  .pe-header--r2.is-open .pe-header__cta { background: var(--pe-accent); border-color: transparent; color: var(--pe-white); }
  .pe-header--r2.is-open .pe-header__cta:hover { background: var(--pe-accent-hover); }

  /* Light-hero pages, once scrolled. pe.js adds .pe-header--light on every page whose hero is
     light-toned, and pe.css then tints the whole bar for a white background: ink text, the dark
     logo, cloud-coloured search states, a teal-500 underline. R2 replaced the scrolled bar with a
     solid dark one above, but only its background, so those light tints stayed and the navigation
     read as near-black on dark teal on most inside pages. Each light tint is returned to its
     on-dark value for exactly the state where the R2 bar is dark: scrolled, and no panel open.
     .is-open keeps the white sheet and is excluded throughout. (Reported 6 Oct 2026.) */
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) { color: var(--pe-white); }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-header__logo--on-dark { display: block; }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-header__logo--on-light { display: none; }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-header__search:hover { background: rgba(255,255,255,0.08); }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-header__search[aria-expanded="true"] { background: rgba(255,255,255,0.12); }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-nav__trigger::after { background: var(--pe-teal-300); }

  /* Focus stays clearly visible while the bar is transparent or dark */
  .pe-header--r2:not(.is-open):not(.pe-header--light) .pe-header__bar :focus-visible { outline-color: var(--pe-white); }
  .pe-header--r2.pe-header--light.is-scrolled:not(.is-open) .pe-header__bar :focus-visible { outline-color: var(--pe-white); }

  /* Scrim below an open panel: separates the white sheet from the page. Visual only; outside clicks still close the menu. */
  .pe-header--r2::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: -1; height: 100vh; background: rgba(4,25,29,0.46); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--pe-dur-base) var(--pe-ease-out), visibility 0s linear var(--pe-dur-base); }
  .pe-header--r2.is-open:not(.is-drawer-open)::after { opacity: 1; visibility: visible; transition: opacity var(--pe-dur-base) var(--pe-ease-out); }
}

/* ═══════ 3. MEGA MENU PANELS ════════════════════════════════════════════
   Content-height panels (no fixed footprint), a slim title row, and one
   layout per panel type. Every grid is driven by item count, not by fixed
   columns: products, solution areas, lanes and rows can be added freely. */
@layer pe.components {
  .pe-header--r2 .pe-mega { border-top: 1px solid var(--pe-line); box-shadow: 0 28px 56px -28px rgba(7,45,51,0.35); max-height: calc(100vh - var(--pe-header-h)); max-height: calc(100dvh - var(--pe-header-h)); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .pe-menu { display: grid; gap: var(--pe-space-5); padding-block: var(--pe-space-5) var(--pe-space-6); }

  /* Title row */
  .pe-menu__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--pe-space-2) var(--pe-space-4); padding-bottom: var(--pe-space-4); border-bottom: 1px solid var(--pe-line); }
  .pe-menu__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-teal-600); }
  .pe-menu__summary { font-family: var(--pe-font-display); font-weight: 500; font-size: 15px; color: var(--pe-text-body); }
  .pe-menu__all { margin-left: auto; font-size: 14px; }

  /* Products (Solutions) */
  .pe-menu__products { display: grid; }
  .pe-menu__product { position: relative; min-width: 0; }
  .pe-menu__product-link { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 8px; margin: -8px; border-radius: var(--pe-radius-md); color: inherit; text-decoration: none; transition: background var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-menu__product-link:hover { background: var(--pe-cloud); }
  .pe-menu__product-link:hover .pe-menu__icon, .pe-menu__row:hover .pe-menu__icon { background: var(--pe-white); color: var(--pe-teal-900); }
  .pe-menu__product-text { min-width: 0; }
  .pe-menu__kicker { display: block; margin-bottom: 2px; font-family: var(--pe-font-body); font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--pe-teal-600); }
  .pe-menu__product-name { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 16px; line-height: 1.25; color: var(--pe-ink); }
  .pe-menu__product-desc { display: block; margin-top: 4px; font-size: 13.5px; line-height: 1.5; color: var(--pe-text-muted); text-wrap: pretty; }

  .pe-menu__areas { display: grid; gap: 0; }
  .pe-menu__area { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 5px 8px; margin-inline: -8px; border-radius: var(--pe-radius-sm); font-size: 14px; line-height: 1.35; color: var(--pe-text-body); text-decoration: none; transition: background var(--pe-dur-fast) var(--pe-ease-out), color var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-menu__area::before { content: ""; flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--pe-teal-300); transition: background var(--pe-dur-fast), transform var(--pe-dur-fast); }
  .pe-menu__area:hover { background: var(--pe-cloud); color: var(--pe-teal-900); }
  .pe-menu__area:hover::before { background: var(--pe-teal-600); transform: scale(1.35); }

  /* Featured product(s): identity left, solution areas flowing as an index on the right */
  .pe-menu__featured { display: grid; gap: var(--pe-space-5); padding-bottom: var(--pe-space-5); border-bottom: 1px solid var(--pe-line); }
  /* The featured row shares the family's column tracks (subgrid), so its solution areas sit exactly
     above the product columns below: identity in column 1, areas across columns 2..N */
  .pe-menu__product--featured { display: grid; grid-template-columns: repeat(var(--pe-menu-family, 4), minmax(0, 1fr)); gap: var(--pe-space-4) 0; align-items: start; }
  .pe-menu__product--featured .pe-menu__product-link { grid-column: 1; align-items: start; margin-right: calc(var(--pe-space-5) - 8px); }
  .pe-menu__product--featured .pe-menu__icon { width: 48px; height: 48px; padding: 11px; }
  .pe-menu__product--featured .pe-menu__product-name { font-size: 19px; }
  .pe-menu__product--featured .pe-menu__areas { grid-column: 2 / -1; grid-template-columns: subgrid; padding-top: 4px; }
  .pe-menu__product--featured .pe-menu__areas > li { padding-left: var(--pe-space-5); }
  /* Six or more family products: no shared tracks; the featured areas flow on their own */
  .pe-menu__products--wrap .pe-menu__product--featured { grid-template-columns: minmax(15rem, 21rem) minmax(0, 1fr); gap: var(--pe-space-4) var(--pe-space-7); }
  .pe-menu__products--wrap .pe-menu__product--featured .pe-menu__product-link { margin-right: -8px; }
  .pe-menu__products--wrap .pe-menu__product--featured .pe-menu__areas { grid-column: auto; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); column-gap: var(--pe-space-5); }
  .pe-menu__products--wrap .pe-menu__product--featured .pe-menu__areas > li { padding-left: 0; }

  /* Product family: one row of equal columns up to five products; six or more wrap into rows */
  .pe-menu__family { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); padding-top: var(--pe-space-5); }
  .pe-menu__family > .pe-menu__product { padding: 4px var(--pe-space-5) 6px; border-left: 1px solid var(--pe-line); }
  .pe-menu__family > .pe-menu__product:first-child { padding-left: 0; border-left: 0; }
  .pe-menu__family:has(> :nth-child(6)) { grid-auto-flow: row; grid-template-columns: repeat(var(--pe-menu-family-cols, 3), minmax(0, 1fr)); gap: var(--pe-space-5) var(--pe-space-6); }
  .pe-menu__family:has(> :nth-child(6)) > .pe-menu__product { padding: var(--pe-space-4) 0 0; border-left: 0; border-top: 1px solid var(--pe-line); }
  .pe-menu__family .pe-menu__product-link { margin-bottom: 6px; }
  .pe-menu__family .pe-menu__icon { width: 34px; height: 34px; padding: 7px; border-radius: 8px; }
  .pe-menu__family .pe-menu__product-name { font-size: 15px; }

  /* Emphasis (Agentic AI PMO): tinted column, teal top rule; no extra copy */
  .pe-menu__family > .pe-menu__product--emphasis { margin-top: -10px; padding: 14px var(--pe-space-5) 10px; border-left-color: transparent; border-radius: var(--pe-radius-lg); background: linear-gradient(180deg, var(--pe-cloud) 0%, rgba(238,243,244,0.45) 100%); }
  .pe-menu__family > .pe-menu__product--emphasis + .pe-menu__product { border-left-color: transparent; }
  .pe-menu__product--emphasis::before { content: ""; position: absolute; top: 0; left: var(--pe-space-5); right: var(--pe-space-5); height: 2px; border-radius: 0 0 2px 2px; background: var(--pe-teal-500); }
  .pe-menu__product--emphasis .pe-menu__icon { background: var(--pe-white); color: var(--pe-teal-700); box-shadow: 0 0 0 1px rgba(58,124,138,0.2); }
  .pe-menu__product--emphasis .pe-menu__product-link:hover,
  .pe-menu__product--emphasis .pe-menu__area:hover { background: var(--pe-white); }
  .pe-menu__family:has(> :nth-child(6)) > .pe-menu__product--emphasis { margin-top: 0; padding: var(--pe-space-4) var(--pe-space-4) var(--pe-space-2); border-top-color: transparent; }

  /* Secondary discovery (bottom bar) */
  .pe-menu__secondary { display: grid; gap: 4px; padding: 10px var(--pe-space-5); border-radius: var(--pe-radius-md); background: var(--pe-cloud); }
  .pe-menu__path { display: flex; flex-wrap: wrap; align-items: center; gap: 2px var(--pe-space-4); }
  .pe-menu__path-title { display: inline-flex; align-items: center; gap: 6px; min-width: 13rem; min-height: 32px; font-family: var(--pe-font-display); font-weight: 600; font-size: 14.5px; color: var(--pe-teal-900); text-decoration: none; }
  .pe-menu__path-title .pe-link__icon { width: 15px; height: 15px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-menu__path-title:hover { color: var(--pe-teal-600); }
  .pe-menu__path-title:hover .pe-link__icon { transform: translateX(3px); }
  .pe-menu__path-list { display: flex; flex-wrap: wrap; gap: 2px; }
  .pe-menu__path-list a { display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px; border-radius: var(--pe-radius-pill); font-size: 13.5px; color: var(--pe-text-body); text-decoration: none; transition: background var(--pe-dur-fast), color var(--pe-dur-fast); }
  .pe-menu__path-list a:hover { background: var(--pe-white); color: var(--pe-teal-900); }

  /* Lanes (Services): proportional to each lane's column count */
  .pe-menu__lanes { display: grid; grid-template-columns: repeat(var(--pe-menu-lanes-cols, 2), minmax(0, 1fr)); }
  .pe-menu__lane { grid-column: span var(--pe-menu-lane-cols, 1); min-width: 0; padding-right: var(--pe-space-6); }
  .pe-menu__lane + .pe-menu__lane { padding-left: var(--pe-space-6); border-left: 1px solid var(--pe-line); }
  .pe-menu__lane:last-child { padding-right: 0; }
  .pe-menu__lane-title { display: inline-flex; align-items: center; gap: 8px; min-height: 32px; margin-bottom: 6px; 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); text-decoration: none; }
  .pe-menu__lane-title .pe-link__icon { width: 14px; height: 14px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-menu__lane-title:hover { color: var(--pe-teal-900); }
  .pe-menu__lane-title:hover .pe-link__icon { transform: translateX(3px); }

  /* Rows (icon + name + one-liner), shared by Services, Resources and Company */
  .pe-menu__rows { display: grid; grid-template-columns: repeat(var(--pe-menu-cols, 1), minmax(0, 1fr)); gap: 2px var(--pe-space-5); align-content: start; }
  .pe-menu__row { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 14px; padding: 10px; margin-inline: -10px; border-radius: var(--pe-radius-md); color: inherit; text-decoration: none; transition: background var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-menu__row:hover { background: var(--pe-cloud); }
  .pe-menu__row-text { min-width: 0; padding-top: 1px; }
  .pe-menu__row-name { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--pe-ink); }
  .pe-menu__row-desc { display: block; margin-top: 3px; font-size: 13.5px; line-height: 1.45; color: var(--pe-text-muted); }
  .pe-menu__rows--plain .pe-menu__row { grid-template-columns: minmax(0, 1fr); }

  /* Hub (Resources): one strong entry point, content types described not linked */
  .pe-menu__hub-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--pe-space-7); align-items: start; }
  .pe-menu__hub { display: grid; grid-template-columns: 10.5rem minmax(0, 1fr); align-items: center; gap: var(--pe-space-6); padding: var(--pe-space-5) var(--pe-space-6) var(--pe-space-5) var(--pe-space-5); border: 1px solid var(--pe-line); border-radius: var(--pe-radius-lg); background: linear-gradient(115deg, var(--pe-cloud) 0%, var(--pe-white) 70%); color: inherit; text-decoration: none; transition: border-color var(--pe-dur-base) var(--pe-ease-out), box-shadow var(--pe-dur-base) var(--pe-ease-out); }
  .pe-menu__hub:hover { border-color: var(--pe-teal-500); box-shadow: var(--pe-shadow-card); }
  .pe-menu__hub-text { min-width: 0; }
  .pe-menu__hub-name { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 21px; line-height: 1.2; color: var(--pe-ink); }
  .pe-menu__hub-desc { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--pe-text-body); }
  .pe-menu__hub-types { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
  .pe-menu__hub-type { display: inline-flex; align-items: center; height: 24px; padding: 0 9px; border-radius: var(--pe-radius-sm); background: rgba(58,124,138,0.09); font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--pe-teal-600); }
  .pe-menu__hub-action { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--pe-teal-600); }
  .pe-menu__hub-action .pe-link__icon { width: 16px; height: 16px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-menu__hub:hover .pe-menu__hub-action .pe-link__icon { transform: translateX(4px); }
  .pe-menu__rows--aside { padding-top: 4px; }

  .pe-menu__hub-visual { position: relative; display: block; height: 9.5rem; }
  .pe-hubviz__sheet { position: absolute; left: 50%; top: 50%; width: 7rem; height: 8.5rem; margin: -4.25rem 0 0 -3.5rem; border: 1px solid var(--pe-line); border-radius: 10px; background: var(--pe-white); box-shadow: 0 8px 20px -8px rgba(7,45,51,0.2); transition: transform var(--pe-dur-slow) var(--pe-ease-out); }
  .pe-hubviz__sheet--3 { transform: translate(16px, -10px) rotate(9deg); background: var(--pe-mist); border-color: transparent; }
  .pe-hubviz__sheet--2 { transform: translate(8px, -4px) rotate(4deg); background: #F5F9F9; }
  .pe-hubviz__sheet--1 { display: grid; align-content: start; gap: 8px; padding: 14px 12px; }
  .pe-hubviz__tag { display: block; width: 46%; height: 8px; border-radius: 4px; background: var(--pe-teal-500); opacity: 0.55; }
  .pe-hubviz__line { display: block; height: 5px; border-radius: 3px; background: var(--pe-silver); }
  .pe-hubviz__line--short { width: 62%; }
  .pe-menu__hub:hover .pe-hubviz__sheet--3 { transform: translate(24px, -14px) rotate(13deg); }
  .pe-menu__hub:hover .pe-hubviz__sheet--2 { transform: translate(12px, -6px) rotate(6deg); }
  .pe-menu__hub:hover .pe-hubviz__sheet--1 { transform: translate(-4px, 2px) rotate(-2deg); }

  /* Links (Company): simple rows + a light contact block */
  .pe-menu__links-layout { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: var(--pe-space-7); align-items: start; }
  .pe-menu__contact { --pe-link: var(--pe-teal-600); --pe-link-hover: var(--pe-teal-900); padding: var(--pe-space-5); border-radius: var(--pe-radius-lg); background: var(--pe-cloud); }
  .pe-menu__contact-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-teal-600); }
  .pe-menu__contact-lines { margin: 10px 0 12px; font-size: 14px; line-height: 1.75; color: var(--pe-text-body); }
  .pe-menu__contact-lines a { color: var(--pe-teal-600); font-weight: 700; text-decoration: none; }
  .pe-menu__contact-lines a:hover { color: var(--pe-teal-900); text-decoration: underline; text-underline-offset: 0.18em; }

  /* Short laptop screens: keep the Solutions panel within one viewport */
  @media (min-width: 1200px) and (max-height: 820px) {
    .pe-menu { gap: var(--pe-space-4); padding-block: var(--pe-space-4) var(--pe-space-5); }
    .pe-menu__head { padding-bottom: var(--pe-space-3); }
    .pe-menu__featured { padding-bottom: var(--pe-space-4); }
    .pe-menu__family { padding-top: var(--pe-space-4); }
    .pe-menu__product-desc { display: none; }
    .pe-menu__area { min-height: 30px; padding-block: 3px; }
  }
}

/* ═══════ 4. MOBILE DRAWER ═════════════════════════════════════════════
   Intentional small-screen structure: pillar accordions → products with
   their solution areas behind a second disclosure; services and resources
   as icon rows; company as plain links. 44px minimum targets throughout. */
@layer pe.components {
  /* Tablet and landscape phones: a comfortable reading column, toggles close to their labels */
  .pe-drawer--r2 .pe-drawer__inner > * { max-width: 44rem; }
  .pe-drawer--r2 .pe-drawer__panel { padding-bottom: var(--pe-space-5); }
  .pe-drawer--r2 .pe-drawer__all .pe-link__icon { width: 16px; height: 16px; }
  .pe-drawer__rows { display: grid; }
  @media (min-width: 640px) { .pe-drawer__rows--grid { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--pe-space-6); align-items: start; } }
  .pe-drawer__row-item { border-top: 1px solid var(--pe-line); }
  .pe-drawer__row { display: flex; align-items: center; gap: var(--pe-space-2); }
  .pe-drawer__row-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 0; font-family: var(--pe-font-display); font-weight: 600; font-size: 16px; line-height: 1.3; color: var(--pe-ink); text-decoration: none; }
  .pe-drawer__row-link .pe-menu__icon { width: 36px; height: 36px; padding: 8px; border-radius: 8px; }
  .pe-drawer__row-link:hover { color: var(--pe-teal-900); }
  .pe-drawer__sub-toggle { display: inline-grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: var(--pe-radius-md); color: var(--pe-teal-600); transition: background var(--pe-dur-fast); }
  .pe-drawer__sub-toggle:hover, .pe-drawer__sub-toggle[aria-expanded="true"] { background: var(--pe-cloud); }
  .pe-drawer__sub-icon { width: 20px; height: 20px; transition: transform var(--pe-dur-base) var(--pe-ease-out); }
  .pe-drawer__sub-toggle[aria-expanded="true"] .pe-drawer__sub-icon { transform: rotate(45deg); }
  .pe-drawer__sub { display: grid; padding: 0 0 var(--pe-space-3) 48px; }
  .pe-drawer__sub[hidden] { display: none; }
  .pe-drawer__sub-link { display: flex; align-items: center; min-height: 44px; font-size: 15px; color: var(--pe-text-body); text-decoration: none; }
  .pe-drawer__sub-link:hover { color: var(--pe-teal-900); }
  .pe-drawer__group-label { margin: var(--pe-space-5) 0 var(--pe-space-1); 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-drawer__group-label--link a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; color: inherit; text-decoration: none; }
  .pe-drawer__group-label--link .pe-link__icon { width: 14px; height: 14px; }
  .pe-drawer__rows--plain li { border-top: 1px solid var(--pe-line); }
  .pe-drawer__hub { display: flex; align-items: center; gap: 14px; margin: var(--pe-space-3) 0; padding: 14px; border-radius: var(--pe-radius-lg); background: var(--pe-cloud); color: inherit; text-decoration: none; }
  .pe-drawer__hub .pe-menu__icon { background: var(--pe-white); }
  .pe-drawer__hub-name { display: block; font-family: var(--pe-font-display); font-weight: 600; font-size: 17px; line-height: 1.3; color: var(--pe-ink); }
  .pe-drawer__hub-types { display: block; margin-top: 2px; font-size: 13px; line-height: 1.45; color: var(--pe-text-muted); }
}

/* ═══════ 5. FOOTER ════════════════════════════════════════════════════
   Columns are server-rendered (crawlable without JS). The logo uses its own
   class: the approved footer inherits the Partners tile rule through the
   shared .pe-logo class and renders boxed (pe.css lines 1561 and 1583). */
@layer pe.components {
  .pe-footer--r2::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(142,202,215,0.35) 30%, rgba(142,202,215,0.35) 70%, transparent); }
  .pe-footer__logo { display: inline-flex; align-items: center; }
  .pe-footer__logo img { width: auto; height: 38px; }
  @media (min-width: 1024px) { .pe-footer--r2 .pe-footer__top { grid-template-columns: minmax(0, 1.15fr) minmax(0, 2.85fr); } }
  .pe-footer--r2 .pe-footer__links { gap: 12px; }
  .pe-footer--r2 .pe-footer__links a { line-height: 1.4; }
}

/* ═══════ 6. HERO STRUCTURE + ARTWORK SLOT ═══════════════════════════════
   Two layers: copy (text-safe zone, left) and artwork (data-pe-region=
   "hero-art"). Artwork replaces the slot contents only.
     data-pe-hero-art="banner"      wide artwork that carries its own empty zone on the left (current image)
                                    ≥1024: behind the hero, bottom-right, sized so it never reaches the copy
                                    <1024: full-bleed crop under the copy, on the hero's bottom edge
     data-pe-hero-art="side"        ≥1024: right 48vw, full hero height, soft left fade
                                    <1024: framed panel under the copy (16:9, 4:3 below 768)
     data-pe-hero-art="background"  full-bleed behind the copy with a contrast scrim
   Hooks (inline custom properties on the region): --pe-hero-art-w (side width);
   --pe-hero-art-ratio and --pe-hero-art-safe (banner; printed by tools/optimise_hero.py). */
@layer pe.templates {
  .pe-r2-hero { position: relative; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "content" "art"; background: var(--pe-surface-dark); background-image: var(--pe-gradient-dark); color: var(--pe-text-inverse-muted); }
  .pe-r2-hero__content { grid-area: content; position: relative; z-index: 2; padding-top: calc(var(--pe-header-h) + clamp(2.5rem, 1.25rem + 4vw, 5rem)); padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 3.5rem); }
  .pe-r2-hero__copy { max-width: 40rem; }
  .pe-r2-hero__title { margin-top: var(--pe-space-5); font-size: clamp(2.75rem, 1.25rem + 3.75vw, 5rem); line-height: 1.02; letter-spacing: -0.022em; color: var(--pe-white); text-wrap: balance; }
  .pe-r2-hero__title .pe-accent { color: var(--pe-orange); }
  .pe-r2-hero .pe-hero__lede { margin-top: var(--pe-space-5); max-width: 34rem; font-size: clamp(1.125rem, 1.05rem + 0.3vw, 1.3rem); text-wrap: pretty; }
  .pe-r2-hero .pe-hero__actions { margin-top: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
  .pe-r2-hero__proof { margin-top: clamp(2.5rem, 1.5rem + 3vw, 4rem); padding-top: var(--pe-space-5); max-width: 36rem; border-top: 1px solid var(--pe-line-inverse-soft); }
  .pe-r2-hero__proof .pe-stat__value { font-size: 1.75rem; }
  .pe-r2-hero__proof .pe-stat__label { max-width: 11rem; }
  /* Small phones: three compact rows (value beside label) instead of a 2 + 1 wrap */
  @media (max-width: 479.98px) {
    .pe-r2-hero__proof { display: grid; gap: var(--pe-space-3); }
    .pe-r2-hero__proof .pe-stat { display: flex; align-items: baseline; gap: var(--pe-space-4); padding-left: 0; border-left: 0; }
    .pe-r2-hero__proof .pe-stat__value { flex: none; min-width: 5.75rem; font-size: 1.5rem; }
    .pe-r2-hero__proof .pe-stat__label { max-width: none; margin-top: 0; }
  }
  /* 1024–1279: the copy column is narrow; keep the three proof points on one row */
  @media (min-width: 1024px) and (max-width: 1279.98px) {
    .pe-r2-hero__proof { gap: var(--pe-space-4) var(--pe-space-5); margin-top: var(--pe-space-7); }
    .pe-r2-hero__proof .pe-stat { flex-basis: 7.25rem; padding-left: var(--pe-space-4); }
    .pe-r2-hero__proof .pe-stat__value { font-size: 1.5rem; }
    .pe-r2-hero__proof .pe-stat__label { font-size: 13px; }
  }

  .pe-r2-hero__art { grid-area: art; position: relative; z-index: 1; justify-self: center; width: min(100% - var(--pe-gutter) * 2, var(--pe-container-wide)); margin-bottom: clamp(3rem, 2rem + 3vw, 4.5rem); aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--pe-radius-xl); background: rgba(255,255,255,0.02); box-shadow: inset 0 0 0 1px var(--pe-line-inverse-soft); }
  @media (min-width: 768px) { .pe-r2-hero__art { aspect-ratio: 16 / 9; } }
  @media (min-width: 1024px) {
    .pe-r2-hero { grid-template-areas: "stack"; align-items: center; min-height: 100vh; min-height: 100svh; }
    .pe-r2-hero__content { grid-area: stack; padding-bottom: clamp(4rem, 2rem + 4vw, 6.5rem); }
    .pe-r2-hero__copy { max-width: min(38rem, 55vw - var(--pe-gutter) * 2); }
    .pe-r2-hero__art { grid-area: stack; align-self: stretch; justify-self: end; width: var(--pe-hero-art-w, 48vw); margin: 0; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 24%); mask-image: linear-gradient(90deg, transparent 0, #000 24%); }
  }

  /* Laptop screens are short before they are narrow: 1366x768 and 1280x800 are the two commonest, and
     the approved vertical rhythm needs about 840px of hero at those widths. The hero then runs past the
     fold and takes the artwork's foreground with it, so the group reads as cut off. This compresses the
     hero's own spacing on short viewports only — the type scale, the copy, the artwork sizing and every
     viewport 881px tall or more are untouched. svh keeps it continuous inside the query rather than
     stepping at a fixed height. */
  @media (min-width: 1024px) and (max-height: 880px) {
    .pe-r2-hero__content {
      padding-top: calc(var(--pe-header-h) + clamp(1.25rem, 3.5svh, 2.75rem));
      padding-bottom: clamp(1.25rem, 4svh, 3.25rem);
    }
    .pe-r2-hero__proof { margin-top: clamp(1.25rem, 3svh, 2.5rem); padding-top: var(--pe-space-4); }
  }

  /* Background placement: artwork behind the copy, scrim keeps text ≥ 4.5:1 */
  .pe-r2-hero[data-pe-hero-art="background"] { grid-template-areas: "stack"; }
  .pe-r2-hero[data-pe-hero-art="background"] .pe-r2-hero__content { grid-area: stack; }
  .pe-r2-hero[data-pe-hero-art="background"] .pe-r2-hero__art { grid-area: stack; align-self: stretch; justify-self: stretch; width: auto; margin: 0; aspect-ratio: auto; border-radius: 0; background: none; box-shadow: none; -webkit-mask-image: none; mask-image: none; }
  .pe-r2-hero[data-pe-hero-art="background"]::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(7,45,51,0.9) 0%, rgba(7,45,51,0.78) 55%, rgba(7,45,51,0.55) 100%); }
  @media (min-width: 1024px) { .pe-r2-hero[data-pe-hero-art="background"]::after { background: linear-gradient(90deg, rgba(7,45,51,0.94) 0%, rgba(7,45,51,0.84) 36%, rgba(7,45,51,0.25) 68%, rgba(7,45,51,0) 100%); } }

  /* Banner placement. The hero ground is sampled from the artwork's empty zone (#00333D at the top of its
     left edge to #00262E at the bottom) so the image's left side disappears into it. */
  .pe-r2-hero[data-pe-hero-art="banner"] { background-color: #002E37; background-image: linear-gradient(180deg, #00353F 0%, #002D36 60%, #00272F 100%); }
  .pe-r2-hero[data-pe-hero-art="banner"] .pe-hero__glow { display: none; }
  /* Crop box below 1024. The widest crop that is safe is the artwork's own ratio times the part of it
     that carries content (1 - safe): crop any narrower and the frame starts eating the subject rather
     than the empty zone. The box is that limit with 15% of headroom, so it derives from the two hooks
     the image itself publishes and stays correct when the artwork is replaced. A 4/3 box, which is what
     this was, is narrower than the limit for the current image and clipped into the group on phones. */
  .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__art {
    justify-self: stretch; width: auto; margin: 0; border-radius: 0; background: none; box-shadow: none;
    --pe-hero-art-safe-ratio: calc(var(--pe-hero-art-ratio, 2.2488) * (1 - var(--pe-hero-art-safe, 0.398)) * 1.15);
    aspect-ratio: var(--pe-hero-art-safe-ratio);
  }
  .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__art picture { display: contents; }
  /* Below 1024: the artwork's content side (right, bottom) fills a full-bleed crop; its top edge fades into the ground */
  .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 100% 100%; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 12%); mask-image: linear-gradient(to bottom, transparent 0, #000 12%); }
  @media (min-width: 1024px) {
    .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__art {
      grid-area: stack; align-self: stretch; aspect-ratio: auto; -webkit-mask-image: none; mask-image: none;
      container-type: size;
      /* Where the copy column ends (mirrors .pe-container--wide and .pe-r2-hero__copy) and the clearance kept from it */
      --pe-hero-copy-end: calc(max((100cqw - var(--pe-container-wide) - var(--pe-gutter) * 2) / 2, 0px) + var(--pe-gutter) + min(38rem, 55vw - var(--pe-gutter) * 2));
      --pe-hero-art-gap: 2.5rem;
      /* Largest size that (1) fits the hero width, (2) fits the hero height and (3) keeps the artwork's content,
         which starts at --pe-hero-art-safe of its width, clear of the copy */
      --pe-hero-art-width: min(100cqw, 100cqh * var(--pe-hero-art-ratio), (100cqw - var(--pe-hero-copy-end) - var(--pe-hero-art-gap)) / (1 - var(--pe-hero-art-safe)));
      --pe-hero-art-height: calc(var(--pe-hero-art-width) / var(--pe-hero-art-ratio));
    }
    /* Edge spill, painted behind the image: the artwork's own top-edge colours (--pe-hero-art-edge) continue
       upward and fade into the ground, so its lit top edge never reads as a horizon line */
    .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__art::before {
      content: ""; position: absolute; right: 0; pointer-events: none;
      width: var(--pe-hero-art-width);
      bottom: calc(var(--pe-hero-art-height) * 0.92);
      height: calc(var(--pe-hero-art-height) * 0.55);
      background-image: var(--pe-hero-art-edge, none);
      -webkit-mask-image: linear-gradient(to top, #000 0%, #000 15%, transparent 100%), linear-gradient(to right, transparent 0, #000 calc(var(--pe-hero-art-safe) * 70%));
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to top, #000 0%, #000 15%, transparent 100%), linear-gradient(to right, transparent 0, #000 calc(var(--pe-hero-art-safe) * 70%));
      mask-composite: intersect;
    }
    /* Anchored bottom-right at --pe-hero-art-width; the empty zone fades out towards the left and the top
       edge softens over the spill */
    .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__img {
      position: absolute; right: 0; bottom: 0; height: auto; object-fit: fill;
      width: var(--pe-hero-art-width);
      -webkit-mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--pe-hero-art-safe) * 70%)), linear-gradient(to bottom, transparent 0, #000 8%);
      -webkit-mask-composite: source-in;
      mask-image: linear-gradient(to right, transparent 0, #000 calc(var(--pe-hero-art-safe) * 70%)), linear-gradient(to bottom, transparent 0, #000 8%);
      mask-composite: intersect;
    }
  }
}

@layer pe.templates {
  /* ═══ INSIDE-PAGE HERO FIELD (approved 29 September 2026) ══════════════════════════════════════
     Chosen from two options on 29 September 2026 and rolled across the inside
     pages. A swept flow field rather than a framed panel: the hero ground itself
     carries the visual, so there is no box to place, no ratio to defend and
     no asset to licence. A fan of hairline strands converges toward the right
     edge and fades out long before the copy column; one strand is the brand
     accent and carries a node. Everything is one inline SVG, coloured by CSS,
     so it recolours for a light or a dark hero without a second drawing.

     Applying it is one class on the hero plus one element:
         <section class="pe-hero … pe-hero--field">
           <div class="pe-hero__field" aria-hidden="true"> … svg … </div>

     Knobs on the hero:
       --pe-hero-field-clear  how far from the left the field stays fully hidden
       --pe-hero-field-ink    strand colour
       --pe-hero-field-glow   the light band behind the densest part of the fan */
  .pe-hero--field {
    --pe-hero-field-clear: 30%;
    --pe-hero-field-ink: rgba(142, 202, 215, 0.85);
    --pe-hero-field-glow: rgba(73, 165, 184, 0.30);
    background: var(--pe-gradient-dark);
  }
  .pe-hero--field .pe-hero__content { position: relative; z-index: 1; }

  .pe-hero__field { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
  /* The luminous band the strands converge into */
  .pe-hero__field::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(56% 72% at 84% 74%, var(--pe-hero-field-glow) 0%, transparent 72%),
      radial-gradient(30% 40% at 94% 8%, var(--pe-hero-field-glow) 0%, transparent 74%);
  }
  .pe-hero__field-art {
    position: absolute; inset: 0; width: 100%; height: 100%; display: block;
    /* Two masks, intersected. The first keeps the field off the copy: invisible across the
       left third, fading in over the next quarter, whatever the viewport does. The second
       dissolves the open end of the fan toward the bottom left, so the ribbon fades out
       instead of stopping on a hard diagonal. */
    -webkit-mask-image:
      linear-gradient(90deg, transparent 0, transparent var(--pe-hero-field-clear), #000 calc(var(--pe-hero-field-clear) + 26%)),
      radial-gradient(115% 130% at 96% 6%, #000 38%, rgba(0, 0, 0, 0.35) 68%, transparent 92%);
    -webkit-mask-composite: source-in;
    mask-image:
      linear-gradient(90deg, transparent 0, transparent var(--pe-hero-field-clear), #000 calc(var(--pe-hero-field-clear) + 26%)),
      radial-gradient(115% 130% at 96% 6%, #000 38%, rgba(0, 0, 0, 0.35) 68%, transparent 92%);
    mask-composite: intersect;
  }
  .pe-hero__field-line {
    fill: none; stroke: var(--pe-hero-field-ink); stroke-width: 0.7;
    opacity: var(--o, 0.4); vector-effect: non-scaling-stroke;
  }
  .pe-hero__field-fan--upper .pe-hero__field-line { stroke-width: 0.6; opacity: calc(var(--o, 0.4) * 0.72); }
  .pe-hero__field-accent {
    fill: none; stroke: var(--pe-orange); stroke-width: 1.5; opacity: 0.9;
    vector-effect: non-scaling-stroke; stroke-linecap: round;
  }
  .pe-hero__field-node { fill: rgba(255, 255, 255, 0.82); }

  /* Travelling accent dots (client feedback round 1). Each rides the path data of the
     strand it belongs to via offset-path, so a dot can never drift off its line. The
     duration and a negative delay come from the generator and are deliberately uneven:
     equal spacing reads as a machine rather than a system. Compositor-friendly — only
     offset-distance and opacity animate, and the whole group is inside a mask that
     already keeps it away from the copy. */
  .pe-hero__field-dot {
    fill: var(--pe-orange);
    offset-rotate: 0deg;
    offset-distance: 0%;
    opacity: 0;
    filter: drop-shadow(0 0 5px rgba(255, 81, 10, 0.55));
    will-change: offset-distance;
  }
  .pe-hero__field-node--accent { fill: var(--pe-orange); }

  /* Light heroes — the same drawing on the page ground. Twenty-one of the
     twenty-nine inside heroes are light, so this is the common case. */
  .pe-hero--field.pe-hero--light {
    /* Light ground needs more ink than dark: the strands are darker than their background
       rather than lighter, and the eye forgives far less contrast in that direction. */
    --pe-hero-field-ink: rgba(20, 62, 70, 0.9);
    --pe-hero-field-glow: rgba(58, 124, 138, 0.2);
    background: linear-gradient(120deg, var(--pe-white) 0%, var(--pe-cloud) 52%, var(--pe-mist) 100%);
  }
  .pe-hero--field.pe-hero--light .pe-hero__field-line { stroke-width: 0.8; }
  .pe-hero--field.pe-hero--light .pe-hero__field-node { fill: rgba(7, 45, 51, 0.55); }
  .pe-hero--field.pe-hero--light .pe-hero__field-accent { opacity: 0.8; }

  /* The corner gear and the field would compete for the same corner; the field
     carries the motif, so the gear steps back rather than being removed. */
  .pe-hero--field .pe-hero__corner { opacity: 0.1; }

  /* The dots run only when motion is on. Under reduced motion they are not slowed —
     they are removed, because a dot crossing the hero is exactly the kind of drifting
     movement the setting exists to stop. The artwork itself is unchanged either way. */
  .pe-motion-full .pe-hero__field-dot {
    animation: pe-hero-dot-travel var(--d, 16s) linear var(--t, 0s) infinite;
  }
  @keyframes pe-hero-dot-travel {
    0%   { offset-distance: 0%;   opacity: 0; }
    10%  { opacity: 0.9; }
    88%  { opacity: 0.9; }
    100% { offset-distance: 100%; opacity: 0; }
  }
  .pe-motion-reduced .pe-hero__field-dots,
  .pe-motion-off .pe-hero__field-dots { display: none; }
  @media (prefers-reduced-motion: reduce) {
    .pe-hero__field-dots { display: none; }
  }

  /* Below 1024 the fan would sit behind the copy, so it pulls right and lightens:
     the hero keeps its ground and its atmosphere, the text keeps its contrast. */
  @media (max-width: 1023.98px) {
    .pe-hero--field { --pe-hero-field-clear: 52%; }
    .pe-hero__field-art { opacity: 0.66; }
  }
}

/* ═══════ 7. GEARS ════════════════════════════════════════════════════════
   Approved gear motif, styled by the unchanged pe.css: drive-joint gears at
   the section connectors (.pe-drive-joint .pe-gear), the flagship card's
   corner gear with its hover / button-focus turn (.pe-card__corner) and the
   CTA band pair. R2 serves them as the existing WebP files inside <picture>
   (PNG fallback); pe-r2.js turns the connector and CTA gears on scroll. */
@layer pe.templates {
  .pe-gear picture { display: block; }
}

/* ═══════ 8. INTERFACE ILLUSTRATION (stylised, conceptual) ═══════════════
   Skeleton text, no data, no figures, no names. Container queries simplify
   it in narrow cards so it never becomes clutter. */
@layer pe.templates {
  .pe-r2-flagship .pe-flagship__media { aspect-ratio: 16 / 10; }
  @media (min-width: 1024px) { .pe-r2-flagship .pe-flagship__media { aspect-ratio: 2 / 1; } }
  .pe-ui { container-type: inline-size; background: linear-gradient(180deg, #F4F8F8, var(--pe-white)); }
  .pe-ui__window { position: absolute; inset: 14px 14px 0; display: grid; grid-template-columns: 30px minmax(0, 1fr); overflow: hidden; border: 1px solid var(--pe-line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--pe-white); box-shadow: 0 12px 30px -14px rgba(7,45,51,0.22); }
  .pe-ui__rail { display: grid; align-content: start; justify-items: center; gap: 10px; padding: 12px 0; background: var(--pe-teal-900); }
  .pe-ui__rail i { width: 12px; height: 12px; border-radius: 4px; background: rgba(255,255,255,0.18); }
  .pe-ui__rail i.is-active { background: var(--pe-teal-300); }
  .pe-ui__main { display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 10px; min-width: 0; padding: 10px; }
  .pe-ui__top { display: flex; align-items: center; gap: 6px; }
  .pe-ui__title { width: 34%; height: 9px; margin-right: auto; border-radius: 5px; background: var(--pe-ink); opacity: 0.78; }
  .pe-ui__chip { width: 34px; height: 14px; border: 1px solid var(--pe-line); border-radius: 7px; }
  .pe-ui__chip--solid { border-color: transparent; background: var(--pe-teal-600); }
  .pe-ui__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .pe-ui__kpi { display: grid; align-content: space-between; gap: 6px; min-height: 50px; padding: 7px 9px; border: 1px solid var(--pe-line); border-radius: 8px; background: #FBFCFC; }
  .pe-ui__kpi:nth-child(3) { display: none; }
  .pe-ui__label { font-size: 8px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--pe-text-muted); }
  .pe-ui__ring { justify-self: start; width: 26px; height: 26px; border-radius: 50%; background: conic-gradient(var(--pe-teal-500) calc(var(--pe-ui-v) * 360deg), var(--pe-silver) 0); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4.5px)); }
  .pe-ui__spark { width: 100%; height: 22px; overflow: visible; }
  .pe-ui__spark polyline { fill: none; stroke: var(--pe-teal-500); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
  .pe-ui__heat { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 3px; }
  .pe-ui__heat i { aspect-ratio: 1; border-radius: 2px; background: rgba(58,124,138, var(--o)); }
  .pe-ui__timeline { position: relative; display: grid; align-content: start; gap: 7px; min-height: 0; overflow: hidden; padding: 10px 10px 0; border: 1px solid var(--pe-line); border-bottom: 0; border-radius: 8px 8px 0 0; }
  .pe-ui__row { display: grid; grid-template-columns: 16% minmax(0, 1fr); align-items: center; gap: 8px; }
  .pe-ui__row:nth-child(n+4) { display: none; }
  .pe-ui__row-label { height: 6px; border-radius: 3px; background: var(--pe-silver); }
  .pe-ui__track { position: relative; height: 11px; border-radius: 6px; background: repeating-linear-gradient(90deg, transparent 0 calc(20% - 1px), var(--pe-line) calc(20% - 1px) 20%); }
  .pe-ui__bar { position: absolute; top: 0; bottom: 0; left: calc(var(--x) * 100%); width: calc(var(--w) * 100%); border-radius: 6px; background: var(--pe-teal-600); transform-origin: left center; }
  .pe-ui__bar--alt { background: var(--pe-teal-300); }
  .pe-ui__bar--muted { background: var(--pe-mist); box-shadow: inset 0 0 0 1px rgba(58,124,138,0.35); }
  .pe-ui__today { position: absolute; top: 4px; bottom: 0; left: 64%; width: 0; border-left: 1.5px dashed rgba(7,45,51,0.45); }
  .pe-ui__caption { position: absolute; right: 12px; bottom: 10px; z-index: 2; padding: 3px 10px; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-pill); background: rgba(255,255,255,0.94); font-size: 11px; font-weight: 700; letter-spacing: 0.03em; color: var(--pe-teal-600); }
  @container (min-width: 420px) {
    .pe-ui__kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .pe-ui__kpi:nth-child(3) { display: grid; }
    .pe-ui__row:nth-child(n+4) { display: grid; }
    .pe-ui__label { font-size: 9px; letter-spacing: 0.12em; }
  }
  @container (min-width: 560px) {
    .pe-ui__window { inset: 22px 22px 0; grid-template-columns: 44px minmax(0, 1fr); }
    .pe-ui__rail { gap: 12px; padding: 16px 0; }
    .pe-ui__rail i { width: 14px; height: 14px; }
    .pe-ui__main { gap: 14px; padding: 16px 18px; }
    .pe-ui__kpi { min-height: 62px; padding: 9px 11px; }
    .pe-ui__ring { width: 32px; height: 32px; }
    .pe-ui__spark { height: 28px; }
    .pe-ui__track { height: 13px; }
  }
}

/* ═══════ 9. HOME SECTIONS ═════════════════════════════════════════════ */
@layer pe.templates {
  /* Product family: brand icons instead of index numbers; Agentic AI PMO emphasis mirrors the menu */
  .pe-r2-family__icon { grid-row: 1 / span 2; align-self: start; display: grid; place-items: center; width: 36px; height: 36px; margin-top: 2px; padding: 8px; border-radius: 8px; background: var(--pe-cloud); color: var(--pe-teal-600); transition: background var(--pe-dur-fast), color var(--pe-dur-fast); }
  .pe-r2-family .pe-spec__row:hover .pe-r2-family__icon { background: var(--pe-mist); color: var(--pe-teal-900); }
  .pe-r2-family .pe-r2-family__row--emphasis { margin-inline: calc(var(--pe-space-4) * -1); padding-inline: var(--pe-space-4); border-bottom-color: transparent; border-radius: var(--pe-radius-md); background: linear-gradient(90deg, var(--pe-cloud) 0%, rgba(238,243,244,0.35) 100%); box-shadow: inset 2px 0 0 var(--pe-teal-500); }
  .pe-r2-family .pe-r2-family__row--emphasis:hover { border-bottom-color: transparent; box-shadow: inset 3px 0 0 var(--pe-teal-600); }
  .pe-r2-family .pe-r2-family__row--emphasis .pe-r2-family__icon { background: var(--pe-white); }
  @media (min-width: 768px) and (max-width: 1023.98px) { .pe-r2-family .pe-r2-family__row--emphasis { margin-inline: 0; } }

  /* Services: engagement path (one line of four steps; vertical below 768) */
  .pe-r2-path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--pe-space-5); margin: 0 0 var(--pe-space-8); }
  .pe-r2-path::before { content: ""; position: absolute; left: 6px; right: 0; top: 6px; height: 1px; background: linear-gradient(90deg, var(--pe-teal-300), rgba(73,165,184,0.12)); transform-origin: left center; }
  .pe-r2-path__step { position: relative; display: grid; align-content: start; gap: 4px; padding-top: 28px; }
  .pe-r2-path__node { position: absolute; left: 0; top: 0; width: 13px; height: 13px; border: 2px solid var(--pe-teal-300); border-radius: 50%; background: var(--pe-teal-900); box-shadow: 0 0 0 5px rgba(73,165,184,0.12); }
  .pe-r2-path__label { font-family: var(--pe-font-display); font-weight: 600; font-size: 1.3rem; line-height: 1.2; color: var(--pe-white); }
  .pe-r2-path__text { max-width: 16rem; font-size: 14px; line-height: 1.45; color: var(--pe-text-inverse-muted); }
  @media (max-width: 767.98px) {
    .pe-r2-path { grid-template-columns: minmax(0, 1fr); gap: var(--pe-space-5); margin-bottom: var(--pe-space-7); }
    .pe-r2-path::before { top: 8px; bottom: 8px; left: 6px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, var(--pe-teal-300), rgba(73,165,184,0.12)); transform-origin: center top; }
    .pe-r2-path__step { padding: 0 0 0 32px; }
    .pe-r2-path__node { top: 4px; }
  }

  /* Service lanes on dark: icon tiles with visible edges (replaces white icons on teal-700 tiles) */
  .pe-r2-tile { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.06); color: var(--pe-teal-200); transition: background var(--pe-dur-fast), border-color var(--pe-dur-fast); }
  .pe-r2-tile > .pe-ico { width: 24px; height: 24px; }
  .pe-spec--inverse .pe-spec__row:hover .pe-r2-tile { border-color: rgba(142,202,215,0.42); background: rgba(142,202,215,0.14); }

  .pe-r2-managed { border: 1px solid rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
  .pe-r2-caps { gap: 10px 24px; }
  .pe-r2-caps li { align-items: center; gap: 12px; }
  .pe-r2-caps li::before { display: none; }
  .pe-r2-caps__icon { display: grid; place-items: center; flex: none; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: rgba(142,202,215,0.1); color: var(--pe-teal-200); }
  /* Beside the Advisory list the card is narrow: one clean column instead of three-line wraps */
  @media (min-width: 1024px) { .pe-r2-caps { grid-template-columns: minmax(0, 1fr); } }
}

/* ═══════ 10. WHY: LAYER DIAGRAM ════════════════════════════════════════ */
@layer pe.templates {
  .pe-r2-layers { margin-top: var(--pe-space-7); max-width: 30rem; }
  .pe-r2-layers__caption { margin-bottom: var(--pe-space-4); font-size: var(--pe-text-caption); font-weight: 700; letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-muted); }
  .pe-r2-layers__stack { position: relative; }
  .pe-r2-layers__list { position: relative; z-index: 1; display: grid; gap: 14px; }
  .pe-r2-layers__layer { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px var(--pe-space-4); margin-inline: auto; padding: 14px 18px; border: 1px solid var(--pe-line); border-radius: var(--pe-radius-md); background: var(--pe-white); }
  .pe-r2-layers__layer--practice { width: 80%; }
  .pe-r2-layers__layer--product { width: 90%; border-color: rgba(58,124,138,0.28); background: var(--pe-cloud); }
  .pe-r2-layers__layer--oracle { width: 100%; border-color: var(--pe-teal-900); background: var(--pe-teal-900); }
  .pe-r2-layers__name { font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; line-height: 1.3; color: var(--pe-ink); }
  .pe-r2-layers__role { font-size: 13px; line-height: 1.4; color: var(--pe-text-muted); }
  .pe-r2-layers__layer--product .pe-r2-layers__role { color: var(--pe-teal-600); }
  .pe-r2-layers__layer--oracle .pe-r2-layers__name { color: var(--pe-white); }
  .pe-r2-layers__layer--oracle .pe-r2-layers__role { color: var(--pe-teal-200); }
  .pe-r2-layers__flow { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
  .pe-r2-layers__flow i { position: absolute; top: 6px; bottom: 6px; width: 1px; background: repeating-linear-gradient(180deg, rgba(58,124,138,0.5) 0 4px, transparent 4px 8px); }
  .pe-r2-layers__flow i:nth-child(1) { left: 26%; }
  .pe-r2-layers__flow i:nth-child(2) { left: 50%; }
  .pe-r2-layers__flow i:nth-child(3) { left: 74%; }
  .pe-r2-layers__flow b { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }
  .pe-r2-layers__flow b::after { content: ""; position: absolute; left: -3px; bottom: 0; width: 7px; height: 7px; border-radius: 50%; background: var(--pe-teal-500); box-shadow: 0 0 0 4px rgba(58,124,138,0.15); opacity: 0; }
  @media (max-width: 1023.98px) { .pe-r2-layers { max-width: 34rem; } }
}

/* ═══════ 11. CUSTOMER STORY PENDING STATE ══════════════════════════════ */
@layer pe.templates {
  .pe-r2-pending-stats .pe-stat__value { display: flex; align-items: center; min-height: 2.75rem; }
  .pe-r2-skeleton { display: block; width: 5.5rem; height: 1.6rem; border-radius: 6px; background: linear-gradient(90deg, rgba(255,255,255,0.1), rgba(255,255,255,0.18) 50%, rgba(255,255,255,0.1)); }
  .pe-r2-photo-slot { border: 1px solid var(--pe-line-inverse-soft); background: radial-gradient(120% 90% at 18% 8%, rgba(73,165,184,0.34), transparent 58%), linear-gradient(140deg, #0E3D44 0%, var(--pe-teal-900) 72%); }
  .pe-r2-photo-slot__frame { position: absolute; inset: 12%; display: grid; place-items: center; border: 1px dashed rgba(142,202,215,0.34); border-radius: var(--pe-radius-lg); }
  .pe-r2-photo-slot__glyph { position: relative; width: 58px; height: 44px; overflow: hidden; border: 2px solid rgba(142,202,215,0.55); border-radius: 8px; }
  .pe-r2-photo-slot__glyph::before { content: ""; position: absolute; top: 8px; right: 10px; width: 9px; height: 9px; border-radius: 50%; background: rgba(142,202,215,0.55); }
  .pe-r2-photo-slot__glyph::after { content: ""; position: absolute; left: 6px; bottom: -14px; width: 30px; height: 30px; transform: rotate(45deg); background: rgba(142,202,215,0.4); }
}

/* ═══════ 12. RESOURCE COVERS + CTA TILES ═══════════════════════════════ */
@layer pe.templates {
  .pe-r2-cover { position: relative; padding: var(--pe-space-5); background: linear-gradient(160deg, var(--pe-cloud) 0%, #F8FBFB 100%); }
  .pe-r2-cover__icon { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; padding: 10px; border-radius: 10px; background: var(--pe-white); color: var(--pe-teal-600); box-shadow: 0 1px 2px rgba(7,45,51,0.08); }
  .pe-r2-cover__type { position: absolute; left: var(--pe-space-5); bottom: var(--pe-space-4); z-index: 1; font-family: var(--pe-font-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.01em; color: var(--pe-teal-900); }
  .pe-r2-cover__mark { position: absolute; right: -4%; bottom: -16%; width: 50%; aspect-ratio: 1; color: rgba(58,124,138,0.13); transition: transform 2400ms var(--pe-ease-out); }
  .pe-card--interactive:hover .pe-r2-cover__mark { transform: rotate(-6deg) scale(1.04); }
  .pe-r2-cover--paper { background: linear-gradient(160deg, #0E3D44 0%, var(--pe-teal-900) 100%); }
  .pe-r2-cover--paper .pe-r2-cover__icon { background: rgba(255,255,255,0.08); color: var(--pe-teal-200); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
  .pe-r2-cover--paper .pe-r2-cover__type { color: var(--pe-white); }
  .pe-r2-cover--paper .pe-r2-cover__mark { color: rgba(142,202,215,0.12); }

  /* Two more cover treatments so events and customer stories carry the same visual weight as
     guides and white papers (client feedback round 1). Same component, different ground: the
     section now reads as four content types rather than two plus a sidebar. */
  .pe-r2-cover--event { background: linear-gradient(160deg, #10464F 0%, #0A343B 100%); }
  .pe-r2-cover--event .pe-r2-cover__icon { background: rgba(255,255,255,0.08); color: var(--pe-teal-200); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
  .pe-r2-cover--event .pe-r2-cover__type { color: var(--pe-white); }
  .pe-r2-cover--event .pe-r2-cover__mark { color: rgba(142,202,215,0.12); }
  .pe-r2-cover--story { background: linear-gradient(160deg, var(--pe-mist) 0%, #EDF4F5 100%); }
  .pe-r2-cover--story .pe-r2-cover__icon { background: var(--pe-white); color: var(--pe-orange); }
  .pe-r2-cover--story .pe-r2-cover__mark { color: rgba(255,81,10,0.10); }

  /* Four across on a wide screen, two on a tablet, one on a phone. minmax keeps the cards from
     going narrower than a title can sit in, so the grid drops a column instead of squeezing. */
  .pe-resources--grid { display: grid; gap: var(--pe-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  @media (min-width: 1280px) { .pe-resources--grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

  .pe-home--r2 .pe-cta-tile { background: var(--pe-teal-900); }
  .pe-home--r2 .pe-cta-tile:hover { background: #0B3F47; }
}

/* ═══════ 13. REVIEW-ONLY AIDS (removed at adoption) ═══════════════════ */
@layer pe.utilities {
  /* ?guides=hero shows the artwork area and the text-safe zone for the visual-design step */
  [data-pe-guides~="hero"] .pe-r2-hero__art { outline: 2px dashed rgba(255,170,110,0.95); outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }
  [data-pe-guides~="hero"] .pe-r2-hero:not([data-pe-hero-art="banner"]) .pe-r2-hero__art::before { content: "Artwork area"; position: absolute; left: 12px; top: calc(var(--pe-header-h) + 12px); z-index: 4; padding: 4px 10px; border-radius: 4px; background: rgba(255,170,110,0.95); font-size: 12px; font-weight: 700; color: var(--pe-ink); }
  [data-pe-guides~="hero"] [data-pe-hero-safe] { outline: 1px dashed rgba(142,202,215,0.95); outline-offset: 12px; }
  /* Banner: the image box itself is the artwork area */
  [data-pe-guides~="hero"] .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__art { outline: none; }
  [data-pe-guides~="hero"] .pe-r2-hero[data-pe-hero-art="banner"] .pe-r2-hero__img { outline: 2px dashed rgba(255,170,110,0.95); outline-offset: -2px; -webkit-mask-image: none; mask-image: none; }
}

/* ═══════ 14. MOTION ═══════════════════════════════════════════════════
   Everything below runs only in full motion mode (html.pe-motion-full, set
   by pe.js). prefers-reduced-motion, data-pe-motion="reduced|off" and no-JS
   all show the finished state with nothing moving. Loops also require
   .is-inview, so they stop when off-screen. Transforms and opacity only. */
@layer pe.motion {
  /* Reduced or off by choice (data-pe-motion) behaves exactly like the OS setting: every revealable
     element is fully visible immediately, independent of IntersectionObserver timing */
  .pe-js.pe-motion-reduced [data-pe-reveal], .pe-js.pe-motion-off [data-pe-reveal] { opacity: 1; transform: none; transition: none; }

  /* Interface illustration: builds once when revealed */
  .pe-motion-full .pe-ui:not(.is-revealed) .pe-ui__bar { transform: scaleX(0); }
  .pe-motion-full .pe-ui .pe-ui__bar { transition: transform 1000ms var(--pe-ease-expo); transition-delay: calc(320ms + var(--i, 0) * 110ms); }
  .pe-motion-full .pe-ui:not(.is-revealed) .pe-ui__heat i { opacity: 0; transform: scale(0.6); }
  .pe-motion-full .pe-ui .pe-ui__heat i { transition: opacity 500ms var(--pe-ease-out) 650ms, transform 500ms var(--pe-ease-out) 650ms; }
  .pe-motion-full .pe-ui:not(.is-revealed) .pe-ui__spark polyline { stroke-dashoffset: 1; }
  .pe-motion-full .pe-ui .pe-ui__spark polyline { transition: stroke-dashoffset 1400ms var(--pe-ease-out) 420ms; }
  .pe-motion-full .pe-ui:not(.is-revealed) .pe-ui__ring { opacity: 0; transform: rotate(-120deg); }
  .pe-motion-full .pe-ui .pe-ui__ring { transition: transform 1200ms var(--pe-ease-expo) 360ms, opacity 600ms var(--pe-ease-out) 360ms; }

  /* Services path: line draws, nodes arrive in sequence */
  .pe-motion-full .pe-r2-path:not(.is-revealed)::before { transform: scaleX(0); }
  .pe-motion-full .pe-r2-path::before { transition: transform 1400ms var(--pe-ease-expo) 150ms; }
  @media (max-width: 767.98px) { .pe-motion-full .pe-r2-path:not(.is-revealed)::before { transform: scaleY(0); } }
  .pe-motion-full .pe-r2-path:not(.is-revealed) .pe-r2-path__node { opacity: 0; transform: scale(0.4); }
  .pe-motion-full .pe-r2-path .pe-r2-path__node { transition: opacity 400ms var(--pe-ease-out), transform 500ms var(--pe-ease-out); }
  .pe-motion-full .pe-r2-path .pe-r2-path__step:nth-child(2) .pe-r2-path__node { transition-delay: 350ms; }
  .pe-motion-full .pe-r2-path .pe-r2-path__step:nth-child(3) .pe-r2-path__node { transition-delay: 650ms; }
  .pe-motion-full .pe-r2-path .pe-r2-path__step:nth-child(4) .pe-r2-path__node { transition-delay: 950ms; }

  /* Why layers: data rises from the system of record through the layers (loop while in view) */
  .pe-motion-full .pe-r2-layers.is-inview .pe-r2-layers__flow b { animation: pe-r2-rise 3.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .pe-motion-full .pe-r2-layers.is-inview .pe-r2-layers__flow b::after { opacity: 1; }
  .pe-motion-full .pe-r2-layers.is-inview .pe-r2-layers__flow i:nth-child(2) b { animation-delay: -1.2s; }
  .pe-motion-full .pe-r2-layers.is-inview .pe-r2-layers__flow i:nth-child(3) b { animation-delay: -2.4s; }
  @keyframes pe-r2-rise { from { transform: translateY(0); opacity: 0; } 14% { opacity: 1; } 86% { opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }

  /* Scroll-turned gears: the light driver in pe-r2.js rotates the image, never the positioned wrapper */
  .pe-motion-full .pe-gear[data-pe-gear] img { will-change: transform; }
}

/* Outside the motion layer's full-mode rules: the flagship corner gear's hover turn (pe.css) is
   interaction-triggered motion, so it stays still when motion is reduced (OS setting via pe.js,
   or data-pe-motion) or off, and under the OS setting without JavaScript. */
@layer pe.motion {
  .pe-motion-reduced .pe-flagship__main .pe-card__corner,
  .pe-motion-off .pe-flagship__main .pe-card__corner { transform: none; transition: none; }
  @media (prefers-reduced-motion: reduce) { .pe-flagship__main .pe-card__corner { transform: none; transition: none; } }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — Services landing ══════════════════════
   Two components the feedback asked for, built from existing tokens and the
   existing card so nothing new enters the design system.                   */
@layer pe.components {

  /* Four advisory pillars, 2 x 2. The card is the control: .pe-card__link::after
     covers it, so the whole surface is clickable and it is still one tab stop.
     No decorative arrow is doing the work of signalling interactivity. */
  .pe-pillar-grid { display: grid; gap: var(--pe-space-5); margin-top: var(--pe-space-6); }
  @media (min-width: 640px) { .pe-pillar-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  .pe-pillar-card { gap: var(--pe-space-4); }
  .pe-pillar-card__title { margin: 0; font-size: 1.25rem; line-height: 1.25; color: var(--pe-text-heading); }
  .pe-pillar-card__title a { color: inherit; text-decoration: none; }
  .pe-pillar-card:hover .pe-pillar-card__title { color: var(--pe-teal-900); }
  .pe-pillar-card__text { margin: 0; color: var(--pe-text-body); font-size: 15px; line-height: 1.5; }

  /* The six Managed Services capabilities, below the narrative and on one grid.
     Even columns, aligned baselines and a real target: 56px tall, well past the
     44px touch minimum. */
  .pe-ms-grid {
    display: grid; gap: var(--pe-space-3); margin-top: var(--pe-space-8);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
  }
  @media (min-width: 1024px) { .pe-ms-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pe-ms-tile {
    display: flex; align-items: center; gap: var(--pe-space-4);
    min-height: 56px; padding: var(--pe-space-4) var(--pe-space-5);
    border: 1px solid var(--pe-line-inverse-soft); border-radius: var(--pe-radius-md);
    background: rgba(255, 255, 255, 0.03); color: var(--pe-white); text-decoration: none;
    transition: border-color var(--pe-dur-fast) var(--pe-ease-out),
                background-color var(--pe-dur-fast) var(--pe-ease-out);
  }
  .pe-ms-tile:hover { border-color: var(--pe-teal-200); background: rgba(255, 255, 255, 0.07); }
  .pe-ms-tile__index { flex: none; font-family: var(--pe-font-body); font-weight: 700; font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); color: var(--pe-teal-200); }
  .pe-ms-tile__label { flex: 1 1 auto; font-family: var(--pe-font-display); font-weight: 600; font-size: 15px; line-height: 1.35; }
  .pe-ms-tile__arrow { flex: none; color: var(--pe-teal-200); opacity: 0.75; transition: transform var(--pe-dur-fast) var(--pe-ease-out); }
  .pe-ms-tile:hover .pe-ms-tile__arrow { transform: translateX(3px); }
  @media (prefers-reduced-motion: reduce) { .pe-ms-tile__arrow { transition: none; } }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — Product Overview ══════════════════════ */
@layer pe.components {
  /* Why Choose Projects Expert: six benefits. These were first written for a dark band, but the
     block sits inside the light rail layout with Overview, Solution areas and How it works, so the
     inverse surface put white text and a 6%-white card on a white page: the section rendered as six
     empty outlines. The cards take the design system's ordinary light card instead, which is what
     the surrounding blocks use. (Reported 6 Oct 2026.) */
  .pe-benefit-grid { display: grid; gap: var(--pe-space-5); margin-top: var(--pe-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  @media (min-width: 900px) { .pe-benefit-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  .pe-benefit { gap: var(--pe-space-4); }
  .pe-benefit__title { margin: 0; font-size: 1.0625rem; line-height: 1.3; color: var(--pe-text-heading); }
  .pe-benefit__text { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--pe-text-body); }

  /* The solution areas keep their place but stop competing with Why Choose above them. */
  .pe-block--secondary { opacity: 0.94; }
}

@layer pe.motion {
  /* The Overview cogwheel: one quarter turn as the section arrives, then still.
     Transform and opacity only, and nothing at all under reduced motion. */
  .pe-overview-gear { position: relative; width: clamp(3.5rem, 2rem + 4vw, 6rem); margin-bottom: var(--pe-space-5); opacity: 0.5; }
  .pe-overview-gear img { width: 100%; height: auto; }
  .pe-motion-full .pe-overview-gear { transition: transform 1600ms var(--pe-ease-expo), opacity 900ms var(--pe-ease-out); }
  .pe-motion-full .pe-overview-gear:not(.is-revealed) { transform: rotate(-90deg); opacity: 0; }
  .pe-motion-reduced .pe-overview-gear, .pe-motion-off .pe-overview-gear { transition: none; transform: none; opacity: 0.5; }
  @media (prefers-reduced-motion: reduce) { .pe-overview-gear { transition: none !important; transform: none !important; } }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — Customer stories as cards ═════════════ */
@layer pe.components {
  .pe-story-cards { display: grid; gap: var(--pe-space-5); margin-top: var(--pe-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  @media (min-width: 1024px) { .pe-story-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
  /* A filtered-out card is removed from the flow, so the grid closes up rather than leaving holes. */
  .pe-story-cards > [hidden] { display: none !important; }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — partner / customer logo strip ═════════ */
@layer pe.components {
  .pe-logostrip-section { overflow: hidden; }
  .pe-logostrip__title { font-size: var(--pe-text-caption); letter-spacing: var(--pe-tracking-caps); text-transform: uppercase; color: var(--pe-text-muted); text-align: center; }
  .pe-logostrip {
    --pe-logostrip-duration: 42s;
    position: relative; display: flex; gap: var(--pe-space-8); width: max-content;
    margin-top: var(--pe-space-6);
    /* the row fades out at both edges instead of being cut off by the section */
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
  }
  .pe-logostrip__track { display: flex; align-items: center; gap: var(--pe-space-8); margin: 0; padding: 0; list-style: none; }
  /* 40px suited a dashed placeholder. The supplied marks are tiles with their padding baked in,
     and one of them (IFC) carries three lines of small type, so the row is a little taller. */
  .pe-logostrip__item { display: flex; align-items: center; justify-content: center; height: 52px; }
  /* height-constrained with width auto, so a supplied logo keeps its own proportions */
  .pe-logostrip__item img { height: 100%; width: auto; max-width: 160px; object-fit: contain; filter: grayscale(1) opacity(0.55); }
  .pe-logostrip__slot {
    display: inline-flex; align-items: center; justify-content: center; min-width: 9rem; height: 100%;
    padding: 0 var(--pe-space-5); border: 1px dashed var(--pe-line-strong); border-radius: var(--pe-radius-sm);
    font-family: var(--pe-font-body); font-size: 13px; color: var(--pe-text-muted); white-space: nowrap;
  }
}

@layer pe.motion {
  /* Translating one track width exactly, with the duplicate behind it, makes the loop seamless.
     Transform only. It runs only while on screen, and not at all under reduced motion. */
  .pe-motion-full .pe-logostrip.is-inview .pe-logostrip__track {
    animation: pe-logostrip-scroll var(--pe-logostrip-duration) linear infinite;
  }
  @keyframes pe-logostrip-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(calc(-100% - var(--pe-space-8))); }
  }
  .pe-logostrip:hover .pe-logostrip__track { animation-play-state: paused; }
  .pe-motion-reduced .pe-logostrip__track, .pe-motion-off .pe-logostrip__track { animation: none !important; }
  @media (prefers-reduced-motion: reduce) {
    .pe-logostrip__track { animation: none !important; }
    .pe-logostrip { width: 100%; justify-content: center; flex-wrap: wrap; }
    .pe-logostrip__track:nth-child(2) { display: none; }
  }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — spacing and rail visual ═══════════════ */
@layer pe.templates {
  /* The hero already carries generous bottom padding; the section after it does not need
     a full section's worth again on top. */
  .pe-section--tight-top { padding-top: clamp(2.5rem, 1.5rem + 3vw, 4.5rem); }

  /* A quiet mark under the sticky section nav, so the rail is not an empty white column.
     Only from 1024, where the rail exists at all. */
  .pe-rail-visual { display: none; }
  @media (min-width: 1024px) {
    .pe-rail-visual { display: block; margin-top: var(--pe-space-8); opacity: 0.4; }
    .pe-rail-visual img { width: 100%; height: auto; }
  }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — events grids ═════════════════════════ */
@layer pe.components {
  .pe-events-grid { display: grid; gap: var(--pe-space-5); margin-top: var(--pe-space-6); grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
  @media (min-width: 1024px) { .pe-events-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* ═══════ CLIENT FEEDBACK ROUND 1 — related content cards ════════════════ */
@layer pe.components {
  .pe-related--cards { display: grid; gap: var(--pe-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
  @media (min-width: 1024px) { .pe-related--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
}

/* ═══════ Narrow phones (≤ 359px) ═════════════════════════════════════════
   pe.css already steps the header CTA down at 400px, but at 320 the logo, the
   CTA and the burger still total more than the row, so the page gains about
   30px of horizontal scroll. This is the next step down: it tightens the
   utility cluster only, and changes nothing at 360 and above. Pre-existing
   behaviour, found during the round 1 QA sweep. */
@layer pe.components {
  @media (max-width: 359.98px) {
    .pe-header__utility { gap: 6px; }
    .pe-header__cta { padding: 0 10px; font-size: 12px; letter-spacing: 0; }
    .pe-header__logo img { height: 24px; }
  }
}

/* A grid item defaults to min-width: auto, so its content can push it wider than its
   column. pe.css already applies the standard remedy to .pe-layout-rail, .pe-block__narrative,
   .pe-node__grid and .pe-hero__grid; .pe-flagship was missed, which gave the Solutions
   landing about 30px of horizontal scroll at 320px. Same fix, same place in the cascade. */
@layer pe.layout {
  .pe-flagship > * { min-width: 0; }
  /* Same reason one level down: the spec row's trailing arrow becomes an implicit grid
     column, and with min-width: auto its siblings refuse to shrink below their content. */
  .pe-spec__row > * { min-width: 0; }
}

/* ═══════ Self-renumbering optional sections ══════════════════════════════
   A hidden section must not leave a hole in the sequence: hide section 02 and
   the next visible one has to become 02, not stay 03. CSS counters do this for
   free, because an element with display: none does not increment a counter.

   So the number is not written into the markup at all. Each visible section
   increments the counter and prints it, and hiding one - by the hidden
   attribute here, or by an APEX region condition later - renumbers everything
   after it with no markup change and no JavaScript.

   Applied with .pe-autonum on the container. Opt-in, so pages that number
   their sections by hand are untouched.                                     */
@layer pe.components {
  .pe-autonum { counter-reset: pe-section; }
  .pe-autonum > section { counter-increment: pe-section; }
  .pe-autonum > section [class*="__index"]:empty::before,
  .pe-autonum > section .pe-index:empty::before {
    content: counter(pe-section, decimal-leading-zero);
  }
}

/* ═══════ Editorial imagery in .pe-media ═════════════════════════════════
   The slots now carry responsive <picture> blocks (AVIF/WebP/JPEG) rather
   than a single placeholder file. pe.css sizes the image with
   .pe-media img { width: 100%; height: 100% }, which needs the element the
   image sits in to have the media box's own height - and <picture>, like the
   decorative <a> that wraps the lead card's image, is a wrapper with no box.
   display: contents removes those wrappers from layout so the image is laid
   out by .pe-media directly. The <a> is already aria-hidden and tabindex="-1"
   (the headline carries the real link), so it loses nothing by having no box.

   The illustrations are drawn on #EEF3F4, which is --pe-cloud, which is what
   .pe-media--illustration paints: a 3:2 image inside a 21:10, 16:10, 21:9 or
   4:3 box is letterboxed onto an identical ground, so the fit is invisible
   and no artwork is cropped.                                                */
@layer pe.components {
  .pe-media picture,
  .pe-media > a[aria-hidden="true"] { display: contents; }
}

/* ═══════ Captions on light media panels ═════════════════════════════════
   .pe-media__caption was written for photography: white text over a dark
   bottom scrim. Several slots are not photographs - the illustration and
   product panels sit on #EEF3F4 or white - and there the scrim never gets
   dark enough, so the caption reads as a pale smudge on a pale ground.

   Same pattern, inverted: a light scrim and muted ink. The scrim keeps the
   caption legible whatever the artwork does at its bottom edge, which a bare
   colour change would not.

   It applies to the two modifiers that are light by definition, and to
   .pe-media--on-light, which a plain .pe-media opts into when the artwork
   inside it is light. That opt-in matters: a plain .pe-media paints --pe-cloud
   but the image on top of it can be anything, and Home's Life Sciences card is
   a dark panel in exactly that situation.                                 */
@layer pe.components {
  .pe-media--illustration:not(.pe-media--illustration-dark) > .pe-media__caption:not(.pe-media__caption--quiet),
  .pe-media--product:not(.pe-media--product-dark) > .pe-media__caption:not(.pe-media__caption--quiet),
  .pe-media--on-light > .pe-media__caption:not(.pe-media__caption--quiet) {
    color: var(--pe-text-muted);
    background: linear-gradient(transparent, rgba(255,255,255,0.92) 45%);
  }
}

/* The content-guard marker inside one of those light panels. pe.templates tints
   [data-pe-status="required"] teal-200 under .pe-on-dark, which is right for a dark section but
   wrong for a light media panel sitting inside one. Same layer, so it is a straight correction
   rather than a specificity fight. */
@layer pe.templates {
  .pe-media--illustration:not(.pe-media--illustration-dark) > .pe-media__caption[data-pe-status="required"]:not(.pe-media__caption--quiet),
  .pe-media--product:not(.pe-media--product-dark) > .pe-media__caption[data-pe-status="required"]:not(.pe-media__caption--quiet),
  .pe-media--on-light > .pe-media__caption[data-pe-status="required"]:not(.pe-media__caption--quiet),
  .pe-media--illustration:not(.pe-media--illustration-dark) > .pe-media__caption:not(.pe-media__caption--quiet) [data-pe-status="required"],
  .pe-media--product:not(.pe-media--product-dark) > .pe-media__caption:not(.pe-media__caption--quiet) [data-pe-status="required"],
  .pe-media--on-light > .pe-media__caption:not(.pe-media__caption--quiet) [data-pe-status="required"] {
    color: var(--pe-teal-600);
  }
}

/* ═══════ Dark inside-page heroes ════════════════════════════════════════
   Every inside hero is on the dark ground (client decision, 6 October 2026).
   Most of what sits in a hero already has an on-dark form - the eyebrow,
   lede, facts, stats and the required-content markers all respond to
   .pe-on-dark, and the breadcrumb, buttons and tags take their --inverse
   modifiers in the markup. Two components had no dark form at all, because
   until now no dark hero contained one: the filter chips on Resources,
   Events and Customer Stories, and the fields on Search, 404 and those same
   filter rows.

   Both are scoped to .pe-hero--dark rather than .pe-on-dark. A chip or a
   field in a dark band elsewhere on a page is a different design question,
   and this rule deliberately cannot reach it.                              */
@layer pe.components {
  .pe-hero--dark .pe-filter__chip {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--pe-line-inverse);
    color: var(--pe-text-inverse-muted);
  }
  .pe-hero--dark .pe-filter__chip:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: var(--pe-teal-200);
    color: var(--pe-white);
  }
  /* The selected chip inverts again, so it still reads as the one that is on */
  .pe-hero--dark .pe-filter__chip[aria-current],
  .pe-hero--dark .pe-filter__chip[aria-pressed="true"] {
    background: var(--pe-white);
    border-color: var(--pe-white);
    color: var(--pe-teal-900);
  }

  .pe-hero--dark .pe-field__label { color: var(--pe-white); }
  .pe-hero--dark .pe-field__control {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--pe-line-inverse);
    color: var(--pe-white);
  }
  .pe-hero--dark .pe-field__control::placeholder { color: rgba(255, 255, 255, 0.45); }
  .pe-hero--dark .pe-field__control:hover { border-color: var(--pe-teal-200); }
  .pe-hero--dark .pe-field__control:focus {
    border-color: var(--pe-teal-200);
    box-shadow: 0 0 0 3px rgba(142, 202, 215, 0.25);
  }
  .pe-hero--dark .pe-field__hint { color: var(--pe-text-inverse-faint); }
  /* the select chevron is drawn in teal-500 for a white control; lighten it for a dark one */
  .pe-hero--dark .pe-field--select select.pe-field__control {
    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='%238ECAD7' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  }
}

/* ═══════ Partner marks ══════════════════════════════════════════════════
   .pe-logo centres a single mark on a row. The supplied marks come as small
   square tiles with their own grounds baked in - four on white, two on black,
   one on dark teal - so each keeps its own ground and the name sits beneath
   it rather than alongside. A small radius makes a black tile read as a logo
   lockup rather than a hole in the card.                                   */
@layer pe.components {
  .pe-logo--stacked { flex-direction: column; gap: var(--pe-space-3); min-height: 136px; }
  .pe-logo__mark { max-height: 56px; width: auto; max-width: 78%; border-radius: 6px; }
}

/* ═══════ Supplied marks in the trust strip ══════════════════════════════
   .pe-logostrip__item img greys the mark out and drops it to 55% opacity,
   which suits a transparent logo on a quiet wall. Neither thing the strip
   now holds is that.

   The client marks are small tiles with their grounds baked in - four on
   white, two on black, one on dark teal - so greying them turns the dark
   ones into dull blocks. They keep their own colour and take a small radius,
   the same treatment they get on the Partners page.

   The Oracle Partner mark is drawn in white, for the dark proof strip on the
   Home page. On this silver section the existing wash made it invisible: a
   white mark at 55% opacity on a near-white ground. Inverting it, which is
   what .pe-logo__img--dark already does on the Partners page, puts it back.  */
@layer pe.components {
  .pe-logostrip__item img.pe-logostrip__mark {
    height: 100%; width: auto; max-width: 180px; object-fit: contain;
    border-radius: 4px; filter: none;
  }
  .pe-logostrip__item img.pe-logostrip__mark--invert {
    border-radius: 0; filter: invert(1) brightness(0.25);
  }
}