/* ===================================================================
   PORTFOLIO CSS SYSTEM v3 - GeneratePress Override
   siarheimardovich.com
   Install: Appearance › Customize › Additional CSS
   =================================================================== */
/* ── 1. FONTS ───────────────────────────────────────────────────── */
/*
   Fonts are loaded via the head snippet file fonts-head-snippet.html.
   Paste those 3 link tags via WPCode or Insert Headers and Footers.
   @import is not used here - WordPress Customizer rejects it.
*/
/* ── 2. DESIGN TOKENS ───────────────────────────────────────────── */
/*
   All values are namespaced --pf-* to avoid collision with
   GeneratePress variables (--contrast, --base, --accent, etc.)
*/
:root {  /* hover */
  --pf-br-d: rgba(148, 163, 184, 0.22);
  --pf-t-sm:   15px;
  --pf-t-3xs:  11.5px;
/* ── Spacing - 8px grid ─────────────────────────────────────── */
  --pf-s1: 8px;
  --pf-s2: 16px;
  --pf-s3: 24px;
  --pf-s5: 48px;
  --pf-s6: 64px;
  --pf-s8: clamp(104px, 12vw, 156px);
/* Radius */
  --pf-r-sm: 6px;
  --pf-r-md: 8px;
  --pf-r-lg: 12px;
/* Layout */
  --pf-section-x: clamp(24px, 4vw, 40px);
  --pf-measure: 72ch;
  --pf-measure-tight: 62ch;
  --pf-measure-wide: 84ch;
/* Container */
  --pf-container:    980px;
  --pf-container-lg: 1120px;
}
/* ── 3. BOX MODEL RESET ─────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}
html, body {
  margin: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  overflow-x: hidden !important;
}
/* ── 4. BODY ────────────────────────────────────────────────────── */
body {
  background: var(--pf-bg) !important;
  color: var(--pf-tx-1) !important;
  font-family: 'Archivo', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-size: var(--pf-t-body) !important;
  text-rendering: optimizeLegibility !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
}
/* ── 5. HIDE ALL GENERATEPRESS CHROME ──────────────────────────── */
.site-header,
#masthead,
.site-header .inside-header,
.site-branding-container,
.site-logo,
.site-branding,
.main-title,
.site-description,
.main-navigation,
#site-navigation,
#mobile-menu-control-wrapper,
.mobile-menu-control-wrapper,
.menu-toggle,
.site-footer,
.site-info,
.inside-site-info,
.footer-widgets,
.copyright-bar,
.widget-area,
#right-sidebar,
#left-sidebar,
.is-right-sidebar,
.is-left-sidebar,
.skip-link,
.screen-reader-text,
.generate-back-to-top,
.scroll-up,
#generate-slideout-menu,
.slideout-overlay,
.toggled .main-navigation,
.wp-block-spacer,
.wp-block-separator {
  display: none !important;
}
/* Hide the default WP page title only when a portfolio page is using
   our custom section system. This prevents duplicate hero titles from
   leaking above the custom case-study header. */
body:has(.portfolio-section) .inside-article > .entry-header,
body:has(.portfolio-section) .page-header {
  display: none !important;
}
/* ── 5b. COLLAPSE WORDPRESS EDITOR EMPTY PARAGRAPHS ────────────── */
/*
   WordPress Classic Editor inserts empty paragraph tags between blocks.
   These render as ~28px strips on the dark background.
   Suppress them entirely. :has() is supported in all modern browsers.
*/
.entry-content p:empty,
.entry-content p:has(> br:only-child) {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 0 !important;
}
/* Neutralize WordPress wrappers around standalone custom blocks and links */
.entry-content > p:has(> .cs-back:only-child),
.entry-content > p:has(> script:only-child),
.entry-content > p:has(> .cs-disclosure:only-child),
.portfolio-work-grid > p:has(> .portfolio-work-card:only-child),
.portfolio-showcase-nav-grid > p:has(> .portfolio-showcase-nav-card:only-child),
.portfolio-showcase-nav > p:has(> .portfolio-showcase-nav-home:only-child),
.portfolio-full-bleed > p:has(> .portfolio-embed:only-child) {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* Belt-and-suspenders for older browsers that don't support :has() */
.entry-content br {
  display: none !important;
}
/* Re-show br elements that are INSIDE our custom components */
.portfolio-section br,
.cs-narrative br,
.portfolio-about-bio br {
  display: inline !important;
}
/* ── 5c. NAV DUPLICATION - Belt & suspenders ────────────────────── */
/* Catch any remaining nav toggle/render duplicates that leak through */
/* Slideout menu variants */
.slideout-toggle,
.slideout-menu-toggle,
.slideout-overlay,
/* Hamburger icon variants */
.hamburger,
.hamburger-container,
.menu-bar-item,
.menu-bar-item-toggle,
/* ARIA-labeled menu wrappers */
[aria-label*="menu"],
[aria-controls="mobile-menu"],
[aria-controls="primary-menu"],
/* GP Off-canvas / drawer patterns */
.off-canvas-toggle,
.drawer-toggle,
.slideout-anchor,
/* Any element with "Menu" text that is not the page content */
.menu-toggle-wrapper,
.menu-label,
.menu-text {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}
/* Ensure no nav-related element gets focus and becomes visible */
.main-navigation:focus,
.menu-toggle:focus-within,
.slideout-toggle:focus {
  outline: none !important;
}
/* ── 6. STRIP GENERATEPRESS SPACING ────────────────────────────── */
.site,
.site.grid-container,
.site.grid-container.container,
.site-content,
.content-area,
#primary,
#content,
.inside-article,
.entry-content,
.inside-content,
.hfeed,
.site-main,
#main,
.entry-content > *,
.wp-block-group,
.wp-block-columns,
.wp-block-column {
  max-width: 100% !important;
  width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  border: none !important;
  box-shadow: none !important;
}
/* Remove WordPress default element margins */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6,
.entry-content p,
.entry-content ul,
.entry-content ol,
.entry-content li,
.entry-content blockquote,
.entry-content figure,
.entry-content pre,
.entry-content table,
.entry-content hr {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
}
.entry-content ul {
  list-style: none !important;
  padding-left: 0 !important;
}
.wp-block-group__inner-container,
.wp-block-group.has-background {
  padding: 0 !important;
  margin: 0 !important;
}
.is-layout-constrained > * {
  max-width: none !important;
}
/* ── 7. TYPOGRAPHY ──────────────────────────────────────────────── */
/*
   Headings: Space Grotesk - geometric, tight tracking, editorial weight
   Body:     Archivo - open apertures, excellent text rendering
   UI:       Inter - available for embed contexts (loaded separately)
*/
body h1,
body h2,
body h3,
body h4,
body h5,
body h6 {
  font-family: 'Space Grotesk', sans-serif !important;
  letter-spacing: -0.03em !important;
  color: var(--pf-tx-1) !important;
  line-height: 1.08 !important;
  text-wrap: balance !important;
  margin: 0 !important;
}
body p {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-body) !important;
  /* Inherit from body (--pf-tx-1) rather than forcing a specific tier -
     component rules pin the exact value where it matters. This prevents
     WordPress-generated paragraph wrappers from bleeding a wrong color into
     sections that shouldn't have any paragraph text. */
  color: inherit !important;
  text-wrap: pretty !important;
  margin: 0 !important;
}
/* Narrative and component paragraphs get the explicit secondary color */
.portfolio-section p,
.portfolio-lead,
.portfolio-about-text,
.portfolio-work-desc,
.cs-narrative p,
.portfolio-role-card p {
  color: var(--pf-tx-2) !important;
}
/* ── 8. SECTIONS ────────────────────────────────────────────────── */
section {
  display: block !important;
}
.portfolio-section {
  width: 100% !important;
  padding: var(--pf-s7) var(--pf-section-x) !important;
  display: block !important;
  margin: 0 !important;
  border: none !important;
}
.portfolio-section--dark {
  background: var(--pf-bg) !important;
  color: var(--pf-tx-1) !important;
}
.portfolio-section--narrative {
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 40%),
    radial-gradient(circle at top center, rgba(129, 140, 248, 0.08), transparent 38%),
    linear-gradient(180deg, var(--pf-bg) 0%, var(--pf-bg-2) 100%) !important;
  color: var(--pf-tx-1) !important;
  padding-top: var(--pf-s8) !important;
}
.portfolio-showcase-hero {
  padding-top: clamp(64px, 8vw, 104px) !important;
  padding-bottom: clamp(40px, 5vw, 72px) !important;
}
.portfolio-showcase-hero .portfolio-container {
  max-width: 1120px !important;
}
.portfolio-showcase-hero .portfolio-hero-title {
  max-width: 18ch !important;
}
body.home .portfolio-showcase-hero .portfolio-hero-title {
  max-width: 20ch !important;
  line-height: 1.14 !important;
  letter-spacing: -0.022em !important;
}
/* Case-study hero subtitle: secondary line that keeps the headline flowing */
.portfolio-title-sub {
  display: block !important;
  margin-top: 0.18em !important;
  font-size: 0.58em !important;
  font-weight: 500 !important;
  letter-spacing: -0.01em !important;
  line-height: 1.18 !important;
  color: var(--pf-tx-3) !important;
}
.portfolio-showcase-hero .portfolio-lead {
  max-width: 60ch !important;
}
.portfolio-section--flush {
  padding-top: 32px !important;
}
.portfolio-section--flush-all {
  padding-top: 32px !important;
  padding-bottom: 80px !important;
}
.portfolio-section--case-meta {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.portfolio-section--case-meta .portfolio-role-grid {
  margin-top: 0 !important;
}
.portfolio-section + .portfolio-section {
  border-top: 1px solid rgba(148, 163, 184, 0.07) !important;
}
#selected-work {
  scroll-margin-top: 24px;
}
.portfolio-container {
  max-width: var(--pf-container) !important;
  margin: 0 auto !important;
  width: 100% !important;
}
@media (min-width: 1024px) {
  .portfolio-container {
    max-width: var(--pf-container-lg) !important;
  }
}
/* ── 9. HERO TITLE ──────────────────────────────────────────────── */
.portfolio-hero-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-hero) !important;
  font-weight: 600 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  color: var(--pf-tx-1) !important;
  max-width: 24ch !important;
  margin: 0 0 var(--pf-s3) !important;
  text-wrap: balance !important;
}
/* ── 10. LEAD TEXT ──────────────────────────────────────────────── */
.portfolio-lead {
  font-family: 'Archivo', sans-serif !important;
  font-size: clamp(18px, 1.2vw, 21px) !important;
  line-height: 1.74 !important;
  color: var(--pf-tx-2) !important;
  max-width: var(--pf-measure-tight) !important;
  margin: 0 0 var(--pf-s3) !important;
}
.portfolio-lead:last-child {
  margin-bottom: 0 !important;
}
.cs-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  color: var(--pf-tx-3) !important;
  transition: color 160ms ease;
}
.cs-back::before {
  content: "←";
  font-size: 15px;
  line-height: 1;
  color: var(--pf-accent-text);
}
.cs-back:hover {
  color: var(--pf-tx-2) !important;
}
/* ── 11. SECTION HEADINGS ───────────────────────────────────────── */
/*
   Use .cs-section-title on h2 elements in case study sections.
   .portfolio-section h2 provides an unstyled fallback for bare h2s.
*/
.cs-section-title,
.portfolio-section h2 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-h2) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  color: var(--pf-tx-1) !important;
  margin: 0 0 var(--pf-s4) !important;
}
/* ── 12. ROLE CARDS ─────────────────────────────────────────────── */
.portfolio-role-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: var(--pf-s3) !important;
  max-width: 1000px !important;
  margin: var(--pf-s5) auto 0 !important;
}
.portfolio-role-card {
  background: var(--pf-bg-card) !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  min-height: 172px !important;
  padding: var(--pf-s4) !important;
}
.portfolio-role-card h2,
.portfolio-role-card h3 {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--pf-tx-3) !important;
  line-height: 1.4 !important;
  margin: 0 0 var(--pf-s2) !important;
}
.portfolio-role-card p {
  font-size: var(--pf-t-sm) !important;
  line-height: 1.76 !important;
  color: var(--pf-tx-2) !important;
  margin: 0 !important;
}
/* ── 13. CASE STUDY NARRATIVE ───────────────────────────────────── */
.cs-narrative {
  max-width: var(--pf-measure) !important;
  margin: 0 auto var(--pf-s6) !important;
}
.cs-narrative p {
  font-size: var(--pf-t-body) !important;
  line-height: 1.88 !important;
  color: var(--pf-tx-2) !important;
  margin: 0 0 var(--pf-s4) !important;
}
.cs-narrative p:last-child {
  margin-bottom: 0 !important;
}
.cs-narrative--resume {
  margin-top: 0 !important;
}
/* ── 14. ARTIFACT PLACEHOLDERS ──────────────────────────────────── */
.cs-artifact {
  max-width: min(100%, var(--pf-measure-wide)) !important;
  margin: var(--pf-s6) auto !important;
}
.cs-artifact-placeholder {
  background: var(--pf-bg-card-alt) !important;
  border: 1px dashed var(--pf-br-d) !important;
  border-radius: var(--pf-r-lg) !important;
  overflow: hidden !important;
}
.cs-artifact-placeholder-inner {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  padding: var(--pf-s6) var(--pf-s4) !important;
  text-align: center !important;
  min-height: 220px !important;
  gap: var(--pf-s1) !important;
}
.cs-artifact-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(20px, 1.7vw, 24px) !important;
  font-weight: 600 !important;
  color: var(--pf-tx-1) !important;
  display: block !important;
  margin-bottom: 4px !important;
}
.cs-artifact-type {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-2xs) !important;
  font-weight: 500 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  color: var(--pf-tx-4) !important;
  display: block !important;
  margin-bottom: var(--pf-s2) !important;
}
.cs-artifact-note {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  color: var(--pf-tx-4) !important;
  font-style: normal !important;
}
.cs-caption {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  line-height: 1.65 !important;
  color: var(--pf-tx-3) !important;
  max-width: var(--pf-measure) !important;
  margin: var(--pf-s2) auto 0 !important;
  font-style: normal !important;
}
.cs-artifact img {
  width: 100% !important;
  height: auto !important;
  border-radius: var(--pf-r-lg) !important;
  display: block !important;
}
/* ── 14b. SUPPRESS "PENDING ASSET" TEXT ─────────────────────────── */
/* The .cs-artifact-note is designed for captions. Hide the
   "Pending asset: ..." variant until actual images are added.
   This removes the visual signal of incompleteness while preserving
   the structural placeholder for future image insertion. */
