/* Preserve-mode refinement: the approved Mutton/FnS type roles and rhythm.
   Existing purple accent, authentic product media and architecture stay intact.
   Variance 6 / motion 3 / density 3. No changes to shared portfolio styles. */
.sensei-case-study {
  --sensei-title: clamp(2rem, 3.5vw, 3rem);
  --sensei-subhead: 1.5rem;
  --sensei-body: 1.125rem;
  --sensei-label: 1rem;
  --sensei-note: 1.375rem;
  --sensei-section-space: 70px;
}

.sensei-case-study #main-content > .sensei-section {
  padding-block: var(--sensei-section-space);
}
.sensei-case-study #main-content h2,
.sensei-case-study #main-content #qualitative-analysis .sensei-heading h2 {
  font-size: var(--sensei-title);
  font-weight: 650;
  line-height: 1.16;
  letter-spacing: -.03em;
  text-wrap: balance;
}
.sensei-case-study #main-content h3 {
  font-size: var(--sensei-subhead);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.sensei-case-study #main-content > section:not(.case-opening) p {
  font-size: var(--sensei-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.012em;
}
.sensei-case-study #main-content > section:not(.case-opening) :is(.case-kicker, .case-small,
  .sensei-analysis-label, .sensei-survey-question, .sensei-detail-label,
  .sensei-annotation-number, .sensei-detail-note, .sensei-gallery-note),
.sensei-case-study #main-content figcaption,
.sensei-case-study #main-content :is(.sensei-tip-topics, .sensei-activity, .sensei-business-results) dt {
  font-size: var(--sensei-label);
  line-height: 1.5;
  letter-spacing: 0;
}
.sensei-case-study #main-content .sensei-section .case-kicker {
  font-weight: 600;
  letter-spacing: .1em;
}
.sensei-case-study #main-content .sensei-section :is(.case-handwriting, .sensei-principle-word) {
  font-size: var(--sensei-note);
  line-height: 1.4;
  font-weight: 400;
  letter-spacing: 0;
}
.sensei-case-study #main-content .sensei-design-choice {
  font-size: var(--sensei-body) !important;
  margin-top: 24px;
}
.sensei-case-study #main-content .sensei-heading { max-width: 900px; }
.sensei-case-study #main-content .sensei-heading > p:not(.case-kicker) {
  max-width: 650px;
  margin-top: 20px;
}
.sensei-case-study #main-content .case-text-link { font-size: var(--sensei-label); }

/* Match the sibling-page introduction and return control. */
.sensei-case-study .sensei-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 20px 28px;
  padding: 38px 2% 46px;
}
.sensei-case-study .sensei-meta > div {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 0;
}
.sensei-case-study .sensei-meta :is(dt, dd) {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  letter-spacing: -.012em;
}
.sensei-case-study .sensei-meta dt { font-weight: 400; }
.sensei-case-study .sensei-meta dd { font-weight: 600; }
.sensei-case-study h1.sensei-project-title { font-size: clamp(2.6rem, 5.2vw, 4.5rem); }
.sensei-case-study h1.sensei-project-title span { white-space: normal; }
.sensei-case-study h1.sensei-project-title span::after { content: none; }
.sensei-case-study .case-back.work-project-link {
  display: inline-flex;
  align-items: center;
  gap: .68rem;
  min-height: 44px;
  padding-bottom: .52rem;
  border: 0;
  color: var(--portfolio-ink);
  font-size: 1.125rem;
  line-height: 1.25;
  font-weight: 650;
  text-decoration: none;
  transition: color .2s ease;
}
.sensei-case-study .case-back.work-project-link > span { font-size: 1.2rem; }
.sensei-case-study .case-back.work-project-link:is(:hover, :focus-visible) { color: var(--case-blue-ink); }

/* Research stays complete, without shrinking the evidence to footnote size. */
.sensei-case-study .sensei-glimpse-stage { margin-top: 36px; }
.sensei-case-study #main-content .sensei-evidence { margin-top: 24px; }
.sensei-case-study .sensei-evidence p { max-width: 360px; }
.sensei-case-study .sensei-activity { margin-top: 40px; padding-block: 28px; }
.sensei-case-study .sensei-activity-value em {
  font-size: var(--sensei-label);
  line-height: 1.5;
}
.sensei-case-study .sensei-activity dd > small { font-size: var(--sensei-label); }
/* Source-traced survey charts: the leading answer, then the alternatives.
   Arc geometry follows the original illustration; it is not numerical data. */
