*{box-sizing:border-box;margin:0;padding:0}
:root{--navy:#16161f;--ink:#1c1c1c;--mut:#6c6c6c;--rule:#e6e6e6;--bg:#fff;--hdr:62px}
html{scroll-behavior:smooth}
body{font-family:'Helvetica Neue',Arial,sans-serif;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;line-height:1.62}
a{color:inherit;text-decoration:none}
img{border:0;display:block}
.wrap{width:100%;max-width:none;margin:0 auto;padding:0 clamp(16px,3vw,52px)}
.read{width:100%;max-width:none;margin:0 auto;padding:0 clamp(16px,3vw,52px)}
.read .cs,.read .phead{max-width:860px;margin-left:auto;margin-right:auto}
.media{width:100%;max-width:none;margin:0 auto;padding:0 clamp(16px,3vw,52px)}
header.top{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 26px;border-bottom:1px solid var(--rule);position:sticky;top:0;background:rgba(255,255,255,.93);backdrop-filter:blur(6px);z-index:20;height:var(--hdr)}
.brand{font-family:'Century Gothic','Jost','Helvetica Neue',Arial,sans-serif;font-weight:400;letter-spacing:.2em;color:var(--navy);font-size:13px}
.nav{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.hero{padding:84px 0 30px;text-align:center}
.hero h1{font-family:'Century Gothic','Jost','Helvetica Neue',Arial,sans-serif;font-size:clamp(26px,5vw,40px);font-weight:300;letter-spacing:.26em;color:var(--navy)}
.hero .kick{margin-top:16px;letter-spacing:.24em;font-size:11.5px;font-weight:700;color:var(--navy)}
.hero p{max-width:680px;margin:20px auto 0;color:#333;font-size:15px}
.rule{height:1px;background:var(--rule);margin:26px auto;max-width:120px}
.eng{padding:40px 0 6px}
.eng .label{letter-spacing:.22em;font-size:11.5px;font-weight:700;text-transform:uppercase;color:var(--navy)}
.eng p{margin-top:14px;font-size:14px;color:#3a3a3a;max-width:860px}
.features{padding:18px 0 6px}
.feature{display:block;margin:0 0 48px}
.feature .img{width:100%;aspect-ratio:16/10;overflow:hidden;background:#f2f2f2}
.feature .img img,.feature .img video{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.feature:hover .img img{transform:scale(1.03)}
.feature h3{color:var(--navy);font-size:22px;font-weight:700;margin-top:16px}
.feature .meta{margin-top:5px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.brandhead{padding:34px 0 0;text-align:center}
.brandhead .bt{font-size:clamp(22px,4vw,30px);color:var(--navy);font-weight:700;margin-top:8px}
.brandhead .bm{margin-top:10px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.gstack{padding:24px 0 6px}
.gitem{margin:0 0 20px}
.gitem img,.gitem video{width:100%;height:auto;display:block;background:#f2f2f2}
footer{margin-top:0;border-top:1px solid var(--rule);padding:26px 0 46px;text-align:center;font-size:11.5px;letter-spacing:.05em;color:var(--mut)}
/* lutron case study */
.phead{padding:56px 0 6px}
.back{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--navy);margin-bottom:18px}
.phead h2{font-size:clamp(22px,4vw,32px);color:var(--navy);font-weight:700;line-height:1.18}
.phead .meta{margin-top:12px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.phead .desc{margin-top:18px;color:#333;font-size:15px;max-width:820px}
.vidwrap{margin:26px 0 6px}
.vidwrap video{width:100%;height:auto;display:block;background:#000}
.cs{padding:8px 0 0}
.cs h3{font-size:20px;color:var(--navy);font-weight:700;margin:30px 0 12px}
.cs p{font-size:15.5px;color:#262626;margin:0 0 18px}
.cs .em{font-style:italic}
.vidgrid-wrap{max-width:1100px;margin:48px auto 8px;padding:0 clamp(16px,4vw,40px)}
.vghead{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--navy);border-bottom:1px solid #e3e3e3;padding-bottom:10px;margin-bottom:22px}
.vidgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.vgitem{background:#000;border-radius:10px;overflow:hidden;aspect-ratio:16/10;display:flex;align-items:center;justify-content:center}
.vgitem video{width:100%;height:100%;object-fit:contain;display:block;background:#000}
@media(max-width:640px){.vidgrid{grid-template-columns:1fr}}
.figure{margin:22px 0 26px}
.figure img{width:100%;height:auto}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:22px 0 26px}
@media(max-width:640px){.pair{grid-template-columns:1fr}}
.pair img{width:100%;height:100%;object-fit:cover}
.tags{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--mut);padding:8px 0 0}
/* horizontal scroll-glide slideshow */
.stage{position:relative}
.slides{display:flex;height:calc(100dvh - var(--hdr));overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;background:#000}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 100%;width:100%;height:100%;position:relative;scroll-snap-align:center;display:block}
.slide .m{width:100%;height:100%;overflow:hidden;background:#000}
.slide .m img,.slide .m video{width:100%;height:100%;display:block}
.slide.cover .m img,.slide.cover .m video{object-fit:cover}
.slide.fit .m img,.slide.fit .m video{object-fit:contain}
.slide .cap{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(26px,6vh,64px);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.55);max-width:80%}
.slide .cap .t{display:block;font-size:clamp(20px,3vw,34px);font-weight:700;letter-spacing:.03em}
.slide .cap .s{display:block;margin-top:7px;font-size:11.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.9}
.slide.cover .open{position:absolute;inset:0}
.backpill{position:fixed;z-index:30;top:calc(var(--hdr) + 14px);left:clamp(16px,3vw,40px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:9px 15px;border-radius:30px}
.hscroll{position:relative}
.hpin{position:sticky;top:var(--hdr);height:calc(100dvh - var(--hdr));overflow:hidden;background:#fff}
.htrack{display:flex;height:100%;align-items:center;gap:12px;padding:0 clamp(16px,3vw,52px);will-change:transform}
.hslide{flex:0 0 auto;height:100%;position:relative}
.hslide .m{height:100%}
.hslide .m img,.hslide .m video{height:100%;width:auto;display:block}
.hslide .cap{position:absolute;left:clamp(20px,4vw,64px);bottom:clamp(24px,6vh,60px);color:#fff;text-shadow:0 2px 24px rgba(0,0,0,.6)}
.hslide .cap .t{display:block;font-size:clamp(18px,2.6vw,30px);font-weight:700}
.hslide .cap .s{display:block;margin-top:6px;font-size:11px;letter-spacing:.2em;opacity:.85}
.hslide .cap.box{max-width:min(46ch,44vw);background:linear-gradient(180deg,rgba(0,0,0,.18),rgba(0,0,0,.62));backdrop-filter:blur(6px);padding:18px 22px;border-radius:14px;text-shadow:0 1px 10px rgba(0,0,0,.45)}
.hslide .cap.box .body{display:block;margin-top:8px;font-size:clamp(13px,1.25vw,16px);line-height:1.55;font-weight:400;opacity:.96}
.titlebar{position:absolute;z-index:6;top:16px;right:clamp(16px,3vw,40px);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:8px 14px;border-radius:30px}
.hint{position:absolute;z-index:6;right:clamp(18px,4vw,48px);bottom:clamp(22px,5vh,52px);color:#fff;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;opacity:.85;display:flex;align-items:center;gap:8px;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:9px 15px;border-radius:30px;transition:opacity .4s ease;animation:nudge 1.8s ease-in-out infinite}
.hint .arw{font-size:15px}
@keyframes nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(7px)}}
.counter{position:absolute;z-index:6;right:clamp(18px,4vw,48px);top:16px;color:#fff;font-size:11px;letter-spacing:.12em;background:rgba(0,0,0,.42);backdrop-filter:blur(4px);padding:8px 13px;border-radius:30px}
.creditbar{position:fixed;z-index:30;left:50%;transform:translateX(-50%);bottom:18px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.5);backdrop-filter:blur(4px);padding:8px 15px;border-radius:30px;max-width:92vw;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.creditbar{font-size:9px;letter-spacing:.06em;padding:7px 12px}}
/* touch devices: native horizontal swipe instead of scroll-jack glide */
@media (pointer:coarse){
  .hscroll{height:auto!important}
  .hpin{position:relative;top:0;height:calc(100dvh - var(--hdr));overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scroll-snap-type:x proximity}
  .htrack{transform:none!important}
  .hslide{scroll-snap-align:center}
  .hint .swipe{display:inline}.hint .glide{display:none}
}
.hint .swipe{display:none}