/* Editorial refinement. Portfolio tokens, approved opening and shared footer stay intact.
   Design variance 6 / motion 4 / density 3. Actual product exports remain the evidence. */

.mutton-case-study .mutton-section { padding-block: 88px; }
.mutton-case-study .mutton-heading h2 { text-wrap: balance; }
.mutton-case-study .mutton-heading > p:last-child { font-size: 1.12rem; line-height: 1.6; }
.mutton-case-study .mutton-section .case-handwriting { color: var(--case-blue-ink); }
.mutton-underline { position: relative; display: inline-block; isolation: isolate; }
.mutton-underline::after { content: ""; position: absolute; left: -.03em; right: -.05em; bottom: -.07em; height: .08em; border-radius: 50%; background: #c8b3f0; rotate: -2deg; z-index: -1; }

/* Familiar offline choices: one visual family, without feature-card containers. */
.mutton-case-study .mutton-ritual-chapter { padding-top: 72px; padding-bottom: 40px; }
.mutton-ritual-chapter .mutton-heading { text-align: center; margin-inline: auto; max-width: 820px; }
.mutton-ritual-chapter .mutton-heading > p:last-child { margin-inline: auto; max-width: 560px; }
.mutton-ritual-chapter .mutton-ritual { gap: 5%; margin-top: 45px; }
.mutton-ritual-chapter .mutton-ritual li { padding: 0; text-align: center; min-width: 0; }
.mutton-ritual-chapter .mutton-ritual li + li::before { top: 34%; left: -10%; color: #b7a1d6; font-size: 1.7rem; }
.mutton-ritual-plate { width: 100%; max-width: 330px; margin-inline: auto; aspect-ratio: 1; }
.mutton-ritual-plate img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }
.mutton-ritual-chapter .case-handwriting { display: inline-block; font-size: 1.25rem; line-height: 1.4; margin: 2px 0 17px; rotate: -4deg; }
.mutton-ritual-chapter li:nth-child(2) .case-handwriting { rotate: 3deg; }
.mutton-case-study .mutton-ritual-chapter h3 { font-size: 1.65rem; letter-spacing: -.04em; }
.mutton-case-study .mutton-ritual-chapter li p { font-size: .96rem; margin-top: 9px; }

/* A short editorial hinge replaces the repeated question-to-feature table. */
.mutton-case-study .mutton-editorial-pause { text-align: center; padding-block: 100px 120px; }
.mutton-case-study .mutton-editorial-pause h2 { font-size: clamp(2rem,3.7vw,3.2rem); line-height: 1.17; }
.mutton-case-study .mutton-editorial-pause p { max-width: 510px; margin: 28px auto 0; font-size: 1.05rem; }

/* The builder chapter is an annotated breakdown of real UI, not a fake backend. */
.mutton-case-study .mutton-builder { padding-top: 40px; }
.mutton-builder .mutton-heading { max-width: 830px; }
.mutton-builder-workbench { position: relative; max-width: 1020px; margin: 84px auto 0; padding: 30px 35px 20px; isolation: isolate; }
.mutton-builder-workbench::before { content: ""; position: absolute; inset: -80px 33% -80px -140px; z-index: -1; background: radial-gradient(ellipse,rgba(241,228,249,.5),rgba(252,235,236,.22) 42%,transparent 72%); pointer-events: none; }
.mutton-case-study .mutton-workbench-note { position: absolute; top: -44px; left: 4%; margin: 0; rotate: -5deg; font-size: 1.2rem; }
.mutton-builder-workbench .mutton-builder-layer { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr); gap: 13%; align-items: center; margin: 0 0 34px; }
.mutton-builder-layer:last-child { margin-bottom: 0; }
.mutton-builder-slice { width: 100%; border-radius: 13px; box-shadow: 0 12px 42px rgb(83 54 113 / 9%); }
.mutton-builder-slice--header { aspect-ratio: 360/110; }
.mutton-builder-slice--header img { transform: translateY(-2.95%); }
.mutton-builder-slice--progress { aspect-ratio: 360/48; border-radius: 7px; }
.mutton-builder-slice--progress img { transform: translateY(-14.09%); }
.mutton-builder-slice--products { aspect-ratio: 360/328; }
.mutton-builder-slice--products img { transform: translateY(-10.5%); }
.mutton-builder-layer figcaption { position: relative; margin: 0; }
.mutton-builder-layer figcaption::before { content: ""; position: absolute; width: 50px; right: calc(100% + 16px); top: 14px; border-top: 1px dashed #bfa9d9; }
.mutton-case-study .mutton-builder-layer h3 { font-size: clamp(1.3rem,2vw,1.65rem); letter-spacing: -.035em; line-height: 1.18; color: var(--portfolio-ink); }
.mutton-case-study .mutton-builder-layer p { font-size: 1rem; line-height: 1.55; margin-top: 12px; max-width: 320px; }

/* Let the final product become the main event. */
.mutton-case-study .mutton-experience { padding-top: 95px !important; }
.mutton-experience-heading { text-align: center; margin: 0 auto; }
.mutton-case-study .mutton-experience-heading h2 { font-size: clamp(3.2rem,6vw,5.2rem); line-height: 1.07; letter-spacing: -.06em; }
.mutton-experience-heading > p:last-child { margin-inline: auto; padding-top: 6px; }
.mutton-decision { grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 10%; padding: 115px 5% 80px; }
.mutton-case-study .mutton-decision h3 { font-size: clamp(2.1rem,3.65vw,3.15rem); line-height: 1.1; letter-spacing: -.05em; }
.mutton-case-study .mutton-decision-copy > p:not(.case-handwriting):not(.mutton-choice-label) { font-size: 1.1rem; line-height: 1.6; margin-top: 25px; }
.mutton-case-study .mutton-choice-label { font-size: .9rem; font-weight: 500; margin: 0 0 24px; color: var(--case-muted); display: flex; align-items: center; gap: 14px; }
.mutton-choice-label span { color: var(--case-blue-ink); font-variant-numeric: tabular-nums; }
.mutton-case-study .mutton-decision-copy .case-handwriting { font-size: 1.45rem; line-height: 1.4; margin-top: 40px; }
.mutton-product-figure { width: min(100%,390px); }
.mutton-product-figure::before { inset: -7% -34%; background: radial-gradient(ellipse,rgba(249,218,220,.5),transparent 70%); }
.mutton-parts-stage { padding-bottom: 100px; margin-right: 8%; }
.mutton-parts-stage > .mutton-screen--parts { rotate: 3deg; }
.mutton-selected-detail { position: absolute; width: 80%; right: -15%; bottom: 28px; aspect-ratio: 360/205; rotate: -3deg; box-shadow: 0 18px 45px rgb(75 39 69 / 12%); }
.mutton-selected-detail img { transform: translateY(-22.35%); }
.mutton-parts-stage figcaption { position: absolute; bottom: -4px; left: 0; right: 0; font-size: .8rem; }
.mutton-sizes { padding: 75px 3% 65px; }
.mutton-size-heading { display: block; text-align: center; }
.mutton-size-heading .mutton-choice-label { justify-content: center; margin-inline: auto; }
.mutton-case-study .mutton-size-heading h3 { font-size: clamp(2.05rem,3.5vw,3.1rem); }
.mutton-case-study .mutton-size-heading > p:last-child { font-size: 1.1rem; max-width: 570px; margin: 20px auto 0; }
.mutton-size-options { margin-top: 52px; gap: 32px; align-items: start; }
.mutton-size-options > figure:nth-child(2) { margin-top: 42px; }
.mutton-size-options .mutton-screen { aspect-ratio: 360/430; }
.mutton-size-options .mutton-screen--small img { transform: translateY(-11%); }
.mutton-size-options .mutton-screen--large img { transform: translateY(-28%); }
.mutton-size-options .mutton-screen--boneless img { transform: translateY(-44.9%); }
.mutton-size-options .mutton-size-label { color: var(--portfolio-ink); font-weight: 500; font-size: .92rem; }
.mutton-case-study .mutton-size-note { font-size: 1.35rem; margin-top: 40px; }
.mutton-screen--extras { aspect-ratio: 360/610; rotate: -3deg; }
.mutton-cart-detail { width: min(100%,340px); aspect-ratio: 360/80; margin-top: 44px; rotate: 2deg; }
.mutton-cart-detail img { transform: translateY(-94.1%); }
.mutton-decision--reverse .mutton-product-figure figcaption { margin-top: 25px; font-size: .8rem; }

/* One compact continuity view: only the UI details doing the work. */
.mutton-case-study .mutton-continuity { padding-block: 20px 90px; }
.mutton-continuity .mutton-heading { margin-inline: auto; text-align: center; max-width: 740px; }
.mutton-case-study .mutton-continuity h2 { font-size: clamp(1.8rem,3vw,2.55rem); }
.mutton-continuity .mutton-heading p { max-width: 600px; margin-inline: auto; font-size: 1rem; }
.mutton-context-strips { max-width: 1040px; margin: 42px auto 0; gap: 32px; }
.mutton-screen--context { aspect-ratio: 360/162; border-radius: 12px; }
.mutton-screen--context img { transform: translateY(-5.3%); }
.mutton-context-strips figure:nth-child(2) .mutton-screen img { transform: translateY(-2.78%); }
.mutton-context-strips figure:nth-child(3) .mutton-screen img { transform: translateY(-5%); }
.mutton-context-strips .mutton-size-label { font-size: .8rem; color: var(--case-muted); min-height: 0; }

.mutton-case-study .mutton-chef { padding-block: 55px 100px; gap: 11%; }
.mutton-chef > figure { max-width: 385px; }
.mutton-case-study .mutton-chef p:not(.case-handwriting) { font-size: 1.1rem; }
.mutton-case-study .mutton-chef .case-handwriting { font-size: 1.4rem; }
.mutton-case-study #complete-flow { padding-top: 45px; padding-bottom: 85px; }
.mutton-case-study .mutton-flow-heading h2 { font-size: clamp(2.05rem,3.5vw,3rem); }
.mutton-case-study .mutton-flow-heading p:not(.case-handwriting) { font-size: 1.05rem; margin-top: 15px; }
.mutton-flow { gap: 25px; padding-top: 32px; }
.mutton-flow > figure { flex-basis: 255px; }
.mutton-screen--flow { height: 450px; }
.mutton-flow > figure:nth-child(even) { padding-top: 28px; }

/* One ending: delivery, the qualified experiment response, and the takeaway. */
.mutton-case-study .mutton-finish { position: relative; display: grid; grid-template-columns: minmax(0,1fr) minmax(0,.85fr); gap: 70px 12%; padding: 105px 5% 70px; isolation: isolate; }
.mutton-finish::before { content: ""; position: absolute; inset: -40px -4% 70px; background: radial-gradient(ellipse at 60% 42%,rgba(240,232,250,.55),transparent 68%); pointer-events: none; z-index: -1; }
.mutton-case-study .mutton-finish-intro h2 { font-size: clamp(2.4rem,4.2vw,3.65rem); }
.mutton-case-study .mutton-finish-intro > p:not(.case-kicker):not(.case-handwriting) { font-size: 1.05rem; max-width: 420px; }
.mutton-case-study .mutton-finish-intro .case-handwriting { font-size: 1.3rem; margin-top: 32px; rotate: -3deg; }
.mutton-finish-results { padding-top: 14px; }
.mutton-case-study .mutton-finish-results h3 { font-size: 1.02rem; font-weight: 500; letter-spacing: -.02em; margin-bottom: 18px; }
.mutton-finish-results dl { margin: 0; }
.mutton-finish-results dl > div { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 24px 0; border-bottom: 1px solid #e7dff0; }
.mutton-finish-results dt { font-size: 1rem; font-weight: 500; }
.mutton-finish-results dt small { display: block; font-size: .76rem; color: var(--case-muted); margin-top: 5px; font-weight: 400; }
.mutton-finish-results dd { font-size: clamp(2rem,3.2vw,2.75rem); line-height: 1; font-weight: 600; letter-spacing: -.04em; font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }
.mutton-case-study .mutton-finish-results > p { font-size: .88rem; line-height: 1.6; color: var(--case-muted); margin-top: 25px; }
.mutton-final-thought { grid-column: 1/-1; text-align: center; padding-top: 32px; }
.mutton-case-study .mutton-final-thought h2 { font-size: clamp(1.7rem,3.3vw,2.8rem); line-height: 1.25; }
.mutton-final-thought h2 span { color: var(--case-blue-ink); }
.mutton-final-thought .case-text-link { margin-top: 35px; }

@media (max-width:1000px) {
  .mutton-builder-workbench { padding-inline: 15px; }
  .mutton-builder-workbench .mutton-builder-layer { gap: 10%; }
  .mutton-builder-layer figcaption::before { width: 30px; right: calc(100% + 12px); }
  .mutton-parts-stage { width: 90%; }
  .mutton-case-study .mutton-decision { padding-inline: 2%; gap: 8%; }
  .mutton-size-options { gap: 22px; }
  .mutton-case-study .mutton-finish { gap: 60px 8%; padding-inline: 3%; }
}
@media (max-width:767px) {
  .mutton-case-study .mutton-section { padding-block: 60px; }
  .mutton-case-study .mutton-heading h2 { font-size: clamp(2rem,6.7vw,2.8rem); }
  .mutton-case-study .mutton-heading > p:last-child { font-size: 1rem; }
  .mutton-ritual-chapter .mutton-heading { text-align: left; }
  .mutton-ritual-chapter .mutton-heading > p:last-child { margin-left: 0; }
  .mutton-ritual-chapter .mutton-ritual { display: grid; grid-template-columns: 1fr; gap: 28px; max-width: 520px; margin-inline: auto; }
  .mutton-ritual-chapter .mutton-ritual li { display: grid; grid-template-columns: 43% minmax(0,1fr); column-gap: 7%; text-align: left; align-content: center; }
  .mutton-ritual-chapter .mutton-ritual li + li::before { display: none; }
  .mutton-ritual-plate { grid-column: 1; grid-row: 1; align-self: center; }
  .mutton-ritual-copy { grid-column: 2; grid-row: 1; align-self: center; }
  .mutton-ritual-chapter .case-handwriting { grid-column: 2; font-size: 1.05rem; margin: 0 0 12px; align-self: end; }
  .mutton-case-study .mutton-ritual-chapter h3 { grid-column: 2; font-size: 1.35rem; margin-top: 0; align-self: auto; }
  .mutton-case-study .mutton-ritual-chapter li p { grid-column: 2; font-size: .85rem; line-height: 1.4; margin-top: 8px; }
  .mutton-case-study .mutton-editorial-pause { padding-block: 45px 80px; }
  .mutton-case-study .mutton-editorial-pause h2 { font-size: clamp(1.8rem,6.2vw,2.65rem); }
  .mutton-case-study .mutton-editorial-pause p { font-size: .96rem; }
  .mutton-builder-workbench { padding: 0; margin-top: 70px; }
  .mutton-builder-workbench .mutton-builder-layer { grid-template-columns: 1fr; gap: 24px; max-width: 420px; margin: 0 auto 44px; }
  .mutton-builder-layer figcaption { padding-left: 16px; border-left: 2px solid #d7c6ee; }
  .mutton-builder-layer figcaption::before { display: none; }
  .mutton-case-study .mutton-builder-layer h3 { font-size: 1.3rem; }
  .mutton-case-study .mutton-builder-layer p { max-width: 360px; font-size: .95rem; margin-top: 9px; }
  .mutton-case-study .mutton-workbench-note { left: 0; top: -38px; font-size: 1.05rem; }
  .mutton-case-study .mutton-experience { padding-top: 55px !important; }
  .mutton-case-study .mutton-experience-heading h2 { font-size: clamp(3.1rem,10vw,4.6rem); }
  .mutton-case-study .mutton-decision { grid-template-columns: 1fr; gap: 42px; padding: 65px 0 40px; }
  .mutton-decision-copy { max-width: 460px; }
  .mutton-case-study .mutton-decision h3 { font-size: clamp(1.95rem,6.4vw,2.9rem); }
  .mutton-case-study .mutton-choice-label { font-size: .85rem; margin-bottom: 20px; }
  .mutton-case-study .mutton-decision-copy > p:not(.case-handwriting):not(.mutton-choice-label) { font-size: 1rem; margin-top: 20px; }
  .mutton-case-study .mutton-decision-copy .case-handwriting { margin-top: 25px; font-size: 1.2rem; }
  .mutton-product-figure { width: min(88%,360px); }
  .mutton-parts-stage { width: min(80%,350px); padding-bottom: 90px; margin-right: 6%; }
  .mutton-selected-detail { right: -16%; width: 88%; }
  .mutton-decision--reverse .mutton-decision-copy,.mutton-decision--reverse .mutton-product-figure { grid-column: auto; grid-row: auto; }
  .mutton-cart-detail { margin-top: 28px; max-width: 320px; }
  .mutton-sizes { padding: 55px 0 35px; }
  .mutton-size-heading { text-align: left; }
  .mutton-size-heading .mutton-choice-label { justify-content: start; margin-left: 0; }
  .mutton-case-study .mutton-size-heading h3 { font-size: clamp(1.95rem,6.4vw,2.9rem); }
  .mutton-case-study .mutton-size-heading > p:last-child { font-size: 1rem; margin-left: 0; }
  .mutton-size-options { grid-template-columns: 1fr; max-width: 360px; width: 90%; margin: 35px auto 0; gap: 32px; }
  .mutton-size-options > figure:nth-child(2) { margin-top: 0; }
  .mutton-case-study .mutton-size-note { font-size: 1.15rem; }
  .mutton-context-strips { grid-template-columns: 1fr; max-width: 360px; gap: 26px; }
  .mutton-continuity .mutton-heading { text-align: left; }
  .mutton-case-study .mutton-continuity h2 { font-size: 1.9rem; }
  .mutton-case-study .mutton-chef { grid-template-columns: 1fr; padding-block: 20px 65px; gap: 32px; }
  .mutton-chef > figure { order: 2; max-width: 360px; width: 90%; }
  .mutton-case-study .mutton-chef p:not(.case-handwriting) { font-size: 1rem; }
  .mutton-case-study .mutton-chef .case-handwriting { font-size: 1.2rem; }
  .mutton-case-study #complete-flow { padding-block: 45px 50px; }
  .mutton-flow > figure { flex-basis: 235px; }
  .mutton-screen--flow { height: 420px; }
  .mutton-flow > figure:nth-child(even) { padding-top: 20px; }
  .mutton-case-study .mutton-finish { grid-template-columns: 1fr; padding: 55px 0 45px; gap: 42px; }
  .mutton-case-study .mutton-finish-intro h2 { font-size: clamp(2.4rem,8vw,3.2rem); }
  .mutton-finish-results { padding-top: 0; }
  .mutton-finish-results dd { font-size: 2.5rem; }
  .mutton-final-thought { padding-top: 10px; }
  .mutton-case-study .mutton-final-thought h2 { font-size: clamp(1.65rem,5.5vw,2.35rem); }
}
@media (prefers-reduced-motion: reduce) {
  .mutton-builder-slice,.mutton-selected-detail,.mutton-cart-detail { transition: none; }
}