.sensei-case-study #research {
  --survey-leading: #8553ab;
  --survey-secondary: #c5aed8;
  --survey-tertiary: #e4dce9;
}
.sensei-case-study #research .sensei-survey-grid { gap: 56px 6%; margin-top: 40px; }
.sensei-case-study #main-content #research .sensei-survey-question {
  max-width: 100%; min-height: 3em; margin: 0 0 24px;
  color: var(--portfolio-ink); font-size: var(--sensei-body);
  font-weight: 500; line-height: 1.5;
}
.sensei-case-study #research .sensei-survey-result {
  display: grid; grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  align-items: center; gap: 28px;
}
.sensei-case-study #research .sensei-survey-chart { display: block; width: 100%; height: auto; }
.sensei-case-study #research .sensei-survey-chart path {
  stroke: #fdfdfc; stroke-width: 2; stroke-linejoin: round;
}
.sensei-case-study #research .sensei-survey-chart .is-leading { fill: var(--survey-leading); }
.sensei-case-study #research .sensei-survey-chart .is-secondary { fill: var(--survey-secondary); }
.sensei-case-study #research .sensei-survey-chart .is-tertiary { fill: var(--survey-tertiary); }
.sensei-case-study #research .sensei-survey-responses { margin: 0; padding: 0; gap: 14px; }
.sensei-case-study #research .sensei-survey-responses li {
  display: grid; grid-template-columns: 9px minmax(0, 1fr); align-items: start;
  gap: 10px; min-height: 0; margin: 0; padding: 0;
  background: none; border-radius: 0; color: var(--case-muted);
  font-size: var(--sensei-label); font-weight: 400; line-height: 1.5;
}
.sensei-case-study #research .sensei-survey-responses li::before {
  content: ''; display: block; width: 8px; height: 8px;
  margin: .5em 0 0; border-radius: 50%; background: var(--survey-secondary);
}
.sensei-case-study #research .sensei-survey-responses li.is-leading { margin-bottom: 4px; }
.sensei-case-study #research .sensei-survey-responses li.is-leading::before { background: var(--survey-leading); margin-top: .6em; }
.sensei-case-study #research .sensei-survey-responses li:last-child::before { background: var(--survey-tertiary); }
.sensei-case-study #main-content #research .sensei-survey-responses h3 {
  min-height: 0; margin: 0; color: var(--survey-leading);
  font-size: var(--sensei-subhead); line-height: 1.25;
}
.sensei-case-study #main-content #qualitative-analysis {
  display: block;
}
.sensei-case-study .sensei-insight-map { margin-top: 36px; gap: 24px; }
.sensei-case-study .sensei-insight-map article { grid-template-columns: 1fr 32px 1.4fr; gap: 24px; }
.sensei-case-study .sensei-gap { font-size: var(--sensei-body); color: var(--case-muted); }
.sensei-case-study .sensei-insight-arrow { font-size: 1.5rem; }
.sensei-case-study #main-content .sensei-insight-map h3 { font-size: var(--sensei-body); line-height: 1.4; }
.sensei-case-study #main-content .sensei-insight-map p { font-size: var(--sensei-label); margin-top: 6px; }
.sensei-case-study .sensei-principle-layout { gap: 36px; margin-top: 36px; }
.sensei-case-study .sensei-principle-layout article:nth-child(n) { padding-top: 0; }
.sensei-case-study .sensei-principle-word { margin-bottom: 20px; }
.sensei-case-study #main-content .sensei-principle-layout h3 { font-size: var(--sensei-body); line-height: 1.4; margin-top: 20px; }
.sensei-case-study #main-content #the-direction { padding-block: 12px 24px; }
.sensei-case-study .sensei-route { margin-top: 0; }
.sensei-case-study #main-content .sensei-route strong { font-size: var(--sensei-body); }
.sensei-case-study .sensei-route a > span:last-child { font-size: var(--sensei-label); }
.sensei-case-study .sensei-flow-node,
.sensei-case-study .sensei-flow-help { font-size: var(--sensei-label); letter-spacing: -.012em; }
.sensei-case-study .sensei-architecture-figure { margin-top: 40px; }

