:root { --just-red:#a6002d; }
* { box-sizing: border-box; }
body { font-family: 'Barlow Condensed', 'Arial Narrow', Arial, sans-serif; }
.text-just-red { color: var(--just-red); }
.bg-just-red { background-color: var(--just-red); }
.border-just-red { border-color: var(--just-red); }
.section-title { color: var(--just-red); font-size: clamp(2rem, 3.1vw, 2.8rem); line-height: .98; font-weight: 800; font-style: italic; }
.hero { min-height: 850px; background: #f9f9f9; }
.hero-bg { background-image: linear-gradient(to bottom, rgba(255,255,255,.45), rgba(255,255,255,.88) 72%, rgba(255,255,255,1)), url('people-image.png'); background-size: cover; background-position: center top; opacity: .72; }
.hex-fade { pointer-events:none; background-image: radial-gradient(circle at center, rgba(150,150,150,.34) 0 18%, transparent 20%); background-size: 20px 20px; mask-image: linear-gradient(to bottom, transparent 0, black 19%, black 58%, transparent 86%); opacity:.55; }
.pattern-section { background: linear-gradient(90deg, rgba(170,170,170,.2), transparent 20%, transparent 80%, rgba(170,170,170,.2)), #fff; }
.pattern-section:before, .cta:before { content:""; position:absolute; inset:0; pointer-events:none; background-image: radial-gradient(circle, rgba(120,120,120,.25) 0 18%, transparent 20%); background-size: 13px 13px; opacity:.45; mask-image: linear-gradient(90deg, black, transparent 23%, transparent 77%, black); }
table { box-shadow:none; }
tbody td { border: 2px solid #fff; padding: 20px 20px; vertical-align: middle; }
tbody td:first-child { background: var(--just-red); color:white; font-weight:800; font-size:18px; line-height:1.05; }
tbody td:last-child { background:#dedfe0; color:#626467; font-style:italic; font-size:18px; line-height:1.45; font-weight:500; }
.cta { background:#fff; }
.hex-bottom { pointer-events:none; background-image: radial-gradient(circle at center, rgba(155,155,155,.28) 0 18%, transparent 20%); background-size: 18px 18px; mask-image: linear-gradient(to top, black 0, black 35%, transparent 72%); opacity:.85; }
.footer-dots { background-image: radial-gradient(circle, rgba(255,255,255,.45) 0 18%, transparent 20%); background-size: 18px 18px; }
.dash { font-weight:800; }
@media (max-width: 767px){
  .hero { min-height: auto; }
  .hero-bg { height: 390px; }
  .hex-fade { background-size: 14px 14px; }
  tbody td { padding: 16px; }
  tbody td:first-child, tbody td:last-child { font-size:16px; }
}
@media (max-width: 520px){
  header .tracking-\[0\.28em\] { letter-spacing:.16em; }
  header .tracking-\[0\.24em\] { letter-spacing:.16em; }
}
