html { scroll-behavior: smooth; }
body { font-family: 'Manrope', system-ui, sans-serif; background: #0B0F13; color: #F5F3EE; }
.display { font-family: 'Archivo Black', system-ui, sans-serif; letter-spacing: -0.01em; }

.hazard-stripes {
  display: none !important;
}

.grain::before {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 3px 3px;
  pointer-events: none;
  mix-blend-mode: overlay;
}

.cta-glow { box-shadow: 0 0 0 4px rgba(245,179,1,0.18), 0 10px 40px -10px rgba(245,179,1,0.6); }

/* Floating mobile bottom call bar — pulsing glow to grab attention */
@keyframes ht-pulse-glow {
  0%, 100% {
    box-shadow:
      0 0 0 0 rgba(245, 179, 1, 0.55),
      0 0 24px 2px rgba(245, 179, 1, 0.35),
      0 10px 40px -10px rgba(245, 179, 1, 0.7);
  }
  50% {
    box-shadow:
      0 0 0 10px rgba(245, 179, 1, 0),
      0 0 48px 8px rgba(245, 179, 1, 0.55),
      0 14px 60px -8px rgba(245, 179, 1, 0.9);
  }
}
.ht-floating-call {
  animation: ht-pulse-glow 1.8s ease-in-out infinite;
  will-change: box-shadow, transform, opacity;
  /* Hidden until the hero CTA scrolls out of view (see app.js IntersectionObserver) */
  opacity: 0;
  pointer-events: none;
  transform: translateY(140%);
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.ht-floating-call.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.ht-floating-call:hover { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ht-floating-call { animation: none; box-shadow: 0 0 0 4px rgba(245,179,1,0.2), 0 10px 40px -10px rgba(245,179,1,0.7); }
}

/* Little phone-shake accent — lightly nudges every few seconds */
@keyframes ht-phone-ring {
  0%, 85%, 100% { transform: rotate(0deg); }
  88%  { transform: rotate(-8deg); }
  91%  { transform: rotate(8deg); }
  94%  { transform: rotate(-6deg); }
  97%  { transform: rotate(4deg); }
}
.ht-floating-call svg { animation: ht-phone-ring 2.4s ease-in-out infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .ht-floating-call svg { animation: none; }
}
.ring-amber { box-shadow: inset 0 0 0 1px rgba(245,179,1,0.35); }
.pill { border: 1px solid rgba(245,243,238,0.18); }
.section-rule { height: 1px; background: linear-gradient(90deg, transparent, rgba(245,179,1,.45), transparent); }

@keyframes pulseDot { 0%,100% { opacity: .4 } 50% { opacity: 1 } }
.dot-pulse { animation: pulseDot 1.6s ease-in-out infinite; }

details[open] summary .chev { transform: rotate(90deg); }
.chev { transition: transform .2s ease; }

.kbd { border: 1px solid rgba(245,243,238,0.15); padding: 2px 6px; border-radius: 4px; font-size: 12px; color: #F5F3EE; background: rgba(255,255,255,0.04); }

/* Prose styles used inside service detail pages */
.prose-tow p { margin-top: 1rem; line-height: 1.75; color: rgba(245,243,238,0.85); font-size: 1.05rem; }
.prose-tow h2 { margin-top: 2.5rem; }
.prose-tow h3 { margin-top: 1.75rem; color: #F5B301; }
.prose-tow ul { margin-top: 1rem; }
.prose-tow li { padding-left: 1.5rem; position: relative; margin-top: .5rem; color: rgba(245,243,238,0.85); }
.prose-tow li::before { content: ""; position: absolute; left: 0; top: .65rem; width: .5rem; height: .5rem; background: #F5B301; border-radius: 1px; transform: rotate(45deg); }

/* Kill WordPress's default block-gap so sections sit flush against each other */
body > .wp-site-blocks > * + * { margin-block-start: 0 !important; }
.wp-site-blocks,
.wp-block-group,
.wp-block-group.is-layout-flow,
.wp-block-group.is-layout-constrained,
main.wp-block-group {
  gap: 0 !important;
  row-gap: 0 !important;
}
.wp-block-group > * + *,
main.wp-block-group > * + * {
  margin-block-start: 0 !important;
}
main.wp-block-group > section,
main.wp-block-group > div {
  margin: 0 !important;
}

/* Mobile menu (hidden by default, toggled via JS) */
.ht-mobile-menu[hidden] { display: none !important; }

/* ----- Contact Form 7: blend CF7's default <input>/<textarea>/<select> into the dark theme */
.ht-cf7-form .wpcf7 { color: inherit; }
.ht-cf7-form .wpcf7-form p { margin: 0 0 1rem; }
.ht-cf7-form label {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(245, 243, 238, 0.6);
  margin-bottom: 0.4rem;
}
.ht-cf7-form input[type="text"],
.ht-cf7-form input[type="email"],
.ht-cf7-form input[type="tel"],
.ht-cf7-form input[type="url"],
.ht-cf7-form input[type="number"],
.ht-cf7-form textarea,
.ht-cf7-form select {
  width: 100%;
  background: #1A1F26;
  color: #F5F3EE;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.375rem;
  padding: 0.75rem 0.9rem;
  font-family: inherit;
  font-size: 0.95rem;
  box-sizing: border-box;
  transition: border-color 0.15s ease;
}
.ht-cf7-form input:focus,
.ht-cf7-form textarea:focus,
.ht-cf7-form select:focus {
  outline: none;
  border-color: #F5B301;
}
.ht-cf7-form input::placeholder,
.ht-cf7-form textarea::placeholder { color: rgba(245, 243, 238, 0.35); }
.ht-cf7-form textarea { min-height: 120px; resize: vertical; }
.ht-cf7-form input[type="submit"],
.ht-cf7-form button[type="submit"] {
  background: #F5B301;
  color: #0B0F13;
  font-weight: 800;
  font-size: 1rem;
  padding: 0.85rem 1.5rem;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  box-shadow: 0 0 0 4px rgba(245, 179, 1, 0.18), 0 10px 40px -10px rgba(245, 179, 1, 0.6);
  transition: background 0.15s ease;
}
.ht-cf7-form input[type="submit"]:hover { background: #FFD24A; }
.ht-cf7-form .wpcf7-response-output {
  margin: 1rem 0 0;
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  border: 1px solid rgba(245, 179, 1, 0.3);
  background: rgba(245, 179, 1, 0.08);
  color: #F5B301;
  font-size: 0.875rem;
}
.ht-cf7-form .wpcf7-not-valid-tip { color: #E63946; font-size: 0.8rem; margin-top: 0.25rem; }

/* ----- TrustIndex Google Reviews widget: minor tweaks so it doesn't clash with dark bg */
.ti-widget, .ti-widget-wrapper { background: transparent !important; }
.ti-widget * { color-scheme: dark; }

/* ----- Section backgrounds: subtle variety between alternating sections */
section.alt-bg { background: rgba(26, 31, 38, 0.4); }

/* ----- SEO/accessibility: hide visually but keep for screen readers */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0;
  margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ----- Image transitions: don't mask decorative photos that fade on hover */
img { max-width: 100%; height: auto; }