@layer layout {
  .industrial-supply-feature { background:#f5f5f7; }
  .supply-feature-grid { display:grid; grid-template-columns:.9fr 1.1fr; align-items:center; gap:55px; }
  .supply-feature-copy .eyebrow { color:var(--blue); font-size:.75rem; letter-spacing:.045em; margin-bottom:22px; }
  .supply-feature-copy h2 { font-size:clamp(2.3rem,3.8vw,3.15rem); line-height:1.05; letter-spacing:-.045em; max-width:470px; text-wrap:balance; }
  .supply-feature-copy>p:not(.eyebrow) { font-size:1rem; line-height:1.6; color:var(--muted); max-width:410px; margin-block:24px 28px; }
  .supply-feature-copy .button { gap:14px; }
  .supply-feature-copy .button svg { width:20px; height:20px; }
  .supply-feature-media { position:relative; border-radius:48px; overflow:hidden; background:#e1e4e7; }
  .supply-feature-media img { width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
  .supply-feature-media figcaption { position:absolute; bottom:15px; right:18px; padding:5px 10px; color:#fff; background:#1d1d1fbf; border-radius:999px; font-size:.6rem; letter-spacing:.015em; }
  .supply-category-links { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-top:40px; }
  .supply-category-link { display:flex; flex-direction:column; justify-content:space-between; border-radius:26px; padding:21px 22px 20px; background:#fff; }
  .supply-category-image { display:grid; place-items:center; height:135px; margin-bottom:18px; }
  .supply-category-image img { width:145px; height:125px; object-fit:contain; transition:transform 350ms; }
  .supply-category-text { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .supply-category-text strong { display:block; font-size:.98rem; font-weight:600; letter-spacing:-.025em; line-height:1.3; }
  .supply-category-text small { display:block; color:var(--muted); font-size:.67rem; margin-top:6px; line-height:1.4; }
  .supply-category-arrow { width:36px; height:36px; flex-shrink:0; display:grid; place-items:center; border-radius:50%; background:var(--surface); transition:background 200ms,color 200ms; }
  .supply-category-arrow svg { width:18px; height:18px; }
}
@layer components {
  .supply-category-link:focus-visible .supply-category-arrow { background:var(--blue); color:#fff; }
  @media(hover:hover) { .supply-category-link:hover .supply-category-image img { transform:translateY(-4px) scale(1.025); } .supply-category-link:hover .supply-category-arrow { background:var(--blue); color:#fff; } }
}
@layer responsive {
  @media(max-width:1050px) { .supply-feature-grid { gap:35px; grid-template-columns:1fr 1fr; } .supply-category-link { padding-inline:18px; } .supply-category-text strong { font-size:.9rem; } }
  @media(max-width:800px) { .supply-feature-grid { grid-template-columns:1fr; gap:30px; } .supply-feature-copy { text-align:center; } .supply-feature-copy h2,.supply-feature-copy>p:not(.eyebrow) { margin-inline:auto; } .supply-feature-copy h2 { max-width:600px; } .supply-feature-copy>p:not(.eyebrow) { max-width:550px; } .supply-feature-media { max-width:650px; width:100%; margin:auto; border-radius:40px; } .supply-category-links { grid-template-columns:repeat(2,minmax(0,1fr)); margin-top:28px; } }
  @media(max-width:600px) { .supply-feature-copy h2 { font-size:2.35rem; max-width:370px; } .supply-feature-copy .eyebrow { font-size:.7rem; margin-bottom:18px; } .supply-feature-copy>p:not(.eyebrow) { font-size:.96rem; margin-block:20px 23px; } .supply-feature-media { border-radius:30px; } .supply-feature-media figcaption { bottom:10px; right:11px; font-size:.56rem; padding:4px 8px; } .supply-category-links { gap:12px; } .supply-category-link { border-radius:23px; padding:15px 14px 17px; } .supply-category-image { height:110px; margin-bottom:13px; } .supply-category-image img { width:120px; height:100px; } .supply-category-text { gap:7px; align-items:start; } .supply-category-text strong { font-size:.85rem; } .supply-category-text small { font-size:.6rem; } .supply-category-arrow { width:29px; height:29px; } .supply-category-arrow svg { width:16px; height:16px; } }
  @media(prefers-reduced-motion:reduce) { .supply-category-image img,.supply-category-arrow { transition:none; } }
}