/* Square editorial cards, using the existing portfolio tokens. */
.case-list { border: 0; }
.case-study {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
  padding: clamp(24px, 3.3vw, 48px);
  margin-bottom: 32px;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 3vw, 44px);
  align-items: center;
}
.case-study:nth-child(2) { background: var(--ink); color: var(--paper); border-color: #545454; }
.case-study:nth-child(2) .case-copy > p:not(.technical):not(.case-tags),
.case-study:nth-child(2) .case-result p { color: #B8B8B8; }
.case-study:nth-child(2) .case-result strong { color: var(--blue-soft); }
.case-study:nth-child(3) { background: var(--blue-tint); }
.case-study .case-copy h3 { margin-bottom: 28px; }
.case-study .case-result {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-self: stretch;
  min-width: 0;
  max-width: none;
  min-height: 300px;
  border: 0;
  padding: clamp(20px, 2.5vw, 36px);
  background: #EEEFEA;
}
.case-study:nth-child(2) .case-result { background: #20242D; }
.case-study:nth-child(3) .case-result { background: #DCE2F8; }
.case-study .case-result strong {
  font-size: clamp(48px, 6vw, 88px);
  overflow-wrap: normal;
  line-height: 1;
}
.case-study .case-result > span { margin-block: 24px 12px; }
.case-study .case-result p { max-width: 34ch; }
.case-study .case-process { margin-bottom: 24px; }
.case-process > span { display: block; }
.case-process .case-arrow { margin-block: 4px; }
.case-study .technical, .case-study .case-tags { font-size: 11px; }

/* The reference pins one container and layers cards 30px apart. */
.stack-enhanced .case-list { position: relative; height: 70vh; margin-bottom: 90px; }
.stack-enhanced .case-study {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  height: 70vh;
  margin: 0;
  transform-origin: center top;
  will-change: transform, opacity;
}
.stack-enhanced .case-study:nth-child(1) { z-index: 2; }
.stack-enhanced .case-study:nth-child(2) { top: 30px; z-index: 3; }
.stack-enhanced .case-study:nth-child(3) { top: 60px; z-index: 4; }

@media (max-width: 999px) {
  .case-study { grid-template-columns: 1fr; gap: 28px; }
  .case-study .case-result { min-height: 240px; }
  .case-copy > p:not(.technical):not(.case-tags) { max-width: 60ch; }
}
@media (max-width: 380px) {
  .case-study { padding: 20px; }
  .case-study .case-result { padding: 12px; }
}
@media (min-width: 1000px) and (min-height: 700px) and (max-height: 880px) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .hero-copy { transform: translateY(-38px); }
  .hero-copy .eyebrow { margin-bottom: 0; }
  /* The base clamp already sizes the sentence; this band only tightens the
     spacing, because a short opening gives the fixed chrome a bigger share. */
  .hero h1 { margin-block: 12px 0; }
  .hero-link { min-height: 48px; margin-top: 16px; padding-block: 10px; }
}
@media (max-width: 999px), (max-height: 699px), (prefers-reduced-motion: reduce), (pointer: coarse) {
  /* The arrow is no longer part of the keyhole scene: with the hero CTA
     removed it is the only scroll cue, so it is not hidden here. */
  .keyhole { display: none; }
  .hero-copy { width: 100%; transform: none; }
  /* No keyhole here, so the sentence has the whole screen: let it wrap to
     the column instead of holding the desktop line breaks. */
  .hero h1 br { display: none; }
  .hero h1 { font-size: clamp(48px, 8vw, 74px); }
  .hero-copy .eyebrow { font-size: 12px; }
  .hero-copy > p:not(.eyebrow) { font-size: 18px; line-height: 1.5; }
  .hero-link { font-size: 14px; min-height: 48px; padding: 14px 20px; }
}