/* Give the real UI the space; remove the extra scale changes around it. */
.sensei-case-study .sensei-decision-copy { max-width: 500px; }
.sensei-case-study .sensei-decision-copy > p { max-width: 460px; }
.sensei-case-study .sensei-context-details { margin-top: 36px; }
.sensei-case-study .sensei-ai-stage { margin-top: 40px; }
.sensei-case-study .sensei-tip-topics { margin-top: 28px; gap: 18px; }
.sensei-case-study .sensei-tip-topics > div { grid-template-columns: 160px 1fr; }
.sensei-case-study #main-content .sensei-tip-topics dd { font-size: var(--sensei-body); line-height: 1.6; }
.sensei-case-study .sensei-assist-options { gap: 8%; margin-top: 36px; max-width: none; }
.sensei-case-study .sensei-assist-options > div > span { font-size: var(--sensei-label); min-height: 0; }
.sensei-case-study .sensei-assist-options > div::before { display: none; }
.sensei-case-study .sensei-demo-intro { margin-top: 40px; }
.sensei-case-study .sensei-build-stage { margin-top: 28px; gap: 36px; }
.sensei-case-study .sensei-demo--build { max-width: 350px; }
.sensei-case-study .sensei-build-note--first { padding-bottom: 100px; }
.sensei-case-study .sensei-build-note--last { padding-top: 140px; }
.sensei-case-study .sensei-review-stage { max-width: 820px; margin-top: 40px; }
.sensei-case-study .sensei-review-phone--analysis { padding-top: 60px; }
.sensei-case-study .sensei-review-detail { margin-top: 32px; }
.sensei-case-study .sensei-time-result { margin-top: 40px; }
.sensei-case-study .sensei-time-result > div > span { font-size: var(--sensei-label); }
.sensei-case-study .sensei-time-result small { font-size: var(--sensei-label); }
.sensei-case-study .sensei-business-results { margin-top: 40px; padding-top: 32px; }
.sensei-case-study .sensei-screen-gallery { margin-top: 40px; gap: 40px 32px; }
.sensei-case-study .sensei-screen-gallery article:nth-child(n) { padding-top: 0; }
.sensei-case-study .sensei-gallery-window { max-width: 320px; margin-inline: auto; }
.sensei-case-study .sensei-screen-gallery article { text-align: center; }
.sensei-case-study #main-content .sensei-screen-gallery h3 { font-size: var(--sensei-body); margin-top: 20px; }
.sensei-case-study .sensei-reflection { padding-block: var(--sensei-section-space); }
.sensei-case-study .sensei-thanks { text-align: center; }
.sensei-case-study #main-content .sensei-thanks h2 { margin: 0; }

/* Crop the original boards inside their screen edges, not through the bezels.
   Coordinates use each source's native or declared reference dimensions. */
.sensei-case-study .sensei-ui-detail--balance {
  --image-width: 1819; --image-height: 1344;
  --window-width: 380; --window-height: 281.48;
  --cx: 1382; --cy: 684; --turn: -5deg;
}
.sensei-case-study .sensei-principle-visual.sensei-ui-detail--balance { --window-height: 287.879; }
.sensei-case-study .sensei-principle-visual--reasons {
  --image-width: 686; --image-height: 1412;
  --window-width: 598; --window-height: 453;
  --cx: 342; --cy: 866.5; --turn: 0deg;
}
.sensei-case-study .sensei-context-details .sensei-evidence-crop { aspect-ratio: 1.68; }
.sensei-case-study .sensei-context-details .sensei-evidence-crop--before {
  --image-width: 2048; --image-height: 1200;
  --window-width: 440; --window-height: 261.905;
  --cx: 1596; --cy: 624; --turn: -5deg;
}
.sensei-case-study .sensei-context-details .sensei-evidence-crop--reasons {
  --image-width: 686; --image-height: 1412;
  --window-width: 598; --window-height: 355.952;
  --cx: 341; --cy: 926; --turn: 0deg;
}
.sensei-case-study .sensei-ai-detail {
  --image-width: 686; --image-height: 1412;
  --window-width: 598; --window-height: 273;
  --cx: 341; --cy: 220.5; --turn: 0deg;
  aspect-ratio: 598 / 273;
}
.sensei-case-study :is(.sensei-ui-detail--balance, .sensei-principle-visual--reasons, .sensei-context-details .sensei-evidence-crop, .sensei-ai-detail) img {
  width: calc(var(--image-width) / var(--window-width) * 100%);
  height: auto;
  max-width: none;
  left: calc(50% - var(--cx) / var(--window-width) * 100%);
  top: calc(50% - var(--cy) / var(--window-height) * 100%);
  transform-origin: calc(var(--cx) / var(--image-width) * 100%) calc(var(--cy) / var(--image-height) * 100%);
  transform: rotate(var(--turn));
}
.sensei-case-study .sensei-gallery-window--pitch { --window-width: 260; --window-height: 435; --cx: 523; --cy: 367; }
.sensei-case-study .sensei-gallery-window--experts { --window-width: 260; --window-height: 488; --cx: 277; --cy: 800; }
.sensei-case-study .sensei-gallery-window--picks { --window-width: 258; --window-height: 517; --cx: 945; --cy: 1039; }
.sensei-case-study .sensei-gallery-window--captain { --window-width: 258; --window-height: 536; --cx: 515; --cy: 1270; }
.sensei-case-study .sensei-gallery-window--teams { --window-height: 548; --cx: 461; --cy: 520; }
.sensei-case-study .sensei-gallery-window--onboarding { --window-width: 258; --window-height: 410; --cx: 926; --cy: 1526; }
.sensei-case-study .sensei-crop--teams {
  mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent), linear-gradient(to bottom, #000 96%, transparent);
}

