.products-intro{position:relative;isolation:isolate;min-height:100svh;display:flex;align-items:flex-end;overflow:hidden;background:#f3f5f4}
.products-panorama{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;z-index:-2}
.products-intro:after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,#fff0 15%,#ffffff20 32%,#ffffffcc 67%,#fff 100%)}
.products-intro-inner{width:100%;padding:150px 4% clamp(60px,8svh,100px)}
.breadcrumb{display:flex;gap:12px;font-size:12px;margin-bottom:23px}
.breadcrumb a:hover{text-decoration:underline}
.products-intro h1{font-size:clamp(42px,4.7vw,70px);font-weight:300;line-height:1.02;letter-spacing:-.035em;color:#101719;max-width:760px}
.intro-bottom{display:grid;grid-template-columns:18% 19% minmax(0,560px);gap:24px;align-items:start;margin-top:36px}
.intro-bottom p,.service-copy p,.service-note{font-family:Anuphan,sans-serif;font-size:15px;line-height:1.8}
.intro-bottom .section-tag{width:max-content;margin:3px 0 0}
.all-services{display:inline-flex;align-items:center;gap:8px;font-size:13px;padding-top:3px}
.all-services .icon{width:17px;height:17px;transform:rotate(90deg)}
.services-list{padding:26px 2% 68px;max-width:1800px;margin:auto;scroll-margin-top:100px}
.service-row{display:grid;grid-template-columns:33.333% minmax(0,45%) minmax(0,21.667%);border-left:1px solid #e2e5e3;border-right:1px solid #e2e5e3;min-height:clamp(235px,18vw,290px);scroll-margin-top:100px}
.service-row:first-of-type{border-top:1px solid #e2e5e3}
.service-row:last-of-type{border-bottom:1px solid #e2e5e3}
.service-art{background:#f5f5f5;display:flex;justify-content:center;align-items:center;padding:30px 20px;overflow:hidden}
.service-art img{width:46%;max-width:220px;height:115px;object-fit:contain;filter:drop-shadow(0 12px 8px #0000000a);transition:transform .95s var(--ease),filter .95s var(--ease)}
.service-art:hover img,.service-art:focus-visible img{transform:translateY(-4px) scale(1.025)}
.art-floodlight img{width:30%;max-width:140px;height:130px}
.art-streetlight img{transform:scaleX(-1) rotate(-3deg)}
.art-streetlight:is(:hover,:focus-visible) img{transform:translateY(-4px) scale(-1.025,1.025) rotate(-3deg)}
.art-lighting-design img{width:34%;max-width:165px;height:95px}
.service-copy{padding:24px 22px 27px;border-left:1px solid #e2e5e3;border-bottom:1px solid #e2e5e3}
.service-kicker{font-size:10px;letter-spacing:.1em;color:#747e80}
.service-copy h2{font-size:clamp(25px,2.4vw,35px);font-weight:300;letter-spacing:-.02em;margin:9px 0 30px}
.service-copy p{color:#495359;max-width:580px}
.service-link{position:relative;isolation:isolate;border-left:1px solid #e2e5e3;display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;padding:30px 15px;transition:color .65s var(--ease)}
.service-link:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(135deg,var(--lime),var(--green));opacity:0;transition:opacity .8s var(--ease)}
.service-label{display:inline-block;transition:transform .85s var(--ease)}
.service-link .icon{width:18px;height:18px;transition:transform .85s var(--ease)}
.service-link:hover:before,.service-link:focus-visible:before{opacity:1}
.service-link:hover,.service-link:focus-visible{color:#131919}
.service-link:is(:hover,:focus-visible) .service-label{transform:translateX(-3px)}
.service-link:is(:hover,:focus-visible) .icon{transform:translateX(4px)}
.service-row:last-of-type .service-copy,.service-row:last-of-type .service-link{border-bottom:0}
.service-note{font-size:12px;color:#788186;margin-top:24px;max-width:900px}

@media(max-width:1100px){.service-copy p{font-size:14px}.intro-bottom{grid-template-columns:16% 21% minmax(0,1fr)}}
@media(max-width:800px){.products-intro-inner{padding:280px 6% 46px}.products-panorama{object-position:45% top}.products-intro h1{font-size:clamp(40px,7vw,58px)}.intro-bottom{grid-template-columns:1fr 1fr;gap:22px;margin-top:28px}.intro-bottom p{grid-column:1/-1;max-width:590px}.services-list{padding:22px 4% 50px}.service-row{grid-template-columns:36% minmax(0,1fr)}.service-art{grid-row:span 2;padding:18px}.service-art img{height:145px;width:80%}.art-floodlight img{width:62%;height:165px}.art-lighting-design img{width:65%;height:110px}.service-copy{padding:25px 22px 15px;border-bottom:0}.service-copy h2{margin-bottom:15px}.service-link{justify-content:flex-start;padding:12px 22px 25px}.service-copy p{font-size:14px}}
@media(max-width:520px){.products-intro-inner{padding-top:250px}.products-intro h1{font-size:41px}.intro-bottom{gap:18px 8px}.intro-bottom p{font-size:14px}.breadcrumb{font-size:11px;gap:8px}.intro-bottom .section-tag{font-size:10px}.service-row{grid-template-columns:minmax(0,1fr);margin-bottom:20px;border-top:1px solid #e2e5e3;border-bottom:1px solid #e2e5e3}.service-art{grid-row:auto;padding:26px;min-height:225px}.service-art img{height:155px;width:66%}.art-floodlight img{width:40%;height:165px}.art-lighting-design img{width:44%;height:125px}.service-copy,.service-link{border-left:0;border-bottom:0}.service-copy{padding:24px 24px 10px}.service-copy h2{font-size:29px}.service-link{padding:18px 24px 26px}.service-note{font-size:11px}}
/* Keep the quieter image scale at tablet/mobile breakpoints too. */
@media(max-width:800px) and (min-width:521px){.service-art img{width:62%;max-width:180px;height:105px}.art-floodlight img{width:42%;max-width:110px;height:125px}.art-lighting-design img{width:48%;height:80px}}
@media(max-width:520px){.service-art img{width:46%;max-width:180px;height:115px}.art-floodlight img{width:30%;max-width:110px;height:130px}.art-lighting-design img{width:34%;max-width:140px;height:95px}}
/* Keep fixtures legible when their column narrows; desktop sizes stay unchanged. */
@media(min-width:521px) and (max-width:1100px){
  .service-art:is(.art-highbay,.art-streetlight) img{width:88%;max-width:220px;height:145px}
  .service-art.art-floodlight img{width:62%;max-width:145px;height:160px}
}
@media(max-width:800px){
  .service-link{justify-content:center;align-items:center;min-height:64px;padding:20px 22px;line-height:1.4}
}
/* Application models need a larger footprint than the individual fixtures. */
.service-art:is(.art-warehouse,.art-outdoor,.art-roads,.art-other) img{width:82%;max-width:340px;height:205px}
@media(max-width:800px) and (min-width:521px){.service-art:is(.art-warehouse,.art-outdoor,.art-roads,.art-other) img{width:96%;max-width:260px;height:190px}}
@media(max-width:520px){.service-art:is(.art-warehouse,.art-outdoor,.art-roads,.art-other) img{width:86%;max-width:290px;height:200px}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}}