/* Shared by the individual service pages (everything under Solutions except
   On-site Security and Mobile Patrol, which have their own sheets). Each page
   composes its own sequence of the sections below. Grey .sv-ph blocks mark
   where photography will go. The CSS check mark is the only icon. */
.sv-page { --sv-panel: #f3f5f9; --sv-line: #d3d9e6; --sv-ph: #c7cbd2; --sv-space: clamp(3.5rem, 8vw, 7rem); --sv-gutter: max(1.25rem, 3vw); color: var(--ink); font-size: 1.0625rem; }
.sv-wrap { width: 100%; max-width: 92rem; margin-inline: auto; padding-left: max(var(--sv-gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--sv-gutter), env(safe-area-inset-right, 0px)); }
.sv-narrow { max-width: 64rem; }
.sv-section { padding-block: var(--sv-space); }
.sv-alt { background: var(--sv-panel); }
.sv-dark { background: var(--ink); color: #fff; }

.sv-page h1 { max-width: 22ch; margin: 0; font-size: clamp(2.25rem, 4.6vw, 4rem); line-height: 1.08; letter-spacing: -.035em; }
.sv-page h1 span { display: block; margin-bottom: .5rem; color: var(--accent); font-family: var(--font-accent); font-size: clamp(.9375rem, 1vw, 1.0625rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.sv-page h2 { margin: 0 0 1.375rem; font-size: clamp(2rem, 3.8vw, 3.25rem); line-height: 1.1; letter-spacing: -.03em; }
.sv-page h3 { margin: 0 0 .625rem; font-size: clamp(1.25rem, 1.6vw, 1.5rem); line-height: 1.25; letter-spacing: -.015em; }
.sv-page p { margin: 0 0 1.125rem; font-size: clamp(1.0625rem, 1.15vw, 1.1875rem); line-height: 1.68; }
.sv-page p:last-child { margin-bottom: 0; }
.sv-muted { color: var(--muted); }
.sv-dark .sv-muted, .sv-dark p { color: rgb(255 255 255 / .86); }
.sv-eyebrow { display: block; margin: 0 0 .875rem; color: var(--accent); font-size: clamp(.9375rem, 1vw, 1.0625rem); font-weight: 700; letter-spacing: .08em; line-height: 1.4; text-transform: uppercase; }
.sv-dark .sv-eyebrow { color: #ff8da1; }
.sv-page .sv-lead { max-width: 60ch; color: var(--muted); font-size: clamp(1.125rem, 1.45vw, 1.3125rem); }
.sv-dark .sv-lead { color: rgb(255 255 255 / .88); }
.sv-head { max-width: 54rem; margin: 0 auto clamp(2.25rem, 4.5vw, 4rem); text-align: center; }
.sv-head .sv-lead { margin-inline: auto; }
.sv-head-left { display: grid; gap: 1rem 4rem; margin-bottom: clamp(2.25rem, 4.5vw, 4rem); }
.sv-head-left h2 { margin: 0; max-width: 20ch; }
.sv-actions { display: flex; flex-wrap: wrap; gap: .875rem; margin-top: 2rem; }
.sv-btn-light { border-color: #fff; background: #fff; color: var(--ink); }
.sv-btn-ghost { border-color: #fff; background: transparent; color: #fff; }

/* Image placeholders: flat grey at the ratio the final photo should use. */
.sv-ph { position: relative; overflow: hidden; width: 100%; min-width: 0; aspect-ratio: 4 / 3; background: var(--sv-ph); }
/* A photo dropped into a placeholder fills whatever box the layout gives it. */
.sv-ph > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A photo in a placeholder's slot keeps the slot's shape. */
.sv-media-img { width: 100%; min-width: 0; aspect-ratio: 4 / 3; object-fit: cover; }
.sv-media-img.sv-ph-wide { aspect-ratio: 16 / 9; }
/* Keep a photo's subject in view when the frame crops it: on the left or right of
   a wide photo in a tall or square frame, or near the top edge in a wide frame. */
.sv-media-left { object-position: 30% center; }
.sv-media-right { object-position: 65% center; }
.sv-media-edge-left { object-position: left center; }
.sv-media-edge-right { object-position: right center; }
.sv-media-top { object-position: center top; }
.sv-ph-wide { aspect-ratio: 16 / 9; }
.sv-ph-tall { aspect-ratio: 4 / 5; }
/* Close to square, for landscape-leaning photos shown in full (Security Audits). */
.sv-ph-wide-square { aspect-ratio: 10 / 9; }
.sv-ph-square { aspect-ratio: 1; }
.sv-ph-band { aspect-ratio: 4 / 3; }

/* Red check marks drawn by CSS so the lists stay plain text. */
.sv-checks { display: grid; gap: .8rem; margin: 1.75rem 0 0; padding: 0; list-style: none; }
.sv-checks li { position: relative; padding-left: 2.3rem; font-size: clamp(1.0625rem, 1.2vw, 1.1875rem); line-height: 1.5; }
.sv-checks li::before { content: ""; position: absolute; top: .1em; left: 0; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--accent); }
.sv-checks li::after { content: ""; position: absolute; top: calc(.1em + .32rem); left: .52rem; width: .4rem; height: .7rem; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }

/* Heroes. Each holds the page's H1 and lead only; actions come later. */
.sv-hero { position: relative; }
.sv-hero .sv-lead { margin: 1.25rem 0 0; }
/* Title box on a full-width placeholder, like the shared page banner. */
.sv-hero-box { display: flex; align-items: center; min-height: clamp(20rem, 40vw, 34rem); padding-block: 3rem; background: var(--sv-ph); }
.sv-hero-box .sv-hero-card { width: fit-content; max-width: min(100%, 46rem); padding: clamp(1.5rem, 3vw, 2.5rem); background: rgb(25 26 55 / .94); color: #fff; }
.sv-hero-box h1 span { color: #ff8da1; }
.sv-hero-box .sv-lead { color: rgb(255 255 255 / .9); }
/* Copy beside a placeholder. */
.sv-hero-split { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: center; padding-block: clamp(3rem, 7vw, 6rem); }
.sv-dark .sv-hero-split h1 span { color: #ff8da1; }
/* Centered navy copy over a wide placeholder that overlaps the next section. */
.sv-hero-center { padding-top: clamp(3.5rem, 8vw, 7rem); text-align: center; background: linear-gradient(var(--ink) 0 72%, #fff 72%); }
.sv-hero-center h1 { margin-inline: auto; color: #fff; }
.sv-hero-center h1 span { color: #ff8da1; }
.sv-hero-center .sv-lead { margin-inline: auto; color: rgb(255 255 255 / .88); }
.sv-hero-center .sv-ph, .sv-hero-img { max-width: 72rem; margin: clamp(2.5rem, 5vw, 4rem) auto 0; }
/* Faint white diagonal pinstripes on the navy part of a centered hero (Alarm Response),
   matching the navy panels on Contact Us and the homepage officer cards. */
.sv-hero-center.sv-hero-stripes { background: linear-gradient(transparent 0 72%, #fff 72%), repeating-linear-gradient(115deg, rgb(255 255 255 / .05) 0 2px, transparent 2px 14px), var(--ink); }
.sv-hero-img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
/* Red texture behind the centered hero (Parking Enforcement), under a light
   dark wash for text contrast; the white band still sits under the placeholder. */
.sv-hero-center.sv-hero-red { background: linear-gradient(#fff, #fff) left bottom / 100% 28% no-repeat, linear-gradient(rgb(20 6 10 / .3), rgb(20 6 10 / .3)), #8f1426 url("../images/bg.jpg") center top / cover no-repeat; }
.sv-hero-red h1 span { color: #fff; }
/* Big title and lead side by side above a full-width placeholder band. */
.sv-hero-stack { padding-top: clamp(3rem, 7vw, 6rem); }
.sv-hero-stack-text { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 4px solid var(--accent); margin-bottom: clamp(2rem, 4vw, 3rem); }
.sv-hero-stack .sv-lead { margin: 0; }
/* White title card resting on the bottom edge of a full placeholder. */
.sv-hero-overlay { display: flex; align-items: flex-end; min-height: clamp(22rem, 46vw, 38rem); padding-block: 3rem 0; background: var(--sv-ph); }
.sv-hero-overlay .sv-hero-card { width: 100%; max-width: 50rem; padding: clamp(1.75rem, 3.5vw, 3rem); border-top: 6px solid var(--accent); background: #fff; }
/* Ruled title on the light panel above a row of three placeholders. */
.sv-hero-rule { padding-block: clamp(3rem, 7vw, 6rem); background: var(--sv-panel); }
.sv-hero-rule-text { padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 6px solid var(--accent); }
.sv-hero-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.5rem, 1.5vw, 1.25rem); margin-top: clamp(2.5rem, 5vw, 4rem); }
/* Navy text column against a placeholder that runs to the screen edge. */
.sv-hero-side { display: grid; background: var(--ink); color: #fff; }
.sv-hero-side-text { padding: clamp(3rem, 7vw, 6rem) max(var(--sv-gutter), env(safe-area-inset-left, 0px)); }
.sv-hero-side-text h1 span { color: #ff8da1; }
.sv-hero-side .sv-lead { color: rgb(255 255 255 / .88); }
.sv-hero-side .sv-ph { height: 100%; min-height: 16rem; }

/* Copy beside a placeholder; --rev puts the placeholder first on wide screens. */
.sv-split { display: grid; gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.sv-split > * { min-width: 0; }
.sv-split-text > p:not(.sv-eyebrow) { max-width: 62ch; }

/* Large lead on the left, supporting paragraphs on the right. */
.sv-cols { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); }
.sv-cols h2 { max-width: 18ch; }

/* Main column beside a sticky list of the other services in its category. */
.sv-sidebar-layout { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.sv-main { min-width: 0; }
.sv-main > * + * { margin-top: clamp(2.5rem, 5vw, 4rem); }
.sv-main .sv-ph { margin-top: 0; }
.sv-main-block h3 { margin-top: 1.75rem; }
.sv-aside { display: grid; gap: 1.5rem; min-width: 0; }
.sv-aside-box { padding: clamp(1.5rem, 2.5vw, 2rem); border: 1px solid var(--sv-line); background: #fff; }
.sv-aside-box h2 { margin-bottom: 1rem; font-size: clamp(1.375rem, 1.8vw, 1.625rem); letter-spacing: -.015em; }
/* Overrides the shared nav list, which lays links out in a row. */
.sv-aside-links { display: block; margin: 0; padding: 0; list-style: none; }
.sv-aside-links li + li { border-top: 1px solid var(--sv-line); }
.sv-aside-links a { display: flex; min-height: 48px; align-items: center; padding-block: .625rem; color: inherit; font-weight: 700; text-decoration: none; }
.sv-aside-links a[aria-current="page"] { color: var(--accent); text-decoration: none; }

/* Numbered steps: --line joins them across wide screens, --boxed sets them on cards. */
.sv-steps { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
.sv-steps li { position: relative; min-width: 0; padding-left: 4.5rem; counter-increment: step; }
.sv-steps li::before { content: counter(step); position: absolute; top: 0; left: 0; display: flex; align-items: center; justify-content: center; width: 3.125rem; height: 3.125rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.sv-steps h3 { padding-top: .5rem; }
.sv-steps p { color: var(--muted); }
.sv-dark .sv-steps p { color: rgb(255 255 255 / .82); }
.sv-steps-boxed li { padding: clamp(1.5rem, 2.5vw, 2rem); padding-top: 5rem; border: 1px solid var(--sv-line); background: #fff; }
.sv-steps-boxed li::before { top: clamp(1.5rem, 2.5vw, 2rem); left: clamp(1.5rem, 2.5vw, 2rem); border-radius: 0; }
.sv-steps-boxed h3 { padding-top: 0; }
/* Large see-through numerals with a light blue outline (Security Assessments). */
.sv-steps-outline li { padding-top: 7.5rem; }
.sv-steps-outline li::before { width: auto; height: auto; background: none; color: #8db8e8; font-size: 5rem; line-height: 1; }
@supports (-webkit-text-stroke: 2px #8db8e8) {
  .sv-steps-outline li::before { color: transparent; -webkit-text-stroke: 2px #8db8e8; }
}

/* Vertical timeline on a red rule. */
.sv-timeline { position: relative; display: grid; gap: clamp(2rem, 4vw, 3rem); max-width: 52rem; margin: 0 auto; padding: 0 0 0 2.5rem; list-style: none; }
.sv-timeline::before { content: ""; position: absolute; top: .5rem; bottom: .5rem; left: .5rem; width: 3px; background: var(--accent); }
.sv-timeline li { position: relative; min-width: 0; }
.sv-timeline li::before { content: ""; position: absolute; top: .45rem; left: calc(-2rem - 1px); width: 1rem; height: 1rem; border: 3px solid var(--accent); border-radius: 50%; background: #fff; }
.sv-timeline-label { display: block; margin-bottom: .375rem; color: var(--accent); font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-timeline p { color: var(--muted); }

/* Rows that alternate placeholder and copy. */
.sv-zigzag { display: grid; gap: clamp(3rem, 7vw, 6rem); }
.sv-zig { display: grid; gap: clamp(1.75rem, 4vw, 4rem); align-items: center; }
.sv-zig > * { min-width: 0; }
.sv-zig p { max-width: 58ch; color: var(--muted); }

/* Card grids: plain, with a placeholder on top, or numbered. */
.sv-cards { display: grid; gap: clamp(1.25rem, 1.8vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.sv-card { min-width: 0; padding: clamp(1.75rem, 2.6vw, 2.5rem); border: 1px solid var(--sv-line); border-top: 4px solid var(--accent); background: #fff; color: var(--ink); }
.sv-card p { color: var(--muted); }
.sv-cards-media .sv-card { padding: 0; border-top-width: 1px; }
.sv-cards-media .sv-card-body { padding: clamp(1.5rem, 2.4vw, 2rem); }
.sv-cards-num { counter-reset: card; }
.sv-cards-num .sv-card { counter-increment: card; border-top: 0; border-left: 4px solid var(--accent); }
.sv-cards-num .sv-card::before { content: counter(card, decimal-leading-zero); display: block; margin-bottom: 1rem; color: var(--accent); font-family: var(--font-heading); font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; line-height: 1; }

/* Two options side by side; the featured one leads. */
.sv-compare { display: grid; gap: clamp(1.25rem, 2.4vw, 2rem); max-width: 72rem; margin-inline: auto; }
.sv-compare-card { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; padding: clamp(1.75rem, 3vw, 3rem); border: 1px solid var(--sv-line); background: #fff; }
.sv-compare-card > p { color: var(--muted); }
.sv-compare-card .sv-checks { flex: 1; align-content: start; margin-bottom: 2rem; }
.sv-compare-featured { border: 0; border-top: 6px solid var(--accent); box-shadow: 0 18px 44px rgb(18 22 42 / .1); }
.sv-checks-muted li::before { background: var(--muted); }

/* Comparison table; rows become labelled blocks on phones. */
.sv-table-wrap { max-width: 72rem; margin-inline: auto; }
.sv-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 1.0625rem; line-height: 1.5; }
.sv-table caption { padding-bottom: 1rem; color: var(--muted); text-align: left; }
.sv-table th, .sv-table td { padding: 1rem 1.25rem; border-bottom: 1px solid var(--sv-line); text-align: left; vertical-align: top; }
.sv-table thead th { background: var(--ink); color: #fff; font-family: var(--font-accent); }
.sv-table tbody th { font-family: var(--font-heading); }

/* Navy panel: heading on one side, a two-column check list on the other. */
.sv-panel { display: grid; gap: clamp(2rem, 5vw, 5rem); }
.sv-panel .sv-checks { margin-top: 0; }
.sv-dark .sv-checks li { color: #fff; }

/* A single large statement on a red rule. */
.sv-statement { max-width: 62rem; margin-inline: auto; padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 6px solid var(--accent); }
.sv-page .sv-statement p { font-family: var(--font-heading); font-size: clamp(1.5rem, 2.8vw, 2.375rem); font-weight: 700; line-height: 1.3; letter-spacing: -.02em; }

/* "Read the case study" line in the case study split below. */
.sv-page .sv-case-more { margin-top: 1rem; color: var(--accent); font-weight: 700; }
/* A single case study as a full-width split: the photo fills one half edge to
   edge, the text the other; the title link covers the whole section. */
.sv-case-split { position: relative; display: grid; background: var(--sv-panel); }
.sv-case-split-text { padding: var(--sv-space) max(var(--sv-gutter), env(safe-area-inset-right, 0px)) var(--sv-space) max(var(--sv-gutter), env(safe-area-inset-left, 0px)); }
.sv-case-split-text > * { max-width: 38rem; }
.sv-case-split h3 { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.sv-case-split h3 a { color: inherit; text-decoration: none; transition: color .2s ease; }
.sv-case-split h3 a::before { content: ""; position: absolute; inset: 0; }
.sv-case-split p:not([class]) { color: var(--muted); }
.sv-case-split:has(a:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; }
.sv-case-split h3 a:focus-visible { outline: none; }

/* Property types as wrapped tags. */
.sv-chips { display: flex; flex-wrap: wrap; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.sv-chips li { padding: .625rem 1.125rem; border: 1px solid var(--sv-line); border-radius: 999px; background: #fff; font-weight: 700; line-height: 1.3; }
.sv-dark .sv-chips li { border-color: rgb(255 255 255 / .3); background: transparent; color: #fff; }

/* Ruled rows: a heading on the left, its answer on the right. */
.sv-rows { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--sv-line); }
.sv-rows li { display: grid; gap: .5rem 3rem; padding-block: clamp(1.5rem, 3vw, 2.25rem); border-bottom: 1px solid var(--sv-line); }
.sv-rows h3 { margin: 0; }
.sv-rows p { color: var(--muted); }

/* Coverage levels as three cards; the middle one is featured. */
.sv-tiers { display: grid; gap: clamp(1.25rem, 2vw, 1.75rem); margin: 0; padding: 0; list-style: none; }
.sv-tier { display: flex; flex-direction: column; min-width: 0; padding: clamp(1.75rem, 3vw, 2.5rem); border: 1px solid var(--sv-line); background: #fff; }
.sv-tier .sv-checks { flex: 1; align-content: start; }
.sv-tier-label { display: block; margin-bottom: .5rem; color: var(--muted); font-size: .9375rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-tier-featured { border: 0; background: var(--ink); color: #fff; }
.sv-tier-featured .sv-tier-label { color: #ff8da1; }
.sv-tier-featured p, .sv-tier-featured .sv-checks li { color: rgb(255 255 255 / .9); }
/* Hover variant (Security Assessments): all cards start white and turn navy under the pointer
   or keyboard focus. Each card's link covers the whole card and opens the assessment request
   form with that option chosen. */
.sv-tiers-hover .sv-tier { position: relative; }
.sv-tier-link { display: inline-flex; align-self: flex-start; align-items: center; gap: .5rem; margin-top: 1.75rem; color: var(--accent); font-weight: 700; letter-spacing: .06em; text-decoration: none; text-transform: uppercase; font-size: .9375rem; transition: color .35s ease; }
.sv-tier-link::before { content: ""; position: absolute; inset: 0; }
.sv-tier-link::after { content: "\2192"; transition: transform .35s cubic-bezier(.22, 1, .36, 1); }
.sv-tier-link:focus-visible { outline: none; }
.sv-tiers-hover .sv-tier:focus-within { border-color: var(--ink); background: var(--ink); color: #fff; outline: 3px solid var(--accent); outline-offset: 3px; }
.sv-tiers-hover .sv-tier:focus-within .sv-tier-label, .sv-tiers-hover .sv-tier:focus-within .sv-tier-link { color: #ff8da1; }
.sv-tiers-hover .sv-tier:focus-within p, .sv-tiers-hover .sv-tier:focus-within .sv-checks li { color: rgb(255 255 255 / .9); }
.sv-tiers-hover .sv-tier { transition: background-color .35s ease, border-color .35s ease, color .35s ease, transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease; }
.sv-tiers-hover .sv-tier-label, .sv-tiers-hover .sv-tier p, .sv-tiers-hover .sv-checks li { transition: color .35s ease; }
@media (hover: hover) and (pointer: fine) {
  .sv-tiers-hover .sv-tier:hover { border-color: var(--ink); background: var(--ink); color: #fff; transform: translateY(-.375rem); box-shadow: 0 18px 40px rgb(18 22 42 / .22); }
  .sv-tiers-hover .sv-tier:hover .sv-tier-label, .sv-tiers-hover .sv-tier:hover .sv-tier-link { color: #ff8da1; }
  .sv-tiers-hover .sv-tier:hover .sv-tier-link::after { transform: translateX(.375rem); }
  .sv-tiers-hover .sv-tier:hover p, .sv-tiers-hover .sv-tier:hover .sv-checks li { color: rgb(255 255 255 / .9); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-tiers-hover .sv-tier, .sv-tiers-hover .sv-tier-label, .sv-tiers-hover .sv-tier p, .sv-tiers-hover .sv-checks li, .sv-tier-link, .sv-tier-link::after { transition: none; }
  .sv-tiers-hover .sv-tier:hover .sv-tier-link::after { transform: none; }
  .sv-tiers-hover .sv-tier:hover { transform: none; }
}

/* Placeholder mosaic: one large tile and four small ones. */
.sv-mosaic { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.5rem, 1.2vw, 1rem); }
.sv-mosaic .sv-ph { aspect-ratio: 1; }
.sv-mosaic .sv-ph:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }

/* Full-width placeholder band with a copy card over it. */
.sv-band { display: flex; align-items: center; min-height: clamp(24rem, 42vw, 36rem); padding-block: clamp(3rem, 6vw, 5rem); background: var(--sv-ph); }
.sv-band-card { max-width: 40rem; padding: clamp(1.75rem, 3.5vw, 3rem); background: #fff; }
.sv-band-card p { color: var(--muted); }
.sv-band-dark .sv-band-card { background: var(--ink); color: #fff; }
.sv-band-dark .sv-band-card p { color: rgb(255 255 255 / .86); }
.sv-band.sv-band-lp-store { background: var(--sv-ph) url("../images/american-alliance-security-officer-furniture-store-patrol.webp") center / cover no-repeat; }
/* Alarm Response: on narrow screens the whole photo shows above the card,
   which overlaps only its bottom edge; from 64rem the card moves onto the
   empty brick wall on the right, frosted, so the officer and lock stay clear. */
.sv-band.sv-band-alarm { display: block; min-height: 0; padding-block: calc(55.75vw - 2.5rem) clamp(2.5rem, 6vw, 4rem); background: var(--sv-panel) url("../images/security-officer-checking-door-lock.webp") center top / 100% auto no-repeat; }
.sv-band-alarm .sv-band-card { position: relative; border-top: 4px solid var(--accent); box-shadow: 0 18px 44px rgb(18 22 42 / .14); }
@media (min-width: 64rem) {
  .sv-band.sv-band-alarm { display: flex; min-height: clamp(26rem, 40vw, 36rem); padding-block: clamp(3rem, 6vw, 5rem); background: var(--sv-ph) url("../images/security-officer-checking-door-lock.webp") center 35% / cover no-repeat; }
  .sv-band-alarm .sv-wrap { display: flex; justify-content: flex-end; }
  .sv-band-alarm .sv-band-card { max-width: 30rem; background: rgb(255 255 255 / .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
}
.sv-band.sv-band-perimeter { background: var(--sv-ph) url("../images/american-alliance-security-ford-escape-patrol-vehicle-at-secure-facility.webp") 70% center / cover no-repeat; }
.sv-hero-overlay.sv-hero-welfare { background: var(--sv-ph) url("../images/female-security-officer-outdoor-property-patrol.webp") center 30% / cover no-repeat; }

/* Heading that stays in view while its list scrolls past. */
.sv-sticky { display: grid; gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.sv-sticky-head { min-width: 0; }
.sv-sticky-list { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); min-width: 0; margin: 0; padding: 0; list-style: none; }
.sv-sticky-list li { padding-bottom: clamp(1.5rem, 3vw, 2.5rem); border-bottom: 1px solid var(--sv-line); }
.sv-sticky-list p { color: var(--muted); }

/* Columns divided by thin rules. */
.sv-pillars { display: grid; gap: 2rem; margin: 0; padding: 0; list-style: none; }
.sv-pillars li { min-width: 0; padding-top: 1.5rem; border-top: 3px solid var(--accent); }
.sv-pillars p { color: var(--muted); }
.sv-dark .sv-pillars p { color: rgb(255 255 255 / .82); }

/* Two halves: navy "who it's for" beside light "what you get". */
.sv-halves { display: grid; }
.sv-half { min-width: 0; padding: clamp(2.5rem, 6vw, 5.5rem) max(var(--sv-gutter), env(safe-area-inset-left, 0px)); }
.sv-half-dark { background: var(--ink); color: #fff; }
.sv-half-light { background: var(--sv-panel); }
.sv-half h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }

/* Mid-page calls to action. */
.sv-phone { display: block; color: inherit; font-family: var(--font-accent); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; text-decoration: none; }
.sv-cta-strip { background: var(--accent); color: #fff; }
.sv-cta-strip-inner { display: grid; gap: 1.5rem 3rem; align-items: center; padding-block: clamp(2.5rem, 5vw, 3.75rem); }
.sv-cta-strip h2 { margin: 0 0 .5rem; font-size: clamp(1.75rem, 3vw, 2.5rem); }
.sv-cta-strip p { color: rgb(255 255 255 / .92); }
.sv-cta-strip .sv-actions { margin-top: 0; }
.sv-cta-card { display: grid; gap: 1.5rem 3rem; align-items: center; max-width: 72rem; margin-inline: auto; padding: clamp(2rem, 4vw, 3.5rem); border-top: 6px solid var(--accent); background: #fff; box-shadow: 0 18px 44px rgb(18 22 42 / .1); }
.sv-cta-card h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); }
.sv-cta-card .sv-actions { margin-top: 0; }
.sv-cta-inline { padding: clamp(1.75rem, 3vw, 2.5rem); border: 2px solid var(--ink); }
.sv-cta-inline h2 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.sv-cta-phone { text-align: center; }
.sv-cta-phone .sv-phone { margin: .5rem 0 0; font-size: clamp(2.25rem, 5vw, 4rem); }
.sv-cta-phone .sv-lead { margin-inline: auto; }
.sv-cta-split { display: grid; }
.sv-cta-split > * { min-width: 0; padding: clamp(2.5rem, 5vw, 4.5rem) max(var(--sv-gutter), env(safe-area-inset-left, 0px)); }
.sv-cta-split h2, .sv-cta-split h3 { font-size: clamp(1.625rem, 2.6vw, 2.25rem); }
.sv-cta-split-quote { background: var(--accent); color: #fff; }
.sv-cta-split-quote p { color: rgb(255 255 255 / .92); }
.sv-cta-split-call { background: var(--ink); color: #fff; }
.sv-cta-split-call p { color: rgb(255 255 255 / .86); }

@media (hover: hover) and (pointer: fine) {
  .sv-btn-light:hover { border-color: #fff; background: transparent; color: #fff; }
  .sv-btn-ghost:hover { border-color: #fff; background: #fff; color: var(--ink); }
  .sv-case-split:hover h3 a { color: var(--accent); }
  .sv-cta-strip .page-btn:hover, .sv-cta-split-quote .page-btn:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
}

@media (max-width: 39.999rem) {
  .sv-actions .page-btn { width: 100%; }
  .sv-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .sv-table, .sv-table caption, .sv-table tbody, .sv-table tr, .sv-table th, .sv-table td { display: block; width: 100%; }
  .sv-table tr { border-bottom: 3px solid var(--sv-line); }
  .sv-table tbody th { background: var(--sv-panel); }
  .sv-table td { border-bottom: 1px solid var(--sv-line); }
  .sv-table td::before { content: attr(data-label); display: block; margin-bottom: .25rem; color: var(--muted); font-size: .875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
}

@media (min-width: 40rem) {
  .sv-cards, .sv-pillars { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-mosaic { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-mosaic .sv-ph:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .sv-ph-band { aspect-ratio: 21 / 9; }
  .sv-checks-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 2rem; }
  .sv-rows li { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); }
}

@media (min-width: 64rem) {
  .sv-hero-split, .sv-split, .sv-zig { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-split-rev > :first-child, .sv-zig:nth-child(even) > :first-child { order: 2; }
  .sv-hero-split-rev > :first-child { order: 2; }
  .sv-hero-stack-text, .sv-cols, .sv-head-left { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
  .sv-head-left { align-items: end; }
  .sv-hero-side { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(26rem, 38vw, 36rem); }
  .sv-hero-side-text { display: flex; flex-direction: column; justify-content: center; padding-left: max(var(--sv-gutter), env(safe-area-inset-left, 0px), calc((100vw - 92rem) / 2 + var(--sv-gutter))); }
  .sv-case-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(28rem, 38vw, 38rem); }
  .sv-case-split .sv-ph { height: 100%; aspect-ratio: auto; }
  .sv-case-split-text { display: flex; flex-direction: column; justify-content: center; padding-left: clamp(3rem, 6vw, 6rem); padding-right: max(var(--sv-gutter), env(safe-area-inset-right, 0px), calc((100vw - 92rem) / 2 + var(--sv-gutter))); }
  .sv-sidebar-layout { grid-template-columns: minmax(0, 1fr) 22rem; }
  .sv-sidebar-layout-left { grid-template-columns: 22rem minmax(0, 1fr); }
  .sv-sidebar-layout-left .sv-aside { order: -1; }
  .sv-aside { position: sticky; top: 7rem; }
  .sv-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sv-cards-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-steps { grid-template-columns: repeat(var(--steps, 4), minmax(0, 1fr)); }
  .sv-steps-line li { padding: 4.5rem 0 0; }
  .sv-steps-line li::after { content: ""; position: absolute; top: 1.5rem; left: 3.75rem; right: -1.25rem; height: 2px; background: var(--sv-line); }
  .sv-steps-line li:last-child::after { content: none; }
  .sv-compare, .sv-panel, .sv-halves, .sv-cta-split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-tiers { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .sv-sticky { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .sv-sticky-head { position: sticky; top: 7rem; }
  .sv-pillars { grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
  .sv-cta-strip-inner, .sv-cta-card { grid-template-columns: minmax(0, 1fr) auto; }
  .sv-half { padding-inline: clamp(2.5rem, 5vw, 5.5rem); }
  .sv-half:first-child { padding-left: max(var(--sv-gutter), env(safe-area-inset-left, 0px), calc((100vw - 92rem) / 2 + var(--sv-gutter))); }
  .sv-half:last-child { padding-right: max(var(--sv-gutter), env(safe-area-inset-right, 0px), calc((100vw - 92rem) / 2 + var(--sv-gutter))); }
  .sv-cta-split > * { padding-inline: clamp(2.5rem, 5vw, 5.5rem); }
}

/* Security Audits: the four audit areas in a row, then a self-check. Visitors
   tick the signs that apply and the white result card counts them beside the
   quote button. Light panel, white cards and red accents (no navy blocks). */
.sv-audit-areas { display: grid; gap: 1.75rem 2rem; margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0; list-style: none; }
.sv-audit-areas li { padding-top: 1.25rem; background: linear-gradient(var(--accent), var(--accent)) left top / 2.5rem 3px no-repeat, linear-gradient(var(--sv-line), var(--sv-line)) left top / 100% 1px no-repeat; }
.sv-audit-areas p { margin: 0; color: var(--muted); }
.sv-selfcheck { display: grid; gap: 1.5rem; margin-top: clamp(3rem, 6vw, 5rem); padding: clamp(1.25rem, 3.5vw, 3rem); background: var(--sv-panel); }
.sv-page .sv-selfcheck h2 { margin-bottom: .5rem; font-size: clamp(1.75rem, 2.6vw, 2.25rem); }
.sv-selfcheck fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.sv-selfcheck legend { margin-bottom: 1.25rem; padding: 0; color: var(--muted); }
.sv-selfcheck-items { display: grid; gap: .75rem; }
.sv-selfcheck-item { position: relative; display: flex; align-items: center; gap: .875rem; min-height: 3.5rem; padding: .875rem 1.125rem; border: 1px solid var(--sv-line); background: #fff; font-weight: 700; line-height: 1.35; cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.sv-selfcheck-item input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; }
.sv-selfcheck-box { flex: 0 0 auto; width: 1.375rem; height: 1.375rem; border: 2px solid #8b93a8; border-radius: 4px; background: #fff center / .8rem no-repeat; transition: background-color .15s ease, border-color .15s ease; }
.sv-selfcheck-item input:checked + .sv-selfcheck-box { border-color: var(--accent); background-color: var(--accent); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6l4.5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.sv-selfcheck-item input:focus-visible + .sv-selfcheck-box { outline: 3px solid var(--accent); outline-offset: 3px; }
.sv-selfcheck-item:has(input:checked) { border-color: var(--accent); background: rgb(203 25 57 / .05); box-shadow: inset 0 0 0 1px var(--accent); }
.sv-selfcheck-result { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1.25rem; padding: clamp(1.5rem, 3vw, 2.25rem); border-top: 4px solid var(--accent); background: #fff; box-shadow: 0 18px 40px rgb(18 22 42 / .08); }
.sv-selfcheck-result p { margin: 0; }
.sv-selfcheck-result .sv-selfcheck-count { margin-bottom: .75rem; color: var(--accent); font-family: var(--font-heading); font-size: clamp(2.5rem, 4vw, 3.25rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.sv-selfcheck-result .sv-selfcheck-text { margin-top: .25rem; color: var(--muted); }
.sv-selfcheck-call { color: var(--muted); font-size: 1rem; line-height: 1.5; }
.sv-selfcheck-call a { color: var(--ink); font-family: var(--font-accent); font-size: 1.25rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .sv-selfcheck-item:hover { border-color: #9aa3b8; }
  .sv-selfcheck-item:has(input:checked):hover { border-color: var(--accent); }
  .sv-selfcheck-call a:hover { color: var(--accent); }
}
@media (prefers-reduced-motion: reduce) {
  .sv-selfcheck-item, .sv-selfcheck-box { transition: none; }
}
@media (min-width: 40rem) {
  .sv-audit-areas, .sv-selfcheck-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .sv-audit-areas { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .sv-selfcheck { grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.5rem); align-items: stretch; }
}

/* Risk & Threat Assessments: "What you receive", an intro beside a sample of
   the findings sheet. Each finding carries a priority stripe and label (red,
   amber, grey for high, medium, low) so the ranking reads at a glance. */
.sv-report { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sv-report-intro h2 { max-width: 18ch; }
.sv-report-sheet { min-width: 0; padding: clamp(1.25rem, 2.5vw, 2rem); background: #fff; box-shadow: 0 18px 44px rgb(18 22 42 / .1); }
.sv-page .sv-report-label { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1.25rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-report-label span { color: var(--muted); font-size: .8125rem; font-weight: 400; letter-spacing: .04em; }
.sv-findings { display: grid; gap: 1rem; margin: 0; padding: 0; list-style: none; }
.sv-finding { --sv-priority: var(--muted); padding: 1rem 1.25rem; border: 1px solid var(--sv-line); border-left: 5px solid var(--sv-priority); }
.sv-finding-high { --sv-priority: var(--accent); }
.sv-finding-medium { --sv-priority: #9a5508; }
.sv-finding-low { --sv-priority: #6b7489; }
.sv-page .sv-finding h3 { margin: 0 0 .375rem; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); }
.sv-page .sv-finding p { margin: 0; }
.sv-page .sv-finding-priority { margin-bottom: .375rem; color: var(--sv-priority); font-size: .8125rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-page .sv-finding-meta { color: var(--muted); font-size: .9375rem; }
.sv-page .sv-finding-action { margin-top: .5rem; font-size: 1rem; }
@media (min-width: 64rem) {
  .sv-report { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); }
}

/* Security Planning: "without / with a plan" comparison, the plan's contents
   page, and a photo beside the three steps to get started. */
.sv-plan-why { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sv-plan-why h2 { max-width: 18ch; }
.sv-plan-compare { display: grid; min-width: 0; border: 1px solid var(--sv-line); }
.sv-plan-compare > div { padding: clamp(1.5rem, 2.5vw, 2rem); }
.sv-page .sv-plan-compare h3 { margin-bottom: 1.25rem; font-size: 1.125rem; letter-spacing: 0; }
.sv-plan-without { background: var(--sv-panel); }
.sv-page .sv-plan-without h3 { color: var(--muted); }
.sv-plan-without ul { display: grid; gap: .8rem; margin: 0; padding: 0; list-style: none; }
.sv-plan-without li { position: relative; padding-left: 2.3rem; color: var(--muted); line-height: 1.5; }
.sv-plan-without li::before, .sv-plan-without li::after { content: ""; position: absolute; top: .72em; left: .3rem; width: .85rem; height: 2px; background: #8b93a8; transform: rotate(45deg); }
.sv-plan-without li::after { transform: rotate(-45deg); }
.sv-plan-with { border-top: 4px solid var(--accent); background: #fff; }
.sv-plan-with .sv-checks { margin-top: 0; }

.sv-plan-doc { max-width: 64rem; margin-inline: auto; padding: clamp(1.5rem, 4vw, 3.5rem); background: #fff; box-shadow: 0 18px 44px rgb(18 22 42 / .1); }
.sv-page .sv-plan-doc-title { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1.5rem; padding-bottom: 1rem; border-bottom: 2px solid var(--ink); font-family: var(--font-heading); font-size: 1.25rem; font-weight: 700; }
.sv-plan-doc-title span { color: var(--muted); font-family: var(--font-accent); font-size: .875rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.sv-plan-chapters { display: grid; gap: 0 clamp(2rem, 4vw, 3.5rem); margin: 0; padding: 0; list-style: none; counter-reset: sv-chapter; }
.sv-plan-chapters li { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); align-content: start; padding-block: 1.25rem; border-bottom: 1px solid var(--sv-line); counter-increment: sv-chapter; }
.sv-plan-chapters li::before { content: counter(sv-chapter, decimal-leading-zero); grid-row: 1 / span 2; color: var(--accent); font-family: var(--font-heading); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.4; }
.sv-page .sv-plan-chapters h3 { margin: 0 0 .25rem; font-size: 1.125rem; letter-spacing: 0; }
.sv-page .sv-plan-chapters p { margin: 0; color: var(--muted); font-size: 1rem; }

.sv-plan-start { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.sv-plan-steps { display: grid; gap: 0; margin: 1.5rem 0 0; padding: 0; list-style: none; counter-reset: sv-step; }
.sv-plan-steps li { position: relative; padding: 0 0 1.5rem 3.25rem; counter-increment: sv-step; }
.sv-plan-steps li::before { content: counter(sv-step); position: absolute; top: 0; left: 0; display: grid; place-items: center; width: 2.125rem; height: 2.125rem; border-radius: 50%; background: var(--accent); color: #fff; font-family: var(--font-heading); font-size: .9375rem; font-weight: 700; }
.sv-plan-steps li:not(:last-child)::after { content: ""; position: absolute; top: 2.375rem; bottom: .25rem; left: 1.03rem; width: 2px; background: var(--sv-line); }
.sv-page .sv-plan-steps h3 { margin: .2rem 0 .25rem; font-size: 1.125rem; letter-spacing: 0; }
.sv-page .sv-plan-steps p { margin: 0; color: var(--muted); font-size: 1rem; }
.sv-plan-start .sv-actions { margin-top: .5rem; }

@media (min-width: 40rem) {
  .sv-plan-compare { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sv-plan-with { border-top: 0; border-left: 4px solid var(--accent); }
  .sv-plan-chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .sv-plan-why { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .sv-plan-start { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
}