/* Case-study geometry measured from antoshina.me/table-project. */
/* Match the 4px chip gap vertically; the intro's base gap is 16px. */
.goat-case .case-project-type + .case-meta{margin-top:-12px}
@font-face{font-family:'IBM Plex Mono';src:url('assets/fonts/ibm-plex-mono-medium.ttf') format('truetype');font-weight:500;font-style:normal;font-display:swap}
.goat-case .case-shell{--frame-edge:max(60px,calc((100vw - 1320px)/2));position:relative;min-height:100vh;padding:60px var(--frame-edge)}
.goat-case .case-main{width:600px;max-width:100%;margin:0 auto;display:flex;flex-direction:column;gap:40px;animation:page-enter 240ms ease both}
.goat-case .case-intro,.goat-case .case-section,.goat-case .case-subsection{display:flex;flex-direction:column;gap:16px;min-width:0}
/* Keep each heading with its copy; separate consecutive topics more clearly. */
.goat-case .case-subsection + .case-subsection{margin-top:24px}
.goat-case .case-subsection > h3 + p{margin-top:-8px}
.goat-case h1{font-size:28px;line-height:32px;font-weight:400;letter-spacing:-.5px;overflow-wrap:break-word}
.goat-case h2{font-size:20px;line-height:28px;font-weight:500;letter-spacing:-.5px}
.goat-case h3{font-size:16px;line-height:24px;font-weight:500}
.goat-case strong{font-weight:500}
.goat-case .case-eyebrow{color:var(--muted)}
.goat-case .case-meta{display:flex;align-items:center;justify-content:space-between;gap:16px;color:var(--muted);font-size:12px;line-height:20px}
.goat-case .case-tags{padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:4px}
.goat-case .case-tags li{background:var(--surface);border-radius:999px;padding:4px 10px;color:var(--text)}
.goat-case .case-media{margin:0;width:100%;aspect-ratio:5/4;border-radius:20px;overflow:hidden;background:var(--surface)}
.goat-case .case-media img{display:block;width:100%;height:100%;object-fit:cover}
.goat-case .case-prototype-image{aspect-ratio:813/439}
.goat-case .case-prototype-image img{object-fit:contain}
.goat-case .case-panel{padding:20px;border-radius:20px;background:var(--surface);display:flex;flex-direction:column;gap:16px}
.goat-case .case-panel>div{display:flex;flex-direction:column;gap:8px}
.goat-case .case-panel h3{color:var(--muted);font-weight:400}
.goat-case .case-prototype{align-self:flex-start;color:var(--text);cursor:pointer;text-align:left;text-decoration:underline}
.goat-case .case-back{position:fixed;top:60px;left:var(--frame-edge);z-index:5;width:40px;height:40px;border-radius:8px;background:var(--surface);display:grid;place-items:center;text-decoration:none;font-size:24px;line-height:24px;transition:transform 120ms,background-color 180ms,opacity 180ms;animation:page-enter 240ms ease both}
.goat-case .case-back:active{transform:scale(.94)}
.goat-case .case-options{position:absolute;top:60px;right:var(--frame-edge);display:flex;gap:20px;animation:page-enter 240ms ease both}
.goat-case .case-topbar{height:0}
.goat-case .visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.goat-case .goat-diagram{width:100%;aspect-ratio:823/508.025;position:relative;overflow:hidden;border-radius:20px}
.goat-case .case-footer{display:flex;flex-direction:column;gap:16px;font-size:16px;line-height:24px}
.goat-case.case-leaving{opacity:0;transition:opacity 180ms}
@media(max-width:1223px){
 .goat-case .case-shell{--frame-edge:20px;padding:20px}
 .goat-case .case-topbar{height:40px;max-width:600px;margin:0 auto 40px;display:flex;justify-content:space-between;gap:10px}
 .goat-case .case-back{position:static;flex-shrink:0;animation:none}
 .goat-case .case-back.is-floating{position:fixed;top:20px;left:max(20px,calc(50vw - 300px));border:1px solid var(--border)}
 .goat-case .case-options{position:static;animation:none;margin-left:auto}
 .goat-case h1{font-size:24px;line-height:28px}
 .goat-case .case-main{width:100%;max-width:600px;font-size:14px;line-height:20px}
 .goat-case h3{font-size:14px;line-height:20px}
}
@media(prefers-reduced-motion:reduce){.goat-case .case-main,.goat-case .case-back,.goat-case .case-options{animation:none}.goat-case.case-leaving{transition:none}}

