/* Raleway — Google Fonts fallback for the custom Neulis Neue heading face,
   shown to visitors whose browser can't load the local Neulis Neue files.
   (@import must precede all other rules.) */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;600;700;800&display=swap');

/* Font Faces
   WOFF2 first, TTF kept as the fallback for anything that cannot read it.
   WOFF2 is the same outlines under brotli compression — Inter drops from
   854KB to 341KB, the pair of Neulis faces from 223KB to 77KB, with no
   visual difference. font-display:swap paints text in the fallback face
   immediately rather than holding it invisible while the font downloads. */
@font-face {
  font-family: "Neulis Neue";
  src: url("/UI%20Assets/Fonts/NeulisNeue/NeulisNeue-Bold.woff2") format("woff2"),
       url("/UI%20Assets/Fonts/NeulisNeue/NeulisNeue-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neulis Neue";
  src: url("/UI%20Assets/Fonts/NeulisNeue/NeulisNeue-Regular.woff2") format("woff2"),
       url("/UI%20Assets/Fonts/NeulisNeue/NeulisNeue-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Inter";
  src: url("/UI%20Assets/Fonts/Inter/Inter-VariableFont.woff2") format("woff2-variations"),
       url("/UI%20Assets/Fonts/Inter/Inter-VariableFont.ttf") format("truetype-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Website Base Colors */
  --color-neutral-grey: #6D6E7E;
  --color-dark-grey: #444D5E;

  /* ProSolve Brand Colors */
  --color-prosolve-teal-blue: #30CFE5;
  --color-prosolve-dark-midnight: #001323;
  --color-prosolve-light-offwhite: #FFFDF1;

  /* Secondary Brand Colors */
  --color-light-teal-blue: #C1F1F7;
  --color-dark-teal-blue: #009DB7;
  --color-very-dark-teal-blue: #007691;
  --color-darkest-teal-blue: #004259;
  --color-accent-pink: #F492BB;
  --color-accent-yellow: #FFC943;

  /* Product Colors */
  --color-product-creators-red: #E12A19;
  --color-product-quest-orange: #E87211;
  --color-product-sled-blue: #077CDB;
  --color-product-unlock-green: #37A46A;

  /* UI Neutrals */
  --color-white: #FFFFFF;
  --color-surface: #F8F9FB;
  --color-alternate-background: #F2F4F7;
  --color-border: #E6EAF0;
  --color-strong-border: #D5DCE5;
  --color-body-text: #2D3442;
  --color-heading-text: #001323;

  /* Semantic Colors */
  --color-success: #2E9D58;
  --color-success-background: #EAF8EF;
  --color-warning: #D89B00;
  --color-warning-background: #FFF7DB;
  --color-error: #C73E3E;
  --color-error-background: #FDECEC;
  --color-information: #2A83C8;
  --color-information-background: #EAF5FD;

  /* Teal Scale */
  --color-teal-50: #F2FCFE;
  --color-teal-100: #E4F8FC;
  --color-teal-light: #C1F1F7;
  --color-teal-brand: #30CFE5;
  --color-teal-dark: #009DB7;
  --color-teal-very-dark: #007691;
  --color-teal-darkest: #004259;
  --color-midnight: #001323;

  /* Links */
  --color-link-default: #009DB7;
  --color-link-hover: #FFC943;
  --color-link-visited: #387F94;

  /* Buttons */
  --color-button-primary-background: #30CFE5;
  --color-button-primary-text: #001323;
  --color-button-primary-hover-background: #FFC943;
  --color-button-primary-hover-text: #001323;
  --color-button-secondary-background: transparent;
  --color-button-secondary-border: #009DB7;
  --color-button-secondary-text: #009DB7;
  --color-button-secondary-hover-text: #FFC943;
  --color-button-dark-background: #001323;
  --color-button-dark-text: #FFFFFF;
  --color-button-dark-hover-text: #FFC943;

  /* Focus */
  --color-focus-ring: #30CFE5;

  /* Overlays */
  --color-overlay-80: rgba(0, 19, 35, 0.80);
  --color-overlay-60: rgba(0, 19, 35, 0.60);
  --color-overlay-30: rgba(0, 19, 35, 0.30);

  /* Supporting Color */
  --color-slate-blue-gray: #8897A8;

  /* Typography */
  --font-heading: "Neulis Neue", "Raleway", sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-size-body: 17px;
  --line-height-body: 1.6;
}

/* Base Typography */
* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  color: var(--color-body-text);
  background-color: var(--color-alternate-background);
}

p {
  margin: 0 0 1rem 0;
}

/* Headings */
h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  line-height: 1.2;
  color: var(--color-prosolve-dark-midnight);
  margin: 1.5rem 0 0.5rem 0;
}

h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 2.625rem;
  line-height: 1.3;
  color: var(--color-heading-text);
  margin: 1.25rem 0 0.5rem 0;
}

h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.4;
  color: var(--color-heading-text);
  margin: 1rem 0 0.5rem 0;
}

h2 {
  margin-top: 2rem;
  margin-bottom: 1.5rem;
}

/* Layout */
.app-container {
  display: block;
  height: 100vh;
  margin-left: 260px;
}

/* Sidebar */
.sidebar {
  background-color: var(--color-prosolve-dark-midnight);
  color: var(--color-white);
  display: flex;
  flex-direction: column;
  height: 100vh;
  position: fixed;
  width: 260px;
  left: 0;
  top: 0;
  overflow-y: auto;
  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.2);
  padding: 0;
  overflow-x: hidden;
}

.sidebar::before {
  content: '';
  position: fixed;
  bottom: 0;
  left: 0;
  width: 260px;
  height: 100vh;
  background: linear-gradient(to top, var(--color-prosolve-teal-blue) 0%, var(--color-prosolve-teal-blue) 30%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  opacity: 0.2;
}

.sidebar::after {
  content: '';
  position: fixed;
  bottom: -300px;
  left: 0;
  width: 260px;
  height: 100vh;
  background-image: url('/UI%20Assets/Patterns/Maze%20Tile_seamless%201080x_v5.svg');
  background-size: 300px 300px;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
  opacity: 0.15;
  mask-image: linear-gradient(to top, #C1F1F7 0%, #C1F1F7 30%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, #C1F1F7 0%, #C1F1F7 30%, transparent 70%);
}

.sidebar-header {
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.logo-link {
  display: block;
  text-decoration: none;
  cursor: pointer;
}

.logo-image {
  width: 100%;
  height: auto;
  max-height: 60px;
  object-fit: contain;
}

.sidebar-nav {
  flex: 1;
  padding: 2rem 0 0 0;
  overflow-y: auto;
}

.nav-section {
  margin-bottom: 2rem;
}

.nav-section-title {
  padding: 0 1.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-neutral-grey);
  margin: 0 0 1rem 0;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-item {
  margin: 0.25rem 1rem;
  border-radius: 12px;
  overflow: hidden;
  transition: background-color 0.2s ease;
  color: rgba(255, 255, 255, 0.7);
}

.nav-item:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--color-white);
}

.nav-item.active {
  background-color: var(--color-prosolve-teal-blue);
  color: var(--color-prosolve-dark-midnight);
  font-weight: 600;
}

.nav-link {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: 100%;
  padding: 0.75rem 1.5rem;
  box-sizing: border-box;
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}

.nav-icon {
  font-size: 1.25rem;
  min-width: 1.25rem;
}

.nav-icon-svg {
  width: 28px;
  height: 28px;
  min-width: 28px;
  object-fit: contain;
  flex-shrink: 0;
}

.nav-label {
  font-size: 0.95rem;
}

.sidebar-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  margin-top: auto;
}

.user-profile {
  display: flex;
  gap: 0.75rem;
  align-items: center;
}

.user-avatar {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background-color: var(--color-prosolve-teal-blue);
  flex-shrink: 0;
}

.user-info {
  min-width: 0;
}

.user-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-role {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.6);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Main Content */
.main-content {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow-y: auto;
  background-color: var(--color-surface);
}

