/* Ported from components/ReferencesRail/index.tsx's injected <style>
   string. One deliberate change: .rr-cta uses the site's current gray
   accent (#45454a) instead of the source's leftover #ff2230 red — see
   page-reference.php's header comment. */
.rr-root{position:relative;background:#0a0a0a;padding:150px 0 150px;}
.rr-wrap{max-width:1180px;margin:0 auto;padding:0 40px;}

.rr-h{font-family:var(--font-display);font-size:clamp(34px,4.6vw,58px);font-weight:800;
  letter-spacing:-.035em;line-height:1.02;color:#fff;margin-bottom:20px;}
.rr-dim{color:rgba(255,255,255,.4);}
.rr-intro-p{font-size:clamp(15px,1.2vw,17px);line-height:1.6;color:#b3b3b3;max-width:520px;margin-bottom:64px;}

.rr-grid{column-count:3;column-gap:18px;margin-bottom:56px;}
.rr-item{position:relative;display:block;break-inside:avoid;margin-bottom:18px;
  border-radius:10px;overflow:hidden;}
.rr-item--tall{aspect-ratio:3/4;}
.rr-item--short{aspect-ratio:4/3;}
.rr-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;}
.rr-item:hover .rr-photo{transform:scale(1.05);}
.rr-shade{position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.92) 100%);}
.rr-caption{position:absolute;left:0;right:0;bottom:0;padding:20px;}
.rr-sample{display:inline-block;font-size:.58rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.55);margin-bottom:8px;}
.rr-client{font-family:var(--font-display);font-size:1.05rem;font-weight:700;color:#fff;
  line-height:1.2;margin-bottom:3px;}
.rr-loc{font-size:.78rem;color:rgba(255,255,255,.55);margin-bottom:6px;}
.rr-tag{font-size:.72rem;font-weight:600;color:rgba(255,255,255,.7);}

.rr-actions{display:flex;flex-wrap:wrap;gap:16px;}
.rr-cta{display:inline-flex;align-items:center;gap:9px;font-size:.85rem;font-weight:700;
  text-decoration:none;border-radius:100px;padding:14px 28px;transition:all .25s;
  color:#fff;background:#45454a;}
.rr-cta:hover{box-shadow:0 0 36px rgba(255,255,255,.15);transform:translateY(-2px);}

@media(max-width:900px){
  .rr-grid{column-count:2;}
}
@media(max-width:560px){
  .rr-root{padding:100px 0 110px;}
  .rr-wrap{padding:0 22px;}
  .rr-grid{column-count:1;}
  .rr-h{margin-bottom:16px;}
  .rr-intro-p{margin-bottom:40px;}
}