/* Primansh public site — "Industry" design system.
   Shared by every static marketing page (home, about, services, contact,
   blog, case studies). These pages are served directly by Vercel and never
   boot the React app, so this file is the whole style layer for them: tokens,
   type scale, components, page shells.

   It is deliberately independent of the React app's Tailwind theme. The admin
   portal and the article/detail routes still render through src/, so nothing
   here may leak into that build — hence plain CSS on plain class names rather
   than anything shared with tailwind.config.ts.

   Ported from a Claude Design export whose prototype resolved responsive
   values in JS (renderVals) and hover states via a style-hover attribute;
   both are plain CSS here — custom properties per breakpoint and real :hover
   rules — so the pages need no framework to render. */

/* ══════════════════════════════════════════════════════════════════════
   Tokens
   ══════════════════════════════════════════════════════════════════ */

:root {
  --color-bg: #f2f2f3;
  --color-surface: #e9e9ea;
  --color-text: #1d1f20;
  --color-accent: #5980a6;
  --color-accent-2: #728fab;
  --color-divider: color-mix(in srgb, #1d1f20 16%, transparent);

  --color-neutral-100: #f5f5f8;
  --color-neutral-200: #e7e7ea;
  --color-neutral-300: #d4d4d7;
  --color-neutral-400: #b7b7ba;
  --color-neutral-500: #98989b;
  --color-neutral-600: #7a7a7d;
  --color-neutral-700: #5d5d60;
  --color-neutral-800: #424244;
  --color-neutral-900: #2b2b2d;

  --color-accent-100: #eef6ff;
  --color-accent-200: #d6ebff;
  --color-accent-300: #b5d9fd;
  --color-accent-400: #94bce3;
  --color-accent-500: #749dc4;
  --color-accent-600: #597ea3;
  --color-accent-700: #416180;
  --color-accent-800: #2c455d;
  --color-accent-900: #1d2d3d;

  --font-heading: "Barlow Condensed", system-ui, sans-serif;
  --font-heading-weight: 600;
  --font-body: "Barlow", system-ui, sans-serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 7px;

  --shadow-sm: 0 1px 2px color-mix(in srgb, #2b2b2d 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2b2b2d 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2b2b2d 22%, transparent);

  /* Responsive values — the prototype recomputed these in JS on every
     resize; here each breakpoint just re-declares the custom property. */
  --pm-pad-x: 4%;
  --pm-gap-lg: 56px;
  --pm-gap-md: 32px;
  --pm-h1: 76px;
  --pm-cols-hero: 1.15fr 0.85fr;
  --pm-cols-split: 0.9fr 1.1fr;
  --pm-cols-faq: 0.7fr 1.3fr;
  --pm-cols-footer: 1.4fr 0.6fr 0.6fr 0.6fr;
  --pm-cols-5: repeat(5, 1fr);
  --pm-cols-3: repeat(3, 1fr);
  --pm-cols-2: repeat(2, 1fr);
  /* Listing cards step down one column at a time (3/2/1), unlike the home
     page's feature grid which drops straight from 3 to 1. */
  --pm-cols-cards: repeat(3, 1fr);
  --pm-rail-card: 420px;
  --pm-audit-rule-l: 1px solid var(--color-divider);
  --pm-audit-rule-t: 0;
}

@media (max-width: 1119.98px) {
  :root { --pm-h1: 62px; --pm-cols-5: repeat(3, 1fr); --pm-cols-cards: repeat(2, 1fr); }
}

@media (max-width: 899.98px) {
  :root {
    --pm-gap-lg: 32px;
    --pm-h1: 54px;
    --pm-cols-hero: 1fr;
    --pm-cols-split: 1fr;
    --pm-cols-faq: 1fr;
    --pm-cols-5: repeat(2, 1fr);
    --pm-cols-3: 1fr;
    --pm-rail-card: 58vw;
    --pm-audit-rule-l: 0;
    --pm-audit-rule-t: 1px solid var(--color-divider);
  }
}

@media (max-width: 619.98px) {
  :root {
    --pm-gap-md: 20px;
    --pm-h1: 42px;
    --pm-cols-footer: 1fr 1fr;
    --pm-cols-5: 1fr;
    --pm-cols-2: 1fr;
    --pm-cols-cards: 1fr;
    --pm-rail-card: 84vw;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   Base
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }
section { scroll-margin-top: 80px; }

.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Blueprint frame — the system's signature: square, hairline-bordered
   boxes with registration marks at the corners.
   ══════════════════════════════════════════════════════════════════ */

.blueprint {
  position: relative;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.blueprint > .corner {
  position: absolute;
  width: 11px;
  height: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.blueprint > .corner::before,
.blueprint > .corner::after { content: ""; position: absolute; background: currentColor; }
.blueprint > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.blueprint > .corner::after { top: 5px; left: 0; width: 100%; height: 1px; }
.blueprint > .corner.tl { top: -6px; left: -6px; }
.blueprint > .corner.tr { top: -6px; right: -6px; }
.blueprint > .corner.bl { bottom: -6px; left: -6px; }
.blueprint > .corner.br { bottom: -6px; right: -6px; }

/* ══════════════════════════════════════════════════════════════════════
   Components
   ══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  text-decoration: none;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 14px;
  line-height: 1.2;
  color: var(--color-text);
  background: transparent;
  border: 1px solid var(--color-divider);
  border-radius: 0;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
}
.btn-primary { background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); color: var(--color-bg); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent); border-color: transparent; padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-block { width: 100%; margin-top: var(--space-2); }

.field > label {
  display: block;
  font-size: 12px;
  margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%;
  min-height: 36px;
  padding: 6px 10px;
  font: inherit;
  font-size: 14px;
  color: var(--color-text);
  caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }

.seg {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--color-divider);
  border-radius: 0;
}
.seg-opt {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  font-size: 13px;
  cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt input { position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none; }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

.card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  border-radius: 0;
  background: transparent;
  border: 1px solid var(--color-divider);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent); }
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }

.tag {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.02em;
  padding: 3px 10px;
  border-radius: 0;
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2);
  border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* ══════════════════════════════════════════════════════════════════════
   Motion
   ══════════════════════════════════════════════════════════════════ */

@keyframes pm-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes pm-scan {
  0% { transform: translateY(0); opacity: 0; }
  12% { opacity: 0.9; }
  88% { opacity: 0.9; }
  100% { transform: translateY(var(--pm-scan-h, 320px)); opacity: 0; }
}
@keyframes pm-blink { 0%, 60% { opacity: 1; } 61%, 100% { opacity: 0.25; } }
@keyframes pm-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-radiate {
  0%, 100% { opacity: 0.34; transform: scale(1); }
  50% { opacity: 0.62; transform: scale(1.08); }
}
@keyframes pm-ring {
  0% { transform: scale(0.35); opacity: 0.55; }
  70% { opacity: 0.12; }
  100% { transform: scale(1.6); opacity: 0; }
}
@keyframes pm-glow {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-accent) 42%, transparent); }
  50% { box-shadow: 0 0 22px 3px color-mix(in srgb, var(--color-accent) 26%, transparent); }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   Page shell
   ══════════════════════════════════════════════════════════════════ */

.pm-root {
  width: 100%;
  min-height: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  background-image:
    linear-gradient(color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--color-text) 4%, transparent) 1px, transparent 1px);
  background-size: 68px 68px;
  background-position: center top;
}

.pm-wrap { max-width: none; margin: 0 auto; padding-inline: var(--pm-pad-x); }

/* — header — */

.pm-header {
  position: sticky;
  overflow: visible;
  top: 0;
  z-index: 30;
  background: color-mix(in srgb, var(--color-bg) 90%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid transparent;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}
.pm-header.is-scrolled {
  border-bottom-color: var(--color-divider);
  box-shadow: 0 1px 2px color-mix(in srgb, #2b2b2d 10%, transparent);
}
.pm-progress {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  background: var(--color-accent);
}
.pm-nav {
  max-width: none;
  margin: 0 auto;
  padding: 14px var(--pm-pad-x);
  display: flex;
  align-items: center;
  gap: 28px;
}
.pm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: 0.14em;
  font-size: 17px;
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  text-decoration: none;
  color: var(--color-text);
}
/* The real Primansh mark (public/icon.svg), replacing the placeholder square
   the design prototype drew in CSS. It carries its own white plate, so it is
   rounded here to sit on the paper background rather than float on a card. */
.pm-brand-logo {
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 7px;
  flex: none;
}

/* Footer lockup — mark above the wordmark. */
.pm-footer-logo {
  display: block;
  width: 38px;
  height: 38px;
  border-radius: 9px;
  margin-bottom: 12px;
}
.pm-nav-links { display: flex; gap: 22px; align-items: center; margin-left: auto; }
.pm-nav-links a {
  color: inherit;
  text-decoration: none;
  font-size: 13px;
  letter-spacing: 0.04em;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}
.pm-nav-links a:hover { color: var(--color-accent-700); border-color: var(--color-accent); }
.pm-nav-links a[aria-current="page"] { color: var(--color-accent-700); border-color: var(--color-accent); }
.pm-menu a[aria-current="page"] { color: var(--color-accent-700); }
.pm-nav-cta { padding: 9px 18px; letter-spacing: 0.04em; }
/* Two header actions now sit side by side (audit CTA + demo dashboard), so
   they get their own gap rather than inheriting the nav's wide 28px. */
.pm-nav-actions { display: flex; align-items: center; gap: 10px; }
.pm-nav-demo { padding: 9px 16px; letter-spacing: 0.04em; white-space: nowrap; }
@media (max-width: 1119.98px) { .pm-nav-demo { display: none; } }
.pm-burger {
  display: none;
  margin-left: auto;
  width: 40px;
  height: 40px;
  min-width: 40px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--color-divider);
  cursor: pointer;
  color: var(--color-text);
}
.pm-burger span {
  display: block;
  width: 18px;
  height: 1px;
  background: currentColor;
  box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor;
}
.pm-menu {
  display: none;
  border-top: 1px solid var(--color-divider);
  padding: 8px var(--pm-pad-x) 20px;
  flex-direction: column;
  gap: 2px;
}
.pm-menu.is-open { display: flex; }
.pm-menu a:not(.btn) {
  color: inherit;
  text-decoration: none;
  font-family: var(--font-heading);
  font-size: 20px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-divider);
}
.pm-menu a:not(.btn):last-of-type { border-bottom: 0; }
.pm-menu .btn { margin-top: 14px; padding: 13px 18px; letter-spacing: 0.04em; }

