/* Case study pages */
.back { display: inline-flex; gap: 8px; color: var(--muted); font-size: 15px; margin-bottom: 40px; transition: color .2s; }
.back:hover { color: var(--ink); }
.case-head { padding-top: clamp(48px, 8vw, 104px); padding-bottom: clamp(40px, 6vw, 72px); }
.case-head h1 { max-width: 18ch; }

/* Meta row */
.meta-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: var(--rule); }
.meta-row div { padding: 24px clamp(16px, 2.5vw, 28px); }
.meta-row div:first-child { padding-left: 0; }
.meta-row div + div { border-left: var(--rule); }
.meta-row dt { color: var(--muted); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 6px; }
.meta-row dd { font-weight: 500; line-height: 1.35; }

/* Framed preview: same mockup + blurry background as the cards */
.shot { border: var(--rule); background: var(--paper); }
.shot .media { border-bottom: 0; }
.shot.wide .media { aspect-ratio: 16 / 8; }
.shot.wide .mockup { width: 62%; }
.screen.placeholder {
  display: grid; place-items: center; color: var(--muted); font-size: 14px; text-align: center;
  background: repeating-linear-gradient(45deg, #f6f5f1 0 12px, #efede7 12px 24px);
}
.case-hero { padding-top: clamp(40px, 6vw, 72px); }

/* Context + blocks: narrow text column, wide image column */
.split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: clamp(32px, 5vw, 80px); padding-top: clamp(80px, 10vw, 130px);
}
.split .side { align-self: start; position: sticky; top: 108px; }
.split h2 { margin-bottom: 20px; }
.split .side p { color: var(--muted); }
.split .side p + p { margin-top: 14px; }
.split .side p strong { color: var(--ink); font-weight: 500; }
.context-body { font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.45; letter-spacing: -0.01em; }
.context-body p + p { margin-top: 20px; }
.context-body strong { font-weight: 500; }
.context-body span { color: var(--muted); }