/* Pages */
.page {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* ==========================================================================
   MARKETING COMPONENTS
   Reusable classes for the external marketing pages. Content HTML references
   these; no inline styling needed in the page files.
   ========================================================================== */

/* Centered content container */
.container {
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Generic vertical section rhythm */
.section {
  padding: 4rem 0;
}

/* Buttons */
.btn {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  padding: 0.875rem 1.75rem;
  border-radius: 10px;
  border: 2px solid transparent;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.btn-primary {
  background-color: var(--color-button-primary-background);
  color: var(--color-button-primary-text);
}

.btn-primary:hover {
  background-color: var(--color-button-primary-hover-background);
  color: var(--color-button-primary-hover-text);
}

.btn-secondary {
  background-color: var(--color-button-secondary-background);
  border-color: var(--color-button-secondary-border);
  color: var(--color-button-secondary-text);
}

.btn-secondary:hover {
  color: var(--color-button-secondary-hover-text);
  border-color: var(--color-button-secondary-hover-text);
}

.btn-dark {
  background-color: var(--color-button-dark-background);
  color: var(--color-button-dark-text);
}

.btn-dark:hover {
  color: var(--color-button-dark-hover-text);
}

/* Hero */
.hero {
  background-color: var(--color-prosolve-dark-midnight);
  color: var(--color-prosolve-light-offwhite);
  padding: 6rem 0;
}

.hero h1 {
  color: var(--color-prosolve-light-offwhite);
  max-width: 20ch;
  margin-top: 0;
}

.hero .hero-lead {
  font-size: 1.25rem;
  max-width: 55ch;
  color: var(--color-light-teal-blue);
  margin-bottom: 2rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* Feature grid */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
  margin-top: 2rem;
}

.feature-card {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
}

.feature-card h3 {
  margin-top: 0;
  color: var(--color-teal-very-dark);
}

.feature-card p:last-child {
  margin-bottom: 0;
}

/* Closing call-to-action band */
.cta-band {
  background-color: var(--color-prosolve-teal-blue);
  color: var(--color-prosolve-dark-midnight);
  text-align: center;
  padding: 4rem 0;
}

.cta-band h2 {
  color: var(--color-prosolve-dark-midnight);
  margin-top: 0;
}

.cta-band .btn-primary {
  background-color: var(--color-prosolve-dark-midnight);
  color: var(--color-prosolve-light-offwhite);
}

.cta-band .btn-primary:hover {
  color: var(--color-accent-yellow);
}

.cta-band .btn-secondary {
  color: var(--color-prosolve-dark-midnight);
  border-color: var(--color-prosolve-dark-midnight);
}

.cta-band .btn-secondary:hover {
  background-color: var(--color-prosolve-dark-midnight);
  color: var(--color-accent-yellow);
  border-color: var(--color-prosolve-dark-midnight);
}

.cta-band.cta-band-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  text-align: left;
}

.cta-band.cta-band-double .cta-col h3 {
  color: var(--color-prosolve-dark-midnight);
  margin-top: 0;
}

.cta-band.cta-band-double .cta-col p {
  color: var(--color-darkest-teal-blue);
}

@media (max-width: 768px) {
  .cta-band.cta-band-double {
    grid-template-columns: 1fr;
    gap: 2rem;
    text-align: center;
  }
}

/* ==========================================================================
   INTERIOR PAGE COMPONENTS
   Shared building blocks for Human Skills, Initiatives, Products, Solutions,
   Resources, and About pages. Reused across pages per the copy workbook's
   own guidance: treat repeated section types as one component with
   different content, rather than one-off page implementations.
   ========================================================================== */

/* Inline text links inside interior-page content read as brand teal,
   not browser-default blue. Buttons are unaffected (.btn sets its own
   colors). */
.split-copy a:not(.btn),
.tile a,
.section-heading a,
.process-step a,
.story-card a {
  color: var(--color-link-default);
  font-weight: 600;
  text-decoration: none;
}

.split-copy a:not(.btn):hover,
.tile a:hover,
.section-heading a:hover,
.process-step a:hover,
.story-card a:hover {
  text-decoration: underline;
}

/* Simple content-page hero: headline + lead + CTAs, no imagery. */
.page-hero {
  background-color: var(--color-prosolve-dark-midnight);
  color: var(--color-prosolve-light-offwhite);
  padding: 5rem 0 4rem;
}

.page-hero .eyebrow {
  color: var(--color-prosolve-teal-blue);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  font-weight: 700;
  margin: 0 0 1rem;
}

.page-hero h1 {
  color: var(--color-white);
  max-width: 32ch;
  margin: 0 0 1.25rem;
}

.page-hero .page-hero-lead {
  font-size: 1.2rem;
  max-width: 62ch;
  color: var(--color-light-teal-blue);
  margin: 0 0 2rem;
}

.page-hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.page-hero .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.page-hero .tag-list li {
  background-color: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: var(--color-light-teal-blue);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
}

/* Generic placeholder for photography — a midnight rounded rectangle
   standing in for real ProSolve photography (see brand guide: warm,
   human, real classrooms) until final imagery is sourced. */
.media-placeholder {
  background-color: var(--color-prosolve-dark-midnight);
  border-radius: 16px;
  width: 100%;
  min-height: 220px;
}

/* Split section: image + copy, alternating sides via .split-reverse.
   Used for "Image & Why" / "Deeper Why" section types throughout the
   workbook. */
.split-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem;
  align-items: center;
  padding: 4rem 0;
}

.split-section.split-reverse .split-media {
  order: 2;
}

.split-section.split-reverse .split-copy {
  order: 1;
}

.split-media .media-placeholder {
  aspect-ratio: 4 / 3;
}

.split-copy h2 {
  margin-top: 0;
}

.split-copy ul {
  padding-left: 1.2rem;
  margin: 1rem 0 0;
}

.split-copy ul li {
  margin-bottom: 0.6rem;
  color: var(--color-body-text);
}

@media (max-width: 768px) {
  .split-section {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .split-section.split-reverse .split-media,
  .split-section.split-reverse .split-copy {
    order: initial;
  }
}

/* Stats / numbers block */
.stats-section {
  background-color: var(--color-surface);
  padding: 4rem 0;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  text-align: center;
  margin-top: 2rem;
}

.stat-block .stat-number {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 3rem;
  color: var(--color-prosolve-teal-blue);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.stat-block .stat-caption {
  font-weight: 600;
  color: var(--color-heading-text);
  margin-bottom: 0.25rem;
}

.stat-block .stat-source {
  font-size: 0.8rem;
  color: var(--color-neutral-grey);
}

/* Section intro heading, used above tiles/stats/stories grids */
.section-heading {
  max-width: 68ch;
  margin: 0 auto 2rem;
  text-align: center;
}

.section-heading h2 {
  margin-bottom: 0.75rem;
}

.section-heading p {
  color: var(--color-body-text);
}

/* Tiles grid: "3 Across" / "4 Tiles" section types */
.tiles-section {
  padding: 4rem 0;
}

.tiles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1.5rem;
}

.tile {
  background-color: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 16px;
  padding: 2rem;
}

.tile h3 {
  margin-top: 0;
  color: var(--color-heading-text);
}

.tile p {
  color: var(--color-body-text);
}

.tile a {
  color: var(--color-link-default);
  font-weight: 600;
  text-decoration: none;
}

/* Numbered process steps ("How It Works" / "Tabs" section types,
   simplified to a static step grid rather than interactive tabs). */
.process-section {
  padding: 4rem 0;
}

.process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1.5rem;
}

.process-step {
  position: relative;
  background-color: var(--color-surface);
  border-radius: 16px;
  padding: 2rem 1.75rem;
}

.process-step .process-step-number {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-prosolve-teal-blue);
  font-size: 1.5rem;
  margin-bottom: 0.75rem;
}

.process-step h3 {
  margin-top: 0;
  color: var(--color-heading-text);
}

.process-step p {
  color: var(--color-body-text);
  margin-bottom: 0;
}

/* Customer stories */
.stories-section {
  background-color: var(--color-alternate-background);
  padding: 4rem 0;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1.5rem;
}

.story-card {
  background-color: var(--color-white);
  border-radius: 16px;
  padding: 1.5rem;
  border: 1px solid var(--color-border);
}

.story-card h4 {
  margin: 0 0 0.5rem;
  color: var(--color-heading-text);
}

.story-card p {
  color: var(--color-body-text);
  margin: 0;
}

.story-card .story-placeholder-note {
  font-style: italic;
  color: var(--color-neutral-grey);
  font-size: 0.85rem;
}

/* ==========================================================================
   SITE CHROME — sign-in bar, navbar, dropdowns, footer
   Injected on every page by nav.js from nav.html / footer.html.
   Injected into every page by nav.js rather than written per page.
   ========================================================================== */

/* --- Thin sign-in bar --- */
.site-topbar {
  background-color: var(--color-prosolve-teal-blue);
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  padding: 0 2rem;
  /* 60% of the original 38px. The label and icon shrink with it so the row
     stays balanced rather than clipping. */
  height: 23px;
  position: relative;
  z-index: 130;
}

.signin {
  position: relative;
  display: flex;
  align-items: stretch;
}

.signin-toggle {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--color-prosolve-dark-midnight);
  cursor: pointer;
  padding: 0 0.5rem;
}

.signin-toggle .caret {
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
}

.signin-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 220px;
  background-color: var(--color-prosolve-dark-midnight);
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  border-radius: 0 0 10px 10px;
  box-shadow: 0 14px 28px var(--color-overlay-30);
}

.signin:hover .signin-menu,
.signin:focus-within .signin-menu {
  display: block;
}

.signin-menu a {
  display: block;
  padding: 0.6rem 1.25rem;
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.875rem;
  white-space: nowrap;
}

.signin-menu a:hover {
  color: var(--color-prosolve-teal-blue);
  background-color: rgba(255, 255, 255, 0.06);
}

/* --- Main navbar --- */
.site-nav-wrap {
  background-color: var(--color-prosolve-dark-midnight);
  position: relative;
  z-index: 120;
}

.site-nav {
  display: flex;
  align-items: stretch;
  gap: 1.5rem;
  padding: 0 2rem;
  height: 84px;
}

.nav-logo {
  display: flex;
  align-items: center;
}

.nav-logo img {
  height: 42px;
  display: block;
}

.nav-menu {
  display: flex;
  align-items: stretch;
  gap: 0.25rem;
  list-style: none;
  margin: 0 0 0 auto;
  padding: 0;
}

.nav-menu > li {
  display: flex;
  align-items: center;
}

.nav-menu > li > a {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--color-white);
  text-decoration: none;
  font-size: 1rem;
  font-weight: 500;
  padding: 0.75rem 0.9rem;
}

.nav-menu > li > a:hover,
.nav-menu > li.active > a {
  color: var(--color-prosolve-teal-blue);
}

.has-dropdown > a .caret {
  width: 0.45em;
  height: 0.45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-25%);
}

/* CTA row that only appears inside the collapsed menu. Scoped under
   .nav-menu > li so it outranks that rule's display:flex, which would
   otherwise render a second pair of buttons in the desktop bar. */
.nav-menu > li.nav-menu-cta { display: none; }

.nav-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-left: 0.75rem;
}

