/* ============================================================
   Paulmar Trust Accounting — bespoke component styles
   Carries the parts of the "Heritage Corporate" design that
   theme.json can't express: gradients, pseudo-elements,
   connected grid dividers, sticky positioning, fixed-track
   grids, and muted text-on-navy colors.
   Color tokens mirror resources/.../assets/brand.css.
   ============================================================ */

:root {
  --pm-navy: #0a2845;
  --pm-blue-800: #0e4c8a;
  --pm-blue-600: #1565ad;
  --pm-blue-500: #2c7bc4;
  --pm-blue-300: #9cc4e6;
  --pm-blue-050: #eef4fb;
  --pm-ink: #16222e;
  --pm-slate: #5b6770;
  --pm-mist: #8a98a4;
  --pm-line: #dbe3ea;
  --pm-cloud: #f3f6f9;
  --pm-paper: #ffffff;
  --pm-gold: #f2b50a;
  --pm-gold-d: #d99a00;
  --pm-font-sans: "IBM Plex Sans", system-ui, -apple-system, sans-serif;
  --pm-font-serif: "IBM Plex Serif", Georgia, "Times New Roman", serif;
  --pm-font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---------- shared type helpers ---------- */
.pm-mono,
.pm-eyebrow,
.pm-kick,
.pm-crumb,
.pm-num,
.pm-badge-label,
.pm-quote-attr,
.pm-report-tag,
.pm-cap {
  font-family: var(--pm-font-mono);
}

.pm-eyebrow {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-blue-600);
  margin: 0 0 18px;
}

.pm-kick {
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
  margin: 0;
}

.pm-lead {
  font-size: 18.5px;
  color: var(--pm-slate);
  max-width: 32em;
}

/* ============================================================
   Utility bar
   ============================================================ */
.pm-utility-bar {
  background: var(--pm-navy);
  font-size: 13px;
}
.pm-utility-bar,
.pm-utility-bar a,
.pm-utility-bar p {
  color: #cbd9e7;
}
.pm-utility-bar a { text-decoration: none; }
.pm-utility-bar a:hover { color: #fff; text-decoration: none; }
.pm-utility-bar .pm-phone a,
.pm-utility-bar .pm-phone { color: #fff; font-weight: 700; }
.pm-utility-bar .wp-block-group { min-height: 38px; }
@media (max-width: 720px) {
  .pm-ub-left { display: none !important; }
}
.pm-ann { align-self: center; position: relative; display: inline-flex; }
.pm-ann__btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(90deg, var(--pm-gold), #ffce46);
  color: var(--pm-navy);
  border: none;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: var(--pm-font-sans);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  cursor: pointer;
  white-space: nowrap;
  animation: pmAnnGlow 2.4s ease-in-out infinite;
}
.pm-ann__btn:hover { filter: brightness(1.03); }
.pm-ann__btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.pm-ann__icon { font-size: 14px; line-height: 1; animation: pmAnnBump 2.4s ease-in-out infinite; }
.pm-ann__ring {
  position: absolute;
  inset: -4px;
  border: 2px solid var(--pm-gold);
  border-radius: 999px;
  pointer-events: none;
  animation: pmAnnRing 1.9s ease-out infinite;
}
@keyframes pmAnnRing { 0% { transform: scale(.92); opacity: .65; } 70% { transform: scale(1.28); opacity: 0; } 100% { opacity: 0; } }
@keyframes pmAnnGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(242, 181, 10, 0); } 50% { box-shadow: 0 0 18px 2px rgba(242, 181, 10, .6); } }
@keyframes pmAnnBump { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-2px); } }
@media (prefers-reduced-motion: reduce) { .pm-ann__btn, .pm-ann__icon, .pm-ann__ring { animation: none !important; } }
@media (max-width: 720px) { .pm-ann__btn { font-size: 12px; padding: 6px 13px; } }

/* ============================================================
   Header (sticky white bar + logo lockup + nav)
   ============================================================ */
.pm-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--pm-line);
}
.pm-header .wp-block-group.pm-header-inner { min-height: 84px; }

.pm-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; line-height: 1; }
.pm-logo img { height: 40px; width: auto; display: block; }
.pm-header .pm-logo img { height: 120px; }
/* Scale the enlarged header mark down on narrower screens so the
   logo + wordmark lockup never overflows the viewport. */
@media (max-width: 760px) {
  .pm-header .pm-logo img { height: 84px; }
}
@media (max-width: 600px) {
  .pm-header .pm-logo img { height: 60px; }
  .pm-header .pm-wordmark { font-size: 18px; }
}
@media (max-width: 480px) {
  .pm-header .pm-logo img { height: 52px; }
  .pm-header .pm-wordmark { font-size: 16px; }
}
.pm-wordmark {
  font-family: var(--pm-font-sans);
  font-weight: 700;
  font-style: italic;
  color: var(--pm-slate);
  letter-spacing: -0.01em;
  white-space: nowrap;
  font-size: 22px;
}
.pm-wordmark sup { font-size: 0.5em; font-style: normal; vertical-align: super; font-weight: 600; }

/* primary navigation */
.pm-nav .wp-block-navigation__container { gap: 0; }
.pm-nav .wp-block-navigation-item__content {
  color: var(--pm-ink);
  font-weight: 600;
  font-size: 14.5px;
  padding: 0 14px;
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color .15s, border-color .15s;
}
.pm-nav .wp-block-navigation-item__content:hover { color: var(--pm-blue-800); }
.pm-nav .current-menu-item > .wp-block-navigation-item__content,
.pm-nav .current_page_item > .wp-block-navigation-item__content {
  color: var(--pm-blue-800);
  border-bottom-color: var(--pm-gold);
}
/* "More" dropdown submenu */
.pm-nav .wp-block-navigation__submenu-container {
  background: #fff;
  border: 1px solid var(--pm-line);
  border-radius: 6px;
  box-shadow: 0 8px 24px rgba(10, 40, 69, .12);
  padding: 6px 0;
  min-width: 200px;
}
.pm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: 8px 16px;
  border-bottom: none;      /* remove top-level underline treatment inside the dropdown */
  white-space: nowrap;
}
.pm-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  color: var(--pm-blue-800);
  background: #f3f6f9;
}
/* "More" toggle button matches the other top-level items */
.pm-nav .wp-block-navigation-submenu__toggle {
  color: var(--pm-ink);
  font-weight: 600;
  font-size: 14.5px;
}
/* ============================================================
   Mobile overlay menu (navy branded panel)
   Selectors are prefixed .wp-block-navigation.pm-nav so they
   outrank core's overlay rules (which chain up to 5 classes).
   ============================================================ */
/* hamburger on the white header; email item exists only in the overlay */
.pm-nav .wp-block-navigation__responsive-container-open { color: var(--pm-navy); }
.pm-nav .pm-nav-phone { display: none; }

/* full-screen navy panel — :not(.disable-default-overlay) matches the
   specificity of core's white-background/black-text defaults */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background-color: var(--pm-navy);
  color: #fff;
  padding: 24px 28px;
}
/* stretch the wrapper chain so the tagline can pin to the panel bottom */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
  margin-top: 0;
}
/* ✕ close button */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  color: #fff;
  padding: 8px;
  top: 20px;
  right: 20px;
}

/* logo + wordmark lockup at the top of the panel (pseudo-element: the
   navigation block can't hold arbitrary HTML) */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
  content: "Paulmar Trust Accounting";
  display: block;
  flex: 0 0 auto;
  margin-right: 44px;              /* keep clear of the absolutely-positioned ✕ */
  margin-bottom: 6px;
  padding: 0 0 16px 56px;          /* left padding clears the swirl mark */
  background: url(../img/paulmar-logo.png) left 0 / auto 28px no-repeat;
  border-bottom: 1px solid rgba(255, 255, 255, .18);
  font: italic 700 17px/28px var(--pm-font-sans);
  letter-spacing: -0.01em;
  color: #fff;
}

/* menu column: left-aligned white links (desktop right-justify must not bleed in) */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  flex: 1 1 auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding-top: 10px;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: flex-start;
  gap: 2px;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  color: #fff;
  border-bottom: none;
  background: transparent;
  padding: 10px 0;
  font-size: 18px;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
  color: var(--pm-gold);
  background: transparent;
}
/* the overlay auto-focuses the first link on open — don't let core's
   :focus underline make it look selected */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus:not(:focus-visible) {
  text-decoration: none;
}

/* "More" disappears on mobile: hide its toggle, promote its children
   (core always renders submenus expanded inside the open overlay) */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
  align-items: flex-start;
  min-width: 0;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu__toggle {
  display: none;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
  position: static;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  min-width: 0;
}

