:root {
  --focus-ring: #e2c485;
}

/* Shared production hardening layered over the existing static templates. */
html { scroll-behavior: smooth; }

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 3px;
}

.btn-gold,
.btn-ghost,
.btn-dark,
.nav-est,
.btn-submit,
.btn-qb {
  min-height: 44px;
  touch-action: manipulation;
  transition-property: transform, color, background-color, border-color, box-shadow;
}

.btn-gold:active,
.btn-ghost:active,
.btn-dark:active,
.nav-est:active,
.btn-submit:active,
.btn-qb:active { transform: translateY(1px) scale(.985); }

.fi, .fs, .ft { min-height: 44px; }

.content-image-pair { padding: 2rem 0 4rem; }
.content-image-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.content-image-grid figure { margin: 0; overflow: hidden; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); border-radius: 1.25rem; }
.content-image-grid img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.content-image-grid figcaption { padding: .85rem 1rem; color: rgba(242,240,235,.62); font-size: .78rem; }

@media (max-width: 700px) {
  .content-image-grid { grid-template-columns: 1fr; }
}

/* Keep the primary hero local and give mobile its own intentional crop. */
.hero-bg-home {
  background-image: url('/assets/images/generated/garage-finished-floor-florida.png') !important;
}

@media (max-width: 768px) {
  .hero-bg-home {
    background-image: url('/assets/images/generated/garage-finished-floor-florida.png') !important;
    background-position: 58% center;
  }

  .btn-gold .arr,
  .btn-ghost .arr,
  .btn-dark .arr,
  .nav-est .arr,
  .btn-submit .arr { display: none !important; }

  .hero-inner, .wrap { padding-left: 1.15rem; padding-right: 1.15rem; }
  .hero-h1 { max-width: 100%; font-size: clamp(2.75rem, 13vw, 4.3rem); }
  .hero-sub { font-size: .98rem; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}