.nav-cta {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.nav-cta-outline {
  border: 1px solid var(--color-white);
  color: var(--color-white);
}

.nav-cta-outline:hover {
  border-color: var(--color-accent-yellow);
  color: var(--color-accent-yellow);
}

.nav-cta-solid {
  background-color: var(--color-prosolve-teal-blue);
  border: 1px solid var(--color-prosolve-teal-blue);
  color: var(--color-prosolve-dark-midnight);
}

.nav-cta-solid:hover {
  background-color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
  color: var(--color-prosolve-dark-midnight);
}

/* --- Dropdown panels --- */
.nav-dropdown {
  display: none;
  position: absolute;
  top: 100%;
  background-color: var(--color-prosolve-dark-midnight);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 48px var(--color-overlay-30);
}

.has-dropdown:hover > .nav-dropdown,
.has-dropdown:focus-within > .nav-dropdown {
  display: block;
}

/* Full-width mega panel (positioned to .site-nav-wrap) */
.nav-dropdown.mega {
  left: 0;
  right: 0;
  padding: 2.5rem 3rem 3rem;
}

/* Compact panel (positioned to its own nav item) */
.has-dropdown.small-parent {
  position: relative;
}

.nav-dropdown.small {
  width: 260px;
  padding: 0.75rem 0;
  border-radius: 0 0 12px 12px;
}

.nav-dropdown.small a {
  display: block;
  padding: 0.65rem 1.5rem;
  color: var(--color-white);
  text-decoration: none;
  font-size: 0.95rem;
  white-space: nowrap;
}

.nav-dropdown.small a:hover {
  color: var(--color-prosolve-teal-blue);
  background-color: rgba(255, 255, 255, 0.06);
}

/* Mega panel internals */
.dropdown-grid {
  display: grid;
  gap: 0 3rem;
  max-width: 1240px;
  margin: 0 auto;
}

/* cols-2 is the asymmetric Human Skills split (short list, then the wide
   District Priorities list). cols-2-even is the plain half-and-half. */
.dropdown-grid.cols-2 { grid-template-columns: 1fr 2fr; }
/* Two even columns pull in tighter than the three- and four-up panels —
   at full width a half-panel column runs the description out to ~550px. */
.dropdown-grid.cols-2-even { grid-template-columns: 1fr 1fr; max-width: 860px; gap: 0 2.5rem; }
.dropdown-grid.cols-2-even > div { padding-right: 2.5rem; }
.dropdown-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dropdown-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Columns share their rows via subgrid so the eyebrow, the helper copy and
   the link list each start on one line across the panel. Without this a
   description that wraps to one line (Services) lifts its whole list above
   the neighbours whose copy wraps to two. Every panel is uniform — either
   all its columns carry a description or none do — so the three tracks
   line up whether or not the middle one is filled. */
.dropdown-grid { grid-template-rows: auto auto 1fr; }

.dropdown-grid > div {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  padding-right: 3rem;
  border-right: 1px solid rgba(255, 255, 255, 0.08);
}

.dropdown-grid > div:last-child {
  padding-right: 0;
  border-right: none;
}

.menu-eyebrow {
  color: var(--color-prosolve-teal-blue);
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
}

.menu-group-desc {
  color: var(--color-slate-blue-gray);
  font-size: 0.85rem;
  line-height: 1.45;
  margin: 0 0 1.25rem;
  max-width: 34ch;   /* keep the helper copy to a readable measure */
}

.menu-list {
  list-style: none;
  margin: 0 -0.75rem;
  padding: 0;
}

.menu-list > li {
  margin-bottom: 0.35rem;
  break-inside: avoid;
}

.menu-list > li:last-child {
  margin-bottom: 0;
}

.menu-list.split {
  column-count: 2;
  column-gap: 3rem;
}

.menu-link {
  display: block;
  color: var(--color-white);
  text-decoration: none;
  font-size: 1.02rem;
  font-weight: 500;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
}

.menu-link:hover {
  color: var(--color-prosolve-teal-blue);
  background-color: rgba(255, 255, 255, 0.06);
}

.menu-desc {
  display: block;
  color: var(--color-slate-blue-gray);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.45;
  margin: 0.3rem 0 0;
}

/* --- Mobile Menu --- */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  margin-left: auto;
}

.mobile-menu-toggle span {
  width: 25px;
  height: 3px;
  background-color: var(--color-white);
  border-radius: 2px;
  transition: all 0.3s ease;
}

.mobile-menu-toggle.active span:nth-child(1) {
  transform: rotate(45deg) translate(10px, 10px);
}

.mobile-menu-toggle.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active span:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

/* Between 1201px and 1400px the full nav fits only once the link padding,
   type size and button padding come in. Above 1400px everything relaxes. */
@media (min-width: 1201px) and (max-width: 1400px) {
  .site-nav { gap: 1rem; padding: 0 1.25rem; }
  .nav-menu { gap: 0; }
  .nav-menu > li > a { font-size: 0.92rem; padding: 0.75rem 0.5rem; }
  .nav-actions { gap: 0.5rem; margin-left: 0.5rem; }
  .nav-cta { font-size: 0.88rem; padding: 0.7rem 0.85rem; }
  .nav-logo img { height: 36px; }
}

/* The desktop nav needs about 1220px to lay out — logo, six menu items and
   two buttons — but the hamburger only appeared at 768px, so between those
   widths the CTAs ran off the right edge of every page. The menu now
   collapses at 1200px, and the band just above it is tightened below. */
@media (max-width: 1200px) {
  .site-topbar {
    padding: 0 1rem;
  }

  .site-nav {
    padding: 0 1rem;
    gap: 0.75rem;
  }

  .nav-logo img {
    height: 32px;
  }

  .mobile-menu-toggle {
    display: flex;
  }

  .nav-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    background-color: var(--color-prosolve-dark-midnight);
    gap: 0;
    margin: 0;
    padding: 1rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }

  .nav-menu.active {
    display: flex;
  }

  .nav-menu > li {
    width: 100%;
    display: block;
  }

  .nav-menu > li > a {
    justify-content: center;
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
  }

  .nav-menu > li.has-dropdown {
    position: relative;
  }

  /* Dropdown panels collapse inline on mobile */
  .nav-dropdown {
    position: static !important;
    display: none !important;
    background-color: rgba(255, 255, 255, 0.04);
    border: none;
    box-shadow: none;
  }

  .nav-menu > li.has-dropdown.open > .nav-dropdown {
    display: block !important;
  }

  /* Mega and small dropdowns share one simplified single-column layout */
  .nav-dropdown.mega,
  .nav-dropdown.small {
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    min-width: 0;
    padding: 0.25rem 0 0.75rem;
    border-radius: 0;
  }

  /* Collapse the multi-column grid into a single stacked column */
  .dropdown-grid {
    display: block !important;
    max-width: none;
    margin: 0;
    gap: 0;
  }

  .dropdown-grid > div {
    display: block;   /* drop the desktop subgrid; the panel stacks here */
    padding: 0;
    border-right: none;
    margin: 0;
  }

  /* No helper/description text on mobile — just names and links */
  .menu-group-desc {
    display: none;
  }

  /* Never split a list into columns on mobile */
  .menu-list,
  .menu-list.split {
    column-count: 1 !important;
    margin: 0;
  }

  /* Category name acts as a section header */
  .menu-eyebrow {
    padding: 0.85rem 1.5rem 0.35rem;
    margin: 0;
    font-size: 0.72rem;
  }

  /* Links look identical whether they came from a mega or small dropdown */
  .menu-link,
  .nav-dropdown.small a {
    display: block;
    padding: 0.65rem 1.5rem;
    border-radius: 0;
    font-size: 0.95rem;
    white-space: normal;
  }

  .nav-actions {
    display: none;
  }

  /* Scoped under .nav-menu > li, which sets display:block and would otherwise
     win on specificity and stack the two buttons. */
  .nav-menu > li.nav-menu-cta {
    display: flex;
    gap: 0.75rem;
    padding: 1rem 1.5rem 1.25rem;
  }
  .nav-menu-cta .nav-cta { flex: 1; text-align: center; }
}

/* --- Footer ---
   Sits flush against the preceding section (no top margin, so there's no
   blank band above it). Overflow-hidden clips the oversized wordmark that
   bleeds off the bottom edge. */
.site-footer {
  background-color: var(--color-prosolve-dark-midnight);
  color: rgba(255, 255, 255, 0.72);
  position: relative;
  overflow: hidden;
  padding: 4.5rem 0 1.75rem;
}
.footer-inner {
  position: relative;
  z-index: 1;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Brand band, then five link columns. The logo used to sit as a sixth grid
   column, which squeezed the five link columns to ~110px each and wrapped
   most entries onto two or three lines — "Professional Learning Communities"
   ran to three. On its own row the columns get ~200px and nearly every link
   sits on one line. */
.footer-brand {
  padding-bottom: 2.25rem;
  margin-bottom: 2.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-logo img { height: 34px; width: auto; display: block; }

.footer-top {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 2.5rem 2rem;
  align-items: start;
}
.footer-col-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-prosolve-teal-blue);
  margin: 0 0 1.1rem;
}
.footer-col ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
/* Generous hit area with the padding pulled back out to the left, so the
   links still line up with their heading while being easy to hit. */
.footer-col a {
  display: block;
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.92rem;
  line-height: 1.4;
  padding: 0.35rem 0.5rem;
  margin-left: -0.5rem;
  border-radius: 6px;
  transition: color 0.2s ease, background 0.2s ease;
}
.footer-col a:hover {
  color: var(--color-prosolve-dark-midnight);
  background: var(--color-prosolve-teal-blue);
}
.footer-col a:focus-visible {
  outline: 2px solid var(--color-prosolve-teal-blue);
  outline-offset: 2px;
}

/* Social row + legal line */
.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-top: 3rem;
  padding: 2rem 0 3rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.footer-social { display: flex; gap: 0.6rem; list-style: none; margin: 0; padding: 0; }
.footer-social a {
  color: rgba(255, 255, 255, 0.75);
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.footer-social a:hover {
  color: var(--color-prosolve-dark-midnight);
  background: var(--color-prosolve-teal-blue);
  border-color: var(--color-prosolve-teal-blue);
}
.footer-social a:focus-visible { outline: 2px solid var(--color-prosolve-teal-blue); outline-offset: 2px; }
.footer-social svg { width: 18px; height: 18px; display: block; }
.footer-legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}
.footer-legal a { color: rgba(255, 255, 255, 0.6); text-decoration: none; transition: color 0.2s ease; }
.footer-legal a:hover { color: var(--color-prosolve-teal-blue); }

/* Oversized brand wordmark sitting behind the footer as a backdrop.
   It breaks out of .footer-inner's 1180px column so it can span the viewport,
   and the font-size is tuned to the string's own width-to-font-size ratio
   (~12.7x) so the line always renders at ~90vw without wrapping or clipping.
   line-height must stay >= 1 and the bottom margin non-negative, or the
   descenders in "p" and "y" are cut off by the footer's bottom edge. */