@media (max-width: 1023px) {
  .sensei-case-study .sensei-tip-topics > div { grid-template-columns: 1fr; gap: 4px; }
  .sensei-case-study .sensei-build-stage { gap: 24px; }
}
@media (max-width: 1000px) {
  .sensei-case-study #research .sensei-survey-grid { grid-template-columns: 1fr; gap: 40px; }
  .sensei-case-study #research .sensei-survey-result { grid-template-columns: minmax(140px, 180px) minmax(0, 1fr); max-width: 600px; }
  .sensei-case-study #main-content #research .sensei-survey-question { min-height: 0; max-width: 600px; }
}
@media (max-width: 520px) {
  .sensei-case-study #research .sensei-survey-result { grid-template-columns: 124px minmax(0, 1fr); gap: 18px; }
  .sensei-case-study #research .sensei-survey-responses { gap: 12px; }
  .sensei-case-study #research .sensei-survey-responses li { grid-template-columns: 7px minmax(0, 1fr); gap: 8px; }
  .sensei-case-study #research .sensei-survey-responses li::before { width: 7px; height: 7px; }
}
@media (max-width: 359px) {
  .sensei-case-study .sensei-hero-phone { left: calc(50% - 120px); }
  .sensei-case-study #research .sensei-survey-result { grid-template-columns: 1fr; gap: 20px; }
  .sensei-case-study #research .sensei-survey-chart { width: 160px; margin-inline: auto; }
}
@media (max-width: 767px) {
  .sensei-case-study {
    --sensei-title: 2rem;
    --sensei-subhead: 1.375rem;
    --sensei-body: 1rem;
    --sensei-note: 1.25rem;
    --sensei-section-space: 52px;
  }
  .sensei-case-study .case-back.work-project-link { font-size: 1rem; }
  .sensei-case-study .sensei-meta { flex-direction: column; gap: 16px; padding: 26px 0 34px; }
  .sensei-case-study .sensei-insight-map article { grid-template-columns: 1fr 24px 1.3fr; gap: 12px; }
  .sensei-case-study .sensei-insight-map article > div { grid-column: auto; }
  .sensei-case-study .sensei-principle-layout { gap: 36px; }
  .sensei-case-study .sensei-assist-options { grid-template-columns: 1fr; gap: 24px; }
  .sensei-case-study .sensei-assist-options > div { padding: 0; }
  .sensei-case-study .sensei-assist-options h3 br { display: none; }
  .sensei-case-study .sensei-assist-options p { max-width: 100%; }
  .sensei-case-study .sensei-build-stage { gap: 24px; }
  .sensei-case-study .sensei-build-note { padding: 0; }
  .sensei-case-study .sensei-review-stage { margin-top: 32px; }
  .sensei-case-study .sensei-screen-gallery { gap: 36px 24px; }
  .sensei-case-study .sensei-business-results > div { flex-wrap: wrap; }
}
@media (max-width: 480px) {
  .sensei-case-study .sensei-business-results > div {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 16px;
  }
  .sensei-case-study .sensei-route { grid-template-columns: 1fr; gap: 18px; }
  .sensei-case-study .sensei-route a { display: grid; grid-template-columns: 36px 1fr; gap: 4px 16px; align-items: center; }
  .sensei-case-study .sensei-route a::before { display: none; }
  .sensei-case-study .sensei-route-point { grid-row: span 2; margin-bottom: 0; }
  .sensei-case-study .sensei-route strong { margin: 0; }
  .sensei-case-study .sensei-route a > span:last-child { grid-column: 2; }
  .sensei-case-study .sensei-insight-map article { grid-template-columns: 1fr 24px; }
  .sensei-case-study .sensei-insight-map article > div { grid-column: 1 / -1; }
  .sensei-case-study .sensei-insight-arrow { rotate: 90deg; }
  .sensei-case-study .sensei-build-stage { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .sensei-case-study .case-back.work-project-link { transition: none; }
}