.cs-artifact-note {
  display: none !important;
}
/* When an actual image is added, re-show the note as a proper caption */
.cs-artifact img + .cs-artifact-note,
.cs-artifact:has(img) .cs-artifact-note {
  display: block !important;
  margin-top: var(--pf-s2) !important;
}
/* ── 15. CALLOUT (PULL QUOTE) ───────────────────────────────────── */
.cs-callout {
  max-width: var(--pf-measure) !important;
  margin: 48px auto 64px !important;
  padding: 22px 28px !important;
  border-left: 2px solid var(--pf-accent-text) !important;
  border-radius: 0 10px 10px 0 !important;
  background: var(--pf-accent-bg) !important;
}
.cs-callout p {
  margin: 0 !important;
  font-size: var(--pf-t-body) !important;
  line-height: 1.7 !important;
  color: var(--pf-tx-2) !important;
}
/* ── 16. PROTOTYPE EMBED ────────────────────────────────────────── */
.cs-prototype {
  margin: var(--pf-s6) 0 var(--pf-s2) !important;
}
.cs-prototype-label {
  display: flex !important;
  align-items: center !important;
  gap: var(--pf-s1) !important;
  margin-bottom: var(--pf-s2) !important;
  flex-wrap: wrap !important;
}
.cs-prototype-badge {
  font-family: 'Space Grotesk', sans-serif !important;
  background: var(--pf-accent-bg) !important;
  color: var(--pf-accent-text) !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  padding: 4px 10px !important;
  border-radius: var(--pf-r-sm) !important;
  white-space: nowrap !important;
}
.cs-prototype-label span:last-child {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  color: var(--pf-tx-3) !important;
}
/* ── 16. FULL-BLEED EMBED ───────────────────────────────────────── */
.portfolio-full-bleed {
  width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-bottom: var(--pf-s5) !important;
  padding: 0 !important;
  overflow: hidden !important;
}
/* `site-common.css` (linked further down, after this block) defines its own
   bare `.portfolio-full-bleed { width:100% !important; margin: ... !important }`.
   Equal specificity + equal !important means cascade order decides, and
   since that stylesheet loads AFTER this inline block, it was silently
   winning and turning this wrapper back into a normal 100%-of-container box
   — the base rule above was dead code the whole time. (Same class of bug as
   the invisible-CTA-button fix elsewhere on this page: a shared rule beating
   a page-local one on load order, not on merit.)
Separately: `width:100vw` + `margin-left:calc(-50vw+50%)` + `overflow:hidden`
   is ALSO not safe once the page is tall enough to show a vertical scrollbar.
   100vw includes the scrollbar track (e.g. 1440px) while the 50% half of the
   margin math resolves against the actual visible content width
   (documentElement.clientWidth, e.g. 1425px with a 15px scrollbar) — a
   mismatch that shifts this wrapper off-center and, combined with its own
   overflow:hidden, silently clips real pixels off both edges of everything
   inside it, including the iframe. That combination is what was producing
   the "tiles cut off at both edges" symptom even though every
   box-relative-to-itself measurement checked out.
Fixed by scoping to .hrdj-page (beats site-common.css on specificity,
   not load order) and switching to self-referential centering
   (margin-left:50% + transform:translateX(-50%), based on this element's
   own resolved width, not the viewport) with overflow:visible since nothing
   should be overflowing once the math is scrollbar-safe. */
.hrdj-page .portfolio-full-bleed {
  width: calc(100vw - 24px) !important;
  margin-left: 50% !important;
  margin-right: 0 !important;
  transform: translateX(-50%) !important;
  margin-bottom: var(--pf-s5) !important;
  padding: 0 !important;
  overflow: visible !important;
}
.portfolio-embed {
  width: 100% !important;
  overflow: hidden !important;
  background: #09090b !important;
}
.portfolio-embed iframe {
  width: 100% !important;
  border: none !important;
  display: block !important;
  /* Height controlled by JS resize observer */
  transition: height 0.2s ease !important;
}
/* HR-DJ prototype is wider than the viewport; let it scroll instead of clip */
.hrdj-page .portfolio-embed {
  overflow-x: auto !important;
}
.hrdj-page .portfolio-embed iframe {
  min-width: 1200px !important;
}
/* Talent Caryatid can render later than static pages.
   Keep an adequate first paint height until JS syncs to the exact value. */
#talent-caryatid-frame {
  min-height: 1200px !important;
  background: #09090b !important;
}
/* Normalize the handoff after a full-bleed prototype block. Some pages place
   the following narrative directly after the iframe, others reopen a container
   and also add inline top margin. Override both patterns so the exit rhythm is
   consistent across all case studies. */
.portfolio-full-bleed + .cs-narrative,
.portfolio-full-bleed + .portfolio-container .cs-narrative:first-child {
  margin-top: 0 !important;
}
/* ── 16b. IFRAME FALLBACK STATES ────────────────────────────────── */
/* Auto-fade "Loading..." after 3s via CSS animation (works even if
   JS never fires .loaded).  The .loaded class provides instant hide
   when the parent JS confirms the child has rendered. */
.portfolio-embed {
  position: relative !important;
  min-height: 400px !important;
}
.portfolio-embed::after {
  content: "Interactive prototype · Loading...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'Inter', sans-serif;
  font-size: var(--pf-t-xs);
  color: var(--pf-tx-4);
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
  animation: pf-embed-fade 0.4s ease 3s forwards;
}
@keyframes pf-embed-fade {
  to { opacity: 0; pointer-events: none; }
}
/* Instant hide when JS confirms loaded - overrides animation */
.portfolio-embed.loaded::after {
  opacity: 0 !important;
  animation: none !important;
}
.portfolio-embed.iframe-failed::after {
  content: "Prototype unavailable · View case study text below";
  color: var(--pf-tx-5) !important;
  font-style: normal;
  animation: none !important;
  opacity: 1 !important;
}
/* ── 17. TECHNICAL DETAILS LIST ─────────────────────────────────── */
.portfolio-details-list {
  list-style: none !important;
  padding: 0 !important;
  max-width: var(--pf-measure-wide) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--pf-s2) var(--pf-s5) !important;
}
.portfolio-details-list li {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.72 !important;
  color: var(--pf-tx-2) !important;
  padding-left: var(--pf-s3) !important;
  position: relative !important;
}
.portfolio-details-list li::before {
  content: "→" !important;
  position: absolute !important;
  left: 0 !important;
  color: var(--pf-arrow) !important;
  font-size: var(--pf-t-sm) !important;
}
/* ── 18. RESPONSIVE ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .portfolio-section {
    padding: var(--pf-s6) 20px !important;
  }
.portfolio-section--narrative {
    padding-top: 72px !important;
  }
.portfolio-showcase-hero {
    padding-top: 72px !important;
    padding-bottom: 52px !important;
  }
.portfolio-section--case-meta {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
.portfolio-role-grid {
    grid-template-columns: 1fr !important;
    gap: var(--pf-s2) !important;
  }
.portfolio-details-list {
    grid-template-columns: 1fr !important;
  }
.cs-narrative p {
    font-size: 16px !important;
  }
.portfolio-lead {
    font-size: 17px !important;
  }
.portfolio-section--flush,
  .portfolio-section--flush-all {
    padding-top: 24px !important;
  }
#talent-caryatid-frame {
    min-height: 920px !important;
  }
}
/* ── 19. AVAILABILITY BADGE ─────────────────────────────────────── */
.portfolio-availability {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--pf-s1) !important;
  margin-top: var(--pf-s4) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 500 !important;
  color: var(--pf-tx-3) !important;
  letter-spacing: 0.04em !important;
}
.portfolio-availability::before {
  content: "" !important;
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  flex-shrink: 0 !important;
}
/* ── 20. WORK CARDS ─────────────────────────────────────────────── */
/* Suppress any stray paragraphs WordPress injects inside the grid */
.portfolio-work-grid > p,
.portfolio-work-grid > br {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}
.portfolio-work-grid {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap: var(--pf-s3) !important;
  margin-top: var(--pf-s5) !important;
}
/* If card count is odd, center the final card instead of leaving a hard-left orphan.
   Use :last-of-type/:nth-of-type so trailing WP-injected paragraph wrappers do not break matching. */
.portfolio-work-grid > article.portfolio-work-card:last-of-type:nth-of-type(odd),
.portfolio-work-grid > a.portfolio-work-card:last-of-type:nth-of-type(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: min(100%, calc((100% - var(--pf-s3)) / 2)) !important;
}
/* Anchor-wrapped card - reset link defaults */
a.portfolio-work-card {
  text-decoration: none !important;
  color: inherit !important;
}
a.portfolio-work-card:visited {
  color: inherit !important;
}
.portfolio-work-card {
  background: var(--pf-bg-card) !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  padding: var(--pf-s4) !important;
  display: flex !important;
  flex-direction: column !important;
}
/* Featured card - spans full grid width */
.portfolio-work-card--featured {
  grid-column: 1 / -1 !important;
  padding: calc(var(--pf-s4) + 4px) !important;
  border-top-color: rgba(129, 140, 248, 0.35) !important;
  border-top-width: 2px !important;
}
/* WIP card - visually suppressed */
.portfolio-work-card--wip {
  opacity: 0.45 !important;
  cursor: default !important;
}
.portfolio-work-card--wip:hover {
  border-color: var(--pf-br) !important;
  background: var(--pf-bg-card) !important;
}
.portfolio-work-eyebrow {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--pf-tx-3) !important;
  margin-bottom: var(--pf-s2) !important;
  line-height: 1.5 !important;
}
.portfolio-work-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-h3) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.12 !important;
  color: var(--pf-tx-1) !important;
}
.portfolio-work-card--featured .portfolio-work-title {
  font-size: clamp(28px, 2.6vw, 38px) !important;
  max-width: 16ch !important;
  margin-bottom: var(--pf-s3) !important;
}
.portfolio-work-desc {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.78 !important;
  color: var(--pf-tx-2) !important;
  max-width: 58ch !important;
  margin: 0 0 var(--pf-s3) !important;
}
.portfolio-work-card--featured .portfolio-work-desc {
  font-size: clamp(17px, 0.3vw + 16px, 18px) !important;
  max-width: 64ch !important;
}
.portfolio-work-tags {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
}
.portfolio-work-tag {
  white-space: nowrap !important;
}
.portfolio-work-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 600 !important;
  color: var(--pf-accent-text) !important;
  letter-spacing: 0.03em !important;
}
.portfolio-work-cta:visited {
  color: var(--pf-accent-text) !important;
}
/* ── 21. ABOUT SECTION ──────────────────────────────────────────── */
.portfolio-about-grid {
  display: grid !important;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 0.85fr) !important;
  gap: var(--pf-s6) !important;
  align-items: start !important;
  margin-top: var(--pf-s5) !important;
}
.portfolio-about-text {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-body) !important;
  line-height: 1.88 !important;
  color: var(--pf-tx-2) !important;
  max-width: var(--pf-measure-tight) !important;
  margin: 0 0 var(--pf-s3) !important;
}
.portfolio-about-text:last-child {
  margin-bottom: 0 !important;
}
.portfolio-credentials-label {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  color: var(--pf-tx-3) !important;
  margin-bottom: var(--pf-s3) !important;
}
.portfolio-client-list {
  display: flex !important;
  flex-direction: column !important;
}
.portfolio-client-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: var(--pf-s2) !important;
  padding: 14px 0 !important;
  border-bottom: 1px solid var(--pf-br) !important;
}
.portfolio-client-item:last-child {
  border-bottom: none !important;
}
.portfolio-client-name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  font-weight: 600 !important;
  color: var(--pf-tx-1) !important;
  white-space: nowrap !important;
}
.portfolio-client-role {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  color: var(--pf-tx-3) !important;
  text-align: right !important;
}
/* ── 21b. EXPERIENCE & SCALE ────────────────────────────────────── */
/* Homepage career section: stats grid + chronological experience list. */
.portfolio-scale-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: var(--pf-s2) !important;
  max-width: var(--pf-container-lg) !important;
  margin: var(--pf-s5) auto 0 !important;
}
.portfolio-scale-item {
  background: transparent !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  padding: var(--pf-s3) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pf-s1) !important;
}
.portfolio-scale-num {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(26px, 2.2vw, 34px) !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
  color: var(--pf-tx-2) !important;
  margin: 0 !important;
}
.portfolio-scale-label {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  line-height: 1.55 !important;
  color: var(--pf-tx-4) !important;
  margin: 0 !important;
}
.portfolio-exp {
  margin-top: var(--pf-s6) !important;
}
.portfolio-exp-list {
  display: flex !important;
  flex-direction: column !important;
  gap: 0 !important;
  border-top: 1px solid var(--pf-br) !important;
  margin-top: var(--pf-s4) !important;
}
.portfolio-exp-item {
  padding: var(--pf-s3) 0 !important;
  border-bottom: 1px solid var(--pf-br) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pf-s1) !important;
}
.portfolio-exp-head {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: var(--pf-s1) var(--pf-s3) !important;
}
.portfolio-exp-role {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-body) !important;
  font-weight: 600 !important;
  color: var(--pf-tx-1) !important;
  margin: 0 !important;
  line-height: 1.3 !important;
}
.portfolio-exp-dates {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 500 !important;
  color: var(--pf-tx-4) !important;
  white-space: nowrap !important;
}
.portfolio-exp-meta {
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.6 !important;
  color: var(--pf-tx-3) !important;
  margin: 0 !important;
}
@media (max-width: 1024px) {
  .portfolio-scale-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .portfolio-scale-grid {
    grid-template-columns: 1fr !important;
  }
.portfolio-exp-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 2px !important;
  }