.footer-watermark {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 7.08vw;
  line-height: 1;
  letter-spacing: -0.02em;
  color: #0B3346;
  text-align: center;
  white-space: nowrap;
  width: 90vw;
  margin: 0.5rem 0 0 50%;
  padding-bottom: 0.12em;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

@media (max-width: 1000px) {
  .footer-top { grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
}
@media (max-width: 620px) {
  .footer-top { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* --- Placeholder pages --- */
.placeholder-hero {
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-border);
  padding: 4rem 0;
}

.placeholder-kicker {
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--color-teal-dark);
  margin: 0 0 0.5rem;
}

.placeholder-hero h1 {
  margin-top: 0;
}

.placeholder-url {
  color: var(--color-neutral-grey);
  font-size: 0.9rem;
}

.placeholder-url code {
  background-color: var(--color-alternate-background);
  border: 1px solid var(--color-border);
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  font-size: 0.85em;
  color: var(--color-body-text);
}

/* ========================================================================
   DISTRICT LOGO MARQUEE
   Markup lives in logos.html and is injected by nav.js wherever a page has
   <div data-logos></div>. The logo set is duplicated in that fragment so the
   track can loop seamlessly by translating -50%.
   ======================================================================== */

.ps-logos {
  background: var(--color-white);
  padding: 2rem 0;
  border-bottom: 1px solid var(--color-border);
  overflow: hidden;
}
/* For a marquee that closes a page rather than opening one. */
.ps-logos--top-divider { border-bottom: 0; border-top: 1px solid var(--color-border); }

.ps-logos-label {
  text-align: center;
  margin: 0 0 1.5rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.78rem;
  font-weight: 700;
  color: #8897A8;
}
.ps-logos-window { width: 100%; overflow: hidden; }
.ps-logos-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: ps-logos-scroll 90s linear infinite;
  will-change: transform;
}
.ps-logos-track:hover { animation-play-state: paused; }
/* Spacing lives on each item rather than on the flex `gap`. With `gap`
   there are 73 gaps across the 74 logos, so translating -50% landed half a
   gap short of set 2 and the loop visibly snapped. A trailing margin gives
   every item the same footprint, making -50% exactly one set wide. */
.ps-logos-track img {
  height: 64px;
  width: auto;
  max-width: 140px;
  margin-right: 5rem;
  object-fit: contain;
  flex-shrink: 0;
  filter: grayscale(100%);
  opacity: 0.45;
}
@keyframes ps-logos-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 768px) {
  .ps-logos-track img { height: 48px; max-width: 110px; margin-right: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-logos-track { animation: none; }
}

@media (max-width: 480px) {
  .logos-track {
    gap: 2rem;
  }

  .client-logo {
    height: 60px;
  }
}

@keyframes scroll-logos {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* ==========================================================================
   PAGE DESIGN LANGUAGE (.ps-*) — promoted from the Home + QUEST reference
   pages. See README "Page design language". Interior pages build on these
   primitives; page-specific flourishes stay in per-page <style> blocks.
   Motion behaviors (reveal, parallax, counters) live in /motion.js.
   ========================================================================== */

.ps-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
}

/* Section shells. Hosts of decorative shapes/textures need the relative +
   hidden combination so shapes can bleed off the edges without scrollbars. */
.ps-section {
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.ps-section--white { background: var(--color-white); }
.ps-section--grey { background: var(--color-alternate-background); }
.ps-section--dark { background: var(--color-prosolve-dark-midnight); }

/* Every midnight block carries the maze, the way the heroes do — the seamless
   tile at 4%, matching .ps-texture. Skipped on any section that already places
   its own .ps-texture layer, so the two never stack to 8%. Content clears it
   because .ps-container is positioned and comes later in the DOM. */
.ps-section--dark:not(:has(.ps-texture))::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--color-light-teal-blue);
  -webkit-mask: url('/UI%20Assets/Patterns/Maze%20Tile_seamless%201080x_v5.svg') 0 0 / 540px 540px repeat;
  mask: url('/UI%20Assets/Patterns/Maze%20Tile_seamless%201080x_v5.svg') 0 0 / 540px 540px repeat;
  opacity: 0.04;
  pointer-events: none;
  z-index: 0;
}
.ps-section--teal { background: var(--color-prosolve-teal-blue); }

/* Eyebrow kicker above section headings. Product pages recolor via a local
   rule (e.g. QUEST orange); dark sections get bright teal automatically. */
.ps-eyebrow {
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 0.8rem;
  font-weight: 700;
  margin: 0 0 1rem;
  color: var(--color-dark-teal-blue);
}
.ps-section--dark .ps-eyebrow { color: var(--color-prosolve-teal-blue); }

/* Display-scale section heading. Spans the full container so long titles
   stay on one line (usually); pair body copy with .ps-measure. */
.ps-h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.7rem;
  line-height: 1.15;
  color: var(--color-prosolve-dark-midnight);
  margin: 0;
  text-wrap: pretty;
}
.ps-section--dark .ps-h2 { color: var(--color-white); }
.ps-measure { max-width: 64ch; }
/* Light ink is for copy laid straight on the dark field. Cards on that field
   are white, so text inside one is excluded here and keeps its own component
   colour — otherwise it inherits light-on-white and all but disappears.
   .ps-phase is a white card too and belongs in the same exclusion: on QUEST,
   UNLOCK and Back to School PD its body copy was rendering pale teal on white
   at a 1.2:1 ratio, effectively invisible. */
.ps-section--dark p:not(.ps-card *, .ps-phase *),
.ps-section--dark li:not(.ps-card *, .ps-phase *) { color: var(--color-light-teal-blue); }

/* Buttons — resting style varies; hover is always yellow fill, dark text. */
.ps-btn {
  display: inline-block;
  font-weight: 600;
  font-size: 1.05rem;
  line-height: 1;
  padding: 1rem 2rem;
  border-radius: 10px;
  text-decoration: none;
  border: 2px solid transparent;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.ps-btn:hover {
  background-color: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
  color: var(--color-prosolve-dark-midnight);
}
.ps-btn--dark { background: var(--color-prosolve-dark-midnight); color: var(--color-prosolve-light-offwhite); }
.ps-btn--teal { background: var(--color-prosolve-teal-blue); color: var(--color-prosolve-dark-midnight); }
.ps-btn--outline-dark { background: transparent; border-color: var(--color-prosolve-dark-midnight); color: var(--color-prosolve-dark-midnight); }
.ps-btn--outline-white { background: transparent; border-color: var(--color-white); color: var(--color-white); }

.ps-actions { display: flex; flex-wrap: wrap; gap: 1rem; }

/* Inline arrow link. */
.ps-link { color: var(--color-dark-teal-blue); text-decoration: none; font-weight: 600; }
.ps-link:hover { color: var(--color-accent-yellow); }
.ps-section--dark .ps-link { color: var(--color-prosolve-teal-blue); }

/* Card grammar: 12px radius, hairline border, lift + teal highlight on hover.
   Link-cards pin their "Label →" line to the bottom via .ps-card-cta. */
.ps-card {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
a.ps-card:hover,
.ps-card--hover:hover {
  border-color: var(--color-prosolve-teal-blue);
  box-shadow: 0 12px 32px rgba(0, 19, 35, 0.08);
  transform: translateY(-4px);
}
/* Whole-card links: the card is the target, so the cue at the bottom is a
   span rather than a second link inside it. */
a.ps-card { color: inherit; }
a.ps-card:hover .ps-card-cta,
a.ps-card:hover .ps-link { color: var(--color-accent-yellow); }
a.ps-card:focus-visible { outline: 3px solid var(--color-prosolve-teal-blue); outline-offset: 3px; }
.ps-card--surface { background: var(--color-surface); }
.ps-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  color: var(--color-darkest-teal-blue);
  line-height: 1.3;
}
.ps-card-desc { color: #455A6F; line-height: 1.6; }
.ps-card-cta {
  color: var(--color-dark-teal-blue);
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: auto;
  padding-top: 0.5rem;
}

/* Grid helpers with responsive collapse. */
.ps-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ps-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.ps-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ps-split { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; }

/* Numbered step chip (dark sections). */
.ps-step-n {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--color-prosolve-teal-blue);
  color: var(--color-prosolve-dark-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1rem;
}

/* Stat display (count-up wired via data-count in motion.js). */
.ps-stat-n {
  font-family: var(--font-heading);
  font-size: 3.6rem;
  font-weight: 800;
  color: var(--color-prosolve-teal-blue);
  line-height: 1;
}

/* Tag chips (hero "supports" rows). Recolor per hero background locally. */
.ps-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: 0; padding: 0; list-style: none; }
.ps-chips a {
  display: inline-block;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(0, 19, 35, 0.3);
  color: var(--color-prosolve-dark-midnight);
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
  border-radius: 20px;
  text-decoration: none;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.ps-chips a:hover {
  border-color: var(--color-prosolve-dark-midnight);
  background: rgba(255, 255, 255, 0.75);
}

/* Very faint maze texture for dark or solid-color section blocks.
   The seamless tile is a CSS mask, so the tint is just background-color.
   Place as the section's first child: <div class="ps-texture" aria-hidden="true"></div> */
.ps-texture {
  position: absolute;
  inset: 0;
  background-color: var(--color-light-teal-blue);
  -webkit-mask: url('/UI%20Assets/Patterns/Maze%20Tile_seamless%201080x_v5.svg') 0 0 / 540px 540px repeat;
  mask: url('/UI%20Assets/Patterns/Maze%20Tile_seamless%201080x_v5.svg') 0 0 / 540px 540px repeat;
  opacity: 0.04;
  pointer-events: none;
}

/* Photo treatment: a clip-masked photo with the offset color frames of the SAME
   shape tucked behind it — accent up-and-right, sky blue down-and-left, the same
   framing .ps-frame uses. Per page, override --frame-top to the brand/product
   accent; --frame-bottom stays brand sky blue.
   <div class="ps-photo"><img class="ps-photo-img ps-mask-*"></div>
   (The older two-corner-shape treatment is retired — .ps-photo-shape is hidden.) */
.ps-photo {
  position: relative;
  isolation: isolate;
  --frame-top: var(--color-accent-yellow);
  --frame-bottom: var(--color-prosolve-teal-blue);
  --frame-offset: 10px;
}
/* A frame must never sit on a field of its own colour, or it disappears. The
   sky blue bottom frame works on midnight and on light sections, but vanishes
   on a sky blue hero — those photos take this modifier instead. */
.ps-photo--frame-dark { --frame-bottom: var(--color-darkest-teal-blue); }
.ps-photo .ps-photo-shape { display: none; }
.ps-photo-img {
  position: relative;
  z-index: 1;
  width: 100%;
  object-fit: cover;
  display: block;
}
/* Offset color frames (accent above sky blue so a notch shows the top color). */
.ps-photo::before,
.ps-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ps-photo::before { z-index: -1; background: var(--frame-top);    transform: translate(var(--frame-offset), calc(-1 * var(--frame-offset))); }
.ps-photo::after  { z-index: -2; background: var(--frame-bottom); transform: translate(calc(-1 * var(--frame-offset)), var(--frame-offset)); }
/* Each offset frame takes the photo's own mask shape. */
.ps-photo:has(.ps-mask-horizontal-1)::before, .ps-photo:has(.ps-mask-horizontal-1)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-1.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-horizontal-2)::before, .ps-photo:has(.ps-mask-horizontal-2)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-2.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-2.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-horizontal-3)::before, .ps-photo:has(.ps-mask-horizontal-3)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-3.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-3.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-square-1)::before, .ps-photo:has(.ps-mask-square-1)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-1.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-square-2)::before, .ps-photo:has(.ps-mask-square-2)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-2.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-2.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-vertical-1)::before, .ps-photo:has(.ps-mask-vertical-1)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-vertical-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-vertical-1.svg') center / 100% 100% no-repeat; }
.ps-photo:has(.ps-mask-wide-1)::before, .ps-photo:has(.ps-mask-wide-1)::after { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-wide-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-wide-1.svg') center / 100% 100% no-repeat; }
.ps-mask-horizontal-1 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-1.svg') center / 100% 100% no-repeat; }
.ps-mask-horizontal-2 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-2.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-2.svg') center / 100% 100% no-repeat; }
.ps-mask-horizontal-3 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-3.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-horizontal-3.svg') center / 100% 100% no-repeat; }
.ps-mask-square-1 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-1.svg') center / 100% 100% no-repeat; }
.ps-mask-square-2 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-2.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-2.svg') center / 100% 100% no-repeat; }
.ps-mask-square-3 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-3.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-square-3.svg') center / 100% 100% no-repeat; }
.ps-mask-vertical-1 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-vertical-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-vertical-1.svg') center / 100% 100% no-repeat; }
.ps-mask-wide-1 { -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-wide-1.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/clipshape-wide-1.svg') center / 100% 100% no-repeat; }

/* Testimonials carousel — the quotes/stories section before each page's
   closing CTA. Auto-advances (~6s, pauses on hover/focus), arrows + dots;
   wired up by initCarousels() in motion.js via [data-carousel].
   Markup: <div class="ps-carousel" data-carousel>
             <div class="ps-carousel-track"> ...cards... </div>
             <div class="ps-carousel-nav">
               <button class="ps-carousel-btn" data-dir="-1" aria-label="Previous"></button>
               <div class="ps-carousel-dots"></div>
               <button class="ps-carousel-btn" data-dir="1" aria-label="Next"></button>
             </div>
           </div>
   Default 3 cards per view; add .ps-carousel--2 for 2-up. Without JS the
   track is still a swipeable scroll-snap row, so nothing is ever hidden. */
.ps-carousel { position: relative; }
.ps-carousel-track {
  display: flex;
  gap: 1.5rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ps-carousel-track::-webkit-scrollbar { display: none; }
.ps-carousel-track > * {
  scroll-snap-align: start;
  flex: 0 0 calc((100% - 3rem) / 3);
  min-width: 0;
}
.ps-carousel--2 .ps-carousel-track > * { flex-basis: calc((100% - 1.5rem) / 2); }
.ps-carousel-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  margin-top: 2.25rem;
}
.ps-carousel-btn {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--color-strong-border);
  background: var(--color-white);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s ease, border-color 0.2s ease;
}
.ps-carousel-btn::before {
  content: '';
  width: 9px;
  height: 9px;
  border-right: 2.5px solid var(--color-prosolve-dark-midnight);
  border-bottom: 2.5px solid var(--color-prosolve-dark-midnight);
  transform: rotate(135deg) translate(-1px, 1px);
}
.ps-carousel-btn[data-dir="1"]::before { transform: rotate(-45deg) translate(-1px, 1px); }
.ps-carousel-btn:hover {
  background: var(--color-accent-yellow);
  border-color: var(--color-accent-yellow);
}
.ps-carousel-dots { display: flex; gap: 0.5rem; }
.ps-carousel-dot {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--color-strong-border);
  cursor: pointer;
  transition: background-color 0.2s ease, width 0.2s ease;
}
.ps-carousel-dot.active { background: var(--color-dark-teal-blue); width: 24px; }
@media (max-width: 1100px) {
  .ps-carousel-track > * { flex-basis: calc((100% - 1.5rem) / 2); }
}
@media (max-width: 700px) {
  .ps-carousel-track > *, .ps-carousel--2 .ps-carousel-track > * { flex-basis: 100%; }
}