@media (max-width: 899.98px) {
  .pm-nav-links, .pm-nav-cta { display: none; }
  .pm-burger { display: inline-flex; }
}
@media (min-width: 900px) {
  .pm-menu, .pm-menu.is-open { display: none; }
}

/* — hero — */

.pm-hero {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 64px var(--pm-pad-x) 40px;
  display: grid;
  grid-template-columns: var(--pm-cols-hero);
  gap: var(--pm-gap-lg);
  align-items: start;
}
.pm-hero-glow {
  position: absolute;
  left: -8%;
  top: -6%;
  width: 60%;
  aspect-ratio: 1;
  pointer-events: none;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--color-accent) 26%, transparent), transparent 62%);
  filter: blur(18px);
  animation: pm-radiate 9s ease-in-out infinite;
  z-index: 0;
}
.pm-hero-col { position: relative; z-index: 1; }
.pm-hero-rule { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.pm-hero-rule .line { flex: 1; height: 1px; background: var(--color-divider); }
.pm-hero-doc {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pm-hero h1 {
  font-size: var(--pm-h1);
  line-height: 0.94;
  letter-spacing: -0.02em;
  margin: 0 0 24px;
  max-width: 15ch;
}
.pm-hero-lead {
  font-size: 17px;
  line-height: 1.6;
  max-width: 52ch;
  margin: 0 0 14px;
  color: color-mix(in srgb, var(--color-text) 78%, transparent);
}
.pm-hero-sub {
  font-size: 14px;
  max-width: 52ch;
  margin: 0 0 30px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pm-hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.pm-cta-main {
  padding: 13px 22px;
  font-size: 15px;
  letter-spacing: 0.04em;
  transition: transform 0.35s cubic-bezier(.16, 1, .3, 1), background 0.25s ease, box-shadow 0.35s ease;
  animation: pm-glow 4.5s ease-in-out infinite;
}
.pm-cta-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.pm-cta-alt { padding: 13px 20px; font-size: 15px; letter-spacing: 0.04em; }

.pm-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 52px;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.pm-stat { padding: 18px 20px; border-right: 1px solid var(--color-divider); }
.pm-stat:first-child { padding-left: 0; }
.pm-stat:last-child { padding-right: 0; border-right: 0; }
.pm-stat-value { font-family: var(--font-heading); font-size: 38px; line-height: 1; color: var(--color-accent-700); }
.pm-stat-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
  margin-top: 6px;
}

/* — audit sheet — */

.pm-sheet {
  padding: 0;
  background: transparent;
  position: relative;
  z-index: 1;
  animation: pm-fade 1s ease 0.15s both;
}
.pm-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-divider);
}
.pm-sheet-title { font-family: var(--font-heading); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; }
.pm-sheet-meta {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pm-sheet-dot { width: 6px; height: 6px; background: var(--color-accent); animation: pm-blink 1.6s steps(1, end) infinite; }
.pm-sheet-scanwrap { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pm-sheet-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
  --pm-scan-h: 420px;
  animation: pm-scan 5.5s cubic-bezier(.4, 0, .6, 1) infinite;
}
.pm-sheet table { font-size: 13px; }
.pm-sheet td { padding: 11px 18px; }
.pm-sheet td:nth-child(1) { width: 34px; font-family: var(--font-heading); color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.pm-sheet td:nth-child(2) { padding-left: 0; }
.pm-sheet td:nth-child(3) { text-align: right; }
.pm-sheet-foot {
  padding: 16px 18px;
  border-top: 1px solid var(--color-divider);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.pm-sheet-foot-label {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.pm-sheet-foot-value { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; }

/* — ticker — */

.pm-ticker {
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
  overflow: hidden;
  padding: 16px 0;
  margin-top: 24px;
}
.pm-ticker-track { display: flex; width: max-content; animation: pm-ticker 42s linear infinite; }
.pm-ticker-track:hover { animation-play-state: paused; }
.pm-ticker-group { display: flex; }
.pm-ticker-item {
  font-family: var(--font-heading);
  font-size: 15px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0 26px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — section furniture — */

.pm-section { max-width: none; margin: 0 auto; padding: 88px var(--pm-pad-x); }
.pm-section-head {
  display: grid;
  grid-template-columns: var(--pm-cols-split);
  gap: var(--pm-gap-lg);
  align-items: end;
  margin-bottom: 44px;
}
.pm-eyebrow { color: var(--color-accent-700); margin: 0 0 12px; }
.pm-h2 { font-size: 44px; line-height: 1.02; margin: 0; }
.pm-section-head p {
  font-size: 16px;
  margin: 0;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
  max-width: 56ch;
}

/* — problem — */

.pm-steps {
  position: relative;
  display: grid;
  grid-template-columns: var(--pm-cols-5);
  border-top: 1px solid var(--color-divider);
}
.pm-steps-draw {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 2px;
  background: var(--color-accent);
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.4s cubic-bezier(.16, 1, .3, 1);
}
.pm-steps-draw.is-drawn { transform: scaleX(1); }
.pm-step { padding: 26px 22px 30px; border-right: 1px solid var(--color-divider); }
.pm-step:first-child { padding-left: 0; }
.pm-step:last-child { padding-right: 0; border-right: 0; }
.pm-step-num { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.14em; color: var(--color-accent); margin-bottom: 16px; }
.pm-step h4 { margin: 0 0 8px; font-size: 19px; }
.pm-step p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* — dark sections — */

.pm-dark {
  position: relative;
  overflow: hidden;
  background: var(--color-accent-900);
  color: var(--color-bg);
  border-top: 1px solid var(--color-divider);
}
.pm-dark h2 { color: var(--color-bg); }
.pm-particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.pm-rings {
  position: absolute;
  right: -90px;
  top: 50%;
  width: 420px;
  height: 420px;
  margin-top: -210px;
  pointer-events: none;
}
.pm-rings span {
  position: absolute;
  inset: 0;
  border: 1px solid color-mix(in srgb, var(--color-accent-300) 45%, transparent);
  border-radius: 50%;
  animation: pm-ring 7s ease-out infinite;
}
.pm-rings span:nth-child(2) { animation-delay: 2.3s; }
.pm-rings span:nth-child(3) { animation-delay: 4.6s; }

.pm-framework-inner { position: relative; z-index: 1; max-width: none; margin: 0 auto; padding: 88px var(--pm-pad-x); }
.pm-framework-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 48px;
}
.pm-framework-head h6 { color: var(--color-accent-300); margin: 0 0 12px; }
.pm-framework-tags { display: flex; gap: 10px; flex-wrap: wrap; }
.pm-framework-tags .tag {
  border: 1px solid color-mix(in srgb, var(--color-bg) 35%, transparent);
  color: var(--color-accent-200);
}
.pm-framework-grid { display: grid; grid-template-columns: var(--pm-cols-3); gap: var(--pm-gap-md); }
.pm-framework-card {
  border-color: color-mix(in srgb, var(--color-bg) 30%, transparent);
  padding: 28px 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), background 0.35s ease, border-color 0.3s ease;
}
.pm-framework-card:hover {
  transform: translateY(-5px);
  background: color-mix(in srgb, var(--color-bg) 7%, transparent);
  border-color: color-mix(in srgb, var(--color-bg) 60%, transparent);
}
.pm-framework-card > .corner { color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.pm-framework-card .kicker { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.14em; color: var(--color-accent-300); }
.pm-framework-card h3 { margin: 0; font-size: 26px; color: var(--color-bg); }
.pm-framework-card p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-bg) 78%, transparent); }

/* — services — */

.pm-services-grid { display: grid; grid-template-columns: var(--pm-cols-2); gap: var(--pm-gap-md); }
.pm-service-card {
  padding: 26px 24px;
  gap: 10px;
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), border-color 0.3s ease, box-shadow 0.45s ease;
}
.pm-service-card:hover { transform: translateY(-5px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
.pm-service-top { display: flex; justify-content: space-between; align-items: baseline; }
.pm-service-time {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.pm-service-card h3 { margin: 0; font-size: 26px; }
.pm-service-card .card-body { font-size: 14px; }

/* — audit form — */

.pm-audit { max-width: none; margin: 0 auto; padding: 0 var(--pm-pad-x) 88px; }
.pm-audit-box { display: grid; grid-template-columns: var(--pm-cols-hero); align-items: stretch; }
.pm-audit-copy { padding: 44px 40px; }
.pm-audit-copy h2 { font-size: 40px; line-height: 1.02; margin: 0 0 16px; max-width: 22ch; }
.pm-audit-copy p { font-size: 15px; max-width: 48ch; color: color-mix(in srgb, var(--color-text) 72%, transparent); }
.pm-audit-copy .fine { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); margin: 0; }
.pm-audit-form {
  padding: 44px 40px;
  border-left: var(--pm-audit-rule-l);
  border-top: var(--pm-audit-rule-t);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pm-audit-form .btn { padding: 13px 20px; font-size: 15px; letter-spacing: 0.04em; margin-top: 6px; }
.pm-form-note { font-size: 12px; color: color-mix(in srgb, var(--color-text) 50%, transparent); min-height: 18px; }

@media (max-width: 619.98px) {
  .pm-audit-copy, .pm-audit-form { padding: 32px 22px; }
}

/* — work — */

.pm-work { max-width: none; margin: 0 auto; padding: 0 var(--pm-pad-x) 88px; }
.pm-work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pm-work-scroll { overflow-x: auto; }
.pm-work table { min-width: 640px; }
.pm-work td:first-child { font-family: var(--font-heading); color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.pm-work th:first-child { width: 32px; }
.pm-work th:last-child, .pm-work td:last-child { text-align: right; }
.pm-work td:last-child { font-family: var(--font-heading); font-size: 19px; }
.pm-work tr[hidden] { display: none; }

/* — testimonials — */

.pm-quotes {
  position: relative;
  overflow: hidden;
  border-top: 1px solid var(--color-divider);
  border-bottom: 1px solid var(--color-divider);
}
.pm-quotes-head { max-width: none; margin: 0 auto; padding: 72px var(--pm-pad-x) 30px; }
.pm-rail {
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}
.pm-rail-a { padding: 0 0 20px; }
.pm-rail-b { padding: 0 0 72px; }
.pm-rail-track { display: flex; width: max-content; gap: 24px; padding: 6px 0; animation: pm-ticker 56s linear infinite; }
.pm-rail-b .pm-rail-track { animation-duration: 64s; animation-direction: reverse; }
.pm-rail-track:hover { animation-play-state: paused; }
.pm-quote {
  flex: 0 0 var(--pm-rail-card);
  margin: 0;
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), border-color 0.3s ease;
}
.pm-quote:hover { transform: translateY(-5px); border-color: var(--color-accent); }
.pm-quote-loc { font-family: var(--font-heading); font-size: 11px; letter-spacing: 0.16em; color: var(--color-accent); }
.pm-quote p { font-family: var(--font-heading); font-size: 23px; line-height: 1.24; margin: 0; }
.pm-quote-by { margin-top: auto; font-size: 12px; color: color-mix(in srgb, var(--color-text) 60%, transparent); }
.pm-quotes-fade { position: absolute; top: 0; bottom: 0; width: 14%; pointer-events: none; }
.pm-quotes-fade.is-left {
  left: 0;
  background: linear-gradient(90deg, var(--color-bg), color-mix(in srgb, var(--color-bg) 40%, transparent) 55%, transparent);
  box-shadow: inset 22px 0 26px -18px color-mix(in srgb, #2b2b2d 22%, transparent);
}
.pm-quotes-fade.is-right {
  right: 0;
  background: linear-gradient(270deg, var(--color-bg), color-mix(in srgb, var(--color-bg) 40%, transparent) 55%, transparent);
  box-shadow: inset -22px 0 26px -18px color-mix(in srgb, #2b2b2d 22%, transparent);
}

/* — faq — */

.pm-faq-grid { display: grid; grid-template-columns: var(--pm-cols-faq); gap: var(--pm-gap-lg); align-items: start; }
.pm-faq-intro h2 { font-size: 44px; line-height: 1.02; margin: 0 0 14px; }
.pm-faq-intro p { font-size: 14px; color: color-mix(in srgb, var(--color-text) 60%, transparent); max-width: 34ch; }
.pm-faq-list { border-top: 1px solid var(--color-divider); }
.pm-faq-item { border-bottom: 1px solid var(--color-divider); }
.pm-faq-trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  background: transparent;
  border: 0;
  padding: 22px 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 21px;
  color: var(--color-text);
  transition: color 0.25s ease;
}
.pm-faq-trigger:hover { color: var(--color-accent-700); }
.pm-faq-sign { font-size: 18px; color: var(--color-accent); }
.pm-faq-answer {
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: max-height 0.5s cubic-bezier(.16, 1, .3, 1), opacity 0.35s ease, padding 0.4s ease;
  margin: 0;
  padding: 0;
  max-width: 62ch;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 72%, transparent);
}
.pm-faq-item.is-open .pm-faq-answer { max-height: 260px; opacity: 1; padding: 0 0 22px; }

/* — contact — */

.pm-contact-inner {
  position: relative;
  z-index: 1;
  max-width: none;
  margin: 0 auto;
  padding: 80px var(--pm-pad-x);
  display: grid;
  grid-template-columns: var(--pm-cols-hero);
  gap: var(--pm-gap-lg);
  align-items: center;
}
.pm-contact-inner h6 { color: var(--color-accent-300); margin: 0 0 14px; }
.pm-contact-inner h2 { font-size: 52px; line-height: 1; margin: 0 0 18px; max-width: 20ch; }
.pm-contact-inner > div > p { font-size: 16px; margin: 0; max-width: 46ch; color: color-mix(in srgb, var(--color-bg) 78%, transparent); }
.pm-contact-actions { display: flex; flex-direction: column; gap: 14px; }
.pm-contact-actions .btn-primary { padding: 15px 22px; font-size: 15px; letter-spacing: 0.04em; }
.pm-contact-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pm-contact-card {
  text-decoration: none;
  color: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-bg) 30%, transparent);
  padding: 14px 16px;
}
.pm-contact-card:hover { color: var(--color-bg); border-color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.pm-contact-card .label {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent-300);
  margin-bottom: 4px;
}
.pm-contact-card .value { font-family: var(--font-heading); font-size: 16px; }

/* — footer — */

.pm-footer {
  max-width: none;
  margin: 0 auto;
  padding: 56px var(--pm-pad-x) 40px;
  display: grid;
  grid-template-columns: var(--pm-cols-footer);
  gap: 40px;
}
.pm-footer-brand { font-family: var(--font-heading); font-size: 17px; letter-spacing: 0.14em; margin-bottom: 12px; }
.pm-footer p { font-size: 13px; max-width: 38ch; color: color-mix(in srgb, var(--color-text) 62%, transparent); }
.pm-footer-head {
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
  margin-bottom: 12px;
}
.pm-footer-links { display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.pm-footer-links a { text-decoration: none; }
.pm-colophon {
  max-width: none;
  margin: 0 auto;
  padding: 20px var(--pm-pad-x) 44px;
  display: flex;
  justify-content: space-between;
  gap: 20px;
  border-top: 1px solid var(--color-divider);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}

/* — custom cursor — */

.pm-cursor { position: fixed; left: 0; top: 0; z-index: 120; pointer-events: none; display: none; will-change: transform; }
.pm-cursor-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 30px;
  height: 30px;
  margin: -15px 0 0 -15px;
  border: 1px solid color-mix(in srgb, var(--color-accent) 70%, transparent);
  background: transparent;
  transition: width 0.24s cubic-bezier(.16, 1, .3, 1), height 0.24s cubic-bezier(.16, 1, .3, 1),
    margin 0.24s cubic-bezier(.16, 1, .3, 1), border-radius 0.24s ease, background 0.24s ease,
    border-color 0.24s ease, opacity 0.2s ease;
}
.pm-cursor-vx { position: absolute; left: -7px; top: 0; width: 14px; height: 1px; background: var(--color-accent); transition: opacity 0.2s ease, background 0.24s ease; }
.pm-cursor-vy { position: absolute; left: 0; top: -7px; width: 1px; height: 14px; background: var(--color-accent); transition: opacity 0.2s ease, background 0.24s ease; }
.pm-cursor-label {
  position: absolute;
  left: 26px;
  top: 10px;
  font-family: var(--font-heading);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s ease, color 0.24s ease;
}

/* — scroll reveal — */

[data-pm-reveal] { opacity: 0; transform: translateY(20px); }
[data-pm-reveal].is-visible { opacity: 1; transform: none; }

/* ══════════════════════════════════════════════════════════════════════
   Editorial pages — blog and case-study listings
   ══════════════════════════════════════════════════════════════════ */

/* Duotone — an accent wash over an image well. The overlay is clipped by
   overflow:hidden, so a .blueprint sharing the element has to opt back out
   or its registration marks (drawn outside the box) get cut off. */
.duotone { position: relative; overflow: hidden; }
.duotone::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: var(--color-accent);
  mix-blend-mode: color;
}
.blueprint.duotone { overflow: visible; }

