/* ============================================================
   Smart Alarm Solutions — shared design system
   Black #0a0a0a · Gold #D4AF37 · Bodoni Moda + Archivo
   ============================================================ */
:root {
  --black: #0a0a0a;
  --black-2: #101010;
  --black-3: #161616;
  --gold: #D4AF37;
  --gold-bright: #E8C55A;
  --gold-dim: rgba(212, 175, 55, 0.35);
  --gold-faint: rgba(212, 175, 55, 0.12);
  --cream: #F2EDE3;
  --cream-dim: rgba(242, 237, 227, 0.62);
  --cream-faint: rgba(242, 237, 227, 0.38);
  --hairline: rgba(212, 175, 55, 0.22);
  --serif: 'Bodoni Moda', 'Didot', serif;
  --sans: 'Archivo', 'Helvetica Neue', sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--black);
  color: var(--cream);
  font-family: var(--sans);
  font-weight: 300;
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
::selection { background: var(--gold); color: var(--black); }
img { max-width: 100%; display: block; }

/* grain overlay */
body::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none; z-index: 9999;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------- type ---------- */
.kicker {
  font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.32em; text-transform: uppercase;
  color: var(--gold);
}
.section-num { font-family: var(--serif); font-style: italic; font-size: 0.95rem; color: var(--gold-dim); letter-spacing: 0.08em; }
h1, h2, h3 { font-family: var(--serif); font-weight: 500; line-height: 1.08; }
.gold-i { font-style: italic; color: var(--gold); }
.top-row { display: flex; align-items: baseline; gap: 1.6rem; margin-bottom: 1.4rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.7rem;
  font-family: var(--sans); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  padding: 1.05rem 2.2rem;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
}
.btn-gold { background: var(--gold); color: var(--black); }
.btn-gold:hover { background: var(--gold-bright); transform: translateY(-2px); box-shadow: 0 12px 40px rgba(212, 175, 55, 0.25); }
.btn-ghost { border: 1px solid var(--gold-dim); color: var(--gold); }
.btn-ghost:hover { border-color: var(--gold); background: var(--gold-faint); }

/* ---------- nav ---------- */
nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.4rem 4vw;
  transition: background 0.4s ease, padding 0.4s ease, border-color 0.4s ease;
  border-bottom: 1px solid transparent;
}
nav.scrolled, nav.solid {
  background: rgba(10, 10, 10, 0.92);
  backdrop-filter: blur(14px);
  padding: 0.9rem 4vw;
  border-bottom-color: var(--hairline);
}
.wordmark { text-decoration: none; line-height: 1.1; }
.wordmark img { height: 54px; width: auto; display: block; transition: height 0.4s ease; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5)); }
nav.scrolled .wordmark img { height: 44px; }
.wordmark .wm-top { font-family: var(--serif); font-size: 1.25rem; font-weight: 600; color: var(--cream); letter-spacing: 0.04em; display: block; }
.wordmark .wm-sub { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); display: block; }
.nav-links { display: flex; gap: 2rem; align-items: center; list-style: none; }
.nav-links > li { position: relative; }
.nav-links a {
  color: var(--cream-dim); text-decoration: none;
  font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  transition: color 0.25s;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-phone { border: 1px solid var(--gold-dim); padding: 0.55rem 1.2rem; color: var(--gold) !important; transition: background 0.25s, color 0.25s !important; }
.nav-phone:hover { background: var(--gold); color: var(--black) !important; }

/* dropdowns */
.has-drop > a::after { content: ' ▾'; font-size: 0.6rem; color: var(--gold-dim); }
.drop {
  position: absolute; top: calc(100% + 1rem); left: -1.4rem;
  min-width: 240px;
  background: rgba(12, 12, 12, 0.97);
  backdrop-filter: blur(16px);
  border: 1px solid var(--hairline);
  list-style: none;
  padding: 0.6rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
}
.has-drop:hover .drop, .has-drop:focus-within .drop { opacity: 1; visibility: visible; transform: translateY(0); }
.drop::before { content: ''; position: absolute; top: -1.05rem; left: 0; right: 0; height: 1.1rem; }
.drop li a {
  display: block; padding: 0.7rem 1.4rem;
  font-size: 0.68rem;
  transition: background 0.2s, color 0.2s, padding-left 0.2s;
}
.drop li a:hover { background: var(--gold-faint); padding-left: 1.7rem; }
.drop .d-label { display: block; padding: 0.6rem 1.4rem 0.3rem; font-size: 0.55rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--cream-faint); }
.nav-toggle { display: none; background: none; border: none; cursor: pointer; z-index: 102; }
.nav-toggle span { display: block; width: 26px; height: 2px; background: var(--gold); margin: 6px 0; transition: 0.3s; }

