/* Shared dark glass skin. Media and full-width sections stay unfiltered. */
:root {
  --glass-radius: 26px;
  --glass-edge: rgba(255, 255, 255, .2);
  --glass-fill: linear-gradient(145deg, rgba(255, 255, 255, .105), rgba(255, 255, 255, .025) 58%, rgba(255, 255, 255, .055));
  --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), inset 0 -1px 0 rgba(255, 255, 255, .035), 0 16px 40px rgba(0, 0, 0, .24);
}

body { background-color: #080808; }

/* Navigation retains its original styling, including its buttons and mobile menu. */
:is(.button, .btn-outline, .btn-magnetic, .fsbo-button, .service-detail-cta,
    .icon-button, .fsbo-icon-button, .filter-pill, .video-tab, .tour-tabs button,
    .fsbo-filters button, .fsbo-media-modes button, #showreel-toggle,
    #review-request, #confirm-request, #submit-request, .wa-float):not(body > header *),
a.rounded-full:not(.brand-logo):not(body > header *) {
  border: 1px solid var(--glass-edge) !important;
  border-radius: 999px;
  background: var(--glass-fill) !important;
  color: #f5f5f5 !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), inset 0 -1px 0 rgba(255, 255, 255, .04), 0 5px 18px rgba(0, 0, 0, .18);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease;
}
#submit-request, #review-request, #confirm-request {
  background: linear-gradient(150deg, #fff, #d9d9d9) !important;
  color: #101010 !important;
  border-color: #e5e5e5 !important;
  box-shadow: inset 0 2px 1px #fff, 0 6px 24px #0005;
}

:is(.service-card, .listing-card, .tour-card, .tcard, .faq-item, .client-review,
    .fsbo-card, .video-portfolio-card, .film-choice, .package,
    .service-detail-options article, .service-detail-faq details),
#request-form aside,
#request-form .service-options :is(label, .service-contact-option),
main .bg-zinc-900 {
  border: 1px solid var(--glass-edge) !important;
  border-radius: var(--glass-radius);
  background: var(--glass-fill) !important;
  box-shadow: var(--glass-shadow);
}
.client-review { padding: 28px; }
.reviews-grid { gap: 20px; }
.service-detail-options article { padding: 28px; }
.service-detail-faq details { padding: 22px 24px; margin-block: 12px; }
.service-detail-faq summary { min-height: 24px; }
.service-lines { display: grid; gap: 10px; }
.service-lines a, .service-lines a:last-child {
  padding: 20px 24px;
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: var(--glass-fill);
  box-shadow: var(--glass-shadow);
  transition: border-color 180ms ease, background-color 180ms ease;
}

/* Checked states remain unmistakable without relying on motion. */
#request-form .service-options label:has(input:checked),
.package:has(input:checked), .film-choice.is-active {
  border-color: rgba(255, 255, 255, .72) !important;
  background: linear-gradient(145deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .065)) !important;
  box-shadow: inset 0 1px 0 #ffffff4d, 0 0 0 1px #ffffff24, 0 12px 30px #0004;
}
.package.recommended { border-color: #d9b578 !important; }
.recommendation { border-radius: 999px; }
.filter-pill.active, .video-tab.active, .tour-tabs button[aria-selected=true],
.fsbo-filters button[aria-pressed=true], .fsbo-media-modes button[aria-selected=true] {
  background: linear-gradient(145deg, #fff, #d9d9d9) !important;
  color: #101010 !important;
  border-color: #f5f5f5 !important;
}

.format-control, .fsbo-filters, .fsbo-media-modes, .estimate-glance,
.work-nav, .project-steps {
  border: 1px solid var(--glass-edge);
  border-radius: 20px;
  background: linear-gradient(145deg, rgba(48, 48, 48, .88), rgba(18, 18, 18, .92));
  box-shadow: var(--glass-shadow);
}
.format-control { border-radius: 999px; padding: 5px; }
.format-control span { border-radius: 999px; }
.fsbo-filters, .fsbo-media-modes { border-radius: 999px; padding: 5px; }
.project-steps { padding: 8px; gap: 6px; }
.project-steps li { border: 0; padding: 10px 16px; border-radius: 999px; }
.project-steps li[aria-current=step] { background: #ffffff16; box-shadow: inset 0 1px 0 #ffffff24; }
.estimate-glance { top: 104px; padding: 16px 22px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); }
#estimate { scroll-margin-top: 240px; }
#request-form aside { top: 112px; }
.work-nav { margin: 24px auto 0; width: fit-content; max-width: calc(100% - 32px); padding: 16px 28px; }
#web-section .web-tabs { border: 0; gap: 8px; }
#web-section .web-tabs button { border: 1px solid var(--glass-edge); border-radius: 999px; background: var(--glass-fill); }
#web-section .web-tabs button[aria-selected=true] { background: #f5f5f5; color: #111; border-color: #f5f5f5; }

input:not([type=checkbox]):not([type=radio]):not([type=range]), select, textarea {
  border-radius: 14px;
  background: linear-gradient(155deg, #ffffff09, #ffffff03) !important;
  border-color: #ffffff30 !important;
  box-shadow: inset 0 2px 6px #0003, inset 0 1px 0 #ffffff08;
}
input::placeholder, textarea::placeholder { color: #a4a4a4 !important; }
input[type=checkbox], input[type=radio] { accent-color: #f5f5f5; }
select option { background: #202020; }
.fields label { color: #dedede; }

:is(.project-image, .edit-photo, .ba-slider, .service-visual,
    .service-agent-video video, .service-tour iframe, .home-film-grid video,
    .property-film-feature video, .agent-films video, .home-tour iframe,
    .tour-viewer iframe, .vid-modal-inner iframe),
.portfolio-item > .relative,
:is(#photography, #video, #drone) .overflow-hidden {
  border-radius: var(--glass-radius);
  overflow: hidden;
  box-shadow: 0 0 0 1px #ffffff20, 0 18px 44px #0004;
}
.image-label, .fsbo-badge, .fsbo-media-count, .reel-badge, .hero-credit {
  border: 1px solid #ffffff3d;
  border-radius: 999px;
  background: #161616b8;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow: inset 0 1px 0 #ffffff20;
}
#project-dialog, #fsbo-dialog {
  border-radius: var(--glass-radius);
  border-color: #ffffff3d;
  background: linear-gradient(135deg, #232323f5, #101010f5);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  box-shadow: var(--glass-shadow);
}
.fsbo-dialog-header { background: #191919f5; }
.fsbo-details { border-radius: 18px; }
.fsbo-photo-stage, .fsbo-video-panel { border-radius: 18px; overflow: hidden; }
.wa-float { background-color: #282828 !important; }
.wa-float svg { fill: currentColor; }

@media (hover: hover) {
  :is(.button, .btn-outline, .btn-magnetic, .fsbo-button, .service-detail-cta,
      .icon-button, .filter-pill, .video-tab, .tour-tabs button):not(body > header *):hover {
    border-color: #ffffff70 !important;
    background-color: #ffffff18 !important;
    box-shadow: inset 0 1px 0 #ffffff4d, 0 8px 24px #0005;
  }
  :is(.service-card, .fsbo-card, .film-choice:not(.is-active), .package:not(:has(input:checked)):not(.recommended)):hover,
  #request-form .service-options :is(label:not(:has(input:checked)), .service-contact-option):hover,
  .service-lines a:hover { border-color: #ffffff66 !important; }
}

@media (max-width: 700px) {
  :root { --glass-radius: 22px; }
  .client-review, .service-detail-options article { padding: 24px; }
  .service-lines a { padding: 18px; }
  .project-steps li { padding: 10px 9px; font-size: 11px; gap: 6px; }
  .project-steps { justify-content: space-between; }
  .estimate-glance { top: 92px; padding: 14px; }
  .work-nav { gap: 16px; padding: 14px 20px; }
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  #project-dialog, #fsbo-dialog, .estimate-glance { background: #202020 !important; }
  .image-label, .fsbo-badge, .fsbo-media-count, .hero-credit { background: #171717; }
}
@media (prefers-reduced-transparency: reduce) {
  #project-dialog, #fsbo-dialog, .estimate-glance { background: #202020 !important; }
  :is(.image-label, .fsbo-badge, .fsbo-media-count, .hero-credit, .button, .wa-float):not(body > header *) { background-color: #202020; }
  :not(body > header):not(body > header *) { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
}
@media (prefers-reduced-motion: reduce) {
  .service-lines a,
  :is(.button, .btn-outline, .btn-magnetic, .fsbo-button, .service-detail-cta,
      .icon-button, .filter-pill, .video-tab, .tour-tabs button):not(body > header *) { transition: none; }
}