@layer velora.components {
  .work-sectors { padding: clamp(5rem, 9vw, 9rem) 0; background: var(--surface); }
  .work-sectors__lead { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 3fr); gap: clamp(1.5rem, 4vw, 5rem); align-items: end; margin-bottom: clamp(3rem, 5vw, 5rem); }
  .work-sectors__lead h2 { margin: 0; font: 550 clamp(3rem, 5.5vw, 6rem)/.95 var(--display); letter-spacing: -.07em; }
  .work-sectors__lead h2 em { color: var(--red); font-style: normal; }
  .work-sectors__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .work-sectors__grid > * { min-height: 240px; display: flex; flex-direction: column; gap: 1.5rem; padding: clamp(1rem, 2vw, 2rem); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: background .4s ease, color .4s ease; }
  .work-sectors__grid > a:hover, .work-sectors__grid > a:focus-visible { background: var(--red); color: #fff; }
  .work-sectors__grid span, .work-sectors__grid small { font: 700 .6rem/1.3 var(--mono); letter-spacing: .09em; }
  .work-sectors__grid span { color: var(--red); }
  .work-sectors__grid > a:is(:hover, :focus-visible) span { color: #fff; }
  .work-sectors__grid strong { max-width: 13ch; margin-block: auto; font: 550 clamp(1.7rem, 2.4vw, 2.8rem)/1 var(--display); letter-spacing: -.055em; }
  .work-sectors__grid small { opacity: .72; }
}
@layer velora.overrides {
  @media (max-width: 1050px) { .work-sectors__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
  @media (max-width: 750px) {
    .work-sectors__lead { display: block; }
    .work-sectors__lead h2 { margin-top: 2rem; }
    .work-sectors__grid > * { min-height: 205px; }
  }
  @media (max-width: 520px) {
    .work-sectors__grid { grid-template-columns: 1fr; }
    .work-sectors__grid > * { min-height: 150px; }
  }
  @media (prefers-reduced-motion: reduce) { .work-sectors__grid > * { transition: none; } }
}