/* Pictures occupy their own grid track, including on narrow screens. */
.bento { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); perspective: 1600px; padding-block: 24px 72px; }
.tilt-card { position: relative; perspective: 1600px; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s ease, border-color .3s, box-shadow .3s; }
.tilt-card::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: inherit; }
.cell { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; align-content: start; align-items: center; min-width: 0; min-height: 320px; padding: 26px; border: 1px solid var(--color-border); border-radius: 24px; background: var(--color-surface-2); }
.cell__copy { position: relative; min-width: 0; max-width: 26rem; overflow-wrap: anywhere; }
.cell h3 { font-size: 1.55rem; margin: 0 0 16px; }
.cell p { margin: 0; color: var(--color-text-soft); }
.cell__img, .feature-still { position: relative; width: 100%; height: auto; max-height: 240px; object-fit: contain; transform: translateZ(46px); transition: transform .5s ease; filter: drop-shadow(0 26px 22px rgb(31 71 51 / 22%)); }
.cell--ink { background: var(--color-forest); border-color: var(--color-forest); color: var(--color-paper); }
.cell--ink p { color: #DDE8DF; }
.cell--sage { background: #DCE9DF; border-color: #C5D8CB; }
.feature-panel.tilt-card .feature-copy { max-width: 26rem; transform-style: preserve-3d; }
.feature-still { max-width: min(100%, 20rem); margin: 24px auto 0; }
@media (min-width: 760px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .cell { grid-template-columns: 47% minmax(0, 1fr); }
  .c1 { grid-column: span 7; grid-row: span 2; min-height: 560px; grid-template-columns: minmax(0, 1fr); }
  .c1 .cell__img { max-height: 300px; }
  .c2, .c3, .c4 { grid-column: span 5; }
  .c2 .cell__copy, .c3 .cell__copy, .c4 .cell__copy { max-width: min(13.2rem, 100%); }
  .c4, .c5 { min-height: 380px; }
  .c5 { grid-column: span 7; }
  .c5 .cell__copy { max-width: min(20rem, 100%); }
}
@media (hover: hover) and (pointer: fine) {
  .tilt-card:hover { border-color: var(--color-sage); box-shadow: 0 30px 50px -30px rgb(31 71 51 / 55%); }
  .tilt-card:hover::before { background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgb(156 195 170 / 34%), transparent 60%); }
  .tilt-card:hover .cell__img, .tilt-card:hover .feature-still { transform: translateZ(80px) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .tilt-card, .tilt-card:hover .cell__img, .tilt-card:hover .feature-still, .cell__img, .feature-still { transform: none; transition: none; }
}