/* Homepage-only photographic skin. Layout, padding and interaction stay with the site. */
.may-panel-v4--1 { --may-panel-photo: url('../img/clay-panels/clay_01.webp'); }
.may-panel-v4--2 { --may-panel-photo: url('../img/clay-panels/clay_02.webp'); }
.may-panel-v4--3 { --may-panel-photo: url('../img/clay-panels/clay_03.webp'); }
.may-panel-v4--4 { --may-panel-photo: url('../img/clay-panels/clay_04.webp'); }
:is(#reviews, #faq, body > nav.clay-site-nav, main) .may-panel-v4 {
  isolation: isolate; overflow: visible;
  background: transparent !important; border-color: transparent !important;
  box-shadow: none !important; backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important; color: #171411 !important;
  text-shadow: none !important;
}
:is(#reviews, #faq, body > nav.clay-site-nav, main) .may-panel-v4::before {
  content: ''; display: block; position: absolute; inset: 0; z-index: -2;
  border: 0 solid transparent;
  border-image-source: var(--may-panel-photo);
  border-image-slice: 230 260 225 260 fill;
  border-image-width: 38px 38px; border-image-outset: 0; border-image-repeat: stretch;
  filter: drop-shadow(3px 9px 9px rgba(0,30,40,.28)); pointer-events: none;
}
:is(#reviews, #faq, body > nav.clay-site-nav, main) .may-panel-v4::after {
  content: ''; position: absolute; inset: 18px 16px; z-index: -1;
  background: var(--may-panel-photo) center / cover no-repeat; opacity: .34;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to right,transparent,black 18px,black calc(100% - 18px),transparent),linear-gradient(to bottom,transparent,black 18px,black calc(100% - 18px),transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(to right,transparent,black 18px,black calc(100% - 18px),transparent),linear-gradient(to bottom,transparent,black 18px,black calc(100% - 18px),transparent);
  mask-composite: intersect;
}
:is(#reviews, #faq, body > nav.clay-site-nav, main) .may-panel-v4 :is(p, summary, a, .faq-answer, .font-heading, .top-dropdown-group-title, .text-accent) {
  color: #171411 !important; text-shadow: none !important; -webkit-text-stroke: 0;
}
#reviews .may-panel-v4 p { font-weight: 600; }
body > nav.clay-site-nav .may-panel-v4 .top-dropdown-link { font-weight: 600; }
body > nav.clay-site-nav .may-panel-v4 .top-dropdown-link:hover { background: rgba(80,60,40,.09); color: #171411; }
body > nav.clay-site-nav .may-panel-v4::after { opacity: .44; }
#faq .may-panel-v4:not([open])::before { border-image-width: 28% 38px; }
#faq .may-panel-v4:not([open])::after {
  inset: 9px 16px; background-size: 100% 100%; opacity: .28;
  filter: blur(2px) saturate(.92);
}
#faq .may-panel-v4:not([open]) summary { position: relative; z-index: 1; }
#faq .may-panel-v4:not([open]) summary::before {
  content: ''; position: absolute; inset: 0 38px; z-index: -1;
  background: linear-gradient(to right,rgba(241,236,225,0),rgba(241,236,225,.26) 12%,rgba(241,236,225,.22) 88%,rgba(241,236,225,0));
  filter: blur(4px); pointer-events: none;
}
@media (max-width: 650px) {
  :is(#reviews, #faq, body > nav.clay-site-nav, main) .may-panel-v4::before { border-image-width: 32px 30px; }
  #faq .may-panel-v4:not([open])::before { border-image-width: 28% 30px; }
  #faq .may-panel-v4:not([open]) summary::before { inset-inline: 30px; }
}
/* Keep the first existing 260px panel inside the viewport; button geometry is untouched. */
@media (min-width: 769px) {
  body > nav.clay-site-nav .top-nav-left > .top-nav-item:first-child > .may-panel-v4 { left: max(50%, 130px); }
}

/* The contact card keeps its content, dimensions and existing links. */
main .may-panel-v4--contacts .space-y-4, main .may-panel-v4--contacts span { color: #171411 !important; text-shadow: none !important; }

/* Soften the large panels; review cards keep their approved photographs. */
:is(#faq,body > nav.clay-site-nav) .may-panel-v4--1,
main .may-panel-v4--contacts.may-panel-v4--1 { --may-panel-photo:url('../img/clay-panels-soft/clay_01.webp'); }
:is(#faq,body > nav.clay-site-nav) .may-panel-v4--2,
main .may-panel-v4--contacts.may-panel-v4--2 { --may-panel-photo:url('../img/clay-panels-soft/clay_02.webp'); }
:is(#faq,body > nav.clay-site-nav) .may-panel-v4--3,
main .may-panel-v4--contacts.may-panel-v4--3 { --may-panel-photo:url('../img/clay-panels-soft/clay_03.webp'); }
:is(#faq,body > nav.clay-site-nav) .may-panel-v4--4,
main .may-panel-v4--contacts.may-panel-v4--4 { --may-panel-photo:url('../img/clay-panels-soft/clay_04.webp'); }
:is(#faq,body > nav.clay-site-nav) .may-panel-v4::before,
main .may-panel-v4--contacts::before { filter:drop-shadow(2px 6px 7px rgba(0,30,40,.16)); }
:is(#faq,body > nav.clay-site-nav) .may-panel-v4::after,
main .may-panel-v4--contacts::after { opacity:.12; }