/* Motion preferences: motion.js checks prefers-reduced-motion before
   animating; these guards cover the CSS-only effects. */
@media (prefers-reduced-motion: reduce) {
  .ps-btn, .ps-card, .ps-chips a { transition: none; }
}

/* Responsive collapse for the ps- grid helpers. */
@media (max-width: 1100px) {
  .ps-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .ps-h2 { font-size: 2.4rem; }
}
@media (max-width: 860px) {
  .ps-grid-2, .ps-grid-3, .ps-split { grid-template-columns: 1fr; }
  .ps-split { gap: 2.5rem; }
  .ps-h2 { font-size: 2.1rem; }
}
@media (max-width: 560px) {
  .ps-grid-4 { grid-template-columns: 1fr; }
}

/* ==========================================================================
   FRAMED PHOTO (.ps-frame)
   A photo clipped to a shape, with two offset silhouettes of that SAME shape
   stacked behind it: the accent color offset up-and-right (top), brand sky blue
   offset down-and-left (bottom). This is the sanctioned way to pair brand shapes
   with a photo — it replaces loose decorative shapes floating behind images.

   In a row of photos, only the OUTER photos take a directional cutout that points
   toward the center (--edge-left points right; --edge-right is its mirror). INNER
   photos use a plain rounded rectangle (--rect). Never give an inner photo a cutout.

   Markup (each frame wraps one <img>):
     <div class="ps-frame ps-frame--edge-left"><img src="…" alt="…"></div>
     <div class="ps-frame ps-frame--rect"><img src="…" alt="…"></div>
     <div class="ps-frame ps-frame--edge-right"><img src="…" alt="…"></div>
   The <img> carries its own height (inline or a utility); the frame fills its width.

   Per page, override --frame-top to the page/brand accent (default brand yellow);
   --frame-bottom stays brand sky blue.
   ========================================================================== */
.ps-frame {
  --frame-top: var(--color-accent-yellow);
  --frame-bottom: var(--color-prosolve-teal-blue);
  --frame-offset: 10px;
  --frame-radius: 14px;
  position: relative;
  display: block;
  isolation: isolate;
}
.ps-frame > img {
  display: block;
  width: 100%;
  object-fit: cover;
  position: relative;
  z-index: 3;
}
/* Two offset silhouettes sit behind the photo and show where they extend past
   it: accent offset up-and-right, sky blue offset down-and-left. The accent
   layer sits above the sky layer, so where a cutout's notch overlaps both, the
   top color shows there rather than the bottom color bleeding upward. */
.ps-frame::before,
.ps-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ps-frame::before {
  z-index: -1;
  background: var(--frame-top);
  transform: translate(var(--frame-offset), calc(-1 * var(--frame-offset)));
}
.ps-frame::after {
  z-index: -2;
  background: var(--frame-bottom);
  transform: translate(calc(-1 * var(--frame-offset)), var(--frame-offset));
}

/* Inner photos: rounded rectangle on all three layers (plain offset — no clip). */
.ps-frame--rect > img,
.ps-frame--rect::before,
.ps-frame--rect::after { border-radius: var(--frame-radius); }

/* Outer photos: directional cutout (a guaranteed mirror pair) on all three layers. */
.ps-frame--edge-left > img,
.ps-frame--edge-left::before,
.ps-frame--edge-left::after {
  -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/frame-edge-l.svg') center / 100% 100% no-repeat;
  mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/frame-edge-l.svg') center / 100% 100% no-repeat;
}
.ps-frame--edge-right > img,
.ps-frame--edge-right::before,
.ps-frame--edge-right::after {
  -webkit-mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/frame-edge-r.svg') center / 100% 100% no-repeat;
  mask: url('/UI%20Assets/Shapes/Photo%20Clip%20Mask%20Shapes/frame-edge-r.svg') center / 100% 100% no-repeat;
}

/* ==========================================================================
   DECORATIVE SHAPE LIBRARY (.ps-shape)
   The brand blobs, defined ONCE as CSS masks of the files in
   UI Assets/Shapes/ — never paste inline <svg> paths into pages.
   Usage: <div class="ps-shape ps-shape--s" aria-hidden="true"
            style="width:620px;height:311px;right:-220px;top:-140px;
                   opacity:0.55;background-color:#FFC943"
            data-parallax="14" data-scroll-parallax="0.12"></div>
   Size/position/opacity/color stay inline per instance; rotation (90°
   increments ONLY) via inline transform. Keep the div's width:height near
   the shape's native ratio (noted below) so it doesn't distort.
   ========================================================================== */
