/* Service pages: "What it includes" as a stage, and the commercial application bento.

   .svc-stage  The shared photo slider runs full bleed behind a smoked-glass panel that carries the heading, the lead
               paragraph(s) and the bullets. Whatever copy does not fit the panel follows as a readable ink column.
               The slider keeps its engine (js/site.js): arrows, dots, swipe, keyboard, status text.
   .svc-apps   Commercial: the four application bands become one ink bento of four tiles of varied size.
               Photos are ones the site already owns and none is shown elsewhere on the page. The dealership line has no
               photo of its own (the Subaru and showroom photos are still owed by the client), so that tile is a note,
               never a stand-in. The existing sentence is the Playfair caption.
   Section H2s and card H3s stay on the shared heading system. */

/* ------------------------------------------------------------------ stage */
body main .svc-stage { --svc-serif: var(--font-body); background: #141414; padding: 0; overflow: hidden; }
body main .svc-stage__frame { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(560px, 47vw, 700px); padding-block: clamp(36px, 5vw, 64px); }
body main .svc-stage__wrap { position: relative; z-index: 3; width: 100%; }

/* the slider shell fills the frame */
body main .svc-stage__frame > .photo-slider-shell {
  position: absolute; inset: 0; z-index: 0; width: auto; max-width: none; margin: 0 !important; padding: 0; overflow: hidden; background: #141414;
}
body main .svc-stage__frame > .photo-slider-shell > .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) {
  position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0;
}
body main .svc-stage__frame > .photo-slider-shell::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(90deg, rgba(10, 10, 10, .72) 0, rgba(10, 10, 10, .34) 46%, rgba(10, 10, 10, 0) 78%), linear-gradient(0deg, rgba(10, 10, 10, .5) 0, rgba(10, 10, 10, 0) 30%);
}
body main .svc-stage .photo-slider__slide img { object-fit: cover; }

