/* One shared glass surface groups a project, rather than every piece of text. */
:root {
  --glass-fill: linear-gradient(135deg, #fffffff5, #ffffffb8 52%, #f6fbffb8);
  --glass-shadow: inset 0 1px 0 #fff, inset 0 -1px 0 #b6d2f552,
    0 18px 48px -24px #255aa452, 0 0 0 1px #b6cfea80;
}
body {
  background: radial-gradient(ellipse 90% 650px at 50% 0, #fff, transparent), #edf5ff;
}
.header {
  background: #ffffffdb;
  -webkit-backdrop-filter: blur(18px) saturate(125%);
  backdrop-filter: blur(18px) saturate(125%);
}
.project-row,
.story-demo,
.case-system,
.screenshots {
  background: var(--glass-fill);
  border: 1px solid #fff;
  border-radius: 32px;
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
  backdrop-filter: blur(14px) saturate(115%);
}
.project-row,
.project-row.reverse {
  padding: clamp(24px, 3.5vw, 48px);
  margin-bottom: 40px;
  gap: clamp(28px, 4vw, 64px);
}
.project-info { min-width: 0; }
.project-info p { max-width: 42ch; }
.project-number {
  display: inline-block;
  margin-right: 4px;
  color: #215eb9;
  font-variant-numeric: tabular-nums;
  font-size: 18px;
  font-weight: 550;
  letter-spacing: -.04em;
}
.project-type { color: #455c7a; }
.pill,
.system-modules > span,
.wip {
  border: 1px solid #ffffffed;
  border-radius: 999px;
  background: linear-gradient(145deg, #fffffff0, #e4efffb3);
  box-shadow: inset 0 1px 0 #fff, 0 2px 6px #335f9810;
  color: #36547a;
  padding: 7px 13px;
  font-size: 11px;
  line-height: 1.5;
  white-space: normal;
}
.tags { gap: 8px; }
.system-modules { flex-wrap: wrap; gap: 8px; }
.system-modules > span { font-size: 10px; padding: 6px 11px; }
.case-lead { display: block; margin-top: 28px; }
.case-lead p { max-width: 70ch; }
.case-lead .tags { max-width: none; justify-content: flex-start; margin: 22px 0 0; }
.demo,
.system-window { border-radius: 24px; }
.button,
.loyalty-action,
.nav-cta { border-radius: 999px; }
.nav-cta {
  padding: 10px 18px;
  border: 1px solid #d5e3f5;
  background: linear-gradient(145deg, #fff, #eff6ffcc);
  box-shadow: inset 0 1px 0 #fff;
}
.project-visual,
.story-visual,
.case-system .system-visual {
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.project-row .demo,
.story-demo .demo,
.case-system .system-window {
  box-shadow: 0 18px 38px -28px #245a9f66;
}
.case-link { width: fit-content; }
.case-link > span {
  background: #ffffffc9;
  border: 1px solid #c7dafa;
  box-shadow: inset 0 1px 0 #fff, 0 4px 12px #1d63be0a;
}
.story-demo,
.case-system,
.screenshots {
  padding: clamp(28px, 3.6vw, 48px);
  margin-bottom: 56px;
}
.story-demo,
.case-system { gap: clamp(28px, 4vw, 64px); }
.case-system { margin-top: 56px; }
.screenshots-grid,
.screenshots-grid.phones,
.screenshots-grid.desktop,
.screenshots-grid.mixed {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 0 0;
}
.screenshots-grid.two-phones { padding-inline: 10%; }
.case-nav {
  padding: 10px 18px;
  gap: 8px 18px;
  border: 1px solid #dbe7f7;
  border-radius: 20px;
  background: #f4f8ffcf;
  box-shadow: inset 0 1px 0 #fff;
}
.case-nav a {
  padding-inline: 12px;
  border-radius: 12px;
  transition: background .2s;
}
.case-nav a:hover { background: #fff; }
.scope { padding-top: 0; }
@media (min-width: 701px) and (max-width: 1023px) {
  .project-info { column-gap: 26px; }
  .project-info h3 { font-size: 32px; }
}
@media (max-width: 700px) {
  .project-row,
  .project-row.reverse,
  .story-demo,
  .case-system,
  .screenshots {
    border-radius: 24px;
    padding: 22px 14px;
    margin-bottom: 28px;
    gap: 26px;
  }
  .project-info,
  .story-text,
  .screenshots-heading { padding-inline: 6px; }
  .project-info h3 { font-size: clamp(28px, 7.8vw, 36px); }
  .project-row .project-type { gap: 8px; }
  .project-number { font-size: 17px; }
  .pill { font-size: 11px; padding: 7px 11px; }
  .case-lead .tags { margin-top: 18px; }
  .case-system { margin-top: 28px; }
  .screenshots-grid.phones { padding: 8px 6px 16px; scroll-padding: 6px; }
  .screenshots-grid.two-phones { padding-inline: 6px; }
  .screenshots-heading h2 { font-size: 29px; }
  .case-nav { padding: 8px; gap: 2px 6px; }
  .case-nav a { padding-inline: 8px; }
  .project-row .pet-card { width: 48%; }
}
/* Opaque fallback retains boundaries when blur/transparency is unavailable. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .header, .project-row, .story-demo, .case-system, .screenshots { background: #f7faff; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .header, .project-row, .story-demo, .case-system, .screenshots, .case-nav,
  .pill, .system-modules > span, .wip {
    background: #fff;
    border-color: #8ba5c5;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .case-nav a { transition: none; }
}