.pm-page-hero {
  position: relative;
  max-width: none;
  margin: 0 auto;
  padding: 64px var(--pm-pad-x) 40px;
}
.pm-page-hero h1 {
  font-size: var(--pm-h1);
  line-height: 0.96;
  letter-spacing: -0.02em;
  margin: 0 0 22px;
  max-width: 16ch;
}
.pm-page-hero .pm-hero-lead { margin: 0; max-width: 56ch; }

/* — featured entry — */

.pm-featured { max-width: none; margin: 0 auto; padding: 0 var(--pm-pad-x) 56px; }
.pm-featured-card {
  display: grid;
  grid-template-columns: var(--pm-cols-hero);
  align-items: stretch;
  transition: border-color 0.3s ease;
}
.pm-featured-card:hover { border-color: var(--color-accent); }
.pm-featured-copy { padding: 40px 36px; display: flex; flex-direction: column; gap: 16px; }
.pm-featured-meta { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.pm-featured-doc {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.pm-featured-copy h2 { margin: 0; font-size: 38px; line-height: 1.06; max-width: 20ch; }
.pm-featured-copy h2 a { text-decoration: none; color: inherit; transition: color 0.25s ease; }
.pm-featured-copy h2 a:hover { color: var(--color-accent-700); }
.pm-featured-copy > p {
  margin: 0;
  font-size: 15px;
  line-height: 1.6;
  max-width: 54ch;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.pm-featured-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: auto;
  padding-top: 16px;
}
.pm-featured-actions .btn { padding: 11px 18px; font-size: 14px; }
.pm-featured-read {
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.pm-featured-fig {
  margin: 0;
  min-height: 280px;
  background: var(--color-surface);
  display: grid;
  place-items: center;
  overflow: hidden;
  border-left: var(--pm-audit-rule-l);
  border-top: var(--pm-audit-rule-t);
}
.pm-featured-fig img { width: 100%; height: 100%; object-fit: cover; }
.pm-featured-fig .pm-fig-empty {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  text-align: center;
  padding: 0 20px;
}

@media (max-width: 619.98px) {
  .pm-featured-copy { padding: 30px 22px; }
}

/* — entry grid — */

.pm-entries { max-width: none; margin: 0 auto; padding: 0 var(--pm-pad-x) 72px; }
.pm-entries-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 28px;
}
.pm-entries-head h6 { color: var(--color-accent-700); margin: 0 0 12px; }
.pm-entries-head h2 { font-size: 40px; line-height: 1.02; margin: 0; }
/* A long category list does not fit a phone; the strip scrolls rather than
   wraps, so the segmented control keeps its single-row shape. */
.pm-filter { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
.pm-filter::-webkit-scrollbar { display: none; }
.pm-filter .seg { flex: none; }

.pm-entry-grid {
  display: grid;
  grid-template-columns: var(--pm-cols-cards);
  gap: var(--pm-gap-md);
  align-items: stretch;
}
.pm-entry {
  padding: 24px 24px 26px;
  gap: 12px;
  transition: transform 0.45s cubic-bezier(.16, 1, .3, 1), border-color 0.3s ease, box-shadow 0.45s ease;
}
.pm-entry:hover { transform: translateY(-5px); border-color: var(--color-accent); box-shadow: var(--shadow-md); }
/* .card sets display:flex, which outranks the hidden attribute's UA style. */
.pm-entry[hidden] { display: none; }
.pm-entry-fig {
  margin: -24px -24px 4px;
  aspect-ratio: 16 / 10;
  background: var(--color-surface);
  overflow: hidden;
}
.pm-entry-fig img { width: 100%; height: 100%; object-fit: cover; }
.pm-entry-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.pm-entry-num {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
}
.pm-entry h3 { margin: 0; font-size: 24px; line-height: 1.14; }
.pm-entry h3 a { text-decoration: none; color: inherit; transition: color 0.25s ease; }
.pm-entry h3 a:hover { color: var(--color-accent-700); }
.pm-entry p { margin: 0; font-size: 14px; color: color-mix(in srgb, var(--color-text) 70%, transparent); }
.pm-entry-foot {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--color-divider);
  padding-top: 12px;
  margin-top: auto;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 48%, transparent);
}
.pm-entries-empty {
  border: 1px dashed var(--color-divider);
  padding: 40px 24px;
  text-align: center;
  font-size: 14px;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
}

/* — newsletter / dark form band — */

.pm-band-form { display: flex; flex-direction: column; gap: 12px; }
.pm-band-form label { color: var(--color-accent-200); }
.pm-band-form .input {
  background: color-mix(in srgb, var(--color-bg) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-bg) 32%, transparent);
  color: var(--color-bg);
  caret-color: var(--color-accent-200);
}
.pm-band-form .input::placeholder { color: color-mix(in srgb, var(--color-bg) 45%, transparent); }
.pm-band-form .input:hover { border-color: color-mix(in srgb, var(--color-bg) 60%, transparent); }
.pm-band-form .input:focus-visible { border-color: var(--color-accent-300); }
.pm-band-form .btn { padding: 14px 22px; font-size: 15px; letter-spacing: 0.04em; }
.pm-band-note {
  font-size: 12px;
  min-height: 18px;
  color: color-mix(in srgb, var(--color-bg) 70%, transparent);
}