/* Flow 1 media stays within the editorial column. */
.goat-case #flow-1 .case-flow-composition{width:100%;align-self:center;aspect-ratio:1820/1358}
.goat-case #flow-1 .case-flow-composition img{height:auto;object-fit:contain}
/* Equal extra breathing room above and below; preserve the video scale. */
.goat-case #flow-1 .case-flow-demo{position:relative;aspect-ratio:816/640;background:#303030}
.goat-case #flow-1 .case-flow-demo video{position:absolute;top:50%;left:0;transform:translateY(-50%);display:block;width:100%;height:auto;object-fit:contain}

/* Original image proportions and consistent spacing between introduction topics. */
.goat-case .case-motivation-image{aspect-ratio:1156/491;margin:24px 0}

/* Marketing evidence follows the existing case-study scale and image treatment. */
.goat-case .case-project-type{align-self:flex-start;max-width:100%;padding:4px 10px;border-radius:999px;background:var(--surface);color:var(--text);font-size:12px;line-height:20px}
.goat-case .case-marketing-proof{display:flex;flex-direction:column;gap:12px;margin:0;width:100%;max-width:460px;align-self:center;min-width:0}
.goat-case .case-marketing-card{width:100%;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--page-bg)}
.goat-case .case-marketing-viewport{position:relative;width:100%;overflow:hidden}
.goat-case .case-marketing-viewport a{display:block;width:100%}
.goat-case .case-marketing-proof img{display:block;width:100%;height:auto;object-fit:contain}
.goat-case .case-marketing-viewport.is-collapsible{height:400px;transition:height 200ms var(--ease-out)}
.goat-case .case-marketing-viewport::after{content:"";position:absolute;inset:auto 0 0;height:72px;pointer-events:none;background:linear-gradient(transparent,var(--page-bg));opacity:0;transition:opacity 200ms var(--ease-out)}
.goat-case .case-marketing-viewport.is-collapsible:not(.is-expanded)::after{opacity:1}
.goat-case .case-marketing-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:calc(100% - 24px);margin:12px;padding:10px 16px;border-radius:8px;background:var(--surface);color:var(--text);font:inherit}
.goat-case .case-marketing-chevron{flex:none;transition:transform 200ms var(--ease-out)}
.goat-case .case-marketing-toggle[aria-expanded="true"] .case-marketing-chevron{transform:rotate(180deg)}
.goat-case .case-marketing-original{align-self:flex-start;color:var(--muted);font-size:12px;line-height:20px;text-decoration:underline}
@media(prefers-reduced-motion:reduce){.goat-case .case-marketing-viewport.is-collapsible,.goat-case .case-marketing-chevron{transition:none}.goat-case .case-marketing-viewport::after{transition:opacity 100ms ease}}

