.home-page .hm-ref-services { padding: 0; background: #fdfbf7; }
.hm-ref-canvas { position: relative; width: min(100%, 1320px); margin: 0 auto; aspect-ratio: 1140 / 1024; container-type: inline-size; background: url('../assets/img/services-reference-planes.svg?v=20261031-home15408b') center / 100% 100% no-repeat; }
.hm-ref-heading { position: absolute; top: 6.1%; left: 3%; right: 3%; text-align: center; }
.hm-ref-kicker { margin: 0 0 1.5cqw; color: #b44336; font: 2.05cqw/1.5 var(--font-serif); }
.hm-ref-heading h2 { margin: 0 0 1.5cqw; color: #15408b; font: 600 4.6cqw/1.35 var(--font-serif); letter-spacing: -.02em; }
.hm-ref-subtitle { margin: 0; color: #5d6268; font: 1.94cqw/1.7 var(--font-serif); }
.hm-ref-panel { position: absolute; top: 33%; height: 46%; width: 25.5%; color: #15408b; }
.hm-ref-panel--one { left: 7.1%; }
.hm-ref-panel--two { left: 39.56%; width: 24.4%; }
.hm-ref-panel--three { left: 72.2%; width: 23%; color: #fffdf8; }
.hm-ref-number { display: block; color: #b18d4d; font: 2.8cqw/1.2 var(--font-accent); }
.hm-ref-panel h3 { position: absolute; top: 7.1cqw; left: 0; margin: 0; color: inherit; font: 600 3.55cqw/1.45 var(--font-serif); letter-spacing: -.035em; white-space: nowrap; }
.hm-ref-panel p { position: absolute; top: 19.15cqw; left: 0; width: 100%; margin: 0; color: #53585d; font: 1.94cqw/1.85 var(--font-serif); text-wrap: pretty; }
.hm-ref-panel--three p { color: #d8dce2; }
.hm-ref-mobile-rule, .hm-ref-mobile-knot { display: none; }
@media (max-width: 760px) {
  .home-page .hm-ref-services { padding: 32px 18px 42px; }
  .hm-ref-canvas { width: 100%; max-width: 520px; aspect-ratio: auto; background: none; }
  .hm-ref-heading { position: static; margin: 0 auto 26px; }
  .hm-ref-kicker { margin-bottom: 10px; font-size: 16px; }
  .hm-ref-heading h2 { max-width: 340px; margin: 0 auto 12px; font-size: 30px; line-height: 1.4; text-wrap: balance; }
  .hm-ref-subtitle { font-size: 14px; line-height: 1.8; }
  .hm-ref-panel { position: relative; top: auto; left: auto; width: 100%; height: auto; margin: 0 0 14px; padding: 22px 26px 25px; border-radius: 2px; background: #fffdf8; box-shadow: -2px 6px 12px rgba(70,58,39,.1); }
  .hm-ref-panel--two { background: linear-gradient(110deg,#eae6de,#e2dcd2); }
  .hm-ref-panel--three { background: linear-gradient(115deg,#15408b,#15408b); }
  .hm-ref-number { font-size: 23px; }
  .hm-ref-number::after { content: ''; display: block; width: 31px; height: 1px; margin: 8px 0 16px; background: #b28d48; }
  .hm-ref-panel h3 { position: static; font-size: 24px; line-height: 1.5; letter-spacing: 0; white-space: normal; margin-bottom: 15px; }
  .hm-ref-panel h3 br { display: none; }
  .hm-ref-panel p { position: static; font-size: 15px; line-height: 1.9; margin: 0 0 22px; }
  .hm-ref-mobile-rule { display: block; height: 1px; background: #b28d48; }
  .hm-ref-mobile-knot { display: block; position: absolute; width: 25px; height: 25px; right: 9px; bottom: 3px; color: #c8a15b; }
}