.ps-shape { position: absolute; pointer-events: none; }
.ps-shape[data-parallax], .ps-shape[data-scroll-parallax] { will-change: translate; }
/* zig / S-blob — 221.54×111.27 (≈2:1) */
.ps-shape--s { -webkit-mask: url('/UI%20Assets/Shapes/shape-04.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-04.svg') center / 100% 100% no-repeat; }
/* stepped blob — 222.41×166.91 (≈4:3) */
.ps-shape--step { -webkit-mask: url('/UI%20Assets/Shapes/shape-08.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-08.svg') center / 100% 100% no-repeat; }
/* offset plus — 247.56×247.62 (1:1) */
.ps-shape--plus { -webkit-mask: url('/UI%20Assets/Shapes/shape-09.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-09.svg') center / 100% 100% no-repeat; }
/* tall L — 185.78×371.57 (1:2) */
.ps-shape--tall { -webkit-mask: url('/UI%20Assets/Shapes/shape-10.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-10.svg') center / 100% 100% no-repeat; }
/* wide steps — 265.47×132.72 (2:1) */
.ps-shape--wide { -webkit-mask: url('/UI%20Assets/Shapes/shape-01.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-01.svg') center / 100% 100% no-repeat; }
/* staircase — 166.91×166.81 (1:1) */
.ps-shape--stair { -webkit-mask: url('/UI%20Assets/Shapes/shape-02.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-02.svg') center / 100% 100% no-repeat; }
/* T-blob — 222.41×220.61 (1:1) */
.ps-shape--t { -webkit-mask: url('/UI%20Assets/Shapes/shape-03.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-03.svg') center / 100% 100% no-repeat; }
/* rounded bar — 249.92×123.86 (2:1) */
.ps-shape--bar { -webkit-mask: url('/UI%20Assets/Shapes/shape-07.svg') center / 100% 100% no-repeat; mask: url('/UI%20Assets/Shapes/shape-07.svg') center / 100% 100% no-repeat; }

/* ==========================================================================
   PRODUCT/SERVICE PAGE COMPONENTS
   The shared templates behind every product page (QUEST is the design
   master). A page sets its palette once in a tiny local style block:
     :root { --page-accent: var(--color-product-quest-orange);
             --page-hero-bg: var(--color-product-quest-orange);
             --page-cta-bg:  var(--color-prosolve-teal-blue); }
   and every component below recolors itself. Page-local <style> blocks
   should hold ONLY genuinely unique flourishes, never copies of these.
   ========================================================================== */
:root {
  --page-accent: var(--color-prosolve-teal-blue);
  --page-hero-bg: var(--color-prosolve-teal-blue);
  --page-cta-bg: var(--color-prosolve-teal-blue);
}
.ps-eyebrow--accent { color: var(--page-accent); }

/* --- Hero (product-color field, navy text) --- */
.ps-hero { position: relative; overflow: hidden; background: var(--page-hero-bg); padding: 5.5rem 0 6rem; }
/* Subtle maze texture across every hero, matching the homepage. Tinted white
   rather than a fixed colour so it reads as a lighter tone of whatever field
   it sits on — sky blue, QUEST orange, UNLOCK green or SLED's blue alike.
   Override --hero-maze per page if a field needs a different weight. */
