/* Built Logic: Results page and case studies (26 Sep 2026).

   Shared by /results and every /case-study-* page. Built on the refresh
   pieces in bl-visual.css (.bl-lift, .bl-sheet, .bl-ghost, .bl-alt) and the
   fs- type scale in styles.css; only page layout lives here.

   Visual weight (Kristian, 26 Sep 2026: one strong visual, the rest quiet):
   a case study carries one motion moment, his week then and now, designed in
   Figma first (file "Built Logic · Proof and case study motion"). It plays
   once, then settles, uses transform and opacity only, and renders its end
   state under reduced motion. The hero is a static number: the homepage owns
   the draining-pound visual (message map, 26 Sep 2026).

   Locked palette only: #232A31, #FAFAF8, #1B3A5B, #AFC4DD, #586069, #E5E5E2,
   hover #17314D. */

.pf-page { --pf-line: rgba(35,42,49,.14); --pf-ease: cubic-bezier(.22,1,.36,1); }

/* ------------------------------------------------------------- hero */
.pf-hero { max-width: 820px; }
.pf-hero__h1 { font-size: clamp(38px, 5vw, 60px); line-height: 1.06; }

/* ------------------------------------------------- two-column band */
.pf-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.pf-split > :only-child { grid-column: 1 / -1; max-width: 780px; }