.block-num { display: flex; align-items: center; gap: 12px; color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.block-num i { display: block; width: 14px; height: 14px; }
.block-num .c { background: var(--red); border-radius: 50%; }
.block-num .s { background: var(--yellow); }
.block-num .t { width: 0; height: 0; border-left: 8px solid transparent; border-right: 8px solid transparent; border-bottom: 14px solid var(--blue); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.tags span { border: 2px solid var(--ink); padding: 4px 10px; font-size: 13px; font-weight: 500; color: var(--ink); }
.outcome { margin-top: 24px; padding-top: 16px; border-top: var(--hair); font-size: 15px; }
.outcome b { font-weight: 500; }
.stat-inline { display: block; font-weight: 500; font-size: clamp(2.6rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; color: var(--ink); margin: 24px 0 4px; }

/* Impact band */
.impact-band { border-top: var(--rule); border-bottom: var(--rule); background: var(--paper); margin-top: clamp(80px, 10vw, 130px); }
.impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.impact div { padding: clamp(40px, 6vw, 72px) clamp(16px, 3vw, 40px); }
.impact div:first-child { padding-left: 0; }
.impact div + div { border-left: var(--rule); }
.impact strong { display: block; font-weight: 500; font-size: clamp(2.4rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.04em; margin-bottom: 12px; }
.impact span { color: var(--muted); }
.handoff { color: var(--muted); max-width: 70ch; padding: 28px 0 0; font-size: 15px; }

/* NDA note */
.nda { color: var(--muted); font-size: 13px; margin-top: 12px; }

/* More case studies: logo-only mini cards */
.more-cases .section-head { padding-top: clamp(64px, 8vw, 100px); }
.mini-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 32px); }
.card.mini .logo-box { display: grid; place-items: center; aspect-ratio: 16 / 9; border-bottom: var(--rule); }
.card.mini .logo-box img { width: 55%; max-width: 180px; height: 56px; object-fit: contain; filter: brightness(0); opacity: .8; transition: opacity .2s; }
.card.mini:hover .logo-box img { opacity: 1; }

@media (max-width: 860px) {
  .meta-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .meta-row div { padding: 20px 16px 20px 0; }
  .meta-row div + div { border-left: 0; }
  .meta-row div:nth-child(n+3) { border-top: var(--hair); }
  .split { grid-template-columns: 1fr; }
  .split .side { position: static; }
  .shot.wide .media { aspect-ratio: 16 / 10; }
  .shot.wide .mockup { width: 84%; }
  .impact { grid-template-columns: 1fr; }
  .impact div { padding: 28px 0; }
  .impact div + div { border-left: 0; border-top: var(--hair); }
  .mini-cards { grid-template-columns: 1fr; }
}

/* Photo previews: images that already are a device mockup or photo */
.shot.photo .media { display: block; }
.shot.photo .full { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .9s cubic-bezier(.2,.7,.2,1), opacity .6s ease; }
.js .shot.photo .full { opacity: 0; transform: scale(1.06); }
.js .shot.photo.in-view .full { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .shot.photo .full { opacity: 1; transform: none; transition: none; }
}

/* Real feedback */
.feedback-card { border: var(--rule); background: var(--paper); padding: clamp(28px, 4vw, 48px); max-width: 880px; }
.feedback-card blockquote { font-size: clamp(1.15rem, 1.8vw, 1.45rem); line-height: 1.45; letter-spacing: -0.01em; }
.feedback-card figcaption { display: flex; align-items: center; gap: 14px; margin-top: 32px; font-size: 15px; }
.feedback-card figcaption i {
  flex: none; display: grid; place-items: center; width: 44px; height: 44px; font-style: normal;
  font-weight: 500; font-size: 14px; color: var(--paper); background: var(--red); border-radius: 50%;
}
.feedback-card figcaption strong { display: block; font-weight: 500; }
.feedback-card figcaption span { color: var(--muted); }

/* Diagrams: show the whole image, no crop */
.mockup .screen.fit { background: #fff; }
.mockup .screen.fit img { object-fit: contain; object-position: center; }

/* Design system: main shot + thumbnails */
.shot-group { display: grid; gap: 16px; align-self: start; }
.thumbs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.thumb {
  position: relative; display: block; padding: 0; border: 2px solid var(--ink); background: #fff;
  aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer; font: inherit; color: var(--ink);
  transition: transform .3s, box-shadow .3s;
}
.thumb:hover { transform: translate(-3px, -3px); box-shadow: 5px 5px 0 var(--ink); }
.thumb img { position: absolute; inset: 8px 8px 30px; width: calc(100% - 16px); height: calc(100% - 38px); object-fit: contain; object-position: center; }
.thumb[aria-pressed="true"] { box-shadow: 5px 5px 0 var(--yellow); transform: translate(-3px, -3px); }
.thumb[aria-pressed="true"] span { background: var(--yellow); }
.thumb span {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px; font-size: 12px; font-weight: 500;
  background: var(--paper); border-top: 2px solid var(--ink); text-align: left;
}

/* Dashboard + drawer sliding over it */
.shot.with-drawer .drawer {
  position: absolute; right: 7%; top: 14%; height: 72%; width: auto; z-index: 2;
  border-radius: 6px; box-shadow: 0 24px 48px -16px rgba(17,17,17,.5), 0 0 0 1px rgba(17,17,17,.12);
  transition: transform .9s cubic-bezier(.34,1.56,.64,1) .45s, opacity .5s ease .45s;
}
.js .shot.with-drawer .drawer { opacity: 0; transform: translateX(48px); }
.js .shot.with-drawer.in-view .drawer { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .shot.with-drawer .drawer { opacity: 1; transform: none; transition: none; }
}

@media (max-width: 860px) {
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot.with-drawer .drawer { right: 4%; top: 10%; height: 80%; }
}

/* QIMA 02: close-up of real components from the order validation screen */
.plain.detail img.zoom-components, .mockup .screen img.zoom-components { position: absolute; width: 175.4%; height: 190.6%; max-width: none; max-height: none; left: -52.6%; top: -84.2%; object-fit: fill; }
.thumbs.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Diagrams, components and research: no browser frame, never upscaled */
.plain {
  position: absolute; inset: 8%; display: flex; align-items: center; justify-content: center;
  transition: transform .9s cubic-bezier(.34,1.56,.64,1), opacity .6s ease;
}
.plain img {
  max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: scale-down;
  background: #fff; border-radius: 6px;
  box-shadow: 0 30px 60px -24px rgba(17,17,17,.45), 0 0 0 1px rgba(17,17,17,.12);
  transition: opacity .2s ease;
}
.plain img.swapping { opacity: 0; }
.plain.detail { inset: 10% 8%; overflow: hidden; border-radius: 6px; background: #fff; box-shadow: 0 30px 60px -24px rgba(17,17,17,.45), 0 0 0 1px rgba(17,17,17,.12); }
.plain.detail img { box-shadow: none; border-radius: 0; background: none; }
.js .shot .plain { opacity: 0; transform: translateY(48px) scale(.92); }
.js .shot.in-view .plain { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .plain { transition: none; }
  .js .shot .plain { opacity: 1; transform: none; }
}
@media (max-width: 860px) {
  .thumbs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Handoff note when there is no impact band above */
.handoff.solo { margin-top: clamp(64px, 8vw, 100px); padding-top: 0; }

/* Tool logos floating on a shot */
.tool-badges { position: absolute; left: 5%; bottom: 5%; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; }
.tool {
  display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px;
  background: var(--paper); border: 2px solid var(--ink); font-size: 14px; font-weight: 500; line-height: 1;
}
.tool svg { width: 18px; height: 18px; flex: none; }
.js .shot .tool-badges { opacity: 0; transform: translateY(16px); transition: opacity .5s ease .5s, transform .7s cubic-bezier(.34,1.56,.64,1) .5s; }
.js .shot.in-view .tool-badges { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .shot .tool-badges { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 480px) {
  .tool { font-size: 12px; padding: 5px 9px 5px 7px; }
  .tool svg { width: 14px; height: 14px; }
}