.portfolio-exp-item {
    padding: var(--pf-s2) 0 !important;
  }
}
/* ── 22. INLINE LINK ────────────────────────────────────────────── */
.portfolio-link {
  color: var(--pf-accent-text) !important;
  text-decoration: none !important;
  border-bottom: 1px solid rgba(129, 140, 248, 0.45) !important;
  transition: border-color 0.2s ease !important;
  font-style: normal !important;
}
.portfolio-link:visited {
  color: var(--pf-accent-text) !important;
}
.portfolio-link:hover {
  border-bottom-color: var(--pf-accent-text) !important;
}
.cs-disclosure {
  max-width: 72ch;
  margin: 40px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--pf-br);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
}
.cs-disclosure-label {
  display: inline-block;
  margin-bottom: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-accent-text);
}
.cs-disclosure p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  color: var(--pf-tx-3) !important;
}
/* ── 22b. CARD GRID ───────────────────────────────────────────────
   Reusable card grid for case-study proof points, decision questions,
   and similar label + short-description blocks. Keeps Incline Trust
   and future showcases inside the shared component vocabulary.
────────────────────────────────────────────────────────────────── */
.cs-card-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: var(--pf-s3) !important;
  max-width: var(--pf-container-lg) !important;
  margin: var(--pf-s5) auto 0 !important;
}
.cs-card-grid--2 {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.cs-card {
  background: var(--pf-bg-card) !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  padding: var(--pf-s4) !important;
  transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}
.cs-card:hover {
  border-color: var(--pf-br-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.6) !important;
}
.cs-card-label {
  display: block !important;
  margin: 0 0 var(--pf-s2) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--pf-accent-text) !important;
  line-height: 1.4 !important;
}
.cs-card p {
  margin: 0 !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.72 !important;
  color: var(--pf-tx-2) !important;
}
@media (max-width: 768px) {
  .cs-card-grid,
  .cs-card-grid--2 {
    grid-template-columns: 1fr !important;
    gap: var(--pf-s2) !important;
  }
}
/* ── 22c. ARTIFACT VARIANTS ───────────────────────────────────────
   Portrait / tall diagrams should not blow up to full container width.
   Iframes inside artifacts need the same full-width treatment as embeds.
────────────────────────────────────────────────────────────────── */
.cs-artifact--portrait {
  max-width: 44rem !important;
}
.cs-artifact iframe {
  width: 100% !important;
  border: none !important;
  display: block !important;
  border-radius: var(--pf-r-lg) !important;
  background: transparent !important;
  overflow: hidden !important;
}
.portfolio-showcase-nav {
  max-width: 980px !important;
  margin: 0 auto !important;
  padding-top: 12px !important;
}
.portfolio-showcase-nav-kicker {
  margin-bottom: var(--pf-s3) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pf-tx-3) !important;
}
.portfolio-showcase-nav-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: var(--pf-s3) !important;
}
.portfolio-showcase-nav-card,
a.portfolio-showcase-nav-card {
  display: block !important;
  padding: 22px 22px 24px !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  background: var(--pf-bg-card) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
.portfolio-showcase-nav-card {
  display: flex !important;
  flex-direction: column !important;
}
a.portfolio-showcase-nav-card:hover {
  border-color: var(--pf-br-h) !important;
  background: rgba(15, 23, 42, 0.95) !important;
}
.portfolio-showcase-nav-card-label {
  display: block !important;
  margin-bottom: 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  color: var(--pf-tx-3) !important;
}
.portfolio-showcase-nav-card-title {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: clamp(22px, 1.5vw, 26px) !important;
  font-weight: 600 !important;
  line-height: 1.12 !important;
  letter-spacing: -0.03em !important;
  color: var(--pf-tx-1) !important;
}
.portfolio-showcase-nav-card-desc {
  display: block !important;
  font-family: 'Archivo', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.72 !important;
  color: var(--pf-tx-2) !important;
}
.portfolio-showcase-nav-card-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: auto !important;
  padding-top: var(--pf-s3) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  color: var(--pf-accent-text) !important;
}
.portfolio-showcase-nav-card-cta:visited {
  color: var(--pf-accent-text) !important;
}
.portfolio-showcase-nav-home {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: var(--pf-s3) !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  color: var(--pf-accent-text) !important;
}
/* ── 23. RESPONSIVE - HOME PAGE COMPONENTS ──────────────────────── */
@media (max-width: 768px) {
  .portfolio-work-grid {
    grid-template-columns: 1fr !important;
  }
.portfolio-work-grid > article.portfolio-work-card:last-of-type:nth-of-type(odd),
  .portfolio-work-grid > a.portfolio-work-card:last-of-type:nth-of-type(odd) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
.portfolio-work-card--featured {
    grid-column: 1 !important;
    padding: var(--pf-s4) !important;
  }
.portfolio-about-grid {
    grid-template-columns: 1fr !important;
    gap: var(--pf-s5) !important;
  }
.portfolio-client-role {
    text-align: left !important;
  }
.portfolio-showcase-nav-grid {
    grid-template-columns: 1fr !important;
  }
}
/* ── 24. HOME PAGE LAYOUT PATCH ────────────────────────────────── */
body.home.right-sidebar .site-content,
body.home.right-sidebar #content,
body.home.right-sidebar #primary,
body.home.right-sidebar .content-area,
body.home.right-sidebar .site-content .content-area {
  width: 100% !important;
  max-width: 100% !important;
}
body.home.right-sidebar #right-sidebar,
body.home.right-sidebar .widget-area,
body.home.right-sidebar .is-right-sidebar {
  display: none !important;
}
body.home .portfolio-container {
  max-width: 1120px !important;
}
@media (min-width: 1024px) {
  body.home .portfolio-container {
    max-width: 1120px !important;
  }
}
body.home .portfolio-lead {
  max-width: 66ch !important;
}
body.home .portfolio-role-grid {
  margin-top: var(--pf-s5) !important;
}
body.home .portfolio-work-grid {
  align-items: stretch !important;
}
body.home .portfolio-work-card {
  height: 100% !important;
}
/* ── 25. CLINICAL BENCHMARK PAGE ──────────────────────────────── */
.clinical-benchmark-page .portfolio-container {
  max-width: 1088px !important;
}
.clinical-benchmark-hero {
  padding-top: clamp(84px, 9vw, 128px) !important;
  padding-bottom: clamp(56px, 6vw, 88px) !important;
}
.clinical-benchmark-hero .portfolio-container {
  max-width: 1120px !important;
}
.clinical-benchmark-hero-copy {
  max-width: 720px;
}
.clinical-benchmark-page .portfolio-work-eyebrow {
  margin-bottom: 16px !important;
}
.clinical-benchmark-page .portfolio-hero-title {
  max-width: 8ch !important;
  margin-bottom: 20px !important;
}
.clinical-benchmark-page .portfolio-lead {
  max-width: 60ch !important;
  font-size: clamp(19px, 0.45vw + 17px, 21px) !important;
  line-height: 1.72 !important;
  margin-bottom: 16px !important;
}
.clinical-benchmark-page .portfolio-lead:last-of-type {
  margin-bottom: 0 !important;
}
.clinical-benchmark-roles {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.clinical-benchmark-page.portfolio-section--flush,
.clinical-benchmark-page.portfolio-section--flush-all {
  padding-top: 32px !important;
}
.clinical-benchmark-page .portfolio-role-grid {
  max-width: 1080px !important;
  margin-top: 0 !important;
  gap: 20px !important;
  align-items: stretch !important;
}
.clinical-benchmark-page .portfolio-role-card {
  min-height: 0 !important;
  padding: 28px 26px !important;
}
.clinical-benchmark-page .portfolio-role-card h3 {
  margin-bottom: 14px !important;
}
.clinical-benchmark-page .portfolio-role-card p {
  font-size: 15px !important;
  line-height: 1.78 !important;
}
.clinical-benchmark-page .cs-section-title {
  max-width: 18ch;
  margin-bottom: 20px !important;
}
.clinical-benchmark-page .cs-narrative {
  max-width: 72ch !important;
  margin: 0 auto 48px !important;
}
.clinical-benchmark-page .cs-narrative p {
  font-size: clamp(17px, 0.2vw + 16px, 18px) !important;
  line-height: 1.86 !important;
  margin: 0 0 24px !important;
}
.clinical-benchmark-page .cs-narrative p:last-child {
  margin-bottom: 0 !important;
}
.clinical-benchmark-page .cs-callout {
  max-width: 69ch;
  margin: 48px auto !important;
  padding: 22px 28px;
  border-left: 2px solid var(--pf-accent-text);
  border-radius: 0 10px 10px 0;
  background: var(--pf-accent-bg);
}
.clinical-benchmark-page .cs-callout p {
  margin: 0 !important;
  font-size: 15px !important;
  line-height: 1.7 !important;
  color: var(--pf-tx-2) !important;
}
.clinical-benchmark-page .cs-chart-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  gap: 12px !important;
  max-width: 1088px;
  margin: 40px auto 56px !important;
}
.clinical-benchmark-page .cs-chart-item {
  min-height: 144px;
  padding: 18px 16px;
  border: 1px solid var(--pf-br);
  border-radius: 10px;
  background: var(--pf-bg-card);
}
.clinical-benchmark-page .cs-chart-item-label {
  display: block;
  margin-bottom: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--pf-accent-text);
}
.clinical-benchmark-page .cs-chart-item-q {
  display: block;
  font-size: 13px;
  line-height: 1.58;
  color: var(--pf-tx-3);
}
.clinical-benchmark-page .cs-prototype {
  margin: 56px 0 20px !important;
}
.clinical-benchmark-page .cs-prototype-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}
.clinical-benchmark-page .portfolio-full-bleed {
  margin-bottom: 64px !important;
}
.clinical-benchmark-page #clinical-benchmark-embed {
  border-radius: 0 !important;
  border: none !important;
}
.clinical-benchmark-page #clinical-benchmark-frame {
  width: 100%;
  min-height: 2400px;
  height: 2400px;
  border: none;
  display: block;
  background: #09090b;
}
.clinical-benchmark-page .cs-narrative--resume {
  margin-top: 0 !important;
}
.clinical-benchmark-page .portfolio-details-list {
  max-width: 980px !important;
  gap: 20px 44px !important;
}
.clinical-benchmark-page .portfolio-details-list li {
  line-height: 1.78 !important;
}
.clinical-benchmark-page .cs-closing {
  max-width: 72ch;
  margin: 40px auto 0;
  padding-top: 28px;
  border-top: 1px solid var(--pf-br);
  font-size: 13px;
  line-height: 1.7;
  color: var(--pf-tx-4);
  font-style: normal;
}
.clinical-benchmark-page .cs-disclosure {
  max-width: 72ch;
  margin: 40px auto 0;
  padding: 20px 24px;
  border: 1px solid var(--pf-br);
  border-radius: 12px;
  background: rgba(15, 23, 42, 0.62);
}
.clinical-benchmark-page .cs-disclosure-label {
  display: inline-block;
  margin-bottom: 10px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--pf-accent-text);
}
.clinical-benchmark-page .cs-disclosure p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.72 !important;
  color: var(--pf-tx-3) !important;
}
@media (max-width: 1024px) {
  .clinical-benchmark-page .cs-chart-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 768px) {
  .cs-section-title,
  .portfolio-section h2 {
    font-size: clamp(26px, 7vw, 32px) !important;
    line-height: 1.12 !important;
  }
.clinical-benchmark-page .portfolio-hero-title {
    max-width: 7ch !important;
    margin-bottom: 16px !important;
  }
.clinical-benchmark-page .portfolio-lead {
    font-size: 18px !important;
    line-height: 1.7 !important;
  }
.clinical-benchmark-roles {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }
.clinical-benchmark-page.portfolio-section--flush,
  .clinical-benchmark-page.portfolio-section--flush-all {
    padding-top: 24px !important;
  }
.clinical-benchmark-page .cs-section-title {
    max-width: 14ch;
  }
.clinical-benchmark-page .cs-narrative {
    margin-bottom: 36px !important;
  }
.clinical-benchmark-page .cs-narrative p {
    font-size: 16px !important;
    line-height: 1.84 !important;
    margin-bottom: 20px !important;
  }
.clinical-benchmark-page .cs-chart-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
.clinical-benchmark-page #clinical-benchmark-frame {
    min-height: 3200px;
    height: 3200px;
  }
}
@media (max-width: 480px) {
  .clinical-benchmark-page .cs-chart-grid {
    grid-template-columns: 1fr !important;
  }
.clinical-benchmark-page #clinical-benchmark-frame {
    min-height: 3600px;
    height: 3600px;
  }
}
/* ── 26. HOME GRID ODD-CARD HOTFIX ───────────────────────────────
   Keep this near the end of the stylesheet so it overrides older rules
   still present in WP Additional CSS revisions.
*/
#selected-work .portfolio-work-grid > article.portfolio-work-card:last-of-type:nth-of-type(odd),
#selected-work .portfolio-work-grid > a.portfolio-work-card:last-of-type:nth-of-type(odd) {
  grid-column: 1 / -1 !important;
  justify-self: center !important;
  width: min(100%, calc((100% - var(--pf-s3)) / 2)) !important;
}
@media (max-width: 768px) {
  #selected-work .portfolio-work-grid > article.portfolio-work-card:last-of-type:nth-of-type(odd),
  #selected-work .portfolio-work-grid > a.portfolio-work-card:last-of-type:nth-of-type(odd) {
    grid-column: 1 !important;
    justify-self: stretch !important;
    width: 100% !important;
  }
}
/* ===================================================================
   INCLINE TRUST PAGE: VIZ TYPOGRAPHY CARDS (it-viz-*)
   Scoped class prefix. Only matches on /incline-trust/. No other page
   uses these classes, so these rules are zero-collision.
   =================================================================== */