.ps-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-color: var(--hero-maze, #FFFFFF);
  -webkit-mask: url('/UI%20Assets/Patterns/Maze%20Large%20No%20Tile.svg') center / cover no-repeat;
  mask: url('/UI%20Assets/Patterns/Maze%20Large%20No%20Tile.svg') center / cover no-repeat;
  opacity: var(--hero-maze-opacity, 0.18);
  pointer-events: none;
  z-index: 0;
}
/* Hero content clears the texture. */
.ps-hero > .ps-container { position: relative; z-index: 1; }
.ps-hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; }
.ps-hero h1 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3.4rem;
  line-height: 1.1;
  color: var(--color-prosolve-dark-midnight);
  margin: 0 0 1.5rem;
  max-width: 18ch;
  text-wrap: pretty;
}
.ps-hero h1 span { color: #FFFFFF; }
.ps-hero-lead { color: var(--color-prosolve-dark-midnight); font-size: 1.2rem; line-height: 1.6; margin: 0 0 2.25rem; max-width: 52ch; }
.ps-hero-sub { color: var(--color-prosolve-dark-midnight); margin: 0 0 2.25rem; max-width: 52ch; }
.ps-hero-logo { display: block; height: 68px; width: auto; margin-bottom: 2rem; filter: drop-shadow(0 4px 16px rgba(0, 19, 35, 0.2)); }
.ps-supports-label {
  color: var(--color-prosolve-dark-midnight);
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
.ps-hero-media { position: relative; }
.ps-hero-img { width: 100%; border-radius: 12px; box-shadow: 0 24px 64px rgba(0, 19, 35, 0.3); display: block; }
.ps-hero-photo {
  position: absolute;
  z-index: 2;
  left: -48px;
  bottom: -56px;
  width: 240px;
  border-radius: 12px;
  box-shadow: 0 16px 40px rgba(0, 19, 35, 0.25);
  display: block;
}
/* Product wordmark badge hanging off the hero media's bottom-right corner. */
.ps-hero-brand {
  position: absolute;
  z-index: 2;
  right: -12px;
  bottom: -58px;
  height: 44px;
  width: auto;
  display: block;
  filter: drop-shadow(0 4px 16px rgba(0, 19, 35, 0.25));
}

/* --- Section heads (centered by default; --left variant) ---
   Color/margin target the body paragraph only, never the eyebrow (which
   keeps its own .ps-eyebrow treatment). On dark/teal fields the body copy
   flips to a readable light/navy ink for contrast. */
.ps-section-head { text-align: center; margin: 0 auto 3rem; }
.ps-section-head p:not(.ps-eyebrow) { margin: 1.25rem auto 0; color: #455A6F; }
.ps-section-head--left { text-align: left; margin: 0 0 3rem; }
.ps-section-head--left p:not(.ps-eyebrow) { margin: 1.25rem 0 0; }
.ps-section--dark .ps-section-head p:not(.ps-eyebrow) { color: var(--color-light-teal-blue); }
.ps-section--teal .ps-section-head p:not(.ps-eyebrow) { color: var(--color-prosolve-dark-midnight); }

/* --- Feature split rows (What's included / How it builds) --- */
.ps-feature + .ps-feature { margin-top: 5rem; }
.ps-feature-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2rem;
  line-height: 1.2;
  color: var(--color-prosolve-dark-midnight);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.ps-feature p { color: #455A6F; margin: 0 0 1.25rem; }
/* Bulleted list with accent-colored square markers. */
.ps-list { list-style: none; margin: 0 0 1.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
.ps-list li { position: relative; padding-left: 1.6rem; color: var(--color-body-text); line-height: 1.6; }
.ps-list li strong { color: var(--color-prosolve-dark-midnight); }
.ps-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  background: var(--page-accent);
}

/* --- Phase / step cards (QUEST "Inside every episode" template) ---
   Light cards on a dark or color field. Set --phase-cols for 5-up. */
.ps-phases { display: grid; grid-template-columns: repeat(var(--phase-cols, 4), 1fr); gap: 1.25rem; }
.ps-phase {
  background: var(--color-white);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  box-shadow: 0 10px 30px rgba(0, 19, 35, 0.25);
  transition: transform 0.3s ease, border-color 0.3s ease;
}
.ps-phase:hover { transform: translateY(-6px); border-color: var(--page-accent); }
.ps-phase-head { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; }
.ps-phase-n {
  flex: none;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  color: var(--color-prosolve-dark-midnight);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.5rem;
}
/* Colored pill tag with dark text (background set inline per phase). */
.ps-phase-tag {
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-prosolve-dark-midnight);
  padding: 0.28rem 0.7rem;
  border-radius: 999px;
}
.ps-phase h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.2rem;
  line-height: 1.3;
  color: var(--color-prosolve-dark-midnight);
  margin: 0 0 0.75rem;
}
.ps-phase-head h3 { margin: 0; }
.ps-phase > p { color: #455A6F; font-size: 0.9rem; line-height: 1.55; margin: 0; }

/* --- Use-case cards (QUEST "Wherever you need it" template) --- */
.ps-usecases { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.ps-usecase {
  position: relative;
  overflow: hidden;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 2rem 7rem 2rem 2rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.ps-usecase:hover { border-color: var(--page-accent); box-shadow: 0 12px 32px rgba(0, 19, 35, 0.08); }
.ps-usecase-corner { position: absolute; right: -20px; bottom: -16px; opacity: 0.9; }
.ps-usecase-tag {
  color: var(--page-accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0 0 0.6rem;
}
.ps-usecase h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.35rem;
  line-height: 1.3;
  color: var(--color-prosolve-dark-midnight);
  margin: 0 0 0.75rem;
}
.ps-usecase p { color: #455A6F; margin: 0; line-height: 1.6; }

/* --- Photo-top cards — 3-across row with an image capping each card.
   Used for the HUB pages' "where used" sections. --- */
.ps-photocards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
/* A two-card row in a three-column grid strands an empty third column and
   pushes the pair off to the left. Centre it instead, at the same card width
   the three-up uses (356px + the 1.5rem gap), so cards stay a consistent size
   across the site rather than stretching to fill the row. */
.ps-photocards:has(> :last-child:nth-child(2)) {
  grid-template-columns: repeat(2, 1fr);
  max-width: 736px;
  margin-inline: auto;
}
.ps-photocard {
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.ps-photocard:hover { border-color: var(--page-accent); box-shadow: 0 12px 32px rgba(0, 19, 35, 0.1); transform: translateY(-4px); }
.ps-photocard-img { width: 100%; height: 190px; object-fit: cover; display: block; }
.ps-photocard-body { padding: 1.75rem; display: flex; flex-direction: column; gap: 0.5rem; }
.ps-photocard-tag {
  color: var(--page-accent);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0;
}
.ps-photocard h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-prosolve-dark-midnight);
  margin: 0;
}
.ps-photocard p { color: #455A6F; margin: 0; line-height: 1.6; }
@media (max-width: 900px) { .ps-photocards { grid-template-columns: 1fr; max-width: none; } }

/* --- Story cards (testimonial carousel slides) --- */
/* Quote-strip card: big opening quote mark + title. */
.ps-story-quote { position: relative; padding: 2rem 1.75rem 1.75rem 4.5rem; }
.ps-story-quote::before {
  content: '\201C';
  position: absolute;
  left: 1.4rem;
  top: 0.6rem;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 4rem;
  line-height: 1;
  color: var(--page-accent);
  opacity: 0.85;
}
.ps-story-quote h4 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1.35;
  color: var(--color-prosolve-dark-midnight);
  margin: 0;
}
/* Logo + title row card (HUB pages). */
.ps-story-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 1.75rem;
  align-items: center;
  padding: 1.75rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  transition: border-color 0.25s ease;
}
.ps-story-row:hover { border-color: var(--page-accent); }
.ps-story-logo {
  width: 76px;
  height: 76px;
  border-radius: 12px;
  border: 1px solid var(--color-border);
  background: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.ps-story-logo img { max-width: 58px; max-height: 58px; object-fit: contain; display: block; }
.ps-story-logo svg { display: block; }
.ps-story-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.3;
  color: var(--color-prosolve-dark-midnight);
  margin: 0;
}
.ps-story-desc { color: #455A6F; margin: 0.4rem 0 0; line-height: 1.55; }

/* --- Closing CTA ---
   Every closing CTA carries the block pattern snapped to each edge, as
   pseudo-elements so all 31 inherit it with no markup of their own. The field
   itself still comes from --page-cta-bg, so product pages keep their own
   colour (UNLOCK green, SLED's washed blue, and so on). */
.ps-cta {
  position: relative;
  overflow: hidden;
  background: var(--page-cta-bg);
  padding: 5rem 0;
  text-align: center;
}
.ps-cta::before,
.ps-cta::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(225px, 39vw, 690px);
  background-color: #FFFFFF;
  opacity: 0.22;
  pointer-events: none;
  z-index: 0;
}
.ps-cta::before {
  left: 0;
  -webkit-mask: url('/UI%20Assets/Patterns/Blocks%20Left.svg') left center / auto 150% no-repeat;
  mask: url('/UI%20Assets/Patterns/Blocks%20Left.svg') left center / auto 150% no-repeat;
}
.ps-cta::after {
  right: 0;
  -webkit-mask: url('/UI%20Assets/Patterns/Blocks%20Right.svg') right center / auto 150% no-repeat;
  mask: url('/UI%20Assets/Patterns/Blocks%20Right.svg') right center / auto 150% no-repeat;
}
/* Content clears the block panels. */
.ps-cta > .ps-container { position: relative; z-index: 1; }
.ps-cta h2 {
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.12;
  color: var(--color-prosolve-dark-midnight);
  margin: 0 0 1rem;
  text-wrap: pretty;
}
.ps-cta p { color: var(--color-darkest-teal-blue); font-size: 1.1rem; max-width: 64ch; margin: 0 auto 2.25rem; }
.ps-cta .ps-actions { justify-content: center; }
/* On dark CTA fields (e.g. SLED's washed blue) flip the ink. */
.ps-cta--on-dark h2 { color: var(--color-white); }
.ps-cta--on-dark p { color: var(--color-light-teal-blue); }

/* --- Component responsive collapses --- */
@media (max-width: 1100px) {
  .ps-hero h1 { font-size: 2.9rem; }
  .ps-phases { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  .ps-hero-grid, .ps-usecases { grid-template-columns: 1fr; }
  .ps-hero-photo { position: static; width: 60%; margin-top: 1rem; }
  .ps-hero-brand { position: static; height: 38px; margin-top: 1.25rem; }
  .ps-phases { grid-template-columns: 1fr; }
  .ps-cta h2 { font-size: 2.3rem; }
  .ps-feature + .ps-feature { margin-top: 3.5rem; }
}
@media (max-width: 560px) {
  .ps-story-row { grid-template-columns: 56px 1fr; gap: 1.1rem; }
  .ps-story-logo { width: 56px; height: 56px; }
  .ps-story-logo img { max-width: 42px; max-height: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ps-phase, .ps-usecase, .ps-story-row { transition: none; }
  .ps-phase:hover { transform: none; }
}

/* ========================================================================
   FORMS
   Shared form grammar (contact, and any future form). Inputs match the card
   system: 1px hairline border, 10px radius, teal focus ring. Layout is a
   two-column grid that collapses to one; add .ps-field--full to span.
   ======================================================================== */

.ps-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem 1.5rem; }
.ps-field { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.ps-field--full { grid-column: 1 / -1; }

.ps-label {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--color-prosolve-dark-midnight);
}
/* Required marker is generated, so the label text itself stays clean. */
.ps-label--req::after { content: ' *'; color: var(--color-dark-teal-blue); }

.ps-input,
.ps-select,
.ps-textarea {
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-prosolve-dark-midnight);
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  width: 100%;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.ps-textarea { resize: vertical; min-height: 120px; }
.ps-input::placeholder, .ps-textarea::placeholder { color: #8A99A8; }

.ps-input:focus,
.ps-select:focus,
.ps-textarea:focus {
  outline: none;
  border-color: var(--color-prosolve-teal-blue);
  box-shadow: 0 0 0 3px rgba(48, 207, 229, 0.25);
}
/* :user-invalid only matches after the user has actually interacted, so an
   untouched required field never loads pre-flagged in red. (:invalid alone
   would flag every empty required field on page load.) */
.ps-input:user-invalid,
.ps-select:user-invalid,
.ps-textarea:user-invalid { border-color: #D64545; }

/* Native arrow is inconsistent across browsers, so draw our own. */
.ps-select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23001323' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 12px 8px;
  padding-right: 2.6rem;
}

/* Checkbox group */
.ps-fieldset { border: 0; margin: 0; padding: 0; }
.ps-fieldset legend { padding: 0; }
.ps-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem 1.5rem; margin-top: 0.75rem; }
.ps-check { display: flex; align-items: flex-start; gap: 0.6rem; cursor: pointer; line-height: 1.5; }
.ps-check input {
  flex: none;
  width: 20px; height: 20px;
  margin: 0.1rem 0 0;
  accent-color: var(--color-dark-teal-blue);
  cursor: pointer;
}
.ps-check span { color: var(--color-body-text); font-size: 0.95rem; }

.ps-form-note { grid-column: 1 / -1; color: #5A6B7B; font-size: 0.88rem; line-height: 1.6; margin: 0; }
.ps-form-actions { grid-column: 1 / -1; margin-top: 0.5rem; }

/* Honeypot: a real field, visually removed. Bots fill it, people never see it. */
.ps-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 700px) {
  .ps-form, .ps-checks { grid-template-columns: 1fr; }
}

/* ============================================================
   BLOG
   Index (.blog-*) and post (.bp-*) components, built from the
   wireframe's regions and dressed in the site palette. The
   wireframe's greys become the ProSolve neutrals; its underlined
   text links become the teal link treatment; its plain rules
   become --color-border.

   The index is static HTML — every card is in the markup with
   data-category / data-tags on it, and blog.js only shows and
   hides. Filter state lives in the URL so a filtered view is
   linkable, which is what the wireframe asked for.
   ============================================================ */

/* ---------- Index hero: shorter than a page hero. Title + one line. ---------- */
.blog-hero { padding: 4rem 0 3.25rem; }
.blog-hero h1 { margin: 0 0 1rem; }
.blog-hero p { max-width: 56ch; margin: 0; font-size: 1.1rem; line-height: 1.6; }

/* ---------- Featured post: image 7 cols / text 5, above the filter bar ---------- */
/* The featured post is one large card, clickable edge to edge. "Read the Post"
   is a span styled as a button rather than a nested link — a real <a> inside
   an <a> is invalid, and the whole card already goes to the same place. */
.blog-featured {
  display: grid;
  grid-template-columns: 1.42fr 1fr;
  align-items: stretch;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog-featured:hover {
  transform: translateY(-5px);
  border-color: var(--color-prosolve-teal-blue);
  box-shadow: 0 20px 48px rgba(0, 19, 35, 0.12);
}
.blog-featured-media { display: block; min-height: 0; overflow: hidden; background: var(--color-alternate-background); }
.blog-featured-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-featured-body { display: flex; flex-direction: column; justify-content: center; gap: 0.9rem; padding: 2.5rem; }
.blog-featured-dek { color: #455A6F; font-size: 1.02rem; line-height: 1.6; }
/* The button is decoration inside the card, so it must not swallow the click. */
.blog-featured-btn { align-self: start; margin-top: 0.6rem; pointer-events: none; }
.blog-featured:hover .blog-featured-btn { background-color: var(--color-accent-yellow); color: var(--color-prosolve-dark-midnight); }
.blog-featured-body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.1rem;
  line-height: 1.2;
  color: var(--color-heading-text);
  margin: 0;
  text-wrap: pretty;
}

/* Shared eyebrow + meta line, used on the featured block and every card. */
.blog-cat {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-dark-teal-blue);
}
.blog-meta { display: block; font-size: 0.82rem; color: var(--color-neutral-grey); }
.blog-meta span + span::before { content: '·'; margin: 0 0.5rem; }

/* ---------- Filter bar: sticks under the navbar ---------- */
.blog-filters {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--color-white);
  border-top: 1px solid var(--color-border);
  border-bottom: 1px solid var(--color-strong-border);
}
.blog-filters-inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.5rem; padding: 1.15rem 0 0; }
.blog-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
/* Categories on the first line, the tag panel toggle on its own beneath. */
.blog-filter-groups { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; }
.blog-chip {
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-body-text);
  background: var(--color-white);
  border: 1px solid var(--color-strong-border);
  border-radius: 999px;
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}
.blog-chip:hover { border-color: var(--color-prosolve-dark-midnight); }
.blog-chip[aria-pressed="true"],
.blog-chip.is-active {
  background: var(--color-prosolve-dark-midnight);
  border-color: var(--color-prosolve-dark-midnight);
  color: var(--color-white);
}

/* Tags sit behind a panel — fourteen chips never sit on the page at once. */
.blog-tagwrap { position: relative; }
.blog-tagtoggle::after {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  margin-left: 0.5rem;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
.blog-tagmenu {
  position: absolute;
  left: 0;
  top: calc(100% + 0.6rem);
  z-index: 10;
  width: 460px;
  max-width: 82vw;
  background: var(--color-white);
  border: 1px solid var(--color-strong-border);
  border-radius: 12px;
  box-shadow: 0 18px 44px rgba(0, 19, 35, 0.14);
  padding: 1.25rem;
  display: none;
}
.blog-tagmenu.is-open { display: block; }
.blog-tagmenu-head {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-grey);
  margin: 0 0 0.85rem;
}

.blog-search { display: flex; align-items: center; gap: 0.6rem; flex: none; width: 250px; border: 1px solid var(--color-strong-border); border-radius: 999px; padding: 0.5rem 0.95rem; }
.blog-search input { flex: 1; min-width: 0; border: 0; outline: none; font: inherit; font-size: 0.88rem; color: var(--color-body-text); background: transparent; }
.blog-search input::placeholder { color: var(--color-neutral-grey); }
.blog-search svg { flex: none; color: var(--color-neutral-grey); }

.blog-statusrow { display: flex; align-items: center; flex-wrap: wrap; gap: 0.6rem; padding: 0.9rem 0 1.15rem; font-size: 0.82rem; color: var(--color-neutral-grey); }
.blog-applied { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--color-alternate-background); border: 1px solid var(--color-border); border-radius: 999px; padding: 0.3rem 0.7rem; font-size: 0.78rem; color: var(--color-body-text); }
.blog-applied button { border: 0; background: none; padding: 0; cursor: pointer; font: inherit; color: var(--color-neutral-grey); line-height: 1; }
.blog-clear { border: 0; background: none; padding: 0; font: inherit; font-size: 0.82rem; font-weight: 600; color: var(--color-dark-teal-blue); cursor: pointer; text-decoration: underline; }

/* ---------- Card grid ---------- */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; align-items: stretch; }
.blog-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.blog-card:hover { transform: translateY(-6px); border-color: var(--color-prosolve-teal-blue); box-shadow: 0 16px 40px rgba(0, 19, 35, 0.1); }
/* The card is an <a> wrapping spans, so each part has to be told it is a
   block — an inline span ignores aspect-ratio and the cards stagger.
   flex:none and min-height:0 matter too: as a flex item the media would
   otherwise take its auto minimum size from the image and grow past the
   16:9 box, which staggers every row that has cards of unequal copy. */