/* ══════════════════════════════════════════════════════════════════════
   Inner-page components — added for the about / careers / legal pages.
   Everything else on those pages reuses the vocabulary above.
   ══════════════════════════════════════════════════════════════════ */

/* Four-up stat row. .pm-stats is fixed at three columns because the home
   hero has exactly three; this variant wraps rather than crushing on narrow
   screens. */
.pm-stats-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 899.98px) { .pm-stats-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479.98px) { .pm-stats-4 { grid-template-columns: 1fr; } }

/* Side-by-side "with us / without us" columns. */
.pm-compare { display: grid; grid-template-columns: var(--pm-cols-2); gap: var(--pm-gap-md); }
.pm-compare-col { padding: 28px 26px; display: flex; flex-direction: column; gap: 18px; }
.pm-compare-col.is-loss { background: color-mix(in srgb, var(--color-text) 3%, transparent); }
.pm-compare-head {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-accent);
}
.pm-compare-col.is-loss .pm-compare-head { color: color-mix(in srgb, var(--color-text) 50%, transparent); }
.pm-compare-item { display: flex; gap: 14px; align-items: flex-start; }
.pm-compare-item .num {
  font-family: var(--font-heading);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: color-mix(in srgb, var(--color-text) 40%, transparent);
  padding-top: 3px;
  min-width: 18px;
}
.pm-compare-item h4 { margin: 0 0 3px; font-size: 17px; }
.pm-compare-item p { margin: 0; font-size: 13px; color: color-mix(in srgb, var(--color-text) 62%, transparent); }

/* Long-form legal copy (privacy, terms). */
.pm-prose { max-width: 72ch; }
.pm-prose h2 {
  font-size: 22px;
  margin: 40px 0 10px;
  scroll-margin-top: 90px;
}
.pm-prose h2:first-child { margin-top: 0; }
.pm-prose p { font-size: 15px; line-height: 1.7; color: color-mix(in srgb, var(--color-text) 74%, transparent); }
.pm-prose ul { margin: 0 0 16px; padding-left: 18px; }
.pm-prose li {
  font-size: 15px;
  line-height: 1.7;
  margin-bottom: 6px;
  color: color-mix(in srgb, var(--color-text) 74%, transparent);
}
.pm-prose-updated {
  font-family: var(--font-heading);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 45%, transparent);
  margin-bottom: 28px;
}

/* Feature list inside a service card. */
.pm-service-list { list-style: none; margin: 4px 0 16px; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.pm-service-list li {
  position: relative;
  padding-left: 18px;
  font-size: 13px;
  color: color-mix(in srgb, var(--color-text) 66%, transparent);
}
.pm-service-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 1px;
  background: var(--color-accent);
}
.pm-service-card .btn { align-self: flex-start; margin-top: auto; }