/* email: divider + tappable mailto: link */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .pm-nav-phone {
  display: block;
  align-self: stretch;
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid rgba(255, 255, 255, .18);
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .pm-nav-phone .wp-block-navigation-item__content {
  font-family: var(--pm-font-mono);
  font-size: 15px;
  font-weight: 500;
  color: var(--pm-blue-300);
  padding: 4px 0;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .pm-nav-phone .wp-block-navigation-item__content::before {
  content: "✉";
  margin-right: 10px;
}
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .pm-nav-phone .wp-block-navigation-item__content:hover {
  color: var(--pm-gold);
}

/* tagline pinned to the bottom of the panel */
.wp-block-navigation.pm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content::after {
  content: "Solvency, Compliance and Flawless Accuracy for Peace of Mind";
  margin-top: auto;
  padding-top: 28px;
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--pm-blue-300);
}

/* ---------- tagline strip ---------- */
.pm-strip { background: linear-gradient(90deg, var(--pm-gold), #ffce46); }
.pm-strip .pm-strip-text {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 40px;
  margin: 0;
  color: var(--pm-navy);
  font-style: italic;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.pm-strip .pm-strip-text::before {
  content: "";
  width: 7px;
  height: 7px;
  background: var(--pm-navy);
  transform: rotate(45deg);
  flex: none;
}

/* ============================================================
   Buttons — variants
   ============================================================ */
.wp-block-button.is-style-pm-gold .wp-block-button__link {
  background-color: var(--pm-gold);
  color: var(--pm-navy);
  border: none;
}
.wp-block-button.is-style-pm-gold .wp-block-button__link:hover { background-color: var(--pm-gold-d); }

.wp-block-button.is-style-pm-outline .wp-block-button__link {
  background-color: #fff;
  color: var(--pm-blue-800);
  border: 1.5px solid var(--pm-blue-800);
}
.wp-block-button.is-style-pm-outline .wp-block-button__link:hover { background-color: var(--pm-blue-050); }

/* default (primary) button hover */
.wp-block-button:not(.is-style-pm-gold):not(.is-style-pm-outline) .wp-block-button__link:hover {
  background-color: var(--pm-navy);
}

/* ============================================================
   Legacy hero accents — kept only for the unused home-hero /
   home-hero-v2 inserter patterns. The live home hero is the
   filmstrip (see "Hero filmstrip" below), which owns .pm-hero.
   ============================================================ */
.pm-hl { background: linear-gradient(transparent 64%, rgba(242, 181, 10, 0.45) 64%); color: inherit; }

/* prominent "fiduciary accounting" callout (home hero — client directive) */
.pm-fid-callout {
  font-family: var(--pm-font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--pm-navy);
  border-left: 4px solid var(--pm-gold);
  padding-left: 14px;
  margin: 24px 0 0;
  line-height: 1.4;
}
.pm-fid-callout strong { color: var(--pm-navy); }

.pm-frame {
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  background: #fff;
  padding: 14px;
  box-shadow: 0 20px 44px rgba(10, 40, 69, 0.12);
}
.pm-cap {
  font-size: 11.5px;
  color: var(--pm-mist);
  padding: 12px 4px 4px;
  display: flex;
  justify-content: space-between;
  margin: 0;
}

/* on-brand photo placeholder */
.pm-ph {
  position: relative;
  aspect-ratio: 4 / 3.2;
  background-color: var(--pm-blue-050);
  background-image: repeating-linear-gradient(135deg, rgba(21, 101, 173, 0.10) 0 2px, transparent 2px 11px);
  border: 1px solid var(--pm-line);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.pm-ph > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.pm-ph > span {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--pm-blue-600);
  background: rgba(255, 255, 255, 0.82);
  padding: 5px 10px;
  border-radius: 999px;
  border: 1px solid var(--pm-line);
  text-align: center;
  max-width: 80%;
}

/* ============================================================
   Hero filmstrip (home hero) — an elevated navy panel holding a
   horizontal scroll-snap strip of 5 photo "chapters" that fade
   right→left into navy. Footer bar = progress + counter/label +
   pause/play + dots + prev/next. Behaviour: assets/js/pm-hero.js.
   New local tokens (navy-deep / page / scrim / gold-2); other
   colours + fonts reuse the theme's --pm-* vars.
   ============================================================ */
.pm-hero {
  --pm-navy-deep: #081f38;
  --pm-page: #e7edf4;
  --pm-gold-2: #ffd34d;
  background: var(--pm-page);
}
.pm-hero-wrap { margin-block: 0; }              /* flush to the strip above / section below */

.pm-hero__panel {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  overflow: hidden;
  background: var(--pm-navy);
  border-radius: 4px;
  box-shadow: 0 2px 6px rgba(10, 40, 69, .18), 0 40px 90px -34px rgba(10, 40, 69, .6);
}

/* filmstrip track */
.pm-hero__track {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.pm-hero__track::-webkit-scrollbar { display: none; }
.pm-hero__track:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: -2px; }
.pm-hero__slide {
  position: relative;
  flex: 0 0 100%;
  height: 440px;
  scroll-snap-align: start;
  background: var(--pm-navy);
  overflow: hidden;
}
.pm-hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-hero__scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(90deg,
    rgba(9, 26, 48, .97) 0%, rgba(9, 26, 48, .9) 32%,
    rgba(9, 26, 48, .55) 60%, rgba(9, 26, 48, .12) 86%, rgba(9, 26, 48, 0) 100%);
}
.pm-hero__content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px; padding: 0 56px;
}
.pm-hero__kicker {
  font-family: var(--pm-font-mono); font-size: 12.5px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--pm-gold); margin: 0 0 16px;
}
.pm-hero__title {
  font-family: var(--pm-font-serif); font-weight: 600;
  font-size: clamp(27px, 2.7vw, 40px); line-height: 1.14; letter-spacing: -.01em;
  color: #fff; margin: 0 0 14px;
}
.pm-hero__body { font-size: 16.5px; line-height: 1.55; color: #c3d6ea; margin: 0 0 16px; max-width: 28em; }
.pm-hero__hook {
  font-family: var(--pm-font-serif); font-style: italic; font-size: 15.5px;
  line-height: 1.5; color: #e6eef7; margin: 0 0 24px; padding-left: 16px;
  border-left: 3px solid var(--pm-gold); max-width: 30em;
}
.pm-hero__cta {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 9px;
  background: var(--pm-gold); color: var(--pm-navy); font-family: var(--pm-font-sans);
  font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: 4px; text-decoration: none;
}
.pm-hero__cta:hover { background: var(--pm-gold-d); }
.pm-hero__cap {
  position: absolute; bottom: 16px; right: 32px; z-index: 2; margin: 0;
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(255, 255, 255, .5); pointer-events: none;
}

/* footer controls */
.pm-hero__footer { position: relative; background: var(--pm-navy-deep); border-top: 1px solid rgba(255, 255, 255, .08); }
.pm-hero__progress { position: absolute; top: 0; left: 0; right: 0; height: 3px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.pm-hero__progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pm-gold), var(--pm-gold-2)); transition: width .12s ease; }
.pm-hero__footer-row { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 40px; }
.pm-hero__meta { display: flex; align-items: baseline; gap: 16px; font-family: var(--pm-font-mono); font-size: 12.5px; }
.pm-hero__count { letter-spacing: .12em; color: rgba(255, 255, 255, .55); white-space: nowrap; }
.pm-hero__label { letter-spacing: .1em; text-transform: uppercase; color: var(--pm-gold); }
.pm-hero__nav { display: flex; align-items: center; gap: 14px; }
.pm-hero__dots { display: flex; gap: 8px; }
.pm-hero__dot { width: 9px; height: 9px; border: none; border-radius: 20px; padding: 0; cursor: pointer; background: rgba(255, 255, 255, .3); transition: width .4s ease, background .4s ease; }
.pm-hero__dot[aria-current="true"] { width: 26px; background: var(--pm-gold); }
.pm-hero__dot:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
.pm-hero__arrow {
  width: 34px; height: 34px; border-radius: 4px; border: 1px solid rgba(255, 255, 255, .2);
  background: rgba(255, 255, 255, .06); color: #fff; font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.pm-hero__arrow:hover { background: rgba(255, 255, 255, .12); }
.pm-hero__arrow:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }

/* pause / play toggle — circular, wrapped by a countdown ring that fills over
   each auto-advance interval (stroke-dashoffset driven by pm-hero.js) */
.pm-hero__toggle {
  position: relative;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255, 255, 255, .06); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.pm-hero__toggle:hover { background: rgba(255, 255, 255, .12); }
.pm-hero__toggle:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
.pm-hero__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg);            /* start the fill at 12 o'clock */
  pointer-events: none;
}
.pm-hero__ring-track { fill: none; stroke: rgba(255, 255, 255, .22); stroke-width: 2.5; }
.pm-hero__ring-fill {
  fill: none; stroke: var(--pm-gold); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 100; stroke-dashoffset: 100;   /* 100 = empty, 0 = full; rAF drives it */
}
.pm-ico { position: relative; z-index: 1; }
.pm-hero__toggle .pm-ico {
  display: inline-block; width: 8px; height: 11px;
  border-left: 3px solid currentColor; border-right: 3px solid currentColor; box-sizing: border-box;
}
.pm-hero__toggle.is-paused .pm-ico {
  width: 0; height: 0; border: 0;
  border-left: 9px solid currentColor; border-top: 6px solid transparent; border-bottom: 6px solid transparent;
  margin-left: 3px;               /* optical centering of the triangle */
}