/* Flow 1 and 2: spacious static showcases, intact screen images and shared devices. */
.goat-case .case-flow2-gallery{min-width:0;width:100%;padding:56px 36px;border-radius:20px;background:#2d2d2d}
.goat-case .case-flow2-track{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:48px 24px;align-items:center;list-style:none;margin:0;padding:0 4px}
.goat-case .case-flow2-slide{min-width:0}
.goat-case .case-flow2-open{display:block;width:100%;padding:0;background:none;border:0;cursor:zoom-in;color:inherit}
.goat-case .case-flow2-open:focus-visible{outline:2px solid #a9b7cd;outline-offset:6px;border-radius:20px}
.goat-case .case-iphone{position:relative;width:100%;padding:6px;border-radius:38px;background:linear-gradient(110deg,#6c707a,#22242a 18%,#454953 55%,#17191d);border:1px solid #969aa3;box-shadow:inset 0 0 0 2px #34373e,0 8px 16px #0000001a}
.goat-case .case-iphone-display{position:relative;padding:12px 0 8px;border:3px solid #090a0c;border-radius:32px;background:#fffdec;overflow:hidden}
.goat-case .case-iphone-display img{display:block;width:100%;height:auto;object-fit:contain;border-radius:22px;-webkit-user-drag:none}
.goat-case .case-iphone-island{position:absolute;z-index:1;top:4px;left:50%;transform:translateX(-50%);width:27%;height:9px;border-radius:999px;background:#090a0c}
.goat-case .case-iphone-island::after{content:"";position:absolute;right:7px;top:3px;width:3px;height:3px;border-radius:50%;background:#202838}
.goat-case .case-iphone-buttons{position:absolute;left:-3px;top:94px;width:2px;height:29px;background:#696d76;border-radius:2px;box-shadow:0 38px #696d76}
.goat-case .case-iphone::after{content:"";position:absolute;right:-3px;top:116px;width:2px;height:44px;border-radius:2px;background:#696d76}
.goat-case .case-flow2-open .case-iphone{padding:3%;border-radius:18px}
.goat-case .case-flow2-open .case-iphone-display{aspect-ratio:602/1305;padding:0;border-width:2px;border-radius:14px}
.goat-case .case-flow2-open .case-iphone-display img{width:100%;height:100%;object-fit:cover;border-radius:10px}
.goat-case #flow-2 .case-flow2-slide:last-child .case-iphone-display img{transform:scale(1.014)}
.goat-case .case-flow2-open .case-iphone-island{height:4px;top:2px}
.goat-case .case-flow2-open .case-iphone-island::after{display:none}
.goat-case .case-flow2-open .case-iphone-buttons{top:22%;height:8%;box-shadow:0 20px #696d76}
.goat-case .case-flow2-open .case-iphone::after{top:30%;height:12%}
@media(max-width:600px){.goat-case .case-flow2-gallery{padding:32px 24px}.goat-case .case-flow2-track{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 24px}}


/* Flow 3 reference composition: five front-facing devices, two staggered groups. */
.goat-case .case-flow3-composition{position:relative;container-type:inline-size;width:100%;aspect-ratio:4/3;margin:0;border-radius:20px;overflow:hidden;background:#2D2D2D}
.goat-case .case-flow3-composition ol{margin:0;padding:0;list-style:none}
.goat-case .case-flow3-phone{position:absolute;width:17.8%;transform:perspective(1200px) rotateY(-2deg);transform-origin:center}
.goat-case .case-flow3-phone:nth-child(1){left:8.2%;top:38%;z-index:4}
.goat-case .case-flow3-phone:nth-child(2){left:20.8%;top:16.5%;z-index:2}
.goat-case .case-flow3-phone:nth-child(3){left:36%;top:25.5%;z-index:3}
.goat-case .case-flow3-phone:nth-child(4){left:60.7%;top:38%;z-index:1}
.goat-case .case-flow3-phone:nth-child(5){left:73.2%;top:16.5%;z-index:3}
.goat-case .case-flow3-phone .case-iphone{padding:.5cqw;border-width:.0833cqw;border-radius:3.1667cqw;box-shadow:inset 0 0 0 .1667cqw #34373e,0 .6667cqw 1.3333cqw #0000001a}
.goat-case .case-flow3-phone .case-iphone-display{padding:1cqw 0 .6667cqw;border-width:.25cqw;border-radius:2.6667cqw}
.goat-case .case-flow3-phone img{display:block;width:100%;height:auto;object-fit:contain;border-radius:1.8333cqw}
.goat-case .case-flow3-phone .case-iphone-island{top:.3333cqw;height:.75cqw}
.goat-case .case-flow3-phone .case-iphone-island::after{right:.5833cqw;top:.25cqw;width:.25cqw;height:.25cqw}
.goat-case .case-flow3-phone .case-iphone-buttons{left:-.25cqw;top:7.8333cqw;width:.1667cqw;height:2.4167cqw;border-radius:.1667cqw;box-shadow:0 3.1667cqw #696d76}
.goat-case .case-flow3-phone .case-iphone::after{right:-.25cqw;top:9.6667cqw;width:.1667cqw;height:3.6667cqw;border-radius:.1667cqw}

/* Mask only baked-in PNG edge lines; retain image geometry and all iOS chrome. */
.goat-case .case-flow3-phone .case-iphone-display{background:#fffeed}
.goat-case .case-flow3-phone:nth-child(5) .case-iphone-display{background:linear-gradient(#f989ff 50%,#fffeed 50%)}
.goat-case .case-flow3-phone img{clip-path:inset(.5% 0 .5% 0 round 1.8333cqw)}
.goat-case .case-flow3-phone:nth-child(1) img{clip-path:inset(.5% 0 .5% 0 round 1.8333cqw)}

/* Center both RU and the wider ENG label in the existing 40px control. */
.goat-case .case-options .language{padding:0}

/* Six equal character cards in the existing editorial column. */
.goat-case .case-character-gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.goat-case .case-character-gallery>div{aspect-ratio:1;min-width:0;display:grid;place-items:center;padding:24px;background:#303030}
.goat-case .case-character-gallery img{display:block;width:90%;height:90%;min-width:0;min-height:0;object-fit:contain}
.goat-case .case-character-gallery img.case-character-face{width:72%;height:72%}
@media(max-width:600px){
 .goat-case .case-character-gallery{gap:12px}
 .goat-case .case-character-gallery>div{padding:12px}
}

/* JS-only enhancement: cards remain visible without IntersectionObserver. */
.goat-case .goat-reveal{opacity:0;transform:translateY(40px)}
.goat-case .goat-reveal.is-revealed{opacity:1;transform:translateY(0);transition:opacity 800ms cubic-bezier(0.22,1,0.36,1),transform 800ms cubic-bezier(0.22,1,0.36,1);transition-delay:var(--goat-reveal-delay,0ms)}
@media(prefers-reduced-motion:reduce){
 .goat-case .goat-reveal,.goat-case .goat-reveal.is-revealed{opacity:1;transform:none;transition:none}
}

/* Section 09: separate exploratory observations from proposed responses. */
.goat-case #usability-testing .validation-card h3{color:var(--text);font-weight:500}
.goat-case #usability-testing .validation-card dl{margin:0;display:grid;gap:16px;min-width:0}
.goat-case #usability-testing .validation-card dl>div{display:flex;flex-direction:column;gap:4px;min-width:0}
.goat-case #usability-testing .validation-card dt{color:var(--muted);font-size:12px;line-height:20px}
.goat-case #usability-testing .validation-card dd{margin:0;overflow-wrap:break-word}

/* Flow 1 reuses the existing showcase; equal devices with reference-like vertical offsets. */
.goat-case .case-flow1-showcase .case-flow2-track{padding-bottom:var(--flow-lower-shift,60px)}
.goat-case .case-flow1-showcase .case-flow2-slide:nth-child(even){transform:translateY(var(--flow-lower-shift,calc(18px + 15%)))}

.goat-case .case-flow3-open{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:zoom-in}
.goat-case .case-flow3-open:focus-visible{outline:2px solid #a9b7cd;outline-offset:6px;border-radius:20px}

.goat-case .case-flow-hint{margin:0;text-align:center;color:var(--muted);font-size:12px;line-height:20px}

/* Three recordings already contain their own iPhone hardware. */
.goat-case .goat-flow-videos{padding:56px 36px;border-radius:20px;background:#2d2d2d;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:center;gap:24px;width:100%;min-width:0}
.goat-case .goat-flow-videos video{display:block;width:100%;height:100%;aspect-ratio:530/1080;object-fit:contain;border:0;padding:0;background:none}
@media(max-width:540px){
 .goat-case .goat-flow-videos{grid-template-columns:minmax(0,260px);justify-content:center;gap:32px}
}

/* Keep the exported artwork layers and framing from Figma. */
.goat-case .goat-figma-character{margin:24px 0;aspect-ratio:1196/477.06546;padding:5.0167224%;background:#2d2d2d}
.goat-case .goat-figma-character img{height:auto;object-fit:contain}
.goat-case .goat-figma-thanks{aspect-ratio:1196/697.19855;padding:5.0167224%;background:#2d2d2d}
.goat-case .goat-thanks-crop{position:relative;width:100%;aspect-ratio:1098/589;overflow:hidden}
.goat-case .goat-thanks-crop img{position:absolute;width:122.04%;height:222.92%;max-width:none;left:-11.38%;top:2.55%;object-fit:fill}
@media(max-width:600px){.goat-case .goat-flow-videos{padding:32px 24px}}