#voc-oa-intro {max-width:1240px;margin:0 auto;padding:0 clamp(14px,3vw,32px);font:16px/1.55 system-ui,sans-serif;color:#1d2724;box-sizing:border-box;}
#voc-oa-intro h2,#voc-oa-intro h3,#voc-oa-intro p {margin:0;}
#voc-oa-intro a {text-decoration:none;}
#voc-oa-intro a:focus-visible,#voc-oa-intro summary:focus-visible {outline:2px solid #99733a;outline-offset:4px;}
#voc-oa-intro .eyebrow {font-size:12px;font-weight:750;letter-spacing:.16em;text-transform:uppercase;}

#voc-oa-intro .hero {position:relative;isolation:isolate;overflow:hidden;display:grid;align-items:end;min-height:clamp(390px,46vw,590px);background:#18241d;color:#fff;border-radius:16px;}
#voc-oa-intro .hero > img {position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 56%;z-index:-2;}
#voc-oa-intro .hero::after {content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(14,23,18,.94),rgba(14,23,18,.72) 38%,rgba(14,23,18,.18) 78%),linear-gradient(0deg,rgba(14,23,18,.45),transparent 65%);}
#voc-oa-intro .hero-content {max-width:700px;padding:clamp(24px,5vw,64px);}
#voc-oa-intro .hero-content .eyebrow {color:#f6d49c;}
#voc-oa-intro .hero-content h2 {font:500 clamp(34px,5.3vw,69px)/1.01 Georgia,serif;letter-spacing:-.045em;color:#fff;margin:14px 0;}
#voc-oa-intro .hero-content > p:last-of-type {max-width:420px;color:#f3f0e9;}
#voc-oa-intro .actions {display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
#voc-oa-intro .actions a {background:#f3d09a;color:#20231d;padding:11px 15px;border:1px solid #f3d09a;border-radius:6px;font-size:14px;font-weight:700;}
#voc-oa-intro .actions a + a {background:#1c271dcc;color:#fff;border-color:#f3e9d2;}
#voc-oa-intro .category-head {margin:clamp(30px,5vw,60px) 0 16px;scroll-margin-top:120px;}
#voc-oa-intro .category-head .eyebrow {color:#71603e;}
#voc-oa-intro .category-head h2 {font-size:clamp(25px,3.5vw,38px);line-height:1.1;margin-top:5px;}
#voc-oa-intro .categories {display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;}
#voc-oa-intro .category {display:block;overflow:hidden;border:1px solid #dce2db;border-radius:10px;background:#f4f6f1;color:#1d2724;}
#voc-oa-intro .category:hover {border-color:#78664a;}
#voc-oa-intro .category img {display:block;width:100%;aspect-ratio:2.15;object-fit:cover;}
#voc-oa-intro .category[href="#voc-oa-inground-lights"] img {object-position:50% 100%;}
#voc-oa-intro .category[href="#voc-oa-spike-lights"] img {object-position:50% 51%;}
#voc-oa-intro .category[href="#voc-oa-outdoor-wall-lights"] img {object-position:50% 25%;}
#voc-oa-intro .category[href="#voc-oa-bollard-lights"] img {object-position:50% 73%;}
#voc-oa-intro .category-body {position:relative;display:grid;padding:12px 28px 12px 12px;}
#voc-oa-intro .category-body small {font-size:11px;color:#58665f;}
#voc-oa-intro .category-body strong {font-size:clamp(13px,1.6vw,18px);line-height:1.25;margin-top:3px;}
#voc-oa-intro .category-body span {position:absolute;right:10px;bottom:10px;color:#78664a;}
@media(max-width:680px) {
  #voc-oa-intro .categories {grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
  #voc-oa-intro .hero {min-height:390px;}
  #voc-oa-intro .hero-content {padding:22px 16px;}
  #voc-oa-intro .hero::after {background:linear-gradient(0deg,#0e1712f5 6%,#0e1712a8 64%,#0e171231);}
  #voc-oa-intro .hero-content h2 br {display:none;}
}