.hero-reference{min-height:0;padding:110px 0 30px}
.hero-reference::after{display:none}
.hero-reference>.container{width:92%;max-width:1600px;position:relative;z-index:2}
.hero-reference .hero-inner{width:660px;max-width:55%}
.hero-reference .hero-title{font-size:clamp(40px,3.45vw,53px);line-height:1.06;margin-bottom:18px}
.hero-reference .eyebrow{margin-bottom:17px;font-size:12px;letter-spacing:.08em}
.hero-reference .hero-lead{font-size:18px;line-height:1.5;margin-bottom:24px;max-width:620px}
.hero-reference .hero-actions{margin:0;gap:14px}
.hero-reference .hero-actions .btn{border-radius:4px;min-height:46px;font-size:12px}
.hero-reference .hero-bg img{object-position:center 44%}
.hero-reference .hero-bg::after{background:linear-gradient(90deg,rgba(3,13,22,.84),rgba(3,13,22,.62) 45%,rgba(3,13,22,.1) 80%)}
.hero-reference .hero-benefits{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));width:100%;gap:24px;margin-top:40px;padding:0;background:none;border:0;box-shadow:none;backdrop-filter:none;border-radius:0}
.hero-reference .hero-benefit{padding:0;border:0;gap:14px;align-items:center}
.hero-reference .hero-benefit .icon{width:36px;height:36px}
.hero-reference .hero-benefit strong{font-size:13px;text-transform:none;line-height:1.4}
.hero-reference .hero-benefit span{font-size:12px;line-height:1.4}
.reference-service-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:2px;background:#fff;scroll-margin-top:var(--header-height);border-top:2px solid white}
.reference-service-tile{display:flex;flex-direction:column;min-width:0;background:#edf2f6;color:#08213a;overflow:hidden}
.reference-service-tile>img{width:100%;height:140px;object-fit:cover;transition:filter .2s}
.reference-tile-copy{padding:17px 24px 20px;flex:1;display:flex;flex-direction:column;gap:14px;min-height:110px}
.reference-tile-copy h2{font-size:15px;line-height:1.35;text-transform:uppercase;font-weight:800;margin:0}
.reference-tile-copy>span{font-size:13px;color:#007bdf;margin-top:auto;display:flex;gap:10px;align-items:center}
.reference-service-tile:first-child{background:#243e4e;color:white}
.reference-service-tile:first-child .reference-tile-copy>span{color:white}
.reference-service-tile:hover>img{filter:brightness(1.1)}
.reference-service-tile:hover .reference-tile-copy>span{text-decoration:underline;text-underline-offset:4px}
.reference-service-tile:focus-visible{outline:3px solid #0089ff;outline-offset:-3px}
.reference-tile-windows>img{object-position:center 85%}
.reference-tile-blinds>img{object-position:80% 45%}
.reference-tile-screens>img{object-position:65% 70%}
.reference-tile-service>img{object-position:45% 28%}
.reference-tile-shop>img{object-position:20% 65%}
.hero-photo-credit{padding:12px 24px;margin:0;text-align:center;font-size:11px;line-height:1.6;color:#b7c7d7}.hero-photo-credit a{text-decoration:underline}
@media(max-width:1100px){.hero-reference .hero-inner{width:650px;max-width:75%}.hero-reference .hero-benefits{gap:14px}.hero-reference .hero-benefit{gap:8px}.hero-reference .hero-benefit .icon{width:28px;height:28px}.reference-tile-copy{padding:14px 12px}.reference-tile-copy h2{font-size:12px}}
@media(max-width:900px){.reference-service-strip{grid-template-columns:repeat(3,minmax(0,1fr))}.hero-reference .hero-benefits{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.reference-tile-copy h2{font-size:14px}}
@media(max-width:600px){.hero-reference{padding:110px 0 24px}.hero-reference>.container{width:calc(100% - 28px)}.hero-reference .hero-inner{width:100%;max-width:none}.hero-reference .hero-title{font-size:36px}.hero-reference .hero-lead{font-size:16px}.hero-reference .hero-bg img{object-position:87% center}.hero-reference .hero-bg::after{background:rgba(3,13,22,.7)}.hero-reference .hero-benefits{grid-template-columns:1fr 1fr;margin-top:28px;gap:20px 14px}.hero-reference .hero-benefit strong{font-size:12px}.hero-reference .hero-benefit span{font-size:11px}.hero-reference .hero-benefit:last-child{grid-column:1/-1}.reference-service-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.reference-service-tile>img{height:120px}.reference-tile-copy{min-height:114px;padding:14px}.reference-tile-copy h2{font-size:13px}}

/* Show the original reference thumbnails without regenerating their content. */
.reference-tile-visual{position:relative;aspect-ratio:256/140;overflow:hidden;flex-shrink:0;background:#d5e9f8}
.reference-tile-visual img{position:absolute;left:calc(var(--tile-index) * -100%);top:-373.57142857%;width:600%;max-width:none;height:auto;display:block}
.reference-service-strip{gap:2px;background:#b7d9fb;border-top:2px solid #b7d9fb}
.reference-service-tile,.reference-service-tile:first-child{background:linear-gradient(135deg,#0754a6,#073b7b);color:#fff}
.reference-service-tile:first-child{background:linear-gradient(135deg,#007fed,#005cc7)}
.reference-tile-copy{border-top:3px solid #168cff;transition:background .18s}
.reference-tile-copy h2{color:#fff}
.reference-tile-copy>span,.reference-service-tile:first-child .reference-tile-copy>span{color:#e1f1ff}
.reference-service-tile:hover .reference-tile-copy{background:rgba(0,131,255,.2)}
.reference-service-tile:focus-visible{outline-color:#fff}

/* Real exterior photograph, clear glazing on the right and blue contrast under copy. */
.hero-reference .hero-bg img{object-position:center 48%}
.hero-reference .hero-bg::after{background:linear-gradient(0deg,rgba(3,19,42,.84),transparent 35%),linear-gradient(90deg,rgba(3,20,46,.97) 0%,rgba(3,24,52,.92) 29%,rgba(3,24,52,.66) 46%,rgba(3,24,52,.12) 72%,rgba(3,24,52,.05) 100%)}
@media(max-width:600px){.hero-reference .hero-bg img{object-position:65% center}.hero-reference .hero-bg::after{background:linear-gradient(90deg,rgba(3,20,46,.9),rgba(3,24,52,.68)),linear-gradient(0deg,rgba(3,20,46,.7),transparent 60%)}}