/* ---------- shared layout ---------- */
section { padding: 7.5rem 4vw; position: relative; }
.container { max-width: 1300px; margin: 0 auto; }
.section-head { max-width: 1300px; margin: 0 auto 4rem; }
.section-head h2 { font-size: clamp(2.4rem, 5.5vw, 4.4rem); }
.section-head p { max-width: 620px; color: var(--cream-dim); margin-top: 1.4rem; font-size: 1rem; }

.reveal { opacity: 0; transform: translateY(36px); transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1), transform 0.9s cubic-bezier(0.16, 1, 0.3, 1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- page hero (subpages) ---------- */
.page-hero {
  min-height: 72vh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 10rem 4vw 5rem;
  position: relative;
  isolation: isolate;
}
.page-hero .ph-img {
  position: absolute; inset: 0; z-index: -2;
  background-size: cover; background-position: center;
}
.page-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(to top, var(--black) 4%, rgba(10,10,10,0.55) 45%, rgba(10,10,10,0.35) 100%);
}
.page-hero .ph-inner { max-width: 1300px; margin: 0 auto; width: 100%; }
.page-hero h1 { font-size: clamp(3rem, 8vw, 6.8rem); margin-top: 1.2rem; }
.page-hero .lede { max-width: 600px; color: var(--cream-dim); font-size: 1.05rem; margin-top: 1.8rem; }
.page-hero .crumb { font-size: 0.65rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--cream-faint); }
.page-hero .crumb a { color: var(--cream-faint); text-decoration: none; }
.page-hero .crumb a:hover { color: var(--gold); }
.page-hero .crumb .sep { color: var(--gold-dim); margin: 0 0.6rem; }

/* ---------- feature list rows ---------- */
.feat-rows { list-style: none; border-top: 1px solid var(--hairline); }
.feat-rows li {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 1.6rem; align-items: baseline;
  padding: 1.7rem 0.4rem;
  border-bottom: 1px solid var(--hairline);
  transition: padding-left 0.3s ease, background 0.3s ease;
}
.feat-rows li:hover { padding-left: 1.2rem; background: var(--gold-faint); }
.feat-rows .n { font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--gold); }
.feat-rows .what { font-family: var(--serif); font-size: 1.4rem; }
.feat-rows .sub { display: block; font-family: var(--sans); font-size: 0.85rem; color: var(--cream-dim); margin-top: 0.3rem; }
.feat-rows .tag { font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); text-align: right; }

/* ---------- product spotlight ---------- */
.product {
  display: grid; grid-template-columns: 1fr 1fr; gap: 4.5rem;
  align-items: center;
  max-width: 1300px; margin: 0 auto;
  padding: 4.5rem 0;
  border-top: 1px solid var(--hairline);
}
.product:first-of-type { border-top: none; padding-top: 0; }
.product.flip .p-media { order: 2; }
.p-media { position: relative; }
.p-media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; filter: saturate(0.85) contrast(1.05); }
.p-media::after {
  content: ''; position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px var(--hairline);
  pointer-events: none;
}
.p-media .p-frame {
  position: absolute; top: -14px; left: -14px; right: 14px; bottom: 14px;
  border: 1px solid var(--gold-dim);
  pointer-events: none;
}
.product.flip .p-media .p-frame { left: 14px; right: -14px; }
.p-body .p-brand {
  display: inline-block;
  font-size: 0.62rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase;
  color: var(--black); background: var(--gold);
  padding: 0.4rem 1rem; margin-bottom: 1.4rem;
}
.p-body h3 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); margin-bottom: 1.1rem; }
.p-body > p { color: var(--cream-dim); font-size: 0.97rem; max-width: 520px; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 2rem; border-top: 1px solid var(--hairline); border-left: 1px solid var(--hairline); }
.spec {
  padding: 1.1rem 1.2rem;
  border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  font-size: 0.8rem; color: var(--cream-dim);
}
.spec b { display: block; font-family: var(--serif); font-style: italic; font-weight: 500; font-size: 1rem; color: var(--gold); margin-bottom: 0.2rem; }

.product.solo { grid-template-columns: 1fr; gap: 2rem; }
.product.solo .p-body > p { max-width: 720px; }
.spec-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 960px) { .spec-grid.cols-4 { grid-template-columns: 1fr 1fr; } }

