/* One reference at a time: description on the left, supporting attestation on the right. */
.reference-grid { position: relative; display: block; min-height: 610px; }
.reference-card,
.reference-card:first-child { position: absolute; inset: 0; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(300px, .92fr); gap: 54px; align-items: start; padding: 38px; opacity: 0; visibility: hidden; transform: translateX(18px); transition: opacity .5s ease, transform .5s ease, visibility .5s; pointer-events: none; }
.reference-card.is-active { opacity: 1; visibility: visible; transform: translateX(0); pointer-events: auto; }
.reference-card img,
.reference-card:first-child img { width: 100%; height: 525px; object-fit: contain; object-position: center top; border: 1px solid #d9dee8; background: #fff; }
.reference-card h3 { font-size: clamp(28px, 3vw, 43px); line-height: 1.05; margin-bottom: 18px; }
.reference-card > div > p:not(.reference-tag) { font-size: 15px; line-height: 1.68; }
.reference-card h4 { margin-top: 22px; font-size: 13px; text-transform: uppercase; letter-spacing: .08em; }
.reference-card details summary { margin-top: 18px; padding: 12px 0; border-top: 1px solid #e3e6ed; }
.reference-controls { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 28px; }
.reference-controls button { display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 14px; border: 1px solid #cfd5df; border-radius: 50%; background: #fff; color: #20245b; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; transition: background .2s ease, color .2s ease, border-color .2s ease; }
.reference-controls button:hover { background: #3030c9; color: #fff; border-color: #3030c9; }
.reference-controls .reference-pause { width: auto; border-radius: 24px; font-size: 12px; }
.reference-progress { min-width: 80px; color: #626a79; font-size: 12px; font-weight: 700; text-align: center; }
@media(max-width:900px){.reference-grid{min-height:820px}.reference-card,.reference-card:first-child{grid-template-columns:1fr;gap:25px;padding:26px}.reference-card img,.reference-card:first-child img{height:300px;grid-row:1}.reference-card > div{grid-row:2}}@media(max-width:560px){.reference-grid{min-height:1010px}.reference-card,.reference-card:first-child{padding:20px}.reference-card img,.reference-card:first-child img{height:245px}.reference-card h3{font-size:30px}}
