/* Mobile and tablet: every section is a card of one deck lying on the table.
   Without JS the cards simply follow each other; deck.js adds stacking and the receding effect. */
.deck-shade { display: none; }
@media (max-width: 999px) {
  body { background: var(--table); }
  .deck-table { display: flex; flex-direction: column; gap: 10px; padding-inline: 8px; }
  .deck-table > section { position: relative; width: auto; max-width: none; margin: 0; padding: 30px 20px 32px; border: 0; border-radius: 30px; background: var(--paper); box-shadow: 0 -16px 34px -24px var(--shadow); scroll-margin-top: 16px; }
  .deck-table > section > .wrap { width: 100%; padding-block: 0; }
  /* Card faces: neighbouring cards never share a colour, so the deck reads at a glance. */
  .deck-table > .hero { padding: 22px 16px 6px; background: var(--surface); }
  .deck-table > .approach-section { padding-bottom: 0; background: var(--deep); }
  .deck-table > .team-section, .deck-table > .process-section { background: var(--surface); }
  .deck-table > .properties-section { background: var(--stone); }
  .deck-table > .case-section { background: var(--accent); color: var(--on-accent); }
  .hero .hero-copy { padding-block: 6px 26px; }
  .hero .hero-photo { border-radius: 22px; }
  .hero .hero-bottom { padding-block: 18px 12px; border-bottom: 0; }
  .case-section > div > p:not(.eyebrow) { color: var(--on-accent); }
  .case-section .case-city { background: var(--on-accent); color: var(--accent); }
  .case-section .text-link:hover { color: inherit; opacity: .75; }
  .feedback-section .contact-form-card { margin-top: 20px; }
  /* Stacking: each card sticks and the next one slides over it. */
  .deck .deck-table > section { position: sticky; top: var(--deck-top, 10px); transform-origin: 50% var(--deck-origin, 0px); }
  .deck .deck-shade { display: block; position: absolute; inset: 0; z-index: 2; border-radius: inherit; background: var(--shade); opacity: 0; pointer-events: none; }
}
@media (min-width: 600px) and (max-width: 999px) {
  .deck-table { gap: 14px; padding-inline: 14px; }
  .deck-table > section { padding: 44px 36px; border-radius: 36px; }
  .deck-table > .hero { padding: 30px 24px 10px; }
  .deck-table > .approach-section { padding-bottom: 0; }
}
@media (max-width: 374px) {
  .deck-table { padding-inline: 6px; }
  .deck-table > section { padding-inline: 16px; border-radius: 26px; }
  .deck-table > .hero { padding-inline: 12px; }
}