/* ---------- category cards (homepage) ---------- */
.cat-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1.4rem; max-width: 1300px; margin: 0 auto; }
.cat-card {
  position: relative; display: block; text-decoration: none;
  overflow: hidden;
  min-height: 340px;
  isolation: isolate;
}
.cat-card .cc-img {
  position: absolute; inset: 0; z-index: -1;
  background-size: cover; background-position: center;
  filter: saturate(0.8) brightness(0.75);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1), filter 0.5s ease;
}
.cat-card:hover .cc-img { transform: scale(1.06); filter: saturate(1) brightness(0.9); }
.cat-card::before {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top, rgba(10,10,10,0.92) 0%, rgba(10,10,10,0.25) 55%, transparent 100%);
}
.cat-card .cc-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.8rem; z-index: 1; }
.cat-card .cc-kicker { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); }
.cat-card h3 { font-size: 1.7rem; color: var(--cream); margin-top: 0.4rem; }
.cat-card .cc-brands { font-size: 0.68rem; color: var(--cream-faint); letter-spacing: 0.1em; margin-top: 0.4rem; }
.cat-card .cc-arrow {
  position: absolute; top: 1.4rem; right: 1.6rem; z-index: 1;
  font-family: var(--serif); font-style: italic; font-size: 1.4rem; color: var(--gold);
  opacity: 0; transform: translateX(-8px);
  transition: opacity 0.3s, transform 0.3s;
}
.cat-card:hover .cc-arrow { opacity: 1; transform: translateX(0); }
.cat-card::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  box-shadow: inset 0 0 0 1px var(--hairline);
  transition: box-shadow 0.3s;
  pointer-events: none;
}
.cat-card:hover::after { box-shadow: inset 0 0 0 1px var(--gold-dim); }
.span-7 { grid-column: span 7; }
.span-5 { grid-column: span 5; }
.span-4 { grid-column: span 4; }
.span-6 { grid-column: span 6; }
.span-12 { grid-column: span 12; }

/* ---------- brand marquee ---------- */
.marquee {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  overflow: hidden; padding: 1.6rem 0;
  background: var(--black-2);
}
.marquee-track { display: flex; gap: 4.5rem; width: max-content; animation: slide 36s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes slide { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.marquee .brand {
  font-family: var(--serif); font-style: italic; font-size: 1.3rem; color: var(--cream-faint);
  white-space: nowrap;
  transition: color 0.3s;
}
.marquee .brand:hover { color: var(--gold); }
.marquee .dot { color: var(--gold-dim); font-size: 0.8rem; align-self: center; }

/* ---------- trust strip ---------- */
.trust-strip {
  border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline);
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--black-2);
}
.trust-strip .cell { padding: 2rem 1.5rem; text-align: center; border-right: 1px solid var(--hairline); }
.trust-strip .cell:last-child { border-right: none; }
.trust-strip .big { font-family: var(--serif); font-size: 1.5rem; color: var(--gold); font-style: italic; }
.trust-strip .small { font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-faint); margin-top: 0.3rem; }

/* ---------- process ---------- */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--hairline); border: 1px solid var(--hairline); max-width: 1300px; margin: 0 auto; }
.step { background: var(--black); padding: 2.6rem 2.2rem; transition: background 0.4s; }
.step:hover { background: var(--black-3); }
.step .s-num { font-family: var(--serif); font-style: italic; font-size: 2.6rem; color: var(--gold-dim); display: block; margin-bottom: 1.2rem; }
.step h3 { font-size: 1.35rem; margin-bottom: 0.7rem; }
.step p { font-size: 0.85rem; color: var(--cream-dim); }

/* ---------- quotes ---------- */
.quotes { background: var(--black-2); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); }
.quote-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; max-width: 1300px; margin: 0 auto; }
.quote { position: relative; padding-top: 2.6rem; }
.quote::before { content: '\201C'; position: absolute; top: -0.6rem; left: -0.4rem; font-family: var(--serif); font-size: 5.5rem; color: var(--gold-dim); line-height: 1; }
.quote p { font-size: 0.93rem; color: var(--cream-dim); font-style: italic; }
.quote .who { margin-top: 1.6rem; }
.quote .who .name { font-family: var(--serif); font-size: 1.1rem; color: var(--cream); font-style: normal; }
.quote .who .biz { font-size: 0.65rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--gold); margin-top: 0.25rem; }

