/* Nature-photo backdrop · 16:19 */
html {
  background-color: #0b0d18 !important;
  background-image:
    linear-gradient(rgba(7,8,16,0.62), rgba(7,8,16,0.62)),
    url('/assets/admin-bg/Autumn_Forest_Path_with_Tall_Trees.jpg') !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
  min-height: 100%;
}
html::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(7,8,16,0.62), rgba(7,8,16,0.62)),
    url('/assets/admin-bg/Autumn_Forest_Path_with_Tall_Trees.jpg') center center / cover no-repeat;
  pointer-events: none;
}
body {
  background-color: transparent !important;
  background-image: none !important;
}
@media print {
  html::before { display: none !important; }
  html, body { background: white !important; }
}

/* Every full-width section: NO color, NO image. The html sky shows straight
   through, giving you the continuous live-weather feel top-to-bottom of the
   page instead of stacked panels. */
section,
.hero,
.page-hero,
.why,
.features,
.cta,
#services,
#about,
#contact,
#scrap {
  background: transparent !important;
}

/* Kill the colored radial-glow pseudo-elements on the hero — those tinted
   sections blue/purple, breaking the unified weather look. */
.hero::before,
.hero::after,
.page-hero::before,
.page-hero::after {
  background: none !important;
}

/* Ticker is a thin strip — light tint so the marquee text reads but photo bleeds through. */
.ticker-wrap {
  background: rgba(10,12,24,.5) !important;
  backdrop-filter: blur(6px) saturate(140%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(140%) !important;
}

/* Cards & content panels — TURNED UP transparency (2026-05-14 per Trent:
   "make everything more see-through, brighten up the screen, make the photo
   seem natural"). Backdrop-filter keeps text readable against the bright photo. */
.svc-card,
.svc-cat-card,
.scrap-card,
.about-badge,
.hero-about-badge,
.phone-feature,
.as-box,
.cd-ico,
.card,
.tools,
.studio-canvas-wrap,
.studio-side,
.step-bar .step,
.info-modal,
.cs-card,
.price-card,
.cat-card,
.svc,
.stat-card,
.section,
.prod,
.feat .prod,
.trust,
.future,
.share,
.proof .stat,
.proof,
.disclosure,
.callout,
.offload-box,
.offload-cat,
.info-box {
  background: rgba(15,18,32,.32) !important;
  backdrop-filter: blur(8px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(135%) !important;
}

/* Contact form: even lighter so the live photo still shows through clearly. */
.form-wrap,
.form,
form.contact,
form.search,
.search {
  background: rgba(15,18,32,.25) !important;
  backdrop-filter: blur(8px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(135%) !important;
}

/* Scrap-metal panel sets an inline multi-stop gradient — replace with the
   same transparent treatment so it blends with everything else. */
.svc-scrap {
  background: rgba(15,18,32,.32) !important;
  backdrop-filter: blur(8px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(135%) !important;
}
.svc-scrap::before { background: none !important; }

/* Hero card panel — let the sky come through but keep title readable. */
.cs-card,
.hero .cd,
.hero-about {
  background: rgba(15,18,32,.45) !important;
  backdrop-filter: blur(10px) saturate(135%) !important;
  -webkit-backdrop-filter: blur(10px) saturate(135%) !important;
}

/* Site footer — lighter than before so the photo bleeds into the bottom edge. */
footer,
.site-footer,
.footer-wrap,
.footer-bar {
  background: rgba(7,8,16,.5) !important;
  backdrop-filter: blur(8px) saturate(120%) !important;
  -webkit-backdrop-filter: blur(8px) saturate(120%) !important;
}

/* Brighten the overall canvas a touch so the photo doesn't feel dim. */
html { filter: brightness(1.06) saturate(1.05); }