/* ------------------------------------------------------ now + quote */
.pf-now, .pf-survey { padding-top: 72px; padding-bottom: 72px; }
.pf-quote { margin: 0; padding-left: 24px; border-left: 3px solid #1B3A5B; }
.pf-quote blockquote { margin: 0; }
.pf-quote p { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: clamp(22px, 2.2vw, 28px); line-height: 1.3; color: #232A31; }
.pf-quote figcaption { margin-top: 14px; font-size: 15px; color: #586069; }

/* ------------------------------------------------------------ close */
.pf-close { text-align: center; }
.pf-close .fs-lead { margin-inline: auto; }
.pf-close .bl-actions { justify-content: center; }
.pf-back { margin: 28px 0 0; font-size: 15px; }
.pf-back a { color: #586069; text-underline-offset: 4px; }

/* ------------------------------------------------- results listing */
.pf-cases { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.pf-case {
  position: relative;
  display: flex; flex-direction: column;
  padding: 28px;
  border: 1px solid var(--pf-line);
  border-radius: 18px;
  background: #FAFAF8;
}
.pf-case__tags { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.pf-case__tags li {
  padding: 6px 10px; border-radius: 999px; background: rgba(175,196,221,.3);
  font: 600 13px/1 'Source Sans 3', system-ui, sans-serif;
  letter-spacing: 0; text-transform: none; color: #1B3A5B;
}
.pf-case__h { margin: 0 0 12px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 26px; line-height: 1.2; }
.pf-case__h a { color: #232A31; text-decoration: none; }
/* Whole card is the link target. */
.pf-case__h a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.pf-case__h a:focus-visible { outline: none; }
.pf-case:has(a:focus-visible) { outline: 2px solid #1B3A5B; outline-offset: 3px; }
.pf-case__b { margin: 0 0 20px; font-size: 16px; line-height: 1.6; color: #586069; }
.pf-case__result { display: flex; gap: 32px; margin: 0 0 20px; padding-top: 16px; border-top: 1px solid var(--pf-line); }
.pf-case__result dt { font: 600 13px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #586069; }
.pf-case__result dd { margin: 8px 0 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 24px; color: #232A31; }
.pf-case__more { margin: auto 0 0; font-weight: 600; color: #1B3A5B; }
.pf-case__more::after { content: ' \2192'; }
.pf-cases__note { margin: 24px 0 0; max-width: 62ch; font-size: 15px; line-height: 1.6; color: #586069; }

/* ------------------------------------------------------- responsive */
@media (max-width: 899px) {
  .pf-split { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pf-cases { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 639px) {
  .pf-case { padding: 22px; }
}

/* ---------------------------------------------------- single column */
.pf-narrow { max-width: 780px; }

.pf-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ======================================================= static hero */
.pf-top { background: #232A31; color: #FAFAF8; padding: 150px 0 80px; }
.pf-top__copy { max-width: 860px; }
.pf-top__eyebrow { color: #AFC4DD; }
.pf-top__h1 {
  margin: 0 0 22px;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(42px, 5.4vw, 76px); line-height: 1.03; letter-spacing: -.015em;
  color: #FAFAF8;
}
.pf-top__lead { margin: 0; max-width: 34em; font-size: clamp(17px, 1.3vw, 20px); line-height: 1.55; color: rgba(250,250,248,.74); }
.pf-top__label { margin: 40px 0 10px; font: 600 14px/1.4 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #AFC4DD; }
.pf-top__num {
  margin: 0;
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(56px, 7.4vw, 108px); line-height: 1; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums lining-nums; color: #AFC4DD;
}

/* ============================================= the one visual: his week, then and now */
.pf-week { padding-top: 96px; padding-bottom: 96px; }
.pf-week__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }
.pf-week__h { position: relative; margin: 0; font-size: clamp(34px, 4vw, 56px); line-height: 1.05; min-height: 1.1em; }
.pf-week__h span { display: block; transition: opacity 360ms ease, transform 360ms cubic-bezier(.22,1,.36,1); }
.pf-week__now { position: absolute; left: 0; top: 0; opacity: 0; transform: translateY(12px); }
.pf-week[data-state="now"] .pf-week__then { opacity: 0; transform: translateY(-12px); }
.pf-week[data-state="now"] .pf-week__now { opacity: 1; transform: none; }

.pf-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: #E5E5E2; }
.pf-toggle button {
  padding: 10px 20px; border: 0; border-radius: 999px; background: none; cursor: pointer;
  font: 600 15px/1 'Source Sans 3', system-ui, sans-serif; color: #586069;
  transition: background-color 200ms ease, color 200ms ease;
}
.pf-toggle button[aria-pressed="true"] { background: #232A31; color: #FAFAF8; }
.pf-toggle button:focus-visible { outline: 2px solid #1B3A5B; outline-offset: 2px; }

.pf-week__body { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; margin-top: 40px; align-items: start; }
.pf-week__grid-wrap { position: relative; }
.pf-week__days { list-style: none; margin: 0 0 10px; padding: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; font: 600 13px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #586069; }
.pf-week__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-flow: column; grid-template-rows: repeat(16, clamp(12px, 1.7vw, 22px)); gap: 4px; }
.pf-cell { position: relative; border-radius: 4px; background: rgba(229,229,226,.7); }
.pf-cell::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit;
  background: #1B3A5B; opacity: var(--pf-tone, 1);
  transform: scale(0); transition: transform 380ms cubic-bezier(.22,1,.36,1);
  transition-delay: var(--pf-delay, 0ms);
}
.pf-cell.is-on::after { transform: scale(1); }
.pf-week__pending { display: none; position: absolute; inset: 24px 0 0; margin: 0; place-items: center; font: 600 14px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #586069; }
.pf-week.is-pending .pf-week__pending { display: grid; }
.pf-week.is-pending .pf-toggle { visibility: hidden; }

.pf-week__total { margin: 0; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; color: #232A31; }
.pf-week__total span { display: block; font-size: clamp(48px, 5vw, 72px); line-height: 1; color: #1B3A5B; font-variant-numeric: tabular-nums lining-nums; }
.pf-week__unit { margin: 8px 0 24px; font-size: 15px; color: #586069; }
.pf-week__legend { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--pf-line); }
.pf-week__legend li { display: grid; grid-template-columns: 14px minmax(0, 1fr); column-gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--pf-line); }
.pf-sw { width: 14px; height: 14px; margin-top: 4px; border-radius: 3px; background: #1B3A5B; }
.pf-week__legend li:nth-child(2) .pf-sw { opacity: .8; }
.pf-week__legend li:nth-child(3) .pf-sw { opacity: .62; }
.pf-week__legend li:nth-child(4) .pf-sw { opacity: .46; }
.pf-week__legend li:nth-child(5) .pf-sw { opacity: .32; }
.pf-week__task { font-weight: 600; font-size: 16px; color: #232A31; }
.pf-week__fig { grid-column: 2; font: 500 13px/1.5 'IBM Plex Mono', ui-monospace, monospace; color: #586069; }


/* =================================================== the route (static) */
.pf-route-band { position: relative; background: rgba(175,196,221,.3); padding-top: 88px; padding-bottom: 88px; }
.pf-route__line { position: relative; height: 3px; margin: 48px 11px 0; background: rgba(27,58,91,.18); border-radius: 2px; }
.pf-route__fill { position: absolute; inset: 0; background: #1B3A5B; border-radius: inherit; transform-origin: left center; transform: scaleX(1); }
.pf-route { list-style: none; margin: -13px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.pf-step { position: relative; padding-top: 44px; }
.pf-step__dot {
  position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #1B3A5B; background: #1B3A5B;
}
.pf-step__stage { margin: 0 0 10px; font: 600 13px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #1B3A5B; }
.pf-step__h { margin: 0 0 10px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.25; color: #232A31; }
.pf-step__b { margin: 0 0 16px; font-size: 16px; line-height: 1.6; color: #586069; }
.pf-step__link { font-weight: 600; color: #1B3A5B; text-decoration: underline; text-decoration-color: #AFC4DD; text-underline-offset: 4px; }
@media (hover: hover) and (pointer: fine) { .pf-step__link:hover { text-decoration-color: #1B3A5B; } }
/* armed: line empty, dots hollow; live: line draws, dots fill in turn */

/* ====================================================== ROI and questions */
.pf-roi { padding-top: 88px; padding-bottom: 40px; }
.pf-sums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 8px; }
.pf-sums__note { margin: 14px 0 0; font-size: 14px; color: #586069; }
.pf-sum { padding: 28px; border: 1px solid var(--pf-line); border-radius: 18px; background: #FAFAF8; color: #232A31; }
.pf-sum__label { margin: 0 0 16px; font: 600 13px/1 'Source Sans 3', system-ui, sans-serif; letter-spacing: 0; text-transform: none; color: #586069; }
.pf-sum__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 12px; margin: 0; font-size: 18px; color: #232A31; }
.pf-sum__op { font-family: 'IBM Plex Mono', ui-monospace, monospace; color: #586069; }
.pf-sum__total { margin: 20px 0 0; padding-top: 16px; border-top: 1px solid var(--pf-line); font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; color: #1B3A5B; }
.pf-faq { margin: 0; display: grid; gap: 24px; }
.pf-faq dt { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 21px; line-height: 1.3; color: #232A31; }
.pf-faq dd { margin: 8px 0 0; font-size: 17px; line-height: 1.6; color: #586069; max-width: 60ch; }
.pf-fit { padding: 28px; border: 1px solid var(--pf-line); border-radius: 18px; background: #FAFAF8; }
.pf-fit__h { margin: 0 0 14px; font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; color: #232A31; }
.pf-fit__list { margin: 0; padding-left: 20px; display: grid; gap: 10px; font-size: 17px; line-height: 1.5; color: #232A31; }

/* ======================================================= responsive */
@media (max-width: 899px) {
  .pf-top { padding-top: 120px; }
  .pf-week__body { grid-template-columns: minmax(0, 1fr); }
  .pf-sums { grid-template-columns: minmax(0, 1fr); }
  .pf-route__line { display: none; }
  .pf-route { margin-top: 32px; grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .pf-step { padding: 0 0 0 40px; }
  .pf-step__dot { top: 2px; }
}

@media (prefers-reduced-motion: reduce) {
  .pf-cell::after, .pf-week__h span { transition: none !important; }
}