.it-viz-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 24px !important;
  max-width: 1120px;
  margin: 44px auto 64px !important;
}
.it-viz-item {
  display: flex;
  flex-direction: column;
  padding: 30px 28px 28px;
  background: var(--pf-bg-card);
  border: 1px solid var(--pf-br);
  border-radius: 12px;
}
.it-viz-eyebrow {
  display: block;
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-tx-4);
  margin: 0 0 14px;
}
.it-viz-title {
  font-family: "Space Grotesk", "Inter", sans-serif;
  font-size: 22px;
  line-height: 1.22;
  font-weight: 600;
  letter-spacing: -0.012em;
  color: var(--pf-tx-1);
  margin: 0 0 16px;
}
.it-viz-setup {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--pf-tx-3);
  margin: 0 0 16px;
}
.it-viz-ask {
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
  color: var(--pf-tx-1);
  margin: 0 0 14px;
}
.it-viz-note {
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--pf-tx-4);
  margin: 0;
}
@media (max-width: 860px) {
  .it-viz-grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }
  .it-viz-item { padding: 24px 20px 22px; }
  .it-viz-title { font-size: 20px; }
  .it-viz-ask { font-size: 15px; }
}
/* ── 27. HOMEPAGE TRUST-ARCHITECTURE TRANSFORM ───────────────────── */
/* Homepage Trust-Architecture transform - appended 2026-06-09 */
/* Neutralize WordPress p wrappers around the new homepage blocks.
   Mirrors the section-5b :has() list. NOTE: in the shipped homepage these
   blocks are NESTED inside div.portfolio-container within a
   section element, so wpautop should never wrap them at the entry-content root -
   these selectors are purely DEFENSIVE belt-and-suspenders, not load-bearing. */
.entry-content > p:has(> .portfolio-cta-row:only-child),
.entry-content > p:has(> .portfolio-proof-bar:only-child),
.entry-content > p:has(> .portfolio-contact-band:only-child) {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}
/* - Hero CTA row - NEW button primitives (.portfolio-cta / .portfolio-cta-row).
   They visually echo the .portfolio-work-cta link style but do not extend it. */
.portfolio-cta-row {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--pf-s2) !important;
  margin-top: var(--pf-s4) !important;
}
.portfolio-cta {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.03em !important;
  text-decoration: none !important;
  padding: 12px 22px !important;
  border-radius: var(--pf-r-md) !important;
  border: 1px solid var(--pf-br) !important;
  transition: border-color 0.2s ease, background 0.2s ease !important;
}
a.portfolio-cta:visited { color: inherit !important; }
/* Primary - filled accent */
.portfolio-cta--primary {
  background: var(--pf-accent-bg) !important;
  border-color: var(--pf-accent-br) !important;
  color: var(--pf-accent-text) !important;
}
a.portfolio-cta--primary:visited { color: var(--pf-accent-text) !important; }
.portfolio-cta--primary:hover {
  background: var(--pf-accent-bg-h) !important;
  border-color: var(--pf-accent-text) !important;
}
/* Ghost - outlined */
.portfolio-cta--ghost {
  background: var(--pf-bg-card) !important;
  color: var(--pf-tx-2) !important;
}
a.portfolio-cta--ghost:visited { color: var(--pf-tx-2) !important; }
.portfolio-cta--ghost:hover {
  border-color: var(--pf-br-h) !important;
  background: rgba(15, 23, 42, 0.95) !important;
}
/* Visually-hidden helper for in-link "(opens in new tab)" announcements */
.portfolio-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
/* - Hero principle tiles - decorative value-prop labels (not headings, kept
   out of the document outline). Match the look of .portfolio-role-card h3. */
.portfolio-role-card-title {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  color: var(--pf-tx-3) !important;
  line-height: 1.4 !important;
  margin: 0 0 var(--pf-s2) !important;
}
/* - Proof bar - */
.portfolio-proof-bar {
  display: flex !important;
  flex-direction: column !important;
}
.portfolio-proof-clients {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
}
.portfolio-proof-client {
  white-space: nowrap !important;
}
.portfolio-proof-sep {
  font-family: 'Inter', sans-serif !important;
  user-select: none !important;
}
.portfolio-proof-stat {
  display: inline-flex !important;
  align-items: center !important;
  gap: var(--pf-s1) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
}
.portfolio-proof-stat::before {
  content: "" !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #22c55e !important;
  flex-shrink: 0 !important;
}
/* Proof bar lives inside the hero narrative section (above the fold on
   desktop). Trim its top spacing so it does not push past the first viewport. */
.portfolio-proof-bar--hero {
  margin-top: var(--pf-s5) !important;
  padding-top: var(--pf-s4) !important;
  border-top: 1px solid var(--pf-br) !important;
}
/* - Work-card outcome chip - explicit accent VARIANT of the .portfolio-work-tag
   pill primitive. Intentional deviations from the tag baseline: font-weight 600
   (emphasis), accent fill + accent border + leading accent dot, padding 4px 12px.
   Affordance: accent text sits on the accent fill plus a dot/border so the chip
   reads as emphasized even where color is not perceived. */
.portfolio-work-tag--outcome {
  align-items: center !important;
  gap: 6px !important;
  margin-bottom: var(--pf-s2) !important;
}
.portfolio-work-tag--outcome::before {
  content: "" !important;
  width: 5px !important;
  height: 5px !important;
  border-radius: 50% !important;
  background: var(--pf-accent-text) !important;
  flex-shrink: 0 !important;
}
/* - Work-card CTA: non-color affordance (WCAG 1.4.1). The links use
   .portfolio-work-cta; reinforce interactivity with an underline so color is
   not the only cue separating it from the eyebrow/title/outcome text. */
.portfolio-work-cta {
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
  text-decoration-thickness: 1px !important;
}
.portfolio-work-cta:hover {
  text-decoration-thickness: 2px !important;
}
/* - Contact band - */
/* Layout (flex row, space-between, wrap) comes from the shared
   `.portfolio-contact-band` rule in site-common.css, matching every sibling
   page's `.contact-band`. No local flex-direction/max-width override here,
   so the text and the CTA sit side by side instead of stacking narrow. */
.portfolio-contact-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: var(--pf-s2) !important;
}
.portfolio-contact-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--pf-s1) var(--pf-s3) !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.7 !important;
  color: var(--pf-tx-2) !important;
}
.portfolio-contact-meta .portfolio-contact-meta-item {
  color: var(--pf-tx-2) !important;
}
.portfolio-target-roles {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  line-height: 1.7 !important;
  letter-spacing: 0.02em !important;
  color: var(--pf-tx-3) !important;
}
.portfolio-target-roles strong {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.12em !important;
  font-size: var(--pf-t-3xs) !important;
  color: var(--pf-tx-1) !important;
  margin-right: var(--pf-s1) !important;
}
/* Machine-readable contact block - real parseable text for ATS */
.portfolio-contact-vcard {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-xs) !important;
  line-height: 1.9 !important;
  color: var(--pf-tx-3) !important;
  padding-top: var(--pf-s3) !important;
  border-top: 1px solid var(--pf-br) !important;
}
.portfolio-contact-vcard .portfolio-contact-meta-item {
  color: var(--pf-tx-2) !important;
}
.portfolio-contact-vcard .portfolio-contact-vcard-name {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600 !important;
  color: var(--pf-tx-1) !important;
}
/* - Mobile first-viewport: keep thesis + CTAs + proof readable early - */
@media (max-width: 768px) {
  /* Shrink the homepage hero headline so the thesis fits ~3 lines and the
     CTA row + proof bar enter the first phone viewport. */
  body.home .portfolio-hero-title {
    font-size: clamp(28px, 7.2vw, 42px) !important;
    max-width: none !important;
    line-height: 1.12 !important;
    letter-spacing: -0.01em !important;
  }
body.home .portfolio-lead {
    font-size: clamp(16px, 4.4vw, 18px) !important;
  }
.portfolio-cta-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--pf-s1) !important;
    margin-top: var(--pf-s3) !important;
  }
.portfolio-cta {
    justify-content: center !important;
    width: 100% !important;
    padding: 14px 22px !important;
  }
/* Surface the proof bar before the three hero principle tiles on mobile.
     The proof bar (.portfolio-proof-bar--hero) and the tiles
     (.portfolio-role-grid) are flex children of the narrative container, so
     reorder with flex order and demote the tiles below the fold. */
  body.home .portfolio-section--narrative .portfolio-container {
    display: flex !important;
    flex-direction: column !important;
  }
body.home .portfolio-section--narrative .portfolio-proof-bar--hero {
    order: 1 !important;
    margin-top: var(--pf-s4) !important;
  }
body.home .portfolio-section--narrative .portfolio-role-grid {
    order: 2 !important;
    margin-top: var(--pf-s4) !important;
  }
.portfolio-proof-clients {
    gap: var(--pf-s1) var(--pf-s2) !important;
  }
.portfolio-proof-client { font-size: var(--pf-t-xs) !important; }
.portfolio-contact-actions { flex-direction: column !important; align-items: stretch !important; }
}
/* ── 28. HOMEPAGE TYPOGRAPHY & ELEGANCE REFINEMENT (appended 2026-06-09) ──
   Appended override of the section 20 / 27 homepage rules. Same selectors,
   same specificity, later in the cascade → wins. Matches this file's
   !important GeneratePress-override convention. Refines: a quiet client
   wall, minimalist Selected Work cards (outcome as a ruled accent line,
   tags as understated text), a subtle card hover lift, tighter rhythm. */
/* - Proof bar: a quiet, even client wall (supporting evidence, not a headline) - */
.portfolio-proof-bar { gap: var(--pf-s2) !important; }
.portfolio-proof-label {
  margin: 0 !important;
}
.portfolio-proof-clients { gap: 10px var(--pf-s3) !important; }
.portfolio-proof-client {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.01em !important;
  color: var(--pf-tx-3) !important;
}
.portfolio-proof-sep { color: var(--pf-tx-5) !important; font-size: 13px !important; }
.portfolio-proof-stat {
  font-size: var(--pf-t-2xs) !important;
  letter-spacing: 0.05em !important;
  color: var(--pf-tx-4) !important;
}
.portfolio-proof-stat::before { display: none !important; }
/* - Selected Work cards: minimalist + elegant - */
.portfolio-work-card {
  transition: border-color .25s ease, background .25s ease,
              transform .25s ease, box-shadow .25s ease !important;
}
.portfolio-work-card:hover,
a.portfolio-work-card:hover {
  border-color: var(--pf-accent-br) !important;
  background: rgba(15, 23, 42, 0.95) !important;
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 42px -22px rgba(0, 0, 0, 0.7) !important;
}
/* Title leads; tighten its space to the outcome line below */
.portfolio-work-title { margin-bottom: var(--pf-s2) !important; }
/* Outcome: the single accent moment - a ruled "key result" line, not a pill */
.portfolio-work-tag--outcome {
  display: block !important;
  align-self: stretch !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  font-weight: 500 !important;
  line-height: 1.5 !important;
  letter-spacing: -0.01em !important;
  color: var(--pf-tx-1) !important;
  background: none !important;
  border: none !important;
  border-left: 2px solid var(--pf-accent-text) !important;
  border-radius: 0 !important;
  padding: 2px 0 2px var(--pf-s2) !important;
  margin: 0 0 var(--pf-s3) !important;
}
.portfolio-work-tag--outcome::before { display: none !important; }
/* Tags: understated middot-separated text, not pills */
.portfolio-work-tags {
  gap: var(--pf-s1) !important;
  margin-top: auto !important;
  padding-top: var(--pf-s3) !important;
  border-top: 1px solid var(--pf-br) !important;
}
.portfolio-work-tag {
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-2xs) !important;
  font-weight: 500 !important;
  color: var(--pf-tx-4) !important;
}
.portfolio-work-tag + .portfolio-work-tag::before {
  content: "·" !important;
  color: var(--pf-tx-5) !important;
  margin-right: var(--pf-s1) !important;
}
.portfolio-work-cta { margin-top: var(--pf-s3) !important; }
/* WordPress injects <br> between tags in the editor; suppress them so the
   middot-separated tag list renders on one flowing line. */
