/* Mr Sid Service – Outdoor Lighting landing + gallery.
   Loaded only on pages that use the plugin's templates. Everything is scoped to #mss-ol
   so the site's theme and global snippets do not change the approved design. */
html { scroll-behavior: smooth; }
body.mss-ol-page { margin: 0; background: #0B1220; }
body.mss-ol-page .mss-footer { display: none !important; } /* site-wide footer snippet: not on the landing page */

#mss-ol { -webkit-text-size-adjust: 100%; }
#mss-ol *, #mss-ol *::before, #mss-ol *::after { box-sizing: border-box; }
#mss-ol [hidden] { display: none !important; }
#mss-ol h1, #mss-ol h2, #mss-ol h3, #mss-ol h4 { color: inherit; letter-spacing: normal; text-transform: none; font-weight: 700; }
#mss-ol h3 { font-weight: 600; }
#mss-ol p, #mss-ol li, #mss-ol label, #mss-ol summary, #mss-ol figcaption { letter-spacing: normal; }
#mss-ol a { color: #F2B544; }
#mss-ol a:hover { color: #FFD27A; }
#mss-ol a:focus-visible, #mss-ol button:focus-visible, #mss-ol summary:focus-visible { outline: 2px solid #F2B544; outline-offset: 2px; }
#mss-ol button { box-shadow: none; text-transform: none; letter-spacing: normal; line-height: 1.2; font-family: inherit; }
#mss-ol img { max-width: none; }
#mss-ol input { box-shadow: none; width: 100%; margin: 0; line-height: normal; font-family: inherit; }
#mss-ol input:focus { outline: 2px solid #F2B544; outline-offset: 1px; }
#mss-ol input[aria-invalid="true"] { border-color: #E5484D !important; }
#mss-ol button:disabled { opacity: 0.7; cursor: progress; }
#mss-ol details summary { cursor: pointer; list-style: none; }
#mss-ol details summary::-webkit-details-marker { display: none; }
#mss-ol ul, #mss-ol ol { margin-top: 0; margin-bottom: 0; }
#mss-ol .mrsid-ef__success:focus { outline: 2px solid #F2B544; outline-offset: 2px; }

#mss-ol .hero-shade { background: linear-gradient(90deg, rgba(11,18,32,0.94) 0%, rgba(11,18,32,0.82) 38%, rgba(11,18,32,0.35) 68%, rgba(11,18,32,0.1) 100%); }
/* Hero slideshow: stacked, absolutely positioned slides (no layout shift); JS only toggles .is-on */
#mss-ol .hero-slides { position: absolute; inset: 0; }
/* Memorable phone number: 916 smaller, 258-58-44 emphasised */
#mss-ol .mss-ph { white-space: nowrap; font-variant-numeric: tabular-nums; }
#mss-ol .mss-ph__area { font-size: 1.08em; font-weight: 700; letter-spacing: 0.03em; }
#mss-ol .mss-ph__sep { opacity: 0.6; margin: 0 0.06em; }
#mss-ol .mss-ph__main { font-size: 1.08em; font-weight: 700; letter-spacing: 0.03em; }

/* How it works: slideshow inside the figure */
#mss-ol .how-slides { position: absolute; inset: 0; }
#mss-ol .how-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0; transition: opacity 1.2s ease-in-out; }
#mss-ol .how-slide.is-on { opacity: 1; }

#mss-ol .hero-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pd, 60% 50%); opacity: 0; transition: opacity 1.4s ease-in-out; }
#mss-ol .hero-slide.is-on { opacity: 1; }

/* Same-home lighting comparison */
#mss-ol .cmp-stage img { transition: opacity .5s ease; }
#mss-ol .cmp-stage.is-switching img { transition-duration: .2s; }
#mss-ol .cmp-stage.is-switching { opacity: .55; }
#mss-ol .cmp-stage { transition: opacity .2s ease; }
#mss-ol .cmp-mode { min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #3A4A66; font: inherit; font-weight: 600; cursor: pointer; background: transparent; color: #EEF1F6; }
#mss-ol .cmp-mode.is-on { background: #F2B544; color: #1A1204; border-color: #F2B544; }
#mss-ol .cmp-houses { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
#mss-ol .cmp-house { padding: 0; border: 2px solid transparent; border-radius: 10px; overflow: hidden; background: #121B2E; cursor: pointer; opacity: .65; transition: opacity .2s ease, border-color .2s ease; }
#mss-ol .cmp-house:hover { opacity: .9; }
#mss-ol .cmp-house.is-on { border-color: #F2B544; opacity: 1; }
#mss-ol .cmp-house img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }

/* Specialized access */
#mss-ol .access-photo { aspect-ratio: 4 / 5; max-height: 520px; }
#mss-ol .cta-shade { background: linear-gradient(90deg, rgba(11,18,32,0.92) 0%, rgba(11,18,32,0.78) 36%, rgba(11,18,32,0.2) 62%, rgba(11,18,32,0) 100%); }
#mss-ol .cta-inner { padding: 96px 24px; }

#mss-ol .gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
#mss-ol .gal-grid img { opacity: 0; transition: opacity .25s ease; }
#mss-ol .gal-grid img.is-loaded { opacity: 1; }

@media (max-width: 900px) {
  #mss-ol .gal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  #mss-ol .hero-slide { object-position: var(--pm, 50% 50%); }
  #mss-ol .access-photo { aspect-ratio: 4 / 3; max-width: none !important; }
  #mss-ol .cmp-houses { gap: 6px; }
  #mss-ol .hero-shade { background: linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0.8) 40%, rgba(11,18,32,0.95) 100%); }
  #mss-ol .cta-shade { background: linear-gradient(180deg, rgba(11,18,32,0) 0%, rgba(11,18,32,0.15) 22%, rgba(11,18,32,0.88) 42%, rgba(11,18,32,0.97) 100%); }
  #mss-ol .cta-inner { padding: 300px 20px 56px; }
}
@media (max-width: 600px) {
  #mss-ol .gal-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #mss-ol .gal-wrap { padding-left: 12px !important; padding-right: 12px !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  #mss-ol .hero-slide, #mss-ol .how-slide, #mss-ol .cmp-stage, #mss-ol .cmp-stage img { transition: none; }
}