/* ---------- CTA band ---------- */
.cta-band {
  text-align: center;
  padding: 8rem 4vw;
  background: radial-gradient(ellipse 60% 55% at 50% 0%, rgba(212, 175, 55, 0.09), transparent 60%), var(--black);
  border-top: 1px solid var(--hairline);
}
.cta-band h2 { font-size: clamp(2.6rem, 6vw, 5rem); margin: 1.2rem 0 0.8rem; }
.cta-band .big-phone {
  display: inline-block;
  font-family: var(--serif); font-size: clamp(1.8rem, 4.5vw, 3.2rem);
  color: var(--gold); text-decoration: none; margin: 1.4rem 0 0.6rem;
  border-bottom: 1px solid var(--gold-dim);
  transition: border-color 0.3s, color 0.3s;
}
.cta-band .big-phone:hover { color: var(--gold-bright); border-color: var(--gold); }
.cta-band .promise { color: var(--cream-dim); font-size: 0.95rem; max-width: 480px; margin: 1.4rem auto 2.4rem; }

/* ---------- related pages ---------- */
.related { border-top: 1px solid var(--hairline); }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; max-width: 1300px; margin: 0 auto; }
.related .cat-card { min-height: 240px; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--hairline); padding: 4rem 4vw 3rem; background: var(--black-2); }
.foot-grid { max-width: 1300px; margin: 0 auto; display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 3rem; }
.foot-grid .f-word .wm-top { font-family: var(--serif); font-size: 1.4rem; color: var(--cream); }
.foot-grid .f-word .wm-sub { font-size: 0.58rem; font-weight: 600; letter-spacing: 0.5em; text-transform: uppercase; color: var(--gold); }
.foot-grid .f-word p { font-size: 0.8rem; color: var(--cream-faint); margin-top: 1.2rem; max-width: 280px; }
.foot-grid h4 { font-size: 0.62rem; letter-spacing: 0.3em; text-transform: uppercase; color: var(--gold); margin-bottom: 1.1rem; font-weight: 600; }
.foot-grid ul { list-style: none; }
.foot-grid ul li { margin-bottom: 0.55rem; }
.foot-grid ul a { color: var(--cream-dim); text-decoration: none; font-size: 0.82rem; transition: color 0.25s; }
.foot-grid ul a:hover { color: var(--gold); }
.foot-grid .f-contact p { font-size: 0.82rem; color: var(--cream-dim); margin-bottom: 0.55rem; }
.foot-grid .f-contact a { color: var(--cream-dim); text-decoration: none; }
.foot-grid .f-contact a:hover { color: var(--gold); }
.foot-legal {
  max-width: 1300px; margin: 3rem auto 0; padding-top: 1.6rem;
  border-top: 1px solid var(--hairline);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 1rem;
  font-size: 0.66rem; letter-spacing: 0.12em; color: var(--cream-faint);
}

/* ---------- responsive ---------- */
@media (max-width: 960px) {
  .nav-links {
    position: fixed; inset: 0;
    background: rgba(10,10,10,0.97); backdrop-filter: blur(16px);
    flex-direction: column; justify-content: center;
    gap: 1.6rem;
    transform: translateY(-100%);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 101;
    overflow-y: auto; padding: 5rem 0;
  }
  .nav-links.open { transform: translateY(0); }
  .nav-links a { font-size: 0.95rem; }
  .nav-toggle { display: block; }
  .nav-toggle.open span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
  .nav-toggle.open span:nth-child(2) { opacity: 0; }
  .nav-toggle.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
  .has-drop > a { display: none; }
  .drop {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: none; border: none; min-width: 0; padding: 0;
    display: flex; flex-direction: column; gap: 1.6rem; text-align: center;
  }
  .drop li a { padding: 0; font-size: 0.95rem; }
  .drop li a:hover { background: none; padding-left: 0; }
  .drop .d-label { display: none; }
  .trust-strip { grid-template-columns: 1fr 1fr; }
  .trust-strip .cell:nth-child(2) { border-right: none; }
  .trust-strip .cell:nth-child(-n+2) { border-bottom: 1px solid var(--hairline); }
  .cat-grid > * { grid-column: span 12 !important; }
  .cat-card { min-height: 260px; }
  .product { grid-template-columns: 1fr; gap: 2.4rem; padding: 3rem 0; }
  .product.flip .p-media { order: 0; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .quote-grid { grid-template-columns: 1fr; }
  .related-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr 1fr; }
  section { padding: 5rem 6vw; }
  .page-hero { min-height: 60vh; padding: 8rem 6vw 3.5rem; }
  .spec-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .process-grid { grid-template-columns: 1fr; }
  .foot-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}