/* True vertical feather: a gradual alpha mask reveals the page behind the spotlight. */
.deal-spotlight{left:0;transform:none;width:100%;height:137px;box-shadow:none;/* The longer upper ramp makes the photo emerge gently from AZAP yellow. */-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.34) 28%,rgba(0,0,0,.52) 36%,rgba(0,0,0,.7) 44%,rgba(0,0,0,.86) 52%,#000 60%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.34) 28%,rgba(0,0,0,.52) 36%,rgba(0,0,0,.7) 44%,rgba(0,0,0,.86) 52%,#000 60%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.deal-spotlight:after{background:none}@media(min-width:781px){.deal-slide-copy{padding-left:max(49px,calc((100vw - 1180px)/2 + 25px))}}
@media(max-width:780px){.hero{min-height:680px}.hero-grid{padding-top:82px}.hero .location-link,.hero .address-search{transform:translateY(-14px)}.deal-spotlight{left:0;bottom:25px;transform:none;width:100%;height:278px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.34) 28%,rgba(0,0,0,.52) 36%,rgba(0,0,0,.7) 44%,rgba(0,0,0,.86) 52%,#000 60%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.34) 28%,rgba(0,0,0,.52) 36%,rgba(0,0,0,.7) 44%,rgba(0,0,0,.86) 52%,#000 60%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide{border-radius:0}.deal-slide-copy{padding-top:72px}.deal-slide-copy button{top:96px}}

/* Keep the hero a clean yellow brand field and reduce the deal's green colour cast. */
.hero-category-backdrop{display:none!important}.deal-slide{background:#ffc244}.deal-slide:after{background:linear-gradient(90deg,rgba(18,25,22,.42) 0%,rgba(18,25,22,.19) 47%,rgba(18,25,22,.05) 73%,transparent 100%)!important}.deal-slide img{opacity:.92}
.deal-slide-copy span,.deal-slide-copy strong,.deal-slide-copy p{text-shadow:0 1px 3px rgba(0,0,0,.36)}
.deal-slide-copy span{color:#fff;font-weight:900;text-shadow:0 1px 3px rgba(0,0,0,.48)}
.topbar{z-index:7}.hero-grid{z-index:5}.hero .location-link{display:block;margin:0 0 6px;transform:translateY(16px)}.address-search{position:relative;z-index:6;background:#fff!important;background-color:#fff!important;background-image:none!important;opacity:1;mix-blend-mode:normal;isolation:isolate}
.hero .address-search{transform:translateY(15px)}
@media(max-width:780px){.hero .address-search{transform:translateY(15px)}}
@media(max-width:780px){.hero-copy h1,.hero-copy .hero-text{transform:translateY(18px)}}
.deal-slide-copy button,.login-button{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.62);box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 4px 12px rgba(0,0,0,.15);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);text-shadow:0 1px 2px rgba(0,0,0,.32)}

/* Let the image rise behind the address field. It becomes fully visible right
   at the field's lower edge, rather than fading through the deal itself. */
@media(min-width:781px){.deal-spotlight{height:205px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 7%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.3) 21%,rgba(0,0,0,.5) 28%,rgba(0,0,0,.7) 34%,rgba(0,0,0,.87) 38%,#000 42%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 7%,rgba(0,0,0,.14) 14%,rgba(0,0,0,.3) 21%,rgba(0,0,0,.5) 28%,rgba(0,0,0,.7) 34%,rgba(0,0,0,.87) 38%,#000 42%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:95px}.deal-slide-copy button{top:98px}}
@media(max-width:780px){.deal-spotlight{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.3) 16%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.7) 27%,rgba(0,0,0,.87) 31%,#000 35%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.04) 5%,rgba(0,0,0,.14) 10%,rgba(0,0,0,.3) 16%,rgba(0,0,0,.5) 22%,rgba(0,0,0,.7) 27%,rgba(0,0,0,.87) 31%,#000 35%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}}

/* Start the spotlight's upward fade at the lower edge of the address field. */
@media(min-width:781px){.deal-spotlight{height:145px;bottom:25px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 13%,rgba(0,0,0,.08) 18%,rgba(0,0,0,.25) 27%,rgba(0,0,0,.5) 37%,rgba(0,0,0,.75) 47%,#000 57%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 13%,rgba(0,0,0,.08) 18%,rgba(0,0,0,.25) 27%,rgba(0,0,0,.5) 37%,rgba(0,0,0,.75) 47%,#000 57%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:62px}.deal-slide-copy button{top:65px}}
@media(max-width:780px){.deal-spotlight{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.25) 39%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.75) 51%,#000 57%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 30%,rgba(0,0,0,.08) 34%,rgba(0,0,0,.25) 39%,rgba(0,0,0,.5) 45%,rgba(0,0,0,.75) 51%,#000 57%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:127px}.deal-slide-copy button{top:149px}}

/* The image grows upward behind the unchanged address control. Its fade starts
   at that control's top edge, so the field sits inside the artwork. */
@media(min-width:781px){.deal-spotlight{height:235px;bottom:25px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.2) 28%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.88) 48%,#000 53%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 18%,rgba(0,0,0,.06) 22%,rgba(0,0,0,.2) 28%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 42%,rgba(0,0,0,.88) 48%,#000 53%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:125px}.deal-slide-copy button{top:128px}}
@media(max-width:780px){.deal-spotlight{height:330px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 20%,rgba(0,0,0,.06) 24%,rgba(0,0,0,.2) 29%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 41%,rgba(0,0,0,.88) 46%,#000 51%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 20%,rgba(0,0,0,.06) 24%,rgba(0,0,0,.2) 29%,rgba(0,0,0,.45) 35%,rgba(0,0,0,.7) 41%,rgba(0,0,0,.88) 46%,#000 51%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:166px}.deal-slide-copy button{top:188px}}

/* Final geometry: only the area ABOVE the address field is transparent. */
@media(min-width:781px){.deal-spotlight{height:235px;bottom:25px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.46) 17%,rgba(0,0,0,.72) 21%,#000 24%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 6%,rgba(0,0,0,.22) 12%,rgba(0,0,0,.46) 17%,rgba(0,0,0,.72) 21%,#000 24%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:125px}.deal-slide-copy button{top:128px}}
@media(max-width:780px){.deal-spotlight{height:390px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 8%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.46) 19%,rgba(0,0,0,.72) 23%,#000 27%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.06) 8%,rgba(0,0,0,.22) 14%,rgba(0,0,0,.46) 19%,rgba(0,0,0,.72) 23%,#000 27%,#000 79%,rgba(0,0,0,.78) 84%,rgba(0,0,0,.5) 88%,rgba(0,0,0,.22) 92%,rgba(0,0,0,.06) 96%,transparent 100%)}.deal-slide-copy{padding-top:186px}.deal-slide-copy button{top:208px}}

/* Desktop: a generous deal canvas with a long, almost imperceptible top blend.
   The image becomes solid only at the address field's top edge. */
@media(min-width:781px){.deal-spotlight{height:340px;bottom:25px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 8%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.18) 25%,rgba(0,0,0,.32) 34%,rgba(0,0,0,.5) 43%,rgba(0,0,0,.68) 49%,rgba(0,0,0,.84) 54%,#000 57%,#000 80%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.22) 93%,rgba(0,0,0,.06) 97%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 8%,rgba(0,0,0,.08) 16%,rgba(0,0,0,.18) 25%,rgba(0,0,0,.32) 34%,rgba(0,0,0,.5) 43%,rgba(0,0,0,.68) 49%,rgba(0,0,0,.84) 54%,#000 57%,#000 80%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.22) 93%,rgba(0,0,0,.06) 97%,transparent 100%)}.deal-slide-copy{padding-top:215px}.deal-slide-copy button{top:218px}}

/* The address field is about 52% down this larger desktop canvas. Keep every
   pixel beneath its top edge fully opaque; the longer blend is only above it. */
@media(min-width:781px){.deal-spotlight{-webkit-mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 19%,rgba(0,0,0,.32) 26%,rgba(0,0,0,.5) 33%,rgba(0,0,0,.68) 39%,rgba(0,0,0,.84) 46%,#000 52%,#000 80%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.22) 93%,rgba(0,0,0,.06) 97%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,rgba(0,0,0,.025) 6%,rgba(0,0,0,.08) 12%,rgba(0,0,0,.18) 19%,rgba(0,0,0,.32) 26%,rgba(0,0,0,.5) 33%,rgba(0,0,0,.68) 39%,rgba(0,0,0,.84) 46%,#000 52%,#000 80%,rgba(0,0,0,.78) 85%,rgba(0,0,0,.5) 89%,rgba(0,0,0,.22) 93%,rgba(0,0,0,.06) 97%,transparent 100%)}.deal-slide-copy{padding-top:235px}.deal-slide-copy button{top:238px}}

/* Desktop gets a real deal gallery rather than a thin, masked banner. */
@media(min-width:781px){.hero{min-height:820px}.deal-spotlight{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;bottom:84px;width:min(1180px,calc(100% - 48px));height:214px;overflow:visible;-webkit-mask-image:none;mask-image:none}.deal-slide{position:relative!important;display:block;min-width:0;opacity:1!important;pointer-events:auto!important;border-radius:16px;background:#123e35;box-shadow:0 15px 32px rgba(66,48,7,.2);transition:transform .28s ease,box-shadow .28s ease}.deal-slide:hover{transform:translateY(-5px);box-shadow:0 21px 38px rgba(66,48,7,.27)}.deal-slide:after{background:linear-gradient(180deg,rgba(8,31,26,.02) 5%,rgba(8,31,26,.18) 42%,rgba(8,31,26,.82) 100%)!important}.deal-slide img{opacity:1;transform:scale(1.02)}.deal-slide:nth-child(2) img{object-position:center 56%}.deal-slide:nth-child(3) img{object-position:center 48%}.deal-slide-copy{display:flex;position:absolute;inset:auto 0 0;padding:17px 18px 16px;color:#fff}.deal-slide-copy span{font-size:9px}.deal-slide-copy strong{margin-top:4px;font-size:22px}.deal-slide-copy p{margin:5px 0 0;font-size:13px}.deal-slide-copy button{right:15px;top:auto;bottom:17px;padding:9px 10px;font-size:11px}.deal-dots{display:none}}

/* Mobile: the address field sits above the artwork. The only fade runs from
   its top edge to its bottom edge; the image remains solid to the yellow wave. */
@media(max-width:780px){.hero .address-search{z-index:8}.deal-spotlight{bottom:0;height:390px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,transparent 23%,rgba(0,0,0,.18) 27%,rgba(0,0,0,.5) 31%,rgba(0,0,0,.82) 35%,#000 38%,#000 100%);mask-image:linear-gradient(to bottom,transparent 0%,transparent 23%,rgba(0,0,0,.18) 27%,rgba(0,0,0,.5) 31%,rgba(0,0,0,.82) 35%,#000 38%,#000 100%)}.hero-wave{z-index:5;pointer-events:none}}

/* Compact and precisely centre the desktop gallery inside the first viewport. */
@media(min-width:781px){.hero{min-height:670px}.deal-spotlight{left:50%;right:auto;transform:translateX(-50%);bottom:12px;width:min(1180px,calc(100% - 48px));height:132px;gap:16px}.deal-slide-copy{padding:13px 15px 12px}.deal-slide-copy span{font-size:8px}.deal-slide-copy strong{margin-top:3px;font-size:19px}.deal-slide-copy p{margin-top:3px;font-size:11px}.deal-slide-copy button{right:12px;bottom:12px;padding:8px 9px;font-size:10px}.hero-wave{height:34px;z-index:5;pointer-events:none}}

/* With AZAP on the second headline line, use the reclaimed space for taller
   cards. Grid placement keeps each action clear of its deal description. */
@media(min-width:781px){.deal-spotlight{height:162px}.deal-slide-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"label action" "price action" "detail action";align-content:end;align-items:center;column-gap:10px;padding:15px 16px 14px}.deal-slide-copy span{grid-area:label;font-size:9px}.deal-slide-copy strong{grid-area:price;margin-top:3px;font-size:22px}.deal-slide-copy p{grid-area:detail;margin:4px 0 0;font-size:12px}.deal-slide-copy button{position:static;grid-area:action;align-self:end;white-space:nowrap;padding:9px 10px;font-size:10px}.hero-wave{height:22px}}

/* One headline only: the breakpoint changes its line breaks, not its copy. */
.mobile-heading-break{display:none}@media(max-width:780px){.desktop-heading-break{display:none}.mobile-heading-break{display:initial}.hero-copy h1{white-space:nowrap}}

/* Desktop only: lift the complete location control above the deal gallery. */
@media(min-width:781px){.hero .location-link,.hero .address-search{transform:translateY(-21px)}}