.blog-card-media {
  display: block;
  flex: none;
  min-height: 0;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-alternate-background);
}
.blog-card-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-card-body { display: flex; flex-direction: column; gap: 0.55rem; padding: 1.25rem; flex: 1; }
/* Equal card heights: title clamps at 2 lines, dek at 2, meta and tags pinned
   to the bottom — a long question headline lands the same height as a short one. */
.blog-card-title {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.12rem;
  line-height: 1.3;
  color: var(--color-heading-text);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-dek {
  margin: 0;
  color: #455A6F;
  font-size: 0.9rem;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-card-foot { margin-top: auto; padding-top: 1rem; display: flex; flex-direction: column; gap: 0.65rem; }
.blog-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.blog-tag { border: 1px solid var(--color-border); background: var(--color-surface); border-radius: 999px; padding: 0.25rem 0.6rem; font-size: 0.72rem; color: #455A6F; }

/* blog.js hides with the hidden attribute, and a display rule of our own
   would otherwise win against the browser's [hidden] default. */
.blog-card[hidden],
.blog-grid[hidden],
.blog-empty[hidden],
[data-blog-featured][hidden] { display: none; }

.blog-empty { border: 1px dashed var(--color-strong-border); border-radius: 12px; padding: 3.5rem 2rem; text-align: center; }
.blog-empty h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.4rem; color: var(--color-heading-text); margin: 0 0 0.6rem; }
.blog-empty p { margin: 0 0 1.5rem; color: #455A6F; }

/* ============================================================
   BLOG POST
   ============================================================ */

/* Everything sits in a 680px measure except the related grid. */
.bp-measure { max-width: 680px; margin: 0 auto; }

.bp-header { padding: 0; }
.bp-back { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 600; color: var(--color-dark-teal-blue); text-decoration: none; margin: 0.75rem 0 1.5rem; }
.bp-back:hover { text-decoration: underline; }
.bp-back::before { content: ''; width: 6px; height: 6px; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); }
.bp-header h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 2.6rem;
  line-height: 1.18;
  color: var(--color-heading-text);
  margin: 0.85rem 0 0;
  text-wrap: pretty;
}
.bp-dek { font-size: 1.12rem; line-height: 1.55; color: #455A6F; margin: 1rem 0 0; }

.bp-byline { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1rem 0; margin-top: 1.75rem; }
.bp-byline-who { display: flex; align-items: center; gap: 0.85rem; }
.bp-avatar { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; flex: none; }
.bp-byline-name { display: block; font-size: 0.9rem; font-weight: 700; color: var(--color-heading-text); }
.bp-byline-sub { display: block; font-size: 0.8rem; color: var(--color-neutral-grey); margin-top: 0.15rem; }
.bp-share { display: flex; align-items: center; gap: 0.45rem; }
.bp-share a {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-strong-border);
  border-radius: 8px;
  color: var(--color-neutral-grey);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.bp-share a:hover { border-color: var(--color-prosolve-dark-midnight); color: var(--color-prosolve-dark-midnight); }

/* Body: one measure, generous leading — this is reading, not scanning. */
.bp-body { padding: 2.5rem 0 0; }
.bp-body p { font-size: 1.06rem; line-height: 1.75; color: var(--color-body-text); margin: 0 0 1.4rem; }
/* Inline links in body copy: underlined rather than colour-only, so they
   still read as links to anyone who cannot pick the teal out of the ink. */
.bp-body a {
  color: var(--color-very-dark-teal-blue);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.bp-body a:hover { color: var(--color-prosolve-dark-midnight); text-decoration-thickness: 2px; }
.bp-body h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 1.5rem;
  line-height: 1.3;
  color: var(--color-heading-text);
  margin: 2.4rem 0 1rem;
  text-wrap: pretty;
}
/* Closing question: same measure, one step up, air above. Five of six posts
   end this way, so it is a template slot rather than a flourish. */
.bp-close { font-size: 1.3rem; line-height: 1.5; font-weight: 500; color: var(--color-heading-text); margin: 2.25rem 0 0; }

/* Left rail: reading progress, sticky in the gutter. */
.bp-layout { position: relative; }
.bp-rail { position: absolute; left: 0; top: 0; width: 64px; height: 100%; }
.bp-rail-inner { position: sticky; top: 3rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bp-rail-label { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-grey); }
.bp-rail-track { width: 3px; height: 200px; background: var(--color-border); border-radius: 2px; overflow: hidden; }
.bp-rail-fill {
  display: block;
  width: 100%;
  height: 100%;
  background: var(--color-dark-teal-blue);
  transform: scaleY(0);
  transform-origin: top;
}
.bp-rail-pct { font-size: 0.7rem; color: var(--color-neutral-grey); }

/* "Keep going" resource block: 2–5 links, types told apart by marker + sub-label. */
.bp-resources { border: 1px solid var(--color-strong-border); border-radius: 12px; padding: 1.5rem; margin-top: 3rem; }
.bp-resources-head { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-neutral-grey); margin: 0 0 0.5rem; }
.bp-res { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0; border-top: 1px solid var(--color-border); text-decoration: none; }
.bp-res-glyph { width: 34px; height: 34px; flex: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: var(--color-light-teal-blue); color: var(--color-darkest-teal-blue); }
.bp-res-title { display: block; font-size: 0.95rem; font-weight: 700; color: var(--color-heading-text); }
.bp-res:hover .bp-res-title { text-decoration: underline; }
.bp-res-kind { display: block; font-size: 0.72rem; color: var(--color-neutral-grey); margin-top: 0.15rem; }

/* Post footer: tags, author, prev/next. */
.bp-foot { margin-top: 3rem; display: flex; flex-direction: column; gap: 2rem; }
.bp-foot-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.bp-foot-tags a { text-decoration: none; }
.bp-foot-tags a:hover .blog-tag { border-color: var(--color-prosolve-teal-blue); }
.bp-author { display: flex; gap: 1.1rem; border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); padding: 1.5rem 0; }
.bp-author img { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; flex: none; }
.bp-author h3 { font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; color: var(--color-heading-text); margin: 0 0 0.2rem; }
.bp-author p { margin: 0.5rem 0 0; font-size: 0.92rem; line-height: 1.6; color: #455A6F; }
.bp-author-role { font-size: 0.82rem; color: var(--color-neutral-grey); }

.bp-prevnext { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.bp-prevnext a { display: flex; flex-direction: column; gap: 0.5rem; border: 1px solid var(--color-border); border-radius: 12px; padding: 1.1rem; text-decoration: none; transition: border-color 0.2s ease; }
.bp-prevnext a:hover { border-color: var(--color-prosolve-teal-blue); }
.bp-prevnext .bp-pn-label { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-neutral-grey); }
.bp-prevnext .bp-pn-title { font-size: 0.95rem; font-weight: 700; line-height: 1.35; color: var(--color-heading-text); }
.bp-prevnext .bp-next { align-items: flex-end; text-align: right; }

@media (max-width: 1100px) {
  .bp-rail { display: none; }
  .blog-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .blog-featured { grid-template-columns: 1fr; }
  .blog-featured-media { aspect-ratio: 16 / 9; }
  .blog-featured-body { padding: 1.75rem; }
  .blog-grid { grid-template-columns: 1fr; }
  .blog-filters-inner { flex-direction: column; align-items: stretch; }
  .blog-search { width: 100%; }
  .bp-header h1 { font-size: 2rem; }
  .bp-byline { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .bp-prevnext { grid-template-columns: 1fr; }
  .bp-prevnext .bp-next { align-items: flex-start; text-align: left; }
}

/* Subscribe band: the wireframe's newsletter capture, carrying the
   site's "Subscribe to the Solve" copy instead of placeholder text. */
.blog-sub { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 0.5rem; }
.blog-sub input {
  width: 300px;
  max-width: 100%;
  font: inherit;
  font-size: 0.95rem;
  color: var(--color-body-text);
  background: var(--color-white);
  border: 1px solid var(--color-strong-border);
  border-radius: 999px;
  padding: 0.85rem 1.25rem;
}
.blog-sub input:focus { outline: 2px solid var(--color-darkest-teal-blue); outline-offset: 2px; }

/* Post hero: the same image the index card carries, sitting between the
   dek and the byline. It steps out past the 680 reading measure without
   going full-bleed, which keeps it clear of the progress rail. */
.bp-hero {
  display: block;
  width: 100%;
  max-width: 900px;
  margin: 2rem auto 2.25rem;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-alternate-background);
}
.bp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }

@media (max-width: 1100px) {
  .bp-hero { max-width: 680px; }
}
@media (max-width: 860px) {
  .bp-hero { margin: 1.5rem auto 1.75rem; }
}