/* --- Header charcoal enhancement --- */
.site-header,
header.site-header,
header[role="banner"] {
  background: linear-gradient(180deg, #111827 0%, #1f2937 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.site-header .brand,
.site-header .brand:link,
.site-header .brand:visited { color: #f9fafb !important; text-decoration: none; }
.site-header nav a { color: #e5e7eb !important; opacity: 0.95; }
.site-header nav a:hover, .site-header nav a:focus {
  color: #ffffff !important;
  border-bottom: 2px solid #c8102e; padding-bottom: 2px;
}

/* --- Services grid layout --- */
.how-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(160px, 1fr));
  gap:1rem; justify-items:center; align-items:start;
}
.how-grid .pin-tile img{
  display:block; max-width:180px; width:100%; height:auto;
  border-radius:12px; border:1px solid var(--border, rgba(0,0,0,0.1)); background:#fff;
}
@media (max-width: 960px){ .how-grid{ grid-template-columns:repeat(2, minmax(160px, 1fr)); } }
@media (max-width: 520px){ .how-grid{ grid-template-columns:repeat(2, minmax(120px, 1fr)); gap:.75rem; }
  .how-grid .pin-tile img{ max-width:160px; border-radius:10px; }}

/* Phone formatting helpers */
.muted{ color: var(--muted-ink, #6b7280); }
.phone{ white-space: nowrap; }

/* Accessibility: visually hidden */
.sr-only{
  position:absolute!important; width:1px!important; height:1px!important;
  padding:0!important; margin:-1px!important; overflow:hidden!important;
  clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important;
}

/* Dropdowns / selects contrast */
select, select option { color: #111827; background-color: #ffffff; }
summary, details[open] summary { color: #111827; }
.dropdown, .dropdown-menu, .menu, .menu ul, .menu li, nav ul ul { background-color:#ffffff; }
.dropdown a, .dropdown-menu a, .menu a, nav ul ul a { color:#111827; }
.dropdown a:hover, .dropdown-menu a:hover, .menu a:hover, nav ul ul a:hover { color:#0b1220; background-color:#f3f4f6; }
::placeholder{ color:#6b7280; opacity:1; }



/* --- Home: lighten "Text a photo" button text --- */
.btn-text-photo{
  color:#f9fafb !important;      /* near-white */
  font-weight:600;
  letter-spacing:.02em;
}
.btn-text-photo:hover,
.btn-text-photo:focus{
  color:#ffffff !important;
  text-decoration:none;
}

/* --- Mobile: darken dropdown/menu fonts for contrast --- */
@media (max-width: 768px){
  .dropdown a, .dropdown-menu a, nav .menu a, .mobile-menu a, .site-header nav a {
    color:#0b1220 !important;    /* extra-dark ink */
  }
  .dropdown, .dropdown-menu, nav .menu, .mobile-menu {
    background:#ffffff !important;
  }
}



/* Trust line under hero */
.trust-line{
  color:#e5e7eb;
  font-weight:600;
  letter-spacing:.01em;
  margin:.25rem 0 0;
}



/* --- Visibility fix: make 'Text a photo' button filled for guaranteed contrast --- */
.btn.btn-outline.btn-text-photo{
  background: var(--red) !important;
  border-color: var(--red) !important;
  color: #ffffff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.04);
}
.btn.btn-outline.btn-text-photo:hover,
.btn.btn-outline.btn-text-photo:focus{
  filter: brightness(0.95);
  color:#ffffff !important;
  text-decoration:none;
  outline: 2px solid rgba(200,16,46,.35);
  outline-offset: 2px;
}

/* --- Fallback: if a section applies a dark background, ensure outline variant stays readable --- */
.section-dark .btn.btn-outline.btn-text-photo{
  background: #ffffff !important;
  color: #0b1220 !important;
  border-color: #ffffff !important;
}

/* --- Mobile dropdown/menu: stronger color and no opacity --- */
@media (max-width: 768px){
  .dropdown a, .dropdown-menu a, nav .menu a, .mobile-menu a, .site-header nav a {
    color:#0b1220 !important;
    opacity:1 !important;
  }
  .dropdown, .dropdown-menu, nav .menu, .mobile-menu {
    background:#ffffff !important;
  }
}

/* --- Ensure base font renders crisply across platforms --- */
html, body{
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* === Global: Unify all "Text a photo" buttons to filled red for maximum legibility === */
a[href^="sms:+14143746291"].btn.btn-outline,
.btn.btn-outline[href^="sms:+14143746291"],
a[href^="sms:+14143746291"].btn,
.btn[href^="sms:+14143746291"]{
  background: var(--red) !important;
  border-color: var(--red) !important;
  color:#ffffff !important;
  box-shadow: 0 1px 1px rgba(0,0,0,.05);
}
a[href^="sms:+14143746291"].btn:hover,
.btn[href^="sms:+14143746291"]:hover,
a[href^="sms:+14143746291"].btn:focus,
.btn[href^="sms:+14143746291"]:focus{
  filter: brightness(.95);
  color:#ffffff !important;
  text-decoration:none;
  outline: 2px solid rgba(200,16,46,.35);
  outline-offset: 2px;
}

/* === Header nav: full opacity for link text (crisper on all displays) === */
.site-header nav a{ opacity:1 !important; }


/* Ensure grid/gallery images scale and show on mobile */
.work-grid img, .team img, .pin-tile img, .gallery img, picture img{
  display:block; max-width:100%; height:auto;
}



/* Mobile image visibility hardening */
@media (max-width: 768px){
  img{ max-width:100% !important; height:auto !important; }
  .home-icons img, .how-grid img, .gallery img, .team img, .pin-tile img { 
    display:block !important; opacity:1 !important; 
  }
}



/* --- Portrait mobile hardening for image visibility --- */
@media (max-width: 820px){
  .home-icons, .how-grid{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(120px, 1fr)) !important;
    gap: .75rem !important;
    overflow: visible !important;
  }
  .home-icons .pin-tile, .how-grid .pin-tile{
    display:inline-block !important;
    visibility:visible !important;
  }
  .home-icons img, .how-grid img, .gallery img, .team img{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    opacity:1 !important;
  }
}

/* iOS Safari paint quirks — disable content-visibility/contain and force a paint */
@supports (-webkit-touch-callout: none){
  .home-icons, .how-grid, .gallery, .team{
    content-visibility: visible !important;
    contain: none !important;
  }
  img { -webkit-transform: translateZ(0); }
}