/* Semantic artifact roles: shapes and labels carry meaning alongside color. */
body.pf-system.pf-unified {
  --pf-research-says: #f6e5b5; --pf-research-thinks: #e8dcef;
  --pf-research-does: #d9eaf3; --pf-research-feels: #f2dcd6;
  --pf-friction: #f5dfd8; --pf-response: #dcece1;
}
body.pf-system.pf-unified[data-ds-tone='light'] {
  --pf-flow-canvas: #f8f9fa; --pf-flow-action: #ffffff;
  --pf-flow-terminal: var(--project-tint);
  --pf-flow-decision: color-mix(in srgb,var(--project-color) 16%,white);
  --pf-flow-line: var(--project-line);
  --pf-terminal-line: var(--project-dark-strong);
  --pf-decision-line: var(--project-text,var(--project-color));
}
body.pf-system.pf-unified[data-ds-tone='dark'] {
  --pf-flow-action: var(--pf-surface); --pf-flow-terminal: color-mix(in srgb,var(--project-color) 10%,var(--pf-surface));
  --pf-flow-decision: color-mix(in srgb,var(--project-color) 18%,var(--pf-surface));
  --pf-terminal-line: var(--project-pale); --pf-decision-line: var(--project-bright);
  --pf-flow-line: var(--project-pale);
  --pf-research-says: #403b29; --pf-research-thinks: #3c3049;
  --pf-research-does: #293f4a; --pf-research-feels: #493331;
  --pf-friction: #493331; --pf-response: #293f32;
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] { --pf-decision-line: #8f5233; }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] { --pf-border: #aabac7; }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.tree-home,.tree-root,.destination-root>span) {
  background: var(--project-dark) !important; color: #fff !important; border-color: var(--project-dark) !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.page-tree>li,.tree-branches>div,.destination-card) {
  --branch-fill: #dbeaf5; --branch-ink: #284e6a; --branch-line: #88aac3;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.page-tree>li,.tree-branches>div,.destination-card):nth-child(2) {
  --branch-fill: #dcecdf; --branch-ink: #355940; --branch-line: #94b89c;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.page-tree>li,.tree-branches>div,.destination-card):nth-child(3) {
  --branch-fill: #f6e7bf; --branch-ink: #715721; --branch-line: #c3ad76;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree>li:nth-child(4) {
  --branch-fill: #e8dff1; --branch-ink: #634676; --branch-line: #ae98c0;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.page-tree>li>b,.tree-branches h3,.destination-card) {
  background: var(--branch-fill) !important; color: var(--branch-ink) !important; border-color: var(--branch-line) !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] :is(.page-tree>li ul li,.tree-leaf,.tree-end) {
  background: color-mix(in srgb,var(--branch-fill) 55%,white) !important;
  color: var(--branch-ink) !important; border-color: var(--branch-line) !important;
}
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .destination-card :is(h4,li) { color: var(--branch-ink) !important; }
/* Page lists draw their connector one item at a time, so the line stops at the last page. */
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree ul { border-left-color: transparent !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree ul > li::after { content: ''; position: absolute; left: -16px; top: -5px; bottom: 0; border-left: 1px solid var(--pf-border); }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree ul > li:first-child::after { top: 0; }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree ul > li:last-child::after { bottom: auto; height: 22px; }
body.pf-system.pf-unified[data-portfolio] [data-pf-sitemap] .page-tree ul > li:first-child:last-child::after { height: 17px; }
body.pf-system.pf-unified[data-portfolio] .branch-answer {
  display: inline-flex; gap: 8px; align-items: center; padding: 8px 12px;
  font: 500 16px/1.5 var(--pf-font) !important; color: var(--project-text) !important;
  background: transparent !important; border: 0 !important; cursor: default;
}
/* Journey maps: numbered stages on one rail, with question, barrier, and response lanes labelled once.
   Stages are columns on wide screens and stacked cards below 1000 px; lane labels then repeat inside each card. */
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-map,[data-pf-screen-flow]) {
  --journey-gap: 8px; --journey-ink: var(--pf-ink); --journey-label: var(--pf-muted);
}
body.pf-system.pf-unified[data-portfolio] :has(> .pf-journey-map) > :is(h3,.micro-heading),
body.pf-system.pf-unified[data-portfolio] :has(> .pf-journey-map) > .micro-heading > h3 { margin: 0 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-note { margin: 12px 0 0 !important; font: 400 16px/1.6 var(--pf-font) !important; color: var(--pf-muted) !important; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-map {
  display: grid; grid-template-columns: 136px repeat(var(--journey-count),minmax(0,1fr)); grid-template-rows: repeat(5,auto);
  gap: var(--journey-gap); margin: 32px 0 24px; padding: 0; border: 0; border-radius: 0; overflow: visible;
}
body.pf-system.pf-unified[data-portfolio] .pf-journey-map:last-child { margin-bottom: 0; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-lanes,.pf-journey-stage) {
  display: grid; grid-row: 1 / span 5; grid-template-rows: subgrid; min-width: 0;
  margin: 0; padding: 0; border: 0; background: transparent;
}
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-lanes > span,.pf-journey-stage > div > span),
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-row-label {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font: 400 13px/1.4 var(--pf-mono) !important; letter-spacing: .06em; text-transform: uppercase; color: var(--journey-label) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-journey-map > .pf-journey-lanes > span { align-items: flex-start; padding: 19px 8px 0 0; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-lanes > span:nth-child(-n+2) { visibility: hidden; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-stage :is(h4,h5) {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
  margin: 0 !important; padding: 0 0 8px !important; background: transparent;
  font: 500 18px/1.3 var(--pf-font) !important; color: var(--pf-ink) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-journey-stage :is(h4,h5)::before {
  content: ''; position: absolute; top: 17px; left: 18px; right: calc(-1 * var(--journey-gap)); height: 2px;
  background: var(--project-tint-strong);
}
body.pf-system.pf-unified[data-portfolio] .pf-journey-stage:last-child :is(h4,h5)::before { display: none; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-stop,body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .milestone-number) {
  position: relative; z-index: 1; display: grid; place-items: center; width: 36px; height: 36px; flex: none;
  margin: 0; padding: 0; border: 0 !important; border-radius: 50%; box-shadow: 0 0 0 4px var(--pf-surface) !important;
  background: var(--project-text,var(--project-color)) !important; color: #fff !important;
  font: 500 14px/1 var(--pf-mono) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-journey-visual {
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px; min-width: 0; margin: 0;
  padding: 16px; border: 0; border-radius: 8px; background: var(--pf-flow-canvas); overflow: hidden;
}
body.pf-system.pf-unified[data-portfolio] .journey-wireframe { display: block; width: 100%; height: auto; max-height: 200px; overflow: visible; transform: none !important; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-visual figcaption { margin: 0; text-align: center; font: 500 var(--pf-type-caption)/1.4 var(--pf-font) !important; color: var(--pf-ink) !important; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-stage > div,body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-pair > div) { min-width: 0; margin: 0; padding: 16px; border: 0 !important; border-radius: 8px !important; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-stage > div > span {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-stage,body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-pair) p { margin: 0 !important; font: 400 var(--pf-type-detail)/1.55 var(--pf-font) !important; color: var(--journey-ink) !important; }
body.pf-system.pf-unified[data-portfolio] .pf-journey-thought { background: var(--pf-research-thinks) !important; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-friction,body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-friction) { background: var(--pf-friction) !important; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-response,body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-response) { background: var(--pf-response) !important; }
/* Service Desk walks through real screens: one large screen per stage, its barrier and response beside it. */
body.pf-system.pf-unified[data-portfolio='servicedesk'] .journey-redesign .journey-heading > div { margin-bottom: 32px !important; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] .journey-redesign .journey-footnote { justify-content: flex-start; text-align: left; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] { display: grid; grid-template-columns: minmax(0,1fr); gap: 40px; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow]::before { display: none; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-card {
  display: grid; grid-template-columns: minmax(0,1.75fr) minmax(0,1fr);
  grid-template-areas: 'screen heading' 'screen notes'; grid-template-rows: auto 1fr;
  gap: 16px 32px; padding: 0 0 40px; background: transparent; border-bottom: 0;
}
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-card:last-child { border-bottom: 0; padding-bottom: 0; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-milestone { grid-area: heading; display: flex; flex-direction: row; align-items: center; gap: 16px; min-height: 0; margin: 0; padding: 0; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-evidence { grid-area: screen; align-self: start; width: 100%; margin: 0; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-evidence img { display: block; width: 100%; height: auto; max-height: none; object-fit: contain; transform: none !important; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-pair { grid-area: notes; align-self: start; display: grid; gap: var(--journey-gap); margin: 0; padding: 0; border: 0 !important; border-radius: 0 !important; background: transparent !important; overflow: visible; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] :is(.journey-pair,.journey-response)::before { display: none; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-row-label { margin-bottom: 8px; }
@media (max-width: 1000px) {
  body.pf-system.pf-unified[data-portfolio] .pf-journey-map { grid-template-columns: minmax(0,1fr); grid-template-rows: none; gap: 0; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-lanes { display: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage {
    position: relative; grid-row: auto; grid-template-rows: none; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
    gap: var(--journey-gap); padding: 0 0 32px 52px;
  }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage:last-child { padding-bottom: 0; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage::before { content: ''; position: absolute; top: 18px; bottom: 0; left: 17px; width: 2px; background: var(--project-tint-strong); }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage:last-child::before { display: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage :is(h4,h5) { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 16px; margin-left: -52px !important; padding-bottom: 4px !important; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage :is(h4,h5)::before { display: none; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-visual { grid-column: 1; grid-row: 2 / span 3; justify-content: center; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage > div { grid-column: 2; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage > div > span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; margin-bottom: 8px; }
  body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-card { grid-template-columns: minmax(0,1fr); grid-template-areas: 'heading' 'screen' 'notes'; grid-template-rows: none; }
  body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-pair { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width: 700px) {
  body.pf-system.pf-unified[data-portfolio] .pf-journey-map { margin: 24px 0 20px; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage { grid-template-columns: minmax(0,1fr); padding-left: 48px; }
  body.pf-system.pf-unified[data-portfolio] .pf-journey-stage :is(h4,h5) { margin-left: -48px !important; }
  body.pf-system.pf-unified[data-portfolio] :is(.pf-journey-visual,.pf-journey-stage > div) { grid-column: auto; grid-row: auto; }
  body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] { gap: 32px; }
  body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-card { padding-bottom: 32px; }
  body.pf-system.pf-unified[data-portfolio='servicedesk'] [data-pf-screen-flow] .journey-pair { grid-template-columns: minmax(0,1fr); }
}
/* Overview: the paragraph says what the project is; "What I did" lists each contribution under its discipline. */
body.pf-system.pf-unified[data-portfolio] .pf-overview-work { margin: 0 !important; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-work > .pf-overview-work-title { margin: 0 0 16px !important; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--pf-space-4) var(--pf-space-6); margin: 0; padding: 0;
}
body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list > div { min-width: 0; padding: 0; border-top: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list dt {
  margin: 0 0 8px; font: 500 18px/1.4 var(--pf-font) !important; letter-spacing: -.01em; color: var(--pf-ink) !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list dd {
  margin: 0; font: 400 16px/1.6 var(--pf-font) !important; color: var(--pf-muted) !important;
}
@media(max-width:1000px) {
  body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--pf-space-4) var(--pf-space-5); }
}
@media(max-width:620px) {
  body.pf-system.pf-unified[data-portfolio] .pf-overview-work-list { grid-template-columns: minmax(0, 1fr); }
}

/* Overview: the paragraph and its exhibit share the first view, text at the left and media at the right;
   "What I did" follows across the full width. Exhibits sit on the page without a box. */
body.pf-system.pf-unified[data-portfolio] #overview {
  display: grid !important; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 72px; align-items: center;
  overflow-x: clip;
}
body.pf-system.pf-unified[data-portfolio] #overview > .pf-section-intro { grid-column: 1; grid-row: 1; margin: 0 !important; position: relative; z-index: 1; }
body.pf-system.pf-unified[data-portfolio] #overview > .pf-overview-exhibit { grid-column: 2; grid-row: 1; }
body.pf-system.pf-unified[data-portfolio] #overview > :not(.pf-section-intro, .pf-overview-exhibit) { grid-column: 1 / -1; }
body.pf-system.pf-unified[data-portfolio] #overview > .pf-overview-work { margin-top: 96px !important; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-exhibit {
  position: relative; min-width: 0; margin: 0 !important; padding: 0; container-type: inline-size;
  border: 0; background: none; overflow: visible; text-align: left;
}
/* .pf-overview-media holds the work and the light behind it; --pf-media-ratio is the work's width : height. */
body.pf-system.pf-unified[data-portfolio] .pf-overview-media { --pf-media-ratio: 1.7778; position: relative; isolation: isolate; width: 100%; margin: 0 auto; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-media:has(> .pf-device-desktop) { --pf-media-ratio: 1.1867; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-media > img:not(.pf-overview-light) { display: block; width: 100%; height: auto; margin: 0; }
body.pf-system.pf-unified[data-portfolio] .pf-overview-exhibit figcaption {
  margin: 16px auto 0; padding: 0; border: 0; background: none;
  font: 400 16px/1.6 var(--pf-font) !important; color: var(--pf-muted) !important;
}
/* Captions pair a bold label with one sentence, in every chapter. */
body.pf-system.pf-unified[data-portfolio] :is(figcaption,.pf-caption) > b { color: var(--pf-ink) !important; font-weight: 500; margin-right: 8px; }
/* Same height as the text: on desktop the work runs from the section number to the last line of the paragraph,
   centered in its column, with the caption below. case-study-media.js measures that height into --pf-overview-h;
   without it the work simply fills its column. */
@media(min-width:1001px) {
  body.pf-system.pf-unified[data-portfolio] #overview.pf-overview-fit { align-items: start; }
  body.pf-system.pf-unified[data-portfolio] #overview.pf-overview-fit > .pf-overview-exhibit { margin-top: var(--pf-overview-offset, 0px) !important; }
  body.pf-system.pf-unified[data-portfolio] #overview.pf-overview-fit :is(.pf-overview-media, .pf-overview-exhibit figcaption) {
    width: min(100cqw, var(--pf-overview-h) * var(--pf-media-ratio));
  }
  body.pf-system.pf-unified[data-portfolio] #overview.pf-overview-fit .pf-overview-media {
    margin-top: max(0px, (var(--pf-overview-h) - 100cqw / var(--pf-media-ratio)) / 2);
  }
}
/* Recordings (Feral, Femme Fatale): the player's own bar appears once the video plays. */
body.pf-system.pf-unified[data-portfolio] .pf-overview-video .pf-video-frame { box-shadow: 0 32px 72px -32px rgba(0,0,0,.6); }
/* Websites in overviews sit on a real desktop computer: GExplore's homepage image, and Service Desk's recording
   inside the same device (media/device-desktop.webp, whose clear screen is 16 : 9). */
body.pf-system.pf-unified[data-portfolio] .pf-overview-gexplore .pf-overview-media { --pf-media-ratio: 1.1867; }
body.pf-system.pf-unified[data-portfolio] :is(.pf-overview-gexplore .pf-overview-media > img:not(.pf-overview-light), .pf-device-desktop) { filter: drop-shadow(0 28px 36px rgba(20,40,80,.14)); }
body.pf-system.pf-unified[data-portfolio] .pf-device-desktop { position: relative; aspect-ratio: 909 / 766; background: url('media/device-desktop.webp') center / 100% 100% no-repeat; }
body.pf-system.pf-unified[data-portfolio] .pf-device-desktop > .pf-video-frame {
  position: absolute !important; left: 2.31%; top: 2.872%; width: 95.38%; height: 63.708%;
  border-radius: 0 !important; box-shadow: none !important;
}
body.pf-system.pf-unified[data-portfolio] .pf-device-desktop > .pf-video-frame > video { height: 100%; aspect-ratio: auto; object-fit: cover; }
/* Light behind the work, by kind. The game recordings glow in their own colors: a blurred copy of the frame
   spills onto the page (Feral at half strength). Pawsitive and the products sit on a soft wash of their
   project colors. Every light fades out on all sides; #overview clips it at the viewport edge. */
body.pf-system.pf-unified[data-portfolio] .pf-overview-light { position: absolute; z-index: -1; pointer-events: none; }
body.pf-system.pf-unified[data-portfolio] img.pf-overview-light {
  left: -12%; top: -14%; width: 124% !important; height: 128% !important; max-width: none; margin: 0;
  border: 0; border-radius: 0; box-shadow: none; object-fit: cover;
  opacity: .85; filter: blur(72px) saturate(2) brightness(1.35);
}
body.pf-system.pf-unified[data-portfolio][data-portfolio='feral'] img.pf-overview-light { opacity: .45; filter: blur(72px) saturate(1.7) brightness(1.1); }
body.pf-system.pf-unified[data-portfolio] span.pf-overview-light {
  inset: -30% -24%;
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent);
  mask-image: radial-gradient(ellipse closest-side, #000 55%, transparent);
}
body.pf-system.pf-unified[data-portfolio][data-portfolio='gexplore'] span.pf-overview-light {
  background: radial-gradient(ellipse at 40% 42%, rgba(133,182,232,.5), transparent 70%), radial-gradient(ellipse at 68% 66%, rgba(196,228,222,.7), transparent 66%);
}
body.pf-system.pf-unified[data-portfolio][data-portfolio='servicedesk'] span.pf-overview-light {
  background: radial-gradient(ellipse at 40% 42%, rgba(119,203,194,.5), transparent 70%), radial-gradient(ellipse at 70% 66%, rgba(246,220,188,.6), transparent 66%);
}
body.pf-system.pf-unified[data-portfolio][data-portfolio='wecare'] span.pf-overview-light {
  background: radial-gradient(ellipse at 40% 40%, rgba(177,151,213,.42), transparent 70%), radial-gradient(ellipse at 72% 66%, rgba(245,209,191,.5), transparent 66%);
}
/* Pawsitive: the art is cropped to the scene, with peach, lavender, mint, and butter gathered right behind it. */
body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] .pf-overview-pawsitive .pf-overview-media { --pf-media-ratio: .84; max-width: 380px; }
/* The art tilts gently toward the pointer, as it originally did (data-pf-depth, driven by case-study-media.js,
   which skips touch and reduced motion). The gradients behind it stay still. */
body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] .pf-overview-pawsitive .pf-overview-media { perspective: 1000px; }
body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] .pf-overview-pawsitive .pf-overview-media > img {
  transform: rotateX(var(--depth-x,0deg)) rotateY(var(--depth-y,0deg));
  transition: transform .35s ease-out; transform-origin: 50% 70%;
}
body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] span.pf-overview-light {
  inset: -34% -80%; filter: blur(24px);
  background: radial-gradient(circle at 40% 36%, rgba(252,196,168,.9), transparent 30%), radial-gradient(circle at 60% 56%, rgba(208,184,242,.8), transparent 30%),
    radial-gradient(circle at 43% 70%, rgba(192,230,204,.85), transparent 28%), radial-gradient(circle at 61% 30%, rgba(252,232,168,.75), transparent 26%);
  -webkit-mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent);
  mask-image: radial-gradient(ellipse closest-side, #000 50%, transparent);
}
@media(max-width:1000px) {
  body.pf-system.pf-unified[data-portfolio] #overview { grid-template-columns: minmax(0, 1fr); }
  body.pf-system.pf-unified[data-portfolio] #overview > :is(.pf-section-intro, .pf-overview-exhibit) { grid-column: 1; grid-row: auto; }
  body.pf-system.pf-unified[data-portfolio] #overview > .pf-overview-exhibit { margin-top: 40px !important; }
  body.pf-system.pf-unified[data-portfolio] #overview > .pf-overview-work { margin-top: 64px !important; }
  body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] .pf-overview-pawsitive .pf-overview-media { max-width: 300px; }
  /* Stacked under the paragraph, the gradients stay closer so they never tint its last lines. */
  body.pf-system.pf-unified[data-portfolio][data-portfolio='pawsitive'] span.pf-overview-light { inset: -14% -40%; filter: blur(18px); }
}
/* Restore the original peach, rose and sage character stages. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage { background: #eee4cf !important; border-radius: 48% 48% 16px 16px !important; border: 0 !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage[data-skin='calico'] { background: #edddd5 !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage[data-skin='tuxedo'] { background: #dce7de !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .cat-label { background: transparent !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .bestiary-section .creature-landscape {
  border-radius: 8px;
  background: linear-gradient(155deg,#edf0e2,#f0e9dd 45%,#e9e7ee 75%,#efdfd4) !important;
}
body.pf-system.pf-unified[data-portfolio='pawsitive'] .encounter::before { background: var(--island) !important; }

body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] [data-pf-outcome='friction'] { fill: #f2dcd6 !important; stroke: #a4756a !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] [data-pf-outcome='refine'] { fill: #f6e7bf !important; stroke: #aa9053 !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] [data-pf-outcome='response'] { fill: #dcecdf !important; stroke: #729780 !important; }
body.pf-system.pf-unified[data-portfolio] [data-pf-diagram] [data-pf-outcome='guidance'] { fill: #e8dff1 !important; stroke: #a08ab5 !important; }
body.pf-system.pf-unified[data-portfolio='servicedesk'] .branch-path[data-path='self'] .flow-terminal { background: #dcecdf !important; border-color: #729780 !important; }

/* Source wireframe values preserve the visible hierarchy of the original Feral study. */
body.pf-system.pf-unified[data-portfolio='feral'] .mini-wire {
  background: #303236 !important; background-image: none !important; border: 1px solid #69727e !important;
}
body.pf-system.pf-unified[data-portfolio='feral'] .mini-title { background: #8c939e !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-cells { gap: 5px !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-rows { gap: 6px !important; }
body.pf-system.pf-unified[data-portfolio='feral'] :is(.mini-cells i,.mini-rows i,.mini-wheel i) {
  background: transparent !important; border-color: #8b94a0 !important;
}
body.pf-system.pf-unified[data-portfolio='feral'] :is(.mini-cells i:nth-child(3),.mini-rows i:nth-child(2),.mini-wheel i:first-child) {
  background: #51575f !important; border-color: #b2b9c2 !important;
}
body.pf-system.pf-unified[data-portfolio='feral'] .mini-preview { border-color: #8994a2 !important; color: #a5aeb9 !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-copy { border-color: #838e9b !important; background: repeating-linear-gradient(transparent 0 6px,#66818f 6px 8px) !important; }
body.pf-system.pf-unified[data-portfolio='feral'] :is(.mini-copy::before,.mini-copy::after) { background: #8c939e !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-wheel { border-color: #8c97a5 !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-wheel > span { color: #a5aeb9 !important; }
/* Pawsitive's original character backdrop includes the arch, orbit and warm star. */
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .stage-orbit { border: 1px solid #ffffffcc !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .stage-star { color: #b28b57 !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage:hover .stage-orbit { border-color: #fffef5 !important; box-shadow: 0 0 30px #fff8dd65; }
@media(max-width:700px) {
  body.pf-system.pf-unified[data-portfolio='feral'] .mini-cells { gap: 3px !important; }
  body.pf-system.pf-unified[data-portfolio='feral'] .mini-rows { gap: 4px !important; }
  body.pf-system.pf-unified[data-portfolio='feral'] .mini-copy { background: repeating-linear-gradient(transparent 0 4px,#66818f 4px 5px) !important; }
}

body.pf-system.pf-unified[data-portfolio='feral'] .mini-preview { font: 400 40px/1 var(--pf-font) !important; }
body.pf-system.pf-unified[data-portfolio='feral'] .mini-wheel > span { font: 400 38px/1 var(--pf-font) !important; }
body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .stage-star { font-size: 43px !important; }
@media(max-width:800px) { body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .stage-star { font-size: 26px !important; } }
@media(max-width:560px) { body.pf-system.pf-unified[data-portfolio='pawsitive'] .cat-stage .stage-star { font-size: 21px !important; } }
@media(max-width:700px) {
  body.pf-system.pf-unified[data-portfolio='feral'] .mini-preview { font-size: 24px !important; }
  body.pf-system.pf-unified[data-portfolio='feral'] .mini-wheel > span { font-size: 23px !important; }
}

.journey-wireframe .wf-window { fill: #fff; stroke: #99a7b8; stroke-width: 1.3; }
.journey-wireframe .wf-box { fill: #f3f5f8; stroke: #bbc5d0; stroke-width: 1; }
.journey-wireframe .wf-accent { fill: var(--project-tint); stroke: var(--project-text); stroke-width: 1.3; }
.journey-wireframe .wf-line { fill: none; stroke: #9baabb; stroke-width: 2; stroke-linecap: round; }
.journey-wireframe .wf-dot { fill: #9baabb; }
body.pf-system.pf-unified[data-portfolio] .journey-wireframe .wf-text { fill: #263746; font: 500 16px/1.4 var(--pf-font); }



/* Feral's environment stills keep their 16:9 frame, with the caption below it. */
body.pf-system.pf-unified[data-portfolio='feral'] #world .gallery-item {
  aspect-ratio: auto !important; overflow: visible !important; background: transparent !important; border: 0 !important;
}
body.pf-system.pf-unified[data-portfolio='feral'] #world .gallery-frame {
  position: relative; aspect-ratio: 16 / 9; overflow: clip; border-radius: 12px; background: #17171b;
}
body.pf-system.pf-unified[data-portfolio='feral'] #world .gallery-item figcaption { margin: 12px 0 0; }