/* ==========================================================================
   Home Security page - page-specific enhancements
   Layered on top of assets/css/style.css. Every selector below is scoped
   under #main so nothing here can touch .site-header or .site-footer,
   which are shared, finalized, and must render identically to every
   other page on the site.
   ========================================================================== */

/* ---------- Shared helpers ---------- */
#main .hw-btn-icon { width: 18px; height: 18px; flex-shrink: 0; }
#main .hw-btn-arrow { width: 16px; height: 16px; flex-shrink: 0; transition: transform .2s ease; }
#main .btn:hover .hw-btn-arrow { transform: translateX(3px); }
#main .eyebrow svg { width: 15px; height: 15px; flex-shrink: 0; }

#main .hw-kicker-icon {
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--brand-tint); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}
#main .hw-kicker-icon svg { width: 26px; height: 26px; }

/* Generic focus treatment for the new interactive elements added on this
   page. Scoped to #main so header/footer focus styling is untouched. */
#main a:focus-visible,
#main button:focus-visible,
#main video:focus-visible {
  outline: 3px solid var(--brand-300);
  outline-offset: 3px;
  border-radius: var(--radius-pill);
}
#main .card:focus-within,
#main .media-card:focus-within {
  box-shadow: 0 0 0 3px var(--brand-300), var(--shadow);
}

/* ---------- Page header ---------- */
.hw-hero-rule {
  width: 64px; height: 3px; border-radius: var(--radius-pill);
  background: linear-gradient(90deg, var(--brand-300), var(--brand));
  margin: 4px 0 22px;
}
#main .page-header .hero-actions .btn { position: relative; }

/* Staggered entrance for the header copy, layered on the existing
   [data-reveal] intersection-observer hook - no JS changes required. */
#main .page-header [data-reveal] { transition-delay: var(--reveal-delay, 0s); }

/* ---------- Section kickers / eyebrows ---------- */
#main .hw-eyebrow-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-700); flex-shrink: 0;
}
.on-dark .hw-eyebrow-icon, .section-dark .hw-eyebrow-icon { background: rgba(255,255,255,0.12); color: var(--brand-300); }
#main .hw-eyebrow-icon svg { width: 12px; height: 12px; }

/* ---------- Feature cards ("Our Premium Home Security") ---------- */
#main .hw-feature-card {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
#main .hw-feature-card::before {
  content: "";
  position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, var(--brand-300), var(--brand));
  transform: scaleX(0); transform-origin: left;
  transition: transform .35s ease;
}
#main .hw-feature-card:hover::before,
#main .hw-feature-card:focus-within::before { transform: scaleX(1); }

#main .hw-card-index {
  position: absolute; top: 10px; right: 18px;
  font-size: 3.2rem; font-weight: 800; line-height: 1;
  color: var(--ink-100); z-index: -1;
  user-select: none;
}

#main .hw-feature-card .icon-tile { transition: background-color .25s ease, color .25s ease, transform .25s ease; }
#main .hw-feature-card:hover .icon-tile,
#main .hw-feature-card:focus-within .icon-tile {
  background: var(--brand); color: #fff; transform: translateY(-2px) rotate(-4deg);
}

/* The middle card gets a quiet "featured" treatment so the grid has rhythm
   instead of three visually identical blocks. */
@media (min-width: 621px) {
  #main .hw-feature-card--featured {
    background: var(--brand-tint);
    border-color: var(--brand-300);
    transform: translateY(-10px);
  }
  #main .hw-feature-card--featured:hover { transform: translateY(-13px); }
  #main .hw-feature-card--featured .icon-tile { background: var(--brand); color: #fff; }
  #main .hw-feature-card--featured .hw-card-index { color: rgba(83, 126, 77, 0.16); }
}

/* ---------- Home security systems gallery ---------- */
#main .hw-gallery-card { display: flex; flex-direction: column; }
#main .hw-gallery-media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/10;
}
#main .hw-gallery-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
#main .hw-gallery-card:hover .hw-gallery-media img,
#main .hw-gallery-card:focus-within .hw-gallery-media img { transform: scale(1.06); }
#main .hw-gallery-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(16,20,15,0.88) 0%, rgba(16,20,15,0.15) 55%, rgba(16,20,15,0) 75%);
}
#main .hw-gallery-badge {
  position: absolute; top: 16px; left: 16px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(255,255,255,0.92); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
}
#main .hw-gallery-badge svg { width: 19px; height: 19px; }
#main .hw-gallery-title {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 14px 20px 16px;
  color: #fff;
  margin: 0;
}
#main .hw-gallery-card .body { padding-top: 18px; }
#main .hw-gallery-card .body .btn { margin-top: 18px; width: 100%; }

/* ---------- The H&W Home Security Difference: stat rings ---------- */
#main .hw-stat-stack { display: grid; gap: var(--gap-content); }
#main .hw-stat-ring-block {
  display: flex; align-items: flex-start; gap: 20px;
}
#main .hw-stat-ring-block + .hw-stat-ring-block { padding-top: var(--gap-content); border-top: 1px solid var(--line); }

#main .hw-stat-ring {
  position: relative; flex-shrink: 0;
  width: 92px; height: 92px;
}
#main .hw-stat-ring-svg { width: 100%; height: 100%; transform: rotate(-90deg); }
#main .hw-stat-ring-track { fill: none; stroke: var(--brand-tint); stroke-width: 2.6; }
#main .hw-stat-ring-fill {
  fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round;
  stroke-dasharray: 97.4;
  stroke-dashoffset: 97.4;
  transition: stroke-dashoffset 1.5s cubic-bezier(.16,1,.3,1);
}
#main [data-reveal].is-visible .hw-stat-ring-fill {
  stroke-dashoffset: calc(97.4 - (97.4 * var(--pct, 0) / 100));
}
#main .hw-stat-ring-value {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 1.05rem; color: var(--brand-700);
}
#main .hw-stat-ring-copy h3 { margin-bottom: 6px; }
#main .hw-stat-stack__cta { margin-top: 28px; }

/* Video panel framing */
#main .hw-video-frame {
  position: relative;
}
#main .hw-video-frame::before {
  content: "";
  position: absolute; inset: -14px;
  border-radius: calc(var(--radius-lg) + 14px);
  background: linear-gradient(140deg, var(--brand-tint), transparent 60%);
  z-index: -1;
}
#main .hw-video-frame video { width: 100%; }

@media (max-width: 480px) {
  #main .hw-stat-ring-block { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* ---------- Closing CTA ---------- */
#main .hw-cta-band {
  position: relative;
  overflow: hidden;
}
#main .hw-cta-band::before {
  content: "";
  position: absolute; top: -40%; left: 50%; transform: translateX(-50%);
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(143, 176, 134, 0.35), transparent 70%);
  pointer-events: none;
}
#main .hw-cta-band > * { position: relative; z-index: 1; }
#main .cta-band .btn-primary { position: relative; overflow: hidden; }
#main .cta-band .btn-primary::after {
  content: "";
  position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(115deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left .6s ease;
}
#main .cta-band .btn-primary:hover::after { left: 130%; }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  #main .hw-stat-ring-fill { transition: none; }
  #main .hw-gallery-media img { transition: none; }
  #main .hw-feature-card::before { transition: none; }
  #main .hw-feature-card .icon-tile { transition: none; }
  #main .cta-band .btn-primary::after { transition: none; }
  #main .btn:hover .hw-btn-arrow { transform: none; }
}

/* ---------- Small-screen tidy-up ---------- */
@media (max-width: 620px) {
  #main .hw-feature-card--featured { transform: none; }
  #main .hw-card-index { font-size: 2.4rem; }
}