.portfolio-work-tags br {
  display: none !important;
}
/* - Role cards: match the subtle hover lift for one consistent system - */
.portfolio-role-card {
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease !important;
}
.portfolio-role-card:hover {
  border-color: var(--pf-br-h) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 14px 32px -22px rgba(0, 0, 0, 0.6) !important;
}
/* ── 29. SIGNALCARE CDX IFRAME (folded from legacy updated.css, 2026-06-09) ──
   Page-specific iframe min-height for the Decision Logic Before Build showcase.
   Folded in so this file is a complete superset of every legacy stylesheet. */
#signalcare-cdx-frame { min-height: 1300px !important; }
@media (max-width: 720px) { #signalcare-cdx-frame { min-height: 1800px !important; } }
@media (max-width: 480px) { #signalcare-cdx-frame { min-height: 2000px !important; } }
/* Figure + zoom/pan viewer styles (matches uncertainty-as-signal) */
.cs-figure img { cursor: zoom-in !important;
  }
  .cs-figure--wide { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cs-figure--wide img { width: auto; min-width: 100%; max-width: none; }
  .cs-figure--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .cs-figure--scroll img { width: auto; max-width: none; }
  @media (max-width: 640px) { .cs-figure--scroll img { min-width: 520px; } }
  /* .cs-lb* lightbox modal styles now live in site-common.css (shared
     across all case pages instead of duplicated per-page). */
/* A2 Recruiter blurb card */
  .cs-recruiter-blurb {
    position: relative !important;
    background: #111319 !important;
    border: 1px solid rgba(255,255,255,0.08) !important;
    border-left: 4px solid #818cf8 !important;
    border-radius: 12px !important;
    padding: 1.5rem 1.75rem 1.25rem 3rem !important;
    margin: 0 !important;
  }
  .cs-recruiter-blurb__quote {
    position: absolute !important; top: 1rem; left: 1.25rem;
    font-size: 1.6rem !important; line-height: 1 !important; color: #818cf8 !important;
  }
  .cs-recruiter-blurb__text {
    margin: 0 0 0.75rem !important;
    font-size: 1.0625rem !important; line-height: 1.6 !important;
    color: #f5f7fb !important; font-style: normal !important;
    user-select: all !important; -webkit-user-select: all !important;
  }
  .cs-recruiter-blurb__note {
    margin: 0 !important;
    font-size: 0.8125rem !important; line-height: 1.5 !important;
    color: #7d8290 !important; font-style: normal !important;
  }
  .cs-recruiter-blurb__footer {
    display: flex !important; align-items: center !important; justify-content: space-between !important;
    gap: 0.75rem !important; flex-wrap: wrap !important; margin-top: 0.85rem !important;
  }
  .cs-blurb-copy {
    flex: 0 0 auto !important;
    font-size: 0.8125rem !important; font-weight: 600 !important; line-height: 1 !important;
    color: #a5b4fc !important; background: transparent !important;
    border: 1px solid #818cf8 !important; border-radius: 8px !important;
    padding: 0.45rem 0.95rem !important; cursor: pointer !important;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
  }
  .cs-blurb-copy:hover { background: rgba(129,140,248,0.12) !important; }
  .cs-blurb-copy:focus-visible { outline: 2px solid #818cf8 !important; outline-offset: 2px !important; }
  .cs-blurb-copy.is-copied { color: #4ade80 !important; border-color: #4ade80 !important; }
  @media (prefers-reduced-motion: reduce) { .cs-blurb-copy { transition: none !important; } }
/* B2 - Production process timeline (compact widget) */
  .cs-process {
    list-style: none !important; margin: 0.5rem 0 0 !important; padding: 0 !important;
    counter-reset: step !important;
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 0.75rem !important;
  }
  .cs-process li {
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 0.85rem 0.95rem !important;
  }
  .cs-process li::before {
    counter-increment: step !important; content: counter(step) !important;
    display: inline-flex !important; align-items: center !important; justify-content: center !important;
    width: 1.5rem !important; height: 1.5rem !important; border-radius: 999px !important;
    background: rgba(129,140,248,0.15) !important; color: #a5b4fc !important;
    font-size: 0.8125rem !important; font-weight: 700 !important;
  }
  .cs-process__label { display: block !important; margin-top: 0.5rem !important; color: #f5f7fb !important; font-weight: 600 !important; font-size: 0.9375rem !important; }
  .cs-process__desc { display: block !important; margin-top: 0.15rem !important; color: #7d8290 !important; font-size: 0.8125rem !important; line-height: 1.45 !important; }
/* B3 - Fintech transfer bridge */
  .cs-bridge { display: flex !important; align-items: stretch !important; gap: 0.75rem !important; flex-wrap: wrap !important; margin: 0.5rem 0 0 !important; }
  .cs-bridge__node {
    flex: 1 1 200px !important; min-width: 180px !important;
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 1rem !important;
    display: flex !important; flex-direction: column !important; gap: 0.3rem !important; justify-content: center !important;
  }
  .cs-bridge__node--pattern { border-color: rgba(129,140,248,0.5) !important; background: rgba(129,140,248,0.08) !important; }
  .cs-bridge__kicker { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; color: #7d8290 !important; font-weight: 600 !important; }
  .cs-bridge__title { font-size: 1.0625rem !important; font-weight: 600 !important; color: #f5f7fb !important; }
  .cs-bridge__node--pattern .cs-bridge__title { color: #a5b4fc !important; }
  .cs-bridge__sub { font-size: 0.8125rem !important; color: #b2b6c2 !important; line-height: 1.4 !important; }
  .cs-bridge__arrow { display: flex !important; align-items: center !important; color: #818cf8 !important; font-size: 1.4rem !important; }
  .cs-bridge__targets {
    flex: 1.4 1 240px !important; min-width: 200px !important; list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0.5rem !important; align-content: center !important;
  }
  .cs-bridge__targets li {
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 8px !important; padding: 0.5rem 0.7rem !important; font-size: 0.8125rem !important; color: #f5f7fb !important; font-weight: 500 !important;
  }
  @media (max-width: 720px) {
    .cs-bridge { flex-direction: column !important; align-items: stretch !important; }
    .cs-bridge__arrow { justify-content: center !important; transform: rotate(90deg) !important; }
    .cs-bridge__targets { grid-template-columns: 1fr !important; }
  }
/* B4 - Design trade-offs */
  .cs-tradeoffs { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important; gap: 0.75rem !important; margin: 0.5rem 0 0 !important; }
  .cs-tradeoff {
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 1rem !important;
    display: flex !important; flex-direction: column !important; gap: 0.5rem !important;
  }
  .cs-tradeoff__decision { color: #f5f7fb !important; font-weight: 600 !important; font-size: 0.9375rem !important; }
  .cs-tradeoff__give, .cs-tradeoff__gain { font-size: 0.8125rem !important; line-height: 1.45 !important; color: #b2b6c2 !important; }
  .cs-tradeoff__tag { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: 700 !important; color: #f59e0b !important; margin-right: 0.35rem !important; }
  .cs-tradeoff__tag--gain { color: #4ade80 !important; }
/* A1 - Top provenance badge */
  .cs-provenance-chip {
    display: inline-flex !important; align-items: center !important; gap: 0.45rem !important;
    margin: 0 0 0.5rem !important;
    font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.02em !important;
    color: #93c5fd !important; background: rgba(96,165,250,0.12) !important;
    border: 1px solid rgba(96,165,250,0.4) !important; border-radius: 999px !important;
    padding: 0.3rem 0.85rem !important;
  }
/* D1 - Before / After */
  .cs-beforeafter { display: flex !important; align-items: stretch !important; gap: 0.75rem !important; flex-wrap: wrap !important; margin: 0.5rem 0 0 !important; }
  .cs-ba {
    flex: 1 1 280px !important; min-width: 240px !important;
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 1.25rem !important;
  }
  .cs-ba__label { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.05em !important; font-weight: 700 !important; color: #7d8290 !important; }
  .cs-ba--after .cs-ba__label { color: #4ade80 !important; }
  .cs-ba__title { font-size: 1.0625rem !important; font-weight: 600 !important; color: #f5f7fb !important; margin: 0.35rem 0 0.6rem !important; }
  .cs-ba--before .cs-ba__title { color: #b2b6c2 !important; }
  .cs-ba__list { margin: 0 !important; padding-left: 1.1rem !important; display: flex !important; flex-direction: column !important; gap: 0.35rem !important; }
  .cs-ba__list li { font-size: 0.875rem !important; line-height: 1.45 !important; color: #b2b6c2 !important; }
  .cs-ba--after .cs-ba__list li { color: #d6dfed !important; }
  .cs-ba__arrow { display: flex !important; align-items: center !important; color: #818cf8 !important; font-size: 1.4rem !important; }
  @media (max-width: 720px) {
    .cs-beforeafter { flex-direction: column !important; }
    .cs-ba__arrow { justify-content: center !important; transform: rotate(90deg) !important; }
  }
/* F1 - Stakeholder ecosystem (condensed) */
  .cs-eco { margin: 0.5rem 0 0 !important; }
  .cs-eco__hub {
    display: block !important; text-align: center !important; max-width: 340px !important; margin: 0 auto 0.75rem !important;
    background: rgba(129,140,248,0.1) !important; border: 1px solid rgba(129,140,248,0.5) !important; border-radius: 10px !important;
    padding: 0.6rem 1rem !important; color: #a5b4fc !important; font-weight: 600 !important; font-size: 1rem !important;
  }
  .cs-eco__grid {
    list-style: none !important; margin: 0 !important; padding: 0 !important;
    display: grid !important; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important; gap: 0.5rem !important;
  }
  .cs-eco__node {
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 0.7rem 0.85rem !important; display: flex !important; flex-direction: column !important; gap: 0.15rem !important;
  }
  .cs-eco__rel { font-size: 0.75rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: 700 !important; color: #818cf8 !important; }
  .cs-eco__role { font-size: 0.875rem !important; font-weight: 600 !important; color: #f5f7fb !important; }
  .cs-eco__need { font-size: 0.8125rem !important; line-height: 1.4 !important; color: #7d8290 !important; }
/* E3 - Audit artifact preview (condensed, no emoji) */
  .cs-audit { max-width: 460px !important; margin: 0.5rem auto 0 !important;
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(34,197,94,0.4) !important;
    border-radius: 12px !important; padding: 1rem 1.25rem !important; }
  .cs-audit__head { display: flex !important; align-items: center !important; gap: 0.5rem !important;
    padding-bottom: 0.6rem !important; margin-bottom: 0.4rem !important; border-bottom: 1px solid rgba(255,255,255,0.08) !important; }
  .cs-audit__title { font-weight: 600 !important; color: #f5f7fb !important; font-size: 0.9375rem !important; }
  .cs-audit__status { margin-left: auto !important; font-size: 0.75rem !important; text-transform: uppercase !important;
    letter-spacing: 0.04em !important; font-weight: 700 !important; color: #4ade80 !important;
    background: rgba(34,197,94,0.12) !important; border-radius: 999px !important; padding: 0.2rem 0.6rem !important; }
  .cs-audit__row { display: flex !important; gap: 1rem !important; padding: 0.2rem 0 !important; }
  .cs-audit__label { flex: 0 0 9rem !important; font-size: 0.75rem !important; text-transform: uppercase !important;
    letter-spacing: 0.02em !important; color: #7d8290 !important; font-weight: 600 !important; white-space: nowrap !important; }
  .cs-audit__val { font-size: 0.8125rem !important; color: #f5f7fb !important; word-break: break-word !important; }
  .cs-audit__val--mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace !important; color: #b2b6c2 !important; }
  .cs-audit__note { margin: 0.6rem 0 0 !important; font-size: 0.75rem !important; color: #7d8290 !important; }
  @media (max-width: 520px) { .cs-audit__row { flex-direction: column !important; gap: 0.1rem !important; } .cs-audit__label { flex: none !important; } }
/* B1 - Structural metrics */
  .cs-metrics { display: grid !important; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important; gap: 0.75rem !important; margin: 0 !important; }
  .cs-metric {
    background: rgba(255,255,255,0.03) !important; border: 1px solid rgba(255,255,255,0.08) !important;
    border-radius: 10px !important; padding: 1.1rem 1.25rem !important;
    display: flex !important; flex-direction: column !important; gap: 0.2rem !important;
  }
  .cs-metric__num { font-size: 2.5rem !important; font-weight: 700 !important; line-height: 1 !important; color: #a5b4fc !important; }
  .cs-metric__label { font-size: 0.8125rem !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; font-weight: 600 !important; color: #f5f7fb !important; }
  .cs-metric__ctx { font-size: 0.8125rem !important; line-height: 1.4 !important; color: #7d8290 !important; margin-top: 0.15rem !important; }
/* MI diagrams - shared (native SVG diagrams replacing ASCII stills) */
  .cs-diagram-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; }
  .cs-diagram { display: block !important; width: 100% !important; height: auto !important; }
  .cs-diagram text { font-family: Archivo, system-ui, sans-serif !important; }
  @media (max-width: 640px) { .cs-diagram-scroll .cs-diagram { min-width: 600px !important; } }
/* ── 30. RESUME PAGE (/resume/) ─────────────────────────────────── */
body.page-id-329,
body.page-id-329 .site,
body.page-id-329 .site-content,
body.page-id-329 .content-area,
body.page-id-329 #primary,
body.page-id-329 #content,
body.page-id-329 .site-main,
body.page-id-329 .inside-article,
body.page-id-329 .entry-content {
  background: var(--pf-bg) !important;
  color: var(--pf-tx-2) !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
}
body.page-id-329.right-sidebar #right-sidebar,
body.page-id-329.right-sidebar .widget-area,
body.page-id-329.right-sidebar .is-right-sidebar,
body.page-id-329 .inside-article > .entry-header,
body.page-id-329 .page-header {
  display: none !important;
}
body.page-id-329 .resume-page {
  --resume-bg: var(--pf-bg);
  --resume-panel: var(--pf-bg-card);
  --resume-panel-2: var(--pf-bg-card-alt);
  --resume-border: var(--pf-br);
  --resume-text: var(--pf-tx-1);
  --resume-muted: var(--pf-tx-3);
  --resume-soft: var(--pf-tx-2);
  --resume-accent: var(--pf-accent-text);
  --resume-good: var(--pf-accent-text);
  background:
    radial-gradient(circle at top left, rgba(59, 130, 246, 0.10), transparent 40%),
    radial-gradient(circle at top center, rgba(129, 140, 248, 0.08), transparent 38%),
    linear-gradient(180deg, var(--pf-bg) 0%, var(--pf-bg-2) 46%, var(--pf-bg) 100%) !important;
  color: var(--pf-tx-2) !important;
  font-family: "Archivo", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
  min-height: 100vh !important;
}
body.page-id-329 .resume-page,
body.page-id-329 .resume-page * {
  box-sizing: border-box !important;
}
body.page-id-329 .resume-page p:empty,
body.page-id-329 .resume-page p:has(> br:only-child) {
  display: none !important;
}
body.page-id-329 .resume-shell {
  max-width: var(--pf-container-lg) !important;
  margin: 0 auto !important;
  padding: var(--pf-s8) var(--pf-section-x) var(--pf-s7) !important;
}
body.page-id-329 .resume-kicker,
body.page-id-329 .resume-section__eyebrow {
  color: var(--pf-tx-4) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.2 !important;
  margin: 0 0 var(--pf-s3) !important;
  text-transform: uppercase !important;
}
body.page-id-329 .resume-title {
  color: var(--pf-tx-1) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: clamp(46px, 6vw, 76px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.03 !important;
  max-width: 21ch !important;
  margin: 0 0 var(--pf-s3) !important;
  text-wrap: balance !important;
}
body.page-id-329 .resume-role {
  color: var(--pf-tx-2) !important;
  font-family: "Archivo", system-ui, sans-serif !important;
  font-size: clamp(18px, 1.2vw, 21px) !important;
  font-weight: 600 !important;
  letter-spacing: 0 !important;
  line-height: 1.42 !important;
  max-width: var(--pf-measure-tight) !important;
  margin: 0 0 var(--pf-s2) !important;
}
body.page-id-329 .resume-summary {
  color: var(--pf-tx-2) !important;
  font-family: "Archivo", system-ui, sans-serif !important;
  font-size: clamp(17px, 0.2vw + 16px, 18px) !important;
  font-weight: 400 !important;
  line-height: 1.74 !important;
  max-width: var(--pf-measure) !important;
  margin: 0 !important;
}
body.page-id-329 .resume-contact {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pf-s1) var(--pf-s3) !important;
  list-style: none !important;
  margin: var(--pf-s4) 0 0 !important;
  padding: 0 !important;
}
body.page-id-329 .resume-contact li {
  color: var(--pf-tx-3) !important;
  font-family: "Archivo", system-ui, sans-serif !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.45 !important;
  margin: 0 !important;
}
body.page-id-329 .resume-page a {
  color: var(--pf-accent-text) !important;
  text-decoration-color: rgba(152, 166, 255, 0.42) !important;
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.18em !important;
}
body.page-id-329 .resume-page a:hover,
body.page-id-329 .resume-page a:focus {
  color: var(--pf-tx-1) !important;
  text-decoration-color: var(--pf-tx-1) !important;
}
body.page-id-329 .resume-actions {
  align-items: center !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: var(--pf-s2) !important;
  margin: var(--pf-s4) 0 0 !important;
}
body.page-id-329 .resume-actions br {
  display: none !important;
}
body.page-id-329 .resume-button {
  align-items: center !important;
  display: inline-flex !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 14px 22px !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-md) !important;
  background: rgba(15, 23, 42, 0.42) !important;
  color: var(--pf-tx-2) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.01em !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease !important;
  white-space: nowrap !important;
}
body.page-id-329 .resume-button:hover,
body.page-id-329 .resume-button:focus {
  background: var(--pf-accent-bg-h) !important;
  border-color: var(--pf-accent-br) !important;
  color: var(--pf-tx-1) !important;
}
body.page-id-329 .resume-button--primary {
  background: var(--pf-accent-bg) !important;
  border-color: var(--pf-accent-br) !important;
  color: var(--pf-accent-text) !important;
}
body.page-id-329 .resume-print-note {
  color: var(--pf-tx-4) !important;
  font-size: var(--pf-t-xs) !important;
  line-height: 1.55 !important;
  max-width: var(--pf-measure-tight) !important;
  margin: var(--pf-s2) 0 0 !important;
}
body.page-id-329 .resume-grid {
  display: grid !important;
  gap: var(--pf-s3) !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  margin: var(--pf-s5) auto 0 !important;
  max-width: 100% !important;
}
body.page-id-329 .resume-fact,
body.page-id-329 .resume-skills li,
body.page-id-329 .resume-job,
body.page-id-329 .resume-project {
  background: var(--pf-bg-card) !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: var(--pf-r-lg) !important;
  box-shadow: none !important;
}
body.page-id-329 .resume-fact {
  display: flex !important;
  flex-direction: column !important;
  gap: var(--pf-s1) !important;
  justify-content: center !important;
  min-height: 150px !important;
  padding: var(--pf-s3) !important;
}
body.page-id-329 .resume-fact strong {
  color: var(--pf-accent-text) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: clamp(30px, 2.05vw, 31px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.05 !important;
  margin: 0 !important;
  white-space: nowrap !important;
}
body.page-id-329 .resume-fact span {
  color: var(--pf-tx-3) !important;
  display: block !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.55 !important;
}
body.page-id-329 .resume-section {
  border-top: 1px solid rgba(148, 163, 184, 0.10) !important;
  margin-top: var(--pf-s6) !important;
  padding-top: var(--pf-s5) !important;
}
body.page-id-329 .resume-section h2 {
  color: var(--pf-tx-1) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: var(--pf-t-h2) !important;
  font-weight: 600 !important;
  letter-spacing: -0.03em !important;
  line-height: 1.08 !important;
  margin: 0 0 var(--pf-s3) !important;
}
body.page-id-329 .resume-section h3 {
  color: var(--pf-tx-1) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: clamp(20px, 1.4vw, 24px) !important;
  font-weight: 600 !important;
  letter-spacing: -0.015em !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
body.page-id-329 .resume-section p,
body.page-id-329 .resume-section li {
  color: var(--pf-tx-2) !important;
  font-family: "Archivo", system-ui, sans-serif !important;
  font-size: var(--pf-t-body) !important;
  line-height: 1.7 !important;
}
body.page-id-329 .resume-section > p:not(.resume-section__eyebrow) {
  margin: 0 !important;
  max-width: var(--pf-measure) !important;
}
body.page-id-329 .resume-keywords {
  columns: 2 !important;
  column-gap: var(--pf-s6) !important;
  margin: 0 !important;
  padding-left: 1.1rem !important;
}
body.page-id-329 .resume-keywords li {
  break-inside: avoid !important;
  margin: 0 0 0.35rem !important;
}
body.page-id-329 .resume-skills {
  display: grid !important;
  gap: var(--pf-s2) !important;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  list-style: none !important;
  margin: 0 !important;
  padding: 0 !important;
}
body.page-id-329 .resume-skills li {
  align-items: center !important;
  color: var(--pf-tx-2) !important;
  display: flex !important;
  font-size: var(--pf-t-sm) !important;
  line-height: 1.45 !important;
  min-height: 54px !important;
  padding: 14px 16px !important;
}
body.page-id-329 .resume-job,
body.page-id-329 .resume-project {
  padding: var(--pf-s3) !important;
}
body.page-id-329 .resume-job + .resume-job {
  margin-top: var(--pf-s3) !important;
}
body.page-id-329 .resume-job__meta {
  color: var(--pf-tx-4) !important;
  font-family: "Space Grotesk", system-ui, sans-serif !important;
  font-size: var(--pf-t-2xs) !important;
  font-weight: 600 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.3 !important;
  margin: var(--pf-s1) 0 var(--pf-s2) !important;
  text-transform: uppercase !important;
}
body.page-id-329 .resume-job ul,
body.page-id-329 .resume-education ul {
  margin: var(--pf-s2) 0 0 !important;
  padding-left: 1.15rem !important;
}
body.page-id-329 .resume-portfolio {
  display: grid !important;
  gap: var(--pf-s3) !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
body.page-id-329 .resume-project h3 a {
  text-decoration: none !important;
}
body.page-id-329 .resume-project p {
  margin: var(--pf-s1) 0 0 !important;
}
@media (max-width: 768px) {
  body.page-id-329 .resume-shell {
    padding: 72px 24px 88px !important;
  }
body.page-id-329 .resume-title {
    font-size: clamp(34px, 9vw, 44px) !important;
    max-width: none !important;
  }
body.page-id-329 .resume-role {
    font-size: 17px !important;
  }
body.page-id-329 .resume-summary,
  body.page-id-329 .resume-section p,
  body.page-id-329 .resume-section li {
    font-size: 16px !important;
    line-height: 1.68 !important;
  }
body.page-id-329 .resume-grid,
  body.page-id-329 .resume-skills,
  body.page-id-329 .resume-portfolio {
    grid-template-columns: 1fr !important;
  }
body.page-id-329 .resume-actions {
    align-items: stretch !important;
    flex-direction: column !important;
  }
body.page-id-329 .resume-button {
    width: 100% !important;
  }
body.page-id-329 .resume-keywords {
    columns: 1 !important;
  }
}
/* ── Logo row - subtle monochrome treatment ─────────────────────── */
.portfolio-proof-bar--logos {
  gap: var(--pf-s2) !important;
  padding-top: var(--pf-s4) !important;
}
.portfolio-proof-label {
  font-family: 'Inter', sans-serif !important;
  font-size: var(--pf-t-3xs) !important;
  font-weight: 500 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--pf-tx-5) !important;
}
.portfolio-proof-clients--logos {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: clamp(20px, 3.2vw, 40px) !important;
  row-gap: var(--pf-s3) !important;
}
.portfolio-proof-client--logo {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  height: 20px !important;
  flex-shrink: 0 !important;
  opacity: 0.55 !important;
  filter: grayscale(100%) brightness(0) invert(1) !important;
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.portfolio-proof-client--logo:hover {
  opacity: 0.95 !important;
  transform: translateY(-1px) !important;
}
.portfolio-proof-client--logo img {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: none !important;
  object-fit: contain !important;
}
/* Force one row on desktop */
@media (min-width: 769px) {
  .portfolio-proof-clients--logos {
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }
}
/* Wrap naturally on mobile */
@media (max-width: 768px) {
  .portfolio-proof-clients--logos {
    gap: 24px !important;
    row-gap: var(--pf-s2) !important;
    justify-content: flex-start !important;
  }
  .portfolio-proof-client--logo {
    height: 18px !important;
  }
}
/* ===================================================================
/* ===================================================================
   TYPOGRAPHY & VERTICAL RHYTHM REFINEMENT
   Appended 2026-06-15 - professional type tuning.
   Establishes a 4px baseline and a single line-height scale so every
   text block feels proportionally related across home, case studies,
   and the resume page.
   =================================================================== */
:root {
  /* Baseline grid */
  --pf-baseline: 4px;
/* Calibrated line heights (unitless, tuned to the existing scale) */
  --pf-lh-hero:     1.07;   /* display title: tight but not clipped       */
  --pf-lh-h2:       1.14;   /* section titles                               */
  --pf-lh-h3:       1.18;   /* card / sub-section titles (22-28px)          */
  --pf-lh-title-sm: 1.32;   /* compact component titles (14-17px)           */
  --pf-lh-lead:     1.50;   /* lead paragraph: open, but crisper than body  */
  --pf-lh-body:     1.78;   /* narrative body copy                          */
  --pf-lh-sm:       1.60;   /* small supporting copy (15px / 14px)          */
  --pf-lh-xs:       1.55;   /* captions / meta                              */
  --pf-lh-2xs:      1.60;   /* tags / tiny labels                           */
  --pf-lh-3xs:      1.55;   /* uppercase eyebrows / badges                  */
/* Spacing tuned to the baseline */
  --pf-stack-text: 28px; /* space between narrative paragraphs           */
  --pf-stack-sm:   20px; /* space between lead and next element          */
}
/* ── Base body leading ───────────────────────────────────────────── */
body {
  line-height: var(--pf-lh-body) !important;
}
body p {
  line-height: var(--pf-lh-body) !important;
}
/* ── Headings - per-level line heights ───────────────────────────── */
body .portfolio-hero-title,
body.page-id-329 .resume-title {
  line-height: var(--pf-lh-hero) !important;
  text-wrap: balance !important;
}
body .cs-section-title,
body .portfolio-section h2,
body.page-id-329 .resume-section h2 {
  line-height: var(--pf-lh-h2) !important;
}
body .portfolio-work-title,
body .it-viz-title,
body.page-id-329 .resume-section h3 {
  line-height: var(--pf-lh-h3) !important;
}
body h4,
body h5,
body h6 {
  line-height: 1.28 !important;
}
/* ── Compact component titles ────────────────────────────────────── */
body .cs-ba__title,
body .cs-bridge__title,
body .cs-tradeoff__decision,
body .cs-eco__role,
body .cs-eco__hub,
body .cs-audit__title,
body .cs-metric__label,
body .cs-process__label,
body .cs-artifact-label {
  line-height: var(--pf-lh-title-sm) !important;
}
/* ── Lead / intro copy ───────────────────────────────────────────── */
body .portfolio-lead,
body.clinical-benchmark-page .portfolio-lead,
body.page-id-329 .resume-role {
  line-height: var(--pf-lh-lead) !important;
}
/* ── Body-scale paragraphs ───────────────────────────────────────── */
body .cs-narrative p,
body .portfolio-about-text,
body .cs-callout p,
body.page-id-329 .resume-summary,
body.page-id-329 .resume-section p,
body.page-id-329 .resume-section li {
  line-height: var(--pf-lh-body) !important;
}
body .cs-narrative p {
  margin-bottom: var(--pf-stack-text) !important;
}
body.clinical-benchmark-page .cs-narrative p,
body.clinical-benchmark-page .cs-callout p,
body.clinical-benchmark-page .cs-disclosure p {
  line-height: var(--pf-lh-sm) !important;
}
/* ── Small / supporting copy ─────────────────────────────────────── */
body .portfolio-work-desc,
body .portfolio-role-card p,
body .cs-card p,
body .portfolio-details-list li,
body .portfolio-showcase-nav-card-desc,
body .portfolio-client-role,
body .cs-disclosure p,
body.page-id-329 .resume-contact li,
body.page-id-329 .resume-fact span,
body .cs-caption,
body .cs-audit__note,
body .cs-process__desc,
body .cs-eco__need,
body .cs-tradeoff__give,
body .cs-tradeoff__gain,
body .cs-bridge__sub,
body .cs-ba__list li,
body .cs-metric__ctx,
body .cs-recruiter-blurb__note,
body .cs-recruiter-blurb__text,
body .it-viz-setup,
body .it-viz-ask,
body .it-viz-note,
body .cs-back,
body .cs-artifact-type,
body .cs-artifact-note {
  line-height: var(--pf-lh-sm) !important;
}
/* ── Extra-small labels & eyebrows ───────────────────────────────── */
body .portfolio-work-eyebrow,
body .portfolio-role-card h3,
body .portfolio-role-card-title,
body .cs-card-label,
body .portfolio-proof-label,
body .cs-prototype-badge,
body .cs-provenance-chip,
body .cs-audit__label,
body .cs-process li::before,
body .cs-bridge__kicker,
body .cs-ba__label,
body .cs-eco__rel,
body .cs-tradeoff__tag,
body .portfolio-availability,
body .portfolio-work-tag,
body .portfolio-showcase-nav-kicker,
body .portfolio-showcase-nav-card-label,
body.page-id-329 .resume-kicker,
body.page-id-329 .resume-section__eyebrow {
  line-height: var(--pf-lh-3xs) !important;
}
/* ── Case-study component tuning ─────────────────────────────────── */
body.clinical-benchmark-page .portfolio-lead,
body.clinical-benchmark-page .portfolio-role-card p,
body.clinical-benchmark-page .portfolio-details-list li {
  line-height: var(--pf-lh-sm) !important;
}
body.clinical-benchmark-page .cs-narrative p {
  margin-bottom: var(--pf-stack-text) !important;
}
/* ── Mobile typography adjustments ───────────────────────────────── */
@media (max-width: 768px) {
  body .cs-narrative p,
  body .portfolio-about-text,
  body .cs-callout p,
  body.page-id-329 .resume-summary,
  body.page-id-329 .resume-section p,
  body.page-id-329 .resume-section li,
  body.clinical-benchmark-page .cs-narrative p,
  body.clinical-benchmark-page .cs-callout p,
  body.clinical-benchmark-page .cs-disclosure p {
    line-height: 1.72 !important;
  }
body .portfolio-lead,
  body.clinical-benchmark-page .portfolio-lead,
  body.page-id-329 .resume-role {
    line-height: 1.52 !important;
  }
body .cs-section-title,
  body .portfolio-section h2,
  body.page-id-329 .resume-section h2 {
    line-height: 1.12 !important;
  }
}
/* ===================================================================
   HERO LEAD PARAGRAPHS - EXTRA AIR
   Adds breathing room inside and between the homepage hero thesis
   paragraphs (and the equivalent lead on each case-study hero).
   =================================================================== */
body.home .portfolio-section--narrative .portfolio-lead,
body .portfolio-showcase-hero .portfolio-lead {
  margin-bottom: 32px !important;
}
@media (min-width: 769px) {
  body.home .portfolio-section--narrative .portfolio-lead,
  body .portfolio-showcase-hero .portfolio-lead {
    line-height: 1.58 !important;
  }
}
@media (max-width: 768px) {
  body.home .portfolio-section--narrative .portfolio-lead,
  body .portfolio-showcase-hero .portfolio-lead {
    margin-bottom: 24px !important;
  }
}
/* ===================================================================
   HERO HEADER-TO-LEAD AIR
   Creates a deliberate, hierarchical pause between the homepage hero
   headline and the two thesis paragraphs. The 40px gap is larger than
   the 32px inter-paragraph gap, so the headline owns the top of the
   section and the leads read as a connected pair below it.
   =================================================================== */
body.home .portfolio-section--narrative .portfolio-hero-title {
  margin-bottom: 40px !important;
}
@media (max-width: 768px) {
  body.home .portfolio-section--narrative .portfolio-hero-title {
    margin-bottom: 28px !important;
  }
}
/* ===================================================================
   INNER-PAGE HERO PATTERN
   Extends the same header-to-lead rhythm to every case-study hero
   (.portfolio-showcase-hero) so the homepage and inner pages share
   one elegant proportion.
   =================================================================== */
body .portfolio-showcase-hero .portfolio-hero-title {
  margin-bottom: 40px !important;
}
@media (min-width: 769px) {
  body .portfolio-showcase-hero .portfolio-lead {
    line-height: 1.58 !important;
  }
}
@media (max-width: 768px) {
  body .portfolio-showcase-hero .portfolio-hero-title {
    margin-bottom: 28px !important;
  }
body .portfolio-showcase-hero .portfolio-lead {
    margin-bottom: 24px !important;
    line-height: 1.52 !important;
  }
}
/* Decision Logic Before Build: 0629 ATS/recruiter enrichment styles.
   Add after the current portfolio Additional CSS. */
.decision-logic-hero .cs-provenance-chip {
  margin-bottom: 18px !important;
}
.dl-impact-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  margin: 0 0 28px !important;
  max-width: 1120px !important;
}
.dl-impact-item {
  min-height: 126px !important;
  padding: 18px 16px !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: 8px !important;
  background: var(--pf-bg-card) !important;
}
.dl-impact-value {
  display: block !important;
  margin-bottom: 10px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 21px !important;
  font-weight: 650 !important;
  line-height: 1.16 !important;
  color: var(--pf-tx-1) !important;
}
.dl-impact-label {
  display: block !important;
  font-size: 13px !important;
  line-height: 1.56 !important;
  color: var(--pf-tx-3) !important;
}
.dl-transfer {
  max-width: 860px !important;
  margin: 0 0 32px !important;
  padding: 18px 18px 16px !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: 8px !important;
  background: rgba(15, 23, 42, 0.48) !important;
}
body .portfolio-section .dl-mini-title {
  margin: 0 0 14px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 18px !important;
  font-weight: 650 !important;
  line-height: 1.3 !important;
  letter-spacing: 0 !important;
  color: var(--pf-tx-2) !important;
}
.dl-transfer-table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: var(--pf-tx-2) !important;
}
.dl-transfer-table th,
.dl-transfer-table td {
  padding: 10px 12px !important;
  border-top: 1px solid var(--pf-br) !important;
  text-align: left !important;
  vertical-align: top !important;
}
.dl-transfer-table th {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  color: var(--pf-accent-text) !important;
}
.dl-recruiter-blurb {
  max-width: 72ch !important;
  margin: 0 0 32px !important;
}
.dl-recruiter-blurb .cs-recruiter-blurb__text {
  overflow-wrap: anywhere !important;
}
.dl-keyword-section {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}
.dl-keyword-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}
.dl-keyword-card {
  min-height: 150px !important;
  padding: 18px 16px !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: 8px !important;
  background: var(--pf-bg-card) !important;
}
.dl-keyword-card h3 {
  margin: 0 0 12px !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1.35 !important;
  text-transform: uppercase !important;
  color: var(--pf-accent-text) !important;
}
.dl-keyword-card p {
  margin: 0 !important;
  font-size: 14px !important;
  line-height: 1.68 !important;
  color: var(--pf-tx-2) !important;
}
.dl-artifact-still {
  max-width: 980px !important;
  margin: 48px auto 32px !important;
}
.dl-artifact-still img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: 8px !important;
  background: var(--pf-bg-card) !important;
}
.dl-artifact-still figcaption {
  max-width: 72ch !important;
  margin: 12px auto 0 !important;
  font-size: 13px !important;
  line-height: 1.6 !important;
  color: var(--pf-tx-3) !important;
}
@media (max-width: 1024px) {
  .dl-impact-grid,
  .dl-keyword-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 640px) {
  .dl-impact-grid,
  .dl-keyword-grid {
    grid-template-columns: 1fr !important;
  }
.dl-transfer {
    overflow-x: visible !important;
  }
.dl-transfer-table {
    min-width: 0 !important;
    table-layout: fixed !important;
    font-size: 12px !important;
  }
.dl-transfer-table th,
  .dl-transfer-table td {
    padding: 8px 8px !important;
  }
.dl-recruiter-blurb .cs-blurb-copy {
    width: 100% !important;
  }
}
.hrdj-page {
  background: var(--pf-bg);
}
 .hrdj-page .portfolio-showcase-hero {
  padding-bottom: var(--pf-s6) !important;
}
 .hrdj-page .portfolio-hero-title {
  max-width: 920px !important;
}
 .hrdj-evidence-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-s4);
  max-width: var(--pf-container-lg);
  margin: var(--pf-s5) auto var(--pf-s6);
}
 .hrdj-evidence-grid .cs-artifact {
  margin: 0 !important;
  max-width: none !important;
}
 .cs-figure {
  margin: 0;
}
 .cs-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--pf-br);
  border-radius: var(--pf-r-lg);
  background: #0d0e13;
}
 .hrdj-proto-fallback {
  max-width: var(--pf-container-lg);
  margin: var(--pf-s5) auto;
}
 .hrdj-proof-path {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--pf-s3);
  max-width: 1040px;
  margin: 0 auto var(--pf-s5);
}
 .hrdj-proof-path .portfolio-role-card {
  min-height: 0 !important;
}
 .hrdj-recruiter-blurb .cs-recruiter-blurb__text {
  font-style: italic !important;
}
 @media (max-width: 1024px) {
  .hrdj-proof-path {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}
 @media (max-width: 768px) {
  .hrdj-evidence-grid,
  .hrdj-proof-path {
    grid-template-columns: 1fr;
  }
}
/* 0702 additions */
.hero-provenance {
  font-family: 'Inter', sans-serif;
  font-size: var(--pf-t-sm);
  color: var(--pf-tx-3);
  margin-bottom: var(--pf-s2);
  line-height: 1.6;
}
.cs-disclosure-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--pf-t-3xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-accent-text);
  background: var(--pf-accent-bg);
  border: 1px solid var(--pf-accent-br);
  padding: 5px 10px;
  border-radius: var(--pf-r-sm);
  margin-top: var(--pf-s2);
}
/* `site-common.css` (linked after this inline block) targets .micro-walkthrough
   as part of its shared bordered-grid pattern (gap:0 + top/left border, cells
   fill in right/bottom) — same equal-specificity, loses-on-load-order trap as
   the earlier .portfolio-full-bleed bug. Scoped to .hrdj-page so this page's
   3-separate-screens treatment (real gap, full border per card) wins regardless
   of link order. */
.hrdj-page .micro-walkthrough {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--pf-s3) !important;
  max-width: var(--pf-container-lg);
  margin: var(--pf-s5) auto var(--pf-s3);
  border-top: 0 !important;
  border-left: 0 !important;
}
.micro-walkthrough .cs-artifact {
  margin: 0 !important;
  max-width: none !important;
}
.micro-walkthrough .step-label,
.hrdj-walkthrough-feature .step-label {
  display: block;
  font-family: 'Space Grotesk', sans-serif;
  font-size: var(--pf-t-2xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--pf-accent-text);
  margin-bottom: 8px;
}
.hrdj-walkthrough-feature {
  max-width: var(--pf-container-lg) !important;
  margin: 0 auto var(--pf-s6) !important;
}
.failure-panel {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--pf-s3);
  max-width: var(--pf-container-lg);
  margin: var(--pf-s5) auto var(--pf-s6);
}
.failure-panel .portfolio-role-card h3 {
  color: var(--pf-tx-2) !important;
}
.portfolio-contact-band p {
  font-family: 'Inter', sans-serif;
  font-size: var(--pf-t-body);
  color: var(--pf-tx-2);
  line-height: 1.7;
  margin: 0;
}
.portfolio-contact-band a {
  color: var(--pf-tx-1);
  text-decoration: underline;
}
.portfolio-contact-band a:hover { color: var(--pf-accent-text); }
@media (max-width: 1024px) {
  .failure-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 768px) {
  .failure-panel { grid-template-columns: 1fr; }
}
/* 0702 consistency layer */
:root {
  --sw-black: #0a0a0a;
  --sw-black-2: #131313;
  --sw-black-3: #1c1c1c;
  --sw-paper: #f4f3ee;
  --sw-paper-dim: #9c9b93;
  --sw-paper-faint: #5c5b56;
  --sw-line: #2a2a2a;
  --sw-line-strong: #444442;
  --sw-orange: #ff5a1f;
  --sw-orange-dim: #c8460f;
  --sw-orange-tint: rgba(255, 90, 31, 0.1);
  --sw-orange-tint-h: rgba(255, 90, 31, 0.18);
  --font-display: 'Space Grotesk', sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'Space Mono', 'IBM Plex Mono', monospace;
  --pf-bg: var(--sw-black);
  --pf-bg-2: var(--sw-black-2);
  --pf-bg-card: transparent;
  --pf-bg-card-alt: transparent;
  --pf-tx-1: var(--sw-paper);
  --pf-tx-2: var(--sw-paper);
  --pf-tx-3: var(--sw-paper-dim);
  --pf-tx-4: var(--sw-paper-faint);
  --pf-tx-5: #454440;
  --pf-br: var(--sw-line);
  --pf-br-h: var(--sw-line-strong);
  --pf-accent-bg: var(--sw-orange-tint);
  --pf-accent-bg-h: var(--sw-orange-tint-h);
  --pf-accent-br: var(--sw-orange-dim);
  --pf-accent-text: var(--sw-orange);
  --pf-accent-bright: var(--sw-orange);
  --pf-arrow: var(--sw-orange);
  --pf-t-hero: clamp(44px, 6vw, 72px);
  --pf-t-h2: clamp(28px, 3vw, 38px);
  --pf-t-h3: clamp(19px, 1.5vw, 23px);
  --pf-t-body: clamp(16px, 0.2vw + 15px, 17px);
  --pf-t-xs: 13px;
  --pf-t-2xs: 11px;
  --pf-s4: 32px;
  --pf-s7: clamp(64px, 7vw, 96px);
}
.hrdj-page {
  font-family: var(--font-body) !important;
  line-height: 1.62 !important;
  background: var(--sw-black) !important;
  color: var(--pf-tx-2) !important;
}
.hrdj-page h1,
.hrdj-page h2,
.hrdj-page h3 {
  font-family: var(--font-display) !important;
  color: var(--pf-tx-1) !important;
  letter-spacing: -0.03em !important;
}
.hrdj-page a { color: var(--pf-accent-text) !important; text-decoration: none; }
.hrdj-page a:hover,
.hrdj-page a:focus { color: var(--pf-tx-1) !important; text-decoration: underline; text-decoration-color: var(--pf-accent-text); }
/* The blanket `.hrdj-page a` rule above (0,1,1 specificity) otherwise beats
   site-common.css's `.cta--primary` (0,1,0), turning the button's text the
   same orange as its own background. Re-assert dark text at matching specificity. */
.hrdj-page a.cta--primary,
.hrdj-page a.cta--primary:hover,
.hrdj-page a.cta--primary:focus {
  text-decoration: none !important;
}
.hrdj-page a.cta--primary { color: var(--sw-black) !important; }
.hrdj-page a.cta--primary:hover { color: var(--sw-paper) !important; }
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The Staffing Radar dashboard packs 2 treemaps, 2 sunbursts, and a match
   radar side by side, so it needs more room than the shared full-bleed cap
   (1440px, then 1800px) other case pages use for a 2-phone comparison.
   Exception for this page only: run the embed edge to edge at 100% of the
   page width instead of a capped, inset full-bleed width.
IMPORTANT: `width:100vw` + `margin-left:calc(50% - 50vw)` looks correct
   but is NOT safe on any page tall enough to show a vertical scrollbar.
   `100vw` includes the scrollbar track (e.g. 1440px), while the `50%` half
   of the margin math resolves against the actual visible content width
   (documentElement.clientWidth, e.g. 1425px once a 15px scrollbar is
   present). That mismatch shifts the element off by half the scrollbar
   width on EACH side. The same bug also existed one level up on the
   `.portfolio-full-bleed` wrapper (section 16 above) — and that wrapper
   also clipped its own overflow, so its mismatch was cutting real pixels
   off both edges of everything inside it. That combination is what was
   producing the "tiles cut off at both edges" symptom even though every
   box-relative-to-itself measurement checked out. `.portfolio-full-bleed`
   now does the vw-safe full-bleed math itself (self-referential centering,
   overflow:visible), so this embed just needs to fill it exactly. */
.hrdj-page .portfolio-embed {
  width: 100% !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  transform: none !important;
}
.hrdj-page main { counter-reset: sw-sec 0; }
.hrdj-page main > .portfolio-section { counter-increment: sw-sec; }
.hrdj-page main > .portfolio-section > .portfolio-container::before {
  content: '[ ' counter(sw-sec, decimal-leading-zero) ' ]';
  display: block;
  font-family: var(--font-mono);
  font-size: var(--pf-t-2xs);
  letter-spacing: 0.14em;
  color: var(--pf-accent-text);
  margin-bottom: var(--pf-s3);
}
.site-header {
  display: block !important;
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 10, 0.94);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--pf-br);
}
.site-header-inner {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  max-width: var(--pf-container-lg);
  min-height: 60px;
  margin: 0 auto;
  padding: 0 var(--pf-section-x);
  flex-wrap: wrap;
  gap: 8px 0;
}
.hrdj-page .site-name {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--pf-tx-1) !important;
  letter-spacing: -0.01em;
}
.site-nav { display: flex; gap: var(--pf-s3); }
.hrdj-page .site-nav a {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pf-tx-3) !important;
}
.hrdj-page .site-nav a:hover { color: var(--pf-accent-text) !important; text-decoration: none; }
.hrdj-page .portfolio-section {
  background: var(--sw-black) !important;
  border-top: 1px solid var(--pf-br) !important;
  padding: var(--pf-s7) 0 !important;
}
.hrdj-page .portfolio-section:first-child { border-top: 0 !important; }
.hrdj-page .portfolio-section--dark { background: var(--sw-black-2) !important; }
.hrdj-page .portfolio-showcase-hero {
  background: var(--sw-black) !important;
  padding-top: var(--pf-s6) !important;
  padding-bottom: var(--pf-s5) !important;
}
.hrdj-page .portfolio-container {
  max-width: var(--pf-container-lg) !important;
  width: 100% !important;
  margin-left: auto !important;
  margin-right: auto !important;
  padding-left: var(--pf-section-x) !important;
  padding-right: var(--pf-section-x) !important;
}
.hrdj-page .cs-back {
  color: var(--pf-tx-4) !important;
}
.hrdj-page .cs-back:hover {
  color: var(--pf-tx-2) !important;
}
.hrdj-page .cs-back,
.hrdj-page .hero-provenance,
.hrdj-page .portfolio-work-eyebrow,
.hrdj-page .cs-disclosure-chip,
.hrdj-page .cs-recruiter-blurb__label,
.hrdj-page .portfolio-role-card h2,
.hrdj-page .step-label,
.hrdj-page .cs-caption,
.hrdj-page .cs-disclosure-label,
.hrdj-page .portfolio-showcase-nav-kicker,
.hrdj-page .portfolio-showcase-nav-card-label {
  font-family: var(--font-mono) !important;
  letter-spacing: 0.06em !important;
  text-transform: uppercase !important;
}
.hrdj-page .cs-back::before {
  content: none !important;
  display: none !important;
}
.hrdj-page .portfolio-work-eyebrow::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  background: var(--sw-orange);
  margin-right: 9px;
  vertical-align: middle;
}
.hrdj-page .portfolio-hero-title {
  font-size: var(--pf-t-hero) !important;
  letter-spacing: -0.04em !important;
}
.hrdj-page .portfolio-lead {
  color: var(--pf-tx-1) !important;
  line-height: 1.5 !important;
}
.hrdj-page .cs-disclosure-chip,
.hrdj-page .cs-blurb-copy,
.hrdj-page .portfolio-showcase-nav-card-cta {
  border-radius: 0 !important;
  background: transparent !important;
  border-color: var(--pf-br-h) !important;
}
.hrdj-page .cs-disclosure-chip {
  color: var(--pf-accent-text) !important;
  border-color: var(--sw-orange-dim) !important;
  background: var(--pf-accent-bg) !important;
}
.hrdj-page .cs-recruiter-blurb,
.hrdj-page .portfolio-role-card,
.hrdj-page .cs-artifact,
.hrdj-page .cs-disclosure,
.hrdj-page .portfolio-contact-band,
.hrdj-page .portfolio-showcase-nav-card {
  background: transparent !important;
  border: 1px solid var(--pf-br) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* The border above wraps the whole .cs-artifact card, but the image inside is
   meant to bleed edge-to-edge (no padding on .cs-artifact itself). Without its
   own inset, the caption below the image touches that border on all 3 sides
   (confirmed via getBoundingClientRect: 1px gap = only the border width, i.e.
   zero real padding) — cramped and unintentional-looking, most visible on the
   evidence-grid cards where the caption spans the full card width. */
.hrdj-page .cs-artifact .cs-caption {
  padding: 0 var(--pf-s3) var(--pf-s3) !important;
}
.hrdj-page .cs-recruiter-blurb {
  max-width: var(--pf-measure) !important;
  margin-top: var(--pf-s4) !important;
  border-left: 2px solid var(--sw-orange) !important;
  background: var(--sw-black-2) !important;
}
.hrdj-page .cs-recruiter-blurb__label {
  font-size: var(--pf-t-2xs) !important;
  font-weight: 700 !important;
  color: var(--pf-accent-text) !important;
  margin: 0 0 10px !important;
}
.hrdj-page .cs-recruiter-blurb__text {
  color: var(--pf-tx-1) !important;
  line-height: 1.6 !important;
}
.hrdj-page .cs-recruiter-blurb__note {
  font-family: var(--font-mono) !important;
  font-size: 12px !important;
  color: var(--pf-tx-4) !important;
}
.hrdj-page .cs-blurb-copy {
  font-family: var(--font-mono) !important;
  font-size: var(--pf-t-2xs) !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  color: var(--pf-tx-2) !important;
}
.hrdj-page .portfolio-role-grid,
.hrdj-page .hrdj-proof-path,
.hrdj-page .failure-panel {
  gap: 0 !important;
  border-top: 1px solid var(--pf-br) !important;
  border-left: 1px solid var(--pf-br) !important;
}
.hrdj-page .portfolio-role-card,
.hrdj-page .hrdj-proof-path .portfolio-role-card,
.hrdj-page .failure-panel .portfolio-role-card {
  border-top: 0 !important;
  border-left: 0 !important;
  border-right: 1px solid var(--pf-br) !important;
  border-bottom: 1px solid var(--pf-br) !important;
}
.hrdj-page .cs-artifact img,
.hrdj-page .portfolio-prototype img {
  border-radius: 0 !important;
  border-color: var(--pf-br) !important;
  filter: grayscale(0.15) contrast(1.05);
}
.hrdj-page .portfolio-details-list {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  list-style: disc !important;
  padding-left: 20px !important;
  gap: 10px var(--pf-s4) !important;
}
.hrdj-page .portfolio-details-list li {
  display: list-item !important;
  position: static !important;
  padding-left: 0 !important;
  margin-bottom: 6px !important;
  line-height: 1.6 !important;
  color: var(--pf-tx-3) !important;
}
.hrdj-page .portfolio-details-list li::before {
  content: none !important;
  display: none !important;
}
.hrdj-page .portfolio-showcase-nav {
  border-top: 1px solid var(--pf-br) !important;
  padding-top: var(--pf-s5) !important;
}
.hrdj-page .portfolio-showcase-nav-card:hover {
  border-color: var(--pf-br-h) !important;
  background: var(--sw-black-2) !important;
}
@media (max-width: 768px) {
  .site-header-inner {
    align-items: flex-start;
    flex-direction: column;
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .site-nav { gap: var(--pf-s2); flex-wrap: wrap; }
  .hrdj-page .portfolio-hero-title {
    font-size: 42px !important;
    line-height: 1.08 !important;
  }
  .hrdj-page .portfolio-details-list { grid-template-columns: 1fr !important; }
}
/* Match-radar figure: prototype match radar card (spider diagram + factor bars) */
.hrdj-mixing-desk {
  max-width: var(--pf-container-lg);
  margin: var(--pf-s5) auto var(--pf-s6);
}
.hrdj-mixing-desk figure {
  margin: 0;
  border: 1px solid var(--pf-br);
  padding: var(--pf-s4);
}
.hrdj-mixing-desk img,
.hrdj-mixing-desk svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 425px !important;
  margin: 0 auto;
}
.hrdj-mixing-desk .cs-caption {
  margin-top: var(--pf-s3) !important;
}
@media (max-width: 640px) {
  .hrdj-mixing-desk figure { padding: var(--pf-s2); }
}

/* ================================================================
   WPAUTOP DEFENSE — 2026-07-06
   If WordPress auto-wraps the copy button in a <p>, collapse that
   wrapper so the button stays a direct grid child of .cs-recruiter-blurb.
   ================================================================ */
.cs-recruiter-blurb > p:has(> .cs-blurb-copy:only-child),
.recruiter > p:has(> .copy-btn:only-child) {
  display: contents !important;
  margin: 0 !important;
  padding: 0 !important;
}