/* LUNA PAINTING & DRYWALL — V13 CHARCOAL / ONYX / CRIMSON EDITION
   A standalone visual theme layered over the unchanged V12 structural CSS.
   The content, interactions, responsive layout, and gallery behavior are preserved. */
:root {
  --navy:#171719;
  --navy2:#262629;
  --gold:#ce2634;
  --gold2:#f24854;
  --ink:#f4f3f3;
  --muted:#adb0b7;
  --cream:#18181b;
  --line:#38383d;
  --ruby:#e22d3c;
  --ruby-bright:#ff5966;
  --ash:#a6a5aa;
  --slate:#222226;
  --onyx:#101012;
}
html{background:var(--onyx)}
body{background:var(--onyx);color:#f3f1f2}
::selection{background:#ad202d;color:white}
:focus-visible{outline:2px solid #ff7b83;outline-offset:3px}
.demo-ribbon{background:#282225;color:#e1d3d6;border-bottom:1px solid #6e3337}
.demo-spark{background:var(--ruby-bright)}
.topbar{background:#0c0c0e;color:#bfbec2;border-bottom:1px solid #222225}
.topbar a{color:#ff868d}
.site-header{background:#17171a;box-shadow:0 5px 23px #0008;border-bottom:1px solid #343036}
.brand-text strong{color:#fbf8f8}
.brand-text small{color:#c9c6ca}
.nav-links a{color:#e6e3e5}
.nav-links a:hover,.nav-links a:focus-visible{color:#ff7180}
.nav-toggle span{background:#f4f1f2}
.btn{border-radius:5px}
.btn-gold{
 color:#fff;
 background:linear-gradient(125deg,#f04955 0%,#d32435 55%,#ad182a 100%);
 box-shadow:0 5px 22px #b90c2936;
}
.btn-gold:hover{background:linear-gradient(125deg,#ff5e6a,#e23042 65%,#bf1b2e);box-shadow:0 10px 26px #e0243e40}
.btn-navy{background:#2b2b2f;color:#fff;border:1px solid #4b464b}
.btn-outline{background:#14121591;color:#fff;border:1px solid #e8d9dc98}
.btn-outline:hover{background:#52262bbd;border-color:#ff9ca3}
/* Rich near-black hero, ruby lighting on the photograph rather than a flat scarlet fill. */
.hero{background:#100c0e}
.hero-shade{
 background:radial-gradient(ellipse at 87% 24%,#cc24392d 0%,transparent 54%),
 linear-gradient(90deg,#0b0a0cf5 0%,#131011ed 38%,#2511169e 67%,#270d1147 100%),
 linear-gradient(0deg,#080708a8,transparent 52%);
}
.hero-kicker{color:#ff878e}
.gold-line{background:#f24757}
.kicker-dot{color:#fb8490}
.hero h1 em,.section h2 em,.about-content h2 em,.contact-left h2 em,.statement h2 em{color:#f45460}
.hero p{color:#e2dce0}
.hero-corner{color:#c4abb2a6}
.play-ring{border-color:#fe626e;color:#ff7180}
.video-trigger small{color:#bdb8bd}
.features{background:linear-gradient(105deg,#242326,#151517 62%,#2f171c);border-top:1px solid #4e2b32;border-bottom:1px solid #383034}
.feature{border-right-color:#65606750}
.feature-icon{background:#ff4f5a17;color:#ff6974;border:1px solid #d3354652}
.feature small{color:#b8b5bb}
/* Alternating charcoal surfaces give the site depth without bright white blocks. */
.services-section{background:radial-gradient(ellipse at 90% 0%,#5820293b,transparent 49%),linear-gradient(145deg,#171719,#202024 66%,#19181b)}
.section h2,.about-content h2,.contact-left h2,.film-intro h2,.portfolio-intro h2{color:#f6f2f3}
.eyebrow{color:#fb7982}
.section-intro,.film-intro>p,.portfolio-desc{color:#b7b4bb}
.service-card{background:#29292d;border:1px solid #444047;box-shadow:0 15px 37px #0004;border-radius:7px}
.service-card:hover{box-shadow:0 19px 43px #0009;border-color:#b63848}
.service-copy{border-top:2px solid #be293c}
.service-copy h3{color:#f7f5f6}
.service-copy p{color:#bab5bc}
.service-image{background:#333033}
.service-image span{background:linear-gradient(140deg,#b92031,#ee4050);color:#fff}
.statement{background:radial-gradient(circle at 87% 47%,#8c152a82,transparent 44%),linear-gradient(115deg,#0e0e10 0%,#27151b 56%,#47141f 100%);border-block:1px solid #4a222b}
.statement:after{border-color:#e447585c;box-shadow:0 0 0 110px #ef42510c,0 0 0 220px #df293506}
.statement p{color:#ff8790}
.text-link{border-bottom-color:#ee4e61;color:#ff929b}
.gallery-section{background:linear-gradient(135deg,#1d1c1f,#131315 78%)}
.sample-note{background:#38272c;color:#e7afb5;border:1px solid #744049}
.gallery-filters .filter,.filter{background:#2a292d;border-color:#4f484e;color:#ece8e9}
.filter.active,.filter[aria-pressed="true"]{background:#c32639;border-color:#e13a4e;color:white}
.filter:hover{border-color:#ed5665;color:white}
.gallery-item{background:#2a262b;border-radius:5px}
.gallery-item:after{background:linear-gradient(transparent,#0b090cde)}
.gallery-item figcaption span{color:#ff8793}
.gallery-browse-more>span{color:#b9b4bc}
.about-section{background:radial-gradient(ellipse at left bottom,#55202a3c,transparent 54%),#242327}
.about-art{background:#312d31;box-shadow:22px 22px 0 #2e1b23;border-radius:5px}
.about-art img{border-radius:5px}
.about-label{background:#cf2839;color:#fff}
.about-content>p:not(.eyebrow){color:#c2bcc4}
.about-divider{background:#52484f}
.about-mini span{color:#ff8b94}
.about-mini strong{color:#f4f1f4}
/* Film showcase */
.film-section{background:radial-gradient(ellipse at 12% 15%,#56192337,transparent 51%),#141416}
.film-intro h2 em{color:#ff6876}
.film-frame{background:#0d0c0e;box-shadow:0 25px 70px #000a;border:1px solid #5d363d;border-radius:6px}
.film-overlay{background:linear-gradient(0deg,#10080be8,#260f144e 54%,#0807088a 100%)}
.film-play-icon{border-color:#fa6673;background:#390d18d9;color:#fff;box-shadow:0 0 0 12px #d8304138}
.film-label-top span{color:#ff7a83}
.film-label-bottom span{color:#ff9fa6}
.film-video{background:#100d10}
.film-note{color:#a9a2aa}
/* Google review: signature red glow on the onyx panel */
.review-cta-section{background:#232125}
.review-cta-panel{background:radial-gradient(circle at 95% 15%,#af193688,transparent 45%),linear-gradient(110deg,#0c0c0e 0%,#2d121b 60%,#5b1727 100%);border:1px solid #6f303d;border-radius:7px;box-shadow:0 22px 45px #0007}
.review-cta-panel:after{border-color:#fa65704c;box-shadow:0 0 0 90px #fa36470c,0 0 0 190px #fa364706}
.review-cta-copy .eyebrow{color:#ff939d}
.review-cta-copy h2 em{color:#ff6677}
.review-cta-copy>p:last-child{color:#e3d5da}
.review-cta-action small{color:#e3c5cd}
/* Contact and inputs stay high-contrast and accessible on dark surfaces. */
.contact-section{background:radial-gradient(ellipse at 95% 100%,#5c25323b,transparent 49%),linear-gradient(125deg,#19191c,#242327)}
.contact-left>p:not(.eyebrow){color:#c3bdc4}
.contact-avatar{background:#4c202d;color:#ffb6bb;border:1px solid #9e3e50}
.contact-person small{color:#fb8e98}
.contact-person strong{color:#f7f3f5}
.contact-person a{color:#f0c3c8}
.contact-location{color:#c2b6bd}
.contact-email{background:#2b292e;border:1px solid #54424c;border-left:4px solid #e63346;box-shadow:0 9px 25px #0005;border-radius:4px}
.email-symbol{background:#4d202c;color:#ff929b}
.contact-email-heading{color:#ff8e97}
.contact-email-address{color:#f4eef1}
.contact-email-status{color:#c8b0b8}
.quote-box{background:#29282c;border-top:4px solid #e63b4f;border-radius:6px;box-shadow:0 17px 48px #0007;border-left:1px solid #474047;border-right:1px solid #474047;border-bottom:1px solid #474047}
.quote-header h3{color:#fff}
.quote-header p{color:#b9b3bb}
.quote-box label{color:#ebe6ea}
.quote-box input,.quote-box select,.quote-box textarea{background:#19191c;color:#fff;border:1px solid #61545e;caret-color:#ff737e}
.quote-box input::placeholder,.quote-box textarea::placeholder{color:#a9a0a8}
.quote-box input:focus,.quote-box textarea:focus,.quote-box select:focus{border-color:#fa6170;outline:2px solid #fd566b60}
/* Footer and always-visible mobile conversion bar. */
.footer{background:linear-gradient(140deg,#0b0b0d,#181114 88%);border-top:1px solid #4b222d;color:#e7e4e6}
.footer-top{border-bottom-color:#6e5d663b}
.footer-brand img{filter:drop-shadow(0 5px 7px #000a)}
.footer-top strong,.footer-email-label{color:#ff8b95!important}
.footer-top a,.footer-top span{color:#c7bec5}
.footer-bottom{color:#aaa0a9}
.mobile-cta{background:#151416;border-top:1px solid #53343b;box-shadow:0 -5px 22px #0009}
.mobile-call{background:#303034;border:1px solid #5c555b;color:#fff}
.mobile-quote{background:linear-gradient(130deg,#f14654,#c91f35);color:#fff}
.mobile-cta a{box-shadow:0 3px 12px #0004}
/* Dedicated full gallery */
.nav-links a[aria-current="page"]{color:#ff808a}
.portfolio-hero{background:#130c10}
.portfolio-hero-shade{background:radial-gradient(ellipse at 85% 45%,#c12b3a39,transparent 50%),linear-gradient(90deg,#0e0b0ef7,#231017e5 48%,#200b105c 100%)}
.portfolio-back,.portfolio-eyebrow{color:#ff8b94}
.portfolio-hero h1 em{color:#fa5f6e}
.portfolio-hero-inner>p:last-child{color:#e7dfe4}
.portfolio-section{background:linear-gradient(140deg,#1f1e21,#141416 75%)}
.portfolio-intro h2 em{color:#ff6674}
.portfolio-desc strong{color:#ffa0a8}
.portfolio-filter{background:#2c2a2e;border-color:#50474e;color:#ebe6ea}
.portfolio-filter:hover{border-color:#ef6975}
.portfolio-filter.active,.portfolio-filter[aria-pressed="true"]{background:#c6283b;border-color:#e94153;color:#fff}
.portfolio-count{color:#aca4ac}
.portfolio-tile{background:#2c292e;border-radius:5px}
.portfolio-tile:after{background:linear-gradient(transparent,#0e090ddf)}
.portfolio-tile-number{color:#ff8b94}
.portfolio-tile-type{color:#e1d9de}
.portfolio-reality-note{color:#c7b4bb}
.gallery-contact-cta{background:radial-gradient(circle at 85% 0%,#a427385c,transparent 55%),linear-gradient(135deg,#181215,#32151e);border-top:1px solid #602631}
.gallery-contact-cta p:last-child{color:#e1d2d8}
.gallery-contact-cta .eyebrow{color:#ff8b97}
.gallery-lightbox{background:#171416;box-shadow:0 20px 90px #000d}
.gallery-lightbox::backdrop{background:#080608f0}
.lightbox-caption span{color:#ff8e99}
.lightbox-inner>p{color:#bdb3bc}
.lightbox-close{background:#eee9eb;color:#171619}
.lightbox-nav{background:#292528ef;color:#fff}
@media(max-width:760px){
 .hero-shade{background:radial-gradient(ellipse at 80% 42%,#b820352f,transparent 62%),linear-gradient(0deg,#0a090bf5 0%,#1c1115d6 47%,#140d11a1 100%)}
 .mobile-cta{background:#151416}
 .review-cta-panel{border-radius:5px}
}
@media(prefers-reduced-motion:reduce){.service-card:hover{transform:none}}


/* V19: Original Luna Painting & Drywall identity and requested selective colors. */
/* The original logo uses black lettering and a black painter, so the header must be light. */
.topbar{
  background:#9b0c1c;
  color:#fff8f8;
  border-bottom:1px solid #eb5361;
}
.topbar a{color:#ffffff;text-decoration:underline;text-underline-offset:2px}
.topbar a:hover,.topbar a:focus-visible{color:#ffe1e5}
.site-header{background:#f7f6f5;border-bottom:1px solid #ddd4d5;box-shadow:0 4px 16px #0006}
.nav-row{height:142px}
.brand{min-width:185px;gap:0}
.brand img{width:185px;height:139px;object-fit:contain;display:block}
.nav-links a{color:#232125}
.nav-links a:hover,.nav-links a:focus-visible,
.nav-links a[aria-current="page"]{color:#ba142a}
.nav-toggle span{background:#252125}
/* Mobile nav panel must also contrast with the new light header. */
.nav-links{background-color:#f7f6f5}
.nav-links a{border-bottom-color:#ded8da}
/* Only the two requested content sections become solid true black. */
.services-section{background:#000000}
.about-section{background:#000000}
/* Keep the red review card exactly as-is; darken its OUTER rectangle only. */
.review-cta-section{background:#09080a}
/* Contact section: deep black upper area, more visible red rising from bottom. */
.contact-section{
  background:
    radial-gradient(ellipse 100% 88% at 85% 103%,rgba(196,17,47,.54) 0%,rgba(135,9,35,.39) 30%,rgba(67,8,21,.22) 54%,transparent 77%),
    linear-gradient(0deg,#2c0711 0%,#160b0f 43%,#070709 100%);
}
.quote-box{background:#18171a;border-color:#423039;border-top-color:#e63b4f}
/* Keep all parts of the original logo legible against the dark footer. */
.footer-brand{display:inline-flex;align-items:center;justify-content:flex-start;width:max-content;max-width:100%;background:#f7f6f5;padding:9px 12px;border-radius:4px;box-shadow:0 6px 20px #0008}
.footer-brand img{width:200px;height:auto;filter:none}
@media(max-width:1000px){
  .brand{min-width:168px}
  .brand img{width:168px;height:126px}
}
@media(max-width:760px){
  /* Show the requested red top band also on phones. */
  .topbar{display:block}
  .topbar-inner{min-height:0;padding:8px 0;display:flex;flex-direction:column;gap:2px;text-align:center;font-size:9px;line-height:1.35}
  .nav-row{height:111px}
  .brand{min-width:0}
  .brand img{width:144px;height:108px}
  .nav-links{background:#f7f6f5;box-shadow:0 12px 28px #0005}
  .nav-links a{color:#222024}
  .footer-brand img{width:172px}
}
@media(max-width:380px){
  .brand img{width:132px;height:100px}
  .nav-row{height:105px}
}

/* V20 — exact red from the customer-supplied original logo (#ED1C24).
   The navigation transitions from Luna red at the top to charcoal at the base.
   An unobtrusive warm-gray spotlight behind the unaltered transparent logo
   preserves the black paint bucket, seated painter and wordmark. */
.topbar {
  background: #ed1c24;
  border-bottom-color: #f44950;
}
.site-header {
  background: #3b3d42;
  border-bottom: 1px solid #333338;
  box-shadow: 0 5px 19px rgba(0, 0, 0, .40);
}
.brand {
  position: relative;
  isolation: isolate;
}
.brand::before {
  content: "";
  position: absolute;
  inset: 0 -17px;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 75% 77% at 50% 52%,
    rgba(245,241,238,.98) 0%,
    rgba(231,227,224,.97) 43%,
    rgba(216,212,212,.88) 60%,
    rgba(196,194,195,.38) 78%,
    transparent 100%);
}
/* Desktop navigation sits directly over the dark gradient. */
.nav-links a,
.nav-links a[aria-current="page"] { color: #ffffff; }
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"]:hover { color: #ffe0e2; }
.nav-toggle span { background: #ffffff; }
/* The dropdown itself stays light for readable text on phones. */
@media(max-width:760px) {
  .nav-links a,
  .nav-links a[aria-current="page"] { color: #252125; }
  .nav-links a:hover,
  .nav-links a:focus-visible,
  .nav-links a[aria-current="page"]:hover { color: #b11125; }
}
/* V20 finishing pass: the logo's contrasting light is a diffused halo,
   not a separate white rectangle; the desktop menu stays transparent. */
.brand::before {
  inset: 8px 6px;
  background: rgba(230,226,223,.90);
  border-radius: 50%;
  filter: blur(15px);
}
.nav-links { background-color: transparent; }
@media(max-width:760px) {
  .nav-links { background-color: #f7f6f5; }
}
/* Subtle second pool of light under the hanging black paint bucket. */
.brand::before {
  background:
    radial-gradient(ellipse 40% 35% at 69% 85%,
      rgba(243,239,236,.98) 0%, rgba(227,222,220,.87) 55%, transparent 100%),
    radial-gradient(ellipse 72% 73% at 47% 50%,
      rgba(238,234,231,.96) 0%, rgba(227,222,220,.88) 49%, transparent 100%);
  filter: blur(11px);
}

/* V22: An uninterrupted, 85%-black charcoal navigation bar.
   Remove all earlier localized white/gray halos behind the original logo.
   A narrow edge light on the transparent artwork maintains readability,
   without introducing a circle, patch, or different background color. */
.site-header {
  background: #262626;
  border-bottom-color: #202020;
}
.brand::before {
  content: none !important;
  display: none !important;
  background: none !important;
  filter: none !important;
}
.brand img {
  filter: drop-shadow(0 0 1px rgba(245,245,245,.88))
          drop-shadow(0 0 1.25px rgba(245,245,245,.52));
}


/* V24 — requested 30% black neutral header (#B3B3B3), no gradient, no halo.
   The original Luna artwork is unchanged. Adjust navigation ink solely
   to remain legible on the newly lightened uniform header. */
.site-header {
  background: #b3b3b3;
  border-bottom-color: #949494;
}
.brand img {
  filter: none;
}
.nav-links a,
.nav-links a[aria-current="page"] {
  color: #181818;
}
.nav-links a:hover,
.nav-links a:focus-visible,
.nav-links a[aria-current="page"]:hover {
  color: #8a0714;
}
.nav-toggle span { background: #181818; }
/* The original footer logo is removed, so the two remaining groups share
   the footer cleanly at desktop and mobile widths. */
.footer-top { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 760px) {
  .nav-links a,
  .nav-links a[aria-current="page"] { color: #252125; }
}

/* V26 — Clear request feedback (only the Formspree form; rest of design unchanged). */
#estimateQuoteForm .form-submit:disabled{opacity:.70;cursor:wait}
#estimateQuoteForm #formNotice[data-state="success"]{background:#e9f5ee;color:#205c39}
#estimateQuoteForm #formNotice[data-state="error"]{background:#fff0f0;color:#a02c2c}

/* V27 — phone role labels alongside footer numbers */
.footer-top .footer-phone-label{color:#ff8b95;font-size:11px;font-weight:700;margin-left:9px;white-space:nowrap}