.case-index-page { margin: 0; overflow-x: hidden; color: var(--text-1, #3e3131); background: #fff; font-family: Inter, Arial, sans-serif; }
.case-index-frame { max-width: 1440px; margin-inline: auto; overflow: visible; }
.case-index-header { position: relative; z-index: 20; height: 145px; }
.case-search { display: flex; width: min(570px, 100%); height: 40px; margin: 0 0 32px auto; }
.case-search input { min-width: 0; width: 100%; padding: 5px 14px; border: 1px solid #d3d3d3; border-radius: 5px 0 0 5px; background: var(--panel); color: var(--text-1); font: inherit; }
.case-search button { display: grid; place-items: center; flex: 0 0 84px; border: 1px solid #d3d3d3; border-radius: 0 5px 5px 0; margin-left: -1px; background: var(--bg-color); cursor: pointer; }
.case-search button img { width: 28px; height: 28px; }
.case-search :focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }
.case-search input:focus { position: relative; z-index: 1; outline: 2px solid var(--primary); outline-offset: -2px; }
.case-visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.case-index-list .case-card[hidden], .case-empty[hidden] { display: none; }
.case-empty { margin: 0; font-size: 20px; }
.case-index-frame::before { content: ""; position: absolute; top: 0; left: 50%; width: 100vw; height: 413px; transform: translateX(-50%); border-bottom: 1px solid #ffddd5; background-color: #fffdfb; background-image: linear-gradient(#ffddd5 1px, transparent 1px), linear-gradient(90deg, #ffddd5 1px, transparent 1px); background-position: -1px -1px; background-size: 69px 69px; }
.case-index-intro { position: relative; min-height: 268px; padding: 54px 126px 60px 131px; }
.case-index-intro h1 { margin: 0 0 11px 301px; color: var(--primary); font-size: 50.7px; font-weight: 700; line-height: 61px; }
.case-index-intro p { margin: 0; font-size: 25px; line-height: 30px; }
.case-search-container { padding: 62px 104px 0; }
.case-index-list { padding: 0 104px 96px; }
.case-index-list .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 69px; margin: 0; }
.case-index-page .footer-blurb { line-height: 1.3; }
.case-index-page .footer { isolation: isolate; background: transparent; }
.case-index-page .footer::before { content: ""; position: absolute; inset-block: 0; left: 50%; z-index: -1; width: 100vw; transform: translateX(-50%); background-color: #fffdfb; background-image: linear-gradient(#ffddd5 1px, transparent 1px), linear-gradient(90deg, #ffddd5 1px, transparent 1px); background-position: 16px 1px; background-size: 83px 83px; }
.case-index-page .footer .copyright { left: 50%; width: 100vw; transform: translateX(-50%); }

@media (min-width: 768px) and (max-width: 1439px) {
  .case-index-page, .case-index-frame { min-width: 0; }
  .case-index-header .top-logo { left: 5%; width: 24%; }
  .case-index-header .top-nav { left: auto; right: 5%; width: 48%; }
  .case-index-intro { padding-inline: 7%; }
  .case-index-intro h1 { margin-left: 0; text-align: center; }
  .case-search-container, .case-index-list { padding-inline: 6%; }
  .case-index-list .case-grid { gap: 32px; }
  .case-index-list .case-card p { font-size: 20px; }
  .case-index-page .footer { min-width: 0; }
  .case-index-page .footer::before { background-position: 8px 0; background-size: 68px 68px; }
}

@media (min-width: 1024px) {
  .case-search { width: 283px; }
  .case-search input { flex: 0 0 200px; width: 200px; }
}

@media (max-width: 1023px) {
  .case-search { margin-inline: auto; }
}

@media (max-width: 767px) {
  .case-index-page, .case-index-frame { min-width: 0; width: 100%; }
  .case-index-header { height: 80px; }
  .case-index-hero { position: relative; background-color: #fffdfb; background-image: linear-gradient(#ffddd5 1px, transparent 1px), linear-gradient(90deg, #ffddd5 1px, transparent 1px); background-position: -1px -81px; background-size: 38px 38px; border-bottom: 1px solid #ffddd5; }
  .case-search-container { padding: 0 25px 32px; }
  .case-search { margin-bottom: 0; }
  .case-search button { flex-basis: 64px; }
  .case-index-frame::before { height: 80px; border-bottom: 0; background-size: 38px 38px; }
  .case-index-intro { min-height: 0; padding: 24px 25px; }
  .case-index-intro h1 { margin: 0 0 22px; font-size: 38px; line-height: 1.15; text-align: center; }
  .case-index-intro p { font-size: 16px; line-height: 1.55; }
  .case-index-list { padding: 40px 25px 60px; }
  .case-index-list .case-grid { display: grid; grid-template-columns: 1fr; gap: 28px; }
  .case-index-list .case-slide { display: contents; }
  .case-index-list .case-card { margin: 0; }
  .case-index-list .case-card p { font-size: 16px; line-height: 1.4; }
  .case-index-list .case-card .portfolio-button { min-height: 44px; padding-inline: 18px; font-size: 16px; }
  .case-index-page .footer { min-width: 0; }
  .case-index-page .footer::before { background-position: -1px -1px; background-size: 42px 42px; }
}