/* glass panel */
body main .svc-panel {
  position: relative; z-index: 3; width: min(100%, 560px); margin: 0; padding: clamp(24px, 3vw, 42px);
  background: rgba(12, 12, 12, .74); border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-s);
  box-shadow: 0 44px 90px -40px rgba(0, 0, 0, .9), 0 20px 40px -26px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .88); text-align: left;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  body main .svc-panel { background: rgba(12, 12, 12, .62); -webkit-backdrop-filter: blur(12px) saturate(1.1); backdrop-filter: blur(12px) saturate(1.1); }
}
body main .svc-panel h2 { color: #fff; margin-top: 0; }
body main .svc-panel p:not(#_):not(#_):not(#_) { margin: 0 0 14px; font: 500 17px/1.55 var(--font-body); color: rgba(255, 255, 255, .88); }
body main .svc-panel .list { margin: 18px 0 0; padding: 0; font: 500 17px/1.5 var(--font-body); color: #fff; }
body main .svc-panel .list li { color: #fff; }
body main .svc-panel a { color: #fff; }

/* ink column for the rest of the copy */
body main .svc-stage__tailwrap { padding-block: clamp(40px, 5vw, 64px); }
body main .svc-tail { max-width: 880px; margin-inline: auto; color: rgba(255, 255, 255, .88); text-align: left; }
body main .svc-tail p:not(#_):not(#_):not(#_) { margin: 0 0 16px; font: 500 18px/1.6 var(--font-body); color: rgba(255, 255, 255, .88); }
body main .svc-tail p:last-child:not(#_) { margin-bottom: 0; }
body main .svc-tail a { color: #fff; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
body main .svc-tail h3 { margin: 28px 0 10px; color: #fff; }
body main .svc-tail .step { margin-top: 28px; padding: 24px 0 0; border: 0; border-top: 1px solid rgba(255, 255, 255, .18); background: none; box-shadow: none; }
body main .svc-tail .step h3 { margin-top: 0; }
body main .svc-tail [data-landing-need-it-today] { font-size: 16px; }
body main .svc-tail [data-landing-need-it-today] a { display: inline-flex; align-items: center; min-height: 44px; }
body main .svc-tail #lighting-guide { margin-top: 36px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .18); }

/* controls: a quiet cluster at the foot of the photo */
body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) {
  position: absolute; top: auto; left: auto; transform: none; bottom: clamp(18px, 2.4vw, 32px); z-index: 4; margin: 0;
  background: rgba(14, 14, 14, .55); color: #fff; border: 1px solid rgba(255, 255, 255, .35); box-shadow: none;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
body main .svc-stage .photo-slider-shell > button.carousel-arrow[data-arrow-direction="next"]:not(#_):not(#_):not(#_) { right: clamp(18px, 2.4vw, 32px); }
body main .svc-stage .photo-slider-shell > button.carousel-arrow[data-arrow-direction="prev"]:not(#_):not(#_):not(#_) { right: calc(clamp(18px, 2.4vw, 32px) + 72px); }
@media (hover: hover) {
  body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:hover:not(:disabled):not(#_):not(#_):not(#_) { background: #fff; color: #141414; border-color: #fff; }
}
body main .svc-stage .photo-slider__dots button:not(#_):not(#_):not(#_)::before { background: #fff; opacity: .5; }
body main .svc-stage .photo-slider__dots button[aria-current="true"]:not(#_):not(#_):not(#_)::before { opacity: 1; background: #fff; }
/* the authored slide caption: a Playfair line at the foot of the photo, away from the panel */
body main .svc-stage .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) {
  position: absolute; left: auto; right: clamp(18px, 2.4vw, 32px); bottom: calc(clamp(18px, 2.4vw, 32px) + 62px); top: auto; transform: none; z-index: 4; width: auto; max-width: min(420px, 40%);
  margin: 0; padding: 7px 12px 8px; border: 0; border-radius: 6px; background: rgba(14, 14, 14, .62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: none;
  font: 400 16px/1.3 var(--svc-serif); letter-spacing: 0; text-align: left; color: #fff; white-space: normal; overflow: visible; text-overflow: clip;
}
body main .svc-stage .photo-slider-shell > .photo-slider__caption[hidden] { display: none; }

@media (max-width: 899.98px) {
  body main .svc-stage__frame { display: block; min-height: 0; padding: 0; }
  body main .svc-stage__frame > .photo-slider-shell { position: relative; inset: auto; height: auto; aspect-ratio: 4 / 3; }
  body main .svc-stage__frame > .photo-slider-shell::after { background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0, rgba(10, 10, 10, 0) 45%); }
  body main .svc-stage__wrap { margin-top: -72px; padding-bottom: 0; }
  body main .svc-panel { width: 100%; }
  body main .svc-stage .photo-slider-shell > button.carousel-arrow.carousel-arrow.carousel-arrow:not(#_):not(#_):not(#_) { bottom: 88px; }
  body main .svc-stage .photo-slider-shell > .photo-slider__caption.photo-slider__caption.photo-caption:not(#_):not(#_):not(#_):not(#_):not(#_) { left: clamp(14px, 2vw, 24px); right: auto; bottom: 138px; max-width: calc(100% - 28px); }
}

/* ------------------------------------------------------------------ commercial applications */
body main .svc-apps { --svc-serif: var(--font-body); background: #141414; padding-block: 0 clamp(56px, 7vw, 88px); }
body main .svc-appbento {
  --svc-row: clamp(300px, 27vw, 400px);
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: repeat(2, var(--svc-row)); gap: clamp(8px, .94vw, 12px);
}
body main .svc-a1 { grid-column: 1 / 8; grid-row: 1; }
body main .svc-a2 { grid-column: 8 / 13; grid-row: 1 / 3; }
body main .svc-a3 { grid-column: 1 / 5; grid-row: 2; }
body main .svc-a4 { grid-column: 5 / 8; grid-row: 2; }
body main .svc-app {
  position: relative; isolation: isolate; overflow: hidden; min-width: 0; min-height: 0; margin: 0; scroll-margin-top: 110px;
  border-radius: var(--r-s); background: #1b1b1a; color: #fff;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .07);
}
body main .svc-app > img { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; max-width: none; margin: 0; border-radius: 0; object-fit: cover; object-position: 50% 62%; }
body main .svc-app:not(.svc-app--note)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(0deg, rgba(10, 10, 10, .78) 0, rgba(10, 10, 10, .12) 52%, rgba(10, 10, 10, .28) 100%); }
body main .svc-app--note { background: radial-gradient(120% 100% at 100% 0, rgba(255, 255, 255, .085) 0, rgba(255, 255, 255, 0) 60%), #1f1f1e; }
body main .svc-app__name:not(#_):not(#_):not(#_) {
  position: absolute; top: clamp(10px, 1.5vw, 20px); left: clamp(10px, 1.5vw, 20px); max-width: calc(100% - 2 * clamp(10px, 1.5vw, 20px)); margin: 0;
  padding: .24em .56em .3em; border-radius: 6px; background: rgba(14, 14, 14, .66);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  font: 600 clamp(17px, 1.7vw, 26px)/1.12 var(--svc-serif); letter-spacing: -.005em; color: #fff; text-wrap: balance;
}
body main .svc-app__line:not(#_):not(#_):not(#_) {
  position: absolute; left: clamp(10px, 1.5vw, 20px); right: clamp(10px, 1.5vw, 20px); bottom: clamp(10px, 1.5vw, 20px); margin: 0;
  padding: clamp(14px, 1.5vw, 20px) clamp(14px, 1.6vw, 22px); border-radius: var(--r-s); background: rgba(12, 12, 12, .58);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, .12);
  font: 400 clamp(16px, 1.3vw, 18px)/1.5 var(--svc-serif); color: rgba(255, 255, 255, .94);
}
body main .svc-app--note .svc-app__line:not(#_):not(#_):not(#_) { background: none; border: 0; padding: 0; -webkit-backdrop-filter: none; backdrop-filter: none; font-size: clamp(19px, 1.9vw, 26px); line-height: 1.45; bottom: clamp(20px, 2.4vw, 34px); left: clamp(18px, 2.4vw, 34px); right: clamp(18px, 2.4vw, 34px); }

@media (max-width: 899.98px) {
  body main .svc-appbento { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  body main .svc-app { grid-column: auto !important; grid-row: auto !important; min-height: 440px; }
  body main .svc-a2 { min-height: 500px; }
  body main .svc-app__line:not(#_):not(#_):not(#_) { font-size: 16px; }
}
/* The wrap spans the photo; only the glass panel takes the pointer, so the photo still drags and its arrows still hover. */
body main .svc-stage__wrap { pointer-events: none; }
body main .svc-stage__wrap .svc-panel { pointer-events: auto; }