.page-hero { position: relative; overflow: hidden; background: #111718; }
.page-hero::after { content: ""; position: absolute; right: -8%; top: 18%; width: 35vw; height: 35vw; border: 1px solid rgba(217,161,91,.15); border-radius: 50%; pointer-events: none; }
.page-hero .wrap { position: relative; z-index: 1; }
.page-hero .display { max-width: 900px; text-wrap: balance; }
.case-intro { max-width: 850px; margin: 0 0 27px; color: #4d514e; font-size: clamp(17px, 1.8vw, 20px); line-height: 1.55; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.case-card { overflow: hidden; background: #f8f6f2; border: 1px solid rgba(12,16,17,.09); transition: transform .25s ease, border-color .25s ease; }
.case-card:hover { transform: translateY(-4px); border-color: rgba(150,97,37,.45); }
.case-card:only-child { grid-column: 2; }
.case-card a { display: flex; flex-direction: column; height: 100%; }
.case-card img { display: block; width: 100%; height: clamp(190px, 20vw, 240px); object-fit: cover; object-position: center 42%; background: #d8d2c8; }
.case-card__body { display: flex; flex: 1; flex-direction: column; padding: 20px; }
.case-card h2 { margin: 0 0 10px; font: 500 clamp(23px, 2vw, 29px)/1.15 "Playfair Display", Georgia, serif; letter-spacing: -.035em; text-wrap: balance; }
.case-card p:not(.eyebrow) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; margin: 0 0 15px; color: #4d514e; font-size: 15px; line-height: 1.5; }
.case-more { display: inline-flex; align-items: center; align-self: flex-start; margin-top: auto; padding: 10px 0 6px; border-bottom: 2px solid #a56f30; color: #754a1c; font-size: 14px; font-weight: 700; }
.case-detail { display: flex; flex-direction: column; width: min(100% - 48px, 1080px); }
.case-photos { order: -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-bottom: 48px; }
.case-photos figure { margin: 0; min-width: 0; background: #e2dcd3; }
.case-photos figure:first-child { grid-column: 1 / -1; }
.case-photos img { display: block; width: 100%; height: min(34vw, 340px); object-fit: contain; background: #d8d2c8; }
.case-photos figure:first-child img { height: min(50vw, 500px); }
.case-photos figcaption { padding: 13px 17px; color: #4e524f; font-size: 14px; line-height: 1.5; }
.case-copy { width: min(100%, 760px); margin: 0 auto; }
.case-copy > .eyebrow { margin-bottom: 19px; }
.case-lead { margin: 0 0 46px; color: #202625 !important; font: 500 clamp(27px, 3.3vw, 42px)/1.3 "Playfair Display", Georgia, serif; letter-spacing: -.025em; text-wrap: pretty; }
.case-copy h2 { margin: 45px 0 16px; padding-top: 25px; border-top: 1px solid var(--dark-line); font: 500 clamp(30px, 3.4vw, 44px)/1.13 "Playfair Display", Georgia, serif; letter-spacing: -.04em; text-wrap: balance; }
.case-copy h2:first-of-type { margin-top: 0; }
.case-copy p:not(.eyebrow):not(.case-lead) { color: #464b48; font-size: 18px; line-height: 1.75; }
.case-copy .case-next { margin-top: 54px; padding: 25px 27px; border-left: 3px solid #bd8747; background: #e9e3db; color: #252b28 !important; font-weight: 600; }
.case-copy > .button { min-height: 54px; padding-inline: 24px; }
.case-back { width: min(100% - 48px, 1080px); margin-top: 65px; padding-top: 22px; border-top: 1px solid var(--dark-line); }
.case-back a { display: inline-flex; min-height: 44px; align-items: center; border-bottom: 2px solid #a56f30; color: #754a1c; font-weight: 700; }
@media (max-width: 900px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .case-card:only-child { grid-column: 1 / -1; width: min(100%, 430px); justify-self: center; }
  .case-photos { margin-bottom: 48px; }
}
@media (max-width: 560px) {
  .case-grid { grid-template-columns: 1fr; }
  .case-card:only-child { grid-column: 1; width: 100%; }
  .case-card img { height: clamp(175px, 54vw, 220px); }
  .case-card__body { padding: 18px; }
  .case-detail, .case-back { width: min(100% - 36px, 1080px); }
  .case-photos { grid-template-columns: 1fr; gap: 15px; margin-bottom: 39px; }
  .case-photos figure:first-child { grid-column: 1; }
  .case-photos img, .case-photos figure:first-child img { height: min(78vw, 330px); }
  .case-copy .case-next { padding: 21px; }
}
.case-demo-notice { margin: 24px 0 0; padding: 18px 22px; border: 1px solid #c99a5b; color: #f0dfc2; background: #292218; font-weight: 600; }