/* Nature-photo backdrop · 16:17 */
html {
  background-color: #0b0d18 !important;
  background-image:
    linear-gradient(rgba(7,8,16,0.30), rgba(7,8,16,0.30)),
    url('/assets/admin-bg/Aurora_borealis_over_Eielson_Air_Force_Base_Alaska.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.30), rgba(7,8,16,0.30)),
    url('/assets/admin-bg/Aurora_borealis_over_Eielson_Air_Force_Base_Alaska.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;
}

/* 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); }

/* ─── SITE-WIDE READABILITY (2026-05-16) ───────────────────────────────
   Public pages sit on a bright nature photo, and many use var(--muted)
   #8896b8 + var(--light) #c0c8e0 — those wash out against the sky.
   Bump both vars + add a soft 2-stop shadow to readable text so it
   pops without touching form inputs or buttons. */
:root {
  --muted: #d5dcef !important;
  --light: #f2f4fb !important;
}

p, li, dt, dd, blockquote, summary, label,
h1, h2, h3, h4, h5, h6,
.sec-eye, .sec-sub, .sec-title,
.cd-txt strong, .cd-txt span, .cd-txt a,
.why-item p, .why-item h4 {
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.55);
}

/* Inputs, selects, textareas, and buttons sit on their own fill — no
   shadow needed and it can blur the cursor / placeholder rendering. */
input, select, textarea, button,
.btn, .btn-sub, .nav-phone, .svc-cat-link, .svc-scrap-link {
  text-shadow: none !important;
}

/* Pages with .why-item set opacity:.8 on the description, which re-dims
   even after the color bump. Kill the opacity and pin the color. */
.why-item p { opacity: 1 !important; color: #f2f4fb !important; }
.why-item h4 { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.55) !important; }

/* Gradient eyebrows/titles use -webkit-text-fill-color:transparent. On
   the live photo bg the brand gradient is too dark to read. Force solid
   white with a tight dark shadow — readable on any background. */
.sec-eye, .page-eye, .hero-eyebrow,
.page-hero h1 em, .hero h1 em {
  background: none !important;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
  text-shadow:
    0 1px 2px rgba(0,0,0,1),
    0 0 6px rgba(0,0,0,.95),
    0 2px 4px rgba(0,0,0,.85) !important;
  filter: none !important;
  font-weight: 700 !important;
}

/* Section subtitles (.sec-sub) inherit --muted which is overridden, but
   force pure bright + shadow for full readability on the photo. */
.sec-sub {
  color: #f2f4fb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.85), 0 0 8px rgba(0,0,0,.6) !important;
  font-weight: 400 !important;
}
.page-eye::before, .page-eye::after,
.sec-eye::before, .sec-eye::after,
.hero-eyebrow::before, .hero-eyebrow::after {
  background: linear-gradient(90deg, #a8c7ff, #d8b4fe) !important;
  filter: drop-shadow(0 0 4px rgba(0,0,0,.8)) !important;
}

/* Same-dim trap: .ab-est on about.html uses rgba(85,133,245,.45) — that
   .45 alpha makes it nearly invisible on the photo. */
.ab-est, .ab-label, .ab-stat-lbl {
  color: #e8ecf6 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 6px rgba(0,0,0,.6) !important;
}

/* Page-hero title + body sits over the photo too — bump weight of shadows. */
.page-hero h1, .page-hero p, .page-breadcrumb, .page-breadcrumb a {
  text-shadow: 0 1px 2px rgba(0,0,0,.8), 0 0 8px rgba(0,0,0,.6) !important;
}
.page-breadcrumb, .page-breadcrumb a { color: #e8ecf6 !important; }

/* Footer copyright + links use --muted; vars already overridden, just
   ensure the shadow applies so they pop on the dim footer fill. */
footer p, footer a {
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.5);
}

/* Many pages use hardcoded inline color:#8896b8 / #a8b3cf for stat-tile
   labels, hero subtitles, and helper text. Inline styles beat external
   CSS by specificity, so attribute selector + !important is needed. */
[style*="color:#8896b8"], [style*="color: #8896b8"] {
  color: #d5dcef !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.55);
}
[style*="color:#a8b3cf"], [style*="color: #a8b3cf"] {
  color: #e8ecf6 !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.55);
}
[style*="color:#c0c8e0"], [style*="color: #c0c8e0"] {
  color: #f2f4fb !important;
  text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 0 6px rgba(0,0,0,.55);
}