/* One-page additions to the original Wired4Safety template. */
.service-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 32px; }
.service-card { border-top: 2px solid var(--teal); padding-top: 20px; }
.service-card .service-number { font-size: 11px; color: var(--muted); letter-spacing: .1em; }
.service-art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #fff; margin-top: 18px; border: 1px solid #dce5e1; }
.service-card h3 { font-size: 23px; margin: 22px 0 12px; }
.service-card p { font-size: 14px; color: var(--muted); }
.service-card a { margin-top: 16px; }
.connection-graphic { position: relative; padding: 42px; border: 1px solid #c7d5d4; background: #e9efec; }
.graph-caption { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 35px; }
.graph-caption span:last-child { display: flex; align-items: center; gap: 7px; }
.graph-caption i { height: 7px; width: 7px; border-radius: 100%; background: var(--teal); }
.graph-flow { display: grid; grid-template-columns: 1fr 45px 1fr 45px 1fr; gap: 16px; align-items: center; }
.graph-node { min-height: 190px; background: #fff; border: 1px solid #bfcfcb; padding: 26px; text-align: center; }
.graph-node:nth-of-type(2) { border-top: 3px solid var(--teal); }
.graph-node img { display: block; width: 100%; max-width: 300px; height: auto; aspect-ratio: 3 / 2; object-fit: contain; margin: 0 auto 20px; }
.graph-node strong { display: block; font-size: 19px; letter-spacing: -.03em; }
.graph-node small { display: block; font-size: 11px; color: var(--muted); margin-top: 10px; }
.graph-arrow { width: 100%; height: 12px; color: var(--teal); }
.ai-controls { display: flex; flex-wrap: wrap; gap: 10px; padding: 24px 0 0; margin: 0; list-style: none; }
.ai-controls li { border: 1px solid #bfcfcb; padding: 7px 12px; font-size: 11px; color: var(--muted); background: #fff; }
.ai-budget { margin-top: 40px; padding: 28px 32px; border-left: 3px solid var(--teal); background: #e9efec; }
.ai-budget h3 { font-size: 24px; margin: 0 0 10px; }
.ai-budget p { max-width: 850px; font-size: 14px; color: var(--muted); margin: 0; }
.family-links { display: flex; gap: 8px 24px; flex-wrap: wrap; margin-top: 20px; font-size: 13px; font-weight: 600; }
.family-links a { text-decoration: underline; text-underline-offset: 4px; }
.contact-details { flex-shrink: 0; max-width: 340px; }
.contact-details>a { display: block; margin-top: 14px; font-size: 15px; overflow-wrap: anywhere; }
.contact-details .button { display: inline-flex; }
.contact-details p { font-size: 12px!important; }
.contact-details address { font-style: normal; font-size: 12px; line-height: 1.8; margin-top: 15px; color: var(--muted); }
.security-home .security-contact { scroll-margin-top: 20px; }
.testimonial-viewport { display: grid; grid-template-columns: 1fr 1fr; overflow: visible; }
.testimonial-card blockquote { font-size: 27px; }
.testimonial-card .quote-context { font-size: 10px; color: var(--muted); margin-top: 14px; }
.site-footer .footer-bottom { display: flex; justify-content: space-between; gap: 15px; }
.site-header #mobile-nav a[href='#contact'] { background: var(--teal); color: white; border-radius: 5px; }
@media(max-width:900px) { .service-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } .graph-flow { gap: 10px; grid-template-columns: 1fr 20px 1fr 20px 1fr; } .graph-node { padding: 22px 12px; } .graph-node strong { font-size: 16px; } .connection-graphic { padding: 30px; } }
@media(max-width:620px) { .service-grid { grid-template-columns: 1fr; gap: 28px; } .service-card h3 { margin-top: 13px; } .graph-flow { grid-template-columns: 1fr; gap: 16px; } .graph-arrow { transform: rotate(90deg); width: 24px; margin: 0 auto; } .graph-node { min-height: 0; padding: 22px; } .graph-node img { margin-bottom: 12px; } .graph-caption { align-items: flex-start; font-size: 8px; gap: 12px; margin-bottom: 25px; } .connection-graphic { padding: 25px; } .testimonial-viewport { grid-template-columns: 1fr; } .contact-details { margin-top: 25px; max-width: none; } .security-home .mission-hero h1 { font-size: clamp(38px,10vw,62px); } .security-home .mission-hero-inner { padding-top: 240px; } }
@media(prefers-reduced-motion:reduce) { html { scroll-behavior: auto; } *,*::before,*::after { transition: none!important; } }