/* responsive */
@media (max-width: 900px) {
  .pm-hero__panel { width: min(1180px, 100% - 32px); }
  .pm-hero__content { max-width: 92%; padding: 0 34px; }
  .pm-hero__footer-row { padding: 14px 24px; }
}
@media (max-width: 560px) {
  .pm-hero__slide { height: 420px; }
  .pm-hero__footer-row { padding: 12px 18px; gap: 12px; }
  .pm-hero__meta { gap: 12px; font-size: 11.5px; }
  .pm-hero__nav { gap: 10px; }
  .pm-hero__cap { right: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .pm-hero__track { scroll-behavior: auto; }
  .pm-hero__progress-fill { transition: none; }
  .pm-hero__dot { transition: none; }
}

/* ============================================================
   Section head (centered eyebrow + h2 + intro)
   ============================================================ */
.pm-sec-head { text-align: center; max-width: 720px; margin-left: auto; margin-right: auto; }
.pm-sec-head h2 { color: var(--pm-navy); font-weight: 600; margin-top: 12px; }
.pm-sec-head p { font-size: 17.5px; color: var(--pm-slate); margin-top: 14px; }

/* ============================================================
   Value columns (framed, heritage)
   ============================================================ */
.pm-cols { border: 1px solid var(--pm-line); background: #fff; }
.pm-cols.wp-block-columns { gap: 0; margin: 0; }
.pm-cols .wp-block-column { padding: 36px 32px; border-right: 1px solid var(--pm-line); }
.pm-cols .wp-block-column:last-child { border-right: none; }
.pm-num { color: var(--pm-blue-300); font-size: 13px; font-weight: 500; margin: 0; }
.pm-cols h3 { font-size: 21px; color: var(--pm-navy); margin: 14px 0 10px; font-weight: 600; }
.pm-cols p:not(.pm-num) { color: var(--pm-slate); font-size: 15.5px; margin: 0; }
@media (max-width: 880px) {
  .pm-cols.wp-block-columns { flex-wrap: wrap; }
  .pm-cols .wp-block-column { flex-basis: 100% !important; border-right: none; border-bottom: 1px solid var(--pm-line); }
  .pm-cols .wp-block-column:last-child { border-bottom: none; }
}

/* ============================================================
   Compliance band (navy)
   ============================================================ */
.pm-compliance { background: var(--pm-navy); color: #d7e4f0; }
.pm-compliance .wp-block-columns { align-items: center; }
.pm-compliance h2 { color: #fff; font-weight: 600; }
.pm-compliance p { color: #a9c2da; font-size: 17px; max-width: 44em; }
.pm-badge-wrap { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.pm-badge-wrap img { width: 118px; height: auto; display: block; }
.pm-badge-label { font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: #88a4bf; margin: 0; }
.pm-compliance .pm-compliance-badge { flex-basis: 180px !important; flex-grow: 0; }
@media (max-width: 760px) {
  .pm-compliance .wp-block-columns { flex-wrap: wrap; text-align: center; }
  .pm-compliance .wp-block-column { flex-basis: 100% !important; }
  .pm-compliance .pm-compliance-badge { order: -1; }
  .pm-compliance p { margin-left: auto; margin-right: auto; }
}

/* ============================================================
   Process (numbered heritage rows)
   ============================================================ */
.pm-process { border-top: 1px solid var(--pm-line); }
.pm-prow {
  display: grid;
  grid-template-columns: 90px 1fr 1.3fr;
  gap: 28px;
  padding: 30px 0;
  border-bottom: 1px solid var(--pm-line);
  align-items: baseline;
}
.pm-pn { font-family: var(--pm-font-serif); font-size: 40px; color: var(--pm-blue-300); font-weight: 600; line-height: 1; margin: 0; }
.pm-prow h3 { font-size: 20px; color: var(--pm-navy); font-weight: 600; margin: 0; }
.pm-prow .pm-prow-desc { color: var(--pm-slate); font-size: 16px; margin: 0; }
@media (max-width: 760px) {
  .pm-prow { grid-template-columns: 60px 1fr; gap: 16px 20px; }
  .pm-prow .pm-prow-desc { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------
   Design 1d: navy-inverted "How It Works" band.
   Flips this one section to a dark field with the Paulmar oval
   logo as a faint lighter ghost (screen-blended on navy) and
   inverts the copy colors. Scoped to .pm-process-band so the
   shared .pm-kick / .pm-sec-head / .pm-prow styles are untouched.
   ------------------------------------------------------------ */
.pm-process-band { position: relative; overflow: hidden; isolation: isolate; }
.pm-process-band::before {              /* oval-logo ghost, centered in the band */
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 820px; height: 492px;          /* 5:3 — scale proportionally if changed */
  background: url(../img/pg-logo-oval.webp) center / contain no-repeat;
  opacity: 0.14; mix-blend-mode: screen;
}
.pm-process-band .pm-sec-head h2      { color: #fff; }
.pm-process-band .pm-sec-head p       { color: #a9c2da; }
.pm-process-band .pm-sec-head .pm-kick { color: var(--pm-gold); }  /* was --pm-gold-d; beats the .pm-sec-head p rule above */
.pm-process-band .pm-process     { border-top-color: rgba(255, 255, 255, 0.14); }
.pm-process-band .pm-prow        { border-bottom-color: rgba(255, 255, 255, 0.14); }
.pm-process-band .pm-pn          { color: #6fa8d6; }               /* was --pm-blue-300 */
.pm-process-band .pm-prow h3     { color: #fff; }
.pm-process-band .pm-prow-desc   { color: #a9c2da; }

/* ============================================================
   CTA band
   ============================================================ */
.pm-cta {
  background: var(--pm-blue-050);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  padding: 52px;
  text-align: center;
}
.pm-cta h2 { color: var(--pm-navy); font-weight: 600; }
.pm-cta p { color: var(--pm-slate); font-size: 17.5px; margin: 14px auto 28px; max-width: 38em; }
.pm-cta .wp-block-buttons { justify-content: center; }
@media (max-width: 600px) { .pm-cta { padding: 38px 24px; } }

/* ============================================================
   Company Announcement — boxed notice, gold top edge
   ============================================================ */
.wp-block-group.pm-announce {   /* beat the constrained-layout max-width */
  max-width: 800px;
  margin-inline: auto;
}
.pm-announce {
  background: var(--pm-blue-050);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  box-shadow: 0 10px 30px rgba(10, 40, 69, 0.07);
  padding: 44px 48px;
}
.pm-announce .pm-kick { margin-bottom: 12px; }
.pm-announce h2 { color: var(--pm-navy); font-weight: 600; font-size: 27px; line-height: 1.2; margin: 0 0 6px; }
.pm-announce .pm-announce-by {
  font-family: var(--pm-font-mono);
  font-size: 13.5px;
  color: var(--pm-blue-600);
  margin: 0 0 24px;
}
.pm-announce h3 { color: var(--pm-navy); font-weight: 600; font-size: 17px; margin: 28px 0 8px; }
.pm-announce p { color: var(--pm-slate); font-size: 16.5px; line-height: 1.62; margin: 0 0 14px; }
.pm-announce a { color: var(--pm-blue-600); }
.pm-announce .pm-announce-dl { margin: 26px 0 0; }
.pm-announce .pm-announce-dl a {
  font-family: var(--pm-font-mono);
  font-size: 13px;
  color: var(--pm-gold-d);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.pm-announce .pm-announce-dl a:hover { text-decoration: underline; }
@media (max-width: 600px) { .pm-announce { padding: 32px 24px; } }

/* ============================================================
   Company Announcement modal (launched from the utility bar)
   ============================================================ */
.pm-modal { position: fixed; inset: 0; z-index: 1000; display: none; }
.pm-modal.is-open {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 40px 16px;
  overflow-y: auto;
}
.pm-modal-overlay { position: fixed; inset: 0; background: rgba(10, 40, 69, 0.6); }
.pm-modal-dialog {
  position: relative;
  z-index: 1;
  margin: 0 auto;
  width: 100%;
  max-width: 800px;
}
.pm-announce--modal { box-shadow: 0 24px 60px rgba(10, 40, 69, 0.35); }
.pm-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: transparent;
  color: var(--pm-slate);
  font-size: 26px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
}
.pm-modal-close:hover { background: var(--pm-blue-050); color: var(--pm-navy); }
.pm-modal-close:focus-visible { outline: 2px solid var(--pm-blue-500); outline-offset: 2px; }
body.pm-modal-open { overflow: hidden; }
@media (max-width: 600px) { .pm-modal.is-open { padding: 20px 10px; } }

/* ============================================================
   Page hero (interior pages / About)
   ============================================================ */
.pm-page-hero { background: var(--pm-navy); color: #d7e4f0; }
.pm-page-hero h1 { color: #fff; font-weight: 600; margin-top: 12px; }
.pm-page-hero p { color: #a9c2da; font-size: 18px; max-width: 42em; margin-top: 14px; }
.pm-crumb { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #88a4bf; margin: 0; }

/* ============================================================
   About body (prose + vision list + sticky side card)
   ============================================================ */
.pm-about-body .wp-block-columns { align-items: flex-start; }
.pm-prose h2 { font-size: 25px; color: var(--pm-navy); font-weight: 600; margin: 34px 0 12px; }
.pm-prose > h2:first-child,
.pm-prose > *:first-child h2 { margin-top: 0; }
.pm-prose p { color: var(--pm-slate); font-size: 16.5px; margin: 0 0 16px; }

.pm-vision { border: 1px solid var(--pm-line); margin-top: 8px; }
.pm-vision-item {
  display: grid;
  grid-template-columns: 56px 1fr;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pm-line);
}
.pm-vision-item:last-child { border-bottom: none; }
.pm-vision-item .pm-n { font-family: var(--pm-font-serif); color: var(--pm-blue-300); font-size: 26px; font-weight: 600; margin: 0; }
.pm-vision-item p:not(.pm-n) { margin: 0; color: var(--pm-ink); font-weight: 500; }

.pm-side-card {
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  padding: 26px;
  position: sticky;
  top: 102px;
}
.pm-side-card h3 { font-size: 18px; color: var(--pm-navy); font-weight: 600; margin: 0 0 8px; }
.pm-side-card .pm-row { padding: 13px 0; border-bottom: 1px solid var(--pm-line); font-size: 14.5px; color: var(--pm-slate); }
.pm-side-card .pm-row:last-of-type { border-bottom: none; }
.pm-side-card .pm-row b { color: var(--pm-navy); display: block; font-family: var(--pm-font-sans); }
@media (max-width: 900px) { .pm-side-card { position: static; } }

/* ============================================================
   Report-links pattern (download cards)
   ============================================================ */
.pm-reports { border: 1px solid var(--pm-line); border-top: 4px solid var(--pm-gold); padding: 28px 30px; background: var(--pm-cloud); }
.pm-reports h3 { font-size: 19px; color: var(--pm-navy); margin: 0 0 6px; font-weight: 600; }
.pm-reports .pm-report-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* download-card grid inside .pm-reports (home v2 resources section) */
.pm-report-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 18px 0;
}
.pm-report-card {
  display: block;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-radius: 6px;
  padding: 20px 22px;
  text-decoration: none;
  transition: border-color .15s, box-shadow .15s;
}
.pm-report-card:hover {
  border-color: var(--pm-blue-500);
  box-shadow: 0 8px 20px rgba(10, 40, 69, 0.10);
  text-decoration: none;
}
.pm-report-tag {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
}
.pm-report-card h4 {
  font-family: var(--pm-font-sans);
  font-size: 16px;
  color: var(--pm-navy);
  font-weight: 600;
  margin: 8px 0 6px;
}
.pm-report-card p { font-size: 14px; color: var(--pm-slate); margin: 0; }
@media (max-width: 900px) { .pm-report-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .pm-report-grid { grid-template-columns: 1fr; } }

/* Q&A card grid + PDF callout (Concept & Practice hub).
   The cards sit inside core/post-content, so their h3/p need the
   .pm-page-content .wp-block-post-content scope to out-rank the
   generic interior-page rules further down (25px h3 / spaced p). */
.pm-qa-grid { margin: 18px 0 8px; }
.pm-page-content .wp-block-post-content .pm-report-card h3 {
  font-family: var(--pm-font-sans);
  font-size: 16px;
  line-height: 1.35;
  color: var(--pm-navy);
  font-weight: 600;
  margin: 8px 0 6px;
}
.pm-page-content .wp-block-post-content .pm-report-card p {
  font-size: 14px;
  color: var(--pm-slate);
  margin: 0 0 0;
}
.pm-page-content .wp-block-post-content .pm-reports > h3 {
  font-size: 19px;
  margin: 0 0 6px;
}
.pm-page-content .wp-block-post-content .pm-reports > p {
  font-size: 15px;
  margin: 0 0 4px;
}
.pm-pdf-callout { margin: 10px 0 8px; }
.pm-pdf-callout .pm-report-grid { grid-template-columns: minmax(0, 460px); margin-bottom: 0; }

/* ============================================================
   Stat tiles + checklist (benefits page)
   ============================================================ */
.pm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0 10px;
}
.pm-stats.pm-stats-2 { grid-template-columns: repeat(2, 1fr); }
.pm-stat {
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  padding: 20px 22px;
}
.pm-stat-label {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-slate);
  margin: 0 0 10px;
}
.pm-stat-value {
  font-family: var(--pm-font-serif);
  font-size: 38px;
  font-weight: 600;
  line-height: 1;
  color: var(--pm-navy);
  margin: 0 0 8px;
}
.pm-stat p:not(.pm-stat-label):not(.pm-stat-value) { font-size: 14px; color: var(--pm-slate); margin: 0; }
.pm-stats-note {
  font-family: var(--pm-font-mono);
  font-size: 13px;
  color: var(--pm-mist);
  margin: 0 0 24px;
}
@media (max-width: 700px) {
  .pm-stats, .pm-stats.pm-stats-2 { grid-template-columns: 1fr; }
  .pm-stat-value { font-size: 32px; }
}

/* the .wp-block-post-content variant outranks the generic
   "restore disc bullets" rule for imported article lists */
ul.pm-checklist,
.pm-page-content .wp-block-post-content ul.pm-checklist {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 28px;
  padding: 0;
  margin: 18px 0 24px;
}
ul.pm-checklist li {
  position: relative;
  padding-left: 22px;
  color: var(--pm-slate);
  font-size: 16px;
  margin: 0;
}
ul.pm-checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.52em;
  width: 7px;
  height: 7px;
  background: var(--pm-gold);
  transform: rotate(45deg);
}
@media (max-width: 620px) {
  ul.pm-checklist,
  .pm-page-content .wp-block-post-content ul.pm-checklist { grid-template-columns: 1fr; }
}

/* ============================================================
   Service tier cards + scope variants (scope-of-service page)
   ============================================================ */
.pm-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 24px 0;
}
.pm-tier {
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  padding: 24px;
}
.pm-tier h3 {
  font-size: 19px;
  color: var(--pm-navy);
  font-weight: 600;
  margin: 10px 0 14px;
  line-height: 1.3;
}
/* single-column checklist inside tier cards; the long scoped selector
   outranks the 2-col .wp-block-post-content base rule */
.pm-tier ul.pm-checklist,
.pm-page-content .wp-block-post-content .pm-tier ul.pm-checklist {
  grid-template-columns: 1fr;
  gap: 8px;
  margin: 0;
}
@media (max-width: 880px) {
  .pm-tiers { grid-template-columns: 1fr; }
}

/* out-of-scope list: muted markers instead of gold */
ul.pm-checklist.pm-checklist-out li::before { background: var(--pm-mist); }

/* fee cards: word values, smaller than numeric stats */
.pm-stats.pm-fee .pm-stat-value { font-size: 26px; line-height: 1.2; }

/* ============================================================
   NOBL Difference — expanded numbered rows (home v2)
   ============================================================ */
.pm-diff {
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  background: var(--pm-paper);
  box-shadow: 0 10px 30px rgba(10, 40, 69, 0.07);
}
.pm-diff-item {
  display: grid;
  grid-template-columns: 46px 1fr;
  gap: 20px;
  padding: 20px 34px;
  border-bottom: 1px solid var(--pm-line);
  align-items: start;
}
.pm-diff-item:last-child { border-bottom: none; }
.pm-dn { font-family: var(--pm-font-serif); font-size: 30px; color: var(--pm-blue-300); font-weight: 600; line-height: 1; margin: -2px 0 0; }
.pm-diff-item h3 { font-size: 20px; color: var(--pm-navy); font-weight: 600; margin: 0 0 6px; }
.pm-diff-item p:not(.pm-dn) { color: var(--pm-slate); font-size: 16px; margin: 0; }
.pm-footnote { font-size: 13px; color: var(--pm-mist); margin: 18px 4px 0; }
@media (max-width: 700px) {
  .pm-diff-item { grid-template-columns: 1fr; gap: 10px; padding: 20px 22px; }
  .pm-dn { font-size: 28px; }
}

/* Editorial split: prose intro (left) + numbered .pm-diff points (right).
   Mirrors the About body split — sticky left intro, top-aligned columns. */
.pm-diff-split.wp-block-columns { gap: 56px; align-items: flex-start; margin: 0; }
.pm-diff-split > .wp-block-column:first-child { flex-basis: 40% !important; }
.pm-diff-split > .wp-block-column:last-child { flex-basis: 60% !important; }
.pm-diff-intro .pm-kick { margin-bottom: 14px; }
.pm-diff-intro h2 { color: var(--pm-navy); font-weight: 600; font-size: 30px; line-height: 1.18; margin: 0 0 18px; }
.pm-diff-intro p { color: var(--pm-slate); font-size: 16.5px; line-height: 1.62; margin: 0 0 16px; }
.pm-diff-intro p:last-child { margin-bottom: 0; }
@media (min-width: 881px) {
  .pm-diff-split > .pm-diff-intro { position: sticky; top: 102px; }
}
@media (max-width: 880px) {
  .pm-diff-split.wp-block-columns { gap: 34px; }
  .pm-diff-split > .wp-block-column { flex-basis: 100% !important; }
  .pm-diff-intro h2 { font-size: 27px; }
}

/* ============================================================
   Testimonial quote card (home v2)
   ============================================================ */
.pm-quote {
  background: var(--pm-blue-050);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  padding: 56px 64px 48px;
  text-align: center;
  margin: 0;
}
.pm-quote::before {
  content: "\201C";
  display: block;
  font-family: var(--pm-font-serif);
  font-size: 84px;
  color: var(--pm-gold);
  line-height: 0.6;
  margin-bottom: 18px;
}
.pm-quote blockquote { margin: 0; padding: 0; border: none; }
.pm-quote blockquote p {
  font-family: var(--pm-font-serif);
  font-size: clamp(19px, 2.2vw, 23px);
  color: var(--pm-navy);
  line-height: 1.55;
  max-width: 46em;
  margin: 0 auto;
}
.pm-quote-attr {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-blue-800);
  font-weight: 500;
  margin: 26px 0 0;
}
.pm-quote-role { font-size: 14px; color: var(--pm-slate); margin: 4px 0 0; }
@media (max-width: 600px) { .pm-quote { padding: 38px 24px 32px; } }

/* ============================================================
   Footer
   ============================================================ */
.pm-footer { background: var(--pm-navy); color: #9fb6cc; }
.pm-footer a { color: #9fb6cc; font-size: 14.5px; text-decoration: none; }
.pm-footer a:hover { color: #fff; text-decoration: none; }
.pm-footer h3 { color: #fff; font-family: var(--pm-font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 14px; font-weight: 600; }
.pm-footer .pm-wordmark { color: #fff; font-size: 20px; }
.pm-footer .pm-blurb { font-size: 14.5px; color: #9fb6cc; max-width: 28em; margin: 14px 0 0; }
.pm-footer ul.wp-block-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 9px; }
.pm-footer-top { border-bottom: 1px solid rgba(255, 255, 255, 0.12); padding-bottom: 36px; }
.pm-footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding-top: 20px;
  font-size: 13px;
  color: #9fb6cc;
}
.pm-footer-bottom p { color: #9fb6cc; font-size: 13px; margin: 0; }
@media (max-width: 800px) {
  .pm-footer-top.wp-block-columns { flex-wrap: wrap; }
  .pm-footer-top .wp-block-column { flex-basis: 45% !important; }
}
@media (max-width: 480px) {
  .pm-footer-top .wp-block-column { flex-basis: 100% !important; }
}

/* ============================================================
   Contact form (Contact Form 7)
   ============================================================ */
.pm-form p { margin: 0 0 16px; }
.pm-form label { font-weight: 600; color: var(--pm-navy); font-size: 14.5px; }
.pm-form input[type="text"],
.pm-form input[type="email"],
.pm-form input[type="tel"],
.pm-form input[type="url"],
.pm-form select,
.pm-form textarea {
  width: 100%;
  margin-top: 6px;
  padding: 11px 12px;
  border: 1px solid var(--pm-line);
  border-radius: 4px;
  font-family: var(--pm-font-sans);
  font-size: 15px;
  color: var(--pm-ink);
  background: #fff;
}
.pm-form select { cursor: pointer; height: 44px; }
.pm-form textarea { min-height: 120px; }
.pm-form input:focus,
.pm-form select:focus,
.pm-form textarea:focus {
  outline: none;
  border-color: var(--pm-blue-500);
  box-shadow: 0 0 0 3px rgba(44, 123, 196, 0.15);
}
.wpcf7-submit {
  background: var(--pm-gold);
  color: var(--pm-navy);
  border: none;
  border-radius: 4px;
  padding: 12px 24px;
  font-weight: 700;
  font-size: 14.5px;
  font-family: var(--pm-font-sans);
  cursor: pointer;
  transition: background .15s;
}
.wpcf7-submit:hover { background: var(--pm-gold-d); }

/* ============================================================
   Generic interior page content (page.html post-content)
   ============================================================ */
.pm-page-content h2 { font-size: 25px; color: var(--pm-navy); margin: 34px 0 12px; }
.pm-page-content h3 { font-size: 20px; color: var(--pm-navy); margin: 26px 0 10px; }
.pm-page-content p { color: var(--pm-slate); margin: 0 0 16px; }
.pm-page-content ul, .pm-page-content ol { color: var(--pm-slate); }

/* ============================================================
   Articles — blog-style archive list + single (post-content)
   ============================================================ */
/* light backdrop so the white article cards read as distinct */
.pm-articles-archive { background: var(--pm-cloud); }

/* each article is a "heritage card": gold top edge + border + shadow */
.pm-page-content .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}
.pm-page-content .wp-block-post-template > li { margin: 0 0 28px; }
.pm-page-content .wp-block-post-template > li:last-child { margin-bottom: 0; }
/* .pm-page-content scope raises specificity above WP's .has-global-padding
   reset, which otherwise zeroes the card's horizontal padding */
.pm-page-content .pm-article-item {
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  padding: 34px 38px;
  box-shadow: 0 10px 30px rgba(10, 40, 69, 0.07);
}

/* article title (archive list) — the one clearly dominant, clickable heading */
.pm-article-item .wp-block-post-title {
  font-family: var(--pm-font-serif);
  font-size: 30px;
  line-height: 1.2;
  font-weight: 600;
  margin: 0 0 16px;
}
.pm-article-item .wp-block-post-title a {
  color: var(--pm-navy);
  text-decoration: none;
}
.pm-article-item .wp-block-post-title a:hover {
  color: var(--pm-blue-800);
  text-decoration: underline;
}

/* in-article subheads: clearly subordinate to the title / hero H1
   (scoped to article bodies so generic interior pages keep 25px/20px) */
.pm-article-body h2 {
  font-size: 19px;
  font-weight: 600;
  color: var(--pm-navy);
  margin: 30px 0 8px;
}
.pm-article-body h3 {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--pm-navy);
  margin: 22px 0 8px;
}
.pm-article-body > h2:first-child,
.pm-article-body > h3:first-child { margin-top: 0; }

@media (max-width: 600px) {
  .pm-page-content .pm-article-item { padding: 26px 22px; }
  .pm-article-item .wp-block-post-title { font-size: 25px; }
}

/* imported content: restore list bullets inside the article body */
.pm-page-content .wp-block-post-content ul {
  list-style: disc;
  padding-left: 1.3em;
  margin: 0 0 16px;
}
.pm-page-content .wp-block-post-content li { color: var(--pm-slate); margin: 0 0 6px; }
.pm-page-content .wp-block-post-content strong { color: var(--pm-ink); }

/* "Read the full article →" link (mono label, brand accent) — bottom-right */
.pm-readmore { margin: 20px 0 0; text-align: right; }
.pm-readmore-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--pm-font-mono);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pm-blue-800);
  text-decoration: none;
}
.pm-readmore-link:hover { color: var(--pm-navy); }
.pm-readmore-link span { transition: transform .15s ease; }
.pm-readmore-link:hover span { transform: translateX(3px); }

/* tables inside imported article content */
.pm-page-content .wp-block-table,
.pm-page-content table { margin: 24px 0; }
.pm-page-content table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}
.pm-page-content th,
.pm-page-content td {
  border: 1px solid var(--pm-line);
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
  color: var(--pm-slate);
}
.pm-page-content thead th {
  background: var(--pm-navy);
  color: #fff;
  font-family: var(--pm-font-sans);
  font-weight: 600;
  font-size: 13.5px;
}
.pm-page-content tbody strong { color: var(--pm-navy); }

/* ============================================================
   Considerations carousel ("Navy Stage") — home. A full-bleed
   stage: one focused navy split-panel card flanked by two dimmed
   "peek" previews each side, with prev/next arrows + a dot pager.
   Ported from resources/.../design_handoff_capabilities_carousel/.
   Behaviour: assets/js/pm-cards.js. Progressive enhancement — the
   .pm-cards-fallback list is the no-JS view AND the data source;
   JS adds .is-enhanced, which swaps the list for the stage.
   Square corners are the deliberate heritage motif.
   ============================================================ */
.pm-cards { margin-block: 0; }
.pm-cards-sec {
  padding: 76px 0;
  background: var(--pm-cloud);
  border-top: 1px solid var(--pm-line);
}

/* constrained section header (stage below is full-bleed) */
.pm-cards-head { width: min(1180px, 100% - 48px); margin: 0 auto 40px; }
.pm-cards-head .pm-kick { margin-bottom: 14px; }
.pm-cards-head h2 {
  font-family: var(--pm-font-serif); font-weight: 600; color: var(--pm-navy);
  font-size: 30px; line-height: 1.18; letter-spacing: -.01em; margin: 0 0 14px;
}
.pm-cards-lede { color: var(--pm-slate); font-size: 16.5px; line-height: 1.62; margin: 0; }

/* visually-hidden helper (screen-reader live region) */
.pm-sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* progressive enhancement: stage hidden until JS mounts; fallback is the no-JS view */
.pm-cards-stage { display: none; }
.pm-cards-sec.is-enhanced .pm-cards-stage { display: block; }
.pm-cards-sec.is-enhanced .pm-cards-fallback { display: none; }

/* ---- the stage ---- */
.pm-cards-stage { position: relative; padding: 0 24px; }
.pm-cards-viewport { position: relative; overflow: hidden; padding: 14px 0; }
.pm-cards-track { display: flex; align-items: center; justify-content: center; gap: 20px; position: relative; z-index: 2; }
.pm-cards-track:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 4px; }
/* outgoing clone during a card change — sits under the incoming track and fades/slides out
   (motion driven by inline styles in pm-cards.js; `top` is set to match the live track) */
.pm-cards-ghost { position: absolute; left: 0; right: 0; z-index: 1; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .pm-cards-ghost { display: none; } }
.pm-cards-side { display: flex; gap: 20px; }

/* shared image cell: real <img> covers the cell; a missing image (card 6) falls back
   to the diagonal-hatch placeholder */
.pm-cards-img img, .pm-cards-peek-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* image pill: icon + "NN / 07" indicator */
.pm-cards-cap { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 6px; }
.pm-cards-cap svg { width: 15px; height: 15px; flex: none; }

/* peek (inactive preview) card */
.pm-cards-peek { flex: 0 0 460px; cursor: pointer; opacity: .55; transition: opacity .2s; background: #fff; border: 1px solid var(--pm-line); display: grid; grid-template-columns: 40% 60%; }
.pm-cards-peek:hover { opacity: .82; }
.pm-cards-peek-img { position: relative; min-height: 300px; background-color: var(--pm-blue-050); border-right: 1px solid var(--pm-line); display: flex; align-items: flex-end; padding: 16px; overflow: hidden; }
.pm-cards-peek-img.is-placeholder { background-image: repeating-linear-gradient(135deg, rgba(21,101,173,0.10) 0 2px, transparent 2px 11px); }
.pm-cards-peek-img .pm-cards-cap { font-family: var(--pm-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-blue-600); background: rgba(255,255,255,0.85); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--pm-line); }
.pm-cards-peek-body { padding: 24px 26px; display: flex; flex-direction: column; gap: 10px; }
.pm-cards-peek-body h3 { font-family: var(--pm-font-serif); font-weight: 600; color: var(--pm-navy); font-size: 20px; line-height: 1.2; margin: 0; }
/* peeks are previews — clamp the (now full-length) body so the side cards stay compact;
   the focused card and the no-JS fallback list still show the complete copy */
.pm-cards-peek-body p { color: var(--pm-slate); font-size: 14px; line-height: 1.55; margin: 0; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }

/* active (center) card */
.pm-cards-center { flex: 0 0 630px; }
.pm-cards-card { background: var(--pm-navy); box-shadow: 0 26px 58px rgba(10, 40, 69, 0.34); display: grid; grid-template-columns: 40% 60%; }
.pm-cards-img { position: relative; min-height: 360px; background-color: #0e335a; border-right: 4px solid var(--pm-gold); display: flex; align-items: flex-end; padding: 18px; overflow: hidden; }
.pm-cards-img.is-placeholder { background-image: repeating-linear-gradient(135deg, rgba(156, 196, 230, 0.14) 0 2px, transparent 2px 11px); }
.pm-cards-img .pm-cards-cap { font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-gold); background: rgba(10, 40, 69, 0.6); padding: 5px 10px; border-radius: 999px; border: 1px solid rgba(156, 196, 230, 0.35); }
.pm-cards-body { padding: 34px 42px; display: flex; flex-direction: column; }
.pm-cards-body h3 { font-family: var(--pm-font-serif); font-weight: 600; color: #fff; font-size: 28px; line-height: 1.18; margin: 0 0 14px; letter-spacing: -0.01em; }
.pm-cards-body .blurb { color: #a9c2da; font-size: 16px; line-height: 1.55; margin: 0; }

/* arrows */
.pm-cards-nav { position: absolute; top: 44%; transform: translateY(-50%); z-index: 5; width: 52px; height: 52px; border-radius: 6px; background: #fff; border: 1px solid var(--pm-line); box-shadow: 0 10px 26px rgba(10, 40, 69, 0.16); color: var(--pm-navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.pm-cards-nav:hover { background: var(--pm-blue-050); }
.pm-cards-nav:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }
.pm-cards-prev { left: 24px; }
.pm-cards-next { right: 24px; }

/* dots */
.pm-cards-dots { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.pm-cards-dot { height: 8px; width: 8px; border-radius: 999px; border: none; cursor: pointer; padding: 0; background: #c4d2df; transition: width .2s, background .2s; }
.pm-cards-dot.on { width: 30px; background: var(--pm-gold); }
.pm-cards-dot:focus-visible { outline: 2px solid var(--pm-gold); outline-offset: 2px; }

/* ---- no-JS fallback list (also the SEO/content source read by pm-cards.js) ---- */
.pm-cards-fallback {
  width: min(1180px, 100% - 48px); margin: 0 auto; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;
}
.pm-cards-fb-item { display: grid; grid-template-columns: 40% 60%; background: #fff; border: 1px solid var(--pm-line); }
.pm-cards-fb-img { position: relative; min-height: 220px; background-color: var(--pm-blue-050); border-right: 1px solid var(--pm-line); display: flex; align-items: flex-end; padding: 14px; overflow: hidden; }
.pm-cards-fb-img.is-placeholder { background-image: repeating-linear-gradient(135deg, rgba(21, 101, 173, 0.10) 0 2px, transparent 2px 11px); }
.pm-cards-fb-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pm-cards-fb-cap { position: relative; z-index: 1; font-family: var(--pm-font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--pm-blue-600); background: rgba(255, 255, 255, 0.85); padding: 4px 9px; border-radius: 999px; border: 1px solid var(--pm-line); }
.pm-cards-fb-body { padding: 26px 24px; }
.pm-cards-fb-lbl { font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--pm-mist); margin: 0 0 8px; }
.pm-cards-fb-body h3 { font-family: var(--pm-font-serif); font-weight: 600; color: var(--pm-navy); font-size: 20px; line-height: 1.2; margin: 0 0 10px; }
.pm-cards-fb-body p { color: var(--pm-slate); font-size: 14.5px; line-height: 1.55; margin: 0; }

/* ---- responsive ---- */
@media (max-width: 1100px) {
  .pm-cards-side { display: none; }
  .pm-cards-center { flex: 1 1 auto; max-width: 640px; }
  .pm-cards-fallback { grid-template-columns: 1fr; }
  /* Pin the arrows to a fixed offset over the image band (top 14px + ~half of the 360px
     image min-height) instead of top:44% of the variable-height stage, so they no longer
     jump vertically as the card's body copy changes height between cards. */
  .pm-cards-nav { top: 190px; }
}
@media (max-width: 640px) {
  .pm-cards-sec { padding: 56px 0; }
  .pm-cards-head { margin-bottom: 30px; }
  .pm-cards-head h2 { font-size: 26px; }
  .pm-cards-stage { padding: 0 14px; }
  /* stack the active card's image over its text on narrow screens */
  .pm-cards-card { grid-template-columns: 1fr; }
  .pm-cards-img { min-height: 210px; border-right: none; border-bottom: 4px solid var(--pm-gold); }
  .pm-cards-body { padding: 28px 24px; }
  .pm-cards-body h3 { font-size: 23px; }
  /* stacked card: image band is ~250px tall (210px min-height + padding/border),
     top at 14px → center ≈ 140px. Keeps the arrows fixed over the image. */
  .pm-cards-nav { width: 44px; height: 44px; top: 140px; }
  .pm-cards-prev { left: 6px; }
  .pm-cards-next { right: 6px; }
  .pm-cards-fb-item { grid-template-columns: 1fr; }
  .pm-cards-fb-img { min-height: 180px; border-right: none; border-bottom: 1px solid var(--pm-line); }
}

/* ============================================================
   Authority landing page  (/premium-isnt-income/)
   Supporting page for hero filmstrip slide 1. Design source:
   resources/hero-banner-landing-pages/1-authority.md (option 2a).
   Full-bleed bands, each with its own centered inner column.
   ============================================================ */
.pm-auth { margin-top: 0; }
.pm-auth-inner {
  width: min(1080px, 100% - 48px);
  margin-inline: auto;
}
.pm-auth-inner--narrow { width: min(920px, 100% - 48px); }
.pm-auth-inner--wide   { width: min(1080px, 100% - 48px); }

/* ---------- 1. Hero band (navy) ---------- */
.pm-auth-hero {
  background: var(--pm-navy);
  padding: 76px 0 84px;
}
.pm-auth-hero__inner {
  width: min(920px, 100% - 48px);
  margin-inline: auto;
}
.pm-auth-chapter {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pm-auth-chapter__idx  { color: rgba(255, 255, 255, 0.5); }
.pm-auth-chapter__name { color: var(--pm-gold); }
.pm-auth-hero__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 52px;
  line-height: 1.1;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 22px 0 0;
  text-wrap: pretty;
}
.pm-auth-rule {
  width: 64px;
  height: 3px;
  background: var(--pm-gold);
  margin: 30px 0;
}
.pm-auth-hero__lead {
  font-size: 19px;
  line-height: 1.65;
  color: #c3d6ea;
  margin: 0;
  max-width: 42em;
}
.pm-auth-hero__lead strong { color: #fff; font-weight: 700; }

/* ---------- shared band + section headings ---------- */
.pm-auth-band { padding: 74px 0 80px; }
.pm-auth-band--white { background: var(--pm-paper); }
.pm-auth-band--cloud {
  background: #f4f7fa;
  border-block: 1px solid var(--pm-line);
}
.pm-auth-eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
  margin: 0;
}
.pm-auth-h2 {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 33px;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 12px 0 34px;
  text-wrap: pretty;
}
.pm-auth-h2--sm { font-size: 30px; margin: 12px 0 14px; }

/* ---------- 2. Comparison table ---------- */
.pm-auth-tablewrap { overflow-x: auto; }
.pm-auth-table {
  display: grid;
  grid-template-columns: 150px 1fr 1fr;
  border: 1px solid var(--pm-line);
  font-size: 15px;
  line-height: 1.5;
  min-width: 620px;
}
.pm-auth-table > * { padding: 16px 20px; border-bottom: 1px solid var(--pm-line); }
.pm-auth-table > *:nth-last-child(-n + 3) { border-bottom: 0; }
.pm-auth-table__corner,
.pm-auth-table__label { background: #f4f7fa; }
.pm-auth-table__label {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-slate);
}
.pm-auth-table__head,
.pm-auth-table__cell { border-left: 1px solid var(--pm-line); }
.pm-auth-table__head { font-weight: 700; color: var(--pm-slate); }
.pm-auth-table__head--trust {
  color: var(--pm-navy);
  background: #f2f7fc;
  box-shadow: inset 0 3px 0 var(--pm-gold);
}
.pm-auth-table__cell { color: var(--pm-slate); }
.pm-auth-table__cell--trust { background: #f2f7fc; color: var(--pm-ink); }

/* ---------- 3. Three transactions ---------- */
.pm-auth-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.pm-auth-card {
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-top: 3px solid var(--pm-gold);
  padding: 30px 28px;
}
.pm-auth-card__idx {
  font-family: var(--pm-font-mono);
  color: var(--pm-blue-300);
  font-size: 13px;
  margin: 0;
}
.pm-auth-card__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--pm-navy);
  margin: 12px 0 10px;
}
.pm-auth-card__body {
  color: var(--pm-slate);
  font-size: 15px;
  line-height: 1.6;
  margin: 0;
}
.pm-auth-note {
  color: var(--pm-slate);
  font-size: 15px;
  line-height: 1.6;
  max-width: 56em;
  margin: 28px auto 0;
  text-align: center;
}

/* ---------- 4. Why it matters ---------- */
.pm-auth-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.pm-auth-why__body {
  color: var(--pm-slate);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}
.pm-auth-why__points { display: grid; gap: 16px; }
.pm-auth-point {
  border-left: 3px solid var(--pm-gold);
  padding: 4px 0 4px 20px;
  margin: 0;
  color: var(--pm-slate);
  font-size: 15px;
  line-height: 1.55;
}
.pm-auth-point > strong:first-child { color: var(--pm-navy); }

/* ---------- 5. CTA strip (gold) ---------- */
.pm-auth-cta {
  background: linear-gradient(90deg, var(--pm-gold), #ffce46);
  padding: 56px 0;
}
.pm-auth-cta__inner {
  width: min(920px, 100% - 48px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.pm-auth-cta__text {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 0;
  max-width: 22em;
}
.pm-auth-cta__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pm-navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 4px;
  text-decoration: none;
}
.pm-auth-cta__btn:hover { background: #0e3a5f; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pm-auth-hero { padding: 58px 0 62px; }
  .pm-auth-hero__title { font-size: clamp(32px, 6vw, 52px); }
  .pm-auth-band { padding: 56px 0 60px; }
  .pm-auth-cards { grid-template-columns: 1fr; }
  .pm-auth-why { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 760px) {
  .pm-auth-cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 600px) {
  .pm-auth-h2 { font-size: 27px; }
  .pm-auth-h2--sm { font-size: 25px; }
  .pm-auth-hero__lead { font-size: 17px; }
  .pm-auth-cta__text { font-size: 22px; }
}

/* ============================================================
   Opportunity landing page  (/investor-opportunity/)
   Supporting page for hero filmstrip slide 2 — an investor
   teaser (option 2a "Light Dossier"). Design source:
   resources/hero-banner-landing-pages/2-opportunity.md.
   Full-bleed bands, each with an inner column matching the site
   container (min(1180px, 100% - 48px)).
   ============================================================ */
.pm-opp { margin-top: 0; }
.pm-opp-inner {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
}
.pm-opp-label {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #41546b;
  margin: 0 0 16px;
}

/* ---------- Hero band (navy) ---------- */
.pm-opp-hero {
  background: var(--pm-navy);
  padding: 72px 0 60px;
}
.pm-opp-hero__eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin: 0 0 20px;
}
.pm-opp-hero__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 50px;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 26px;
  max-width: 18em;
  text-wrap: pretty;
}
.pm-opp-hero__lead {
  font-size: 17px;
  line-height: 1.7;
  color: #c3d6ea;
  margin: 0;
  max-width: 44em;
}
.pm-opp-hero__lead strong { color: #fff; }

/* ---------- 3. Investment thesis grid ---------- */
.pm-opp-thesis {
  background: var(--pm-paper);
  padding: 56px 0;
}
.pm-opp-thesis__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: #dbe3ec;
  border: 1px solid #dbe3ec;
}
.pm-opp-thesis__cell {
  background: #eef2f7;
  padding: 26px;
  border-top: 3px solid var(--pm-gold);
}
.pm-opp-thesis__cell-label {
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-blue-800);
  margin: 0 0 12px;
}
.pm-opp-thesis__cell-body {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: #33475c;
}
.pm-opp-thesis__cell-body strong { color: var(--pm-navy); }

/* ---------- 4-6. Numbered sections ---------- */
.pm-opp-sec { background: var(--pm-paper); padding: 56px 0; }
.pm-opp-sec--tight-top { padding-top: 8px; }
.pm-opp-sec--band { background: #eef2f7; }
.pm-opp-sec__grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
}
.pm-opp-sec__h2 {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.25;
  color: var(--pm-navy);
  margin: 0;
}
.pm-opp-sec__num {
  display: block;
  font-family: var(--pm-font-mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: #b08206;
  margin-bottom: 12px;
}
.pm-opp-sec__body {
  display: flex;
  flex-direction: column;
  gap: 18px;
  border-top: 1px solid #dbe3ec;
  padding-top: 24px;
}
.pm-opp-sec--band .pm-opp-sec__body { border-top-color: #d3dde8; }
.pm-opp-sec__body p {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  color: #33475c;
}
.pm-opp-sec__body p > strong:first-child { color: var(--pm-navy); }

/* ---------- 7. People band (navy) ---------- */
.pm-opp-people {
  background: var(--pm-navy);
  padding: 36px 0;
}
.pm-opp-people__label {
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin: 0 0 12px;
}
.pm-opp-people__text {
  margin: 0;
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 18px;
  line-height: 1.6;
  color: #e6eef7;
  max-width: 44em;
}
.pm-opp-people__text strong { font-style: normal; color: #fff; }

/* ---------- 8. Who should look at this ---------- */
.pm-opp-who { background: var(--pm-paper); padding: 56px 0; }
.pm-opp-who__h2 {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 28px;
  color: var(--pm-navy);
  margin: 0 0 8px;
}
.pm-opp-who__intro {
  font-size: 15px;
  line-height: 1.6;
  color: #33475c;
  margin: 0 0 28px;
}
.pm-opp-who__list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #dbe3ec;
}
.pm-opp-who__row {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 48px;
  padding: 24px 0;
  border-bottom: 1px solid #dbe3ec;
}
.pm-opp-who__row h3 {
  font-family: var(--pm-font-serif);
  font-size: 18px;
  font-weight: 600;
  color: var(--pm-navy);
  margin: 0;
}
.pm-opp-who__row p {
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #33475c;
}

/* ---------- 9. CTA footer (gold) ---------- */
.pm-opp-cta {
  background: var(--pm-gold);
  padding: 56px 0;
}
.pm-opp-cta__text {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--pm-navy);
  margin: 0 0 28px;
  max-width: 42em;
}
.pm-opp-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pm-navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
}
.pm-opp-cta__btn:hover { background: #081f38; color: #fff; }
.pm-opp-cta__note {
  font-size: 14px;
  line-height: 1.6;
  color: #5c4a10;
  margin: 24px 0 0;
}
.pm-opp-cta__note strong { color: var(--pm-navy); }
.pm-opp-cta__note a { color: var(--pm-navy); text-decoration: underline; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .pm-opp-hero { padding: 56px 0 48px; }
  .pm-opp-hero__title { font-size: clamp(30px, 5vw, 50px); }
  .pm-opp-thesis__grid { grid-template-columns: 1fr; }
  .pm-opp-sec__grid,
  .pm-opp-who__row { grid-template-columns: 1fr; gap: 16px; }
  .pm-opp-sec__body { gap: 16px; }
}
@media (max-width: 600px) {
  .pm-opp-sec__h2,
  .pm-opp-who__h2 { font-size: 25px; }
}

/* ============================================================
   Solvency landing page  (/financial-solvency-analysis/)
   Supporting page for hero filmstrip slide 3 — option 3a
   "Proof Dossier". Design source:
   resources/hero-banner-landing-pages/3-solvency.md.
   Full-bleed bands; two-column navy hero with a designed
   Financial Solvency Analysis report panel. Semantic report
   colors (green/red) are literals — not part of :root.
   ============================================================ */
.pm-solv { margin-top: 0; }
.pm-solv-inner {
  width: min(1080px, 100% - 48px);
  margin-inline: auto;
}
.pm-solv-inner--narrow { width: min(920px, 100% - 48px); }
.pm-solv-inner--wide   { width: min(1080px, 100% - 48px); }

/* ---------- 1. Hero band (navy, two-column) ---------- */
.pm-solv-hero {
  background: var(--pm-navy);
  padding: 70px 0 76px;
}
.pm-solv-hero__inner {
  width: min(1120px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 430px;
  gap: 56px;
  align-items: center;
}
.pm-solv-chapter {
  display: flex;
  align-items: baseline;
  gap: 16px;
  margin: 0;
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pm-solv-chapter__idx  { color: rgba(255, 255, 255, 0.5); }
.pm-solv-chapter__name { color: var(--pm-gold); }
.pm-solv-hero__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.12;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 20px 0 0;
  text-wrap: pretty;
}
.pm-solv-rule {
  width: 64px;
  height: 3px;
  background: var(--pm-gold);
  margin: 28px 0;
}
.pm-solv-hero__lead {
  font-size: 18px;
  line-height: 1.65;
  color: #c3d6ea;
  margin: 0;
  max-width: 38em;
}
.pm-solv-hero__lead strong { color: #fff; }
.pm-solv-hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pm-gold);
  color: var(--pm-navy);
  font-weight: 700;
  font-size: 15px;
  padding: 14px 26px;
  border-radius: 4px;
  text-decoration: none;
  margin-top: 32px;
}
.pm-solv-hero__cta:hover { background: var(--pm-gold-d); color: var(--pm-navy); }

/* ---------- Financial Solvency Analysis report panel ---------- */
.pm-solv-panel {
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, 0.5);
  overflow: hidden;
  width: 100%;
}
.pm-solv-panel__head {
  background: #f4f7fa;
  border-bottom: 1px solid var(--pm-line);
  padding: 16px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.pm-solv-panel__title {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-slate);
}
.pm-solv-panel__asof {
  font-family: var(--pm-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  color: #9aa7b2;
}
.pm-solv-panel__body { padding: 18px 22px 0; }
.pm-solv-panel__verdict {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: #eef7f1;
  border: 1px solid #bfe0cd;
  border-radius: 5px;
}
.pm-solv-panel__verdict-label {
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2c6e49;
}
.pm-solv-panel__verdict-value {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 700;
  font-size: 15px;
  color: #2c6e49;
}
.pm-solv-check { color: #2c6e49; }
.pm-solv-panel__verdict-value .pm-solv-check { font-size: 16px; }
.pm-solv-panel__eq {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  font-family: var(--pm-font-mono);
  font-size: 13px;
  margin: 20px 2px 4px;
}
.pm-solv-panel__eq-label { color: var(--pm-slate); }
.pm-solv-panel__eq-val { color: var(--pm-ink); text-align: right; }
.pm-solv-panel__divider {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--pm-line);
  margin: 6px 0;
}
.pm-solv-panel__eq-total-label { color: var(--pm-navy); font-weight: 700; }
.pm-solv-panel__eq-total-val { color: #2c6e49; font-weight: 700; text-align: right; }
.pm-solv-panel__types {
  border-top: 1px solid var(--pm-line);
  margin-top: 14px;
}
.pm-solv-panel__type-row {
  display: grid;
  grid-template-columns: 1fr auto;
  padding: 12px 22px;
  font-size: 13px;
}
.pm-solv-panel__type-row:first-child { border-bottom: 1px solid #eef2f6; }
.pm-solv-panel__type-label { color: var(--pm-slate); }
.pm-solv-panel__type-val { color: #2c6e49; font-weight: 600; }
.pm-solv-panel__levels {
  border-top: 1px solid var(--pm-line);
  padding: 14px 22px;
  display: flex;
  gap: 8px;
}
.pm-solv-panel__level {
  flex: 1;
  text-align: center;
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pm-slate);
  background: #f4f7fa;
  border: 1px solid var(--pm-line);
  border-radius: 4px;
  padding: 8px 4px;
}

/* ---------- shared band + headings ---------- */
.pm-solv-band { padding: 74px 0 78px; }
.pm-solv-band--white { background: var(--pm-paper); }
.pm-solv-band--cloud {
  background: #f4f7fa;
  border-block: 1px solid var(--pm-line);
  padding: 74px 0 80px;
}
.pm-solv-eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
  margin: 0;
}
.pm-solv-h2 {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 33px;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 12px 0 24px;
  text-wrap: pretty;
}
.pm-solv-h2--sm { font-size: 30px; margin: 12px 0 14px; }
.pm-solv-para {
  font-size: 16.5px;
  line-height: 1.7;
  color: var(--pm-slate);
  max-width: 44em;
  margin: 0 0 20px;
}
.pm-solv-para strong { color: var(--pm-ink); }

/* ---------- 2. GL-vs-reality comparison ---------- */
.pm-solv-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--pm-line);
  margin: 8px 0 24px;
}
.pm-solv-compare__cell { padding: 24px 26px; }
.pm-solv-compare__cell--gl { border-right: 1px solid var(--pm-line); }
.pm-solv-compare__cell--reality {
  background: #f2f7fc;
  box-shadow: inset 0 3px 0 var(--pm-gold);
}
.pm-solv-compare__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 12px;
}
.pm-solv-compare__label span[aria-hidden] { font-size: 14px; }
.pm-solv-compare__label--neg { color: #b0433a; }
.pm-solv-compare__label--pos { color: #2c6e49; }
.pm-solv-compare__rows {
  font-family: var(--pm-font-mono);
  font-size: 13px;
  line-height: 1.9;
  color: var(--pm-slate);
}
.pm-solv-compare__rows--ink { color: var(--pm-ink); }
.pm-solv-compare__row { display: flex; justify-content: space-between; gap: 12px; }
.pm-solv-compare__row--ink { color: var(--pm-ink); }
.pm-solv-compare__row--neg { color: #b0433a; }
.pm-solv-compare__cap { font-size: 13.5px; color: var(--pm-slate); margin: 12px 0 0; }
.pm-solv-compare__cap--mute { color: #9aa7b2; }

/* ---------- pull-quote + emphasis + mini-labels ---------- */
.pm-solv-pullquote {
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.55;
  color: var(--pm-navy);
  border-left: 3px solid var(--pm-gold);
  padding-left: 22px;
  margin: 0;
  text-wrap: pretty;
}
.pm-solv-emphasis {
  font-family: var(--pm-font-serif);
  font-size: 22px;
  line-height: 1.45;
  font-weight: 600;
  color: var(--pm-navy);
  max-width: 36em;
  margin: 26px 0;
  text-wrap: pretty;
}
.pm-solv-minilabel {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pm-slate);
  margin: 0 0 12px;
}

/* ---------- 3a. "two ways" grid ---------- */
.pm-solv-ways {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--pm-line);
  background: #fff;
  margin-bottom: 34px;
}
.pm-solv-ways__cell { padding: 26px 28px; border-top: 3px solid var(--pm-gold); }
.pm-solv-ways__cell:first-child { border-right: 1px solid var(--pm-line); }
.pm-solv-ways__title {
  font-family: var(--pm-font-serif);
  font-size: 19px;
  font-weight: 600;
  color: var(--pm-navy);
  margin: 0 0 8px;
}
.pm-solv-ways__body { font-size: 15px; color: var(--pm-slate); margin: 0; }

/* ---------- 3b. "three levels" grid ---------- */
.pm-solv-levels {
  display: grid;
  grid-template-columns: 150px 1fr;
  border: 1px solid var(--pm-line);
  background: #fff;
  font-size: 15px;
}
.pm-solv-levels__label {
  padding: 18px 20px;
  background: #f4f7fa;
  font-family: var(--pm-font-serif);
  font-weight: 600;
  color: var(--pm-navy);
  border-bottom: 1px solid var(--pm-line);
}
.pm-solv-levels__val {
  padding: 18px 22px;
  color: var(--pm-slate);
  border-left: 1px solid var(--pm-line);
  border-bottom: 1px solid var(--pm-line);
}
.pm-solv-levels > *:nth-last-child(-n + 2) { border-bottom: 0; }

/* ---------- 4. Why it matters ---------- */
.pm-solv-why {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
.pm-solv-why__body {
  color: var(--pm-slate);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0;
}
.pm-solv-why__points { display: grid; gap: 16px; }
.pm-solv-point {
  border-left: 3px solid var(--pm-gold);
  padding: 4px 0 4px 20px;
  margin: 0;
  color: var(--pm-slate);
  font-size: 15px;
  line-height: 1.55;
}
.pm-solv-point > strong:first-child { color: var(--pm-navy); }

/* ---------- 5. CTA strip (gold) ---------- */
.pm-solv-cta {
  background: linear-gradient(90deg, var(--pm-gold), #ffce46);
  padding: 52px 0;
}
.pm-solv-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.pm-solv-cta__text { max-width: 34em; }
.pm-solv-cta__headline {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 25px;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
  text-wrap: pretty;
}
.pm-solv-cta__sub {
  font-size: 15px;
  line-height: 1.55;
  color: #5c4a10;
  margin: 0;
}
.pm-solv-cta__btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--pm-navy);
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  padding: 15px 28px;
  border-radius: 4px;
  text-decoration: none;
}
.pm-solv-cta__btn:hover { background: #081f38; color: #fff; }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .pm-solv-hero__inner { grid-template-columns: 1fr; gap: 40px; }
  .pm-solv-panel { max-width: 430px; }
}
@media (max-width: 900px) {
  .pm-solv-hero { padding: 56px 0 60px; }
  .pm-solv-hero__title { font-size: clamp(30px, 6vw, 46px); }
  .pm-solv-band,
  .pm-solv-band--cloud { padding: 56px 0 60px; }
  .pm-solv-compare,
  .pm-solv-ways,
  .pm-solv-levels,
  .pm-solv-why { grid-template-columns: 1fr; gap: 0; }
  .pm-solv-why { gap: 36px; }
  .pm-solv-compare__cell--gl { border-right: 0; border-bottom: 1px solid var(--pm-line); }
  .pm-solv-ways__cell:first-child { border-right: 0; border-bottom: 1px solid var(--pm-line); }
  .pm-solv-levels__label { border-left: 0; }
  .pm-solv-levels__val { border-left: 0; }
  .pm-solv-cta__inner { flex-direction: column; align-items: flex-start; gap: 24px; }
}
@media (max-width: 600px) {
  .pm-solv-h2 { font-size: 27px; }
  .pm-solv-h2--sm { font-size: 25px; }
  .pm-solv-hero__lead { font-size: 16.5px; }
  .pm-solv-emphasis { font-size: 20px; }
  .pm-solv-panel { max-width: 100%; }
}

/* ============================================================================
   Differentiation landing page  (/ams-vs-trust-ledger/)  — pm-diff-*
   Supporting page for hero filmstrip slide 4. Design: "1A — The Ledger" handoff.
   Full-bleed bands (the prototype's white-card wrapper + shadow are framing only).
   Reuses :root tokens; literals for semantic colors not in :root (deep navy,
   gold-bright, gold tints/hairlines, muted red, body grays, muted blues).
   ========================================================================== */

.pm-diff-inner {
  width: min(1080px, 100% - 48px);
  margin-inline: auto;
}

/* ---------- 1. Hero (navy, decorative "04" watermark) ---------- */
.pm-diff-hero {
  position: relative;
  overflow: hidden;
  background: var(--pm-navy);
  border-top: 4px solid var(--pm-gold);
  padding: 60px 0 66px;
}
.pm-diff-hero__inner {
  position: relative;
  width: min(1080px, 100% - 48px);
  margin-inline: auto;
}
.pm-diff-hero__inner > * { position: relative; z-index: 1; }
.pm-diff-hero__watermark {
  position: absolute;
  z-index: 0;
  right: -10px;
  bottom: -64px;
  font-family: var(--pm-font-serif);
  font-weight: 700;
  font-size: 230px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.05);
  pointer-events: none;
}
.pm-diff-hero__corner {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0;
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(156, 196, 230, 0.55);
}
.pm-diff-hero__eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 13px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #ffd15a;
  margin: 0 0 22px;
}
.pm-diff-hero__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 46px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: #fff;
  margin: 0 0 22px;
  max-width: 680px;
}
.pm-diff-hero__sub {
  font-family: var(--pm-font-sans);
  font-size: 18px;
  line-height: 1.55;
  color: #c3d2e6;
  margin: 0 0 26px;
  max-width: 560px;
}
.pm-diff-hero__hook {
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: #eaf1f8;
  margin: 0 0 34px;
  padding-left: 18px;
  border-left: 3px solid var(--pm-gold);
  max-width: 520px;
}

/* Shared gold buttons (hero + CTA band) */
.pm-diff-hero__cta,
.pm-diff-cta__btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pm-gold);
  color: var(--pm-navy);
  font-family: var(--pm-font-sans);
  font-weight: 600;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pm-diff-hero__cta { font-size: 15px; letter-spacing: 0.01em; padding: 15px 26px; }
.pm-diff-cta__btn  { font-size: 16px; padding: 16px 30px; }
.pm-diff-hero__cta:hover,
.pm-diff-cta__btn:hover { background: var(--pm-gold-d); color: var(--pm-navy); }

/* ---------- Generic bands / typography ---------- */
.pm-diff-band { padding: 50px 0; }
.pm-diff-band--white { background: var(--pm-paper); }
.pm-diff-band--cloud { background: #f3f6f9; }
.pm-diff-band--test  { padding: 10px 0 48px; }

.pm-diff-eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #0e4c8a;
  margin: 0 0 14px;
}
.pm-diff-h2 {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 28px;
  line-height: 1.15;
  color: var(--pm-navy);
  letter-spacing: -0.01em;
  margin: 0 0 24px;
  text-wrap: pretty;
}
.pm-diff-lead {
  font-family: var(--pm-font-sans);
  font-size: 20px;
  line-height: 1.62;
  color: #28323b;
  max-width: 820px;
  margin: 0 0 22px;
  text-wrap: pretty;
}
.pm-diff-lead strong { color: var(--pm-navy); }
.pm-diff-aside {
  font-family: var(--pm-font-sans);
  font-style: italic;
  font-size: 15px;
  line-height: 1.6;
  color: var(--pm-slate);
  max-width: 760px;
  margin: 0;
  padding-left: 18px;
  border-left: 3px solid var(--pm-line);
}
.pm-diff-xref { color: #0e4c8a; border-bottom: 1px solid #9cc4e6; text-decoration: none; }
.pm-diff-xref:hover { color: var(--pm-navy); }
.pm-diff-intro {
  font-family: var(--pm-font-sans);
  font-size: 16px;
  line-height: 1.62;
  color: #33424e;
  max-width: 780px;
  margin: 0 0 28px;
}
.pm-diff-para {
  font-family: var(--pm-font-sans);
  font-size: 16px;
  line-height: 1.66;
  color: #33424e;
  max-width: 820px;
  margin: 0 0 20px;
}
.pm-diff-para:last-child { margin-bottom: 0; }
.pm-diff-para strong { color: var(--pm-navy); }

/* ---------- Tables ---------- */
.pm-diff-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.pm-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--pm-font-sans);
  background: #fff;
}
.pm-diff-table--halves { min-width: 640px; box-shadow: 0 1px 0 var(--pm-line); }
.pm-diff-table--matrix { min-width: 600px; }

.pm-diff-th {
  text-align: left;
  padding: 16px 18px;
  font-family: var(--pm-font-mono);
  text-transform: uppercase;
  vertical-align: bottom;
}

/* Table 1 — two halves */
.pm-diff-th--rowlabel { width: 26%; border-bottom: 2px solid var(--pm-navy); }
.pm-diff-th--ams {
  width: 37%; font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--pm-slate); border-bottom: 2px solid var(--pm-navy);
}
.pm-diff-th--trust {
  width: 37%; font-size: 11.5px; letter-spacing: 0.08em;
  color: var(--pm-navy); border-bottom: 2px solid var(--pm-gold); background: #fffaf0;
}
.pm-diff-td { padding: 15px 18px; vertical-align: top; }
.pm-diff-td--rowlabel {
  font-family: var(--pm-font-mono); font-size: 13px; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--pm-slate); border-bottom: 1px solid #eef2f6;
}
.pm-diff-td--ams { font-size: 15px; line-height: 1.5; color: #33424e; border-bottom: 1px solid #eef2f6; }
.pm-diff-td--trust {
  font-size: 15px; line-height: 1.5; color: var(--pm-navy); font-weight: 500;
  background: #fffdf7; border-bottom: 1px solid #f4e8cf;
}
.pm-diff-td--neg { color: #9a2b2b; }
.pm-diff-td--yes { font-weight: 600; }

/* Table 2 — capability matrix */
.pm-diff-mth { padding: 14px 12px; }
.pm-diff-mth--cap {
  text-align: left; padding: 14px 16px; font-size: 11px; letter-spacing: 0.1em;
  color: var(--pm-slate); border-bottom: 2px solid var(--pm-navy);
}
.pm-diff-mth--nobl {
  text-align: center; width: 120px; font-size: 12px; letter-spacing: 0.06em;
  color: var(--pm-navy); border-bottom: 2px solid var(--pm-gold); background: #fffaf0;
}
.pm-diff-mth--other {
  text-align: center; width: 120px; font-size: 11px; letter-spacing: 0.06em;
  color: var(--pm-slate); border-bottom: 2px solid var(--pm-navy);
}
.pm-diff-table--matrix td { border-bottom: 1px solid #eef2f6; }
.pm-diff-mtd--cap { text-align: left; padding: 15px 16px; font-size: 15px; color: #33424e; }
.pm-diff-mtd--cap strong { color: var(--pm-navy); font-weight: 600; }
.pm-diff-mtd__qual { font-weight: 400; color: var(--pm-slate); }
.pm-diff-table--matrix .pm-diff-mark { text-align: center; padding: 15px 12px; }
.pm-diff-mark--nobl  { color: var(--pm-gold-d); font-size: 19px; font-weight: 700; }
.pm-diff-mark--other { color: var(--pm-slate);  font-size: 17px; font-weight: 700; }
.pm-diff-mark--none  { color: #c2ccd6; font-size: 18px; }
.pm-diff-mtd--nobl { background: #fffdf7; }
.pm-diff-table--matrix .pm-diff-tr--trust .pm-diff-mtd--nobl {
  background: #fffaf0; border-bottom-color: #f4e8cf;
}
/* Last row of either table: no bottom rule */
.pm-diff-tr--last td { border-bottom: 0; }

/* ---------- "A test you can run today" card ---------- */
.pm-diff-testcard {
  background: var(--pm-navy);
  border-left: 4px solid var(--pm-gold);
  padding: 36px 40px;
  border-radius: 2px;
}
.pm-diff-testcard__eyebrow {
  font-family: var(--pm-font-mono); font-size: 11px; letter-spacing: 0.2em;
  text-transform: uppercase; color: #ffd15a; margin: 0 0 14px;
}
.pm-diff-testcard__body {
  font-family: var(--pm-font-serif); font-size: 20px; line-height: 1.55;
  color: #eaf1f8; margin: 0; max-width: 820px; text-wrap: pretty;
}

/* ---------- CTA band (navy) ---------- */
.pm-diff-cta {
  background: var(--pm-navy);
  border-top: 4px solid var(--pm-gold);
  padding: 56px 0;
  text-align: center;
}
.pm-diff-cta__headline {
  font-family: var(--pm-font-serif); font-weight: 500; font-size: 30px; line-height: 1.2;
  color: #fff; max-width: 680px; margin: 0 auto 16px; letter-spacing: -0.01em; text-wrap: pretty;
}
.pm-diff-cta__sub {
  font-family: var(--pm-font-sans); font-size: 16px; line-height: 1.6;
  color: #c3d2e6; max-width: 620px; margin: 0 auto 30px; text-wrap: pretty;
}

/* ---------- Trademark footnote (deep navy) ---------- */
.pm-diff-tm { background: #081f38; padding: 24px 0 30px; }
.pm-diff-tm__text {
  font-family: var(--pm-font-sans); font-style: italic; font-size: 12px; line-height: 1.6;
  color: rgba(156, 196, 230, 0.6); margin: 0;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .pm-diff-hero__title { font-size: clamp(30px, 6vw, 46px); }
}
@media (max-width: 640px) {
  .pm-diff-inner,
  .pm-diff-hero__inner { width: min(100%, 100% - 40px); }
  .pm-diff-hero { padding: 48px 0 54px; }
  .pm-diff-hero__watermark { font-size: 150px; bottom: -30px; }
  .pm-diff-lead { font-size: 18px; }
  .pm-diff-h2 { font-size: 24px; }
  .pm-diff-testcard { padding: 28px 24px; }
  .pm-diff-testcard__body { font-size: 18px; }
  .pm-diff-cta__headline { font-size: 25px; }
}

/* ============================================================================
   Growth & ROI landing page  (/grow-without-adding-payroll/)  — pm-growth-*
   Supporting page for hero filmstrip slide 5. Design: "1B — Ledger" handoff
   (centered statement hero, sticky numbered index rail, ledger-style grid tables,
   navy CTA panel). Reuses :root tokens; literals for semantic colors not in :root
   (gold-2, page bg, ink/body grays, rail muted, numeral blue, zebra, hairlines).
   Scroll-spy behaviour: assets/js/pm-growth.js.
   ========================================================================== */

.pm-growth { background: var(--pm-paper); }

/* ---------- 1. Hero — centered statement ---------- */
.pm-growth-hero { border-bottom: 1px solid var(--pm-line); }
.pm-growth-hero__inner {
  width: min(980px, 100% - 48px);
  margin-inline: auto;
  padding: 92px 0 72px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.pm-growth-hero__eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
  margin: 0;
}
.pm-growth-hero__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 58px;
  line-height: 1.08;
  letter-spacing: -0.015em;
  color: var(--pm-navy);
  margin: 0;
  max-width: 15em;
  text-wrap: pretty;
}
.pm-growth-hero__lead {
  font-family: var(--pm-font-sans);
  font-size: 18px;
  line-height: 1.7;
  color: #3c4a57;
  margin: 6px 0 0;
  max-width: 44em;
  text-align: left;
  text-wrap: pretty;
}
.pm-growth-hero__lead strong { color: var(--pm-navy); font-weight: 600; }

/* ---------- 2. Body — two-column grid with sticky rail ---------- */
.pm-growth-body__inner {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 250px 1fr;
  gap: 64px;
  padding: 64px 0 80px;
}

.pm-growth-rail {
  position: sticky;
  top: 24px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--pm-font-mono);
  font-size: 13px;
}
.pm-growth-rail__head {
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a99a8;
  padding: 0 0 12px;
  border-bottom: 1px solid var(--pm-line);
  margin: 0 0 10px;
}
.pm-growth-rail__link {
  display: flex;
  gap: 12px;
  padding: 9px 10px;
  border-left: 3px solid transparent;
  color: var(--pm-slate);
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.pm-growth-rail__num { color: #9cc4e6; }
.pm-growth-rail__link:hover { color: var(--pm-navy); }
.pm-growth-rail__link.is-active {
  border-left-color: var(--pm-gold);
  background: #f3f6fa;
  color: var(--pm-navy);
}
.pm-growth-rail__link.is-active .pm-growth-rail__num { color: var(--pm-gold-d); }
.pm-growth-rail__cta {
  margin-top: 22px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  background: var(--pm-gold);
  color: var(--pm-navy);
  font-family: var(--pm-font-sans);
  font-weight: 700;
  font-size: 14px;
  padding: 12px 18px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pm-growth-rail__cta:hover { background: var(--pm-gold-d); color: var(--pm-navy); }

.pm-growth-content {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: 760px;
  min-width: 0; /* let the grid track shrink so tablewrap overflow-x can scroll */
}
.pm-growth-sec { display: flex; flex-direction: column; gap: 16px; }
.pm-growth-sec:focus { outline: none; }
.pm-growth-sec__head {
  display: flex;
  align-items: baseline;
  gap: 14px;
  border-bottom: 2px solid var(--pm-navy);
  padding-bottom: 12px;
}
.pm-growth-sec__num { font-family: var(--pm-font-mono); font-size: 13px; color: var(--pm-gold-d); }
.pm-growth-sec__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 26px;
  color: var(--pm-navy);
  margin: 0;
}
.pm-growth-p {
  font-family: var(--pm-font-sans);
  font-size: 16.5px;
  line-height: 1.62;
  color: #3c4a57;
  margin: 0;
}
.pm-growth-p strong { color: var(--pm-navy); font-weight: 600; }
.pm-growth-caption {
  font-family: var(--pm-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--pm-slate);
  margin: 0;
}

/* Ledger tables share a horizontal-scroll wrapper on small screens */
.pm-growth-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0; min-width: 0; }
.pm-growth-sec { min-width: 0; }

/* Role table (2-col) */
.pm-growth-roletable { border: 1px solid var(--pm-line); min-width: 320px; }
.pm-growth-roletable__head,
.pm-growth-roletable__row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: baseline;
}
.pm-growth-roletable__head {
  padding: 12px 20px;
  background: #f3f6fa;
  border-bottom: 1px solid var(--pm-line);
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-slate);
}
.pm-growth-roletable__row { padding: 14px 20px; border-bottom: 1px solid #e8edf3; }
.pm-growth-roletable__row--last { border-bottom: 0; }
.pm-growth-roletable__role { font-family: var(--pm-font-sans); font-size: 15.5px; color: #16222e; }
.pm-growth-roletable__val {
  font-family: var(--pm-font-mono);
  font-size: 16px;
  color: var(--pm-navy);
  text-align: right;
}
.pm-growth-roletable__val--strong { font-weight: 500; }

/* Math comparison table (3-col) */
.pm-growth-math { border: 1px solid var(--pm-line); min-width: 560px; }
.pm-growth-math__head,
.pm-growth-math__row {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
}
.pm-growth-math__head { background: var(--pm-navy); color: #fff; }
.pm-growth-math__row { border-bottom: 1px solid #e8edf3; }
.pm-growth-math__row--zebra { background: #f9fbfd; }
.pm-growth-math__row--last { border-bottom: 0; }
.pm-growth-math__cell { padding: 13px 20px; }
.pm-growth-math__head .pm-growth-math__cell { padding: 12px 20px; }
.pm-growth-math__th {
  font-family: var(--pm-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.pm-growth-math__th--today   { color: #9cc4e6; }
.pm-growth-math__th--paulmar { color: #ffd34d; }
.pm-growth-math__label   { font-family: var(--pm-font-sans); font-size: 14.5px; color: #16222e; }
.pm-growth-math__today   { font-family: var(--pm-font-sans); font-size: 14.5px; color: var(--pm-slate); }
.pm-growth-math__paulmar { font-family: var(--pm-font-sans); font-size: 14.5px; color: var(--pm-navy); }
.pm-growth-math__paulmar--b { font-weight: 600; }
.pm-growth-math__paulmar strong { font-weight: 600; }

/* §04 bullets — gold diamond markers */
.pm-growth-bullets {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pm-growth-bullet { display: flex; gap: 16px; align-items: baseline; }
.pm-growth-bullet__mark {
  width: 8px;
  height: 8px;
  background: var(--pm-gold);
  transform: rotate(45deg);
  flex: none;
  position: relative;
  top: -1px;
}
.pm-growth-bullet__text {
  font-family: var(--pm-font-sans);
  font-size: 16px;
  line-height: 1.6;
  color: #3c4a57;
}
.pm-growth-bullet__text strong { color: var(--pm-navy); font-weight: 600; }

/* ---------- 3. CTA panel ---------- */
.pm-growth-cta { background: #e7edf4; padding: 0 0 72px; }
.pm-growth-cta__panel {
  box-sizing: border-box;
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  margin-top: -36px;
  position: relative;
  top: 36px;
  background: var(--pm-navy);
  box-shadow: 0 2px 6px rgba(10, 40, 69, 0.18), 0 40px 90px -34px rgba(10, 40, 69, 0.6);
  padding: 56px 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}
.pm-growth-cta__eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pm-gold);
  margin: 0 0 12px;
}
.pm-growth-cta__line {
  font-family: var(--pm-font-serif);
  font-size: 25px;
  line-height: 1.4;
  color: #fff;
  margin: 0;
  max-width: 24em;
  text-wrap: pretty;
}
.pm-growth-cta__btn {
  flex: none;
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: var(--pm-gold);
  color: var(--pm-navy);
  font-family: var(--pm-font-sans);
  font-weight: 700;
  font-size: 16px;
  padding: 16px 30px;
  border-radius: 4px;
  text-decoration: none;
  transition: background 0.15s ease;
}
.pm-growth-cta__btn:hover { background: var(--pm-gold-d); color: var(--pm-navy); }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .pm-growth-hero__inner { padding: 64px 0 52px; }
  .pm-growth-hero__title { font-size: clamp(34px, 6vw, 58px); }
  .pm-growth-body__inner {
    grid-template-columns: 1fr;
    gap: 0;
    padding: 48px 0 64px;
  }
  .pm-growth-rail { display: none; }
  .pm-growth-content { max-width: none; gap: 48px; }
  .pm-growth-cta__panel {
    flex-direction: column;
    align-items: flex-start;
    gap: 26px;
    padding: 40px 28px;
  }
}
@media (max-width: 600px) {
  .pm-growth-cta__line { font-size: 22px; }
  .pm-growth-cta__btn { width: 100%; justify-content: center; }
}

/* ============================================================================
   Back-to-homepage wayfinding  — pm-backnav
   Shared by all five hero-slide landing pages (authority, opportunity, solvency,
   differentiation, growth). A uniform slim bar at the very bottom, above the site
   footer. Not tied to any page's BEM prefix so every landing page renders it
   identically. Paper background so it reads the same regardless of the CTA above.
   ========================================================================== */
.pm-backnav { background: var(--pm-paper); }
.pm-backnav--foot { border-top: 1px solid var(--pm-line); }
.pm-backnav__inner {
  width: min(1180px, 100% - 48px);
  margin-inline: auto;
  padding: 15px 0;
}
.pm-backnav__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pm-slate);
  text-decoration: none;
  transition: color 0.15s ease;
}
.pm-backnav__link:hover { color: var(--pm-navy); }
.pm-backnav__arrow {
  font-size: 14px;
  line-height: 1;
  transition: transform 0.15s ease;
}
.pm-backnav__link:hover .pm-backnav__arrow { transform: translateX(-3px); }

/* ============================================================================
   Benefits page — landing-page link cards  (pm-benefit-*)
   Replaces the old "Workload reduction" / "Other financial opportunities" stat
   blocks on /benefits/ with a 5-card grid linking to the hero-chapter landing
   pages. Matches the .pm-stat card language (paper, gold top border, radius 6).
   ========================================================================== */
.pm-benefit-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 26px 0 10px;
}
.pm-benefit-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--pm-paper);
  border: 1px solid var(--pm-line);
  border-top: 4px solid var(--pm-gold);
  border-radius: 6px;
  padding: 24px 24px 22px;
  text-decoration: none;
  transition: box-shadow 0.15s ease, transform 0.15s ease;
}
.pm-benefit-card:hover {
  box-shadow: 0 18px 40px -24px rgba(10, 40, 69, 0.45);
  transform: translateY(-3px);
}
.pm-benefit-card:focus-visible {
  outline: 2px solid var(--pm-gold);
  outline-offset: 2px;
}
.pm-benefit-card__eyebrow {
  font-family: var(--pm-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pm-gold-d);
}
.pm-benefit-card__title {
  font-family: var(--pm-font-serif);
  font-weight: 600;
  font-size: 21px;
  line-height: 1.2;
  color: var(--pm-navy);
  margin: 0;
}
.pm-benefit-card__summary {
  font-family: var(--pm-font-sans);
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--pm-slate);
  margin: 0;
  flex: 1 1 auto;
}
.pm-benefit-card__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 4px;
  font-family: var(--pm-font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0e4c8a;
  transition: color 0.15s ease, gap 0.15s ease;
}
.pm-benefit-card:hover .pm-benefit-card__more { color: var(--pm-navy); gap: 11px; }
@media (max-width: 820px) { .pm-benefit-links { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px) { .pm-benefit-links { grid-template-columns: 1fr; } }
